diff --git a/core/scripts/testing/scripts.js b/core/scripts/testing/scripts.js index 9c0ee7d04d4..c3e82083f16 100644 --- a/core/scripts/testing/scripts.js +++ b/core/scripts/testing/scripts.js @@ -111,8 +111,15 @@ const DEFAULT_THEME = 'md'; // If a specific palette is requested, modify the palette structure // to set the enabled property to 'always' + // TODO(FW-4004): Implement dark mode if (paletteName === 'dark' && theme.palette?.dark) { theme.palette.dark.enabled = 'always'; + // TODO(FW-4005): Implement high contrast mode + } else if (paletteName === 'high-contrast' && theme.palette?.highContrast) { + theme.palette.highContrast.enabled = 'always'; + // TODO(FW-4005): Implement high contrast dark mode + } else if (paletteName === 'high-contrast-dark' && theme.palette?.highContrastDark) { + theme.palette.highContrastDark.enabled = 'always'; } // Apply the theme tokens to Ionic config diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss index fe9bba89903..40df6793e7f 100644 --- a/core/src/components/action-sheet/action-sheet.ios.scss +++ b/core/src/components/action-sheet/action-sheet.ios.scss @@ -17,7 +17,7 @@ --button-background-selected: #{$action-sheet-ios-button-background-selected}; --button-background-selected-opacity: 1; --button-color: #{$action-sheet-ios-button-text-color}; - --button-color-disabled: #{$text-color-step-150}; + --button-color-disabled: var(--ion-color-text-850); --color: #{$action-sheet-ios-title-color}; text-align: $action-sheet-ios-text-align; diff --git a/core/src/components/action-sheet/action-sheet.ios.vars.scss b/core/src/components/action-sheet/action-sheet.ios.vars.scss index 0d2302b7183..1bebfa7190b 100644 --- a/core/src/components/action-sheet/action-sheet.ios.vars.scss +++ b/core/src/components/action-sheet/action-sheet.ios.vars.scss @@ -25,7 +25,7 @@ $action-sheet-ios-group-margin-top: 10px; $action-sheet-ios-group-margin-bottom: 10px; /// @prop - Background color of the action sheet -$action-sheet-ios-background-color: $overlay-ios-background-color; +$action-sheet-ios-background-color: var(--ion-color-overlay-bg); /// @prop - Border radius of the action sheet $action-sheet-ios-border-radius: 13px; @@ -46,7 +46,7 @@ $action-sheet-ios-title-padding-bottom: 13px; $action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end; /// @prop - Color of the action sheet title -$action-sheet-ios-title-color: $text-color-step-600; +$action-sheet-ios-title-color: var(--ion-color-text-400); /// @prop - Font size of the action sheet title $action-sheet-ios-title-font-size: dynamic-font-min(1, 13px); @@ -115,10 +115,7 @@ $action-sheet-ios-button-background: linear-gradient( $action-sheet-ios-button-background-activated: $text-color; /// @prop - Background color of the selected action sheet button -$action-sheet-ios-button-background-selected: var( - --ion-color-step-150, - var(--ion-background-color-step-150, $background-color) -); +$action-sheet-ios-button-background-selected: var(--ion-components-ion-action-sheet-button-bg-selected); /// @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..5132f3db338 100644 --- a/core/src/components/action-sheet/action-sheet.md.vars.scss +++ b/core/src/components/action-sheet/action-sheet.md.vars.scss @@ -64,7 +64,7 @@ $action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end $action-sheet-md-button-height: 52px; /// @prop - Text color of the action sheet button -$action-sheet-md-button-text-color: $text-color-step-150; +$action-sheet-md-button-text-color: var(--ion-color-text-850); /// @prop - Font size of the action sheet button $action-sheet-md-button-font-size: dynamic-font(16px); diff --git a/core/src/components/alert/alert.ios.vars.scss b/core/src/components/alert/alert.ios.vars.scss index 2cb4fca98af..d5d569c3341 100644 --- a/core/src/components/alert/alert.ios.vars.scss +++ b/core/src/components/alert/alert.ios.vars.scss @@ -15,7 +15,7 @@ $alert-ios-max-width: dynamic-font-clamp(1, 270px, 1.2); $alert-ios-border-radius: 13px; /// @prop - Background color of the alert -$alert-ios-background-color: $overlay-ios-background-color; +$alert-ios-background-color: var(--ion-color-overlay-bg); /// @prop - Background color alpha of the alert when translucent $alert-ios-translucent-background-color-alpha: 0.9; @@ -57,7 +57,7 @@ $alert-ios-title-font-weight: 600; $alert-ios-sub-title-font-size: dynamic-font-min(1, 14px); /// @prop - Text color of the alert sub title -$alert-ios-sub-title-text-color: $text-color-step-400; +$alert-ios-sub-title-text-color: var(--ion-color-text-600); /// @prop - Padding top of the alert message $alert-ios-message-padding-top: 0; @@ -114,7 +114,7 @@ $alert-ios-input-padding-start: $alert-ios-input-padding-end; $alert-ios-input-placeholder-color: $placeholder-text-color; /// @prop - Border color of the alert input -$alert-ios-input-border-color: $background-color-step-250; +$alert-ios-input-border-color: var(--ion-color-gray-250); /// @prop - Border of the alert input $alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color; diff --git a/core/src/components/alert/alert.md.vars.scss b/core/src/components/alert/alert.md.vars.scss index ce1fb7304dd..5401cada742 100644 --- a/core/src/components/alert/alert.md.vars.scss +++ b/core/src/components/alert/alert.md.vars.scss @@ -80,7 +80,7 @@ $alert-md-message-padding-start: $alert-md-message-padding-end; $alert-md-message-font-size: dynamic-font(16px); /// @prop - Text color of the alert message -$alert-md-message-text-color: $text-color-step-450; +$alert-md-message-text-color: var(--ion-color-text-550); /// @prop - Padding top of the alert empty message $alert-md-message-empty-padding-top: 0; @@ -104,7 +104,7 @@ $alert-md-input-border-width: 1px; $alert-md-input-border-style: solid; /// @prop - Border color of the alert input -$alert-md-input-border-color: $background-color-step-150; +$alert-md-input-border-color: var(--ion-color-gray-150); /// @prop - Text color of the alert input $alert-md-input-text-color: $text-color; @@ -209,7 +209,7 @@ $alert-md-radio-border-style: solid; $alert-md-radio-border-radius: 50%; /// @prop - Border color of the alert radio when off -$alert-md-radio-border-color-off: $background-color-step-550; +$alert-md-radio-border-color-off: var(--ion-color-gray-550); /// @prop - Border color of the alert radio when on $alert-md-radio-border-color-on: $alert-md-button-text-color; @@ -254,7 +254,7 @@ $alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end + 26px; $alert-md-radio-label-font-size: dynamic-font(16px); /// @prop - Text color of the label for the radio alert -$alert-md-radio-label-text-color: $text-color-step-150; +$alert-md-radio-label-text-color: var(--ion-color-text-850); /// @prop - Text color of the label for the checked radio alert $alert-md-radio-label-text-color-checked: $alert-md-radio-label-text-color; @@ -281,7 +281,7 @@ $alert-md-checkbox-border-style: solid; $alert-md-checkbox-border-radius: 2px; /// @prop - Border color of the checkbox in the alert when off -$alert-md-checkbox-border-color-off: $background-color-step-550; +$alert-md-checkbox-border-color-off: var(--ion-color-gray-550); /// @prop - Border color of the checkbox in the alert when on $alert-md-checkbox-border-color-on: $alert-md-button-text-color; @@ -323,7 +323,7 @@ $alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top; $alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end + 27px; /// @prop - Text color of the label for the checkbox in the alert -$alert-md-checkbox-label-text-color: $text-color-step-150; +$alert-md-checkbox-label-text-color: var(--ion-color-text-850); /// @prop - Font size of the label for the checkbox in the alert $alert-md-checkbox-label-font-size: dynamic-font(16px); diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss index 9948a4127a9..9bc24f53096 100644 --- a/core/src/components/alert/alert.scss +++ b/core/src/components/alert/alert.scss @@ -181,7 +181,7 @@ .alert-button.ion-focused, .alert-tappable.ion-focused { - background: $background-color-step-100; + background: var(--ion-color-gray-100); } .alert-button-inner { diff --git a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss index 0fda71c8aa7..112409ee1ac 100644 --- a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss @@ -4,25 +4,22 @@ // -------------------------------------------------- /// @prop - Color of the breadcrumb -$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665)); +$breadcrumb-ios-color: var(--ion-components-ion-breadcrumb-color); /// @prop - Color of the active breadcrumb $breadcrumb-ios-color-active: var(--ion-text-color, #03060b); /// @prop - Background color of the focused breadcrumb -$breadcrumb-ios-background-focused: var( - --ion-color-step-50, - var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7)) -); +$breadcrumb-ios-background-focused: var(--ion-components-ion-breadcrumb-bg-focused); /// @prop - Color of the breadcrumb icon -$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3)); +$breadcrumb-ios-icon-color: var(--ion-components-ion-breadcrumb-icon-color); /// @prop - Color of the breadcrumb icon when active -$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39)); +$breadcrumb-ios-icon-color-active: var(--ion-components-ion-breadcrumb-icon-color-active); /// @prop - Color of the breadcrumb icon when focused -$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78)); +$breadcrumb-ios-icon-color-focused: var(--ion-components-ion-breadcrumb-icon-color-focused); /// @prop - Color of the breadcrumb separator $breadcrumb-ios-separator-color: $breadcrumb-separator-color; @@ -31,7 +28,7 @@ $breadcrumb-ios-separator-color: $breadcrumb-separator-color; $breadcrumb-ios-indicator-color: $breadcrumb-ios-separator-color; /// @prop - Background color of the breadcrumb indicator -$breadcrumb-ios-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3)); +$breadcrumb-ios-indicator-background: var(--ion-components-ion-breadcrumb-indicator-bg); /// @prop - Background color of the breadcrumb indicator when focused -$breadcrumb-ios-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea)); +$breadcrumb-ios-indicator-background-focused: var(--ion-components-ion-breadcrumb-indicator-bg-focused); diff --git a/core/src/components/breadcrumb/breadcrumb.md.vars.scss b/core/src/components/breadcrumb/breadcrumb.md.vars.scss index 8c738a5e887..070127b4aa2 100644 --- a/core/src/components/breadcrumb/breadcrumb.md.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.md.vars.scss @@ -4,22 +4,22 @@ // -------------------------------------------------- /// @prop - Color of the breadcrumb -$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #677483)); +$breadcrumb-md-color: var(--ion-components-ion-breadcrumb-color); /// @prop - Color of the active breadcrumb $breadcrumb-md-color-active: var(--ion-text-color, #03060b); /// @prop - Color of the focused breadcrumb -$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e)); +$breadcrumb-md-color-focused: var(--ion-components-ion-breadcrumb-color-focused); /// @prop - Background color of the focused breadcrumb -$breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff)); +$breadcrumb-md-background-focused: var(--ion-components-ion-breadcrumb-bg-focused); /// @prop - Color of the breadcrumb icon -$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894)); +$breadcrumb-md-icon-color: var(--ion-components-ion-breadcrumb-icon-color); /// @prop - Color of the breadcrumb icon when active -$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a)); +$breadcrumb-md-icon-color-active: var(--ion-components-ion-breadcrumb-icon-color-active); /// @prop - Margin top of the breadcrumb separator $breadcrumb-md-separator-margin-top: -1px; @@ -40,7 +40,7 @@ $breadcrumb-md-separator-color: $breadcrumb-separator-color; $breadcrumb-md-indicator-color: $breadcrumb-md-separator-color; /// @prop - Background color of the breadcrumb indicator -$breadcrumb-md-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3)); +$breadcrumb-md-indicator-background: var(--ion-components-ion-breadcrumb-indicator-bg); /// @prop - Background color of the breadcrumb indicator when focused -$breadcrumb-md-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8)); +$breadcrumb-md-indicator-background-focused: var(--ion-components-ion-breadcrumb-indicator-bg-focused); diff --git a/core/src/components/breadcrumb/breadcrumb.vars.scss b/core/src/components/breadcrumb/breadcrumb.vars.scss index 4770b0b9e19..f13cb164e0b 100644 --- a/core/src/components/breadcrumb/breadcrumb.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.vars.scss @@ -12,4 +12,4 @@ $breadcrumb-baseline-font-size: 16px; $breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size); /// @prop - Color of the breadcrumb separator -$breadcrumb-separator-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a)); +$breadcrumb-separator-color: var(--ion-components-ion-breadcrumb-separator-color); diff --git a/core/src/components/button/button.common.scss b/core/src/components/button/button.common.scss index 8493086766f..100b2ca78fb 100644 --- a/core/src/components/button/button.common.scss +++ b/core/src/components/button/button.common.scss @@ -293,7 +293,7 @@ ion-ripple-effect { :host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native { background: #{var(--ion-toolbar-color, var(--background))}; - color: #{var(--ion-toolbar-background, var(--color))}; + color: #{var(--ion-toolbar-background, var(--ion-components-ion-toolbar-bg, (var(--color))))}; } // Button Badge diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss index 760ce302be2..52230827328 100644 --- a/core/src/components/button/button.ios.scss +++ b/core/src/components/button/button.ios.scss @@ -291,5 +291,5 @@ :host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native { background: var(--ion-toolbar-color, var(--color)); - color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))}; + color: var(--ion-components-ion-toolbar-activated-button-color); } diff --git a/core/src/components/button/button.ios.vars.scss b/core/src/components/button/button.ios.vars.scss index ff0911a634d..e2cb9ddc14a 100644 --- a/core/src/components/button/button.ios.vars.scss +++ b/core/src/components/button/button.ios.vars.scss @@ -118,3 +118,5 @@ $button-ios-clear-opacity-hover: 0.6; /// @prop - Font weight of the strong button $button-ios-strong-font-weight: 600; + +$test: $item-ios-background; diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss index 2a5826d88d0..b3176f06c85 100644 --- a/core/src/components/button/button.md.scss +++ b/core/src/components/button/button.md.scss @@ -240,6 +240,6 @@ // -------------------------------------------------- :host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native { - background: var(--ion-toolbar-background, var(--color)); + background: var(--ion-components-ion-toolbar-activated-bg); color: #{var(--ion-toolbar-color, var(--background), ion-color(primary, contrast))}; } 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..53926b29298 100644 --- a/core/src/components/card-subtitle/card-subtitle.ios.vars.scss +++ b/core/src/components/card-subtitle/card-subtitle.ios.vars.scss @@ -40,4 +40,4 @@ $card-ios-subtitle-margin-bottom: 4px; $card-ios-subtitle-margin-start: $card-ios-subtitle-margin-end; /// @prop - Color of the card subtitle -$card-ios-subtitle-color: $text-color-step-400; +$card-ios-subtitle-color: var(--ion-color-text-600); diff --git a/core/src/components/card-subtitle/card-subtitle.md.vars.scss b/core/src/components/card-subtitle/card-subtitle.md.vars.scss index 9cd7aa2d6a7..09e3954c17c 100644 --- a/core/src/components/card-subtitle/card-subtitle.md.vars.scss +++ b/core/src/components/card-subtitle/card-subtitle.md.vars.scss @@ -31,4 +31,4 @@ $card-md-subtitle-margin-bottom: 0; $card-md-subtitle-margin-start: $card-md-subtitle-margin-end; /// @prop - Color of the card subtitle -$card-md-subtitle-color: $text-color-step-450; +$card-md-subtitle-color: var(--ion-color-text-550); diff --git a/core/src/components/card-title/card-title.md.vars.scss b/core/src/components/card-title/card-title.md.vars.scss index 94f201df1d2..1090e364839 100644 --- a/core/src/components/card-title/card-title.md.vars.scss +++ b/core/src/components/card-title/card-title.md.vars.scss @@ -31,4 +31,4 @@ $card-md-title-margin-bottom: $card-md-title-margin-top; $card-md-title-margin-start: $card-md-title-margin-end; /// @prop - Color of the card title -$card-md-title-text-color: $text-color-step-150; +$card-md-title-text-color: var(--ion-color-text-850); diff --git a/core/src/components/checkbox/checkbox.native.scss b/core/src/components/checkbox/checkbox.native.scss index 4c9021f114f..7e36b1b9bab 100644 --- a/core/src/components/checkbox/checkbox.native.scss +++ b/core/src/components/checkbox/checkbox.native.scss @@ -82,7 +82,7 @@ } .checkbox-bottom .helper-text { - color: $text-color-step-300; + color: var(--ion-color-text-700); } // 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..56c1eee0b93 100644 --- a/core/src/components/checkbox/test/validation/index.html +++ b/core/src/components/checkbox/test/validation/index.html @@ -24,8 +24,6 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); - margin-top: 10px; margin-bottom: 5px; } diff --git a/core/src/components/datetime-button/datetime-button.ios.scss b/core/src/components/datetime-button/datetime-button.ios.scss index 6a4d3eb1be8..a77b9570605 100644 --- a/core/src/components/datetime-button/datetime-button.ios.scss +++ b/core/src/components/datetime-button/datetime-button.ios.scss @@ -8,5 +8,5 @@ } :host button.ion-activated { - color: $text-color-step-400; + color: var(--ion-color-text-600); } diff --git a/core/src/components/datetime-button/datetime-button.scss b/core/src/components/datetime-button/datetime-button.scss index 6defd0da9be..13b5bb236ea 100644 --- a/core/src/components/datetime-button/datetime-button.scss +++ b/core/src/components/datetime-button/datetime-button.scss @@ -23,7 +23,7 @@ border: none; - background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0)); + background: var(--ion-components-ion-datetime-button-bg); color: $text-color; diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss index e49bdc3241b..d8eb2309554 100644 --- a/core/src/components/datetime/datetime.ios.scss +++ b/core/src/components/datetime/datetime.ios.scss @@ -8,7 +8,7 @@ :host { --background: #{ion-color(light, base)}; --background-rgb: #{ion-color(light, base, null, true)}; - --title-color: #{$text-color-step-400}; + --title-color: var(--ion-color-text-600); } :host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)), @@ -22,7 +22,7 @@ :host .datetime-header { @include padding($datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding); - border-bottom: $datetime-ios-border-color; + border-bottom: $datetime-ios-border; font-size: dynamic-font-max(14px, 1.6); } @@ -72,7 +72,7 @@ :host .calendar-days-of-week { @include padding(0, $datetime-ios-padding * 0.5, 0, $datetime-ios-padding * 0.5); - color: $text-color-step-700; + color: var(--ion-color-text-300); font-size: dynamic-font-max(12px, 1.6); @@ -280,7 +280,7 @@ } :host .calendar-day.calendar-day-adjacent-day { - color: $text-color-step-700; + color: var(--ion-color-text-300); } // Time / Header @@ -305,7 +305,7 @@ $datetime-ios-padding * 0.5 ); - border-top: $datetime-ios-border-color; + border-top: $datetime-ios-border; } :host .datetime-buttons ::slotted(ion-buttons), diff --git a/core/src/components/datetime/datetime.ios.vars.scss b/core/src/components/datetime/datetime.ios.vars.scss index c89e7674821..5d9048f80e7 100644 --- a/core/src/components/datetime/datetime.ios.vars.scss +++ b/core/src/components/datetime/datetime.ios.vars.scss @@ -3,8 +3,8 @@ // iOS Datetime // -------------------------------------------------- -/// @prop - Border color for dividers between header and footer -$datetime-ios-border-color: 0.55px solid globals.$background-color-step-200; +/// @prop - Border for dividers between header and footer +$datetime-ios-border: 0.55px solid var(--ion-color-gray-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..1ed4b44b5d5 100644 --- a/core/src/components/datetime/datetime.md.scss +++ b/core/src/components/datetime/datetime.md.scss @@ -6,7 +6,7 @@ // -------------------------------------------------- :host { - --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff)); + --background: var(--ion-components-ion-datetime-bg); --title-color: #{current-color(contrast)}; } @@ -40,7 +40,7 @@ // ----------------------------------- :host .calendar-action-buttons ion-button { - --color: #{$text-color-step-350}; + --color: var(--ion-color-text-650); } .calendar-month-year-toggle { @@ -50,7 +50,7 @@ background: transparent; - color: #{$text-color-step-350}; + color: var(--ion-color-text-650); z-index: 1; @@ -78,7 +78,7 @@ :host .calendar-days-of-week { @include padding(0px, 10px, 0px, 10px); - color: $text-color-step-500; + color: var(--ion-color-text-500); font-size: $datetime-md-calendar-item-font-size; @@ -138,7 +138,7 @@ } :host .calendar-day.calendar-day-adjacent-day { - color: $text-color-step-500; + color: var(--ion-color-text-500); } // Time / Header @@ -148,7 +148,7 @@ } :host .time-header { - color: #{$text-color-step-350}; + color: var(--ion-color-text-650); } // Month and Year diff --git a/core/src/components/datetime/datetime.native.scss b/core/src/components/datetime/datetime.native.scss index eee452f1076..f9710ecb89c 100644 --- a/core/src/components/datetime/datetime.native.scss +++ b/core/src/components/datetime/datetime.native.scss @@ -77,7 +77,7 @@ @include globals.border-radius(8px); @include globals.padding(6px, 12px, 6px, 12px); - background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0)); + background: var(--ion-components-ion-datetime-time-body-bg); color: globals.$text-color; } diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss index 453acc1d189..659696bac17 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Color of the infinite scroll loading indicator -$infinite-scroll-ios-loading-color: $text-color-step-400; +$infinite-scroll-ios-loading-color: var(--ion-color-text-600); /// @prop - Color of the infinite scroll loading indicator text $infinite-scroll-ios-loading-text-color: $infinite-scroll-ios-loading-color; diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss index f1fca17e82e..c52340dea63 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Color of the infinite scroll loading indicator -$infinite-scroll-md-loading-color: $text-color-step-400; +$infinite-scroll-md-loading-color: var(--ion-color-text-600); /// @prop - Color of the infinite scroll loading indicator text $infinite-scroll-md-loading-text-color: $infinite-scroll-md-loading-color; diff --git a/core/src/components/input-otp/input-otp.md.scss b/core/src/components/input-otp/input-otp.md.scss index eb21b802d3e..d51a5a49857 100644 --- a/core/src/components/input-otp/input-otp.md.scss +++ b/core/src/components/input-otp/input-otp.md.scss @@ -16,5 +16,5 @@ // -------------------------------------------------- :host(.input-otp-fill-outline) { - --border-color: #{$background-color-step-300}; + --border-color: var(--ion-color-gray-300); } diff --git a/core/src/components/input-otp/input-otp.native.scss b/core/src/components/input-otp/input-otp.native.scss index daf2b3ff877..291273e5385 100644 --- a/core/src/components/input-otp/input-otp.native.scss +++ b/core/src/components/input-otp/input-otp.native.scss @@ -14,7 +14,7 @@ --border-style: solid; --separator-width: 8px; --separator-border-radius: 999px; - --separator-color: #{$background-color-step-150}; + --separator-color: var(--ion-color-gray-150); --highlight-color-focused: #{ion-color(primary, base)}; --highlight-color-valid: #{ion-color(success, base)}; --highlight-color-invalid: #{ion-color(danger, base)}; @@ -26,7 +26,7 @@ // ---------------------------------------------------------------- .input-otp-description { - color: $text-color-step-300; + color: var(--ion-color-text-700); font-size: dynamic-font(12px); @@ -83,30 +83,30 @@ } :host(.input-otp-fill-solid) { - --border-color: #{$background-color-step-50}; - --background: #{$background-color-step-50}; + --border-color: var(--ion-color-gray-50); + --background: var(--ion-color-gray-50); } // States // -------------------------------------------------- :host(.input-otp-disabled) { - --color: #{$text-color-step-650}; + --color: var(--ion-color-text-350); } :host(.input-otp-fill-outline.input-otp-disabled) { - --background: #{$background-color-step-50}; - --border-color: #{$background-color-step-100}; + --background: var(--ion-color-gray-50); + --border-color: var(--ion-color-gray-100); } :host(.input-otp-fill-outline.input-otp-readonly) { - --background: #{$background-color-step-50}; + --background: var(--ion-color-gray-50); } :host(.input-otp-fill-solid.input-otp-disabled), :host(.input-otp-fill-solid.input-otp-readonly) { - --border-color: #{$background-color-step-100}; - --background: #{$background-color-step-100}; + --border-color: var(--ion-color-gray-100); + --background: var(--ion-color-gray-100); } // Colors diff --git a/core/src/components/input/input.md.outline.scss b/core/src/components/input/input.md.outline.scss index c9577e16676..a407b9db5ca 100644 --- a/core/src/components/input/input.md.outline.scss +++ b/core/src/components/input/input.md.outline.scss @@ -2,7 +2,7 @@ // ---------------------------------------------------------------- :host(.input-fill-outline) { - --border-color: #{$background-color-step-300}; + --border-color: var(--ion-color-gray-300); --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; @@ -31,7 +31,7 @@ */ @media (any-hover: hover) { :host(.input-fill-outline:hover) { - --border-color: #{$background-color-step-750}; + --border-color: var(--ion-color-gray-750); } } diff --git a/core/src/components/input/input.md.solid.scss b/core/src/components/input/input.md.solid.scss index f3df1521515..b0c4a092d5d 100644 --- a/core/src/components/input/input.md.solid.scss +++ b/core/src/components/input/input.md.solid.scss @@ -2,8 +2,8 @@ // ---------------------------------------------------------------- :host(.input-fill-solid) { - --background: #{$background-color-step-50}; - --border-color: #{$background-color-step-500}; + --background: var(--ion-color-gray-50); + --border-color: var(--ion-color-gray-500); --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; @@ -44,8 +44,8 @@ */ @media (any-hover: hover) { :host(.input-fill-solid:hover) { - --background: #{$background-color-step-100}; - --border-color: #{$background-color-step-750}; + --background: var(--ion-color-gray-100); + --border-color: var(--ion-color-gray-750); } } @@ -54,8 +54,8 @@ * much darker on focus. */ :host(.input-fill-solid.has-focus) { - --background: #{$background-color-step-150}; - --border-color: #{$background-color-step-750}; + --background: var(--ion-color-gray-150); + --border-color: var(--ion-color-gray-750); } :host(.input-fill-solid) .input-wrapper { diff --git a/core/src/components/input/input.native.scss b/core/src/components/input/input.native.scss index 4ac5d333b8b..82fb9d429b5 100644 --- a/core/src/components/input/input.native.scss +++ b/core/src/components/input/input.native.scss @@ -55,7 +55,7 @@ width: 30px; height: 30px; - color: $text-color-step-400; + color: var(--ion-color-text-600); } /** @@ -108,14 +108,14 @@ // ---------------------------------------------------------------- .input-bottom .helper-text { - color: $text-color-step-300; + color: var(--ion-color-text-700); } // Input Max Length Counter // ---------------------------------------------------------------- .input-bottom .counter { - color: $text-color-step-300; + color: var(--ion-color-text-700); padding-inline-start: 16px; } diff --git a/core/src/components/input/test/validation/index.html b/core/src/components/input/test/validation/index.html index 2a6ad89e13f..4ce28439b14 100644 --- a/core/src/components/input/test/validation/index.html +++ b/core/src/components/input/test/validation/index.html @@ -24,8 +24,6 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); - margin-top: 10px; margin-bottom: 5px; } diff --git a/core/src/components/item-divider/item-divider.ios.vars.scss b/core/src/components/item-divider/item-divider.ios.vars.scss index 89901c1f13e..1d896b02e5a 100644 --- a/core/src/components/item-divider/item-divider.ios.vars.scss +++ b/core/src/components/item-divider/item-divider.ios.vars.scss @@ -14,10 +14,10 @@ $item-divider-ios-font-size: dynamic-font(17px); $item-divider-ios-font-weight: 600; /// @prop - Background for the divider -$item-divider-ios-background: $background-color-step-100; +$item-divider-ios-background: var(--ion-color-text-100); /// @prop - Color for the divider -$item-divider-ios-color: $text-color-step-150; +$item-divider-ios-color: var(--ion-color-text-850); /// @prop - Padding start for the divider $item-divider-ios-padding-start: $item-ios-padding-start; diff --git a/core/src/components/item-divider/item-divider.md.vars.scss b/core/src/components/item-divider/item-divider.md.vars.scss index 97a58f09b24..25db47009f6 100644 --- a/core/src/components/item-divider/item-divider.md.vars.scss +++ b/core/src/components/item-divider/item-divider.md.vars.scss @@ -8,7 +8,7 @@ $item-divider-md-min-height: 30px; /// @prop - Color for the divider -$item-divider-md-color: $text-color-step-600; +$item-divider-md-color: var(--ion-color-text-400); /// @prop - Background for the divider $item-divider-md-background: $background-color; diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss index 223b08125f3..9855dfaab56 100644 --- a/core/src/components/item/item.ios.vars.scss +++ b/core/src/components/item/item.ios.vars.scss @@ -25,7 +25,7 @@ $item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end; $item-ios-paragraph-font-size: dynamic-font(14px); /// @prop - Color of the item paragraph -$item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3); +$item-ios-paragraph-text-color: var(--ion-components-ion-item-paragraph-text-color); /// @prop - Width of the avatar in the item $item-ios-avatar-width: 36px; diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss index 4e38c76ec26..2a65ae5c181 100644 --- a/core/src/components/item/item.md.vars.scss +++ b/core/src/components/item/item.md.vars.scss @@ -7,7 +7,7 @@ $item-md-min-height: 48px; /// @prop - Color of the item paragraph -$item-md-paragraph-text-color: $text-color-step-400; +$item-md-paragraph-text-color: var(--ion-color-text-600); /// @prop - Font size of the item $item-md-font-size: 16px; diff --git a/core/src/components/label/label.ios.vars.scss b/core/src/components/label/label.ios.vars.scss index 48cadf30ce9..0d46ee6c3c3 100644 --- a/core/src/components/label/label.ios.vars.scss +++ b/core/src/components/label/label.ios.vars.scss @@ -14,4 +14,4 @@ $label-ios-text-wrap-font-size: dynamic-font(14px); $label-ios-text-wrap-line-height: 1.5; /// @prop - Color of the item paragraph -$item-ios-paragraph-text-color: $text-color-step-600; +$item-ios-paragraph-text-color: var(--ion-color-text-400); diff --git a/core/src/components/list-header/list-header.ios.vars.scss b/core/src/components/list-header/list-header.ios.vars.scss index 44b3a35693c..72d04336b6e 100644 --- a/core/src/components/list-header/list-header.ios.vars.scss +++ b/core/src/components/list-header/list-header.ios.vars.scss @@ -17,7 +17,7 @@ $list-header-ios-font-weight: 700; $list-header-ios-letter-spacing: 0; /// @prop - Text color of the list header -$list-header-ios-color: $text-color-step-150; +$list-header-ios-color: var(--ion-color-text-850); /// @prop - Background color of the list header $list-header-ios-background-color: transparent; diff --git a/core/src/components/loading/loading.ios.vars.scss b/core/src/components/loading/loading.ios.vars.scss index 05cd183091a..bc410684700 100644 --- a/core/src/components/loading/loading.ios.vars.scss +++ b/core/src/components/loading/loading.ios.vars.scss @@ -31,7 +31,7 @@ $loading-ios-border-radius: 8px; $loading-ios-text-color: $text-color; /// @prop - Background of the loading wrapper -$loading-ios-background-color: $overlay-ios-background-color; +$loading-ios-background-color: var(--ion-color-overlay-bg); /// @prop - Background color alpha of the translucent loading wrapper $loading-ios-translucent-background-color-alpha: 0.8; @@ -43,7 +43,7 @@ $loading-ios-translucent-background-color: rgba($background-color-rgb, $loading- $loading-ios-content-font-weight: bold; /// @prop - Color of the loading spinner -$loading-ios-spinner-color: $text-color-step-400; +$loading-ios-spinner-color: var(--ion-color-text-600); /// @prop - Filter of the translucent loading $loading-ios-translucent-filter: saturate(180%) blur(20px); diff --git a/core/src/components/loading/loading.md.vars.scss b/core/src/components/loading/loading.md.vars.scss index fcdaa57fc00..98ae4c68564 100644 --- a/core/src/components/loading/loading.md.vars.scss +++ b/core/src/components/loading/loading.md.vars.scss @@ -28,10 +28,10 @@ $loading-md-max-height: 90%; $loading-md-border-radius: 2px; /// @prop - Text color of the loading wrapper -$loading-md-text-color: $text-color-step-150; +$loading-md-text-color: var(--ion-color-text-850); /// @prop - Background of the loading wrapper -$loading-md-background: $background-color-step-50; +$loading-md-background: var(--ion-color-gray-50); /// @prop - Box shadow color of the loading wrapper $loading-md-box-shadow-color: rgba(0, 0, 0, 0.4); diff --git a/core/src/components/modal/modal.ios.scss b/core/src/components/modal/modal.ios.scss index 58954468d22..f7f1b987462 100644 --- a/core/src/components/modal/modal.ios.scss +++ b/core/src/components/modal/modal.ios.scss @@ -5,6 +5,9 @@ // -------------------------------------------------- :host { + --ion-background-color: var(--ion-components-ion-modal-bg); + --ion-toolbar-background: var(--ion-components-ion-modal-toolbar-background); + --ion-toolbar-border-color: var(--ion-components-ion-modal-toolbar-border-color); --backdrop-opacity: var(--ion-backdrop-opacity, 0.4); } diff --git a/core/src/components/modal/modal.native.scss b/core/src/components/modal/modal.native.scss index b94d65d0cd9..067eb69b9a6 100644 --- a/core/src/components/modal/modal.native.scss +++ b/core/src/components/modal/modal.native.scss @@ -41,7 +41,7 @@ width: 36px; height: 5px; - background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be)); + background: var(--ion-components-ion-modal-handle-bg); &::before { /** diff --git a/core/src/components/note/note.ios.vars.scss b/core/src/components/note/note.ios.vars.scss index 75836d251b7..07aad56b362 100644 --- a/core/src/components/note/note.ios.vars.scss +++ b/core/src/components/note/note.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Text color of the note -$note-ios-color: $text-color-step-650; +$note-ios-color: var(--ion-color-text-350); /// @prop - Font size of the note $note-ios-font-size: dynamic-font-min(0.875, 16px); diff --git a/core/src/components/note/note.md.vars.scss b/core/src/components/note/note.md.vars.scss index b733c522f8c..4b8036f2e35 100644 --- a/core/src/components/note/note.md.vars.scss +++ b/core/src/components/note/note.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Text color of the note -$note-md-color: $text-color-step-400; +$note-md-color: var(--ion-color-text-600); /// @prop - Font size of the note $note-md-font-size: dynamic-font(14px); diff --git a/core/src/components/picker/picker.ios.scss b/core/src/components/picker/picker.ios.scss index f474efe997b..df87680b5f2 100644 --- a/core/src/components/picker/picker.ios.scss +++ b/core/src/components/picker/picker.ios.scss @@ -18,5 +18,5 @@ } :host .picker-highlight { - background: var(--highlight-background, var(--ion-color-step-150, var(--ion-background-color-step-150, #eeeeef))); + background: var(--highlight-background, var(--ion-components-ion-picker-highlight-bg)); } diff --git a/core/src/components/popover/popover.ios.vars.scss b/core/src/components/popover/popover.ios.vars.scss index 195d3145423..bee2a3b9fa2 100644 --- a/core/src/components/popover/popover.ios.vars.scss +++ b/core/src/components/popover/popover.ios.vars.scss @@ -25,4 +25,4 @@ $popover-ios-translucent-filter: saturate(180%) blur(20px); $popover-ios-desktop-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); /// $prop - Border of popover content on desktop -$popover-ios-desktop-border: 0.5px solid $background-color-step-100; +$popover-ios-desktop-border: 0.5px solid var(--ion-color-gray-100); diff --git a/core/src/components/progress-bar/progress-bar.ios.scss b/core/src/components/progress-bar/progress-bar.ios.scss index 2c8c60fbcdb..b1619202df6 100644 --- a/core/src/components/progress-bar/progress-bar.ios.scss +++ b/core/src/components/progress-bar/progress-bar.ios.scss @@ -18,5 +18,5 @@ * solid (with a buffer value of 1). This maintains * the custom Ionic appearance for a buffered progress bar. */ - --background: #{$background-color-step-100}; + --background: var(--ion-color-gray-100); } diff --git a/core/src/components/radio-group/radio-group.native.scss b/core/src/components/radio-group/radio-group.native.scss index c0a65bdd955..ec8d9836389 100644 --- a/core/src/components/radio-group/radio-group.native.scss +++ b/core/src/components/radio-group/radio-group.native.scss @@ -20,5 +20,5 @@ } .radio-group-top .helper-text { - color: $text-color-step-300; + color: var(--ion-color-text-700); } diff --git a/core/src/components/radio-group/test/validation/index.html b/core/src/components/radio-group/test/validation/index.html index 49fdbf1ebbc..1e0d7c354fd 100644 --- a/core/src/components/radio-group/test/validation/index.html +++ b/core/src/components/radio-group/test/validation/index.html @@ -24,8 +24,6 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); - margin-top: 10px; margin-bottom: 5px; } diff --git a/core/src/components/range/range.ios.vars.scss b/core/src/components/range/range.ios.vars.scss index dace5a00686..0ee84cbedcb 100644 --- a/core/src/components/range/range.ios.vars.scss +++ b/core/src/components/range/range.ios.vars.scss @@ -23,7 +23,7 @@ $range-ios-hit-height: $range-ios-slider-height; $range-ios-bar-height: 4px; /// @prop - Background of the range bar -$range-ios-bar-background-color: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6)); +$range-ios-bar-background-color: var(--ion-components-ion-range-bg); /// @prop - Border radius of the range bar $range-ios-bar-border-radius: 2px; diff --git a/core/src/components/range/range.md.vars.scss b/core/src/components/range/range.md.vars.scss index 3916b431087..805f3e46127 100644 --- a/core/src/components/range/range.md.vars.scss +++ b/core/src/components/range/range.md.vars.scss @@ -20,7 +20,7 @@ $range-md-slider-height: 42px; $range-md-bar-height: 2px; /// @prop - Background of the range bar -$range-md-bar-background-color: $background-color-step-250; +$range-md-bar-background-color: var(--ion-color-gray-250); /// @prop - Font size of the range pin $range-md-pin-font-size: dynamic-font(12px); diff --git a/core/src/components/refresher/refresher.ios.vars.scss b/core/src/components/refresher/refresher.ios.vars.scss index 3cb4a38f54b..fbf48b3233f 100644 --- a/core/src/components/refresher/refresher.ios.vars.scss +++ b/core/src/components/refresher/refresher.ios.vars.scss @@ -7,7 +7,7 @@ $refresher-ios-icon-color: $text-color; $refresher-ios-text-color: $text-color; /// @prop - Color of the native refresher spinner -$refresher-ios-native-spinner-color: var(--ion-color-step-450, var(--ion-background-color-step-450, #747577)); +$refresher-ios-native-spinner-color: var(--ion-components-ion-refresher-native-spinner-color); /// @prop - Width of the native refresher spinner $refresher-ios-native-spinner-width: 32px; diff --git a/core/src/components/refresher/refresher.md.vars.scss b/core/src/components/refresher/refresher.md.vars.scss index a27b0fcfb2f..bce4c650542 100644 --- a/core/src/components/refresher/refresher.md.vars.scss +++ b/core/src/components/refresher/refresher.md.vars.scss @@ -10,10 +10,10 @@ $refresher-md-text-color: $text-color; $refresher-md-native-spinner-color: #{ion-color(primary, base)}; /// @prop - Border of the native refresher spinner -$refresher-md-native-spinner-border: 1px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #ececec)); +$refresher-md-native-spinner-border: 1px solid var(--ion-components-ion-refresher-native-spinner-border); /// @prop - Background of the native refresher spinner -$refresher-md-native-spinner-background: var(--ion-color-step-250, var(--ion-background-color-step-250, #ffffff)); +$refresher-md-native-spinner-background: var(--ion-components-ion-refresher-native-spinner-bg); /// @prop - Box shadow of the native refresher spinner $refresher-md-native-spinner-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1); diff --git a/core/src/components/searchbar/searchbar.ios.vars.scss b/core/src/components/searchbar/searchbar.ios.vars.scss index a675bf7848f..175c6fe2a8e 100644 --- a/core/src/components/searchbar/searchbar.ios.vars.scss +++ b/core/src/components/searchbar/searchbar.ios.vars.scss @@ -29,7 +29,7 @@ $searchbar-ios-cancel-button-background-color: transparent; $searchbar-ios-input-search-icon-size: dynamic-font(22px); /// @prop - Color of the searchbar input search icon -$searchbar-ios-input-search-icon-color: $text-color-step-400; +$searchbar-ios-input-search-icon-color: var(--ion-color-text-600); /// @prop - Minimum Height of the searchbar input $searchbar-ios-input-min-height: 36px; @@ -56,7 +56,7 @@ $searchbar-ios-cancel-transition: all 300ms ease; $searchbar-ios-input-icon-opacity: 0.5; /// @prop - Color of the searchbar input clear icon -$searchbar-ios-input-clear-icon-color: $text-color-step-400; +$searchbar-ios-input-clear-icon-color: var(--ion-color-text-600); /// @prop - Size of the searchbar input clear icon $searchbar-ios-input-clear-icon-size: dynamic-font(18px); diff --git a/core/src/components/searchbar/searchbar.md.vars.scss b/core/src/components/searchbar/searchbar.md.vars.scss index 12381b3c912..afd70770b50 100644 --- a/core/src/components/searchbar/searchbar.md.vars.scss +++ b/core/src/components/searchbar/searchbar.md.vars.scss @@ -19,7 +19,7 @@ $searchbar-md-padding-start: $searchbar-md-padding-end; $searchbar-md-background: inherit; /// @prop - Color of the searchbar cancel button -$searchbar-md-cancel-button-color: $text-color-step-100; +$searchbar-md-cancel-button-color: var(--ion-color-text-900); /// @prop - Background color of the searchbar cancel button $searchbar-md-cancel-button-background-color: transparent; @@ -28,7 +28,7 @@ $searchbar-md-cancel-button-background-color: transparent; $searchbar-md-cancel-button-font-size: 1.5em; /// @prop - Color of the searchbar input search icon -$searchbar-md-input-search-icon-color: $text-color-step-400; +$searchbar-md-input-search-icon-color: var(--ion-color-text-600); /// @prop - Size of the searchbar input search icon $searchbar-md-input-search-icon-size: dynamic-font(21px); @@ -44,7 +44,7 @@ $searchbar-md-input-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px 0 1px 5px 0 rgba(0, 0, 0, 0.12); /// @prop - Color of the searchbar input text -$searchbar-md-input-text-color: $text-color-step-150; +$searchbar-md-input-text-color: var(--ion-color-text-850); /// @prop - Background of the searchbar input $searchbar-md-input-background-color: $background-color; diff --git a/core/src/components/segment-button/segment-button.ios.vars.scss b/core/src/components/segment-button/segment-button.ios.vars.scss index b505849fa34..5b15114e3b4 100644 --- a/core/src/components/segment-button/segment-button.ios.vars.scss +++ b/core/src/components/segment-button/segment-button.ios.vars.scss @@ -13,7 +13,7 @@ $segment-button-ios-background-checked: $segment-button-ios-background; $segment-button-ios-color: $text-color; /// @prop - Background of the checked segment button indicator -$segment-button-ios-indicator-color: var(--ion-color-step-350, var(--ion-background-color-step-350, $background-color)); +$segment-button-ios-indicator-color: var(--ion-components-ion-segment-button-checked-indicator-bg); /// @prop - Margin of the segment button $segment-button-ios-margin: 2px; diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss index 3e65937f6bf..8efefa2bb57 100644 --- a/core/src/components/select/select.ios.scss +++ b/core/src/components/select/select.ios.scss @@ -16,7 +16,7 @@ // Color deviates from the iOS spec, but satisfies WCAG AAA: // https://www.w3.org/TR/WCAG20-TECHS/G18.html - color: #{$text-color-step-350}; + color: var(--ion-color-text-650); } // Select Inner Wrapper diff --git a/core/src/components/select/select.md.outline.scss b/core/src/components/select/select.md.outline.scss index 66f15f0f91b..46d8b37139f 100644 --- a/core/src/components/select/select.md.outline.scss +++ b/core/src/components/select/select.md.outline.scss @@ -4,7 +4,7 @@ // ---------------------------------------------------------------- :host(.select-fill-outline) { - --border-color: #{$background-color-step-300}; + --border-color: var(--ion-color-gray-300); --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; @@ -33,7 +33,7 @@ */ @media (any-hover: hover) { :host(.select-fill-outline:hover) { - --border-color: #{$background-color-step-750}; + --border-color: var(--ion-color-gray-750); } } diff --git a/core/src/components/select/select.md.solid.scss b/core/src/components/select/select.md.solid.scss index 12a42d2222f..2f6321e31a4 100644 --- a/core/src/components/select/select.md.solid.scss +++ b/core/src/components/select/select.md.solid.scss @@ -4,8 +4,8 @@ // ---------------------------------------------------------------- :host(.select-fill-solid) { - --background: #{$background-color-step-50}; - --border-color: #{$background-color-step-500}; + --background: var(--ion-color-gray-50); + --border-color: var(--ion-color-gray-500); --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; @@ -47,8 +47,8 @@ */ @media (any-hover: hover) { :host(.select-fill-solid:hover) { - --background: #{$background-color-step-100}; - --border-color: #{$background-color-step-750}; + --background: var(--ion-color-gray-100); + --border-color: var(--ion-color-gray-750); } } @@ -58,7 +58,7 @@ */ :host(.select-fill-solid.select-expanded), :host(.select-fill-solid.has-focus) { - --background: #{$background-color-step-150}; + --background: var(--ion-color-gray-150); --border-color: var(--highlight-color); } diff --git a/core/src/components/select/select.md.vars.scss b/core/src/components/select/select.md.vars.scss index 3b466d495af..e08adf3255d 100644 --- a/core/src/components/select/select.md.vars.scss +++ b/core/src/components/select/select.md.vars.scss @@ -8,7 +8,7 @@ $select-md-icon-size: dynamic-font(13px); /// @prop - Color of the select icon -$select-md-icon-color: $text-color-step-500; +$select-md-icon-color: var(--ion-color-text-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..edbae15b64a 100644 --- a/core/src/components/select/select.native.scss +++ b/core/src/components/select/select.native.scss @@ -78,7 +78,7 @@ // ---------------------------------------------------------------- .select-bottom .helper-text { - color: $text-color-step-300; + color: var(--ion-color-text-700); } // Select Text diff --git a/core/src/components/select/test/validation/index.html b/core/src/components/select/test/validation/index.html index 74d0586bd77..1ae85ce4217 100644 --- a/core/src/components/select/test/validation/index.html +++ b/core/src/components/select/test/validation/index.html @@ -24,8 +24,6 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); - margin-top: 10px; margin-bottom: 5px; } diff --git a/core/src/components/tab-bar/tab-bar.ios.scss b/core/src/components/tab-bar/tab-bar.ios.scss index 9b2769acf88..10537c3b3b7 100644 --- a/core/src/components/tab-bar/tab-bar.ios.scss +++ b/core/src/components/tab-bar/tab-bar.ios.scss @@ -6,9 +6,9 @@ :host { // default color / background - --background: #{$tabbar-ios-background}; + --background: var(--ion-components-ion-tab-bar-bg); --background-focused: #{$tabbar-ios-background-focused}; - --border: #{$hairlines-width solid $tabbar-ios-border-color}; + --border: #{$hairlines-width solid var(--ion-tab-bar-border-color, var(--ion-components-ion-tab-bar-border-color))}; --color: #{$tab-button-ios-text-color}; --color-selected: #{$tabbar-ios-color-selected}; diff --git a/core/src/components/tab-bar/tab-bar.md.scss b/core/src/components/tab-bar/tab-bar.md.scss index 3ed1b0eb66e..f460b48b7c1 100644 --- a/core/src/components/tab-bar/tab-bar.md.scss +++ b/core/src/components/tab-bar/tab-bar.md.scss @@ -6,7 +6,7 @@ // default color / background --background: #{$tabbar-md-background}; --background-focused: #{$tabbar-md-background-focused}; - --border: #{1px solid $tabbar-md-border-color}; + --border: #{1px solid (var(--ion-tab-bar-border-color, var(--ion-components-ion-tab-bar-border-color)))}; --color: #{$tab-button-md-text-color}; --color-selected: #{$tabbar-md-color-selected}; diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts index 9069cbb8e85..f3e5e629ea2 100644 --- a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts +++ b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts @@ -13,36 +13,44 @@ configs({ modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, conf .ionic { --ion-background-color: #ccc7c7; } + + #container { + padding-top: 5px; + } - - - - Label - +
+ + + + Label + - - - Label - + + + Label + - - - Label - + + + Label + - - - Label - - + + + Label + + +
`, config ); - const tabBar = page.locator('ion-tab-bar'); + // The border top is not being captured in the screenshot + // so we need padding on a container to make sure it's visible + const container = page.locator('#container'); - await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-default`)); + await expect(container).toHaveScreenshot(screenshot(`tab-bar-default`)); }); }); }); @@ -63,29 +71,37 @@ configs().forEach(({ title, screenshot, config }) => { --ion-safe-area-left: 40px; --ion-safe-area-right: 20px; } + + #container { + padding-top: 5px; + } - - - Recents - +
+ + + Recents + - - Favorites - 23 - + + Favorites + 23 + - - Settings - - + + Settings + + +
`, config ); - const tabBar = page.locator('ion-tab-bar'); + // The border top is not being captured in the screenshot + // so we need padding on a container to make sure it's visible + const container = page.locator('#container'); - await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-safe-area`)); + await expect(container).toHaveScreenshot(screenshot(`tab-bar-safe-area`)); }); }); }); diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index 3b8697b1965..f4b8a242e9e 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index 31341a0a6d8..959740947c4 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png index 1bdf0306ba9..c81efcfc292 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png index 2363e1bc0df..735d7f0fc6f 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png index f30e8a41c9f..cef69fa86f4 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png index 72ae83f87cb..6f91c0032d6 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Chrome-linux.png index 83c212336e1..f63535c98f5 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Firefox-linux.png index 206d1020762..b3d1ce42d3b 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Safari-linux.png index 41f50acc499..639babf5233 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Chrome-linux.png index c67c3c8fb84..d3241fc7421 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Firefox-linux.png index b73e7c14f9b..f4020a1acb9 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Safari-linux.png index 6d26868b500..82190783c69 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Chrome-linux.png index 98c6730ae45..19fb2cc6356 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Firefox-linux.png index 86b608d2b94..10b962f469b 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Safari-linux.png index 982d3e78762..7d7e6fe3e09 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Chrome-linux.png index 78cf4d51236..33311069749 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Firefox-linux.png index aa9ea25cd2b..4eea500cb5b 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Safari-linux.png index 656a683b1e5..770f4b77545 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Chrome-linux.png index 94f39949241..2e89080de9b 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Firefox-linux.png index b78f7c1b021..10646767a3a 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Safari-linux.png index 2b1eb92fea0..912be5cd4c1 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Chrome-linux.png index 7729c008b96..7d507144a16 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Firefox-linux.png index ebb6748e95e..9bc358b4127 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Safari-linux.png index 96620415fb8..300001f5053 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Chrome-linux.png index fa3047272b6..13fdd8b970d 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Firefox-linux.png index 938ff320ead..0fe5fbd4891 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Safari-linux.png index cc945af8709..43ea0024b23 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Chrome-linux.png index 043581beb4e..8597145c083 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Firefox-linux.png index 08c60d47d45..93c7fa8f568 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Safari-linux.png index 2377ddd70f3..f8e5a837ecc 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Safari-linux.png index 8c6919dcd2e..07ab52af7b1 100644 Binary files a/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts index ada3b65e46e..d9582a39a56 100644 --- a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts +++ b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts @@ -16,28 +16,37 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c body { background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet); } + + #container { + padding-top: 5px; + } - - - Recents - + +
+ + + Recents + - - Favorites - 23 - + + Favorites + 23 + - - Settings - - + + Settings + + +
`, config ); - const tabBar = page.locator('ion-tab-bar'); + const container = page.locator('#container'); - await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-translucent`)); + // The border top is not being captured in the screenshot + // so we need padding on a container to make sure it's visible + await expect(container).toHaveScreenshot(screenshot(`tab-bar-translucent`)); }); test('should render translucent tab bar even when wrapped in a page container', async ({ page }) => { await page.setContent( diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Chrome-linux.png index e451765985d..325415421a0 100644 Binary files a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Safari-linux.png index 6ca8470ec8c..7bc30f614d7 100644 Binary files a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Chrome-linux.png index 0f8e0a2fe2d..d0dee9e6d3f 100644 Binary files a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Safari-linux.png index 459409ab9f0..747f36f5f46 100644 Binary files a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/validation/index.html b/core/src/components/textarea/test/validation/index.html index 6f977a7d915..632a9f95e30 100644 --- a/core/src/components/textarea/test/validation/index.html +++ b/core/src/components/textarea/test/validation/index.html @@ -24,8 +24,6 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); - margin-top: 10px; margin-bottom: 5px; } diff --git a/core/src/components/textarea/textarea.md.outline.scss b/core/src/components/textarea/textarea.md.outline.scss index 5cb2c66f348..b928b880fbc 100644 --- a/core/src/components/textarea/textarea.md.outline.scss +++ b/core/src/components/textarea/textarea.md.outline.scss @@ -4,7 +4,7 @@ // ---------------------------------------------------------------- :host(.textarea-fill-outline) { - --border-color: #{$background-color-step-300}; + --border-color: var(--ion-color-gray-300); --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; @@ -33,7 +33,7 @@ */ @media (any-hover: hover) { :host(.textarea-fill-outline:hover) { - --border-color: #{$background-color-step-750}; + --border-color: var(--ion-color-gray-750); } } diff --git a/core/src/components/textarea/textarea.md.solid.scss b/core/src/components/textarea/textarea.md.solid.scss index 9d831daf0e0..35539a07fc8 100644 --- a/core/src/components/textarea/textarea.md.solid.scss +++ b/core/src/components/textarea/textarea.md.solid.scss @@ -4,8 +4,8 @@ // ---------------------------------------------------------------- :host(.textarea-fill-solid) { - --background: #{$background-color-step-50}; - --border-color: #{$background-color-step-500}; + --background: var(--ion-color-gray-50); + --border-color: var(--ion-color-gray-500); --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; @@ -46,8 +46,8 @@ */ @media (any-hover: hover) { :host(.textarea-fill-solid:hover) { - --background: #{$background-color-step-100}; - --border-color: #{$background-color-step-750}; + --background: var(--ion-color-gray-100); + --border-color: var(--ion-color-gray-750); } } @@ -56,8 +56,8 @@ * much darker on focus. */ :host(.textarea-fill-solid.has-focus) { - --background: #{$background-color-step-150}; - --border-color: #{$background-color-step-750}; + --background: var(--ion-color-gray-150); + --border-color: var(--ion-color-gray-750); } :host(.textarea-fill-solid) .textarea-wrapper { diff --git a/core/src/components/textarea/textarea.native.scss b/core/src/components/textarea/textarea.native.scss index b0d3c36ec2e..899c05620d8 100644 --- a/core/src/components/textarea/textarea.native.scss +++ b/core/src/components/textarea/textarea.native.scss @@ -72,14 +72,14 @@ // ---------------------------------------------------------------- .textarea-bottom .helper-text { - color: globals.$text-color-step-300; + color: var(--ion-color-text-700); } // Textarea Max Length Counter // ---------------------------------------------------------------- .textarea-bottom .counter { - color: globals.$text-color-step-300; + color: var(--ion-color-text-700); padding-inline-start: 16px; } diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts b/core/src/components/toast/test/a11y/toast.e2e.ts index bf1fbfd72c7..23cdd9501e2 100644 --- a/core/src/components/toast/test/a11y/toast.e2e.ts +++ b/core/src/components/toast/test/a11y/toast.e2e.ts @@ -236,7 +236,8 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { */ configs({ directions: ['ltr'], palettes: ['high-contrast-dark', 'high-contrast'] }).forEach( ({ title, config, screenshot }) => { - test.describe(title('toast: high contrast: buttons'), () => { + // TODO(FW-4005): Once high contrast themes are fully implemented in ionic modular, remove the skips from these tests + test.describe.skip(title('toast: high contrast: buttons'), () => { test.beforeEach(async ({ page }) => { await page.setContent( ` diff --git a/core/src/components/toast/toast.ios.vars.scss b/core/src/components/toast/toast.ios.vars.scss index 6200099d3d1..53370577973 100644 --- a/core/src/components/toast/toast.ios.vars.scss +++ b/core/src/components/toast/toast.ios.vars.scss @@ -9,7 +9,7 @@ $toast-ios-max-height: 478px; /// @prop - Background Color of the toast wrapper -$toast-ios-background-color: $background-color-step-50; +$toast-ios-background-color: var(--ion-color-gray-50); /// @prop - Background Color alpha of the toast wrapper when translucent $toast-ios-translucent-background-color-alpha: 0.8; @@ -21,7 +21,7 @@ $toast-ios-translucent-background-color: rgba($background-color-rgb, $toast-ios- $toast-ios-border-radius: 14px; /// @prop - Color of the toast title -$toast-ios-title-color: $text-color-step-150; +$toast-ios-title-color: var(--ion-color-text-850); /// @prop - Font size of the toast title $toast-ios-header-font-weight: 500; diff --git a/core/src/components/toast/toast.md.vars.scss b/core/src/components/toast/toast.md.vars.scss index f0749a6f0eb..79b5b3b527a 100644 --- a/core/src/components/toast/toast.md.vars.scss +++ b/core/src/components/toast/toast.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Background of the toast -$toast-md-background: $background-color-step-800; +$toast-md-background: var(--ion-color-gray-800); /// @prop - Box shadow of the toast $toast-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), @@ -14,7 +14,7 @@ $toast-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, $toast-md-font-size: dynamic-font(14px); /// @prop - Color of the toast -$toast-md-color: $text-color-step-950; +$toast-md-color: var(--ion-color-text-50); /// @prop - Border radius of the toast wrapper $toast-md-border-radius: 4px; @@ -77,7 +77,7 @@ $toast-md-button-opacity-hover: 0.08; $toast-md-button-background-color-hover: ion-color(primary, base, $toast-md-button-opacity-hover); /// @prop - Text color of the cancel toast button -$toast-md-button-cancel-text-color: $text-color-step-900; +$toast-md-button-cancel-text-color: var(--ion-color-gray-100); /// @prop - Background color of the cancel toast button on hover $toast-md-button-cancel-background-color-hover: rgba($background-color-rgb, $toast-md-button-opacity-hover); diff --git a/core/src/components/toggle/test/validation/index.html b/core/src/components/toggle/test/validation/index.html index 54932edeb08..30f42ed160a 100644 --- a/core/src/components/toggle/test/validation/index.html +++ b/core/src/components/toggle/test/validation/index.html @@ -24,8 +24,6 @@ font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); - margin-top: 10px; margin-bottom: 5px; } diff --git a/core/src/components/toggle/toggle.native.scss b/core/src/components/toggle/toggle.native.scss index c71397efddb..11be09c151b 100644 --- a/core/src/components/toggle/toggle.native.scss +++ b/core/src/components/toggle/toggle.native.scss @@ -42,7 +42,7 @@ } .toggle-bottom .helper-text { - color: $text-color-step-300; + color: var(--ion-color-text-700); } // Input Label diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Chrome-linux.png index 4ad457bb0a3..bb69dce333a 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Firefox-linux.png index 9c106966636..f7b4765b747 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Safari-linux.png index cda44e8be65..699111abbfe 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Chrome-linux.png index 6eb3e0d2b5c..1462fcde043 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Firefox-linux.png index 6494689ed27..f8838bab39b 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Safari-linux.png index 28978fa112c..897bd3c991b 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Chrome-linux.png index a1253d9355a..87aca6fe10f 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Firefox-linux.png index 303b43b5954..bb0b2b3f243 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Chrome-linux.png index baee190f0c4..13e0b551dcd 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Firefox-linux.png index c01630f5f68..9bbaa0bfb91 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png index c9ddbe7d166..b8ebe23b0f7 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png index a57ab716311..b75e6655674 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/css/ionic-swiper.scss b/core/src/css/ionic-swiper.scss index f87583dc417..08630907032 100644 --- a/core/src/css/ionic-swiper.scss +++ b/core/src/css/ionic-swiper.scss @@ -7,7 +7,7 @@ // These values are the same for iOS and MD // We just do not add a .md or .ios class beforehand // so the styles are easier to override by the user. - --bullet-background: $text-color-step-800; + --bullet-background: var(--ion-color-text-200); --bullet-background-active: ion-color(primary, base); --progress-bar-background: rgba($text-color-rgb, 0.25); --progress-bar-background-active: ion-color(primary, shade); diff --git a/core/src/css/palettes/dark.scss b/core/src/css/palettes/dark.scss index 75e0611caf2..66778edad14 100644 --- a/core/src/css/palettes/dark.scss +++ b/core/src/css/palettes/dark.scss @@ -135,15 +135,10 @@ $colors: ( --ion-text-color-step-850: #262626; --ion-text-color-step-900: #1a1a1a; --ion-text-color-step-950: #0d0d0d; + // TODO(FW-4004): Implement the following components to the dark theme in ionic modular --ion-item-background: #000000; --ion-card-background: #1c1c1d; } - - & ion-modal { - --ion-background-color: var(--ion-color-step-100, var(--ion-background-color-step-100)); - --ion-toolbar-background: var(--ion-color-step-150, var(--ion-background-color-step-150)); - --ion-toolbar-border-color: var(--ion-color-step-250, var(--ion-background-color-step-250)); - } } @mixin dark-md-palette() { @@ -190,8 +185,8 @@ $colors: ( --ion-text-color-step-850: #363636; --ion-text-color-step-900: #2a2a2a; --ion-text-color-step-950: #1e1e1e; + // TODO(FW-4004): Implement the following components to the dark theme in ionic modular --ion-item-background: #1e1e1e; - --ion-toolbar-background: #1f1f1f; --ion-tab-bar-background: #1f1f1f; --ion-card-background: #1e1e1e; } diff --git a/core/src/css/palettes/high-contrast-dark.scss b/core/src/css/palettes/high-contrast-dark.scss index c39338396d2..84c31000ac1 100644 --- a/core/src/css/palettes/high-contrast-dark.scss +++ b/core/src/css/palettes/high-contrast-dark.scss @@ -128,10 +128,6 @@ $lightest-text-color: $text-color; --ion-text-color-rgb: #{color-to-rgb-list($text-color)}; --ion-item-background: #000000; --ion-card-background: #1c1c1d; - - /// Only the item borders should increase in contrast - /// Borders for elements like toolbars should remain the same - --ion-item-border-color: var(--ion-background-color-step-400); --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)}; --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)}; --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)}; @@ -171,15 +167,6 @@ $lightest-text-color: $text-color; --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)}; --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)}; } - - // Modal - // -------------------------------------------------- - - & ion-modal { - --ion-background-color: var(--ion-background-color-step-100); - --ion-toolbar-background: var(--ion-background-color-step-150); - --ion-toolbar-border-color: var(--ion-background-color-step-250); - } } @mixin high-contrast-dark-md-palette() { @@ -190,15 +177,11 @@ $lightest-text-color: $text-color; --ion-background-color-rgb: #{color-to-rgb-list($background-color)}; --ion-text-color: #{$text-color}; --ion-text-color-rgb: #{color-to-rgb-list($text-color)}; + // TODO(FW-4005): Implement the following components to the high contrast dark theme in ionic modular --ion-border-color: #222222; --ion-item-background: #1e1e1e; - --ion-toolbar-background: #1f1f1f; --ion-tab-bar-background: #1f1f1f; --ion-card-background: #1e1e1e; - - /// Only the item borders should increase in contrast - /// Borders for elements like toolbars should remain the same - --ion-item-border-color: var(--ion-background-color-step-400); --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)}; --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)}; --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)}; @@ -239,6 +222,7 @@ $lightest-text-color: $text-color; --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)}; } + // TODO(FW-4005): Implement the following to the high contrast dark theme in ionic modular // Toast // -------------------------------------------------- diff --git a/core/src/css/palettes/high-contrast.scss b/core/src/css/palettes/high-contrast.scss index 97153f3df50..ff058ac5a66 100644 --- a/core/src/css/palettes/high-contrast.scss +++ b/core/src/css/palettes/high-contrast.scss @@ -104,8 +104,11 @@ $lightest-text-color: #888888; --ion-background-color-rgb: #{color-to-rgb-list($background-color)}; --ion-text-color: #{$text-color}; --ion-text-color-rgb: #{color-to-rgb-list($text-color)}; + + // TODO(FW-4005): Implement the following to the high contrast theme in ionic modular --ion-placeholder-opacity: 0.8; + // TODO(FW-4005): Implement the following to the high contrast theme in ionic modular /// Only the item borders should increase in contrast /// Borders for elements like toolbars should remain the same --ion-item-border-color: #7a7a7a; @@ -141,6 +144,7 @@ $lightest-text-color: #888888; } } +// TODO(FW-4005): Implement the following to the high contrast theme in ionic modular @mixin high-contrast-light-md-palette() { // Toast // -------------------------------------------------- diff --git a/core/src/themes/base/dark.tokens.ts b/core/src/themes/base/dark.tokens.ts index 1b611610c66..343cc597637 100644 --- a/core/src/themes/base/dark.tokens.ts +++ b/core/src/themes/base/dark.tokens.ts @@ -1,7 +1,7 @@ -import { mix } from '../../utils/theme'; +import { mix, generateColorSteps } from '../../utils/theme'; import type { DarkTheme } from '../themes.interfaces'; -const colors = { +export const colors = { primary: '#4d8dff', secondary: '#46b1ff', tertiary: '#8482fb', @@ -11,6 +11,7 @@ const colors = { light: '#222428', medium: '#989aa2', dark: '#f4f5f8', + gray: generateColorSteps('#ffffff', '#000', true), }; export const darkTheme: DarkTheme = { @@ -160,6 +161,8 @@ export const darkTheme: DarkTheme = { tint: mix('#000', colors.dark, '12%'), }, }, + gray: colors.gray, + text: colors.gray, }, backgroundColor: '#000000', @@ -167,50 +170,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/default.tokens.ts b/core/src/themes/base/default.tokens.ts index 6df6efb9e6f..e0a8de09e48 100644 --- a/core/src/themes/base/default.tokens.ts +++ b/core/src/themes/base/default.tokens.ts @@ -1,14 +1,25 @@ +import { generateColorSteps } from '../../utils/theme'; import type { DefaultTheme } from '../themes.interfaces'; import { darkTheme } from './dark.tokens'; +import { highContrastDarkTheme } from './high-contrast-dark.tokens'; +import { highContrastTheme } from './high-contrast.tokens'; import { lightTheme } from './light.tokens'; +export const colors = { + white: '#ffffff', + black: '#000000', + gray: generateColorSteps('#fff', '#000'), +}; + export const defaultTheme: DefaultTheme = { name: 'base', palette: { light: lightTheme, dark: darkTheme, + highContrast: highContrastTheme, + highContrastDark: highContrastDarkTheme, }, config: { @@ -160,4 +171,18 @@ export const defaultTheme: DefaultTheme = { xl: '2', xxl: '2.4', }, + + color: { + ...colors, + text: colors.gray, + }, + + components: { + IonBreadcrumb: { + separatorColor: 'var(--ion-color-text-550)', + }, + IonDatetimeButton: { + bg: 'var(--ion-color-gray-300)', + }, + }, }; diff --git a/core/src/themes/base/high-contrast-dark.tokens.ts b/core/src/themes/base/high-contrast-dark.tokens.ts new file mode 100644 index 00000000000..65eb4709dd6 --- /dev/null +++ b/core/src/themes/base/high-contrast-dark.tokens.ts @@ -0,0 +1,174 @@ +import { generateColorSteps, mix } from '../../utils/theme'; +import type { HighContrastDarkTheme } from '../themes.interfaces'; + +import { colors as baseDarkColors } from './dark.tokens'; + +const colors = { + primary: '#7cabff', + secondary: '#62bdff', + tertiary: '#b6b9f9', + success: '#4ada71', + warning: '#ffce31', + danger: '#fc9aa2', + light: '#222428', + medium: '#a8aab3', + dark: '#f4f5f8', + gray: baseDarkColors.gray, +}; + +export const highContrastDarkTheme: HighContrastDarkTheme = { + enabled: 'never', + color: { + primary: { + bold: { + base: colors.primary, + contrast: '#000', + foreground: colors.primary, + shade: mix(colors.primary, '#000', '12%'), + tint: mix(colors.primary, '#fff', '10%'), + }, + subtle: { + base: mix('#fff', colors.primary, '8%'), + contrast: colors.primary, + foreground: mix(colors.primary, '#000', '12%'), + shade: mix('#fff', colors.primary, '12%'), + tint: mix('#fff', colors.primary, '4%'), + }, + }, + secondary: { + bold: { + base: colors.secondary, + contrast: '#000', + foreground: colors.secondary, + shade: mix(colors.secondary, '#000', '12%'), + tint: mix(colors.secondary, '#fff', '10%'), + }, + subtle: { + base: mix('#fff', colors.secondary, '8%'), + contrast: colors.secondary, + foreground: mix(colors.secondary, '#000', '12%'), + shade: mix('#fff', colors.secondary, '12%'), + tint: mix('#fff', colors.secondary, '4%'), + }, + }, + tertiary: { + bold: { + base: colors.tertiary, + contrast: '#000', + foreground: colors.tertiary, + shade: mix(colors.tertiary, '#000', '12%'), + tint: mix(colors.tertiary, '#fff', '10%'), + }, + subtle: { + base: mix('#fff', colors.tertiary, '8%'), + contrast: colors.tertiary, + foreground: mix(colors.tertiary, '#000', '12%'), + shade: mix('#fff', colors.tertiary, '12%'), + tint: mix('#fff', colors.tertiary, '4%'), + }, + }, + success: { + bold: { + base: colors.success, + contrast: '#000', + foreground: colors.success, + shade: mix(colors.success, '#000', '12%'), + tint: mix(colors.success, '#fff', '10%'), + }, + subtle: { + base: mix('#fff', colors.success, '8%'), + contrast: colors.success, + foreground: mix(colors.success, '#000', '12%'), + shade: mix('#fff', colors.success, '12%'), + tint: mix('#fff', colors.success, '4%'), + }, + }, + warning: { + bold: { + base: colors.warning, + contrast: '#000', + foreground: colors.warning, + shade: mix(colors.warning, '#000', '12%'), + tint: mix(colors.warning, '#fff', '10%'), + }, + subtle: { + base: mix('#fff', colors.warning, '8%'), + contrast: colors.warning, + foreground: mix(colors.warning, '#000', '12%'), + shade: mix('#fff', colors.warning, '12%'), + tint: mix('#fff', colors.warning, '4%'), + }, + }, + danger: { + bold: { + base: colors.danger, + contrast: '#000', + foreground: colors.danger, + shade: mix(colors.danger, '#000', '12%'), + tint: mix(colors.danger, '#fff', '10%'), + }, + subtle: { + base: mix('#fff', colors.danger, '8%'), + contrast: colors.danger, + foreground: mix(colors.danger, '#000', '12%'), + shade: mix('#fff', colors.danger, '12%'), + tint: mix('#fff', colors.danger, '4%'), + }, + }, + light: { + bold: { + base: colors.light, + contrast: '#fff', + foreground: colors.light, + shade: mix(colors.light, '#000', '12%'), + tint: mix(colors.light, '#fff', '10%'), + }, + subtle: { + base: mix('#fff', colors.light, '8%'), + contrast: colors.light, + foreground: mix(colors.light, '#000', '12%'), + shade: mix('#fff', colors.light, '12%'), + tint: mix('#fff', colors.light, '4%'), + }, + }, + medium: { + bold: { + base: colors.medium, + contrast: '#000', + foreground: colors.medium, + shade: mix(colors.medium, '#000', '12%'), + tint: mix(colors.medium, '#fff', '10%'), + }, + subtle: { + base: mix('#fff', colors.medium, '8%'), + contrast: colors.medium, + foreground: mix(colors.medium, '#000', '12%'), + shade: mix('#fff', colors.medium, '12%'), + tint: mix('#fff', colors.medium, '4%'), + }, + }, + dark: { + bold: { + base: colors.dark, + contrast: '#000', + foreground: colors.dark, + shade: mix(colors.dark, '#000', '12%'), + tint: mix(colors.dark, '#fff', '10%'), + }, + subtle: { + base: mix('#fff', colors.dark, '8%'), + contrast: colors.dark, + foreground: mix(colors.dark, '#000', '12%'), + shade: mix('#fff', colors.dark, '12%'), + tint: mix('#fff', colors.dark, '4%'), + }, + }, + gray: colors.gray, + text: generateColorSteps('#ffffff', '#888888', true), + }, + + backgroundColor: '#000000', + backgroundColorRgb: '0, 0, 0', + textColor: '#ffffff', + textColorRgb: '255, 255, 255', +}; diff --git a/core/src/themes/base/high-contrast.tokens.ts b/core/src/themes/base/high-contrast.tokens.ts new file mode 100644 index 00000000000..18d9e4c4a11 --- /dev/null +++ b/core/src/themes/base/high-contrast.tokens.ts @@ -0,0 +1,170 @@ +import { generateColorSteps, mix } from '../../utils/theme'; +import type { HighContrastTheme } from '../themes.interfaces'; + +const colors = { + primary: '#003fae', + secondary: '#01487b', + tertiary: '#3400e6', + success: '#004314', + warning: '#5f4100', + danger: '#9c000c', + light: '#f4f5f8', + medium: '#444446', + dark: '#222428', +}; + +export const highContrastTheme: HighContrastTheme = { + enabled: 'never', + color: { + primary: { + bold: { + base: colors.primary, + contrast: '#fff', + foreground: colors.primary, + shade: mix(colors.primary, '#000', '12%'), + tint: mix(colors.primary, '#fff', '10%'), + }, + subtle: { + base: mix('#fff', colors.primary, '8%'), + contrast: colors.primary, + foreground: mix(colors.primary, '#000', '12%'), + shade: mix('#fff', colors.primary, '12%'), + tint: mix('#fff', colors.primary, '4%'), + }, + }, + secondary: { + bold: { + base: colors.secondary, + contrast: '#fff', + foreground: colors.secondary, + shade: mix(colors.secondary, '#000', '12%'), + tint: mix(colors.secondary, '#fff', '10%'), + }, + subtle: { + base: mix('#fff', colors.secondary, '8%'), + contrast: colors.secondary, + foreground: mix(colors.secondary, '#000', '12%'), + shade: mix('#fff', colors.secondary, '12%'), + tint: mix('#fff', colors.secondary, '4%'), + }, + }, + tertiary: { + bold: { + base: colors.tertiary, + contrast: '#fff', + foreground: colors.tertiary, + shade: mix(colors.tertiary, '#000', '12%'), + tint: mix(colors.tertiary, '#fff', '10%'), + }, + subtle: { + base: mix('#fff', colors.tertiary, '8%'), + contrast: colors.tertiary, + foreground: mix(colors.tertiary, '#000', '12%'), + shade: mix('#fff', colors.tertiary, '12%'), + tint: mix('#fff', colors.tertiary, '4%'), + }, + }, + success: { + bold: { + base: colors.success, + contrast: '#fff', + foreground: colors.success, + shade: mix(colors.success, '#000', '12%'), + tint: mix(colors.success, '#fff', '10%'), + }, + subtle: { + base: mix('#fff', colors.success, '8%'), + contrast: colors.success, + foreground: mix(colors.success, '#000', '12%'), + shade: mix('#fff', colors.success, '12%'), + tint: mix('#fff', colors.success, '4%'), + }, + }, + warning: { + bold: { + base: colors.warning, + contrast: '#fff', + foreground: colors.warning, + shade: mix(colors.warning, '#000', '12%'), + tint: mix(colors.warning, '#fff', '10%'), + }, + subtle: { + base: mix('#fff', colors.warning, '8%'), + contrast: colors.warning, + foreground: mix(colors.warning, '#000', '12%'), + shade: mix('#fff', colors.warning, '12%'), + tint: mix('#fff', colors.warning, '4%'), + }, + }, + danger: { + bold: { + base: colors.danger, + contrast: '#fff', + foreground: colors.danger, + shade: mix(colors.danger, '#000', '12%'), + tint: mix(colors.danger, '#fff', '10%'), + }, + subtle: { + base: mix('#fff', colors.danger, '8%'), + contrast: colors.danger, + foreground: mix(colors.danger, '#000', '12%'), + shade: mix('#fff', colors.danger, '12%'), + tint: mix('#fff', colors.danger, '4%'), + }, + }, + light: { + bold: { + base: colors.light, + contrast: '#000', + foreground: colors.light, + shade: mix(colors.light, '#000', '12%'), + tint: mix(colors.light, '#fff', '10%'), + }, + subtle: { + base: mix('#fff', colors.light, '8%'), + contrast: colors.light, + foreground: mix(colors.light, '#000', '12%'), + shade: mix('#fff', colors.light, '12%'), + tint: mix('#fff', colors.light, '4%'), + }, + }, + medium: { + bold: { + base: colors.medium, + contrast: '#fff', + foreground: colors.medium, + shade: mix(colors.medium, '#000', '12%'), + tint: mix(colors.medium, '#fff', '10%'), + }, + subtle: { + base: mix('#fff', colors.medium, '8%'), + contrast: colors.medium, + foreground: mix(colors.medium, '#000', '12%'), + shade: mix('#fff', colors.medium, '12%'), + tint: mix('#fff', colors.medium, '4%'), + }, + }, + dark: { + bold: { + base: colors.dark, + contrast: '#fff', + foreground: colors.dark, + shade: mix(colors.dark, '#000', '12%'), + tint: mix(colors.dark, '#fff', '10%'), + }, + subtle: { + base: mix('#fff', colors.dark, '8%'), + contrast: colors.dark, + foreground: mix(colors.dark, '#000', '12%'), + shade: mix('#fff', colors.dark, '12%'), + tint: mix('#fff', colors.dark, '4%'), + }, + }, + text: generateColorSteps('#888888', '#000000'), + }, + + backgroundColor: '#ffffff', + backgroundColorRgb: '255, 255, 255', + textColor: '#000000', + textColorRgb: '0, 0, 0', +}; diff --git a/core/src/themes/base/light.tokens.ts b/core/src/themes/base/light.tokens.ts index f584b3279c7..ba333a41cf2 100644 --- a/core/src/themes/base/light.tokens.ts +++ b/core/src/themes/base/light.tokens.ts @@ -160,4 +160,12 @@ export const lightTheme: LightTheme = { }, }, }, + components: { + IonBreadcrumb: { + separatorColor: '#73849a', + }, + IonDatetimeButton: { + bg: '#edeef0', + }, + }, }; diff --git a/core/src/themes/ionic/dark.tokens.ts b/core/src/themes/ionic/dark.tokens.ts index 8e7222b581a..c9fddf6f492 100644 --- a/core/src/themes/ionic/dark.tokens.ts +++ b/core/src/themes/ionic/dark.tokens.ts @@ -3,4 +3,10 @@ import type { DarkTheme } from '../themes.interfaces'; export const darkTheme: DarkTheme = { ...baseDarkTheme, + + components: { + IonDatetimeButton: { + bg: '#595959', + }, + }, }; diff --git a/core/src/themes/ionic/light.tokens.ts b/core/src/themes/ionic/light.tokens.ts index 94c96baeb90..001cc3106bd 100644 --- a/core/src/themes/ionic/light.tokens.ts +++ b/core/src/themes/ionic/light.tokens.ts @@ -19,5 +19,8 @@ export const lightTheme: LightTheme = { colorSelected: 'var(--ion-tab-bar-color-selected, #0d4bc3)', borderColor: 'var(--ion-tab-bar-border-color, transparent)', }, + IonBreadcrumb: { + separatorColor: '#a0a0a0', + }, }, }; diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts index 345cdef3a51..1c7a1609d1f 100644 --- a/core/src/themes/ios/dark.tokens.ts +++ b/core/src/themes/ios/dark.tokens.ts @@ -1,54 +1,21 @@ -import { darkTheme as baseDarkTheme } from '../base/dark.tokens'; +import { darkTheme as baseDarkTheme, colors as defaultDarkColors } from '../base/dark.tokens'; +import { colors as defaultColors } from '../base/default.tokens'; import type { DarkTheme } from '../themes.interfaces'; +const colors = { + background: defaultColors.black, + textColor: defaultColors.white, + gray: defaultDarkColors.gray, +}; + 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', - }, + backgroundColor: colors.background, + textColor: colors.textColor, - 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, }, components: { @@ -56,12 +23,12 @@ export const darkTheme: DarkTheme = { background: '#1c1c1d', }, IonItem: { - background: '#000000', + bg: '#000000', }, IonModal: { - background: 'var(--ion-background-color-step-100)', - toolbarBackground: 'var(--ion-background-color-step-150)', - toolbarBorderColor: 'var(--ion-background-color-step-250)', + bg: 'var(--ion-color-gray-100)', + toolbarBg: 'var(--ion-color-gray-150)', + toolbarBorderColor: 'var(--ion-color-gray-250)', }, }, }; diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts index 266191a1cb8..c70a2cbf3ec 100644 --- a/core/src/themes/ios/default.tokens.ts +++ b/core/src/themes/ios/default.tokens.ts @@ -2,6 +2,8 @@ import { defaultTheme as baseDefaultTheme } from '../base/default.tokens'; import type { DefaultTheme } from '../themes.interfaces'; import { darkTheme } from './dark.tokens'; +import { highContrastDarkTheme } from './high-contrast-dark.tokens'; +import { highContrastTheme } from './high-contrast.tokens'; import { lightTheme } from './light.tokens'; export const defaultTheme: DefaultTheme = { @@ -12,10 +14,16 @@ export const defaultTheme: DefaultTheme = { palette: { light: lightTheme, dark: darkTheme, + highContrast: highContrastTheme, + highContrastDark: highContrastDarkTheme, }, fontFamily: '-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif', + color: { + 'overlay-bg': 'var(--ion-overlay-background-color, var(--ion-color-gray-100))', // Available only in iOS + }, + spacing: { xxxxs: 'var(--ion-spacing-25)', xxxs: 'var(--ion-spacing-50)', @@ -71,4 +79,52 @@ export const defaultTheme: DefaultTheme = { xxxl: 'var(--ion-radii-500)', xxxxl: 'var(--ion-radii-full)', }, + components: { + IonActionSheet: { + buttonColorDisabled: 'var(--ion-color-gray-850)', + buttonBgSelected: 'var(--ion-color-gray-150)', + }, + IonBreadcrumb: { + color: 'var(--ion-color-text-850)', + bgFocused: 'var(--ion-color-gray-50)', + iconColor: 'var(--ion-color-text-400)', + iconColorActive: 'var(--ion-color-text-850)', + iconColorFocused: 'var(--ion-color-text-750)', // Available only in iOS + indicatorBg: 'var(--ion-color-gray-100)', + indicatorBgFocused: 'var(--ion-color-gray-150)', + separatorColor: 'var(--ion-color-text-550)', + }, + IonDatetime: { + bg: 'var(--ion-color-gray-950)', + timeBodyBg: 'var(--ion-color-gray-300)', + }, + IonItem: { + paragraphTextColor: 'var(--ion-color-text-450)', + borderColor: 'var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-gray-250)))', + }, + IonModal: { + handleBg: 'var(--ion-color-gray-350)', + }, + IonPicker: { + highlightBg: 'var(--ion-color-text-150)', // Available only in iOS + }, + IonRange: { + bg: 'var(--ion-color-gray-900)', // Available only in iOS + }, + IonRefresher: { + nativeSpinnerColor: 'var(--ion-color-gray-450)', // Available only in iOS + }, + IonSegmentButton: { + checkedIndicatorBg: 'var(--ion-color-gray-350)', // Available only in iOS + }, + IonTabBar: { + bg: 'var(--ion-tab-bar-background-color, var(--ion-color-gray-50))', + borderColor: 'var(--ion-border-color, var(--ion-color-gray-150))', + }, + IonToolbar: { + activatedButtonColor: 'var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))', + bg: 'var(--ion-color-gray-50)', + borderColor: 'var(--ion-border-color, var(--ion-color-gray-150))', + }, + }, }; diff --git a/core/src/themes/ios/high-contrast-dark.tokens.ts b/core/src/themes/ios/high-contrast-dark.tokens.ts new file mode 100644 index 00000000000..3d93be52fb6 --- /dev/null +++ b/core/src/themes/ios/high-contrast-dark.tokens.ts @@ -0,0 +1,19 @@ +import { highContrastDarkTheme as baseHighContrastDarkTheme } from '../base/high-contrast-dark.tokens'; +import type { HighContrastDarkTheme } from '../themes.interfaces'; + +export const highContrastDarkTheme: HighContrastDarkTheme = { + ...baseHighContrastDarkTheme, + + components: { + IonItem: { + /// Only the item borders should increase in contrast + /// Borders for elements like toolbars should remain the same + borderColor: 'var(--ion-color-gray-400)', + }, + IonModal: { + bg: 'var(--ion-color-gray-100)', + toolbarBg: 'var(--ion-color-gray-150)', + toolbarBorderColor: 'var(--ion-color-gray-250)', + }, + }, +}; diff --git a/core/src/themes/ios/high-contrast.tokens.ts b/core/src/themes/ios/high-contrast.tokens.ts new file mode 100644 index 00000000000..90bf5c40c6b --- /dev/null +++ b/core/src/themes/ios/high-contrast.tokens.ts @@ -0,0 +1,6 @@ +import { highContrastTheme as baseHighContrastTheme } from '../base/high-contrast.tokens'; +import type { HighContrastTheme } from '../themes.interfaces'; + +export const highContrastTheme: HighContrastTheme = { + ...baseHighContrastTheme, +}; diff --git a/core/src/themes/ios/light.tokens.ts b/core/src/themes/ios/light.tokens.ts index b7679b9f553..0815ce89580 100644 --- a/core/src/themes/ios/light.tokens.ts +++ b/core/src/themes/ios/light.tokens.ts @@ -1,3 +1,58 @@ +import { colors as defaultColors } from '../base/default.tokens'; import type { LightTheme } from '../themes.interfaces'; -export const lightTheme: LightTheme = {}; +const colors = { + gray: defaultColors.gray, +}; + +export const lightTheme: LightTheme = { + color: { + gray: colors.gray, + 'overlay-bg': 'var(--ion-overlay-background-color, #f9f9f9)', // Available only in iOS + }, + components: { + IonActionSheet: { + buttonBgSelected: `var(--ion-background-color, ${defaultColors.white})`, + }, + IonDatetime: { + timeBodyBg: '#edeef0', + }, + IonBreadcrumb: { + color: '#2d4665', + bgFocused: 'rgba(233, 237, 243, 0.7)', + iconColor: '#92a0b3', + iconColorActive: '#242d39', + iconColorFocused: '#445b78', // Available only in iOS + indicatorBg: '#e9edf3', + indicatorBgFocused: '#d9e0ea', + separatorColor: '#73849a', + }, + IonItem: { + paragraphTextColor: '#a3a3a3', + borderColor: 'var(--ion-item-border-color, var(--ion-border-color, #c8c7cc))', + }, + IonModal: { + handleBg: '#c0c0be', + }, + IonPicker: { + highlightBg: '#eeeeef', // Available only in iOS + }, + IonRange: { + bg: 'var(--ion-color-gray-100)', // Available only in iOS + }, + IonRefresher: { + nativeSpinnerColor: '#747577', // Available only in iOS + }, + IonSegmentButton: { + checkedIndicatorBg: defaultColors.white, // Available only in iOS + }, + IonTabBar: { + bg: 'var(--ion-tab-bar-background-color, #f7f7f7)', + borderColor: 'var(--ion-border-color, rgba(0, 0, 0, 0.2))', + }, + IonToolbar: { + bg: '#f7f7f7', + borderColor: 'var(--ion-border-color, rgba(0, 0, 0, 0.2))', + }, + }, +}; diff --git a/core/src/themes/md/dark.tokens.ts b/core/src/themes/md/dark.tokens.ts index 80b9d9116e1..d839586f865 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 { colors as defaultColors } from '../base/default.tokens'; import type { DarkTheme } from '../themes.interfaces'; +const colors = { + gray: generateColorSteps(defaultColors.white, '#121212', true), +}; + export const darkTheme: DarkTheme = { ...baseDarkTheme, @@ -9,60 +15,19 @@ export const darkTheme: DarkTheme = { textColor: '#ffffff', textColorRgb: '255, 255, 255', - 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', + color: { + // TODO: Update hex values to use the text color variable and background color variable + gray: colors.gray, + text: colors.gray, }, components: { IonCard: { - background: '#1e1e1e', + bg: '#1e1e1e', }, IonItem: { background: '#1e1e1e', }, - IonToolbar: { - background: '#1f1f1f', - }, IonTabBar: { background: '#1f1f1f', }, diff --git a/core/src/themes/md/default.tokens.ts b/core/src/themes/md/default.tokens.ts index 7dcff7c0445..57bc9167339 100644 --- a/core/src/themes/md/default.tokens.ts +++ b/core/src/themes/md/default.tokens.ts @@ -2,6 +2,8 @@ import { defaultTheme as baseDefaultTheme } from '../base/default.tokens'; import type { DefaultTheme } from '../themes.interfaces'; import { darkTheme } from './dark.tokens'; +import { highContrastDarkTheme } from './high-contrast-dark.tokens'; +import { highContrastTheme } from './high-contrast.tokens'; import { lightTheme } from './light.tokens'; export const defaultTheme: DefaultTheme = { @@ -12,6 +14,8 @@ export const defaultTheme: DefaultTheme = { palette: { light: lightTheme, dark: darkTheme, + highContrast: highContrastTheme, + highContrastDark: highContrastDarkTheme, }, config: { @@ -76,4 +80,42 @@ export const defaultTheme: DefaultTheme = { xxxl: 'var(--ion-radii-900)', xxxxl: 'var(--ion-radii-full)', }, + + components: { + IonBreadcrumb: { + color: 'var(--ion-color-text-600)', + colorFocused: 'var(--ion-color-text-800)', // Available only in md + iconColor: 'var(--ion-color-text-550)', + iconColorActive: 'var(--ion-color-text-850)', + bgFocused: 'var(--ion-color-gray-50)', + indicatorBg: 'var(--ion-color-gray-100)', + indicatorBgFocused: 'var(--ion-color-gray-150)', + separatorColor: 'var(--ion-color-gray-550)', + }, + IonDatetime: { + bg: 'var(--ion-color-gray-100)', + timeBodyBg: 'var(--ion-color-gray-300)', + }, + IonDatetimeButton: { + bg: 'var(--ion-color-gray-300)', + }, + IonItem: { + borderColor: 'var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-gray-150)))', + }, + IonModal: { + handleBg: 'var(--ion-color-gray-350)', + }, + IonRefresher: { + nativeSpinnerBorder: 'var(--ion-color-gray-200)', // Available only in md + nativeSpinnerBg: 'var(--ion-color-gray-250)', // Available only in md + }, + IonTabBar: { + borderColor: 'var(--ion-border-color, var(--ion-color-gray-150))', + }, + IonToolbar: { + activatedButtonBg: 'var(--ion-toolbar-background, var(--color))', + bg: '#1f1f1f', + borderColor: 'var(--ion-border-color, var(--ion-color-gray-150))', + }, + }, }; diff --git a/core/src/themes/md/high-contrast-dark.tokens.ts b/core/src/themes/md/high-contrast-dark.tokens.ts new file mode 100644 index 00000000000..8845ff2ad37 --- /dev/null +++ b/core/src/themes/md/high-contrast-dark.tokens.ts @@ -0,0 +1,14 @@ +import { highContrastDarkTheme as baseHighContrastDarkTheme } from '../base/high-contrast-dark.tokens'; +import type { HighContrastDarkTheme } from '../themes.interfaces'; + +export const highContrastDarkTheme: HighContrastDarkTheme = { + ...baseHighContrastDarkTheme, + + components: { + IonItem: { + /// Only the item borders should increase in contrast + /// Borders for elements like toolbars should remain the same + borderColor: 'var(--ion-color-gray-400)', + }, + }, +}; diff --git a/core/src/themes/md/high-contrast.tokens.ts b/core/src/themes/md/high-contrast.tokens.ts new file mode 100644 index 00000000000..b121513c63b --- /dev/null +++ b/core/src/themes/md/high-contrast.tokens.ts @@ -0,0 +1,12 @@ +import { highContrastTheme as baseHighContrastTheme } from '../base/high-contrast.tokens'; +import type { HighContrastTheme } from '../themes.interfaces'; + +export const highContrastTheme: HighContrastTheme = { + ...baseHighContrastTheme, + + components: { + IonToolbar: { + bg: '#1f1f1f', + }, + }, +}; diff --git a/core/src/themes/md/light.tokens.ts b/core/src/themes/md/light.tokens.ts index b7679b9f553..f10ac89c707 100644 --- a/core/src/themes/md/light.tokens.ts +++ b/core/src/themes/md/light.tokens.ts @@ -1,3 +1,38 @@ +import { colors as defaultColors } from '../base/default.tokens'; import type { LightTheme } from '../themes.interfaces'; -export const lightTheme: LightTheme = {}; +export const lightTheme: LightTheme = { + components: { + IonBreadcrumb: { + color: '#677483', + bgFocused: defaultColors.white, + iconColor: '#7d8894', + iconColorActive: '#222d3a', + indicatorBg: '#eef1f3', + indicatorBgFocused: '#dfe5e8', + colorFocused: '#35404e', // Available only in md + separatorColor: '#73849a', + }, + IonDatetime: { + bg: defaultColors.white, + timeBodyBg: '#edeef0', + }, + IonItem: { + borderColor: 'var(--ion-item-border-color, var(--ion-border-color, rgba(0, 0, 0, 0.13)))', + }, + IonModal: { + handleBg: '#c0c0be', + }, + IonRefresher: { + nativeSpinnerBorder: '#ececec', // Available only in md + nativeSpinnerBg: defaultColors.white, // Available only in md + }, + IonTabBar: { + borderColor: 'var(--ion-border-color, rgba(0, 0, 0, 0.07))', + }, + IonToolbar: { + bg: `var(--ion-background-color, ${defaultColors.white})`, + borderColor: 'var(--ion-border-color, #c1c4cd)', + }, + }, +}; diff --git a/core/src/themes/native/native.theme.default.ios.scss b/core/src/themes/native/native.theme.default.ios.scss index aed51b26e13..4535bc7f66d 100644 --- a/core/src/themes/native/native.theme.default.ios.scss +++ b/core/src/themes/native/native.theme.default.ios.scss @@ -7,50 +7,29 @@ // 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)) -); // 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-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)))) -); -$tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-400); +$tabbar-ios-color: var(--ion-tab-bar-color, var(--ion-color-text-600)); $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-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)))) -); +$toolbar-ios-background: var(--ion-toolbar-background, var(--ion-components-ion-toolbar-bg)); +$toolbar-ios-border-color: var(--ion-toolbar-border-color, var(--ion-components-ion-toolbar-border-color)); $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-components-ion-item-border-color); $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, var(--ion-color-text-600))); // 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..2794e185411 100644 --- a/core/src/themes/native/native.theme.default.md.scss +++ b/core/src/themes/native/native.theme.default.md.scss @@ -7,39 +7,31 @@ // 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))); $overlay-md-background-color: var(--ion-overlay-background-color, var(--ion-background-color, #fff)); // Material Design Tabs & Tab bar // -------------------------------------------------- $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)))) -); -$tabbar-md-color: var(--ion-tab-bar-color, $text-color-step-350); +$tabbar-md-color: var(--ion-tab-bar-color, var(--ion-color-text-650)); $tabbar-md-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)); // Material Design Toolbar // -------------------------------------------------- -$toolbar-md-background: var(--ion-toolbar-background, $background-color); -$toolbar-md-border-color: var(--ion-toolbar-border-color, $border-md-color); +$toolbar-md-background: var(--ion-toolbar-background, var(--ion-components-ion-toolbar-bg)); +$toolbar-md-border-color: var(--ion-tab-bar-border-color, var(--ion-components-ion-toolbar-border-color)); $toolbar-md-color: var(--ion-toolbar-color, var(--ion-text-color, #424242)); // Material Design List & List Items // -------------------------------------------------- $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)))) -); +$item-md-border-color: var(--ion-components-ion-item-border-color); $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, var(--ion-color-text-550))); // 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..98ddda2e998 100644 --- a/core/src/themes/native/native.theme.default.scss +++ b/core/src/themes/native/native.theme.default.scss @@ -181,4 +181,4 @@ $text-color-step-950: var( // Default General Colors // -------------------------------------------------- -$placeholder-text-color: var(--ion-placeholder-color, $text-color-step-600); +$placeholder-text-color: var(--ion-placeholder-color, var(--ion-color-text-400)); diff --git a/core/src/themes/native/test/steps/index.html b/core/src/themes/native/test/steps/index.html deleted file mode 100644 index 3579469b36a..00000000000 --- a/core/src/themes/native/test/steps/index.html +++ /dev/null @@ -1,225 +0,0 @@ - - - - - Themes - Steps - - - - - - - - - - - - - -
Background
-
Step 50
-
Step 100
-
Step 150
-
Step 200
-
Step 250
-
Step 300
-
Step 350
-
Step 400
-
Step 450
-
Step 500
-
Step 550
-
Step 600
-
Step 650
-
Step 700
-
Step 750
-
Step 800
-
Step 850
-
Step 900
-
Step 950
-
- -
Text
-
Step 50
-
Step 100
-
Step 150
-
Step 200
-
Step 250
-
Step 300
-
Step 350
-
Step 400
-
Step 450
-
Step 500
-
Step 550
-
Step 600
-
Step 650
-
Step 700
-
Step 750
-
Step 800
-
Step 850
-
Step 900
-
Step 950
- - - - diff --git a/core/src/themes/test/steps/index.html b/core/src/themes/test/steps/index.html new file mode 100644 index 00000000000..3dfc868bc6c --- /dev/null +++ b/core/src/themes/test/steps/index.html @@ -0,0 +1,89 @@ + + + + + Themes - Steps + + + + + + + + + + + + + + + Themes - Steps + + + + +

Gray

+
+ + + + + + diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts index 6e5e8157e29..8906eaa14cc 100644 --- a/core/src/themes/themes.interfaces.ts +++ b/core/src/themes/themes.interfaces.ts @@ -1,3 +1,4 @@ +import type { PredefinedColors } from '../interface'; import type { IonicConfig } from '../utils/config'; // Platform-specific theme @@ -218,24 +219,7 @@ export type BaseTheme = { }; // COLOR TOKENS - color?: { - [key: string]: { - bold: { - base: string; - contrast: string; - foreground: string; - shade: string; - tint: string; - }; - subtle: { - base: string; - contrast: string; - foreground: string; - shade: string; - tint: string; - }; - }; - }; + color?: Colors; // PLATFORM SPECIFIC OVERRIDES ios?: PlatformTheme; @@ -247,6 +231,16 @@ export type DarkTheme = BaseTheme & { enabled: 'system' | 'always' | 'never' | 'class'; }; +// High Contrast theme interface +export type HighContrastTheme = BaseTheme & { + enabled: 'system' | 'always' | 'never' | 'class'; +}; + +// High Contrast Dark theme interface +export type HighContrastDarkTheme = BaseTheme & { + enabled: 'system' | 'always' | 'never' | 'class'; +}; + // Light theme interface export type LightTheme = BaseTheme; @@ -257,7 +251,45 @@ export type DefaultTheme = BaseTheme & { palette?: { light?: LightTheme; dark?: DarkTheme; + highContrast?: HighContrastTheme; + highContrastDark?: HighContrastDarkTheme; }; config?: IonicConfig; }; + +// Semantic color value structure +type SemanticColorValue = { + base: string; + contrast: string; + foreground: string; + shade: string; + tint: string; +}; + +// Semantic color hue value structure +type SemanticHue = { + bold?: SemanticColorValue; + subtle?: SemanticColorValue; +}; + +// Number string keys structure +export type NumberStringKeys = { + // Enforce keys are strings of numbers (like 50, '50', etc.) + [K in number as `${K}`]?: string; +}; + +// Primitive color keys +export type PrimitiveColors = 'gray' | 'black' | 'white' | 'gray-contrast'; + +// Functional color keys +export type FunctionalColors = 'text' | 'overlay-bg'; + +// Colors interface +export type Colors = { + [K in PredefinedColors]?: SemanticHue; +} & { + [K in PrimitiveColors]?: NumberStringKeys; +} & { + [K in FunctionalColors]?: NumberStringKeys; +}; diff --git a/core/src/utils/test/playwright/page/utils/set-content.ts b/core/src/utils/test/playwright/page/utils/set-content.ts index 7ee403d2e4e..185bbaca5da 100644 --- a/core/src/utils/test/playwright/page/utils/set-content.ts +++ b/core/src/utils/test/playwright/page/utils/set-content.ts @@ -68,6 +68,34 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o `; } + /** + * This object is CRITICAL for Playwright stability. + * + * WHY IT'S NEEDED: + * 1. Bypasses Dynamic Loading: It avoids the consistent import + * failure 'await import(...)' when the global theme needed to be + * re-applied after the initial Ionic framework load. + * 2. Prevents Incorrect Palettes: It directly initializes with the + * required 'enabled: "always"' palette before any scripts run. This guarantees that correct CSS variables are loaded from the start. + * Otherwise, it would load the default light palette. + * + * These issues were only happening in Playwright Firefox tests + * that use `setContent`. + */ + const customTheme = { + palette: { + dark: { + enabled: palette === 'dark' ? 'always' : 'never', + }, + highContrast: { + enabled: palette === 'high-contrast' ? 'always' : 'never', + }, + highContrastDark: { + enabled: palette === 'high-contrast-dark' ? 'always' : 'never', + }, + }, + }; + const output = ` @@ -77,14 +105,14 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o ${ionicCSSImports} - ${palette !== 'light' ? `` : ''} ${ionicJSImports} diff --git a/core/src/utils/test/theme.spec.ts b/core/src/utils/test/theme.spec.ts index 9c68d95510d..44182593d6a 100644 --- a/core/src/utils/test/theme.spec.ts +++ b/core/src/utils/test/theme.spec.ts @@ -205,6 +205,12 @@ describe('generateCSSVars', () => { dark: { enabled: 'system', }, + highContrast: { + enabled: 'never', + }, + highContrastDark: { + enabled: 'never', + }, }, config: { rippleEffect: true, @@ -319,6 +325,12 @@ describe('generateGlobalThemeCSS', () => { dark: { enabled: 'never', }, + highContrast: { + enabled: 'never', + }, + highContrastDark: { + enabled: 'never', + }, }, borderWidth: { sm: '4px', @@ -372,6 +384,12 @@ describe('generateGlobalThemeCSS', () => { dark: { enabled: 'never', }, + highContrast: { + enabled: 'never', + }, + highContrastDark: { + enabled: 'never', + }, }, borderWidth: { sm: '4px', @@ -437,6 +455,12 @@ describe('generateGlobalThemeCSS', () => { dark: { enabled: 'never', }, + highContrast: { + enabled: 'never', + }, + highContrastDark: { + enabled: 'never', + }, }, borderWidth: { sm: '4px', @@ -473,11 +497,11 @@ describe('generateGlobalThemeCSS', () => { expect(css).toContain('--ion-border-width-sm: 4px'); expect(css).toContain('--ion-spacing-md: 12px'); - // Should NOT include component variables - expect(css).not.toContain('--ion-components-ion-chip-hue-subtle-bg'); - expect(css).not.toContain('--ion-components-ion-chip-shape-round-border-radius'); - expect(css).not.toContain('--ion-components-ion-button-color-primary-bg'); - expect(css).not.toContain('components'); + // Should include component variables + expect(css).toContain('--ion-components-ion-chip-hue-subtle-bg'); + expect(css).toContain('--ion-components-ion-chip-shape-round-border-radius'); + expect(css).toContain('--ion-components-ion-button-color-primary-bg'); + expect(css).toContain('components'); // Should NOT include palette variables expect(css).not.toContain('--ion-color-palette-dark-enabled-never'); @@ -513,6 +537,12 @@ describe('generateGlobalThemeCSS', () => { }, }, }, + highContrast: { + enabled: 'never', + }, + highContrastDark: { + enabled: 'never', + }, }, borderWidth: { sm: '4px', @@ -555,6 +585,162 @@ describe('generateGlobalThemeCSS', () => { expect(css).toBe(expectedCSS); }); + + it('should generate global CSS for a given theme with high contrast palette enabled for system preference', () => { + const theme = { + name: 'test', + palette: { + light: {}, + dark: { + enabled: 'never', + }, + highContrast: { + enabled: 'system', + color: { + primary: { + bold: { + base: '#0054e9', + contrast: '#ffffff', + shade: '#0041c4', + tint: '#0065ff', + }, + subtle: { + base: '#0054e9', + contrast: '#ffffff', + shade: '#0041c4', + tint: '#0065ff', + }, + }, + red: { + 50: '#ffebee', + 100: '#ffcdd2', + 200: '#ef9a9a', + }, + }, + }, + highContrastDark: { + enabled: 'never', + }, + }, + borderWidth: { + sm: '4px', + }, + spacing: { + md: '12px', + }, + dynamicFont: '-apple-system-body', + }; + + const css = generateGlobalThemeCSS(theme).replace(/\s/g, ''); + + const expectedCSS = ` + :root { + --ion-border-width-sm: 4px; + --ion-spacing-md: 12px; + --ion-dynamic-font: -apple-system-body; + } + + @media(prefers-contrast: more) { + :root { + --ion-color-primary-bold: #0054e9; + --ion-color-primary-bold-rgb: 0, 84, 233; + --ion-color-primary-bold-contrast: #ffffff; + --ion-color-primary-bold-contrast-rgb: 255, 255, 255; + --ion-color-primary-bold-shade: #0041c4; + --ion-color-primary-bold-tint: #0065ff; + --ion-color-primary-subtle: #0054e9; + --ion-color-primary-subtle-rgb: 0, 84, 233; + --ion-color-primary-subtle-contrast: #ffffff; + --ion-color-primary-subtle-contrast-rgb: 255, 255, 255; + --ion-color-primary-subtle-shade: #0041c4; + --ion-color-primary-subtle-tint: #0065ff; + --ion-color-red-50: #ffebee; + --ion-color-red-100: #ffcdd2; + --ion-color-red-200: #ef9a9a; + } + } + `.replace(/\s/g, ''); + + expect(css).toBe(expectedCSS); + }); + + it('should generate global CSS for a given theme with high contrast dark palette enabled for system preference', () => { + const theme = { + name: 'test', + palette: { + light: {}, + dark: { + enabled: 'never', + }, + highContrast: { + enabled: 'never', + }, + highContrastDark: { + enabled: 'system', + color: { + primary: { + bold: { + base: '#0054e9', + contrast: '#ffffff', + shade: '#0041c4', + tint: '#0065ff', + }, + subtle: { + base: '#0054e9', + contrast: '#ffffff', + shade: '#0041c4', + tint: '#0065ff', + }, + }, + red: { + 50: '#ffebee', + 100: '#ffcdd2', + 200: '#ef9a9a', + }, + }, + }, + }, + borderWidth: { + sm: '4px', + }, + spacing: { + md: '12px', + }, + dynamicFont: '-apple-system-body', + }; + + const css = generateGlobalThemeCSS(theme).replace(/\s/g, ''); + + const expectedCSS = ` + :root { + --ion-border-width-sm: 4px; + --ion-spacing-md: 12px; + --ion-dynamic-font: -apple-system-body; + } + + @media(prefers-contrast: more) and (prefers-color-scheme: dark) { + :root { + --ion-color-primary-bold: #0054e9; + --ion-color-primary-bold-rgb: 0, 84, 233; + --ion-color-primary-bold-contrast: #ffffff; + --ion-color-primary-bold-contrast-rgb: 255, 255, 255; + --ion-color-primary-bold-shade: #0041c4; + --ion-color-primary-bold-tint: #0065ff; + --ion-color-primary-subtle: #0054e9; + --ion-color-primary-subtle-rgb: 0, 84, 233; + --ion-color-primary-subtle-contrast: #ffffff; + --ion-color-primary-subtle-contrast-rgb: 255, 255, 255; + --ion-color-primary-subtle-shade: #0041c4; + --ion-color-primary-subtle-tint: #0065ff; + --ion-color-red-50: #ffebee; + --ion-color-red-100: #ffcdd2; + --ion-color-red-200: #ef9a9a; + } + } + `.replace(/\s/g, ''); + + expect(css).toBe(expectedCSS); + }); }); describe('generateComponentThemeCSS', () => { diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts index aeab9823ec2..14110360b20 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'; @@ -274,9 +275,11 @@ export const generateGlobalThemeCSS = (theme: any): string => { return ''; } - // Exclude components and palette from the default tokens + // TODO: NOTE TO SELF: we must include components from the defaults + // since some components share amongst themes. + // Exclude palette from the default tokens // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { palette, components, ...defaultTokens } = theme; + const { palette, ...defaultTokens } = theme; // Generate CSS variables for the default design tokens const defaultTokensCSS = generateCSSVars(defaultTokens); @@ -287,9 +290,31 @@ export const generateGlobalThemeCSS = (theme: any): string => { // Generate CSS variables for the dark color palette const darkTokensCSS = generateCSSVars(palette.dark); + // Generate CSS variable for the high contrast color palette + const highContrastTokensCSS = generateCSSVars(palette.highContrast); + + // Generate CSS variable for the high contrast dark color palette + const highContrastDarkTokensCSS = generateCSSVars(palette.highContrastDark); + + let paletteTokensCSS = lightTokensCSS; + // Include CSS variables for the dark color palette instead of // the light palette if dark palette enabled is 'always' - const paletteTokensCSS = palette.dark.enabled === 'always' ? darkTokensCSS : lightTokensCSS; + if (palette.dark.enabled === 'always') { + paletteTokensCSS = darkTokensCSS; + } + + // Include CSS variables for the high contrast color palette instead of + // the light palette if high contrast palette enabled is 'always' + if (palette.highContrast?.enabled === 'always') { + paletteTokensCSS = highContrastTokensCSS; + } + + // Include CSS variables for the high contrast dark color palette instead of + // the light palette if high contrast dark palette enabled is 'always' + if (palette.highContrastDark?.enabled === 'always') { + paletteTokensCSS = highContrastDarkTokensCSS; + } let css = ` ${CSS_ROOT_SELECTOR} { @@ -308,6 +333,26 @@ export const generateGlobalThemeCSS = (theme: any): string => { `; } + // Include CSS variables for the high contrast color palette inside of a + // class if high contrast palette enabled is 'class' + if (palette.highContrast.enabled === 'class') { + css += ` + .ion-palette-high-contrast { + ${highContrastTokensCSS} + } + `; + } + + // Include CSS variables for the high contrast dark color palette inside of a + // class if high contrast dark palette enabled is 'class' + if (palette.highContrastDark.enabled === 'class') { + css += ` + .ion-palette-high-contrast.ion-palette-dark { + ${highContrastDarkTokensCSS} + } + `; + } + // Include CSS variables for the dark color palette inside of the // dark color scheme media query if dark palette enabled is 'system' if (palette.dark.enabled === 'system') { @@ -320,6 +365,30 @@ export const generateGlobalThemeCSS = (theme: any): string => { `; } + // Include CSS variables for the high contrast color palette inside of the + // high contrast media query if high contrast palette enabled is 'system' + if (palette.highContrast.enabled === 'system') { + css += ` + @media (prefers-contrast: more) { + ${CSS_ROOT_SELECTOR} { + ${highContrastTokensCSS} + } + } + `; + } + + // Include CSS variables for the high contrast dark color palette inside of the + // high contrast dark media query if high contrast dark palette enabled is 'system' + if (palette.highContrastDark.enabled === 'system') { + css += ` + @media (prefers-contrast: more) and (prefers-color-scheme: dark) { + ${CSS_ROOT_SELECTOR} { + ${highContrastDarkTokensCSS} + } + } + `; + } + // Add color classes const colorClasses = generateColorClasses(theme); @@ -350,6 +419,7 @@ export const applyGlobalTheme = (baseTheme: any, userTheme?: any): any => { // Merge themes and apply const mergedTheme = deepMerge(baseTheme, userTheme); + injectCSS(generateGlobalThemeCSS(mergedTheme)); return mergedTheme; }; @@ -471,3 +541,37 @@ export const mix = (baseColor: string, mixColor: string, weight: string): string const toHex = (n: number) => n.toString(16).padStart(2, '0'); return `#${toHex(r)}${toHex(g)}${toHex(b)}`; }; + +/** + * Generates a color scale object by mixing a light and dark color. + * + * This function creates ten distinct shade levels (50, 100, 150, ..., 950) + * by mixing the light color into the dark color using mix percentages + * that increment in steps of 5%. + * + * The final output is an object where keys are the shade levels (50-950) + * and values are the resulting mixed hex codes. + * + * @param {string} lightColor - The lighter base color hex value. + * @param {string} darkColor - The darker base color hex value. + * @param {boolean} isInverted - If true, generates the scale in reverse (dark to light). + * @returns {NumberStringKeys} An object of color shades. + * + * @example + * mix('#ffffff', '#000000', 5%) results in the color for key '50' + * mix('#ffffff', '#000000', 95%) results in the color for key '950' + */ +export const generateColorSteps = (lightColor: string, darkColor: string, isInverted = false): NumberStringKeys => { + const colorSteps: NumberStringKeys = { + 0: isInverted ? darkColor : lightColor, + 1000: isInverted ? lightColor : darkColor, + }; + + for (let i = 50; i <= 950; i += 50) { + const weight = isInverted ? `${100 - i / 10}%` : `${i / 10}%`; + + colorSteps[i.toString() as keyof NumberStringKeys] = mix(lightColor, darkColor, weight); + } + + return colorSteps; +}; diff --git a/docs/sass-guidelines.md b/docs/sass-guidelines.md index ac0a91d728a..c3a64f6ce94 100644 --- a/docs/sass-guidelines.md +++ b/docs/sass-guidelines.md @@ -201,7 +201,7 @@ $text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value); $backdrop-ios-color: var(--ion-backdrop-color, #000); $overlay-ios-background-color: var( --ion-overlay-background-color, - var(--ion-color-step-100, #f9f9f9) + var(--ion-color-gray-100, #f9f9f9) ); ``` diff --git a/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/checkbox-validation/checkbox-validation.component.scss index d8b2a267e5a..87050a04637 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,6 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); margin-top: 10px; margin-bottom: 5px; } diff --git a/packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.scss index add228ccab1..a01129c7fd2 100644 --- a/packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.scss +++ b/packages/angular/test/base/src/app/standalone/validation/input-validation/input-validation.component.scss @@ -8,7 +8,6 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); margin-top: 10px; margin-bottom: 5px; } diff --git a/packages/angular/test/base/src/app/standalone/validation/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..a01129c7fd2 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,6 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); margin-top: 10px; margin-bottom: 5px; } diff --git a/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/select-validation/select-validation.component.scss index add228ccab1..a01129c7fd2 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,6 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); margin-top: 10px; margin-bottom: 5px; } diff --git a/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.scss b/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.scss index 6462ef79f69..e79c88cddaf 100644 --- a/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.scss +++ b/packages/angular/test/base/src/app/standalone/validation/textarea-validation/textarea-validation.component.scss @@ -8,7 +8,6 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); margin-top: 10px; margin-bottom: 5px; } diff --git a/packages/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..a01129c7fd2 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,6 @@ h2 { font-size: 12px; font-weight: normal; - color: var(--ion-color-step-600); margin-top: 10px; margin-bottom: 5px; } diff --git a/packages/react-router/test/base/src/theme/variables.css b/packages/react-router/test/base/src/theme/variables.css index 7bcbe5d6e2a..d853b6b3a92 100644 --- a/packages/react-router/test/base/src/theme/variables.css +++ b/packages/react-router/test/base/src/theme/variables.css @@ -159,25 +159,25 @@ http://ionicframework.com/docs/theming/ */ --ion-text-color: #ffffff; --ion-text-color-rgb: 255, 255, 255; - --ion-color-step-50: #0d0d0d; - --ion-color-step-100: #1a1a1a; - --ion-color-step-150: #262626; - --ion-color-step-200: #333333; - --ion-color-step-250: #404040; - --ion-color-step-300: #4d4d4d; - --ion-color-step-350: #595959; - --ion-color-step-400: #666666; - --ion-color-step-450: #737373; - --ion-color-step-500: #808080; - --ion-color-step-550: #8c8c8c; - --ion-color-step-600: #999999; - --ion-color-step-650: #a6a6a6; - --ion-color-step-700: #b3b3b3; - --ion-color-step-750: #bfbfbf; - --ion-color-step-800: #cccccc; - --ion-color-step-850: #d9d9d9; - --ion-color-step-900: #e6e6e6; - --ion-color-step-950: #f2f2f2; + --ion-color-gray-50: #0d0d0d; + --ion-color-gray-100: #1a1a1a; + --ion-color-gray-150: #262626; + --ion-color-gray-200: #333333; + --ion-color-gray-250: #404040; + --ion-color-gray-300: #4d4d4d; + --ion-color-gray-350: #595959; + --ion-color-gray-400: #666666; + --ion-color-gray-450: #737373; + --ion-color-gray-500: #808080; + --ion-color-gray-550: #8c8c8c; + --ion-color-gray-600: #999999; + --ion-color-gray-650: #a6a6a6; + --ion-color-gray-700: #b3b3b3; + --ion-color-gray-750: #bfbfbf; + --ion-color-gray-800: #cccccc; + --ion-color-gray-850: #d9d9d9; + --ion-color-gray-900: #e6e6e6; + --ion-color-gray-950: #f2f2f2; --ion-toolbar-background: #0d0d0d; @@ -198,25 +198,25 @@ http://ionicframework.com/docs/theming/ */ --ion-border-color: #222222; - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; + --ion-color-gray-50: #1e1e1e; + --ion-color-gray-100: #2a2a2a; + --ion-color-gray-150: #363636; + --ion-color-gray-200: #414141; + --ion-color-gray-250: #4d4d4d; + --ion-color-gray-300: #595959; + --ion-color-gray-350: #656565; + --ion-color-gray-400: #717171; + --ion-color-gray-450: #7d7d7d; + --ion-color-gray-500: #898989; + --ion-color-gray-550: #949494; + --ion-color-gray-600: #a0a0a0; + --ion-color-gray-650: #acacac; + --ion-color-gray-700: #b8b8b8; + --ion-color-gray-750: #c4c4c4; + --ion-color-gray-800: #d0d0d0; + --ion-color-gray-850: #dbdbdb; + --ion-color-gray-900: #e7e7e7; + --ion-color-gray-950: #f3f3f3; --ion-item-background: #1e1e1e; diff --git a/packages/react/test/base/src/theme/variables.css b/packages/react/test/base/src/theme/variables.css index a44fcdd01d7..ea79b6d4eb4 100644 --- a/packages/react/test/base/src/theme/variables.css +++ b/packages/react/test/base/src/theme/variables.css @@ -159,25 +159,25 @@ http://ionicframework.com/docs/theming/ */ --ion-text-color: #ffffff; --ion-text-color-rgb: 255,255,255; - --ion-color-step-50: #0d0d0d; - --ion-color-step-100: #1a1a1a; - --ion-color-step-150: #262626; - --ion-color-step-200: #333333; - --ion-color-step-250: #404040; - --ion-color-step-300: #4d4d4d; - --ion-color-step-350: #595959; - --ion-color-step-400: #666666; - --ion-color-step-450: #737373; - --ion-color-step-500: #808080; - --ion-color-step-550: #8c8c8c; - --ion-color-step-600: #999999; - --ion-color-step-650: #a6a6a6; - --ion-color-step-700: #b3b3b3; - --ion-color-step-750: #bfbfbf; - --ion-color-step-800: #cccccc; - --ion-color-step-850: #d9d9d9; - --ion-color-step-900: #e6e6e6; - --ion-color-step-950: #f2f2f2; + --ion-color-gray-50: #0d0d0d; + --ion-color-gray-100: #1a1a1a; + --ion-color-gray-150: #262626; + --ion-color-gray-200: #333333; + --ion-color-gray-250: #404040; + --ion-color-gray-300: #4d4d4d; + --ion-color-gray-350: #595959; + --ion-color-gray-400: #666666; + --ion-color-gray-450: #737373; + --ion-color-gray-500: #808080; + --ion-color-gray-550: #8c8c8c; + --ion-color-gray-600: #999999; + --ion-color-gray-650: #a6a6a6; + --ion-color-gray-700: #b3b3b3; + --ion-color-gray-750: #bfbfbf; + --ion-color-gray-800: #cccccc; + --ion-color-gray-850: #d9d9d9; + --ion-color-gray-900: #e6e6e6; + --ion-color-gray-950: #f2f2f2; --ion-item-background: #000000; @@ -185,9 +185,9 @@ http://ionicframework.com/docs/theming/ */ } .ios ion-modal { - --ion-background-color: var(--ion-color-step-100); - --ion-toolbar-background: var(--ion-color-step-150); - --ion-toolbar-border-color: var(--ion-color-step-250); + --ion-background-color: var(--ion-color-gray-100); + --ion-toolbar-background: var(--ion-color-gray-150); + --ion-toolbar-border-color: var(--ion-color-gray-250); } @@ -205,25 +205,25 @@ http://ionicframework.com/docs/theming/ */ --ion-border-color: #222222; - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; + --ion-color-gray-50: #1e1e1e; + --ion-color-gray-100: #2a2a2a; + --ion-color-gray-150: #363636; + --ion-color-gray-200: #414141; + --ion-color-gray-250: #4d4d4d; + --ion-color-gray-300: #595959; + --ion-color-gray-350: #656565; + --ion-color-gray-400: #717171; + --ion-color-gray-450: #7d7d7d; + --ion-color-gray-500: #898989; + --ion-color-gray-550: #949494; + --ion-color-gray-600: #a0a0a0; + --ion-color-gray-650: #acacac; + --ion-color-gray-700: #b8b8b8; + --ion-color-gray-750: #c4c4c4; + --ion-color-gray-800: #d0d0d0; + --ion-color-gray-850: #dbdbdb; + --ion-color-gray-900: #e7e7e7; + --ion-color-gray-950: #f3f3f3; --ion-item-background: #1e1e1e;