From ca61e5061babead06b2cf3a3c38736e1c0101135 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 13 Feb 2024 12:20:04 -0500 Subject: [PATCH] feat: add high contrast themes (#29010) :warning: This is a combination of previously approved PRs with the exception of https://github.com/ionic-team/ionic-framework/pull/29010/commits/fe9dca513c143423f95903e7415abe885446444b. This change was made as a result of https://github.com/ionic-team/ionic-framework-design-documents/pull/248. Issue number: Internal --------- ## What is the current behavior? Users do not have a way of increasing the contrast in Ionic apps. This is valuable for people with low vision as increasing the contrast between foreground and background content helps improve readability. ## What is the new behavior? - Adds a high contrast light and high contrast dark theme. As with our other themes, developers can choose between system, class, and always stylesheets. While we aim to improve contrast for text and UI components, this feature prioritizes text in the event that both text and UI component cannot be improved without one negatively impacting the other. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Dev build: `7.6.7-dev.11706894781.1cd59fde` Testing instructions: 1. Open `src/themes/test/css-variables`. Activate the high contrast light and dark themes to verify that contrast does increase. 2. Use the dev build to integrate the theme into a test app (conference app, starter app, etc). I'd recommend using these imports: ```css @import "@ionic/angular/css/themes/high-contrast.system.css"; @import "@ionic/angular/css/themes/high-contrast-dark.system.css"; ``` Note: Make sure this is imported **after** `core.scss` --------- Co-authored-by: Shawn Taylor Co-authored-by: Brandy Carney Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> Co-authored-by: ionitron Co-authored-by: Maria Hutt Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> --- core/.stylelintrc.yml | 2 + .../action-sheet/action-sheet.ios.vars.scss | 2 +- core/src/components/alert/alert.md.vars.scss | 4 +- .../breadcrumb/breadcrumb.ios.vars.scss | 14 +- .../breadcrumb/breadcrumb.md.vars.scss | 14 +- .../breadcrumb/breadcrumb.vars.scss | 2 +- .../datetime-button/datetime-button.scss | 2 +- core/src/components/datetime/datetime.md.scss | 2 +- core/src/components/datetime/datetime.scss | 2 +- core/src/components/input/input.scss | 4 +- core/src/components/item/item.ios.vars.scss | 2 +- core/src/components/modal/modal.scss | 2 +- core/src/components/picker/picker.ios.scss | 2 +- core/src/components/range/range.ios.vars.scss | 2 +- .../refresher/refresher.ios.vars.scss | 2 +- .../refresher/refresher.md.vars.scss | 4 +- .../segment-button.ios.vars.scss | 2 +- core/src/components/textarea/textarea.scss | 4 +- .../components/toast/test/a11y/toast.e2e.ts | 45 +++ ...-ltr-high-contrast-Mobile-Chrome-linux.png | Bin 0 -> 4776 bytes ...ltr-high-contrast-Mobile-Firefox-linux.png | Bin 0 -> 5170 bytes ...-ltr-high-contrast-Mobile-Safari-linux.png | Bin 0 -> 4427 bytes ...high-contrast-dark-Mobile-Chrome-linux.png | Bin 0 -> 4865 bytes ...igh-contrast-dark-Mobile-Firefox-linux.png | Bin 0 -> 5232 bytes ...high-contrast-dark-Mobile-Safari-linux.png | Bin 0 -> 4463 bytes ...-ltr-high-contrast-Mobile-Chrome-linux.png | Bin 0 -> 3879 bytes ...ltr-high-contrast-Mobile-Firefox-linux.png | Bin 0 -> 4163 bytes ...-ltr-high-contrast-Mobile-Safari-linux.png | Bin 0 -> 3618 bytes ...high-contrast-dark-Mobile-Chrome-linux.png | Bin 0 -> 3920 bytes ...igh-contrast-dark-Mobile-Firefox-linux.png | Bin 0 -> 4173 bytes ...high-contrast-dark-Mobile-Safari-linux.png | Bin 0 -> 3601 bytes core/src/components/toast/toast.md.vars.scss | 6 +- core/src/css/themes/dark.scss | 137 ++++++--- .../css/themes/high-contrast-dark.always.scss | 13 + .../css/themes/high-contrast-dark.class.scss | 13 + core/src/css/themes/high-contrast-dark.scss | 263 ++++++++++++++++++ .../css/themes/high-contrast-dark.system.scss | 15 + core/src/css/themes/high-contrast.always.scss | 9 + core/src/css/themes/high-contrast.class.scss | 9 + core/src/css/themes/high-contrast.scss | 160 +++++++++++ core/src/css/themes/high-contrast.system.scss | 11 + core/src/themes/ionic.globals.scss | 2 +- core/src/themes/ionic.theme.default.ios.scss | 12 +- core/src/themes/ionic.theme.default.md.scss | 6 +- core/src/themes/ionic.theme.default.scss | 76 ++--- core/src/themes/test/colors/theme.e2e.ts | 80 ++++++ core/src/themes/test/css-variables/index.html | 59 ++-- core/src/utils/test/playwright/generator.ts | 4 +- 48 files changed, 846 insertions(+), 142 deletions(-) create mode 100644 core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-Mobile-Chrome-linux.png create mode 100644 core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-Mobile-Firefox-linux.png create mode 100644 core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-Mobile-Safari-linux.png create mode 100644 core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-dark-Mobile-Chrome-linux.png create mode 100644 core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-dark-Mobile-Firefox-linux.png create mode 100644 core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-dark-Mobile-Safari-linux.png create mode 100644 core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-Mobile-Chrome-linux.png create mode 100644 core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-Mobile-Firefox-linux.png create mode 100644 core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-Mobile-Safari-linux.png create mode 100644 core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-dark-Mobile-Chrome-linux.png create mode 100644 core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-dark-Mobile-Firefox-linux.png create mode 100644 core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-dark-Mobile-Safari-linux.png create mode 100644 core/src/css/themes/high-contrast-dark.always.scss create mode 100644 core/src/css/themes/high-contrast-dark.class.scss create mode 100644 core/src/css/themes/high-contrast-dark.scss create mode 100644 core/src/css/themes/high-contrast-dark.system.scss create mode 100644 core/src/css/themes/high-contrast.always.scss create mode 100644 core/src/css/themes/high-contrast.class.scss create mode 100644 core/src/css/themes/high-contrast.scss create mode 100644 core/src/css/themes/high-contrast.system.scss diff --git a/core/.stylelintrc.yml b/core/.stylelintrc.yml index ce59b8ca20..94500aef44 100644 --- a/core/.stylelintrc.yml +++ b/core/.stylelintrc.yml @@ -11,6 +11,8 @@ ignoreFiles: - src/themes/ionic.mixins.scss - src/themes/ionic.functions.color.scss - src/themes/ionic.functions.string.scss + - src/themes/ionic.theme.default.scss + - src/css/themes/*.scss indentation: 2 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 3581c601a8..7aa19b4404 100644 --- a/core/src/components/action-sheet/action-sheet.ios.vars.scss +++ b/core/src/components/action-sheet/action-sheet.ios.vars.scss @@ -111,7 +111,7 @@ $action-sheet-ios-button-background: linear-gradien $action-sheet-ios-button-background-activated: $text-color !default; /// @prop - Background color of the selected action sheet button -$action-sheet-ios-button-background-selected: var(--ion-color-step-150, $background-color) !default; +$action-sheet-ios-button-background-selected: var(--ion-color-step-150, var(--ion-background-color-step-150, $background-color)) !default; /// @prop - Destructive text color of the action sheet button $action-sheet-ios-button-destructive-text-color: ion-color(danger, base) !default; diff --git a/core/src/components/alert/alert.md.vars.scss b/core/src/components/alert/alert.md.vars.scss index 725f708f7b..86965476ff 100644 --- a/core/src/components/alert/alert.md.vars.scss +++ b/core/src/components/alert/alert.md.vars.scss @@ -208,7 +208,7 @@ $alert-md-radio-border-style: solid !default; $alert-md-radio-border-radius: 50% !default; /// @prop - Border color of the alert radio when off -$alert-md-radio-border-color-off: $text-color-step-450 !default; +$alert-md-radio-border-color-off: $background-color-step-550 !default; /// @prop - Border color of the alert radio when on $alert-md-radio-border-color-on: $alert-md-button-text-color !default; @@ -280,7 +280,7 @@ $alert-md-checkbox-border-style: solid !default; $alert-md-checkbox-border-radius: 2px !default; /// @prop - Border color of the checkbox in the alert when off -$alert-md-checkbox-border-color-off: $text-color-step-450 !default; +$alert-md-checkbox-border-color-off: $background-color-step-550 !default; /// @prop - Border color of the checkbox in the alert when on $alert-md-checkbox-border-color-on: $alert-md-button-text-color !default; diff --git a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss index 3b495309db..97a91a74cc 100644 --- a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss @@ -4,22 +4,22 @@ // -------------------------------------------------- /// @prop - Color of the breadcrumb -$breadcrumb-ios-color: var(--ion-color-step-850, #2d4665) !default; +$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665)) !default; /// @prop - Color of the active breadcrumb $breadcrumb-ios-color-active: var(--ion-text-color, #03060b) !default; /// @prop - Background color of the focused breadcrumb -$breadcrumb-ios-background-focused: var(--ion-color-step-50, rgba(233, 237, 243, 0.7)) !default; +$breadcrumb-ios-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7))) !default; /// @prop - Color of the breadcrumb icon -$breadcrumb-ios-icon-color: var(--ion-color-step-400, #92a0b3) !default; +$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3)) !default; /// @prop - Color of the breadcrumb icon when active -$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, #242d39) !default; +$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39)) !default; /// @prop - Color of the breadcrumb icon when focused -$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, #445b78) !default; +$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78)) !default; /// @prop - Color of the breadcrumb separator $breadcrumb-ios-separator-color: $breadcrumb-separator-color !default; @@ -28,7 +28,7 @@ $breadcrumb-ios-separator-color: $breadcrumb-separator-color ! $breadcrumb-ios-indicator-color: $breadcrumb-ios-separator-color !default; /// @prop - Background color of the breadcrumb indicator -$breadcrumb-ios-indicator-background: var(--ion-color-step-100, #e9edf3) !default; +$breadcrumb-ios-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3)) !default; /// @prop - Background color of the breadcrumb indicator when focused -$breadcrumb-ios-indicator-background-focused: var(--ion-color-step-150, #d9e0ea) !default; +$breadcrumb-ios-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea)) !default; diff --git a/core/src/components/breadcrumb/breadcrumb.md.vars.scss b/core/src/components/breadcrumb/breadcrumb.md.vars.scss index 81fc146e48..d638047353 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, #677483) !default; +$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #677483)) !default; /// @prop - Color of the active breadcrumb $breadcrumb-md-color-active: var(--ion-text-color, #03060b) !default; /// @prop - Color of the focused breadcrumb -$breadcrumb-md-color-focused: var(--ion-color-step-800, #35404e) !default; +$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e)) !default; /// @prop - Background color of the focused breadcrumb -$breadcrumb-md-background-focused: var(--ion-color-step-50, #fff) !default; +$breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff)) !default; /// @prop - Color of the breadcrumb icon -$breadcrumb-md-icon-color: var(--ion-color-step-550, #7d8894) !default; +$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894)) !default; /// @prop - Color of the breadcrumb icon when active -$breadcrumb-md-icon-color-active: var(--ion-color-step-850, #222d3a) !default; +$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a)) !default; /// @prop - Margin top of the breadcrumb separator $breadcrumb-md-separator-margin-top: -1px !default; @@ -40,7 +40,7 @@ $breadcrumb-md-separator-color: $breadcrumb-separator-color $breadcrumb-md-indicator-color: $breadcrumb-md-separator-color !default; /// @prop - Background color of the breadcrumb indicator -$breadcrumb-md-indicator-background: var(--ion-color-step-100, #eef1f3) !default; +$breadcrumb-md-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3)) !default; /// @prop - Background color of the breadcrumb indicator when focused -$breadcrumb-md-indicator-background-focused: var(--ion-color-step-150, #dfe5e8) !default; +$breadcrumb-md-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8)) !default; diff --git a/core/src/components/breadcrumb/breadcrumb.vars.scss b/core/src/components/breadcrumb/breadcrumb.vars.scss index 3322672a5b..43129a30d9 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 !default; $breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size) !default; /// @prop - Color of the breadcrumb separator -$breadcrumb-separator-color: var(--ion-color-step-550, #73849a) !default; +$breadcrumb-separator-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a)) !default; diff --git a/core/src/components/datetime-button/datetime-button.scss b/core/src/components/datetime-button/datetime-button.scss index 0a09ef67c8..1570cfc4c7 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, #edeef0); + background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0)); color: $text-color; diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss index 0e25f96784..7b3d78f5e8 100644 --- a/core/src/components/datetime/datetime.md.scss +++ b/core/src/components/datetime/datetime.md.scss @@ -3,7 +3,7 @@ @import "../../themes/ionic.globals.md"; :host { - --background: var(--ion-color-step-100, #ffffff); + --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff)); --title-color: #{current-color(contrast)}; } diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss index ede4c23a54..9c7a4b0a2c 100644 --- a/core/src/components/datetime/datetime.scss +++ b/core/src/components/datetime/datetime.scss @@ -401,7 +401,7 @@ border: none; - background: var(--ion-color-step-300, #edeef0); + background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0)); color: $text-color; diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index e2504b032a..e8fae76c90 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -402,7 +402,7 @@ .input-bottom .helper-text { display: block; - color: #{$background-color-step-550}; + color: #{$text-color-step-450}; } :host(.ion-touched.ion-invalid) .input-bottom .error-text { @@ -424,7 +424,7 @@ */ @include margin-horizontal(auto, null); - color: #{$background-color-step-550}; + color: #{$text-color-step-450}; white-space: nowrap; diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss index 6fb565fe69..95997ab1f5 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 !def $item-ios-paragraph-font-size: dynamic-font(14px) !default; /// @prop - Color of the item paragraph -$item-ios-paragraph-text-color: rgba($text-color-rgb, .4) !default; +$item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3) !default; /// @prop - Width of the avatar in the item $item-ios-avatar-width: 36px !default; diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss index 6e8f7c6df3..02b7128c99 100644 --- a/core/src/components/modal/modal.scss +++ b/core/src/components/modal/modal.scss @@ -129,7 +129,7 @@ ion-backdrop { border: 0; - background: var(--ion-color-step-350, #c0c0be); + background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be)); cursor: pointer; diff --git a/core/src/components/picker/picker.ios.scss b/core/src/components/picker/picker.ios.scss index e13e3eb1b9..76f99175c6 100644 --- a/core/src/components/picker/picker.ios.scss +++ b/core/src/components/picker/picker.ios.scss @@ -10,5 +10,5 @@ } :host .picker-highlight { - background: var(--highlight-background, var(--ion-color-step-150, #eeeeef)); + background: var(--highlight-background, var(--ion-color-step-150, var(--ion-background-color-step-150, #eeeeef))); } diff --git a/core/src/components/range/range.ios.vars.scss b/core/src/components/range/range.ios.vars.scss index fe794984f5..30c72b89a8 100644 --- a/core/src/components/range/range.ios.vars.scss +++ b/core/src/components/range/range.ios.vars.scss @@ -27,7 +27,7 @@ $range-ios-hit-height: $range-ios-slider-height !default; $range-ios-bar-height: 4px !default; /// @prop - Background of the range bar -$range-ios-bar-background-color: var(--ion-color-step-900, #e6e6e6) !default; +$range-ios-bar-background-color: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6)) !default; /// @prop - Border radius of the range bar $range-ios-bar-border-radius: 2px !default; diff --git a/core/src/components/refresher/refresher.ios.vars.scss b/core/src/components/refresher/refresher.ios.vars.scss index fbc1f7c432..bc4dc4ed9c 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 !default; $refresher-ios-text-color: $text-color !default; /// @prop - Color of the native refresher spinner -$refresher-ios-native-spinner-color: var(--ion-color-step-450, #747577) !default; +$refresher-ios-native-spinner-color: var(--ion-color-step-450, var(--ion-background-color-step-450, #747577)) !default; /// @prop - Width of the native refresher spinner $refresher-ios-native-spinner-width: 32px !default; diff --git a/core/src/components/refresher/refresher.md.vars.scss b/core/src/components/refresher/refresher.md.vars.scss index 7d45fb463f..3e893b0ce8 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 !default; $refresher-md-native-spinner-color: #{ion-color(primary, base)} !default; /// @prop - Border of the native refresher spinner -$refresher-md-native-spinner-border: 1px solid var(--ion-color-step-200, #ececec) !default; +$refresher-md-native-spinner-border: 1px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #ececec)) !default; /// @prop - Background of the native refresher spinner -$refresher-md-native-spinner-background: var(--ion-color-step-250, #ffffff) !default; +$refresher-md-native-spinner-background: var(--ion-color-step-250, var(--ion-background-color-step-250, #ffffff)) !default; /// @prop - Box shadow of the native refresher spinner $refresher-md-native-spinner-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1) !default; 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 c02544fc34..77dce9d42d 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-backgr $segment-button-ios-color: $text-color !default; /// @prop - Background of the checked segment button indicator -$segment-button-ios-indicator-color: var(--ion-color-step-350, $background-color) !default; +$segment-button-ios-indicator-color: var(--ion-color-step-350, var(--ion-background-color-step-350, $background-color)) !default; /// @prop - Margin of the segment button $segment-button-ios-margin: 2px !default; diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss index 8cfcb10447..6191cf6e19 100644 --- a/core/src/components/textarea/textarea.scss +++ b/core/src/components/textarea/textarea.scss @@ -434,7 +434,7 @@ .textarea-bottom .helper-text { display: block; - color: #{$background-color-step-550}; + color: #{$text-color-step-450}; } :host(.ion-touched.ion-invalid) .textarea-bottom .error-text { @@ -456,7 +456,7 @@ */ @include margin-horizontal(auto, null); - color: #{$background-color-step-550}; + color: #{$text-color-step-450}; white-space: nowrap; diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts b/core/src/components/toast/test/a11y/toast.e2e.ts index fc6875c7a3..5b13767d3a 100644 --- a/core/src/components/toast/test/a11y/toast.e2e.ts +++ b/core/src/components/toast/test/a11y/toast.e2e.ts @@ -230,3 +230,48 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { }); }); }); + +/** + * High contrast mode tests + */ +configs({ directions: ['ltr'], themes: ['high-contrast-dark', 'high-contrast'] }).forEach( + ({ title, config, screenshot }) => { + test.describe(title('toast: high contrast: buttons'), () => { + test.beforeEach(async ({ page }) => { + await page.setContent( + ` + + + `, + config + ); + }); + + test('should not have visual regressions', async ({ page }) => { + const toast = page.locator('ion-toast'); + + await expect(toast).toBeVisible(); + + const toastWrapper = toast.locator('.toast-wrapper'); + await expect(toastWrapper).toHaveScreenshot(screenshot(`toast-high-contrast-buttons`)); + }); + + test('should pass AAA guidelines', async ({ page }) => { + const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent'); + + await ionToastDidPresent.next(); + + const results = await new AxeBuilder({ page }) + .options({ rules: { 'color-contrast-enhanced': { enabled: true } } }) + .analyze(); + expect(results.violations).toEqual([]); + }); + }); + } +); diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..c8eb89be30f6861a25b2cc5ef9eb8e53e4397be0 GIT binary patch literal 4776 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 e6CIJ*>#b3(l=mV-kASNuA`KNC4Q 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 literal 0 HcmV?d00001 diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-dark-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..6301ba1f54ec290674e27fffee748bdd42a7115c GIT binary patch literal 4865 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 Aj{pDw literal 0 HcmV?d00001 diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-dark-Mobile-Firefox-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-dark-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..73e79f4cc3b2cf600ac42abb619d079d7447ebbf GIT binary patch literal 5232 zcmYjVcQ{<{)kqqC^>@ z%c!IG8oA?lzkBa@{y5Kh-uLXi*R$5UpL6z#Gd9wpp=75dA|j&E)75-HL_`cDJZl2T z3HR`i#Q{V_OtN~K_f3QBHghO~498h87Nl>1%XjEaQ2EhrCDMb5>?Xy?f*$ikE$YJ` zRnZTmwf2Q5q=g*?=ry{O_?I$RJp{VIQMz=&=WTmiVU2H}@^)}y&sxvx{RWiXw&&!J zBd`xcHtR)W??A&OrNChD_Z&sprSBODsw^xl7xauI>S_Q$q^t%v2$Z@Le28a`uxky~ zqoAOGL&#l>EJk@2&CSh479Fo%Bj(w8N})E5!{HvzkJL(OaoRQ1*Gq@2{NJX%C8=F= zP{(gth)QuW11!pld-Zn?2UaT`ONitqeZ%;CoQst;ONg%!h^GtS;NXbM>T3a#Mm?vK zAR*Zq%~K930d819b$Yu828>8&0AfW_(5s^PJVeRLGBV~I@jv6y6&0c#CanL4O^oAx z{*eu!_*#qe8UoN1OL0{u>bWn28XNgTkO&^o)Z32qwbOO4r=ufLCnBYb4n8}$`|u9P z4f@{<0_})gS?^g*0||!zBo%l*4WnWPuVkaMuj14IY_h~jsPZ8&qH84aTwQg|Wew+eWoDe0!NWzPE z^(!cTPso~motPfB-!L!?CZPTi^&A?fu(!q`?V)*oyuI?v#PQ#Z=YzSe5wi#_s=b2) zgRHfo0*$rb-3e9w&7r4zHh{~s!}ZYDXxRGjWW6WKr7tt!bZ==~r84v%;_S;vYxwbG zR4he)OW#2p78Vv~3o*Bm&$ef68aN5^_tXRI#>3Cn1X&J(_m|yoKtEc7&>_cL>s$|7 z1qnpbNw|~zVmMrM7Bc^++Z4FTD=RDOMWNe&L{7s_*ZdR^U~HUXw8|H8c`@1??Em0& zFW~IJ9qqF~51=eu04{I83sMrY7lFxkd7nkib6(q)EI@M?ofIeSHb~Sz?BmB+ij|pJXm& zfagYrsCA~y(`j8nNUn3W*9=-ZI3#3bxESpIBOA21wKb5dq7>dthE$Mdx^?Sgm`{5e zW-gvZRDZnE)@irLmp~YX|4y}6|2t{Z1|J6%RW3QV!Q7=yX^&Bfde6Im=&zJtoL(%f zQ#!1)Z5lq=#i7FgoNZ`zdPa|LuCIg3%_|T;3w3ITo~>gO#mSN)BhF7xciT*&AH}nZ z=jx9Nnb9L zCUL-fuHWA9*9GspS~UlOW?IAEyAFIn&CrU6P1d>d;st^g!KDN>g9;I}$+rqpcXoU@ zhkI=z=R4^n*QOiqjiF3pl-&VanWEN`o2WT7EJ5QQ`xF``+(z+avM#R0uWN1BXJ`U* zJL1Pm=1#)&#ns{Ejg%F_kCZ}6m4f$%CaRqdYc!ysD1Gfj_U;Axt}dP)LQ@sV`!DYt zk5INb^WjZO40u>sS@Gjlc}EwWF*i!>THtZW^%mZmmxN~O(Vb6>hmVz+$yYUd&$Ti! zFnmQ^><_Ar5YBfn5##RB8-DO`Zz@oJS;fAch$XOV%%Rq`AMv1Azxs|7bnIh1{H>(R z0&TSAXV2w5*M|tet#L(&`=f_Lghr&wh?%7=bcgTXaAH1*3qE0A=$LY#mFl z^qBeyuhh#1*{<8ZM>@$|KO1~;awcTvEpV7sYp6W4kZG*MPl~U3lIQ$D2qy+8 zX1+vK=1%GDLJE6}9f4(IPo=2N&ffN~oz`N=6T5~qTQ=!b;cd&M2bcx3gY6OP)o&47 z#tU!EQ07yqi^j+z_{jmnbLCQ1ump#!i29P4SZnPr&nj&FULonIbf%Ycj$^~Wc-(kC#hT4dGwK`3>3kAmm}YU@4AU&DPT6V%CB zid8f%p_d|KD$#s+m$G{PV+YT*PkSE+H!dS2$=MT!%u7L2-+Bt@PT|;m3-PoMztR!8 zZI;1!g{M_}8<5n$h^Oh!=Ns<>4kuBoC!r!I`8$KYVSNT-aucIStxL~C5njMy>;Zpvka5{MG{ocr9O2xW2 zUj$qA=fkGi!|%fs4NME7AV{q_mqiarK&YR^~K314wspBGu=XtIYTB~jFT&h22VtqPNKpbCnO{*11 zY7j>>omG{kn(r^P@n)D2Qk7?m*#=_1Rx&j^NGc~a-{+rshm`2QLwOpekTWTt*Jj=b zz3nmWBsOEQi&LdN-^nirclVgCjO+%4PN}Y*V2e(98Z+ExJ$u~wPX^br&%&oi{u=*c z-!d)sy-j(xsi@EvadX?E;?&+_6_jIi@>gxV^9UNga*Vn^?k*%2miqa}w!JZewnQUq zwsap~K!EW8{iQEI&-9NA+x`G% zDkG=V2+u2-DRo|QRbu(%U=Bw6FJ*TG;n_i+rDB=sd(a1{tnpWIs}eX@`i#JBM1x=|-mtLHd=zZ%q5hLT;^)i` zqiJiP;ABz5bYrL#c$~j5M{Crdy7-nZfb9$l7rYvj`Zq+}o17Je;4n3AS zddhYJ@FxeS?Mr2w5wdJhK?$>kEPvuYIn9h*8k>N$OXiwP+DjR2VSI1WL)F@wwHF56 zOR000Q|aXLnGb{zmD^jHo9gYPfY8f7^u-!1B3$lo{eM|)BtE(^qw~t9%=j6z48W}5 zU5e&|$R^(tcyH_El;Avwem=v8|(9?|FS`WV* zse9q^7LRppd$vY{HT2*9`Mqe9gf>*ry-}HG!qxQM7UI+{UH&C67H%H*?NYrRKw)aU zkb=DyUZ5;Y{%Iw9dj4)W=ntQ*S@7_A1ZP=|6};?8X7{2p{@Os3tI3V1Et3~x5q>TY zN7w6aV|-zGyJHiIV{A1xx6H(z1Xw1?ae0-4e9zUiXFky1mi9@vV;nTz~WhpZyp- zcyFrxCBGw9!8H-V*N!qNZD_f}{9H?#ODV|SN0ld?PFvm~T}93Iq>fs8(d)^Rn)(lU z9WWbq=Q`4qil0kOIUYWhDmjyfK!{3w$X=|ncdVEub6PS2Sjn)5Rkg5N?FN>ceqW$u zIbg4dhEgmAtC-k@n0JcH1#UldI}MG&1`pR}$C#dVnhS9brzLsi6xTSrg2vGvpM`%P zbqIOwO}?6O-ag?LD_T=^^RF_ODFH z-4|AC$J=w`Q!*kck!SdKZ*!5qY99aO9T1k4>hv(Qd~)puSNf%4pK&&I!gKpW0T7Qp zfK)`p-$WyW_rw7g{vo8YdfkCI;PGZqj+KzE_{VW~$))bgeSxbdlJq4dtohK!2tTc*ai5w$gbe0x@HgoT=K=R8SJp!DaI z_v0I*HXOC;c)@JxN-N!e_%;@;qF!SQSfnOSu*o!?Z@H0fuV`$lDW@Fr;b_W7tWU|g zRPvD{ueYllSW37;U5jv2! zOxBjT7N{z%2{Gc8Hpuz=BrUiHnjwQui@ zGw3l@<`wMY?tfPclOG>#{JLNv?$8#^#w6dawa0Z36YC^qTL{%t3QI32Ati%xJv4SE z%rIxdhoih)IE$_43@JyB?<=Q_O6A`DJrysrxrgN1l{B!{*c%NXV_&mfG5TG#oO7 zG5ci;VQKs+LAk>GulItH~MUESQ zCVLK+vv%v4o(J)8D@^+o(eGVeJozP6$}$BpBX9?+X*&lmz8R;`>gnc&;bBYU;k);E zh}(lO@4U+*^`>Cs*1F)#Ju3!ht+q#AtMgeeNaG$^o z4klk$T!3|QZv_G7L%^9L3vE1^gb_=6ytA_t<%{dNRi)EQ_Ojrr5!~ndara+1abG5N zJanFlEqzMbM&gd3li(roHXQ8`DLm9aESBQEh-{En3Z&NNbt3ci4C-9FIn0$RdN1(F z15u}&jU zSJe%!%ouLc*J(s7G{3VIlwbkG2(fD=J;9*jv8%~dmN-^kle2^wwpa$F2FkB5hxzMn zUjY{*0W{^KMf^r#nw)>1mnP}IEyMJ-4}QhGriDF28bOXh?Rx m?nb8IuJJ&)6d_evf5|4i%TvllxowCDm!6i9W~I9Qi+=&0<@9U- literal 0 HcmV?d00001 diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-dark-Mobile-Safari-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-dark-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..7d39698b5264c989fd1bf8b533f5957509e064a3 GIT binary patch literal 4463 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 ap~>g5@B#VvlBk~p0DT=3?W*g}5B~>Q2Bkv) literal 0 HcmV?d00001 diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-Mobile-Safari-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..5772656a5159cecf5662b7014feb0a9a4b5a0224 GIT binary patch literal 3618 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 literal 0 HcmV?d00001 diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-dark-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..d3cfbfd22a594a3ea6efa875493f63f31f29e858 GIT binary patch literal 3920 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 literal 0 HcmV?d00001 diff --git a/core/src/components/toast/toast.md.vars.scss b/core/src/components/toast/toast.md.vars.scss index a82f215410..158815aec6 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: $text-color-step-200 !default; +$toast-md-background: $background-color-step-800 !default; /// @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) !default; /// @prop - Color of the toast -$toast-md-color: $background-color-step-50 !default; +$toast-md-color: $text-color-step-950 !default; /// @prop - Border radius of the toast wrapper $toast-md-border-radius: 4px !default; @@ -77,7 +77,7 @@ $toast-md-button-opacity-hover: 0.08 !default; $toast-md-button-background-color-hover: ion-color(primary, base, $toast-md-button-opacity-hover) !default; /// @prop - Text color of the cancel toast button -$toast-md-button-cancel-text-color: $background-color-step-100 !default; +$toast-md-button-cancel-text-color: $text-color-step-900 !default; /// @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) !default; diff --git a/core/src/css/themes/dark.scss b/core/src/css/themes/dark.scss index d5474ee9d6..983273e393 100644 --- a/core/src/css/themes/dark.scss +++ b/core/src/css/themes/dark.scss @@ -6,48 +6,56 @@ --ion-color-primary-contrast-rgb: 0, 0, 0; --ion-color-primary-shade: #447ce0; --ion-color-primary-tint: #5f98ff; + --ion-color-secondary: #62bdff; --ion-color-secondary-rgb: 98, 189, 255; --ion-color-secondary-contrast: #000000; --ion-color-secondary-contrast-rgb: 0, 0, 0; --ion-color-secondary-shade: #56a6e0; --ion-color-secondary-tint: #72c4ff; + --ion-color-tertiary: #8482fb; --ion-color-tertiary-rgb: 132, 130, 251; --ion-color-tertiary-contrast: #000000; --ion-color-tertiary-contrast-rgb: 0, 0, 0; --ion-color-tertiary-shade: #7472dd; --ion-color-tertiary-tint: #908ffb; + --ion-color-success: #2dd55b; --ion-color-success-rgb: 45, 213, 91; --ion-color-success-contrast: #000000; --ion-color-success-contrast-rgb: 0, 0, 0; --ion-color-success-shade: #28bb50; --ion-color-success-tint: #42d96b; + --ion-color-warning: #ffce31; --ion-color-warning-rgb: 255, 206, 49; --ion-color-warning-contrast: #000000; --ion-color-warning-contrast-rgb: 0, 0, 0; --ion-color-warning-shade: #e0b52b; --ion-color-warning-tint: #ffd346; + --ion-color-danger: #f56570; --ion-color-danger-rgb: 245, 101, 112; --ion-color-danger-contrast: #000000; --ion-color-danger-contrast-rgb: 0, 0, 0; --ion-color-danger-shade: #d85963; --ion-color-danger-tint: #f6747e; + --ion-color-dark: #f4f5f8; --ion-color-dark-rgb: 244, 245, 248; --ion-color-dark-contrast: #000000; --ion-color-dark-contrast-rgb: 0, 0, 0; --ion-color-dark-shade: #d7d8da; --ion-color-dark-tint: #f5f6f9; + --ion-color-medium: #989aa2; --ion-color-medium-rgb: 152, 154, 162; --ion-color-medium-contrast: #000000; --ion-color-medium-contrast-rgb: 0, 0, 0; --ion-color-medium-shade: #86888f; --ion-color-medium-tint: #a2a4ab; + --ion-color-light: #222428; --ion-color-light-rgb: 34, 36, 40; --ion-color-light-contrast: #ffffff; @@ -61,35 +69,58 @@ & { --ion-background-color: #000000; --ion-background-color-rgb: 0, 0, 0; + --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-background-color-step-50: #0d0d0d; + --ion-background-color-step-100: #1a1a1a; + --ion-background-color-step-150: #262626; + --ion-background-color-step-200: #333333; + --ion-background-color-step-250: #404040; + --ion-background-color-step-300: #4d4d4d; + --ion-background-color-step-350: #595959; + --ion-background-color-step-400: #666666; + --ion-background-color-step-450: #737373; + --ion-background-color-step-500: #808080; + --ion-background-color-step-550: #8c8c8c; + --ion-background-color-step-600: #999999; + --ion-background-color-step-650: #a6a6a6; + --ion-background-color-step-700: #b3b3b3; + --ion-background-color-step-750: #bfbfbf; + --ion-background-color-step-800: #cccccc; + --ion-background-color-step-850: #d9d9d9; + --ion-background-color-step-900: #e6e6e6; + --ion-background-color-step-950: #f2f2f2; + + --ion-text-color-step-50: #f2f2f2; + --ion-text-color-step-100: #e6e6e6; + --ion-text-color-step-150: #d9d9d9; + --ion-text-color-step-200: #cccccc; + --ion-text-color-step-250: #bfbfbf; + --ion-text-color-step-300: #b3b3b3; + --ion-text-color-step-350: #a6a6a6; + --ion-text-color-step-400: #999999; + --ion-text-color-step-450: #8c8c8c; + --ion-text-color-step-500: #808080; + --ion-text-color-step-550: #737373; + --ion-text-color-step-600: #666666; + --ion-text-color-step-650: #595959; + --ion-text-color-step-700: #4d4d4d; + --ion-text-color-step-750: #404040; + --ion-text-color-step-800: #333333; + --ion-text-color-step-850: #262626; + --ion-text-color-step-900: #1a1a1a; + --ion-text-color-step-950: #0d0d0d; + --ion-item-background: #000000; --ion-card-background: #1c1c1d; } & 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-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)); } } @@ -97,28 +128,52 @@ & { --ion-background-color: #121212; --ion-background-color-rgb: 18, 18, 18; + --ion-text-color: #ffffff; --ion-text-color-rgb: 255, 255, 255; + --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-background-color-step-50: #1e1e1e; + --ion-background-color-step-100: #2a2a2a; + --ion-background-color-step-150: #363636; + --ion-background-color-step-200: #414141; + --ion-background-color-step-250: #4d4d4d; + --ion-background-color-step-300: #595959; + --ion-background-color-step-350: #656565; + --ion-background-color-step-400: #717171; + --ion-background-color-step-450: #7d7d7d; + --ion-background-color-step-500: #898989; + --ion-background-color-step-550: #949494; + --ion-background-color-step-600: #a0a0a0; + --ion-background-color-step-650: #acacac; + --ion-background-color-step-700: #b8b8b8; + --ion-background-color-step-750: #c4c4c4; + --ion-background-color-step-800: #d0d0d0; + --ion-background-color-step-850: #dbdbdb; + --ion-background-color-step-900: #e7e7e7; + --ion-background-color-step-950: #f3f3f3; + + --ion-text-color-step-50: #f3f3f3; + --ion-text-color-step-100: #e7e7e7; + --ion-text-color-step-150: #dbdbdb; + --ion-text-color-step-200: #d0d0d0; + --ion-text-color-step-250: #c4c4c4; + --ion-text-color-step-300: #b8b8b8; + --ion-text-color-step-350: #acacac; + --ion-text-color-step-400: #a0a0a0; + --ion-text-color-step-450: #949494; + --ion-text-color-step-500: #898989; + --ion-text-color-step-550: #7d7d7d; + --ion-text-color-step-600: #717171; + --ion-text-color-step-650: #656565; + --ion-text-color-step-700: #595959; + --ion-text-color-step-750: #4d4d4d; + --ion-text-color-step-800: #414141; + --ion-text-color-step-850: #363636; + --ion-text-color-step-900: #2a2a2a; + --ion-text-color-step-950: #1e1e1e; + --ion-item-background: #1e1e1e; --ion-toolbar-background: #1f1f1f; --ion-tab-bar-background: #1f1f1f; diff --git a/core/src/css/themes/high-contrast-dark.always.scss b/core/src/css/themes/high-contrast-dark.always.scss new file mode 100644 index 0000000000..46594686b2 --- /dev/null +++ b/core/src/css/themes/high-contrast-dark.always.scss @@ -0,0 +1,13 @@ +@import "./high-contrast-dark"; + +:root { + @include high-contrast-dark-base-theme(); +} + +:root.ios { + @include high-contrast-dark-ios-theme(); +} + +:root.md { + @include high-contrast-dark-md-theme(); +} diff --git a/core/src/css/themes/high-contrast-dark.class.scss b/core/src/css/themes/high-contrast-dark.class.scss new file mode 100644 index 0000000000..d73e528c19 --- /dev/null +++ b/core/src/css/themes/high-contrast-dark.class.scss @@ -0,0 +1,13 @@ +@import "./high-contrast-dark"; + +.ion-theme-high-contrast.ion-theme-dark { + @include high-contrast-dark-base-theme(); +} + +.ion-theme-high-contrast.ion-theme-dark.ios { + @include high-contrast-dark-ios-theme(); +} + +.ion-theme-high-contrast.ion-theme-dark.md { + @include high-contrast-dark-md-theme(); +} diff --git a/core/src/css/themes/high-contrast-dark.scss b/core/src/css/themes/high-contrast-dark.scss new file mode 100644 index 0000000000..8ebed22385 --- /dev/null +++ b/core/src/css/themes/high-contrast-dark.scss @@ -0,0 +1,263 @@ +@use "sass:map"; +@import "../../themes/ionic.functions.color"; + +$primary: #7cabff !default; +$secondary: #62bdff !default; +$tertiary: #b6b9f9 !default; +$success: #4ada71 !default; +$warning: #ffce31 !default; +$danger: #fc9aa2 !default; +$light: #222428 !default; +$medium: #a8aab3 !default; +$dark: #f4f5f8 !default; + +$colors: ( + primary: ( + base: $primary, + contrast: #000, + shade: get-color-shade($primary), + tint: get-color-tint($primary) + ), + secondary: ( + base: $secondary, + contrast: #000, + shade: get-color-shade($secondary), + tint: get-color-tint($secondary) + ), + tertiary: ( + base: $tertiary, + contrast: #000, + shade: get-color-shade($tertiary), + tint: get-color-tint($tertiary) + ), + success: ( + base: $success, + contrast: #000, + shade: get-color-shade($success), + tint: get-color-tint($success) + ), + warning: ( + base: $warning, + contrast: #000, + shade: get-color-shade($warning), + tint: get-color-tint($warning) + ), + danger: ( + base: $danger, + contrast: #000, + shade: get-color-shade($danger), + tint: get-color-tint($danger) + ), + light: ( + base: $light, + contrast: #fff, + shade: get-color-shade($light), + tint: get-color-tint($light) + ), + medium: ( + base: $medium, + contrast: #000, + shade: get-color-shade($medium), + tint: get-color-tint($medium) + ), + dark: ( + base: $dark, + contrast: #000, + shade: get-color-shade($dark), + tint: get-color-tint($dark) + ) +) !default; + +/// Text step colors are generated based on +/// how dark or light text can be. The darkest +/// text color is usually the default text color (white or black). +/// The darker the $lightest-text-color is, the darker each +/// stepped color is. If you want to increase text contrast, +/// make $lightest-text-color darker. +$text-color: #ffffff; + +$darkest-text-color: #888888; +$lightest-text-color: $text-color; + +/// Loop through each color object above +/// and generate CSS Variables for each +/// color. Do not use the ion-color function +/// here because that will set the variable +/// to evaluate to itself with a fallback. +/// For example: +/// --ion-color-primary: #{ion-color(primary, base)}; +/// Maps to: +/// --ion-color-primary: var(--ion-color-primary, #...); + +/// We apply certain styles to the per-mode classes (ios and md) +/// as opposed to setting everything in :root +// so any high contrast dark styles override the standard +/// contrast dark styles. +@mixin high-contrast-dark-base-theme() { + & { + @each $color-name, $value in $colors { + --ion-color-#{$color-name}: #{map.get($value, base)}; + --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))}; + --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)}; + --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))}; + --ion-color-#{$color-name}-shade: #{map.get($value, shade)}; + --ion-color-#{$color-name}-tint: #{map.get($value, tint)}; + } + + --ion-placeholder-opacity: 0.8; + } +} + +@mixin high-contrast-dark-ios-theme() { + & { + $background-color: #000000; + + --ion-background-color: #{$background-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)}; + + --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%)}; + --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)}; + --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)}; + --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)}; + --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)}; + --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)}; + --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)}; + --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)}; + --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)}; + --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)}; + --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)}; + --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)}; + --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)}; + --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)}; + --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)}; + --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)}; + --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)}; + + --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)}; + --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)}; + --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)}; + --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)}; + --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)}; + --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)}; + --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)}; + --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)}; + --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)}; + --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)}; + --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)}; + --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)}; + --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)}; + --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)}; + --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)}; + --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)}; + --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)}; + --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-theme() { + & { + $background-color: #121212; + + --ion-background-color: #{$background-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)}; + + --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%)}; + --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)}; + --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)}; + --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)}; + --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)}; + --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)}; + --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)}; + --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)}; + --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)}; + --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)}; + --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)}; + --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)}; + --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)}; + --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)}; + --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)}; + --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)}; + --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)}; + + --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)}; + --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)}; + --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)}; + --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)}; + --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)}; + --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)}; + --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)}; + --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)}; + --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)}; + --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)}; + --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)}; + --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)}; + --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)}; + --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)}; + --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)}; + --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)}; + --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)}; + --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)}; + --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)}; + } + + // Toast + // -------------------------------------------------- + + & ion-toast { + --color: var(--ion-background-color); + } + + & ion-toast::part(button) { + // Fallback for browsers that don't support color-mix + color: var(--color); + } + + /* stylelint-disable-next-line order/order */ + @supports (color: color-mix(in lch, plum, pink)) { + & ion-toast::part(button) { + color: color-mix(in srgb, var(--color) 73%, var(--button-color)); + } + } + + & ion-toast::part(button cancel) { + color: var(--color); + } +} diff --git a/core/src/css/themes/high-contrast-dark.system.scss b/core/src/css/themes/high-contrast-dark.system.scss new file mode 100644 index 0000000000..f47602edd0 --- /dev/null +++ b/core/src/css/themes/high-contrast-dark.system.scss @@ -0,0 +1,15 @@ +@import "./high-contrast-dark"; + +@media (prefers-contrast: more) and (prefers-color-scheme: dark) { + :root { + @include high-contrast-dark-base-theme(); + } + + :root.ios { + @include high-contrast-dark-ios-theme(); + } + + :root.md { + @include high-contrast-dark-md-theme(); + } +} diff --git a/core/src/css/themes/high-contrast.always.scss b/core/src/css/themes/high-contrast.always.scss new file mode 100644 index 0000000000..70f5498d92 --- /dev/null +++ b/core/src/css/themes/high-contrast.always.scss @@ -0,0 +1,9 @@ +@import "./high-contrast"; + +:root { + @include high-contrast-light-base-theme(); +} + +:root.md { + @include high-contrast-light-md-theme(); +} diff --git a/core/src/css/themes/high-contrast.class.scss b/core/src/css/themes/high-contrast.class.scss new file mode 100644 index 0000000000..46c949d54e --- /dev/null +++ b/core/src/css/themes/high-contrast.class.scss @@ -0,0 +1,9 @@ +@import "./high-contrast"; + +.ion-theme-high-contrast { + @include high-contrast-light-base-theme(); +} + +.ion-theme-high-contrast.md { + @include high-contrast-light-md-theme(); +} diff --git a/core/src/css/themes/high-contrast.scss b/core/src/css/themes/high-contrast.scss new file mode 100644 index 0000000000..f67e0d4f46 --- /dev/null +++ b/core/src/css/themes/high-contrast.scss @@ -0,0 +1,160 @@ +@use "sass:map"; +@import "../../themes/ionic.functions.color"; + +$primary: #003fae !default; +$secondary: #01487b !default; +$tertiary: #3400e6 !default; +$success: #004314 !default; +$warning: #5f4100 !default; +$danger: #9c000c !default; +$light: #f4f5f8 !default; +$medium: #444446 !default; +$dark: #222428 !default; + +$colors: ( + primary: ( + base: $primary, + contrast: #fff, + shade: get-color-shade($primary), + tint: get-color-tint($primary) + ), + secondary: ( + base: $secondary, + contrast: #fff, + shade: get-color-shade($secondary), + tint: get-color-tint($secondary) + ), + tertiary: ( + base: $tertiary, + contrast: #fff, + shade: get-color-shade($tertiary), + tint: get-color-tint($tertiary) + ), + success: ( + base: $success, + contrast: #fff, + shade: get-color-shade($success), + tint: get-color-tint($success) + ), + warning: ( + base: $warning, + contrast: #fff, + shade: get-color-shade($warning), + tint: get-color-tint($warning) + ), + danger: ( + base: $danger, + contrast: #fff, + shade: get-color-shade($danger), + tint: get-color-tint($danger) + ), + light: ( + base: $light, + contrast: #000, + shade: get-color-shade($light), + tint: get-color-tint($light) + ), + medium: ( + base: $medium, + contrast: #fff, + shade: get-color-shade($medium), + tint: get-color-tint($medium) + ), + dark: ( + base: $dark, + contrast: #fff, + shade: get-color-shade($dark), + tint: get-color-tint($dark) + ) +) !default; + +/// Text step colors are generated based on +/// how dark or light text can be. The darkest +/// text color is usually the default text color (white or black). +/// The darker the $lightest-text-color is, the darker each +/// stepped color is. If you want to increase text contrast, +/// make $lightest-text-color darker. +$background-color: #ffffff; +$text-color: #000000; + +$darkest-text-color: $text-color; +$lightest-text-color: #888888; + +/// Loop through each color object above +/// and generate CSS Variables for each +/// color. Do not use the ion-color function +/// here because that will set the variable +/// to evaluate to itself with a fallback. +/// For example: +/// --ion-color-primary: #{ion-color(primary, base)}; +/// Maps to: +/// --ion-color-primary: var(--ion-color-primary, #...); +@mixin high-contrast-light-base-theme() { + & { + @each $color-name, $value in $colors { + --ion-color-#{$color-name}: #{map.get($value, base)}; + --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))}; + --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)}; + --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))}; + --ion-color-#{$color-name}-shade: #{map.get($value, shade)}; + --ion-color-#{$color-name}-tint: #{map.get($value, tint)}; + } + + --ion-background-color: #{$background-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)}; + + --ion-placeholder-opacity: 0.8; + + /// Only the item borders should increase in contrast + /// Borders for elements like toolbars should remain the same + --ion-item-border-color: #7a7a7a; + + --ion-text-color-step-50: #{mix($lightest-text-color, $darkest-text-color, 5%)}; + --ion-text-color-step-100: #{mix($lightest-text-color, $darkest-text-color, 10%)}; + --ion-text-color-step-150: #{mix($lightest-text-color, $darkest-text-color, 15%)}; + --ion-text-color-step-200: #{mix($lightest-text-color, $darkest-text-color, 20%)}; + --ion-text-color-step-250: #{mix($lightest-text-color, $darkest-text-color, 25%)}; + --ion-text-color-step-300: #{mix($lightest-text-color, $darkest-text-color, 30%)}; + --ion-text-color-step-350: #{mix($lightest-text-color, $darkest-text-color, 35%)}; + --ion-text-color-step-400: #{mix($lightest-text-color, $darkest-text-color, 40%)}; + --ion-text-color-step-450: #{mix($lightest-text-color, $darkest-text-color, 45%)}; + --ion-text-color-step-500: #{mix($lightest-text-color, $darkest-text-color, 50%)}; + --ion-text-color-step-550: #{mix($lightest-text-color, $darkest-text-color, 55%)}; + --ion-text-color-step-600: #{mix($lightest-text-color, $darkest-text-color, 60%)}; + --ion-text-color-step-650: #{mix($lightest-text-color, $darkest-text-color, 65%)}; + --ion-text-color-step-700: #{mix($lightest-text-color, $darkest-text-color, 70%)}; + --ion-text-color-step-750: #{mix($lightest-text-color, $darkest-text-color, 75%)}; + --ion-text-color-step-800: #{mix($lightest-text-color, $darkest-text-color, 80%)}; + --ion-text-color-step-850: #{mix($lightest-text-color, $darkest-text-color, 85%)}; + --ion-text-color-step-900: #{mix($lightest-text-color, $darkest-text-color, 90%)}; + --ion-text-color-step-950: #{mix($lightest-text-color, $darkest-text-color, 95%)}; + } +} + +@mixin high-contrast-light-md-theme() { + // Toast + // -------------------------------------------------- + + & ion-toast { + --color: var(--ion-background-color); + } + + & ion-toast::part(button) { + // Fallback for browsers that don't support color-mix + color: var(--color); + } + + /* stylelint-disable-next-line order/order */ + @supports (color: color-mix(in lch, plum, pink)) { + & ion-toast::part(button) { + color: color-mix(in srgb, var(--color) 70%, var(--button-color)); + } + } + + & ion-toast::part(button cancel) { + color: var(--color); + } +} diff --git a/core/src/css/themes/high-contrast.system.scss b/core/src/css/themes/high-contrast.system.scss new file mode 100644 index 0000000000..7424552ec5 --- /dev/null +++ b/core/src/css/themes/high-contrast.system.scss @@ -0,0 +1,11 @@ +@import "./high-contrast"; + +@media (prefers-contrast: more) { + :root { + @include high-contrast-light-base-theme(); + } + + :root.md { + @include high-contrast-light-md-theme(); + } +} diff --git a/core/src/themes/ionic.globals.scss b/core/src/themes/ionic.globals.scss index d421a43b6f..f4c52d1472 100644 --- a/core/src/themes/ionic.globals.scss +++ b/core/src/themes/ionic.globals.scss @@ -35,7 +35,7 @@ $screen-breakpoints: ( // Input placeholder opacity // Ensures that the placeholder has the // correct color contrast against the background. -$placeholder-opacity: 0.6 !default; +$placeholder-opacity: var(--ion-placeholder-opacity, 0.6) !default; $form-control-label-margin: 16px !default; diff --git a/core/src/themes/ionic.theme.default.ios.scss b/core/src/themes/ionic.theme.default.ios.scss index dcf60dba75..c5c5e7045a 100644 --- a/core/src/themes/ionic.theme.default.ios.scss +++ b/core/src/themes/ionic.theme.default.ios.scss @@ -7,26 +7,26 @@ // iOS General Colors // -------------------------------------------------- $backdrop-ios-color: var(--ion-backdrop-color, #000) !default; -$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9)) !default; +$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9))) !default; // iOS Tabs & Tab bar // -------------------------------------------------- -$tabbar-ios-background: var(--ion-tab-bar-background, var(--ion-color-step-50, #f7f7f7)) !default; +$tabbar-ios-background: var(--ion-tab-bar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7))) !default; $tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default; -$tabbar-ios-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default; +$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, .2)))) )!default; $tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-400) !default; $tabbar-ios-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default; // iOS Toolbar // -------------------------------------------------- -$toolbar-ios-background: var(--ion-toolbar-background, var(--ion-color-step-50, #f7f7f7)) !default; -$toolbar-ios-border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default; +$toolbar-ios-background: var(--ion-toolbar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7))) !default; +$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, .2))))) !default; $toolbar-ios-color: var(--ion-toolbar-color, $text-color) !default; // iOS List & List Items // -------------------------------------------------- $item-ios-background: var(--ion-item-background, $background-color) !default; -$item-ios-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc))) !default; +$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)))) !default; $item-ios-color: var(--ion-item-color, $text-color) !default; // iOS Card diff --git a/core/src/themes/ionic.theme.default.md.scss b/core/src/themes/ionic.theme.default.md.scss index 1a1abb48b5..14f1f34c7a 100644 --- a/core/src/themes/ionic.theme.default.md.scss +++ b/core/src/themes/ionic.theme.default.md.scss @@ -8,14 +8,14 @@ // Material Design General Colors // -------------------------------------------------- $backdrop-md-color: var(--ion-backdrop-color, #000) !default; -$border-md-color: var(--ion-border-color, var(--ion-color-step-150, #c1c4cd)) !default; +$border-md-color: var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd))) !default; $overlay-md-background-color: var(--ion-overlay-background-color, var(--ion-background-color, #fff)) !default; // Material Design Tabs & Tab bar // -------------------------------------------------- $tabbar-md-background: var(--ion-tab-bar-background, $background-color) !default; $tabbar-md-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default; -$tabbar-md-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .07)))) !default; +$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, .07))))) !default; $tabbar-md-color: var(--ion-tab-bar-color, $text-color-step-350) !default; $tabbar-md-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default; @@ -28,7 +28,7 @@ $toolbar-md-color: var(--ion-toolbar-color, var(--ion-t // Material Design List & List Items // -------------------------------------------------- $item-md-background: var(--ion-item-background, $background-color) !default; -$item-md-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .13)))) !default; +$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, .13))))) !default; $item-md-color: var(--ion-item-color, $text-color) !default; // Material Design Card diff --git a/core/src/themes/ionic.theme.default.scss b/core/src/themes/ionic.theme.default.scss index 57b04cbbcd..8a7c4c6013 100644 --- a/core/src/themes/ionic.theme.default.scss +++ b/core/src/themes/ionic.theme.default.scss @@ -101,44 +101,44 @@ $text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-va // For example, $text-color-step-XXX will be $text-color stepping towards $background-color, // but a $background-color-step-XXX will be $background-color stepping towards $text-color. -$background-color-step-50: var(--ion-color-step-50, mix($text-color-value, $background-color-value, 5%)) !default; -$background-color-step-100: var(--ion-color-step-100, mix($text-color-value, $background-color-value, 10%)) !default; -$background-color-step-150: var(--ion-color-step-150, mix($text-color-value, $background-color-value, 15%)) !default; -$background-color-step-200: var(--ion-color-step-200, mix($text-color-value, $background-color-value, 20%)) !default; -$background-color-step-250: var(--ion-color-step-250, mix($text-color-value, $background-color-value, 25%)) !default; -$background-color-step-300: var(--ion-color-step-300, mix($text-color-value, $background-color-value, 30%)) !default; -$background-color-step-350: var(--ion-color-step-350, mix($text-color-value, $background-color-value, 35%)) !default; -$background-color-step-400: var(--ion-color-step-400, mix($text-color-value, $background-color-value, 40%)) !default; -$background-color-step-450: var(--ion-color-step-450, mix($text-color-value, $background-color-value, 45%)) !default; -$background-color-step-500: var(--ion-color-step-500, mix($text-color-value, $background-color-value, 50%)) !default; -$background-color-step-550: var(--ion-color-step-550, mix($text-color-value, $background-color-value, 55%)) !default; -$background-color-step-600: var(--ion-color-step-600, mix($text-color-value, $background-color-value, 60%)) !default; -$background-color-step-650: var(--ion-color-step-650, mix($text-color-value, $background-color-value, 65%)) !default; -$background-color-step-700: var(--ion-color-step-700, mix($text-color-value, $background-color-value, 70%)) !default; -$background-color-step-750: var(--ion-color-step-750, mix($text-color-value, $background-color-value, 75%)) !default; -$background-color-step-800: var(--ion-color-step-800, mix($text-color-value, $background-color-value, 80%)) !default; -$background-color-step-850: var(--ion-color-step-850, mix($text-color-value, $background-color-value, 85%)) !default; -$background-color-step-900: var(--ion-color-step-900, mix($text-color-value, $background-color-value, 90%)) !default; -$background-color-step-950: var(--ion-color-step-950, mix($text-color-value, $background-color-value, 95%)) !default; -$text-color-step-50: var(--ion-color-step-950, mix($background-color-value, $text-color-value, 5%)) !default; -$text-color-step-100: var(--ion-color-step-900, mix($background-color-value, $text-color-value, 10%)) !default; -$text-color-step-150: var(--ion-color-step-850, mix($background-color-value, $text-color-value, 15%)) !default; -$text-color-step-200: var(--ion-color-step-800, mix($background-color-value, $text-color-value, 20%)) !default; -$text-color-step-250: var(--ion-color-step-750, mix($background-color-value, $text-color-value, 25%)) !default; -$text-color-step-300: var(--ion-color-step-700, mix($background-color-value, $text-color-value, 30%)) !default; -$text-color-step-350: var(--ion-color-step-650, mix($background-color-value, $text-color-value, 35%)) !default; -$text-color-step-400: var(--ion-color-step-600, mix($background-color-value, $text-color-value, 40%)) !default; -$text-color-step-450: var(--ion-color-step-550, mix($background-color-value, $text-color-value, 45%)) !default; -$text-color-step-500: var(--ion-color-step-500, mix($background-color-value, $text-color-value, 50%)) !default; -$text-color-step-550: var(--ion-color-step-450, mix($background-color-value, $text-color-value, 55%)) !default; -$text-color-step-600: var(--ion-color-step-400, mix($background-color-value, $text-color-value, 60%)) !default; -$text-color-step-650: var(--ion-color-step-350, mix($background-color-value, $text-color-value, 65%)) !default; -$text-color-step-700: var(--ion-color-step-300, mix($background-color-value, $text-color-value, 70%)) !default; -$text-color-step-750: var(--ion-color-step-250, mix($background-color-value, $text-color-value, 75%)) !default; -$text-color-step-800: var(--ion-color-step-200, mix($background-color-value, $text-color-value, 80%)) !default; -$text-color-step-850: var(--ion-color-step-150, mix($background-color-value, $text-color-value, 85%)) !default; -$text-color-step-900: var(--ion-color-step-100, mix($background-color-value, $text-color-value, 90%)) !default; -$text-color-step-950: var(--ion-color-step-50, mix($background-color-value, $text-color-value, 95%)) !default; +$background-color-step-50: var(--ion-color-step-50, var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%))) !default; +$background-color-step-100: var(--ion-color-step-100, var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%))) !default; +$background-color-step-150: var(--ion-color-step-150, var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%))) !default; +$background-color-step-200: var(--ion-color-step-200, var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%))) !default; +$background-color-step-250: var(--ion-color-step-250, var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%))) !default; +$background-color-step-300: var(--ion-color-step-300, var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%))) !default; +$background-color-step-350: var(--ion-color-step-350, var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%))) !default; +$background-color-step-400: var(--ion-color-step-400, var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%))) !default; +$background-color-step-450: var(--ion-color-step-450, var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%))) !default; +$background-color-step-500: var(--ion-color-step-500, var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%))) !default; +$background-color-step-550: var(--ion-color-step-550, var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%))) !default; +$background-color-step-600: var(--ion-color-step-600, var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%))) !default; +$background-color-step-650: var(--ion-color-step-650, var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%))) !default; +$background-color-step-700: var(--ion-color-step-700, var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%))) !default; +$background-color-step-750: var(--ion-color-step-750, var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%))) !default; +$background-color-step-800: var(--ion-color-step-800, var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%))) !default; +$background-color-step-850: var(--ion-color-step-850, var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%))) !default; +$background-color-step-900: var(--ion-color-step-900, var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%))) !default; +$background-color-step-950: var(--ion-color-step-950, var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%))) !default; +$text-color-step-50: var(--ion-color-step-950, var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%))) !default; +$text-color-step-100: var(--ion-color-step-900, var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%))) !default; +$text-color-step-150: var(--ion-color-step-850, var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%))) !default; +$text-color-step-200: var(--ion-color-step-800, var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%))) !default; +$text-color-step-250: var(--ion-color-step-750, var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%))) !default; +$text-color-step-300: var(--ion-color-step-700, var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%))) !default; +$text-color-step-350: var(--ion-color-step-650, var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%))) !default; +$text-color-step-400: var(--ion-color-step-600, var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%))) !default; +$text-color-step-450: var(--ion-color-step-550, var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%))) !default; +$text-color-step-500: var(--ion-color-step-500, var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%))) !default; +$text-color-step-550: var(--ion-color-step-450, var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%))) !default; +$text-color-step-600: var(--ion-color-step-400, var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%))) !default; +$text-color-step-650: var(--ion-color-step-350, var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%))) !default; +$text-color-step-700: var(--ion-color-step-300, var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%))) !default; +$text-color-step-750: var(--ion-color-step-250, var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%))) !default; +$text-color-step-800: var(--ion-color-step-200, var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%))) !default; +$text-color-step-850: var(--ion-color-step-150, var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%))) !default; +$text-color-step-900: var(--ion-color-step-100, var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%))) !default; +$text-color-step-950: var(--ion-color-step-50, var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%))) !default; // Default General Colors // -------------------------------------------------- diff --git a/core/src/themes/test/colors/theme.e2e.ts b/core/src/themes/test/colors/theme.e2e.ts index 92256500f8..c10356faf7 100644 --- a/core/src/themes/test/colors/theme.e2e.ts +++ b/core/src/themes/test/colors/theme.e2e.ts @@ -2,10 +2,15 @@ import AxeBuilder from '@axe-core/playwright'; import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; +/** + * Small text is defined as 14pt (~18.5px) + * when computing color contrast: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html + */ const styleTestHelpers = `