/* ═══════════════════════════════════════════════════════════════ Themes — CSS-only presets via [theme] attribute. Zero JavaScript. Apply to any container element. Each theme overrides @property knobs: hues, chroma, radius, spacing. Downstream tokens (primitives, surfaces, semantics) recompute automatically. Usage:
...ocean themed...
...entire app... ═══════════════════════════════════════════════════════════════ */ /* All rules below are the `context` layer (ADR-0038 step 7): theme/prose context sits above `utilities`+`components`, so a [theme]/[prose] scope re-skins everything within it. The @layer order is declared by the co-loaded barrel (styles/index.css); this file only contributes to `context`. */ @layer context { /* ── Default (cool indigo, balanced) ── */ [data-scheme="light"] { color-scheme: light; } [data-scheme="dark"] { color-scheme: dark; } [data-scheme="system"] { color-scheme: light dark; } /* ── Default (cool indigo, balanced) ── */ [theme="default"] { --a-neutral-hue: 225; --a-neutral-c-min: 0.010; --a-brand-hue: 225; --a-accent-hue: 225; --a-success-hue: 145; --a-warning-hue: 65; --a-danger-hue: 25; --a-info-hue: 200; --a-radius-k: 1; --a-density: 1; --a-shadow-intensity: 1; } /* ── Ocean (cool teal, vivid, rounded, relaxed) ── */ [theme="ocean"] { --a-neutral-hue: 210; --a-neutral-c-min: 0.020; --a-brand-hue: 200; --a-accent-hue: 200; --a-success-hue: 160; --a-warning-hue: 55; --a-danger-hue: 15; --a-info-hue: 190; --a-accent-c-max: 0.20; --a-brand-c-max: 0.20; --a-radius-k: 1.5; --a-density: 1.1; } /* ── Forest (earthy green, muted, compact) ── */ [theme="forest"] { --a-neutral-hue: 150; --a-neutral-c-min: 0.018; --a-neutral-c-max: 0.030; --a-brand-hue: 140; --a-accent-hue: 140; --a-success-hue: 145; --a-warning-hue: 60; --a-danger-hue: 20; --a-info-hue: 180; --a-accent-c-max: 0.14; --a-brand-c-max: 0.14; --a-radius-k: 0.5; --a-density: 0.9; } /* ── Sunset (warm amber, vivid, sharp) ── */ [theme="sunset"] { --a-neutral-hue: 30; --a-neutral-c-min: 0.022; --a-brand-hue: 20; --a-accent-hue: 20; --a-success-hue: 145; --a-warning-hue: 50; --a-danger-hue: 10; --a-info-hue: 200; --a-accent-c-max: 0.22; --a-brand-c-max: 0.22; --a-radius-k: 0.25; --a-density: 1.1; } /* ── Lavender (soft purple, low chroma, pill radius) ── */ [theme="lavender"] { --a-neutral-hue: 280; --a-neutral-c-min: 0.018; --a-brand-hue: 270; --a-accent-hue: 270; --a-success-hue: 145; --a-warning-hue: 65; --a-danger-hue: 25; --a-info-hue: 220; --a-accent-c-max: 0.15; --a-brand-c-max: 0.15; --a-radius-k: 2; --a-density: 1.1; } /* ── Rose (warm pink, medium chroma) ── */ [theme="rose"] { --a-neutral-hue: 350; --a-neutral-c-min: 0.016; --a-brand-hue: 340; --a-accent-hue: 340; --a-success-hue: 145; --a-warning-hue: 55; --a-danger-hue: 15; --a-info-hue: 200; --a-accent-c-max: 0.17; --a-brand-c-max: 0.17; --a-radius-k: 0.75; --a-density: 1; } /* ── Slate (desaturated grey-blue, sharp, tight) ── */ [theme="slate"] { --a-neutral-hue: 220; --a-neutral-c-min: 0.008; --a-neutral-c-max: 0.015; --a-brand-hue: 220; --a-accent-hue: 220; --a-success-hue: 145; --a-warning-hue: 65; --a-danger-hue: 25; --a-info-hue: 200; --a-accent-c-max: 0.10; --a-brand-c-max: 0.10; --a-radius-k: 0.35; --a-density: 0.85; --a-shadow-intensity: 0.5; } /* ── Midnight (deep indigo, high chroma, rounded, spacious) ── */ [theme="midnight"] { --a-neutral-hue: 250; --a-neutral-c-min: 0.020; --a-brand-hue: 240; --a-accent-hue: 240; --a-success-hue: 150; --a-warning-hue: 60; --a-danger-hue: 20; --a-info-hue: 210; --a-accent-c-max: 0.22; --a-brand-c-max: 0.22; --a-radius-k: 1.25; --a-density: 1.1; } }