From 3192b2976606dade1cafe6c560964814be7f8886 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 19 Nov 2025 13:05:29 -0800 Subject: [PATCH 01/45] feat(tokens): add gray colors --- core/src/themes/base/default.tokens.ts | 5 ++ .../themes/native/native.theme.default.scss | 2 +- core/src/themes/themes.interfaces.ts | 51 ++++++++++++------- core/src/utils/theme.ts | 31 +++++++++++ 4 files changed, 70 insertions(+), 19 deletions(-) diff --git a/core/src/themes/base/default.tokens.ts b/core/src/themes/base/default.tokens.ts index 6df6efb9e6f..2196e8906cb 100644 --- a/core/src/themes/base/default.tokens.ts +++ b/core/src/themes/base/default.tokens.ts @@ -1,3 +1,4 @@ +import { generateColorSteps } from '../../utils/theme'; import type { DefaultTheme } from '../themes.interfaces'; import { darkTheme } from './dark.tokens'; @@ -160,4 +161,8 @@ export const defaultTheme: DefaultTheme = { xl: '2', xxl: '2.4', }, + + color: { + gray: generateColorSteps('#fff', '#000'), + }, }; diff --git a/core/src/themes/native/native.theme.default.scss b/core/src/themes/native/native.theme.default.scss index db4819c8a94..c5d9079758a 100644 --- a/core/src/themes/native/native.theme.default.scss +++ b/core/src/themes/native/native.theme.default.scss @@ -113,7 +113,7 @@ $text-color-step-100: var( $text-color-step-150: var( --ion-color-step-850, var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%)) -); +); // 262626 gray-850 $text-color-step-200: var( --ion-color-step-800, var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%)) diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts index 6e5e8157e29..1930b85e67a 100644 --- a/core/src/themes/themes.interfaces.ts +++ b/core/src/themes/themes.interfaces.ts @@ -1,3 +1,4 @@ +import type { PredefinedColors } from '../interface'; import type { IonicConfig } from '../utils/config'; // Platform-specific theme @@ -218,24 +219,7 @@ export type BaseTheme = { }; // COLOR TOKENS - color?: { - [key: string]: { - bold: { - base: string; - contrast: string; - foreground: string; - shade: string; - tint: string; - }; - subtle: { - base: string; - contrast: string; - foreground: string; - shade: string; - tint: string; - }; - }; - }; + color?: Colors; // PLATFORM SPECIFIC OVERRIDES ios?: PlatformTheme; @@ -261,3 +245,34 @@ export type DefaultTheme = BaseTheme & { config?: IonicConfig; }; + +// Semantic color value structure +type SemanticColorValue = { + base: string; + contrast: string; + foreground: string; + shade: string; + tint: string; +}; + +// Semantic color hue value structure +type SemanticHue = { + bold?: SemanticColorValue; + subtle?: SemanticColorValue; +}; + +// Number string keys structure +export type NumberStringKeys = { + // Enforce keys are strings of numbers (like 50, '50', etc.) + [K in number as `${K}`]?: string; +}; + +// Primitive color keys +type PrimitiveColors = 'gray'; + +// Colors interface +type Colors = { + [K in PredefinedColors]?: SemanticHue; +} & { + [K in PrimitiveColors]?: NumberStringKeys; +}; diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts index aeab9823ec2..d3b52b095ad 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'; @@ -471,3 +472,33 @@ export const mix = (baseColor: string, mixColor: string, weight: string): string const toHex = (n: number) => n.toString(16).padStart(2, '0'); return `#${toHex(r)}${toHex(g)}${toHex(b)}`; }; + +/** + * Generates a color scale object by mixing a light and dark color. + * + * This function creates ten distinct shade levels (50, 100, 150, ..., 950) + * by mixing the light color into the dark color using mix percentages + * that increment in steps of 5%. + * + * The final output is an object where keys are the shade levels (50-950) + * and values are the resulting mixed hex codes. + * + * @param {string} lightColor - The lighter base color hex value. + * @param {string} darkColor - The darker base color hex value. + * @returns {NumberStringKeys} An object of color shades. + * + * @example + * mix('#ffffff', '#000000', 5%) results in the color for key '50' + * mix('#ffffff', '#000000', 95%) results in the color for key '950' + */ +export const generateColorSteps = (lightColor: string, darkColor: string): NumberStringKeys => { + const colorSteps: NumberStringKeys = {}; + + for (let i = 50; i <= 950; i += 50) { + const weight = `${i / 10}%`; + + colorSteps[i.toString() as keyof NumberStringKeys] = mix(lightColor, darkColor, weight); + } + + return colorSteps; +}; From 0cc323a59cf3735761a8b6508e0173f60197b69b Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 19 Nov 2025 13:07:49 -0800 Subject: [PATCH 02/45] refactor(tokens): remove comment --- core/src/themes/native/native.theme.default.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/themes/native/native.theme.default.scss b/core/src/themes/native/native.theme.default.scss index c5d9079758a..db4819c8a94 100644 --- a/core/src/themes/native/native.theme.default.scss +++ b/core/src/themes/native/native.theme.default.scss @@ -113,7 +113,7 @@ $text-color-step-100: var( $text-color-step-150: var( --ion-color-step-850, var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%)) -); // 262626 gray-850 +); $text-color-step-200: var( --ion-color-step-800, var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%)) From d4a05e51387e48562d32439e95ab87430752e295 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 19 Nov 2025 13:59:52 -0800 Subject: [PATCH 03/45] feat(tokens): add gray colors for dark --- core/src/themes/base/dark.tokens.ts | 3 ++- core/src/themes/base/default.tokens.ts | 5 ----- core/src/themes/base/light.tokens.ts | 3 ++- core/src/utils/theme.ts | 10 +++++++--- 4 files changed, 11 insertions(+), 10 deletions(-) diff --git a/core/src/themes/base/dark.tokens.ts b/core/src/themes/base/dark.tokens.ts index 1b611610c66..cfa9b85b5a0 100644 --- a/core/src/themes/base/dark.tokens.ts +++ b/core/src/themes/base/dark.tokens.ts @@ -1,4 +1,4 @@ -import { mix } from '../../utils/theme'; +import { mix, generateColorSteps } from '../../utils/theme'; import type { DarkTheme } from '../themes.interfaces'; const colors = { @@ -160,6 +160,7 @@ export const darkTheme: DarkTheme = { tint: mix('#000', colors.dark, '12%'), }, }, + gray: generateColorSteps('#fff', '#000', true), }, backgroundColor: '#000000', diff --git a/core/src/themes/base/default.tokens.ts b/core/src/themes/base/default.tokens.ts index 2196e8906cb..6df6efb9e6f 100644 --- a/core/src/themes/base/default.tokens.ts +++ b/core/src/themes/base/default.tokens.ts @@ -1,4 +1,3 @@ -import { generateColorSteps } from '../../utils/theme'; import type { DefaultTheme } from '../themes.interfaces'; import { darkTheme } from './dark.tokens'; @@ -161,8 +160,4 @@ export const defaultTheme: DefaultTheme = { xl: '2', xxl: '2.4', }, - - color: { - gray: generateColorSteps('#fff', '#000'), - }, }; diff --git a/core/src/themes/base/light.tokens.ts b/core/src/themes/base/light.tokens.ts index f584b3279c7..e02838af59c 100644 --- a/core/src/themes/base/light.tokens.ts +++ b/core/src/themes/base/light.tokens.ts @@ -1,4 +1,4 @@ -import { mix } from '../../utils/theme'; +import { mix, generateColorSteps } from '../../utils/theme'; import type { LightTheme } from '../themes.interfaces'; const colors = { @@ -159,5 +159,6 @@ export const lightTheme: LightTheme = { tint: mix('#fff', colors.dark, '4%'), }, }, + gray: generateColorSteps('#fff', '#000'), }, }; diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts index d3b52b095ad..3d0625aa375 100644 --- a/core/src/utils/theme.ts +++ b/core/src/utils/theme.ts @@ -485,17 +485,21 @@ export const mix = (baseColor: string, mixColor: string, weight: string): string * * @param {string} lightColor - The lighter base color hex value. * @param {string} darkColor - The darker base color hex value. + * @param {boolean} isInverted - If true, generates the scale in reverse (dark to light). * @returns {NumberStringKeys} An object of color shades. * * @example * mix('#ffffff', '#000000', 5%) results in the color for key '50' * mix('#ffffff', '#000000', 95%) results in the color for key '950' */ -export const generateColorSteps = (lightColor: string, darkColor: string): NumberStringKeys => { - const colorSteps: NumberStringKeys = {}; +export const generateColorSteps = (lightColor: string, darkColor: string, isInverted = false): NumberStringKeys => { + const colorSteps: NumberStringKeys = { + 0: isInverted ? darkColor : lightColor, + 1000: isInverted ? lightColor : darkColor, + }; for (let i = 50; i <= 950; i += 50) { - const weight = `${i / 10}%`; + const weight = isInverted ? `${100 - i / 10}%` : `${i / 10}%`; colorSteps[i.toString() as keyof NumberStringKeys] = mix(lightColor, darkColor, weight); } From 444c56a1caf7fcca7a6e2ddf95d4978db393ddbb Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 19 Nov 2025 14:00:30 -0800 Subject: [PATCH 04/45] feat(action-sheet): replace stepped variables with gray --- core/src/components/action-sheet/action-sheet.ios.scss | 2 +- .../src/components/action-sheet/action-sheet.ios.vars.scss | 7 ++----- core/src/components/action-sheet/action-sheet.md.vars.scss | 2 +- core/src/components/action-sheet/test/basic/index.html | 1 + 4 files changed, 5 insertions(+), 7 deletions(-) diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss index fe9bba89903..f1b376fae49 100644 --- a/core/src/components/action-sheet/action-sheet.ios.scss +++ b/core/src/components/action-sheet/action-sheet.ios.scss @@ -17,7 +17,7 @@ --button-background-selected: #{$action-sheet-ios-button-background-selected}; --button-background-selected-opacity: 1; --button-color: #{$action-sheet-ios-button-text-color}; - --button-color-disabled: #{$text-color-step-150}; + --button-color-disabled: var(--ion-color-gray-850); --color: #{$action-sheet-ios-title-color}; text-align: $action-sheet-ios-text-align; 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..d26d47130f5 100644 --- a/core/src/components/action-sheet/action-sheet.ios.vars.scss +++ b/core/src/components/action-sheet/action-sheet.ios.vars.scss @@ -46,7 +46,7 @@ $action-sheet-ios-title-padding-bottom: 13px; $action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end; /// @prop - Color of the action sheet title -$action-sheet-ios-title-color: $text-color-step-600; +$action-sheet-ios-title-color: var(--ion-color-gray-400); /// @prop - Font size of the action sheet title $action-sheet-ios-title-font-size: dynamic-font-min(1, 13px); @@ -115,10 +115,7 @@ $action-sheet-ios-button-background: linear-gradient( $action-sheet-ios-button-background-activated: $text-color; /// @prop - Background color of the selected action sheet button -$action-sheet-ios-button-background-selected: var( - --ion-color-step-150, - var(--ion-background-color-step-150, $background-color) -); +$action-sheet-ios-button-background-selected: var(--ion-color-gray-0); /// @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/action-sheet/action-sheet.md.vars.scss b/core/src/components/action-sheet/action-sheet.md.vars.scss index 878d206062a..9c1842a83a1 100644 --- a/core/src/components/action-sheet/action-sheet.md.vars.scss +++ b/core/src/components/action-sheet/action-sheet.md.vars.scss @@ -64,7 +64,7 @@ $action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end $action-sheet-md-button-height: 52px; /// @prop - Text color of the action sheet button -$action-sheet-md-button-text-color: $text-color-step-150; +$action-sheet-md-button-text-color: var(--ion-color-gray-850); /// @prop - Font size of the action sheet button $action-sheet-md-button-font-size: dynamic-font(16px); diff --git a/core/src/components/action-sheet/test/basic/index.html b/core/src/components/action-sheet/test/basic/index.html index b95d43b42c7..2a6df1bd92b 100644 --- a/core/src/components/action-sheet/test/basic/index.html +++ b/core/src/components/action-sheet/test/basic/index.html @@ -108,6 +108,7 @@ handler: () => { console.log('Play clicked'); }, + disabled: true, }, { text: 'Favorite', From 0b4b4617e1e15ee63905256f6cceb1ebfc67d805 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 19 Nov 2025 14:01:35 -0800 Subject: [PATCH 05/45] refactor(action-sheet): revert disabled --- core/src/components/action-sheet/test/basic/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/core/src/components/action-sheet/test/basic/index.html b/core/src/components/action-sheet/test/basic/index.html index 2a6df1bd92b..b95d43b42c7 100644 --- a/core/src/components/action-sheet/test/basic/index.html +++ b/core/src/components/action-sheet/test/basic/index.html @@ -108,7 +108,6 @@ handler: () => { console.log('Play clicked'); }, - disabled: true, }, { text: 'Favorite', From 6c319960134abda470e9b43dff55844cc1377ad3 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 20 Nov 2025 14:18:55 -0800 Subject: [PATCH 06/45] feat(alert): use gray tokens --- core/src/components/alert/alert.ios.vars.scss | 4 ++-- core/src/components/alert/alert.md.vars.scss | 12 ++++++------ core/src/components/alert/alert.scss | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/core/src/components/alert/alert.ios.vars.scss b/core/src/components/alert/alert.ios.vars.scss index 2cb4fca98af..152d5d92cb9 100644 --- a/core/src/components/alert/alert.ios.vars.scss +++ b/core/src/components/alert/alert.ios.vars.scss @@ -57,7 +57,7 @@ $alert-ios-title-font-weight: 600; $alert-ios-sub-title-font-size: dynamic-font-min(1, 14px); /// @prop - Text color of the alert sub title -$alert-ios-sub-title-text-color: $text-color-step-400; +$alert-ios-sub-title-text-color: var(--ion-color-gray-600); /// @prop - Padding top of the alert message $alert-ios-message-padding-top: 0; @@ -114,7 +114,7 @@ $alert-ios-input-padding-start: $alert-ios-input-padding-end; $alert-ios-input-placeholder-color: $placeholder-text-color; /// @prop - Border color of the alert input -$alert-ios-input-border-color: $background-color-step-250; +$alert-ios-input-border-color: var(--ion-color-gray-250); /// @prop - Border of the alert input $alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color; diff --git a/core/src/components/alert/alert.md.vars.scss b/core/src/components/alert/alert.md.vars.scss index ce1fb7304dd..d6e68a73355 100644 --- a/core/src/components/alert/alert.md.vars.scss +++ b/core/src/components/alert/alert.md.vars.scss @@ -80,7 +80,7 @@ $alert-md-message-padding-start: $alert-md-message-padding-end; $alert-md-message-font-size: dynamic-font(16px); /// @prop - Text color of the alert message -$alert-md-message-text-color: $text-color-step-450; +$alert-md-message-text-color: var(--ion-color-gray-550); /// @prop - Padding top of the alert empty message $alert-md-message-empty-padding-top: 0; @@ -104,7 +104,7 @@ $alert-md-input-border-width: 1px; $alert-md-input-border-style: solid; /// @prop - Border color of the alert input -$alert-md-input-border-color: $background-color-step-150; +$alert-md-input-border-color: var(--ion-color-gray-150); /// @prop - Text color of the alert input $alert-md-input-text-color: $text-color; @@ -209,7 +209,7 @@ $alert-md-radio-border-style: solid; $alert-md-radio-border-radius: 50%; /// @prop - Border color of the alert radio when off -$alert-md-radio-border-color-off: $background-color-step-550; +$alert-md-radio-border-color-off: var(--ion-color-gray-550); /// @prop - Border color of the alert radio when on $alert-md-radio-border-color-on: $alert-md-button-text-color; @@ -254,7 +254,7 @@ $alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end + 26px; $alert-md-radio-label-font-size: dynamic-font(16px); /// @prop - Text color of the label for the radio alert -$alert-md-radio-label-text-color: $text-color-step-150; +$alert-md-radio-label-text-color: var(--ion-color-gray-850); /// @prop - Text color of the label for the checked radio alert $alert-md-radio-label-text-color-checked: $alert-md-radio-label-text-color; @@ -281,7 +281,7 @@ $alert-md-checkbox-border-style: solid; $alert-md-checkbox-border-radius: 2px; /// @prop - Border color of the checkbox in the alert when off -$alert-md-checkbox-border-color-off: $background-color-step-550; +$alert-md-checkbox-border-color-off: var(--ion-color-gray-550); /// @prop - Border color of the checkbox in the alert when on $alert-md-checkbox-border-color-on: $alert-md-button-text-color; @@ -323,7 +323,7 @@ $alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top; $alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end + 27px; /// @prop - Text color of the label for the checkbox in the alert -$alert-md-checkbox-label-text-color: $text-color-step-150; +$alert-md-checkbox-label-text-color: var(--ion-color-gray-850); /// @prop - Font size of the label for the checkbox in the alert $alert-md-checkbox-label-font-size: dynamic-font(16px); diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss index 9948a4127a9..9bc24f53096 100644 --- a/core/src/components/alert/alert.scss +++ b/core/src/components/alert/alert.scss @@ -181,7 +181,7 @@ .alert-button.ion-focused, .alert-tappable.ion-focused { - background: $background-color-step-100; + background: var(--ion-color-gray-100); } .alert-button-inner { From 15870a91c98898e32bb6f08812ef10229e1379de Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 20 Nov 2025 14:23:12 -0800 Subject: [PATCH 07/45] feat(card): use gray tokens --- core/src/components/card-subtitle/card-subtitle.ios.vars.scss | 2 +- core/src/components/card-subtitle/card-subtitle.md.vars.scss | 2 +- core/src/components/card-title/card-title.md.vars.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/core/src/components/card-subtitle/card-subtitle.ios.vars.scss b/core/src/components/card-subtitle/card-subtitle.ios.vars.scss index 6c920f79f6a..50b11b7883e 100644 --- a/core/src/components/card-subtitle/card-subtitle.ios.vars.scss +++ b/core/src/components/card-subtitle/card-subtitle.ios.vars.scss @@ -40,4 +40,4 @@ $card-ios-subtitle-margin-bottom: 4px; $card-ios-subtitle-margin-start: $card-ios-subtitle-margin-end; /// @prop - Color of the card subtitle -$card-ios-subtitle-color: $text-color-step-400; +$card-ios-subtitle-color: var(--ion-color-gray-600); diff --git a/core/src/components/card-subtitle/card-subtitle.md.vars.scss b/core/src/components/card-subtitle/card-subtitle.md.vars.scss index 9cd7aa2d6a7..8a91e614ce9 100644 --- a/core/src/components/card-subtitle/card-subtitle.md.vars.scss +++ b/core/src/components/card-subtitle/card-subtitle.md.vars.scss @@ -31,4 +31,4 @@ $card-md-subtitle-margin-bottom: 0; $card-md-subtitle-margin-start: $card-md-subtitle-margin-end; /// @prop - Color of the card subtitle -$card-md-subtitle-color: $text-color-step-450; +$card-md-subtitle-color: var(--ion-color-gray-550); diff --git a/core/src/components/card-title/card-title.md.vars.scss b/core/src/components/card-title/card-title.md.vars.scss index 94f201df1d2..3bf872916fa 100644 --- a/core/src/components/card-title/card-title.md.vars.scss +++ b/core/src/components/card-title/card-title.md.vars.scss @@ -31,4 +31,4 @@ $card-md-title-margin-bottom: $card-md-title-margin-top; $card-md-title-margin-start: $card-md-title-margin-end; /// @prop - Color of the card title -$card-md-title-text-color: $text-color-step-150; +$card-md-title-text-color: var(--ion-color-gray-850); From 3902e5d0fe6880eb7f066354e2095c8916f69cae Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 20 Nov 2025 14:24:11 -0800 Subject: [PATCH 08/45] feat(checkbox): use gray tokens --- core/src/components/checkbox/checkbox.native.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/checkbox/checkbox.native.scss b/core/src/components/checkbox/checkbox.native.scss index 4c9021f114f..8c6be5a0180 100644 --- a/core/src/components/checkbox/checkbox.native.scss +++ b/core/src/components/checkbox/checkbox.native.scss @@ -82,7 +82,7 @@ } .checkbox-bottom .helper-text { - color: $text-color-step-300; + color: var(--ion-color-gray-700); } // Label Placement - Start From db67416a0ddedcf16991f497357ccbe21e1a3bd1 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 20 Nov 2025 14:40:02 -0800 Subject: [PATCH 09/45] feat(datetime): use gray tokens --- core/src/components/datetime/datetime.ios.scss | 10 +++++----- core/src/components/datetime/datetime.ios.vars.scss | 11 ++++++++++- core/src/components/datetime/datetime.md.scss | 10 +++++----- 3 files changed, 20 insertions(+), 11 deletions(-) diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss index e49bdc3241b..5f1c4e2a524 100644 --- a/core/src/components/datetime/datetime.ios.scss +++ b/core/src/components/datetime/datetime.ios.scss @@ -8,7 +8,7 @@ :host { --background: #{ion-color(light, base)}; --background-rgb: #{ion-color(light, base, null, true)}; - --title-color: #{$text-color-step-400}; + --title-color: var(--ion-color-gray-600); } :host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)), @@ -22,7 +22,7 @@ :host .datetime-header { @include padding($datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding); - border-bottom: $datetime-ios-border-color; + border-bottom: $datetime-ios-border; font-size: dynamic-font-max(14px, 1.6); } @@ -72,7 +72,7 @@ :host .calendar-days-of-week { @include padding(0, $datetime-ios-padding * 0.5, 0, $datetime-ios-padding * 0.5); - color: $text-color-step-700; + color: var(--ion-color-gray-300); font-size: dynamic-font-max(12px, 1.6); @@ -280,7 +280,7 @@ } :host .calendar-day.calendar-day-adjacent-day { - color: $text-color-step-700; + color: var(--ion-color-gray-300); } // Time / Header @@ -305,7 +305,7 @@ $datetime-ios-padding * 0.5 ); - border-top: $datetime-ios-border-color; + border-top: $datetime-ios-border; } :host .datetime-buttons ::slotted(ion-buttons), diff --git a/core/src/components/datetime/datetime.ios.vars.scss b/core/src/components/datetime/datetime.ios.vars.scss index c89e7674821..de1d3fd530a 100644 --- a/core/src/components/datetime/datetime.ios.vars.scss +++ b/core/src/components/datetime/datetime.ios.vars.scss @@ -3,8 +3,17 @@ // iOS Datetime // -------------------------------------------------- +/// @prop Border width for dividers between header and footer +$datetime-ios-border-width: 0.55px; + +/// @prop - Border style for dividers between header and footer +$datetime-ios-border-style: solid; + /// @prop - Border color for dividers between header and footer -$datetime-ios-border-color: 0.55px solid globals.$background-color-step-200; +$datetime-ios-border-color: var(--ion-color-gray-200); + +/// @prop - Border for dividers between header and footer +$datetime-ios-border: $datetime-ios-border-width $datetime-ios-border-style $datetime-ios-border-color; /// @prop - Padding for content $datetime-ios-padding: 16px; diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss index 6d00afa3d00..cc96eb43294 100644 --- a/core/src/components/datetime/datetime.md.scss +++ b/core/src/components/datetime/datetime.md.scss @@ -40,7 +40,7 @@ // ----------------------------------- :host .calendar-action-buttons ion-button { - --color: #{$text-color-step-350}; + --color: var(--ion-color-gray-650); } .calendar-month-year-toggle { @@ -50,7 +50,7 @@ background: transparent; - color: #{$text-color-step-350}; + color: var(--ion-color-gray-650); z-index: 1; @@ -78,7 +78,7 @@ :host .calendar-days-of-week { @include padding(0px, 10px, 0px, 10px); - color: $text-color-step-500; + color: var(--ion-color-gray-500); font-size: $datetime-md-calendar-item-font-size; @@ -138,7 +138,7 @@ } :host .calendar-day.calendar-day-adjacent-day { - color: $text-color-step-500; + color: var(--ion-color-gray-500); } // Time / Header @@ -148,7 +148,7 @@ } :host .time-header { - color: #{$text-color-step-350}; + color: var(--ion-color-gray-650); } // Month and Year From fc40c77dc0a14444fa6f0e5e8c468965cbc122c5 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 20 Nov 2025 17:06:57 -0800 Subject: [PATCH 10/45] feat(core): update dark tokens --- core/src/themes/base/dark.tokens.ts | 3 +- core/src/themes/base/default.tokens.ts | 6 ++ core/src/themes/base/light.tokens.ts | 3 +- core/src/themes/ios/dark.tokens.ts | 6 ++ core/src/themes/md/dark.tokens.ts | 6 ++ .../themes/native/native.theme.default.scss | 76 +++++++++---------- 6 files changed, 58 insertions(+), 42 deletions(-) diff --git a/core/src/themes/base/dark.tokens.ts b/core/src/themes/base/dark.tokens.ts index cfa9b85b5a0..1b611610c66 100644 --- a/core/src/themes/base/dark.tokens.ts +++ b/core/src/themes/base/dark.tokens.ts @@ -1,4 +1,4 @@ -import { mix, generateColorSteps } from '../../utils/theme'; +import { mix } from '../../utils/theme'; import type { DarkTheme } from '../themes.interfaces'; const colors = { @@ -160,7 +160,6 @@ export const darkTheme: DarkTheme = { tint: mix('#000', colors.dark, '12%'), }, }, - gray: generateColorSteps('#fff', '#000', true), }, backgroundColor: '#000000', diff --git a/core/src/themes/base/default.tokens.ts b/core/src/themes/base/default.tokens.ts index 6df6efb9e6f..16fb93d9ee7 100644 --- a/core/src/themes/base/default.tokens.ts +++ b/core/src/themes/base/default.tokens.ts @@ -1,3 +1,4 @@ +import { generateColorSteps } from '../../utils/theme'; import type { DefaultTheme } from '../themes.interfaces'; import { darkTheme } from './dark.tokens'; @@ -160,4 +161,9 @@ export const defaultTheme: DefaultTheme = { xl: '2', xxl: '2.4', }, + + color: { + // TODO: Update hex values to use the text color variable and background color variable + gray: generateColorSteps('#fff', '#000'), + }, }; diff --git a/core/src/themes/base/light.tokens.ts b/core/src/themes/base/light.tokens.ts index e02838af59c..f584b3279c7 100644 --- a/core/src/themes/base/light.tokens.ts +++ b/core/src/themes/base/light.tokens.ts @@ -1,4 +1,4 @@ -import { mix, generateColorSteps } from '../../utils/theme'; +import { mix } from '../../utils/theme'; import type { LightTheme } from '../themes.interfaces'; const colors = { @@ -159,6 +159,5 @@ export const lightTheme: LightTheme = { tint: mix('#fff', colors.dark, '4%'), }, }, - gray: generateColorSteps('#fff', '#000'), }, }; diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts index 345cdef3a51..e02ec1ccf36 100644 --- a/core/src/themes/ios/dark.tokens.ts +++ b/core/src/themes/ios/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'; @@ -51,6 +52,11 @@ export const darkTheme: DarkTheme = { 950: '#0d0d0d', }, + color: { + // TODO: Update hex values to use the text color variable and background color variable + gray: generateColorSteps('#ffffff', '#000000', true), + }, + components: { IonCard: { background: '#1c1c1d', diff --git a/core/src/themes/md/dark.tokens.ts b/core/src/themes/md/dark.tokens.ts index 80b9d9116e1..1982e301a04 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'; @@ -53,6 +54,11 @@ export const darkTheme: DarkTheme = { 950: '#1e1e1e', }, + color: { + // TODO: Update hex values to use the text color variable and background color variable + gray: generateColorSteps('#ffffff', '#121212', true), + }, + components: { IonCard: { background: '#1e1e1e', diff --git a/core/src/themes/native/native.theme.default.scss b/core/src/themes/native/native.theme.default.scss index db4819c8a94..30785b0be39 100644 --- a/core/src/themes/native/native.theme.default.scss +++ b/core/src/themes/native/native.theme.default.scss @@ -29,155 +29,155 @@ $text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value); $background-color-step-50: var( --ion-color-step-50, var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%)) -); +); // f2f2f2 --ion-color-gray-50 $background-color-step-100: var( --ion-color-step-100, var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%)) -); +); // e6e6e6 --ion-color-gray-100 $background-color-step-150: var( --ion-color-step-150, var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%)) -); +); // d9d9d9 --ion-color-gray-150 $background-color-step-200: var( --ion-color-step-200, var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%)) -); +); // cccccc --ion-color-gray-200 $background-color-step-250: var( --ion-color-step-250, var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%)) -); +); // bfbfbf --ion-color-gray-250 $background-color-step-300: var( --ion-color-step-300, var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%)) -); +); // b3b3b3 --ion-color-gray-300 $background-color-step-350: var( --ion-color-step-350, var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%)) -); +); // a6a6a6 --ion-color-gray-350 $background-color-step-400: var( --ion-color-step-400, var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%)) -); +); // 999999 --ion-color-gray-400 $background-color-step-450: var( --ion-color-step-450, var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%)) -); +); // 8c8c8c --ion-color-gray-450 $background-color-step-500: var( --ion-color-step-500, var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%)) -); +); // 808080 --ion-color-gray-500 $background-color-step-550: var( --ion-color-step-550, var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%)) -); +); // 737373 --ion-color-gray-550 $background-color-step-600: var( --ion-color-step-600, var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%)) -); +); // 666666 --ion-color-gray-600 $background-color-step-650: var( --ion-color-step-650, var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%)) -); +); // 595959 --ion-color-gray-650 $background-color-step-700: var( --ion-color-step-700, var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%)) -); +); // 4d4d4d --ion-color-gray-700 $background-color-step-750: var( --ion-color-step-750, var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%)) -); +); // 404040 --ion-color-gray-750 $background-color-step-800: var( --ion-color-step-800, var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%)) -); +); // 333333 --ion-color-gray-800 $background-color-step-850: var( --ion-color-step-850, var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%)) -); +); // 262626 --ion-color-gray-850 $background-color-step-900: var( --ion-color-step-900, var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%)) -); +); // 191919 --ion-color-gray-900 $background-color-step-950: var( --ion-color-step-950, var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%)) -); +); // 0d0d0d --ion-color-gray-950 $text-color-step-50: var( --ion-color-step-950, var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%)) -); +); // 0d0d0d --ion-color-gray-950 $text-color-step-100: var( --ion-color-step-900, var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%)) -); +); // 191919 --ion-color-gray-900 $text-color-step-150: var( --ion-color-step-850, var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%)) -); +); // 262626 --ion-color-gray-850 $text-color-step-200: var( --ion-color-step-800, var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%)) -); +); // 333333 --ion-color-gray-800 $text-color-step-250: var( --ion-color-step-750, var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%)) -); +); // 404040 --ion-color-gray-750 $text-color-step-300: var( --ion-color-step-700, var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%)) -); +); // 4d4d4d --ion-color-gray-700 $text-color-step-350: var( --ion-color-step-650, var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%)) -); +); // 595959 --ion-color-gray-650 $text-color-step-400: var( --ion-color-step-600, var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%)) -); +); // 666666 --ion-color-gray-600 $text-color-step-450: var( --ion-color-step-550, var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%)) -); +); // 737373 --ion-color-gray-550 $text-color-step-500: var( --ion-color-step-500, var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%)) -); +); // 808080 --ion-color-gray-500 $text-color-step-550: var( --ion-color-step-450, var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%)) -); +); // 8c8c8c --ion-color-gray-450 $text-color-step-600: var( --ion-color-step-400, var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%)) -); +); // 999999 --ion-color-gray-400 $text-color-step-650: var( --ion-color-step-350, var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%)) -); +); // a6a6a6 --ion-color-gray-350 $text-color-step-700: var( --ion-color-step-300, var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%)) -); +); // b3b3b3 --ion-color-gray-300 $text-color-step-750: var( --ion-color-step-250, var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%)) -); +); // bfbfbf --ion-color-gray-250 $text-color-step-800: var( --ion-color-step-200, var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%)) -); +); // cccccc --ion-color-gray-200 $text-color-step-850: var( --ion-color-step-150, var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%)) -); +); // d9d9d9 --ion-color-gray-150 $text-color-step-900: var( --ion-color-step-100, var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%)) -); +); // e6e6e6 --ion-color-gray-100 $text-color-step-950: var( --ion-color-step-50, var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%)) -); +); // f2f2f2 --ion-color-gray-50 // Default General Colors // -------------------------------------------------- From 9b0782c33aa850f3ea11b4080c93de9d0070920b Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 21 Nov 2025 11:31:07 -0800 Subject: [PATCH 11/45] feat(tokens): update md and add default primitives --- core/src/themes/base/dark.tokens.ts | 5 +++++ core/src/themes/base/default.tokens.primitives.ts | 9 +++++++++ core/src/themes/base/default.tokens.ts | 5 ++--- core/src/themes/base/light.tokens.ts | 7 +++++++ core/src/themes/md/dark.tokens.ts | 7 ++++++- core/src/themes/md/light.tokens.ts | 9 ++++++++- core/src/themes/themes.interfaces.ts | 4 ++-- 7 files changed, 39 insertions(+), 7 deletions(-) create mode 100644 core/src/themes/base/default.tokens.primitives.ts diff --git a/core/src/themes/base/dark.tokens.ts b/core/src/themes/base/dark.tokens.ts index 1b611610c66..ca81f94a758 100644 --- a/core/src/themes/base/dark.tokens.ts +++ b/core/src/themes/base/dark.tokens.ts @@ -1,6 +1,8 @@ import { mix } from '../../utils/theme'; import type { DarkTheme } from '../themes.interfaces'; +import { defaultPrimitiveColors } from './default.tokens.primitives'; + const colors = { primary: '#4d8dff', secondary: '#46b1ff', @@ -218,5 +220,8 @@ export const darkTheme: DarkTheme = { IonItem: { background: '#000000', }, + IonDatetime: { + background: defaultPrimitiveColors.gray['50']!, + }, }, }; diff --git a/core/src/themes/base/default.tokens.primitives.ts b/core/src/themes/base/default.tokens.primitives.ts new file mode 100644 index 00000000000..d65970f43a7 --- /dev/null +++ b/core/src/themes/base/default.tokens.primitives.ts @@ -0,0 +1,9 @@ +import { generateColorSteps } from '../../utils/theme'; + +// TODO: ADD TYPE +export const defaultPrimitiveColors = { + // TODO: Update hex values to use the text color variable and background color variable + gray: generateColorSteps('#fff', '#000'), + white: '#ffffff', + black: '#000000', +}; diff --git a/core/src/themes/base/default.tokens.ts b/core/src/themes/base/default.tokens.ts index 16fb93d9ee7..5ae2ed08047 100644 --- a/core/src/themes/base/default.tokens.ts +++ b/core/src/themes/base/default.tokens.ts @@ -1,7 +1,7 @@ -import { generateColorSteps } from '../../utils/theme'; import type { DefaultTheme } from '../themes.interfaces'; import { darkTheme } from './dark.tokens'; +import { defaultPrimitiveColors } from './default.tokens.primitives'; import { lightTheme } from './light.tokens'; export const defaultTheme: DefaultTheme = { @@ -163,7 +163,6 @@ export const defaultTheme: DefaultTheme = { }, color: { - // TODO: Update hex values to use the text color variable and background color variable - gray: generateColorSteps('#fff', '#000'), + ...defaultPrimitiveColors, }, }; diff --git a/core/src/themes/base/light.tokens.ts b/core/src/themes/base/light.tokens.ts index f584b3279c7..28c1768b0e9 100644 --- a/core/src/themes/base/light.tokens.ts +++ b/core/src/themes/base/light.tokens.ts @@ -1,6 +1,8 @@ import { mix } from '../../utils/theme'; import type { LightTheme } from '../themes.interfaces'; +import { defaultPrimitiveColors } from './default.tokens.primitives'; + const colors = { primary: '#0054e9', secondary: '#0163aa', @@ -160,4 +162,9 @@ export const lightTheme: LightTheme = { }, }, }, + components: { + IonDatetime: { + background: defaultPrimitiveColors.gray['50']!, + }, + }, }; diff --git a/core/src/themes/md/dark.tokens.ts b/core/src/themes/md/dark.tokens.ts index 1982e301a04..5390211c64f 100644 --- a/core/src/themes/md/dark.tokens.ts +++ b/core/src/themes/md/dark.tokens.ts @@ -2,6 +2,8 @@ import { generateColorSteps } from '../../utils/theme'; import { darkTheme as baseDarkTheme } from '../base/dark.tokens'; import type { DarkTheme } from '../themes.interfaces'; +const graySteps = generateColorSteps('#ffffff', '#121212', true); + export const darkTheme: DarkTheme = { ...baseDarkTheme, @@ -56,7 +58,7 @@ export const darkTheme: DarkTheme = { color: { // TODO: Update hex values to use the text color variable and background color variable - gray: generateColorSteps('#ffffff', '#121212', true), + gray: graySteps, }, components: { @@ -72,5 +74,8 @@ export const darkTheme: DarkTheme = { IonTabBar: { background: '#1f1f1f', }, + IonDatetime: { + background: graySteps['100']!, + }, }, }; diff --git a/core/src/themes/md/light.tokens.ts b/core/src/themes/md/light.tokens.ts index b7679b9f553..417e94b449f 100644 --- a/core/src/themes/md/light.tokens.ts +++ b/core/src/themes/md/light.tokens.ts @@ -1,3 +1,10 @@ +import { defaultPrimitiveColors } from '../base/default.tokens.primitives'; import type { LightTheme } from '../themes.interfaces'; -export const lightTheme: LightTheme = {}; +export const lightTheme: LightTheme = { + components: { + IonDatetime: { + background: defaultPrimitiveColors.white, + }, + }, +}; diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts index 1930b85e67a..d680b78d44d 100644 --- a/core/src/themes/themes.interfaces.ts +++ b/core/src/themes/themes.interfaces.ts @@ -268,10 +268,10 @@ export type NumberStringKeys = { }; // Primitive color keys -type PrimitiveColors = 'gray'; +export type PrimitiveColors = 'gray' | 'black' | 'white'; // Colors interface -type Colors = { +export type Colors = { [K in PredefinedColors]?: SemanticHue; } & { [K in PrimitiveColors]?: NumberStringKeys; From 50998a398ab5b67afc030b302ba4b1bed0692564 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 21 Nov 2025 16:45:20 -0800 Subject: [PATCH 12/45] feat(tokens): use gray on datetime --- core/src/components/datetime/datetime.md.scss | 2 +- core/src/components/datetime/datetime.native.scss | 2 +- core/src/themes/base/dark.tokens.ts | 3 ++- core/src/themes/base/light.tokens.ts | 3 ++- core/src/themes/ios/dark.tokens.ts | 7 ++++++- core/src/themes/md/dark.tokens.ts | 3 ++- core/src/themes/md/light.tokens.ts | 9 +-------- 7 files changed, 15 insertions(+), 14 deletions(-) diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss index cc96eb43294..a3d784dfbe3 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-components-ion-datetime-bg); --title-color: #{current-color(contrast)}; } diff --git a/core/src/components/datetime/datetime.native.scss b/core/src/components/datetime/datetime.native.scss index eee452f1076..f9710ecb89c 100644 --- a/core/src/components/datetime/datetime.native.scss +++ b/core/src/components/datetime/datetime.native.scss @@ -77,7 +77,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-components-ion-datetime-time-body-bg); color: globals.$text-color; } diff --git a/core/src/themes/base/dark.tokens.ts b/core/src/themes/base/dark.tokens.ts index ca81f94a758..90cd3ed1944 100644 --- a/core/src/themes/base/dark.tokens.ts +++ b/core/src/themes/base/dark.tokens.ts @@ -221,7 +221,8 @@ export const darkTheme: DarkTheme = { background: '#000000', }, IonDatetime: { - background: defaultPrimitiveColors.gray['50']!, + bg: defaultPrimitiveColors.gray['50']!, + timeBodyBg: defaultPrimitiveColors.gray['650']!, }, }, }; diff --git a/core/src/themes/base/light.tokens.ts b/core/src/themes/base/light.tokens.ts index 28c1768b0e9..7c7a2eef325 100644 --- a/core/src/themes/base/light.tokens.ts +++ b/core/src/themes/base/light.tokens.ts @@ -164,7 +164,8 @@ export const lightTheme: LightTheme = { }, components: { IonDatetime: { - background: defaultPrimitiveColors.gray['50']!, + bg: defaultPrimitiveColors.white, + timeBodyBg: '#edeef0', }, }, }; diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts index e02ec1ccf36..8d0f846e067 100644 --- a/core/src/themes/ios/dark.tokens.ts +++ b/core/src/themes/ios/dark.tokens.ts @@ -2,6 +2,8 @@ import { generateColorSteps } from '../../utils/theme'; import { darkTheme as baseDarkTheme } from '../base/dark.tokens'; import type { DarkTheme } from '../themes.interfaces'; +const graySteps = generateColorSteps('#ffffff', '#000000', true); + export const darkTheme: DarkTheme = { ...baseDarkTheme, @@ -54,7 +56,7 @@ export const darkTheme: DarkTheme = { color: { // TODO: Update hex values to use the text color variable and background color variable - gray: generateColorSteps('#ffffff', '#000000', true), + gray: graySteps, }, components: { @@ -69,5 +71,8 @@ export const darkTheme: DarkTheme = { toolbarBackground: 'var(--ion-background-color-step-150)', toolbarBorderColor: 'var(--ion-background-color-step-250)', }, + IonDatetime: { + timeBodyBg: graySteps['300']!, + }, }, }; diff --git a/core/src/themes/md/dark.tokens.ts b/core/src/themes/md/dark.tokens.ts index 5390211c64f..70fc9b2c68f 100644 --- a/core/src/themes/md/dark.tokens.ts +++ b/core/src/themes/md/dark.tokens.ts @@ -75,7 +75,8 @@ export const darkTheme: DarkTheme = { background: '#1f1f1f', }, IonDatetime: { - background: graySteps['100']!, + bg: graySteps['100']!, + timeBodyBg: graySteps['300']!, }, }, }; diff --git a/core/src/themes/md/light.tokens.ts b/core/src/themes/md/light.tokens.ts index 417e94b449f..b7679b9f553 100644 --- a/core/src/themes/md/light.tokens.ts +++ b/core/src/themes/md/light.tokens.ts @@ -1,10 +1,3 @@ -import { defaultPrimitiveColors } from '../base/default.tokens.primitives'; import type { LightTheme } from '../themes.interfaces'; -export const lightTheme: LightTheme = { - components: { - IonDatetime: { - background: defaultPrimitiveColors.white, - }, - }, -}; +export const lightTheme: LightTheme = {}; From 44aa9e87bf358a62e10fa481b6d54f715c1fc700 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 21 Nov 2025 16:47:00 -0800 Subject: [PATCH 13/45] refactor(token): remove comments --- .../themes/native/native.theme.default.scss | 76 +++++++++---------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/core/src/themes/native/native.theme.default.scss b/core/src/themes/native/native.theme.default.scss index 30785b0be39..db4819c8a94 100644 --- a/core/src/themes/native/native.theme.default.scss +++ b/core/src/themes/native/native.theme.default.scss @@ -29,155 +29,155 @@ $text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value); $background-color-step-50: var( --ion-color-step-50, var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%)) -); // f2f2f2 --ion-color-gray-50 +); $background-color-step-100: var( --ion-color-step-100, var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%)) -); // e6e6e6 --ion-color-gray-100 +); $background-color-step-150: var( --ion-color-step-150, var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%)) -); // d9d9d9 --ion-color-gray-150 +); $background-color-step-200: var( --ion-color-step-200, var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%)) -); // cccccc --ion-color-gray-200 +); $background-color-step-250: var( --ion-color-step-250, var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%)) -); // bfbfbf --ion-color-gray-250 +); $background-color-step-300: var( --ion-color-step-300, var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%)) -); // b3b3b3 --ion-color-gray-300 +); $background-color-step-350: var( --ion-color-step-350, var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%)) -); // a6a6a6 --ion-color-gray-350 +); $background-color-step-400: var( --ion-color-step-400, var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%)) -); // 999999 --ion-color-gray-400 +); $background-color-step-450: var( --ion-color-step-450, var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%)) -); // 8c8c8c --ion-color-gray-450 +); $background-color-step-500: var( --ion-color-step-500, var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%)) -); // 808080 --ion-color-gray-500 +); $background-color-step-550: var( --ion-color-step-550, var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%)) -); // 737373 --ion-color-gray-550 +); $background-color-step-600: var( --ion-color-step-600, var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%)) -); // 666666 --ion-color-gray-600 +); $background-color-step-650: var( --ion-color-step-650, var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%)) -); // 595959 --ion-color-gray-650 +); $background-color-step-700: var( --ion-color-step-700, var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%)) -); // 4d4d4d --ion-color-gray-700 +); $background-color-step-750: var( --ion-color-step-750, var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%)) -); // 404040 --ion-color-gray-750 +); $background-color-step-800: var( --ion-color-step-800, var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%)) -); // 333333 --ion-color-gray-800 +); $background-color-step-850: var( --ion-color-step-850, var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%)) -); // 262626 --ion-color-gray-850 +); $background-color-step-900: var( --ion-color-step-900, var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%)) -); // 191919 --ion-color-gray-900 +); $background-color-step-950: var( --ion-color-step-950, var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%)) -); // 0d0d0d --ion-color-gray-950 +); $text-color-step-50: var( --ion-color-step-950, var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%)) -); // 0d0d0d --ion-color-gray-950 +); $text-color-step-100: var( --ion-color-step-900, var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%)) -); // 191919 --ion-color-gray-900 +); $text-color-step-150: var( --ion-color-step-850, var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%)) -); // 262626 --ion-color-gray-850 +); $text-color-step-200: var( --ion-color-step-800, var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%)) -); // 333333 --ion-color-gray-800 +); $text-color-step-250: var( --ion-color-step-750, var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%)) -); // 404040 --ion-color-gray-750 +); $text-color-step-300: var( --ion-color-step-700, var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%)) -); // 4d4d4d --ion-color-gray-700 +); $text-color-step-350: var( --ion-color-step-650, var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%)) -); // 595959 --ion-color-gray-650 +); $text-color-step-400: var( --ion-color-step-600, var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%)) -); // 666666 --ion-color-gray-600 +); $text-color-step-450: var( --ion-color-step-550, var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%)) -); // 737373 --ion-color-gray-550 +); $text-color-step-500: var( --ion-color-step-500, var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%)) -); // 808080 --ion-color-gray-500 +); $text-color-step-550: var( --ion-color-step-450, var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%)) -); // 8c8c8c --ion-color-gray-450 +); $text-color-step-600: var( --ion-color-step-400, var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%)) -); // 999999 --ion-color-gray-400 +); $text-color-step-650: var( --ion-color-step-350, var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%)) -); // a6a6a6 --ion-color-gray-350 +); $text-color-step-700: var( --ion-color-step-300, var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%)) -); // b3b3b3 --ion-color-gray-300 +); $text-color-step-750: var( --ion-color-step-250, var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%)) -); // bfbfbf --ion-color-gray-250 +); $text-color-step-800: var( --ion-color-step-200, var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%)) -); // cccccc --ion-color-gray-200 +); $text-color-step-850: var( --ion-color-step-150, var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%)) -); // d9d9d9 --ion-color-gray-150 +); $text-color-step-900: var( --ion-color-step-100, var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%)) -); // e6e6e6 --ion-color-gray-100 +); $text-color-step-950: var( --ion-color-step-50, var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%)) -); // f2f2f2 --ion-color-gray-50 +); // Default General Colors // -------------------------------------------------- From 42a1ecd6ac76dbb4de4fc6113780d830d84659d9 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 25 Nov 2025 16:23:26 -0800 Subject: [PATCH 14/45] chore(themes): update gray tokens --- core/src/themes/base/dark.tokens.ts | 10 +++------- core/src/themes/base/light.tokens.ts | 8 -------- core/src/themes/ios/dark.tokens.ts | 20 ++++++++++++++++---- core/src/themes/ios/light.tokens.ts | 27 ++++++++++++++++++++++++++- core/src/themes/md/dark.tokens.ts | 20 ++++++++++++++++---- core/src/themes/md/light.tokens.ts | 20 +++++++++++++++++++- 6 files changed, 80 insertions(+), 25 deletions(-) diff --git a/core/src/themes/base/dark.tokens.ts b/core/src/themes/base/dark.tokens.ts index 90cd3ed1944..ac750abb3c5 100644 --- a/core/src/themes/base/dark.tokens.ts +++ b/core/src/themes/base/dark.tokens.ts @@ -1,8 +1,6 @@ -import { mix } from '../../utils/theme'; +import { mix, generateColorSteps } from '../../utils/theme'; import type { DarkTheme } from '../themes.interfaces'; -import { defaultPrimitiveColors } from './default.tokens.primitives'; - const colors = { primary: '#4d8dff', secondary: '#46b1ff', @@ -13,6 +11,7 @@ const colors = { light: '#222428', medium: '#989aa2', dark: '#f4f5f8', + gray: generateColorSteps('#000000', '#ffffff', true), }; export const darkTheme: DarkTheme = { @@ -162,6 +161,7 @@ export const darkTheme: DarkTheme = { tint: mix('#000', colors.dark, '12%'), }, }, + gray: colors.gray, }, backgroundColor: '#000000', @@ -220,9 +220,5 @@ export const darkTheme: DarkTheme = { IonItem: { background: '#000000', }, - IonDatetime: { - bg: defaultPrimitiveColors.gray['50']!, - timeBodyBg: defaultPrimitiveColors.gray['650']!, - }, }, }; diff --git a/core/src/themes/base/light.tokens.ts b/core/src/themes/base/light.tokens.ts index 7c7a2eef325..f584b3279c7 100644 --- a/core/src/themes/base/light.tokens.ts +++ b/core/src/themes/base/light.tokens.ts @@ -1,8 +1,6 @@ import { mix } from '../../utils/theme'; import type { LightTheme } from '../themes.interfaces'; -import { defaultPrimitiveColors } from './default.tokens.primitives'; - const colors = { primary: '#0054e9', secondary: '#0163aa', @@ -162,10 +160,4 @@ export const lightTheme: LightTheme = { }, }, }, - components: { - IonDatetime: { - bg: defaultPrimitiveColors.white, - timeBodyBg: '#edeef0', - }, - }, }; diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts index 8d0f846e067..3d3d87ea7f8 100644 --- a/core/src/themes/ios/dark.tokens.ts +++ b/core/src/themes/ios/dark.tokens.ts @@ -1,8 +1,9 @@ -import { generateColorSteps } from '../../utils/theme'; import { darkTheme as baseDarkTheme } from '../base/dark.tokens'; import type { DarkTheme } from '../themes.interfaces'; -const graySteps = generateColorSteps('#ffffff', '#000000', true); +const colors = { + gray: baseDarkTheme.color!.gray!, +}; export const darkTheme: DarkTheme = { ...baseDarkTheme, @@ -56,7 +57,7 @@ export const darkTheme: DarkTheme = { color: { // TODO: Update hex values to use the text color variable and background color variable - gray: graySteps, + gray: colors.gray, }, components: { @@ -72,7 +73,18 @@ export const darkTheme: DarkTheme = { toolbarBorderColor: 'var(--ion-background-color-step-250)', }, IonDatetime: { - timeBodyBg: graySteps['300']!, + bg: colors.gray['950']!, + timeBodyBg: colors.gray['300']!, + }, + IonBreadcrumb: { + color: colors.gray['850']!, + bgFocused: colors.gray['50']!, + iconColor: colors.gray['400']!, + iconColorActive: colors.gray['850']!, + iconColorFocused: colors.gray['750']!, // Available only in iOS + indicatorBg: colors.gray['100']!, + indicatorBgFocused: colors.gray['150']!, + separatorColor: colors.gray['550']!, }, }, }; diff --git a/core/src/themes/ios/light.tokens.ts b/core/src/themes/ios/light.tokens.ts index b7679b9f553..ec2534d102d 100644 --- a/core/src/themes/ios/light.tokens.ts +++ b/core/src/themes/ios/light.tokens.ts @@ -1,3 +1,28 @@ +import { defaultPrimitiveColors } from '../base/default.tokens.primitives'; import type { LightTheme } from '../themes.interfaces'; -export const lightTheme: LightTheme = {}; +const colors = { + gray: defaultPrimitiveColors.gray, +}; + +export const lightTheme: LightTheme = { + color: { + gray: colors.gray, + }, + components: { + IonDatetime: { + bg: colors.gray['950']!, + timeBodyBg: '#edeef0', + }, + IonBreadcrumb: { + color: '#2d4665', + bgFocused: 'rgba(233, 237, 243, 0.7)', + iconColor: '#92a0b3', + iconColorActive: '#242d39', + iconColorFocused: '#445b78', // Available only in iOS + indicatorBg: '#e9edf3', + indicatorBgFocused: '#d9e0ea', + separatorColor: '#73849a', + }, + }, +}; diff --git a/core/src/themes/md/dark.tokens.ts b/core/src/themes/md/dark.tokens.ts index 70fc9b2c68f..dbdf2585e74 100644 --- a/core/src/themes/md/dark.tokens.ts +++ b/core/src/themes/md/dark.tokens.ts @@ -2,7 +2,9 @@ import { generateColorSteps } from '../../utils/theme'; import { darkTheme as baseDarkTheme } from '../base/dark.tokens'; import type { DarkTheme } from '../themes.interfaces'; -const graySteps = generateColorSteps('#ffffff', '#121212', true); +const colors = { + gray: generateColorSteps('#ffffff', '#121212', true), +}; export const darkTheme: DarkTheme = { ...baseDarkTheme, @@ -58,7 +60,7 @@ export const darkTheme: DarkTheme = { color: { // TODO: Update hex values to use the text color variable and background color variable - gray: graySteps, + gray: colors.gray, }, components: { @@ -75,8 +77,18 @@ export const darkTheme: DarkTheme = { background: '#1f1f1f', }, IonDatetime: { - bg: graySteps['100']!, - timeBodyBg: graySteps['300']!, + bg: colors.gray['100']!, + timeBodyBg: colors.gray['300']!, + }, + IonBreadcrumb: { + color: colors.gray['600']!, + bgFocused: colors.gray['50']!, + iconColor: colors.gray['550']!, + iconColorActive: colors.gray['850']!, + indicatorBg: colors.gray['100']!, + indicatorBgFocused: colors.gray['150']!, + colorFocused: colors.gray['800']!, // Available only in md + separatorColor: colors.gray['550']!, }, }, }; diff --git a/core/src/themes/md/light.tokens.ts b/core/src/themes/md/light.tokens.ts index b7679b9f553..9c455cb69a2 100644 --- a/core/src/themes/md/light.tokens.ts +++ b/core/src/themes/md/light.tokens.ts @@ -1,3 +1,21 @@ +import { defaultPrimitiveColors } from '../base/default.tokens.primitives'; import type { LightTheme } from '../themes.interfaces'; -export const lightTheme: LightTheme = {}; +export const lightTheme: LightTheme = { + components: { + IonDatetime: { + bg: defaultPrimitiveColors.white, + timeBodyBg: '#edeef0', + }, + IonBreadcrumb: { + color: '#677483', + bgFocused: defaultPrimitiveColors.white, + iconColor: '#7d8894', + iconColorActive: '#222d3a', + indicatorBg: '#eef1f3', + indicatorBgFocused: '#dfe5e8', + colorFocused: '#35404e', // Available only in md + separatorColor: '#73849a', + }, + }, +}; From e20c7c0f6cae4f2b62da54b473e76bcbef57b93a Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 25 Nov 2025 16:57:02 -0800 Subject: [PATCH 15/45] fix(dark): use correct hex order --- core/src/themes/base/dark.tokens.primitives.ts | 7 +++++++ core/src/themes/base/dark.tokens.ts | 9 +++++++-- core/src/themes/base/light.tokens.ts | 5 +++++ core/src/themes/ios/dark.tokens.ts | 4 ++-- 4 files changed, 21 insertions(+), 4 deletions(-) create mode 100644 core/src/themes/base/dark.tokens.primitives.ts diff --git a/core/src/themes/base/dark.tokens.primitives.ts b/core/src/themes/base/dark.tokens.primitives.ts new file mode 100644 index 00000000000..91a72249842 --- /dev/null +++ b/core/src/themes/base/dark.tokens.primitives.ts @@ -0,0 +1,7 @@ +import { generateColorSteps } from '../../utils/theme'; + +// TODO: ADD TYPE +export const darkPrimitiveColors = { + // TODO: Update hex values to use the text color variable and background color variable + gray: generateColorSteps('#ffffff', '#000', true), +}; diff --git a/core/src/themes/base/dark.tokens.ts b/core/src/themes/base/dark.tokens.ts index ac750abb3c5..954ad1e29c8 100644 --- a/core/src/themes/base/dark.tokens.ts +++ b/core/src/themes/base/dark.tokens.ts @@ -1,6 +1,8 @@ -import { mix, generateColorSteps } from '../../utils/theme'; +import { mix } from '../../utils/theme'; import type { DarkTheme } from '../themes.interfaces'; +import { darkPrimitiveColors } from './dark.tokens.primitives'; + const colors = { primary: '#4d8dff', secondary: '#46b1ff', @@ -11,7 +13,7 @@ const colors = { light: '#222428', medium: '#989aa2', dark: '#f4f5f8', - gray: generateColorSteps('#000000', '#ffffff', true), + ...darkPrimitiveColors, }; export const darkTheme: DarkTheme = { @@ -220,5 +222,8 @@ export const darkTheme: DarkTheme = { IonItem: { background: '#000000', }, + IonBreadcrumb: { + separatorColor: colors.gray['550']!, + }, }, }; diff --git a/core/src/themes/base/light.tokens.ts b/core/src/themes/base/light.tokens.ts index f584b3279c7..25003a0b710 100644 --- a/core/src/themes/base/light.tokens.ts +++ b/core/src/themes/base/light.tokens.ts @@ -160,4 +160,9 @@ export const lightTheme: LightTheme = { }, }, }, + components: { + IonBreadcrumb: { + separatorColor: '#73849a', + }, + }, }; diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts index 3d3d87ea7f8..0a20caad6bb 100644 --- a/core/src/themes/ios/dark.tokens.ts +++ b/core/src/themes/ios/dark.tokens.ts @@ -1,8 +1,9 @@ import { darkTheme as baseDarkTheme } from '../base/dark.tokens'; +import { darkPrimitiveColors as baseDarkPrimitiveColors } from '../base/dark.tokens.primitives'; import type { DarkTheme } from '../themes.interfaces'; const colors = { - gray: baseDarkTheme.color!.gray!, + gray: baseDarkPrimitiveColors.gray, }; export const darkTheme: DarkTheme = { @@ -56,7 +57,6 @@ export const darkTheme: DarkTheme = { }, color: { - // TODO: Update hex values to use the text color variable and background color variable gray: colors.gray, }, From c0b9385943548aa1e9e3f7c33baf079731d163fd Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 25 Nov 2025 16:57:47 -0800 Subject: [PATCH 16/45] feat(breadcrumb): use gray tokens --- .../breadcrumb/breadcrumb.ios.vars.scss | 17 +++++++---------- .../breadcrumb/breadcrumb.md.vars.scss | 14 +++++++------- .../components/breadcrumb/breadcrumb.vars.scss | 2 +- 3 files changed, 15 insertions(+), 18 deletions(-) diff --git a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss index 0fda71c8aa7..112409ee1ac 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-components-ion-breadcrumb-color); /// @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-components-ion-breadcrumb-bg-focused); /// @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-components-ion-breadcrumb-icon-color); /// @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-components-ion-breadcrumb-icon-color-active); /// @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-components-ion-breadcrumb-icon-color-focused); /// @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-components-ion-breadcrumb-indicator-bg); /// @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-components-ion-breadcrumb-indicator-bg-focused); diff --git a/core/src/components/breadcrumb/breadcrumb.md.vars.scss b/core/src/components/breadcrumb/breadcrumb.md.vars.scss index 8c738a5e887..070127b4aa2 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-components-ion-breadcrumb-color); /// @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-components-ion-breadcrumb-color-focused); /// @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-components-ion-breadcrumb-bg-focused); /// @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-components-ion-breadcrumb-icon-color); /// @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-components-ion-breadcrumb-icon-color-active); /// @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-components-ion-breadcrumb-indicator-bg); /// @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-components-ion-breadcrumb-indicator-bg-focused); diff --git a/core/src/components/breadcrumb/breadcrumb.vars.scss b/core/src/components/breadcrumb/breadcrumb.vars.scss index 4770b0b9e19..f13cb164e0b 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-components-ion-breadcrumb-separator-color); From 1ac2ba876386471350eff32d756f93e0dc634cf4 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 25 Nov 2025 17:54:32 -0800 Subject: [PATCH 17/45] feat(datetime-button): use gray tokens --- .../src/components/datetime-button/datetime-button.ios.scss | 2 +- core/src/components/datetime-button/datetime-button.scss | 2 +- core/src/themes/base/dark.tokens.ts | 3 +++ core/src/themes/base/light.tokens.ts | 3 +++ core/src/themes/ionic/dark.tokens.ts | 6 ++++++ core/src/themes/md/dark.tokens.ts | 3 +++ 6 files changed, 17 insertions(+), 2 deletions(-) diff --git a/core/src/components/datetime-button/datetime-button.ios.scss b/core/src/components/datetime-button/datetime-button.ios.scss index 6a4d3eb1be8..5d4126f09a2 100644 --- a/core/src/components/datetime-button/datetime-button.ios.scss +++ b/core/src/components/datetime-button/datetime-button.ios.scss @@ -8,5 +8,5 @@ } :host button.ion-activated { - color: $text-color-step-400; + color: var(--ion-color-gray-600); } diff --git a/core/src/components/datetime-button/datetime-button.scss b/core/src/components/datetime-button/datetime-button.scss index 6defd0da9be..13b5bb236ea 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-components-ion-datetime-button-bg); color: $text-color; diff --git a/core/src/themes/base/dark.tokens.ts b/core/src/themes/base/dark.tokens.ts index 954ad1e29c8..0a3d5ef1ea6 100644 --- a/core/src/themes/base/dark.tokens.ts +++ b/core/src/themes/base/dark.tokens.ts @@ -225,5 +225,8 @@ export const darkTheme: DarkTheme = { IonBreadcrumb: { separatorColor: colors.gray['550']!, }, + IonDatetimeButton: { + bg: colors.gray['300']!, + }, }, }; diff --git a/core/src/themes/base/light.tokens.ts b/core/src/themes/base/light.tokens.ts index 25003a0b710..ba333a41cf2 100644 --- a/core/src/themes/base/light.tokens.ts +++ b/core/src/themes/base/light.tokens.ts @@ -164,5 +164,8 @@ export const lightTheme: LightTheme = { IonBreadcrumb: { separatorColor: '#73849a', }, + IonDatetimeButton: { + bg: '#edeef0', + }, }, }; diff --git a/core/src/themes/ionic/dark.tokens.ts b/core/src/themes/ionic/dark.tokens.ts index 8e7222b581a..c9fddf6f492 100644 --- a/core/src/themes/ionic/dark.tokens.ts +++ b/core/src/themes/ionic/dark.tokens.ts @@ -3,4 +3,10 @@ import type { DarkTheme } from '../themes.interfaces'; export const darkTheme: DarkTheme = { ...baseDarkTheme, + + components: { + IonDatetimeButton: { + bg: '#595959', + }, + }, }; diff --git a/core/src/themes/md/dark.tokens.ts b/core/src/themes/md/dark.tokens.ts index dbdf2585e74..5baf5d6f2ae 100644 --- a/core/src/themes/md/dark.tokens.ts +++ b/core/src/themes/md/dark.tokens.ts @@ -90,5 +90,8 @@ export const darkTheme: DarkTheme = { colorFocused: colors.gray['800']!, // Available only in md separatorColor: colors.gray['550']!, }, + IonDatetimeButton: { + bg: colors.gray['300']!, + }, }, }; From fdefbe6f95f3825ec530c020b5c159b0094e39d3 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 25 Nov 2025 17:59:34 -0800 Subject: [PATCH 18/45] feat(ionic): use gray token for separator color --- core/src/themes/ionic/light.tokens.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/core/src/themes/ionic/light.tokens.ts b/core/src/themes/ionic/light.tokens.ts index 94c96baeb90..001cc3106bd 100644 --- a/core/src/themes/ionic/light.tokens.ts +++ b/core/src/themes/ionic/light.tokens.ts @@ -19,5 +19,8 @@ export const lightTheme: LightTheme = { colorSelected: 'var(--ion-tab-bar-color-selected, #0d4bc3)', borderColor: 'var(--ion-tab-bar-border-color, transparent)', }, + IonBreadcrumb: { + separatorColor: '#a0a0a0', + }, }, }; From 10d1e639f3c8c5454414fc867492a6dbf1eb5006 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 26 Nov 2025 08:12:16 -0800 Subject: [PATCH 19/45] feat(infinite-scroll-content): use gray token --- .../infinite-scroll-content.ios.vars.scss | 2 +- .../infinite-scroll-content.md.vars.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss index 453acc1d189..e4e7779cc97 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Color of the infinite scroll loading indicator -$infinite-scroll-ios-loading-color: $text-color-step-400; +$infinite-scroll-ios-loading-color: var(--ion-color-gray-600); /// @prop - Color of the infinite scroll loading indicator text $infinite-scroll-ios-loading-text-color: $infinite-scroll-ios-loading-color; diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss index f1fca17e82e..c09223746a1 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Color of the infinite scroll loading indicator -$infinite-scroll-md-loading-color: $text-color-step-400; +$infinite-scroll-md-loading-color: var(--ion-color-gray-600); /// @prop - Color of the infinite scroll loading indicator text $infinite-scroll-md-loading-text-color: $infinite-scroll-md-loading-color; From 2637605a427faa87190e3782bf45d5c0758bca44 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 26 Nov 2025 13:40:21 -0800 Subject: [PATCH 20/45] feat(input): use gray tokens --- core/src/components/input/input.md.outline.scss | 4 ++-- core/src/components/input/input.md.solid.scss | 12 ++++++------ core/src/components/input/input.native.scss | 6 +++--- core/src/components/input/test/validation/index.html | 2 -- 4 files changed, 11 insertions(+), 13 deletions(-) diff --git a/core/src/components/input/input.md.outline.scss b/core/src/components/input/input.md.outline.scss index c9577e16676..a407b9db5ca 100644 --- a/core/src/components/input/input.md.outline.scss +++ b/core/src/components/input/input.md.outline.scss @@ -2,7 +2,7 @@ // ---------------------------------------------------------------- :host(.input-fill-outline) { - --border-color: #{$background-color-step-300}; + --border-color: var(--ion-color-gray-300); --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; @@ -31,7 +31,7 @@ */ @media (any-hover: hover) { :host(.input-fill-outline:hover) { - --border-color: #{$background-color-step-750}; + --border-color: var(--ion-color-gray-750); } } diff --git a/core/src/components/input/input.md.solid.scss b/core/src/components/input/input.md.solid.scss index f3df1521515..b0c4a092d5d 100644 --- a/core/src/components/input/input.md.solid.scss +++ b/core/src/components/input/input.md.solid.scss @@ -2,8 +2,8 @@ // ---------------------------------------------------------------- :host(.input-fill-solid) { - --background: #{$background-color-step-50}; - --border-color: #{$background-color-step-500}; + --background: var(--ion-color-gray-50); + --border-color: var(--ion-color-gray-500); --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; @@ -44,8 +44,8 @@ */ @media (any-hover: hover) { :host(.input-fill-solid:hover) { - --background: #{$background-color-step-100}; - --border-color: #{$background-color-step-750}; + --background: var(--ion-color-gray-100); + --border-color: var(--ion-color-gray-750); } } @@ -54,8 +54,8 @@ * much darker on focus. */ :host(.input-fill-solid.has-focus) { - --background: #{$background-color-step-150}; - --border-color: #{$background-color-step-750}; + --background: var(--ion-color-gray-150); + --border-color: var(--ion-color-gray-750); } :host(.input-fill-solid) .input-wrapper { diff --git a/core/src/components/input/input.native.scss b/core/src/components/input/input.native.scss index 4ac5d333b8b..f837abdf09b 100644 --- a/core/src/components/input/input.native.scss +++ b/core/src/components/input/input.native.scss @@ -55,7 +55,7 @@ width: 30px; height: 30px; - color: $text-color-step-400; + color: var(--ion-color-gray-600); } /** @@ -108,14 +108,14 @@ // ---------------------------------------------------------------- .input-bottom .helper-text { - color: $text-color-step-300; + color: var(--ion-color-gray-700); } // Input Max Length Counter // ---------------------------------------------------------------- .input-bottom .counter { - color: $text-color-step-300; + color: var(--ion-color-gray-700); padding-inline-start: 16px; } diff --git a/core/src/components/input/test/validation/index.html b/core/src/components/input/test/validation/index.html index 2a6ad89e13f..4ce28439b14 100644 --- a/core/src/components/input/test/validation/index.html +++ b/core/src/components/input/test/validation/index.html @@ -24,8 +24,6 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); - margin-top: 10px; margin-bottom: 5px; } From 73b9b4f0ea168555ee3fa183b04ba4392a63d5d3 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 26 Nov 2025 18:04:55 -0800 Subject: [PATCH 21/45] feat(input-otp): use gray tokens --- .../components/input-otp/input-otp.md.scss | 2 +- .../input-otp/input-otp.native.scss | 20 +++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/core/src/components/input-otp/input-otp.md.scss b/core/src/components/input-otp/input-otp.md.scss index eb21b802d3e..d51a5a49857 100644 --- a/core/src/components/input-otp/input-otp.md.scss +++ b/core/src/components/input-otp/input-otp.md.scss @@ -16,5 +16,5 @@ // -------------------------------------------------- :host(.input-otp-fill-outline) { - --border-color: #{$background-color-step-300}; + --border-color: var(--ion-color-gray-300); } diff --git a/core/src/components/input-otp/input-otp.native.scss b/core/src/components/input-otp/input-otp.native.scss index daf2b3ff877..a7e9c8b3c1f 100644 --- a/core/src/components/input-otp/input-otp.native.scss +++ b/core/src/components/input-otp/input-otp.native.scss @@ -14,7 +14,7 @@ --border-style: solid; --separator-width: 8px; --separator-border-radius: 999px; - --separator-color: #{$background-color-step-150}; + --separator-color: var(--ion-color-gray-150); --highlight-color-focused: #{ion-color(primary, base)}; --highlight-color-valid: #{ion-color(success, base)}; --highlight-color-invalid: #{ion-color(danger, base)}; @@ -26,7 +26,7 @@ // ---------------------------------------------------------------- .input-otp-description { - color: $text-color-step-300; + color: var(--ion-color-gray-700); font-size: dynamic-font(12px); @@ -83,30 +83,30 @@ } :host(.input-otp-fill-solid) { - --border-color: #{$background-color-step-50}; - --background: #{$background-color-step-50}; + --border-color: var(--ion-color-gray-50); + --background: var(--ion-color-gray-50); } // States // -------------------------------------------------- :host(.input-otp-disabled) { - --color: #{$text-color-step-650}; + --color: var(--ion-color-gray-350); } :host(.input-otp-fill-outline.input-otp-disabled) { - --background: #{$background-color-step-50}; - --border-color: #{$background-color-step-100}; + --background: var(--ion-color-gray-50); + --border-color: var(--ion-color-gray-100); } :host(.input-otp-fill-outline.input-otp-readonly) { - --background: #{$background-color-step-50}; + --background: var(--ion-color-gray-50); } :host(.input-otp-fill-solid.input-otp-disabled), :host(.input-otp-fill-solid.input-otp-readonly) { - --border-color: #{$background-color-step-100}; - --background: #{$background-color-step-100}; + --border-color: var(--ion-color-gray-100); + --background: var(--ion-color-gray-100); } // Colors From 5e5e883762b5521b2b2c11b9ac8022325843504a Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 26 Nov 2025 19:43:56 -0800 Subject: [PATCH 22/45] feat(item, item-divider, list-header): use gray tokens --- core/src/components/item-divider/item-divider.ios.vars.scss | 4 ++-- core/src/components/item-divider/item-divider.md.vars.scss | 2 +- core/src/components/item/item.ios.vars.scss | 2 +- core/src/components/item/item.md.vars.scss | 2 +- core/src/components/list-header/list-header.ios.vars.scss | 2 +- core/src/themes/ios/dark.tokens.ts | 1 + core/src/themes/ios/light.tokens.ts | 3 +++ 7 files changed, 10 insertions(+), 6 deletions(-) diff --git a/core/src/components/item-divider/item-divider.ios.vars.scss b/core/src/components/item-divider/item-divider.ios.vars.scss index 89901c1f13e..e30f0050571 100644 --- a/core/src/components/item-divider/item-divider.ios.vars.scss +++ b/core/src/components/item-divider/item-divider.ios.vars.scss @@ -14,10 +14,10 @@ $item-divider-ios-font-size: dynamic-font(17px); $item-divider-ios-font-weight: 600; /// @prop - Background for the divider -$item-divider-ios-background: $background-color-step-100; +$item-divider-ios-background: var(--ion-color-gray-100); /// @prop - Color for the divider -$item-divider-ios-color: $text-color-step-150; +$item-divider-ios-color: var(--ion-color-gray-850); /// @prop - Padding start for the divider $item-divider-ios-padding-start: $item-ios-padding-start; diff --git a/core/src/components/item-divider/item-divider.md.vars.scss b/core/src/components/item-divider/item-divider.md.vars.scss index 97a58f09b24..d0507b152ed 100644 --- a/core/src/components/item-divider/item-divider.md.vars.scss +++ b/core/src/components/item-divider/item-divider.md.vars.scss @@ -8,7 +8,7 @@ $item-divider-md-min-height: 30px; /// @prop - Color for the divider -$item-divider-md-color: $text-color-step-600; +$item-divider-md-color: var(--ion-color-gray-400); /// @prop - Background for the divider $item-divider-md-background: $background-color; diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss index 223b08125f3..9855dfaab56 100644 --- a/core/src/components/item/item.ios.vars.scss +++ b/core/src/components/item/item.ios.vars.scss @@ -25,7 +25,7 @@ $item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end; $item-ios-paragraph-font-size: dynamic-font(14px); /// @prop - Color of the item paragraph -$item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3); +$item-ios-paragraph-text-color: var(--ion-components-ion-item-paragraph-text-color); /// @prop - Width of the avatar in the item $item-ios-avatar-width: 36px; diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss index 4e38c76ec26..da05cbbbc0f 100644 --- a/core/src/components/item/item.md.vars.scss +++ b/core/src/components/item/item.md.vars.scss @@ -7,7 +7,7 @@ $item-md-min-height: 48px; /// @prop - Color of the item paragraph -$item-md-paragraph-text-color: $text-color-step-400; +$item-md-paragraph-text-color: var(--ion-color-gray-600); /// @prop - Font size of the item $item-md-font-size: 16px; diff --git a/core/src/components/list-header/list-header.ios.vars.scss b/core/src/components/list-header/list-header.ios.vars.scss index 44b3a35693c..babb3d03f77 100644 --- a/core/src/components/list-header/list-header.ios.vars.scss +++ b/core/src/components/list-header/list-header.ios.vars.scss @@ -17,7 +17,7 @@ $list-header-ios-font-weight: 700; $list-header-ios-letter-spacing: 0; /// @prop - Text color of the list header -$list-header-ios-color: $text-color-step-150; +$list-header-ios-color: var(--ion-color-gray-850); /// @prop - Background color of the list header $list-header-ios-background-color: transparent; diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts index 0a20caad6bb..83dd9c8f23f 100644 --- a/core/src/themes/ios/dark.tokens.ts +++ b/core/src/themes/ios/dark.tokens.ts @@ -66,6 +66,7 @@ export const darkTheme: DarkTheme = { }, IonItem: { background: '#000000', + paragraphTextColor: colors.gray['450']!, }, IonModal: { background: 'var(--ion-background-color-step-100)', diff --git a/core/src/themes/ios/light.tokens.ts b/core/src/themes/ios/light.tokens.ts index ec2534d102d..69b23d5888d 100644 --- a/core/src/themes/ios/light.tokens.ts +++ b/core/src/themes/ios/light.tokens.ts @@ -24,5 +24,8 @@ export const lightTheme: LightTheme = { indicatorBgFocused: '#d9e0ea', separatorColor: '#73849a', }, + IonItem: { + paragraphTextColor: '#a3a3a3', + }, }, }; From e979f0eef056ffc6fd1a240a4d63b686c4fb75e2 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 26 Nov 2025 19:44:25 -0800 Subject: [PATCH 23/45] feat(label): use gray tokens --- core/src/components/label/label.ios.vars.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/label/label.ios.vars.scss b/core/src/components/label/label.ios.vars.scss index 48cadf30ce9..bb98ccd7b61 100644 --- a/core/src/components/label/label.ios.vars.scss +++ b/core/src/components/label/label.ios.vars.scss @@ -14,4 +14,4 @@ $label-ios-text-wrap-font-size: dynamic-font(14px); $label-ios-text-wrap-line-height: 1.5; /// @prop - Color of the item paragraph -$item-ios-paragraph-text-color: $text-color-step-600; +$item-ios-paragraph-text-color: var(--ion-color-gray-400); From 9b2adaa970ad170aed389f319c5b4a16f6efe1e4 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 26 Nov 2025 19:47:07 -0800 Subject: [PATCH 24/45] feat(loading): use gray tokens --- core/src/components/loading/loading.ios.vars.scss | 2 +- core/src/components/loading/loading.md.vars.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/core/src/components/loading/loading.ios.vars.scss b/core/src/components/loading/loading.ios.vars.scss index 05cd183091a..28edb483835 100644 --- a/core/src/components/loading/loading.ios.vars.scss +++ b/core/src/components/loading/loading.ios.vars.scss @@ -43,7 +43,7 @@ $loading-ios-translucent-background-color: rgba($background-color-rgb, $loading- $loading-ios-content-font-weight: bold; /// @prop - Color of the loading spinner -$loading-ios-spinner-color: $text-color-step-400; +$loading-ios-spinner-color: var(--ion-color-gray-600); /// @prop - Filter of the translucent loading $loading-ios-translucent-filter: saturate(180%) blur(20px); diff --git a/core/src/components/loading/loading.md.vars.scss b/core/src/components/loading/loading.md.vars.scss index fcdaa57fc00..4df4a85287d 100644 --- a/core/src/components/loading/loading.md.vars.scss +++ b/core/src/components/loading/loading.md.vars.scss @@ -28,10 +28,10 @@ $loading-md-max-height: 90%; $loading-md-border-radius: 2px; /// @prop - Text color of the loading wrapper -$loading-md-text-color: $text-color-step-150; +$loading-md-text-color: var(--ion-color-gray-850); /// @prop - Background of the loading wrapper -$loading-md-background: $background-color-step-50; +$loading-md-background: var(--ion-color-gray-50); /// @prop - Box shadow color of the loading wrapper $loading-md-box-shadow-color: rgba(0, 0, 0, 0.4); From 46dd76c8cb00abd896dc03632c6a50269d63d4d2 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 09:19:40 -0800 Subject: [PATCH 25/45] feat(modal): use gray tokens --- core/src/components/modal/modal.native.scss | 2 +- core/src/themes/ios/dark.tokens.ts | 1 + core/src/themes/ios/light.tokens.ts | 3 +++ core/src/themes/md/dark.tokens.ts | 3 +++ core/src/themes/md/light.tokens.ts | 3 +++ core/src/themes/native/test/steps/index.html | 20 ++++++++++++++++++++ 6 files changed, 31 insertions(+), 1 deletion(-) diff --git a/core/src/components/modal/modal.native.scss b/core/src/components/modal/modal.native.scss index b94d65d0cd9..067eb69b9a6 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-components-ion-modal-handle-bg); &::before { /** diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts index 83dd9c8f23f..64fba99ccea 100644 --- a/core/src/themes/ios/dark.tokens.ts +++ b/core/src/themes/ios/dark.tokens.ts @@ -72,6 +72,7 @@ export const darkTheme: DarkTheme = { background: 'var(--ion-background-color-step-100)', toolbarBackground: 'var(--ion-background-color-step-150)', toolbarBorderColor: 'var(--ion-background-color-step-250)', + handleBg: colors.gray['350']!, }, IonDatetime: { bg: colors.gray['950']!, diff --git a/core/src/themes/ios/light.tokens.ts b/core/src/themes/ios/light.tokens.ts index 69b23d5888d..a44ad2f04cf 100644 --- a/core/src/themes/ios/light.tokens.ts +++ b/core/src/themes/ios/light.tokens.ts @@ -27,5 +27,8 @@ export const lightTheme: LightTheme = { IonItem: { paragraphTextColor: '#a3a3a3', }, + IonModal: { + handleBg: '#c0c0be', + }, }, }; diff --git a/core/src/themes/md/dark.tokens.ts b/core/src/themes/md/dark.tokens.ts index 5baf5d6f2ae..0fa333d2dad 100644 --- a/core/src/themes/md/dark.tokens.ts +++ b/core/src/themes/md/dark.tokens.ts @@ -93,5 +93,8 @@ export const darkTheme: DarkTheme = { IonDatetimeButton: { bg: colors.gray['300']!, }, + IonModal: { + handleBg: colors.gray['350']!, + }, }, }; diff --git a/core/src/themes/md/light.tokens.ts b/core/src/themes/md/light.tokens.ts index 9c455cb69a2..c1808a57157 100644 --- a/core/src/themes/md/light.tokens.ts +++ b/core/src/themes/md/light.tokens.ts @@ -17,5 +17,8 @@ export const lightTheme: LightTheme = { colorFocused: '#35404e', // Available only in md separatorColor: '#73849a', }, + IonModal: { + handleBg: '#c0c0be', + }, }, }; diff --git a/core/src/themes/native/test/steps/index.html b/core/src/themes/native/test/steps/index.html index 3579469b36a..f074f57c1bd 100644 --- a/core/src/themes/native/test/steps/index.html +++ b/core/src/themes/native/test/steps/index.html @@ -219,7 +219,27 @@
Step 850
Step 900
Step 950
+ +

Gray

+
+ + From eda4918cc05c03be30b7a591ba9b3a1ed2f21121 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 09:20:19 -0800 Subject: [PATCH 26/45] feat(note): use gray tokens --- core/src/components/note/note.ios.vars.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/note/note.ios.vars.scss b/core/src/components/note/note.ios.vars.scss index 75836d251b7..2fb41d2eba5 100644 --- a/core/src/components/note/note.ios.vars.scss +++ b/core/src/components/note/note.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Text color of the note -$note-ios-color: $text-color-step-650; +$note-ios-color: var(--ion-color-gray-350); /// @prop - Font size of the note $note-ios-font-size: dynamic-font-min(0.875, 16px); From a4cabf803b0b2436155fa23cf81a355146cada57 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 09:20:44 -0800 Subject: [PATCH 27/45] feat(note): use gray tokens --- core/src/components/note/note.md.vars.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/note/note.md.vars.scss b/core/src/components/note/note.md.vars.scss index b733c522f8c..b5e70386a17 100644 --- a/core/src/components/note/note.md.vars.scss +++ b/core/src/components/note/note.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Text color of the note -$note-md-color: $text-color-step-400; +$note-md-color: var(--ion-color-gray-600); /// @prop - Font size of the note $note-md-font-size: dynamic-font(14px); From f3301649109a866cf67987dede06f0d65342dde5 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 09:21:58 -0800 Subject: [PATCH 28/45] feat(picker): use gray tokens --- core/src/components/picker/picker.ios.scss | 2 +- core/src/themes/ios/dark.tokens.ts | 3 +++ core/src/themes/ios/light.tokens.ts | 3 +++ 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/core/src/components/picker/picker.ios.scss b/core/src/components/picker/picker.ios.scss index f474efe997b..df87680b5f2 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-components-ion-picker-highlight-bg)); } diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts index 64fba99ccea..e71070f0c59 100644 --- a/core/src/themes/ios/dark.tokens.ts +++ b/core/src/themes/ios/dark.tokens.ts @@ -88,5 +88,8 @@ export const darkTheme: DarkTheme = { indicatorBgFocused: colors.gray['150']!, separatorColor: colors.gray['550']!, }, + IonPicker: { + highlightBg: colors.gray['150']!, // Available only in iOS + }, }, }; diff --git a/core/src/themes/ios/light.tokens.ts b/core/src/themes/ios/light.tokens.ts index a44ad2f04cf..586657b645e 100644 --- a/core/src/themes/ios/light.tokens.ts +++ b/core/src/themes/ios/light.tokens.ts @@ -30,5 +30,8 @@ export const lightTheme: LightTheme = { IonModal: { handleBg: '#c0c0be', }, + IonPicker: { + highlightBg: '#eeeeef', // Available only in iOS + }, }, }; From 52b7edaae74373fbf65096b971cb05176cd8d425 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 09:23:17 -0800 Subject: [PATCH 29/45] feat(popover): use gray tokens --- core/src/components/popover/popover.ios.vars.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/popover/popover.ios.vars.scss b/core/src/components/popover/popover.ios.vars.scss index 195d3145423..bee2a3b9fa2 100644 --- a/core/src/components/popover/popover.ios.vars.scss +++ b/core/src/components/popover/popover.ios.vars.scss @@ -25,4 +25,4 @@ $popover-ios-translucent-filter: saturate(180%) blur(20px); $popover-ios-desktop-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); /// $prop - Border of popover content on desktop -$popover-ios-desktop-border: 0.5px solid $background-color-step-100; +$popover-ios-desktop-border: 0.5px solid var(--ion-color-gray-100); From 7a53b6d7379017f89c02464a98271bcdd1d1b2bf Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 09:23:54 -0800 Subject: [PATCH 30/45] feat(progress-bar): use gray tokens --- core/src/components/progress-bar/progress-bar.ios.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/progress-bar/progress-bar.ios.scss b/core/src/components/progress-bar/progress-bar.ios.scss index 2c8c60fbcdb..b1619202df6 100644 --- a/core/src/components/progress-bar/progress-bar.ios.scss +++ b/core/src/components/progress-bar/progress-bar.ios.scss @@ -18,5 +18,5 @@ * solid (with a buffer value of 1). This maintains * the custom Ionic appearance for a buffered progress bar. */ - --background: #{$background-color-step-100}; + --background: var(--ion-color-gray-100); } From 98df5656d6b0d8ceb7c73ed622bac72506abab8b Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 09:24:26 -0800 Subject: [PATCH 31/45] feat(radio-group): use gray tokens --- core/src/components/radio-group/radio-group.native.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/radio-group/radio-group.native.scss b/core/src/components/radio-group/radio-group.native.scss index c0a65bdd955..122fdbe9631 100644 --- a/core/src/components/radio-group/radio-group.native.scss +++ b/core/src/components/radio-group/radio-group.native.scss @@ -20,5 +20,5 @@ } .radio-group-top .helper-text { - color: $text-color-step-300; + color: var(--ion-color-gray-700); } From 048a263f440118100e9812b99214e37adb084e82 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 09:25:14 -0800 Subject: [PATCH 32/45] feat(range): use gray tokens --- core/src/components/range/range.ios.vars.scss | 2 +- core/src/components/range/range.md.vars.scss | 2 +- core/src/themes/ios/dark.tokens.ts | 3 +++ core/src/themes/ios/light.tokens.ts | 3 +++ 4 files changed, 8 insertions(+), 2 deletions(-) diff --git a/core/src/components/range/range.ios.vars.scss b/core/src/components/range/range.ios.vars.scss index dace5a00686..0ee84cbedcb 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-components-ion-range-bg); /// @prop - Border radius of the range bar $range-ios-bar-border-radius: 2px; diff --git a/core/src/components/range/range.md.vars.scss b/core/src/components/range/range.md.vars.scss index 3916b431087..805f3e46127 100644 --- a/core/src/components/range/range.md.vars.scss +++ b/core/src/components/range/range.md.vars.scss @@ -20,7 +20,7 @@ $range-md-slider-height: 42px; $range-md-bar-height: 2px; /// @prop - Background of the range bar -$range-md-bar-background-color: $background-color-step-250; +$range-md-bar-background-color: var(--ion-color-gray-250); /// @prop - Font size of the range pin $range-md-pin-font-size: dynamic-font(12px); diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts index e71070f0c59..6035604fc07 100644 --- a/core/src/themes/ios/dark.tokens.ts +++ b/core/src/themes/ios/dark.tokens.ts @@ -91,5 +91,8 @@ export const darkTheme: DarkTheme = { IonPicker: { highlightBg: colors.gray['150']!, // Available only in iOS }, + IonRange: { + bg: colors.gray['900']!, // Available only in iOS + }, }, }; diff --git a/core/src/themes/ios/light.tokens.ts b/core/src/themes/ios/light.tokens.ts index 586657b645e..d451bea9896 100644 --- a/core/src/themes/ios/light.tokens.ts +++ b/core/src/themes/ios/light.tokens.ts @@ -33,5 +33,8 @@ export const lightTheme: LightTheme = { IonPicker: { highlightBg: '#eeeeef', // Available only in iOS }, + IonRange: { + bg: colors.gray['100']!, // Available only in iOS + }, }, }; From c9cddad3206d59c01402e0fb68e9bc27eae1c21e Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 09:26:01 -0800 Subject: [PATCH 33/45] feat(refresher): use gray tokens --- core/src/components/refresher/refresher.ios.vars.scss | 2 +- core/src/components/refresher/refresher.md.vars.scss | 4 ++-- core/src/themes/ios/dark.tokens.ts | 3 +++ core/src/themes/ios/light.tokens.ts | 3 +++ core/src/themes/md/dark.tokens.ts | 4 ++++ core/src/themes/md/light.tokens.ts | 4 ++++ 6 files changed, 17 insertions(+), 3 deletions(-) diff --git a/core/src/components/refresher/refresher.ios.vars.scss b/core/src/components/refresher/refresher.ios.vars.scss index 3cb4a38f54b..fbf48b3233f 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-components-ion-refresher-native-spinner-color); /// @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..bce4c650542 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-components-ion-refresher-native-spinner-border); /// @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-components-ion-refresher-native-spinner-bg); /// @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/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts index 6035604fc07..62bc9a74f9c 100644 --- a/core/src/themes/ios/dark.tokens.ts +++ b/core/src/themes/ios/dark.tokens.ts @@ -94,5 +94,8 @@ export const darkTheme: DarkTheme = { IonRange: { bg: colors.gray['900']!, // Available only in iOS }, + IonRefresher: { + nativeSpinnerColor: colors.gray['450']!, // Available only in iOS + }, }, }; diff --git a/core/src/themes/ios/light.tokens.ts b/core/src/themes/ios/light.tokens.ts index d451bea9896..51ff9a983cb 100644 --- a/core/src/themes/ios/light.tokens.ts +++ b/core/src/themes/ios/light.tokens.ts @@ -36,5 +36,8 @@ export const lightTheme: LightTheme = { IonRange: { bg: colors.gray['100']!, // Available only in iOS }, + IonRefresher: { + nativeSpinnerColor: '#747577', // Available only in iOS + }, }, }; diff --git a/core/src/themes/md/dark.tokens.ts b/core/src/themes/md/dark.tokens.ts index 0fa333d2dad..504a20563fa 100644 --- a/core/src/themes/md/dark.tokens.ts +++ b/core/src/themes/md/dark.tokens.ts @@ -96,5 +96,9 @@ export const darkTheme: DarkTheme = { IonModal: { handleBg: colors.gray['350']!, }, + IonRefresher: { + nativeSpinnerBorder: colors.gray['200']!, // Available only in md + nativeSpinnerBg: colors.gray['250']!, // Available only in md + }, }, }; diff --git a/core/src/themes/md/light.tokens.ts b/core/src/themes/md/light.tokens.ts index c1808a57157..abbf4115fde 100644 --- a/core/src/themes/md/light.tokens.ts +++ b/core/src/themes/md/light.tokens.ts @@ -20,5 +20,9 @@ export const lightTheme: LightTheme = { IonModal: { handleBg: '#c0c0be', }, + IonRefresher: { + nativeSpinnerBorder: '#ececec', // Available only in md + nativeSpinnerBg: '#ffffff', // Available only in md + }, }, }; From 826a7e439aa2ab44852e1a1a2aa5ad732feadb5e Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 09:26:35 -0800 Subject: [PATCH 34/45] feat(searchbar): use gray tokens --- core/src/components/searchbar/searchbar.ios.vars.scss | 4 ++-- core/src/components/searchbar/searchbar.md.vars.scss | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/core/src/components/searchbar/searchbar.ios.vars.scss b/core/src/components/searchbar/searchbar.ios.vars.scss index a675bf7848f..8e133d1ba9a 100644 --- a/core/src/components/searchbar/searchbar.ios.vars.scss +++ b/core/src/components/searchbar/searchbar.ios.vars.scss @@ -29,7 +29,7 @@ $searchbar-ios-cancel-button-background-color: transparent; $searchbar-ios-input-search-icon-size: dynamic-font(22px); /// @prop - Color of the searchbar input search icon -$searchbar-ios-input-search-icon-color: $text-color-step-400; +$searchbar-ios-input-search-icon-color: var(--ion-color-gray-600); /// @prop - Minimum Height of the searchbar input $searchbar-ios-input-min-height: 36px; @@ -56,7 +56,7 @@ $searchbar-ios-cancel-transition: all 300ms ease; $searchbar-ios-input-icon-opacity: 0.5; /// @prop - Color of the searchbar input clear icon -$searchbar-ios-input-clear-icon-color: $text-color-step-400; +$searchbar-ios-input-clear-icon-color: var(--ion-color-gray-600); /// @prop - Size of the searchbar input clear icon $searchbar-ios-input-clear-icon-size: dynamic-font(18px); diff --git a/core/src/components/searchbar/searchbar.md.vars.scss b/core/src/components/searchbar/searchbar.md.vars.scss index 12381b3c912..565930dc5ff 100644 --- a/core/src/components/searchbar/searchbar.md.vars.scss +++ b/core/src/components/searchbar/searchbar.md.vars.scss @@ -19,7 +19,7 @@ $searchbar-md-padding-start: $searchbar-md-padding-end; $searchbar-md-background: inherit; /// @prop - Color of the searchbar cancel button -$searchbar-md-cancel-button-color: $text-color-step-100; +$searchbar-md-cancel-button-color: var(--ion-color-gray-900); /// @prop - Background color of the searchbar cancel button $searchbar-md-cancel-button-background-color: transparent; @@ -28,7 +28,7 @@ $searchbar-md-cancel-button-background-color: transparent; $searchbar-md-cancel-button-font-size: 1.5em; /// @prop - Color of the searchbar input search icon -$searchbar-md-input-search-icon-color: $text-color-step-400; +$searchbar-md-input-search-icon-color: var(--ion-color-gray-600); /// @prop - Size of the searchbar input search icon $searchbar-md-input-search-icon-size: dynamic-font(21px); @@ -44,7 +44,7 @@ $searchbar-md-input-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px 0 1px 5px 0 rgba(0, 0, 0, 0.12); /// @prop - Color of the searchbar input text -$searchbar-md-input-text-color: $text-color-step-150; +$searchbar-md-input-text-color: var(--ion-color-gray-850); /// @prop - Background of the searchbar input $searchbar-md-input-background-color: $background-color; From 16a10ddf5e94d79c1613f7296c0a5008b0b33dd9 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 09:27:06 -0800 Subject: [PATCH 35/45] feat(segment-button): use gray tokens --- .../src/components/segment-button/segment-button.ios.vars.scss | 2 +- core/src/themes/ios/dark.tokens.ts | 3 +++ core/src/themes/ios/light.tokens.ts | 3 +++ 3 files changed, 7 insertions(+), 1 deletion(-) 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..5b15114e3b4 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-components-ion-segment-button-checked-indicator-bg); /// @prop - Margin of the segment button $segment-button-ios-margin: 2px; diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts index 62bc9a74f9c..250aaf6de9c 100644 --- a/core/src/themes/ios/dark.tokens.ts +++ b/core/src/themes/ios/dark.tokens.ts @@ -97,5 +97,8 @@ export const darkTheme: DarkTheme = { IonRefresher: { nativeSpinnerColor: colors.gray['450']!, // Available only in iOS }, + IonSegmentButton: { + checkedIndicatorBg: colors.gray['350']!, // Available only in iOS + }, }, }; diff --git a/core/src/themes/ios/light.tokens.ts b/core/src/themes/ios/light.tokens.ts index 51ff9a983cb..8a8340dac2e 100644 --- a/core/src/themes/ios/light.tokens.ts +++ b/core/src/themes/ios/light.tokens.ts @@ -39,5 +39,8 @@ export const lightTheme: LightTheme = { IonRefresher: { nativeSpinnerColor: '#747577', // Available only in iOS }, + IonSegmentButton: { + checkedIndicatorBg: defaultPrimitiveColors.white, // Available only in iOS + }, }, }; From 307afa1ec2cf22bcd9984b71e70f54ff660711a2 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 09:27:32 -0800 Subject: [PATCH 36/45] feat(select): use gray tokens --- core/src/components/select/select.ios.scss | 2 +- core/src/components/select/select.md.outline.scss | 4 ++-- core/src/components/select/select.md.solid.scss | 10 +++++----- core/src/components/select/select.md.vars.scss | 2 +- core/src/components/select/select.native.scss | 2 +- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss index 3e65937f6bf..d653672581f 100644 --- a/core/src/components/select/select.ios.scss +++ b/core/src/components/select/select.ios.scss @@ -16,7 +16,7 @@ // Color deviates from the iOS spec, but satisfies WCAG AAA: // https://www.w3.org/TR/WCAG20-TECHS/G18.html - color: #{$text-color-step-350}; + color: var(--ion-color-gray-650); } // Select Inner Wrapper diff --git a/core/src/components/select/select.md.outline.scss b/core/src/components/select/select.md.outline.scss index 66f15f0f91b..46d8b37139f 100644 --- a/core/src/components/select/select.md.outline.scss +++ b/core/src/components/select/select.md.outline.scss @@ -4,7 +4,7 @@ // ---------------------------------------------------------------- :host(.select-fill-outline) { - --border-color: #{$background-color-step-300}; + --border-color: var(--ion-color-gray-300); --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; @@ -33,7 +33,7 @@ */ @media (any-hover: hover) { :host(.select-fill-outline:hover) { - --border-color: #{$background-color-step-750}; + --border-color: var(--ion-color-gray-750); } } diff --git a/core/src/components/select/select.md.solid.scss b/core/src/components/select/select.md.solid.scss index 12a42d2222f..2f6321e31a4 100644 --- a/core/src/components/select/select.md.solid.scss +++ b/core/src/components/select/select.md.solid.scss @@ -4,8 +4,8 @@ // ---------------------------------------------------------------- :host(.select-fill-solid) { - --background: #{$background-color-step-50}; - --border-color: #{$background-color-step-500}; + --background: var(--ion-color-gray-50); + --border-color: var(--ion-color-gray-500); --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; @@ -47,8 +47,8 @@ */ @media (any-hover: hover) { :host(.select-fill-solid:hover) { - --background: #{$background-color-step-100}; - --border-color: #{$background-color-step-750}; + --background: var(--ion-color-gray-100); + --border-color: var(--ion-color-gray-750); } } @@ -58,7 +58,7 @@ */ :host(.select-fill-solid.select-expanded), :host(.select-fill-solid.has-focus) { - --background: #{$background-color-step-150}; + --background: var(--ion-color-gray-150); --border-color: var(--highlight-color); } diff --git a/core/src/components/select/select.md.vars.scss b/core/src/components/select/select.md.vars.scss index 3b466d495af..53016347b52 100644 --- a/core/src/components/select/select.md.vars.scss +++ b/core/src/components/select/select.md.vars.scss @@ -8,7 +8,7 @@ $select-md-icon-size: dynamic-font(13px); /// @prop - Color of the select icon -$select-md-icon-color: $text-color-step-500; +$select-md-icon-color: var(--ion-color-gray-500); /// @prop - The amount of whitespace to display on either side of the floating label $select-md-floating-label-padding: 4px; diff --git a/core/src/components/select/select.native.scss b/core/src/components/select/select.native.scss index 876fcb1579f..290618d7b8a 100644 --- a/core/src/components/select/select.native.scss +++ b/core/src/components/select/select.native.scss @@ -78,7 +78,7 @@ // ---------------------------------------------------------------- .select-bottom .helper-text { - color: $text-color-step-300; + color: var(--ion-color-gray-700); } // Select Text From cedab143c9234f8518af07a7404188300613ccfd Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 09:27:54 -0800 Subject: [PATCH 37/45] feat(textarea): use gray tokens --- .../components/textarea/test/validation/index.html | 2 -- .../src/components/textarea/textarea.md.outline.scss | 4 ++-- core/src/components/textarea/textarea.md.solid.scss | 12 ++++++------ core/src/components/textarea/textarea.native.scss | 4 ++-- 4 files changed, 10 insertions(+), 12 deletions(-) diff --git a/core/src/components/textarea/test/validation/index.html b/core/src/components/textarea/test/validation/index.html index 6f977a7d915..632a9f95e30 100644 --- a/core/src/components/textarea/test/validation/index.html +++ b/core/src/components/textarea/test/validation/index.html @@ -24,8 +24,6 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); - margin-top: 10px; margin-bottom: 5px; } diff --git a/core/src/components/textarea/textarea.md.outline.scss b/core/src/components/textarea/textarea.md.outline.scss index 5cb2c66f348..b928b880fbc 100644 --- a/core/src/components/textarea/textarea.md.outline.scss +++ b/core/src/components/textarea/textarea.md.outline.scss @@ -4,7 +4,7 @@ // ---------------------------------------------------------------- :host(.textarea-fill-outline) { - --border-color: #{$background-color-step-300}; + --border-color: var(--ion-color-gray-300); --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; @@ -33,7 +33,7 @@ */ @media (any-hover: hover) { :host(.textarea-fill-outline:hover) { - --border-color: #{$background-color-step-750}; + --border-color: var(--ion-color-gray-750); } } diff --git a/core/src/components/textarea/textarea.md.solid.scss b/core/src/components/textarea/textarea.md.solid.scss index 9d831daf0e0..35539a07fc8 100644 --- a/core/src/components/textarea/textarea.md.solid.scss +++ b/core/src/components/textarea/textarea.md.solid.scss @@ -4,8 +4,8 @@ // ---------------------------------------------------------------- :host(.textarea-fill-solid) { - --background: #{$background-color-step-50}; - --border-color: #{$background-color-step-500}; + --background: var(--ion-color-gray-50); + --border-color: var(--ion-color-gray-500); --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; @@ -46,8 +46,8 @@ */ @media (any-hover: hover) { :host(.textarea-fill-solid:hover) { - --background: #{$background-color-step-100}; - --border-color: #{$background-color-step-750}; + --background: var(--ion-color-gray-100); + --border-color: var(--ion-color-gray-750); } } @@ -56,8 +56,8 @@ * much darker on focus. */ :host(.textarea-fill-solid.has-focus) { - --background: #{$background-color-step-150}; - --border-color: #{$background-color-step-750}; + --background: var(--ion-color-gray-150); + --border-color: var(--ion-color-gray-750); } :host(.textarea-fill-solid) .textarea-wrapper { diff --git a/core/src/components/textarea/textarea.native.scss b/core/src/components/textarea/textarea.native.scss index b0d3c36ec2e..8aefaf81905 100644 --- a/core/src/components/textarea/textarea.native.scss +++ b/core/src/components/textarea/textarea.native.scss @@ -72,14 +72,14 @@ // ---------------------------------------------------------------- .textarea-bottom .helper-text { - color: globals.$text-color-step-300; + color: var(--ion-color-gray-700); } // Textarea Max Length Counter // ---------------------------------------------------------------- .textarea-bottom .counter { - color: globals.$text-color-step-300; + color: var(--ion-color-gray-700); padding-inline-start: 16px; } From 1fae45050a9edbe07f9f6cb01b5b827cde4e52bb Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 09:28:18 -0800 Subject: [PATCH 38/45] feat(toast): use gray tokens --- core/src/components/toast/toast.ios.vars.scss | 4 ++-- core/src/components/toast/toast.md.vars.scss | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/core/src/components/toast/toast.ios.vars.scss b/core/src/components/toast/toast.ios.vars.scss index 6200099d3d1..dd2cd381c34 100644 --- a/core/src/components/toast/toast.ios.vars.scss +++ b/core/src/components/toast/toast.ios.vars.scss @@ -9,7 +9,7 @@ $toast-ios-max-height: 478px; /// @prop - Background Color of the toast wrapper -$toast-ios-background-color: $background-color-step-50; +$toast-ios-background-color: var(--ion-color-gray-50); /// @prop - Background Color alpha of the toast wrapper when translucent $toast-ios-translucent-background-color-alpha: 0.8; @@ -21,7 +21,7 @@ $toast-ios-translucent-background-color: rgba($background-color-rgb, $toast-ios- $toast-ios-border-radius: 14px; /// @prop - Color of the toast title -$toast-ios-title-color: $text-color-step-150; +$toast-ios-title-color: var(--ion-color-gray-850); /// @prop - Font size of the toast title $toast-ios-header-font-weight: 500; diff --git a/core/src/components/toast/toast.md.vars.scss b/core/src/components/toast/toast.md.vars.scss index f0749a6f0eb..2e7ef2ee051 100644 --- a/core/src/components/toast/toast.md.vars.scss +++ b/core/src/components/toast/toast.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Background of the toast -$toast-md-background: $background-color-step-800; +$toast-md-background: var(--ion-color-gray-800); /// @prop - Box shadow of the toast $toast-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), @@ -14,7 +14,7 @@ $toast-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, $toast-md-font-size: dynamic-font(14px); /// @prop - Color of the toast -$toast-md-color: $text-color-step-950; +$toast-md-color: var(--ion-color-gray-50); /// @prop - Border radius of the toast wrapper $toast-md-border-radius: 4px; @@ -77,7 +77,7 @@ $toast-md-button-opacity-hover: 0.08; $toast-md-button-background-color-hover: ion-color(primary, base, $toast-md-button-opacity-hover); /// @prop - Text color of the cancel toast button -$toast-md-button-cancel-text-color: $text-color-step-900; +$toast-md-button-cancel-text-color: var(--ion-color-gray-100); /// @prop - Background color of the cancel toast button on hover $toast-md-button-cancel-background-color-hover: rgba($background-color-rgb, $toast-md-button-opacity-hover); From 6ea3c81bc0d2d972bbf5d51f10c65d8a78df04e2 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 09:28:40 -0800 Subject: [PATCH 39/45] feat(toggle): use gray tokens --- core/src/components/toggle/toggle.native.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/toggle/toggle.native.scss b/core/src/components/toggle/toggle.native.scss index c71397efddb..2e382e53a5d 100644 --- a/core/src/components/toggle/toggle.native.scss +++ b/core/src/components/toggle/toggle.native.scss @@ -42,7 +42,7 @@ } .toggle-bottom .helper-text { - color: $text-color-step-300; + color: var(--ion-color-gray-700); } // Input Label From 5be95260d6612364629c94d67c191048fb3cc52a Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 09:29:10 -0800 Subject: [PATCH 40/45] feat(ionic-swiper): use gray tokens --- core/src/css/ionic-swiper.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/css/ionic-swiper.scss b/core/src/css/ionic-swiper.scss index f87583dc417..41c26fc50ea 100644 --- a/core/src/css/ionic-swiper.scss +++ b/core/src/css/ionic-swiper.scss @@ -7,7 +7,7 @@ // These values are the same for iOS and MD // We just do not add a .md or .ios class beforehand // so the styles are easier to override by the user. - --bullet-background: $text-color-step-800; + --bullet-background: var(--ion-color-gray-200); --bullet-background-active: ion-color(primary, base); --progress-bar-background: rgba($text-color-rgb, 0.25); --progress-bar-background-active: ion-color(primary, shade); From e692469f3830d45aff62bdb4eddd7195ae055d05 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 09:29:36 -0800 Subject: [PATCH 41/45] refactor(angular): remove step tokens --- .../validation/input-validation/input-validation.component.scss | 1 - .../textarea-validation/textarea-validation.component.scss | 1 - 2 files changed, 2 deletions(-) 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..a01129c7fd2 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,6 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); 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..e79c88cddaf 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,6 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); margin-top: 10px; margin-bottom: 5px; } From fb011ccda626ddbe5a4784b46aff714207c92ed6 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 17:04:54 -0800 Subject: [PATCH 42/45] refactor(steps): update test page --- core/src/themes/native/test/steps/index.html | 245 ------------------- core/src/themes/test/steps/index.html | 0 2 files changed, 245 deletions(-) delete mode 100644 core/src/themes/native/test/steps/index.html create mode 100644 core/src/themes/test/steps/index.html 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 f074f57c1bd..00000000000 --- a/core/src/themes/native/test/steps/index.html +++ /dev/null @@ -1,245 +0,0 @@ - - - - - Themes - Steps - - - - - - - - - - - - - -
Background
-
Step 50
-
Step 100
-
Step 150
-
Step 200
-
Step 250
-
Step 300
-
Step 350
-
Step 400
-
Step 450
-
Step 500
-
Step 550
-
Step 600
-
Step 650
-
Step 700
-
Step 750
-
Step 800
-
Step 850
-
Step 900
-
Step 950
-
- -
Text
-
Step 50
-
Step 100
-
Step 150
-
Step 200
-
Step 250
-
Step 300
-
Step 350
-
Step 400
-
Step 450
-
Step 500
-
Step 550
-
Step 600
-
Step 650
-
Step 700
-
Step 750
-
Step 800
-
Step 850
-
Step 900
-
Step 950
- -

Gray

-
- - - - - - diff --git a/core/src/themes/test/steps/index.html b/core/src/themes/test/steps/index.html new file mode 100644 index 00000000000..e69de29bb2d From 527af98e48e06d2f37a2437c28c47907cca96b76 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 17:08:35 -0800 Subject: [PATCH 43/45] feat(many): use gray tokens --- core/src/themes/ios/dark.tokens.ts | 6 +- docs/sass-guidelines.md | 2 +- .../test/base/src/theme/variables.css | 76 ++++++++--------- .../react/test/base/src/theme/variables.css | 82 +++++++++---------- 4 files changed, 83 insertions(+), 83 deletions(-) diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts index 250aaf6de9c..217282fda54 100644 --- a/core/src/themes/ios/dark.tokens.ts +++ b/core/src/themes/ios/dark.tokens.ts @@ -69,9 +69,9 @@ export const darkTheme: DarkTheme = { paragraphTextColor: colors.gray['450']!, }, IonModal: { - background: 'var(--ion-background-color-step-100)', - toolbarBackground: 'var(--ion-background-color-step-150)', - toolbarBorderColor: 'var(--ion-background-color-step-250)', + background: 'var(--ion-color-gray-100)', + toolbarBackground: 'var(--ion-color-gray-150)', + toolbarBorderColor: 'var(--ion-color-gray-250)', handleBg: colors.gray['350']!, }, IonDatetime: { diff --git a/docs/sass-guidelines.md b/docs/sass-guidelines.md index ac0a91d728a..c3a64f6ce94 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-color-gray-100, #f9f9f9) ); ``` diff --git a/packages/react-router/test/base/src/theme/variables.css b/packages/react-router/test/base/src/theme/variables.css index 7bcbe5d6e2a..d853b6b3a92 100644 --- a/packages/react-router/test/base/src/theme/variables.css +++ b/packages/react-router/test/base/src/theme/variables.css @@ -159,25 +159,25 @@ 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-color-gray-50: #0d0d0d; + --ion-color-gray-100: #1a1a1a; + --ion-color-gray-150: #262626; + --ion-color-gray-200: #333333; + --ion-color-gray-250: #404040; + --ion-color-gray-300: #4d4d4d; + --ion-color-gray-350: #595959; + --ion-color-gray-400: #666666; + --ion-color-gray-450: #737373; + --ion-color-gray-500: #808080; + --ion-color-gray-550: #8c8c8c; + --ion-color-gray-600: #999999; + --ion-color-gray-650: #a6a6a6; + --ion-color-gray-700: #b3b3b3; + --ion-color-gray-750: #bfbfbf; + --ion-color-gray-800: #cccccc; + --ion-color-gray-850: #d9d9d9; + --ion-color-gray-900: #e6e6e6; + --ion-color-gray-950: #f2f2f2; --ion-toolbar-background: #0d0d0d; @@ -198,25 +198,25 @@ 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-color-gray-50: #1e1e1e; + --ion-color-gray-100: #2a2a2a; + --ion-color-gray-150: #363636; + --ion-color-gray-200: #414141; + --ion-color-gray-250: #4d4d4d; + --ion-color-gray-300: #595959; + --ion-color-gray-350: #656565; + --ion-color-gray-400: #717171; + --ion-color-gray-450: #7d7d7d; + --ion-color-gray-500: #898989; + --ion-color-gray-550: #949494; + --ion-color-gray-600: #a0a0a0; + --ion-color-gray-650: #acacac; + --ion-color-gray-700: #b8b8b8; + --ion-color-gray-750: #c4c4c4; + --ion-color-gray-800: #d0d0d0; + --ion-color-gray-850: #dbdbdb; + --ion-color-gray-900: #e7e7e7; + --ion-color-gray-950: #f3f3f3; --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..ea79b6d4eb4 100644 --- a/packages/react/test/base/src/theme/variables.css +++ b/packages/react/test/base/src/theme/variables.css @@ -159,25 +159,25 @@ 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-color-gray-50: #0d0d0d; + --ion-color-gray-100: #1a1a1a; + --ion-color-gray-150: #262626; + --ion-color-gray-200: #333333; + --ion-color-gray-250: #404040; + --ion-color-gray-300: #4d4d4d; + --ion-color-gray-350: #595959; + --ion-color-gray-400: #666666; + --ion-color-gray-450: #737373; + --ion-color-gray-500: #808080; + --ion-color-gray-550: #8c8c8c; + --ion-color-gray-600: #999999; + --ion-color-gray-650: #a6a6a6; + --ion-color-gray-700: #b3b3b3; + --ion-color-gray-750: #bfbfbf; + --ion-color-gray-800: #cccccc; + --ion-color-gray-850: #d9d9d9; + --ion-color-gray-900: #e6e6e6; + --ion-color-gray-950: #f2f2f2; --ion-item-background: #000000; @@ -185,9 +185,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-color-gray-100); + --ion-toolbar-background: var(--ion-color-gray-150); + --ion-toolbar-border-color: var(--ion-color-gray-250); } @@ -205,25 +205,25 @@ 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-color-gray-50: #1e1e1e; + --ion-color-gray-100: #2a2a2a; + --ion-color-gray-150: #363636; + --ion-color-gray-200: #414141; + --ion-color-gray-250: #4d4d4d; + --ion-color-gray-300: #595959; + --ion-color-gray-350: #656565; + --ion-color-gray-400: #717171; + --ion-color-gray-450: #7d7d7d; + --ion-color-gray-500: #898989; + --ion-color-gray-550: #949494; + --ion-color-gray-600: #a0a0a0; + --ion-color-gray-650: #acacac; + --ion-color-gray-700: #b8b8b8; + --ion-color-gray-750: #c4c4c4; + --ion-color-gray-800: #d0d0d0; + --ion-color-gray-850: #dbdbdb; + --ion-color-gray-900: #e7e7e7; + --ion-color-gray-950: #f3f3f3; --ion-item-background: #1e1e1e; From 8149f95463f9b31c9f7c83fcedc775e0cc94e760 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 17:10:04 -0800 Subject: [PATCH 44/45] test(steps): revert removal --- core/src/themes/test/steps/index.html | 89 +++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) diff --git a/core/src/themes/test/steps/index.html b/core/src/themes/test/steps/index.html index e69de29bb2d..36bdb937828 100644 --- a/core/src/themes/test/steps/index.html +++ b/core/src/themes/test/steps/index.html @@ -0,0 +1,89 @@ + + + + + Themes - Steps + + + + + + + + + + + + + + + Themes - Steps + + + + +

Gray

+
+ + + + + + From 10e091b529ed044cbf95e812fa197bc3be98f237 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 1 Dec 2025 17:30:57 -0800 Subject: [PATCH 45/45] chore(steps): run lint --- core/src/themes/test/steps/index.html | 54 +++++++++++++-------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/core/src/themes/test/steps/index.html b/core/src/themes/test/steps/index.html index 36bdb937828..3dfc868bc6c 100644 --- a/core/src/themes/test/steps/index.html +++ b/core/src/themes/test/steps/index.html @@ -50,39 +50,39 @@

Gray