/* * ds/tokens.css — the design-system token layer. * * LOADS AFTER theme-variables.css AND BUILDS ON IT. That file ("Control Room") * already defines a sound set of colour ROLES -- ground/surface/raised/sunken, * ink/soft/mute, accent, pass/run/fail/info -- twice over, light on :root and dark * under [data-theme="dark"]. It is not replaced here, for two reasons: 4,111 tests * assert against it (marketing/tests_js_theme_tokens.py computes WCAG contrast by * parsing it), and it is correct. Replacing a proven contract before a single screen * uses the new one would be trading a working thing for an unproven one. * * What this file adds is what was missing, and what was missing is why screens drift: * * 1. A SPACING SCALE. There was none. Every stylesheet invented its own padding. * 2. The FULL STATE PALETTE. The old file has pass/run/fail/info -- four. This * product has eight states, and the four it lacked are the four that matter * most here: `waiting` (a person is the blocker), `blocked`, `stale` (this was * true once) and `unknown` ("cannot tell", which this product is in constantly). * You cannot render a state you have no colour for, which is how P5 gets * violated by omission rather than by choice. * 3. RISK TIERS. tasks/command_risk.py classifies every command low/medium/high * and the UI had no way to show it. * 4. The 28 UNDECLARED VARIABLES. --text-tertiary (29 uses), --bg-card (13), * --bg-hover (13) and 25 more were referenced 127 times and declared nowhere, * so each fell back to a literal picked when dark was the only theme. That is * the bug that made the home screen unreadable in dark mode. Declared below, * mapped onto roles, so it cannot come back. * 5. LINE HEIGHTS, WEIGHTS, Z-INDEX, EASINGS. Also absent, also invented per file. * * RULES * - No component stylesheet may contain a colour literal. If you need a colour, * it needs a role here. * - No component stylesheet may contain a bare pixel value for spacing, radius, * font size or duration. Use the scale. * - Tokens that differ between themes are declared TWICE. Tokens that do not * (spacing, type, z-index, easing) are declared ONCE, outside the theme blocks. */ /* ================================================================= 1. Scales — identical in both themes, so stated once ================================================================= */ :root { /* Spacing. 4px base. --sp-0-5 exists for hairline-adjacent nudges only. */ --sp-0-5: 2px; --sp-1: 4px; --sp-1-5: 6px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Type. Dense by default -- the body size is 14px, and tables drop to 13px. This is the Linear end of the range: data tight, chrome generous. */ --fs-micro: 11px; /* micro labels, column heads */ --fs-meta: 12px; /* timestamps, counts, secondary facts */ --fs-dense: 13px; /* table and list rows */ --fs-body: 14px; /* default */ --fs-lead: 16px; /* intro sentence, card titles */ --fs-h3: 18px; --fs-h2: 22px; --fs-h1: 28px; --lh-tight: 1.25; --lh-snug: 1.4; --lh-normal: 1.55; --lh-loose: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* Radius. --radius-sm/md/lg already exist in theme-variables; these extend. */ --radius-xs: 3px; --radius-xl: 14px; --radius-full: 999px; /* Motion. theme-variables has --transition-fast/normal/slow; name the curves. */ --ease-out: cubic-bezier(0.2, 0, 0.1, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; /* Stacking. Invented per-file before this, which is how a drawer ended up under a sticky header. */ --z-base: 0; --z-sticky: 100; --z-rail: 200; /* A menu anchored to its own control -- the branch picker. Above the page and below anything that covers it; inside a drawer it stacks locally anyway, which is why the number matters less than having one name for it. */ --z-popover: 250; --z-drawer: 300; --z-modal: 400; --z-toast: 500; --z-palette: 600; --z-tooltip: 700; /* Layout */ /* 208, not 232. The longest label in the rail is `Conversations`; at 13px that is 95px, and 208 leaves 152 for text after the padding, the icon and the gap. The old width was set by the widest thing in the rail, which was a full email address in the footer -- a string that is not navigation and is no longer there. */ --ds-rail-w: 208px; --ds-rail-w-min: 56px; --ds-page-max: 1280px; --ds-prose-max: 68ch; } /* ================================================================= 2. States — light ----------------------------------------------------------------- Eight, each with three parts: `ink` (text and icon), `bg` (subtle fill), `line` (border). Saturation is spent on the states that need a person -- waiting, blocked, failed. Pending and stale are deliberately quiet: Linear's discipline is that colour means "act on me", so a colour on something inert is a lie the eye believes. ================================================================= */ :root { --st-pending-ink: #5b6472; --st-pending-bg: #f1f3f6; --st-pending-line: #dfe3e9; --st-running-ink: #1d4fb0; --st-running-bg: #e9f1fd; --st-running-line: #c3d7f7; /* Work underway and halted. The most urgent state the product has. */ --st-blocked-ink: #a8391a; --st-blocked-bg: #fdeee8; --st-blocked-line: #f6cdbb; /* A PERSON is the blocker. Distinct from blocked, which is the machine. */ --st-waiting-ink: #8a5a00; --st-waiting-bg: #fdf4e3; --st-waiting-line: #f3e0b5; --st-passed-ink: #0f6b4a; --st-passed-bg: #e7f6ef; --st-passed-line: #bfe5d4; --st-failed-ink: #a81f1f; --st-failed-bg: #fdecec; --st-failed-line: #f6c9c9; /* True once. An analysis over a 9-day-old index is a different claim. */ --st-stale-ink: #6b5b8a; --st-stale-bg: #f4f1fa; --st-stale-line: #ded6ee; /* "Cannot tell" -- a verdict, not an absence. Rendered with a DASHED border by the chip component so it reads as open rather than settled. */ --st-unknown-ink: #5f6b78; --st-unknown-bg: transparent; --st-unknown-line: #cbd3dc; /* Risk tiers, from tasks/command_risk.py. Separate names from the states even where the colour agrees, because they answer a different question and will diverge. */ --risk-low-ink: var(--st-pending-ink); --risk-low-bg: var(--st-pending-bg); --risk-low-line: var(--st-pending-line); --risk-medium-ink: var(--st-waiting-ink); --risk-medium-bg: var(--st-waiting-bg); --risk-medium-line: var(--st-waiting-line); --risk-high-ink: var(--st-failed-ink); --risk-high-bg: var(--st-failed-bg); --risk-high-line: var(--st-failed-line); /* Diff. Needs its own pair: a diff is read as texture, not as status. */ --diff-add-bg: #e7f6ef; --diff-add-ink: #0f6b4a; --diff-del-bg: #fdecec; --diff-del-ink: #a81f1f; --diff-gutter: var(--mute); } /* ================================================================= 3. States — dark ----------------------------------------------------------------- Not the light values dimmed. On a dark surface a subtle fill has to be LIGHTER than the page and the ink has to be brighter, or a chip reads as a hole punched in the card. ================================================================= */ [data-theme="dark"] { --st-pending-ink: #9aa4b2; --st-pending-bg: rgba(154, 164, 178, 0.14); --st-pending-line: rgba(154, 164, 178, 0.30); --st-running-ink: #7fb0ff; --st-running-bg: rgba(127, 176, 255, 0.16); --st-running-line: rgba(127, 176, 255, 0.34); --st-blocked-ink: #ff9c74; --st-blocked-bg: rgba(255, 156, 116, 0.16); --st-blocked-line: rgba(255, 156, 116, 0.34); --st-waiting-ink: #f0bd5a; --st-waiting-bg: rgba(240, 189, 90, 0.16); --st-waiting-line: rgba(240, 189, 90, 0.32); --st-passed-ink: #4fd49a; --st-passed-bg: rgba(79, 212, 154, 0.15); --st-passed-line: rgba(79, 212, 154, 0.32); --st-failed-ink: #ff8585; --st-failed-bg: rgba(255, 133, 133, 0.16); --st-failed-line: rgba(255, 133, 133, 0.34); --st-stale-ink: #b7a6e0; --st-stale-bg: rgba(183, 166, 224, 0.15); --st-stale-line: rgba(183, 166, 224, 0.32); --st-unknown-ink: #8d99a8; --st-unknown-bg: transparent; --st-unknown-line: rgba(141, 153, 168, 0.45); --diff-add-bg: rgba(79, 212, 154, 0.14); --diff-add-ink: #4fd49a; --diff-del-bg: rgba(255, 133, 133, 0.13); --diff-del-ink: #ff8585; --diff-gutter: var(--mute); } /* ================================================================= 4. The 28 that were declared nowhere ----------------------------------------------------------------- Referenced 127 times across the stylesheets and defined in none of them, so every one resolved to its inline fallback -- literals chosen when dark was the only theme. `--bg-card: var(--bg-card, #fff)` with `color: var(--text-primary, #0f1720)` is how the home screen's stage tiles came to render near-white text on a white card. Declared ONCE, outside the theme blocks, because each maps to a role that is already defined twice. Follows the theme with no further edits. ================================================================= */ :root { /* Surfaces */ --bg-card: var(--surface); --bg-subtle: var(--panel-bg); --bg-hover: var(--sunken); --bg-secondary: var(--panel-bg); --bg-input: var(--surface); --surface-primary: var(--surface); --surface-secondary: var(--panel-bg); --card-background: var(--surface); --hover: var(--sunken); /* Text */ --text-tertiary: var(--mute); --text-dark: var(--ink); --accent-ink: var(--on-accent); /* Lines */ --line-soft: var(--line); --line-strong: var(--line-firm); --border-subtle: var(--line); /* Type aliases. An earlier scale used --font-*; the current one is --text-*. */ --font-sans: var(--font-ui); --font-2xs: var(--text-2xs); --font-xs: var(--text-xs); --font-sm: var(--text-sm); --font-md: var(--text-md); --font-lg: var(--text-lg); /* The --cp-* parallel set, mapped onto roles rather than left to drift. Collapsing codepixel.css's second palette is Phase 4's job; this stops it being wrong in dark mode in the meantime. */ --cp-ok: var(--pass); --cp-warn: var(--st-waiting-ink); --cp-bad: var(--fail); --cp-accent: var(--accent); --cp-font-sans: var(--font-ui); --cp-line-firm: var(--line-firm); /* A review pane height that was referenced and never set. */ --review-height: 60vh; } /* ================================================================= 5. Reduced motion ================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --transition-fast: 1ms; --transition-normal: 1ms; --transition-slow: 1ms; } }