diff --git a/.changeset/three-pandas-push.md b/.changeset/three-pandas-push.md new file mode 100644 index 0000000000..42eb75fe4b --- /dev/null +++ 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 index fb81f6e1f0..99d56d28c6 100644 --- 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 index a0a5695d5f..acf709a07d 100644 --- 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 index 010fb06350..122b016d5f 100644 --- 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 index ae9a9e5277..06d106c3db 100644 --- 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 index 5191921e98..bf1280c968 100644 --- 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;