diff --git a/packages/react/src/components/Tag/Tag.module.css b/packages/react/src/components/Tag/Tag.module.css index dbe41bd8be..323ab48f5c 100644 --- a/packages/react/src/components/Tag/Tag.module.css +++ b/packages/react/src/components/Tag/Tag.module.css @@ -64,19 +64,19 @@ --fdsc-tag-text: var(--fds-semantic-text-danger-on_danger_subtle); } -.outlined.primary { +.outlined.first { --fdsc-tag-border: var(--fds-semantic-surface-first-dark); --fdsc-tag-background: var(--fds-semantic-surface-first-light); --fdsc-tag-text: var(--fds-semantic-text-neutral-default); } -.outlined.secondary { +.outlined.second { --fdsc-tag-border: var(--fds-semantic-surface-second-dark); --fdsc-tag-background: var(--fds-semantic-surface-second-light); --fdsc-tag-text: var(--fds-semantic-text-neutral-default); } -.outlined.tertiary { +.outlined.third { --fdsc-tag-border: var(--fds-semantic-surface-third-dark); --fdsc-tag-background: var(--fds-semantic-surface-third-light); --fdsc-tag-text: var(--fds-semantic-text-neutral-default); @@ -112,19 +112,19 @@ --fdsc-tag-text: var(--fds-semantic-text-danger-on_danger); } -.filled.primary { +.filled.first { --fdsc-tag-border: var(--fds-semantic-surface-first-dark); --fdsc-tag-background: var(--fds-semantic-surface-first-dark); --fdsc-tag-text: var(--fds-semantic-text-neutral-on_inverted); } -.filled.secondary { +.filled.second { --fdsc-tag-border: var(--fds-semantic-surface-second-dark); --fdsc-tag-background: var(--fds-semantic-surface-second-dark); --fdsc-tag-text: var(--fds-semantic-text-neutral-on_inverted); } -.filled.tertiary { +.filled.third { --fdsc-tag-border: var(--fds-semantic-surface-third-dark); --fdsc-tag-background: var(--fds-semantic-surface-third-dark); --fdsc-tag-text: var(--fds-semantic-text-neutral-on_inverted); diff --git a/packages/react/src/components/Tag/Tag.stories.tsx b/packages/react/src/components/Tag/Tag.stories.tsx index 45b509019d..ceefc449de 100644 --- a/packages/react/src/components/Tag/Tag.stories.tsx +++ b/packages/react/src/components/Tag/Tag.stories.tsx @@ -69,9 +69,9 @@ const colors: TagProps['color'][] = [ 'warning', 'danger', 'info', - 'primary', - 'secondary', - 'tertiary', + 'first', + 'second', + 'third', ]; export const Colors: StoryFn = ({ ...rest }): JSX.Element => { diff --git a/packages/react/src/components/Tag/Tag.test.tsx b/packages/react/src/components/Tag/Tag.test.tsx index 1006a90ce8..202c0d1002 100644 --- a/packages/react/src/components/Tag/Tag.test.tsx +++ b/packages/react/src/components/Tag/Tag.test.tsx @@ -37,9 +37,9 @@ describe('Tag', () => { expect(screen.getByText('Beta')).toHaveClass('outlined'); }); - test('should render color primary', (): void => { - render(Beta); - expect(screen.getByText('Beta')).toHaveClass('primary'); + test('should render color first', (): void => { + render(Beta); + expect(screen.getByText('Beta')).toHaveClass('first'); }); test('should have custom className', () => { diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx index 28aef87160..c9ece3ac01 100644 --- a/packages/react/src/components/Tag/Tag.tsx +++ b/packages/react/src/components/Tag/Tag.tsx @@ -7,7 +7,7 @@ import { Paragraph } from '../Typography'; import classes from './Tag.module.css'; -type BrandColor = 'primary' | 'secondary' | 'tertiary'; +type BrandColor = 'first' | 'second' | 'third'; type VariantColor = 'neutral' | 'success' | 'warning' | 'danger' | 'info'; type Size = Exclude;