fix(styles): added missing hcm styles for radio-button and checkbox

swisspost · Dec 18, 2024 · 45c1440 · 45c1440
1 parent 912198c
commit 45c1440
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/.changeset/rude-shrimps-wonder.md b/.changeset/rude-shrimps-wonder.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Corrected high contrast mode styles for `checkbox` and `radio-button`.
diff --git a/packages/styles/src/components/checkbox.scss b/packages/styles/src/components/checkbox.scss
@@ -43,6 +43,7 @@ $checkbox-icon-indeterminate: url("data:image/svg+xml,<svg width='16' height='16
       background-color: Field;
       border-color: FieldText;
       color: FieldText;
+      transition: none;
     }
 
     &:not([disabled]) {
@@ -61,6 +62,12 @@ $checkbox-icon-indeterminate: url("data:image/svg+xml,<svg width='16' height='16
 
     &:checked,
     &:indeterminate {
+      @include utility-mx.high-contrast-mode() {
+        background-color: SelectedItem;
+        ~ label {
+          color: SelectedItemText;
+        }
+      }
       &::after {
         background-color: currentColor;
 

diff --git a/packages/styles/src/components/radio-button.scss b/packages/styles/src/components/radio-button.scss
@@ -58,6 +58,12 @@ tokens.$default-map: components.$post-radio-button;
   }
 
   &:checked {
+    @include utility-mx.high-contrast-mode() {
+      background-color: SelectedItem;
+      ~ label {
+        color: SelectedItemText !important;
+      }
+    }
     &::after {
       background-color: tokens.get('radio-button-enabled-fg');