112

frontend/src/components/ui/badge/Badge.tsx

@@ -8,8 +8,8 @@ import clsx from "clsx";
 
 type BadgeVariant = "solid" | "soft" | "outline" | "light";
 type BadgeSize = "xs" | "sm" | "md";
-type BadgeTone = "brand" | "success" | "warning" | "danger" | "info" | "neutral";
-type BadgeColor = "success" | "warning" | "error" | "danger" | "info" | "primary" | "brand" | "light" | "neutral";
+type BadgeTone = "brand" | "success" | "warning" | "danger" | "info" | "neutral" | "purple" | "indigo" | "pink" | "teal" | "cyan" | "blue";
+type BadgeColor = "success" | "warning" | "error" | "danger" | "info" | "primary" | "brand" | "light" | "neutral" | "purple" | "indigo" | "pink" | "teal" | "cyan" | "blue";
 
 interface BadgeProps {
   variant?: BadgeVariant; // Visual treatment (light maps to soft)
@@ -32,46 +32,82 @@ const toneStyles: Record<
 > = {
   brand: {
     solid: "bg-brand-500 text-white",
-    soft: "bg-brand-50 text-brand-600 dark:bg-brand-500/15 dark:text-brand-300",
+    soft: "bg-brand-50 text-brand-700 dark:bg-brand-500/15 dark:text-brand-400",
     outline:
-      "text-brand-600 ring-1 ring-brand-200 dark:ring-brand-500/30 dark:text-brand-300",
+      "text-brand-700 ring-1 ring-brand-200 dark:ring-brand-500/30 dark:text-brand-400",
   },
   success: {
     solid: "bg-success-500 text-white",
-    soft: "bg-success-50 text-success-600 dark:bg-success-500/15 dark:text-success-300",
+    soft: "bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-400",
     outline:
-      "text-success-600 ring-1 ring-success-200 dark:ring-success-500/30 dark:text-success-300",
+      "text-success-700 ring-1 ring-success-200 dark:ring-success-500/30 dark:text-success-400",
   },
   warning: {
     solid: "bg-warning-500 text-white",
-    soft: "bg-warning-50 text-warning-600 dark:bg-warning-500/15 dark:text-warning-300",
+    soft: "bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-warning-400",
     outline:
-      "text-warning-600 ring-1 ring-warning-200 dark:ring-warning-500/30 dark:text-warning-300",
+      "text-warning-700 ring-1 ring-warning-200 dark:ring-warning-500/30 dark:text-warning-400",
   },
   danger: {
     solid: "bg-error-500 text-white",
-    soft: "bg-error-50 text-error-600 dark:bg-error-500/15 dark:text-error-300",
+    soft: "bg-error-50 text-error-700 dark:bg-error-500/15 dark:text-error-400",
     outline:
-      "text-error-600 ring-1 ring-error-200 dark:ring-error-500/30 dark:text-error-300",
+      "text-error-700 ring-1 ring-error-200 dark:ring-error-500/30 dark:text-error-400",
   },
   info: {
     solid: "bg-blue-light-500 text-white",
-    soft: "bg-blue-light-50 text-blue-light-600 dark:bg-blue-light-500/15 dark:text-blue-light-300",
+    soft: "bg-blue-light-50 text-blue-light-700 dark:bg-blue-light-500/15 dark:text-blue-light-400",
     outline:
-      "text-blue-light-600 ring-1 ring-blue-light-200 dark:ring-blue-light-500/30 dark:text-blue-light-300",
+      "text-blue-light-700 ring-1 ring-blue-light-200 dark:ring-blue-light-500/30 dark:text-blue-light-400",
   },
   neutral: {
     solid: "bg-gray-800 text-white",
-    soft: "bg-gray-100 text-gray-700 dark:bg-white/5 dark:text-white/80",
+    soft: "bg-gray-100 text-gray-800 dark:bg-white/5 dark:text-white/90",
     outline:
-      "text-gray-700 ring-1 ring-gray-300 dark:ring-white/[0.08] dark:text-white/80",
+      "text-gray-800 ring-1 ring-gray-300 dark:ring-white/[0.08] dark:text-white/90",
+  },
+  purple: {
+    solid: "bg-purple-600 text-white",
+    soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400",
+    outline:
+      "text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400",
+  },
+  indigo: {
+    solid: "bg-indigo-600 text-white",
+    soft: "bg-indigo-50 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-400",
+    outline:
+      "text-indigo-700 ring-1 ring-indigo-200 dark:ring-indigo-500/30 dark:text-indigo-400",
+  },
+  pink: {
+    solid: "bg-pink-600 text-white",
+    soft: "bg-pink-50 text-pink-700 dark:bg-pink-500/15 dark:text-pink-400",
+    outline:
+      "text-pink-700 ring-1 ring-pink-200 dark:ring-pink-500/30 dark:text-pink-400",
+  },
+  teal: {
+    solid: "bg-teal-600 text-white",
+    soft: "bg-teal-50 text-teal-700 dark:bg-teal-500/15 dark:text-teal-400",
+    outline:
+      "text-teal-700 ring-1 ring-teal-200 dark:ring-teal-500/30 dark:text-teal-400",
+  },
+  cyan: {
+    solid: "bg-cyan-600 text-white",
+    soft: "bg-cyan-50 text-cyan-700 dark:bg-cyan-500/15 dark:text-cyan-400",
+    outline:
+      "text-cyan-700 ring-1 ring-cyan-200 dark:ring-cyan-500/30 dark:text-cyan-400",
+  },
+  blue: {
+    solid: "bg-blue-600 text-white",
+    soft: "bg-blue-50 text-blue-700 dark:bg-blue-500/15 dark:text-blue-400",
+    outline:
+      "text-blue-700 ring-1 ring-blue-200 dark:ring-blue-500/30 dark:text-blue-400",
   },
 };
 
 const sizeClasses: Record<BadgeSize, string> = {
-  xs: "h-5 px-2 text-[11px]",
-  sm: "h-6 px-2.5 text-xs",
-  md: "h-7 px-3 text-sm",
+  xs: "h-5 px-2 text-[11px] leading-tight",
+  sm: "h-6 px-2.5 text-xs leading-tight",
+  md: "h-7 px-3 text-sm leading-tight",
 };
 
 const Badge: React.FC<BadgeProps> = ({
@@ -98,6 +134,12 @@ const Badge: React.FC<BadgeProps> = ({
       "brand": "brand",
       "light": "neutral",
       "neutral": "neutral",
+      "purple": "purple",
+      "indigo": "indigo",
+      "pink": "pink",
+      "teal": "teal",
+      "cyan": "cyan",
+      "blue": "blue",
     };
     return colorToToneMap[color] || "brand";
   })();
@@ -110,7 +152,7 @@ const Badge: React.FC<BadgeProps> = ({
   return (
     <span
       className={clsx(
-        "inline-flex items-center justify-center gap-1 rounded-full font-medium uppercase tracking-wide",
+        "inline-flex items-center justify-center gap-1 rounded-full font-normal",
         sizeClasses[size],
         toneClass,
         className,