feat: add media query for high contrast

telekom · Aug 2, 2021 · 87d12bc · 87d12bc
1 parent 467cbcf
commit 87d12bc
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/packages/components/src/components/toggle-button/toggle-button.css b/packages/components/src/components/toggle-button/toggle-button.css
@@ -55,6 +55,9 @@
   --background-selected-dark: var(--scl-color-grey-90);
   --background-selected-hover-dark: var(--scl-color-grey-70);
   --background-selected-active-dark: var(--scl-color-black);
+
+  /* high contrast */
+  --color-high-contrast: var(--scl-color-white);
 }
 
 .toggle-button {
@@ -187,3 +190,9 @@
 .toggle-button--both {
   border-radius: var(--radius-primary);
 }
+
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
+  .toggle-button {
+    color: var( --color-high-contrast);
+  }
+}