fix(themes): use correct background and text stepped values

thetaPC · thetaPC · commit 28e8745ffb97 · 2026-03-24T16:00:22.000-07:00
diff --git 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
@@ -1,52 +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,
 
-  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
@@ -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('#ffffff', '#000000'),
+  textColorStep: generateColorSteps('#888888', '#ffffff'),
 };
diff --git a/core/src/themes/ios/high-contrast.tokens.ts b/core/src/themes/ios/high-contrast.tokens.ts
@@ -3,48 +3,4 @@ import type { HighContrastTheme } from '../themes.interfaces';
 
 export const highContrastTheme: HighContrastTheme = {
   ...baseHighContrastTheme,
-
-  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
@@ -1,3 +1,4 @@
+import { generateColorSteps } from '../../utils/theme';
 import { darkTheme as baseDarkTheme } from '../base/dark.tokens';
 import type { DarkTheme } from '../themes.interfaces';
 
@@ -12,49 +13,8 @@ export const darkTheme: DarkTheme = {
     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
@@ -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';
 
@@ -11,25 +12,6 @@ export const highContrastDarkTheme: HighContrastDarkTheme = {
     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('#ffffff', '#121212'),
+  textColorStep: generateColorSteps('#888888', '#ffffff'),
 };
diff --git a/core/src/themes/md/high-contrast.tokens.ts b/core/src/themes/md/high-contrast.tokens.ts
@@ -3,48 +3,4 @@ import type { HighContrastTheme } from '../themes.interfaces';
 
 export const highContrastTheme: HighContrastTheme = {
   ...baseHighContrastTheme,
-
-  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/test/steps/index.html b/core/src/themes/test/steps/index.html
@@ -88,7 +88,7 @@ <h2>Text</h2>
             return;
           }
 
-          for (let i = 50; i < 950; i += 50) {
+          for (let i = 50; i <= 950; i += 50) {
             const backgroundColor = `--ion-background-color-step-${i}`;
 
             const colorValue = bodyStyles.getPropertyValue(backgroundColor).trim();
diff --git 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
@@ -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;
+};

Original file line number	Diff line number	Diff line change
`@@ -88,7 +88,7 @@ <h2>Text</h2>`
`88`	`88`	`return;`
`89`	`89`	`}`
`90`	`90`
`91`		`- for (let i = 50; i < 950; i += 50) {`
	`91`	`+ for (let i = 50; i <= 950; i += 50) {`
`92`	`92`	const backgroundColor = `--ion-background-color-step-${i}`;
`93`	`93`
`94`	`94`	`const colorValue = bodyStyles.getPropertyValue(backgroundColor).trim();`