feat(HCM): a few more tweaks

Author: tw15egan

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

@@ -177,10 +177,6 @@
     opacity: 1;
     transform: rotate(0);
     transition: transform $transition--base $carbon--standard-easing;
-<<<<<<< HEAD
-=======
-    fill: $icon-primary;
->>>>>>> f44269d77... feat(HCM): update more components
   }
 
   //----------------------------------------------------------------------------

packages/components/src/components/number-input/_number-input.scss

@@ -447,12 +447,20 @@
       display: none;
     }
   }
+
+  // Windows HCM fixes
   /* stylelint-disable */
+  .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number__control-btn:focus {
+    @include high-contrast-mode('focus');
+  }
+
   .#{$prefix}--number__control-btn {
     @include high-contrast-mode('outline');
-    &:focus {
-      @include high-contrast-mode('focus');
-    }
+  }
+
+  .#{$prefix}--number__control-btn svg {
+    @include high-contrast-mode('icon-fill');
   }
   /* stylelint-enable */
 }

packages/components/src/components/overflow-menu/_overflow-menu.scss

@@ -336,19 +336,16 @@
     }
   }
 
-  // Windows HCM fix
+  // Windows HCM fixes
   /* stylelint-disable */
-  .#{$prefix}--overflow-menu {
-    &:focus {
-      @include high-contrast-mode('focus');
-    }
-    circle {
-      @include high-contrast-mode('outline');
-    }
-  }
+  .#{$prefix}--overflow-menu:focus,
   .#{$prefix}--overflow-menu-options__btn:focus {
     @include high-contrast-mode('focus');
   }
+
+  .#{$prefix}--overflow-menu svg {
+    @include high-contrast-mode('icon-fill');
+  }
   /*stylelint-enable */
 }
 

packages/components/src/components/pagination/_pagination.scss

@@ -165,13 +165,6 @@ $css--helpers: true;
     fill: $icon-primary;
     transition: outline $duration--fast-02 motion(standard, productive),
       background-color $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
-      border: 1px solid transparent;
-    }
   }
 
   .#{$prefix}--pagination__button:focus,
@@ -207,6 +200,13 @@ $css--helpers: true;
     margin-right: 1rem;
     margin-bottom: 0;
   }
+
+  // Windows HCM fixes
+  // stylelint-disable-next-line no-duplicate-selectors
+  .#{$prefix}--pagination__button,
+  .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
+    @include high-contrast-mode('outline');
+  }
 }
 
 @include exports('pagination') {

packages/components/src/components/search/_search.scss

@@ -121,13 +121,6 @@
     fill: $icon-secondary;
     pointer-events: none;
     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}--search-close {
@@ -173,12 +166,6 @@
 
   .#{$prefix}--search-close svg {
     fill: inherit;
-
-    // Firefox HCM Fix
-    @media screen and (prefers-contrast) {
-      // `ButtonText` is a CSS2 system color to help improve colors in HCM
-      fill: ButtonText;
-    }
   }
 
   .#{$prefix}--search-close,
@@ -365,6 +352,12 @@
     .#{$prefix}--search-magnifier-icon {
     fill: $icon-secondary;
   }
+
+  // Windows HCM Fixes
+  .#{$prefix}--search-close svg,
+  .#{$prefix}--search-magnifier-icon {
+    @include high-contrast-mode('icon-fill');
+  }
 }
 
 @include exports('search') {

packages/components/src/components/select/_select.scss

@@ -178,18 +178,6 @@
     color: $text-primary;
   }
 
-  // Override some Firefox user-agent styles
-  @-moz-document url-prefix() {
-    .#{$prefix}--select-option {
-      background-color: $layer;
-      color: $text-primary;
-    }
-
-    .#{$prefix}--select-optgroup {
-      color: $text-primary;
-    }
-  }
-
   .#{$prefix}--select--inline {
     display: flex;
     flex-direction: row;
@@ -263,6 +251,12 @@
   .#{$prefix}--select.#{$prefix}--skeleton .#{$prefix}--select-input {
     display: none;
   }
+
+  // Windows HCM Fix
+  // stylelint-disable-next-line no-duplicate-selectors
+  .#{$prefix}--select__arrow {
+    @include high-contrast-mode('icon-fill');
+  }
 }
 
 @include exports('select') {

packages/components/src/components/slider/_slider.scss

@@ -209,6 +209,7 @@
     pointer-events: none;
   }
 
+  // Windows HCM fixes
   /* stylelint-disable */
   .#{$prefix}--slider__thumb {
     @include high-contrast-mode('outline');

packages/components/src/components/structured-list/_structured-list.scss

@@ -189,6 +189,7 @@
     }
   }
 
+  // Windows HCM Fix
   .#{$prefix}--structured-list-input:checked
     + .#{$prefix}--structured-list-td
     .#{$prefix}--structured-list-svg {

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

@@ -845,12 +845,20 @@
     .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger svg {
       @include hidden;
     }
+  }
 
-    .#{$prefix}--tabs--scrollable__nav-item
-      .#{$prefix}--tabs__nav-item--selected
-      .#{$prefix}--tabs--scrollable__nav-item--selected {
-      @include high-contrast-mode('focus');
-    }
+  // Windows HCM Fixes
+  .#{$prefix}--tabs--scrollable__nav-item
+    .#{$prefix}--tabs__nav-item--selected
+    .#{$prefix}--tabs--scrollable__nav-item--selected {
+    @include high-contrast-mode('focus');
+  }
+
+  // stylelint-disable-next-line no-duplicate-selectors
+  .#{$prefix}--tabs--scrollable
+    .#{$prefix}--tabs--scrollable__nav-item--disabled
+    .#{$prefix}--tabs--scrollable__nav-link {
+    @include high-contrast-mode('disabled');
   }
 }
 

packages/components/src/components/tag/_tag.scss

@@ -221,13 +221,6 @@
     border-radius: 50%;
     box-shadow: inset 0 0 0 1px $focus;
     outline: none;
-
-    // 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
-      outline: 1px solid ButtonText;
-    }
   }
 
   .#{$prefix}--tag--high-contrast .#{$prefix}--tag__close-icon:focus {
@@ -277,6 +270,22 @@
       }
     }
   }
+
+  // Windows HCM Fixes
+  /* stylelint-disable */
+  .#{$prefix}--tag {
+    @include high-contrast-mode('outline');
+  }
+
+  .#{$prefix}--tag__close-icon svg,
+  .#{$prefix}--tag__custom-icon svg {
+    @include high-contrast-mode('icon-fill');
+  }
+
+  .#{$prefix}--tag__close-icon:focus {
+    @include high-contrast-mode('focus');
+  }
+  /* stylelint-enable */
 }
 
 @include exports('tags') {

packages/components/src/components/text-input/_text-input.scss

@@ -123,13 +123,6 @@
       svg {
         fill: $icon-secondary;
         transition: fill $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;
-        }
       }
     }
 
@@ -357,6 +350,15 @@
     flex: 8;
     flex-direction: column;
   }
+
+  // Windows HCM Fix
+  .#{$prefix}--text-input--password__visibility,
+    // TODO: remove selector above
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger svg,
+    .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:hover
+    svg {
+    @include high-contrast-mode('icon-fill');
+  }
 }
 
 @include exports('text-input') {

packages/components/src/components/tile/_tile.scss

@@ -283,6 +283,13 @@
   .#{$prefix}--tile--disabled .#{$prefix}--tile__checkmark svg {
     fill: $icon-disabled;
   }
+
+  // Windows HCM Fix
+  .#{$prefix}--tile__chevron svg,
+  .#{$prefix}--tile__checkmark svg,
+  .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark svg {
+    @include high-contrast-mode('icon-fill');
+  }
 }
 
 @include exports('tile') {

packages/components/src/components/toggle/_toggle.scss

@@ -296,8 +296,6 @@
       transition: box-shadow $duration--fast-01 motion(exit, productive),
         background-color $duration--fast-01 motion(exit, productive);
       will-change: box-shadow;
-
-      @include high-contrast-mode('outline');
     }
 
     // Toggle circle
@@ -313,8 +311,6 @@
       border-radius: 50%;
       content: '';
       transition: transform $duration--fast-01 motion(exit, productive);
-
-      @include high-contrast-mode('outline');
     }
 
     .#{$prefix}--toggle-input__label & {
@@ -463,6 +459,22 @@
       margin-bottom: $carbon--spacing-03;
     }
   }
+
+  // Windows HCM fixes
+  .#{$prefix}--toggle__switch::after,
+  .#{$prefix}--toggle__switch::before {
+    @include high-contrast-mode('outline');
+  }
+
+  // stylelint-disable-next-line no-duplicate-selectors
+  .#{$prefix}--toggle-input:focus
+    + .#{$prefix}--toggle-input__label
+    > .#{$prefix}--toggle__switch::before,
+  .#{$prefix}--toggle-input:active
+    + .#{$prefix}--toggle-input__label
+    > .#{$prefix}--toggle__switch::before {
+    @include high-contrast-mode('focus');
+  }
 }
 
 @include exports('toggle') {

packages/components/src/components/tooltip/_tooltip.scss

@@ -690,18 +690,16 @@
     pointer-events: all;
   }
 
+  // Windows HCM Fixes
   /* stylelint-disable */
-  .#{$prefix}--tooltip__trigger {
-    svg {
-      @include high-contrast-mode('icon-fill');
-    }
-    &:hover,
-    &:focus {
-      svg {
-        @include high-contrast-mode('icon-fill');
-        @include high-contrast-mode('focus');
-      }
-    }
+  .#{$prefix}--tooltip__trigger svg,
+  .#{$prefix}--tooltip__trigger:hover svg,
+  .#{$prefix}--tooltip__trigger:focus svg {
+    @include high-contrast-mode('icon-fill');
+  }
+
+  .#{$prefix}--tooltip__trigger:focus svg {
+    @include high-contrast-mode('focus');
   }
 
   .#{$prefix}--tooltip {

packages/components/src/components/ui-shell/_header.scss

@@ -66,11 +66,6 @@
   .#{$prefix}--header__action:focus {
     border-color: $shell-header-focus;
     outline: none;
-
-    // Firefox HCM Fix
-    @media screen and (prefers-contrast) {
-      border-style: dotted;
-    }
   }
 
   .#{$prefix}--header__action:active {
@@ -127,13 +122,6 @@
 
   a.#{$prefix}--header__name:focus {
     border-color: $shell-header-focus;
-
-    // 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
-      border-style: dotted;
-    }
   }
 
   .#{$prefix}--header__name--prefix {
@@ -221,12 +209,6 @@
     border-color: $shell-header-focus;
     color: $shell-header-text-01;
     outline: none;
-
-    // Windows, Firefox HCM Fix
-    @media screen and (-ms-high-contrast: active),
-      screen and (prefers-contrast) {
-      border-style: dotted;
-    }
   }
 
   a.#{$prefix}--header__menu-item:hover > svg,