feat(tokens): add gray and text colors#30981
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
bot
added
package: core
There was a problem hiding this comment.
Deleted it because we've moved to using core/src/themes/test/color/index.html
thetaPC
requested review from
brandyscarney
and removed request for
OS-jacobbell
brandyscarney
left a comment
brandyscarney
left a comment
There was a problem hiding this comment.
Looking good so far! Left some comments with questions and a few issues.
| --ion-color-step-150, | ||
| var(--ion-background-color-step-150, $background-color) | ||
| ); | ||
| $action-sheet-ios-button-background-selected: var(--ion-color-gray-150, $background-color); |
There was a problem hiding this comment.
We need to update the breaking change document to reflect the removal of --ion-color-step-*, --ion-text-color-step-*, and --ion-background-color-step-*, etc. if we are not going to keep them as fallbacks because these have been used in the docs for awhile:
|
|
||
| /// @prop - Color of the breadcrumb | ||
| $breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665)); | ||
| $breadcrumb-ios-color: var(--ion-color-text-150, #2d4665); |
There was a problem hiding this comment.
Maybe document in the breaking changes that they should change text overrides from:
- --ion-text-color-step-150
+ --ion-color-text-150?
|
|
||
| /// @prop - Color of the item paragraph | ||
| $item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3); | ||
| $item-ios-paragraph-text-color: var(--ion-color-text-550, #a3a3a3); |
There was a problem hiding this comment.
We can probably remove these fallbacks when we define the tokens for the default theme.
| $overlay-ios-background-color: var( | ||
| --ion-overlay-background-color, | ||
| var(--ion-color-step-100, #f9f9f9) | ||
| #f9f9f9 |
There was a problem hiding this comment.
Shouldn't this fall back to --ion-color-gray-900?
There was a problem hiding this comment.
Am I supposed to see this on this preview?
| }; | ||
|
|
||
| // Primitive color keys | ||
| export type PrimitiveColors = 'gray' | 'black' | 'white' | 'gray-contrast'; |
There was a problem hiding this comment.
Do we plan to add the other colors? Where would gray-contrast be used?
|
|
||
| // Number string keys structure | ||
| export type NumberStringKeys = { | ||
| // Enforce keys are strings of numbers (like 50, '50', etc.) |
There was a problem hiding this comment.
| // Enforce keys are strings of numbers (like 50, '50', etc.) | |
| // Enforce keys as strings of numbers (like 50, '50', etc.) |
| export type PrimitiveColors = 'gray' | 'black' | 'white' | 'gray-contrast'; | ||
|
|
||
| // Functional color keys | ||
| export type FunctionalColors = 'text' | 'overlay-background'; |
There was a problem hiding this comment.
What is the goal with this?
| @@ -1,4 +1,5 @@ | |||
| import type { IonChipRecipe, IonChipConfig } from '../components/chip/chip.interfaces'; | |||
| import type { PredefinedColors } from '../interface'; | |||
There was a problem hiding this comment.
Should we move this interface to core/src/themes/themes.interfaces.ts?
| --ion-color-step-50, | ||
| var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%)) | ||
| ); | ||
| $gray-color-0: var(--ion-color-gray-0, mix($text-color-value, $background-color-value, 0%)); |
There was a problem hiding this comment.
Shouldn't we be able to remove these by defining them for the default theme?
2 participants
Issue number: internal
What is the current behavior?
iosandmdthemes are still using the stepped color variables.What is the new behavior?
The CSS variable
--ion-background-color-step-{number}is no longer recommended for use and has been replaced by a more intuitive and standardized naming convention as part of Ionic's new theming structure. The functionality provided by the old variable has been replaced with a new set of CSS variables that use the same color values but are named:--ion-color-gray-{number}.This new structure aligns with how other popular design systems and frameworks are setting up their color palettes (e.g., using names like
gray,red,blue, followed by a number to denote the shade). Additionally, it follows the proposal agreed upon within the design doc.The CSS variable
--ion-text-color-step-*is being replaced by--ion-color-text-*to adhere to the standardized naming convention for Ionic's new theming structure (--ion-color-*-*). This change aims for greater clarity and consistency within the framework's color palette.The original thought was to use only the
--ion-color-gray-*variables for all purposes (backgrounds, text, icons, etc.). However, it was quickly determined that text color requirements are not a 1:1 match with the gray steps designed for backgrounds and other elements. Text often requires a different shade to maintain proper contrast and readability across various theme palettes (especially between high contrast and high contrast dark modes). Introducing the dedicated functional variable--ion-color-text-*solves this issue by allowing text color to be defined independently based on the current palette's needs.Also the
--ion-color-step-*variables were removed since they were deprecated in v7.Does this introduce a breaking change?
You simply need to swap the wording of the background stepped variables with the new gray variables. The number suffix remains exactly the same:
--ion-background-color-step-50--ion-color-gray-50--ion-background-color-step-900--ion-color-gray-900You simply need to swap the wording of the text stepped variables with the new text variables. The number suffix remains exactly the same:
--ion-text-color-step-50--ion-color-text-50--ion-text-color-step-900--ion-color-text-900Other information
Preview