/* ============================================================================ * tokens.css — PulseWatch design system foundation (light + dark) * * Loaded BEFORE every other stylesheet. Every color, shadow, radius, spacing, * and font value used elsewhere in the app should reference a token defined * here. Two themes coexist: * * :root → light theme (default) * [data-theme="dark"] → dark theme (set by the script in base.html) * * The script in base.html flips data-theme based on (in priority order): * 1. user override stored in localStorage("pulsewatch-theme") * 2. prefers-color-scheme media query * 3. light * * At the bottom of this file, legacy --color-* names from the pre-redesign * codebase alias to their semantic replacements. This keeps unrefactored * CSS rules working during the migration; aliases will be removed once * the cleanup pass in pulsewatch.css/auth.css finishes. * ========================================================================= */ :root { /* ---- Surfaces ---- * surface-0 page background (under everything) * surface-1 card / panel / dashboard-section background * surface-2 nested panel, table-header background, hover state * surface-elevated modal / popover / dropdown content */ --surface-0: #f8fafc; --surface-1: #ffffff; --surface-2: #f1f5f9; --surface-elevated: #ffffff; /* ---- Text ---- */ --text-primary: #0f172a; --text-secondary: #475569; --text-tertiary: #94a3b8; --text-on-accent: #ffffff; --text-link: #0284c7; /* ---- Borders ---- * border-subtle barely-there separator, table rules * border-default card outlines, input borders * border-strong focused / hovered borders */ --border-subtle: #e2e8f0; --border-default: #cbd5e1; --border-strong: #94a3b8; /* ---- Accent (brand colour — sky family) ---- * The button / link / focus-ring brand. Kept at sky for continuity; * one-line swap to indigo (#4f46e5) here if/when the gut-check says so. */ --accent-primary: #0ea5e9; --accent-primary-hover: #0284c7; --accent-soft: #e0f2fe; --accent-soft-text: #075985; --accent-focus-ring: rgba(14, 165, 233, 0.35); /* ---- Status (ok / warn / crit / neutral / info) ---- * Each tone gets a bg / fg / border so pills, alerts, and badges * never need to mix-and-match colours from different families. */ --status-ok-bg: #dcfce7; --status-ok-fg: #166534; --status-ok-border: #86efac; --status-warn-bg: #fef3c7; --status-warn-fg: #92400e; --status-warn-border: #fcd34d; --status-crit-bg: #fee2e2; --status-crit-fg: #991b1b; --status-crit-border: #fca5a5; --status-neutral-bg: #f1f5f9; --status-neutral-fg: #475569; --status-neutral-border: #cbd5e1; --status-info-bg: #dbeafe; --status-info-fg: #1e40af; --status-info-border: #93c5fd; /* ---- Danger button (was missing from the codebase entirely) ---- */ --btn-danger: #dc2626; --btn-danger-hover: #b91c1c; --btn-danger-text: #ffffff; /* ---- Shadows / elevation ---- */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.05); --shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.12); /* ---- Radii ---- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; /* ---- Spacing scale (4px grid) ---- * Every padding/margin in components.css uses these. App-level CSS * still has freedom to use rem values directly, but new code should * prefer the tokens. */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ /* ---- Typography ---- */ --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", Monaco, Menlo, "Ubuntu Mono", "DejaVu Sans Mono", "Courier New", monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 2rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-base: 1.5; --line-height-loose: 1.7; /* Letter-spacing for the small-caps treatment used on status pills. */ --tracking-caps: 0.06em; } /* ============================================================================ * Dark theme — every surface/text/border/status token gets flipped here. * Activated when is set by the JS in base.html. * * Notes: * - Status backgrounds use alpha-on-dark so they don't glow against dark * surfaces (pastel fills look radioactive on dark UIs). * - Shadows use higher alpha because they need more contrast against the * darker page background to read as elevation. * ========================================================================= */ [data-theme="dark"] { --surface-0: #0b1220; --surface-1: #111c30; --surface-2: #1c2742; --surface-elevated: #16213a; --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-tertiary: #64748b; --text-on-accent: #ffffff; --text-link: #38bdf8; --border-subtle: #1e2a44; --border-default: #334155; --border-strong: #475569; --accent-primary: #38bdf8; --accent-primary-hover: #7dd3fc; --accent-soft: rgba(56, 189, 248, 0.12); --accent-soft-text: #7dd3fc; --accent-focus-ring: rgba(56, 189, 248, 0.45); --status-ok-bg: rgba(34, 197, 94, 0.12); --status-ok-fg: #86efac; --status-ok-border: rgba(34, 197, 94, 0.45); --status-warn-bg: rgba(245, 158, 11, 0.12); --status-warn-fg: #fcd34d; --status-warn-border: rgba(245, 158, 11, 0.45); --status-crit-bg: rgba(239, 68, 68, 0.12); --status-crit-fg: #fca5a5; --status-crit-border: rgba(239, 68, 68, 0.45); --status-neutral-bg: rgba(148, 163, 184, 0.10); --status-neutral-fg: #cbd5e1; --status-neutral-border: rgba(148, 163, 184, 0.35); --status-info-bg: rgba(59, 130, 246, 0.14); --status-info-fg: #93c5fd; --status-info-border: rgba(59, 130, 246, 0.45); --btn-danger: #ef4444; --btn-danger-hover: #f87171; --btn-danger-text: #0b1220; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.35); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.55); } /* ============================================================================ * Legacy aliases — old --color-* names map to the new semantic tokens. * * These exist so unrefactored CSS in pulsewatch.css / auth.css keeps working * during Phase 1's migration. Once those files have been rewritten to use * the semantic tokens directly, this whole block can be deleted. The * apps/pulsewatch/tests/test_theme_token_aliases.py test walks this list * and asserts every alias targets a defined token, so we don't lose * anything during the rewrite. * * Both :root and [data-theme="dark"] need their own alias resolution * because var(--surface-1) etc. resolves at *use* time, not declaration * time — so the alias points to the right value in each theme automatically. * ========================================================================= */ :root, [data-theme="dark"] { --color-bg: var(--surface-0); --color-text: var(--text-primary); --color-border: var(--border-default); --color-bg-secondary: var(--surface-2); --color-accent: var(--surface-elevated); --color-ok: var(--status-ok-bg); --color-ok-text: var(--status-ok-fg); --color-warn: var(--status-warn-bg); --color-warn-text: var(--status-warn-fg); --color-crit: var(--status-crit-bg); --color-crit-text: var(--status-crit-fg); --color-off: var(--status-neutral-bg); --color-off-text: var(--status-neutral-fg); } /* The navbar specifically wanted the old dark accent (#1f2937) — that role * is now permanently "the navbar surface", regardless of theme. Define it * separately rather than overload --color-accent. */ :root { --nav-bg: #1f2937; --nav-text: #ffffff; --nav-link-hover: rgba(255, 255, 255, 0.10); } [data-theme="dark"] { /* In dark mode the navbar is even darker than the page so it still * reads as the top frame of the app. */ --nav-bg: #0a1322; --nav-text: #e2e8f0; --nav-link-hover: rgba(255, 255, 255, 0.06); }