refactor(ui): map hardcoded Tailwind palette classes onto semantic tokens (#37576)

* refactor(ui): map hardcoded Tailwind palette classes onto semantic tokens

The dashboard painted itself with literal palette utilities (text-gray-500,
bg-blue-50, border-red-200) that resolve to one fixed color regardless of
theme, so the shadcn token layer and its .dark block could never take effect.

A codemod (scripts/codemod-color-tokens.mjs) rewrites 3,232 of those across
254 files onto the existing token scale: neutrals become foreground /
muted-foreground / muted / border / card, and red, green, amber and blue
collapse into destructive, success, warning and info, with the pale -50 to
-300 tints expressed as opacity modifiers on the same token. Hover and focus
variants map to accent so they lift rather than recess. 210 now-redundant
dark: variants are dropped since the tokens carry both modes.

The .dark palette is retuned to a neutral gray ramp with the sidebar recessed
below the content canvas, replacing the blue-tinted shadcn default where the
sidebar read as a full-height card floating on a near-black page.

Nothing sets the .dark class yet, so light mode is unchanged and dark mode
stays inert until a theme toggle lands.

* chore(ui): drop the one-shot color-token codemod script

Author: ryan-crabbe-berri

ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/AccessGroupsTableColumns.tsx

@@ -22,8 +22,8 @@ interface ResourceTone {
 }
 
 const RESOURCE_TONES: Record<"models" | "mcpServers" | "agents", ResourceTone> = {
-  models: { icon: Layers, className: "bg-blue-50 text-blue-700 ring-blue-600/20" },
-  mcpServers: { icon: Server, className: "bg-cyan-50 text-cyan-700 ring-cyan-600/20" },
+  models: { icon: Layers, className: "bg-info/10 text-info ring-blue-600/20" },
+  mcpServers: { icon: Server, className: "bg-info/10 text-info ring-cyan-600/20" },
   agents: { icon: Bot, className: "bg-purple-50 text-purple-700 ring-purple-600/20" },
 };
 

ui/litellm-dashboard/src/app/(dashboard)/agents/_components/AgentsTable.tsx

@@ -73,7 +73,7 @@ const AgentsTable: React.FC<AgentsTableProps> = ({
                 render={
                   <div className="flex items-center gap-2">
                     <CircleCheck
-                      className={healthCheckEnabled ? "size-4 text-green-500" : "size-4 text-muted-foreground"}
+                      className={healthCheckEnabled ? "size-4 text-success" : "size-4 text-muted-foreground"}
                     />
                     <span className="text-sm text-muted-foreground">Health Check</span>
                     <Switch

ui/litellm-dashboard/src/app/(dashboard)/agents/_components/add_agent_form.tsx

@@ -72,7 +72,7 @@ const AgentTypeLabel: React.FC<{ agentType: string; info: AgentCreateInfo | unde
   if (agentType === CUSTOM_AGENT_TYPE) {
     return (
       <span className="flex items-center gap-2">
-        <LayoutGrid className="size-4 text-amber-600 dark:text-amber-400" />
+        <LayoutGrid className="size-4 text-warning" />
         <span>Custom / Other</span>
       </span>
     );
@@ -588,7 +588,7 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({ visible, onClose, accessTok
         <h4 className="mb-3 text-sm font-medium text-foreground">Budgets &amp; Rate Limits</h4>
         <div className="space-y-4">
           {!requireTraceIdOutbound && (
-            <div className="rounded-lg border border-yellow-200 bg-yellow-50 p-3 text-sm text-yellow-800 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-300">
+            <div className="rounded-lg border border-warning/20 bg-warning/10 p-3 text-sm text-warning">
               Enable &quot;Require x-litellm-trace-id on calls BY this agent&quot; in Tracing to configure budgets and
               rate limits.
             </div>
@@ -758,20 +758,17 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({ visible, onClose, accessTok
             <div className="mb-1 px-2 text-xs font-medium tracking-wide text-muted-foreground uppercase">
               Not listed?
             </div>
-            <SelectItem
-              value={CUSTOM_AGENT_TYPE}
-              className="focus:bg-amber-50 dark:focus:bg-amber-950 dark:focus:**:text-amber-400"
-            >
+            <SelectItem value={CUSTOM_AGENT_TYPE} className="focus:bg-warning/10 dark:focus:**:text-amber-400">
               <span className="flex items-center gap-3">
-                <LayoutGrid className="size-4.5 shrink-0 text-amber-600 dark:text-amber-400" />
+                <LayoutGrid className="size-4.5 shrink-0 text-warning" />
                 <span className="block">
                   <span className="flex items-center gap-2">
-                    <span className="font-medium text-amber-700 dark:text-amber-400">Custom / Other</span>
+                    <span className="font-medium text-warning">Custom / Other</span>
                     <Badge variant="warning" className="h-4 px-1 text-[10px]">
                       GENERIC
                     </Badge>
                   </span>
-                  <span className="block text-xs whitespace-normal text-amber-600 dark:text-amber-400">
+                  <span className="block text-xs whitespace-normal text-warning">
                     For agents that don&apos;t follow a standard protocol, just needs a virtual key
                   </span>
                 </span>
@@ -880,7 +877,7 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({ visible, onClose, accessTok
       <div>
         {/* Agent name chip */}
         <div className="mb-6 flex justify-center">
-          <Badge className="h-auto gap-1.5 bg-purple-100 px-3 py-1 text-sm text-purple-700 dark:bg-purple-950 dark:text-purple-300">
+          <Badge className="h-auto gap-1.5 bg-purple-100 px-3 py-1 text-sm text-purple-700">
             <Bot className="size-3.5" />
             {agentName}
           </Badge>
@@ -909,7 +906,7 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({ visible, onClose, accessTok
           <div
             className={`cursor-pointer rounded-lg border-2 p-4 transition-colors ${
               keyAssignOption === "create_new"
-                ? "border-indigo-600 bg-indigo-50 dark:border-indigo-400 dark:bg-indigo-950"
+                ? "border-indigo-600 bg-indigo-50"
                 : "border-border bg-background hover:border-muted-foreground/40"
             }`}
             onClick={() => setKeyAssignOption("create_new")}
@@ -919,7 +916,7 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({ visible, onClose, accessTok
                 <RadioGroupItem value="create_new" aria-label="Create a new key for this agent" />
                 <div className="flex-1">
                   <div className="flex items-center gap-2">
-                    <Key className="size-4 text-indigo-600 dark:text-indigo-400" />
+                    <Key className="size-4 text-indigo-600" />
                     <span className="font-medium text-foreground">Create a new key for this agent</span>
                   </div>
                   <p className="mt-1 text-sm text-muted-foreground">A dedicated key scoped to this agent.</p>
@@ -946,7 +943,7 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({ visible, onClose, accessTok
           <div
             className={`cursor-pointer rounded-lg border-2 p-4 transition-colors ${
               keyAssignOption === "existing_key"
-                ? "border-indigo-600 bg-indigo-50 dark:border-indigo-400 dark:bg-indigo-950"
+                ? "border-indigo-600 bg-indigo-50"
                 : "border-border bg-background hover:border-muted-foreground/40"
             }`}
             onClick={() => setKeyAssignOption("existing_key")}
@@ -993,10 +990,10 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({ visible, onClose, accessTok
 
   const renderReadyStep = () => (
     <div className="py-6 text-center">
-      <CircleCheck className="mb-4 size-12 text-green-500" />
+      <CircleCheck className="mb-4 size-12 text-success" />
       <h3 className="mb-2 text-xl font-semibold text-foreground">Agent Created!</h3>
       <div className="mb-4 flex justify-center">
-        <Badge className="h-auto gap-1.5 bg-purple-100 px-3 py-1 text-sm text-purple-700 dark:bg-purple-950 dark:text-purple-300">
+        <Badge className="h-auto gap-1.5 bg-purple-100 px-3 py-1 text-sm text-purple-700">
           <Bot className="size-3.5" />
           {createdAgentName}
         </Badge>

ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_card_discovery.tsx

@@ -334,7 +334,7 @@ const AgentCardDiscovery: React.FC<AgentCardDiscoveryProps> = ({
       {card && (
         <div className="mt-4 rounded-lg border border-border bg-background p-4">
           <div className="mb-3 flex flex-wrap items-center gap-2">
-            <CircleCheck className="size-4 text-green-600" />
+            <CircleCheck className="size-4 text-success" />
             <span className="text-sm font-medium text-foreground">Upstream card loaded</span>
             {card.version && <Badge variant="secondary">v{card.version}</Badge>}
             {card.provider?.organization && <Badge variant="secondary">{card.provider.organization}</Badge>}

ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_info.tsx

@@ -278,7 +278,7 @@ const AgentInfoView: React.FC<AgentInfoViewProps> = ({ agentId, onClose, accessT
           Back to Agents
         </Button>
         <h1 className="text-2xl font-semibold">{agent.agent_name || "Unnamed Agent"}</h1>
-        <p className="text-sm text-gray-500 font-mono">{agent.agent_id}</p>
+        <p className="text-sm text-muted-foreground font-mono">{agent.agent_id}</p>
       </div>
 
       <Tabs value={activeTab} onValueChange={setActiveTab}>

ui/litellm-dashboard/src/app/(dashboard)/api-reference/_components/DocLink.tsx

@@ -16,8 +16,8 @@ const DocLink = ({ href, className }: DocLinkProps) => {
       rel="noopener noreferrer"
       title="Open documentation in a new tab"
       className={cn(
-        "inline-flex items-center gap-2 rounded-xl border border-zinc-200 bg-white/80 px-3.5 py-2 text-sm font-medium text-zinc-700 shadow-xs",
-        "hover:bg-white focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 active:translate-y-[0.5px]",
+        "inline-flex items-center gap-2 rounded-xl border border-border bg-white/80 px-3.5 py-2 text-sm font-medium text-foreground shadow-xs",
+        "hover:bg-card focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring active:translate-y-[0.5px]",
         className,
       )}
     >

ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_health.tsx

@@ -168,12 +168,12 @@ const HealthCheckDetails: React.FC<{ response: any }> = ({ response }) => {
           <div>
             <div className="mb-6 flex items-center">
               {response?.status === "healthy" ? (
-                <CheckCircle2 className="mr-2 size-5 text-green-600" />
+                <CheckCircle2 className="mr-2 size-5 text-success" />
               ) : (
                 <XCircle className="mr-2 size-5 text-destructive" />
               )}
               <p
-                className={`text-sm font-medium ${response?.status === "healthy" ? "text-green-600" : "text-destructive"}`}
+                className={`text-sm font-medium ${response?.status === "healthy" ? "text-success" : "text-destructive"}`}
               >
                 Cache Status: {response?.status || "unhealthy"}
               </p>

ui/litellm-dashboard/src/app/(dashboard)/caching/_components/coordination_redis_settings/index.tsx

@@ -107,7 +107,7 @@ const CoordinationRedisSettings: React.FC = () => {
               manager. It is configured independently of the response cache.
             </p>
             <p className="text-xs text-muted-foreground">{badge.tooltip}</p>
-            <p className="text-xs text-amber-600 dark:text-amber-400">Saved changes take effect on proxy restart.</p>
+            <p className="text-xs text-warning">Saved changes take effect on proxy restart.</p>
           </div>
 
           <CoordinationRedisTypeSelector redisType={redisType} onTypeChange={setSelectedRedisType} />

ui/litellm-dashboard/src/app/(dashboard)/caching/_components/response_time_indicator.tsx

@@ -8,7 +8,7 @@ export const ResponseTimeIndicator: React.FC<ResponseTimeIndicatorProps> = ({ re
   if (responseTimeMs === null || responseTimeMs === undefined) return null;
 
   return (
-    <div className="flex items-center space-x-1 text-xs text-gray-500 font-mono">
+    <div className="flex items-center space-x-1 text-xs text-muted-foreground font-mono">
       <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M12 6V12L16 14M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"

ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/AutoRouterBenchmarksTab.tsx

@@ -62,7 +62,7 @@ const HeroCard: React.FC<{ view: BenchmarkView }> = ({ view }) => {
             <p className="text-5xl font-semibold tracking-tight text-foreground">{usd(stats.saved_spend)}</p>
             <Badge
               variant="secondary"
-              className={cheaper ? "bg-emerald-50 text-emerald-700" : "bg-red-50 text-destructive"}
+              className={cheaper ? "bg-success/10 text-success" : "bg-destructive/10 text-destructive"}
             >
               {stats.saved_spend !== 0 && (cheaper ? "-" : "+")}
               {Math.abs(stats.saved_pct).toFixed(0)}%