Restraint-first design language: neutral gray surfaces + one blue accent (cyan/amber/red reserved for state), 8pt spacing, softer radii, one ambient + one raised shadow, standardized motion tokens. Alfa Slab One demoted to BrandMark only; Inter carries all page copy. New primitives (Button, Card, Badge, Stat, SectionHeader, Skeleton, EmptyState, Tabs, Breadcrumbs, StatusPip, Field, Input, Select, Textarea) plus motion utilities (tweenNumber, viewTransition) and a global toast system. All eight route surfaces rewritten on top: Fleet gains an overview hero, Server detail restructures into tabs, Deployments gets a collapsible drift summary + per-server pipeline visual, and the scripts/configs/plugins/betas flows adopt the new form primitives. Sticky translucent nav with backdrop blur, view-transition cross-fades between routes, staggered card entrance on Fleet, breathing status pip halo, tabular-numeric player counts. Gmail-style g-key nav shortcuts. Mobile stacks below 720px; prefers-reduced-motion neutralizes durations. Legacy tokens preserved as aliases so any un-migrated code still renders.
23 lines
963 B
TypeScript
23 lines
963 B
TypeScript
// Font imports for the Electric Cherry design system.
|
|
//
|
|
// These live in a JS module (not a CSS `@import` chain) because Vite's
|
|
// CSS processor inlines @import'd CSS as text but doesn't crawl its
|
|
// url() references to emit the referenced woff/woff2 files as build
|
|
// assets. Importing the CSS from JS puts it on the module graph, which
|
|
// Vite *does* walk, so the font binaries end up in
|
|
// build/client/_app/immutable/assets/files/.
|
|
//
|
|
// Global set:
|
|
// - Inter (400/500/600/700) — everything.
|
|
// - JetBrains Mono (400/500) — data cells (timestamps, scores, IDs).
|
|
//
|
|
// Alfa Slab One is NOT loaded here — it's used only in BrandMark, which
|
|
// imports its own weight so the rest of the product doesn't pay for it.
|
|
|
|
import '@fontsource/inter/400.css';
|
|
import '@fontsource/inter/500.css';
|
|
import '@fontsource/inter/600.css';
|
|
import '@fontsource/inter/700.css';
|
|
import '@fontsource/jetbrains-mono/400.css';
|
|
import '@fontsource/jetbrains-mono/500.css';
|