fix(styles): checkbox/radio button hover color

swisspost · Apr 17, 2024 · 994fc58 · 994fc58
1 parent 67bc6e0
commit 994fc58
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 23 deletions.
diff --git a/.changeset/large-jokes-scream.md b/.changeset/large-jokes-scream.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed color and border-color on hover for checkbox and radio form element.
diff --git a/packages/styles/src/components/form-check.scss b/packages/styles/src/components/form-check.scss
@@ -40,6 +40,10 @@
     &:hover:not([disabled]),
     &:hover:not([disabled]) ~ &-label {
       color: var(--post-contrast-color);
+
+      @include utility-mx.high-contrast-mode() {
+        border-color: Highlight;
+      }
     }
   }
 
@@ -58,40 +62,18 @@
     height: form-check.$form-check-input-size;
     width: form-check.$form-check-input-size;
     border: form-check.$form-check-input-border-width solid
-      rgba(var(--post-contrast-color-rgb), 0.8);
+      currentColor;
 
     @include utility-mx.high-contrast-mode {
       border-color: FieldText; // For blink-browser as otherwise the default color (which is not a full color) will be converted to Highlight
     }
 
-    @include utility-mx.high-contrast-mode() {
-      &:not(:disabled) {
-        &:hover {
-          border-color: Highlight;
-        }
-      }
-    }
-
     &::after {
       content: '';
       display: block;
       flex: 1;
     }
 
-    &:checked,
-    &:indeterminate {
-      color: var(--post-contrast-color);
-      border-color: var(--post-contrast-color);
-
-      @include utility-mx.high-contrast-mode {
-        border-color: FieldText; // Firefox need explicit declaration here
-      }
-
-      ~ .form-check-label {
-        color: var(--post-contrast-color);
-      }
-    }
-
     &[type='checkbox'] {
       &:checked::after {
         @include icons-mx.icon(3035);