7162d4523e
Per plan.md §8e information architecture: - index.html (109 lines) is now a home page with status headline, 3 cards (People & Zones, Devices & Fleet Health, Recent Events), optional extras row, and mobile bottom nav - live.html serves the full 3D viewer at /live route - home-cards.js connects to /ws/dashboard for snapshot + incremental updates - tokens.css provides the Radix dark design system - layout.css provides the CSS Grid app shell with responsive breakpoints - home.css provides card grid, status banner, responsive mobile layout Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
111 lines
3.2 KiB
CSS
111 lines
3.2 KiB
CSS
/* ───────────────────────────────────────────────────────────────
|
|
Spaxel Design System — Radix Dark Tokens (§8e)
|
|
Single source of truth for all dashboard surfaces.
|
|
─────────────────────────────────────────────────────────────── */
|
|
|
|
:root {
|
|
/* ── Radix Slate (dark) ── */
|
|
--slate-1: #111113;
|
|
--slate-2: #18191b;
|
|
--slate-3: #1e2024;
|
|
--slate-4: #262830;
|
|
--slate-5: #2e3039;
|
|
--slate-6: #363842;
|
|
--slate-7: #43454f;
|
|
--slate-8: #565867;
|
|
--slate-9: #6b6e7b;
|
|
--slate-10: #7c7f8c;
|
|
--slate-11: #9b9daa;
|
|
--slate-12: #ededf0;
|
|
|
|
/* ── Radix Blue (accent) ── */
|
|
--blue-1: #11181e;
|
|
--blue-2: #152233;
|
|
--blue-3: #1a2e47;
|
|
--blue-4: #1e3a5f;
|
|
--blue-5: #224777;
|
|
--blue-6: #26558f;
|
|
--blue-7: #2e6aad;
|
|
--blue-8: #3579c5;
|
|
--blue-9: #3e96e8;
|
|
--blue-10: #4daaf5;
|
|
--blue-11: #68bdfa;
|
|
--blue-12: #aedcff;
|
|
|
|
/* ── Semantic state ── */
|
|
--ok: #46a758; /* green-9 */
|
|
--warn: #e5a00d; /* amber-9 */
|
|
--alert: #e5484d; /* red-9 */
|
|
|
|
/* ── Semantic aliases ── */
|
|
--color-success: var(--ok);
|
|
--color-warning: var(--warn);
|
|
--color-danger: var(--alert);
|
|
--color-primary: var(--blue-9);
|
|
--color-primary-hover: var(--blue-10);
|
|
|
|
/* ── State with opacity (for badges, backgrounds) ── */
|
|
--ok-muted: rgba(70, 167, 88, 0.2);
|
|
--ok-border: rgba(70, 167, 88, 0.3);
|
|
--warn-muted: rgba(229, 160, 13, 0.2);
|
|
--warn-border: rgba(229, 160, 13, 0.3);
|
|
--alert-muted: rgba(229, 72, 77, 0.2);
|
|
--alert-border: rgba(229, 72, 77, 0.3);
|
|
--blue-muted: rgba(62, 150, 232, 0.15);
|
|
--blue-border: rgba(62, 150, 232, 0.3);
|
|
|
|
/* ── Background steps ── */
|
|
--bg-page: var(--slate-2);
|
|
--bg-card: var(--slate-3);
|
|
--bg-panel: var(--slate-3);
|
|
--bg-hover: var(--slate-4);
|
|
--bg-active: var(--slate-5);
|
|
--bg-input: var(--slate-4);
|
|
|
|
/* ── Text ── */
|
|
--text-primary: var(--slate-12);
|
|
--text-secondary: var(--slate-11);
|
|
--text-muted: var(--slate-9);
|
|
--text-on-accent: #fff;
|
|
|
|
/* ── Border ── */
|
|
--border-default: rgba(255, 255, 255, 0.08);
|
|
--border-subtle: rgba(255, 255, 255, 0.04);
|
|
--border-strong: rgba(255, 255, 255, 0.15);
|
|
|
|
/* ── Typography ── */
|
|
--font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
|
|
--font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
|
|
|
|
--text-xs: 12px;
|
|
--text-sm: 14px;
|
|
--text-base: 16px;
|
|
--text-lg: 20px;
|
|
--text-2xl: 28px;
|
|
|
|
--lh-body: 1.5;
|
|
--lh-heading: 1.2;
|
|
--fw-body: 400;
|
|
--fw-heading: 600;
|
|
|
|
/* ── Spacing (4 px grid) ── */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-10: 40px;
|
|
--space-12: 48px;
|
|
--space-16: 64px;
|
|
|
|
/* ── Radius ── */
|
|
--radius-control: 6px;
|
|
--radius-card: 10px;
|
|
--radius-modal: 16px;
|
|
|
|
/* ── Transitions ── */
|
|
--transition-fast: 150ms ease;
|
|
--transition-base: 200ms ease;
|
|
}
|