fix(blocks): restore legacy values with token-gap markers

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>
This commit is contained in:
Marcos Paulo
2026-09-05 07:25:38 +00:00
parent d7820edb04
commit ba56f7a0c9
7 changed files with 117 additions and 58 deletions
+17 -14
View File
@@ -5,10 +5,9 @@
// buttons with the `data-worker` hook asserted by `scripts/verify.mjs`. The
// `initial` worker is marked active and pressed.
//
// The source uses `gap:1px` over a coloured parent to draw hairlines between
// workers; here the parent uses `var(--ink)` and the cards paint over it, so
// the seam reads as the same tone — see the final report for the token gap
// (source uses an off-token seam colour for the divider).
// The source uses `gap:1px` over a coloured parent background to fake
// hairlines between worker cards; the parent background is an off-token seam
// colour marked inline with `token-gap`.
interface Worker {
/** Used as the `data-worker` hook and the key in the source. */
@@ -76,15 +75,17 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;
}
.captain-eyebrow {
color: var(--gold);
/* token-gap: source uses 10px; no --step-* covers 10px; owner design-system-keeper */
font:
500 var(--step-0) 'DM Mono',
500 10px 'DM Mono',
monospace;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.captain h2 {
margin: 0;
font-size: var(--step-5);
/* token-gap: source uses clamp(24px,3vw,38px); --step-5 is clamp(36px,5vw,65px); owner design-system-keeper */
font-size: clamp(24px, 3vw, 38px);
line-height: 0.98;
letter-spacing: -0.06em;
}
@@ -99,17 +100,16 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;
display: grid;
place-items: center;
color: var(--gold);
font-size: var(--step-5);
/* token-gap: source uses 30px; no --step-* covers 30px; owner design-system-keeper */
font-size: 30px;
}
.workers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
/* House style: gap:1px over a coloured parent background fakes borders.
Source uses an off-token seam colour for the divider; reported as a
token-layer gap. */
background: var(--ink);
/* token-gap: source seam colour is #41596b for the gap:1px hairline trick; no token matches; owner design-system-keeper */
background: #41596b;
}
.worker-card {
display: grid;
@@ -124,15 +124,18 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;
cursor: pointer;
}
.worker-card span {
color: var(--muted);
/* token-gap: source uses #9eabb4; no token matches; owner design-system-keeper */
color: #9eabb4;
/* token-gap: source uses 10px; no --step-* covers 10px; owner design-system-keeper */
font:
500 var(--step-0) 'DM Mono',
500 10px 'DM Mono',
monospace;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.worker-card strong {
font-size: var(--step-1);
/* token-gap: source uses 16px; no --step-* covers 16px; owner design-system-keeper */
font-size: 16px;
line-height: 1.2;
}
.worker-card code {