feat(tokens): update tokens usage to reflect UI arquictecture

[BenOsodrac]

Issue number: internal

---

What is the new behavior?

This pull request updates the color and background tokens throughout the Ionic component styles to use new design system variables, moving away from legacy primitives. The changes ensure a more consistent look and easier future theming by referencing centralized tokens for text color and background surfaces. Most components now use globals.$ion-text-default for text color and globals.$ion-bg-surface-default for backgrounds.

Design Token Migration

• Updated text color across all components to use globals.$ion-text-default instead of globals.$ion-primitives-neutral-1200. This affects styles for buttons, cards, inputs, labels, toggles, radio buttons, chips, and more. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17]
• Updated background color tokens to use globals.$ion-bg-surface-default instead of globals.$ion-primitives-base-white for cards, items, inputs, radio buttons, toggles, chips, segments, toolbars, and more. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12]

Global Styles and Defaults

• Set the default background color for all components in core.ionic.scss to globals.$ion-bg-surface-default, ensuring unified appearance.
• Updated the body text color to default to globals.$ion-text-default if --ion-text-color is not set, improving fallback behavior.

Component-Specific Adjustments

• Adjusted border and checkmark colors in chips and checkboxes to use new tokens, aligning with the updated design system. [1] [2]
• Updated tab bar background color to use the new surface token for consistency with other components.

Does this introduce a breaking change?

• Yes
• No

Other information

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
ionic-framework	Ready	Preview	Comment	Sep 10, 2025 3:38pm