update badge

atelier-saulx · Aug 2, 2024 · 08fca42 · 08fca42
1 parent 8da0ea2
commit 08fca42
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
@@ -16,14 +16,15 @@ export const Default = {
       }}
     >
       {['subtle', 'fill'].map((variant) =>
-        ['neutral', 'red', 'indigo', 'green', 'amber'].map((color) =>
-          [{}, { leadIcon: 'arrow-up' }, { trailIcon: 'arrow-up' }].map(
-            (icon) => (
-              <Badge color={`${color}-${variant}` as any} {...(icon as any)}>
-                Badge
-              </Badge>
+        ['neutral', 'red', 'indigo', 'green', 'amber', 'inverted', 'white'].map(
+          (color) =>
+            [{}, { leadIcon: 'arrow-up' }, { trailIcon: 'arrow-up' }].map(
+              (icon) => (
+                <Badge color={`${color}-${variant}` as any} {...(icon as any)}>
+                  Badge
+                </Badge>
+              ),
             ),
-          ),
         ),
       )}
     </div>

diff --git a/src/components/Badge/index.tsx b/src/components/Badge/index.tsx
@@ -17,6 +17,10 @@ type BadgeProps = {
     | 'green-fill'
     | 'amber-subtle'
     | 'amber-fill'
+    | 'white-subtle'
+    | 'white-fill'
+    | 'inverted-subtle'
+    | 'inverted-fill'
   leadIcon?: IconProps['variant']
   trailIcon?: IconProps['variant']
 }
@@ -65,7 +69,7 @@ function Badge({
           color: colors.white100,
         }),
         ...(color === 'neutral-subtle' && {
-          background: colors.neutral20,
+          background: colors.neutral20Adjusted,
           color: colors.neutral100,
         }),
         ...(color === 'red-subtle' && {
@@ -84,6 +88,22 @@ function Badge({
           background: colors.amber20,
           color: colors.amber100,
         }),
+        ...(color === 'inverted-subtle' && {
+          background: colors.neutralInverted20,
+          color: colors.neutralInverted100,
+        }),
+        ...(color === 'inverted-fill' && {
+          background: colors.neutralInverted100,
+          color: colors.neutral100,
+        }),
+        ...(color === 'white-subtle' && {
+          background: colors.white20,
+          color: colors.white100,
+        }),
+        ...(color === 'white-fill' && {
+          background: colors.white100,
+          color: colors.black100,
+        }),
       }}
     >
       {leadIcon && <Icon size="small" variant={leadIcon} />}