Fixes low contrast in dark mode (#28766)

* Fixes contrast on web component badge * Adds change
microsoft · May 10, 2024 · 6164d02 · 6164d02
1 parent e2da8cd
commit 6164d02
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;
  }