Converge the docs chrome on one content width and a shared label tier

Andrew Dunnrequested to merge
chrome/converged-r2 into main

What does this MR do and why?

I want every site on the docs chrome to share one layout and one set of label styles, because each exhibit site has been styling its callouts, labels and active nav its own way.

  • One content width. On a wide page every main-column block (prose, callouts, the pattern block, code, the terminal frame, disclosures, the lab grid and the pager) spans the figure plate's width, with no narrower cap.
  • Label and text. Callouts and a new pattern block lay out as a narrow label column beside the text, stacking at 560px.
  • Label tier. Eyebrows, rail headings and table heads share a mono capitals style at 0.14em tracking. Nav links stay at 0.08em.
  • Tokens. A fluid gutter, -subtle tints made with color-mix, and --border-strong.
  • Active links. The active nav link is underlined in --accent-link and carries aria-current="page", in the template and on this site; the active rail link is semibold beside its existing bar.
  • Header and footer bars align with the wide page shell, and a terminal frame styles command output.
  • Text theme toggle. Its styles ship here. The template keeps its icon toggle until its pinned chrome carries these styles, because against v2.5.0 the text would spill out of its button.

The chrome page shows the terminal frame and the pattern block.

Standards affected

None. standards/design passes, and no assertion, tier or status changes.

Exemption implications

None. A consumer on a pinned chrome sees nothing until it repins.

Test plan

  • just guard, just validate, and just check-one for design, changelog and contributing pass; the template's astro check reports 0 errors.
  • No page is wider than the viewport at 390, 721, 1010, 1280 or 1440 on the template's 9 pages or this site's 61, except /standards/agents-md/ at 390, which overflows the same way on main.
  • Every main-column block is within 1px of the plate's width at 1440 and 1010.
  • The header stays one row and 57px from 721 to 1151.
  • Contrast: the label tier is 5.38 and 4.98:1 in light and 5.02 and 4.58:1 in dark; the pattern label 15.6:1; the active nav underline 4.14:1 in light and 8.60:1 in dark.
  • Not tested: a screen reader, Safari and Firefox.

An AI tool wrote this change and ran the checks above.

Merge request reports