feat(tokens): change background step naming

thetaPC · thetaPC · commit 606b577e56f6 · 2026-02-27T16:35:08.000-08:00
diff --git a/core/src/components/alert/alert.ios.vars.scss b/core/src/components/alert/alert.ios.vars.scss
@@ -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: $gray-color-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
@@ -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: $gray-color-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: $gray-color-550;
 
 /// @prop - Border color of the alert radio when on
 $alert-md-radio-border-color-on: $alert-md-button-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: $gray-color-550;
 
 /// @prop - Border color of the checkbox in the alert when on
 $alert-md-checkbox-border-color-on: $alert-md-button-text-color;
diff --git 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: $gray-color-100;
 }
 
 .alert-button-inner {
diff --git a/core/src/components/datetime/datetime.ios.vars.scss b/core/src/components/datetime/datetime.ios.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @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: 0.55px solid globals.$gray-color-200;
 
 /// @prop - Padding for content
 $datetime-ios-padding: 16px;
diff --git 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: #{$gray-color-300};
 }
diff --git 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: #{$gray-color-150};
   --highlight-color-focused: #{ion-color(primary, base)};
   --highlight-color-valid: #{ion-color(success, base)};
   --highlight-color-invalid: #{ion-color(danger, base)};
@@ -83,8 +83,8 @@
 }
 
 :host(.input-otp-fill-solid) {
-  --border-color: #{$background-color-step-50};
-  --background: #{$background-color-step-50};
+  --border-color: #{$gray-color-50};
+  --background: #{$gray-color-50};
 }
 
 // States
@@ -95,18 +95,18 @@
 }
 
 :host(.input-otp-fill-outline.input-otp-disabled) {
-  --background: #{$background-color-step-50};
-  --border-color: #{$background-color-step-100};
+  --background: #{$gray-color-50};
+  --border-color: #{$gray-color-100};
 }
 
 :host(.input-otp-fill-outline.input-otp-readonly) {
-  --background: #{$background-color-step-50};
+  --background: #{$gray-color-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: #{$gray-color-100};
+  --background: #{$gray-color-100};
 }
 
 // Colors
diff --git 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: #{$gray-color-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: #{$gray-color-750};
   }
 }
 
diff --git 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: #{$gray-color-50};
+  --border-color: #{$gray-color-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: #{$gray-color-100};
+    --border-color: #{$gray-color-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: #{$gray-color-150};
+  --border-color: #{$gray-color-750};
 }
 
 :host(.input-fill-solid) .input-wrapper {
diff --git a/core/src/components/item-divider/item-divider.ios.vars.scss b/core/src/components/item-divider/item-divider.ios.vars.scss
@@ -14,7 +14,7 @@ $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: $gray-color-100;
 
 /// @prop - Color for the divider
 $item-divider-ios-color: $text-color-150;
diff --git a/core/src/components/loading/loading.md.vars.scss b/core/src/components/loading/loading.md.vars.scss
@@ -31,7 +31,7 @@ $loading-md-border-radius: 2px;
 $loading-md-text-color: $text-color-150;
 
 /// @prop - Background of the loading wrapper
-$loading-md-background: $background-color-step-50;
+$loading-md-background: $gray-color-50;
 
 /// @prop - Box shadow color of the loading wrapper
 $loading-md-box-shadow-color: rgba(0, 0, 0, 0.4);
diff --git 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 $gray-color-100;
diff --git 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: #{$gray-color-100};
 }
diff --git 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: $gray-color-250;
 
 /// @prop - Font size of the range pin
 $range-md-pin-font-size: dynamic-font(12px);
diff --git 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: #{$gray-color-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: #{$gray-color-750};
   }
 }
 
diff --git 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: #{$gray-color-50};
+  --border-color: #{$gray-color-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: #{$gray-color-100};
+    --border-color: #{$gray-color-750};
   }
 }
 
@@ -58,7 +58,7 @@
  */
 :host(.select-fill-solid.select-expanded),
 :host(.select-fill-solid.has-focus) {
-  --background: #{$background-color-step-150};
+  --background: #{$gray-color-150};
   --border-color: var(--highlight-color);
 }
 
diff --git 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: #{$gray-color-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: #{$gray-color-750};
   }
 }
 
diff --git 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: #{$gray-color-50};
+  --border-color: #{$gray-color-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: #{$gray-color-100};
+    --border-color: #{$gray-color-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: #{$gray-color-150};
+  --border-color: #{$gray-color-750};
 }
 
 :host(.textarea-fill-solid) .textarea-wrapper {
diff --git 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: $gray-color-50;
 
 /// @prop - Background Color alpha of the toast wrapper when translucent
 $toast-ios-translucent-background-color-alpha: 0.8;
diff --git 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: $gray-color-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),
diff --git a/core/src/themes/native/native.theme.default.scss b/core/src/themes/native/native.theme.default.scss
@@ -24,29 +24,29 @@ $text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value);
 // Color Steps are used to provide variations in text and background colors of elements.
 // Steps move towards their contrasting color.
 // For example, $text-color-XXX will be $text-color stepping towards $background-color,
-// but a $background-color-step-XXX will be $background-color stepping towards $text-color.
+// but a $gray-color-XXX will be $background-color stepping towards $text-color.
 
-$background-color-step-0: var(--ion-color-gray-0, mix($text-color-value, $background-color-value, 0%));
-$background-color-step-50: var(--ion-color-gray-50, mix($text-color-value, $background-color-value, 5%));
-$background-color-step-100: var(--ion-color-gray-100, mix($text-color-value, $background-color-value, 10%));
-$background-color-step-150: var(--ion-color-gray-150, mix($text-color-value, $background-color-value, 15%));
-$background-color-step-200: var(--ion-color-gray-200, mix($text-color-value, $background-color-value, 20%));
-$background-color-step-250: var(--ion-color-gray-250, mix($text-color-value, $background-color-value, 25%));
-$background-color-step-300: var(--ion-color-gray-300, mix($text-color-value, $background-color-value, 30%));
-$background-color-step-350: var(--ion-color-gray-350, mix($text-color-value, $background-color-value, 35%));
-$background-color-step-400: var(--ion-color-gray-400, mix($text-color-value, $background-color-value, 40%));
-$background-color-step-450: var(--ion-color-gray-450, mix($text-color-value, $background-color-value, 45%));
-$background-color-step-500: var(--ion-color-gray-500, mix($text-color-value, $background-color-value, 50%));
-$background-color-step-550: var(--ion-color-gray-550, mix($text-color-value, $background-color-value, 55%));
-$background-color-step-600: var(--ion-color-gray-600, mix($text-color-value, $background-color-value, 60%));
-$background-color-step-650: var(--ion-color-gray-650, mix($text-color-value, $background-color-value, 65%));
-$background-color-step-700: var(--ion-color-gray-700, mix($text-color-value, $background-color-value, 70%));
-$background-color-step-750: var(--ion-color-gray-750, mix($text-color-value, $background-color-value, 75%));
-$background-color-step-800: var(--ion-color-gray-800, mix($text-color-value, $background-color-value, 80%));
-$background-color-step-850: var(--ion-color-gray-850, mix($text-color-value, $background-color-value, 85%));
-$background-color-step-900: var(--ion-color-gray-900, mix($text-color-value, $background-color-value, 90%));
-$background-color-step-950: var(--ion-color-gray-950, mix($text-color-value, $background-color-value, 95%));
-$background-color-step-1000: var(--ion-color-gray-1000, mix($text-color-value, $background-color-value, 100%));
+$gray-color-0: var(--ion-color-gray-0, mix($text-color-value, $background-color-value, 0%));
+$gray-color-50: var(--ion-color-gray-50, mix($text-color-value, $background-color-value, 5%));
+$gray-color-100: var(--ion-color-gray-100, mix($text-color-value, $background-color-value, 10%));
+$gray-color-150: var(--ion-color-gray-150, mix($text-color-value, $background-color-value, 15%));
+$gray-color-200: var(--ion-color-gray-200, mix($text-color-value, $background-color-value, 20%));
+$gray-color-250: var(--ion-color-gray-250, mix($text-color-value, $background-color-value, 25%));
+$gray-color-300: var(--ion-color-gray-300, mix($text-color-value, $background-color-value, 30%));
+$gray-color-350: var(--ion-color-gray-350, mix($text-color-value, $background-color-value, 35%));
+$gray-color-400: var(--ion-color-gray-400, mix($text-color-value, $background-color-value, 40%));
+$gray-color-450: var(--ion-color-gray-450, mix($text-color-value, $background-color-value, 45%));
+$gray-color-500: var(--ion-color-gray-500, mix($text-color-value, $background-color-value, 50%));
+$gray-color-550: var(--ion-color-gray-550, mix($text-color-value, $background-color-value, 55%));
+$gray-color-600: var(--ion-color-gray-600, mix($text-color-value, $background-color-value, 60%));
+$gray-color-650: var(--ion-color-gray-650, mix($text-color-value, $background-color-value, 65%));
+$gray-color-700: var(--ion-color-gray-700, mix($text-color-value, $background-color-value, 70%));
+$gray-color-750: var(--ion-color-gray-750, mix($text-color-value, $background-color-value, 75%));
+$gray-color-800: var(--ion-color-gray-800, mix($text-color-value, $background-color-value, 80%));
+$gray-color-850: var(--ion-color-gray-850, mix($text-color-value, $background-color-value, 85%));
+$gray-color-900: var(--ion-color-gray-900, mix($text-color-value, $background-color-value, 90%));
+$gray-color-950: var(--ion-color-gray-950, mix($text-color-value, $background-color-value, 95%));
+$gray-color-1000: var(--ion-color-gray-1000, mix($text-color-value, $background-color-value, 100%));
 $text-color-0: var(--ion-color-text-0, mix($background-color-value, $text-color-value, 0%));
 $text-color-50: var(--ion-color-text-50, mix($background-color-value, $text-color-value, 5%));
 $text-color-100: var(--ion-color-text-100, mix($background-color-value, $text-color-value, 10%));

Original file line number	Diff line number	Diff line change
`@@ -181,7 +181,7 @@`
`181`	`181`
`182`	`182`	`.alert-button.ion-focused,`
`183`	`183`	`.alert-tappable.ion-focused {`
`184`		`- background: $background-color-step-100;`
	`184`	`+ background: $gray-color-100;`
`185`	`185`	`}`
`186`	`186`
`187`	`187`	`.alert-button-inner {`
Original file line number	Diff line number	Diff line change
`@@ -16,5 +16,5 @@`
`16`	`16`	`// --------------------------------------------------`
`17`	`17`
`18`	`18`	`:host(.input-otp-fill-outline) {`
`19`		`- --border-color: #{$background-color-step-300};`
	`19`	`+ --border-color: #{$gray-color-300};`
`20`	`20`	`}`