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.
2026-09-14 19:48:48 -04:00
parent efd4a4fa66
commit a2d4a38925
34 changed files with 5093 additions and 3144 deletions
@@ -0,0 +1,101 @@
+<script lang="ts">
+    interface Tab {
+        id: string;
+        label: string;
+        badge?: string | number | null;
+        disabled?: boolean;
+    }
+
+    interface Props {
+        tabs: Tab[];
+        value: string;
+        onchange?: (id: string) => void;
+        ariaLabel?: string;
+        size?: 'sm' | 'md';
+    }
+
+    let { tabs, value = $bindable(), onchange, ariaLabel, size = 'md' }: Props = $props();
+
+    function select(id: string, disabled: boolean | undefined) {
+        if (disabled) return;
+        value = id;
+        onchange?.(id);
+    }
+</script>
+
+<div class="tabs s-{size}" role="tablist" aria-label={ariaLabel}>
+    {#each tabs as t (t.id)}
+        <button
+            type="button"
+            class="tab"
+            class:active={value === t.id}
+            role="tab"
+            aria-selected={value === t.id}
+            disabled={t.disabled}
+            onclick={() => select(t.id, t.disabled)}
+        >
+            <span class="lbl">{t.label}</span>
+            {#if t.badge !== undefined && t.badge !== null && t.badge !== ''}
+                <span class="badge">{t.badge}</span>
+            {/if}
+        </button>
+    {/each}
+</div>
+
+<style>
+    .tabs {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        padding: 4px;
+        background: color-mix(in oklab, var(--surface) 80%, transparent);
+        border-radius: var(--radius-pill);
+        border: 1px solid var(--border-subtle);
+    }
+    .tab {
+        appearance: none;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        background: transparent;
+        border: none;
+        color: var(--text-tertiary);
+        font-family: var(--font-body);
+        font-weight: var(--weight-medium);
+        cursor: pointer;
+        border-radius: var(--radius-pill);
+        transition:
+            color var(--dur-fast) var(--ease-standard),
+            background-color var(--dur-fast) var(--ease-standard);
+    }
+    .s-sm .tab { padding: 6px 12px; font-size: var(--text-xs); }
+    .s-md .tab { padding: 8px 16px; font-size: var(--text-sm); }
+
+    .tab:hover:not(:disabled):not(.active) { color: var(--text-primary); }
+    .tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+    .tab:disabled { opacity: 0.4; cursor: not-allowed; }
+
+    .tab.active {
+        background: var(--surface-raised);
+        color: var(--text-primary);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+    }
+
+    .badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 18px;
+        height: 18px;
+        padding: 0 5px;
+        border-radius: var(--radius-pill);
+        background: var(--surface-overlay);
+        color: var(--text-secondary);
+        font-family: var(--font-mono);
+        font-size: 10px;
+    }
+    .tab.active .badge {
+        background: var(--accent-primary);
+        color: var(--text-on-accent);
+    }
+</style>