chaos/chaos-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web/default): api-info color dot shows wrong color due to semantic token mismatch (#4824)

Browse Source 
* 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>
This commit is contained in:
Micah-Zheng
2026-05-19 16:15:02 +08:00
committed by GitHub
parent 8db32213e7
commit c78573ce03
2 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/features/system-settings/content/api-info-section.tsx
Vendored
+18 -21
View File
@@ -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>