diff --git a/.changeset/famous-panthers-bow.md b/.changeset/famous-panthers-bow.md new file mode 100644 index 0000000000..08534ffdf6 --- /dev/null +++ b/.changeset/famous-panthers-bow.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': patch +--- + +Fixed visibility of the arrow-icon in Form Select for high contrast mode. diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss index b557ef2570..1e7847a59f 100644 --- a/packages/styles/src/components/form-select.scss +++ b/packages/styles/src/components/form-select.scss @@ -52,6 +52,10 @@ tokens.$default-map: components.$post-select; @include utilities.high-contrast-mode { border-color: FieldText; } + + @include utilities.high-contrast-mode-dark() { + @include forms.select-bg-image('selected-hcm', $mode: dark); + } } &:hover { @@ -79,6 +83,14 @@ tokens.$default-map: components.$post-select; } } + @include utilities.high-contrast-mode-light() { + @include forms.select-bg-image('enabled-hcm', $mode: light); + } + + @include utilities.high-contrast-mode-dark() { + @include forms.select-bg-image('enabled-hcm', $mode: dark); + } + &.is-valid, &.is-invalid { &:not(:disabled) { diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss index 0854d6adf0..1003563f09 100644 --- a/packages/styles/src/mixins/_forms.scss +++ b/packages/styles/src/mixins/_forms.scss @@ -41,6 +41,9 @@ 'selected-dark': #fff, 'disabled-light': #696864, 'disabled-dark': #fff, + 'enabled-hcm-light': #050400, + 'enabled-hcm-dark': #fff, + 'selected-hcm-dark': #fff, ); @if ($validation == 'valid') { diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss index 4eb10fd3a0..71cc9442aa 100644 --- a/packages/styles/src/mixins/_utilities.scss +++ b/packages/styles/src/mixins/_utilities.scss @@ -82,6 +82,20 @@ } } +@mixin high-contrast-mode-dark() { + @media (forced-colors: active) and (prefers-color-scheme: dark), + (-ms-high-contrast: white-on-black) { + @content; + } +} + +@mixin high-contrast-mode-light() { + @media (forced-colors: active) and (prefers-color-scheme: light), + (-ms-high-contrast: black-on-white) { + @content; + } +} + @mixin not-disabled-focus-hover { &:focus, &:not(:disabled):hover,