fix(styles): Update form validation feedback color and indicators in …

…HCM (#2766)
swisspost · Mar 12, 2024 · ab35c3c · ab35c3c
1 parent 530b0b9
commit ab35c3c
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 18 deletions.
diff --git a/.changeset/three-pandas-push.md b/.changeset/three-pandas-push.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed form validation feedback color and indicators in high contrast mode.
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
@@ -209,7 +209,6 @@
           width: calc(
             100% - (#{forms.$input-border-width * 2}) - #{forms.$form-floating-padding-x}
           );
-          height: forms.$form-floating-label-height;
         }
       }
     }

diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss
@@ -10,6 +10,10 @@
 @use './../variables/components/form-select' as form-select;
 
 .form-select {
+  --form-select-indicator: #{form-select.$form-select-indicator};
+  --form-select-indicator-success: #{b.escape-svg(form-select.$form-select-indicator-success)};
+  --form-select-indicator-error: #{b.escape-svg(form-select.$form-select-indicator-error)};
+
   &:not(:disabled) {
     &:hover {
       border-color: var(--post-contrast-color);
@@ -19,7 +23,7 @@
   &:not([multiple]) {
     &:disabled {
       background-image: b.escape-svg(form-select.$form-select-indicator-disabled),
-        var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+        var(--form-select-indicator), var(--bs-form-select-bg-icon, none);
     }
 
     &.is-valid,
@@ -36,13 +40,13 @@
     }
 
     &.is-valid {
-      background-image: b.escape-svg(form-select.$form-select-indicator-success),
-        var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+      background-image: var(--form-select-indicator-success), var(--form-select-indicator),
+        var(--bs-form-select-bg-icon, none);
     }
 
     &.is-invalid {
-      background-image: b.escape-svg(form-select.$form-select-indicator-error),
-        var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+      background-image: var(--form-select-indicator-error), var(--form-select-indicator),
+        var(--bs-form-select-bg-icon, none);
     }
   }
 
@@ -53,20 +57,30 @@
     }
 
     &.is-valid {
-      background-image: b.escape-svg(form-select.$form-select-indicator-success),
-        var(--bs-form-select-bg-icon, none);
+      background-image: var(--form-select-indicator-success), var(--bs-form-select-bg-icon, none);
     }
 
     &.is-invalid {
-      background-image: b.escape-svg(form-select.$form-select-indicator-error),
-        var(--bs-form-select-bg-icon, none);
+      background-image: var(--form-select-indicator-error), var(--bs-form-select-bg-icon, none);
     }
   }
 
   @include utilities.high-contrast-mode() {
+    --form-select-indicator: #{b.escape-svg(form-select.$form-select-indicator-hcm-dark)};
+    --form-select-indicator-success: #{b.escape-svg(
+        form-select.$form-select-indicator-success-hcm-dark
+      )};
+    --form-select-indicator-error: #{b.escape-svg(form-select.$form-select-indicator-error-hcm-dark)};
     background-image: b.escape-svg(form-select.$form-select-indicator-hcm-dark);
 
     @media (prefers-color-scheme: light) {
+      --form-select-indicator: #{b.escape-svg(form-select.$form-select-indicator-hcm-light)};
+      --form-select-indicator-success: #{b.escape-svg(
+          form-select.$form-select-indicator-success-hcm-light
+        )};
+      --form-select-indicator-error: #{b.escape-svg(
+          form-select.$form-select-indicator-error-hcm-light
+        )};
       background-image: b.escape-svg(form-select.$form-select-indicator-hcm-light);
     }
 

diff --git a/packages/styles/src/components/form-validation.scss b/packages/styles/src/components/form-validation.scss
@@ -23,8 +23,8 @@
   font-size: form-validation.$form-feedback-font-size;
 
   @include utilities-mx.high-contrast-mode() {
-    color: HighlightText !important;
-    background-color: Highlight !important;
+    color: MarkText !important;
+    background-color: Mark !important;
     forced-color-adjust: none;
   }
 }
@@ -57,7 +57,6 @@
   .form-control {
     @include b.form-validation-state-selector($state) {
       padding-right: b.$input-height-inner;
-      background-image: b.escape-svg($icon);
       background-repeat: no-repeat;
       background-position: right b.$input-height-inner-quarter center;
       background-size: form-validation.$form-feedback-icon-size;
@@ -105,6 +104,14 @@
     border-color: form-validation.$form-feedback-invalid-color;
     background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid);
 
+    @include utilities-mx.high-contrast-mode() {
+      background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-dark);
+
+      @media (prefers-color-scheme: light) {
+        background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-light);
+      }
+    }
+
     &:focus {
       border-color: form-validation.$form-feedback-invalid-color;
       box-shadow: form-validation.$form-feedback-invalid-box-shadow;
@@ -115,6 +122,14 @@
     border-color: var(--post-success-green);
     background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
 
+    @include utilities-mx.high-contrast-mode() {
+      background-image: b.escape-svg(form-validation.$form-feedback-icon-valid-hcm-dark);
+
+      @media (prefers-color-scheme: light) {
+        background-image: b.escape-svg(form-validation.$form-feedback-icon-valid-hcm-light);
+      }
+    }
+
     &:focus {
       border-color: form-validation.$form-feedback-valid-color;
       box-shadow: form-validation.$form-feedback-valid-box-shadow;

diff --git a/packages/styles/src/variables/components/_form-select.scss b/packages/styles/src/variables/components/_form-select.scss
@@ -13,10 +13,28 @@ $form-select-indicator-disabled: url(icons.get-colored-svg-url(
   '2113',
   $form-select-disabled-color
 )) !default;
+$form-select-indicator-hcm-dark: url(icons.get-colored-svg-url('2113', color.$white)) !default;
+$form-select-indicator-hcm-light: url(icons.get-colored-svg-url('2113', color.$black)) !default;
+
 $form-select-indicator-success: url(icons.get-colored-svg-url(
   '2105',
   color.$success-green
 )) !default;
+$form-select-indicator-success-hcm-dark: url(icons.get-colored-svg-url(
+  '2105',
+  color.$white
+)) !default;
+$form-select-indicator-success-hcm-light: url(icons.get-colored-svg-url(
+  '2105',
+  color.$black
+)) !default;
+
 $form-select-indicator-error: url(icons.get-colored-svg-url('2104', color.$error-red)) !default;
-$form-select-indicator-hcm-dark: url(icons.get-colored-svg-url('2113', color.$white)) !default;
-$form-select-indicator-hcm-light: url(icons.get-colored-svg-url('2113', color.$black)) !default;
+$form-select-indicator-error-hcm-dark: url(icons.get-colored-svg-url(
+  '2104',
+  color.$white
+)) !default;
+$form-select-indicator-error-hcm-light: url(icons.get-colored-svg-url(
+  '2104',
+  color.$black
+)) !default;
diff --git a/packages/styles/src/variables/components/_form-validation.scss b/packages/styles/src/variables/components/_form-validation.scss
@@ -3,14 +3,22 @@
 @use './../type';
 @use './../components/button';
 @use './../components/forms';
+@use './../../functions/icons';
 
 // Bootstrap variables
 $form-feedback-margin-top: 0 !default;
 $form-feedback-font-size: type.$font-size-12 !default;
 $form-feedback-valid-color: color.$gray-60 !default;
 $form-feedback-invalid-color: color.$error !default;
-$form-feedback-icon-valid: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24pt' height='24pt' viewBox='0 0 24 24' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(0%25,50.588235%25,22.745098%25);fill-opacity:1;' d='M 9.5 18.398438 L 3.800781 12.699219 L 5.199219 11.300781 L 9.5 15.597656 L 18.800781 6.300781 L 20.199219 7.699219 Z M 9.5 18.398438 '/%3E%3C/g%3E%3C/svg%3E%0A") !default;
-$form-feedback-icon-invalid: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24pt' height='24pt' viewBox='0 0 24 24' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(64.705882%25,9.019608%25,15.686275%25);fill-opacity:1;' d='M 11 3 L 13 3 L 13 17 L 11 17 Z M 11 3 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(64.705882%25,9.019608%25,15.686275%25);fill-opacity:1;' d='M 11 19 L 13 19 L 13 21 L 11 21 Z M 11 19 '/%3E%3C/g%3E%3C/svg%3E%0A") !default;
+$form-feedback-icon-valid: url(icons.get-colored-svg-url('2105', color.$success-green)) !default;
+$form-feedback-icon-valid-hcm-dark: url(icons.get-colored-svg-url('2105', color.$white)) !default;
+$form-feedback-icon-valid-hcm-light: url(icons.get-colored-svg-url('2105', color.$black)) !default;
+$form-feedback-icon-invalid: url(icons.get-colored-svg-url('2104', color.$error-red)) !default;
+$form-feedback-icon-invalid-hcm-dark: url(icons.get-colored-svg-url('2104', color.$white)) !default;
+$form-feedback-icon-invalid-hcm-light: url(icons.get-colored-svg-url(
+  '2104',
+  color.$black
+)) !default;
 
 // Design System custom variables
 $form-feedback-padding-x: button.$input-btn-padding-x !default;
@@ -26,6 +34,6 @@ $form-feedback-custom-bg: color.$success-green !default;
 $form-feedback-invalid-box-shadow: 0 0 0 forms.$input-focus-width
   rgba($form-feedback-invalid-color, 0.25) !default;
 $form-feedback-valid-box-shadow: 0 0 0 forms.$input-focus-width
-rgba($form-feedback-valid-color, 0.25) !default;
+  rgba($form-feedback-valid-color, 0.25) !default;
 $form-feedback-custom-text: color.$white !default;
 $form-feedback-custom-box-shadow: 0 0 0 0.2rem rgba($form-feedback-custom-color, 0.25) !default;
-Original file line number
+Diff line change
@@ Expand Up / @@ -209,7 +209,6 @@ @@
               width: calc(
 % - (#{forms.$input-border-width * 2}) - #{forms.$form-floating-padding-x}
               );
-              height: forms.$form-floating-label-height;
             }
           }
         }
@@ Expand Down @@