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 1/3] 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');
 

From 7a11688772b8d3bb362297d43f7a5eaa402dfbbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Sch=C3=A4r?=
 <59233938+schaertim@users.noreply.github.com>
Date: Thu, 19 Dec 2024 08:28:40 +0100
Subject: [PATCH 2/3] fix: linter errors

---
 packages/styles/src/components/checkbox.scss     | 2 ++
 packages/styles/src/components/header/index.scss | 2 +-
 packages/styles/src/components/radio-button.scss | 2 ++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/styles/src/components/checkbox.scss b/packages/styles/src/components/checkbox.scss
index e9a8e4065d..8c903b241d 100644
--- a/packages/styles/src/components/checkbox.scss
+++ b/packages/styles/src/components/checkbox.scss
@@ -64,10 +64,12 @@ $checkbox-icon-indeterminate: url("data:image/svg+xml,<svg width='16' height='16
     &:indeterminate {
       @include utility-mx.high-contrast-mode() {
         background-color: SelectedItem;
+
         ~ label {
           color: SelectedItemText;
         }
       }
+
       &::after {
         background-color: currentColor;
 
diff --git a/packages/styles/src/components/header/index.scss b/packages/styles/src/components/header/index.scss
index 674e266c8e..99a0330eb9 100644
--- a/packages/styles/src/components/header/index.scss
+++ b/packages/styles/src/components/header/index.scss
@@ -4,7 +4,7 @@
 @use 'mixins' as *;
 
 post-header {
-  ul[slot="meta-navigation"] {
+  ul[slot='meta-navigation'] {
     gap: var(--post-core-dimension-4);
 
     @include media.max(lg) {
diff --git a/packages/styles/src/components/radio-button.scss b/packages/styles/src/components/radio-button.scss
index 1d6da4e3a7..de7afafdd3 100644
--- a/packages/styles/src/components/radio-button.scss
+++ b/packages/styles/src/components/radio-button.scss
@@ -60,10 +60,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');
 

From e093280895042c9de2946fb88661c466208bad68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Sch=C3=A4r?=
 <59233938+schaertim@users.noreply.github.com>
Date: Thu, 19 Dec 2024 12:50:43 +0100
Subject: [PATCH 3/3] fix(styles): reverted usage of selectedItemText due to
 not being supported by firefox

---
 packages/styles/src/components/checkbox.scss     | 4 ----
 packages/styles/src/components/radio-button.scss | 4 ----
 2 files changed, 8 deletions(-)

diff --git a/packages/styles/src/components/checkbox.scss b/packages/styles/src/components/checkbox.scss
index 8c903b241d..723ea45a0f 100644
--- a/packages/styles/src/components/checkbox.scss
+++ b/packages/styles/src/components/checkbox.scss
@@ -64,10 +64,6 @@ $checkbox-icon-indeterminate: url("data:image/svg+xml,<svg width='16' height='16
     &:indeterminate {
       @include utility-mx.high-contrast-mode() {
         background-color: SelectedItem;
-
-        ~ label {
-          color: SelectedItemText;
-        }
       }
 
       &::after {
diff --git a/packages/styles/src/components/radio-button.scss b/packages/styles/src/components/radio-button.scss
index de7afafdd3..2b0f7a27a7 100644
--- a/packages/styles/src/components/radio-button.scss
+++ b/packages/styles/src/components/radio-button.scss
@@ -60,10 +60,6 @@ tokens.$default-map: components.$post-radio-button;
   &:checked {
     @include utility-mx.high-contrast-mode() {
       background-color: SelectedItem;
-
-      ~ label {
-        color: SelectedItemText !important;
-      }
     }
 
     &::after {