@bongos/core 1.19.726 → 1.19.727

package/docs/design/mocks/hall/_tokens.css

@@ -1,370 +0,0 @@
-/* The builders' hall in the chrome world - the candidate token tier for the composition round
-   (task 1003302, goal 1000081). This file is what the round proposes should become the token tier of
-   modules/hall-ui/public/style.css when task 1003303 builds the shell; the fifteen mocks under
-   docs/design/mocks/hall/ all link it, so a steer here moves all fifteen at once.
-
-   It is DESIGN.md's "Reuse: the hall and the status ledger" recipe, followed literally:
-     1. open on a bare :root carrying the pack's LIGHT values, exactly as config/branding.neutral.json
-        has them (drift-tested), and no others;
-     2. add a derived tier below it REUSING THE WORLD'S NAMES - void*, glass*, accent-ink, accent-lift,
-        accent-tint, accent-on, accent-glow, focus, type-halo, label-face, line, radius*, top-h - with
-        the recipes from DESIGN.md's frontmatter, so an agent moving between the landing, the hub and
-        the hall is in one world;
-     3. write the dark block twice at (0,2,0), pinning no accent literal;
-     4. keep composition out of it - every layout switch lives on the page's own body.
-
-   THREE THINGS THIS FILE DOES THAT world.css DOES NOT, each one a hall problem the landing never had:
-
-   a. THE STATUS VOCABULARY IS FIXED, AND IT IS THE ONE SANCTIONED EXCEPTION TO THE FIFTEEN RULE.
-      DESIGN.md: "Status colours are the exception. This world's ok / warn / err are warm accent-derived
-      states for a marketing surface. A surface that renders VERIFICATION state - the hall's chips, the
-      status ledger's pillars, CI marks - keeps its own fixed green / amber / red vocabulary and must not
-      adopt these." A grade that failed must not be salmon on a page whose primary door is also salmon.
-      They are literal hexes on purpose; they are the only ones in this file; they live HERE rather than
-      in any mock's own <style> (which tests/hall_audit.mjs would fail for redeclaring a pack var, and
-      check-mock.js would fail for the literal); and DESIGN.md is what licenses them.
-
-      THREE OF THE FOUR HAD TO MOVE, and that is a finding of this round, not a preference. style.css
-      tuned them against the hall's retired ground (--bg #f5f6f8, --bg-card #ffffff). The chrome world's
-      paper is darker (--bg #edecee), and measured against it the shipped values FAIL AA:
-        ok   #1a7f4b  4.27:1 on --bg     warn #9a6700  4.13:1 on --bg
-        info var(--sea) 3.85:1 on --bg and 4.36:1 on --bg-card, and 4.19:1 on dark --bg-card.
-      So ok and warn are darkened, and info becomes a color-mix of the contract's --sea rather than the
-      raw token: 86% over black in light, 91% over white in dark. Every pair now clears 4.5:1 on BOTH of
-      its grounds in BOTH modes with about nine percent of headroom, the margin DESIGN.md sets for its
-      own thinnest pair. --danger was already clear at 5.58:1 and is untouched. Task 1003303 should carry
-      these values, not style.css's.
-
-   b. THE HALL KEEPS BOTH MODES. The apex went dark only (ADR 0204) and light is now "the builders'
-      hall's alone, its own hall-theme switch, untouched". The hall's switch writes html[data-theme],
-      NOT html[data-mode] - so the dark tier below is written FOUR times, not twice: the world's two
-      (data-mode + prefers-color-scheme, which is what check-mock.js measures and what the landing and
-      the hub use) and the hall's own two (data-theme + prefers-color-scheme on :not([data-theme])),
-      which is the selector shell.js actually sets. Task 1003303 may collapse this to the hall's pair
-      once the mocks are done being read by the kit; the duplication is the round's, not the build's.
-
-   c. --line IS A WIDTH HERE, NOT A COLOUR. DESIGN.md warns: "--line is a 1px WIDTH here and a hairline
-      COLOUR in the hub's sheet; check the name before you port a rule." The hall follows world.css:
-      --line is 1px, and the hairline's colour is --rule / --rule-soft. */
-
-:root {
-  color-scheme: light;
-
-  /* ---- the contract tier: the thirteen colours and two faces a host pack overrides, and nothing
-          else. Values are config/branding.neutral.json theme.ui exactly (serve-internal.js COLOR_VARS
-          re-declares these from the pack AFTER every stylesheet, so a host still wins). ---- */
-  --bg: #edecee;
-  --bg-card: #fbfafc;
-  --bg-deep: #e2e1e4;
-  --bg-frame: #f6f5f7;
-  --ink: #17181a;
-  --ink-soft: #55565a;
-  --ink-faint: #65656a;
-  --rule: #c6c6c8;
-  --rule-soft: #dcdbdd;
-  --accent: #fb9569;
-  --accent-deep: #a3481a;
-  --sea: #5b6fd0;
-  --terracotta: #c9512c;
-  --font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
-  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
-
-  /* ---- derived: the third face. Mono is where the hall quotes the machine - task ids, column heads,
-          eyebrows, the rank label, a credit figure's unit. ---- */
-  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
-
-  /* ---- derived: the void. The hall has no hero, so the void is only what a control needs when it sits
-          over the plate in v3 - the one version that puts a rendered ground behind the shell. ---- */
-  --void: #050508;
-  --void-ink: #ffffff;
-  --void-ink-soft: rgba(255, 255, 255, .70);
-  --void-edge: rgba(23, 24, 26, .12);
-  --void-pill: rgba(0, 0, 0, .5);
-  --void-glass: rgba(23, 24, 26, .05);
-  --void-glass-strong: rgba(23, 24, 26, .09);
-
-  /* ---- derived: glass. Blur is a token because light glass over paper is a tint, not a frost. ---- */
-  --glass: rgba(23, 24, 26, .05);
-  --glass-strong: rgba(23, 24, 26, .08);
-  --glass-edge: rgba(23, 24, 26, .12);
-  --glass-blur: 0px;
-
-  /* ---- derived: the skeleton tone. A hall problem the landing never had, because every hall page
-          loads and the landing does not. The obvious choice, --bg-deep, is WRONG in dark: DESIGN.md
-          says "in dark, deep collapses back to black", so --bg-deep and --bg are the same value and a
-          skeleton painted with it is invisible on the black ground. This mix reads in BOTH modes and
-          needs no dark twin, because both of its terms already flip. Found by the task archetype's
-          build during this round; every archetype had solved it privately, so it is promoted here
-          rather than left for 27 pages to reinvent. ---- */
-  --skeleton: color-mix(in srgb, var(--ink) 10%, var(--bg-card));
-
-  /* ---- derived: the reading measure. THE ch UNIT IS NOT A CHARACTER, and on this face the gap is
-          large enough to have already shipped a bug. A ch is the width of the font's ZERO glyph, and
-          Manrope's zero is much wider than its average lowercase, so 58ch renders about 72 characters.
-          DESIGN.md asks for "max 56 to 62ch" for body copy; read as CSS ch that is roughly 70 to 77
-          characters, well outside the measure it means. The live primer is the worked example:
-          primer.css:138 sets `max-width: 72ch` under a comment reading "Roughly 60-72ch at 17px body",
-          and it renders about 90 characters, which is the biggest reading defect on the page today.
-          This token is MEASURED, not declared: 48ch renders ~60 characters at the hall's body size on
-          Manrope. A surface wanting a different measure should re-measure rather than do the ch maths.
-          Found by the reading archetype's build during this round. ---- */
-  --measure: 48ch;
-
-  /* ---- derived: accent behaviours. The One Warm Thing Rule holds in the hall too: the accent lights
-          only what is pressable or live - the claim button, the current nav item, the active tab, the
-          lit lifecycle step, a focus ring. A credit figure is data, not live, so it is ink. ---- */
-  --accent-ink: color-mix(in srgb, var(--accent) 45%, #240e00);
-  --accent-lift: color-mix(in srgb, var(--accent) 58%, #ffffff);
-  --accent-tint: color-mix(in srgb, var(--accent) 30%, #fffdf9);
-  --accent-on: #2a1305;
-  --accent-glow: 0 0 0 0 transparent;
-
-  /* ---- the status vocabulary: FIXED, not pack-driven, not accent-derived. See note (a) above:
-          ok, warn and info are RE-MEASURED against the chrome world's paper, not style.css's values. ---- */
-  --ok: #187444;
-  --ok-weak: color-mix(in srgb, #187444 12%, var(--bg-card));
-  --warn: #895c00;
-  --warn-weak: color-mix(in srgb, #895c00 14%, var(--bg-card));
-  --danger: #b42318;
-  --danger-weak: color-mix(in srgb, #b42318 10%, var(--bg-card));
-  --info: color-mix(in srgb, var(--sea) 86%, #000000);
-  --info-weak: color-mix(in srgb, var(--sea) 11%, var(--bg-card));
-
-  /* ---- derived: focus. The world's two-tone ring - a 2px accent-derived outline at 3px offset inside
-          an 8px --bg halo, so the indicator keeps its own edge over whatever it lands on. ---- */
-  --focus: color-mix(in srgb, var(--accent-deep) 82%, #3a1400);
-
-  /* ---- derived: the label face flips. Mono caps read as precise on paper and thin on black, so light
-          takes JetBrains Mono and dark takes the body face. Take the token, never the family. ---- */
-  --label-face: var(--font-mono);
-  --label-size: 11px;
-  --label-space: .12em;
-  --label-case: uppercase;
-
-  /* ---- derived: type halo. Only v3 writes type over a plate; in light there is nothing behind. ---- */
-  --type-halo: none;
-
-  /* ---- structure. --line is a WIDTH (see note c). ---- */
-  --line: 1px;
-  --radius: 16px;
-  --radius-sm: 10px;
-  --radius-pill: 999px;
-
-  /* ---- the shell's metrics. Names kept from style.css so task 1003303 ports rather than rewrites.
-          --topbar-h stays under the kit's 80px top-bar floor. ---- */
-  --top-h: 56px;
-  --topbar-h: 56px;
-  --sidebar-w: 240px;
-  --sidebar-w-rail: 64px;
-  --content-max: 1120px;
-
-  /* ---- spacing. DESIGN.md's rhythm (6 / 10 / 14 / 22 / 34 / 52) replaces style.css's four-step
-          --space-* scale; the old names alias onto it so no ported rule breaks. ---- */
-  --sp-hair: 6px;
-  --sp-xs: 10px;
-  --sp-sm: 14px;
-  --sp-md: 22px;
-  --sp-lg: 34px;
-  --sp-xl: 52px;
-  --space-1: var(--sp-hair);
-  --space-2: var(--sp-xs);
-  --space-3: var(--sp-sm);
-  --space-4: var(--sp-md);
-
-  /* ---- the z ladder, unchanged from style.css ---- */
-  --z-topbar: 30;
-  --z-sidebar: 40;
-  --z-scrim: 140;
-  --z-drawer: 150;
-
-  /* ---- the hall's own plate. DESIGN.md: "another surface adds its own and does not borrow these -
-          the hall's forest plate, for instance, is the hall's." Round 1 shot it; only v3 renders it,
-          and only in dark, where a black-ground plate composites with lighten and leaves no seam. ---- */
-  --plate: none;
-  --plate-blend: lighten;
-  --plate-veil: none;
-}
-
-/* ---- dark, written for the world's switch (what check-mock.js and the kit measure) ---- */
-:root[data-mode="dark"] {
-  color-scheme: dark;
-  --bg: #000000;
-  --bg-card: #101012;
-  --bg-deep: #000000;
-  --bg-frame: #08080a;
-  --ink: #ffffff;
-  --ink-soft: #c0c0c0;
-  --ink-faint: #a8a8a8;
-  --rule: rgba(255, 255, 255, .16);
-  --rule-soft: rgba(255, 255, 255, .08);
-  --void: #000000;
-  --void-ink: var(--ink);
-  --void-ink-soft: var(--ink-soft);
-  --void-edge: rgba(255, 255, 255, .16);
-  --void-glass: rgba(255, 255, 255, .075);
-  --void-glass-strong: rgba(255, 255, 255, .14);
-  --glass: rgba(255, 255, 255, .11);
-  --glass-strong: rgba(255, 255, 255, .17);
-  --glass-edge: rgba(255, 255, 255, .13);
-  --glass-blur: 18px;
-  --accent-ink: var(--accent);
-  --accent-tint: color-mix(in srgb, var(--accent) 22%, #0b0a09);
-  --accent-glow: 0 8px 28px color-mix(in srgb, var(--accent) 38%, transparent);
-  --ok: #4ade80;
-  --ok-weak: color-mix(in srgb, #4ade80 14%, var(--bg-card));
-  --warn: #fbbf24;
-  --warn-weak: color-mix(in srgb, #fbbf24 14%, var(--bg-card));
-  --danger: #f87171;
-  --danger-weak: color-mix(in srgb, #f87171 14%, var(--bg-card));
-  --info: color-mix(in srgb, var(--sea) 91%, #ffffff);
-  --info-weak: color-mix(in srgb, var(--sea) 18%, var(--bg-card));
-  --focus: var(--accent);
-  --label-face: var(--font-body);
-  --label-size: 11.5px;
-  --label-space: .1em;
-  --type-halo: 0 2px 18px rgba(0, 0, 0, .94), 0 0 54px rgba(0, 0, 0, .72);
-  --plate-veil: linear-gradient(to bottom, rgba(0, 0, 0, .82), rgba(0, 0, 0, .93));
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-mode="light"]) {
-    color-scheme: dark;
-    --bg: #000000;
-    --bg-card: #101012;
-    --bg-deep: #000000;
-    --bg-frame: #08080a;
-    --ink: #ffffff;
-    --ink-soft: #c0c0c0;
-    --ink-faint: #a8a8a8;
-    --rule: rgba(255, 255, 255, .16);
-    --rule-soft: rgba(255, 255, 255, .08);
-    --void: #000000;
-    --void-ink: var(--ink);
-    --void-ink-soft: var(--ink-soft);
-    --void-edge: rgba(255, 255, 255, .16);
-    --void-glass: rgba(255, 255, 255, .075);
-    --void-glass-strong: rgba(255, 255, 255, .14);
-    --glass: rgba(255, 255, 255, .11);
-    --glass-strong: rgba(255, 255, 255, .17);
-    --glass-edge: rgba(255, 255, 255, .13);
-    --glass-blur: 18px;
-    --accent-ink: var(--accent);
-    --accent-tint: color-mix(in srgb, var(--accent) 22%, #0b0a09);
-    --accent-glow: 0 8px 28px color-mix(in srgb, var(--accent) 38%, transparent);
-    --ok: #4ade80;
-    --ok-weak: color-mix(in srgb, #4ade80 14%, var(--bg-card));
-    --warn: #fbbf24;
-    --warn-weak: color-mix(in srgb, #fbbf24 14%, var(--bg-card));
-    --danger: #f87171;
-    --danger-weak: color-mix(in srgb, #f87171 14%, var(--bg-card));
-    --info: color-mix(in srgb, var(--sea) 91%, #ffffff);
-    --info-weak: color-mix(in srgb, var(--sea) 18%, var(--bg-card));
-    --focus: var(--accent);
-    --label-face: var(--font-body);
-    --label-size: 11.5px;
-    --label-space: .1em;
-    --type-halo: 0 2px 18px rgba(0, 0, 0, .94), 0 0 54px rgba(0, 0, 0, .72);
-    --plate-veil: linear-gradient(to bottom, rgba(0, 0, 0, .82), rgba(0, 0, 0, .93));
-  }
-}
-
-/* ---- dark again, for the hall's OWN switch: shell.js writes html[data-theme], not [data-mode].
-        See note (b): these two blocks are what the shipped hall would actually use. ---- */
-html[data-theme="dark"] {
-  color-scheme: dark;
-  --bg: #000000;
-  --bg-card: #101012;
-  --bg-deep: #000000;
-  --bg-frame: #08080a;
-  --ink: #ffffff;
-  --ink-soft: #c0c0c0;
-  --ink-faint: #a8a8a8;
-  --rule: rgba(255, 255, 255, .16);
-  --rule-soft: rgba(255, 255, 255, .08);
-  --void: #000000;
-  --void-ink: var(--ink);
-  --void-ink-soft: var(--ink-soft);
-  --void-edge: rgba(255, 255, 255, .16);
-  --void-glass: rgba(255, 255, 255, .075);
-  --void-glass-strong: rgba(255, 255, 255, .14);
-  --glass: rgba(255, 255, 255, .11);
-  --glass-strong: rgba(255, 255, 255, .17);
-  --glass-edge: rgba(255, 255, 255, .13);
-  --glass-blur: 18px;
-  --accent-ink: var(--accent);
-  --accent-tint: color-mix(in srgb, var(--accent) 22%, #0b0a09);
-  --accent-glow: 0 8px 28px color-mix(in srgb, var(--accent) 38%, transparent);
-  --ok: #4ade80;
-  --ok-weak: color-mix(in srgb, #4ade80 14%, var(--bg-card));
-  --warn: #fbbf24;
-  --warn-weak: color-mix(in srgb, #fbbf24 14%, var(--bg-card));
-  --danger: #f87171;
-  --danger-weak: color-mix(in srgb, #f87171 14%, var(--bg-card));
-  --info: color-mix(in srgb, var(--sea) 91%, #ffffff);
-  --info-weak: color-mix(in srgb, var(--sea) 18%, var(--bg-card));
-  --focus: var(--accent);
-  --label-face: var(--font-body);
-  --label-size: 11.5px;
-  --label-space: .1em;
-  --type-halo: 0 2px 18px rgba(0, 0, 0, .94), 0 0 54px rgba(0, 0, 0, .72);
-  --plate-veil: linear-gradient(to bottom, rgba(0, 0, 0, .82), rgba(0, 0, 0, .93));
-}
-
-@media (prefers-color-scheme: dark) {
-  html:not([data-theme]) {
-    color-scheme: dark;
-    --bg: #000000;
-    --bg-card: #101012;
-    --bg-deep: #000000;
-    --bg-frame: #08080a;
-    --ink: #ffffff;
-    --ink-soft: #c0c0c0;
-    --ink-faint: #a8a8a8;
-    --rule: rgba(255, 255, 255, .16);
-    --rule-soft: rgba(255, 255, 255, .08);
-    --void: #000000;
-    --void-ink: var(--ink);
-    --void-ink-soft: var(--ink-soft);
-    --void-edge: rgba(255, 255, 255, .16);
-    --void-glass: rgba(255, 255, 255, .075);
-    --void-glass-strong: rgba(255, 255, 255, .14);
-    --glass: rgba(255, 255, 255, .11);
-    --glass-strong: rgba(255, 255, 255, .17);
-    --glass-edge: rgba(255, 255, 255, .13);
-    --glass-blur: 18px;
-    --accent-ink: var(--accent);
-    --accent-tint: color-mix(in srgb, var(--accent) 22%, #0b0a09);
-    --accent-glow: 0 8px 28px color-mix(in srgb, var(--accent) 38%, transparent);
-    --ok: #4ade80;
-    --ok-weak: color-mix(in srgb, #4ade80 14%, var(--bg-card));
-    --warn: #fbbf24;
-    --warn-weak: color-mix(in srgb, #fbbf24 14%, var(--bg-card));
-    --danger: #f87171;
-    --danger-weak: color-mix(in srgb, #f87171 14%, var(--bg-card));
-    --info: color-mix(in srgb, var(--sea) 91%, #ffffff);
-    --info-weak: color-mix(in srgb, var(--sea) 18%, var(--bg-card));
-    --focus: var(--accent);
-    --label-face: var(--font-body);
-    --label-size: 11.5px;
-    --label-space: .1em;
-    --type-halo: 0 2px 18px rgba(0, 0, 0, .94), 0 0 54px rgba(0, 0, 0, .72);
-    --plate-veil: linear-gradient(to bottom, rgba(0, 0, 0, .82), rgba(0, 0, 0, .93));
-  }
-}
-
-/* ---- THE RAIL SWITCH DELIBERATELY DOES NOT LIVE HERE. style.css collapses the sidebar to 64px at
-        1024px today, and an earlier draft of this file carried that as
-        `@media (max-width:1024px){ :root { --sidebar-w: var(--sidebar-w-rail); } }`. That is broken,
-        and the way it breaks is worth writing down because task 1003303 will be tempted to re-add it:
-        the mock contract requires a page to declare its tokens on `body`, and a `body` declaration
-        beats an INHERITED `:root` value at every width, so a page that sets --sidebar-w at all
-        silently defeats the query. It is also rule 4 of the recipe in this file's own header, which
-        the draft broke: composition belongs on the page's body, and the rail breakpoint is
-        composition. Each version therefore states its own rail and drawer breakpoints on `body`,
-        which is also what lets v3 hold the rail at every width instead of only under 1024. Found by
-        the board archetype's build during this round. ---- */
-
-/* ---- The Kill Switch Rule. Nothing escapes it, and no motion is authored in JavaScript. ---- */
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after { animation: none !important; transition: none !important; }
-}