[core] fix(Tabs, Switch): improve high contrast mode support (#5668)

packages/core/src/common/_variables.scss

@@ -152,6 +152,7 @@ $pt-dark-toast-box-shadow: $pt-dark-elevation-shadow-3 !default;
 // See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/system_color_keywords for more info on system colors.
 $pt-high-contrast-mode-border-color: buttonborder;
 $pt-high-contrast-mode-active-background-color: highlight;
+$pt-high-contrast-mode-active-text-color: highlight;
 $pt-high-contrast-mode-disabled-border-color: graytext;
 $pt-high-contrast-mode-disabled-text-color: graytext;
 $pt-high-contrast-mode-disabled-background-color: graytext;

packages/core/src/components/forms/_controls.scss

@@ -511,6 +511,10 @@ $control-indicator-spacing: $pt-grid-size !default;
           margin-top: $switch-indicator-margin - 1px;
         }
       }
+
+      @media (forced-colors: active) and (prefers-color-scheme: dark) {
+        border: 1px solid $pt-high-contrast-mode-border-color;
+      }
     }
 
     input:checked ~ .#{$ns}-control-indicator::before {
@@ -551,6 +555,31 @@ $control-indicator-spacing: $pt-grid-size !default;
       input:checked ~ .#{$ns}-control-indicator::before {
         background: $dark-switch-checked-indicator-background-color;
       }
+
+      // Add Windows high contrast mode styles
+      @media (forced-colors: active) and (prefers-color-scheme: dark) {
+        input:checked ~ .#{$ns}-control-indicator {
+          background: $pt-high-contrast-mode-active-background-color;
+          border: 1px solid $pt-high-contrast-mode-border-color;
+        }
+
+        input:checked:disabled ~ .#{$ns}-control-indicator {
+          background-color: $pt-high-contrast-mode-disabled-background-color;
+        }
+
+        input:not(:checked):disabled ~ .#{$ns}-control-indicator {
+          border-color: $pt-high-contrast-mode-disabled-border-color;
+
+          // stylelint-disable-next-line max-nesting-depth
+          &::before {
+            border-color: $pt-high-contrast-mode-disabled-border-color;
+          }
+        }
+
+        &:hover input:checked ~ .#{$ns}-control-indicator {
+          background: $pt-high-contrast-mode-active-background-color;
+        }
+      }
     }
 
     .#{$ns}-switch-inner-text {

packages/core/src/components/tabs/_tabs.scss

@@ -47,6 +47,11 @@ $tab-indicator-width: 3px !default;
       &[aria-selected="true"] {
         background-color: rgba($pt-intent-primary, 0.2);
         box-shadow: none;
+
+        @media (forced-colors: active) and (prefers-color-scheme: dark) {
+          background-color: $pt-high-contrast-mode-active-background-color;
+          color: $black;
+        }
       }
     }
 
@@ -117,6 +122,11 @@ $tab-indicator-width: 3px !default;
   &[aria-disabled="true"] {
     color: $pt-text-color-disabled;
     cursor: not-allowed;
+
+    @media (forced-colors: active) and (prefers-color-scheme: dark) {
+      // Windows High Contrast dark theme
+      color: $pt-high-contrast-mode-disabled-text-color;
+    }
   }
 
   &[aria-selected="true"] {
@@ -127,6 +137,11 @@ $tab-indicator-width: 3px !default;
   &[aria-selected="true"],
   &:not([aria-disabled="true"]):hover {
     color: $tab-color-selected;
+
+    @media (forced-colors: active) and (prefers-color-scheme: dark) {
+      // Windows High Contrast dark theme
+      color: $pt-high-contrast-mode-active-text-color;
+    }
   }
 
   &:focus {
@@ -164,6 +179,11 @@ $tab-indicator-width: 3px !default;
     left: 0;
     position: absolute;
     right: 0;
+
+    @media (forced-colors: active) and (prefers-color-scheme: dark) {
+      // Windows High Contrast dark theme
+      background-color: $pt-high-contrast-mode-active-background-color;
+    }
   }
 
   &.#{$ns}-no-animation {
@@ -177,6 +197,11 @@ $tab-indicator-width: 3px !default;
 
     &[aria-disabled="true"] {
       color: $pt-dark-text-color-disabled;
+
+      @media (forced-colors: active) and (prefers-color-scheme: dark) {
+        // Windows High Contrast dark theme
+        color: $pt-high-contrast-mode-disabled-text-color;
+      }
     }
 
     &[aria-selected="true"] {
@@ -186,11 +211,21 @@ $tab-indicator-width: 3px !default;
     &[aria-selected="true"],
     &:not([aria-disabled="true"]):hover {
       color: $dark-tab-color-selected;
+
+      @media (forced-colors: active) and (prefers-color-scheme: dark) {
+        // Windows High Contrast dark theme
+        color: $pt-high-contrast-mode-active-text-color;
+      }
     }
   }
 
   .#{$ns}-tab-indicator {
     background-color: $dark-tab-color-selected;
+
+    @media (forced-colors: active) and (prefers-color-scheme: dark) {
+      // Windows High Contrast dark theme
+      background-color: $pt-high-contrast-mode-active-background-color;
+    }
   }
 }