mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-16 01:52:19 +08:00
4 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
| 1e757513ce |
feat(ionic-theme): improve scss architecture for ionic theme (#29345)
Issue number: None --------- <!-- 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 PR follows the architectural changes defined on the _SCSS Architecture Design Doc_. Due to some of the developments done in the meantime, not everything that was defined on that document was followed and some sections were simplified. Overall, there were two guidelines that supported the work on this PR: - Have no impact on the current scss partials & CSS architecture for the `md/iOS` themes. - Make everything related to the new `Ionic` Theme separated. Based on these, here're the changes made: **On Themes folder (private):** - Renamed current internal scss partials on src/themes, related to md/iOS, to `native.*.scss` and move them to a new folder, called `native`. Updated imports on all framework. - Removed the ionic prefix from the name of the mixins and function partials on src/themes. Updated imports on all framework. - Created new folder, named ionic, inside src/themes. This holds the `ionic.globals.scss`, with all the mixins and functions forwarded, to be used on other scopes. - Replaced on already created Ionic theme files, the usage of tokens and mixins with @use, to instead _@use "../../themes/ionic/ionic.globals.scss" as globals;_. This ensures an equal approach is followed everywhere and also makes it easier to change the files imported or paths, in the future, as its all in the same global file. - Updated the foundations `readMe` file, with the new process for using globals.  **On css folder (public):** - Created new folder, named `ionic`, inside src/css. This holds all the files related exclusively to Ionic Theme, following the same structure as exists now for md/iOS, with a core, a bundle, utils, etc. Some files were a bit duplicated, to eliminate imports from ios or md theme partials. The only file common to both Themes is the `normalize.scss`. - No folder structure or renamings were done on the existing output, to prevent breaking-changes for developers already making imports from this folder. - Updated typography and link partials to use globals instead of tokens. - Changed `font-size` styles on typography to be on `body`, instead of `html`, to enable correct support of accessibility features on browsers and devices, related to `font-size`.  **Other changes related to global styles new architecture:** - Updated margin & padding utility-classed generated by token, to include css variables and padding/margin mixins. - Updated link test to use new global Ionic bundle, correct utility-class on ion-content and updated snapshots. The font-size changed to 16, as its now the default on the body. - Updated typography snapshots. - Updated prettier format on all scss files. Later on we should make sure this is equal for all team members. ## 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: Sean Perkins <sean@ionic.io> |
|||
| 2414b78bef |
feat(tokens): generate rgb variants of colors (#29331)
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. --> The generated design tokens only generate HEX output of colors. This prevents us from using the color tokens when we need to manipulate the alpha channel of the color. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Generate a rgb color token and sass variable for each existing color token. - These "rgb" formatted variables are an existing practice to Ionic Framework. Developers are expected to pass the variable into an `rgb` or `rgba` function. ## 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. --> |
|||
| a8c06c118e |
fix(design-tokens): Add missing tokens and update usage on Typography (#29283)
<!-- 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. --> - Updated missing font tokens on `_designTokens.json`. - Updated `tokens.js` script for building utility-classes for newly added font tokens. - Fixed space token typo. - Updated ionic.typography file to start using design tokens and remove duplicated code from the tokens generated files. - Updated Ionic Typography tests ## 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. --> |
|||
| 19f7be8877 |
feat(tokens): add design tokens architecture (#29245)
<!-- 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. --> Following the Design Doc for the new Ionic Design System, an architecture for Design Tokens was added. 1. Added new `foundations` folder inside the `src`, to hold all the tokens related files. 2. On this file, a json with all the tokens for the new Design System was added. The format followed was the one suggested on the [W3C draft](https://design-tokens.github.io/community-group/format/). 3. Added a dev dependency for [Styles Dictionary](https://amzn.github.io/style-dictionary/#/), version 3.9.2. 4. Added a tokens.js script that will take care of transforming the json tokens into the desired output. For now, three files are being generated: ionic.vars.css (:root with all CSS Variables); ionic.vars.css (scss variables for each token) and ionic.utility.css (a new utility-class for each token) 5. Added the script `npm run build.tokens` to package.json, that will generate the three files mentioned above. For now, all these changes bring no impact to the rest of the Framework, as these variables are not yet being consumed. The `margin`, `padding` and `border-radius` were removed from the prohibited properties on lint, to prevent lint errors with the new utility-classes. This is very open to discussion/feedback if it's seen as not ok. The `build` command now includes the `build.tokens` script, to make sure the files are always generated, in case someone forget to run the command, after changing the json file! ## 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. 6. 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. --> --------- Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> |
