/** * tokens.css — ExcaliClaw Design Tokens * Single source of truth for all visual constants. * Adapted from SiD Viewer design system. * Zero hardcoded values outside this file. */ :root { /* ─── Colors: Background ──────────────────────────────── */ --color-bg: #1a1a2e; --color-bg-surface: #16213e; --color-bg-raised: #1a2744; --color-bg-overlay: rgba(10, 10, 20, 0.85); /* ─── Colors: Text ────────────────────────────────────── */ --color-text: #eeeeee; --color-text-muted: #8892b0; --color-text-dim: #5a6380; /* ─── Colors: Accent ──────────────────────────────────── */ --color-accent: #e94560; --color-gold: #f0c040; --color-teal: #64ffda; --color-border: #233554; --color-border-focus: #64ffda; /* ─── Colors: Status ──────────────────────────────────── */ --color-connected: #64ffda; --color-disconnected: #e94560; --color-pending: #f0c040; /* ─── Typography ──────────────────────────────────────── */ --font-sans: 'Inter', -apple-system, sans-serif; --font-serif: 'Playfair Display', Georgia, serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --font-display: var(--font-serif); --text-xs: 0.7rem; --text-sm: 0.82rem; --text-base: 1rem; --text-lg: 1.2rem; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ─── Spacing ─────────────────────────────────────────── */ --space-xs: 0.3rem; --space-sm: 0.5rem; --space-md: 0.8rem; --space-lg: 1.2rem; --space-xl: 1.5rem; /* ─── Aliases (referenced in app.css) ─────────────────── */ --color-bg-card: var(--color-bg-surface); --color-link: var(--color-teal); /* ─── Borders & Radius ────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --border-width: 1px; /* ─── Layout ──────────────────────────────────────────── */ --topbar-height: 44px; /* ─── Transitions ─────────────────────────────────────── */ --transition-fast: all 0.15s ease; --transition-base: all 0.25s ease; /* ─── Z-index ─────────────────────────────────────────── */ --z-canvas: 0; --z-topbar: 9999; --z-overlay: 10000; } /* ══════════════════════════════════════════════════════════ Jedi theme — dark (default for this family) JOTF Dark Slate: #0F172A bg, Plasma Magenta accent, Slate scale. Fonts: Satoshi (body) + Clash Display (headlines) per JOTF spec. Applied via [data-theme-family="jedi"] on . ══════════════════════════════════════════════════════════ */ [data-theme-family="jedi"] { /* Typography — JOTF font stack */ --font-sans: 'Satoshi', -apple-system, sans-serif; --font-serif: 'Clash Display', sans-serif; /* Backgrounds — JOTF Dark Slate */ --color-bg: #0F172A; --color-bg-surface: #1E293B; --color-bg-raised: #243040; --color-bg-overlay: rgba(8, 14, 30, 0.92); --color-bg-card: #1E293B; /* Text — Slate scale */ --color-text: #F1F5F9; --color-text-muted: #94A3B8; --color-text-dim: #64748B; /* Accent — Plasma Magenta only */ --color-accent: #EC4899; --color-gold: #F472B6; --color-teal: #F472B6; --color-link: #F472B6; --color-border: #334155; --color-border-focus: #EC4899; /* Status — Magenta scale + Slate neutral */ --color-connected: #EC4899; --color-disconnected: #DB2777; --color-pending: #94A3B8; } /* ══════════════════════════════════════════════════════════ Jedi theme — light variant JOTF Rule of Three: white bg, Plasma Magenta accent (restrained). ══════════════════════════════════════════════════════════ */ [data-theme-family="jedi"][data-theme="light"] { --color-bg: #F8FAFC; --color-bg-surface: #FFFFFF; --color-bg-raised: #F1F5F9; --color-bg-overlay: rgba(248, 250, 252, 0.96); --color-bg-card: #FFFFFF; --color-text: #0F172A; --color-text-muted: #475569; --color-text-dim: #94A3B8; --color-accent: #DB2777; --color-gold: #EC4899; --color-teal: #DB2777; --color-link: #DB2777; --color-border: #E2E8F0; --color-border-focus: #EC4899; --color-connected: #DB2777; --color-disconnected: #BE185D; --color-pending: #94A3B8; } /* ── Classic light theme ───────────────────────────────────── */ [data-theme="light"] { --color-bg: #f4f5f9; --color-bg-surface: #ffffff; --color-bg-raised: #eef0f8; --color-bg-overlay: rgba(240, 242, 250, 0.96); --color-text: #1a1a2e; --color-text-muted: #5a6390; --color-text-dim: #8892b0; --color-accent: #c0143a; --color-gold: #b87800; --color-teal: #00836e; --color-border: #dde2ee; --color-border-focus: #00836e; --color-connected: #00836e; --color-disconnected: #c0143a; --color-pending: #b87800; }