feat: add high contrast themes

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
 

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;

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;

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;

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;

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;

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;
 

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

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;
 

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;
 

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/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;
 

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

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;

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;

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;

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;

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;
 

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(
+          `
+        <ion-toast is-open="true" header="Testing" message="Hello world"></ion-toast>
+        <script>
+          const toast = document.querySelector('ion-toast');
+          toast.buttons = [
+            { text: 'Cancel', role: 'cancel' },
+            { text: 'OK' }
+          ];
+        </script>
+      `,
+          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([]);
+      });
+    });
+  }
+);

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;