Skip to content

feat(tokens): add gray and text colors #30981

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thetaPC wants to merge 6 commits into
base: ionic-modular
Choose a base branch
from
Open

feat(tokens): add gray and text colors #30981

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dbf5c54
feat(tokens): add gray and text colors
thetaPC Feb 27, 2026
b6e2e2b
feat(tokens): remove steps
thetaPC Feb 27, 2026
520146d
feat(tokens): replace remaining stepped color CSS variables
thetaPC Feb 27, 2026
a1b9b26
feat(tokens): replace validation styles with gray
thetaPC Feb 28, 2026
60c0f48
feat(tokens): change text step naming
thetaPC Feb 28, 2026
606b577
feat(tokens): change background step naming
thetaPC Feb 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion core/src/components/action-sheet/action-sheet.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
--button-background-selected: #{$action-sheet-ios-button-background-selected};
--button-background-selected-opacity: 1;
--button-color: #{$action-sheet-ios-button-text-color};
--button-color-disabled: #{$text-color-step-150};
--button-color-disabled: #{$text-color-150};
--color: #{$action-sheet-ios-title-color};

text-align: $action-sheet-ios-text-align;
Expand Down
7 changes: 2 additions & 5 deletions core/src/components/action-sheet/action-sheet.ios.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ $action-sheet-ios-title-padding-bottom: 13px;
$action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end;

/// @prop - Color of the action sheet title
$action-sheet-ios-title-color: $text-color-step-600;
$action-sheet-ios-title-color: $text-color-600;

/// @prop - Font size of the action sheet title
$action-sheet-ios-title-font-size: dynamic-font-min(1, 13px);
Expand Down Expand Up @@ -115,10 +115,7 @@ $action-sheet-ios-button-background: linear-gradient(
$action-sheet-ios-button-background-activated: $text-color;

/// @prop - Background color of the selected action sheet button
$action-sheet-ios-button-background-selected: var(
--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);
Copy link
Member

@brandyscarney brandyscarney Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 - Destructive text color of the action sheet button
$action-sheet-ios-button-destructive-text-color: ion-color(danger, base);
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/action-sheet/action-sheet.md.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ $action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end
$action-sheet-md-button-height: 52px;

/// @prop - Text color of the action sheet button
$action-sheet-md-button-text-color: $text-color-step-150;
$action-sheet-md-button-text-color: $text-color-150;

/// @prop - Font size of the action sheet button
$action-sheet-md-button-font-size: dynamic-font(16px);
Expand Down
4 changes: 2 additions & 2 deletions core/src/components/alert/alert.ios.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ $alert-ios-title-font-weight: 600;
$alert-ios-sub-title-font-size: dynamic-font-min(1, 14px);

/// @prop - Text color of the alert sub title
$alert-ios-sub-title-text-color: $text-color-step-400;
$alert-ios-sub-title-text-color: $text-color-400;

/// @prop - Padding top of the alert message
$alert-ios-message-padding-top: 0;
Expand Down Expand Up @@ -114,7 +114,7 @@ $alert-ios-input-padding-start: $alert-ios-input-padding-end;
$alert-ios-input-placeholder-color: $placeholder-text-color;

/// @prop - Border color of the alert input
$alert-ios-input-border-color: $background-color-step-250;
$alert-ios-input-border-color: $gray-color-250;

/// @prop - Border of the alert input
$alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color;
Expand Down
12 changes: 6 additions & 6 deletions core/src/components/alert/alert.md.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ $alert-md-message-padding-start: $alert-md-message-padding-end;
$alert-md-message-font-size: dynamic-font(16px);

/// @prop - Text color of the alert message
$alert-md-message-text-color: $text-color-step-450;
$alert-md-message-text-color: $text-color-450;

/// @prop - Padding top of the alert empty message
$alert-md-message-empty-padding-top: 0;
Expand All @@ -104,7 +104,7 @@ $alert-md-input-border-width: 1px;
$alert-md-input-border-style: solid;

/// @prop - Border color of the alert input
$alert-md-input-border-color: $background-color-step-150;
$alert-md-input-border-color: $gray-color-150;

/// @prop - Text color of the alert input
$alert-md-input-text-color: $text-color;
Expand Down Expand Up @@ -209,7 +209,7 @@ $alert-md-radio-border-style: solid;
$alert-md-radio-border-radius: 50%;

/// @prop - Border color of the alert radio when off
$alert-md-radio-border-color-off: $background-color-step-550;
$alert-md-radio-border-color-off: $gray-color-550;

/// @prop - Border color of the alert radio when on
$alert-md-radio-border-color-on: $alert-md-button-text-color;
Expand Down Expand Up @@ -254,7 +254,7 @@ $alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end + 26px;
$alert-md-radio-label-font-size: dynamic-font(16px);

/// @prop - Text color of the label for the radio alert
$alert-md-radio-label-text-color: $text-color-step-150;
$alert-md-radio-label-text-color: $text-color-150;

/// @prop - Text color of the label for the checked radio alert
$alert-md-radio-label-text-color-checked: $alert-md-radio-label-text-color;
Expand All @@ -281,7 +281,7 @@ $alert-md-checkbox-border-style: solid;
$alert-md-checkbox-border-radius: 2px;

/// @prop - Border color of the checkbox in the alert when off
$alert-md-checkbox-border-color-off: $background-color-step-550;
$alert-md-checkbox-border-color-off: $gray-color-550;

/// @prop - Border color of the checkbox in the alert when on
$alert-md-checkbox-border-color-on: $alert-md-button-text-color;
Expand Down Expand Up @@ -323,7 +323,7 @@ $alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top;
$alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end + 27px;

/// @prop - Text color of the label for the checkbox in the alert
$alert-md-checkbox-label-text-color: $text-color-step-150;
$alert-md-checkbox-label-text-color: $text-color-150;

/// @prop - Font size of the label for the checkbox in the alert
$alert-md-checkbox-label-font-size: dynamic-font(16px);
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/alert/alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@

.alert-button.ion-focused,
.alert-tappable.ion-focused {
background: $background-color-step-100;
background: $gray-color-100;
}

.alert-button-inner {
Expand Down
17 changes: 7 additions & 10 deletions core/src/components/breadcrumb/breadcrumb.ios.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,22 @@
// --------------------------------------------------

/// @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);
Copy link
Member

@brandyscarney brandyscarney Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 active breadcrumb
$breadcrumb-ios-color-active: var(--ion-text-color, #03060b);

/// @prop - Background color of the focused breadcrumb
$breadcrumb-ios-background-focused: var(
--ion-color-step-50,
var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7))
);
$breadcrumb-ios-background-focused: var(--ion-color-gray-50, rgba(233, 237, 243, 0.7));

/// @prop - Color of the breadcrumb icon
$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3));
$breadcrumb-ios-icon-color: var(--ion-color-text-600, #92a0b3);

/// @prop - Color of the breadcrumb icon when active
$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39));
$breadcrumb-ios-icon-color-active: var(--ion-color-text-150, #242d39);

/// @prop - Color of the breadcrumb icon when focused
$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78));
$breadcrumb-ios-icon-color-focused: var(--ion-color-text-250, #445b78);

/// @prop - Color of the breadcrumb separator
$breadcrumb-ios-separator-color: $breadcrumb-separator-color;
Expand All @@ -31,7 +28,7 @@ $breadcrumb-ios-separator-color: $breadcrumb-separator-color;
$breadcrumb-ios-indicator-color: $breadcrumb-ios-separator-color;

/// @prop - Background color of the breadcrumb indicator
$breadcrumb-ios-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3));
$breadcrumb-ios-indicator-background: var(--ion-color-gray-100, #e9edf3);

/// @prop - Background color of the breadcrumb indicator when focused
$breadcrumb-ios-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea));
$breadcrumb-ios-indicator-background-focused: var(--ion-color-gray-150, #d9e0ea);
14 changes: 7 additions & 7 deletions core/src/components/breadcrumb/breadcrumb.md.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,22 @@
// --------------------------------------------------

/// @prop - Color of the breadcrumb
$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #677483));
$breadcrumb-md-color: var(--ion-color-text-400, #677483);

/// @prop - Color of the active breadcrumb
$breadcrumb-md-color-active: var(--ion-text-color, #03060b);

/// @prop - Color of the focused breadcrumb
$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e));
$breadcrumb-md-color-focused: var(--ion-color-text-200, #35404e);

/// @prop - Background color of the focused breadcrumb
$breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff));
$breadcrumb-md-background-focused: var(--ion-color-gray-50, #fff);

/// @prop - Color of the breadcrumb icon
$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894));
$breadcrumb-md-icon-color: var(--ion-color-text-450, #7d8894);

/// @prop - Color of the breadcrumb icon when active
$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a));
$breadcrumb-md-icon-color-active: var(--ion-color-text-150, #222d3a);

/// @prop - Margin top of the breadcrumb separator
$breadcrumb-md-separator-margin-top: -1px;
Expand All @@ -40,7 +40,7 @@ $breadcrumb-md-separator-color: $breadcrumb-separator-color;
$breadcrumb-md-indicator-color: $breadcrumb-md-separator-color;

/// @prop - Background color of the breadcrumb indicator
$breadcrumb-md-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3));
$breadcrumb-md-indicator-background: var(--ion-color-gray-100, #eef1f3);

/// @prop - Background color of the breadcrumb indicator when focused
$breadcrumb-md-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8));
$breadcrumb-md-indicator-background-focused: var(--ion-color-gray-150, #dfe5e8);
2 changes: 1 addition & 1 deletion core/src/components/breadcrumb/breadcrumb.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,4 @@ $breadcrumb-baseline-font-size: 16px;
$breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size);

/// @prop - Color of the breadcrumb separator
$breadcrumb-separator-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a));
$breadcrumb-separator-color: var(--ion-color-text-450, #73849a);
2 changes: 1 addition & 1 deletion core/src/components/card-subtitle/card-subtitle.ios.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,4 +40,4 @@ $card-ios-subtitle-margin-bottom: 4px;
$card-ios-subtitle-margin-start: $card-ios-subtitle-margin-end;

/// @prop - Color of the card subtitle
$card-ios-subtitle-color: $text-color-step-400;
$card-ios-subtitle-color: $text-color-400;
2 changes: 1 addition & 1 deletion core/src/components/card-subtitle/card-subtitle.md.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,4 @@ $card-md-subtitle-margin-bottom: 0;
$card-md-subtitle-margin-start: $card-md-subtitle-margin-end;

/// @prop - Color of the card subtitle
$card-md-subtitle-color: $text-color-step-450;
$card-md-subtitle-color: $text-color-450;
2 changes: 1 addition & 1 deletion core/src/components/card-title/card-title.md.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,4 @@ $card-md-title-margin-bottom: $card-md-title-margin-top;
$card-md-title-margin-start: $card-md-title-margin-end;

/// @prop - Color of the card title
$card-md-title-text-color: $text-color-step-150;
$card-md-title-text-color: $text-color-150;
2 changes: 1 addition & 1 deletion core/src/components/checkbox/checkbox.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
}

.checkbox-bottom .helper-text {
color: $text-color-step-300;
color: $text-color-300;
}

// Label Placement - Start
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/checkbox/test/validation/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
font-size: 12px;
font-weight: normal;

color: var(--ion-color-step-600);
color: var(--ion-color-gray-600);

margin-top: 10px;
margin-bottom: 5px;
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/datetime-button/datetime-button.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@
}

:host button.ion-activated {
color: $text-color-step-400;
color: $text-color-400;
}
2 changes: 1 addition & 1 deletion core/src/components/datetime-button/datetime-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@

border: none;

background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
background: var(--ion-color-gray-300, #edeef0);

color: $text-color;

Expand Down
6 changes: 3 additions & 3 deletions core/src/components/datetime/datetime.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
:host {
--background: #{ion-color(light, base)};
--background-rgb: #{ion-color(light, base, null, true)};
--title-color: #{$text-color-step-400};
--title-color: #{$text-color-400};
}

:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),
Expand Down Expand Up @@ -72,7 +72,7 @@
:host .calendar-days-of-week {
@include padding(0, $datetime-ios-padding * 0.5, 0, $datetime-ios-padding * 0.5);

color: $text-color-step-700;
color: $text-color-700;

font-size: dynamic-font-max(12px, 1.6);

Expand Down Expand Up @@ -280,7 +280,7 @@
}

:host .calendar-day.calendar-day-adjacent-day {
color: $text-color-step-700;
color: $text-color-700;
}

// Time / Header
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/datetime/datetime.ios.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
// --------------------------------------------------

/// @prop - Border color for dividers between header and footer
$datetime-ios-border-color: 0.55px solid globals.$background-color-step-200;
$datetime-ios-border-color: 0.55px solid globals.$gray-color-200;

/// @prop - Padding for content
$datetime-ios-padding: 16px;
Expand Down
12 changes: 6 additions & 6 deletions core/src/components/datetime/datetime.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
// --------------------------------------------------

:host {
--background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));
--background: var(--ion-color-gray-100, #ffffff);
--title-color: #{current-color(contrast)};
}

Expand Down Expand Up @@ -40,7 +40,7 @@
// -----------------------------------

:host .calendar-action-buttons ion-button {
--color: #{$text-color-step-350};
--color: #{$text-color-350};
}

.calendar-month-year-toggle {
Expand All @@ -50,7 +50,7 @@

background: transparent;

color: #{$text-color-step-350};
color: #{$text-color-350};

z-index: 1;

Expand Down Expand Up @@ -78,7 +78,7 @@
:host .calendar-days-of-week {
@include padding(0px, 10px, 0px, 10px);

color: $text-color-step-500;
color: $text-color-500;

font-size: $datetime-md-calendar-item-font-size;

Expand Down Expand Up @@ -138,7 +138,7 @@
}

:host .calendar-day.calendar-day-adjacent-day {
color: $text-color-step-500;
color: $text-color-500;
}

// Time / Header
Expand All @@ -148,7 +148,7 @@
}

:host .time-header {
color: #{$text-color-step-350};
color: #{$text-color-350};
}

// Month and Year
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/datetime/datetime.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
@include globals.border-radius(8px);
@include globals.padding(6px, 12px, 6px, 12px);

background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
background: var(--ion-color-gray-300, #edeef0);

color: globals.$text-color;
}
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
// --------------------------------------------------

/// @prop - Color of the infinite scroll loading indicator
$infinite-scroll-ios-loading-color: $text-color-step-400;
$infinite-scroll-ios-loading-color: $text-color-400;

/// @prop - Color of the infinite scroll loading indicator text
$infinite-scroll-ios-loading-text-color: $infinite-scroll-ios-loading-color;
2 changes: 1 addition & 1 deletion core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
// --------------------------------------------------

/// @prop - Color of the infinite scroll loading indicator
$infinite-scroll-md-loading-color: $text-color-step-400;
$infinite-scroll-md-loading-color: $text-color-400;

/// @prop - Color of the infinite scroll loading indicator text
$infinite-scroll-md-loading-text-color: $infinite-scroll-md-loading-color;
2 changes: 1 addition & 1 deletion core/src/components/input-otp/input-otp.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,5 @@
// --------------------------------------------------

:host(.input-otp-fill-outline) {
--border-color: #{$background-color-step-300};
--border-color: #{$gray-color-300};
}
Loading
Loading