5707a89ad5
Fix systemic missing-colon bugs in layout.css where property values like top, left, right, bottom, gap, padding were directly followed by var() without a colon separator. This broke all fixed-position panels in the live view. Also add missing --space-half token to tokens.css and complete design token migration across remaining CSS files. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
202 lines
6.2 KiB
CSS
202 lines
6.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 */
|
|
--orange: #e5780d; /* orange-9 (GDOP fair) */
|
|
|
|
/* ── 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-bg: rgba(70, 167, 88, 0.15);
|
|
--ok-muted: rgba(70, 167, 88, 0.2);
|
|
--ok-border: rgba(70, 167, 88, 0.3);
|
|
--warn-bg: rgba(229, 160, 13, 0.15);
|
|
--warn-muted: rgba(229, 160, 13, 0.2);
|
|
--warn-border: rgba(229, 160, 13, 0.3);
|
|
--alert-bg: rgba(229, 72, 77, 0.15);
|
|
--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-3xs: 10px;
|
|
--text-2xs: 11px;
|
|
--text-xs: 12px;
|
|
--text-sm: 14px;
|
|
--text-base: 16px;
|
|
--text-md: 15px;
|
|
--text-lg: 20px;
|
|
--text-xl: 18px;
|
|
--text-2xl: 28px;
|
|
--text-22: 22px;
|
|
--text-3xl: 24px;
|
|
--text-4xl: 32px;
|
|
--text-5xl: 48px;
|
|
--text-6xl: 64px;
|
|
|
|
--lh-body: 1.5;
|
|
--lh-heading: 1.2;
|
|
--fw-body: 400;
|
|
--fw-heading: 600;
|
|
|
|
/* ── Spacing (4 px grid) ── */
|
|
--space-half: 2px;
|
|
--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;
|
|
--radius-pill: 9999px;
|
|
|
|
/* ── Shadows (flat elevation, no drop shadows per §8e) ── */
|
|
--shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
--shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.5);
|
|
|
|
/* ── Overlays ── */
|
|
--overlay: rgba(0, 0, 0, 0.5);
|
|
--overlay-strong: rgba(0, 0, 0, 0.7);
|
|
|
|
/* ── Transitions ── */
|
|
--transition-fast: 150ms ease;
|
|
--transition-base: 200ms ease;
|
|
|
|
/* ── Section tints (briefing, guided-help) ── */
|
|
--section-sleep-bg: rgba(70, 167, 88, 0.1);
|
|
--section-people-bg: rgba(62, 150, 232, 0.1);
|
|
--section-anomaly-bg: rgba(229, 160, 13, 0.1);
|
|
--section-health-bg: rgba(155, 157, 170, 0.1);
|
|
--section-predict-bg: rgba(62, 150, 232, 0.1);
|
|
--section-learn-bg: rgba(229, 160, 13, 0.1);
|
|
--section-portal-bg: rgba(62, 150, 232, 0.15);
|
|
--section-privacy-bg: rgba(62, 150, 232, 0.1);
|
|
--section-privacy-border: rgba(62, 150, 232, 0.2);
|
|
|
|
/* ── Spinner track ── */
|
|
--spinner-track: rgba(62, 150, 232, 0.2);
|
|
|
|
/* ── Subtle highlight (replaces rgba(255,255,255,0.07)) ── */
|
|
--highlight-subtle: rgba(255, 255, 255, 0.07);
|
|
|
|
/* ── Dark overlay panels (replaces rgba(0,0,0,0.9)) ── */
|
|
--overlay-panel: rgba(0, 0, 0, 0.9);
|
|
|
|
/* ── Card frosted bg (replaces rgba(30,32,36,0.95)) ── */
|
|
--bg-frosted: rgba(30, 32, 36, 0.95);
|
|
--bg-frosted-strong: rgba(30, 32, 36, 0.98);
|
|
|
|
/* ── Selected row highlight ── */
|
|
--row-selected: rgba(62, 150, 232, 0.18);
|
|
|
|
/* ── Live view overlays ── */
|
|
--live-status-bg: rgba(0, 0, 0, 0.85);
|
|
--live-panel-bg: rgba(0, 0, 0, 0.8);
|
|
--live-chart-bg: rgba(0, 0, 0, 0.8);
|
|
--live-node-bg: rgba(0, 0, 0, 0.8);
|
|
--live-presence-bg: rgba(0, 0, 0, 0.8);
|
|
|
|
/* ── Inline-element opacity levels ── */
|
|
--opacity-subtle: 0.03;
|
|
--opacity-light: 0.05;
|
|
--opacity-soft: 0.08;
|
|
--opacity-mid: 0.1;
|
|
--opacity-medium: 0.12;
|
|
--opacity-strong: 0.15;
|
|
|
|
/* ── Accent interaction bg (blue tinted) ── */
|
|
--blue-interact-bg: rgba(62, 150, 232, 0.2);
|
|
--blue-interact-border: rgba(62, 150, 232, 0.5);
|
|
--blue-interact-active: rgba(62, 150, 232, 0.25);
|
|
|
|
/* ── Stationary badge ── */
|
|
--stationary-bg: rgba(62, 150, 232, 0.25);
|
|
|
|
/* ── Green glow dot ── */
|
|
--ok-glow: rgba(70, 167, 88, 0.5);
|
|
|
|
/* ── Letter-spacing ── */
|
|
--ls-wide: 1px;
|
|
|
|
/* ── Component sizes ── */
|
|
--size-icon-sm: 16px;
|
|
--size-icon: 18px;
|
|
--size-icon-md: 20px;
|
|
--size-icon-lg: 24px;
|
|
--size-icon-xl: 28px;
|
|
--size-icon-2xl: 32px;
|
|
--size-touch: 44px;
|
|
--size-header: 56px;
|
|
--size-sidebar: 360px;
|
|
}
|