Commit 41953b0
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
57 files changed
Lines changed: 2458 additions & 1067 deletions
File tree
- core
- scripts/testing
- src
- components
- buttons/test/a11y/buttons.e2e.ts-snapshots
- button/test
- clear/button.e2e.ts-snapshots
- states/button.e2e.ts-snapshots
- input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots
- item/test/dividers/item.e2e.ts-snapshots
- toolbar/test/basic/toolbar.e2e.ts-snapshots
- css
- ionic
- palettes
- global
- themes
- base
- ionic
- test/colors
- native
- test/colors
- test
- basic
- color
- typography
- utils
- test
Some content is hidden
Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
0 commit comments