[web-components] fix: disabled switch state in high-contrast mode (#3…

…3637)
microsoft · Jan 14, 2025 · 1e110d6 · 1e110d6
1 parent e7e2987
commit 1e110d6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/change/@fluentui-web-components-a03312db-25ed-42ac-8259-b9754b5afdd9.json b/change/@fluentui-web-components-a03312db-25ed-42ac-8259-b9754b5afdd9.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: update disabled switch styles to GrayText for high-contrast mode",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts
@@ -141,5 +141,9 @@ export const styles = css`
     :host(${checkedState}:active) .checked-indicator {
       background-color: ButtonFace;
     }
+    :host(:disabled) .checked-indicator,
+    :host(${checkedState}:disabled) .checked-indicator {
+      background-color: GrayText;
+    }
   `),
 );