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

✨ style(web): unify design system across default frontend

Browse Source 
🔤 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:
t0ng7u
2026-07-11 02:02:11 +08:00
parent 0cb741d8da
commit 262ab93123
97 changed files with 561 additions and 863 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/components/ui/chart.tsx
Vendored
+1 -1
View File
@@ -269,7 +269,7 @@ function ChartTooltipContent({
</span>
</div>
{item.value != null && (
<span className='text-foreground font-mono font-medium tabular-nums'>
<span className='text-foreground font-medium tabular-nums'>
{typeof item.value === 'number'
? item.value.toLocaleString()
: String(item.value)}
web/default/src/components/ui/titled-card.tsx
Vendored
+4 -4
View File
@@ -63,7 +63,7 @@ export function TitledCard({
className={cn('gap-0 overflow-hidden py-0', className)}
>
<CardHeader
className={cn('border-b p-3 !pb-3 sm:p-5 sm:!pb-5', headerClassName)}
className={cn('border-b p-4 !pb-4 sm:p-5 sm:!pb-5', headerClassName)}
>
<div className='flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between'>
<div className='flex min-w-0 items-center gap-3'>
@@ -80,7 +80,7 @@ export function TitledCard({
<div className='min-w-0'>
<CardTitle
className={cn(
'text-lg tracking-tight sm:text-xl',
'text-base font-semibold tracking-tight',
titleClassName
)}
>
@@ -88,7 +88,7 @@ export function TitledCard({
</CardTitle>
{description != null && (
<CardDescription
className={cn('text-xs sm:text-sm', descriptionClassName)}
className={cn('text-sm', descriptionClassName)}
>
{description}
</CardDescription>
@@ -100,7 +100,7 @@ export function TitledCard({
)}
</div>
</CardHeader>
<CardContent className={cn('p-3 sm:p-5', contentClassName)}>
<CardContent className={cn('p-4 sm:p-5', contentClassName)}>
{children}
</CardContent>
</Card>