fix: badge to allow possible values for background and text color

.changeset/mean-cycles-nail.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': patch
+---
+
+fix: badge to allow possible values for background and text color

docs/stories/Badge.mdx

@@ -37,11 +37,9 @@ Badges can be displayed as active:
 
 <Canvas of={BadgeStories.Active} />
 
-## Size
+## Small Size
 
-Badges can be displayed in two sizes: S and M:
-
-<Canvas of={BadgeStories.Size} />
+<Canvas of={BadgeStories.SizeSmall} />
 
 ## Props
 

docs/stories/Badge.stories.tsx

@@ -4,50 +4,39 @@ import { Badge, Flex } from '@strapi/design-system';
 const meta: Meta<typeof Badge> = {
   title: 'Design System/Components/Badge',
   component: Badge,
+  args: {
+    textColor: 'neutral600',
+    backgroundColor: 'neutral150',
+  },
+  render: (args) => (
+    <Flex direction="column" alignItems="center" gap={2}>
+      <Flex gap={1}>
+        <Badge {...args}>Badge</Badge>
+      </Flex>
+    </Flex>
+  ),
 };
 
 export default meta;
 
 type Story = StoryObj<typeof Badge>;
 
 export const Base = {
-  render: () => (
-    <Flex direction="column" alignItems="center" gap={2}>
-      <Flex gap={1}>
-        <Badge>Badge</Badge>
-      </Flex>
-    </Flex>
-  ),
-
   name: 'base',
 } satisfies Story;
 
 export const Active = {
-  render: () => (
-    <Flex direction="column" alignItems="center" gap={2}>
-      <Flex gap={1}>
-        <Badge size="S" active>
-          Small Badge
-        </Badge>
-        <Badge size="M" active>
-          Medium Badge
-        </Badge>
-      </Flex>
-    </Flex>
-  ),
+  args: {
+    active: true,
+  },
 
   name: 'active',
 } satisfies Story;
 
-export const Size = {
-  render: () => (
-    <Flex direction="column" alignItems="center" gap={2}>
-      <Flex gap={1}>
-        <Badge size="S">Small Badge</Badge>
-        <Badge size="M">Medium Badge</Badge>
-      </Flex>
-    </Flex>
-  ),
+export const SizeSmall = {
+  args: {
+    size: 'S',
+  },
 
-  name: 'size',
+  name: 'small size',
 } satisfies Story;

packages/design-system/src/components/Badge/Badge.tsx

@@ -1,7 +1,8 @@
-import { css, styled, type DefaultTheme } from 'styled-components';
+import { css, styled } from 'styled-components';
 
 import { Flex, FlexComponent, FlexProps } from '../../primitives/Flex';
 import { Typography } from '../../primitives/Typography';
+import { DefaultThemeOrCSSProp } from '../../types';
 
 type BadgeSize = 'S' | 'M';
 
@@ -10,12 +11,12 @@ interface BadgeProps extends FlexProps {
    * If `true`, it changes the `backgroundColor` to `primary200` and the `textColor` to `primary600`
    */
   active?: boolean;
-  backgroundColor?: keyof DefaultTheme['colors'];
+  backgroundColor?: DefaultThemeOrCSSProp<'colors', 'background'>;
   /**
    * @default 'M'
    */
   size?: BadgeSize;
-  textColor?: keyof DefaultTheme['colors'];
+  textColor?: DefaultThemeOrCSSProp<'colors', 'color'>;
 }
 
 const Badge = ({