Refatorou badges com tokens sem.

X-Lovable-Edit-ID: edt-f39b9078-8a7c-4152-a2ba-c4f4c73a87a0
Co-authored-by: domfelipe <53182096+domfelipe@users.noreply.github.com>

src/components/mika/skills/SkillStatusBadge.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Badge } from "@/components/ui/badge";
+import { Badge, type BadgeProps } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 
 const STATUS_LABELS: Record<string, string> = {
@@ -11,21 +11,21 @@ const STATUS_LABELS: Record<string, string> = {
   archived: "Arquivada",
 };
 
-const STATUS_CLASSES: Record<string, string> = {
+const STATUS_VARIANTS: Record<string, BadgeProps["variant"]> = {
-  draft: "bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/30",
+  draft: "warning",
-  testing: "bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-500/30",
+  testing: "info",
-  active: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/30",
+  active: "success",
-  disabled: "bg-slate-500/15 text-slate-600 dark:text-slate-400 border-slate-500/30",
+  disabled: "muted",
-  archived: "bg-slate-500/10 text-slate-500/70 border-slate-500/20",
+  archived: "muted",
 };
 
 export function SkillStatusBadge({ status, className }: { status: string; className?: string }) {
   return (
     <Badge
-      variant="outline"
+      variant={STATUS_VARIANTS[status] ?? "warning"}
       className={cn(
         "rounded-md font-medium",
-        STATUS_CLASSES[status] ?? STATUS_CLASSES.draft,
+        status === "archived" && "opacity-70",
         className,
       )}
     >

src/components/ui/badge.tsx

@@ -14,6 +14,10 @@ const badgeVariants = cva(
         destructive:
           "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
         outline: "text-foreground",
+        success: "border-success/30 bg-success/15 text-success",
+        warning: "border-warning/30 bg-warning/15 text-warning",
+        info: "border-info/30 bg-info/15 text-info",
+        muted: "border-muted-foreground/20 bg-muted text-muted-foreground",
       },
     },
     defaultVariants: {

src/routes/painel.agente.tsx

@@ -24,11 +24,11 @@ export const Route = createFileRoute("/painel/agente")({
   component: AgentePage,
 });
 
-const STATUS_MAP: Record<string, { label: string; color: string; pulse?: boolean }> = {
+const STATUS_MAP: Record<string, { label: string; variant: "warning" | "success" | "destructive"; pulse?: boolean }> = {
-  provisioning: { label: "Provisionando", color: "bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/30", pulse: true },
+  provisioning: { label: "Provisionando", variant: "warning", pulse: true },
-  active: { label: "Online", color: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/30" },
+  active: { label: "Online", variant: "success" },
-  suspended: { label: "Suspenso", color: "bg-destructive/15 text-destructive border-destructive/30" },
+  suspended: { label: "Suspenso", variant: "destructive" },
-  error: { label: "Erro", color: "bg-destructive/15 text-destructive border-destructive/30" },
+  error: { label: "Erro", variant: "destructive" },
 };
 
 function AgentePage() {
@@ -84,16 +84,16 @@ function AgentePage() {
           <div className="flex items-start gap-4">
             <div className={cn(
               "h-14 w-14 rounded-full flex items-center justify-center shrink-0",
-              status === "active" ? "bg-emerald-500/10" : "bg-primary/10",
+              status === "active" ? "bg-success/10" : "bg-primary/10",
             )}>
-              <Bot className={cn("h-7 w-7", status === "active" ? "text-emerald-500" : "text-primary")} />
+              <Bot className={cn("h-7 w-7", status === "active" ? "text-success" : "text-primary")} />
             </div>
             <div className="flex-1">
               <div className="flex items-center gap-3 flex-wrap">
                 <h2 className="text-xl font-bold">{agentName}</h2>
                 <Badge
-                  variant="outline"
+                  variant={statusInfo.variant}
-                  className={cn(statusInfo.color, statusInfo.pulse && "animate-pulse")}
+                  className={cn(statusInfo.pulse && "animate-pulse")}
                 >
                   {statusInfo.label}
                 </Badge>

src/styles.css

@@ -43,7 +43,11 @@
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
   --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
   --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -92,7 +96,11 @@
   --destructive: oklch(0.58 0.24 27);      /* #DC2626 red-600 — distinto do laranja */
   --destructive-foreground: oklch(0.99 0 0);
   --success: oklch(0.72 0.17 162);         /* #10B981 — sucesso continua verde */
+  --success-foreground: oklch(0.99 0 0);
   --warning: oklch(0.78 0.17 70);
+  --warning-foreground: oklch(0.18 0.04 265);
+  --info: oklch(0.62 0.19 255);            /* #3B82F6 blue-500 */
+  --info-foreground: oklch(0.99 0 0);
 
   --border: oklch(0.92 0.01 256);          /* #E2E8F0 */
   --input: oklch(0.92 0.01 256);
@@ -148,7 +156,11 @@
   --destructive: oklch(0.63 0.23 25);
   --destructive-foreground: oklch(0.99 0 0);
   --success: oklch(0.72 0.17 162);
+  --success-foreground: oklch(0.18 0.04 265);
   --warning: oklch(0.80 0.17 72);
+  --warning-foreground: oklch(0.18 0.04 265);
+  --info: oklch(0.68 0.17 255);
+  --info-foreground: oklch(0.18 0.04 265);
 
   --border: oklch(0.32 0.03 256);          /* #334155 */
   --input: oklch(0.32 0.03 256);