Fixes low contrast in dark mode (#28766)

* Fixes contrast on web component badge * Adds change
microsoft · May 2, 2024 · 1356d9a · 1356d9a
1 parent 55c8ff3
commit 1356d9a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/change/@fluentui-web-components-96aa46da-3632-4061-a3c0-b9d1f63d93e1.json b/change/@fluentui-web-components-96aa46da-3632-4061-a3c0-b9d1f63d93e1.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fixes low contrast in dark mode for web component badge",
+  "packageName": "@fluentui/web-components",
+  "email": "ryan@ryanmerrill.net",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/styles/partials/badge.partials.ts b/packages/web-components/src/styles/partials/badge.partials.ts
@@ -11,6 +11,7 @@ import {
   colorNeutralBackground4,
   colorNeutralBackground5,
   colorNeutralForeground1,
+  colorNeutralForeground1Static,
   colorNeutralForeground3,
   colorNeutralForegroundInverted,
   colorNeutralForegroundOnBrand,
@@ -188,7 +189,7 @@ export const badgeFilledStyles = css.partial`
 
   :host([color='warning']) {
     background-color: ${colorPaletteYellowBackground3};
-    color: ${colorNeutralForeground1};
+    color: ${colorNeutralForeground1Static};
   }
 `;
 
@@ -198,7 +199,7 @@ export const badgeFilledStyles = css.partial`
  */
 export const badgeGhostStyles = css.partial`
   :host([appearance='ghost']) {
-    color: ${colorBrandBackground};
+    color: ${colorBrandForeground1};
     background-color: initial;
   }