fix(styles): HCM Light: Select arrow icon is not visible (#2696)

swisspost · Feb 20, 2024 · 401ed2d · 401ed2d
1 parent b6ec72f
commit 401ed2d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/.changeset/smart-avocados-wonder.md b/.changeset/smart-avocados-wonder.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed visibility of select arrow in icon in high-contrast mode with light theme.
diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss
@@ -64,7 +64,12 @@
   }
 
   @include utilities.high-contrast-mode() {
-    background-image: b.escape-svg(form-select.$form-select-indicator-hcm);
+    background-image: b.escape-svg(form-select.$form-select-indicator-hcm-dark);
+
+    @media (prefers-color-scheme: light) {
+      background-image: b.escape-svg(form-select.$form-select-indicator-hcm-light);
+    }
+
     background-color: Field;
     border-color: FieldText;
     color: FieldText;

diff --git a/packages/styles/src/variables/components/_form-select.scss b/packages/styles/src/variables/components/_form-select.scss
@@ -18,4 +18,5 @@ $form-select-indicator-success: url(icons.get-colored-svg-url(
   color.$success-green
 )) !default;
 $form-select-indicator-error: url(icons.get-colored-svg-url('2104', color.$error-red)) !default;
-$form-select-indicator-hcm: url(icons.get-colored-svg-url('2113', color.$white)) !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;