feat(HCM): update more components

Author: tw15egan

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 @@
     align-items: center;
     height: $carbon--spacing-08;
     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);
     transition: all $duration--fast-01 motion(standard, productive);
     fill: $icon-primary;
-
-    // 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 fixes
+  /* 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/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 fixes
+  // 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

@@ -207,25 +207,10 @@
     box-shadow: inset 0 0 0 2px $focus;
   }
 
-  .#{$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 {
     transform: rotate(90deg);
     transition: transform $duration--moderate-01 motion(standard, productive);
     fill: $ui-05;
-
-    // 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 fixes
+  .#{$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 @@
     fill: $icon-primary;
   }
 
-  // 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 fixes
+  .#{$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 @@
     transform: translateY(-50%);
     cursor: pointer;
     fill: $icon-primary;
-
-    // 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 fixes
+  // 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 fixes
+  .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');
+  }
 }

packages/components/src/components/dropdown/_dropdown.scss

@@ -67,12 +67,6 @@
   // Menu's triggering element updated to button with Downshift v5 upgrade
   .#{$prefix}--dropdown .#{$prefix}--list-box__field {
     text-align: left;
-
-    // Windows, Firefox HCM Fix
-    @media screen and (-ms-high-contrast: active),
-      screen and (prefers-contrast) {
-      border: 1px solid transparent;
-    }
   }
 
   // TODO V11: Remove xl selector
@@ -484,6 +478,22 @@
   .#{$prefix}--dropdown.#{$prefix}--skeleton {
     @include skeleton;
   }
+
+  // Windows HCM fix
+  // stylelint-disable-next-line no-duplicate-selectors
+  .#{$prefix}--dropdown .#{$prefix}--list-box__field {
+    @include high-contrast-mode('outline');
+  }
+
+  .#{$prefix}--list-box__menu-item__option {
+    @include high-contrast-mode {
+      outline: none;
+    }
+  }
+
+  .#{$prefix}--list-box__menu-item__selected-icon {
+    @include high-contrast-mode('icon-fill');
+  }
 }
 
 @include exports('dropdown') {