From 45c144031eae01a8b1bb1084ceebdf2ad82823bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Sch=C3=A4r?=
 <59233938+schaertim@users.noreply.github.com>
Date: Wed, 18 Dec 2024 16:19:44 +0100
Subject: [PATCH] fix(styles): added missing hcm styles for radio-button and
 checkbox

---
 .changeset/rude-shrimps-wonder.md                | 5 +++++
 packages/styles/src/components/checkbox.scss     | 7 +++++++
 packages/styles/src/components/radio-button.scss | 6 ++++++
 3 files changed, 18 insertions(+)
 create mode 100644 .changeset/rude-shrimps-wonder.md

diff --git a/.changeset/rude-shrimps-wonder.md b/.changeset/rude-shrimps-wonder.md
new file mode 100644
index 0000000000..798cb060a2
--- /dev/null
+++ 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
index e4b43c308f..e9a8e4065d 100644
--- 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
index a4ba90479b..1d6da4e3a7 100644
--- 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');