/* * Stimeo UI — color tokens. * * Theme: "breathe life into your HTML." The primary is a fresh blue-green * (vital / living), Ruby-on-Rails red is the accent (the framework Stimeo gives * life to), on a calm slate-neutral canvas. * * Two layers: * 1. Base ramps (--vital-500, --ruby-500, --slate-700, …) — raw palette. * 2. Semantic aliases (--color-text, --color-accent, --surface-card, …) — * what UI code should actually reference. */ :root { /* ── Primary · "Vital" blue-green (life) ─────────────────────────── */ --vital-50: #e7fbf5; --vital-100: #c4f5e7; --vital-200: #8fe9d2; --vital-300: #54d8ba; --vital-400: #21c1a3; --vital-500: #0ea88f; /* brand primary */ --vital-600: #0a8a78; --vital-700: #0c6e61; --vital-800: #0f574e; --vital-900: #103f3a; --vital-rgb: 14, 168, 143; /* @kind other */ /* ── Accent · Ruby / Rails red ───────────────────────────────────── */ --ruby-50: #fdecec; --ruby-100: #fbd0cf; --ruby-200: #f5a8a5; --ruby-300: #ec7a76; --ruby-400: #de524d; --ruby-500: #cc342d; /* ruby-lang / Rails red */ --ruby-600: #ad2722; --ruby-700: #8c1f1b; --ruby-800: #6c1916; --ruby-900: #4d1311; --ruby-rgb: 204, 52, 45; /* @kind other */ /* ── Neutral · Slate ─────────────────────────────────────────────── */ --white: #ffffff; --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-150: #e9eef4; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; --ink: #111827; /* primary text */ /* ── Functional semantics ────────────────────────────────────────── */ --leaf-500: #2f9e44; /* success — a distinct leaf green, not the teal primary */ --leaf-50: #e9f7ec; --amber-500: #d98a09; /* warning */ --amber-50: #fbf2e0; --danger-500: var(--ruby-500); /* danger shares the ruby accent */ --danger-50: var(--ruby-50); --info-500: var(--vital-600); /* info uses the primary family */ --info-50: var(--vital-50); /* ── Semantic aliases (reference these in UI) ────────────────────── */ --color-primary: var(--vital-500); --color-primary-hover: var(--vital-600); --color-primary-press: var(--vital-700); --color-primary-soft: var(--vital-50); --color-on-primary: var(--white); --color-accent: var(--ruby-500); --color-accent-hover: var(--ruby-600); --color-accent-soft: var(--ruby-50); --color-on-accent: var(--white); --color-text: var(--ink); --color-text-muted: var(--slate-500); --color-text-subtle: var(--slate-400); --color-text-inverse: var(--white); --color-link: var(--vital-600); --surface-page: var(--white); --surface-subtle: var(--slate-50); --surface-sidebar: var(--slate-50); --surface-card: var(--white); --surface-raised: var(--white); --surface-code: var(--slate-900); --on-code: var(--slate-200); --border-default: var(--slate-200); --border-strong: var(--slate-300); --border-interactive: var(--slate-400); --border-focus: var(--vital-500); --focus-ring: 0 0 0 3px rgba(var(--vital-rgb), 0.35); /* Signature "life" gradient — used sparingly (hero accents, marks, pulses). */ --gradient-life: linear-gradient(120deg, var(--vital-500) 0%, #34d6a8 55%, #7fe6b0 100%); } /* * ── Theme: light island reset + dark overrides ────────────────────── * * The site chrome re-themes off `data-theme` on (toggled by the * dogfooded stimeo--theme controller). Only the *surface / text / border* * semantics flip; the base ramps and the vital primary are theme-constant, so * the brand reads identically in both. * * `[data-theme="light"]` exists so a subtree can pin itself light even while the * site is dark — the demo stages do this, keeping the ~100 headless demos on * their authored light canvas without per-demo dark work. */ [data-theme="light"] { --surface-page: var(--white); --surface-subtle: var(--slate-50); --surface-sidebar: var(--slate-50); --surface-card: var(--white); --surface-raised: var(--white); --color-text: var(--ink); --color-text-muted: var(--slate-500); --color-text-subtle: var(--slate-400); --color-link: var(--vital-600); --color-primary-soft: var(--vital-50); --border-default: var(--slate-200); --border-strong: var(--slate-300); --border-interactive: var(--slate-400); } [data-theme="dark"] { --surface-page: #0a1120; --surface-subtle: #0f1a2e; --surface-sidebar: #0c1424; --surface-card: #111d33; --surface-raised: #16233b; --color-text: #e8eef6; --color-text-muted: #93a3b8; --color-text-subtle: #64748b; --color-link: #54d8ba; --color-primary-soft: rgba(var(--vital-rgb), 0.16); --border-default: #21314c; --border-strong: #2c3f5e; --border-interactive: #3a5076; /* Functional shades that need a brighter step to stay legible on the dark canvas. */ --leaf-500: #3fc06a; --leaf-50: rgba(63, 192, 106, 0.14); }