mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 06:57:02 +08:00
41953b0b3b
## 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>