feat(tokens): add gray colors

core/scripts/testing/scripts.js

@@ -87,11 +87,15 @@ const DEFAULT_THEME = 'md';
    * Values can be `light`, `dark`, `high-contrast`,
    * or `high-contrast-dark`. Default to `light` for tests.
    */
-  const paletteQuery = window.location.search.match(/palette=([a-z]+)/);
-  const paletteHash = window.location.hash.match(/palette=([a-z]+)/);
+  const configDarkMode = window.Ionic?.config?.customTheme?.palette?.dark?.enabled === 'always' ? 'dark' : null;
+  const configHighContrastMode = window.Ionic?.config?.customTheme?.palette?.highContrast?.enabled === 'always' ? 'high-contrast' : null;
+  const configHighContrastDarkMode = window.Ionic?.config?.customTheme?.palette?.highContrastDark?.enabled === 'always' ? 'high-contrast-dark' : null;
+  const configPalette = configDarkMode || configHighContrastMode || configHighContrastDarkMode;
+  const paletteQuery = window.location.search.match(/palette=([a-z-]+)/);
+  const paletteHash = window.location.hash.match(/palette=([a-z-]+)/);
   const darkClass = document.body?.classList.contains('ion-palette-dark') ? 'dark' : null;
 
-  const paletteName = paletteQuery?.[1] || paletteHash?.[1] || darkClass || 'light';
+  const paletteName = configPalette || paletteQuery?.[1] || paletteHash?.[1] || darkClass || 'light';
 
   // Load theme tokens if the theme is valid
   const validThemes = ['ionic', 'ios', 'md'];
@@ -111,8 +115,15 @@ const DEFAULT_THEME = 'md';
 
       // If a specific palette is requested, modify the palette structure
       // to set the enabled property to 'always'
+      // TODO(FW-4004): Implement dark mode
       if (paletteName === 'dark' && theme.palette?.dark) {
         theme.palette.dark.enabled = 'always';
+      // TODO(FW-4005): Implement high contrast mode
+      } else if (paletteName === 'high-contrast' && theme.palette?.highContrast) {
+        theme.palette.highContrast.enabled = 'always';
+      // TODO(FW-4005): Implement high contrast dark mode
+      } else if (paletteName === 'high-contrast-dark' && theme.palette?.highContrastDark) {
+        theme.palette.highContrastDark.enabled = 'always';
       }
 
       // Apply the theme tokens to Ionic config

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-text-850);
   --color: #{$action-sheet-ios-title-color};
 
   text-align: $action-sheet-ios-text-align;

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-text-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-components-ion-action-sheet-button-bg-selected);
 
 /// @prop - Destructive text color of the action sheet button
 $action-sheet-ios-button-destructive-text-color: ion-color(danger, base);

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-text-850);
 
 /// @prop - Font size of the action sheet button
 $action-sheet-md-button-font-size: dynamic-font(16px);

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-text-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;

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-text-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-text-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-text-850);
 
 /// @prop - Font size of the label for the checkbox in the alert
 $alert-md-checkbox-label-font-size: dynamic-font(16px);

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 {

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);

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);

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);

core/src/components/button/button.common.scss

@@ -293,7 +293,7 @@ ion-ripple-effect {
 
 :host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
   background: #{var(--ion-toolbar-color, var(--background))};
-  color: #{var(--ion-toolbar-background, var(--color))};
+  color: #{var(--ion-toolbar-background, var(--ion-components-ion-toolbar-bg, (var(--color))))};
 }
 
 // Button Badge

core/src/components/button/button.ios.scss

@@ -291,5 +291,5 @@
 
 :host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
   background: var(--ion-toolbar-color, var(--color));
-  color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
+  color: var(--ion-components-ion-toolbar-activated-button-color);
 }

core/src/components/button/button.ios.vars.scss

@@ -118,3 +118,5 @@ $button-ios-clear-opacity-hover: 0.6;
 
 /// @prop - Font weight of the strong button
 $button-ios-strong-font-weight: 600;
+
+$test: $item-ios-background;

core/src/components/button/button.md.scss

@@ -240,6 +240,6 @@
 // --------------------------------------------------
 
 :host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
-  background: var(--ion-toolbar-background, var(--color));
+  background: var(--ion-components-ion-toolbar-activated-bg);
   color: #{var(--ion-toolbar-color, var(--background), ion-color(primary, contrast))};
 }

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-text-600);

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-text-550);

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-text-850);

core/src/components/checkbox/checkbox.native.scss

@@ -82,7 +82,7 @@
 }
 
 .checkbox-bottom .helper-text {
-  color: $text-color-step-300;
+  color: var(--ion-color-text-700);
 }
 
 // Label Placement - Start

core/src/components/checkbox/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;
       }

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-text-600);
 }

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;
 

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-text-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-text-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-text-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),

core/src/components/datetime/datetime.ios.vars.scss

@@ -3,8 +3,8 @@
 // iOS Datetime
 // --------------------------------------------------
 
-/// @prop - Border color for dividers between header and footer
-$datetime-ios-border-color: 0.55px solid globals.$background-color-step-200;
+/// @prop - Border for dividers between header and footer
+$datetime-ios-border: 0.55px solid var(--ion-color-gray-200);
 
 /// @prop - Padding for content
 $datetime-ios-padding: 16px;