From 994fc58898b8f80b4c6086bc103300b190bb50bc Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 17 Apr 2024 07:45:02 +0200
Subject: [PATCH] fix(styles): checkbox/radio button hover color

---
 .changeset/large-jokes-scream.md              |  5 ++++
 .../styles/src/components/form-check.scss     | 28 ++++---------------
 2 files changed, 10 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/large-jokes-scream.md

diff --git a/.changeset/large-jokes-scream.md b/.changeset/large-jokes-scream.md
new file mode 100644
index 0000000000..503415e092
--- /dev/null
+++ 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
index 1512fbc695..75b5b058a8 100644
--- 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);