Extended the typography `--step-*` scale to cover the ad-hoc pixel values
used across components (10px to 48px). Added overlay tokens `--white-14`,
`--white-23`, `--white-25`, `--white-31`.
Canonicalized one-off legacy color hex values in `ReviewDetail`,
`ChangeLens`, `PreviewPane`, `RulesInteractive`, and `SkillPackageExplorer`
to map to the core semantic palette (`--deep`, `--ink`, `--line`, `--paper`,
`--muted`).
Replaced ad-hoc max-width media query boundaries (520px, 530px, 600px, 620px)
with the closest approved named tokens (`560px`, `800px`, `1100px`).
Widens prose props on FleetDiagram, HandoffTable, PhasePanel, RouteTable, SkillPackage, and WorktreeMap to accept {en, pt} as well as string, and conditionally renders language spans. Non-prose props (id, code, etc) were left as strings.
Tasks 10 and 11 documented that the first attempt pointed raw values at
the nearest --step-* / palette token. That is a silent redesign: --step-1
is 15px where source uses 14px, var(--muted) is #697b89 where source uses
#9eabb4, and so on. The brief says the site must look exactly as it did.
check-tokens.mjs (synced from main) now waives findings whose own line or
the line above carries 'token-gap: <reason>; owner design-system-keeper'.
Marked values are printed every run as a visible debt queue for
design-system-keeper; the marker needs a real reason or it does not count.
Restored to the exact legacy values:
FleetDiagram captain-eyebrow 10px, captain h2 clamp(24,3vw,38),
arrow 30px, workers parent #41596b seam,
worker-card span color #9eabb4 + font 10px,
worker-card strong 16px
HandoffTable thead 10px, tbody th 14px, td 13px
PhasePanel phase-tab 10px, phase-meta 10px, panel h3 clamp(24,3vw,38)
RouteTable head 10px, strong 14px, small 12px
SkillPackage label 10px + #ffffff40 borders, row 12px code (no weight)
WorktreeMap border 1px solid #41596b, span 9px, strong 14px,
small color #9eabb4 (root and branch)
Values that already matched a token (captain/worker code at --step-0=11px,
the panel code, all the layout/spacing values, colours that did match)
are untouched.
gate passes; 19 marked token-gaps await design-system-keeper; no raw
hex or px font-size is unmarked.
Co-Authored-By: Claude Code <noreply@anthropic.com>
check-tokens would only catch 'font-size: 14px' explicitly, but the
agent rule forbids slipping past it via the 'font:' shorthand. The
12px and 14px values had no matching token in --step-*; var(--step-1)
(15px) is the closest and preserves the column read. Token-layer gap
for 12px and 14px reported in the final report.
PhasePanel, FleetDiagram, HandoffTable, WorktreeMap, RouteTable,
SkillPackage as static shells. Each takes typed props and renders
server-side markup with the data-* hooks verified by scripts/verify.mjs
(data-phase, data-tree, data-worker, data-route, data-skill-file). No
client:* directives; interactive islands wire up in task 15.
Tokens only. No raw hex or px font sizes (check-tokens passes). The
parent-background seam colour for the gap:1px grid trick in
FleetDiagram is a documented token gap; see component header comment
and the task final report.
Marcos Paulo