Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Playwright's `setContent` cannot handle query params which causes the
`scripts.js` to not run effectively.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Update `scripts.js` to accept hash params as well
- Update `scripts.js` to accept the dark class to set dark mode if dark
query or hash was not passed
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
How to test:
1. Verify that tests are passing
---------
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Issue number: internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
This pull request updates the design token build system and its
dependencies, simplifying the process and removing custom scripts in
favor of using the latest features of the `outsystems-design-tokens`
package. The changes modernize how design tokens are generated and
maintained, reducing custom code and leveraging upstream improvements.
Key changes include:
**Build Process Simplification:**
- The custom design token generation scripts
(`core/scripts/tokens/index.mjs` and `core/scripts/tokens/utils.mjs`)
have been removed. Token generation is now handled directly via the
`outsystems-design-tokens` package using an `npx` command in the
`build.tokens` script. This reduces maintenance overhead and keeps the
build process aligned with upstream best practices.
[[1]](diffhunk://#diff-0b9870c62ff80af860467e2541bba0b9ba5e7280b12bea6eeb124b1d174efbcfL1-L188)
[[2]](diffhunk://#diff-8b5c339d9dd13300954577213f84a443321a0d6477acd7553787fbcc00ce8cabL1-L320)
[[3]](diffhunk://#diff-7f67769260741e2563407af949f7e54fbf0431d1c607933f6e8a8094e3219e26L83-R82)
**Dependency Updates:**
- Updated `outsystems-design-tokens` to version `1.3.3` and
`style-dictionary` to version `5.1.1` in both `package.json` and
`package-lock.json`. This ensures compatibility with the latest features
and bug fixes and removes the need to specify `style-dictionary`
directly as a dependency.
[[1]](diffhunk://#diff-4ff996db8bece1eded512c3b97a6bde33622f94bb387634ef32496d832d57744L47-L52)
[[2]](diffhunk://#diff-4ff996db8bece1eded512c3b97a6bde33622f94bb387634ef32496d832d57744L9592-R9598)
[[3]](diffhunk://#diff-4ff996db8bece1eded512c3b97a6bde33622f94bb387634ef32496d832d57744L11137-R11138)
[[4]](diffhunk://#diff-7f67769260741e2563407af949f7e54fbf0431d1c607933f6e8a8094e3219e26L69-L74)
**SCSS Utility Import:**
- The `@forward "../../foundations/ionic.utility";` statement was
removed from `core/src/css/ionic/utils.bundle.ionic.scss`, likely
because the utility SCSS is now generated and managed by the new token
build process.
Removed CSS tests for Ionic theme, as they relied heavily on testing the
effect of the utility-classes, that are no longer created on the ionic
scope.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
---------
Co-authored-by: ionitron <hi@ionicframework.com>
- Updates the token interface to accept a numeric scale.
- Updates the base tokens to use the new interface.
- Adds tokens for the `ionic` theme based on the existing design tokens.
- Excludes certain keys (`enabled`, `rippleEffect`, `formHighlight`) from the generated CSS variables.
- Removes the `--background` and `--ion-background-color` from the global `ionic` theme overrides, allowing it to use the dark palette.
- Removes the different Ionic colors from the `ionic` theme, ensuring all of the themes use the same named (primary, secondary, etc.) colors.
- Updates the testing script to pull in the tokens based on the theme & palette passed to the URL.
- Adds a new npm script, `build.themes`, to generate the theme files.
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
The default (iOS/MD) bundle is removed from the tests for the `ionic` theme because it adds global component styles that the `ionic` theme does not need. The missing utility files are imported, and padding/margin classes are generated from the design tokens, as many tests rely on `ion-padding` and `ion-text-center` being available. This change ensures the `ionic` theme includes the same classes offered in our documentation: https://ionicframework.com/docs/layout/css-utilities.
Issue number: internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
When consuming the Ionic Framework and using the Ionic Theme, the color
attribute was still not working as the color css was not present.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Now the ion-color maps are correctly imported on the Ionic `dist`
related folder and not the on the `md/ios` ones.
- Changed the usage of `map.get` to `map-get` to avoid issues with the
usage of `@use` and `@forward`. This seems to have no impact on the
compilation and I believe its a better code convention, as map-gets are
a native scss function that doesn't need to be imported.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <maria@ionic.io>
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
If a dev wants to view a test page in dark mode, they have to manually
add the styles. This can lead to a slowdown. Plus they can't use
Playwright's `goto` to test both light and dark. In order to test dark
mode with Playwright, the dev would need to use `setContent` instead of
`goto`.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Dark mode can be added to any page by appending `palette=dark` to the
URL.
- The param will be used to add a link tag with the correct palette
file.
- Playwright will load the correct palette file when a dev uses `goto`
and `{ themes: ['dark'] }`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
I recommend using badge to try this out. It already has a `goto` in the
basic tests.
