/* * Design tokens — the single source of visual truth for the setout web * family (edit.dev + wa.dev; setout.dev already renders these letter * values). * * THIS IS THE ONLY FILE IN THE REPOSITORY WHERE RAW COLOR VALUES ARE * ALLOWED. `scripts/check-raw-colors.ts` enforces this in CI. * * Architecture (see apps/edit/docs/design-tokens.md): * Tier 1 primitives --edit- raw values, private to this file * Tier 2 semantic --edit-color-* etc. meaning-named, theme-aware * Tier 3 Tailwind mapped per app the only names app code may use * * Value authority: apps/edit/docs/family-design-language.md §2 — the * D5 re-cut (family grammar round 2, ratified 2026-07-24), RE-CUT to * Candidate D ("one poured surface", owner-ratified 2026-07-27: "Go * with Candidate D" — vv-language-d.html; FDL §15). The washes and * inks are the §2.1/§2.2 letter values; the accent is thistle (§1.4 — * the only accent; the pre-family iris ramp is retired); the type * scale carries no step below the absolute 13px floor (D12) and gains * the 13.5px register (D13); the font stacks are §2.4's system stacks * (D13 — no webfonts). Candidate D zeroes the chrome radius ladder * (chips/dots alone stay full-round), deletes chrome shadows (floats * separate by the raised wash alone), confines hairlines to * content-abuts-content sites, and — per the same session's * light-mode-complete ruling — makes the code register THEME-AWARE * (the D2 dark-well invariance is superseded; a light syntax palette * now exists). Display tiers (30/44) stay out of the kit — brand * scope only. * * CONTRAST AMENDMENT (owner-directed 2026-07-27, judging the live * candidate-D deploy — verbatim: "I think we might need to improve * the contrast a bit more on the styling. Just a tad, it is almost a * little difficult to tell where the panes stop and start. Keep it on * mission but just a tad more contrast." and "A bit more contrast on * the text as well."): the well↔ground wash step widens one gentle * notch in both themes (dark well #121116→#0F0E13; light well * #F0EFF3→#EBEAEF; the light raised wash follows one notch, * #F5F4F8→#F2F1F6, so the float step matches dark's — dark's raised * step already measured wider and stands), and the secondary ink * ladder steps up one gentle notch per rung (ink-2/3/4, both themes; * primary ink stays). The light code/ANSI AA registers ride the * deepened light well and are re-deepened to hold their recorded * ratios (FDL §15.1 as amended; realign ledger §23). The D physics * are untouched: separation stays wash-only — no lines, no shadows. * * CONTRAST ROUND 2 (owner ESCALATION 2026-07-27, the second text * ask — verbatim: "The text is still too difficult to read * everywhere. I think the contrast needs to be increased more."): * a SUBSTANTIVE text-ink raise, washes untouched. New measured * floors: no word-carrying ink under 4.5:1 on ANY ground it renders * words on (this EXECUTES §2.2's open full light-ink-3 raise and * retires every AA-large-only word register), secondary rungs up * substantively both themes (ink-2 9.60 dark / 8.64 light; ink-3 * 5.64 dark / 5.21 light on the ground), the riding light code/ANSI * registers re-solved to ≥5.5 on the light well, link underlines * re-solved to a ≥3.8 worst-of-linkable floor (dark 64%, light * 82%), and nu-700 DEPARTS the rose-700 verb letter for margin * (readability outranks the identity — the owner has now asked * twice). Primary ink evaluated and left: 15.09:1 dark / 15.24:1 * light on the ground, already >2× AAA — brightening it buys * nothing legible and risks dark-theme halation. ink-4 stays * non-text (U1). The owner extended the round's permission to TYPE * ("It has permission to change font sizes." / "And font-weight."): * the two sustained-reading sizes rise (sm 13 → 13.5, base 14 → 15 * — the scale comment below), weights measured and left (repo * minimum is 400; nothing thin exists). FDL §15.8; realign ledger * §34. * * Theming: every semantic color is declared once, theme-aware — either * light-dark() over the primitives or a color-mix() derivation of a * theme-aware token (washes and rings derive from the accent and inks, * exactly as §2.1's supporting values derive in the mocks). The active * scheme comes from `color-scheme`: no data-theme stamp follows the OS * — which since the default-dark flip (owner 2026-07-29) is the * explicit-"system" state only; the pre-paint bootstraps * (@setout/design/theme) stamp data-theme="light|dark" for explicit * choices AND stamp "dark" when nothing is stored (the default), so an * unstamped root only ever reaches paint under an explicit system * choice (or with scripts off — the no-JS fallback stays the OS). */ /* Commit Mono (Eigil Nikolajsen, SIL OFL 1.1 — * https://github.com/eigilnikolajsen/commit-mono): the family's only * webfont, leading --edit-font-mono below. Three static cuts of the * v1.143 release, subset by packages/design/scripts/subset-mono-font.mjs * (./fonts/PROVENANCE.md records the release, the code points, the tool * versions and every sha256; the OFL text rides beside the bytes). Each * cut is self-hosted at ONE canonical URL named by its sha256 prefix * (src/fonts.ts), and each app commits the identical bytes at * public/assets/, so every surface serves the font from its own origin: * edit and wa under their immutable, miss-guarded /assets zones * (verify-cf-shape), setout as a plain static passthrough (its site has * no _headers plane). fonts/fonts-provenance.test.ts pins the bytes, the * copies and these src lines to src/fonts.ts. * * Weights: the regular covers every request below 600, so the family's * 500 (and wa's 520) renders at 400; 600 and above get the true bold. * Italic is a true italic. The shells preload the regular only; the * browser fetches the italic and the bold the first time a page draws * them. font-display swap: text paints in the fallback mono at once, * and the preload keeps the swap window near zero on real loads (the wa * reading mount rewrites swap to optional; its e2e gate pins CLS 0). */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root { /* ------------------------------------------------------------------ */ /* Tier 1 — primitive values (private; never referenced outside this */ /* file except by the semantic tier below). */ /* ------------------------------------------------------------------ */ /* Washes + inks. Light is one thistle-tinted ground: the canvas and * the surface are one paper value, the lift and the well tinted with * it, so the well, the waiting dot and the ready word stand on colour * (owner, 2026-11-03: light mode is the colour direction). Dark keeps * its washes and takes the stepped-up well, which cuts on the surface * the way the light well does. Measured on the ground (WCAG 2.1): * light #f4f2f8: ink 16.65, ink-2 10.24, ink-3 6.11; on the well * #e2deea (1.19:1 under the ground) ink 13.98, ink-2 8.60, * ink-3 5.13; on the lift #efecf5 (1.05:1) ink 15.84, ink-2 9.74. * dark #141318: ink 16.21, ink-2 10.71, ink-3 6.73; on the well * #22202a (1.15:1 over the surface) ink 14.08, ink-2 9.30, * ink-3 5.85; on the lift ink 15.14, ink-2 10.00. * The inks under ink are neutral greys with no tint, so the door's * thistle is the one coloured word on a screen (owner, 2026-11-05): * ink for what you read, ink-2 for words a step under it, and ink-3, * the supporting grey, for labels, facts and explanations, at 4.9:1 * or better on every wash its words sit on. ink-4 stays non-text. */ --edit-dark-bg: #0e0d12; --edit-dark-surface: #141318; --edit-dark-lift: #1b1a21; --edit-dark-well: #22202a; --edit-dark-ink: #f1eff6; --edit-dark-ink-2: #c5c5c5; --edit-dark-ink-3: #9c9c9c; --edit-dark-ink-4: #4e4c57; --edit-light-bg: #f4f2f8; --edit-light-surface: #f4f2f8; --edit-light-lift: #efecf5; --edit-light-well: #e2deea; --edit-light-ink: #141317; --edit-light-ink-2: #3a3a3a; --edit-light-ink-3: #5b5b5b; --edit-light-ink-4: #b0adba; /* The float (owner, 2026-11-06): the one surface a menu, sheet, * dialog or tip stands on, a step off every ground it covers. Light * #ffffff: 1.11:1 on the ground, 1.17 on the bar, 1.19 on a pane * well. Dark #282631: 1.24, 1.30, 1.18. Its inset, a field or a row * under the pointer inside a float: light #ebe8f0 (1.21 off the * float), dark #302e3a (1.12). On the float: light ink-3 6.79, dark * 5.42; on its inset 5.61 / 4.85. */ --edit-dark-float: #282631; --edit-dark-float-inset: #302e3a; --edit-light-float: #ffffff; --edit-light-float-inset: #ebe8f0; /* The code view's pane well (owner, 2026-11-04): the well's tint at a * quieter step, so the gutters between panes read as seams, not * borders. Light #edeaf2 sits 1.07:1 under the ground, dark #1a181f * 1.05:1 over the surface. On it: light ink 15.55, ink-2 9.56, ink-3 * 5.71; dark ink 15.42, ink-2 10.19, ink-3 6.40. The well keeps its * stronger step where a well stands on its own. */ --edit-dark-pane-well: #1a181f; --edit-light-pane-well: #edeaf2; /* The bar's own ground (owner, 2026-11-04): the header row steps * under the page in both themes, as the mockups draw it, so it reads * as its own row. Dark is the canvas the mockup's bar stands on, * #0e0d12, 1.05:1 under the surface; light takes the lift's value, * #efecf5, 1.05:1 under the ground. On it: light ink 15.84, ink-2 * 9.74, ink-3 5.82; dark ink 16.98, ink-2 11.21, ink-3 7.05. */ --edit-dark-bar: #0e0d12; --edit-light-bar: #efecf5; /* Thistle — the attending jurisdiction (§1.4), the only accent. * §2.1 dark / §2.2 light letter values; the light value deepens so it * still reads as attention against near-white. */ --edit-thistle-300: #a99ec8; --edit-thistle-700: #675c82; /* Rose — the jurisdiction of wrong on form surfaces (§1.4, §12 * F5/F8): dark ink is §2.3's alarm hue; the light ink deepens as the * accent does, one step further than the D18/D21 letter (#8c5d65) * so a destructive verb under the pointer, on the tinted light well, * still reads at AA: 4.75 on the well, 5.66 on the ground, 5.38 on * the lift; dark 6.52 on the well, 7.51 on the surface. Same hue. * The wash and rings derive below, at the declared strengths. */ --edit-rose-300: #c69aa0; --edit-rose-700: #80545c; /* Status ramps (oklch). The red/green/amber ramps below serve the * interim danger/success/warning registers and the terminal palette; * the form register (D18/D21, ratified 2026-07-24) re-homes * validation and destructive moments on the rose tokens above — red * survives on pre-form-register chrome and the ANSI palette until * those surfaces take their own cut. */ --edit-red-100: oklch(93% 0.04 25); --edit-red-500: oklch(56% 0.2 25); --edit-red-600: oklch(50% 0.2 25); --edit-red-300: oklch(74% 0.14 25); --edit-green-500: oklch(56% 0.14 150); --edit-green-300: oklch(76% 0.13 150); --edit-amber-500: oklch(70% 0.15 75); --edit-amber-300: oklch(82% 0.13 80); --edit-amber-600: oklch(55% 0.13 75); /* Terminal-only hues (the ANSI palette needs blue/magenta/cyan). * (The teal pair that served the interim light-side syntax type role * is retired with that palette — D2's implementing round.) * The -600/-700 steps below are the LIGHT-terminal AA cure * (Candidate D cure round F4, 2026-07-27 — light-mode-complete made * the light terminal reachable and the -500/600 register measured * under 4.5:1 on the then-light-well #F0EFF3: green 3.82, yellow * 4.32, blue 4.48, magenta 4.14, cyan 3.30). Same hue and chroma, * lightness lowered until each clears AA (realign ledger 20.6), * re-deepened with the well in the round-1 amendment, and RE-SOLVED * by CONTRAST ROUND 2 to the ≥ 5.5 register on the light well * #EBEAEF (hue and chroma preserved, lightness only): green-600 * 5.53, amber-700 5.57, blue-600 5.53, magenta-600 5.59, cyan-600 * 5.64. Red-600 (untouched — it predates the cure) already * measures 5.56 there, on register with the solved five. On the * tinted light well (#e2deea) the six measure 4.99 to 5.06, still * over AA; on the stepped-up dark well (#22202a) the -300s measure * 6.56 to 9.09. */ --edit-blue-500: oklch(54% 0.17 255); --edit-blue-600: oklch(48% 0.17 255); --edit-blue-300: oklch(74% 0.12 255); --edit-magenta-500: oklch(58% 0.19 330); --edit-magenta-600: oklch(50% 0.19 330); --edit-magenta-300: oklch(78% 0.13 330); --edit-cyan-500: oklch(60% 0.11 215); --edit-cyan-600: oklch(45.5% 0.11 215); --edit-cyan-300: oklch(80% 0.1 215); --edit-green-600: oklch(46% 0.14 150); --edit-amber-700: oklch(48% 0.13 75); /* Editor high-contrast registers (task 363 — the "contrast" editor * scheme). The same four kit hues the vivid editor scheme rides * (330/215/150/75-80 — hue and chroma-family preserved), pushed to * the ends of the lightness axis until every role clears AAA (7:1) * on its well. Measured (sRGB conversion of these letters, WCAG * 2.1): -200 on the dark well #22202a — magenta 10.46, cyan 11.45, * green 10.88, amber 11.48; -800 on the light well #e2deea — * magenta 8.26, cyan 7.68, green 7.36, amber 7.67. Chroma eases at * both ends exactly as the ANSI ramps' own steps do (gamut, not * taste). */ --edit-magenta-200: oklch(87% 0.09 330); --edit-cyan-200: oklch(88% 0.08 215); --edit-green-200: oklch(86% 0.1 150); --edit-amber-200: oklch(89% 0.09 80); --edit-magenta-800: oklch(38% 0.16 330); --edit-cyan-800: oklch(36% 0.09 215); --edit-green-800: oklch(37% 0.12 150); --edit-amber-800: oklch(38% 0.11 75); /* Syntax — §2.3's six muted roles, the dark-well letter values. * D2 (ratified 2026-07-24) made the dark well the one code truth in * both themes; the owner's light-mode-complete ruling (Candidate D * session, 2026-07-27) SUPERSEDES that invariance: code surfaces * follow the theme, so the six roles gain a light register below. * fn (#C9B99B) gained its first consumer in the WIT-legibility * round — the WIT signature renderer's function-name role. * cm — AA raise in the D2 implementing round (fix round, 2026-07-25; * RATIFIED by owner 2026-07-25, flagged on PR #56): the round-3 mock's * #6F6C7C measured 3.68:1 on the well — under AA for 13px code text. * Raised one quiet step to #8B8799 (5.4:1 then; 5.5:1 on the * 07-27-amended darker well); still the dimmest role in the * palette, comments stay the quietest voice. */ --edit-syntax-kw: #8fa8c0; --edit-syntax-ty: #7fb5aa; --edit-syntax-fn: #c9b99b; --edit-syntax-st: #a3b58e; --edit-syntax-nu: #c69aa0; --edit-syntax-cm: #8b8799; /* Syntax, light register (light-mode-complete, owner 2026-07-27 — * the Candidate D session's R2, verbatim: "for the light mode, the * code view should also be in light mode"). Derived exactly as the * accent and rose * deepen (300 → 700: hue preserved, saturation eased to the anchor * pairs' ratio, lightness dropped to clear AA); re-solved on the * same law by CONTRAST ROUND 2 (owner escalation, header note) to * a ≥ 5.5 register on the light well #EBEAEF: kw 5.61 · ty 5.61 · * fn 5.64 · st 5.63 · nu 5.61 · cm 5.67 (the round-1 register was * ~4.8, ledger 23.2/23.7). nu-700 now DEPARTS the rose-700 verb * letter (#8C5D65, which stands unchanged in the form register): * round 1 held the D18/D21 identity and accepted a 4.54 knife-edge; * the owner's second escalation supersedes that trade — readability * wins, and the number/diff-delete role takes its own deepened cut * of the same hue (the number-doubles-as-rose PRINCIPLE survives as * hue kinship, no longer as letter identity — realign ledger §34). * cm stays the quietest syntax voice in dark; the light register * is near-uniform by design. Re-measured on the tinted light well * (#e2deea): kw 5.07 · ty 5.07 · fn 5.10 · st 5.09 · nu 5.07 · * cm 5.13, over AA; the dark letters on the stepped-up dark well * (#22202a): kw 6.52 · ty 6.95 · fn 8.33 · st 7.31 · nu 6.52 · * cm 4.60, cm still the quietest voice. */ --edit-syntax-kw-700: #475e76; --edit-syntax-ty-700: #3c635b; --edit-syntax-fn-700: #6a593d; --edit-syntax-st-700: #536042; --edit-syntax-nu-700: #7d4f57; --edit-syntax-cm-700: #5d5968; /* ------------------------------------------------------------------ */ /* Tier 2 — semantic tokens. App code reaches these ONLY through the */ /* semantic utility layer each app maps over them. */ /* ------------------------------------------------------------------ */ /* Backgrounds — the §2 wash ladder: bg, surface, lift, well. */ --edit-color-canvas: light-dark(var(--edit-light-bg), var(--edit-dark-bg)); --edit-color-surface: light-dark( var(--edit-light-surface), var(--edit-dark-surface) ); --edit-color-surface-raised: light-dark( var(--edit-light-lift), var(--edit-dark-lift) ); --edit-color-inset: light-dark(var(--edit-light-well), var(--edit-dark-well)); --edit-color-float: light-dark( var(--edit-light-float), var(--edit-dark-float) ); --edit-color-float-inset: light-dark( var(--edit-light-float-inset), var(--edit-dark-float-inset) ); /* The scrim under a sheet: ink at 18% in light, black at 50% in dark, * so the page under a sheet dims in both themes. The sheet then stands * 1.62:1 (light) and 1.33 (dark) off the dimmed page. */ --edit-color-scrim: light-dark( color-mix(in srgb, var(--edit-light-ink) 18%, transparent), rgb(0 0 0 / 50%) ); --edit-color-pane-well: light-dark( var(--edit-light-pane-well), var(--edit-dark-pane-well) ); --edit-color-bar: light-dark(var(--edit-light-bar), var(--edit-dark-bar)); /* Foregrounds — the §2 ink ladder. * * THE INK JURISDICTION RULE (U1, ux-polish substrate round * 2026-07-25; settles PR #28's ledgered fg-subtle question as ONE * family decision, not per-surface): * * - fg-faint (ink-4) carries HAIRLINES, DISABLED STATES, AND * GLYPH ACCENTS ONLY — NEVER WORDS. Measured on the poured * ground after the 07-27 contrast amendment: 2.20:1 dark, * 2.11:1 light. No running text, no labels, no verbs, no hints * may render at this step in either theme. * - fg-subtle (ink-3) is THE SUPPORTING GREY and the words floor: * the quietest ink that may carry words, for support text * (labels, facts, explanations, captions, section words, * not-ready verbs). A neutral grey: measured on the poured * ground, 6.73:1 dark / 6.11:1 light, and 4.9:1 or better on * every wash that can carry its words (light well 5.13, the * selection wash 4.93). fg-subtle words are plain-AA * everywhere, at every ladder size. * - fg-muted (ink-2) and up carry PRIMARY words. A neutral grey * too, measured on the poured ground: 10.71:1 dark, 10.24:1 * light. * * (The former carve-out — setout.dev's two brand greys, * light-dark(#716e7a, #807d8c) — CONVERGED onto this ladder's * fg-subtle in the family D re-cut, 2026-07-27, exercising its own * convergence clause: "sanctioned whenever the family aligns a * global style" — owner 2026-07-25. Candidate D is that alignment; * apps/setout/src/setout.css carries the record. No off-ladder ink * exception remains in the repo.) */ --edit-color-fg: light-dark(var(--edit-light-ink), var(--edit-dark-ink)); --edit-color-fg-muted: light-dark( var(--edit-light-ink-2), var(--edit-dark-ink-2) ); --edit-color-fg-subtle: light-dark( var(--edit-light-ink-3), var(--edit-dark-ink-3) ); --edit-color-fg-faint: light-dark( var(--edit-light-ink-4), var(--edit-dark-ink-4) ); /* Lines. Zones are borderless washes (§2.5), and Candidate D * (owner-ratified 2026-07-27) confines hairlines to sites where * CONTENT abuts CONTENT — table rules, code insets, in-transcript * dividers, diff rails. NO chrome may wear one: not bars, menus, * popovers, drawers, panes, fields or buttons — chrome separates by * wash step alone. Where a hairline is such a ruled content role it * derives from the faintest ink, which lands on §2.1's observed * #232130 register in dark. * * ONE NAMED EXCEPTION (owner, 2026-11-06): a text field you type in * that stands on its own, the kit's text-field band (the sign-in * box, Home's create box), wears the field edge below. It is ruled, * not a violation of the rule above; do not remove it as one. * Labelled form fields, selects and every other control stay * edgeless. * * A SECOND NAMED EXCEPTION (owner, 2026-11-06): a float (a menu, a * sheet, a dialog, the drawer, a tip, the terminal's completions) * stands on the float surface with a 1px ring in line-strong and the * float shadow (Elevation below), the kit's one float surface * (ui/float.ts). It is ruled; do not remove it as one. Bars, panes, * fields and buttons stay edgeless. */ --edit-color-line: color-mix( in srgb, var(--edit-color-fg-faint) 35%, transparent ); --edit-color-line-strong: color-mix( in srgb, var(--edit-color-fg-faint) 55%, transparent ); /* The field edge: the one line a text field wears, so a field at rest * on a phone, where no caret stands, still shows where you type. The * supporting grey over the well, at the 3:1 non-text floor on both * grounds it sits between: light #767578 (3.46:1 on the well, 4.12 on * the page), dark #717174 (3.30 on the well, 3.80 to 3.98 on the * surface and the canvas). Under the pointer the edge steps to the * supporting grey itself (5.13 / 5.85 on the well); focus swaps it * for the focus ring and wrong for the rose at full strength (the * translucent rose ring measures 1.85 / 2.67 on the well). */ --edit-color-field-edge: light-dark( color-mix(in srgb, var(--edit-light-ink-3) 80%, var(--edit-light-well)), color-mix(in srgb, var(--edit-dark-ink-3) 65%, var(--edit-dark-well)) ); /* Accent — thistle, and its ruled derivations: the selection/engaged * wash and the focus ring below (§2.1; on light the accent deepens). */ --edit-color-accent: light-dark( var(--edit-thistle-700), var(--edit-thistle-300) ); /* The door's ink: light 6.78:1 on the ground, 5.69 on the well. The * one purple a word takes: a surface's one ready primary at rest, any * other door only under the pointer or keyboard focus. The accent * above is for dots, washes and rings, never words. * * Its hover is the same hue a clear step on, so a ready word under the * pointer changes at a glance: 1.6:1 or more against the rest ink in * both themes. Light deepens, #42167f (oklch 34% 0.16 295): 1.69:1 * against the rest ink, 9.60 on the well, 11.44 on the ground. Dark * lightens toward the ink, #d7cef2 (oklch 87% 0.05 297): 1.66:1 * against the rest ink, 10.70 on the well, 12.32 on the surface. */ --edit-color-door: light-dark(#6833bc, var(--edit-thistle-300)); --edit-color-door-hover: light-dark(#42167f, #d7cef2); --edit-color-accent-hover: color-mix( in srgb, var(--edit-color-accent) 78%, var(--edit-color-fg) ); /* The selection wash: 10% of the accent in dark, 16% in light, where * the tinted ground needs a selection you can see. On a wash that * strong the light accent's own glyphs would measure 4.1:1, so the * glyphs that sit on a wash (the ✓ of a picked row, the › of a door * standing on one) take glyph-on-wash below: ink in light (12.8:1 on * the wash over the lift), the accent in dark (5.87). */ --edit-color-accent-muted: light-dark( color-mix(in srgb, var(--edit-thistle-700) 16%, transparent), color-mix(in srgb, var(--edit-thistle-300) 10%, transparent) ); --edit-color-glyph-on-wash: light-dark( var(--edit-light-ink), var(--edit-thistle-300) ); --edit-color-on-accent: light-dark(var(--edit-light-bg), var(--edit-dark-bg)); /* The waiting dot in the bar: the deeper thistle in light, so a 6px * dot on the tinted ground is the first thing seen (7.2:1 on the * ground, 6.0 on the well); the accent in dark. */ --edit-color-waiting: light-dark( color-mix(in srgb, var(--edit-thistle-700) 78%, var(--edit-light-ink)), var(--edit-thistle-300) ); /* The bar's still mark: ink in both themes. The caret and the live * mark stay on the accent. */ --edit-color-mark: var(--edit-color-fg); /* A side column (the Settings list, the workspace column) and a row * under the pointer in it. Light is one ground, so the column is the * surface and its hover the well, which is what dark draws too. */ --edit-color-column: light-dark( var(--edit-light-surface), var(--edit-dark-surface) ); --edit-color-column-hover: light-dark( var(--edit-light-well), var(--edit-dark-well) ); /* The caret: every text field's caret-color and the drawn block * caret that stands at the start of an empty focused box. It is the * door's ink (owner, 2026-11-06), so the caret is the same thistle as * the one coloured word on a screen: light 5.69:1 on the well, dark * 6.43. */ --edit-color-caret: var(--edit-color-door); /* Text selection — the reader's selected-run wash, focused and * inactive (owner defect 2026-08-03: the 10% engaged wash above is * a ROW wash — as a TEXT selection it was indiscernible, and vim * visual mode painted nothing at all). Selection is an attention * moment, so it keeps the kit accent (§1.4 — house jurisdiction, * never an editor-scheme role) and must stay unmistakable over ANY * scheme well — schemes are user choice, including dark wells under * the light theme — hence the rose-ring shape: light-dark() over * the thistle primitives, the light side deepened so it carries a * smaller share. The -inactive step keeps an unfocused pane's * selection visible (never invisible), just quieter than the * focused one. */ --edit-color-selection: light-dark( color-mix(in srgb, var(--edit-thistle-700) 26%, transparent), color-mix(in srgb, var(--edit-thistle-300) 30%, transparent) ); --edit-color-selection-inactive: light-dark( color-mix(in srgb, var(--edit-thistle-700) 16%, transparent), color-mix(in srgb, var(--edit-thistle-300) 18%, transparent) ); /* Rose — validation sentences and destructive moments (§12 F5/F8; * D18/D21). The ring strengths are the declared §2.1 supporting * values: dark 50%, light 45% (the light ink already deepened). */ --edit-color-rose: light-dark(var(--edit-rose-700), var(--edit-rose-300)); --edit-color-rose-muted: color-mix( in srgb, var(--edit-color-rose) 10%, transparent ); /* Rose on a wash: the rose at 78% over ink, as the accent's hover is, * since rose alone on the selection wash falls to AA's edge. */ --edit-color-rose-hover: color-mix( in srgb, var(--edit-color-rose) 78%, var(--edit-color-fg) ); --edit-color-rose-ring: light-dark( color-mix(in srgb, var(--edit-rose-700) 45%, transparent), color-mix(in srgb, var(--edit-rose-300) 50%, transparent) ); /* Status. */ --edit-color-danger: light-dark(var(--edit-red-600), var(--edit-red-300)); --edit-color-danger-solid: light-dark( var(--edit-red-600), var(--edit-red-500) ); --edit-color-danger-muted: color-mix( in srgb, var(--edit-color-danger) 10%, transparent ); --edit-color-on-danger: light-dark( var(--edit-light-bg), var(--edit-light-bg) ); --edit-color-success: light-dark( var(--edit-green-500), var(--edit-green-300) ); /* Warning ink at -700 on the light side: amber-500 (70% L) reads 2.4:1 as text over the light washes — an advisory row's amber sentence fails WCAG 1.4.3 there, and the bar's amber status dot misses the 3:1 non-text floor; -700 gives 5.5:1 (the same light value the terminal and syntax yellows already wear). */ --edit-color-warning: light-dark( var(--edit-amber-700), var(--edit-amber-300) ); --edit-color-warning-muted: color-mix( in srgb, var(--edit-color-warning) 10%, transparent ); /* Focus — the thistle ring at the accent's full strength. A focus * ring is often the one sign of where the keyboard is, so it holds * the 3:1 non-text floor against every ground it can sit on: light * 5.51 on the ground, 5.24 on the lift, 4.63 on the well and 3.79 on * a selection wash over the well; dark 7.40, 6.92, 6.43 and 5.42. * (The translucent 38% ring measured 1.56 to 2.10.) */ --edit-color-focus: var(--edit-color-accent); /* Code surfaces — THEME-AWARE (light-mode-complete, owner ruled in the Candidate D session 2026-07-27, R2 verbatim: "for the light mode, the code view should also be in light mode"; supersedes D2's dark-well invariance, ratified 2026-07-24). A code surface is a WELL in the theme's own ladder: the dark well in dark, the light well in light — the editor, diffs, fenced code and the terminal all follow the theme. Everything in a code pane that isn't a syntax role is code-ink on the code-well; the muted/subtle/lift steps carry the same quiet ladder the page inks do, in each theme's register. Reached only via var() from code-surface consumers (CodeEditor, the reading chrome's signature and fence blocks) — no Tailwind mapping. */ --edit-color-code-well: light-dark( var(--edit-light-well), var(--edit-dark-well) ); /* The page's code well that keeps its step inside a pane: inline * code and kbd in rendered markdown stand on it wherever they are. * A pane rewrites inset and code-well to its own wash; this one it * leaves alone, so a word of code keeps its edge on the pane. */ --edit-color-fence: light-dark(var(--edit-light-well), var(--edit-dark-well)); --edit-color-code-ink: light-dark( var(--edit-light-ink), var(--edit-dark-ink) ); --edit-color-code-ink-muted: light-dark( var(--edit-light-ink-2), var(--edit-dark-ink-2) ); /* The quiet code step (punctuation, gutters, line numbers) is the * page's ink-3: 5.13:1 on the light well, 5.84 on the dark well. */ --edit-color-code-ink-subtle: light-dark( var(--edit-light-ink-3), var(--edit-dark-ink-3) ); --edit-color-code-lift: light-dark( var(--edit-light-lift), var(--edit-dark-lift) ); /* Focus on a code surface: the accent at full strength, as the * family's ring now is everywhere: 6.43:1 against the dark well and * 4.63:1 against the light well (the 1.4.11 bar is 3:1). */ --edit-color-code-focus: light-dark( var(--edit-thistle-700), var(--edit-thistle-300) ); /* Syntax (code highlighting). Reached only via var() from code surfaces — no Tailwind mapping, since app code never styles syntax directly. §2.3's letter values in dark; the light register is the 700 deepening above (light-mode-complete, 2026-07-27 — the "no light-mode syntax palette exists" sentence of D2 is superseded; the pre-D2 interim forks stay retired, this palette is derived on the accent's own 300→700 law, not restored). */ --edit-color-syntax-keyword: light-dark( var(--edit-syntax-kw-700), var(--edit-syntax-kw) ); --edit-color-syntax-type: light-dark( var(--edit-syntax-ty-700), var(--edit-syntax-ty) ); --edit-color-syntax-fn: light-dark( var(--edit-syntax-fn-700), var(--edit-syntax-fn) ); --edit-color-syntax-string: light-dark( var(--edit-syntax-st-700), var(--edit-syntax-st) ); --edit-color-syntax-number: light-dark( var(--edit-syntax-nu-700), var(--edit-syntax-nu) ); --edit-color-syntax-comment: light-dark( var(--edit-syntax-cm-700), var(--edit-syntax-cm) ); /* THE EDITOR SCHEME REGISTER (task 363 — owner 2026-07-29: "The code editor color scheme needs to be customizable with a better default."). The CodeEditor primitive styles its WHOLE surface through the eleven --edit-color-editor-* roles — six syntax (keyword · type · string · number · comment · punct) plus five quiet surface roles (well · ink · ink-muted · ink-subtle · lift) — never the --edit-color-syntax-* tokens directly: the stored device preference stamps `data-editor-scheme` on the root (editor-scheme.ts) and the scheme blocks in the schemes section below re-point the register — CSS vars, so a change applies live, no reload and no editor reconfiguration. Reading surfaces (WIT signatures, fenced code, diffs) stay on the base syntax tokens: the preference is the EDITOR's. The register is declared by the scheme blocks ALONE — nothing here (a value here would sit before the popular section and violate the theme-aware law pinned in tokens.test.ts, or shadow nothing as dead weight): THE DEFAULT ("one dark" — owner 2026-07-31: what a user sees before they've selected any preference) is the one-dark block's own grouped bare-:root selector in the popular section, so an unstamped root — the pre-stamp paint included — resolves the default's canonical declarations, defined once. */ /* Terminal (the ANSI SGR-subset palette). Programs choose these colors; the tokens map the 8-color ANSI space onto theme-aware values. Reached only via var() from the AnsiText primitive — no Tailwind mapping, same rule as the syntax tokens above. Light side AA-cured (F4, 2026-07-27 — see the -600/-700 primitives above): every light term ink ≥ 4.5:1 on the light well; white is the theme's default text ink (the classic inversion — "white" is the terminal's default-foreground slot). term-fg (task 614 — owner 2026-08-10, REPEAT: "the terminal text color is still too light"): the terminal's OWN default/quiet output ink. The quiet tail used to ride the page's support ink (ink-3: 5.86:1 dark / 4.54:1 light on the wells) — under the ≥ 7:1 PRIMARY floor terminal output carries (sustained primary reading, the task-300 discipline; floors gated in apps/edit/src/design/terminal-floors.test.ts). It now rides ink-2: measured on the wells 9.27:1 dark / 8.53:1 light. The attention line stays full ink above it; SGR dim renders at 80% of this ink (6.44:1 dark / 5.09:1 light — the ≥ 4.5 dim floor; AnsiText's opacity step). This cluster is deliberately the ONE home of the terminal's mapped palette: the coming scheme-unification slice points the default scheme HERE. */ --edit-color-term-fg: light-dark( var(--edit-light-ink-2), var(--edit-dark-ink-2) ); --edit-color-term-black: light-dark( var(--edit-light-ink-2), var(--edit-dark-ink-2) ); --edit-color-term-red: light-dark(var(--edit-red-600), var(--edit-red-300)); --edit-color-term-green: light-dark( var(--edit-green-600), var(--edit-green-300) ); --edit-color-term-yellow: light-dark( var(--edit-amber-700), var(--edit-amber-300) ); --edit-color-term-blue: light-dark( var(--edit-blue-600), var(--edit-blue-300) ); --edit-color-term-magenta: light-dark( var(--edit-magenta-600), var(--edit-magenta-300) ); --edit-color-term-cyan: light-dark( var(--edit-cyan-600), var(--edit-cyan-300) ); --edit-color-term-white: light-dark( var(--edit-light-ink), var(--edit-dark-ink) ); /* ------------------------------------------------------------------ */ /* Non-color tokens (theme-invariant). */ /* ------------------------------------------------------------------ */ /* Space: one unit; the Tailwind numeric spacing scale multiplies it. */ --edit-space-unit: 0.25rem; /* Type — §2.4. Sans stays the D13 system stack (no sans webfont). * Mono: "Commit Mono" (the @font-face blocks above) leads the stack, * and the system stack stays verbatim behind it. The face draws the * terminal's vocabulary itself, in one 0.6em cell: box drawing (all * but ┭), block elements, braille, the Powerline separators, ✓ ✗ ●. * What it lacks (⚠, Cyrillic, emoji, CJK) falls through per glyph to * the fallbacks; on a Mac those (SF Mono, Menlo) share the 0.6em * cell, so a borrowed glyph keeps the grid. Pinned in * apps/edit/src/design/tokens.test.ts (the stack) and * packages/design/src/fonts/fonts-provenance.test.ts (the face's code * points and cell). Apps map --edit-font-*; they never declare * stacks. */ --edit-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif; --edit-font-mono: "Commit Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* The scale — nothing below the absolute 13.5px floor. The floor * was 13px (D12: the 11px text-xs is retired; the floor is a * token-contract test) and ROSE half a step in contrast round 2 * (owner 2026-07-27, size permission verbatim: "It has permission * to change font sizes."): the two sustained-reading carriers move * — sm 13 → 13.5 (code, detail) and base 14 → 15 (body, rows, * thread + reading prose) — while md (bars/captions — glanceable * chrome, not sustained reading) and everything above stand. sm * and md now SHARE the 13.5 value; the roles stay distinct (the * radius-ladder precedent) so a future re-cut is one line. The * minimum word weight is 400 (FDL §15.8) for every role but one: * the page's one title, which is the system sans at 200 (its own * token below). Display tiers stay brand scope; 3xl is the title's * step, not a display tier, though it shares the brand's 44. */ --edit-text-sm: 0.84375rem; /* 13.5px — detail, mono surfaces */ --edit-text-sm--line-height: 1.5; --edit-text-md: 0.84375rem; /* 13.5px — bars, captions */ --edit-text-md--line-height: 1.5; --edit-text-base: 0.9375rem; /* 15px — body, rows */ --edit-text-base--line-height: 1.55; --edit-text-lg: 1rem; --edit-text-lg--line-height: 1.5; --edit-text-xl: 1.25rem; --edit-text-xl--line-height: 1.35; --edit-text-2xl: 1.5625rem; --edit-text-2xl--line-height: 1.25; /* The title: 44px on a 44px line, eleven units, the line a title row * counts from (40px at 1.1, the same line, under a coarse pointer), * tracked a hundredth of an em in, as the system face's display cut * sets itself at this size. */ --edit-text-3xl: 2.75rem; --edit-text-3xl--line-height: 1; --edit-tracking-title: -0.01em; /* Two weights carry hierarchy. A name, a value or a topic's title is * 500; prose, phrases and facts stay 400. The page's one title is * the sans at 200: SF draws a true 200 on Apple platforms, Segoe UI * its Light (300) on Windows, and where no light cut exists the * title is a 44px regular, still the largest word on the page. No * engine synthesizes a lighter weight. */ --edit-weight-name: 500; --edit-weight-title: 200; /* Emphasis an author asked for (bold in a document or a reply): at * 15px, 500 against 400 is too faint a cue, and the static Segoe UI * has no 500 at all. The variable Segoe ahead of it in the sans * stack carries every weight on Windows 11. */ --edit-weight-strong: 600; /* Content columns — §2.5 (D1/U16): conversations 620, Work (and the * home/account shell) 640, reading 860. Tokens BECAUSE the shell * drifted to a stock 576px max-w-xl — the ratified widths live here * and apps map them, never a stock container step. */ --edit-column-thread: 620px; --edit-column-work: 640px; --edit-column-reading: 860px; /* The ⌘K overlay panel (rr S2 `.ov{max-width:560px}`) — drawn, not * a stock container step (chrome re-cut, task 330 slice 1). */ --edit-column-palette: 560px; /* The side column: the workspace column and the menus that hang in * it (the PickMenu) share one measure. */ --edit-column-side: 440px; /* Radius — Candidate D (owner-ratified 2026-07-27, FDL §15): ZERO * radii in chrome — "flat cuts everywhere, softness carried by the * wash alone." The role names stay (species keep addressing their * role; the VALUE is the ruling) so a future re-cut is one line per * role again. The sole survivor is `full`: chips and dots are * circles by identity, not rounded chrome (the D page's own rundot). * Supersedes §2.5's 14/10/9/8/7 ladder (D14's kit cut). */ --edit-radius-surface: 0px; /* outer surfaces */ --edit-radius-block: 0px; /* composers, prompts, expands, popouts */ --edit-radius-menu: 0px; /* menus */ --edit-radius-row: 0px; /* rows-as-cards, app frames, quotes */ --edit-radius-inline: 0px; /* inline asks, engaged verbs, inputs */ --edit-radius-full: 9999px; /* chips and dots */ /* Elevation — Candidate D: ZERO chrome shadows; bars, panes, fields * and buttons cast none. ONE NAMED EXCEPTION (owner, 2026-11-06): a * float stands off what it covers by the float surface, its * line-strong ring and this one soft shadow, so a menu reads on any * ground, the bar's included (the wash alone left it 1.00:1 on the * light bar). It is ruled; do not remove it as one. */ --edit-shadow-float: 0 1px 2px light-dark(rgb(20 19 23 / 6%), rgb(0 0 0 / 40%)), 0 12px 32px -8px light-dark(rgb(20 19 23 / 18%), rgb(0 0 0 / 60%)); /* Motion (§2.5 — the motion register, owner-directed 2026-07-27: * "could we add smooth CSS transitions? Keep it short and clean but * something less janky. Elegant, minimal and fast."). TWO durations * — fast (micro-motion: hover reveals, menus, crossfades) and * standard (surface motion: overlay/sheet/palette entries, pane * settles) — and TWO easings: standard (ease-out — things arrive * decelerating) and exit (ease-in — things leave accelerating, on * the FAST duration: a closing surface leaves quicker than it * arrived). NOTHING over 200ms (token-contract test), and motion * animates TRANSFORM and OPACITY only (plus the established wash/ * ink color micro-fades) — never layout properties: width, height, * top, left and flex-basis reflow on every frame, which is the jank * the directive names. The former 200ms medium / 320ms slow steps * retired consumer-less with this cut; in-place folds still never * animate (§2.5 D3). */ --edit-motion-fast: 120ms; --edit-motion-standard: 160ms; --edit-ease-standard: cubic-bezier(0.2, 0, 0, 1); --edit-ease-exit: cubic-bezier(0.4, 0, 1, 1); /* The product's own voice: the words the product says for itself * (headings, Done, pane names, the consequence word, doors, verbs) * are the interface sans at 13.5px, the same face as every other * word; the mono draws only what is literally code. The tracking * token stays at the sans's own default so its readers keep one * name. */ --edit-font-label: var(--edit-font-sans); --edit-tracking-label: 0; /* Air: the stanza above a heading and between turns; the group, two * stanzas, between the groups of a page (under the bar, between a * page's doors and its list, above its foot verb). */ --edit-space-stanza: 1.25rem; --edit-space-group: calc(var(--edit-space-stanza) * 2); /* The text edge inside a list page's column: six units, where a * row's dot and an empty box's caret hang. */ --edit-space-gutter: calc(var(--edit-space-unit) * 6); /* A list or menu row: 32px with a fine pointer, 44px under a coarse * one (the pointer media block below this rule). A two-line row (a * base line over a small one, six pixels above and below) is * fourteen units under either pointer, over the 44px target. */ --edit-size-row: 2rem; --edit-size-row-2: calc(var(--edit-space-unit) * 14); /* The drawn mark: one block, 5/8 of a mono cell wide, for the bar's * mark, the box's caret and the live turn. The mono carries no * block glyphs, so the mark is drawn, never typed. */ --edit-mark-width: 0.375em; /* The one breath: the live turn's mark and the waiting bar dot run * the pul keyframe at this period. It is the motion register's one * named carve-out above the 200ms ceiling, held by the token test; * everything else still arrives and leaves on fast and standard. */ --edit-motion-pulse: 1.2s; } /* Rows answer the hand that uses them: a coarse pointer gets the 44px * touch row, and the title steps to 40px on the same 44px line, since * 44 crowds a phone's measure. */ @media (pointer: coarse) { :root { --edit-size-row: 2.75rem; --edit-text-3xl: 2.5rem; --edit-text-3xl--line-height: 1.1; } } /* A phone under 375 wide leaves a title 312px, too little for a 40px * sentence in some phones' faces (the landing's second runs 325px in * Roboto): there the title steps once more, to 36px on the same 1.1. */ @media (pointer: coarse) and (max-width: 374px) { :root { --edit-text-3xl: 2.25rem; } } /* The ONE blessed fade mask (task 484 — the Activity row re-stab * round mints it as KIT vocabulary, documented here beside the motion * tokens because it is the same family of quiet devices): a left-edge * transparency ramp, transparent → black over 1.5rem. Its consumer is * the emerging live tail — an end-aligned one-line stream whose * overflow clips on the LEFT so the newest characters survive, the * fade standing in for both ellipsis and box. No animation, no * chrome; reduced-motion safe by construction (it never moves). Any * other fade mask in app code is off-register. */ @utility mask-fade-l { mask-image: linear-gradient(to right, transparent, black 1.5rem); } /* ——— Editor color schemes (task 363) ———————————————————————————————— * The curated set behind the account drawer's editor preference — * these blocks ARE the register's one source: each is one stored * choice, stamped as data-editor-scheme by editor-scheme.ts. THE * DEFAULT is THEME-SPLIT (task 651, owner 2026-08-11 — supersedes * the 2026-07-31 one-dark-everywhere ruling): an UNSTAMPED root — no * stored preference, the pre-stamp paint, stamp-less surfaces — * renders the theme-matching default via the default block below the * popular section: light-dark(one-dark, tokyo-night) arm-for-arm * (the file's own theme mechanism — color-scheme resolves the arm), * each arm pinned byte-equal to its canonical block by * editor-scheme-default.test.ts. The default block's :not() guard * means it NEVER matches a stamped root, so any stamped choice wins * outright. * * Every scheme declares ALL ELEVEN roles (pinned in tokens.test.ts) * — never inheriting half a palette from another scheme. Why eleven * (the popular-round REGISTER EXTENSION, owner 2026-07-29): a famous * scheme's identity is carried by its SURFACE as much as its syntax * (Solarized without base03, Dracula without #282a36 are not those * schemes), and once a scheme may be dark under the light app theme * (allowed — user choice), every non-syntax editor color must come * from the scheme too or gutters/active-line go illegible. House * schemes declare each syntax role light-dark() — complete in both * themes by construction — and point the five quiet roles at the * theme-aware code-surface ladder above. Attention stays house * jurisdiction (focus ring, bracket-match wash, diagnostics): the * scheme owns surface + syntax, never §1.4. */ /* "vivid" — the kit ANSI hue-ramp cut: task 363's original default, * a stored choice since the one-dark ruling (owner 2026-07-31) — * chosen, it renders byte-identically to the 363 shipping. Cut on * the four most-separated kit hues (magenta 330 · cyan 215 · * green 150 · amber 75-80), both themes, measured on the wells * (WCAG 2.1, sRGB conversion of the oklch letters): dark -300s on * #22202a — keyword 7.58, type 8.86, string 7.87, number 9.09; * light on #e2deea — keyword 5.05, type 5.06, string 4.99, number * 5.03 (the terminal cure's own letters). Comments stay the quietest * voice (§2.3 cm: 4.60 dark / 5.13 light); punctuation is the quiet * code step, ink-3 (5.84 dark / 5.13 light). */ :root[data-editor-scheme="vivid"] { --edit-color-editor-keyword: light-dark( var(--edit-magenta-600), var(--edit-magenta-300) ); --edit-color-editor-type: light-dark( var(--edit-cyan-600), var(--edit-cyan-300) ); --edit-color-editor-string: light-dark( var(--edit-green-600), var(--edit-green-300) ); --edit-color-editor-number: light-dark( var(--edit-amber-700), var(--edit-amber-300) ); --edit-color-editor-comment: light-dark( var(--edit-syntax-cm-700), var(--edit-syntax-cm) ); --edit-color-editor-punct: light-dark( var(--edit-light-ink-3), var(--edit-dark-ink-3) ); --edit-color-editor-well: var(--edit-color-code-well); --edit-color-editor-ink: var(--edit-color-code-ink); --edit-color-editor-ink-muted: var(--edit-color-code-ink-muted); --edit-color-editor-ink-subtle: var(--edit-color-code-ink-subtle); --edit-color-editor-lift: var(--edit-color-code-lift); } /* "quiet" — the pre-363 editor palette, byte-for-byte (the §2.3 * six-role muted register the base syntax tokens still carry for * reading surfaces). Kept whole so choosing it renders EXACTLY the * editor the family shipped before the vivid default landed — * nothing lost. Measured on the wells: dark kw 6.52 · ty 6.95 · * st 7.31 · nu 6.52 · cm 4.60 · punct 5.84; light 5.07 to 5.13. */ :root[data-editor-scheme="quiet"] { --edit-color-editor-keyword: light-dark( var(--edit-syntax-kw-700), var(--edit-syntax-kw) ); --edit-color-editor-type: light-dark( var(--edit-syntax-ty-700), var(--edit-syntax-ty) ); --edit-color-editor-string: light-dark( var(--edit-syntax-st-700), var(--edit-syntax-st) ); --edit-color-editor-number: light-dark( var(--edit-syntax-nu-700), var(--edit-syntax-nu) ); --edit-color-editor-comment: light-dark( var(--edit-syntax-cm-700), var(--edit-syntax-cm) ); --edit-color-editor-punct: light-dark( var(--edit-light-ink-3), var(--edit-dark-ink-3) ); --edit-color-editor-well: var(--edit-color-code-well); --edit-color-editor-ink: var(--edit-color-code-ink); --edit-color-editor-ink-muted: var(--edit-color-code-ink-muted); --edit-color-editor-ink-subtle: var(--edit-color-code-ink-subtle); --edit-color-editor-lift: var(--edit-color-code-lift); } /* "contrast" — the high-contrast option: the same four kit hues at * the -200/-800 registers (primitives above, AAA-measured: every * word-carrying role ≥ 7.3:1 on its well, both themes), comments on * the ink-2 primary-word step (9.27 dark / 8.53 light on the wells) * and punctuation at full ink — structure at maximum legibility. */ :root[data-editor-scheme="contrast"] { --edit-color-editor-keyword: light-dark( var(--edit-magenta-800), var(--edit-magenta-200) ); --edit-color-editor-type: light-dark( var(--edit-cyan-800), var(--edit-cyan-200) ); --edit-color-editor-string: light-dark( var(--edit-green-800), var(--edit-green-200) ); --edit-color-editor-number: light-dark( var(--edit-amber-800), var(--edit-amber-200) ); --edit-color-editor-comment: light-dark( var(--edit-light-ink-2), var(--edit-dark-ink-2) ); --edit-color-editor-punct: light-dark( var(--edit-light-ink), var(--edit-dark-ink) ); --edit-color-editor-well: var(--edit-color-code-well); --edit-color-editor-ink: var(--edit-color-code-ink); --edit-color-editor-ink-muted: var(--edit-color-code-ink-muted); --edit-color-editor-ink-subtle: var(--edit-color-code-ink-subtle); --edit-color-editor-lift: var(--edit-color-code-lift); } /* ——— Popular schemes (owner 2026-07-29: "Can we provide other * colorscheme options for the code editor? Common popular ones?") ———— * * Third-party palettes ported FAITHFULLY onto the eleven-role register * — each block carries its upstream name, source URL and license line * (house licensing posture: attribution headers must stay; NOTICE * entries ride apps/edit/NOTICE + packages/design/NOTICE). Rules of * this section, all deliberate: * * - CANONICAL VALUES ONLY: every hex below is the upstream palette's * own letter value — the house contrast ladder is NOT applied to * famous palettes (fidelity wins for opt-in schemes; the measured * WCAG numbers are recorded per block, sub-4.5 roles named). * - THEME-INVARIANT: a popular scheme IS its palette — one literal * value per role under both app themes (no light-dark()). A dark * scheme under the light app theme is allowed (user choice); the * quiet roles above are why that stays legible. * - Where upstream assigns one color to several roles, roles share * the value (the radius-ladder precedent: roles stay distinct, * values may coincide). * * Raw literals are sanctioned HERE and only here — this file is the * one token source (check-raw-colors). */ /* "solarized dark" — Solarized by Ethan Schoonover. * upstream: https://ethanschoonover.com/solarized/ * https://github.com/altercation/solarized — MIT. * Mapping: well base03 · ink base0 · lift base02 · subtle base01 · * muted base1 · keyword green · type yellow · string cyan · number * magenta · comment base01 · punct base0. Measured on base03 (WCAG * 2.1): ink 4.75 · keyword 4.69 · type 4.68 · string 4.75 · number * 3.30 · comment 2.79 · punct 4.75 — number + comment sit BELOW the * 4.5 floor at their canonical values (recorded, not altered). */ :root[data-editor-scheme="solarized-dark"] { --edit-color-editor-keyword: #859900; --edit-color-editor-type: #b58900; --edit-color-editor-string: #2aa198; --edit-color-editor-number: #d33682; --edit-color-editor-comment: #586e75; --edit-color-editor-punct: #839496; --edit-color-editor-well: #002b36; --edit-color-editor-ink: #839496; --edit-color-editor-ink-muted: #93a1a1; --edit-color-editor-ink-subtle: #586e75; --edit-color-editor-lift: #073642; } /* "solarized light" — Solarized by Ethan Schoonover (paired variant). * upstream: https://ethanschoonover.com/solarized/ * https://github.com/altercation/solarized — MIT. * Mapping: well base3 · ink base00 · lift base2 · subtle base1 · * muted base01 · accents as the dark variant · comment base1 · punct * base00. Measured on base3: ink 4.13 · keyword 2.97 · type 2.98 · * string 2.93 · number 4.21 · comment 2.48 · punct 4.13 — EVERY text * role sits below the 4.5 floor at canonical values (Solarized * Light's famous softness; recorded, not altered). */ :root[data-editor-scheme="solarized-light"] { --edit-color-editor-keyword: #859900; --edit-color-editor-type: #b58900; --edit-color-editor-string: #2aa198; --edit-color-editor-number: #d33682; --edit-color-editor-comment: #93a1a1; --edit-color-editor-punct: #657b83; --edit-color-editor-well: #fdf6e3; --edit-color-editor-ink: #657b83; --edit-color-editor-ink-muted: #586e75; --edit-color-editor-ink-subtle: #93a1a1; --edit-color-editor-lift: #eee8d5; } /* "dracula" — Dracula, the official spec palette. * upstream: https://draculatheme.com/contribute * https://github.com/dracula/dracula-theme — MIT. * Mapping: well background · ink foreground · lift current-line · * subtle comment · muted foreground · keyword pink · type cyan · * string yellow · number purple · comment comment · punct foreground. * Measured on #282a36: ink 13.36 · keyword 5.97 · type 10.29 · * string 12.74 · number 5.90 · comment 3.03 · punct 13.36 — comment * below 4.5 at its canonical value (recorded, not altered). */ :root[data-editor-scheme="dracula"] { --edit-color-editor-keyword: #ff79c6; --edit-color-editor-type: #8be9fd; --edit-color-editor-string: #f1fa8c; --edit-color-editor-number: #bd93f9; --edit-color-editor-comment: #6272a4; --edit-color-editor-punct: #f8f8f2; --edit-color-editor-well: #282a36; --edit-color-editor-ink: #f8f8f2; --edit-color-editor-ink-muted: #f8f8f2; --edit-color-editor-ink-subtle: #6272a4; --edit-color-editor-lift: #44475a; } /* THE UNSTAMPED-ROOT DEFAULT (task 651, owner 2026-08-11: "switch * the colorscheme default to Tokyo Night when on dark mode for users * that haven't set their configuration yet") — what renders where no * data-editor-scheme is stamped: no stored preference, the pre-stamp * paint, stamp-less surfaces. Theme-split via light-dark() — the * file's own theme mechanism, so an explicit data-theme stamp, the * no-choice dark default, and the explicit-"system" OS path all * resolve the right arm for free: light = one dark (the 2026-07-31 * default, unchanged), dark = tokyo night. Each arm repeats its * canonical block's literals BY NECESSITY (the blocks are alternative * selector matches — no var() can reach across); the mirror is * pinned arm-for-arm against the canonical blocks in * editor-scheme-default.test.ts, so the copies cannot drift. The * :not() guard means this block never matches a stamped root — any * stamped choice wins outright. */ :root:not([data-editor-scheme]) { --edit-color-editor-keyword: light-dark(#c678dd, #bb9af7); --edit-color-editor-type: light-dark(#e5c07b, #0db9d7); --edit-color-editor-string: light-dark(#98c379, #9ece6a); --edit-color-editor-number: light-dark(#d19a66, #ff9e64); --edit-color-editor-comment: light-dark(#5c6370, #51597d); --edit-color-editor-punct: light-dark(#abb2bf, #89ddff); --edit-color-editor-well: light-dark(#282c34, #1a1b26); --edit-color-editor-ink: light-dark(#abb2bf, #a9b1d6); --edit-color-editor-ink-muted: light-dark(#828997, #787c99); --edit-color-editor-ink-subtle: light-dark(#5c6370, #363b54); --edit-color-editor-lift: light-dark(#2c313c, #1e202e); } /* "one dark" — Atom's One Dark syntax palette. The LIGHT-theme * default since the task-651 split (owner 2026-07-31: "one dark" * becomes the default editor color scheme; the unstamped-root * default block above carries its values in the light arm). * upstream: https://github.com/atom/one-dark-syntax — MIT. * Mapping: well syntax-bg · ink mono-1 · lift the port-canonical * #2c313c cursor line · subtle mono-3 · muted mono-2 · keyword hue-3 * purple · type hue-6-2 · string hue-4 green · number hue-6 orange · * comment mono-3 · punct mono-1. Measured on #282c34: ink 6.57 · * keyword 4.75 · type 8.10 · string 6.94 · number 5.68 · comment * 2.32 · punct 6.57 — comment below 4.5 at its canonical value * (recorded, not altered). */ :root[data-editor-scheme="one-dark"] { --edit-color-editor-keyword: #c678dd; --edit-color-editor-type: #e5c07b; --edit-color-editor-string: #98c379; --edit-color-editor-number: #d19a66; --edit-color-editor-comment: #5c6370; --edit-color-editor-punct: #abb2bf; --edit-color-editor-well: #282c34; --edit-color-editor-ink: #abb2bf; --edit-color-editor-ink-muted: #828997; --edit-color-editor-ink-subtle: #5c6370; --edit-color-editor-lift: #2c313c; } /* "gruvbox" — gruvbox dark (medium) by Pavel Pertsev (morhetz). * upstream: https://github.com/morhetz/gruvbox — MIT/X11 (the * repository's own License section). * Mapping: well bg0 · ink fg1 · lift bg1 · subtle bg4 · muted fg4 · * keyword red · type yellow · string green · number purple · comment * gray · punct fg1. Measured on #282828: ink 10.75 · keyword 4.29 · * type 8.69 · string 7.14 · number 5.37 · comment 4.02 · punct 10.75 * — keyword + comment below 4.5 at canonical values (recorded, not * altered). */ :root[data-editor-scheme="gruvbox-dark"] { --edit-color-editor-keyword: #fb4934; --edit-color-editor-type: #fabd2f; --edit-color-editor-string: #b8bb26; --edit-color-editor-number: #d3869b; --edit-color-editor-comment: #928374; --edit-color-editor-punct: #ebdbb2; --edit-color-editor-well: #282828; --edit-color-editor-ink: #ebdbb2; --edit-color-editor-ink-muted: #a89984; --edit-color-editor-ink-subtle: #7c6f64; --edit-color-editor-lift: #3c3836; } /* "nord" — Nord by Sven Greb / the Nord project. * upstream: https://www.nordtheme.com/docs/colors-and-palettes * https://github.com/nordtheme/nord — MIT. * Mapping (the spec's own syntax assignments): well nord0 · ink * nord4 · lift nord1 · subtle nord3 · muted nord4 · keyword nord9 * (which the spec also assigns to punctuation — roles share it) · * type nord7 · string nord14 · number nord15 · comment the docs' * brightened-nord3 comment cut #616e88 (nord's own 10%-brightness * amendment, adopted as its editors' default). Measured on #2e3440: * ink 9.25 · keyword 4.64 · type 5.99 · string 6.13 · number 4.41 · * comment 2.43 · punct 4.64 — number + comment below 4.5 at * canonical values (recorded, not altered). */ :root[data-editor-scheme="nord"] { --edit-color-editor-keyword: #81a1c1; --edit-color-editor-type: #8fbcbb; --edit-color-editor-string: #a3be8c; --edit-color-editor-number: #b48ead; --edit-color-editor-comment: #616e88; --edit-color-editor-punct: #81a1c1; --edit-color-editor-well: #2e3440; --edit-color-editor-ink: #d8dee9; --edit-color-editor-ink-muted: #d8dee9; --edit-color-editor-ink-subtle: #4c566a; --edit-color-editor-lift: #3b4252; } /* "tokyo night" — Tokyo Night by enkia. * upstream: https://github.com/enkia/tokyo-night-vscode-theme — MIT. * Mapping (the theme's own editor values): well #1a1b26 · ink * #a9b1d6 · lift lineHighlight · subtle lineNumber · muted * lineNumber-active · keyword #bb9af7 · type #0db9d7 · string * #9ece6a · number #ff9e64 · comment #51597d · punct #89ddff. * Measured on #1a1b26: ink 8.10 · keyword 7.39 · type 7.27 · string * 9.35 · number 8.40 · comment 2.50 · punct 11.27 — comment below * 4.5 at its canonical value (recorded, not altered). */ :root[data-editor-scheme="tokyo-night"] { --edit-color-editor-keyword: #bb9af7; --edit-color-editor-type: #0db9d7; --edit-color-editor-string: #9ece6a; --edit-color-editor-number: #ff9e64; --edit-color-editor-comment: #51597d; --edit-color-editor-punct: #89ddff; --edit-color-editor-well: #1a1b26; --edit-color-editor-ink: #a9b1d6; --edit-color-editor-ink-muted: #787c99; --edit-color-editor-ink-subtle: #363b54; --edit-color-editor-lift: #1e202e; } /* "monokai" — the CLASSIC Monokai palette (Wimer Hazenberg, 2006), * ported at the values VS Code ships built-in — NOT Monokai Pro (a * separate commercial product; deliberately not ported). * upstream: https://github.com/microsoft/vscode * extensions/theme-monokai/themes/monokai-color-theme.json * — MIT. * Mapping: well #272822 · ink #f8f8f2 · lift lineHighlight #3e3d32 · * subtle lineNumber #90908a · muted lineNumber-active #c2c2bf · * keyword #f92672 · type #66d9ef · string #e6db74 · number #ae81ff · * comment #88846f · punct #f8f8f2. Measured on #272822: ink 13.94 · * keyword 3.93 · type 9.01 · string 10.44 · number 5.23 · comment * 3.95 · punct 13.94 — keyword + comment below 4.5 at canonical * values (recorded, not altered). */ :root[data-editor-scheme="monokai"] { --edit-color-editor-keyword: #f92672; --edit-color-editor-type: #66d9ef; --edit-color-editor-string: #e6db74; --edit-color-editor-number: #ae81ff; --edit-color-editor-comment: #88846f; --edit-color-editor-punct: #f8f8f2; --edit-color-editor-well: #272822; --edit-color-editor-ink: #f8f8f2; --edit-color-editor-ink-muted: #c2c2bf; --edit-color-editor-ink-subtle: #90908a; --edit-color-editor-lift: #3e3d32; } /* "catppuccin" — Catppuccin Mocha, the project's own style-guide * assignments. * upstream: https://github.com/catppuccin/catppuccin — MIT * (docs/style-guide.md + the Mocha palette). * Mapping: well base · ink text · lift surface0 · subtle overlay1 * (line numbers) · muted lavender (the guide's active line number) · * keyword mauve · type yellow · string green · number peach · * comment overlay2 · punct sky. Measured on #1e1e2e: ink 11.34 · * keyword 8.07 · type 12.91 · string 11.03 · number 9.27 · comment * 5.81 · punct 10.54 — all text roles ≥ 4.5. */ :root[data-editor-scheme="catppuccin-mocha"] { --edit-color-editor-keyword: #cba6f7; --edit-color-editor-type: #f9e2af; --edit-color-editor-string: #a6e3a1; --edit-color-editor-number: #fab387; --edit-color-editor-comment: #9399b2; --edit-color-editor-punct: #89dceb; --edit-color-editor-well: #1e1e2e; --edit-color-editor-ink: #cdd6f4; --edit-color-editor-ink-muted: #b4befe; --edit-color-editor-ink-subtle: #7f849c; --edit-color-editor-lift: #313244; } /* "github dark" — GitHub Dark Default (Primer). * upstream: https://github.com/primer/github-vscode-theme — MIT * (values from the Primer primitives scales the theme * composes: red.3 / orange.2 / blue.1 / blue.2 / gray.3). * Mapping: well canvas-default · ink fg-default · lift canvas-subtle * · subtle gray.4 (line numbers) · muted fg-default · keyword red.3 · * type orange.2 · string blue.1 · number blue.2 · comment gray.3 · * punct fg-default. Measured on #0d1117: ink 16.02 · keyword 7.51 · * type 9.77 · string 12.31 · number 9.73 · comment 6.15 · punct * 16.02 — all text roles ≥ 4.5. */ :root[data-editor-scheme="github-dark"] { --edit-color-editor-keyword: #ff7b72; --edit-color-editor-type: #ffa657; --edit-color-editor-string: #a5d6ff; --edit-color-editor-number: #79c0ff; --edit-color-editor-comment: #8b949e; --edit-color-editor-punct: #e6edf3; --edit-color-editor-well: #0d1117; --edit-color-editor-ink: #e6edf3; --edit-color-editor-ink-muted: #e6edf3; --edit-color-editor-ink-subtle: #6e7681; --edit-color-editor-lift: #161b22; } /* "github light" — GitHub Light Default (Primer; paired variant). * upstream: https://github.com/primer/github-vscode-theme — MIT * (Primer light scales: red.5 / orange.6 / blue.8 / blue.6 * / gray.5). * Mapping: well canvas-default (#ffffff) · ink fg-default · lift * canvas-subtle · subtle gray.4 (line numbers) · muted fg-default · * keyword red.5 · type orange.6 · string blue.8 · number blue.6 · * comment gray.5 · punct fg-default. Measured on #ffffff: ink 15.80 * · keyword 5.36 · type 7.39 · string 12.81 · number 7.59 · comment * 4.55 · punct 15.80 — all text roles ≥ 4.5. */ :root[data-editor-scheme="github-light"] { --edit-color-editor-keyword: #cf222e; --edit-color-editor-type: #953800; --edit-color-editor-string: #0a3069; --edit-color-editor-number: #0550ae; --edit-color-editor-comment: #6e7781; --edit-color-editor-punct: #1f2328; --edit-color-editor-well: #ffffff; --edit-color-editor-ink: #1f2328; --edit-color-editor-ink-muted: #1f2328; --edit-color-editor-ink-subtle: #8c959f; --edit-color-editor-lift: #f6f8fa; } /* The one sanctioned keyframe (§2.5): `pul`. Everything that breathes — * carets, running dots — breathes with it. */ @keyframes pul { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* The global reduced-motion kill (§2.5): prefers-reduced-motion ends * all animation, in every consumer, from the one token source. This * kill is device-agnostic — it collapses motion identically on touch * (the 2026-07-27 mobile-touch ruling names no carve-out). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* Species motion that spans files (one register, no second dialect): * a tab switch inside an overlay surface crossfades its content in. * The account drawer's tabpanels toggle [hidden]; when a panel comes * back into rendering, @starting-style fires and OPACITY (the only * animated property) fades it up over the fast step. The kill above * collapses this to instant. * * Gated on the kit Overlay's data-settled mark (round-5 polish, owner * 2026-07-27 "still a little janky"): ungated, the crossfade ALSO * fired on the drawer's own entry — panel fade times tabpanel fade * multiply, and the interior measured ~0.34 opacity while the sheet * read 0.52 mid-entry (a muddy content lag on every first open). The * mark lands two frames after panel mount, past the tabpanel's first * style pass, so the mount frame rides the panel's fade ALONE and * every later tab switch keeps this crossfade. */ [role="dialog"][data-settled] [role="tabpanel"] { transition: opacity var(--edit-motion-fast) var(--edit-ease-standard); } @starting-style { [role="dialog"][data-settled] [role="tabpanel"]:not([hidden]) { opacity: 0; } } /* THE ONE FOCUS RING (U2, ux-polish substrate round 2026-07-25): * every surface inherits the designed ring — 1px of the thistle focus * derivation hugging the element — so no element anywhere shows the * UA default blue. :where() keeps specificity at zero: any species * that draws its own ring (the kit's focus-visible:ring-1 utilities, * which pair with outline-none) or any ruled exception overrides this * without ceremony. * * Ruled exception that stands above this rule: code surfaces (the * code-focus token above, WCAG 1.4.11) — their ring is the accent at * full strength in each theme (the translucent derivation measures * under 1.4.11 on the wells); their own higher-specificity rules * win. setout.dev inherits this ring too * (owner ruling 2026-07-25: its 2px full-strength outline converged * — consistency wins over preservation there). * outline (not box-shadow) so the ring composes with resting * box-shadows (field washes, rose error rings) and follows each * element's own border-radius. * * LAYERED on purpose (drawer-unify round, 2026-07-27): this rule sits * in the cascade's `base` layer so the documented contract above is * true in the cascade, not just in intent. Unlayered, it OUTRANKED * every layered Tailwind utility regardless of specificity — the * zero-specificity :where() bought nothing, `outline-none` could * never opt a species out, and the kit Overlay panel wore this ring * whenever the browser deemed its programmatic focus "visible". That * was the owner-reported wa drawer bug: a ?account= deep-link refresh * focuses the just-mounted sheet with no prior user interaction, the * heuristic flags :focus-visible, and the 1px ring around the * full-width sheet rendered as top & bottom chrome lines (candidate-D * violation) that vanished on any pointer reopen. In `base`, utilities * (and any species' own ring rules) override without ceremony — * exactly what the paragraph above always promised. */ @layer base { :where(:focus-visible) { outline: 1px solid var(--edit-color-focus); outline-offset: 0; } } /* THE CURSOR AFFORDANCE FLOOR (task 648 — owner report: the shell * header's `copy`/`map`/`close` word verbs showed the arrow). * Tailwind v4's preflight dropped v3's `button { cursor: pointer }` * (buttons fell back to the UA arrow), and nothing in the family * restored it — every button-backed control on every surface lost the * pointer at once. This is that rule's family seat: a control that * acts on click SAYS SO under the hand. * * Menu rows, options and tabs are clickable rows: the same floor. * * The dead-control legs are EXPLICIT, not inherited: a control that * refuses the click (disabled, or the kit's not-ready aria-disabled * voice) never wears the pointer. * * LAYERED in `base` exactly like the focus ring above, and for the * same reason: cursor-* utilities and species' own rules must win * without ceremony. tokens.css is the one file every surface loads * (both apps' Tailwind layers AND the reading pages, which prepend * these bytes raw), so the floor reaches every document from here. */ @layer base { button:not(:disabled):not([aria-disabled="true"]), [role="button"]:not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"]), [role="tab"]:not([aria-disabled="true"]) { cursor: pointer; } button:disabled, button[aria-disabled="true"], [role="button"][aria-disabled="true"] { cursor: default; } } :root{font-family:var(--edit-font-sans);font-size:16px;color:var(--edit-color-fg);background:var(--edit-color-canvas)} body{margin:0} main{box-sizing:border-box;width:100%;max-width:var(--edit-column-work);margin:0 auto;padding:calc(var(--edit-space-unit)*20) calc(var(--edit-space-unit)*4);display:flex;flex-direction:column;align-items:flex-start;gap:var(--edit-space-stanza)} h1{margin:0;font-size:var(--edit-text-xl);line-height:var(--edit-text-xl--line-height);font-weight:500} p{margin:0;max-width:52ch;font-size:var(--edit-text-base);line-height:var(--edit-text-base--line-height);color:var(--edit-color-fg-muted)} .hint{font-size:var(--edit-text-sm);line-height:var(--edit-text-sm--line-height);color:var(--edit-color-fg-subtle)} form{box-sizing:border-box;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--edit-space-unit)*4)} .field{box-sizing:border-box;width:100%;max-width:calc(var(--edit-space-unit)*95);display:flex;flex-direction:column;gap:calc(var(--edit-space-unit)*1.5)} label{font-size:var(--edit-text-sm);line-height:var(--edit-text-sm--line-height);color:var(--edit-color-fg-subtle)} input,select{box-sizing:border-box;width:100%;margin:0;font:inherit;font-size:var(--edit-text-base);color:var(--edit-color-fg);caret-color:var(--edit-color-caret);background:var(--edit-color-surface-raised);border:0;border-radius:var(--edit-radius-inline);padding:calc(var(--edit-space-unit)*2) calc(var(--edit-space-unit)*3);outline:none;appearance:none} .select{position:relative;display:block} .select::after{content:"⌄";position:absolute;right:calc(var(--edit-space-unit)*3);top:50%;transform:translateY(-50%);font-size:var(--edit-text-sm);color:var(--edit-color-fg-faint);pointer-events:none} button{margin:0;padding:0;font:inherit;font-size:var(--edit-text-base);color:var(--edit-color-fg);background:none;border:0;border-radius:var(--edit-radius-inline);text-align:left;cursor:pointer;outline:none} button::after{content:" ›" / "";color:var(--edit-color-accent)} button:disabled{color:var(--edit-color-fg-subtle);cursor:default} input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{box-shadow:0 0 0 1px var(--edit-color-focus)} a{font-size:var(--edit-text-md);color:var(--edit-color-fg-subtle);text-decoration:none;border-radius:var(--edit-radius-inline)} a:hover{color:var(--edit-color-fg)} #error{min-height:var(--edit-text-sm--line-height);margin:0;font-size:var(--edit-text-sm);line-height:var(--edit-text-sm--line-height);color:var(--edit-color-rose)} dl{box-sizing:border-box;width:100%;margin:0;display:grid;grid-template-columns:minmax(8rem,max-content) minmax(0,1fr);align-items:baseline;gap:calc(var(--edit-space-unit)*1.5) calc(var(--edit-space-unit)*6)} dt{font-size:var(--edit-text-sm);color:var(--edit-color-fg-subtle)} dd{margin:0;min-width:0;overflow-wrap:anywhere} pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--edit-font-mono);font-size:var(--edit-text-sm)}