Re-theme site to Tokyo-11 (Tokyo Night, orange action, purple accent, Semi radius)

[WilfordGrimley]

Description

Implements the owner-ruled Tokyo-11 re-theme (theme-options palette-exploration study, palette 11 "Tokyo × orange-action + purple-accent", Semi corner radius, strict-AAA contrast bar). This is _theme-tokens.scss's (PR #425) first real "retheme the site" exercise. Three follow-up scope extensions from the coordinator (Bootstrap runtime-var bridge, spacing/type scale, and a WCAG/APCA audit fold-in from PR #432's report) are folded into the same PR.

Token diff (old #302 → Tokyo-11)

Token	Old	New	Notes
body bg	#0f2537	#1a1b26
raised bg	#22303f	#24283b
panel bg ($secondary)	#4e5d6c	#2f3549	now explicit (was Superhero's own stock default)
card-header bg	#4e5d6b	#2f3548	mechanically preserves "one hex digit off panel"
D14 band bg	#2b3e50	#222234
divider	#16202b	#16161e
text	#ebebeb	#c0caf5	7.54:1 panel / 9.02:1 raised (STRICT-AAA)
muted	#8fa0b0	#a3aad0	WCAG/APCA audit fold-in, see below
light	#abb6c2	= text	not an audited study token, aliased to text
primary	#df6919	#ff9e64	8.40:1 STRICT-AAA with the ink flip
success	#5cb85c	#9ece6a	9.35:1 STRICT-AAA
danger	#d9534f	#f7768e	6.46:1 — AAA-LARGE only, the one variant that can't clear strict-7:1 with the shared ink
warning	#ffc107	#e0af68	8.55:1 STRICT-AAA
info	#5bc0de	#7dcfff	not a study token — Tokyo Night's own cyan, chosen so small "link" text stays AAA-safe
btn-ink (new)	white	#1a1b26
accent (new)	—	#bb9af7	additive, UI-role-only
radius (btn/input)	0	6px	"Semi"
radius (card)	0	8px	"Semi", new tier
radius (pill)	10px	10px	unchanged

Accent surface list

D14 confidence pill (.statepill.suggested) + score badge; Sources toggle ON state; Front/Back toggle active state; version-selection glow (.mpccard-highlight, both SelectVersionResults/CardResultSet); the print sheet's selected-slot outline; the funnel's "suggested" chip/corner markers. Never small paragraph text — accent measures 6.74:1 on the D14 band, below strict-normal 7:1 (near-strict, legible on bold pill text/borders only). Bootstrap's global $link-color deliberately stays on $primary, not accent — see theming.md's "accent scope boundary."

AAA numbers

Body text-on-panel 7.54:1 / on-raised 9.02:1. Buttons: primary 8.40, success 9.35, warning 8.55 (all STRICT-AAA); danger 6.46 (AAA-large only — documented deviation, white ink would be far worse at 2.65). Accent-on-band 6.74 (near-strict, UI-role only). Focus ring (opaque accent) 7.39/6.30/5.26 vs body/raised/panel — clears the 3:1 non-text floor everywhere.

Provenance

Palette derived from Tokyo Night (MIT, © 2018-present Enkia — verified LICENSE.txt) — colour values only, no code. $theme-info draws from the same upstream project's cyan swatch (not part of the study's own 10-token set). Full provenance header lives in _theme-tokens.scss. Doc-instruction finding: docs/features/theming.md had no provenance-comment convention before this PR (this is its first real consumer) — added one in place, per this task's own ask.

Coordinator scope extensions folded in

1. Bootstrap runtime-var bridge: styles.scss now explicitly assigns $primary/$secondary/$success/$danger/$warning/$info/$body-bg/$body-color from tokens, so Bootstrap 5.3's own _root.scss emits every --bs-* custom property (and -rgb variant) from them for free — no separate JS runtime state needed. _theme-tokens.scss emits a parallel, deliberately-lean --theme-* bridge only for tokens with no Bootstrap equivalent (avoiding a second source of truth for the same value).
2. Spacing/type scale: $theme-space-1..6 (4/8-based) and $theme-font-2xs..xl added, explicitly future-specs-only — no existing surface was re-spaced; an off-scale-values table lives in theming.md.
3. WCAG/APCA audit fold-in (PR Fix reduced-motion gap in AutofillCollapse chevron #432's report):
   • Focus ring: opaque $theme-accent ring (was 25%-alpha $primary, measured 1.18-1.56:1) — now 3:1+ everywhere via one shared $focus-ring-* override.
   • .btn-close: $btn-close-width 21px→25px (WCAG 2.5.8), $btn-close-color routed to $theme-text (was invisible dark-on-dark).
   • .fbtoggle (owner-ruled amendment): min-height: 24px added (measured 51-55×23px).
   • $theme-muted lightened #8fa0b0→#a3aad0 (APCA Lc 44.1 finding; no APCA library in this repo, remediated via the WCAG proxy instead — numbers and the WCAG-vs-APCA policy note are in theming.md).

Doc updates in this PR

• docs/features/theming.md: token table, provenance convention, runtime-var contract, spacing/type scale + off-scale table, AAA/WCAG-2.2/APCA-advisory policy section, accent scope boundary — all rewritten/extended in place.
• docs/proposals/mockups/proposal-h/SPEC-display-left-rail.md: §D.0's palette table is historical (Sitewide retheme: adopt the /display reference-mockup aesthetic (palette, shapes) across the app #302-era) — added a superseding pointer to theming.md rather than rewriting the whole historical doc.

Wiki: site look changed sitewide (palette + radius) — flag for a wiki screenshot/description update at merge time.

Verification

• Self-measured computed-style token conformance (Playwright, :root custom properties at 1400px and 390px, 15 tokens × 2 viewports = 30 comparisons): 0 mismatches.
• DisplayLeftRailFidelity.spec.ts: 15 tests, all green — includes 2 new permanent guards (AAA contrast pair + focus-ring/btn-close/fbtoggle target-size, all reading real computed styles/boundingBox(), not authored CSS).
• Full /display+/print Playwright coverage (DisplayPage, SelectVersionSection, DisplaySlotStates, DisplayFinishFooter, CardSlot, PagePreview, PDFGenerator, GridSelectorModal×2, GeneralUIAccessibility, ChangeQueryModal, Navbar, all tests/visual/*) at 4 workers: 135 passed, 2 flaky-then-passed-on-retry (confirmed pre-existing worker-contention flakes, not caused by this change — both pass clean in isolation), 13 skipped (pre-existing).
• npx tsc --noEmit: clean. npm test (jest): 65 suites / 573 tests pass. npx prettier@2.7.1 --check: clean on every changed file. next build: compiles cleanly.
• Merged origin/master (2 commits landed after this branch's base — Port/drop the 6 Proposal-H-parked Playwright spec files #427, Graduate crash-drill script, fix test snapshot-sequence pinning #405) — clean merge, no conflicts, re-verified tsc/jest/the fidelity+CardSlot+PagePreview+PDFGenerator suites post-merge.
• Screenshots (editor @1400px, editor @390px, Search Settings modal, /print PDF-preview tab) captured during the session at /home/ubuntu/.claude/jobs/e893dbef/tmp/theme-build/ (not committed — local verification artifacts).

Checklist

• I have installed pre-commit and installed the hooks with pre-commit install before creating any commits.
• I have updated any related tests for code I modified or added new tests where appropriate.
• I have manually tested my changes as follows:
  • Ran the dev server and visually inspected /editor at 1400px/390px, a modal, and /print (screenshots above) — confirmed the palette, ink flips, and accent wiring render as specced.
• I have updated any relevant documentation or created new documentation where appropriate.