From fc1233611107036da54e618e2def44070a80ec23 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 24 Mar 2026 13:57:44 -0700 Subject: [PATCH 1/5] feat(themes): remove deprecated color steps --- BREAKING.md | 7 + .../action-sheet/action-sheet.ios.vars.scss | 5 +- .../breadcrumb/breadcrumb.ios.vars.scss | 17 +- .../breadcrumb/breadcrumb.md.vars.scss | 14 +- .../breadcrumb/breadcrumb.vars.scss | 2 +- .../checkbox/test/validation/index.html | 2 +- .../datetime-button/datetime-button.scss | 2 +- core/src/components/datetime/datetime.md.scss | 2 +- .../components/datetime/datetime.native.scss | 2 +- .../input/test/validation/index.html | 2 +- core/src/components/modal/modal.native.scss | 2 +- core/src/components/picker/picker.ios.scss | 2 +- .../radio-group/test/validation/index.html | 2 +- core/src/components/range/range.ios.vars.scss | 2 +- .../refresher/refresher.ios.vars.scss | 2 +- .../refresher/refresher.md.vars.scss | 4 +- .../segment-button.ios.vars.scss | 2 +- .../select/test/validation/index.html | 2 +- .../textarea/test/validation/index.html | 2 +- .../toggle/test/validation/index.html | 2 +- core/src/css/palettes/dark.scss | 6 +- core/src/themes/ios/dark.tokens.ts | 3 - core/src/themes/ios/high-contrast.tokens.ts | 3 - core/src/themes/md/dark.tokens.ts | 2 - .../themes/md/high-contrast-dark.tokens.ts | 1 - core/src/themes/md/high-contrast.tokens.ts | 3 - .../native/native.theme.default.ios.scss | 21 +- .../native/native.theme.default.md.scss | 6 +- .../themes/native/native.theme.default.scss | 190 +++------------ .../native/test/css-variables/css/dark.css | 82 +++---- .../native/test/css-variables/css/oceanic.css | 40 ++-- core/src/themes/native/test/steps/index.html | 225 ------------------ core/src/themes/test/steps/index.html | 167 +++++++++++++ docs/sass-guidelines.md | 2 +- .../checkbox-validation.component.scss | 2 +- .../input-validation.component.scss | 2 +- .../radio-group-validation.component.scss | 2 +- .../select-validation.component.scss | 2 +- .../textarea-validation.component.scss | 2 +- .../toggle-validation.component.scss | 2 +- .../test/base/src/theme/variables.css | 76 +++--- .../react/test/base/src/theme/variables.css | 82 +++---- 42 files changed, 403 insertions(+), 595 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/BREAKING.md b/BREAKING.md index 4dde0c88e2b..203fd1c570f 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -14,12 +14,19 @@ This is a comprehensive list of the breaking changes introduced in the major ver ## Version 9.x +- [Global Styles](#version-9x-global-styles) - [Components](#version-9x-components) - [Button](#version-9x-button) - [Card](#version-9x-card) - [Chip](#version-9x-chip) - [Grid](#version-9x-grid) +

Global Styles

+ +

Color Steps

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

Components

Button

diff --git a/core/src/components/action-sheet/action-sheet.ios.vars.scss b/core/src/components/action-sheet/action-sheet.ios.vars.scss index 0d2302b7183..5f37df80fed 100644 --- a/core/src/components/action-sheet/action-sheet.ios.vars.scss +++ b/core/src/components/action-sheet/action-sheet.ios.vars.scss @@ -115,10 +115,7 @@ $action-sheet-ios-button-background: linear-gradient( $action-sheet-ios-button-background-activated: $text-color; /// @prop - Background color of the selected action sheet button -$action-sheet-ios-button-background-selected: var( - --ion-color-step-150, - var(--ion-background-color-step-150, $background-color) -); +$action-sheet-ios-button-background-selected: var(--ion-background-color-step-150, $background-color); /// @prop - Destructive text color of the action sheet button $action-sheet-ios-button-destructive-text-color: ion-color(danger, base); diff --git a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss index 0fda71c8aa7..40b89de08e7 100644 --- a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss @@ -4,25 +4,22 @@ // -------------------------------------------------- /// @prop - Color of the breadcrumb -$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665)); +$breadcrumb-ios-color: var(--ion-text-color-step-150, #2d4665); /// @prop - Color of the active breadcrumb $breadcrumb-ios-color-active: var(--ion-text-color, #03060b); /// @prop - Background color of the focused breadcrumb -$breadcrumb-ios-background-focused: var( - --ion-color-step-50, - var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7)) -); +$breadcrumb-ios-background-focused: var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7)); /// @prop - Color of the breadcrumb icon -$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3)); +$breadcrumb-ios-icon-color: var(--ion-text-color-step-600, #92a0b3); /// @prop - Color of the breadcrumb icon when active -$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39)); +$breadcrumb-ios-icon-color-active: var(--ion-text-color-step-150, #242d39); /// @prop - Color of the breadcrumb icon when focused -$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78)); +$breadcrumb-ios-icon-color-focused: var(--ion-text-color-step-250, #445b78); /// @prop - Color of the breadcrumb separator $breadcrumb-ios-separator-color: $breadcrumb-separator-color; @@ -31,7 +28,7 @@ $breadcrumb-ios-separator-color: $breadcrumb-separator-color; $breadcrumb-ios-indicator-color: $breadcrumb-ios-separator-color; /// @prop - Background color of the breadcrumb indicator -$breadcrumb-ios-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3)); +$breadcrumb-ios-indicator-background: var(--ion-background-color-step-100, #e9edf3); /// @prop - Background color of the breadcrumb indicator when focused -$breadcrumb-ios-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea)); +$breadcrumb-ios-indicator-background-focused: var(--ion-background-color-step-150, #d9e0ea); diff --git a/core/src/components/breadcrumb/breadcrumb.md.vars.scss b/core/src/components/breadcrumb/breadcrumb.md.vars.scss index 8c738a5e887..bdf6b893e2b 100644 --- a/core/src/components/breadcrumb/breadcrumb.md.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.md.vars.scss @@ -4,22 +4,22 @@ // -------------------------------------------------- /// @prop - Color of the breadcrumb -$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #677483)); +$breadcrumb-md-color: var(--ion-text-color-step-400, #677483); /// @prop - Color of the active breadcrumb $breadcrumb-md-color-active: var(--ion-text-color, #03060b); /// @prop - Color of the focused breadcrumb -$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e)); +$breadcrumb-md-color-focused: var(--ion-text-color-step-200, #35404e); /// @prop - Background color of the focused breadcrumb -$breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff)); +$breadcrumb-md-background-focused: var(--ion-background-color-step-50, #fff); /// @prop - Color of the breadcrumb icon -$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894)); +$breadcrumb-md-icon-color: var(--ion-text-color-step-450, #7d8894); /// @prop - Color of the breadcrumb icon when active -$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a)); +$breadcrumb-md-icon-color-active: var(--ion-text-color-step-150, #222d3a); /// @prop - Margin top of the breadcrumb separator $breadcrumb-md-separator-margin-top: -1px; @@ -40,7 +40,7 @@ $breadcrumb-md-separator-color: $breadcrumb-separator-color; $breadcrumb-md-indicator-color: $breadcrumb-md-separator-color; /// @prop - Background color of the breadcrumb indicator -$breadcrumb-md-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3)); +$breadcrumb-md-indicator-background: var(--ion-background-color-step-100, #eef1f3); /// @prop - Background color of the breadcrumb indicator when focused -$breadcrumb-md-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8)); +$breadcrumb-md-indicator-background-focused: var(--ion-background-color-step-150, #dfe5e8); diff --git a/core/src/components/breadcrumb/breadcrumb.vars.scss b/core/src/components/breadcrumb/breadcrumb.vars.scss index 4770b0b9e19..6f02bd81598 100644 --- a/core/src/components/breadcrumb/breadcrumb.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.vars.scss @@ -12,4 +12,4 @@ $breadcrumb-baseline-font-size: 16px; $breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size); /// @prop - Color of the breadcrumb separator -$breadcrumb-separator-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a)); +$breadcrumb-separator-color: var(--ion-text-color-step-450, #73849a); diff --git a/core/src/components/checkbox/test/validation/index.html b/core/src/components/checkbox/test/validation/index.html index e3f4bce5601..930ca862753 100644 --- a/core/src/components/checkbox/test/validation/index.html +++ b/core/src/components/checkbox/test/validation/index.html @@ -24,7 +24,7 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-text-color-step-400); margin-top: 10px; margin-bottom: 5px; diff --git a/core/src/components/datetime-button/datetime-button.scss b/core/src/components/datetime-button/datetime-button.scss index 6defd0da9be..45d89d797c8 100644 --- a/core/src/components/datetime-button/datetime-button.scss +++ b/core/src/components/datetime-button/datetime-button.scss @@ -23,7 +23,7 @@ border: none; - background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0)); + background: var(--ion-background-color-step-300, #edeef0); color: $text-color; diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss index 6d00afa3d00..4fb3adc7873 100644 --- a/core/src/components/datetime/datetime.md.scss +++ b/core/src/components/datetime/datetime.md.scss @@ -6,7 +6,7 @@ // -------------------------------------------------- :host { - --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff)); + --background: var(--ion-background-color-step-100, #ffffff); --title-color: #{current-color(contrast)}; } diff --git a/core/src/components/datetime/datetime.native.scss b/core/src/components/datetime/datetime.native.scss index e000e207057..acef961d207 100644 --- a/core/src/components/datetime/datetime.native.scss +++ b/core/src/components/datetime/datetime.native.scss @@ -93,7 +93,7 @@ @include globals.border-radius(8px); @include globals.padding(6px, 12px, 6px, 12px); - background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0)); + background: var(--ion-background-color-step-300, #edeef0); color: globals.$text-color; } diff --git a/core/src/components/input/test/validation/index.html b/core/src/components/input/test/validation/index.html index 2a6ad89e13f..a1b6b59aa22 100644 --- a/core/src/components/input/test/validation/index.html +++ b/core/src/components/input/test/validation/index.html @@ -24,7 +24,7 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-text-color-step-400); margin-top: 10px; margin-bottom: 5px; diff --git a/core/src/components/modal/modal.native.scss b/core/src/components/modal/modal.native.scss index b94d65d0cd9..8a8a06e6e5e 100644 --- a/core/src/components/modal/modal.native.scss +++ b/core/src/components/modal/modal.native.scss @@ -41,7 +41,7 @@ width: 36px; height: 5px; - background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be)); + background: var(--ion-background-color-step-350, #c0c0be); &::before { /** diff --git a/core/src/components/picker/picker.ios.scss b/core/src/components/picker/picker.ios.scss index f474efe997b..2be864ce686 100644 --- a/core/src/components/picker/picker.ios.scss +++ b/core/src/components/picker/picker.ios.scss @@ -18,5 +18,5 @@ } :host .picker-highlight { - background: var(--highlight-background, var(--ion-color-step-150, var(--ion-background-color-step-150, #eeeeef))); + background: var(--highlight-background, var(--ion-background-color-step-150, #eeeeef)); } diff --git a/core/src/components/radio-group/test/validation/index.html b/core/src/components/radio-group/test/validation/index.html index 49fdbf1ebbc..b3b7099ce5b 100644 --- a/core/src/components/radio-group/test/validation/index.html +++ b/core/src/components/radio-group/test/validation/index.html @@ -24,7 +24,7 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-text-color-step-400); margin-top: 10px; margin-bottom: 5px; diff --git a/core/src/components/range/range.ios.vars.scss b/core/src/components/range/range.ios.vars.scss index dace5a00686..fb088322f12 100644 --- a/core/src/components/range/range.ios.vars.scss +++ b/core/src/components/range/range.ios.vars.scss @@ -23,7 +23,7 @@ $range-ios-hit-height: $range-ios-slider-height; $range-ios-bar-height: 4px; /// @prop - Background of the range bar -$range-ios-bar-background-color: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6)); +$range-ios-bar-background-color: var(--ion-background-color-step-900, #e6e6e6); /// @prop - Border radius of the range bar $range-ios-bar-border-radius: 2px; diff --git a/core/src/components/refresher/refresher.ios.vars.scss b/core/src/components/refresher/refresher.ios.vars.scss index 3cb4a38f54b..000fcd4c8ed 100644 --- a/core/src/components/refresher/refresher.ios.vars.scss +++ b/core/src/components/refresher/refresher.ios.vars.scss @@ -7,7 +7,7 @@ $refresher-ios-icon-color: $text-color; $refresher-ios-text-color: $text-color; /// @prop - Color of the native refresher spinner -$refresher-ios-native-spinner-color: var(--ion-color-step-450, var(--ion-background-color-step-450, #747577)); +$refresher-ios-native-spinner-color: var(--ion-background-color-step-450, #747577); /// @prop - Width of the native refresher spinner $refresher-ios-native-spinner-width: 32px; diff --git a/core/src/components/refresher/refresher.md.vars.scss b/core/src/components/refresher/refresher.md.vars.scss index a27b0fcfb2f..19db4add4a2 100644 --- a/core/src/components/refresher/refresher.md.vars.scss +++ b/core/src/components/refresher/refresher.md.vars.scss @@ -10,10 +10,10 @@ $refresher-md-text-color: $text-color; $refresher-md-native-spinner-color: #{ion-color(primary, base)}; /// @prop - Border of the native refresher spinner -$refresher-md-native-spinner-border: 1px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #ececec)); +$refresher-md-native-spinner-border: 1px solid var(--ion-background-color-step-200, #ececec); /// @prop - Background of the native refresher spinner -$refresher-md-native-spinner-background: var(--ion-color-step-250, var(--ion-background-color-step-250, #ffffff)); +$refresher-md-native-spinner-background: var(--ion-background-color-step-250, #ffffff); /// @prop - Box shadow of the native refresher spinner $refresher-md-native-spinner-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1); diff --git a/core/src/components/segment-button/segment-button.ios.vars.scss b/core/src/components/segment-button/segment-button.ios.vars.scss index b505849fa34..0429fd0e629 100644 --- a/core/src/components/segment-button/segment-button.ios.vars.scss +++ b/core/src/components/segment-button/segment-button.ios.vars.scss @@ -13,7 +13,7 @@ $segment-button-ios-background-checked: $segment-button-ios-background; $segment-button-ios-color: $text-color; /// @prop - Background of the checked segment button indicator -$segment-button-ios-indicator-color: var(--ion-color-step-350, var(--ion-background-color-step-350, $background-color)); +$segment-button-ios-indicator-color: var(--ion-background-color-step-350, $background-color); /// @prop - Margin of the segment button $segment-button-ios-margin: 2px; diff --git a/core/src/components/select/test/validation/index.html b/core/src/components/select/test/validation/index.html index 74d0586bd77..19e3a2a1435 100644 --- a/core/src/components/select/test/validation/index.html +++ b/core/src/components/select/test/validation/index.html @@ -24,7 +24,7 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-text-color-step-400); margin-top: 10px; margin-bottom: 5px; diff --git a/core/src/components/textarea/test/validation/index.html b/core/src/components/textarea/test/validation/index.html index 6f977a7d915..4ebfc8b740f 100644 --- a/core/src/components/textarea/test/validation/index.html +++ b/core/src/components/textarea/test/validation/index.html @@ -24,7 +24,7 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-text-color-step-400); margin-top: 10px; margin-bottom: 5px; diff --git a/core/src/components/toggle/test/validation/index.html b/core/src/components/toggle/test/validation/index.html index 54932edeb08..64e4da3e030 100644 --- a/core/src/components/toggle/test/validation/index.html +++ b/core/src/components/toggle/test/validation/index.html @@ -24,7 +24,7 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-text-color-step-400); margin-top: 10px; margin-bottom: 5px; diff --git a/core/src/css/palettes/dark.scss b/core/src/css/palettes/dark.scss index 75e0611caf2..1d593e6bc0a 100644 --- a/core/src/css/palettes/dark.scss +++ b/core/src/css/palettes/dark.scss @@ -140,9 +140,9 @@ $colors: ( } & ion-modal { - --ion-background-color: var(--ion-color-step-100, var(--ion-background-color-step-100)); - --ion-toolbar-background: var(--ion-color-step-150, var(--ion-background-color-step-150)); - --ion-toolbar-border-color: var(--ion-color-step-250, var(--ion-background-color-step-250)); + --ion-background-color: var(--ion-background-color-step-100); + --ion-toolbar-background: var(--ion-background-color-step-150); + --ion-toolbar-border-color: var(--ion-background-color-step-250); } } diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts index 345cdef3a51..72172e50dd4 100644 --- a/core/src/themes/ios/dark.tokens.ts +++ b/core/src/themes/ios/dark.tokens.ts @@ -4,9 +4,6 @@ import type { DarkTheme } from '../themes.interfaces'; export const darkTheme: DarkTheme = { ...baseDarkTheme, - backgroundColor: '#000000', - textColor: '#ffffff', - backgroundColorStep: { 50: '#0d0d0d', 100: '#1a1a1a', diff --git a/core/src/themes/ios/high-contrast.tokens.ts b/core/src/themes/ios/high-contrast.tokens.ts index 96e90d79b83..2a99f95ef09 100644 --- a/core/src/themes/ios/high-contrast.tokens.ts +++ b/core/src/themes/ios/high-contrast.tokens.ts @@ -4,9 +4,6 @@ import type { HighContrastTheme } from '../themes.interfaces'; export const highContrastTheme: HighContrastTheme = { ...baseHighContrastTheme, - backgroundColor: '#ffffff', - textColor: '#000000', - backgroundColorStep: { 50: '#818181', 100: '#7a7a7a', diff --git a/core/src/themes/md/dark.tokens.ts b/core/src/themes/md/dark.tokens.ts index ef863643d5c..dbf6c2a166e 100644 --- a/core/src/themes/md/dark.tokens.ts +++ b/core/src/themes/md/dark.tokens.ts @@ -6,8 +6,6 @@ export const darkTheme: DarkTheme = { backgroundColor: '#121212', backgroundColorRgb: '18, 18, 18', - textColor: '#ffffff', - textColorRgb: '255, 255, 255', // TODO(FW-6864): Remove once IonToolbar themes are added toolbar: { diff --git a/core/src/themes/md/high-contrast-dark.tokens.ts b/core/src/themes/md/high-contrast-dark.tokens.ts index 0a0d9f93a76..ff693c3c788 100644 --- a/core/src/themes/md/high-contrast-dark.tokens.ts +++ b/core/src/themes/md/high-contrast-dark.tokens.ts @@ -5,7 +5,6 @@ export const highContrastDarkTheme: HighContrastDarkTheme = { ...baseHighContrastDarkTheme, backgroundColor: '#121212', - textColor: '#000000', // TODO(FW-6864): Remove once IonToolbar themes are added toolbar: { diff --git a/core/src/themes/md/high-contrast.tokens.ts b/core/src/themes/md/high-contrast.tokens.ts index 96e90d79b83..2a99f95ef09 100644 --- a/core/src/themes/md/high-contrast.tokens.ts +++ b/core/src/themes/md/high-contrast.tokens.ts @@ -4,9 +4,6 @@ import type { HighContrastTheme } from '../themes.interfaces'; export const highContrastTheme: HighContrastTheme = { ...baseHighContrastTheme, - backgroundColor: '#ffffff', - textColor: '#000000', - backgroundColorStep: { 50: '#818181', 100: '#7a7a7a', diff --git a/core/src/themes/native/native.theme.default.ios.scss b/core/src/themes/native/native.theme.default.ios.scss index aed51b26e13..f1624c51895 100644 --- a/core/src/themes/native/native.theme.default.ios.scss +++ b/core/src/themes/native/native.theme.default.ios.scss @@ -7,34 +7,25 @@ // iOS General Colors // -------------------------------------------------- $backdrop-ios-color: var(--ion-backdrop-color, #000); -$overlay-ios-background-color: var( - --ion-overlay-background-color, - var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9)) -); +$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-background-color-step-100, #f9f9f9)); // iOS Tabs & Tab bar // -------------------------------------------------- -$tabbar-ios-background: var( - --ion-tab-bar-background, - var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)) -); +$tabbar-ios-background: var(--ion-tab-bar-background, var(--ion-background-color-step-50, #f7f7f7)); $tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)); $tabbar-ios-border-color: var( --ion-tab-bar-border-color, - var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))) + var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2))) ); $tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-400); $tabbar-ios-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)); // iOS Toolbar // -------------------------------------------------- -$toolbar-ios-background: var( - --ion-toolbar-background, - var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)) -); +$toolbar-ios-background: var(--ion-toolbar-background, var(--ion-background-color-step-50, #f7f7f7)); $toolbar-ios-border-color: var( --ion-toolbar-border-color, - var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))) + var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2))) ); $toolbar-ios-color: var(--ion-toolbar-color, $text-color); @@ -43,7 +34,7 @@ $toolbar-ios-color: var(--ion-toolbar-color, $text-color); $item-ios-background: var(--ion-item-background, $background-color); $item-ios-border-color: var( --ion-item-border-color, - var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))) + var(--ion-border-color, var(--ion-background-color-step-250, #c8c7cc)) ); $item-ios-color: var(--ion-item-color, $text-color); diff --git a/core/src/themes/native/native.theme.default.md.scss b/core/src/themes/native/native.theme.default.md.scss index 285a52433b6..d136cea7c90 100644 --- a/core/src/themes/native/native.theme.default.md.scss +++ b/core/src/themes/native/native.theme.default.md.scss @@ -7,7 +7,7 @@ // Material Design General Colors // -------------------------------------------------- $backdrop-md-color: var(--ion-backdrop-color, #000); -$border-md-color: var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd))); +$border-md-color: var(--ion-border-color, var(--ion-background-color-step-150, #c1c4cd)); $overlay-md-background-color: var(--ion-overlay-background-color, var(--ion-background-color, #fff)); // Material Design Tabs & Tab bar @@ -16,7 +16,7 @@ $tabbar-md-background: var(--ion-tab-bar-background, $background-color); $tabbar-md-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)); $tabbar-md-border-color: var( --ion-tab-bar-border-color, - var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.07)))) + var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.07))) ); $tabbar-md-color: var(--ion-tab-bar-color, $text-color-step-350); $tabbar-md-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)); @@ -32,7 +32,7 @@ $toolbar-md-color: var(--ion-toolbar-color, var(--ion-text-color, #424242)); $item-md-background: var(--ion-item-background, $background-color); $item-md-border-color: var( --ion-item-border-color, - var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))) + var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13))) ); $item-md-color: var(--ion-item-color, $text-color); diff --git a/core/src/themes/native/native.theme.default.scss b/core/src/themes/native/native.theme.default.scss index db4819c8a94..1c34175baa8 100644 --- a/core/src/themes/native/native.theme.default.scss +++ b/core/src/themes/native/native.theme.default.scss @@ -26,158 +26,44 @@ $text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value); // For example, $text-color-step-XXX will be $text-color stepping towards $background-color, // but a $background-color-step-XXX will be $background-color stepping towards $text-color. -$background-color-step-50: var( - --ion-color-step-50, - var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%)) -); -$background-color-step-100: var( - --ion-color-step-100, - var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%)) -); -$background-color-step-150: var( - --ion-color-step-150, - var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%)) -); -$background-color-step-200: var( - --ion-color-step-200, - var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%)) -); -$background-color-step-250: var( - --ion-color-step-250, - var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%)) -); -$background-color-step-300: var( - --ion-color-step-300, - var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%)) -); -$background-color-step-350: var( - --ion-color-step-350, - var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%)) -); -$background-color-step-400: var( - --ion-color-step-400, - var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%)) -); -$background-color-step-450: var( - --ion-color-step-450, - var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%)) -); -$background-color-step-500: var( - --ion-color-step-500, - var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%)) -); -$background-color-step-550: var( - --ion-color-step-550, - var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%)) -); -$background-color-step-600: var( - --ion-color-step-600, - var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%)) -); -$background-color-step-650: var( - --ion-color-step-650, - var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%)) -); -$background-color-step-700: var( - --ion-color-step-700, - var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%)) -); -$background-color-step-750: var( - --ion-color-step-750, - var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%)) -); -$background-color-step-800: var( - --ion-color-step-800, - var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%)) -); -$background-color-step-850: var( - --ion-color-step-850, - var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%)) -); -$background-color-step-900: var( - --ion-color-step-900, - var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%)) -); -$background-color-step-950: var( - --ion-color-step-950, - var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%)) -); -$text-color-step-50: var( - --ion-color-step-950, - var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%)) -); -$text-color-step-100: var( - --ion-color-step-900, - var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%)) -); -$text-color-step-150: var( - --ion-color-step-850, - var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%)) -); -$text-color-step-200: var( - --ion-color-step-800, - var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%)) -); -$text-color-step-250: var( - --ion-color-step-750, - var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%)) -); -$text-color-step-300: var( - --ion-color-step-700, - var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%)) -); -$text-color-step-350: var( - --ion-color-step-650, - var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%)) -); -$text-color-step-400: var( - --ion-color-step-600, - var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%)) -); -$text-color-step-450: var( - --ion-color-step-550, - var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%)) -); -$text-color-step-500: var( - --ion-color-step-500, - var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%)) -); -$text-color-step-550: var( - --ion-color-step-450, - var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%)) -); -$text-color-step-600: var( - --ion-color-step-400, - var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%)) -); -$text-color-step-650: var( - --ion-color-step-350, - var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%)) -); -$text-color-step-700: var( - --ion-color-step-300, - var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%)) -); -$text-color-step-750: var( - --ion-color-step-250, - var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%)) -); -$text-color-step-800: var( - --ion-color-step-200, - var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%)) -); -$text-color-step-850: var( - --ion-color-step-150, - var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%)) -); -$text-color-step-900: var( - --ion-color-step-100, - var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%)) -); -$text-color-step-950: var( - --ion-color-step-50, - var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%)) -); +$background-color-step-50: var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%)); +$background-color-step-100: var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%)); +$background-color-step-150: var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%)); +$background-color-step-200: var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%)); +$background-color-step-250: var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%)); +$background-color-step-300: var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%)); +$background-color-step-350: var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%)); +$background-color-step-400: var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%)); +$background-color-step-450: var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%)); +$background-color-step-500: var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%)); +$background-color-step-550: var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%)); +$background-color-step-600: var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%)); +$background-color-step-650: var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%)); +$background-color-step-700: var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%)); +$background-color-step-750: var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%)); +$background-color-step-800: var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%)); +$background-color-step-850: var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%)); +$background-color-step-900: var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%)); +$background-color-step-950: var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%)); +$text-color-step-50: var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%)); +$text-color-step-100: var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%)); +$text-color-step-150: var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%)); +$text-color-step-200: var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%)); +$text-color-step-250: var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%)); +$text-color-step-300: var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%)); +$text-color-step-350: var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%)); +$text-color-step-400: var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%)); +$text-color-step-450: var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%)); +$text-color-step-500: var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%)); +$text-color-step-550: var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%)); +$text-color-step-600: var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%)); +$text-color-step-650: var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%)); +$text-color-step-700: var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%)); +$text-color-step-750: var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%)); +$text-color-step-800: var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%)); +$text-color-step-850: var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%)); +$text-color-step-900: var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%)); +$text-color-step-950: var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%)); // Default General Colors // -------------------------------------------------- diff --git a/core/src/themes/native/test/css-variables/css/dark.css b/core/src/themes/native/test/css-variables/css/dark.css index 6082882391f..7f4f03a770d 100644 --- a/core/src/themes/native/test/css-variables/css/dark.css +++ b/core/src/themes/native/test/css-variables/css/dark.css @@ -80,25 +80,25 @@ body { --ion-text-color: #ffffff; --ion-text-color-rgb: 255, 255, 255; - --ion-color-step-50: #0d0d0d; - --ion-color-step-100: #1a1a1a; - --ion-color-step-150: #262626; - --ion-color-step-200: #333333; - --ion-color-step-250: #404040; - --ion-color-step-300: #4d4d4d; - --ion-color-step-350: #595959; - --ion-color-step-400: #666666; - --ion-color-step-450: #737373; - --ion-color-step-500: #808080; - --ion-color-step-550: #8c8c8c; - --ion-color-step-600: #999999; - --ion-color-step-650: #a6a6a6; - --ion-color-step-700: #b3b3b3; - --ion-color-step-750: #bfbfbf; - --ion-color-step-800: #cccccc; - --ion-color-step-850: #d9d9d9; - --ion-color-step-900: #e6e6e6; - --ion-color-step-950: #f2f2f2; + --ion-background-color-step-50: #0d0d0d; + --ion-background-color-step-100: #1a1a1a; + --ion-background-color-step-150: #262626; + --ion-background-color-step-200: #333333; + --ion-background-color-step-250: #404040; + --ion-background-color-step-300: #4d4d4d; + --ion-background-color-step-350: #595959; + --ion-background-color-step-400: #666666; + --ion-background-color-step-450: #737373; + --ion-background-color-step-500: #808080; + --ion-background-color-step-550: #8c8c8c; + --ion-background-color-step-600: #999999; + --ion-background-color-step-650: #a6a6a6; + --ion-background-color-step-700: #b3b3b3; + --ion-background-color-step-750: #bfbfbf; + --ion-background-color-step-800: #cccccc; + --ion-background-color-step-850: #d9d9d9; + --ion-background-color-step-900: #e6e6e6; + --ion-background-color-step-950: #f2f2f2; --ion-item-background: #000000; @@ -106,9 +106,9 @@ body { } .ios ion-modal { - --ion-background-color: var(--ion-color-step-100); - --ion-toolbar-background: var(--ion-color-step-150); - --ion-toolbar-border-color: var(--ion-color-step-250); + --ion-background-color: var(--ion-background-color-step-100); + --ion-toolbar-background: var(--ion-background-color-step-150); + --ion-toolbar-border-color: var(--ion-background-color-step-250); } /* @@ -125,25 +125,25 @@ body { --ion-border-color: #222222; - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; + --ion-background-color-step-50: #1e1e1e; + --ion-background-color-step-100: #2a2a2a; + --ion-background-color-step-150: #363636; + --ion-background-color-step-200: #414141; + --ion-background-color-step-250: #4d4d4d; + --ion-background-color-step-300: #595959; + --ion-background-color-step-350: #656565; + --ion-background-color-step-400: #717171; + --ion-background-color-step-450: #7d7d7d; + --ion-background-color-step-500: #898989; + --ion-background-color-step-550: #949494; + --ion-background-color-step-600: #a0a0a0; + --ion-background-color-step-650: #acacac; + --ion-background-color-step-700: #b8b8b8; + --ion-background-color-step-750: #c4c4c4; + --ion-background-color-step-800: #d0d0d0; + --ion-background-color-step-850: #dbdbdb; + --ion-background-color-step-900: #e7e7e7; + --ion-background-color-step-950: #f3f3f3; --ion-item-background: #1e1e1e; diff --git a/core/src/themes/native/test/css-variables/css/oceanic.css b/core/src/themes/native/test/css-variables/css/oceanic.css index 81e6ca5172f..a5042eeb40a 100644 --- a/core/src/themes/native/test/css-variables/css/oceanic.css +++ b/core/src/themes/native/test/css-variables/css/oceanic.css @@ -96,24 +96,24 @@ --ion-text-color: #fff; --ion-text-color-rgb: 255,255,255; - --ion-color-step-50: #26363e; - --ion-color-step-100: #324048; - --ion-color-step-150: #3d4b52; - --ion-color-step-200: #49555d; - --ion-color-step-250: #546067; - --ion-color-step-300: #5f6b71; - --ion-color-step-350: #6b757b; - --ion-color-step-400: #768085; - --ion-color-step-450: #828a8f; - --ion-color-step-500: #8d959a; - --ion-color-step-550: #98a0a4; - --ion-color-step-600: #a4aaae; - --ion-color-step-650: #afb5b8; - --ion-color-step-700: #bbbfc2; - --ion-color-step-750: #c6cacc; - --ion-color-step-800: #d1d5d6; - --ion-color-step-850: #dddfe1; - --ion-color-step-900: #e8eaeb; - --ion-color-step-950: #f4f4f5; - --ion-color-step-1000: #fff; + --ion-background-color-step-50: #26363e; + --ion-background-color-step-100: #324048; + --ion-background-color-step-150: #3d4b52; + --ion-background-color-step-200: #49555d; + --ion-background-color-step-250: #546067; + --ion-background-color-step-300: #5f6b71; + --ion-background-color-step-350: #6b757b; + --ion-background-color-step-400: #768085; + --ion-background-color-step-450: #828a8f; + --ion-background-color-step-500: #8d959a; + --ion-background-color-step-550: #98a0a4; + --ion-background-color-step-600: #a4aaae; + --ion-background-color-step-650: #afb5b8; + --ion-background-color-step-700: #bbbfc2; + --ion-background-color-step-750: #c6cacc; + --ion-background-color-step-800: #d1d5d6; + --ion-background-color-step-850: #dddfe1; + --ion-background-color-step-900: #e8eaeb; + --ion-background-color-step-950: #f4f4f5; + --ion-background-color-step-1000: #fff; } diff --git a/core/src/themes/native/test/steps/index.html b/core/src/themes/native/test/steps/index.html deleted file mode 100644 index 3579469b36a..00000000000 --- a/core/src/themes/native/test/steps/index.html +++ /dev/null @@ -1,225 +0,0 @@ - - - - - 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
- - - - diff --git a/core/src/themes/test/steps/index.html b/core/src/themes/test/steps/index.html new file mode 100644 index 00000000000..1e7c3469cd3 --- /dev/null +++ b/core/src/themes/test/steps/index.html @@ -0,0 +1,167 @@ + + + + + Themes - Steps + + + + + + + + + + + + + + + + Themes - Steps + + + + +
+
+

Background

+
+
+ +
+

Text

+
+
+
+ + + + + + diff --git a/docs/sass-guidelines.md b/docs/sass-guidelines.md index ac0a91d728a..89a6aeb2898 100644 --- a/docs/sass-guidelines.md +++ b/docs/sass-guidelines.md @@ -201,7 +201,7 @@ $text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value); $backdrop-ios-color: var(--ion-backdrop-color, #000); $overlay-ios-background-color: var( --ion-overlay-background-color, - var(--ion-color-step-100, #f9f9f9) + var(--ion-background-color-step-100, #f9f9f9) ); ``` diff --git a/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.scss index d8b2a267e5a..01ce687c893 100644 --- a/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.scss +++ b/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.scss @@ -8,7 +8,7 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-text-color-step-400); margin-top: 10px; margin-bottom: 5px; } diff --git a/packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.scss index add228ccab1..522fc02f5e9 100644 --- a/packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.scss +++ b/packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.scss @@ -8,7 +8,7 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-text-color-step-400); margin-top: 10px; margin-bottom: 5px; } diff --git a/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.scss index add228ccab1..522fc02f5e9 100644 --- a/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.scss +++ b/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.scss @@ -8,7 +8,7 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-text-color-step-400); margin-top: 10px; margin-bottom: 5px; } diff --git a/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.scss index add228ccab1..522fc02f5e9 100644 --- a/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.scss +++ b/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.scss @@ -8,7 +8,7 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-text-color-step-400); margin-top: 10px; margin-bottom: 5px; } diff --git a/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.scss index 6462ef79f69..733af19d845 100644 --- a/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.scss +++ b/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.scss @@ -8,7 +8,7 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-text-color-step-400); margin-top: 10px; margin-bottom: 5px; } diff --git a/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.scss index add228ccab1..522fc02f5e9 100644 --- a/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.scss +++ b/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.scss @@ -8,7 +8,7 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-text-color-step-400); margin-top: 10px; margin-bottom: 5px; } diff --git a/packages/react-router/test/base/src/theme/variables.css b/packages/react-router/test/base/src/theme/variables.css index 7bcbe5d6e2a..0362c0780ac 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-background-color-step-50: #0d0d0d; + --ion-background-color-step-100: #1a1a1a; + --ion-background-color-step-150: #262626; + --ion-background-color-step-200: #333333; + --ion-background-color-step-250: #404040; + --ion-background-color-step-300: #4d4d4d; + --ion-background-color-step-350: #595959; + --ion-background-color-step-400: #666666; + --ion-background-color-step-450: #737373; + --ion-background-color-step-500: #808080; + --ion-background-color-step-550: #8c8c8c; + --ion-background-color-step-600: #999999; + --ion-background-color-step-650: #a6a6a6; + --ion-background-color-step-700: #b3b3b3; + --ion-background-color-step-750: #bfbfbf; + --ion-background-color-step-800: #cccccc; + --ion-background-color-step-850: #d9d9d9; + --ion-background-color-step-900: #e6e6e6; + --ion-background-color-step-950: #f2f2f2; --ion-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-background-color-step-50: #1e1e1e; + --ion-background-color-step-100: #2a2a2a; + --ion-background-color-step-150: #363636; + --ion-background-color-step-200: #414141; + --ion-background-color-step-250: #4d4d4d; + --ion-background-color-step-300: #595959; + --ion-background-color-step-350: #656565; + --ion-background-color-step-400: #717171; + --ion-background-color-step-450: #7d7d7d; + --ion-background-color-step-500: #898989; + --ion-background-color-step-550: #949494; + --ion-background-color-step-600: #a0a0a0; + --ion-background-color-step-650: #acacac; + --ion-background-color-step-700: #b8b8b8; + --ion-background-color-step-750: #c4c4c4; + --ion-background-color-step-800: #d0d0d0; + --ion-background-color-step-850: #dbdbdb; + --ion-background-color-step-900: #e7e7e7; + --ion-background-color-step-950: #f3f3f3; --ion-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..032656e7683 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-background-color-step-50: #0d0d0d; + --ion-background-color-step-100: #1a1a1a; + --ion-background-color-step-150: #262626; + --ion-background-color-step-200: #333333; + --ion-background-color-step-250: #404040; + --ion-background-color-step-300: #4d4d4d; + --ion-background-color-step-350: #595959; + --ion-background-color-step-400: #666666; + --ion-background-color-step-450: #737373; + --ion-background-color-step-500: #808080; + --ion-background-color-step-550: #8c8c8c; + --ion-background-color-step-600: #999999; + --ion-background-color-step-650: #a6a6a6; + --ion-background-color-step-700: #b3b3b3; + --ion-background-color-step-750: #bfbfbf; + --ion-background-color-step-800: #cccccc; + --ion-background-color-step-850: #d9d9d9; + --ion-background-color-step-900: #e6e6e6; + --ion-background-color-step-950: #f2f2f2; --ion-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-background-color-step-100); + --ion-toolbar-background: var(--ion-background-color-step-150); + --ion-toolbar-border-color: var(--ion-background-color-step-250); } @@ -205,25 +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-background-color-step-50: #1e1e1e; + --ion-background-color-step-100: #2a2a2a; + --ion-background-color-step-150: #363636; + --ion-background-color-step-200: #414141; + --ion-background-color-step-250: #4d4d4d; + --ion-background-color-step-300: #595959; + --ion-background-color-step-350: #656565; + --ion-background-color-step-400: #717171; + --ion-background-color-step-450: #7d7d7d; + --ion-background-color-step-500: #898989; + --ion-background-color-step-550: #949494; + --ion-background-color-step-600: #a0a0a0; + --ion-background-color-step-650: #acacac; + --ion-background-color-step-700: #b8b8b8; + --ion-background-color-step-750: #c4c4c4; + --ion-background-color-step-800: #d0d0d0; + --ion-background-color-step-850: #dbdbdb; + --ion-background-color-step-900: #e7e7e7; + --ion-background-color-step-950: #f3f3f3; --ion-item-background: #1e1e1e; From 85e81f8cc30333d746e76a226d14f3cf51a8185a Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 24 Mar 2026 14:02:34 -0700 Subject: [PATCH 2/5] chore(): run lint --- core/src/themes/test/steps/index.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/core/src/themes/test/steps/index.html b/core/src/themes/test/steps/index.html index 1e7c3469cd3..8d4a3885077 100644 --- a/core/src/themes/test/steps/index.html +++ b/core/src/themes/test/steps/index.html @@ -81,7 +81,8 @@

Text

if (!bodyStyles.getPropertyValue('--ion-background-color-step-50')) { const error = document.createElement('span'); - error.textContent = 'Background color variables not found for theme: ' + themeName + ' and palette: ' + paletteName; + error.textContent = + 'Background color variables not found for theme: ' + themeName + ' and palette: ' + paletteName; backgroundContainer.appendChild(error); return; @@ -123,7 +124,8 @@

Text

if (!bodyStyles.getPropertyValue('--ion-text-color-step-50')) { const error = document.createElement('span'); - error.textContent = 'Text color variables not found for theme: ' + themeName + ' and palette: ' + paletteName; + error.textContent = + 'Text color variables not found for theme: ' + themeName + ' and palette: ' + paletteName; textContainer.appendChild(error); return; From 28e8745ffb9730f54423c6c3adb9a96972f796cb Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 24 Mar 2026 16:00:22 -0700 Subject: [PATCH 3/5] fix(themes): use correct background and text stepped values --- core/src/themes/base/high-contrast.tokens.ts | 46 +------------------ core/src/themes/ios/dark.tokens.ts | 46 ++----------------- .../themes/ios/high-contrast-dark.tokens.ts | 4 ++ core/src/themes/ios/high-contrast.tokens.ts | 44 ------------------ core/src/themes/md/dark.tokens.ts | 46 ++----------------- .../themes/md/high-contrast-dark.tokens.ts | 24 ++-------- core/src/themes/md/high-contrast.tokens.ts | 44 ------------------ core/src/themes/test/steps/index.html | 2 +- core/src/themes/themes.interfaces.ts | 13 +++--- core/src/utils/theme.ts | 21 +++++++++ 10 files changed, 44 insertions(+), 246 deletions(-) diff --git a/core/src/themes/base/high-contrast.tokens.ts b/core/src/themes/base/high-contrast.tokens.ts index f56daef372d..c1287051e0f 100644 --- a/core/src/themes/base/high-contrast.tokens.ts +++ b/core/src/themes/base/high-contrast.tokens.ts @@ -1,4 +1,4 @@ -import { mix } from '../../utils/theme'; +import { mix, generateColorSteps } from '../../utils/theme'; import type { HighContrastTheme } from '../themes.interfaces'; const colors = { @@ -167,47 +167,5 @@ export const highContrastTheme: HighContrastTheme = { textColor: '#000000', textColorRgb: '0, 0, 0', - backgroundColorStep: { - 50: '#818181', - 100: '#7a7a7a', - 150: '#747474', - 200: '#6d6d6d', - 250: '#666666', - 300: '#5f5f5f', - 350: '#585858', - 400: '#525252', - 450: '#4b4b4b', - 500: '#444444', - 550: '#3d3d3d', - 600: '#363636', - 650: '#303030', - 700: '#292929', - 750: '#222222', - 800: '#1b1b1b', - 850: '#141414', - 900: '#0e0e0e', - 950: '#070707', - }, - - textColorStep: { - 50: '#070707', - 100: '#0e0e0e', - 150: '#141414', - 200: '#1b1b1b', - 250: '#222222', - 300: '#292929', - 350: '#303030', - 400: '#363636', - 450: '#3d3d3d', - 500: '#444444', - 550: '#4b4b4b', - 600: '#525252', - 650: '#585858', - 700: '#5f5f5f', - 750: '#666666', - 800: '#6d6d6d', - 850: '#747474', - 900: '#7a7a7a', - 950: '#818181', - }, + textColorStep: generateColorSteps('#888888', '#000000'), }; diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts index 72172e50dd4..5f481d8bb97 100644 --- a/core/src/themes/ios/dark.tokens.ts +++ b/core/src/themes/ios/dark.tokens.ts @@ -1,52 +1,12 @@ +import { generateColorSteps } from '../../utils/theme'; import { darkTheme as baseDarkTheme } from '../base/dark.tokens'; import type { DarkTheme } from '../themes.interfaces'; export const darkTheme: DarkTheme = { ...baseDarkTheme, - backgroundColorStep: { - 50: '#0d0d0d', - 100: '#1a1a1a', - 150: '#262626', - 200: '#333333', - 250: '#404040', - 300: '#4d4d4d', - 350: '#595959', - 400: '#666666', - 450: '#737373', - 500: '#808080', - 550: '#8c8c8c', - 600: '#999999', - 650: '#a6a6a6', - 700: '#b3b3b3', - 750: '#bfbfbf', - 800: '#cccccc', - 850: '#d9d9d9', - 900: '#e6e6e6', - 950: '#f2f2f2', - }, - - textColorStep: { - 50: '#f2f2f2', - 100: '#e6e6e6', - 150: '#d9d9d9', - 200: '#cccccc', - 250: '#bfbfbf', - 300: '#b3b3b3', - 350: '#a6a6a6', - 400: '#999999', - 450: '#8c8c8c', - 500: '#808080', - 550: '#737373', - 600: '#666666', - 650: '#595959', - 700: '#4d4d4d', - 750: '#404040', - 800: '#333333', - 850: '#262626', - 900: '#1a1a1a', - 950: '#0d0d0d', - }, + backgroundColorStep: generateColorSteps('#000000', '#ffffff'), + textColorStep: generateColorSteps('#ffffff', '#000000'), components: { IonCard: { diff --git a/core/src/themes/ios/high-contrast-dark.tokens.ts b/core/src/themes/ios/high-contrast-dark.tokens.ts index 0a5c1bba117..ceb92870bd4 100644 --- a/core/src/themes/ios/high-contrast-dark.tokens.ts +++ b/core/src/themes/ios/high-contrast-dark.tokens.ts @@ -1,6 +1,10 @@ +import { generateColorSteps } from '../../utils/theme'; import { highContrastDarkTheme as baseHighContrastDarkTheme } from '../base/high-contrast-dark.tokens'; import type { HighContrastDarkTheme } from '../themes.interfaces'; export const highContrastDarkTheme: HighContrastDarkTheme = { ...baseHighContrastDarkTheme, + + backgroundColorStep: generateColorSteps('#ffffff', '#000000'), + textColorStep: generateColorSteps('#888888', '#ffffff'), }; diff --git a/core/src/themes/ios/high-contrast.tokens.ts b/core/src/themes/ios/high-contrast.tokens.ts index 2a99f95ef09..90bf5c40c6b 100644 --- a/core/src/themes/ios/high-contrast.tokens.ts +++ b/core/src/themes/ios/high-contrast.tokens.ts @@ -3,48 +3,4 @@ import type { HighContrastTheme } from '../themes.interfaces'; export const highContrastTheme: HighContrastTheme = { ...baseHighContrastTheme, - - backgroundColorStep: { - 50: '#818181', - 100: '#7a7a7a', - 150: '#747474', - 200: '#6d6d6d', - 250: '#666666', - 300: '#5f5f5f', - 350: '#585858', - 400: '#525252', - 450: '#4b4b4b', - 500: '#444444', - 550: '#3d3d3d', - 600: '#363636', - 650: '#303030', - 700: '#292929', - 750: '#222222', - 800: '#1b1b1b', - 850: '#141414', - 900: '#0e0e0e', - 950: '#070707', - }, - - textColorStep: { - 50: '#070707', - 100: '#0e0e0e', - 150: '#141414', - 200: '#1b1b1b', - 250: '#222222', - 300: '#292929', - 350: '#303030', - 400: '#363636', - 450: '#3d3d3d', - 500: '#444444', - 550: '#4b4b4b', - 600: '#525252', - 650: '#585858', - 700: '#5f5f5f', - 750: '#666666', - 800: '#6d6d6d', - 850: '#747474', - 900: '#7a7a7a', - 950: '#818181', - }, }; diff --git a/core/src/themes/md/dark.tokens.ts b/core/src/themes/md/dark.tokens.ts index dbf6c2a166e..7c74da3ef29 100644 --- a/core/src/themes/md/dark.tokens.ts +++ b/core/src/themes/md/dark.tokens.ts @@ -1,3 +1,4 @@ +import { generateColorSteps } from '../../utils/theme'; import { darkTheme as baseDarkTheme } from '../base/dark.tokens'; import type { DarkTheme } from '../themes.interfaces'; @@ -12,49 +13,8 @@ export const darkTheme: DarkTheme = { background: '#1f1f1f', }, - backgroundColorStep: { - 50: '#1e1e1e', - 100: '#2a2a2a', - 150: '#363636', - 200: '#414141', - 250: '#4d4d4d', - 300: '#595959', - 350: '#656565', - 400: '#717171', - 450: '#7d7d7d', - 500: '#898989', - 550: '#949494', - 600: '#a0a0a0', - 650: '#acacac', - 700: '#b8b8b8', - 750: '#c4c4c4', - 800: '#d0d0d0', - 850: '#dbdbdb', - 900: '#e7e7e7', - 950: '#f3f3f3', - }, - - textColorStep: { - 50: '#f3f3f3', - 100: '#e7e7e7', - 150: '#dbdbdb', - 200: '#d0d0d0', - 250: '#c4c4c4', - 300: '#b8b8b8', - 350: '#acacac', - 400: '#a0a0a0', - 450: '#949494', - 500: '#898989', - 550: '#7d7d7d', - 600: '#717171', - 650: '#656565', - 700: '#595959', - 750: '#4d4d4d', - 800: '#414141', - 850: '#363636', - 900: '#2a2a2a', - 950: '#1e1e1e', - }, + backgroundColorStep: generateColorSteps('#121212', '#ffffff'), + textColorStep: generateColorSteps('#ffffff', '#121212'), components: { IonCard: { diff --git a/core/src/themes/md/high-contrast-dark.tokens.ts b/core/src/themes/md/high-contrast-dark.tokens.ts index ff693c3c788..19ef3f5b4d0 100644 --- a/core/src/themes/md/high-contrast-dark.tokens.ts +++ b/core/src/themes/md/high-contrast-dark.tokens.ts @@ -1,3 +1,4 @@ +import { generateColorSteps } from '../../utils/theme'; import { highContrastDarkTheme as baseHighContrastDarkTheme } from '../base/high-contrast-dark.tokens'; import type { HighContrastDarkTheme } from '../themes.interfaces'; @@ -11,25 +12,6 @@ export const highContrastDarkTheme: HighContrastDarkTheme = { background: '#1f1f1f', }, - backgroundColorStep: { - 50: '#1e1e1e', - 100: '#2a2a2a', - 150: '#363636', - 200: '#414141', - 250: '#4d4d4d', - 300: '#595959', - 350: '#656565', - 400: '#717171', - 450: '#7d7d7d', - 500: '#898989', - 550: '#949494', - 600: '#a0a0a0', - 650: '#acacac', - 700: '#b8b8b8', - 750: '#c4c4c4', - 800: '#d0d0d0', - 850: '#dbdbdb', - 900: '#e7e7e7', - 950: '#f3f3f3', - }, + backgroundColorStep: generateColorSteps('#ffffff', '#121212'), + textColorStep: generateColorSteps('#888888', '#ffffff'), }; diff --git a/core/src/themes/md/high-contrast.tokens.ts b/core/src/themes/md/high-contrast.tokens.ts index 2a99f95ef09..90bf5c40c6b 100644 --- a/core/src/themes/md/high-contrast.tokens.ts +++ b/core/src/themes/md/high-contrast.tokens.ts @@ -3,48 +3,4 @@ import type { HighContrastTheme } from '../themes.interfaces'; export const highContrastTheme: HighContrastTheme = { ...baseHighContrastTheme, - - backgroundColorStep: { - 50: '#818181', - 100: '#7a7a7a', - 150: '#747474', - 200: '#6d6d6d', - 250: '#666666', - 300: '#5f5f5f', - 350: '#585858', - 400: '#525252', - 450: '#4b4b4b', - 500: '#444444', - 550: '#3d3d3d', - 600: '#363636', - 650: '#303030', - 700: '#292929', - 750: '#222222', - 800: '#1b1b1b', - 850: '#141414', - 900: '#0e0e0e', - 950: '#070707', - }, - - textColorStep: { - 50: '#070707', - 100: '#0e0e0e', - 150: '#141414', - 200: '#1b1b1b', - 250: '#222222', - 300: '#292929', - 350: '#303030', - 400: '#363636', - 450: '#3d3d3d', - 500: '#444444', - 550: '#4b4b4b', - 600: '#525252', - 650: '#585858', - 700: '#5f5f5f', - 750: '#666666', - 800: '#6d6d6d', - 850: '#747474', - 900: '#7a7a7a', - 950: '#818181', - }, }; diff --git a/core/src/themes/test/steps/index.html b/core/src/themes/test/steps/index.html index 8d4a3885077..6657fb483d2 100644 --- a/core/src/themes/test/steps/index.html +++ b/core/src/themes/test/steps/index.html @@ -88,7 +88,7 @@

Text

return; } - for (let i = 50; i < 950; i += 50) { + for (let i = 50; i <= 950; i += 50) { const backgroundColor = `--ion-background-color-step-${i}`; const colorValue = bodyStyles.getPropertyValue(backgroundColor).trim(); diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts index dd236fff88b..f5f0b96c184 100644 --- a/core/src/themes/themes.interfaces.ts +++ b/core/src/themes/themes.interfaces.ts @@ -11,12 +11,8 @@ export type BaseTheme = { backgroundColorRgb?: string; textColor?: string; textColorRgb?: string; - backgroundColorStep?: { - [key: string]: string; - }; - textColorStep?: { - [key: string]: string; - }; + backgroundColorStep?: NumberStringKeys; + textColorStep?: NumberStringKeys; // TODO(FW-6864): Remove once IonToolbar themes are added toolbar?: any; @@ -303,3 +299,8 @@ export type IonPadding = { bottom?: string | number; start?: string | number; }; + +export type NumberStringKeys = { + // Enforce keys are strings of numbers (like 50, '50', etc.) + [K in number as `${K}`]?: string; +}; diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts index 3653610250e..c457ab45404 100644 --- a/core/src/utils/theme.ts +++ b/core/src/utils/theme.ts @@ -1,6 +1,7 @@ import { printIonWarning } from '@utils/logging'; import type { Color, CssClassMap } from '../interface'; +import type { NumberStringKeys } from '../themes/themes.interfaces'; import { deepMerge } from './helpers'; @@ -633,3 +634,23 @@ export function currentColor(variation: string, alpha: number | string | null = export function clamp(min: number | string, val: number | string, max: number | string): string { return `clamp(${min}, ${val}, ${max})`; } + +/** + * Generates a series of color steps between a base color and a mix color. + * + * @param baseColor Base color (e.g. `'#0054e9'`) + * @param mixColor Color to mix in (e.g. `'#000000'` or `'#fff'`) + * + * @returns An object containing the generated color steps + */ +export const generateColorSteps = (baseColor: string, mixColor: string): NumberStringKeys => { + const colorSteps: NumberStringKeys = {}; + + for (let step = 50; step <= 950; step += 50) { + const weight = `${step / 10}%`; + + colorSteps[`${step}`] = mix(baseColor, mixColor, weight); + } + + return colorSteps; +}; From d89531a1d6b794c4daa9f4161d93cbdb5a968f04 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 25 Mar 2026 11:19:24 -0700 Subject: [PATCH 4/5] fix(themes): add text steps --- .../native/test/css-variables/css/dark.css | 40 +++++++++++++++++++ .../native/test/css-variables/css/oceanic.css | 21 ++++++++++ .../native/test/css-variables/index.html | 2 +- .../test/base/src/theme/variables.css | 40 +++++++++++++++++++ .../react/test/base/src/theme/variables.css | 40 +++++++++++++++++++ 5 files changed, 142 insertions(+), 1 deletion(-) diff --git a/core/src/themes/native/test/css-variables/css/dark.css b/core/src/themes/native/test/css-variables/css/dark.css index 7f4f03a770d..c420eb638c3 100644 --- a/core/src/themes/native/test/css-variables/css/dark.css +++ b/core/src/themes/native/test/css-variables/css/dark.css @@ -100,6 +100,26 @@ body { --ion-background-color-step-900: #e6e6e6; --ion-background-color-step-950: #f2f2f2; + --ion-text-color-step-50: #f2f2f2; + --ion-text-color-step-100: #e6e6e6; + --ion-text-color-step-150: #d9d9d9; + --ion-text-color-step-200: #cccccc; + --ion-text-color-step-250: #bfbfbf; + --ion-text-color-step-300: #b3b3b3; + --ion-text-color-step-350: #a6a6a6; + --ion-text-color-step-400: #999999; + --ion-text-color-step-450: #8c8c8c; + --ion-text-color-step-500: #808080; + --ion-text-color-step-550: #737373; + --ion-text-color-step-600: #666666; + --ion-text-color-step-650: #595959; + --ion-text-color-step-700: #4d4d4d; + --ion-text-color-step-750: #404040; + --ion-text-color-step-800: #333333; + --ion-text-color-step-850: #262626; + --ion-text-color-step-900: #1a1a1a; + --ion-text-color-step-950: #0d0d0d; + --ion-item-background: #000000; --ion-card-background: #1c1c1d; @@ -145,6 +165,26 @@ body { --ion-background-color-step-900: #e7e7e7; --ion-background-color-step-950: #f3f3f3; + --ion-text-color-step-50: #f3f3f3; + --ion-text-color-step-100: #e7e7e7; + --ion-text-color-step-150: #dbdbdb; + --ion-text-color-step-200: #d0d0d0; + --ion-text-color-step-250: #c4c4c4; + --ion-text-color-step-300: #b8b8b8; + --ion-text-color-step-350: #acacac; + --ion-text-color-step-400: #a0a0a0; + --ion-text-color-step-450: #949494; + --ion-text-color-step-500: #898989; + --ion-text-color-step-550: #7d7d7d; + --ion-text-color-step-600: #717171; + --ion-text-color-step-650: #656565; + --ion-text-color-step-700: #595959; + --ion-text-color-step-750: #4d4d4d; + --ion-text-color-step-800: #414141; + --ion-text-color-step-850: #363636; + --ion-text-color-step-900: #2a2a2a; + --ion-text-color-step-950: #1e1e1e; + --ion-item-background: #1e1e1e; --ion-toolbar-background: #1f1f1f; diff --git a/core/src/themes/native/test/css-variables/css/oceanic.css b/core/src/themes/native/test/css-variables/css/oceanic.css index a5042eeb40a..046e0265c85 100644 --- a/core/src/themes/native/test/css-variables/css/oceanic.css +++ b/core/src/themes/native/test/css-variables/css/oceanic.css @@ -116,4 +116,25 @@ --ion-background-color-step-900: #e8eaeb; --ion-background-color-step-950: #f4f4f5; --ion-background-color-step-1000: #fff; + + --ion-text-color-step-50: #fff; + --ion-text-color-step-100: #f4f4f5; + --ion-text-color-step-150: #e8eaeb; + --ion-text-color-step-200: #dddfe1; + --ion-text-color-step-250: #d1d5d6; + --ion-text-color-step-300: #c6cacc; + --ion-text-color-step-350: #bbbfc2; + --ion-text-color-step-400: #afb5b8; + --ion-text-color-step-450: #a4aaae; + --ion-text-color-step-500: #98a0a4; + --ion-text-color-step-550: #8d959a; + --ion-text-color-step-600: #828a8f; + --ion-text-color-step-650: #768085; + --ion-text-color-step-700: #6b757b; + --ion-text-color-step-750: #5f6b71; + --ion-text-color-step-800: #546067; + --ion-text-color-step-850: #49555d; + --ion-text-color-step-900: #3d4b52; + --ion-text-color-step-950: #324048; + --ion-text-color-step-1000: #26363e; } diff --git a/core/src/themes/native/test/css-variables/index.html b/core/src/themes/native/test/css-variables/index.html index b7c2b9990de..a3dddf801e9 100644 --- a/core/src/themes/native/test/css-variables/index.html +++ b/core/src/themes/native/test/css-variables/index.html @@ -13,7 +13,7 @@ - +