javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(tokens): change text step naming

Browse Source
This commit is contained in:
Maria Hutt
2026-02-27 16:33:41 -08:00
parent a1b9b265bb
commit 60c0f48862
39 changed files with 79 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/action-sheet/action-sheet.ios.scss
View File

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

2
core/src/components/action-sheet/action-sheet.ios.vars.scss
View File

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

2
core/src/components/action-sheet/action-sheet.md.vars.scss
View File

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

2
core/src/components/alert/alert.ios.vars.scss
View File

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

6
core/src/components/alert/alert.md.vars.scss
View File

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

2
core/src/components/card-subtitle/card-subtitle.ios.vars.scss
View File

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

2
core/src/components/card-subtitle/card-subtitle.md.vars.scss
View File

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

2
core/src/components/card-title/card-title.md.vars.scss
View File

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

2
core/src/components/checkbox/checkbox.native.scss
View File

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

2
core/src/components/datetime-button/datetime-button.ios.scss
View File

@@ -8,5 +8,5 @@
}
:host button.ion-activated {
color: $text-color-step-400;
color: $text-color-400;
}

6
core/src/components/datetime/datetime.ios.scss
View File

@@ -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

10
core/src/components/datetime/datetime.md.scss
View File

@@ -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

2
core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss
View File

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

2
core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss
View File

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

4
core/src/components/input-otp/input-otp.native.scss
View File

@@ -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) {

6
core/src/components/input/input.native.scss
View File

@@ -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;
}

2
core/src/components/item-divider/item-divider.ios.vars.scss
View File

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

2
core/src/components/item-divider/item-divider.md.vars.scss
View File

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

2
core/src/components/item/item.md.vars.scss
View File

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

2
core/src/components/label/label.ios.vars.scss
View File

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

2
core/src/components/list-header/list-header.ios.vars.scss
View File

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

2
core/src/components/loading/loading.ios.vars.scss
View File

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

2
core/src/components/loading/loading.md.vars.scss
View File

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

2
core/src/components/note/note.ios.vars.scss
View File

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

2
core/src/components/note/note.md.vars.scss
View File

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

2
core/src/components/radio-group/radio-group.native.scss
View File

@@ -13,5 +13,5 @@
}
.radio-group-top .helper-text {
color: $text-color-step-300;
color: $text-color-300;
}

4
core/src/components/searchbar/searchbar.ios.vars.scss
View File

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

6
core/src/components/searchbar/searchbar.md.vars.scss
View File

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

2
core/src/components/select/select.ios.scss
View File

@@ -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

2
core/src/components/select/select.md.vars.scss
View File

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

2
core/src/components/select/select.native.scss
View File

@@ -78,7 +78,7 @@
// ----------------------------------------------------------------
.select-bottom .helper-text {
color: $text-color-step-300;
color: $text-color-300;
}
// Select Text

4
core/src/components/textarea/textarea.native.scss
View File

@@ -72,14 +72,14 @@
// ----------------------------------------------------------------
.textarea-bottom .helper-text {
color: globals.$text-color-step-300;
color: globals.$text-color-300;
}
// Textarea Max Length Counter
// ----------------------------------------------------------------
.textarea-bottom .counter {
color: globals.$text-color-step-300;
color: globals.$text-color-300;
padding-inline-start: 16px;
}

2
core/src/components/toast/toast.ios.vars.scss
View File

@@ -21,7 +21,7 @@ $toast-ios-translucent-background-color: rgba($background-color-rgb, $toast-ios-
$toast-ios-border-radius: 14px;
/// @prop - Color of the toast title
$toast-ios-title-color: $text-color-step-150;
$toast-ios-title-color: $text-color-150;
/// @prop - Font size of the toast title
$toast-ios-header-font-weight: 500;

4
core/src/components/toast/toast.md.vars.scss
View File

@@ -14,7 +14,7 @@ $toast-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0,
$toast-md-font-size: dynamic-font(14px);
/// @prop - Color of the toast
$toast-md-color: $text-color-step-950;
$toast-md-color: $text-color-950;
/// @prop - Border radius of the toast wrapper
$toast-md-border-radius: 4px;
@@ -77,7 +77,7 @@ $toast-md-button-opacity-hover: 0.08;
$toast-md-button-background-color-hover: ion-color(primary, base, $toast-md-button-opacity-hover);
/// @prop - Text color of the cancel toast button
$toast-md-button-cancel-text-color: $text-color-step-900;
$toast-md-button-cancel-text-color: $text-color-900;
/// @prop - Background color of the cancel toast button on hover
$toast-md-button-cancel-background-color-hover: rgba($background-color-rgb, $toast-md-button-opacity-hover);

2
core/src/components/toggle/toggle.native.scss
View File

@@ -42,7 +42,7 @@
}
.toggle-bottom .helper-text {
color: $text-color-step-300;
color: $text-color-300;
}
// Input Label

2
core/src/css/ionic-swiper.scss
View File

@@ -7,7 +7,7 @@
// These values are the same for iOS and MD
// We just do not add a .md or .ios class beforehand
// so the styles are easier to override by the user.
--bullet-background: $text-color-step-800;
--bullet-background: $text-color-800;
--bullet-background-active: ion-color(primary, base);
--progress-bar-background: rgba($text-color-rgb, 0.25);
--progress-bar-background-active: ion-color(primary, shade);

4
core/src/themes/native/native.theme.default.ios.scss
View File

@@ -17,7 +17,7 @@ $tabbar-ios-border-color: var(
--ion-tab-bar-border-color,
var(--ion-border-color, var(--ion-color-gray-150, rgba(0, 0, 0, 0.2)))
);
$tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-400);
$tabbar-ios-color: var(--ion-tab-bar-color, $text-color-400);
$tabbar-ios-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base));
// iOS Toolbar
@@ -38,7 +38,7 @@ $item-ios-color: var(--ion-item-color, $text-color);
// iOS Card
// --------------------------------------------------
$card-ios-background: var(--ion-card-background, $item-ios-background);
$card-ios-color: var(--ion-card-color, var(--ion-item-color, $text-color-step-400));
$card-ios-color: var(--ion-card-color, var(--ion-item-color, $text-color-400));
// iOS Form Controls
// --------------------------------------------------

4
core/src/themes/native/native.theme.default.md.scss
View File

@@ -18,7 +18,7 @@ $tabbar-md-border-color: var(
--ion-tab-bar-border-color,
var(--ion-border-color, var(--ion-color-gray-150, rgba(0, 0, 0, 0.07)))
);
$tabbar-md-color: var(--ion-tab-bar-color, $text-color-step-350);
$tabbar-md-color: var(--ion-tab-bar-color, $text-color-350);
$tabbar-md-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base));
// Material Design Toolbar
@@ -39,7 +39,7 @@ $item-md-color: var(--ion-item-color, $text-color);
// Material Design Card
// --------------------------------------------------
$card-md-background: var(--ion-card-background, $item-md-background);
$card-md-color: var(--ion-card-color, var(--ion-item-color, $text-color-step-450));
$card-md-color: var(--ion-card-color, var(--ion-item-color, $text-color-450));
// Material Design Form Controls
// --------------------------------------------------

46
core/src/themes/native/native.theme.default.scss
View File

@@ -23,7 +23,7 @@ $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-step-XXX will be $text-color stepping towards $background-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.
$background-color-step-0: var(--ion-color-gray-0, mix($text-color-value, $background-color-value, 0%));
@@ -47,28 +47,28 @@ $background-color-step-850: var(--ion-color-gray-850, mix($text-color-value, $ba
$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%));
$text-color-step-0: var(--ion-color-text-0, mix($background-color-value, $text-color-value, 0%));
$text-color-step-50: var(--ion-color-text-50, mix($background-color-value, $text-color-value, 5%));
$text-color-step-100: var(--ion-color-text-100, mix($background-color-value, $text-color-value, 10%));
$text-color-step-150: var(--ion-color-text-150, mix($background-color-value, $text-color-value, 15%));
$text-color-step-200: var(--ion-color-text-200, mix($background-color-value, $text-color-value, 20%));
$text-color-step-250: var(--ion-color-text-250, mix($background-color-value, $text-color-value, 25%));
$text-color-step-300: var(--ion-color-text-300, mix($background-color-value, $text-color-value, 30%));
$text-color-step-350: var(--ion-color-text-350, mix($background-color-value, $text-color-value, 35%));
$text-color-step-400: var(--ion-color-text-400, mix($background-color-value, $text-color-value, 40%));
$text-color-step-450: var(--ion-color-text-450, mix($background-color-value, $text-color-value, 45%));
$text-color-step-500: var(--ion-color-text-500, mix($background-color-value, $text-color-value, 50%));
$text-color-step-550: var(--ion-color-text-550, mix($background-color-value, $text-color-value, 55%));
$text-color-step-600: var(--ion-color-text-600, mix($background-color-value, $text-color-value, 60%));
$text-color-step-650: var(--ion-color-text-650, mix($background-color-value, $text-color-value, 65%));
$text-color-step-700: var(--ion-color-text-700, mix($background-color-value, $text-color-value, 70%));
$text-color-step-750: var(--ion-color-text-750, mix($background-color-value, $text-color-value, 75%));
$text-color-step-800: var(--ion-color-text-800, mix($background-color-value, $text-color-value, 80%));
$text-color-step-850: var(--ion-color-text-850, mix($background-color-value, $text-color-value, 85%));
$text-color-step-900: var(--ion-color-text-900, mix($background-color-value, $text-color-value, 90%));
$text-color-step-950: var(--ion-color-text-950, mix($background-color-value, $text-color-value, 95%));
$text-color-step-1000: var(--ion-color-text-1000, mix($background-color-value, $text-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%));
$text-color-150: var(--ion-color-text-150, mix($background-color-value, $text-color-value, 15%));
$text-color-200: var(--ion-color-text-200, mix($background-color-value, $text-color-value, 20%));
$text-color-250: var(--ion-color-text-250, mix($background-color-value, $text-color-value, 25%));
$text-color-300: var(--ion-color-text-300, mix($background-color-value, $text-color-value, 30%));
$text-color-350: var(--ion-color-text-350, mix($background-color-value, $text-color-value, 35%));
$text-color-400: var(--ion-color-text-400, mix($background-color-value, $text-color-value, 40%));
$text-color-450: var(--ion-color-text-450, mix($background-color-value, $text-color-value, 45%));
$text-color-500: var(--ion-color-text-500, mix($background-color-value, $text-color-value, 50%));
$text-color-550: var(--ion-color-text-550, mix($background-color-value, $text-color-value, 55%));
$text-color-600: var(--ion-color-text-600, mix($background-color-value, $text-color-value, 60%));
$text-color-650: var(--ion-color-text-650, mix($background-color-value, $text-color-value, 65%));
$text-color-700: var(--ion-color-text-700, mix($background-color-value, $text-color-value, 70%));
$text-color-750: var(--ion-color-text-750, mix($background-color-value, $text-color-value, 75%));
$text-color-800: var(--ion-color-text-800, mix($background-color-value, $text-color-value, 80%));
$text-color-850: var(--ion-color-text-850, mix($background-color-value, $text-color-value, 85%));
$text-color-900: var(--ion-color-text-900, mix($background-color-value, $text-color-value, 90%));
$text-color-950: var(--ion-color-text-950, mix($background-color-value, $text-color-value, 95%));
$text-color-1000: var(--ion-color-text-1000, mix($background-color-value, $text-color-value, 100%));
// Default General Colors
// --------------------------------------------------
$placeholder-text-color: var(--ion-placeholder-color, $text-color-step-600);
$placeholder-text-color: var(--ion-placeholder-color, $text-color-600);