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
File tree
57 files changed
+2458
-1067
lines changed- 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.
57 files changed
+2458
-1067
lines changedSome generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
0 commit comments