feat: add high contrast implementation (#28956)

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;

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;

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 }) => {

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();
 }

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);
   }
 }

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();
+}

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();
+}

core/src/css/themes/high-contrast-light.scss → 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));
     }
   }
 

core/src/css/themes/high-contrast-light.system.scss → 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();
+  }
 }

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'];