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

[brandyscarney]

Issue number: internal

---

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

• Themes / Basic
• Themes / Color
• Themes / Typography

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
ionic-framework	Ready	Preview	Comment	Oct 1, 2025 3:42pm

[thetaPC]

LGTM

[ShaneK]

Looking really good! Great work!