feat(themes): add base tokens and update colors to use new token system #30692

brandyscarney · 2025-09-23T20:34:05Z

Issue number: internal

⚠️ This build fails due to needing the screenshot updates ⚠️

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?

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

vercel · 2025-09-23T20:34:11Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
ionic-framework	Ready	Preview	Comment	Sep 29, 2025 7:04pm

…cts with the ionic theme

core/scripts/testing/styles.css

core/src/utils/theme.ts

core/src/utils/test/theme.spec.ts

…ests

core/src/utils/theme.ts

core/src/utils/test/theme.spec.ts

thetaPC

LGTM

github-actions bot added the package: core @ionic/core package label Sep 23, 2025

vercel bot deployed to Preview September 23, 2025 20:42 View deployment

vercel bot deployed to Preview September 23, 2025 21:55 View deployment

vercel bot deployed to Preview September 24, 2025 13:52 View deployment

brandyscarney force-pushed the FW-6748 branch from 128a092 to 0f242f0 Compare September 24, 2025 14:23

vercel bot deployed to Preview September 24, 2025 14:28 View deployment

brandyscarney force-pushed the FW-6748 branch from 9ada7e1 to 7ee659c Compare September 24, 2025 14:51

vercel bot deployed to Preview September 24, 2025 14:54 View deployment

vercel bot deployed to Preview September 24, 2025 20:42 View deployment

vercel bot deployed to Preview September 25, 2025 13:59 View deployment

vercel bot deployed to Preview September 25, 2025 16:24 View deployment

vercel bot deployed to Preview September 25, 2025 18:02 View deployment

brandyscarney force-pushed the FW-6748 branch from 3e1a62c to 6a3020d Compare September 25, 2025 19:20

vercel bot deployed to Preview September 25, 2025 19:24 View deployment

brandyscarney force-pushed the ionic-modular branch from be45f4a to 93d7550 Compare September 25, 2025 19:40

brandyscarney added 14 commits September 25, 2025 15:40

test(utils): move spec tests into test

06f42b0

test(themes): add basic, color and typography tests

f565952

feat(themes): define base tokens, color functions and interfaces

58b006d

feat(themes): remove old $colors map and functions and use new tokens

5435bb7

style: lint

2183a24

fix(theme): update foreground to use proper vars and fix test

81e8418

fix(theme): don't generate rgb variables for component level overrides

f74883d

fix(theme): use proper contrast colors

82d4b82

fix(themes): do not fallback to base color for foreground

783b653

fix(themes): update dark palette support for other enabled values

92ba2c0

docs(themes): update the examples of the ion-color function

fe5936c

refactor(themes): remove the default font family for now as it confli…

c282d3e

…cts with the ionic theme

fix(themes): enforce foreground as a required variant

e00a7b3

test(themes): remove outdated test and

f5bb210

brandyscarney added 2 commits September 25, 2025 15:41

fix(themes): set the ionic colors to avoid screenshot diffs

1acb123

test(themes): skip failing a11y tests until we finalize colors

d7470aa

brandyscarney force-pushed the FW-6748 branch from 0e63ac9 to d7470aa Compare September 25, 2025 19:41

vercel bot deployed to Preview September 25, 2025 19:44 View deployment

brandyscarney mentioned this pull request Sep 25, 2025

chore(): add updated snapshots #30699

Open

brandyscarney marked this pull request as ready for review September 25, 2025 20:19

brandyscarney requested a review from a team as a code owner September 25, 2025 20:19

brandyscarney requested a review from thetaPC September 25, 2025 20:19

thetaPC reviewed Sep 25, 2025

View reviewed changes

core/scripts/testing/styles.css Show resolved Hide resolved

thetaPC reviewed Sep 25, 2025

View reviewed changes

core/src/utils/theme.ts Show resolved Hide resolved

core/src/utils/theme.ts Show resolved Hide resolved

core/src/utils/test/theme.spec.ts Show resolved Hide resolved

core/src/utils/test/theme.spec.ts Show resolved Hide resolved

brandyscarney added 2 commits September 29, 2025 12:04

chore(theme): add warnings for an invalid color value and tests

768cfa8

refactor(theme): split parseHex out to a reusable function and adds t…

88ff275

…ests

vercel bot deployed to Preview September 29, 2025 16:34 View deployment

test(theme): add scoped element test

fbe7afb

vercel bot deployed to Preview September 29, 2025 16:40 View deployment

test(theme): add checks for the warning messages

dab8950

vercel bot deployed to Preview September 29, 2025 16:46 View deployment

thetaPC reviewed Sep 29, 2025

View reviewed changes

core/src/utils/theme.ts Show resolved Hide resolved

core/src/utils/test/theme.spec.ts Show resolved Hide resolved

core/src/utils/test/theme.spec.ts Show resolved Hide resolved

test(theme): handle mixed digit hex colors and mixed hash usage

ca30f10

vercel bot deployed to Preview September 29, 2025 19:04 View deployment

thetaPC approved these changes Sep 29, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(themes): add base tokens and update colors to use new token system #30692

feat(themes): add base tokens and update colors to use new token system #30692

Uh oh!

brandyscarney commented Sep 23, 2025 •

edited

Loading

Uh oh!

vercel bot commented Sep 23, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

thetaPC left a comment

Uh oh!

Uh oh!

feat(themes): add base tokens and update colors to use new token system #30692

Are you sure you want to change the base?

feat(themes): add base tokens and update colors to use new token system #30692

Uh oh!

Conversation

brandyscarney commented Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel bot commented Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

thetaPC left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

brandyscarney commented Sep 23, 2025 •

edited

Loading

vercel bot commented Sep 23, 2025 •

edited

Loading