feat(HCM): add HCM mixin, use forced-colors

packages/components/src/components/accordion/_accordion.scss

@@ -119,13 +119,6 @@
     fill: $icon-primary;
     transform: rotate(-270deg) #{'/*rtl:ignore*/'};
     transition: all $duration--fast-02 motion(standard, productive);
-
-    // Windows, Firefox HCM Fix
-    @media screen and (-ms-high-contrast: active),
-      screen and (prefers-contrast) {
-      // `ButtonText` is a CSS2 system color to help improve colors in HCM
-      fill: ButtonText;
-    }
   }
 
   .#{$prefix}--accordion__title {
@@ -201,13 +194,6 @@
     .#{$prefix}--accordion__arrow {
       fill: $icon-primary;
       transform: rotate(-90deg) #{'/*rtl:ignore*/'};
-
-      // Windows, Firefox HCM Fix
-      @media screen and (-ms-high-contrast: active),
-        screen and (prefers-contrast) {
-        // `ButtonText` is a CSS2 system color to help improve colors in HCM
-        fill: ButtonText;
-      }
     }
   }
 
@@ -252,6 +238,12 @@
   .#{$prefix}--accordion__title.#{$prefix}--skeleton__text {
     margin-bottom: 0;
   }
+
+  // Windows HCM fix
+  .#{$prefix}--accordion__arrow,
+  .#{$prefix}--accordion__item--active .#{$prefix}--accordion__arrow {
+    @include high-contrast-mode('icon-fill');
+  }
 }
 
 @include exports('accordion') {

packages/components/src/components/button/_button.scss

@@ -172,13 +172,6 @@
 
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
     border-color: $focus;
-
-    // Windows, Firefox HCM Fix
-    @media screen and (-ms-high-contrast: active),
-      screen and (prefers-contrast) {
-      outline: 3px solid transparent;
-      outline-offset: -3px;
-    }
   }
 
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:active:not([disabled]) {
@@ -287,20 +280,6 @@
     fill: none;
   }
 
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost
-    .#{$prefix}--btn__icon,
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost:hover
-    .#{$prefix}--btn__icon {
-    // Windows, Firefox HCM Fix
-    @media screen and (-ms-high-contrast: active),
-      screen and (prefers-contrast) {
-      // `ButtonText` is a CSS2 system color to help improve colors in HCM
-      path {
-        fill: ButtonText;
-      }
-    }
-  }
-
   .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only
     .#{$prefix}--btn__icon
     path:not([data-icon-path]),
@@ -316,15 +295,6 @@
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost[disabled]:hover
     .#{$prefix}--btn__icon {
     fill: $icon-on-color-disabled;
-
-    // Windows, Firefox HCM Fix
-    @media screen and (-ms-high-contrast: active),
-      screen and (prefers-contrast) {
-      // `GrayText` is a CSS2 system color to help improve colors in HCM
-      path {
-        fill: GrayText;
-      }
-    }
   }
 
   .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled] {
@@ -527,6 +497,11 @@
       box-shadow: none;
     }
   }
+
+  // Windows HCM fix
+  .#{$prefix}--btn:focus {
+    @include high-contrast-mode('focus');
+  }
 }
 
 @include exports('button') {

packages/components/src/components/button/_mixins.scss

@@ -82,13 +82,6 @@
     border-color: $focus;
     box-shadow: inset 0 0 0 $button-outline-width $focus,
       inset 0 0 0 $button-border-width $background;
-
-    // Windows, Firefox HCM Fix
-    @media screen and (-ms-high-contrast: active),
-      screen and (prefers-contrast) {
-      outline: 3px solid transparent;
-      outline-offset: -3px;
-    }
   }
 
   &:active {

packages/components/src/components/code-snippet/_code-snippet.scss

@@ -72,11 +72,6 @@
     &:focus {
       border: 2px solid $focus;
       outline: none;
-
-      // Firefox HCM fix
-      @media screen and (prefers-contrast) {
-        border-style: dotted;
-      }
     }
 
     &::before {
@@ -142,12 +137,6 @@
     height: $carbon--spacing-08;
     align-items: center;
     padding-right: $carbon--spacing-08;
-
-    // Windows, Firefox HCM Fix
-    @media screen and (-ms-high-contrast: active),
-      screen and (prefers-contrast) {
-      outline: 2px solid transparent;
-    }
   }
 
   .#{$prefix}--snippet--single.#{$prefix}--snippet--no-copy {
@@ -189,12 +178,6 @@
 
     display: flex;
     padding: $carbon--spacing-05;
-
-    // Windows, Firefox HCM Fix
-    @media screen and (-ms-high-contrast: active),
-      screen and (prefers-contrast) {
-      outline: 2px solid transparent;
-    }
   }
 
   //collapsed snippet container
@@ -260,13 +243,6 @@
     height: rem(16px);
     fill: $icon-primary;
     transition: all $duration--fast-01 motion(standard, productive);
-
-    // Windows, Firefox HCM Fix
-    @media screen and (-ms-high-contrast: active),
-      screen and (prefers-contrast) {
-      // `ButtonText` is a CSS2 system color to help improve colors in HCM
-      fill: ButtonText;
-    }
   }
 
   .#{$prefix}--snippet-button {
@@ -575,6 +551,22 @@
     .#{$prefix}--snippet-container {
     padding-bottom: 0;
   }
+
+  // Windows HCM fix
+  /* stylelint-disable */
+  .#{$prefix}--snippet__icon {
+    @include high-contrast-mode('icon-fill');
+  }
+
+  .#{$prefix}--snippet--inline:focus {
+    @include high-contrast-mode('focus');
+  }
+
+  .#{$prefix}--snippet--single,
+  .#{$prefix}--snippet--multi {
+    @include high-contrast-mode('outline');
+  }
+  /* stylelint-enable */
 }
 
 @include exports('snippet') {

packages/components/src/components/content-switcher/_content-switcher.scss

@@ -58,11 +58,6 @@
       z-index: 3;
       border-color: $focus;
       box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset;
-
-      // Firefox HCM Fix
-      @media screen and (prefers-contrast) {
-        border-style: dotted;
-      }
     }
 
     &:hover {
@@ -187,6 +182,12 @@
     .#{$prefix}--content-switcher__icon {
     fill: $icon-inverse;
   }
+
+  // Windows HCM fix
+  // stylelint-disable-next-line no-duplicate-selectors
+  .#{$prefix}--content-switcher-btn:focus {
+    @include high-contrast-mode('focus');
+  }
 }
 
 @include exports('content-switcher') {

packages/components/src/components/data-table/_data-table-core.scss

@@ -957,6 +957,12 @@
     .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type {
     margin: rem(-3px) 0;
   }
+
+  // Windows HCM fix
+  // stylelint-disable-next-line no-duplicate-selectors
+  .#{$prefix}--data-table-content {
+    @include high-contrast-mode('outline');
+  }
 }
 
 @include exports('data-table-v2-core') {

packages/components/src/components/data-table/_data-table-expandable.scss

@@ -153,7 +153,7 @@
 
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover
     td:first-of-type {
-    // First parent td doesnt have visible bottom border
+    // First parent td doesn't have visible bottom border
     border-bottom: 1px solid transparent;
   }
 
@@ -207,25 +207,10 @@
     outline: none;
   }
 
-  .#{$prefix}--table-expand__button:focus .#{$prefix}--table-expand__svg {
-    // Windows, Firefox HCM Fix
-    @media screen and (-ms-high-contrast: active),
-      screen and (prefers-contrast) {
-      outline: 2px solid transparent;
-    }
-  }
-
   .#{$prefix}--table-expand__svg {
     fill: $ui-05;
     transform: rotate(90deg);
     transition: transform $duration--moderate-01 motion(standard, productive);
-
-    // Windows, Firefox HCM Fix
-    @media screen and (-ms-high-contrast: active),
-      screen and (prefers-contrast) {
-      // `ButtonText` is a CSS2 system color to help improve colors in HCM
-      fill: ButtonText;
-    }
   }
 
   // V11: remove tall
@@ -393,6 +378,16 @@
     td {
     background: $layer-selected;
   }
+
+  // Windows HCM fix
+  .#{$prefix}--table-expand__button:focus .#{$prefix}--table-expand__svg {
+    @include high-contrast-mode('focus');
+  }
+
+  // stylelint-disable-next-line no-duplicate-selectors
+  .#{$prefix}--table-expand__svg {
+    @include high-contrast-mode('icon-fill');
+  }
 }
 
 @include exports('data-table-v2-expandable') {

packages/components/src/components/data-table/_data-table-sort.scss

@@ -179,16 +179,6 @@
     transition: transform $transition--base $carbon--standard-easing;
   }
 
-  // Windows, Firefox HCM Fix
-  .#{$prefix}--table-sort__icon,
-  .#{$prefix}--table-sort__icon-unsorted {
-    @media screen and (-ms-high-contrast: active),
-      screen and (prefers-contrast) {
-      // `ButtonText` is a CSS2 system color to help improve colors in HCM
-      fill: ButtonText;
-    }
-  }
-
   //----------------------------------------------------------------------------
   // Compact, Short, Tall Sortable
   //----------------------------------------------------------------------------
@@ -237,6 +227,12 @@
   .#{$prefix}--data-table--xl .#{$prefix}--table-sort__icon {
     margin-top: rem(13px);
   }
+
+  // Windows HCM fix
+  .#{$prefix}--table-sort__icon,
+  .#{$prefix}--table-sort__icon-unsorted {
+    @include high-contrast-mode('icon-fill');
+  }
 }
 
 @include exports('data-table-sort') {

packages/components/src/components/date-picker/_date-picker.scss

@@ -137,13 +137,6 @@
     cursor: pointer;
     fill: $icon-primary;
     transform: translateY(-50%);
-
-    // Windows, Firefox HCM Fix
-    @media screen and (-ms-high-contrast: active),
-      screen and (prefers-contrast) {
-      // `ButtonText` is a CSS2 system color to help improve colors in HCM
-      fill: ButtonText;
-    }
   }
 
   .#{$prefix}--date-picker__icon--invalid,
@@ -202,6 +195,12 @@
     width: rem(75px);
     height: rem(14px);
   }
+
+  // Windows HCM fix
+  // stylelint-disable-next-line no-duplicate-selectors
+  .#{$prefix}--date-picker__icon {
+    @include high-contrast-mode('icon-fill');
+  }
 }
 
 @include exports('date-picker') {

packages/components/src/components/date-picker/_flatpickr.scss

@@ -215,12 +215,6 @@
     &:hover {
       background-color: $hover-ui;
     }
-
-    // Windows, Firefox HCM Fix
-    @media screen and (-ms-high-contrast: active), (prefers-contrast) {
-      // `ButtonText` is a CSS2 system color to help improve colors in HCM
-      fill: ButtonText;
-    }
   }
 
   .flatpickr-next-month.disabled svg,
@@ -522,4 +516,27 @@
   .flatpickr-input[readonly] {
     cursor: pointer;
   }
+
+  // Windows HCM fix
+  .flatpickr-prev-month,
+  .flatpickr-next-month {
+    @include high-contrast-mode('icon-fill');
+  }
+
+  .flatpickr-day.selected {
+    @include high-contrast-mode('focus') {
+      outline-style: dotted;
+    }
+  }
+
+  .flatpickr-day.today,
+  .flatpickr-day.inRange {
+    @include high-contrast-mode {
+      color: Highlight;
+    }
+  }
+
+  .flatpickr-calendar {
+    @include high-contrast-mode('outline');
+  }
 }