fix(ai-elements): update AI element and mention-chip components

src/components/ai-elements/commit.tsx

@@ -316,10 +316,10 @@ export const CommitFileInfo = ({
 );
 
 const fileStatusStyles = {
-  added: "text-green-600 dark:text-green-400",
+  added: "text-success dark:text-success",
-  deleted: "text-red-600 dark:text-red-400",
+  deleted: "text-destructive dark:text-destructive",
   modified: "text-yellow-600 dark:text-yellow-400",
-  renamed: "text-blue-600 dark:text-blue-400",
+  renamed: "text-info dark:text-info",
 };
 
 const fileStatusLabels = {
@@ -409,7 +409,7 @@ export const CommitFileAdditions = ({
 
   return (
     <span
-      className={cn("text-green-600 dark:text-green-400", className)}
+      className={cn("text-success dark:text-success", className)}
       {...props}
     >
       {children ?? (
@@ -438,7 +438,7 @@ export const CommitFileDeletions = ({
 
   return (
     <span
-      className={cn("text-red-600 dark:text-red-400", className)}
+      className={cn("text-destructive dark:text-destructive", className)}
       {...props}
     >
       {children ?? (

src/components/ai-elements/package-info.tsx

@@ -52,11 +52,11 @@ export const PackageInfoName = ({
 };
 
 const changeTypeStyles: Record<ChangeType, string> = {
-  added: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+  added: "bg-info/10 text-info dark:bg-info/20 dark:text-info",
-  major: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+  major: "bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive",
   minor:
     "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
-  patch: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+  patch: "bg-success/10 text-success dark:bg-success/20 dark:text-success",
   removed: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400",
 };
 

src/components/ai-elements/test-results.tsx

@@ -96,7 +96,7 @@ export const TestResultsSummary = ({
       {children ?? (
         <>
           <Badge
-            className="gap-1 bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
+            className="gap-1 bg-success/10 text-success dark:bg-success/20 dark:text-success"
             variant="secondary"
           >
             <CheckCircle2Icon className="size-3" />
@@ -104,7 +104,7 @@ export const TestResultsSummary = ({
           </Badge>
           {summary.failed > 0 && (
             <Badge
-              className="gap-1 bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
+              className="gap-1 bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive"
               variant="secondary"
             >
               <XCircleIcon className="size-3" />
@@ -178,11 +178,11 @@ export const TestResultsProgress = ({
         <>
           <div className="flex h-2 overflow-hidden rounded-full bg-muted">
             <div
-              className="bg-green-500 transition-all"
+              className="bg-success transition-all"
               style={{ width: `${passedPercent}%` }}
             />
             <div
-              className="bg-red-500 transition-all"
+              className="bg-destructive transition-all"
               style={{ width: `${failedPercent}%` }}
             />
           </div>
@@ -221,9 +221,9 @@ const TestSuiteContext = createContext<TestSuiteContextType>({
 });
 
 const statusStyles: Record<TestStatus, string> = {
-  failed: "text-red-600 dark:text-red-400",
+  failed: "text-destructive dark:text-destructive",
-  passed: "text-green-600 dark:text-green-400",
+  passed: "text-success dark:text-success",
-  running: "text-blue-600 dark:text-blue-400",
+  running: "text-info dark:text-info",
   skipped: "text-yellow-600 dark:text-yellow-400",
 };
 
@@ -308,12 +308,12 @@ export const TestSuiteStats = ({
     {children ?? (
       <>
         {passed > 0 && (
-          <span className="text-green-600 dark:text-green-400">
+          <span className="text-success dark:text-success">
             {passed} passed
           </span>
         )}
         {failed > 0 && (
-          <span className="text-red-600 dark:text-red-400">
+          <span className="text-destructive dark:text-destructive">
             {failed} failed
           </span>
         )}
@@ -450,7 +450,7 @@ export const TestError = ({
 }: TestErrorProps) => (
   <div
     className={cn(
-      "mt-2 rounded-md bg-red-50 p-3 dark:bg-red-900/20",
+      "mt-2 rounded-md bg-destructive/10 p-3",
       className
     )}
     {...props}
@@ -468,7 +468,7 @@ export const TestErrorMessage = ({
 }: TestErrorMessageProps) => (
   <p
     className={cn(
-      "font-medium text-red-700 text-sm dark:text-red-400",
+      "font-medium text-destructive text-sm dark:text-destructive",
       className
     )}
     {...props}
@@ -486,7 +486,7 @@ export const TestErrorStack = ({
 }: TestErrorStackProps) => (
   <pre
     className={cn(
-      "mt-2 overflow-auto font-mono text-red-600 text-xs dark:text-red-400",
+      "mt-2 overflow-auto font-mono text-destructive text-xs dark:text-destructive",
       className
     )}
     {...props}

src/components/ai-elements/tool.tsx

@@ -56,12 +56,12 @@ const statusLabels: Record<ToolPart["state"], string> = {
 
 const statusIcons: Record<ToolPart["state"], ReactNode> = {
   "approval-requested": <ClockIcon className="size-4 text-yellow-600" />,
-  "approval-responded": <CheckCircleIcon className="size-4 text-blue-600" />,
+  "approval-responded": <CheckCircleIcon className="size-4 text-info" />,
   "input-available": <ClockIcon className="size-4 animate-pulse" />,
   "input-streaming": <CircleIcon className="size-4" />,
-  "output-available": <CheckCircleIcon className="size-4 text-green-600" />,
+  "output-available": <CheckCircleIcon className="size-4 text-success" />,
   "output-denied": <XCircleIcon className="size-4 text-orange-600" />,
-  "output-error": <XCircleIcon className="size-4 text-red-600" />,
+  "output-error": <XCircleIcon className="size-4 text-destructive" />,
 };
 
 export const getStatusBadge = (status: ToolPart["state"]) => (

src/lib/ir/mention-chip.tsx

@@ -12,11 +12,11 @@ const entityIcons: Record<string, React.ComponentType<{ className?: string }>> =
 };
 
 const entityColors: Record<string, string> = {
-  user: 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950',
+  user: 'text-info dark:text-info bg-info/10 dark:bg-info/20',
   repo: 'text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950',
   issue: 'text-orange-600 dark:text-orange-400 bg-orange-50 dark:bg-orange-950',
   pr: 'text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-950',
-  room: 'text-sky-600 dark:text-sky-400 bg-sky-50 dark:bg-sky-950',
+  room: 'text-info dark:text-info bg-info/10 dark:bg-info/20',
 };
 
 interface Props {