Redesign UI with new token system, primitives, and motion
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.
This commit is contained in:
@@ -0,0 +1,27 @@
|
||||
// SvelteKit `onNavigate` helper — wraps client-side navigation in the
|
||||
// browser's View Transitions API so route changes cross-fade cleanly and
|
||||
// shared-element transitions (Fleet card → Server detail hero) morph.
|
||||
//
|
||||
// Chromium ships the API today; Firefox and Safari fall through to a plain
|
||||
// navigation — same behavior as before, just without the transition.
|
||||
|
||||
// Structural type — accepts whatever SvelteKit passes to onNavigate without
|
||||
// coupling to a specific @sveltejs/kit version's type name.
|
||||
type NavigationLike = { complete: Promise<unknown> };
|
||||
|
||||
export function enableViewTransitions(navigation: NavigationLike): Promise<void> | void {
|
||||
// Feature-detect without a custom Document extension — the DOM lib type
|
||||
// varies between TS versions, and any narrowing has to survive both.
|
||||
const start = (document as unknown as {
|
||||
startViewTransition?: (cb: () => void | Promise<void>) => unknown;
|
||||
}).startViewTransition;
|
||||
|
||||
if (typeof start !== 'function') return;
|
||||
|
||||
return new Promise<void>((resolve) => {
|
||||
start.call(document, async () => {
|
||||
resolve();
|
||||
await navigation.complete;
|
||||
});
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user