/* ============================================================================ shell-tokens.css — LinkIt (task #816) The bridge between LinkIt's OWN palette and the layoutTest floating-pane shell. WHY THIS FILE EXISTS The shell was written against MarkIt's token set. LinkIt already has its own (theme.css) — and by luck of shared ancestry the NAMES line up almost exactly (--bg, --surface, --surface-2/3, --ink, --ink-soft, --ink-faint, --line, --line-soft, --accent, --accent-2, --accent-soft, --accent-ink, --ok/--warn/ --danger, --sp-*, --r-*, --shadow-*). So there is almost nothing to alias. What the shell needs that LinkIt did NOT have is the CHROME layer: --frame, --frame-2, --pane, the scrims, the shell dimensions, motion and z-index. Every colour here is DERIVED from LinkIt's --bg / --surface / --accent with color-mix — none of MarkIt's green-grey is imported. Change the accent in Settings, or --bg in theme.css, and the chrome follows, in both themes. That is the whole point: LinkIt keeps looking like LinkIt. Load order (index.html): reset.css -> theme.css -> shell-tokens.css -> shell.css -> app.css app.css loads LAST on purpose so LinkIt's own component rules keep winning; kit.css is deliberately NOT loaded at all (24-selector collision, see shell.css header). ⚠️ NEW FILE — must be added to the SHELL array in service-worker.js or it 404s offline. `npm run check:shell` now checks CSS too and will say so. ========================================================================= */ :root { /* ── Font aliases — the shell says --font, LinkIt says --font-ui ─────── */ --font: var(--font-ui); --font-num: var(--font-mono); /* ── Chrome surfaces ───────────────────────────────────────────────── DERIVED from LinkIt's --bg, never hardcoded. --frame is one step darker than --bg so the pane (which is --surface) reads as floating ON the chrome. LinkIt light --bg is #f6f7f9, so --frame lands ~#e7e8ea — a cool grey that belongs to LinkIt's blue-grey palette, not MarkIt's green one. */ --frame: color-mix(in srgb, var(--bg) 94%, #000); /* title bar, status bar, bottom nav */ --frame-2: color-mix(in srgb, var(--bg) 91%, #000); /* recessed: the rail, empty workspace */ --pane: var(--surface); /* alias — zero new colour */ --scrim: rgba(12,14,20,.50); /* tinted toward LinkIt's ink, not MarkIt's */ --scrim-soft: rgba(12,14,20,.28); /* ── Derived state colours ───────────────────────────────────────────── */ --pane-ring: color-mix(in srgb, var(--accent) 52%, transparent); --focus-ring: color-mix(in srgb, var(--accent) 22%, transparent); --ok-soft: color-mix(in srgb, var(--ok) 14%, var(--surface)); --warn-soft: color-mix(in srgb, var(--warn) 16%, var(--surface)); --danger-soft: color-mix(in srgb, var(--danger) 13%, var(--surface)); /* ── Shell dimensions (mobile base — overridden per breakpoint below) ── These ARE the design Shaun picked, so they are copied from layoutTest rather than derived. The two RADII are the exception: they use LinkIt's own --r-sm/--r-md (6px/9px), not MarkIt's 7px/11px, so the pane corners match LinkIt's cards. */ --gutter: 0px; /* workspace padding AND grid gap — one value, both jobs */ --pane-radius: 0px; --titlebar-h: 52px; --statusbar-h: 0px; /* hidden on phones */ --bottomnav-h: 56px; /* phones only */ --rail-w: 0px; /* rail is tablet/desktop only */ --sidepane-w: 260px; --ctl-h: 44px; /* form-control height — touch minimum on phones */ --row-h: 48px; --tap: 44px; /* minimum touch target, everywhere */ /* ── Motion ──────────────────────────────────────────────────────────── */ --dur-1: 90ms; --dur-2: 140ms; --dur-3: 200ms; --dur-4: 260ms; --ease-out: cubic-bezier(.2,0,0,1); --ease-in: cubic-bezier(.4,0,1,1); /* ── Layers ──────────────────────────────────────────────────────────── */ --z-pane: 1; --z-sticky: 10; --z-rail: 20; --z-chrome: 30; /* title bar, status bar, bottom nav */ --z-drawer: 40; --z-scrim: 50; --z-modal: 51; --z-popover: 60; /* menus/tag suggestions — ABOVE modals */ --z-toast: 70; } /* Dark. LinkIt declares dark TWICE (an OS-preference block and an explicit [data-theme="dark"] block) so a toggle can beat the OS. The chrome has to follow both or a dark user gets a light frame behind dark panes. Different percentages from light on purpose: near black there is far less room BELOW --bg, so 94%/91% would be an invisible step. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --frame: color-mix(in srgb, var(--bg) 66%, #000); --frame-2: color-mix(in srgb, var(--bg) 38%, #000); --scrim: rgba(0,0,0,.62); --scrim-soft: rgba(0,0,0,.40); --pane-ring: color-mix(in srgb, var(--accent) 60%, transparent); --ok-soft: color-mix(in srgb, var(--ok) 18%, var(--surface)); --warn-soft: color-mix(in srgb, var(--warn) 20%, var(--surface)); --danger-soft: color-mix(in srgb, var(--danger) 18%, var(--surface)); } } :root[data-theme="dark"] { --frame: color-mix(in srgb, var(--bg) 66%, #000); --frame-2: color-mix(in srgb, var(--bg) 38%, #000); --scrim: rgba(0,0,0,.62); --scrim-soft: rgba(0,0,0,.40); --pane-ring: color-mix(in srgb, var(--accent) 60%, transparent); --ok-soft: color-mix(in srgb, var(--ok) 18%, var(--surface)); --warn-soft: color-mix(in srgb, var(--warn) 20%, var(--surface)); --danger-soft: color-mix(in srgb, var(--danger) 18%, var(--surface)); } /* ── Breakpoint token overrides ─────────────────────────────────────────── */ @media (min-width: 640px) { /* TABLET — rail + status bar appear */ :root { --gutter: 6px; --pane-radius: var(--r-sm); /* LinkIt's 6px, not MarkIt's 7px */ --titlebar-h: 46px; --statusbar-h: 24px; --bottomnav-h: 0px; --sidepane-w: 200px; --ctl-h: 38px; --row-h: 44px; } /* No-JS / pre-boot-failed fallback ONLY. Without the rail would sit in a 0px track and vanish at 640+. Every state that DOES carry the attribute is handled below, so this can never match alongside them. */ html:not([data-rail]) { --rail-w: 48px; } } @media (min-width: 1024px) { /* DESKTOP — the full floating shell */ :root { --gutter: 8px; --pane-radius: var(--r-md); /* LinkIt's 9px, not MarkIt's 11px */ --titlebar-h: 44px; --statusbar-h: 26px; --sidepane-w: 260px; --ctl-h: 34px; --row-h: 40px; } } /* ── Rail width — JS-owned state, NOT a media query (Maya #888 / build #890) ── The four nav names moved OUT of the title bar and INTO the rail. `data-rail` is stamped on before first paint by the pre-boot script in index.html and thereafter by syncRail() in js/app.js. Width must NOT come from @media: the toggle has to be able to say "condensed at 1440px", and a media query would fight it on every resize. These win anywhere in the file — html[data-rail="…"] is (0,1,1) against :root's (0,1,0) — but they sit after the breakpoints for readability. 176px is measured, not guessed: the longest rail label across the three shell apps is "Change Log" at 70.3px, and LinkIt's own longest is "Blueprints" at 59.7px. 176 − 16 padding − 54 row chrome = 106px of label space. Don't drop below 160 without re-measuring. overlay keeps the 48px TRACK on purpose: the labelled rail floats over the pane, so the pane does not reflow when it opens. That is the whole point. */ html[data-rail="off"] { --rail-w: 0px; } html[data-rail="condensed"] { --rail-w: 48px; } html[data-rail="overlay"] { --rail-w: 48px; } html[data-rail="expanded"] { --rail-w: 176px; } /* Reduced motion — set the TOKENS as well, so any JS reading --dur-* agrees. app.css already carries the blanket *{transition:none} override. */ @media (prefers-reduced-motion: reduce) { :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; } }