refactor(theme): update color classes

0c806db9 · CaIon · 490395b2 · 0c806db9 · 0c806db9 · 0c806db9
Commit 0c806db9 authored Jun 19, 2026 by CaIon
12 changed files
--- a/web/default/src/features/dashboard/components/models/consumption-distribution-chart.tsx
+++ b/web/default/src/features/dashboard/components/models/consumption-distribution-chart.tsx
@@ -102,17 +102,9 @@ export function ConsumptionDistributionChart(
        props.loading ? [] : props.data,
        timeGranularity,
        t,
-        customization.preset,
        chartRadius
      ),
-    [
+    [props.data, props.loading, timeGranularity, t, chartRadius]
-      props.data,
-      props.loading,
-      timeGranularity,
-      t,
-      customization.preset,
-      chartRadius,
-    ]
  )
  const spec = chartType === 'bar' ? chartData.spec_line : chartData.spec_area
  const specType = typeof spec?.type === 'string' ? spec.type : chartType

--- a/web/default/src/features/dashboard/components/models/model-charts.tsx
+++ b/web/default/src/features/dashboard/components/models/model-charts.tsx
@@ -100,17 +100,9 @@ export function ModelCharts(props: ModelChartsProps) {
        props.loading ? [] : props.data,
        timeGranularity,
        t,
-        customization.preset,
        chartRadius
      ),
-    [
+    [props.data, props.loading, timeGranularity, t, chartRadius]
-      props.data,
-      props.loading,
-      timeGranularity,
-      t,
-      customization.preset,
-      chartRadius,
-    ]
  )
  const spec = chartData[CHART_SPEC_KEYS[activeTab]]

--- a/web/default/src/features/dashboard/components/overview/uptime-panel.tsx
+++ b/web/default/src/features/dashboard/components/overview/uptime-panel.tsx
@@ -30,10 +30,10 @@ import type {
 import { PanelWrapper } from '../ui/panel-wrapper'
 const STATUS_COLOR_MAP: Record<number, string> = {
-  1: 'bg-success',
+  1: 'bg-emerald-500',
-  0: 'bg-destructive',
+  0: 'bg-red-500',
-  2: 'bg-warning',
+  2: 'bg-amber-500',
-  3: 'bg-info',
+  3: 'bg-blue-500',
 }
 const DEFAULT_STATUS_COLOR = 'bg-muted-foreground/40'

--- a/web/default/src/features/dashboard/components/users/user-charts.tsx
+++ b/web/default/src/features/dashboard/components/users/user-charts.tsx
@@ -23,7 +23,6 @@ import { Users, Loader2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { getRollingDateRange, type TimeGranularity } from '@/lib/time'
 import { VCHART_OPTION } from '@/lib/vchart'
-import { useThemeCustomization } from '@/context/theme-customization-provider'
 import { useTheme } from '@/context/theme-provider'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
@@ -66,7 +65,6 @@ const TOP_USER_LIMIT_OPTIONS = [5, 10, 20, 50]
 export function UserCharts() {
  const { t } = useTranslation()
  const { resolvedTheme } = useTheme()
-  const { customization } = useThemeCustomization()
  const [themeReady, setThemeReady] = useState(false)
  const themeManagerRef = useRef<
    (typeof import('@visactor/vchart'))['ThemeManager'] | null
@@ -138,18 +136,9 @@ export function UserCharts() {
        isLoading ? [] : (userData ?? []),
        timeGranularity,
        t,
-        topUserLimit,
+        topUserLimit
-        customization.preset
      ),
-    [
+    [userData, isLoading, timeGranularity, t, topUserLimit]
-      userData,
-      isLoading,
-      timeGranularity,
-      t,
-      topUserLimit,
-      customization.preset,
-      customization.radius,
-    ]
  )
  return (
@@ -240,7 +229,7 @@ export function UserCharts() {
                  themeReady &&
                  spec && (
                    <VChart
-                      key={`user-${chart.value}-${topUserLimit}-${resolvedTheme}-${customization.preset}`}
+                      key={`user-${chart.value}-${topUserLimit}-${resolvedTheme}`}
                      spec={{
                        ...spec,
                        theme: resolvedTheme === 'dark' ? 'dark' : 'light',

--- a/web/default/src/features/dashboard/lib/api-info.ts
+++ b/web/default/src/features/dashboard/lib/api-info.ts
@@ -23,12 +23,12 @@ import type { PingStatus } from '@/features/dashboard/types'
 */
 export function getLatencyColorClass(latency: number): string {
  if (latency < 200) {
-    return 'text-success'
+    return 'text-green-600 dark:text-green-400'
  }
  if (latency < 500) {
-    return 'text-warning'
+    return 'text-yellow-600 dark:text-yellow-400'
  }
-  return 'text-destructive'
+  return 'text-red-600 dark:text-red-400'
 }
 /**

--- a/web/default/src/features/dashboard/lib/charts.ts
+++ b/web/default/src/features/dashboard/lib/charts.ts
@@ -38,37 +38,7 @@ type TooltipLineItem = {
  shapeSize?: number
 }
-const THEME_CHART_COLOR_VARIABLES = [
+function getVChartDefaultColors(domainLength: number) {
-  '--chart-1',
-  '--chart-2',
-  '--chart-3',
-  '--chart-4',
-  '--chart-5',
-] as const
-function getThemeChartColors(themeKey?: string): string[] {
-  if (typeof document === 'undefined') return []
-  void themeKey
-  const bodyStyle = window.getComputedStyle(document.body)
-  const rootStyle = window.getComputedStyle(document.documentElement)
-  return THEME_CHART_COLOR_VARIABLES.map((name) => {
-    return (
-      bodyStyle.getPropertyValue(name) || rootStyle.getPropertyValue(name)
-    ).trim()
-  }).filter(Boolean)
-}
-function getVChartDefaultColors(domainLength: number, themeKey?: string) {
-  const themeColors = getThemeChartColors(themeKey)
-  if (themeColors.length > 0) {
-    return Array.from(
-      { length: Math.max(domainLength, themeColors.length) },
-      (_, index) => themeColors[index % themeColors.length]
-    )
-  }
  const scheme =
    vchartDefaultDataScheme.find(
      (item) => !item.maxDomainLength || domainLength <= item.maxDomainLength
@@ -98,7 +68,6 @@ export function processChartData(
  data: QuotaDataItem[],
  timeGranularity: TimeGranularity = 'day',
  t?: TFunction,
-  themeKey?: string,
  chartCornerRadius?: number
 ): ProcessedChartData {
  const tt: TFunction = t ?? ((x) => x)
@@ -290,10 +259,7 @@ export function processChartData(
  const sortedTimes = Array.from(timeModelMap.keys()).sort()
  const sortedModels = [...allModels].sort()
  const modelColorDomain = Array.from(new Set([...sortedModels, otherLabel]))
-  const modelColorRange = getVChartDefaultColors(
+  const modelColorRange = getVChartDefaultColors(modelColorDomain.length)
-    modelColorDomain.length,
-    themeKey
-  )
  const otherColor = modelColorRange[modelColorDomain.indexOf(otherLabel)]
  const otherTooltipColor =
    typeof otherColor === 'string' ? otherColor : '#FF8A00'
@@ -719,7 +685,7 @@ export function processChartData(
  }
 }
-const USER_COLOR_FALLBACKS = [
+const USER_COLORS = [
  '#5B8FF9',
  '#5AD8A6',
  '#F6BD16',
@@ -736,20 +702,11 @@ export function processUserChartData(
  data: QuotaDataItem[],
  timeGranularity: TimeGranularity = 'day',
  t?: TFunction,
-  limit = 10,
+  limit = 10
-  themeKey?: string
 ): ProcessedUserChartData {
  const tt: TFunction = t ?? ((x) => x)
  const { config } = getCurrencyDisplay()
  const quotaPerUnit = config.quotaPerUnit
-  const themeUserColors = getThemeChartColors(themeKey)
-  const userColorRange =
-    themeUserColors.length > 0
-      ? Array.from(
-          { length: Math.max(limit, themeUserColors.length) },
-          (_, index) => themeUserColors[index % themeUserColors.length]
-        )
-      : USER_COLOR_FALLBACKS
  const formatVal = (raw: number) => renderQuotaCompat(raw, 2)
@@ -767,7 +724,7 @@ export function processUserChartData(
        subtext: tt('No data available'),
      },
      legends: { visible: false },
-      color: { type: 'ordinal', range: userColorRange },
+      color: { type: 'ordinal', range: USER_COLORS },
      background: { fill: 'transparent' },
    },
    spec_user_trend: {
@@ -782,7 +739,7 @@ export function processUserChartData(
        subtext: tt('No data available'),
      },
      legends: { visible: true, selectMode: 'single' },
-      color: { type: 'ordinal', range: userColorRange },
+      color: { type: 'ordinal', range: USER_COLORS },
      point: { visible: false },
      background: { fill: 'transparent' },
    },
@@ -812,7 +769,7 @@ export function processUserChartData(
  const userColorMap = topUsers.reduce<Record<string, string>>(
    (acc, user, i) => {
-      acc[user] = userColorRange[i % userColorRange.length]
+      acc[user] = USER_COLORS[i % USER_COLORS.length]
      return acc
    },
    {}

--- a/web/default/src/features/performance-metrics/lib/format.ts
+++ b/web/default/src/features/performance-metrics/lib/format.ts
@@ -61,18 +61,18 @@ export function getSuccessRateLevel(rate: number): SuccessRateLevel {
 }
 const SUCCESS_RATE_TEXT_CLASS: Record<SuccessRateLevel, string> = {
-  excellent: 'text-success',
+  excellent: 'text-emerald-600 dark:text-emerald-400',
-  good: 'text-success/70',
+  good: 'text-emerald-500 dark:text-emerald-300',
-  warning: 'text-warning',
+  warning: 'text-amber-600 dark:text-amber-400',
-  critical: 'text-destructive',
+  critical: 'text-red-600 dark:text-red-400',
  unknown: 'text-muted-foreground',
 }
 const SUCCESS_RATE_DOT_CLASS: Record<SuccessRateLevel, string> = {
-  excellent: 'bg-success',
+  excellent: 'bg-emerald-500',
-  good: 'bg-success/60',
+  good: 'bg-emerald-400',
-  warning: 'bg-warning',
+  warning: 'bg-amber-500',
-  critical: 'bg-destructive',
+  critical: 'bg-red-500',
  unknown: 'bg-muted-foreground',
 }

--- a/web/default/src/features/usage-logs/components/columns/column-helpers.tsx
+++ b/web/default/src/features/usage-logs/components/columns/column-helpers.tsx
@@ -137,11 +137,11 @@ export function createDurationColumn<T>(config: {
      const durationBgMap: Record<string, string> = {
        success:
-          'border border-emerald-200/40 bg-emerald-50/35 dark:border-emerald-900/40 dark:bg-emerald-950/15',
+          'border border-emerald-200/40 bg-emerald-50/35 !text-emerald-600 dark:border-emerald-900/40 dark:bg-emerald-950/15 dark:!text-emerald-400',
        warning:
-          'border border-amber-200/45 bg-amber-50/35 dark:border-amber-900/40 dark:bg-amber-950/15',
+          'border border-amber-200/45 bg-amber-50/35 !text-amber-600 dark:border-amber-900/40 dark:bg-amber-950/15 dark:!text-amber-400',
        danger:
-          'border border-rose-200/50 bg-rose-50/35 dark:border-rose-900/40 dark:bg-rose-950/15',
+          'border border-rose-200/50 bg-rose-50/35 !text-red-600 dark:border-rose-900/40 dark:bg-rose-950/15 dark:!text-red-400',
      }
      return (

--- a/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx
+++ b/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx
@@ -560,11 +560,11 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
        const timingBgMap: Record<string, string> = {
          success:
-            'border border-emerald-200/40 bg-emerald-50/35 dark:border-emerald-900/40 dark:bg-emerald-950/15',
+            'border border-emerald-200/40 bg-emerald-50/35 !text-emerald-600 dark:border-emerald-900/40 dark:bg-emerald-950/15 dark:!text-emerald-400',
          warning:
-            'border border-amber-200/45 bg-amber-50/35 dark:border-amber-900/40 dark:bg-amber-950/15',
+            'border border-amber-200/45 bg-amber-50/35 !text-amber-600 dark:border-amber-900/40 dark:bg-amber-950/15 dark:!text-amber-400',
          danger:
-            'border border-rose-200/50 bg-rose-50/35 dark:border-rose-900/40 dark:bg-rose-950/15',
+            'border border-rose-200/50 bg-rose-50/35 !text-red-600 dark:border-rose-900/40 dark:bg-rose-950/15 dark:!text-red-400',
          neutral:
            'border border-border/60 bg-muted/30 dark:border-border/40 dark:bg-muted/20',
        }

--- a/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx
+++ b/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx
@@ -147,9 +147,10 @@ export function useDrawingLogsColumns(
        <div className='flex max-w-[160px] flex-col gap-0.5'>
          <StatusBadge
            label={mjId}
-            autoColor={mjId}
+            copyText={mjId}
+            variant='neutral'
            size='sm'
-            className='border-border/60 bg-muted/30 max-w-full truncate rounded-md border px-1.5 py-0.5 font-mono'
+            className='border-border/60 bg-muted/30 !text-foreground max-w-full truncate rounded-md border px-1.5 py-0.5 font-mono'
          />
        </div>
      )

--- a/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx
+++ b/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx
@@ -174,9 +174,10 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
          <div className='flex max-w-[170px] flex-col gap-0.5'>
            <StatusBadge
              label={taskId}
-              autoColor={taskId}
+              copyText={taskId}
+              variant='neutral'
              size='sm'
-              className='border-border/60 bg-muted/30 max-w-full truncate rounded-md border px-1.5 py-0.5 font-mono'
+              className='border-border/60 bg-muted/30 !text-foreground max-w-full truncate rounded-md border px-1.5 py-0.5 font-mono'
            />
            <span className='text-muted-foreground/60 truncate text-[11px]'>
              {t(log.platform)} · {t(taskActionMapper.getLabel(log.action))}

--- a/web/default/src/styles/theme.css
+++ b/web/default/src/styles/theme.css
@@ -145,20 +145,20 @@ For commercial licensing, please contact support@quantumnous.com
 }
 .dark {
-  /* OpenAI-like dark mode: nearly black chrome, readable raised surfaces. */
+  /* OpenAI-like dark mode with a softer charcoal canvas. */
-  --background: oklch(0.185 0 0);
+  --background: oklch(0.225 0 0);
  --foreground: oklch(0.965 0 0);
-  --card: oklch(0.235 0 0);
+  --card: oklch(0.275 0 0);
  --card-foreground: oklch(0.965 0 0);
-  --popover: oklch(0.255 0 0);
+  --popover: oklch(0.295 0 0);
  --popover-foreground: oklch(0.965 0 0);
  --primary: oklch(0.965 0 0);
  --primary-foreground: oklch(0.145 0 0);
-  --secondary: oklch(0.285 0 0);
+  --secondary: oklch(0.325 0 0);
  --secondary-foreground: oklch(0.965 0 0);
-  --muted: oklch(0.255 0 0);
+  --muted: oklch(0.295 0 0);
  --muted-foreground: oklch(0.76 0 0);
-  --accent: oklch(0.325 0 0);
+  --accent: oklch(0.365 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.985 0 0);
@@ -178,14 +178,14 @@ For commercial licensing, please contact support@quantumnous.com
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.115 0 0);
+  --sidebar: oklch(0.195 0 0);
  --sidebar-foreground: oklch(0.95 0 0);
  --sidebar-primary: oklch(0.965 0 0);
  --sidebar-primary-foreground: oklch(0.145 0 0);
-  --sidebar-accent: oklch(0.31 0 0);
+  --sidebar-accent: oklch(0.35 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.68 0 0);
-  --skeleton-base: oklch(0.285 0 0);
+  --skeleton-base: oklch(0.325 0 0);
-  --skeleton-highlight: oklch(0.39 0 0);
+  --skeleton-highlight: oklch(0.43 0 0);
 }