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

[BenOsodrac]

Issue number: internal

---

What is the new behavior?

This pull request updates the color and background variables across many Ionic component styles to use new design system tokens, improving consistency and maintainability. It also temporarily skips several visual regression tests for the datetime component due to a known issue (FW-6769).

Design System Token Migration:

• Updated --color and --background variables in many components (e.g., card, card-title, list-header, item, segment, radio, select, textarea, input, checkbox, chip, datetime, item-options, searchbar) to use the new globals.$ion-text-default and globals.$ion-bg-surface-default tokens instead of older primitives. This change ensures consistent theming and easier future maintenance. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22]

Test Suite Maintenance:

• Temporarily skipped several E2E visual regression tests for datetime and item components, referencing TODO FW-6769, to prevent test failures while an upstream issue is addressed. [1] [2] [3] [4] [5]

There're some snapshots updates that seem to have no visible differences, so I would say its ok to accept the new ones.

Does this introduce a breaking change?

• Yes
• No

[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 22, 2025 3:52pm

[brandyscarney]

Mostly questions here clarifying the variables being used, but it looks good overall! 🚀

[brandyscarney]

Added a small suggestion to tie in with the global theming but since this will likely be re-worked with the modular work it is not a blocker. 👍