[LG-5684] fix(rich-links): update colors for RichLinkBadge component (#3283)

stephl3 · web-flow · commit 50080871850c · 2025-11-06T23:33:37.000Z
* refactor(rich-links): refactor darkmode propagation and update some colors

* test(rich-links): enable darkmode in rich-links stories

* chore: changesets
diff --git a/.changeset/kind-goats-pump.md b/.changeset/kind-goats-pump.md
@@ -0,0 +1,6 @@
+---
+'@lg-chat/rich-links': patch
+'@lg-chat/message': patch
+---
+
+[LG-5684](https://jira.mongodb.org/browse/LG-5684): update colors used for `RichLinkBadge` component which is used in `Message.Links`
diff --git a/chat/rich-links/src/RichLink/RichLink.stories.tsx b/chat/rich-links/src/RichLink/RichLink.stories.tsx
@@ -1,11 +1,26 @@
 import React from 'react';
+import { storybookArgTypes } from '@lg-tools/storybook-utils';
 import { StoryFn } from '@storybook/react';
 
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+
 import { RichLink } from '.';
 
 export default {
   title: 'Composition/Chat/RichLink',
   component: RichLink,
+  argTypes: {
+    darkMode: storybookArgTypes.darkMode,
+  },
+  decorators: [
+    (Story: StoryFn, context) => {
+      return (
+        <LeafyGreenProvider darkMode={context?.args.darkMode}>
+          <Story />
+        </LeafyGreenProvider>
+      );
+    },
+  ],
 };
 
 const Template: StoryFn<typeof RichLink> = props => (
diff --git a/chat/rich-links/src/RichLink/RichLink.tsx b/chat/rich-links/src/RichLink/RichLink.tsx
@@ -2,7 +2,9 @@ import React, { forwardRef } from 'react';
 
 import { Card } from '@leafygreen-ui/card';
 import { cx } from '@leafygreen-ui/emotion';
-import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import LeafyGreenProvider, {
+  useDarkMode,
+} from '@leafygreen-ui/leafygreen-provider';
 import { PolymorphicAs } from '@leafygreen-ui/polymorphic';
 import { Body } from '@leafygreen-ui/typography';
 
@@ -52,25 +54,25 @@ export const RichLink = forwardRef<HTMLAnchorElement, RichLinkProps>(
       : {};
 
     return (
-      <Card
-        darkMode={darkMode}
-        className={cx(baseStyles, themeStyles[theme])}
-        title={children}
-        {...conditionalProps}
-        onClick={() => onLinkClick?.(props)}
-      >
-        <Body as="span" className={richLinkTextClassName} darkMode={darkMode}>
-          {children}
-        </Body>
-        {showBadge ? (
-          <RichLinkBadge
-            darkMode={darkMode}
-            color={badgeColor}
-            label={badgeLabel}
-            glyph={badgeGlyph}
-          />
-        ) : null}
-      </Card>
+      <LeafyGreenProvider darkMode={darkMode}>
+        <Card
+          className={cx(baseStyles, themeStyles[theme])}
+          title={children}
+          {...conditionalProps}
+          onClick={() => onLinkClick?.(props)}
+        >
+          <Body as="span" className={richLinkTextClassName}>
+            {children}
+          </Body>
+          {showBadge ? (
+            <RichLinkBadge
+              color={badgeColor}
+              label={badgeLabel}
+              glyph={badgeGlyph}
+            />
+          ) : null}
+        </Card>
+      </LeafyGreenProvider>
     );
   },
 );
diff --git a/chat/rich-links/src/RichLink/RichLinkBadge/RichLinkBadge.styles.ts b/chat/rich-links/src/RichLink/RichLinkBadge/RichLinkBadge.styles.ts
@@ -22,12 +22,12 @@ export const badgeVariants: Record<
 > = {
   [Theme.Dark]: {
     [RichLinkBadgeColors.Gray]: css`
-      background-color: ${palette.gray.dark1};
+      background-color: ${palette.gray.dark2};
       & svg {
-        color: ${palette.gray.light3};
+        color: ${palette.gray.light1};
       }
       & p {
-        color: ${palette.gray.light3};
+        color: ${palette.gray.light2};
       }
     `,
     [RichLinkBadgeColors.Blue]: css`
@@ -92,7 +92,7 @@ export const badgeVariants: Record<
         color: ${palette.blue.dark2};
       }
       & p {
-        color: ${palette.blue.dark1};
+        color: ${palette.blue.dark3};
       }
     `,
     [RichLinkBadgeColors.Green]: css`

Original file line number	Diff line number	Diff line change
`@@ -22,12 +22,12 @@ export const badgeVariants: Record<`
`22`	`22`	`> = {`
`23`	`23`	`[Theme.Dark]: {`
`24`	`24`	[RichLinkBadgeColors.Gray]: css`
`25`		`- background-color: ${palette.gray.dark1};`
	`25`	`+ background-color: ${palette.gray.dark2};`
`26`	`26`	`& svg {`
`27`		`- color: ${palette.gray.light3};`
	`27`	`+ color: ${palette.gray.light1};`
`28`	`28`	`}`
`29`	`29`	`& p {`
`30`		`- color: ${palette.gray.light3};`
	`30`	`+ color: ${palette.gray.light2};`
`31`	`31`	`}`
`32`	`32`	`,
`33`	`33`	[RichLinkBadgeColors.Blue]: css`
`@@ -92,7 +92,7 @@ export const badgeVariants: Record<`
`92`	`92`	`color: ${palette.blue.dark2};`
`93`	`93`	`}`
`94`	`94`	`& p {`
`95`		`- color: ${palette.blue.dark1};`
	`95`	`+ color: ${palette.blue.dark3};`
`96`	`96`	`}`
`97`	`97`	`,
`98`	`98`	[RichLinkBadgeColors.Green]: css`