/* ================================================================ muxplex — Design Tokens ================================================================ Single source of truth for all visual properties. Dark mode is the default. Light mode via prefers-color-scheme. Manual override: set `data-theme="light"` on . Usage: Last updated: 2026-03-27 ================================================================ */ /* ---------------------------------------------------------------- 1. COLOR — Dark mode (default) ---------------------------------------------------------------- */ :root { /* Backgrounds — luminance stepping (lighter = more elevated) */ --color-bg-base: #0D1117; /* Page background, deepest layer */ --color-bg-elevated: #10131C; /* Cards, panels, icon bg */ --color-bg-surface: #1A1F2B; /* Raised surfaces, hover states */ --color-bg-muted: #222433; /* Subtle fills, secondary panels */ /* Text — three-tier hierarchy */ --color-text-primary: #F0F6FF; /* Primary text, headings, wordmark 17.4:1 on bg-base */ --color-text-secondary: #8E95A3; /* Secondary labels, timestamps 6.3:1 on bg-base */ --color-text-disabled: #4A5060; /* Disabled controls, placeholder 2.4:1 — decorative */ /* Accents */ --color-accent-cyan: #00D9F5; /* Primary accent, links, focus rings 11.0:1 on bg-base */ --color-accent-amber: #F1A640; /* Notifications, activity indicators 9.3:1 on bg-base */ /* Borders — decorative, not relied upon for meaning */ --color-border-subtle: #1E2430; /* Dividers within a surface */ --color-border-default: #2A3040; /* Card outlines, input borders */ --color-border-strong: #3A4050; /* Emphasized borders, active outlines */ /* State / semantic — GitHub Primer–adjacent, tested on bg-base */ --color-success: #3FB950; /* 7.5:1 on bg-base */ --color-error: #F85149; /* 5.7:1 on bg-base */ --color-warning: #F1A640; /* 9.3:1 (= amber) */ --color-info: #58A6FF; /* 7.5:1 on bg-base */ /* State backgrounds — low-opacity tints for banners, badges */ --color-success-bg: rgba(63, 185, 80, 0.12); --color-error-bg: rgba(248, 81, 73, 0.12); --color-warning-bg: rgba(241, 166, 64, 0.12); --color-info-bg: rgba(88, 166, 255, 0.12); /* Overlay */ --color-backdrop: rgba(0, 0, 0, 0.60); --color-scrim: rgba(13, 17, 23, 0.80); /* Focus ring */ --color-focus-ring: #00D9F5; } /* ---------------------------------------------------------------- 2. COLOR — Light mode ---------------------------------------------------------------- Activated by OS preference or data-theme="light" on . Accent-accessible variants darken cyan/amber to pass 4.5:1 on white. Use these for TEXT set in accent colors; the bright values remain available for decorative/non-text use. ---------------------------------------------------------------- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --color-bg-base: #FFFFFF; --color-bg-elevated: #F0F0F0; --color-bg-surface: #E8E9EE; --color-bg-muted: #DADCE0; --color-text-primary: #0D1117; /* 18.9:1 on bg-base */ --color-text-secondary: #4A5060; /* 8.1:1 on bg-base */ --color-text-disabled: #8E95A3; /* 2.6:1 — decorative */ /* Bright values kept for icons, decorative indicators */ --color-accent-cyan: #007D8C; /* 4.9:1 on #FFF — AA text */ --color-accent-amber: #946000; /* 5.3:1 on #FFF — AA text */ --color-border-subtle: #E0E2E8; --color-border-default: #D0D2D8; --color-border-strong: #B0B4BC; --color-success: #1A7F37; --color-error: #CF222E; --color-warning: #946000; --color-info: #0969DA; --color-success-bg: rgba(26, 127, 55, 0.10); --color-error-bg: rgba(207, 34, 46, 0.10); --color-warning-bg: rgba(148, 96, 0, 0.10); --color-info-bg: rgba(9, 105, 218, 0.10); --color-backdrop: rgba(0, 0, 0, 0.30); --color-scrim: rgba(255, 255, 255, 0.80); --color-focus-ring: #007D8C; } } /* Manual override */ [data-theme="light"] { --color-bg-base: #FFFFFF; --color-bg-elevated: #F0F0F0; --color-bg-surface: #E8E9EE; --color-bg-muted: #DADCE0; --color-text-primary: #0D1117; --color-text-secondary: #4A5060; --color-text-disabled: #8E95A3; --color-accent-cyan: #007D8C; --color-accent-amber: #946000; --color-border-subtle: #E0E2E8; --color-border-default: #D0D2D8; --color-border-strong: #B0B4BC; --color-success: #1A7F37; --color-error: #CF222E; --color-warning: #946000; --color-info: #0969DA; --color-success-bg: rgba(26, 127, 55, 0.10); --color-error-bg: rgba(207, 34, 46, 0.10); --color-warning-bg: rgba(148, 96, 0, 0.10); --color-info-bg: rgba(9, 105, 218, 0.10); --color-backdrop: rgba(0, 0, 0, 0.30); --color-scrim: rgba(255, 255, 255, 0.80); --color-focus-ring: #007D8C; } /* ---------------------------------------------------------------- 3. TYPOGRAPHY ---------------------------------------------------------------- */ :root { /* Font stacks */ --font-display: 'Urbanist', system-ui, -apple-system, sans-serif; --font-ui: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Menlo', monospace; /* Font weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Type scale — DM Sans base (UI text) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.875rem; /* 14px — default UI text */ --text-md: 1rem; /* 16px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.875rem; /* 30px — Urbanist headings start here */ --text-3xl: 2.25rem; /* 36px */ /* Line heights */ --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.375; --leading-base: 1.5; --leading-relaxed: 1.625; /* Letter spacing */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.04em; /* All-caps labels */ /* Terminal-specific */ --tile-font-size: 10.5px; /* Monospace in overview tiles */ --terminal-font-size: 14px; /* Monospace in expanded xterm.js */ } /* ---------------------------------------------------------------- 4. SPACING ---------------------------------------------------------------- 4px base unit. Use semantic names for layout constants, numeric names for general-purpose spacing. ---------------------------------------------------------------- */ :root { /* Scale */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* Layout constants (from layout spec) */ --tile-min-width: 360px; --tile-height: 300px; --grid-gap: 8px; --page-margin: 16px; --app-bar-height: 48px; --status-bar-height: 36px; --tile-header-height: 28px; --picker-width: 400px; --picker-row-height: 36px; --picker-row-height-touch: 48px; --breakpoint-list: 640px; } /* ---------------------------------------------------------------- 5. BORDER RADIUS ---------------------------------------------------------------- */ :root { --radius-none: 0; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; } /* ---------------------------------------------------------------- 6. SHADOWS / ELEVATION ---------------------------------------------------------------- Dark mode: luminance stepping is the primary depth cue. Shadows serve as supplementary reinforcement on overlays. ---------------------------------------------------------------- */ :root { --shadow-none: none; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.25); --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.30); /* Glow — for bell indicator, focus ring */ --glow-cyan: 0 0 8px rgba(0, 217, 245, 0.35); --glow-amber: 0 0 8px rgba(241, 166, 64, 0.40); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.08); --glow-cyan: 0 0 8px rgba(0, 125, 140, 0.25); --glow-amber: 0 0 8px rgba(148, 96, 0, 0.25); } } [data-theme="light"] { --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.08); --glow-cyan: 0 0 8px rgba(0, 125, 140, 0.25); --glow-amber: 0 0 8px rgba(148, 96, 0, 0.25); } /* ---------------------------------------------------------------- 7. MOTION / TRANSITIONS ---------------------------------------------------------------- GPU-accelerated properties only (transform, opacity). Respect prefers-reduced-motion. ---------------------------------------------------------------- */ :root { /* Durations */ --duration-instant: 75ms; /* Hover color shifts */ --duration-fast: 150ms; /* Button press, toggle, focus */ --duration-moderate: 250ms; /* Tile zoom, panel slide */ --duration-slow: 400ms; /* Page transitions, complex */ /* Easing */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Decelerate — zoom in */ --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* Symmetric — zoom out */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot — picker appear */ --ease-linear: linear; /* Convenience shorthands */ --transition-colors: color var(--duration-instant) var(--ease-out), background-color var(--duration-instant) var(--ease-out), border-color var(--duration-instant) var(--ease-out); --transition-opacity: opacity var(--duration-fast) var(--ease-out); --transition-transform: transform var(--duration-moderate) var(--ease-out); } /* Reduced motion — collapse all durations to near-zero */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-moderate: 0ms; --duration-slow: 0ms; } } /* ---------------------------------------------------------------- 8. Z-INDEX LAYERS ---------------------------------------------------------------- */ :root { --z-base: 0; --z-tile: 1; --z-app-bar: 10; --z-expanding: 20; /* Tile during zoom transition */ --z-backdrop: 30; --z-picker: 40; /* Command palette overlay */ --z-toast: 50; --z-tooltip: 60; } /* ---------------------------------------------------------------- 9. FOCUS STYLES ---------------------------------------------------------------- Global focus-visible ring. 2px offset ensures it doesn't overlap content. Uses accent cyan for maximum visibility. ---------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } /* Remove default outlines — :focus-visible handles it */ :focus:not(:focus-visible) { outline: none; }