diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss index fe9bba89903..9bb5a1c1d8d 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: #{$text-color-150}; --color: #{$action-sheet-ios-title-color}; text-align: $action-sheet-ios-text-align; diff --git a/core/src/components/action-sheet/action-sheet.ios.vars.scss b/core/src/components/action-sheet/action-sheet.ios.vars.scss index 0d2302b7183..a5c524724f4 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: $text-color-600; /// @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-150, $background-color); /// @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..c8868ae16ee 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: $text-color-150; /// @prop - Font size of the action sheet button $action-sheet-md-button-font-size: dynamic-font(16px); diff --git a/core/src/components/alert/alert.ios.vars.scss b/core/src/components/alert/alert.ios.vars.scss index 2cb4fca98af..804d98ba35c 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: $text-color-400; /// @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: $gray-color-250; /// @prop - Border of the alert input $alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color; diff --git a/core/src/components/alert/alert.md.vars.scss b/core/src/components/alert/alert.md.vars.scss index ce1fb7304dd..ff061920524 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: $text-color-450; /// @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: $gray-color-150; /// @prop - Text color of the alert input $alert-md-input-text-color: $text-color; @@ -209,7 +209,7 @@ $alert-md-radio-border-style: solid; $alert-md-radio-border-radius: 50%; /// @prop - Border color of the alert radio when off -$alert-md-radio-border-color-off: $background-color-step-550; +$alert-md-radio-border-color-off: $gray-color-550; /// @prop - Border color of the alert radio when on $alert-md-radio-border-color-on: $alert-md-button-text-color; @@ -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; @@ -281,7 +281,7 @@ $alert-md-checkbox-border-style: solid; $alert-md-checkbox-border-radius: 2px; /// @prop - Border color of the checkbox in the alert when off -$alert-md-checkbox-border-color-off: $background-color-step-550; +$alert-md-checkbox-border-color-off: $gray-color-550; /// @prop - Border color of the checkbox in the alert when on $alert-md-checkbox-border-color-on: $alert-md-button-text-color; @@ -323,7 +323,7 @@ $alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top; $alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end + 27px; /// @prop - Text color of the label for the checkbox in the alert -$alert-md-checkbox-label-text-color: $text-color-step-150; +$alert-md-checkbox-label-text-color: $text-color-150; /// @prop - Font size of the label for the checkbox in the alert $alert-md-checkbox-label-font-size: dynamic-font(16px); diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss index 9948a4127a9..c9cb68459d9 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: $gray-color-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..46b155cbe0c 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-color-text-150, #2d4665); /// @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-color-gray-50, rgba(233, 237, 243, 0.7)); /// @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-color-text-600, #92a0b3); /// @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-color-text-150, #242d39); /// @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-color-text-250, #445b78); /// @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-color-gray-100, #e9edf3); /// @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-color-gray-150, #d9e0ea); diff --git a/core/src/components/breadcrumb/breadcrumb.md.vars.scss b/core/src/components/breadcrumb/breadcrumb.md.vars.scss index 8c738a5e887..7c251153168 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-color-text-400, #677483); /// @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-color-text-200, #35404e); /// @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-color-gray-50, #fff); /// @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-color-text-450, #7d8894); /// @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-color-text-150, #222d3a); /// @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-color-gray-100, #eef1f3); /// @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-color-gray-150, #dfe5e8); diff --git a/core/src/components/breadcrumb/breadcrumb.vars.scss b/core/src/components/breadcrumb/breadcrumb.vars.scss index 4770b0b9e19..4a9003e6cf1 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-color-text-450, #73849a); 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..ae45298ed2b 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: $text-color-400; diff --git a/core/src/components/card-subtitle/card-subtitle.md.vars.scss b/core/src/components/card-subtitle/card-subtitle.md.vars.scss index 9cd7aa2d6a7..06fe62a61c6 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: $text-color-450; diff --git a/core/src/components/card-title/card-title.md.vars.scss b/core/src/components/card-title/card-title.md.vars.scss index 94f201df1d2..cf613defdfd 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: $text-color-150; diff --git a/core/src/components/checkbox/checkbox.native.scss b/core/src/components/checkbox/checkbox.native.scss index 4c9021f114f..59577b03086 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: $text-color-300; } // Label Placement - Start diff --git a/core/src/components/checkbox/test/validation/index.html b/core/src/components/checkbox/test/validation/index.html index e3f4bce5601..c8c6b2c4017 100644 --- a/core/src/components/checkbox/test/validation/index.html +++ b/core/src/components/checkbox/test/validation/index.html @@ -24,7 +24,7 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-color-gray-600); margin-top: 10px; margin-bottom: 5px; diff --git a/core/src/components/datetime-button/datetime-button.ios.scss b/core/src/components/datetime-button/datetime-button.ios.scss index 6a4d3eb1be8..451497a48c4 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: $text-color-400; } diff --git a/core/src/components/datetime-button/datetime-button.scss b/core/src/components/datetime-button/datetime-button.scss index 6defd0da9be..81bf88634a8 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-color-gray-300, #edeef0); color: $text-color; diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss index e49bdc3241b..249a3c60dc5 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: #{$text-color-400}; } :host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)), @@ -72,7 +72,7 @@ :host .calendar-days-of-week { @include padding(0, $datetime-ios-padding * 0.5, 0, $datetime-ios-padding * 0.5); - color: $text-color-step-700; + color: $text-color-700; font-size: dynamic-font-max(12px, 1.6); @@ -280,7 +280,7 @@ } :host .calendar-day.calendar-day-adjacent-day { - color: $text-color-step-700; + color: $text-color-700; } // Time / Header diff --git a/core/src/components/datetime/datetime.ios.vars.scss b/core/src/components/datetime/datetime.ios.vars.scss index c89e7674821..d971deb6b60 100644 --- a/core/src/components/datetime/datetime.ios.vars.scss +++ b/core/src/components/datetime/datetime.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Border color for dividers between header and footer -$datetime-ios-border-color: 0.55px solid globals.$background-color-step-200; +$datetime-ios-border-color: 0.55px solid globals.$gray-color-200; /// @prop - Padding for content $datetime-ios-padding: 16px; diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss index 6d00afa3d00..77145843a55 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-color-gray-100, #ffffff); --title-color: #{current-color(contrast)}; } @@ -40,7 +40,7 @@ // ----------------------------------- :host .calendar-action-buttons ion-button { - --color: #{$text-color-step-350}; + --color: #{$text-color-350}; } .calendar-month-year-toggle { @@ -50,7 +50,7 @@ background: transparent; - color: #{$text-color-step-350}; + color: #{$text-color-350}; z-index: 1; @@ -78,7 +78,7 @@ :host .calendar-days-of-week { @include padding(0px, 10px, 0px, 10px); - color: $text-color-step-500; + color: $text-color-500; font-size: $datetime-md-calendar-item-font-size; @@ -138,7 +138,7 @@ } :host .calendar-day.calendar-day-adjacent-day { - color: $text-color-step-500; + color: $text-color-500; } // Time / Header @@ -148,7 +148,7 @@ } :host .time-header { - color: #{$text-color-step-350}; + color: #{$text-color-350}; } // Month and Year diff --git a/core/src/components/datetime/datetime.native.scss b/core/src/components/datetime/datetime.native.scss index e000e207057..826a3a05dbd 100644 --- a/core/src/components/datetime/datetime.native.scss +++ b/core/src/components/datetime/datetime.native.scss @@ -93,7 +93,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-color-gray-300, #edeef0); 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..35ac311167f 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: $text-color-400; /// @prop - Color of the infinite scroll loading indicator text $infinite-scroll-ios-loading-text-color: $infinite-scroll-ios-loading-color; diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss index f1fca17e82e..37ebaac9f4c 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: $text-color-400; /// @prop - Color of the infinite scroll loading indicator text $infinite-scroll-md-loading-text-color: $infinite-scroll-md-loading-color; diff --git a/core/src/components/input-otp/input-otp.md.scss b/core/src/components/input-otp/input-otp.md.scss index eb21b802d3e..6001a3ba0f5 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: #{$gray-color-300}; } diff --git a/core/src/components/input-otp/input-otp.native.scss b/core/src/components/input-otp/input-otp.native.scss index daf2b3ff877..00a3b0285be 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: #{$gray-color-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: $text-color-300; 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: #{$gray-color-50}; + --background: #{$gray-color-50}; } // States // -------------------------------------------------- :host(.input-otp-disabled) { - --color: #{$text-color-step-650}; + --color: #{$text-color-650}; } :host(.input-otp-fill-outline.input-otp-disabled) { - --background: #{$background-color-step-50}; - --border-color: #{$background-color-step-100}; + --background: #{$gray-color-50}; + --border-color: #{$gray-color-100}; } :host(.input-otp-fill-outline.input-otp-readonly) { - --background: #{$background-color-step-50}; + --background: #{$gray-color-50}; } :host(.input-otp-fill-solid.input-otp-disabled), :host(.input-otp-fill-solid.input-otp-readonly) { - --border-color: #{$background-color-step-100}; - --background: #{$background-color-step-100}; + --border-color: #{$gray-color-100}; + --background: #{$gray-color-100}; } // Colors diff --git a/core/src/components/input/input.md.outline.scss b/core/src/components/input/input.md.outline.scss index c9577e16676..c07e97454b6 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: #{$gray-color-300}; --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; @@ -31,7 +31,7 @@ */ @media (any-hover: hover) { :host(.input-fill-outline:hover) { - --border-color: #{$background-color-step-750}; + --border-color: #{$gray-color-750}; } } diff --git a/core/src/components/input/input.md.solid.scss b/core/src/components/input/input.md.solid.scss index f3df1521515..6ae2728541e 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: #{$gray-color-50}; + --border-color: #{$gray-color-500}; --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; @@ -44,8 +44,8 @@ */ @media (any-hover: hover) { :host(.input-fill-solid:hover) { - --background: #{$background-color-step-100}; - --border-color: #{$background-color-step-750}; + --background: #{$gray-color-100}; + --border-color: #{$gray-color-750}; } } @@ -54,8 +54,8 @@ * much darker on focus. */ :host(.input-fill-solid.has-focus) { - --background: #{$background-color-step-150}; - --border-color: #{$background-color-step-750}; + --background: #{$gray-color-150}; + --border-color: #{$gray-color-750}; } :host(.input-fill-solid) .input-wrapper { diff --git a/core/src/components/input/input.native.scss b/core/src/components/input/input.native.scss index 4ac5d333b8b..9955824cc26 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: $text-color-400; } /** @@ -108,14 +108,14 @@ // ---------------------------------------------------------------- .input-bottom .helper-text { - color: $text-color-step-300; + color: $text-color-300; } // Input Max Length Counter // ---------------------------------------------------------------- .input-bottom .counter { - color: $text-color-step-300; + color: $text-color-300; padding-inline-start: 16px; } diff --git a/core/src/components/input/test/validation/index.html b/core/src/components/input/test/validation/index.html index 2a6ad89e13f..e12b8e5320b 100644 --- a/core/src/components/input/test/validation/index.html +++ b/core/src/components/input/test/validation/index.html @@ -24,7 +24,7 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-color-gray-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..2570bab6c92 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: $gray-color-100; /// @prop - Color for the divider -$item-divider-ios-color: $text-color-step-150; +$item-divider-ios-color: $text-color-150; /// @prop - Padding start for the divider $item-divider-ios-padding-start: $item-ios-padding-start; diff --git a/core/src/components/item-divider/item-divider.md.vars.scss b/core/src/components/item-divider/item-divider.md.vars.scss index 97a58f09b24..c8597fa3191 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: $text-color-600; /// @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..5bb07328bb3 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-color-text-550, #a3a3a3); /// @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..9ac6ce221fa 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: $text-color-400; /// @prop - Font size of the item $item-md-font-size: 16px; diff --git a/core/src/components/label/label.ios.vars.scss b/core/src/components/label/label.ios.vars.scss index 48cadf30ce9..b217900a3b6 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: $text-color-600; diff --git a/core/src/components/list-header/list-header.ios.vars.scss b/core/src/components/list-header/list-header.ios.vars.scss index 44b3a35693c..64066927b7c 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: $text-color-150; /// @prop - Background color of the list header $list-header-ios-background-color: transparent; diff --git a/core/src/components/loading/loading.ios.vars.scss b/core/src/components/loading/loading.ios.vars.scss index 05cd183091a..62f4dfd022d 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: $text-color-400; /// @prop - Filter of the translucent loading $loading-ios-translucent-filter: saturate(180%) blur(20px); diff --git a/core/src/components/loading/loading.md.vars.scss b/core/src/components/loading/loading.md.vars.scss index fcdaa57fc00..9d2d63f11d2 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: $text-color-150; /// @prop - Background of the loading wrapper -$loading-md-background: $background-color-step-50; +$loading-md-background: $gray-color-50; /// @prop - Box shadow color of the loading wrapper $loading-md-box-shadow-color: rgba(0, 0, 0, 0.4); diff --git a/core/src/components/modal/modal.native.scss b/core/src/components/modal/modal.native.scss index b94d65d0cd9..9e173d1f216 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-color-gray-350, #c0c0be); &::before { /** diff --git a/core/src/components/note/note.ios.vars.scss b/core/src/components/note/note.ios.vars.scss index 75836d251b7..2ff293b4c53 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: $text-color-650; /// @prop - Font size of the note $note-ios-font-size: dynamic-font-min(0.875, 16px); diff --git a/core/src/components/note/note.md.vars.scss b/core/src/components/note/note.md.vars.scss index b733c522f8c..c5eca028379 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: $text-color-400; /// @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..74a96d4c01b 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-color-gray-150, #eeeeef)); } diff --git a/core/src/components/popover/popover.ios.vars.scss b/core/src/components/popover/popover.ios.vars.scss index 195d3145423..615edc1114f 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 $gray-color-100; diff --git a/core/src/components/progress-bar/progress-bar.ios.scss b/core/src/components/progress-bar/progress-bar.ios.scss index 2c8c60fbcdb..7d5f4928825 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: #{$gray-color-100}; } diff --git a/core/src/components/radio-group/radio-group.native.scss b/core/src/components/radio-group/radio-group.native.scss index 8cce2004169..51aeb089375 100644 --- a/core/src/components/radio-group/radio-group.native.scss +++ b/core/src/components/radio-group/radio-group.native.scss @@ -13,5 +13,5 @@ } .radio-group-top .helper-text { - color: $text-color-step-300; + color: $text-color-300; } diff --git a/core/src/components/radio-group/test/validation/index.html b/core/src/components/radio-group/test/validation/index.html index 49fdbf1ebbc..360b4f767a6 100644 --- a/core/src/components/radio-group/test/validation/index.html +++ b/core/src/components/radio-group/test/validation/index.html @@ -24,7 +24,7 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-color-gray-600); margin-top: 10px; margin-bottom: 5px; diff --git a/core/src/components/range/range.ios.vars.scss b/core/src/components/range/range.ios.vars.scss index dace5a00686..19ba9fa68cd 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-color-gray-900, #e6e6e6); /// @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..31aaa1d801c 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: $gray-color-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..7fa6d91c39f 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-color-gray-450, #747577); /// @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..9bf526e7dee 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-color-gray-200, #ececec); /// @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-color-gray-250, #ffffff); /// @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..620b04b706b 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: $text-color-400; /// @prop - Minimum Height of the searchbar input $searchbar-ios-input-min-height: 36px; @@ -56,7 +56,7 @@ $searchbar-ios-cancel-transition: all 300ms ease; $searchbar-ios-input-icon-opacity: 0.5; /// @prop - Color of the searchbar input clear icon -$searchbar-ios-input-clear-icon-color: $text-color-step-400; +$searchbar-ios-input-clear-icon-color: $text-color-400; /// @prop - Size of the searchbar input clear icon $searchbar-ios-input-clear-icon-size: dynamic-font(18px); diff --git a/core/src/components/searchbar/searchbar.md.vars.scss b/core/src/components/searchbar/searchbar.md.vars.scss index 12381b3c912..7b7d6d90091 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: $text-color-100; /// @prop - Background color of the searchbar cancel button $searchbar-md-cancel-button-background-color: transparent; @@ -28,7 +28,7 @@ $searchbar-md-cancel-button-background-color: transparent; $searchbar-md-cancel-button-font-size: 1.5em; /// @prop - Color of the searchbar input search icon -$searchbar-md-input-search-icon-color: $text-color-step-400; +$searchbar-md-input-search-icon-color: $text-color-400; /// @prop - Size of the searchbar input search icon $searchbar-md-input-search-icon-size: dynamic-font(21px); @@ -44,7 +44,7 @@ $searchbar-md-input-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px 0 1px 5px 0 rgba(0, 0, 0, 0.12); /// @prop - Color of the searchbar input text -$searchbar-md-input-text-color: $text-color-step-150; +$searchbar-md-input-text-color: $text-color-150; /// @prop - Background of the searchbar input $searchbar-md-input-background-color: $background-color; diff --git a/core/src/components/segment-button/segment-button.ios.vars.scss b/core/src/components/segment-button/segment-button.ios.vars.scss index b505849fa34..804600eee72 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-color-gray-350, $background-color); /// @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..be4ccff33c9 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: #{$text-color-350}; } // 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..bb2f579e340 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: #{$gray-color-300}; --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; @@ -33,7 +33,7 @@ */ @media (any-hover: hover) { :host(.select-fill-outline:hover) { - --border-color: #{$background-color-step-750}; + --border-color: #{$gray-color-750}; } } diff --git a/core/src/components/select/select.md.solid.scss b/core/src/components/select/select.md.solid.scss index 12a42d2222f..0de6004d77a 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: #{$gray-color-50}; + --border-color: #{$gray-color-500}; --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; @@ -47,8 +47,8 @@ */ @media (any-hover: hover) { :host(.select-fill-solid:hover) { - --background: #{$background-color-step-100}; - --border-color: #{$background-color-step-750}; + --background: #{$gray-color-100}; + --border-color: #{$gray-color-750}; } } @@ -58,7 +58,7 @@ */ :host(.select-fill-solid.select-expanded), :host(.select-fill-solid.has-focus) { - --background: #{$background-color-step-150}; + --background: #{$gray-color-150}; --border-color: var(--highlight-color); } diff --git a/core/src/components/select/select.md.vars.scss b/core/src/components/select/select.md.vars.scss index 3b466d495af..89bc09203b4 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: $text-color-500; /// @prop - The amount of whitespace to display on either side of the floating label $select-md-floating-label-padding: 4px; diff --git a/core/src/components/select/select.native.scss b/core/src/components/select/select.native.scss index 876fcb1579f..c4c726c3637 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: $text-color-300; } // Select Text diff --git a/core/src/components/select/test/validation/index.html b/core/src/components/select/test/validation/index.html index 74d0586bd77..665ba4f54db 100644 --- a/core/src/components/select/test/validation/index.html +++ b/core/src/components/select/test/validation/index.html @@ -24,7 +24,7 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-color-gray-600); margin-top: 10px; margin-bottom: 5px; diff --git a/core/src/components/textarea/test/validation/index.html b/core/src/components/textarea/test/validation/index.html index 6f977a7d915..113f5778f3f 100644 --- a/core/src/components/textarea/test/validation/index.html +++ b/core/src/components/textarea/test/validation/index.html @@ -24,7 +24,7 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-color-gray-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..9da7c6681e1 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: #{$gray-color-300}; --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; @@ -33,7 +33,7 @@ */ @media (any-hover: hover) { :host(.textarea-fill-outline:hover) { - --border-color: #{$background-color-step-750}; + --border-color: #{$gray-color-750}; } } diff --git a/core/src/components/textarea/textarea.md.solid.scss b/core/src/components/textarea/textarea.md.solid.scss index 9d831daf0e0..2918691b501 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: #{$gray-color-50}; + --border-color: #{$gray-color-500}; --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; @@ -46,8 +46,8 @@ */ @media (any-hover: hover) { :host(.textarea-fill-solid:hover) { - --background: #{$background-color-step-100}; - --border-color: #{$background-color-step-750}; + --background: #{$gray-color-100}; + --border-color: #{$gray-color-750}; } } @@ -56,8 +56,8 @@ * much darker on focus. */ :host(.textarea-fill-solid.has-focus) { - --background: #{$background-color-step-150}; - --border-color: #{$background-color-step-750}; + --background: #{$gray-color-150}; + --border-color: #{$gray-color-750}; } :host(.textarea-fill-solid) .textarea-wrapper { diff --git a/core/src/components/textarea/textarea.native.scss b/core/src/components/textarea/textarea.native.scss index b0d3c36ec2e..0ec2ed17798 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: 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; } diff --git a/core/src/components/toast/toast.ios.vars.scss b/core/src/components/toast/toast.ios.vars.scss index 6200099d3d1..8915fc34663 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: $gray-color-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: $text-color-150; /// @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..58c256b3dc3 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: $gray-color-800; /// @prop - Box shadow of the toast $toast-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), @@ -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); diff --git a/core/src/components/toggle/test/validation/index.html b/core/src/components/toggle/test/validation/index.html index 54932edeb08..c1556491875 100644 --- a/core/src/components/toggle/test/validation/index.html +++ b/core/src/components/toggle/test/validation/index.html @@ -24,7 +24,7 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-color-gray-600); margin-top: 10px; margin-bottom: 5px; diff --git a/core/src/components/toggle/toggle.native.scss b/core/src/components/toggle/toggle.native.scss index c71397efddb..2e994279fe5 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: $text-color-300; } // Input Label diff --git a/core/src/css/ionic-swiper.scss b/core/src/css/ionic-swiper.scss index f87583dc417..8e9de35bcaa 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: $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); diff --git a/core/src/themes/base/dark.tokens.ts b/core/src/themes/base/dark.tokens.ts index 1b611610c66..25111388669 100644 --- a/core/src/themes/base/dark.tokens.ts +++ b/core/src/themes/base/dark.tokens.ts @@ -167,50 +167,6 @@ export const darkTheme: DarkTheme = { textColor: '#ffffff', textColorRgb: '255, 255, 255', - backgroundColorStep: { - 50: '#0d0d0d', - 100: '#1a1a1a', - 150: '#262626', - 200: '#333333', - 250: '#404040', - 300: '#4d4d4d', - 350: '#595959', - 400: '#666666', - 450: '#737373', - 500: '#898989', - 550: '#8c8c8c', - 600: '#999999', - 650: '#a6a6a6', - 700: '#b3b3b3', - 750: '#bfbfbf', - 800: '#cccccc', - 850: '#d9d9d9', - 900: '#e6e6e6', - 950: '#f2f2f2', - }, - - textColorStep: { - 50: '#f2f2f2', - 100: '#e6e6e6', - 150: '#d9d9d9', - 200: '#cccccc', - 250: '#bfbfbf', - 300: '#b3b3b3', - 350: '#a6a6a6', - 400: '#999999', - 450: '#8c8c8c', - 500: '#808080', - 550: '#737373', - 600: '#666666', - 650: '#595959', - 700: '#4d4d4d', - 750: '#404040', - 800: '#333333', - 850: '#262626', - 900: '#1a1a1a', - 950: '#0d0d0d', - }, - components: { IonCard: { background: '#1c1c1d', diff --git a/core/src/themes/base/high-contrast-dark.tokens.ts b/core/src/themes/base/high-contrast-dark.tokens.ts index 168866a5f8c..d834cda241d 100644 --- a/core/src/themes/base/high-contrast-dark.tokens.ts +++ b/core/src/themes/base/high-contrast-dark.tokens.ts @@ -166,48 +166,4 @@ export const highContrastDarkTheme: HighContrastDarkTheme = { backgroundColorRgb: '0, 0, 0', textColor: '#ffffff', textColorRgb: '255, 255, 255', - - backgroundColorStep: { - 50: '#0d0d0d', - 100: '#1a1a1a', - 150: '#262626', - 200: '#333333', - 250: '#404040', - 300: '#4d4d4d', - 350: '#595959', - 400: '#666666', - 450: '#737373', - 500: '#808080', - 550: '#8c8c8c', - 600: '#999999', - 650: '#a6a6a6', - 700: '#b3b3b3', - 750: '#bfbfbf', - 800: '#cccccc', - 850: '#d9d9d9', - 900: '#e6e6e6', - 950: '#f2f2f2', - }, - - textColorStep: { - 50: '#f9f9f9', - 100: '#f3f3f3', - 150: '#ededed', - 200: '#e7e7e7', - 250: '#e1e1e1', - 300: '#dbdbdb', - 350: '#d5d5d5', - 400: '#cfcfcf', - 450: '#c9c9c9', - 500: '#c4c4c4', - 550: '#bebebe', - 600: '#b8b8b8', - 650: '#b2b2b2', - 700: '#acacac', - 750: '#a6a6a6', - 800: '#a0a0a0', - 850: '#9a9a9a', - 900: '#949494', - 950: '#8e8e8e', - }, }; diff --git a/core/src/themes/base/high-contrast.tokens.ts b/core/src/themes/base/high-contrast.tokens.ts index f56daef372d..3c3c9ba34b1 100644 --- a/core/src/themes/base/high-contrast.tokens.ts +++ b/core/src/themes/base/high-contrast.tokens.ts @@ -166,48 +166,4 @@ export const highContrastTheme: HighContrastTheme = { backgroundColorRgb: '255, 255, 255', textColor: '#000000', textColorRgb: '0, 0, 0', - - backgroundColorStep: { - 50: '#818181', - 100: '#7a7a7a', - 150: '#747474', - 200: '#6d6d6d', - 250: '#666666', - 300: '#5f5f5f', - 350: '#585858', - 400: '#525252', - 450: '#4b4b4b', - 500: '#444444', - 550: '#3d3d3d', - 600: '#363636', - 650: '#303030', - 700: '#292929', - 750: '#222222', - 800: '#1b1b1b', - 850: '#141414', - 900: '#0e0e0e', - 950: '#070707', - }, - - textColorStep: { - 50: '#070707', - 100: '#0e0e0e', - 150: '#141414', - 200: '#1b1b1b', - 250: '#222222', - 300: '#292929', - 350: '#303030', - 400: '#363636', - 450: '#3d3d3d', - 500: '#444444', - 550: '#4b4b4b', - 600: '#525252', - 650: '#585858', - 700: '#5f5f5f', - 750: '#666666', - 800: '#6d6d6d', - 850: '#747474', - 900: '#7a7a7a', - 950: '#818181', - }, }; diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts index 345cdef3a51..a01bcb0ad81 100644 --- a/core/src/themes/ios/dark.tokens.ts +++ b/core/src/themes/ios/dark.tokens.ts @@ -1,54 +1,21 @@ +import { generateColorSteps } from '../../utils/theme'; import { darkTheme as baseDarkTheme } from '../base/dark.tokens'; import type { DarkTheme } from '../themes.interfaces'; +const colors = { + gray: generateColorSteps('#ffffff', '#000000', true), + text: generateColorSteps('#ffffff', '#000000'), +}; + export const darkTheme: DarkTheme = { ...baseDarkTheme, backgroundColor: '#000000', textColor: '#ffffff', - backgroundColorStep: { - 50: '#0d0d0d', - 100: '#1a1a1a', - 150: '#262626', - 200: '#333333', - 250: '#404040', - 300: '#4d4d4d', - 350: '#595959', - 400: '#666666', - 450: '#737373', - 500: '#808080', - 550: '#8c8c8c', - 600: '#999999', - 650: '#a6a6a6', - 700: '#b3b3b3', - 750: '#bfbfbf', - 800: '#cccccc', - 850: '#d9d9d9', - 900: '#e6e6e6', - 950: '#f2f2f2', - }, - - textColorStep: { - 50: '#f2f2f2', - 100: '#e6e6e6', - 150: '#d9d9d9', - 200: '#cccccc', - 250: '#bfbfbf', - 300: '#b3b3b3', - 350: '#a6a6a6', - 400: '#999999', - 450: '#8c8c8c', - 500: '#808080', - 550: '#737373', - 600: '#666666', - 650: '#595959', - 700: '#4d4d4d', - 750: '#404040', - 800: '#333333', - 850: '#262626', - 900: '#1a1a1a', - 950: '#0d0d0d', + color: { + gray: colors.gray, + text: colors.text, }, components: { @@ -59,9 +26,9 @@ export const darkTheme: DarkTheme = { background: '#000000', }, 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)', }, }, }; diff --git a/core/src/themes/ios/high-contrast-dark.tokens.ts b/core/src/themes/ios/high-contrast-dark.tokens.ts index 0a5c1bba117..a7fafb2c0c0 100644 --- a/core/src/themes/ios/high-contrast-dark.tokens.ts +++ b/core/src/themes/ios/high-contrast-dark.tokens.ts @@ -1,6 +1,15 @@ +import { generateColorSteps } from '../../utils/theme'; import { highContrastDarkTheme as baseHighContrastDarkTheme } from '../base/high-contrast-dark.tokens'; import type { HighContrastDarkTheme } from '../themes.interfaces'; export const highContrastDarkTheme: HighContrastDarkTheme = { ...baseHighContrastDarkTheme, + + backgroundColor: '#000000', + textColor: '#ffffff', + + color: { + gray: generateColorSteps('#ffffff', '#000000', true), + text: generateColorSteps('#ffffff', '#888888'), + }, }; diff --git a/core/src/themes/ios/high-contrast.tokens.ts b/core/src/themes/ios/high-contrast.tokens.ts index 96e90d79b83..65d5f7948d5 100644 --- a/core/src/themes/ios/high-contrast.tokens.ts +++ b/core/src/themes/ios/high-contrast.tokens.ts @@ -1,3 +1,4 @@ +import { generateColorSteps } from '../../utils/theme'; import { highContrastTheme as baseHighContrastTheme } from '../base/high-contrast.tokens'; import type { HighContrastTheme } from '../themes.interfaces'; @@ -7,47 +8,7 @@ export const highContrastTheme: HighContrastTheme = { backgroundColor: '#ffffff', textColor: '#000000', - backgroundColorStep: { - 50: '#818181', - 100: '#7a7a7a', - 150: '#747474', - 200: '#6d6d6d', - 250: '#666666', - 300: '#5f5f5f', - 350: '#585858', - 400: '#525252', - 450: '#4b4b4b', - 500: '#444444', - 550: '#3d3d3d', - 600: '#363636', - 650: '#303030', - 700: '#292929', - 750: '#222222', - 800: '#1b1b1b', - 850: '#141414', - 900: '#0e0e0e', - 950: '#070707', - }, - - textColorStep: { - 50: '#070707', - 100: '#0e0e0e', - 150: '#141414', - 200: '#1b1b1b', - 250: '#222222', - 300: '#292929', - 350: '#303030', - 400: '#363636', - 450: '#3d3d3d', - 500: '#444444', - 550: '#4b4b4b', - 600: '#525252', - 650: '#585858', - 700: '#5f5f5f', - 750: '#666666', - 800: '#6d6d6d', - 850: '#747474', - 900: '#7a7a7a', - 950: '#818181', + color: { + text: generateColorSteps('#888888', '#000000', true), }, }; diff --git a/core/src/themes/md/dark.tokens.ts b/core/src/themes/md/dark.tokens.ts index ef863643d5c..156f72df33c 100644 --- a/core/src/themes/md/dark.tokens.ts +++ b/core/src/themes/md/dark.tokens.ts @@ -1,6 +1,12 @@ +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), + text: generateColorSteps('#ffffff', '#121212'), +}; + export const darkTheme: DarkTheme = { ...baseDarkTheme, @@ -9,55 +15,16 @@ export const darkTheme: DarkTheme = { textColor: '#ffffff', textColorRgb: '255, 255, 255', + color: { + gray: colors.gray, + text: colors.text, + }, + // TODO(FW-6864): Remove once IonToolbar themes are added toolbar: { background: '#1f1f1f', }, - backgroundColorStep: { - 50: '#1e1e1e', - 100: '#2a2a2a', - 150: '#363636', - 200: '#414141', - 250: '#4d4d4d', - 300: '#595959', - 350: '#656565', - 400: '#717171', - 450: '#7d7d7d', - 500: '#898989', - 550: '#949494', - 600: '#a0a0a0', - 650: '#acacac', - 700: '#b8b8b8', - 750: '#c4c4c4', - 800: '#d0d0d0', - 850: '#dbdbdb', - 900: '#e7e7e7', - 950: '#f3f3f3', - }, - - textColorStep: { - 50: '#f3f3f3', - 100: '#e7e7e7', - 150: '#dbdbdb', - 200: '#d0d0d0', - 250: '#c4c4c4', - 300: '#b8b8b8', - 350: '#acacac', - 400: '#a0a0a0', - 450: '#949494', - 500: '#898989', - 550: '#7d7d7d', - 600: '#717171', - 650: '#656565', - 700: '#595959', - 750: '#4d4d4d', - 800: '#414141', - 850: '#363636', - 900: '#2a2a2a', - 950: '#1e1e1e', - }, - components: { IonCard: { background: '#1e1e1e', diff --git a/core/src/themes/md/high-contrast-dark.tokens.ts b/core/src/themes/md/high-contrast-dark.tokens.ts index 0a0d9f93a76..e30d2c18784 100644 --- a/core/src/themes/md/high-contrast-dark.tokens.ts +++ b/core/src/themes/md/high-contrast-dark.tokens.ts @@ -1,3 +1,4 @@ +import { generateColorSteps } from '../../utils/theme'; import { highContrastDarkTheme as baseHighContrastDarkTheme } from '../base/high-contrast-dark.tokens'; import type { HighContrastDarkTheme } from '../themes.interfaces'; @@ -5,32 +6,15 @@ export const highContrastDarkTheme: HighContrastDarkTheme = { ...baseHighContrastDarkTheme, backgroundColor: '#121212', - textColor: '#000000', + textColor: '#ffffff', // TODO(FW-6864): Remove once IonToolbar themes are added toolbar: { background: '#1f1f1f', }, - backgroundColorStep: { - 50: '#1e1e1e', - 100: '#2a2a2a', - 150: '#363636', - 200: '#414141', - 250: '#4d4d4d', - 300: '#595959', - 350: '#656565', - 400: '#717171', - 450: '#7d7d7d', - 500: '#898989', - 550: '#949494', - 600: '#a0a0a0', - 650: '#acacac', - 700: '#b8b8b8', - 750: '#c4c4c4', - 800: '#d0d0d0', - 850: '#dbdbdb', - 900: '#e7e7e7', - 950: '#f3f3f3', + color: { + gray: generateColorSteps('#ffffff', '#121212', true), + text: generateColorSteps('#ffffff', '#888888'), }, }; diff --git a/core/src/themes/md/high-contrast.tokens.ts b/core/src/themes/md/high-contrast.tokens.ts index 96e90d79b83..65d5f7948d5 100644 --- a/core/src/themes/md/high-contrast.tokens.ts +++ b/core/src/themes/md/high-contrast.tokens.ts @@ -1,3 +1,4 @@ +import { generateColorSteps } from '../../utils/theme'; import { highContrastTheme as baseHighContrastTheme } from '../base/high-contrast.tokens'; import type { HighContrastTheme } from '../themes.interfaces'; @@ -7,47 +8,7 @@ export const highContrastTheme: HighContrastTheme = { backgroundColor: '#ffffff', textColor: '#000000', - backgroundColorStep: { - 50: '#818181', - 100: '#7a7a7a', - 150: '#747474', - 200: '#6d6d6d', - 250: '#666666', - 300: '#5f5f5f', - 350: '#585858', - 400: '#525252', - 450: '#4b4b4b', - 500: '#444444', - 550: '#3d3d3d', - 600: '#363636', - 650: '#303030', - 700: '#292929', - 750: '#222222', - 800: '#1b1b1b', - 850: '#141414', - 900: '#0e0e0e', - 950: '#070707', - }, - - textColorStep: { - 50: '#070707', - 100: '#0e0e0e', - 150: '#141414', - 200: '#1b1b1b', - 250: '#222222', - 300: '#292929', - 350: '#303030', - 400: '#363636', - 450: '#3d3d3d', - 500: '#444444', - 550: '#4b4b4b', - 600: '#525252', - 650: '#585858', - 700: '#5f5f5f', - 750: '#666666', - 800: '#6d6d6d', - 850: '#747474', - 900: '#7a7a7a', - 950: '#818181', + color: { + text: generateColorSteps('#888888', '#000000', true), }, }; diff --git a/core/src/themes/native/native.theme.default.ios.scss b/core/src/themes/native/native.theme.default.ios.scss index aed51b26e13..7d8ec3b4402 100644 --- a/core/src/themes/native/native.theme.default.ios.scss +++ b/core/src/themes/native/native.theme.default.ios.scss @@ -7,50 +7,38 @@ // iOS General Colors // -------------------------------------------------- $backdrop-ios-color: var(--ion-backdrop-color, #000); -$overlay-ios-background-color: var( - --ion-overlay-background-color, - var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9)) -); +$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-gray-100, #f9f9f9)); // iOS Tabs & Tab bar // -------------------------------------------------- -$tabbar-ios-background: var( - --ion-tab-bar-background, - var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)) -); +$tabbar-ios-background: var(--ion-tab-bar-background, var(--ion-color-gray-50, #f7f7f7)); $tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)); $tabbar-ios-border-color: var( --ion-tab-bar-border-color, - var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))) + 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 // -------------------------------------------------- -$toolbar-ios-background: var( - --ion-toolbar-background, - var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)) -); +$toolbar-ios-background: var(--ion-toolbar-background, var(--ion-color-gray-50, #f7f7f7)); $toolbar-ios-border-color: var( --ion-toolbar-border-color, - var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))) + var(--ion-border-color, var(--ion-color-gray-150, rgba(0, 0, 0, 0.2))) ); $toolbar-ios-color: var(--ion-toolbar-color, $text-color); // iOS List & List Items // -------------------------------------------------- $item-ios-background: var(--ion-item-background, $background-color); -$item-ios-border-color: var( - --ion-item-border-color, - var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))) -); +$item-ios-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-gray-250, #c8c7cc))); $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 // -------------------------------------------------- diff --git a/core/src/themes/native/native.theme.default.md.scss b/core/src/themes/native/native.theme.default.md.scss index 285a52433b6..3c1c7bb981c 100644 --- a/core/src/themes/native/native.theme.default.md.scss +++ b/core/src/themes/native/native.theme.default.md.scss @@ -7,7 +7,7 @@ // Material Design General Colors // -------------------------------------------------- $backdrop-md-color: var(--ion-backdrop-color, #000); -$border-md-color: var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd))); +$border-md-color: var(--ion-border-color, var(--ion-color-gray-150, #c1c4cd)); $overlay-md-background-color: var(--ion-overlay-background-color, var(--ion-background-color, #fff)); // Material Design Tabs & Tab bar @@ -16,9 +16,9 @@ $tabbar-md-background: var(--ion-tab-bar-background, $background-color); $tabbar-md-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)); $tabbar-md-border-color: var( --ion-tab-bar-border-color, - var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.07)))) + 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 @@ -32,14 +32,14 @@ $toolbar-md-color: var(--ion-toolbar-color, var(--ion-text-color, #424242)); $item-md-background: var(--ion-item-background, $background-color); $item-md-border-color: var( --ion-item-border-color, - var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))) + var(--ion-border-color, var(--ion-color-gray-150, rgba(0, 0, 0, 0.13))) ); $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 // -------------------------------------------------- diff --git a/core/src/themes/native/native.theme.default.scss b/core/src/themes/native/native.theme.default.scss index db4819c8a94..08333b03f46 100644 --- a/core/src/themes/native/native.theme.default.scss +++ b/core/src/themes/native/native.theme.default.scss @@ -23,162 +23,52 @@ $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, -// but a $background-color-step-XXX will be $background-color stepping towards $text-color. +// For example, $text-color-XXX will be $text-color stepping towards $background-color, +// but a $gray-color-XXX will be $background-color stepping towards $text-color. -$background-color-step-50: var( - --ion-color-step-50, - var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%)) -); -$background-color-step-100: var( - --ion-color-step-100, - var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%)) -); -$background-color-step-150: var( - --ion-color-step-150, - var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%)) -); -$background-color-step-200: var( - --ion-color-step-200, - var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%)) -); -$background-color-step-250: var( - --ion-color-step-250, - var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%)) -); -$background-color-step-300: var( - --ion-color-step-300, - var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%)) -); -$background-color-step-350: var( - --ion-color-step-350, - var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%)) -); -$background-color-step-400: var( - --ion-color-step-400, - var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%)) -); -$background-color-step-450: var( - --ion-color-step-450, - var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%)) -); -$background-color-step-500: var( - --ion-color-step-500, - var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%)) -); -$background-color-step-550: var( - --ion-color-step-550, - var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%)) -); -$background-color-step-600: var( - --ion-color-step-600, - var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%)) -); -$background-color-step-650: var( - --ion-color-step-650, - var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%)) -); -$background-color-step-700: var( - --ion-color-step-700, - var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%)) -); -$background-color-step-750: var( - --ion-color-step-750, - var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%)) -); -$background-color-step-800: var( - --ion-color-step-800, - var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%)) -); -$background-color-step-850: var( - --ion-color-step-850, - var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%)) -); -$background-color-step-900: var( - --ion-color-step-900, - var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%)) -); -$background-color-step-950: var( - --ion-color-step-950, - var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%)) -); -$text-color-step-50: var( - --ion-color-step-950, - var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%)) -); -$text-color-step-100: var( - --ion-color-step-900, - var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%)) -); -$text-color-step-150: var( - --ion-color-step-850, - var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%)) -); -$text-color-step-200: var( - --ion-color-step-800, - var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%)) -); -$text-color-step-250: var( - --ion-color-step-750, - var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%)) -); -$text-color-step-300: var( - --ion-color-step-700, - var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%)) -); -$text-color-step-350: var( - --ion-color-step-650, - var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%)) -); -$text-color-step-400: var( - --ion-color-step-600, - var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%)) -); -$text-color-step-450: var( - --ion-color-step-550, - var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%)) -); -$text-color-step-500: var( - --ion-color-step-500, - var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%)) -); -$text-color-step-550: var( - --ion-color-step-450, - var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%)) -); -$text-color-step-600: var( - --ion-color-step-400, - var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%)) -); -$text-color-step-650: var( - --ion-color-step-350, - var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%)) -); -$text-color-step-700: var( - --ion-color-step-300, - var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%)) -); -$text-color-step-750: var( - --ion-color-step-250, - var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%)) -); -$text-color-step-800: var( - --ion-color-step-200, - var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%)) -); -$text-color-step-850: var( - --ion-color-step-150, - var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%)) -); -$text-color-step-900: var( - --ion-color-step-100, - var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%)) -); -$text-color-step-950: var( - --ion-color-step-50, - var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%)) -); +$gray-color-0: var(--ion-color-gray-0, mix($text-color-value, $background-color-value, 0%)); +$gray-color-50: var(--ion-color-gray-50, mix($text-color-value, $background-color-value, 5%)); +$gray-color-100: var(--ion-color-gray-100, mix($text-color-value, $background-color-value, 10%)); +$gray-color-150: var(--ion-color-gray-150, mix($text-color-value, $background-color-value, 15%)); +$gray-color-200: var(--ion-color-gray-200, mix($text-color-value, $background-color-value, 20%)); +$gray-color-250: var(--ion-color-gray-250, mix($text-color-value, $background-color-value, 25%)); +$gray-color-300: var(--ion-color-gray-300, mix($text-color-value, $background-color-value, 30%)); +$gray-color-350: var(--ion-color-gray-350, mix($text-color-value, $background-color-value, 35%)); +$gray-color-400: var(--ion-color-gray-400, mix($text-color-value, $background-color-value, 40%)); +$gray-color-450: var(--ion-color-gray-450, mix($text-color-value, $background-color-value, 45%)); +$gray-color-500: var(--ion-color-gray-500, mix($text-color-value, $background-color-value, 50%)); +$gray-color-550: var(--ion-color-gray-550, mix($text-color-value, $background-color-value, 55%)); +$gray-color-600: var(--ion-color-gray-600, mix($text-color-value, $background-color-value, 60%)); +$gray-color-650: var(--ion-color-gray-650, mix($text-color-value, $background-color-value, 65%)); +$gray-color-700: var(--ion-color-gray-700, mix($text-color-value, $background-color-value, 70%)); +$gray-color-750: var(--ion-color-gray-750, mix($text-color-value, $background-color-value, 75%)); +$gray-color-800: var(--ion-color-gray-800, mix($text-color-value, $background-color-value, 80%)); +$gray-color-850: var(--ion-color-gray-850, mix($text-color-value, $background-color-value, 85%)); +$gray-color-900: var(--ion-color-gray-900, mix($text-color-value, $background-color-value, 90%)); +$gray-color-950: var(--ion-color-gray-950, mix($text-color-value, $background-color-value, 95%)); +$gray-color-1000: var(--ion-color-gray-1000, mix($text-color-value, $background-color-value, 100%)); +$text-color-0: var(--ion-color-text-0, mix($background-color-value, $text-color-value, 0%)); +$text-color-50: var(--ion-color-text-50, mix($background-color-value, $text-color-value, 5%)); +$text-color-100: var(--ion-color-text-100, mix($background-color-value, $text-color-value, 10%)); +$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); diff --git a/core/src/themes/native/test/css-variables/css/dark.css b/core/src/themes/native/test/css-variables/css/dark.css index 6082882391f..89f07cb9a1b 100644 --- a/core/src/themes/native/test/css-variables/css/dark.css +++ b/core/src/themes/native/test/css-variables/css/dark.css @@ -80,25 +80,25 @@ body { --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; @@ -106,9 +106,9 @@ body { } .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); } /* @@ -125,25 +125,25 @@ body { --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/core/src/themes/native/test/css-variables/css/oceanic.css b/core/src/themes/native/test/css-variables/css/oceanic.css index 81e6ca5172f..46aece732c5 100644 --- a/core/src/themes/native/test/css-variables/css/oceanic.css +++ b/core/src/themes/native/test/css-variables/css/oceanic.css @@ -96,24 +96,24 @@ --ion-text-color: #fff; --ion-text-color-rgb: 255,255,255; - --ion-color-step-50: #26363e; - --ion-color-step-100: #324048; - --ion-color-step-150: #3d4b52; - --ion-color-step-200: #49555d; - --ion-color-step-250: #546067; - --ion-color-step-300: #5f6b71; - --ion-color-step-350: #6b757b; - --ion-color-step-400: #768085; - --ion-color-step-450: #828a8f; - --ion-color-step-500: #8d959a; - --ion-color-step-550: #98a0a4; - --ion-color-step-600: #a4aaae; - --ion-color-step-650: #afb5b8; - --ion-color-step-700: #bbbfc2; - --ion-color-step-750: #c6cacc; - --ion-color-step-800: #d1d5d6; - --ion-color-step-850: #dddfe1; - --ion-color-step-900: #e8eaeb; - --ion-color-step-950: #f4f4f5; - --ion-color-step-1000: #fff; + --ion-color-gray-50: #26363e; + --ion-color-gray-100: #324048; + --ion-color-gray-150: #3d4b52; + --ion-color-gray-200: #49555d; + --ion-color-gray-250: #546067; + --ion-color-gray-300: #5f6b71; + --ion-color-gray-350: #6b757b; + --ion-color-gray-400: #768085; + --ion-color-gray-450: #828a8f; + --ion-color-gray-500: #8d959a; + --ion-color-gray-550: #98a0a4; + --ion-color-gray-600: #a4aaae; + --ion-color-gray-650: #afb5b8; + --ion-color-gray-700: #bbbfc2; + --ion-color-gray-750: #c6cacc; + --ion-color-gray-800: #d1d5d6; + --ion-color-gray-850: #dddfe1; + --ion-color-gray-900: #e8eaeb; + --ion-color-gray-950: #f4f4f5; + --ion-color-gray-1000: #fff; } 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/color/index.html b/core/src/themes/test/color/index.html index fb186978291..30c7d4db3e9 100644 --- a/core/src/themes/test/color/index.html +++ b/core/src/themes/test/color/index.html @@ -30,6 +30,7 @@ .row { display: flex; + flex-wrap: wrap; justify-content: center; margin: 16px 10px; gap: 10px; @@ -86,6 +87,13 @@ background: var(--ion-color-subtle-tint); color: var(--ion-color-subtle-contrast); } + + .color-tile { + border: 1px solid #f2f2f2; + height: 40px; + width: 80px; + cursor: pointer; + } @@ -233,7 +241,110 @@

Subtle Colors

+ +
+
+

Gray

+
+
+ +
+

Text

+
+
+
+ + diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts index dd236fff88b..b562820c754 100644 --- a/core/src/themes/themes.interfaces.ts +++ b/core/src/themes/themes.interfaces.ts @@ -1,4 +1,5 @@ import type { IonChipRecipe, IonChipConfig } from '../components/chip/chip.interfaces'; +import type { PredefinedColors } from '../interface'; import type { IonicConfig as IonicGlobalConfig } from '../utils/config'; // Platform-specific theme @@ -11,12 +12,6 @@ export type BaseTheme = { backgroundColorRgb?: string; textColor?: string; textColorRgb?: string; - backgroundColorStep?: { - [key: string]: string; - }; - textColorStep?: { - [key: string]: string; - }; // TODO(FW-6864): Remove once IonToolbar themes are added toolbar?: any; @@ -218,24 +213,7 @@ export type BaseTheme = { components?: Components; // 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; @@ -303,3 +281,39 @@ export type IonPadding = { bottom?: string | number; start?: string | number; }; + +// 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' | 'gray-contrast'; + +// Functional color keys +export type FunctionalColors = 'text' | 'overlay-background'; + +// Colors interface +export type Colors = { + [K in PredefinedColors]?: SemanticHue; +} & { + [K in PrimitiveColors]?: NumberStringKeys; +} & { + [K in FunctionalColors]?: NumberStringKeys; +}; diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts index 3653610250e..15896404e35 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'; @@ -633,3 +634,37 @@ export function currentColor(variation: string, alpha: number | string | null = export function clamp(min: number | string, val: number | string, max: number | string): string { return `clamp(${min}, ${val}, ${max})`; } + +/** + * 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..33e099583fa 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) + #f9f9f9 ); ``` diff --git a/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.scss index d8b2a267e5a..abefd621db7 100644 --- a/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.scss +++ b/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.scss @@ -8,7 +8,7 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-color-gray-600); margin-top: 10px; margin-bottom: 5px; } 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..52b845fd32c 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,7 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-color-gray-600); margin-top: 10px; margin-bottom: 5px; } diff --git a/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.scss index add228ccab1..52b845fd32c 100644 --- a/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.scss +++ b/packages/angular/test/base/src/app/standalone/validation/radio-group-validation/radio-group-validation.component.scss @@ -8,7 +8,7 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-color-gray-600); margin-top: 10px; margin-bottom: 5px; } diff --git a/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.scss index add228ccab1..52b845fd32c 100644 --- a/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.scss +++ b/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.scss @@ -8,7 +8,7 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-color-gray-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..ef855d107e0 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,7 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-color-gray-600); margin-top: 10px; margin-bottom: 5px; } diff --git a/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.scss index add228ccab1..52b845fd32c 100644 --- a/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.scss +++ b/packages/angular/test/base/src/app/standalone/validation/toggle-validation/toggle-validation.component.scss @@ -8,7 +8,7 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); + color: var(--ion-color-gray-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;