From 52f0f7620591dfa5134f7358338b4a4379298d26 Mon Sep 17 00:00:00 2001
From: Michael Taranto <michael.taranto@gmail.com>
Date: Mon, 29 Jul 2024 11:10:11 +1000
Subject: [PATCH 1/2] Badge: Ensure label follows correct tone

---
 .changeset/perfect-rockets-tan.md             | 13 +++++
 .../src/lib/components/Badge/Badge.tsx        | 55 ++++++++++---------
 2 files changed, 43 insertions(+), 25 deletions(-)
 create mode 100644 .changeset/perfect-rockets-tan.md

diff --git a/.changeset/perfect-rockets-tan.md b/.changeset/perfect-rockets-tan.md
new file mode 100644
index 00000000000..6519335a2be
--- /dev/null
+++ b/.changeset/perfect-rockets-tan.md
@@ -0,0 +1,13 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - Badge
+---
+
+**Badge:** Ensure label follows correct tone
+
+Ensure that the foreground text of a `Badge` always follows the correct tone for the background colour.
+Fixes a bug where using a `Badge` in a `List` that overrides the default tone would result in the `Badge` text following the `List` tone instead of the `Badge` tone.
diff --git a/packages/braid-design-system/src/lib/components/Badge/Badge.tsx b/packages/braid-design-system/src/lib/components/Badge/Badge.tsx
index 2e748832c90..16c6f00d761 100644
--- a/packages/braid-design-system/src/lib/components/Badge/Badge.tsx
+++ b/packages/braid-design-system/src/lib/components/Badge/Badge.tsx
@@ -6,6 +6,7 @@ import buildDataAttributes, {
   type DataAttributeMap,
 } from '../private/buildDataAttributes';
 import { Bleed } from '../Bleed/Bleed';
+import { DefaultTextPropsProvider } from '../private/defaultTextProps';
 
 type ValueOrArray<T> = T | T[];
 
@@ -83,35 +84,39 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
     );
 
     const content = (
-      <Box
-        component="span"
-        display="flex"
-        cursor="default"
-        {...buildDataAttributes({ data, validateRestProps: restProps })}
-      >
+      // Ensures the foreground text tone follows the default
+      // for the selected background colour
+      <DefaultTextPropsProvider tone="neutral">
         <Box
           component="span"
-          id={id}
-          ref={ref}
-          tabIndex={tabIndex}
-          aria-describedby={ariaDescribedBy}
-          title={
-            title ??
-            (!ariaDescribedBy ? stringifyChildren(children) : undefined)
-          }
-          background={
-            weight === 'strong' ? tone : lightModeBackgroundForTone[tone]
-          }
-          paddingY={verticalPadding}
-          paddingX="xsmall"
-          borderRadius="standard"
-          overflow="hidden"
+          display="flex"
+          cursor="default"
+          {...buildDataAttributes({ data, validateRestProps: restProps })}
         >
-          <Text size="xsmall" weight="medium" maxLines={1}>
-            {children}
-          </Text>
+          <Box
+            component="span"
+            id={id}
+            ref={ref}
+            tabIndex={tabIndex}
+            aria-describedby={ariaDescribedBy}
+            title={
+              title ??
+              (!ariaDescribedBy ? stringifyChildren(children) : undefined)
+            }
+            background={
+              weight === 'strong' ? tone : lightModeBackgroundForTone[tone]
+            }
+            paddingY={verticalPadding}
+            paddingX="xsmall"
+            borderRadius="standard"
+            overflow="hidden"
+          >
+            <Text size="xsmall" weight="medium" maxLines={1}>
+              {children}
+            </Text>
+          </Box>
         </Box>
-      </Box>
+      </DefaultTextPropsProvider>
     );
 
     return bleedY ? (

From 1dd6a509a24089f75f821e5ba67698865c3e2e42 Mon Sep 17 00:00:00 2001
From: Michael Taranto <michael.taranto@gmail.com>
Date: Mon, 29 Jul 2024 11:36:25 +1000
Subject: [PATCH 2/2] Add screenshot test

---
 .../src/lib/components/Badge/Badge.screenshots.tsx  | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/braid-design-system/src/lib/components/Badge/Badge.screenshots.tsx b/packages/braid-design-system/src/lib/components/Badge/Badge.screenshots.tsx
index c65d33463da..f981a53f344 100644
--- a/packages/braid-design-system/src/lib/components/Badge/Badge.screenshots.tsx
+++ b/packages/braid-design-system/src/lib/components/Badge/Badge.screenshots.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ComponentScreenshot } from 'site/types';
-import { Badge, Inline, Heading } from '../';
+import { Badge, Inline, Heading, List } from '../';
 
 export const screenshots: ComponentScreenshot = {
   screenshotWidths: [320],
@@ -108,5 +108,16 @@ export const screenshots: ComponentScreenshot = {
         </Badge>
       ),
     },
+    {
+      label: 'Test: Badge text should follow tone not default set by `List`',
+      Example: () => (
+        <List tone="secondary">
+          <Badge tone="critical">Critical</Badge>
+          <Badge tone="critical" weight="strong">
+            Critical
+          </Badge>
+        </List>
+      ),
+    },
   ],
 };