diff --git a/BREAKING.md b/BREAKING.md
index 4dde0c88e2b..203fd1c570f 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -14,12 +14,19 @@ 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)
 
+<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>
diff --git a/core/src/components/action-sheet/action-sheet.ios.vars.scss b/core/src/components/action-sheet/action-sheet.ios.vars.scss
index 0d2302b7183..5f37df80fed 100644
--- a/core/src/components/action-sheet/action-sheet.ios.vars.scss
+++ b/core/src/components/action-sheet/action-sheet.ios.vars.scss
@@ -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);
diff --git a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss
index 0fda71c8aa7..40b89de08e7 100644
--- a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss
+++ b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss
@@ -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;
@@ -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);
diff --git a/core/src/components/breadcrumb/breadcrumb.md.vars.scss b/core/src/components/breadcrumb/breadcrumb.md.vars.scss
index 8c738a5e887..bdf6b893e2b 100644
--- a/core/src/components/breadcrumb/breadcrumb.md.vars.scss
+++ b/core/src/components/breadcrumb/breadcrumb.md.vars.scss
@@ -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;
@@ -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);
diff --git a/core/src/components/breadcrumb/breadcrumb.vars.scss b/core/src/components/breadcrumb/breadcrumb.vars.scss
index 4770b0b9e19..6f02bd81598 100644
--- a/core/src/components/breadcrumb/breadcrumb.vars.scss
+++ b/core/src/components/breadcrumb/breadcrumb.vars.scss
@@ -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);
diff --git a/core/src/components/checkbox/test/validation/index.html b/core/src/components/checkbox/test/validation/index.html
index e3f4bce5601..930ca862753 100644
--- a/core/src/components/checkbox/test/validation/index.html
+++ b/core/src/components/checkbox/test/validation/index.html
@@ -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;
diff --git a/core/src/components/datetime-button/datetime-button.scss b/core/src/components/datetime-button/datetime-button.scss
index 6defd0da9be..45d89d797c8 100644
--- a/core/src/components/datetime-button/datetime-button.scss
+++ b/core/src/components/datetime-button/datetime-button.scss
@@ -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;
 
diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss
index 6d00afa3d00..4fb3adc7873 100644
--- a/core/src/components/datetime/datetime.md.scss
+++ b/core/src/components/datetime/datetime.md.scss
@@ -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)};
 }
 
diff --git a/core/src/components/datetime/datetime.native.scss b/core/src/components/datetime/datetime.native.scss
index e000e207057..acef961d207 100644
--- a/core/src/components/datetime/datetime.native.scss
+++ b/core/src/components/datetime/datetime.native.scss
@@ -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;
 }
diff --git a/core/src/components/input/test/validation/index.html b/core/src/components/input/test/validation/index.html
index 2a6ad89e13f..a1b6b59aa22 100644
--- a/core/src/components/input/test/validation/index.html
+++ b/core/src/components/input/test/validation/index.html
@@ -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;
diff --git a/core/src/components/modal/modal.native.scss b/core/src/components/modal/modal.native.scss
index b94d65d0cd9..8a8a06e6e5e 100644
--- a/core/src/components/modal/modal.native.scss
+++ b/core/src/components/modal/modal.native.scss
@@ -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 {
     /**
diff --git a/core/src/components/picker/picker.ios.scss b/core/src/components/picker/picker.ios.scss
index f474efe997b..2be864ce686 100644
--- a/core/src/components/picker/picker.ios.scss
+++ b/core/src/components/picker/picker.ios.scss
@@ -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));
 }
diff --git a/core/src/components/radio-group/test/validation/index.html b/core/src/components/radio-group/test/validation/index.html
index 49fdbf1ebbc..b3b7099ce5b 100644
--- a/core/src/components/radio-group/test/validation/index.html
+++ b/core/src/components/radio-group/test/validation/index.html
@@ -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;
diff --git a/core/src/components/range/range.ios.vars.scss b/core/src/components/range/range.ios.vars.scss
index dace5a00686..fb088322f12 100644
--- a/core/src/components/range/range.ios.vars.scss
+++ b/core/src/components/range/range.ios.vars.scss
@@ -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;
diff --git a/core/src/components/refresher/refresher.ios.vars.scss b/core/src/components/refresher/refresher.ios.vars.scss
index 3cb4a38f54b..000fcd4c8ed 100644
--- a/core/src/components/refresher/refresher.ios.vars.scss
+++ b/core/src/components/refresher/refresher.ios.vars.scss
@@ -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;
diff --git a/core/src/components/refresher/refresher.md.vars.scss b/core/src/components/refresher/refresher.md.vars.scss
index a27b0fcfb2f..19db4add4a2 100644
--- a/core/src/components/refresher/refresher.md.vars.scss
+++ b/core/src/components/refresher/refresher.md.vars.scss
@@ -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);
diff --git a/core/src/components/segment-button/segment-button.ios.vars.scss b/core/src/components/segment-button/segment-button.ios.vars.scss
index b505849fa34..0429fd0e629 100644
--- a/core/src/components/segment-button/segment-button.ios.vars.scss
+++ b/core/src/components/segment-button/segment-button.ios.vars.scss
@@ -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;
diff --git a/core/src/components/select/test/validation/index.html b/core/src/components/select/test/validation/index.html
index 74d0586bd77..19e3a2a1435 100644
--- a/core/src/components/select/test/validation/index.html
+++ b/core/src/components/select/test/validation/index.html
@@ -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;
diff --git a/core/src/components/textarea/test/validation/index.html b/core/src/components/textarea/test/validation/index.html
index 6f977a7d915..4ebfc8b740f 100644
--- a/core/src/components/textarea/test/validation/index.html
+++ b/core/src/components/textarea/test/validation/index.html
@@ -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;
diff --git a/core/src/components/toggle/test/validation/index.html b/core/src/components/toggle/test/validation/index.html
index 54932edeb08..64e4da3e030 100644
--- a/core/src/components/toggle/test/validation/index.html
+++ b/core/src/components/toggle/test/validation/index.html
@@ -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;
diff --git a/core/src/css/palettes/dark.scss b/core/src/css/palettes/dark.scss
index 75e0611caf2..1d593e6bc0a 100644
--- a/core/src/css/palettes/dark.scss
+++ b/core/src/css/palettes/dark.scss
@@ -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);
   }
 }
 
diff --git a/core/src/themes/base/high-contrast.tokens.ts b/core/src/themes/base/high-contrast.tokens.ts
index f56daef372d..c1287051e0f 100644
--- a/core/src/themes/base/high-contrast.tokens.ts
+++ b/core/src/themes/base/high-contrast.tokens.ts
@@ -1,4 +1,4 @@
-import { mix } from '../../utils/theme';
+import { mix, generateColorSteps } from '../../utils/theme';
 import type { HighContrastTheme } from '../themes.interfaces';
 
 const colors = {
@@ -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'),
 };
diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts
index 345cdef3a51..5f481d8bb97 100644
--- a/core/src/themes/ios/dark.tokens.ts
+++ b/core/src/themes/ios/dark.tokens.ts
@@ -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: {
diff --git a/core/src/themes/ios/high-contrast-dark.tokens.ts b/core/src/themes/ios/high-contrast-dark.tokens.ts
index 0a5c1bba117..aa3987f3c54 100644
--- a/core/src/themes/ios/high-contrast-dark.tokens.ts
+++ b/core/src/themes/ios/high-contrast-dark.tokens.ts
@@ -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'),
 };
diff --git a/core/src/themes/ios/high-contrast.tokens.ts b/core/src/themes/ios/high-contrast.tokens.ts
index 96e90d79b83..90bf5c40c6b 100644
--- a/core/src/themes/ios/high-contrast.tokens.ts
+++ b/core/src/themes/ios/high-contrast.tokens.ts
@@ -3,51 +3,4 @@ import type { HighContrastTheme } from '../themes.interfaces';
 
 export const highContrastTheme: HighContrastTheme = {
   ...baseHighContrastTheme,
-
-  backgroundColor: '#ffffff',
-  textColor: '#000000',
-
-  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',
-  },
 };
diff --git a/core/src/themes/md/dark.tokens.ts b/core/src/themes/md/dark.tokens.ts
index ef863643d5c..7c74da3ef29 100644
--- a/core/src/themes/md/dark.tokens.ts
+++ b/core/src/themes/md/dark.tokens.ts
@@ -1,3 +1,4 @@
+import { generateColorSteps } from '../../utils/theme';
 import { darkTheme as baseDarkTheme } from '../base/dark.tokens';
 import type { DarkTheme } from '../themes.interfaces';
 
@@ -6,57 +7,14 @@ export const darkTheme: DarkTheme = {
 
   backgroundColor: '#121212',
   backgroundColorRgb: '18, 18, 18',
-  textColor: '#ffffff',
-  textColorRgb: '255, 255, 255',
 
   // TODO(FW-6864): Remove once IonToolbar themes are added
   toolbar: {
     background: '#1f1f1f',
   },
 
-  backgroundColorStep: {
-    50: '#1e1e1e',
-    100: '#2a2a2a',
-    150: '#363636',
-    200: '#414141',
-    250: '#4d4d4d',
-    300: '#595959',
-    350: '#656565',
-    400: '#717171',
-    450: '#7d7d7d',
-    500: '#898989',
-    550: '#949494',
-    600: '#a0a0a0',
-    650: '#acacac',
-    700: '#b8b8b8',
-    750: '#c4c4c4',
-    800: '#d0d0d0',
-    850: '#dbdbdb',
-    900: '#e7e7e7',
-    950: '#f3f3f3',
-  },
-
-  textColorStep: {
-    50: '#f3f3f3',
-    100: '#e7e7e7',
-    150: '#dbdbdb',
-    200: '#d0d0d0',
-    250: '#c4c4c4',
-    300: '#b8b8b8',
-    350: '#acacac',
-    400: '#a0a0a0',
-    450: '#949494',
-    500: '#898989',
-    550: '#7d7d7d',
-    600: '#717171',
-    650: '#656565',
-    700: '#595959',
-    750: '#4d4d4d',
-    800: '#414141',
-    850: '#363636',
-    900: '#2a2a2a',
-    950: '#1e1e1e',
-  },
+  backgroundColorStep: generateColorSteps('#121212', '#ffffff'),
+  textColorStep: generateColorSteps('#ffffff', '#121212'),
 
   components: {
     IonCard: {
diff --git a/core/src/themes/md/high-contrast-dark.tokens.ts b/core/src/themes/md/high-contrast-dark.tokens.ts
index 0a0d9f93a76..b024bc5c685 100644
--- a/core/src/themes/md/high-contrast-dark.tokens.ts
+++ b/core/src/themes/md/high-contrast-dark.tokens.ts
@@ -1,3 +1,4 @@
+import { generateColorSteps } from '../../utils/theme';
 import { highContrastDarkTheme as baseHighContrastDarkTheme } from '../base/high-contrast-dark.tokens';
 import type { HighContrastDarkTheme } from '../themes.interfaces';
 
@@ -5,32 +6,12 @@ export const highContrastDarkTheme: HighContrastDarkTheme = {
   ...baseHighContrastDarkTheme,
 
   backgroundColor: '#121212',
-  textColor: '#000000',
 
   // TODO(FW-6864): Remove once IonToolbar themes are added
   toolbar: {
     background: '#1f1f1f',
   },
 
-  backgroundColorStep: {
-    50: '#1e1e1e',
-    100: '#2a2a2a',
-    150: '#363636',
-    200: '#414141',
-    250: '#4d4d4d',
-    300: '#595959',
-    350: '#656565',
-    400: '#717171',
-    450: '#7d7d7d',
-    500: '#898989',
-    550: '#949494',
-    600: '#a0a0a0',
-    650: '#acacac',
-    700: '#b8b8b8',
-    750: '#c4c4c4',
-    800: '#d0d0d0',
-    850: '#dbdbdb',
-    900: '#e7e7e7',
-    950: '#f3f3f3',
-  },
+  backgroundColorStep: generateColorSteps('#121212', '#ffffff'),
+  textColorStep: generateColorSteps('#ffffff', '#888888'),
 };
diff --git a/core/src/themes/md/high-contrast.tokens.ts b/core/src/themes/md/high-contrast.tokens.ts
index 96e90d79b83..90bf5c40c6b 100644
--- a/core/src/themes/md/high-contrast.tokens.ts
+++ b/core/src/themes/md/high-contrast.tokens.ts
@@ -3,51 +3,4 @@ import type { HighContrastTheme } from '../themes.interfaces';
 
 export const highContrastTheme: HighContrastTheme = {
   ...baseHighContrastTheme,
-
-  backgroundColor: '#ffffff',
-  textColor: '#000000',
-
-  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',
-  },
 };
diff --git a/core/src/themes/native/native.theme.default.ios.scss b/core/src/themes/native/native.theme.default.ios.scss
index aed51b26e13..f1624c51895 100644
--- a/core/src/themes/native/native.theme.default.ios.scss
+++ b/core/src/themes/native/native.theme.default.ios.scss
@@ -7,34 +7,25 @@
 // iOS General Colors
 // --------------------------------------------------
 $backdrop-ios-color: var(--ion-backdrop-color, #000);
-$overlay-ios-background-color: var(
-  --ion-overlay-background-color,
-  var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9))
-);
+$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-background-color-step-100, #f9f9f9));
 
 // iOS Tabs & Tab bar
 // --------------------------------------------------
-$tabbar-ios-background: var(
-  --ion-tab-bar-background,
-  var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7))
-);
+$tabbar-ios-background: var(--ion-tab-bar-background, var(--ion-background-color-step-50, #f7f7f7));
 $tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff));
 $tabbar-ios-border-color: var(
   --ion-tab-bar-border-color,
-  var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2))))
+  var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))
 );
 $tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-400);
 $tabbar-ios-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base));
 
 // iOS Toolbar
 // --------------------------------------------------
-$toolbar-ios-background: var(
-  --ion-toolbar-background,
-  var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7))
-);
+$toolbar-ios-background: var(--ion-toolbar-background, var(--ion-background-color-step-50, #f7f7f7));
 $toolbar-ios-border-color: var(
   --ion-toolbar-border-color,
-  var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2))))
+  var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))
 );
 $toolbar-ios-color: var(--ion-toolbar-color, $text-color);
 
@@ -43,7 +34,7 @@ $toolbar-ios-color: var(--ion-toolbar-color, $text-color);
 $item-ios-background: var(--ion-item-background, $background-color);
 $item-ios-border-color: var(
   --ion-item-border-color,
-  var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc)))
+  var(--ion-border-color, var(--ion-background-color-step-250, #c8c7cc))
 );
 $item-ios-color: var(--ion-item-color, $text-color);
 
diff --git a/core/src/themes/native/native.theme.default.md.scss b/core/src/themes/native/native.theme.default.md.scss
index 285a52433b6..d136cea7c90 100644
--- a/core/src/themes/native/native.theme.default.md.scss
+++ b/core/src/themes/native/native.theme.default.md.scss
@@ -7,7 +7,7 @@
 // Material Design General Colors
 // --------------------------------------------------
 $backdrop-md-color: var(--ion-backdrop-color, #000);
-$border-md-color: var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd)));
+$border-md-color: var(--ion-border-color, var(--ion-background-color-step-150, #c1c4cd));
 $overlay-md-background-color: var(--ion-overlay-background-color, var(--ion-background-color, #fff));
 
 // Material Design Tabs & Tab bar
@@ -16,7 +16,7 @@ $tabbar-md-background: var(--ion-tab-bar-background, $background-color);
 $tabbar-md-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff));
 $tabbar-md-border-color: var(
   --ion-tab-bar-border-color,
-  var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.07))))
+  var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.07)))
 );
 $tabbar-md-color: var(--ion-tab-bar-color, $text-color-step-350);
 $tabbar-md-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base));
@@ -32,7 +32,7 @@ $toolbar-md-color: var(--ion-toolbar-color, var(--ion-text-color, #424242));
 $item-md-background: var(--ion-item-background, $background-color);
 $item-md-border-color: var(
   --ion-item-border-color,
-  var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13))))
+  var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))
 );
 $item-md-color: var(--ion-item-color, $text-color);
 
diff --git a/core/src/themes/native/native.theme.default.scss b/core/src/themes/native/native.theme.default.scss
index db4819c8a94..1c34175baa8 100644
--- a/core/src/themes/native/native.theme.default.scss
+++ b/core/src/themes/native/native.theme.default.scss
@@ -26,158 +26,44 @@ $text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value);
 // For example, $text-color-step-XXX will be $text-color stepping towards $background-color,
 // but a $background-color-step-XXX will be $background-color stepping towards $text-color.
 
-$background-color-step-50: var(
-  --ion-color-step-50,
-  var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%))
-);
-$background-color-step-100: var(
-  --ion-color-step-100,
-  var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%))
-);
-$background-color-step-150: var(
-  --ion-color-step-150,
-  var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%))
-);
-$background-color-step-200: var(
-  --ion-color-step-200,
-  var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%))
-);
-$background-color-step-250: var(
-  --ion-color-step-250,
-  var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%))
-);
-$background-color-step-300: var(
-  --ion-color-step-300,
-  var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%))
-);
-$background-color-step-350: var(
-  --ion-color-step-350,
-  var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%))
-);
-$background-color-step-400: var(
-  --ion-color-step-400,
-  var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%))
-);
-$background-color-step-450: var(
-  --ion-color-step-450,
-  var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%))
-);
-$background-color-step-500: var(
-  --ion-color-step-500,
-  var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%))
-);
-$background-color-step-550: var(
-  --ion-color-step-550,
-  var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%))
-);
-$background-color-step-600: var(
-  --ion-color-step-600,
-  var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%))
-);
-$background-color-step-650: var(
-  --ion-color-step-650,
-  var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%))
-);
-$background-color-step-700: var(
-  --ion-color-step-700,
-  var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%))
-);
-$background-color-step-750: var(
-  --ion-color-step-750,
-  var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%))
-);
-$background-color-step-800: var(
-  --ion-color-step-800,
-  var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%))
-);
-$background-color-step-850: var(
-  --ion-color-step-850,
-  var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%))
-);
-$background-color-step-900: var(
-  --ion-color-step-900,
-  var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%))
-);
-$background-color-step-950: var(
-  --ion-color-step-950,
-  var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%))
-);
-$text-color-step-50: var(
-  --ion-color-step-950,
-  var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%))
-);
-$text-color-step-100: var(
-  --ion-color-step-900,
-  var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%))
-);
-$text-color-step-150: var(
-  --ion-color-step-850,
-  var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%))
-);
-$text-color-step-200: var(
-  --ion-color-step-800,
-  var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%))
-);
-$text-color-step-250: var(
-  --ion-color-step-750,
-  var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%))
-);
-$text-color-step-300: var(
-  --ion-color-step-700,
-  var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%))
-);
-$text-color-step-350: var(
-  --ion-color-step-650,
-  var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%))
-);
-$text-color-step-400: var(
-  --ion-color-step-600,
-  var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%))
-);
-$text-color-step-450: var(
-  --ion-color-step-550,
-  var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%))
-);
-$text-color-step-500: var(
-  --ion-color-step-500,
-  var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%))
-);
-$text-color-step-550: var(
-  --ion-color-step-450,
-  var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%))
-);
-$text-color-step-600: var(
-  --ion-color-step-400,
-  var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%))
-);
-$text-color-step-650: var(
-  --ion-color-step-350,
-  var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%))
-);
-$text-color-step-700: var(
-  --ion-color-step-300,
-  var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%))
-);
-$text-color-step-750: var(
-  --ion-color-step-250,
-  var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%))
-);
-$text-color-step-800: var(
-  --ion-color-step-200,
-  var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%))
-);
-$text-color-step-850: var(
-  --ion-color-step-150,
-  var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%))
-);
-$text-color-step-900: var(
-  --ion-color-step-100,
-  var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%))
-);
-$text-color-step-950: var(
-  --ion-color-step-50,
-  var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%))
-);
+$background-color-step-50: var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%));
+$background-color-step-100: var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%));
+$background-color-step-150: var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%));
+$background-color-step-200: var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%));
+$background-color-step-250: var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%));
+$background-color-step-300: var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%));
+$background-color-step-350: var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%));
+$background-color-step-400: var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%));
+$background-color-step-450: var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%));
+$background-color-step-500: var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%));
+$background-color-step-550: var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%));
+$background-color-step-600: var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%));
+$background-color-step-650: var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%));
+$background-color-step-700: var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%));
+$background-color-step-750: var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%));
+$background-color-step-800: var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%));
+$background-color-step-850: var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%));
+$background-color-step-900: var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%));
+$background-color-step-950: var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%));
+$text-color-step-50: var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%));
+$text-color-step-100: var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%));
+$text-color-step-150: var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%));
+$text-color-step-200: var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%));
+$text-color-step-250: var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%));
+$text-color-step-300: var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%));
+$text-color-step-350: var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%));
+$text-color-step-400: var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%));
+$text-color-step-450: var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%));
+$text-color-step-500: var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%));
+$text-color-step-550: var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%));
+$text-color-step-600: var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%));
+$text-color-step-650: var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%));
+$text-color-step-700: var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%));
+$text-color-step-750: var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%));
+$text-color-step-800: var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%));
+$text-color-step-850: var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%));
+$text-color-step-900: var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%));
+$text-color-step-950: var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%));
 
 // Default General Colors
 // --------------------------------------------------
diff --git a/core/src/themes/native/test/css-variables/css/dark.css b/core/src/themes/native/test/css-variables/css/dark.css
index 6082882391f..c420eb638c3 100644
--- a/core/src/themes/native/test/css-variables/css/dark.css
+++ b/core/src/themes/native/test/css-variables/css/dark.css
@@ -80,25 +80,45 @@ body {
   --ion-text-color: #ffffff;
   --ion-text-color-rgb: 255, 255, 255;
 
-  --ion-color-step-50: #0d0d0d;
-  --ion-color-step-100: #1a1a1a;
-  --ion-color-step-150: #262626;
-  --ion-color-step-200: #333333;
-  --ion-color-step-250: #404040;
-  --ion-color-step-300: #4d4d4d;
-  --ion-color-step-350: #595959;
-  --ion-color-step-400: #666666;
-  --ion-color-step-450: #737373;
-  --ion-color-step-500: #808080;
-  --ion-color-step-550: #8c8c8c;
-  --ion-color-step-600: #999999;
-  --ion-color-step-650: #a6a6a6;
-  --ion-color-step-700: #b3b3b3;
-  --ion-color-step-750: #bfbfbf;
-  --ion-color-step-800: #cccccc;
-  --ion-color-step-850: #d9d9d9;
-  --ion-color-step-900: #e6e6e6;
-  --ion-color-step-950: #f2f2f2;
+  --ion-background-color-step-50: #0d0d0d;
+  --ion-background-color-step-100: #1a1a1a;
+  --ion-background-color-step-150: #262626;
+  --ion-background-color-step-200: #333333;
+  --ion-background-color-step-250: #404040;
+  --ion-background-color-step-300: #4d4d4d;
+  --ion-background-color-step-350: #595959;
+  --ion-background-color-step-400: #666666;
+  --ion-background-color-step-450: #737373;
+  --ion-background-color-step-500: #808080;
+  --ion-background-color-step-550: #8c8c8c;
+  --ion-background-color-step-600: #999999;
+  --ion-background-color-step-650: #a6a6a6;
+  --ion-background-color-step-700: #b3b3b3;
+  --ion-background-color-step-750: #bfbfbf;
+  --ion-background-color-step-800: #cccccc;
+  --ion-background-color-step-850: #d9d9d9;
+  --ion-background-color-step-900: #e6e6e6;
+  --ion-background-color-step-950: #f2f2f2;
+
+  --ion-text-color-step-50: #f2f2f2;
+  --ion-text-color-step-100: #e6e6e6;
+  --ion-text-color-step-150: #d9d9d9;
+  --ion-text-color-step-200: #cccccc;
+  --ion-text-color-step-250: #bfbfbf;
+  --ion-text-color-step-300: #b3b3b3;
+  --ion-text-color-step-350: #a6a6a6;
+  --ion-text-color-step-400: #999999;
+  --ion-text-color-step-450: #8c8c8c;
+  --ion-text-color-step-500: #808080;
+  --ion-text-color-step-550: #737373;
+  --ion-text-color-step-600: #666666;
+  --ion-text-color-step-650: #595959;
+  --ion-text-color-step-700: #4d4d4d;
+  --ion-text-color-step-750: #404040;
+  --ion-text-color-step-800: #333333;
+  --ion-text-color-step-850: #262626;
+  --ion-text-color-step-900: #1a1a1a;
+  --ion-text-color-step-950: #0d0d0d;
 
   --ion-item-background: #000000;
 
@@ -106,9 +126,9 @@ body {
 }
 
 .ios ion-modal {
-  --ion-background-color: var(--ion-color-step-100);
-  --ion-toolbar-background: var(--ion-color-step-150);
-  --ion-toolbar-border-color: var(--ion-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);
 }
 
 /*
@@ -125,25 +145,45 @@ body {
 
   --ion-border-color: #222222;
 
-  --ion-color-step-50: #1e1e1e;
-  --ion-color-step-100: #2a2a2a;
-  --ion-color-step-150: #363636;
-  --ion-color-step-200: #414141;
-  --ion-color-step-250: #4d4d4d;
-  --ion-color-step-300: #595959;
-  --ion-color-step-350: #656565;
-  --ion-color-step-400: #717171;
-  --ion-color-step-450: #7d7d7d;
-  --ion-color-step-500: #898989;
-  --ion-color-step-550: #949494;
-  --ion-color-step-600: #a0a0a0;
-  --ion-color-step-650: #acacac;
-  --ion-color-step-700: #b8b8b8;
-  --ion-color-step-750: #c4c4c4;
-  --ion-color-step-800: #d0d0d0;
-  --ion-color-step-850: #dbdbdb;
-  --ion-color-step-900: #e7e7e7;
-  --ion-color-step-950: #f3f3f3;
+  --ion-background-color-step-50: #1e1e1e;
+  --ion-background-color-step-100: #2a2a2a;
+  --ion-background-color-step-150: #363636;
+  --ion-background-color-step-200: #414141;
+  --ion-background-color-step-250: #4d4d4d;
+  --ion-background-color-step-300: #595959;
+  --ion-background-color-step-350: #656565;
+  --ion-background-color-step-400: #717171;
+  --ion-background-color-step-450: #7d7d7d;
+  --ion-background-color-step-500: #898989;
+  --ion-background-color-step-550: #949494;
+  --ion-background-color-step-600: #a0a0a0;
+  --ion-background-color-step-650: #acacac;
+  --ion-background-color-step-700: #b8b8b8;
+  --ion-background-color-step-750: #c4c4c4;
+  --ion-background-color-step-800: #d0d0d0;
+  --ion-background-color-step-850: #dbdbdb;
+  --ion-background-color-step-900: #e7e7e7;
+  --ion-background-color-step-950: #f3f3f3;
+
+  --ion-text-color-step-50: #f3f3f3;
+  --ion-text-color-step-100: #e7e7e7;
+  --ion-text-color-step-150: #dbdbdb;
+  --ion-text-color-step-200: #d0d0d0;
+  --ion-text-color-step-250: #c4c4c4;
+  --ion-text-color-step-300: #b8b8b8;
+  --ion-text-color-step-350: #acacac;
+  --ion-text-color-step-400: #a0a0a0;
+  --ion-text-color-step-450: #949494;
+  --ion-text-color-step-500: #898989;
+  --ion-text-color-step-550: #7d7d7d;
+  --ion-text-color-step-600: #717171;
+  --ion-text-color-step-650: #656565;
+  --ion-text-color-step-700: #595959;
+  --ion-text-color-step-750: #4d4d4d;
+  --ion-text-color-step-800: #414141;
+  --ion-text-color-step-850: #363636;
+  --ion-text-color-step-900: #2a2a2a;
+  --ion-text-color-step-950: #1e1e1e;
 
   --ion-item-background: #1e1e1e;
 
diff --git a/core/src/themes/native/test/css-variables/css/oceanic.css b/core/src/themes/native/test/css-variables/css/oceanic.css
index 81e6ca5172f..046e0265c85 100644
--- a/core/src/themes/native/test/css-variables/css/oceanic.css
+++ b/core/src/themes/native/test/css-variables/css/oceanic.css
@@ -96,24 +96,45 @@
   --ion-text-color: #fff;
   --ion-text-color-rgb: 255,255,255;
 
-  --ion-color-step-50: #26363e;
-  --ion-color-step-100: #324048;
-  --ion-color-step-150: #3d4b52;
-  --ion-color-step-200: #49555d;
-  --ion-color-step-250: #546067;
-  --ion-color-step-300: #5f6b71;
-  --ion-color-step-350: #6b757b;
-  --ion-color-step-400: #768085;
-  --ion-color-step-450: #828a8f;
-  --ion-color-step-500: #8d959a;
-  --ion-color-step-550: #98a0a4;
-  --ion-color-step-600: #a4aaae;
-  --ion-color-step-650: #afb5b8;
-  --ion-color-step-700: #bbbfc2;
-  --ion-color-step-750: #c6cacc;
-  --ion-color-step-800: #d1d5d6;
-  --ion-color-step-850: #dddfe1;
-  --ion-color-step-900: #e8eaeb;
-  --ion-color-step-950: #f4f4f5;
-  --ion-color-step-1000: #fff;
+  --ion-background-color-step-50: #26363e;
+  --ion-background-color-step-100: #324048;
+  --ion-background-color-step-150: #3d4b52;
+  --ion-background-color-step-200: #49555d;
+  --ion-background-color-step-250: #546067;
+  --ion-background-color-step-300: #5f6b71;
+  --ion-background-color-step-350: #6b757b;
+  --ion-background-color-step-400: #768085;
+  --ion-background-color-step-450: #828a8f;
+  --ion-background-color-step-500: #8d959a;
+  --ion-background-color-step-550: #98a0a4;
+  --ion-background-color-step-600: #a4aaae;
+  --ion-background-color-step-650: #afb5b8;
+  --ion-background-color-step-700: #bbbfc2;
+  --ion-background-color-step-750: #c6cacc;
+  --ion-background-color-step-800: #d1d5d6;
+  --ion-background-color-step-850: #dddfe1;
+  --ion-background-color-step-900: #e8eaeb;
+  --ion-background-color-step-950: #f4f4f5;
+  --ion-background-color-step-1000: #fff;
+
+  --ion-text-color-step-50: #fff;
+  --ion-text-color-step-100: #f4f4f5;
+  --ion-text-color-step-150: #e8eaeb;
+  --ion-text-color-step-200: #dddfe1;
+  --ion-text-color-step-250: #d1d5d6;
+  --ion-text-color-step-300: #c6cacc;
+  --ion-text-color-step-350: #bbbfc2;
+  --ion-text-color-step-400: #afb5b8;
+  --ion-text-color-step-450: #a4aaae;
+  --ion-text-color-step-500: #98a0a4;
+  --ion-text-color-step-550: #8d959a;
+  --ion-text-color-step-600: #828a8f;
+  --ion-text-color-step-650: #768085;
+  --ion-text-color-step-700: #6b757b;
+  --ion-text-color-step-750: #5f6b71;
+  --ion-text-color-step-800: #546067;
+  --ion-text-color-step-850: #49555d;
+  --ion-text-color-step-900: #3d4b52;
+  --ion-text-color-step-950: #324048;
+  --ion-text-color-step-1000: #26363e;
 }
diff --git a/core/src/themes/native/test/css-variables/index.html b/core/src/themes/native/test/css-variables/index.html
index b7c2b9990de..a3dddf801e9 100644
--- a/core/src/themes/native/test/css-variables/index.html
+++ b/core/src/themes/native/test/css-variables/index.html
@@ -13,7 +13,7 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <link id="palette" href="/src/themes/test/default.css" rel="stylesheet" />
+    <link id="palette" href="../default.css" rel="stylesheet" />
 
     <style>
       .wrapper {
diff --git a/core/src/themes/native/test/steps/index.html b/core/src/themes/native/test/steps/index.html
deleted file mode 100644
index 3579469b36a..00000000000
--- a/core/src/themes/native/test/steps/index.html
+++ /dev/null
@@ -1,225 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Themes - Steps</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      .block {
-        display: inline-block;
-        height: 60px;
-        width: 150px;
-      }
-
-      .background-step-50 {
-        background: var(--ion-color-step-50, #f2f2f2);
-      }
-
-      .background-step-100 {
-        background: var(--ion-color-step-100, #e6e6e6);
-      }
-
-      .background-step-150 {
-        background: var(--ion-color-step-150, #d9d9d9);
-      }
-
-      .background-step-200 {
-        background: var(--ion-color-step-200, #cccccc);
-      }
-
-      .background-step-250 {
-        background: var(--ion-color-step-250, #bfbfbf);
-      }
-
-      .background-step-300 {
-        background: var(--ion-color-step-300, #b3b3b3);
-      }
-
-      .background-step-350 {
-        background: var(--ion-color-step-350, #a6a6a6);
-      }
-
-      .background-step-400 {
-        background: var(--ion-color-step-400, #999999);
-      }
-
-      .background-step-450 {
-        background: var(--ion-color-step-450, #8c8c8c);
-      }
-
-      .background-step-500 {
-        background: var(--ion-color-step-500, gray);
-      }
-
-      .background-step-550 {
-        background: var(--ion-color-step-550, #737373);
-      }
-
-      .background-step-600 {
-        background: var(--ion-color-step-600, #666666);
-      }
-
-      .background-step-650 {
-        background: var(--ion-color-step-650, #595959);
-      }
-
-      .background-step-700 {
-        background: var(--ion-color-step-700, #4d4d4d);
-      }
-
-      .background-step-750 {
-        background: var(--ion-color-step-750, #404040);
-      }
-
-      .background-step-800 {
-        background: var(--ion-color-step-800, #333333);
-      }
-
-      .background-step-850 {
-        background: var(--ion-color-step-850, #262626);
-      }
-
-      .background-step-900 {
-        background: var(--ion-color-step-900, #1a1a1a);
-      }
-
-      .background-step-950 {
-        background: var(--ion-color-step-950, #0d0d0d);
-      }
-
-      .text-step-50 {
-        color: var(--ion-color-step-950, #0d0d0d);
-      }
-
-      .text-step-100 {
-        color: var(--ion-color-step-900, #1a1a1a);
-      }
-
-      .text-step-150 {
-        color: var(--ion-color-step-850, #262626);
-      }
-
-      .text-step-200 {
-        color: var(--ion-color-step-800, #333333);
-      }
-
-      .text-step-250 {
-        color: var(--ion-color-step-750, #404040);
-      }
-
-      .text-step-300 {
-        color: var(--ion-color-step-700, #4d4d4d);
-      }
-
-      .text-step-350 {
-        color: var(--ion-color-step-650, #595959);
-      }
-
-      .text-step-400 {
-        color: var(--ion-color-step-600, #666666);
-      }
-
-      .text-step-450 {
-        color: var(--ion-color-step-550, #737373);
-      }
-
-      .text-step-500 {
-        color: var(--ion-color-step-500, gray);
-      }
-
-      .text-step-550 {
-        color: var(--ion-color-step-450, #8c8c8c);
-      }
-
-      .text-step-600 {
-        color: var(--ion-color-step-400, #999999);
-      }
-
-      .text-step-650 {
-        color: var(--ion-color-step-350, #a6a6a6);
-      }
-
-      .text-step-700 {
-        color: var(--ion-color-step-300, #b3b3b3);
-      }
-
-      .text-step-750 {
-        color: var(--ion-color-step-250, #bfbfbf);
-      }
-
-      .text-step-800 {
-        color: var(--ion-color-step-200, #cccccc);
-      }
-
-      .text-step-850 {
-        color: var(--ion-color-step-150, #d9d9d9);
-      }
-
-      .text-step-900 {
-        color: var(--ion-color-step-100, #e6e6e6);
-      }
-
-      .text-step-950 {
-        color: var(--ion-color-step-50, #f2f2f2);
-      }
-    </style>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-content class="ion-padding">
-        <div class="block">Background</div>
-        <div class="block background-step-50">Step 50</div>
-        <div class="block background-step-100">Step 100</div>
-        <div class="block background-step-150">Step 150</div>
-        <div class="block background-step-200">Step 200</div>
-        <div class="block background-step-250">Step 250</div>
-        <div class="block background-step-300">Step 300</div>
-        <div class="block background-step-350">Step 350</div>
-        <div class="block background-step-400">Step 400</div>
-        <div class="block background-step-450">Step 450</div>
-        <div class="block background-step-500">Step 500</div>
-        <div class="block background-step-550">Step 550</div>
-        <div class="block background-step-600">Step 600</div>
-        <div class="block background-step-650">Step 650</div>
-        <div class="block background-step-700">Step 700</div>
-        <div class="block background-step-750">Step 750</div>
-        <div class="block background-step-800">Step 800</div>
-        <div class="block background-step-850">Step 850</div>
-        <div class="block background-step-900">Step 900</div>
-        <div class="block background-step-950">Step 950</div>
-        <hr />
-
-        <div class="block">Text</div>
-        <div class="block text-step-50">Step 50</div>
-        <div class="block text-step-100">Step 100</div>
-        <div class="block text-step-150">Step 150</div>
-        <div class="block text-step-200">Step 200</div>
-        <div class="block text-step-250">Step 250</div>
-        <div class="block text-step-300">Step 300</div>
-        <div class="block text-step-350">Step 350</div>
-        <div class="block text-step-400">Step 400</div>
-        <div class="block text-step-450">Step 450</div>
-        <div class="block text-step-500">Step 500</div>
-        <div class="block text-step-550">Step 550</div>
-        <div class="block text-step-600">Step 600</div>
-        <div class="block text-step-650">Step 650</div>
-        <div class="block text-step-700">Step 700</div>
-        <div class="block text-step-750">Step 750</div>
-        <div class="block text-step-800">Step 800</div>
-        <div class="block text-step-850">Step 850</div>
-        <div class="block text-step-900">Step 900</div>
-        <div class="block text-step-950">Step 950</div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/core/src/themes/test/steps/index.html b/core/src/themes/test/steps/index.html
new file mode 100644
index 00000000000..6657fb483d2
--- /dev/null
+++ b/core/src/themes/test/steps/index.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Themes - Steps</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic/bundle.ionic.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <link id="palette" rel="stylesheet" />
+
+    <style>
+      .grid {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 20px;
+        margin: 40px 0;
+      }
+
+      .column {
+        min-width: 400px;
+        max-width: 500px;
+      }
+
+      .row {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin: 16px 10px;
+        gap: 10px;
+      }
+
+      .color-tile {
+        border: 1px solid #f2f2f2;
+        height: 40px;
+        width: 80px;
+        cursor: pointer;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Themes - Steps</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <div class="grid">
+          <div class="column">
+            <h2>Background</h2>
+            <div id="background" class="row"></div>
+          </div>
+
+          <div class="column">
+            <h2>Text</h2>
+            <div id="text" class="row"></div>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const themeName = document.documentElement.getAttribute('theme');
+        const paletteQuery = window.location.search.match(/palette=([a-z-]+)/);
+        const paletteHash = window.location.hash.match(/palette=([a-z-]+)/);
+        const paletteName = paletteQuery?.[1] || paletteHash?.[1] || 'light';
+
+        const generateBackgroundColors = () => {
+          const backgroundContainer = document.getElementById('background');
+          const bodyStyles = getComputedStyle(document.body);
+
+          if (!bodyStyles.getPropertyValue('--ion-background-color-step-50')) {
+            const error = document.createElement('span');
+            error.textContent =
+              'Background color variables not found for theme: ' + themeName + ' and palette: ' + paletteName;
+            backgroundContainer.appendChild(error);
+
+            return;
+          }
+
+          for (let i = 50; i <= 950; i += 50) {
+            const backgroundColor = `--ion-background-color-step-${i}`;
+
+            const colorValue = bodyStyles.getPropertyValue(backgroundColor).trim();
+
+            const item = document.createElement('span');
+
+            const color = document.createElement('div');
+            color.classList.add('block', 'color-tile');
+            color.style.backgroundColor = `var(${backgroundColor})`;
+
+            color.addEventListener('click', () => {
+              navigator.clipboard.writeText(backgroundColor);
+              console.log(`${backgroundColor} copied to clipboard`);
+            });
+
+            item.appendChild(color);
+
+            const name = document.createElement('div');
+            name.textContent = `background-${i}`;
+            item.appendChild(name);
+
+            const value = document.createElement('div');
+            value.textContent = colorValue;
+            item.appendChild(value);
+
+            backgroundContainer.appendChild(item);
+          }
+        };
+
+        const generateTextColors = () => {
+          const textContainer = document.getElementById('text');
+          const bodyStyles = getComputedStyle(document.body);
+
+          if (!bodyStyles.getPropertyValue('--ion-text-color-step-50')) {
+            const error = document.createElement('span');
+            error.textContent =
+              'Text color variables not found for theme: ' + themeName + ' and palette: ' + paletteName;
+            textContainer.appendChild(error);
+
+            return;
+          }
+
+          for (let i = 50; i <= 950; i += 50) {
+            const textColor = `--ion-text-color-step-${i}`;
+
+            const colorValue = bodyStyles.getPropertyValue(textColor).trim();
+
+            const item = document.createElement('span');
+
+            const color = document.createElement('div');
+            color.classList.add('block', 'color-tile');
+            color.style.backgroundColor = `var(${textColor})`;
+
+            color.addEventListener('click', () => {
+              navigator.clipboard.writeText(textColor);
+              console.log(`${textColor} copied to clipboard`);
+            });
+
+            item.appendChild(color);
+
+            const name = document.createElement('div');
+            name.textContent = `text-${i}`;
+            item.appendChild(name);
+
+            const value = document.createElement('div');
+            value.textContent = colorValue;
+            item.appendChild(value);
+
+            textContainer.appendChild(item);
+          }
+        };
+
+        generateBackgroundColors();
+        generateTextColors();
+      });
+    </script>
+  </body>
+</html>
diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts
index dd236fff88b..f5f0b96c184 100644
--- a/core/src/themes/themes.interfaces.ts
+++ b/core/src/themes/themes.interfaces.ts
@@ -11,12 +11,8 @@ export type BaseTheme = {
   backgroundColorRgb?: string;
   textColor?: string;
   textColorRgb?: string;
-  backgroundColorStep?: {
-    [key: string]: string;
-  };
-  textColorStep?: {
-    [key: string]: string;
-  };
+  backgroundColorStep?: NumberStringKeys;
+  textColorStep?: NumberStringKeys;
 
   // TODO(FW-6864): Remove once IonToolbar themes are added
   toolbar?: any;
@@ -303,3 +299,8 @@ export type IonPadding = {
   bottom?: string | number;
   start?: string | number;
 };
+
+export type NumberStringKeys = {
+  // Enforce keys are strings of numbers (like 50, '50', etc.)
+  [K in number as `${K}`]?: string;
+};
diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts
index 3653610250e..c457ab45404 100644
--- a/core/src/utils/theme.ts
+++ b/core/src/utils/theme.ts
@@ -1,6 +1,7 @@
 import { printIonWarning } from '@utils/logging';
 
 import type { Color, CssClassMap } from '../interface';
+import type { NumberStringKeys } from '../themes/themes.interfaces';
 
 import { deepMerge } from './helpers';
 
@@ -633,3 +634,23 @@ export function currentColor(variation: string, alpha: number | string | null =
 export function clamp(min: number | string, val: number | string, max: number | string): string {
   return `clamp(${min}, ${val}, ${max})`;
 }
+
+/**
+ * Generates a series of color steps between a base color and a mix color.
+ *
+ * @param baseColor Base color (e.g. `'#0054e9'`)
+ * @param mixColor Color to mix in (e.g. `'#000000'` or `'#fff'`)
+ *
+ * @returns An object containing the generated color steps
+ */
+export const generateColorSteps = (baseColor: string, mixColor: string): NumberStringKeys => {
+  const colorSteps: NumberStringKeys = {};
+
+  for (let step = 50; step <= 950; step += 50) {
+    const weight = `${step / 10}%`;
+
+    colorSteps[`${step}`] = mix(baseColor, mixColor, weight);
+  }
+
+  return colorSteps;
+};
diff --git a/docs/sass-guidelines.md b/docs/sass-guidelines.md
index ac0a91d728a..89a6aeb2898 100644
--- a/docs/sass-guidelines.md
+++ b/docs/sass-guidelines.md
@@ -201,7 +201,7 @@ $text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value);
 $backdrop-ios-color: var(--ion-backdrop-color, #000);
 $overlay-ios-background-color: var(
   --ion-overlay-background-color,
-  var(--ion-color-step-100, #f9f9f9)
+  var(--ion-background-color-step-100, #f9f9f9)
 );
 ```
 
diff --git a/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.scss
index d8b2a267e5a..01ce687c893 100644
--- a/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.scss
+++ b/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.scss
@@ -8,7 +8,7 @@
 h2 {
   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;
 }
diff --git a/packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.scss
index add228ccab1..522fc02f5e9 100644
--- a/packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.scss
+++ b/packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.scss
@@ -8,7 +8,7 @@
 h2 {
   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;
 }
diff --git a/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.scss
index add228ccab1..522fc02f5e9 100644
--- a/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.scss
+++ b/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.scss
@@ -8,7 +8,7 @@
 h2 {
   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;
 }
diff --git a/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.scss
index add228ccab1..522fc02f5e9 100644
--- a/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.scss
+++ b/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.scss
@@ -8,7 +8,7 @@
 h2 {
   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;
 }
diff --git a/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.scss
index 6462ef79f69..733af19d845 100644
--- a/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.scss
+++ b/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.scss
@@ -8,7 +8,7 @@
 h2 {
   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;
 }
diff --git a/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.scss
index add228ccab1..522fc02f5e9 100644
--- a/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.scss
+++ b/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.scss
@@ -8,7 +8,7 @@
 h2 {
   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;
 }
diff --git a/packages/react-router/test/base/src/theme/variables.css b/packages/react-router/test/base/src/theme/variables.css
index 7bcbe5d6e2a..398a78fc76e 100644
--- a/packages/react-router/test/base/src/theme/variables.css
+++ b/packages/react-router/test/base/src/theme/variables.css
@@ -159,25 +159,45 @@ http://ionicframework.com/docs/theming/ */
     --ion-text-color: #ffffff;
     --ion-text-color-rgb: 255, 255, 255;
 
-    --ion-color-step-50: #0d0d0d;
-    --ion-color-step-100: #1a1a1a;
-    --ion-color-step-150: #262626;
-    --ion-color-step-200: #333333;
-    --ion-color-step-250: #404040;
-    --ion-color-step-300: #4d4d4d;
-    --ion-color-step-350: #595959;
-    --ion-color-step-400: #666666;
-    --ion-color-step-450: #737373;
-    --ion-color-step-500: #808080;
-    --ion-color-step-550: #8c8c8c;
-    --ion-color-step-600: #999999;
-    --ion-color-step-650: #a6a6a6;
-    --ion-color-step-700: #b3b3b3;
-    --ion-color-step-750: #bfbfbf;
-    --ion-color-step-800: #cccccc;
-    --ion-color-step-850: #d9d9d9;
-    --ion-color-step-900: #e6e6e6;
-    --ion-color-step-950: #f2f2f2;
+    --ion-background-color-step-50: #0d0d0d;
+    --ion-background-color-step-100: #1a1a1a;
+    --ion-background-color-step-150: #262626;
+    --ion-background-color-step-200: #333333;
+    --ion-background-color-step-250: #404040;
+    --ion-background-color-step-300: #4d4d4d;
+    --ion-background-color-step-350: #595959;
+    --ion-background-color-step-400: #666666;
+    --ion-background-color-step-450: #737373;
+    --ion-background-color-step-500: #808080;
+    --ion-background-color-step-550: #8c8c8c;
+    --ion-background-color-step-600: #999999;
+    --ion-background-color-step-650: #a6a6a6;
+    --ion-background-color-step-700: #b3b3b3;
+    --ion-background-color-step-750: #bfbfbf;
+    --ion-background-color-step-800: #cccccc;
+    --ion-background-color-step-850: #d9d9d9;
+    --ion-background-color-step-900: #e6e6e6;
+    --ion-background-color-step-950: #f2f2f2;
+
+    --ion-text-color-step-50: #f2f2f2;
+    --ion-text-color-step-100: #e6e6e6;
+    --ion-text-color-step-150: #d9d9d9;
+    --ion-text-color-step-200: #cccccc;
+    --ion-text-color-step-250: #bfbfbf;
+    --ion-text-color-step-300: #b3b3b3;
+    --ion-text-color-step-350: #a6a6a6;
+    --ion-text-color-step-400: #999999;
+    --ion-text-color-step-450: #8c8c8c;
+    --ion-text-color-step-500: #808080;
+    --ion-text-color-step-550: #737373;
+    --ion-text-color-step-600: #666666;
+    --ion-text-color-step-650: #595959;
+    --ion-text-color-step-700: #4d4d4d;
+    --ion-text-color-step-750: #404040;
+    --ion-text-color-step-800: #333333;
+    --ion-text-color-step-850: #262626;
+    --ion-text-color-step-900: #1a1a1a;
+    --ion-text-color-step-950: #0d0d0d;
 
     --ion-toolbar-background: #0d0d0d;
 
@@ -198,25 +218,45 @@ http://ionicframework.com/docs/theming/ */
 
     --ion-border-color: #222222;
 
-    --ion-color-step-50: #1e1e1e;
-    --ion-color-step-100: #2a2a2a;
-    --ion-color-step-150: #363636;
-    --ion-color-step-200: #414141;
-    --ion-color-step-250: #4d4d4d;
-    --ion-color-step-300: #595959;
-    --ion-color-step-350: #656565;
-    --ion-color-step-400: #717171;
-    --ion-color-step-450: #7d7d7d;
-    --ion-color-step-500: #898989;
-    --ion-color-step-550: #949494;
-    --ion-color-step-600: #a0a0a0;
-    --ion-color-step-650: #acacac;
-    --ion-color-step-700: #b8b8b8;
-    --ion-color-step-750: #c4c4c4;
-    --ion-color-step-800: #d0d0d0;
-    --ion-color-step-850: #dbdbdb;
-    --ion-color-step-900: #e7e7e7;
-    --ion-color-step-950: #f3f3f3;
+    --ion-background-color-step-50: #1e1e1e;
+    --ion-background-color-step-100: #2a2a2a;
+    --ion-background-color-step-150: #363636;
+    --ion-background-color-step-200: #414141;
+    --ion-background-color-step-250: #4d4d4d;
+    --ion-background-color-step-300: #595959;
+    --ion-background-color-step-350: #656565;
+    --ion-background-color-step-400: #717171;
+    --ion-background-color-step-450: #7d7d7d;
+    --ion-background-color-step-500: #898989;
+    --ion-background-color-step-550: #949494;
+    --ion-background-color-step-600: #a0a0a0;
+    --ion-background-color-step-650: #acacac;
+    --ion-background-color-step-700: #b8b8b8;
+    --ion-background-color-step-750: #c4c4c4;
+    --ion-background-color-step-800: #d0d0d0;
+    --ion-background-color-step-850: #dbdbdb;
+    --ion-background-color-step-900: #e7e7e7;
+    --ion-background-color-step-950: #f3f3f3;
+
+    --ion-text-color-step-50: #f3f3f3;
+    --ion-text-color-step-100: #e7e7e7;
+    --ion-text-color-step-150: #dbdbdb;
+    --ion-text-color-step-200: #d0d0d0;
+    --ion-text-color-step-250: #c4c4c4;
+    --ion-text-color-step-300: #b8b8b8;
+    --ion-text-color-step-350: #acacac;
+    --ion-text-color-step-400: #a0a0a0;
+    --ion-text-color-step-450: #949494;
+    --ion-text-color-step-500: #898989;
+    --ion-text-color-step-550: #7d7d7d;
+    --ion-text-color-step-600: #717171;
+    --ion-text-color-step-650: #656565;
+    --ion-text-color-step-700: #595959;
+    --ion-text-color-step-750: #4d4d4d;
+    --ion-text-color-step-800: #414141;
+    --ion-text-color-step-850: #363636;
+    --ion-text-color-step-900: #2a2a2a;
+    --ion-text-color-step-950: #1e1e1e;
 
     --ion-item-background: #1e1e1e;
 
diff --git a/packages/react/test/base/src/theme/variables.css b/packages/react/test/base/src/theme/variables.css
index a44fcdd01d7..68ca3a7106a 100644
--- a/packages/react/test/base/src/theme/variables.css
+++ b/packages/react/test/base/src/theme/variables.css
@@ -159,25 +159,45 @@ http://ionicframework.com/docs/theming/ */
     --ion-text-color: #ffffff;
     --ion-text-color-rgb: 255,255,255;
 
-    --ion-color-step-50: #0d0d0d;
-    --ion-color-step-100: #1a1a1a;
-    --ion-color-step-150: #262626;
-    --ion-color-step-200: #333333;
-    --ion-color-step-250: #404040;
-    --ion-color-step-300: #4d4d4d;
-    --ion-color-step-350: #595959;
-    --ion-color-step-400: #666666;
-    --ion-color-step-450: #737373;
-    --ion-color-step-500: #808080;
-    --ion-color-step-550: #8c8c8c;
-    --ion-color-step-600: #999999;
-    --ion-color-step-650: #a6a6a6;
-    --ion-color-step-700: #b3b3b3;
-    --ion-color-step-750: #bfbfbf;
-    --ion-color-step-800: #cccccc;
-    --ion-color-step-850: #d9d9d9;
-    --ion-color-step-900: #e6e6e6;
-    --ion-color-step-950: #f2f2f2;
+    --ion-background-color-step-50: #0d0d0d;
+    --ion-background-color-step-100: #1a1a1a;
+    --ion-background-color-step-150: #262626;
+    --ion-background-color-step-200: #333333;
+    --ion-background-color-step-250: #404040;
+    --ion-background-color-step-300: #4d4d4d;
+    --ion-background-color-step-350: #595959;
+    --ion-background-color-step-400: #666666;
+    --ion-background-color-step-450: #737373;
+    --ion-background-color-step-500: #808080;
+    --ion-background-color-step-550: #8c8c8c;
+    --ion-background-color-step-600: #999999;
+    --ion-background-color-step-650: #a6a6a6;
+    --ion-background-color-step-700: #b3b3b3;
+    --ion-background-color-step-750: #bfbfbf;
+    --ion-background-color-step-800: #cccccc;
+    --ion-background-color-step-850: #d9d9d9;
+    --ion-background-color-step-900: #e6e6e6;
+    --ion-background-color-step-950: #f2f2f2;
+
+    --ion-text-color-step-50: #f2f2f2;
+    --ion-text-color-step-100: #e6e6e6;
+    --ion-text-color-step-150: #d9d9d9;
+    --ion-text-color-step-200: #cccccc;
+    --ion-text-color-step-250: #bfbfbf;
+    --ion-text-color-step-300: #b3b3b3;
+    --ion-text-color-step-350: #a6a6a6;
+    --ion-text-color-step-400: #999999;
+    --ion-text-color-step-450: #8c8c8c;
+    --ion-text-color-step-500: #808080;
+    --ion-text-color-step-550: #737373;
+    --ion-text-color-step-600: #666666;
+    --ion-text-color-step-650: #595959;
+    --ion-text-color-step-700: #4d4d4d;
+    --ion-text-color-step-750: #404040;
+    --ion-text-color-step-800: #333333;
+    --ion-text-color-step-850: #262626;
+    --ion-text-color-step-900: #1a1a1a;
+    --ion-text-color-step-950: #0d0d0d;
 
     --ion-item-background: #000000;
 
@@ -185,9 +205,9 @@ http://ionicframework.com/docs/theming/ */
   }
 
   .ios ion-modal {
-    --ion-background-color: var(--ion-color-step-100);
-    --ion-toolbar-background: var(--ion-color-step-150);
-    --ion-toolbar-border-color: var(--ion-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);
   }
 
 
@@ -205,25 +225,45 @@ http://ionicframework.com/docs/theming/ */
 
     --ion-border-color: #222222;
 
-    --ion-color-step-50: #1e1e1e;
-    --ion-color-step-100: #2a2a2a;
-    --ion-color-step-150: #363636;
-    --ion-color-step-200: #414141;
-    --ion-color-step-250: #4d4d4d;
-    --ion-color-step-300: #595959;
-    --ion-color-step-350: #656565;
-    --ion-color-step-400: #717171;
-    --ion-color-step-450: #7d7d7d;
-    --ion-color-step-500: #898989;
-    --ion-color-step-550: #949494;
-    --ion-color-step-600: #a0a0a0;
-    --ion-color-step-650: #acacac;
-    --ion-color-step-700: #b8b8b8;
-    --ion-color-step-750: #c4c4c4;
-    --ion-color-step-800: #d0d0d0;
-    --ion-color-step-850: #dbdbdb;
-    --ion-color-step-900: #e7e7e7;
-    --ion-color-step-950: #f3f3f3;
+    --ion-background-color-step-50: #1e1e1e;
+    --ion-background-color-step-100: #2a2a2a;
+    --ion-background-color-step-150: #363636;
+    --ion-background-color-step-200: #414141;
+    --ion-background-color-step-250: #4d4d4d;
+    --ion-background-color-step-300: #595959;
+    --ion-background-color-step-350: #656565;
+    --ion-background-color-step-400: #717171;
+    --ion-background-color-step-450: #7d7d7d;
+    --ion-background-color-step-500: #898989;
+    --ion-background-color-step-550: #949494;
+    --ion-background-color-step-600: #a0a0a0;
+    --ion-background-color-step-650: #acacac;
+    --ion-background-color-step-700: #b8b8b8;
+    --ion-background-color-step-750: #c4c4c4;
+    --ion-background-color-step-800: #d0d0d0;
+    --ion-background-color-step-850: #dbdbdb;
+    --ion-background-color-step-900: #e7e7e7;
+    --ion-background-color-step-950: #f3f3f3;
+
+    --ion-text-color-step-50: #f3f3f3;
+    --ion-text-color-step-100: #e7e7e7;
+    --ion-text-color-step-150: #dbdbdb;
+    --ion-text-color-step-200: #d0d0d0;
+    --ion-text-color-step-250: #c4c4c4;
+    --ion-text-color-step-300: #b8b8b8;
+    --ion-text-color-step-350: #acacac;
+    --ion-text-color-step-400: #a0a0a0;
+    --ion-text-color-step-450: #949494;
+    --ion-text-color-step-500: #898989;
+    --ion-text-color-step-550: #7d7d7d;
+    --ion-text-color-step-600: #717171;
+    --ion-text-color-step-650: #656565;
+    --ion-text-color-step-700: #595959;
+    --ion-text-color-step-750: #4d4d4d;
+    --ion-text-color-step-800: #414141;
+    --ion-text-color-step-850: #363636;
+    --ion-text-color-step-900: #2a2a2a;
+    --ion-text-color-step-950: #1e1e1e;
 
     --ion-item-background: #1e1e1e;