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>

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 {