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