✨ style(web): unify design system across default frontend
🔤 Typography - Fix --font-sans stack: 'Public Sans Variable' was never applied (wrong family name), add CJK fallbacks (PingFang SC / Microsoft YaHei UI / Noto Sans SC) - Sync <html lang> with i18n language for correct CJK glyph selection - Remove dead fake font system (font-provider.tsx, config/fonts.ts, --font-inter/--font-manrope) - Typography contract: 3-tier headings, arbitrary text-[10px]/[11px] → text-xs (46 files), no uppercase table headers, font-bold → font-semibold - Numbers use tabular-nums only; font-mono reserved for keys/IDs/code (29 files) 🎨 Color discipline - Retire StatusBadge string-hash rainbow (autoColor → neutral); all variants resolve to 5 semantic voices - Add tintedBadgeClassMap as the single tinted-pill recipe - Replace hardcoded emerald/amber/rose/sky classes with semantic tokens across ~30 files (timing badges, progress bars, system panels, pricing, rankings, log row tints) - Drop all !important text overrides and [font-family:var(--font-body)] hacks 🧘 Motion restraint - Remove admin entrance animations: table row stagger, card hover lift/shadow, button press scale, dashboard shimmer line - Neuter page-transition stagger components into plain wrappers; page transitions reduced to pure opacity fade - Decorative motion stays landing-only 📐 Shape - Single radius source: --radius 1rem → 0.625rem - Sparklines use solid chart tokens instead of decorative gradients - PanelWrapper: border-only (no shadow), align radius with Card 📏 Guardrails - Add "Design System Discipline" section (3.10.1) to web/default/AGENTS.md ✅ Verified: tsgo typecheck clean, rsbuild production build passes
This commit is contained in:
+4
-4
@@ -186,10 +186,10 @@ function InlineMetric(props: {
|
||||
className='text-muted-foreground/50 size-3 shrink-0'
|
||||
aria-hidden='true'
|
||||
/>
|
||||
<span className='text-muted-foreground text-[11px]'>{props.label}</span>
|
||||
<span className='text-muted-foreground text-xs'>{props.label}</span>
|
||||
<span
|
||||
className={cn(
|
||||
'font-mono text-xs font-semibold tabular-nums',
|
||||
'text-xs font-semibold tabular-nums',
|
||||
props.valueClassName
|
||||
)}
|
||||
>
|
||||
@@ -204,7 +204,7 @@ function ModelBadge(props: { model: PerfModelSummary }) {
|
||||
|
||||
return (
|
||||
<span className='bg-muted/50 inline-flex items-center gap-1.5 rounded-full px-2.5 py-1'>
|
||||
<span className='max-w-[10rem] truncate font-mono text-[11px]'>
|
||||
<span className='max-w-[10rem] truncate font-mono text-xs'>
|
||||
{model.model_name}
|
||||
</span>
|
||||
<span
|
||||
@@ -216,7 +216,7 @@ function ModelBadge(props: { model: PerfModelSummary }) {
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
'font-mono text-[11px] font-semibold tabular-nums',
|
||||
'text-xs font-semibold tabular-nums',
|
||||
getSuccessRateTextClass(model.success_rate)
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user