Skip to content

Commit 41953b0

Browse files
feat(themes): add base tokens and update colors to use new token system (#30692)
## What is the current behavior? The colors are generated using the Sass functions and a `$colors` map and the design tokens are undefined. ## What is the new behavior? - Moves the helper & theme `spec` tests into the `test` directory with the other ones - Defines base tokens for the default, light & dark tokens - Defines the interfaces for the different theme objects - Adds new theme utility functions to mix colors together (used for shade & tint) and convert hex to rgb - Updates the functions that generate the design token variables to: - Automatically generate the rgb variables without needing to set them manually - Create the color classes (`.ion-color-primary`, `.ion-color-secondary`, etc.) which are used by the components to change their color via the `color` property - Adds 3 e2e tests to verify visually that the design tokens are generating properly: Basic, Color & Typography - Removes the old Sass mixins/functions & updates the ones we still need to pull from the design tokens instead of the `$colors` map ## Does this introduce a breaking change? - [x] Yes - [ ] No This adds `foreground` as a required variant to the colors now. Currently foreground is only used by clear buttons but it should be used by all text-only components. This will break for any apps overriding `--ion-color-primary` without `--ion-color-primary-foreground`. We will have to look into improving the migration path on this later. ## Other information - [Themes / Basic](https://ionic-framework-git-fw-6748-ionic1.vercel.app/src/themes/test/basic) - [Themes / Color](https://ionic-framework-git-fw-6748-ionic1.vercel.app/src/themes/test/color) - [Themes / Typography](https://ionic-framework-git-fw-6748-ionic1.vercel.app/src/themes/test/typography) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: ionitron <hi@ionicframework.com>
1 parent 93d7550 commit 41953b0

File tree

57 files changed

+2458
-1067
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+2458
-1067
lines changed

core/scripts/testing/styles.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
886 Bytes
Loading
-499 Bytes
Loading
792 Bytes
Loading
2.52 KB
Loading
3.99 KB
Loading
5.83 KB
Loading
112 Bytes
Loading
158 Bytes
Loading
Loading

0 commit comments

Comments
 (0)