fix(styles): added hover colors in hcm (#4331)

Co-authored-by: Oliver Schürch <[email protected]>
swisspost · Dec 19, 2024 · aa7223f · aa7223f
1 parent e8d0d36
commit aa7223f
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 9 deletions.
diff --git a/.changeset/four-jokes-tease.md b/.changeset/four-jokes-tease.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Added hover styles in high contrast mode for the css components `Button`, `Chip`, `Form Search` and `Button Close`.
diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss
@@ -57,17 +57,19 @@ tokens.$default-map: components.$post-button;
 
   // Styles  to improve accessibility in high contrast mode
   @include utilities.high-contrast-mode() {
-    border-color: ButtonBorder;
-    background-color: ButtonFace;
-
-    &:not(:disabled, .disabled) {
-      &:hover {
-        border-color: highlight;
+    &[class] {
+      border-color: ButtonBorder;
+      background-color: ButtonFace;
+
+      &:not(:disabled, .disabled) {
+        &:hover {
+          border-color: highlight;
+        }
       }
-    }
 
-    &:disabled {
-      border-color: GrayText !important;
+      &:disabled {
+        border-color: GrayText !important;
+      }
     }
   }
 }

diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss
@@ -118,6 +118,10 @@
       color: chip.$chip-hover-color;
       background-color: chip.$chip-hover-bg;
 
+      @include utilities.high-contrast-mode() {
+        border-color: highlight;
+      }
+
       > .badge {
         background-color: chip.$chip-bg;
       }

diff --git a/packages/styles/src/components/form-search-input.scss b/packages/styles/src/components/form-search-input.scss
@@ -42,6 +42,9 @@ tokens.$default-map: components.$post-search-input;
     .search-button {
       post-icon {
         color: tokens.get('input-color-hover-fg', components.$post-text-input);
+        @include utilities.high-contrast-mode() {
+          color: Highlight;
+        }
       }
     }
   }

diff --git a/packages/styles/src/components/icon-close-button.scss b/packages/styles/src/components/icon-close-button.scss
@@ -15,6 +15,14 @@ tokens.$default-map: components.$post-close;
   background-color: tokens.get('close-enabled-bg');
   color: tokens.get('close-enabled-fg');
 
+  &:hover {
+    > post-icon {
+      @include utilities.high-contrast-mode() {
+        color: Highlight;
+      }
+    }
+  }
+
   > post-icon {
     min-width: tokens.get('close-icon-size');
     width: tokens.get('close-icon-size');