mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 09:34:19 +08:00
feat(tokens): update tokens architecture and usage (#29950)
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. --> - Removed old tokens stored on foundations folder. Now the jsons with the tokens come from the new dependency: https://github.com/OutSystems/outsystems-design-tokens. - The tokens from UX Team completely changed the structure and in some cases the values. Everything was replaced on the project to use the new tokens. - Snapshots updated and differences reviewed with UX Team. A fix was done on the testing css, to make sure the correct _Inter_ font-family was actually used. This resulted in some differences on the text for some componentes, that had snapshots with the native fonts. - Removed generation of scss file on tokens script, that contained the :root selector with the custom CSS properties, as they were not used on the Ionic context. - Removed generation of html file with tokens preview, as there wasn't a great value on this (we have storybook on other contexts) and it allowed to reduce a lot of code and complexity from the tokens script. - The token command was adapted to use the command available from the https://github.com/OutSystems/outsystems-design-tokens package, using the `--config` prop, where we pass the path to our Ionic token script, where we generate the needed scss variables and utility-classes (by default the tokens repo tries to be as agnostic as possible, and only generates the css variables, without the prefix and added details we need on the Ionic side). - Removed the token command from the npm run build, as it unnecessarily added time on that command to run. Besides, it should not be common that we need to run this command in the future. - Updated reference to latest version of [Style Dictionary 4.1.3](https://v4.styledictionary.com/version-4/statement/). Version 4 comes with a lot of improvements, but also breaking-changes, so it was needed to adapt the tokens script. The code on the script is also now cleaner. - Changed prefix from ionic to ion. The term ionic was used initially, to help differentiate from the old ios/md stuff, but I feel with the current scss architecture, that is no longer needed, and we can use the same prefix across themes. This requires to run `npm install ` again. ## Does this introduce a breaking change? - [x] Yes - [ ] 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> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
This commit is contained in:
@ -49,8 +49,15 @@ html.ios.ios {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "iosTestingFont", sans-serif;
|
||||
}
|
||||
|
||||
:root.ionic {
|
||||
/* Override above styles for testing scopes */
|
||||
:root.ionic,
|
||||
:root.ionic.ios,
|
||||
:root.ionic.md,
|
||||
html.ionic,
|
||||
html.ionic.ios,
|
||||
html.ionic.md {
|
||||
--ionic-global-background-color: var(--background);
|
||||
--ion-font-family: initial;
|
||||
}
|
||||
|
||||
/**
|
||||
|
Reference in New Issue
Block a user