checkbox and switch css fixes for high contrast mode (#2317)

fix: checkbox and switch CSS fixes for high contrast mode
telekom · Aug 29, 2024 · 318df56 · 318df56
1 parent 0b21978
commit 318df56
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 1 deletion.
diff --git a/packages/components/src/components/checkbox/checkbox.css b/packages/components/src/components/checkbox/checkbox.css
@@ -147,6 +147,13 @@ scale-checkbox.indeterminate [part='checkbox'] {
   border: none;
   color: var(--color-icon-checked-active);
 }
+
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
+  scale-checkbox.indeterminate [part='checkbox'] {
+    border: 1px solid;
+  }
+}
+
 scale-checkbox.indeterminate [part='icon'] {
   color: var(--color-icon-checked-active);
 }
@@ -256,6 +263,12 @@ scale-checkbox.error [part='checkbox'] {
   border: none;
 }
 
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
+  scale-checkbox.error [part='checkbox'] {
+    border: 1px solid;
+  }
+}
+
 scale-checkbox.error
   [part='input']:focus
   ~ [part='container']

diff --git a/packages/components/src/components/switch/switch.css b/packages/components/src/components/switch/switch.css
@@ -307,7 +307,7 @@ scale-switch scale-icon-action-success {
   .switch__toggle {
     border: 1px solid;
   }
-  scale-icon-action-checkmark {
+  scale-switch scale-icon-action-checkmark {
     visibility: hidden !important;
   }
 }
diff --git a/packages/components/src/html/checkbox.html b/packages/components/src/html/checkbox.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+
+    <script type="module" src="/build/scale-components.esm.js"></script>
+    <link rel="stylesheet" href="/build/scale-components.css" />
+    <style type="text/css" media="screen, print">
+      html {
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        margin: 0;
+        padding: 4rem;
+      }
+    </style>
+  </head>
+
+  <body>
+    <p>
+      <scale-checkbox
+        checked
+        disabled
+        label="Selected Disabled"
+      ></scale-checkbox>
+    </p>
+    <p>
+      <scale-checkbox indeterminate label="Indeterminate"></scale-checkbox>
+    </p>
+    <p>
+      <scale-checkbox
+        label="Standard with error"
+        helper-text="This is the error message"
+        invalid
+      ></scale-checkbox>
+    </p>
+    <p>
+      <scale-switch
+        label="My styles were affecting checkbox styles"
+      ></scale-switch>
+    </p>
+  </body>
+</html>