fix(styles): Make styling more coherent for forms elements with High contrast mode and focus/hover state

.changeset/shy-peas-count.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Made styling more coherent for forms elements with High contrast mode and focus/hover state.

packages/styles/src/components/form-check.scss

@@ -74,6 +74,14 @@
       &:indeterminate::after {
         @include icons-mx.icon(2039);
       }
+
+      &:checked,
+      &:indeterminate {
+        @include utility-mx.high-contrast-mode {
+          background-color: SelectedItem !important;
+          color: SelectedItemText !important; // Important is needed for card-control
+        }
+      }
     }
 
     &[type='radio'] {
@@ -84,6 +92,11 @@
         background-color: currentColor;
         border-radius: inherit;
         background-clip: padding-box;
+
+        @include utility-mx.high-contrast-mode {
+          background-color: SelectedItem;
+          border-color: Canvas;
+        }
       }
     }
 
@@ -103,6 +116,16 @@
         }
       }
     }
+
+    &[type='checkbox'],
+    &[type='radio'] {
+      @include utility-mx.high-contrast-mode {
+        &:hover,
+        &:focus {
+          border-color: Highlight;
+        }
+      }
+    }
   }
 
   &-label {
@@ -155,7 +178,7 @@
       border: form-check.$form-check-input-border-width solid CanvasText;
 
       &:checked {
-        background-color: SelectedItem;
+        background-color: SelectedItem !important;
       }
 
       &::after,
@@ -182,12 +205,6 @@
 
     @include utility-mx.high-contrast-mode {
       border-color: Highlight;
-
-      &:checked,
-      &::after,
-      &:checked::after {
-        background-color: Highlight;
-      }
     }
   }
 

packages/styles/src/components/form-range.scss

@@ -82,6 +82,7 @@
         border-color: ButtonText;
       }
 
+      &:hover,
       &:focus-visible {
         &::-webkit-slider-thumb {
           outline-offset: commons.$border-thick;