Skip to content

Conversation

BenOsodrac
Copy link
Contributor

@BenOsodrac BenOsodrac commented Sep 10, 2025

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 Token Migration:

  • Updated --color variables from globals.$ion-primitives-neutral-1200 to globals.$ion-text-default in components including card, card-title, checkbox, chip, datetime, input, item, list-header, radio, searchbar, select, textarea, and toggle.
  • Updated --background and related background variables from globals.$ion-primitives-base-white and similar tokens to globals.$ion-bg-surface-default in components including card, checkbox, chip, datetime, input, item, radio, segment, select, textarea, and toggle.

Test Suite Maintenance:

  • Temporarily skipped several datetime component visual regression tests due to issue FW-6769, with TODO comments for future re-enabling ([[1]](https://github.com/ionic-team/ionic-framework/pull/30678/files#diff-28d032b5dd4c52cbf575dd85894b936c883d43093a03b1e5fca940ee3a626cb3L31-R32), [[2]](https://github.com/ionic-team/ionic-framework/pull/30678/files#diff-6bcce71748a9d3fff9d03f4829f9ee2f058ff2ff419e5a0168f6b1200e29ba0fL33-R34), [[3]](https://github.com/ionic-team/ionic-framework/pull/30678/files#diff-6bcce71748a9d3fff9d03f4829f9ee2f058ff2ff419e5a0168f6b1200e29ba0fL87-R89), [[4]](https://github.com/ionic-team/ionic-framework/pull/30678/files#diff-5c6fab9ab164e203679ae4adfafbc0c4c84c569e8fc37f788f5688707cdd283bL16-R17)).

Component-Specific Token Updates:

  • Updated border and checkmark colors in chip, checkbox, and buttons to use globals.$ion-text-default and globals.$ion-bg-surface-default for improved design alignment ([[1]](https://github.com/ionic-team/ionic-framework/pull/30678/files#diff-3c751a473bd2fa61cfd77529c7b9e496f34cf198a4aed0bea0b57d1a1f7fe40aL120-R126), [[2]](https://github.com/ionic-team/ionic-framework/pull/30678/files#diff-796ffc72b6171910c25d5aad085bc245095c38f104d55e253e06282702205066L33-R33), [[3]](https://github.com/ionic-team/ionic-framework/pull/30678/files#diff-efdc0d0b924ff22b22228f52baebe09c69cce416ab33ba4a572c678ba3aa38f8L16-R16)).

These changes modernize the component styling to better align with the current design system and improve future maintainability.

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

@BenOsodrac BenOsodrac added the type: bug a confirmed bug report label Sep 10, 2025
Copy link

vercel bot commented Sep 10, 2025

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

Project Deployment Preview Comments Updated (UTC)
ionic-framework Ready Ready Preview Comment Sep 11, 2025 9:08am

@BenOsodrac BenOsodrac requested a review from ShaneK September 11, 2025 09:24
@BenOsodrac BenOsodrac marked this pull request as ready for review September 11, 2025 09:26
@BenOsodrac BenOsodrac requested a review from a team as a code owner September 11, 2025 09:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants