feat!: Allow additional background colours for Badge and remove dark …

…blue option (#1236) Co-authored-by: Vincent Smedinga <[email protected]>
Amsterdam · May 24, 2024 · eec669a · eec669a
1 parent 7b98773
commit eec669a
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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}" }