Skip to content

feat(themes): remove deprecated color steps and update bg and text steps #31035

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

Merged
thetaPC merged 6 commits into from
Mar 26, 2026
+590 −841
Merged

feat(themes): remove deprecated color steps and update bg and text steps #31035

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
fc12336
feat(themes): remove deprecated color steps
thetaPC Mar 24, 2026
85e81f8
chore(): run lint
thetaPC Mar 24, 2026
28e8745
fix(themes): use correct background and text stepped values
thetaPC Mar 24, 2026
d89531a
fix(themes): add text steps
thetaPC Mar 25, 2026
6e311ad
fix(high-contrast-dark): generate correct step values
thetaPC Mar 25, 2026
7a40d04
Merge branch 'ionic-modular' into FW-6751-pt3
thetaPC Mar 26, 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
7 changes: 7 additions & 0 deletions BREAKING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,20 @@ This is a comprehensive list of the breaking changes introduced in the major ver

## Version 9.x

- [Global Styles](#version-9x-global-styles)
- [Components](#version-9x-components)
- [Button](#version-9x-button)
- [Card](#version-9x-card)
- [Chip](#version-9x-chip)
- [Grid](#version-9x-grid)
- [Spinner](#version-9x-spinner)

<h2 id="version-9x-global-styles">Global Styles</h2>

<h4 id="version-9x-color-steps">Color Steps</h4>

- The deprecated color step CSS variables, `--ion-color-step-[number]`, have been removed and should be replaced with either `--ion-background-color-step-[number]` or `--ion-text-color-step-[number]` depending on the specific use case, as outlined in the [migration guide](https://ionicframework.com/docs/updating/8-0#step-color-tokens).

<h2 id="version-9x-components">Components</h2>

<h4 id="version-9x-button">Button</h4>
Expand Down
5 changes: 1 addition & 4 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 @@ -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-background-color-step-150, $background-color);

/// @prop - Destructive text color of the action sheet button
$action-sheet-ios-button-destructive-text-color: ion-color(danger, base);
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-text-color-step-150, #2d4665);

/// @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-background-color-step-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-text-color-step-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-text-color-step-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-text-color-step-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-background-color-step-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-background-color-step-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-text-color-step-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-text-color-step-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-background-color-step-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-text-color-step-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-text-color-step-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-background-color-step-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-background-color-step-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-text-color-step-450, #73849a);
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-text-color-step-400);

margin-top: 10px;
margin-bottom: 5px;
Expand Down
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-background-color-step-300, #edeef0);

color: $text-color;

Expand Down
2 changes: 1 addition & 1 deletion 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-background-color-step-100, #ffffff);
--title-color: #{current-color(contrast)};
}

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-background-color-step-300, #edeef0);

color: globals.$text-color;
}
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/input/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-text-color-step-400);

margin-top: 10px;
margin-bottom: 5px;
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/modal/modal.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
width: 36px;
height: 5px;

background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
background: var(--ion-background-color-step-350, #c0c0be);

&::before {
/**
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/picker/picker.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,5 @@
}

:host .picker-highlight {
background: var(--highlight-background, var(--ion-color-step-150, var(--ion-background-color-step-150, #eeeeef)));
background: var(--highlight-background, var(--ion-background-color-step-150, #eeeeef));
}
2 changes: 1 addition & 1 deletion core/src/components/radio-group/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-text-color-step-400);

margin-top: 10px;
margin-bottom: 5px;
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/range/range.ios.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ $range-ios-hit-height: $range-ios-slider-height;
$range-ios-bar-height: 4px;

/// @prop - Background of the range bar
$range-ios-bar-background-color: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));
$range-ios-bar-background-color: var(--ion-background-color-step-900, #e6e6e6);

/// @prop - Border radius of the range bar
$range-ios-bar-border-radius: 2px;
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/refresher/refresher.ios.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ $refresher-ios-icon-color: $text-color;
$refresher-ios-text-color: $text-color;

/// @prop - Color of the native refresher spinner
$refresher-ios-native-spinner-color: var(--ion-color-step-450, var(--ion-background-color-step-450, #747577));
$refresher-ios-native-spinner-color: var(--ion-background-color-step-450, #747577);

/// @prop - Width of the native refresher spinner
$refresher-ios-native-spinner-width: 32px;
Expand Down
4 changes: 2 additions & 2 deletions core/src/components/refresher/refresher.md.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ $refresher-md-text-color: $text-color;
$refresher-md-native-spinner-color: #{ion-color(primary, base)};

/// @prop - Border of the native refresher spinner
$refresher-md-native-spinner-border: 1px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #ececec));
$refresher-md-native-spinner-border: 1px solid var(--ion-background-color-step-200, #ececec);

/// @prop - Background of the native refresher spinner
$refresher-md-native-spinner-background: var(--ion-color-step-250, var(--ion-background-color-step-250, #ffffff));
$refresher-md-native-spinner-background: var(--ion-background-color-step-250, #ffffff);

/// @prop - Box shadow of the native refresher spinner
$refresher-md-native-spinner-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
2 changes: 1 addition & 1 deletion core/src/components/segment-button/segment-button.ios.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ $segment-button-ios-background-checked: $segment-button-ios-background;
$segment-button-ios-color: $text-color;

/// @prop - Background of the checked segment button indicator
$segment-button-ios-indicator-color: var(--ion-color-step-350, var(--ion-background-color-step-350, $background-color));
$segment-button-ios-indicator-color: var(--ion-background-color-step-350, $background-color);

/// @prop - Margin of the segment button
$segment-button-ios-margin: 2px;
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/select/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-text-color-step-400);

margin-top: 10px;
margin-bottom: 5px;
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/textarea/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-text-color-step-400);

margin-top: 10px;
margin-bottom: 5px;
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/toggle/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-text-color-step-400);

margin-top: 10px;
margin-bottom: 5px;
Expand Down
6 changes: 3 additions & 3 deletions core/src/css/palettes/dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,9 +140,9 @@ $colors: (
}

& ion-modal {
--ion-background-color: var(--ion-color-step-100, var(--ion-background-color-step-100));
--ion-toolbar-background: var(--ion-color-step-150, var(--ion-background-color-step-150));
--ion-toolbar-border-color: var(--ion-color-step-250, var(--ion-background-color-step-250));
--ion-background-color: var(--ion-background-color-step-100);
--ion-toolbar-background: var(--ion-background-color-step-150);
--ion-toolbar-border-color: var(--ion-background-color-step-250);
}
}

Expand Down
46 changes: 2 additions & 44 deletions core/src/themes/base/high-contrast.tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { mix } from '../../utils/theme';
import { mix, generateColorSteps } from '../../utils/theme';
import type { HighContrastTheme } from '../themes.interfaces';

const colors = {
Expand Down Expand Up @@ -167,47 +167,5 @@ export const highContrastTheme: HighContrastTheme = {
textColor: '#000000',
textColorRgb: '0, 0, 0',

backgroundColorStep: {
50: '#818181',
100: '#7a7a7a',
150: '#747474',
200: '#6d6d6d',
250: '#666666',
300: '#5f5f5f',
350: '#585858',
400: '#525252',
450: '#4b4b4b',
500: '#444444',
550: '#3d3d3d',
600: '#363636',
650: '#303030',
700: '#292929',
750: '#222222',
800: '#1b1b1b',
850: '#141414',
900: '#0e0e0e',
950: '#070707',
},

textColorStep: {
50: '#070707',
100: '#0e0e0e',
150: '#141414',
200: '#1b1b1b',
250: '#222222',
300: '#292929',
350: '#303030',
400: '#363636',
450: '#3d3d3d',
500: '#444444',
550: '#4b4b4b',
600: '#525252',
650: '#585858',
700: '#5f5f5f',
750: '#666666',
800: '#6d6d6d',
850: '#747474',
900: '#7a7a7a',
950: '#818181',
},
textColorStep: generateColorSteps('#888888', '#000000'),
};
49 changes: 3 additions & 46 deletions core/src/themes/ios/dark.tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,12 @@
import { generateColorSteps } from '../../utils/theme';
import { darkTheme as baseDarkTheme } from '../base/dark.tokens';
import type { DarkTheme } from '../themes.interfaces';

export const darkTheme: DarkTheme = {
...baseDarkTheme,

backgroundColor: '#000000',
textColor: '#ffffff',

backgroundColorStep: {
50: '#0d0d0d',
100: '#1a1a1a',
150: '#262626',
200: '#333333',
250: '#404040',
300: '#4d4d4d',
350: '#595959',
400: '#666666',
450: '#737373',
500: '#808080',
550: '#8c8c8c',
600: '#999999',
650: '#a6a6a6',
700: '#b3b3b3',
750: '#bfbfbf',
800: '#cccccc',
850: '#d9d9d9',
900: '#e6e6e6',
950: '#f2f2f2',
},

textColorStep: {
50: '#f2f2f2',
100: '#e6e6e6',
150: '#d9d9d9',
200: '#cccccc',
250: '#bfbfbf',
300: '#b3b3b3',
350: '#a6a6a6',
400: '#999999',
450: '#8c8c8c',
500: '#808080',
550: '#737373',
600: '#666666',
650: '#595959',
700: '#4d4d4d',
750: '#404040',
800: '#333333',
850: '#262626',
900: '#1a1a1a',
950: '#0d0d0d',
},
backgroundColorStep: generateColorSteps('#000000', '#ffffff'),
textColorStep: generateColorSteps('#ffffff', '#000000'),

components: {
IonCard: {
Expand Down
4 changes: 4 additions & 0 deletions core/src/themes/ios/high-contrast-dark.tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import { generateColorSteps } from '../../utils/theme';
import { highContrastDarkTheme as baseHighContrastDarkTheme } from '../base/high-contrast-dark.tokens';
import type { HighContrastDarkTheme } from '../themes.interfaces';

export const highContrastDarkTheme: HighContrastDarkTheme = {
...baseHighContrastDarkTheme,

backgroundColorStep: generateColorSteps('#000000', '#ffffff'),
textColorStep: generateColorSteps('#ffffff', '#888888'),
};
Loading
Loading