diff --git a/core/src/components/breadcrumb/breadcrumb.vars.scss b/core/src/components/breadcrumb/breadcrumb.vars.scss index 17a4b56ee9f..43129a30d9f 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, var(--icon-text-color-step-450, #73849a)) !default; +$breadcrumb-separator-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a)) !default; diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss index 6fb565fe69a..95997ab1f53 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/toast/test/a11y/toast.e2e.ts b/core/src/components/toast/test/a11y/toast.e2e.ts index 983fc6a4fc6..5b13767d3a3 100644 --- a/core/src/components/toast/test/a11y/toast.e2e.ts +++ b/core/src/components/toast/test/a11y/toast.e2e.ts @@ -234,7 +234,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { /** * High contrast mode tests */ -configs({ directions: ['ltr'], themes: ['high-contrast-dark', 'high-contrast-light'] }).forEach( +configs({ directions: ['ltr'], themes: ['high-contrast-dark', 'high-contrast'] }).forEach( ({ title, config, screenshot }) => { test.describe(title('toast: high contrast: buttons'), () => { test.beforeEach(async ({ page }) => { 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 00000000000..c8eb89be30f Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-Mobile-Firefox-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..6c7835bd44b Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-Mobile-Safari-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-Mobile-Safari-linux.png new file mode 100644 index 00000000000..08458017843 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-Mobile-Safari-linux.png differ 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 index e3c5e92e8f9..6301ba1f54e 100644 Binary files a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-dark-Mobile-Chrome-linux.png and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-dark-Mobile-Chrome-linux.png differ 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 index 72542913092..73e79f4cc3b 100644 Binary files a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-dark-Mobile-Firefox-linux.png and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-dark-Mobile-Firefox-linux.png differ 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 index 53570ca534a..7d39698b526 100644 Binary files a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-dark-Mobile-Safari-linux.png and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-light-Mobile-Chrome-linux.png deleted file mode 100644 index 2725aa40509..00000000000 Binary files a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-light-Mobile-Firefox-linux.png deleted file mode 100644 index f1b8c13978d..00000000000 Binary files a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-light-Mobile-Safari-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-light-Mobile-Safari-linux.png deleted file mode 100644 index f04591d724c..00000000000 Binary files a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..fc9d3aa7d83 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-Mobile-Firefox-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..278c2934999 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-Mobile-Firefox-linux.png differ 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 00000000000..5772656a515 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-Mobile-Safari-linux.png differ 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 index da42cd32aaf..d3cfbfd22a5 100644 Binary files a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-dark-Mobile-Chrome-linux.png and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-dark-Mobile-Firefox-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-dark-Mobile-Firefox-linux.png index 9d2bcaf67e5..d24de218c23 100644 Binary files a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-dark-Mobile-Firefox-linux.png and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-dark-Mobile-Safari-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-dark-Mobile-Safari-linux.png index a552b016840..0f9611f267a 100644 Binary files a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-dark-Mobile-Safari-linux.png and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-light-Mobile-Chrome-linux.png deleted file mode 100644 index 1275a4954ed..00000000000 Binary files a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-light-Mobile-Firefox-linux.png deleted file mode 100644 index e3a25d6dfc9..00000000000 Binary files a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-light-Mobile-Safari-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-light-Mobile-Safari-linux.png deleted file mode 100644 index 92f1e9ab8db..00000000000 Binary files a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/css/themes/high-contrast-dark.class.scss b/core/src/css/themes/high-contrast-dark.class.scss index 71bff014557..d73e528c190 100644 --- a/core/src/css/themes/high-contrast-dark.class.scss +++ b/core/src/css/themes/high-contrast-dark.class.scss @@ -1,13 +1,13 @@ @import "./high-contrast-dark"; -.ion-theme-high-contrast-dark { +.ion-theme-high-contrast.ion-theme-dark { @include high-contrast-dark-base-theme(); } -.ion-theme-high-contrast-dark.ios { +.ion-theme-high-contrast.ion-theme-dark.ios { @include high-contrast-dark-ios-theme(); } -.ion-theme-high-contrast-dark.md { +.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 index 37b6e7166d5..b642b3f9b01 100644 --- a/core/src/css/themes/high-contrast-dark.scss +++ b/core/src/css/themes/high-contrast-dark.scss @@ -68,6 +68,16 @@ $colors: ( ) ) !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 @@ -83,10 +93,6 @@ $colors: ( /// as opposed to setting everything in :root // so any high contrast dark styles override the standard /// contrast dark styles. - -/// TODO FW-5863 The per-mode styles were copied -/// from the standard contrast dark theme, but the values -/// are subject to change once the proper step colors are updated. @mixin high-contrast-dark-base-theme() { & { @each $color-name, $value in $colors { @@ -100,54 +106,158 @@ $colors: ( --ion-placeholder-opacity: 0.8; } - - // Toast - // -------------------------------------------------- - - & 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) 67%, var(--button-color)); - } - } - - & ion-toast::part(button cancel) { - color: var(--color); - } } @mixin high-contrast-dark-ios-theme() { & { - --ion-background-color: #000000; - --ion-background-color-rgb: 0, 0, 0; - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255, 255, 255; + $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-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-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() { & { - --ion-background-color: #121212; - --ion-background-color-rgb: 18, 18, 18; - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255, 255, 255; + $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-light.always.scss b/core/src/css/themes/high-contrast-light.always.scss deleted file mode 100644 index 2ea0b5877cd..00000000000 --- a/core/src/css/themes/high-contrast-light.always.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "./high-contrast-light"; - -:root { - @include high-contrast-light-base-theme(); -} diff --git a/core/src/css/themes/high-contrast-light.class.scss b/core/src/css/themes/high-contrast-light.class.scss deleted file mode 100644 index 1d5d2b1e06b..00000000000 --- a/core/src/css/themes/high-contrast-light.class.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "./high-contrast-light"; - -.ion-theme-high-contrast-light { - @include high-contrast-light-base-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 00000000000..a71aba927c2 --- /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(); +} + +.md body { + @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 00000000000..46c949d54e9 --- /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-light.scss b/core/src/css/themes/high-contrast.scss similarity index 55% rename from core/src/css/themes/high-contrast-light.scss rename to core/src/css/themes/high-contrast.scss index 4a69322d100..ab29f2aeb1a 100644 --- a/core/src/css/themes/high-contrast-light.scss +++ b/core/src/css/themes/high-contrast.scss @@ -68,6 +68,17 @@ $colors: ( ) ) !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 @@ -89,12 +100,48 @@ $colors: ( --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); @@ -103,7 +150,7 @@ $colors: ( /* 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) 60%, var(--button-color)); + color: color-mix(in srgb, var(--color) 70%, var(--button-color)); } } diff --git a/core/src/css/themes/high-contrast-light.system.scss b/core/src/css/themes/high-contrast.system.scss similarity index 52% rename from core/src/css/themes/high-contrast-light.system.scss rename to core/src/css/themes/high-contrast.system.scss index adfbd831ef7..02297fbea31 100644 --- a/core/src/css/themes/high-contrast-light.system.scss +++ b/core/src/css/themes/high-contrast.system.scss @@ -1,7 +1,11 @@ -@import "./high-contrast-light"; +@import "./high-contrast"; @media (prefers-contrast: more) { :root { @include high-contrast-light-base-theme(); } + + .md body { + @include high-contrast-light-md-theme(); + } } diff --git a/core/src/themes/test/colors/theme.e2e.ts b/core/src/themes/test/colors/theme.e2e.ts index c88f041cd20..c10356faf7c 100644 --- a/core/src/themes/test/colors/theme.e2e.ts +++ b/core/src/themes/test/colors/theme.e2e.ts @@ -153,7 +153,7 @@ configs({ modes: ['md'], directions: ['ltr'], themes: ['light', 'dark'] }).forEa }); }); -configs({ modes: ['md'], directions: ['ltr'], themes: ['high-contrast-light', 'high-contrast-dark'] }).forEach( +configs({ modes: ['md'], directions: ['ltr'], themes: ['high-contrast', 'high-contrast-dark'] }).forEach( ({ config, title }) => { const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark']; diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html index 51dfa1cc418..c0a7e7ed91a 100644 --- a/core/src/themes/test/css-variables/index.html +++ b/core/src/themes/test/css-variables/index.html @@ -151,15 +151,21 @@ Default + + Dark + + + High Contrast + + + High Contrast (Dark) + Oceanic Vibrant - - Dark - Toolbar @@ -303,6 +309,13 @@

Street Fighter II

Note + + +

Battle Royale Open World Pac-Man

+

More buzzwords

+ + Note + Sliding Items @@ -345,6 +358,8 @@

Street Fighter II

 + +
@@ -487,10 +502,13 @@

Street Fighter II

Select a Theme: + Default + Dark + High Contrast + High Contrast (Dark) Default Oceanic Vibrant - Dark
@@ -916,10 +934,13 @@

Street Fighter II

Select a Theme: + Default + Dark + High Contrast + High Contrast (Dark) Default Oceanic Vibrant - Dark
@@ -980,28 +1001,34 @@

Street Fighter II

// The path to the directory containing the // custom theme files for this test var themeFilesDir = '/src/themes/test/css-variables/css'; + let modifier = ''; // The default and dark themes are official Ionic // themes so they are located outside of this test - let cssFile = `${themeFilesDir}/${theme}.css`; - - // TODO FW-5862 update this to not - // load a file when default is set. The light - // theme is automatically set when importing ionic.bundle.css - if (theme == 'default') { - themeFilesDir = '/src/themes/test'; - } else if (theme === 'dark') { - themeFilesDir = '/css/themes/'; - cssFile = `${themeFilesDir}/${theme}.always.css`; + switch (theme) { + case 'dark': + case 'high-contrast': + case 'high-contrast-dark': + themeFilesDir = '/css/themes'; + modifier = '.always'; + break; + default: + break; } + var cssFile = `${themeFilesDir}/${theme}${modifier}.css`; + var oldLink = document.getElementById('theme'); var newLink = document.createElement('link'); newLink.setAttribute('id', 'theme'); newLink.setAttribute('rel', 'stylesheet'); newLink.setAttribute('type', 'text/css'); - newLink.setAttribute('href', cssFile); + + // The default light theme is built in to Ionic, so no need to import a separate stylesheet + if (theme !== 'default') { + newLink.setAttribute('href', cssFile); + } document.getElementsByTagName('head').item(0).replaceChild(newLink, oldLink); diff --git a/core/src/utils/test/playwright/generator.ts b/core/src/utils/test/playwright/generator.ts index 2b9685fa62f..7d0f39b42f8 100644 --- a/core/src/utils/test/playwright/generator.ts +++ b/core/src/utils/test/playwright/generator.ts @@ -5,10 +5,10 @@ export type Direction = 'ltr' | 'rtl'; * * - `light`: The fallback theme values. Theme stylesheet will not be included. * - `dark`: The dark theme values. - * - `high-contrast-light`: The high contrast light theme values. + * - `high-contrast`: The high contrast light theme values. * - `high-contrast-dark`: The high contrast dark theme values. */ -export type Theme = 'light' | 'dark' | 'high-contrast-light' | 'high-contrast-dark'; +export type Theme = 'light' | 'dark' | 'high-contrast' | 'high-contrast-dark'; export type TitleFn = (title: string) => string; export type ScreenshotFn = (fileName: string) => string;