fix(HCM): fix HCM issues in a few components (#7991)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 8, 2021 · 806f4d2 · 806f4d2
1 parent 460bf18
commit 806f4d2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/packages/components/src/components/content-switcher/_content-switcher.scss b/packages/components/src/components/content-switcher/_content-switcher.scss
@@ -58,6 +58,11 @@
       z-index: 3;
       border-color: $focus;
       box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $ui-01;
+
+      // Firefox HCM Fix
+      @media screen and (prefers-contrast) {
+        border-style: dotted;
+      }
     }
 
     &:hover {

diff --git a/packages/components/src/components/date-picker/_flatpickr.scss b/packages/components/src/components/date-picker/_flatpickr.scss
@@ -141,17 +141,18 @@
   height: rem(40px);
   width: rem(40px);
   padding: 0;
-  fill: $text-01;
+  fill: $icon-01;
   transition: background-color $duration--fast-01 motion(standard, productive);
 
   &:hover {
     background-color: $hover-ui;
   }
-}
 
-.flatpickr-prev-month:hover svg,
-.flatpickr-next-month:hover svg {
-  fill: $text-01;
+  // 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,