fix(styles): Color-contrast on form elements valid form-feedback (#2717)

I didn't remove color-contrast rules for several elements, as it will be handled on other tickets: * Radio and checkbox: #2681 * Switch: #853 * Textarea: #1055
swisspost · Feb 29, 2024 · 3c266b6 · 3c266b6
1 parent e7c2da6
commit 3c266b6
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 13 deletions.
diff --git a/.changeset/short-singers-lay.md b/.changeset/short-singers-lay.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed color-contrast issue on valid form-feedback.
diff --git a/packages/documentation/cypress/e2e/components/input.cy.ts b/packages/documentation/cypress/e2e/components/input.cy.ts
@@ -11,9 +11,6 @@ describe('Input', () => {
 
         cy.checkA11y('#root-inner', {
           rules: {
-            'color-contrast': {
-              enabled: false,
-            },
             'duplicate-id-aria': {
               enabled: false,
             },

diff --git a/packages/documentation/cypress/e2e/components/range.cy.ts b/packages/documentation/cypress/e2e/components/range.cy.ts
@@ -9,9 +9,6 @@ describe('Range', () => {
     it('Has no detectable a11y violations on load for all variants', () => {
       cy.checkA11y('#root-inner', {
         rules: {
-          'color-contrast': {
-            enabled: false,
-          },
           'duplicate-id-aria': {
             enabled: false,
           },

diff --git a/packages/documentation/cypress/e2e/components/select.cy.ts b/packages/documentation/cypress/e2e/components/select.cy.ts
@@ -9,9 +9,6 @@ describe('Select', () => {
     it('Has no detectable a11y violations on load for all variants', () => {
       cy.checkA11y('#root-inner', {
         rules: {
-          'color-contrast': {
-            enabled: false,
-          },
           'duplicate-id-aria': {
             enabled: false,
           },

diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
@@ -64,6 +64,12 @@
       }
     }
 
+    &:disabled {
+      ~ label {
+        color: forms.$input-disabled-color;
+      }
+    }
+
     &[type='file'] {
       &:focus,
       &:not(:placeholder-shown) {

diff --git a/packages/styles/src/variables/components/_form-validation.scss b/packages/styles/src/variables/components/_form-validation.scss
@@ -17,12 +17,12 @@ $form-feedback-padding-x: button.$input-btn-padding-x !default;
 $form-feedback-padding-y: 0.5 * button.$input-btn-padding-x !default;
 $form-feedback-icon-size: 2rem !default; // Equals 24pt [svg-size]
 $form-feedback-icon-offset: spacing.$size-mini !default;
-$form-feedback-valid-bg: color.$success !default;
+$form-feedback-valid-bg: color.$success-green !default;
 $form-feedback-valid-text: color.$white !default;
 $form-feedback-invalid-bg: color.$error !default;
 $form-feedback-invalid-text: color.$white !default;
-$form-feedback-custom-color: color.$success !default;
-$form-feedback-custom-bg: color.$success !default;
+$form-feedback-custom-color: color.$success-green !default;
+$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

diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
@@ -36,7 +36,7 @@ $input-line-height-lg: type.$line-height-copy !default;
 
 $input-bg: color.$white !default;
 $input-disabled-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.6) !default;
-$input-disabled-color: color.$gray-40; // Design System only
+$input-disabled-color: rgba(var(--post-contrast-color-rgb), 0.6); // Design System only
 $input-disabled-border-color: color.$gray-40; // Design System only
 
 $input-color: color.$black !default;