/* * shared/ui — design tokens (defaults). Do not edit this file — load your * own `theme.css` after `tokens.css`/`system.css` and set the knobs (or * override single tokens) on `:root` instead. See README.md. * * Both files are layered (ui.tokens, then ui.system), so any unlayered app CSS * beats every rule here regardless of specificity. The contents are not * indented under the @layer blocks, to keep them diffable. * * Every colour token is derived from `--hue` and `--chroma` with fixed OKLCH * lightness per role, so contrast holds across hues: `bin/check-contrast.py` * reads the steps below and fails CI when any app's hue drops under WCAG AA. * Keep each derived value on one line in the `oklch(L C H)` shape it parses. */ @layer ui.tokens, ui.system; @layer ui.tokens { :root { color-scheme: light dark; /* The knobs: an app's theme.css sets these four and little else. */ --hue: 277; /* OKLCH hue of the accent, 0-360 */ --chroma: 0.17; /* the accent's chroma; surfaces take a fraction of it */ --radius: 10px; /* --r-m; --r-s is 0.6x, --r-l 1.4x */ --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Defaults to the body face: an app that skips it gets a single-face design rather than a wrong second one. */ --font-display: var(--font-body); /* Surfaces & lines: the hue as a faint tint, lightness fixed per role. */ --bg: light-dark(oklch(0.966 calc(var(--chroma) * 0.03) var(--hue)), oklch(0.204 calc(var(--chroma) * 0.05) var(--hue))); --card: light-dark(oklch(1 0 var(--hue)), oklch(0.246 calc(var(--chroma) * 0.065) var(--hue))); --card-2: light-dark(oklch(0.984 calc(var(--chroma) * 0.02) var(--hue)), oklch(0.274 calc(var(--chroma) * 0.07) var(--hue))); --border: light-dark(oklch(0.927 calc(var(--chroma) * 0.04) var(--hue)), oklch(0.308 calc(var(--chroma) * 0.09) var(--hue))); --border-strong: light-dark(oklch(0.861 calc(var(--chroma) * 0.08) var(--hue)), oklch(0.377 calc(var(--chroma) * 0.11) var(--hue))); /* Text */ --text: light-dark(oklch(0.21 calc(var(--chroma) * 0.15) var(--hue)), oklch(0.933 calc(var(--chroma) * 0.04) var(--hue))); --text-2: light-dark(oklch(0.44 calc(var(--chroma) * 0.15) var(--hue)), oklch(0.755 calc(var(--chroma) * 0.1) var(--hue))); --muted: light-dark(oklch(0.535 calc(var(--chroma) * 0.15) var(--hue)), oklch(0.667 calc(var(--chroma) * 0.11) var(--hue))); /* Accent — the app's single brand colour. `-soft` is the wash surface, `-ink` the text on it, `--on-primary` the text on a filled accent. */ --primary: light-dark(oklch(0.51 var(--chroma) var(--hue)), oklch(0.72 calc(var(--chroma) * 0.7) var(--hue))); --primary-hover: light-dark(oklch(0.455 calc(var(--chroma) * 0.95) var(--hue)), oklch(0.8 calc(var(--chroma) * 0.5) var(--hue))); --primary-soft: light-dark(oklch(0.962 calc(var(--chroma) * 0.08) var(--hue)), oklch(0.295 calc(var(--chroma) * 0.26) var(--hue))); --primary-ink: light-dark(oklch(0.4 calc(var(--chroma) * 0.8) var(--hue)), oklch(0.87 calc(var(--chroma) * 0.27) var(--hue))); --on-primary: light-dark(oklch(1 0 var(--hue)), oklch(0.204 calc(var(--chroma) * 0.05) var(--hue))); /* Semantics — reserved for meaning, never decoration, so not derived */ --pos: light-dark(#15803d, #4cc38a); --neg: light-dark(#dc2626, #f16a6a); --warn: light-dark(#b45309, #e5a13d); --warn-soft: light-dark(#fef3c7, #3a2e14); --warn-border: light-dark(#f59e0b, #a16207); /* Charts (validated polarity pair, see README.md) */ --chart-pos: light-dark(#15803d, #0d9668); --chart-neg: light-dark(#dc2626, #e66767); /* Typography */ --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --font-size-base: 15px; /* Fluid type scale: 15-16px body, ratio 1.2 at 360px rising to 1.25 at 1240px. Not read by system.css yet. */ --step--1: clamp(0.7812rem, 0.7736rem + 0.0341vw, 0.8rem); --step-0: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem); --step-1: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem); --step-2: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem); --step-3: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem); --step-4: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem); --step-5: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem); /* Shape & elevation. An app that sets the three steps directly still wins over the values derived from `--radius`. */ --r-s: calc(var(--radius) * 0.6); --r-m: var(--radius); --r-l: calc(var(--radius) * 1.4); --shadow-tint-1: light-dark(oklch(0.25 calc(var(--chroma) * 0.15) var(--hue) / 0.05), oklch(0 0 0 / 0.35)); --shadow-tint-2: light-dark(oklch(0.25 calc(var(--chroma) * 0.15) var(--hue) / 0.1), oklch(0 0 0 / 0.45)); --shadow-1: 0 1px 2px var(--shadow-tint-1); --shadow-2: 0 4px 14px var(--shadow-tint-2); /* Unlike every other surface token this one does not flip with the scheme: a light scrim over a dark page reads as a flash, not depth. */ --scrim: light-dark(rgba(16, 24, 40, 0.45), rgba(0, 0, 0, 0.6)); /* A token rather than a literal: `.card-foot` cancels it with a negative margin to reach the card's edge. */ --card-pad-x: 1.3rem; --card-pad-y: 1.15rem; /* Layout rhythm — the spacing the primitives in system.css use */ --gap-section: 1.5rem; /* between the sections of a page (.stack) */ --gap-grid: 1.25rem; /* between the columns of a layout grid (.cols-*) */ --gap-tight: 0.75rem; /* dense clusters (.stack-tight, .tiles) */ --gap-inline: 0.5rem; /* wrapped inline rows (.row-wrap) */ /* Collapse thresholds: the narrowest a track may get before reflowing */ --col-min: 340px; /* .cols-2 */ --tile-min: 11rem; /* .tiles */ --col-wide: 1.6fr; /* the dominant track in .cols-wide-narrow */ /* Breakpoints (720px, 480px) are literals in system.css, not tokens — a custom property cannot be read from an @media query. */ --tap-min: 44px; /* mobile tier only; a mouse needs no 44px target */ --rail-w: 15rem; /* the side rail, from 720px up */ --topbar-h: 3.5rem; /* the top bar that replaces the rail below 720px */ --tabbar-h: 3.75rem; /* the bottom tab bar below 720px, without the safe-area inset */ } /* Explicit switch (optional). Without the attribute the system decides. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } }