feat(HCM): update first half of components

Author: tw15egan

packages/components/src/components/file-uploader/_file-uploader.scss

@@ -160,12 +160,6 @@
       white-space: nowrap;
       text-overflow: ellipsis;
     }
-
-    // Windows, Firefox HCM Fix
-    @media screen and (-ms-high-contrast: active),
-      screen and (prefers-contrast) {
-      outline: 2px solid transparent;
-    }
   }
 
   .#{$prefix}--file__selected-file--field {
@@ -307,13 +301,6 @@
 
   .#{$prefix}--file__state-container .#{$prefix}--file-close svg path {
     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}--file__state-container .#{$prefix}--inline-loading__animation {
@@ -335,6 +322,17 @@
     outline: 2px solid $focus;
     outline-offset: -2px;
   }
+
+  // Windows HCM fix
+  /* stylelint-disable */
+  .#{$prefix}--file__selected-file {
+    @include high-contrast-mode('outline');
+  }
+
+  .#{$prefix}--file__state-container .#{$prefix}--file-close svg path {
+    @include high-contrast-mode('icon-fill');
+  }
+  /* stylelint-enable */
 }
 
 @include exports('file-uploader') {

packages/components/src/components/modal/_modal.scss

@@ -330,14 +330,6 @@
     align-items: flex-start;
   }
 
-  .#{$prefix}--modal-footer button.#{$prefix}--btn:focus {
-    // Firefox HCM Fix
-    @media screen and (prefers-contrast) {
-      border: none;
-      outline-style: dotted;
-    }
-  }
-
   .#{$prefix}--modal-close {
     position: absolute;
     top: 0;
@@ -358,11 +350,6 @@
     &:focus {
       border-color: $focus;
       outline: none;
-
-      // Firefox HCM Fix
-      @media screen and (prefers-contrast) {
-        border-style: dotted;
-      }
     }
   }
 
@@ -374,13 +361,6 @@
     width: rem(20px);
     height: rem(20px);
     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}--body--with-modal-open {
@@ -390,6 +370,17 @@
   .#{$prefix}--body--with-modal-open .#{$prefix}--tooltip {
     z-index: z('modal');
   }
+
+  // Windows HCM fixes
+  /* stylelint-disable */
+  .#{$prefix}--modal-close__icon {
+    @include high-contrast-mode('icon-fill');
+  }
+
+  .#{$prefix}--modal-close:focus {
+    @include high-contrast-mode('focus');
+  }
+  /* stylelint-enable */
 }
 
 @include exports('modal') {

packages/components/src/components/notification/_inline-notification.scss

@@ -49,12 +49,6 @@
     @include carbon--breakpoint(max) {
       max-width: rem(832px);
     }
-
-    // Firefox HCM fix
-    @media screen and (prefers-contrast) {
-      outline-width: 1px;
-      outline-style: solid;
-    }
   }
 
   .#{$prefix}--inline-notification:not(.#{$prefix}--inline-notification--low-contrast)
@@ -249,12 +243,6 @@
     outline: 2px solid $focus-inverse;
     outline-offset: -2px;
     box-shadow: none;
-
-    // Firefox HCM Fix
-    @media screen and (prefers-contrast) {
-      border-style: dotted;
-      outline-style: dotted;
-    }
   }
 
   .#{$prefix}--inline-notification--low-contrast
@@ -291,11 +279,6 @@
     &:focus {
       outline: 2px solid $focus-inverse;
       outline-offset: -2px;
-
-      // Firefox HCM fix
-      @media screen and (prefers-contrast) {
-        outline-style: dotted;
-      }
     }
 
     .#{$prefix}--inline-notification__close-icon {
@@ -317,6 +300,17 @@
     .#{$prefix}--inline-notification__close-icon {
     fill: $icon-primary;
   }
+
+  // Windows HCM fixes
+  // stylelint-disable-next-line no-duplicate-selectors
+  .#{$prefix}--inline-notification {
+    @include high-contrast-mode('outline');
+  }
+
+  .#{$prefix}--inline-notification__close-button:focus,
+  .#{$prefix}--btn.#{$prefix}--btn--ghost.#{$prefix}--inline-notification__action-button:focus {
+    @include high-contrast-mode('focus');
+  }
 }
 
 @include exports('inline-notifications') {

packages/components/src/components/notification/_toast-notification.scss

@@ -42,12 +42,6 @@
     @include carbon--breakpoint(max) {
       width: rem(352px);
     }
-
-    // Firefox HCM fix
-    @media screen and (prefers-contrast) {
-      outline-width: 1px;
-      outline-style: solid;
-    }
   }
 
   .#{$prefix}--toast-notification:not(.#{$prefix}--toast-notification--low-contrast)
@@ -231,6 +225,17 @@
     .#{$prefix}--toast-notification__caption {
     color: $text-primary;
   }
+
+  // Windows HCM fixes
+  /* stylelint-disable */
+  .#{$prefix}--toast-notification {
+    @include high-contrast-mode('outline');
+  }
+
+  .#{$prefix}--toast-notification__close-button:focus {
+    @include high-contrast-mode('focus');
+  }
+  /* stylelint-enable */
 }
 
 @include exports('toast-notifications') {