diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss
index fe9bba89903..f1b376fae49 100644
--- 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: var(--ion-color-gray-850);
--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
index 0d2302b7183..d26d47130f5 100644
--- 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: var(--ion-color-gray-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-color-gray-0);
/// @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/action-sheet/action-sheet.md.vars.scss b/core/src/components/action-sheet/action-sheet.md.vars.scss
index 878d206062a..9c1842a83a1 100644
--- 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: var(--ion-color-gray-850);
/// @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
index 2cb4fca98af..152d5d92cb9 100644
--- 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: var(--ion-color-gray-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;
diff --git a/core/src/components/alert/alert.md.vars.scss b/core/src/components/alert/alert.md.vars.scss
index ce1fb7304dd..d6e68a73355 100644
--- 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: var(--ion-color-gray-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-gray-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-gray-850);
/// @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/alert/alert.scss b/core/src/components/alert/alert.scss
index 9948a4127a9..9bc24f53096 100644
--- 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: var(--ion-color-gray-100);
}
.alert-button-inner {
diff --git a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss
index 0fda71c8aa7..112409ee1ac 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-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);
diff --git a/core/src/components/breadcrumb/breadcrumb.md.vars.scss b/core/src/components/breadcrumb/breadcrumb.md.vars.scss
index 8c738a5e887..070127b4aa2 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-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);
diff --git a/core/src/components/breadcrumb/breadcrumb.vars.scss b/core/src/components/breadcrumb/breadcrumb.vars.scss
index 4770b0b9e19..f13cb164e0b 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-components-ion-breadcrumb-separator-color);
diff --git a/core/src/components/card-subtitle/card-subtitle.ios.vars.scss b/core/src/components/card-subtitle/card-subtitle.ios.vars.scss
index 6c920f79f6a..50b11b7883e 100644
--- 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: var(--ion-color-gray-600);
diff --git a/core/src/components/card-subtitle/card-subtitle.md.vars.scss b/core/src/components/card-subtitle/card-subtitle.md.vars.scss
index 9cd7aa2d6a7..8a91e614ce9 100644
--- 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: var(--ion-color-gray-550);
diff --git a/core/src/components/card-title/card-title.md.vars.scss b/core/src/components/card-title/card-title.md.vars.scss
index 94f201df1d2..3bf872916fa 100644
--- 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: var(--ion-color-gray-850);
diff --git a/core/src/components/checkbox/checkbox.native.scss b/core/src/components/checkbox/checkbox.native.scss
index 4c9021f114f..8c6be5a0180 100644
--- 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: var(--ion-color-gray-700);
}
// 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
index 6a4d3eb1be8..5d4126f09a2 100644
--- 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: var(--ion-color-gray-600);
}
diff --git a/core/src/components/datetime-button/datetime-button.scss b/core/src/components/datetime-button/datetime-button.scss
index 6defd0da9be..13b5bb236ea 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-components-ion-datetime-button-bg);
color: $text-color;
diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss
index e49bdc3241b..5f1c4e2a524 100644
--- 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: var(--ion-color-gray-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-gray-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-gray-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),
diff --git a/core/src/components/datetime/datetime.ios.vars.scss b/core/src/components/datetime/datetime.ios.vars.scss
index c89e7674821..de1d3fd530a 100644
--- a/core/src/components/datetime/datetime.ios.vars.scss
+++ b/core/src/components/datetime/datetime.ios.vars.scss
@@ -3,8 +3,17 @@
// iOS Datetime
// --------------------------------------------------
+/// @prop Border width for dividers between header and footer
+$datetime-ios-border-width: 0.55px;
+
+/// @prop - Border style for dividers between header and footer
+$datetime-ios-border-style: solid;
+
/// @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: var(--ion-color-gray-200);
+
+/// @prop - Border for dividers between header and footer
+$datetime-ios-border: $datetime-ios-border-width $datetime-ios-border-style $datetime-ios-border-color;
/// @prop - Padding for content
$datetime-ios-padding: 16px;
diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss
index 6d00afa3d00..a3d784dfbe3 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-components-ion-datetime-bg);
--title-color: #{current-color(contrast)};
}
@@ -40,7 +40,7 @@
// -----------------------------------
:host .calendar-action-buttons ion-button {
- --color: #{$text-color-step-350};
+ --color: var(--ion-color-gray-650);
}
.calendar-month-year-toggle {
@@ -50,7 +50,7 @@
background: transparent;
- color: #{$text-color-step-350};
+ color: var(--ion-color-gray-650);
z-index: 1;
@@ -78,7 +78,7 @@
:host .calendar-days-of-week {
@include padding(0px, 10px, 0px, 10px);
- color: $text-color-step-500;
+ color: var(--ion-color-gray-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: var(--ion-color-gray-500);
}
// Time / Header
@@ -148,7 +148,7 @@
}
:host .time-header {
- color: #{$text-color-step-350};
+ color: var(--ion-color-gray-650);
}
// Month and Year
diff --git a/core/src/components/datetime/datetime.native.scss b/core/src/components/datetime/datetime.native.scss
index eee452f1076..f9710ecb89c 100644
--- a/core/src/components/datetime/datetime.native.scss
+++ b/core/src/components/datetime/datetime.native.scss
@@ -77,7 +77,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-components-ion-datetime-time-body-bg);
color: globals.$text-color;
}
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
index 453acc1d189..e4e7779cc97 100644
--- 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: var(--ion-color-gray-600);
/// @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
index f1fca17e82e..c09223746a1 100644
--- 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: var(--ion-color-gray-600);
/// @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.md.scss b/core/src/components/input-otp/input-otp.md.scss
index eb21b802d3e..d51a5a49857 100644
--- 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: var(--ion-color-gray-300);
}
diff --git a/core/src/components/input-otp/input-otp.native.scss b/core/src/components/input-otp/input-otp.native.scss
index daf2b3ff877..a7e9c8b3c1f 100644
--- 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: var(--ion-color-gray-150);
--highlight-color-focused: #{ion-color(primary, base)};
--highlight-color-valid: #{ion-color(success, base)};
--highlight-color-invalid: #{ion-color(danger, base)};
@@ -26,7 +26,7 @@
// ----------------------------------------------------------------
.input-otp-description {
- color: $text-color-step-300;
+ color: var(--ion-color-gray-700);
font-size: dynamic-font(12px);
@@ -83,30 +83,30 @@
}
:host(.input-otp-fill-solid) {
- --border-color: #{$background-color-step-50};
- --background: #{$background-color-step-50};
+ --border-color: var(--ion-color-gray-50);
+ --background: var(--ion-color-gray-50);
}
// States
// --------------------------------------------------
:host(.input-otp-disabled) {
- --color: #{$text-color-step-650};
+ --color: var(--ion-color-gray-350);
}
:host(.input-otp-fill-outline.input-otp-disabled) {
- --background: #{$background-color-step-50};
- --border-color: #{$background-color-step-100};
+ --background: var(--ion-color-gray-50);
+ --border-color: var(--ion-color-gray-100);
}
:host(.input-otp-fill-outline.input-otp-readonly) {
- --background: #{$background-color-step-50};
+ --background: var(--ion-color-gray-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: var(--ion-color-gray-100);
+ --background: var(--ion-color-gray-100);
}
// Colors
diff --git a/core/src/components/input/input.md.outline.scss b/core/src/components/input/input.md.outline.scss
index c9577e16676..a407b9db5ca 100644
--- 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: var(--ion-color-gray-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: var(--ion-color-gray-750);
}
}
diff --git a/core/src/components/input/input.md.solid.scss b/core/src/components/input/input.md.solid.scss
index f3df1521515..b0c4a092d5d 100644
--- 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: var(--ion-color-gray-50);
+ --border-color: var(--ion-color-gray-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: var(--ion-color-gray-100);
+ --border-color: var(--ion-color-gray-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: var(--ion-color-gray-150);
+ --border-color: var(--ion-color-gray-750);
}
:host(.input-fill-solid) .input-wrapper {
diff --git a/core/src/components/input/input.native.scss b/core/src/components/input/input.native.scss
index 4ac5d333b8b..f837abdf09b 100644
--- 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: var(--ion-color-gray-600);
}
/**
@@ -108,14 +108,14 @@
// ----------------------------------------------------------------
.input-bottom .helper-text {
- color: $text-color-step-300;
+ color: var(--ion-color-gray-700);
}
// Input Max Length Counter
// ----------------------------------------------------------------
.input-bottom .counter {
- color: $text-color-step-300;
+ color: var(--ion-color-gray-700);
padding-inline-start: 16px;
}
diff --git a/core/src/components/input/test/validation/index.html b/core/src/components/input/test/validation/index.html
index 2a6ad89e13f..4ce28439b14 100644
--- a/core/src/components/input/test/validation/index.html
+++ b/core/src/components/input/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;
}
diff --git a/core/src/components/item-divider/item-divider.ios.vars.scss b/core/src/components/item-divider/item-divider.ios.vars.scss
index 89901c1f13e..e30f0050571 100644
--- a/core/src/components/item-divider/item-divider.ios.vars.scss
+++ b/core/src/components/item-divider/item-divider.ios.vars.scss
@@ -14,10 +14,10 @@ $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: var(--ion-color-gray-100);
/// @prop - Color for the divider
-$item-divider-ios-color: $text-color-step-150;
+$item-divider-ios-color: var(--ion-color-gray-850);
/// @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
index 97a58f09b24..d0507b152ed 100644
--- 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: var(--ion-color-gray-400);
/// @prop - Background for the divider
$item-divider-md-background: $background-color;
diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss
index 223b08125f3..9855dfaab56 100644
--- a/core/src/components/item/item.ios.vars.scss
+++ b/core/src/components/item/item.ios.vars.scss
@@ -25,7 +25,7 @@ $item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end;
$item-ios-paragraph-font-size: dynamic-font(14px);
/// @prop - Color of the item paragraph
-$item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3);
+$item-ios-paragraph-text-color: var(--ion-components-ion-item-paragraph-text-color);
/// @prop - Width of the avatar in the item
$item-ios-avatar-width: 36px;
diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss
index 4e38c76ec26..da05cbbbc0f 100644
--- 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: var(--ion-color-gray-600);
/// @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
index 48cadf30ce9..bb98ccd7b61 100644
--- 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: var(--ion-color-gray-400);
diff --git a/core/src/components/list-header/list-header.ios.vars.scss b/core/src/components/list-header/list-header.ios.vars.scss
index 44b3a35693c..babb3d03f77 100644
--- 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: var(--ion-color-gray-850);
/// @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
index 05cd183091a..28edb483835 100644
--- 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: var(--ion-color-gray-600);
/// @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
index fcdaa57fc00..4df4a85287d 100644
--- a/core/src/components/loading/loading.md.vars.scss
+++ b/core/src/components/loading/loading.md.vars.scss
@@ -28,10 +28,10 @@ $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: var(--ion-color-gray-850);
/// @prop - Background of the loading wrapper
-$loading-md-background: $background-color-step-50;
+$loading-md-background: var(--ion-color-gray-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/modal/modal.native.scss b/core/src/components/modal/modal.native.scss
index b94d65d0cd9..067eb69b9a6 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-components-ion-modal-handle-bg);
&::before {
/**
diff --git a/core/src/components/note/note.ios.vars.scss b/core/src/components/note/note.ios.vars.scss
index 75836d251b7..2fb41d2eba5 100644
--- 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: var(--ion-color-gray-350);
/// @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
index b733c522f8c..b5e70386a17 100644
--- 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: var(--ion-color-gray-600);
/// @prop - Font size of the note
$note-md-font-size: dynamic-font(14px);
diff --git a/core/src/components/picker/picker.ios.scss b/core/src/components/picker/picker.ios.scss
index f474efe997b..df87680b5f2 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-components-ion-picker-highlight-bg));
}
diff --git a/core/src/components/popover/popover.ios.vars.scss b/core/src/components/popover/popover.ios.vars.scss
index 195d3145423..bee2a3b9fa2 100644
--- 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 var(--ion-color-gray-100);
diff --git a/core/src/components/progress-bar/progress-bar.ios.scss b/core/src/components/progress-bar/progress-bar.ios.scss
index 2c8c60fbcdb..b1619202df6 100644
--- 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: var(--ion-color-gray-100);
}
diff --git a/core/src/components/radio-group/radio-group.native.scss b/core/src/components/radio-group/radio-group.native.scss
index c0a65bdd955..122fdbe9631 100644
--- a/core/src/components/radio-group/radio-group.native.scss
+++ b/core/src/components/radio-group/radio-group.native.scss
@@ -20,5 +20,5 @@
}
.radio-group-top .helper-text {
- color: $text-color-step-300;
+ color: var(--ion-color-gray-700);
}
diff --git a/core/src/components/range/range.ios.vars.scss b/core/src/components/range/range.ios.vars.scss
index dace5a00686..0ee84cbedcb 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-components-ion-range-bg);
/// @prop - Border radius of the range bar
$range-ios-bar-border-radius: 2px;
diff --git a/core/src/components/range/range.md.vars.scss b/core/src/components/range/range.md.vars.scss
index 3916b431087..805f3e46127 100644
--- 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: var(--ion-color-gray-250);
/// @prop - Font size of the range pin
$range-md-pin-font-size: dynamic-font(12px);
diff --git a/core/src/components/refresher/refresher.ios.vars.scss b/core/src/components/refresher/refresher.ios.vars.scss
index 3cb4a38f54b..fbf48b3233f 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-components-ion-refresher-native-spinner-color);
/// @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..bce4c650542 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-components-ion-refresher-native-spinner-border);
/// @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-components-ion-refresher-native-spinner-bg);
/// @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/searchbar/searchbar.ios.vars.scss b/core/src/components/searchbar/searchbar.ios.vars.scss
index a675bf7848f..8e133d1ba9a 100644
--- 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: var(--ion-color-gray-600);
/// @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: var(--ion-color-gray-600);
/// @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
index 12381b3c912..565930dc5ff 100644
--- 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: var(--ion-color-gray-900);
/// @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: var(--ion-color-gray-600);
/// @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: var(--ion-color-gray-850);
/// @prop - Background of the searchbar input
$searchbar-md-input-background-color: $background-color;
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..5b15114e3b4 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-components-ion-segment-button-checked-indicator-bg);
/// @prop - Margin of the segment button
$segment-button-ios-margin: 2px;
diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss
index 3e65937f6bf..d653672581f 100644
--- 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: var(--ion-color-gray-650);
}
// Select Inner Wrapper
diff --git a/core/src/components/select/select.md.outline.scss b/core/src/components/select/select.md.outline.scss
index 66f15f0f91b..46d8b37139f 100644
--- 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: var(--ion-color-gray-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: var(--ion-color-gray-750);
}
}
diff --git a/core/src/components/select/select.md.solid.scss b/core/src/components/select/select.md.solid.scss
index 12a42d2222f..2f6321e31a4 100644
--- 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: var(--ion-color-gray-50);
+ --border-color: var(--ion-color-gray-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: var(--ion-color-gray-100);
+ --border-color: var(--ion-color-gray-750);
}
}
@@ -58,7 +58,7 @@
*/
:host(.select-fill-solid.select-expanded),
:host(.select-fill-solid.has-focus) {
- --background: #{$background-color-step-150};
+ --background: var(--ion-color-gray-150);
--border-color: var(--highlight-color);
}
diff --git a/core/src/components/select/select.md.vars.scss b/core/src/components/select/select.md.vars.scss
index 3b466d495af..53016347b52 100644
--- 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: var(--ion-color-gray-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
index 876fcb1579f..290618d7b8a 100644
--- 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: var(--ion-color-gray-700);
}
// Select Text
diff --git a/core/src/components/textarea/test/validation/index.html b/core/src/components/textarea/test/validation/index.html
index 6f977a7d915..632a9f95e30 100644
--- a/core/src/components/textarea/test/validation/index.html
+++ b/core/src/components/textarea/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;
}
diff --git a/core/src/components/textarea/textarea.md.outline.scss b/core/src/components/textarea/textarea.md.outline.scss
index 5cb2c66f348..b928b880fbc 100644
--- 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: var(--ion-color-gray-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: var(--ion-color-gray-750);
}
}
diff --git a/core/src/components/textarea/textarea.md.solid.scss b/core/src/components/textarea/textarea.md.solid.scss
index 9d831daf0e0..35539a07fc8 100644
--- 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: var(--ion-color-gray-50);
+ --border-color: var(--ion-color-gray-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: var(--ion-color-gray-100);
+ --border-color: var(--ion-color-gray-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: var(--ion-color-gray-150);
+ --border-color: var(--ion-color-gray-750);
}
:host(.textarea-fill-solid) .textarea-wrapper {
diff --git a/core/src/components/textarea/textarea.native.scss b/core/src/components/textarea/textarea.native.scss
index b0d3c36ec2e..8aefaf81905 100644
--- a/core/src/components/textarea/textarea.native.scss
+++ b/core/src/components/textarea/textarea.native.scss
@@ -72,14 +72,14 @@
// ----------------------------------------------------------------
.textarea-bottom .helper-text {
- color: globals.$text-color-step-300;
+ color: var(--ion-color-gray-700);
}
// Textarea Max Length Counter
// ----------------------------------------------------------------
.textarea-bottom .counter {
- color: globals.$text-color-step-300;
+ color: var(--ion-color-gray-700);
padding-inline-start: 16px;
}
diff --git a/core/src/components/toast/toast.ios.vars.scss b/core/src/components/toast/toast.ios.vars.scss
index 6200099d3d1..dd2cd381c34 100644
--- 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: var(--ion-color-gray-50);
/// @prop - Background Color alpha of the toast wrapper when translucent
$toast-ios-translucent-background-color-alpha: 0.8;
@@ -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: var(--ion-color-gray-850);
/// @prop - Font size of the toast title
$toast-ios-header-font-weight: 500;
diff --git a/core/src/components/toast/toast.md.vars.scss b/core/src/components/toast/toast.md.vars.scss
index f0749a6f0eb..2e7ef2ee051 100644
--- 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: var(--ion-color-gray-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),
@@ -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: var(--ion-color-gray-50);
/// @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: var(--ion-color-gray-100);
/// @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);
diff --git a/core/src/components/toggle/toggle.native.scss b/core/src/components/toggle/toggle.native.scss
index c71397efddb..2e382e53a5d 100644
--- a/core/src/components/toggle/toggle.native.scss
+++ b/core/src/components/toggle/toggle.native.scss
@@ -42,7 +42,7 @@
}
.toggle-bottom .helper-text {
- color: $text-color-step-300;
+ color: var(--ion-color-gray-700);
}
// Input Label
diff --git a/core/src/css/ionic-swiper.scss b/core/src/css/ionic-swiper.scss
index f87583dc417..41c26fc50ea 100644
--- a/core/src/css/ionic-swiper.scss
+++ b/core/src/css/ionic-swiper.scss
@@ -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: var(--ion-color-gray-200);
--bullet-background-active: ion-color(primary, base);
--progress-bar-background: rgba($text-color-rgb, 0.25);
--progress-bar-background-active: ion-color(primary, shade);
diff --git a/core/src/themes/base/dark.tokens.primitives.ts b/core/src/themes/base/dark.tokens.primitives.ts
new file mode 100644
index 00000000000..91a72249842
--- /dev/null
+++ b/core/src/themes/base/dark.tokens.primitives.ts
@@ -0,0 +1,7 @@
+import { generateColorSteps } from '../../utils/theme';
+
+// TODO: ADD TYPE
+export const darkPrimitiveColors = {
+ // TODO: Update hex values to use the text color variable and background color variable
+ gray: generateColorSteps('#ffffff', '#000', true),
+};
diff --git a/core/src/themes/base/dark.tokens.ts b/core/src/themes/base/dark.tokens.ts
index 1b611610c66..0a3d5ef1ea6 100644
--- a/core/src/themes/base/dark.tokens.ts
+++ b/core/src/themes/base/dark.tokens.ts
@@ -1,6 +1,8 @@
import { mix } from '../../utils/theme';
import type { DarkTheme } from '../themes.interfaces';
+import { darkPrimitiveColors } from './dark.tokens.primitives';
+
const colors = {
primary: '#4d8dff',
secondary: '#46b1ff',
@@ -11,6 +13,7 @@ const colors = {
light: '#222428',
medium: '#989aa2',
dark: '#f4f5f8',
+ ...darkPrimitiveColors,
};
export const darkTheme: DarkTheme = {
@@ -160,6 +163,7 @@ export const darkTheme: DarkTheme = {
tint: mix('#000', colors.dark, '12%'),
},
},
+ gray: colors.gray,
},
backgroundColor: '#000000',
@@ -218,5 +222,11 @@ export const darkTheme: DarkTheme = {
IonItem: {
background: '#000000',
},
+ IonBreadcrumb: {
+ separatorColor: colors.gray['550']!,
+ },
+ IonDatetimeButton: {
+ bg: colors.gray['300']!,
+ },
},
};
diff --git a/core/src/themes/base/default.tokens.primitives.ts b/core/src/themes/base/default.tokens.primitives.ts
new file mode 100644
index 00000000000..d65970f43a7
--- /dev/null
+++ b/core/src/themes/base/default.tokens.primitives.ts
@@ -0,0 +1,9 @@
+import { generateColorSteps } from '../../utils/theme';
+
+// TODO: ADD TYPE
+export const defaultPrimitiveColors = {
+ // TODO: Update hex values to use the text color variable and background color variable
+ gray: generateColorSteps('#fff', '#000'),
+ white: '#ffffff',
+ black: '#000000',
+};
diff --git a/core/src/themes/base/default.tokens.ts b/core/src/themes/base/default.tokens.ts
index 6df6efb9e6f..5ae2ed08047 100644
--- a/core/src/themes/base/default.tokens.ts
+++ b/core/src/themes/base/default.tokens.ts
@@ -1,6 +1,7 @@
import type { DefaultTheme } from '../themes.interfaces';
import { darkTheme } from './dark.tokens';
+import { defaultPrimitiveColors } from './default.tokens.primitives';
import { lightTheme } from './light.tokens';
export const defaultTheme: DefaultTheme = {
@@ -160,4 +161,8 @@ export const defaultTheme: DefaultTheme = {
xl: '2',
xxl: '2.4',
},
+
+ color: {
+ ...defaultPrimitiveColors,
+ },
};
diff --git a/core/src/themes/base/light.tokens.ts b/core/src/themes/base/light.tokens.ts
index f584b3279c7..ba333a41cf2 100644
--- a/core/src/themes/base/light.tokens.ts
+++ b/core/src/themes/base/light.tokens.ts
@@ -160,4 +160,12 @@ export const lightTheme: LightTheme = {
},
},
},
+ components: {
+ IonBreadcrumb: {
+ separatorColor: '#73849a',
+ },
+ IonDatetimeButton: {
+ bg: '#edeef0',
+ },
+ },
};
diff --git a/core/src/themes/ionic/dark.tokens.ts b/core/src/themes/ionic/dark.tokens.ts
index 8e7222b581a..c9fddf6f492 100644
--- a/core/src/themes/ionic/dark.tokens.ts
+++ b/core/src/themes/ionic/dark.tokens.ts
@@ -3,4 +3,10 @@ import type { DarkTheme } from '../themes.interfaces';
export const darkTheme: DarkTheme = {
...baseDarkTheme,
+
+ components: {
+ IonDatetimeButton: {
+ bg: '#595959',
+ },
+ },
};
diff --git a/core/src/themes/ionic/light.tokens.ts b/core/src/themes/ionic/light.tokens.ts
index 94c96baeb90..001cc3106bd 100644
--- a/core/src/themes/ionic/light.tokens.ts
+++ b/core/src/themes/ionic/light.tokens.ts
@@ -19,5 +19,8 @@ export const lightTheme: LightTheme = {
colorSelected: 'var(--ion-tab-bar-color-selected, #0d4bc3)',
borderColor: 'var(--ion-tab-bar-border-color, transparent)',
},
+ IonBreadcrumb: {
+ separatorColor: '#a0a0a0',
+ },
},
};
diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts
index 345cdef3a51..217282fda54 100644
--- a/core/src/themes/ios/dark.tokens.ts
+++ b/core/src/themes/ios/dark.tokens.ts
@@ -1,6 +1,11 @@
import { darkTheme as baseDarkTheme } from '../base/dark.tokens';
+import { darkPrimitiveColors as baseDarkPrimitiveColors } from '../base/dark.tokens.primitives';
import type { DarkTheme } from '../themes.interfaces';
+const colors = {
+ gray: baseDarkPrimitiveColors.gray,
+};
+
export const darkTheme: DarkTheme = {
...baseDarkTheme,
@@ -51,17 +56,49 @@ export const darkTheme: DarkTheme = {
950: '#0d0d0d',
},
+ color: {
+ gray: colors.gray,
+ },
+
components: {
IonCard: {
background: '#1c1c1d',
},
IonItem: {
background: '#000000',
+ paragraphTextColor: colors.gray['450']!,
},
IonModal: {
- background: 'var(--ion-background-color-step-100)',
- toolbarBackground: 'var(--ion-background-color-step-150)',
- toolbarBorderColor: 'var(--ion-background-color-step-250)',
+ background: 'var(--ion-color-gray-100)',
+ toolbarBackground: 'var(--ion-color-gray-150)',
+ toolbarBorderColor: 'var(--ion-color-gray-250)',
+ handleBg: colors.gray['350']!,
+ },
+ IonDatetime: {
+ bg: colors.gray['950']!,
+ timeBodyBg: colors.gray['300']!,
+ },
+ IonBreadcrumb: {
+ color: colors.gray['850']!,
+ bgFocused: colors.gray['50']!,
+ iconColor: colors.gray['400']!,
+ iconColorActive: colors.gray['850']!,
+ iconColorFocused: colors.gray['750']!, // Available only in iOS
+ indicatorBg: colors.gray['100']!,
+ indicatorBgFocused: colors.gray['150']!,
+ separatorColor: colors.gray['550']!,
+ },
+ IonPicker: {
+ highlightBg: colors.gray['150']!, // Available only in iOS
+ },
+ IonRange: {
+ bg: colors.gray['900']!, // Available only in iOS
+ },
+ IonRefresher: {
+ nativeSpinnerColor: colors.gray['450']!, // Available only in iOS
+ },
+ IonSegmentButton: {
+ checkedIndicatorBg: colors.gray['350']!, // Available only in iOS
},
},
};
diff --git a/core/src/themes/ios/light.tokens.ts b/core/src/themes/ios/light.tokens.ts
index b7679b9f553..8a8340dac2e 100644
--- a/core/src/themes/ios/light.tokens.ts
+++ b/core/src/themes/ios/light.tokens.ts
@@ -1,3 +1,46 @@
+import { defaultPrimitiveColors } from '../base/default.tokens.primitives';
import type { LightTheme } from '../themes.interfaces';
-export const lightTheme: LightTheme = {};
+const colors = {
+ gray: defaultPrimitiveColors.gray,
+};
+
+export const lightTheme: LightTheme = {
+ color: {
+ gray: colors.gray,
+ },
+ components: {
+ IonDatetime: {
+ bg: colors.gray['950']!,
+ timeBodyBg: '#edeef0',
+ },
+ IonBreadcrumb: {
+ color: '#2d4665',
+ bgFocused: 'rgba(233, 237, 243, 0.7)',
+ iconColor: '#92a0b3',
+ iconColorActive: '#242d39',
+ iconColorFocused: '#445b78', // Available only in iOS
+ indicatorBg: '#e9edf3',
+ indicatorBgFocused: '#d9e0ea',
+ separatorColor: '#73849a',
+ },
+ IonItem: {
+ paragraphTextColor: '#a3a3a3',
+ },
+ IonModal: {
+ handleBg: '#c0c0be',
+ },
+ IonPicker: {
+ highlightBg: '#eeeeef', // Available only in iOS
+ },
+ IonRange: {
+ bg: colors.gray['100']!, // Available only in iOS
+ },
+ IonRefresher: {
+ nativeSpinnerColor: '#747577', // Available only in iOS
+ },
+ IonSegmentButton: {
+ checkedIndicatorBg: defaultPrimitiveColors.white, // Available only in iOS
+ },
+ },
+};
diff --git a/core/src/themes/md/dark.tokens.ts b/core/src/themes/md/dark.tokens.ts
index 80b9d9116e1..504a20563fa 100644
--- a/core/src/themes/md/dark.tokens.ts
+++ b/core/src/themes/md/dark.tokens.ts
@@ -1,6 +1,11 @@
+import { generateColorSteps } from '../../utils/theme';
import { darkTheme as baseDarkTheme } from '../base/dark.tokens';
import type { DarkTheme } from '../themes.interfaces';
+const colors = {
+ gray: generateColorSteps('#ffffff', '#121212', true),
+};
+
export const darkTheme: DarkTheme = {
...baseDarkTheme,
@@ -53,6 +58,11 @@ export const darkTheme: DarkTheme = {
950: '#1e1e1e',
},
+ color: {
+ // TODO: Update hex values to use the text color variable and background color variable
+ gray: colors.gray,
+ },
+
components: {
IonCard: {
background: '#1e1e1e',
@@ -66,5 +76,29 @@ export const darkTheme: DarkTheme = {
IonTabBar: {
background: '#1f1f1f',
},
+ IonDatetime: {
+ bg: colors.gray['100']!,
+ timeBodyBg: colors.gray['300']!,
+ },
+ IonBreadcrumb: {
+ color: colors.gray['600']!,
+ bgFocused: colors.gray['50']!,
+ iconColor: colors.gray['550']!,
+ iconColorActive: colors.gray['850']!,
+ indicatorBg: colors.gray['100']!,
+ indicatorBgFocused: colors.gray['150']!,
+ colorFocused: colors.gray['800']!, // Available only in md
+ separatorColor: colors.gray['550']!,
+ },
+ IonDatetimeButton: {
+ bg: colors.gray['300']!,
+ },
+ IonModal: {
+ handleBg: colors.gray['350']!,
+ },
+ IonRefresher: {
+ nativeSpinnerBorder: colors.gray['200']!, // Available only in md
+ nativeSpinnerBg: colors.gray['250']!, // Available only in md
+ },
},
};
diff --git a/core/src/themes/md/light.tokens.ts b/core/src/themes/md/light.tokens.ts
index b7679b9f553..abbf4115fde 100644
--- a/core/src/themes/md/light.tokens.ts
+++ b/core/src/themes/md/light.tokens.ts
@@ -1,3 +1,28 @@
+import { defaultPrimitiveColors } from '../base/default.tokens.primitives';
import type { LightTheme } from '../themes.interfaces';
-export const lightTheme: LightTheme = {};
+export const lightTheme: LightTheme = {
+ components: {
+ IonDatetime: {
+ bg: defaultPrimitiveColors.white,
+ timeBodyBg: '#edeef0',
+ },
+ IonBreadcrumb: {
+ color: '#677483',
+ bgFocused: defaultPrimitiveColors.white,
+ iconColor: '#7d8894',
+ iconColorActive: '#222d3a',
+ indicatorBg: '#eef1f3',
+ indicatorBgFocused: '#dfe5e8',
+ colorFocused: '#35404e', // Available only in md
+ separatorColor: '#73849a',
+ },
+ IonModal: {
+ handleBg: '#c0c0be',
+ },
+ IonRefresher: {
+ nativeSpinnerBorder: '#ececec', // Available only in md
+ nativeSpinnerBg: '#ffffff', // Available only in md
+ },
+ },
+};
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..3dfc868bc6c
--- /dev/null
+++ b/core/src/themes/test/steps/index.html
@@ -0,0 +1,89 @@
+
+
+
+
+ Themes - Steps
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Themes - Steps
+
+
+
+
+ Gray
+
+
+
+
+
+
+
diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts
index 6e5e8157e29..d680b78d44d 100644
--- a/core/src/themes/themes.interfaces.ts
+++ b/core/src/themes/themes.interfaces.ts
@@ -1,3 +1,4 @@
+import type { PredefinedColors } from '../interface';
import type { IonicConfig } from '../utils/config';
// Platform-specific theme
@@ -218,24 +219,7 @@ export type BaseTheme = {
};
// COLOR TOKENS
- color?: {
- [key: string]: {
- bold: {
- base: string;
- contrast: string;
- foreground: string;
- shade: string;
- tint: string;
- };
- subtle: {
- base: string;
- contrast: string;
- foreground: string;
- shade: string;
- tint: string;
- };
- };
- };
+ color?: Colors;
// PLATFORM SPECIFIC OVERRIDES
ios?: PlatformTheme;
@@ -261,3 +245,34 @@ export type DefaultTheme = BaseTheme & {
config?: IonicConfig;
};
+
+// Semantic color value structure
+type SemanticColorValue = {
+ base: string;
+ contrast: string;
+ foreground: string;
+ shade: string;
+ tint: string;
+};
+
+// Semantic color hue value structure
+type SemanticHue = {
+ bold?: SemanticColorValue;
+ subtle?: SemanticColorValue;
+};
+
+// Number string keys structure
+export type NumberStringKeys = {
+ // Enforce keys are strings of numbers (like 50, '50', etc.)
+ [K in number as `${K}`]?: string;
+};
+
+// Primitive color keys
+export type PrimitiveColors = 'gray' | 'black' | 'white';
+
+// Colors interface
+export type Colors = {
+ [K in PredefinedColors]?: SemanticHue;
+} & {
+ [K in PrimitiveColors]?: NumberStringKeys;
+};
diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts
index aeab9823ec2..3d0625aa375 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';
@@ -471,3 +472,37 @@ export const mix = (baseColor: string, mixColor: string, weight: string): string
const toHex = (n: number) => n.toString(16).padStart(2, '0');
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
};
+
+/**
+ * Generates a color scale object by mixing a light and dark color.
+ *
+ * This function creates ten distinct shade levels (50, 100, 150, ..., 950)
+ * by mixing the light color into the dark color using mix percentages
+ * that increment in steps of 5%.
+ *
+ * The final output is an object where keys are the shade levels (50-950)
+ * and values are the resulting mixed hex codes.
+ *
+ * @param {string} lightColor - The lighter base color hex value.
+ * @param {string} darkColor - The darker base color hex value.
+ * @param {boolean} isInverted - If true, generates the scale in reverse (dark to light).
+ * @returns {NumberStringKeys} An object of color shades.
+ *
+ * @example
+ * mix('#ffffff', '#000000', 5%) results in the color for key '50'
+ * mix('#ffffff', '#000000', 95%) results in the color for key '950'
+ */
+export const generateColorSteps = (lightColor: string, darkColor: string, isInverted = false): NumberStringKeys => {
+ const colorSteps: NumberStringKeys = {
+ 0: isInverted ? darkColor : lightColor,
+ 1000: isInverted ? lightColor : darkColor,
+ };
+
+ for (let i = 50; i <= 950; i += 50) {
+ const weight = isInverted ? `${100 - i / 10}%` : `${i / 10}%`;
+
+ colorSteps[i.toString() as keyof NumberStringKeys] = mix(lightColor, darkColor, weight);
+ }
+
+ return colorSteps;
+};
diff --git a/docs/sass-guidelines.md b/docs/sass-guidelines.md
index ac0a91d728a..c3a64f6ce94 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-color-gray-100, #f9f9f9)
);
```
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..a01129c7fd2 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,6 @@
h2 {
font-size: 12px;
font-weight: normal;
- color: var(--ion-color-step-600);
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..e79c88cddaf 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,6 @@
h2 {
font-size: 12px;
font-weight: normal;
- color: var(--ion-color-step-600);
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..d853b6b3a92 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-color-gray-50: #0d0d0d;
+ --ion-color-gray-100: #1a1a1a;
+ --ion-color-gray-150: #262626;
+ --ion-color-gray-200: #333333;
+ --ion-color-gray-250: #404040;
+ --ion-color-gray-300: #4d4d4d;
+ --ion-color-gray-350: #595959;
+ --ion-color-gray-400: #666666;
+ --ion-color-gray-450: #737373;
+ --ion-color-gray-500: #808080;
+ --ion-color-gray-550: #8c8c8c;
+ --ion-color-gray-600: #999999;
+ --ion-color-gray-650: #a6a6a6;
+ --ion-color-gray-700: #b3b3b3;
+ --ion-color-gray-750: #bfbfbf;
+ --ion-color-gray-800: #cccccc;
+ --ion-color-gray-850: #d9d9d9;
+ --ion-color-gray-900: #e6e6e6;
+ --ion-color-gray-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-color-gray-50: #1e1e1e;
+ --ion-color-gray-100: #2a2a2a;
+ --ion-color-gray-150: #363636;
+ --ion-color-gray-200: #414141;
+ --ion-color-gray-250: #4d4d4d;
+ --ion-color-gray-300: #595959;
+ --ion-color-gray-350: #656565;
+ --ion-color-gray-400: #717171;
+ --ion-color-gray-450: #7d7d7d;
+ --ion-color-gray-500: #898989;
+ --ion-color-gray-550: #949494;
+ --ion-color-gray-600: #a0a0a0;
+ --ion-color-gray-650: #acacac;
+ --ion-color-gray-700: #b8b8b8;
+ --ion-color-gray-750: #c4c4c4;
+ --ion-color-gray-800: #d0d0d0;
+ --ion-color-gray-850: #dbdbdb;
+ --ion-color-gray-900: #e7e7e7;
+ --ion-color-gray-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..ea79b6d4eb4 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-color-gray-50: #0d0d0d;
+ --ion-color-gray-100: #1a1a1a;
+ --ion-color-gray-150: #262626;
+ --ion-color-gray-200: #333333;
+ --ion-color-gray-250: #404040;
+ --ion-color-gray-300: #4d4d4d;
+ --ion-color-gray-350: #595959;
+ --ion-color-gray-400: #666666;
+ --ion-color-gray-450: #737373;
+ --ion-color-gray-500: #808080;
+ --ion-color-gray-550: #8c8c8c;
+ --ion-color-gray-600: #999999;
+ --ion-color-gray-650: #a6a6a6;
+ --ion-color-gray-700: #b3b3b3;
+ --ion-color-gray-750: #bfbfbf;
+ --ion-color-gray-800: #cccccc;
+ --ion-color-gray-850: #d9d9d9;
+ --ion-color-gray-900: #e6e6e6;
+ --ion-color-gray-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-color-gray-100);
+ --ion-toolbar-background: var(--ion-color-gray-150);
+ --ion-toolbar-border-color: var(--ion-color-gray-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-color-gray-50: #1e1e1e;
+ --ion-color-gray-100: #2a2a2a;
+ --ion-color-gray-150: #363636;
+ --ion-color-gray-200: #414141;
+ --ion-color-gray-250: #4d4d4d;
+ --ion-color-gray-300: #595959;
+ --ion-color-gray-350: #656565;
+ --ion-color-gray-400: #717171;
+ --ion-color-gray-450: #7d7d7d;
+ --ion-color-gray-500: #898989;
+ --ion-color-gray-550: #949494;
+ --ion-color-gray-600: #a0a0a0;
+ --ion-color-gray-650: #acacac;
+ --ion-color-gray-700: #b8b8b8;
+ --ion-color-gray-750: #c4c4c4;
+ --ion-color-gray-800: #d0d0d0;
+ --ion-color-gray-850: #dbdbdb;
+ --ion-color-gray-900: #e7e7e7;
+ --ion-color-gray-950: #f3f3f3;
--ion-item-background: #1e1e1e;