Update Badge.tsx

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

@@ -6,14 +6,16 @@
  */
 import clsx from "clsx";
 
-type BadgeVariant = "solid" | "soft" | "outline";
+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";
 
 interface BadgeProps {
-  variant?: BadgeVariant; // Visual treatment
+  variant?: BadgeVariant; // Visual treatment (light maps to soft)
   size?: BadgeSize; // Badge size
   tone?: BadgeTone; // Badge color tone
+  color?: BadgeColor; // Alias for tone (for backward compatibility)
   startIcon?: React.ReactNode; // Icon at the start
   endIcon?: React.ReactNode; // Icon at the end
   children: React.ReactNode; // Badge content
@@ -74,14 +76,36 @@ const sizeClasses: Record<BadgeSize, string> = {
 
 const Badge: React.FC<BadgeProps> = ({
   variant = "soft",
-  tone = "brand",
+  tone,
+  color,
   size = "sm",
   startIcon,
   endIcon,
   children,
   className = "",
 }) => {
-  const toneClass = toneStyles[tone][variant];
+  // Map color prop to tone (for backward compatibility)
+  const resolvedTone: BadgeTone = tone || (() => {
+    if (!color) return "brand";
+    // Map color values to tone values
+    const colorToToneMap: Record<string, BadgeTone> = {
+      "success": "success",
+      "warning": "warning",
+      "error": "danger",
+      "danger": "danger",
+      "info": "info",
+      "primary": "brand",
+      "brand": "brand",
+      "light": "neutral",
+      "neutral": "neutral",
+    };
+    return colorToToneMap[color] || "brand";
+  })();
+
+  // Map variant "light" to "soft" (for backward compatibility)
+  const resolvedVariant: "solid" | "soft" | "outline" = variant === "light" ? "soft" : variant;
+
+  const toneClass = toneStyles[resolvedTone][resolvedVariant];
 
   return (
     <span