fix(fuselage): improve ghost badge contrast

.changeset/ghost-badge-contrast.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/fuselage': patch
+---
+
+Fixed the contrast of the `ghost` badge variant. It used `pure-white` text over `stroke-dark`, which made it identical to the `secondary` variant in the light theme and unreadable (~2.5:1) in the dark theme. It now uses `font-titles-labels` over `badge-background-level-0`, meeting WCAG AA in all themes.

packages/fuselage/src/components/Badge/Badge.spec.tsx

@@ -6,7 +6,7 @@ import { render } from '../../testing';
 import Badge from './Badge';
 import * as stories from './Badge.stories';
 
-const { Default, Primary, Secondary, Danger, Warning, Disabled } =
+const { Default, Primary, Secondary, Danger, Warning, Ghost, Disabled } =
   composeStories(stories);
 
 describe('[Badge Component]', () => {
@@ -26,6 +26,9 @@ describe('[Badge Component]', () => {
     it('Warning', () => {
       render(<Warning />);
     });
+    it('Ghost', () => {
+      render(<Ghost />);
+    });
     it('Disabled', () => {
       render(<Disabled />);
     });

packages/fuselage/src/components/Badge/Badge.stories.tsx

@@ -87,17 +87,46 @@ export const Warning: Story = {
   },
 };
 
+export const Ghost: Story = {
+  args: {
+    variant: 'ghost',
+  },
+};
+
 export const Disabled: Story = {
   args: {
     disabled: true,
   },
 };
 
 export const WithValue: Story = {
-  args: {
-    children: '99',
-    variant: 'primary',
-  },
+  render: () => (
+    <Box display='inline-flex' alignItems='flex-start' gap='x16'>
+      {(
+        [
+          ['secondary', <Badge variant='secondary'>99</Badge>],
+          ['primary', <Badge variant='primary'>99</Badge>],
+          ['danger', <Badge variant='danger'>99</Badge>],
+          ['warning', <Badge variant='warning'>99</Badge>],
+          ['ghost', <Badge variant='ghost'>99</Badge>],
+          ['disabled', <Badge disabled>99</Badge>],
+        ] as const
+      ).map(([label, badge]) => (
+        <Box
+          key={label}
+          display='flex'
+          flexDirection='column'
+          alignItems='center'
+          gap='x4'
+        >
+          {badge}
+          <Box fontScale='c1' color='hint'>
+            {label}
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  ),
 };
 
 export const Small: Story = {

packages/fuselage/src/components/Badge/Badge.styles.scss

@@ -41,11 +41,11 @@ $badge-colors-danger-background-color: theme(
 
 $badge-colors-ghost-color: theme(
   'badge-colors-ghost-color',
-  colors.font(pure-white)
+  colors.font(titles-labels)
 );
 $badge-colors-ghost-background-color: theme(
   'badge-colors-ghost-background-color',
-  colors.stroke(dark)
+  colors.badge(level-0)
 );
 
 $badge-colors-disabled-color: theme(