From 1356d9a22a550c309931efbfcd9972fb99874669 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryanmerrill@microsoft.com>
Date: Mon, 7 Aug 2023 17:30:15 -0400
Subject: [PATCH] Fixes low contrast in dark mode (#28766)

* Fixes contrast on web component badge

* Adds change
---
 ...eb-components-96aa46da-3632-4061-a3c0-b9d1f63d93e1.json | 7 +++++++
 .../web-components/src/styles/partials/badge.partials.ts   | 5 +++--
 2 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 change/@fluentui-web-components-96aa46da-3632-4061-a3c0-b9d1f63d93e1.json

diff --git a/change/@fluentui-web-components-96aa46da-3632-4061-a3c0-b9d1f63d93e1.json b/change/@fluentui-web-components-96aa46da-3632-4061-a3c0-b9d1f63d93e1.json
new file mode 100644
index 00000000000000..0d2cd3011766cd
--- /dev/null
+++ 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
index 8eb4c7be7cde10..8ef33701f87784 100644
--- 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;
   }