feat(ui): design polish — semantic status tokens, self-hosted fonts, a11y, skeletons
Design system & theme: - add semantic status tokens (success/warning/danger + track) for both themes - replace hardcoded green/red/amber/blue across ~20 files with tokens - fix light-mode bugs (bg-white/10, rgba white gauges) via theme-aware track - add named text-2xs (11px) step; unify ad-hoc text-[10px]/[11px] - consistent card elevation (shadow-sm) + opt-in interactive hover Fonts & perf: - self-host DM Sans / JetBrains Mono via @fontsource-variable (font-display: swap) - drop render-blocking Google Fonts link; remove unused Geist dep Accessibility & mobile: - global prefers-reduced-motion; focus-visible on custom buttons - StatusDot role/aria-label; aria-sort on sortable table headers - Button auto nativeButton=false when rendered as Link/anchor - 100vh -> dvh in app shell; pointer-coarse min 44px touch targets Loading & types: - Skeleton primitive + table loading state on InstancesPage - fix all 36 pre-existing tsc errors (Select null coercion, SDN query keys, Dashboard Rec typing, VMInstance, profile language, JSX namespace) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -4,9 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||||
<!-- Fonts are self-hosted via @fontsource-variable (imported in main.tsx) -->
|
||||
<title>PVEmanager</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Reference in New Issue
Block a user