diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss index f25fec491b..d53d17bede 100644 --- a/packages/css/src/components/badge/badge.scss +++ b/packages/css/src/components/badge/badge.scss @@ -12,16 +12,16 @@ padding-inline: var(--ams-badge-padding-inline); } +.ams-badge--black { + background-color: var(--ams-badge-black-background-color); + color: var(--ams-badge-black-color); +} + .ams-badge--blue { background-color: var(--ams-badge-blue-background-color); color: var(--ams-badge-blue-color); } -.ams-badge--dark-blue { - background-color: var(--ams-badge-dark-blue-background-color); - color: var(--ams-badge-dark-blue-color); -} - .ams-badge--dark-green { background-color: var(--ams-badge-dark-green-background-color); color: var(--ams-badge-dark-green-color); @@ -32,6 +32,26 @@ color: var(--ams-badge-green-color); } +.ams-badge--grey-1 { + background-color: var(--ams-badge-grey-1-background-color); + color: var(--ams-badge-grey-1-color); +} + +.ams-badge--grey-2 { + background-color: var(--ams-badge-grey-2-background-color); + color: var(--ams-badge-grey-2-color); +} + +.ams-badge--grey-3 { + background-color: var(--ams-badge-grey-3-background-color); + color: var(--ams-badge-grey-3-color); +} + +.ams-badge--light-blue { + background-color: var(--ams-badge-light-blue-background-color); + color: var(--ams-badge-light-blue-color); +} + .ams-badge--magenta { background-color: var(--ams-badge-magenta-background-color); color: var(--ams-badge-magenta-color); @@ -47,6 +67,16 @@ color: var(--ams-badge-purple-color); } +.ams-badge--red { + background-color: var(--ams-badge-red-background-color); + color: var(--ams-badge-red-color); +} + +.ams-badge--white { + background-color: var(--ams-badge-white-background-color); + color: var(--ams-badge-white-color); +} + .ams-badge--yellow { background-color: var(--ams-badge-yellow-background-color); color: var(--ams-badge-yellow-color); diff --git a/packages/react/src/Badge/Badge.tsx b/packages/react/src/Badge/Badge.tsx index b17f6297ca..3ccd0cb457 100644 --- a/packages/react/src/Badge/Badge.tsx +++ b/packages/react/src/Badge/Badge.tsx @@ -8,13 +8,19 @@ import { forwardRef } from 'react' import type { ForwardedRef, HTMLAttributes } from 'react' export const badgeColors = [ + 'black', 'blue', - 'dark-blue', 'dark-green', 'green', + 'grey-1', + 'grey-2', + 'grey-3', + 'light-blue', 'magenta', 'orange', 'purple', + 'red', + 'white', 'yellow', ] as const diff --git a/proprietary/tokens/src/components/ams/badge.tokens.json b/proprietary/tokens/src/components/ams/badge.tokens.json index c3a0570ff7..7054f6036f 100644 --- a/proprietary/tokens/src/components/ams/badge.tokens.json +++ b/proprietary/tokens/src/components/ams/badge.tokens.json @@ -6,11 +6,11 @@ "font-weight": { "value": "{ams.text.font-weight.bold}" }, "line-height": { "value": "{ams.text.level.5.line-height}" }, "padding-inline": { "value": "{ams.space.inside.xs}" }, - "blue": { - "background-color": { "value": "{ams.color.blue}" }, - "color": { "value": "{ams.color.primary-black}" } + "black": { + "background-color": { "value": "{ams.color.primary-black}" }, + "color": { "value": "{ams.color.primary-white}" } }, - "dark-blue": { + "blue": { "background-color": { "value": "{ams.color.primary-blue}" }, "color": { "value": "{ams.color.primary-white}" } }, @@ -22,6 +22,22 @@ "background-color": { "value": "{ams.color.green}" }, "color": { "value": "{ams.color.primary-black}" } }, + "grey-1": { + "background-color": { "value": "{ams.color.neutral-grey1}" }, + "color": { "value": "{ams.color.primary-black}" } + }, + "grey-2": { + "background-color": { "value": "{ams.color.neutral-grey2}" }, + "color": { "value": "{ams.color.primary-black}" } + }, + "grey-3": { + "background-color": { "value": "{ams.color.neutral-grey3}" }, + "color": { "value": "{ams.color.primary-white}" } + }, + "light-blue": { + "background-color": { "value": "{ams.color.blue}" }, + "color": { "value": "{ams.color.primary-black}" } + }, "magenta": { "background-color": { "value": "{ams.color.magenta}" }, "color": { "value": "{ams.color.primary-white}" } @@ -34,6 +50,14 @@ "background-color": { "value": "{ams.color.purple}" }, "color": { "value": "{ams.color.primary-white}" } }, + "red": { + "background-color": { "value": "{ams.color.primary-red}" }, + "color": { "value": "{ams.color.primary-white}" } + }, + "white": { + "background-color": { "value": "{ams.color.primary-white}" }, + "color": { "value": "{ams.color.primary-black}" } + }, "yellow": { "background-color": { "value": "{ams.color.yellow}" }, "color": { "value": "{ams.color.primary-black}" }