@wallarm-org/claude-design 0.0.0-stage → 4.8.0

package/dist/project/components/Badge/README.md

@@ -0,0 +1,853 @@
+The status chip the rest of the family is built from — reach for the dedicated component when one exists (`HttpMethod`, `ResponseCode`, `Ip`, `Country`) rather than rebuilding it here, and for `Tag` when the chip is interactive. Colour carries the meaning, so choose it from what the value is rather than from what looks right on the page.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `color` | `string \| undefined` | no | `slate` |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `type` | `"solid" \| "secondary" \| "outline" \| "text" \| "text-color"` | no | `solid` |  |
+| `size` | `"small" \| "medium" \| "large"` | no | `medium` |  |
+| `muted` | `boolean` | no | `false` |  |
+| `variant` | `"default" \| "dotted"` | no | `default` |  |
+| `is-icon-only` | `boolean` | no | — |  |
+| `text-variant` | `"default" \| "code"` | no | `default` |  |
+| `is-clickable` | `boolean` | no | — |  |
+| `as-child` | `boolean \| undefined` | no | `false` |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Stories
+
+### Basic
+
+The default chip. Keep the text to a word or two — a badge is read at a glance, in a table
+cell, alongside dozens of others.
+
+Source: Badge/Badge.stories.tsx#Basic
+
+### Dotted
+
+A leading dot in the current colour, for a status that reads faster as a mark than as a fill.
+
+Source: Badge/Badge.stories.tsx#Dotted
+
+### Sizes
+
+Two heights. `medium` exists for dense rows; anything smaller stops being legible at a
+glance, which is the only thing a badge is for.
+
+Source: Badge/Badge.stories.tsx#Sizes
+
+### Types
+
+The emphasis ladder from `solid` down to `text`. Drop the emphasis when badges are everywhere
+— a table of solid chips is a table nobody can scan.
+
+Source: Badge/Badge.stories.tsx#Types
+
+### TextVariants
+
+`text` and `text-color`, the two flattest types. They suit a value that must be read but
+should not compete with the row it sits in.
+
+Source: Badge/Badge.stories.tsx#TextVariants
+
+### WithIconsLeft
+
+An icon before the label, which is how a status reads without relying on colour alone.
+
+Source: Badge/Badge.stories.tsx#WithIconsLeft
+
+### WithIconsRight
+
+An icon after the label, for a mark about the value rather than the value's own state.
+
+Source: Badge/Badge.stories.tsx#WithIconsRight
+
+### IconsOnly
+
+No label at all. Only safe where the icon's meaning is already established elsewhere on the
+page, since nothing here names it.
+
+Source: Badge/Badge.stories.tsx#IconsOnly
+
+### MutedVariants
+
+`muted` drops the saturation for a status that is true but not worth attention — the case for
+everything that is merely fine.
+
+Source: Badge/Badge.stories.tsx#MutedVariants
+
+### MutedOutline
+
+A quieter outline keeps its neutral label and border inside a coloured message.
+
+Source: Badge/Badge.stories.tsx#MutedOutline
+
+### ColorVariants
+
+The full palette. Every colour already means something in the system, so borrowing one for
+decoration teaches the reader the wrong thing.
+
+Source: Badge/Badge.stories.tsx#ColorVariants
+
+### ContentVariants
+
+What happens as the content grows. A badge does not truncate, so long text widens the row
+rather than being cut.
+
+Source: Badge/Badge.stories.tsx#ContentVariants
+
+## Story sources
+
+### Badge/Badge.stories.tsx
+
+```tsx
+import { Fragment } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Check, CircleCheck, Info, PenTool, X } from '../../icons';
+import { HStack } from '../Stack';
+import { Badge } from './Badge';
+import { BadgeColorEnum, BadgeTypeEnum } from './constants';
+import { badgeColorsMuted } from './generateBadgeVariants';
+import type { BadgeColor, BadgeType } from './types';
+
+const isMutedSupported = (type: BadgeType, color: BadgeColor): boolean =>
+  type === 'solid' || (type === 'outline' && color === 'slate');
+
+const capitalize = (value: string): string => value.charAt(0).toUpperCase() + value.slice(1);
+
+const DESCRIPTION = [
+  'The status chip the rest of the family is built from — reach for the dedicated component when one exists (`HttpMethod`, `ResponseCode`, `Ip`, `Country`) rather than rebuilding it here, and for `Tag` when the chip is interactive.',
+  'Colour carries the meaning, so choose it from what the value is rather than from what looks right on the page.',
+].join(' ');
+
+const meta = {
+  title: 'Status Indication/Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['medium', 'large'],
+    },
+    type: {
+      control: 'select',
+      options: Object.values(BadgeTypeEnum),
+    },
+    color: {
+      control: 'select',
+      options: Object.values(BadgeColorEnum),
+    },
+    textVariant: {
+      control: 'select',
+      options: ['default', 'code'],
+    },
+    muted: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+
+/**
+ * The default chip. Keep the text to a word or two — a badge is read at a glance, in a table
+ * cell, alongside dozens of others.
+ */
+export const Basic: StoryFn<typeof meta> = ({ ...args }) => <Badge {...args}>Badge</Badge>;
+
+/**
+ * A leading dot in the current colour, for a status that reads faster as a mark than as a fill.
+ */
+export const Dotted: StoryFn<typeof meta> = ({ ...args }) => (
+  <Badge {...args} variant='dotted'>
+    Badge
+  </Badge>
+);
+
+/**
+ * Two heights. `medium` exists for dense rows; anything smaller stops being legible at a
+ * glance, which is the only thing a badge is for.
+ */
+export const Sizes: StoryFn<typeof meta> = ({ ...args }) => (
+  <HStack align='center' gap={8}>
+    <Badge {...args} size='small'>
+      Small
+    </Badge>
+    <Badge {...args} size='medium'>
+      Medium
+    </Badge>
+    <Badge {...args} size='large'>
+      Large
+    </Badge>
+  </HStack>
+);
+
+/**
+ * The emphasis ladder from `solid` down to `text`. Drop the emphasis when badges are everywhere
+ * — a table of solid chips is a table nobody can scan.
+ */
+export const Types: StoryFn<typeof meta> = ({ ...args }) => (
+  <HStack gap={8}>
+    <Badge {...args} type='solid'>
+      Solid
+    </Badge>
+    <Badge {...args} type='secondary'>
+      Secondary
+    </Badge>
+    <Badge {...args} type='outline'>
+      Outline
+    </Badge>
+    <Badge {...args} type='text'>
+      Text
+    </Badge>
+    <Badge {...args} type='text-color'>
+      Text Color
+    </Badge>
+  </HStack>
+);
+
+/**
+ * `text` and `text-color`, the two flattest types. They suit a value that must be read but
+ * should not compete with the row it sits in.
+ */
+export const TextVariants: StoryFn<typeof meta> = ({ ...args }) => (
+  <HStack gap={8}>
+    <Badge {...args} textVariant='default'>
+      Default Text
+    </Badge>
+    <Badge {...args} textVariant='code'>
+      Code Text
+    </Badge>
+  </HStack>
+);
+
+/**
+ * An icon before the label, which is how a status reads without relying on colour alone.
+ */
+export const WithIconsLeft: StoryFn<typeof meta> = ({ ...args }) => (
+  <HStack gap={8}>
+    <Badge {...args}>
+      <Check size='sm' />
+      Success
+    </Badge>
+    <Badge {...args}>
+      <X size='sm' />
+      Error
+    </Badge>
+    <Badge {...args}>
+      <Info size='sm' />
+      Info
+    </Badge>
+    <Badge {...args}>
+      <CircleCheck size='sm' />
+      Verified
+    </Badge>
+    <Badge {...args}>
+      <Check size='sm' />
+      Complete
+    </Badge>
+  </HStack>
+);
+
+/**
+ * An icon after the label, for a mark about the value rather than the value's own state.
+ */
+export const WithIconsRight: StoryFn<typeof meta> = ({ ...args }) => (
+  <HStack gap={8}>
+    <Badge {...args}>
+      Success
+      <Check size='sm' />
+    </Badge>
+    <Badge {...args}>
+      Error
+      <X size='sm' />
+    </Badge>
+    <Badge {...args}>
+      Info
+      <Info size='sm' />
+    </Badge>
+    <Badge {...args}>
+      Verified
+      <CircleCheck size='sm' />
+    </Badge>
+    <Badge {...args}>
+      Complete
+      <Check size='sm' />
+    </Badge>
+  </HStack>
+);
+
+/**
+ * No label at all. Only safe where the icon's meaning is already established elsewhere on the
+ * page, since nothing here names it.
+ */
+export const IconsOnly: StoryFn<typeof meta> = ({ ...args }) => (
+  <HStack gap={8}>
+    <Badge {...args}>
+      <Check size='sm' />
+    </Badge>
+    <Badge {...args}>
+      <X size='sm' />
+    </Badge>
+    <Badge {...args}>
+      <Info size='sm' />
+    </Badge>
+    <Badge {...args}>
+      <CircleCheck size='sm' />
+    </Badge>
+    <Badge {...args}>
+      <Check size='sm' />
+    </Badge>
+  </HStack>
+);
+
+/**
+ * `muted` drops the saturation for a status that is true but not worth attention — the case for
+ * everything that is merely fine.
+ */
+export const MutedVariants: StoryFn<typeof meta> = () => (
+  <table className='w-full'>
+    <thead>
+      <tr>
+        {Object.keys(BadgeTypeEnum).map(type => (
+          <th key={type} className='sb-annotation p-8 text-left'>
+            {type}
+          </th>
+        ))}
+      </tr>
+    </thead>
+    <tbody>
+      {badgeColorsMuted.map(color => (
+        <tr key={color}>
+          {Object.values(BadgeTypeEnum).map((type: BadgeType) => (
+            <td key={type} className='p-8'>
+              {isMutedSupported(type, color) ? (
+                <Badge type={type} color={color} muted>
+                  {capitalize(color)}
+                </Badge>
+              ) : null}
+            </td>
+          ))}
+        </tr>
+      ))}
+    </tbody>
+  </table>
+);
+
+/** A quieter outline keeps its neutral label and border inside a coloured message. */
+export const MutedOutline: StoryFn<typeof meta> = () => (
+  <div
+    className='rounded-8 bg-bg-light-danger p-16 text-text-danger'
+    data-testid='muted-outline-host'
+  >
+    <Badge data-testid='muted-outline' type='outline' color='slate' muted>
+      Muted outline
+    </Badge>
+  </div>
+);
+
+/**
+ * The full palette. Every colour already means something in the system, so borrowing one for
+ * decoration teaches the reader the wrong thing.
+ */
+export const ColorVariants: StoryFn<typeof meta> = () => (
+  <table className='w-full'>
+    <thead>
+      <tr>
+        {Object.keys(BadgeTypeEnum).map(type => (
+          <th key={type} className='sb-annotation p-8 text-left'>
+            {type}
+          </th>
+        ))}
+      </tr>
+    </thead>
+    <tbody>
+      {Object.entries(BadgeColorEnum).map(([label, color]) => (
+        <tr key={color}>
+          {Object.values(BadgeTypeEnum).map((type: BadgeType) => (
+            <td key={type} className='p-8'>
+              <Badge data-testid='badge' type={type} color={color}>
+                {label}
+              </Badge>
+            </td>
+          ))}
+        </tr>
+      ))}
+    </tbody>
+  </table>
+);
+
+/**
+ * What happens as the content grows. A badge does not truncate, so long text widens the row
+ * rather than being cut.
+ */
+export const ContentVariants: StoryFn<typeof meta> = () => (
+  <table className='w-full'>
+    <thead>
+      <tr>
+        {Object.keys(BadgeTypeEnum).map(type => (
+          <th key={type} className='sb-annotation p-8 text-left'>
+            {type}
+          </th>
+        ))}
+      </tr>
+    </thead>
+    <tbody>
+      {Object.entries(BadgeColorEnum).map(([label, color]) => (
+        <Fragment key={color}>
+          <tr>
+            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (
+              <td key={type} className='p-8'>
+                <Badge data-testid='badge' type={type} color={color}>
+                  {label}
+                </Badge>
+              </td>
+            ))}
+          </tr>
+
+          <tr>
+            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (
+              <td key={type} className='p-8'>
+                <Badge data-testid='badge' type={type} color={color}>
+                  {label}
+
+                  <X />
+                </Badge>
+              </td>
+            ))}
+          </tr>
+
+          <tr>
+            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (
+              <td key={type} className='p-8'>
+                <Badge data-testid='badge' type={type} color={color}>
+                  <PenTool />
+                  {label}
+                </Badge>
+              </td>
+            ))}
+          </tr>
+
+          <tr>
+            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (
+              <td key={type} className='p-8'>
+                <Badge data-testid='badge' type={type} color={color}>
+                  <PenTool />
+                  {label}
+                  <X />
+                </Badge>
+              </td>
+            ))}
+          </tr>
+
+          <tr>
+            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (
+              <td key={type} className='p-8'>
+                <Badge data-testid='badge' type={type} color={color} variant='dotted'>
+                  {label}
+                </Badge>
+              </td>
+            ))}
+          </tr>
+
+          <tr>
+            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (
+              <td key={type} className='p-8'>
+                <Badge data-testid='badge' type={type} color={color} variant='dotted'>
+                  {label}
+                  <X />
+                </Badge>
+              </td>
+            ))}
+          </tr>
+
+          <tr>
+            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (
+              <td key={type} className='p-8'>
+                <Badge data-testid='badge' type={type} color={color}>
+                  {label}
+                  <Info />
+                </Badge>
+              </td>
+            ))}
+          </tr>
+
+          <tr>
+            {Object.values(BadgeTypeEnum).map((type: BadgeType) => (
+              <td key={type} className='p-8'>
+                <Badge data-testid='badge' type={type} color={color}>
+                  <PenTool />
+                </Badge>
+              </td>
+            ))}
+          </tr>
+
+          {badgeColorsMuted.includes(color) && (
+            <tr key={color}>
+              {Object.values(BadgeTypeEnum).map((type: BadgeType) => (
+                <td key={type} className='p-8'>
+                  {isMutedSupported(type, color) ? (
+                    <Badge data-testid='badge' type={type} color={color} muted>
+                      {capitalize(color)}
+                    </Badge>
+                  ) : null}
+                </td>
+              ))}
+            </tr>
+          )}
+        </Fragment>
+      ))}
+    </tbody>
+  </table>
+);
+```
+
+### Badge/constants.ts
+
+```tsx
+export const BadgeTypeEnum = {
+  Solid: 'solid',
+  Secondary: 'secondary',
+  Outline: 'outline',
+  Text: 'text',
+  TextColor: 'text-color',
+} as const;
+
+export const BadgeColorEnum = {
+  Slate: 'slate',
+  Red: 'red',
+  WOrange: 'w-orange',
+  Amber: 'amber',
+  Yellow: 'yellow',
+  Lime: 'lime',
+  Green: 'green',
+  Emerald: 'emerald',
+  Teal: 'teal',
+  Cyan: 'cyan',
+  Sky: 'sky',
+  Blue: 'blue',
+  Indigo: 'indigo',
+  Violet: 'violet',
+  Fuchsia: 'fuchsia',
+  Pink: 'pink',
+  Rose: 'rose',
+  Gray: 'gray',
+  Zinc: 'zinc',
+  Neutral: 'neutral',
+  Stone: 'stone',
+} as const;
+```
+
+### Badge/generateBadgeVariants.ts
+
+```tsx
+import { BadgeColorEnum } from './constants';
+import type { BadgeColor, BadgeType } from './types';
+
+interface ColorVariant {
+  type: BadgeType;
+  color: BadgeColor;
+  muted?: boolean;
+  className: string;
+}
+
+interface ColorClassesMap {
+  solid: string;
+  solidMuted?: string;
+  secondary: string;
+  secondaryMuted?: string;
+  outline: string;
+  outlineMuted?: string;
+  text: string;
+  textMuted?: string;
+  textColor: string;
+  textColorMuted?: string;
+}
+
+export const badgeColorsMuted: BadgeColor[] = [
+  BadgeColorEnum.Slate,
+  BadgeColorEnum.Gray,
+  BadgeColorEnum.Zinc,
+  BadgeColorEnum.Neutral,
+  BadgeColorEnum.Stone,
+];
+
+/**
+ * Generates all compound variants for badge colors and types
+ * Uses a static class map to ensure Tailwind can detect all classes
+ */
+export const generateBadgeVariants = (): ColorVariant[] => {
+  // Static class map for each color - this ensures Tailwind can detect all classes
+  const colorClassMap: Record<BadgeColor, ColorClassesMap> = {
+    // Colors with muted support
+    slate: {
+      solid: 'bg-badge-slate-strong text-badge-on-solid',
+      solidMuted: 'bg-badge-slate-dark-alt text-badge-on-solid',
+      secondary: 'bg-badge-slate-light text-badge-slate-dark',
+      secondaryMuted: 'bg-badge-slate-light text-badge-slate-muted',
+      outline: 'border-badge-slate-dark text-badge-slate-dark',
+      outlineMuted: 'border-border-primary text-badge-slate-dark',
+      text: 'text-badge-label-primary [&_svg]:text-badge-slate-strong before:bg-badge-slate-strong',
+      textMuted:
+        'text-badge-label-primary [&_svg]:text-badge-slate-muted before:bg-badge-slate-muted',
+      textColor: 'text-badge-slate-strong',
+      textColorMuted: 'text-badge-slate-muted',
+    },
+    gray: {
+      solid: 'bg-badge-gray-strong text-badge-on-solid',
+      solidMuted: 'bg-badge-gray-dark-alt text-badge-on-solid',
+      secondary: 'bg-badge-gray-light text-badge-gray-dark',
+      secondaryMuted: 'bg-badge-gray-light text-badge-gray-muted',
+      outline: 'border-badge-gray-dark text-badge-gray-dark',
+      outlineMuted: 'border-badge-gray-muted text-badge-gray-muted',
+      text: 'text-badge-label-primary [&_svg]:text-badge-gray-strong before:bg-badge-gray-strong',
+      textMuted:
+        'text-badge-label-primary [&_svg]:text-badge-gray-muted before:bg-badge-gray-muted',
+      textColor: 'text-badge-gray-strong',
+      textColorMuted: 'text-badge-gray-muted',
+    },
+    zinc: {
+      solid: 'bg-badge-zinc-strong text-badge-on-solid',
+      solidMuted: 'bg-badge-zinc-dark-alt text-badge-on-solid',
+      secondary: 'bg-badge-zinc-light text-badge-zinc-dark',
+      secondaryMuted: 'bg-badge-zinc-light text-badge-zinc-muted',
+      outline: 'border-badge-zinc-dark text-badge-zinc-dark',
+      outlineMuted: 'border-badge-zinc-muted text-badge-zinc-muted',
+      text: 'text-badge-label-primary [&_svg]:text-badge-zinc-strong before:bg-badge-zinc-strong',
+      textMuted:
+        'text-badge-label-primary [&_svg]:text-badge-zinc-muted before:bg-badge-zinc-muted',
+      textColor: 'text-badge-zinc-strong',
+      textColorMuted: 'text-badge-zinc-muted',
+    },
+    neutral: {
+      solid: 'bg-badge-neutral-strong text-badge-on-solid',
+      solidMuted: 'bg-badge-neutral-dark-alt text-badge-on-solid',
+      secondary: 'bg-badge-neutral-light text-badge-neutral-dark',
+      secondaryMuted: 'bg-badge-neutral-light text-badge-neutral-muted',
+      outline: 'border-badge-neutral-dark text-badge-neutral-dark',
+      outlineMuted: 'border-badge-neutral-muted text-badge-neutral-muted',
+      text: 'text-badge-label-primary [&_svg]:text-badge-neutral-strong before:bg-badge-neutral-strong',
+      textMuted:
+        'text-badge-label-primary [&_svg]:text-badge-neutral-muted before:bg-badge-neutral-muted',
+      textColor: 'text-badge-neutral-strong',
+      textColorMuted: 'text-badge-neutral-muted',
+    },
+    stone: {
+      solid: 'bg-badge-stone-strong text-badge-on-solid',
+      solidMuted: 'bg-badge-stone-dark-alt text-badge-on-solid',
+      secondary: 'bg-badge-stone-light text-badge-stone-dark',
+      secondaryMuted: 'bg-badge-stone-light text-badge-stone-muted',
+      outline: 'border-badge-stone-dark text-badge-stone-dark',
+      outlineMuted: 'border-badge-stone-muted text-badge-stone-muted',
+      text: 'text-badge-label-primary [&_svg]:text-badge-stone-strong before:bg-badge-stone-strong',
+      textMuted:
+        'text-badge-label-primary [&_svg]:text-badge-stone-muted before:bg-badge-stone-muted',
+      textColor: 'text-badge-stone-strong',
+      textColorMuted: 'text-badge-stone-muted',
+    },
+    // Colors without muted support
+    red: {
+      solid: 'bg-badge-red-strong text-badge-on-solid',
+      secondary: 'bg-badge-red-light text-badge-red-dark',
+      outline: 'border-badge-red-dark text-badge-red-dark',
+      text: 'text-badge-label-primary [&_svg]:text-badge-red-strong before:bg-badge-red-strong',
+      textColor: 'text-badge-red-strong',
+    },
+    'w-orange': {
+      solid: 'bg-badge-w-orange-strong text-badge-on-solid',
+      secondary: 'bg-badge-w-orange-light text-badge-w-orange-dark',
+      outline: 'border-badge-w-orange-dark text-badge-w-orange-dark',
+      text: 'text-badge-label-primary [&_svg]:text-badge-w-orange-strong before:bg-badge-w-orange-strong',
+      textColor: 'text-badge-w-orange-strong',
+    },
+    amber: {
+      solid: 'bg-badge-amber-strong text-badge-on-solid',
+      secondary: 'bg-badge-amber-light text-badge-amber-dark',
+      outline: 'border-badge-amber-dark text-badge-amber-dark',
+      text: 'text-badge-label-primary [&_svg]:text-badge-amber-strong before:bg-badge-amber-strong',
+      textColor: 'text-badge-amber-strong',
+    },
+    yellow: {
+      solid: 'bg-badge-yellow-strong text-badge-on-solid',
+      secondary: 'bg-badge-yellow-light text-badge-yellow-dark',
+      outline: 'border-badge-yellow-dark text-badge-yellow-dark',
+      text: 'text-badge-label-primary [&_svg]:text-badge-yellow-strong before:bg-badge-yellow-strong',
+      textColor: 'text-badge-yellow-strong',
+    },
+    lime: {
+      solid: 'bg-badge-lime-strong text-badge-on-solid',
+      secondary: 'bg-badge-lime-light text-badge-lime-dark',
+      outline: 'border-badge-lime-dark text-badge-lime-dark',
+      text: 'text-badge-label-primary [&_svg]:text-badge-lime-strong before:bg-badge-lime-strong',
+      textColor: 'text-badge-lime-strong',
+    },
+    green: {
+      solid: 'bg-badge-green-strong text-badge-on-solid',
+      secondary: 'bg-badge-green-light text-badge-green-dark',
+      outline: 'border-badge-green-dark text-badge-green-dark',
+      text: 'text-badge-label-primary [&_svg]:text-badge-green-strong before:bg-badge-green-strong',
+      textColor: 'text-badge-green-strong',
+    },
+    emerald: {
+      solid: 'bg-badge-emerald-strong text-badge-on-solid',
+      secondary: 'bg-badge-emerald-light text-badge-emerald-dark',
+      outline: 'border-badge-emerald-dark text-badge-emerald-dark',
+      text: 'text-badge-label-primary [&_svg]:text-badge-emerald-strong before:bg-badge-emerald-strong',
+      textColor: 'text-badge-emerald-strong',
+    },
+    teal: {
+      solid: 'bg-badge-teal-strong text-badge-on-solid',
+      secondary: 'bg-badge-teal-light text-badge-teal-dark',
+      outline: 'border-badge-teal-dark text-badge-teal-dark',
+      text: 'text-badge-label-primary [&_svg]:text-badge-teal-strong before:bg-badge-teal-strong',
+      textColor: 'text-badge-teal-strong',
+    },
+    cyan: {
+      solid: 'bg-badge-cyan-strong text-badge-on-solid',
+      secondary: 'bg-badge-cyan-light text-badge-cyan-dark',
+      outline: 'border-badge-cyan-dark text-badge-cyan-dark',
+      text: 'text-badge-label-primary [&_svg]:text-badge-cyan-strong before:bg-badge-cyan-strong',
+      textColor: 'text-badge-cyan-strong',
+    },
+    sky: {
+      solid: 'bg-badge-sky-strong text-badge-on-solid',
+      secondary: 'bg-badge-sky-light text-badge-sky-dark',
+      outline: 'border-badge-sky-dark text-badge-sky-dark',
+      text: 'text-badge-label-primary [&_svg]:text-badge-sky-strong before:bg-badge-sky-strong',
+      textColor: 'text-badge-sky-strong',
+    },
+    blue: {
+      solid: 'bg-badge-blue-strong text-badge-on-solid',
+      secondary: 'bg-badge-blue-light text-badge-blue-dark',
+      outline: 'border-badge-blue-dark text-badge-blue-dark',
+      text: 'text-badge-label-primary [&_svg]:text-badge-blue-strong before:bg-badge-blue-strong',
+      textColor: 'text-badge-blue-strong',
+    },
+    indigo: {
+      solid: 'bg-badge-indigo-strong text-badge-on-solid',
+      secondary: 'bg-badge-indigo-light text-badge-indigo-dark',
+      outline: 'border-badge-indigo-dark text-badge-indigo-dark',
+      text: 'text-badge-label-primary [&_svg]:text-badge-indigo-strong before:bg-badge-indigo-strong',
+      textColor: 'text-badge-indigo-strong',
+    },
+    violet: {
+      solid: 'bg-badge-violet-strong text-badge-on-solid',
+      secondary: 'bg-badge-violet-light text-badge-violet-dark',
+      outline: 'border-badge-violet-dark text-badge-violet-dark',
+      text: 'text-badge-label-primary [&_svg]:text-badge-violet-strong before:bg-badge-violet-strong',
+      textColor: 'text-badge-violet-strong',
+    },
+    fuchsia: {
+      solid: 'bg-badge-fuchsia-strong text-badge-on-solid',
+      secondary: 'bg-badge-fuchsia-light text-badge-fuchsia-dark',
+      outline: 'border-badge-fuchsia-dark text-badge-fuchsia-dark',
+      text: 'text-badge-label-primary [&_svg]:text-badge-fuchsia-strong before:bg-badge-fuchsia-strong',
+      textColor: 'text-badge-fuchsia-strong',
+    },
+    pink: {
+      solid: 'bg-badge-pink-strong text-badge-on-solid',
+      secondary: 'bg-badge-pink-light text-badge-pink-dark',
+      outline: 'border-badge-pink-dark text-badge-pink-dark',
+      text: 'text-badge-label-primary [&_svg]:text-badge-pink-strong before:bg-badge-pink-strong',
+      textColor: 'text-badge-pink-strong',
+    },
+    rose: {
+      solid: 'bg-badge-rose-strong text-badge-on-solid',
+      secondary: 'bg-badge-rose-light text-badge-rose-dark',
+      outline: 'border-badge-rose-dark text-badge-rose-dark',
+      text: 'text-badge-label-primary [&_svg]:text-badge-rose-strong before:bg-badge-rose-strong',
+      textColor: 'text-badge-rose-strong',
+    },
+  } as const;
+
+  const variants: ColorVariant[] = [];
+
+  // Helper function to create a variant
+  const createVariant = (
+    type: BadgeType,
+    color: BadgeColor,
+    className: string,
+    muted: boolean = false,
+  ): ColorVariant => ({
+    type,
+    color,
+    muted,
+    className,
+  });
+
+  // Process colors with muted support
+  badgeColorsMuted.forEach(color => {
+    const classes = colorClassMap[color];
+
+    // Solid variants
+    variants.push(createVariant('solid', color, classes.solid, false));
+    variants.push(createVariant('solid', color, classes.solidMuted ?? '', true));
+
+    // Secondary variants
+    variants.push(createVariant('secondary', color, classes.secondary, false));
+    variants.push(createVariant('secondary', color, classes.secondaryMuted ?? '', true));
+
+    // Outline variants
+    variants.push(createVariant('outline', color, classes.outline, false));
+    variants.push(createVariant('outline', color, classes.outlineMuted ?? '', true));
+
+    // Text variants
+    variants.push(createVariant('text', color, classes.text, false));
+    variants.push(createVariant('text', color, classes.textMuted ?? '', true));
+
+    // Text-color variants
+    variants.push(createVariant('text-color', color, classes.textColor, false));
+    variants.push(createVariant('text-color', color, classes.textColorMuted ?? '', true));
+  });
+
+  // Process colors without muted support
+  const colorsWithoutMuted: BadgeColor[] = [
+    BadgeColorEnum.Red,
+    BadgeColorEnum.WOrange,
+    BadgeColorEnum.Amber,
+    BadgeColorEnum.Yellow,
+    BadgeColorEnum.Lime,
+    BadgeColorEnum.Green,
+    BadgeColorEnum.Emerald,
+    BadgeColorEnum.Teal,
+    BadgeColorEnum.Cyan,
+    BadgeColorEnum.Sky,
+    BadgeColorEnum.Blue,
+    BadgeColorEnum.Indigo,
+    BadgeColorEnum.Violet,
+    BadgeColorEnum.Fuchsia,
+    BadgeColorEnum.Pink,
+    BadgeColorEnum.Rose,
+  ];
+
+  colorsWithoutMuted.forEach(color => {
+    const classes = colorClassMap[color];
+
+    variants.push(createVariant('solid', color, classes.solid));
+    variants.push(createVariant('secondary', color, classes.secondary));
+    variants.push(createVariant('outline', color, classes.outline));
+    variants.push(createVariant('text', color, classes.text));
+    variants.push(createVariant('text-color', color, classes.textColor));
+  });
+
+  return variants;
+};
+```