From 08fca426b3755c7ec378b4dc5a08626bcc82c3dc Mon Sep 17 00:00:00 2001
From: Vass Bence <49574140+vassbence@users.noreply.github.com>
Date: Fri, 2 Aug 2024 11:18:15 +0200
Subject: [PATCH] update badge

---
 src/components/Badge/Badge.stories.tsx | 15 ++++++++-------
 src/components/Badge/index.tsx         | 22 +++++++++++++++++++++-
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
index 1af560e..6107834 100644
--- 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
index ebf1026..c9ae731 100644
--- 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} />}