feat(ui): design polish — semantic status tokens, self-hosted fonts, a11y, skeletons #1

Merged
markmorado merged 1 commits from ui/design-polish into main 2026-07-04 06:42:06 +05:00
Owner

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

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>
markmorado added 1 commit 2026-07-04 06:41:59 +05:00
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>
markmorado merged commit c0296e47b8 into main 2026-07-04 06:42:06 +05:00
Sign in to join this conversation.
No Reviewers
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: markmorado/pvemanager#1