chore(components): update hcm styles for card-control

swisspost · Apr 5, 2024 · e189762 · e189762
1 parent eeac5e0
commit e189762
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 7 deletions.
diff --git a/packages/components/src/components/post-card-control/post-card-control.scss b/packages/components/src/components/post-card-control/post-card-control.scss
@@ -30,9 +30,7 @@
   border: post.$size-line solid var(--post-card-control-border-color);
   border-radius: post.$border-radius;
   color: var(--post-card-control-color);
-
   cursor: pointer;
-  transition: background-color 100ms linear, border-color 100ms linear;
 
   .card-control--input {
     grid-area: input;
@@ -41,7 +39,7 @@
     border-color: var(--post-card-control-input-border-color) !important;
     color: var(--post-card-control-input-border-color) !important;
     cursor: inherit;
-    transition: border-color 100ms ease-in-out;
+    transition: none;
 
     &:focus,
     &:focus-visible {
@@ -90,7 +88,19 @@
       --post-card-control-bg: #{post.$yellow};
 
       @include post.high-contrast-mode() {
+        --post-card-control-border-color: FieldText;
         --post-card-control-bg: SelectedItem;
+        --post-card-control-color: SelectedItemText;
+        --post-card-control-input-border-color: SelectedItemText;
+        --post-card-control-input-bg: SelectedItem;
+
+        .card-control--input {
+          &::after {
+            forced-color-adjust: none;
+            border-color: transparent;
+            color: SelectedItemText;
+          }
+        }
       }
     }
 
@@ -108,7 +118,16 @@
 
       @include post.high-contrast-mode() {
         --post-card-control-border-color: Highlight;
+        --post-card-control-bg: Field;
+        --post-card-control-color: FieldText;
         --post-card-control-input-border-color: Highlight;
+        --post-card-control-input-bg: Field;
+
+        .card-control--input {
+          &::after {
+            color: FieldText;
+          }
+        }
       }
     }
   }

diff --git a/packages/styles/src/components/choice-control-card.scss b/packages/styles/src/components/choice-control-card.scss
@@ -32,9 +32,6 @@ fieldset {
   border-radius: commons.$border-radius;
   color: var(--post-card-control-color);
   cursor: pointer;
-  transition:
-    background-color 100ms linear,
-    border-color 100ms linear;
 
   input.form-check-input {
     grid-area: input;
@@ -45,7 +42,7 @@ fieldset {
     border-color: var(--post-card-control-input-border-color) !important;
     color: var(--post-card-control-input-border-color) !important;
     cursor: inherit;
-    transition: border-color 100ms ease-in-out;
+    transition: none;
 
     &:focus,
     &:focus-visible {
@@ -97,7 +94,19 @@ fieldset {
       --post-card-control-bg: #{color.$yellow};
 
       @include utilities.high-contrast-mode() {
+        --post-card-control-border-color: FieldText;
         --post-card-control-bg: SelectedItem;
+        --post-card-control-color: SelectedItemText;
+        --post-card-control-input-border-color: SelectedItemText;
+        --post-card-control-input-bg: SelectedItem;
+
+        input.form-check-input {
+          &::after {
+            forced-color-adjust: none;
+            border-color: transparent;
+            color: SelectedItemText;
+          }
+        }
       }
     }
 
@@ -115,7 +124,16 @@ fieldset {
 
       @include utilities.high-contrast-mode() {
         --post-card-control-border-color: Highlight;
+        --post-card-control-bg: Field;
+        --post-card-control-color: FieldText;
         --post-card-control-input-border-color: Highlight;
+        --post-card-control-input-bg: Field;
+
+        input.form-check-input {
+          &::after {
+            color: FieldText;
+          }
+        }
       }
     }
 
@@ -161,7 +179,11 @@ fieldset {
           --post-card-control-input-bg: #{color.$white};
 
           @include utilities.high-contrast-mode() {
+            --post-card-control-border-color: FieldText;
             --post-card-control-bg: SelectedItem;
+            --post-card-control-color: SelectedItemText;
+            --post-card-control-input-border-color: SelectedItemText;
+            --post-card-control-input-bg: SelectedItem;
           }
         }
 
@@ -181,7 +203,11 @@ fieldset {
             --post-card-control-bg: #{color.$yellow};
 
             @include utilities.high-contrast-mode() {
+              --post-card-control-border-color: FieldText;
               --post-card-control-bg: SelectedItem;
+              --post-card-control-color: SelectedItemText;
+              --post-card-control-input-border-color: SelectedItemText;
+              --post-card-control-input-bg: SelectedItem;
             }
           }
         }
@@ -195,7 +221,10 @@ fieldset {
 
           @include utilities.high-contrast-mode() {
             --post-card-control-border-color: Highlight;
+            --post-card-control-bg: Field;
+            --post-card-control-color: FieldText;
             --post-card-control-input-border-color: Highlight;
+            --post-card-control-input-bg: Field;
           }
         }