diff --git a/.changeset/short-singers-lay.md b/.changeset/short-singers-lay.md new file mode 100644 index 0000000000..630139c34b --- /dev/null +++ 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 index 1119fe1719..46ee86b974 100644 --- 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 index 7e7cb6096f..2ecc90710f 100644 --- 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 index a3b04c95c5..2fc2b29415 100644 --- 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 index c0ea34fc5b..fb81f6e1f0 100644 --- 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 index 2f66876809..5191921e98 100644 --- 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 index 2610e272af..74c32b8d6b 100644 --- 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;