diff --git a/.changeset/ghost-badge-contrast.md b/.changeset/ghost-badge-contrast.md
new file mode 100644
index 0000000000..3147bdd5ba
--- /dev/null
+++ b/.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.
diff --git a/packages/fuselage/src/components/Badge/Badge.spec.tsx b/packages/fuselage/src/components/Badge/Badge.spec.tsx
index 26901e195a..cf81c7b148 100644
--- a/packages/fuselage/src/components/Badge/Badge.spec.tsx
+++ b/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();
});
+ it('Ghost', () => {
+ render();
+ });
it('Disabled', () => {
render();
});
diff --git a/packages/fuselage/src/components/Badge/Badge.stories.tsx b/packages/fuselage/src/components/Badge/Badge.stories.tsx
index 0a86710fd0..565b3343e8 100644
--- a/packages/fuselage/src/components/Badge/Badge.stories.tsx
+++ b/packages/fuselage/src/components/Badge/Badge.stories.tsx
@@ -87,6 +87,12 @@ export const Warning: Story = {
},
};
+export const Ghost: Story = {
+ args: {
+ variant: 'ghost',
+ },
+};
+
export const Disabled: Story = {
args: {
disabled: true,
@@ -94,10 +100,33 @@ export const Disabled: Story = {
};
export const WithValue: Story = {
- args: {
- children: '99',
- variant: 'primary',
- },
+ render: () => (
+
+ {(
+ [
+ ['secondary', 99],
+ ['primary', 99],
+ ['danger', 99],
+ ['warning', 99],
+ ['ghost', 99],
+ ['disabled', 99],
+ ] as const
+ ).map(([label, badge]) => (
+
+ {badge}
+
+ {label}
+
+
+ ))}
+
+ ),
};
export const Small: Story = {
diff --git a/packages/fuselage/src/components/Badge/Badge.styles.scss b/packages/fuselage/src/components/Badge/Badge.styles.scss
index 6a4fd9cd2a..ed84d15496 100644
--- a/packages/fuselage/src/components/Badge/Badge.styles.scss
+++ b/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(
diff --git a/packages/fuselage/test/snapshots/data-display-badge--ghost-desktop.png b/packages/fuselage/test/snapshots/data-display-badge--ghost-desktop.png
new file mode 100644
index 0000000000..72bb3c7786
Binary files /dev/null and b/packages/fuselage/test/snapshots/data-display-badge--ghost-desktop.png differ
diff --git a/packages/fuselage/test/snapshots/data-display-badge--with-value-desktop.png b/packages/fuselage/test/snapshots/data-display-badge--with-value-desktop.png
index b9d37f6fec..52342b4721 100644
Binary files a/packages/fuselage/test/snapshots/data-display-badge--with-value-desktop.png and b/packages/fuselage/test/snapshots/data-display-badge--with-value-desktop.png differ