From c78573ce03561ef9fabfa63728bd8805af2e534f Mon Sep 17 00:00:00 2001
From: Micah-Zheng <102610064+Micah-Zheng@users.noreply.github.com>
Date: Tue, 19 May 2026 16:15:02 +0800
Subject: [PATCH] fix(web/default): api-info color dot shows wrong color due to
 semantic token mismatch (#4824)

* fix: unify color system for api-info, add slate to SemanticColor

Signed-off-by: Micah-Zheng <102610064+Micah-Zheng@users.noreply.github.com>

* fix: use direct Tailwind color classes in colorToBgClass for accurate color display

Signed-off-by: Micah-Zheng <102610064+Micah-Zheng@users.noreply.github.com>

---------

Signed-off-by: Micah-Zheng <102610064+Micah-Zheng@users.noreply.github.com>
---
 .../content/api-info-section.tsx              | 39 +++++++++----------
 web/default/src/lib/colors.ts                 | 35 +++++++++--------
 2 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/web/default/src/features/system-settings/content/api-info-section.tsx b/web/default/src/features/system-settings/content/api-info-section.tsx
index e05beca7..a5e3b712 100644
--- a/web/default/src/features/system-settings/content/api-info-section.tsx
+++ b/web/default/src/features/system-settings/content/api-info-section.tsx
@@ -23,6 +23,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { Plus, Edit, Trash2, Save } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
+import { getBgColorClass } from '@/lib/colors'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -98,20 +99,20 @@ const createApiInfoSchema = (t: (key: string) => string) =>
 type ApiInfoFormValues = z.infer<ReturnType<typeof createApiInfoSchema>>
 
 const colorOptions = [
-  { value: 'blue', label: 'Blue', bgClass: 'bg-blue-500' },
-  { value: 'green', label: 'Green', bgClass: 'bg-green-500' },
-  { value: 'cyan', label: 'Cyan', bgClass: 'bg-cyan-500' },
-  { value: 'purple', label: 'Purple', bgClass: 'bg-purple-500' },
-  { value: 'pink', label: 'Pink', bgClass: 'bg-pink-500' },
-  { value: 'red', label: 'Red', bgClass: 'bg-red-500' },
-  { value: 'orange', label: 'Orange', bgClass: 'bg-orange-500' },
-  { value: 'amber', label: 'Amber', bgClass: 'bg-amber-500' },
-  { value: 'yellow', label: 'Yellow', bgClass: 'bg-yellow-500' },
-  { value: 'lime', label: 'Lime', bgClass: 'bg-lime-500' },
-  { value: 'teal', label: 'Teal', bgClass: 'bg-teal-500' },
-  { value: 'indigo', label: 'Indigo', bgClass: 'bg-indigo-500' },
-  { value: 'violet', label: 'Violet', bgClass: 'bg-violet-500' },
-  { value: 'slate', label: 'Slate', bgClass: 'bg-slate-500' },
+  { value: 'blue', label: 'Blue' },
+  { value: 'green', label: 'Green' },
+  { value: 'cyan', label: 'Cyan' },
+  { value: 'purple', label: 'Purple' },
+  { value: 'pink', label: 'Pink' },
+  { value: 'red', label: 'Red' },
+  { value: 'orange', label: 'Orange' },
+  { value: 'amber', label: 'Amber' },
+  { value: 'yellow', label: 'Yellow' },
+  { value: 'lime', label: 'Lime' },
+  { value: 'teal', label: 'Teal' },
+  { value: 'indigo', label: 'Indigo' },
+  { value: 'violet', label: 'Violet' },
+  { value: 'slate', label: 'Slate' },
 ]
 
 export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
@@ -270,11 +271,7 @@ export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
     )
   }
 
-  const getColorClass = (color: string) => {
-    return (
-      colorOptions.find((opt) => opt.value === color)?.bgClass || 'bg-blue-500'
-    )
-  }
+  const getColorClass = (color: string) => getBgColorClass(color)
 
   return (
     <SettingsSection
@@ -488,7 +485,7 @@ export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
                           label: (
                             <div className='flex items-center gap-2'>
                               <div
-                                className={`h-4 w-4 rounded-full ${option.bgClass}`}
+                                className={`h-4 w-4 rounded-full ${getBgColorClass(option.value)}`}
                               />
                               {option.label}
                             </div>
@@ -509,7 +506,7 @@ export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
                             <SelectItem key={option.value} value={option.value}>
                               <div className='flex items-center gap-2'>
                                 <div
-                                  className={`h-4 w-4 rounded-full ${option.bgClass}`}
+                                  className={`h-4 w-4 rounded-full ${getBgColorClass(option.value)}`}
                                 />
                                 {option.label}
                               </div>
diff --git a/web/default/src/lib/colors.ts b/web/default/src/lib/colors.ts
index b439f6af..81c32317 100644
--- a/web/default/src/lib/colors.ts
+++ b/web/default/src/lib/colors.ts
@@ -33,24 +33,26 @@ export type SemanticColor =
   | 'indigo'
   | 'violet'
   | 'grey'
+  | 'slate'
 
 export const colorToBgClass: Record<SemanticColor, string> = {
-  blue: 'bg-chart-1',
-  green: 'bg-success',
-  cyan: 'bg-chart-2',
-  purple: 'bg-chart-4',
-  pink: 'bg-chart-5',
-  red: 'bg-destructive',
-  orange: 'bg-warning',
-  amber: 'bg-warning',
-  yellow: 'bg-warning',
-  lime: 'bg-chart-3',
-  'light-green': 'bg-success',
-  teal: 'bg-chart-2',
-  'light-blue': 'bg-info',
-  indigo: 'bg-chart-1',
-  violet: 'bg-chart-4',
-  grey: 'bg-neutral',
+  blue: 'bg-blue-500',
+  green: 'bg-green-500',
+  cyan: 'bg-cyan-500',
+  purple: 'bg-purple-500',
+  pink: 'bg-pink-500',
+  red: 'bg-red-500',
+  orange: 'bg-orange-500',
+  amber: 'bg-amber-500',
+  yellow: 'bg-yellow-500',
+  lime: 'bg-lime-500',
+  'light-green': 'bg-green-400',
+  teal: 'bg-teal-500',
+  'light-blue': 'bg-sky-400',
+  indigo: 'bg-indigo-500',
+  violet: 'bg-violet-500',
+  grey: 'bg-gray-400',
+  slate: 'bg-slate-500',
 }
 
 export const avatarColorMap: Record<SemanticColor, string> = {
@@ -70,6 +72,7 @@ export const avatarColorMap: Record<SemanticColor, string> = {
   indigo: 'bg-chart-1/10 text-chart-1',
   violet: 'bg-chart-4/10 text-chart-4',
   grey: 'bg-muted text-muted-foreground',
+  slate: 'bg-muted text-muted-foreground',
 }
 
 export function getAvatarColorClass(name: string): string {