feat(tokens): change text step naming

thetaPC · thetaPC · commit 60c0f48862e7 · 2026-02-27T16:33:41.000-08:00
diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss
@@ -17,7 +17,7 @@
   --button-background-selected: #{$action-sheet-ios-button-background-selected};
   --button-background-selected-opacity: 1;
   --button-color: #{$action-sheet-ios-button-text-color};
-  --button-color-disabled: #{$text-color-step-150};
+  --button-color-disabled: #{$text-color-150};
   --color: #{$action-sheet-ios-title-color};
 
   text-align: $action-sheet-ios-text-align;
diff --git a/core/src/components/action-sheet/action-sheet.ios.vars.scss b/core/src/components/action-sheet/action-sheet.ios.vars.scss
@@ -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: $text-color-600;
 
 /// @prop - Font size of the action sheet title
 $action-sheet-ios-title-font-size: dynamic-font-min(1, 13px);
diff --git a/core/src/components/action-sheet/action-sheet.md.vars.scss b/core/src/components/action-sheet/action-sheet.md.vars.scss
@@ -64,7 +64,7 @@ $action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end
 $action-sheet-md-button-height: 52px;
 
 /// @prop - Text color of the action sheet button
-$action-sheet-md-button-text-color: $text-color-step-150;
+$action-sheet-md-button-text-color: $text-color-150;
 
 /// @prop - Font size of the action sheet button
 $action-sheet-md-button-font-size: dynamic-font(16px);
diff --git a/core/src/components/alert/alert.ios.vars.scss b/core/src/components/alert/alert.ios.vars.scss
@@ -57,7 +57,7 @@ $alert-ios-title-font-weight: 600;
 $alert-ios-sub-title-font-size: dynamic-font-min(1, 14px);
 
 /// @prop - Text color of the alert sub title
-$alert-ios-sub-title-text-color: $text-color-step-400;
+$alert-ios-sub-title-text-color: $text-color-400;
 
 /// @prop - Padding top of the alert message
 $alert-ios-message-padding-top: 0;
diff --git a/core/src/components/alert/alert.md.vars.scss b/core/src/components/alert/alert.md.vars.scss
@@ -80,7 +80,7 @@ $alert-md-message-padding-start: $alert-md-message-padding-end;
 $alert-md-message-font-size: dynamic-font(16px);
 
 /// @prop - Text color of the alert message
-$alert-md-message-text-color: $text-color-step-450;
+$alert-md-message-text-color: $text-color-450;
 
 /// @prop - Padding top of the alert empty message
 $alert-md-message-empty-padding-top: 0;
@@ -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: $text-color-150;
 
 /// @prop - Text color of the label for the checked radio alert
 $alert-md-radio-label-text-color-checked: $alert-md-radio-label-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: $text-color-150;
 
 /// @prop - Font size of the label for the checkbox in the alert
 $alert-md-checkbox-label-font-size: dynamic-font(16px);
diff --git a/core/src/components/card-subtitle/card-subtitle.ios.vars.scss b/core/src/components/card-subtitle/card-subtitle.ios.vars.scss
@@ -40,4 +40,4 @@ $card-ios-subtitle-margin-bottom: 4px;
 $card-ios-subtitle-margin-start: $card-ios-subtitle-margin-end;
 
 /// @prop - Color of the card subtitle
-$card-ios-subtitle-color: $text-color-step-400;
+$card-ios-subtitle-color: $text-color-400;
diff --git a/core/src/components/card-subtitle/card-subtitle.md.vars.scss b/core/src/components/card-subtitle/card-subtitle.md.vars.scss
@@ -31,4 +31,4 @@ $card-md-subtitle-margin-bottom: 0;
 $card-md-subtitle-margin-start: $card-md-subtitle-margin-end;
 
 /// @prop - Color of the card subtitle
-$card-md-subtitle-color: $text-color-step-450;
+$card-md-subtitle-color: $text-color-450;
diff --git a/core/src/components/card-title/card-title.md.vars.scss b/core/src/components/card-title/card-title.md.vars.scss
@@ -31,4 +31,4 @@ $card-md-title-margin-bottom: $card-md-title-margin-top;
 $card-md-title-margin-start: $card-md-title-margin-end;
 
 /// @prop - Color of the card title
-$card-md-title-text-color: $text-color-step-150;
+$card-md-title-text-color: $text-color-150;
diff --git a/core/src/components/checkbox/checkbox.native.scss b/core/src/components/checkbox/checkbox.native.scss
@@ -82,7 +82,7 @@
 }
 
 .checkbox-bottom .helper-text {
-  color: $text-color-step-300;
+  color: $text-color-300;
 }
 
 // Label Placement - Start
diff --git a/core/src/components/datetime-button/datetime-button.ios.scss b/core/src/components/datetime-button/datetime-button.ios.scss
@@ -8,5 +8,5 @@
 }
 
 :host button.ion-activated {
-  color: $text-color-step-400;
+  color: $text-color-400;
 }
diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss
@@ -8,7 +8,7 @@
 :host {
   --background: #{ion-color(light, base)};
   --background-rgb: #{ion-color(light, base, null, true)};
-  --title-color: #{$text-color-step-400};
+  --title-color: #{$text-color-400};
 }
 
 :host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),
@@ -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: $text-color-700;
 
   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: $text-color-700;
 }
 
 // Time / Header
diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss
@@ -40,7 +40,7 @@
 // -----------------------------------
 
 :host .calendar-action-buttons ion-button {
-  --color: #{$text-color-step-350};
+  --color: #{$text-color-350};
 }
 
 .calendar-month-year-toggle {
@@ -50,7 +50,7 @@
 
   background: transparent;
 
-  color: #{$text-color-step-350};
+  color: #{$text-color-350};
 
   z-index: 1;
 
@@ -78,7 +78,7 @@
 :host .calendar-days-of-week {
   @include padding(0px, 10px, 0px, 10px);
 
-  color: $text-color-step-500;
+  color: $text-color-500;
 
   font-size: $datetime-md-calendar-item-font-size;
 
@@ -138,7 +138,7 @@
 }
 
 :host .calendar-day.calendar-day-adjacent-day {
-  color: $text-color-step-500;
+  color: $text-color-500;
 }
 
 // Time / Header
@@ -148,7 +148,7 @@
 }
 
 :host .time-header {
-  color: #{$text-color-step-350};
+  color: #{$text-color-350};
 }
 
 // Month and Year
diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Color of the infinite scroll loading indicator
-$infinite-scroll-ios-loading-color: $text-color-step-400;
+$infinite-scroll-ios-loading-color: $text-color-400;
 
 /// @prop - Color of the infinite scroll loading indicator text
 $infinite-scroll-ios-loading-text-color: $infinite-scroll-ios-loading-color;
diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Color of the infinite scroll loading indicator
-$infinite-scroll-md-loading-color: $text-color-step-400;
+$infinite-scroll-md-loading-color: $text-color-400;
 
 /// @prop - Color of the infinite scroll loading indicator text
 $infinite-scroll-md-loading-text-color: $infinite-scroll-md-loading-color;
diff --git a/core/src/components/input-otp/input-otp.native.scss b/core/src/components/input-otp/input-otp.native.scss
@@ -26,7 +26,7 @@
 // ----------------------------------------------------------------
 
 .input-otp-description {
-  color: $text-color-step-300;
+  color: $text-color-300;
 
   font-size: dynamic-font(12px);
 
@@ -91,7 +91,7 @@
 // --------------------------------------------------
 
 :host(.input-otp-disabled) {
-  --color: #{$text-color-step-650};
+  --color: #{$text-color-650};
 }
 
 :host(.input-otp-fill-outline.input-otp-disabled) {
diff --git a/core/src/components/input/input.native.scss b/core/src/components/input/input.native.scss
@@ -55,7 +55,7 @@
   width: 30px;
   height: 30px;
 
-  color: $text-color-step-400;
+  color: $text-color-400;
 }
 
 /**
@@ -108,14 +108,14 @@
 // ----------------------------------------------------------------
 
 .input-bottom .helper-text {
-  color: $text-color-step-300;
+  color: $text-color-300;
 }
 
 // Input Max Length Counter
 // ----------------------------------------------------------------
 
 .input-bottom .counter {
-  color: $text-color-step-300;
+  color: $text-color-300;
 
   padding-inline-start: 16px;
 }
diff --git a/core/src/components/item-divider/item-divider.ios.vars.scss b/core/src/components/item-divider/item-divider.ios.vars.scss
@@ -17,7 +17,7 @@ $item-divider-ios-font-weight: 600;
 $item-divider-ios-background: $background-color-step-100;
 
 /// @prop - Color for the divider
-$item-divider-ios-color: $text-color-step-150;
+$item-divider-ios-color: $text-color-150;
 
 /// @prop - Padding start for the divider
 $item-divider-ios-padding-start: $item-ios-padding-start;
diff --git a/core/src/components/item-divider/item-divider.md.vars.scss b/core/src/components/item-divider/item-divider.md.vars.scss
@@ -8,7 +8,7 @@
 $item-divider-md-min-height: 30px;
 
 /// @prop - Color for the divider
-$item-divider-md-color: $text-color-step-600;
+$item-divider-md-color: $text-color-600;
 
 /// @prop - Background for the divider
 $item-divider-md-background: $background-color;
diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss
@@ -7,7 +7,7 @@
 $item-md-min-height: 48px;
 
 /// @prop - Color of the item paragraph
-$item-md-paragraph-text-color: $text-color-step-400;
+$item-md-paragraph-text-color: $text-color-400;
 
 /// @prop - Font size of the item
 $item-md-font-size: 16px;
diff --git a/core/src/components/label/label.ios.vars.scss b/core/src/components/label/label.ios.vars.scss
@@ -14,4 +14,4 @@ $label-ios-text-wrap-font-size: dynamic-font(14px);
 $label-ios-text-wrap-line-height: 1.5;
 
 /// @prop - Color of the item paragraph
-$item-ios-paragraph-text-color: $text-color-step-600;
+$item-ios-paragraph-text-color: $text-color-600;
diff --git a/core/src/components/list-header/list-header.ios.vars.scss b/core/src/components/list-header/list-header.ios.vars.scss
@@ -17,7 +17,7 @@ $list-header-ios-font-weight: 700;
 $list-header-ios-letter-spacing: 0;
 
 /// @prop - Text color of the list header
-$list-header-ios-color: $text-color-step-150;
+$list-header-ios-color: $text-color-150;
 
 /// @prop - Background color of the list header
 $list-header-ios-background-color: transparent;
diff --git a/core/src/components/loading/loading.ios.vars.scss b/core/src/components/loading/loading.ios.vars.scss
@@ -43,7 +43,7 @@ $loading-ios-translucent-background-color: rgba($background-color-rgb, $loading-
 $loading-ios-content-font-weight: bold;
 
 /// @prop - Color of the loading spinner
-$loading-ios-spinner-color: $text-color-step-400;
+$loading-ios-spinner-color: $text-color-400;
 
 /// @prop - Filter of the translucent loading
 $loading-ios-translucent-filter: saturate(180%) blur(20px);
diff --git a/core/src/components/loading/loading.md.vars.scss b/core/src/components/loading/loading.md.vars.scss
@@ -28,7 +28,7 @@ $loading-md-max-height: 90%;
 $loading-md-border-radius: 2px;
 
 /// @prop - Text color of the loading wrapper
-$loading-md-text-color: $text-color-step-150;
+$loading-md-text-color: $text-color-150;
 
 /// @prop - Background of the loading wrapper
 $loading-md-background: $background-color-step-50;
diff --git a/core/src/components/note/note.ios.vars.scss b/core/src/components/note/note.ios.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Text color of the note
-$note-ios-color: $text-color-step-650;
+$note-ios-color: $text-color-650;
 
 /// @prop - Font size of the note
 $note-ios-font-size: dynamic-font-min(0.875, 16px);
diff --git a/core/src/components/note/note.md.vars.scss b/core/src/components/note/note.md.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Text color of the note
-$note-md-color: $text-color-step-400;
+$note-md-color: $text-color-400;
 
 /// @prop - Font size of the note
 $note-md-font-size: dynamic-font(14px);
diff --git a/core/src/components/radio-group/radio-group.native.scss b/core/src/components/radio-group/radio-group.native.scss
@@ -13,5 +13,5 @@
 }
 
 .radio-group-top .helper-text {
-  color: $text-color-step-300;
+  color: $text-color-300;
 }
diff --git a/core/src/components/searchbar/searchbar.ios.vars.scss b/core/src/components/searchbar/searchbar.ios.vars.scss
@@ -29,7 +29,7 @@ $searchbar-ios-cancel-button-background-color: transparent;
 $searchbar-ios-input-search-icon-size: dynamic-font(22px);
 
 /// @prop - Color of the searchbar input search icon
-$searchbar-ios-input-search-icon-color: $text-color-step-400;
+$searchbar-ios-input-search-icon-color: $text-color-400;
 
 /// @prop - Minimum Height of the searchbar input
 $searchbar-ios-input-min-height: 36px;
@@ -56,7 +56,7 @@ $searchbar-ios-cancel-transition: all 300ms ease;
 $searchbar-ios-input-icon-opacity: 0.5;
 
 /// @prop - Color of the searchbar input clear icon
-$searchbar-ios-input-clear-icon-color: $text-color-step-400;
+$searchbar-ios-input-clear-icon-color: $text-color-400;
 
 /// @prop - Size of the searchbar input clear icon
 $searchbar-ios-input-clear-icon-size: dynamic-font(18px);
diff --git a/core/src/components/searchbar/searchbar.md.vars.scss b/core/src/components/searchbar/searchbar.md.vars.scss
@@ -19,7 +19,7 @@ $searchbar-md-padding-start: $searchbar-md-padding-end;
 $searchbar-md-background: inherit;
 
 /// @prop - Color of the searchbar cancel button
-$searchbar-md-cancel-button-color: $text-color-step-100;
+$searchbar-md-cancel-button-color: $text-color-100;
 
 /// @prop - Background color of the searchbar cancel button
 $searchbar-md-cancel-button-background-color: transparent;
@@ -28,7 +28,7 @@ $searchbar-md-cancel-button-background-color: transparent;
 $searchbar-md-cancel-button-font-size: 1.5em;
 
 /// @prop - Color of the searchbar input search icon
-$searchbar-md-input-search-icon-color: $text-color-step-400;
+$searchbar-md-input-search-icon-color: $text-color-400;
 
 /// @prop - Size of the searchbar input search icon
 $searchbar-md-input-search-icon-size: dynamic-font(21px);
@@ -44,7 +44,7 @@ $searchbar-md-input-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px
   0 1px 5px 0 rgba(0, 0, 0, 0.12);
 
 /// @prop - Color of the searchbar input text
-$searchbar-md-input-text-color: $text-color-step-150;
+$searchbar-md-input-text-color: $text-color-150;
 
 /// @prop - Background of the searchbar input
 $searchbar-md-input-background-color: $background-color;
diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss
@@ -16,7 +16,7 @@
 
   // Color deviates from the iOS spec, but satisfies WCAG AAA:
   // https://www.w3.org/TR/WCAG20-TECHS/G18.html
-  color: #{$text-color-step-350};
+  color: #{$text-color-350};
 }
 
 // Select Inner Wrapper
diff --git a/core/src/components/select/select.md.vars.scss b/core/src/components/select/select.md.vars.scss
@@ -8,7 +8,7 @@
 $select-md-icon-size: dynamic-font(13px);
 
 /// @prop - Color of the select icon
-$select-md-icon-color: $text-color-step-500;
+$select-md-icon-color: $text-color-500;
 
 /// @prop - The amount of whitespace to display on either side of the floating label
 $select-md-floating-label-padding: 4px;
diff --git a/core/src/components/select/select.native.scss b/core/src/components/select/select.native.scss
@@ -78,7 +78,7 @@
 // ----------------------------------------------------------------
 
 .select-bottom .helper-text {
-  color: $text-color-step-300;
+  color: $text-color-300;
 }
 
 // Select Text
diff --git a/core/src/components/textarea/textarea.native.scss b/core/src/components/textarea/textarea.native.scss
diff --git a/core/src/components/toast/toast.ios.vars.scss b/core/src/components/toast/toast.ios.vars.scss
diff --git a/core/src/components/toast/toast.md.vars.scss b/core/src/components/toast/toast.md.vars.scss
diff --git a/core/src/components/toggle/toggle.native.scss b/core/src/components/toggle/toggle.native.scss
diff --git a/core/src/css/ionic-swiper.scss b/core/src/css/ionic-swiper.scss
diff --git a/core/src/themes/native/native.theme.default.ios.scss b/core/src/themes/native/native.theme.default.ios.scss
diff --git a/core/src/themes/native/native.theme.default.md.scss b/core/src/themes/native/native.theme.default.md.scss
diff --git a/core/src/themes/native/native.theme.default.scss b/core/src/themes/native/native.theme.default.scss

Original file line number	Diff line number	Diff line change
`@@ -82,7 +82,7 @@`
`82`	`82`	`}`
`83`	`83`
`84`	`84`	`.checkbox-bottom .helper-text {`
`85`		`- color: $text-color-step-300;`
	`85`	`+ color: $text-color-300;`
`86`	`86`	`}`
`87`	`87`
`88`	`88`	`// Label Placement - Start`
Original file line number	Diff line number	Diff line change
`@@ -8,5 +8,5 @@`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`:host button.ion-activated {`
`11`		`- color: $text-color-step-400;`
	`11`	`+ color: $text-color-400;`
`12`	`12`	`}`