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:
@@ -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 {
|
||||
|
||||
@@ -61,24 +61,24 @@ const { columns, rows } = Astro.props;
|
||||
.handoff-table thead {
|
||||
color: var(--paper);
|
||||
background: var(--ink);
|
||||
/* 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.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.handoff-table tbody th {
|
||||
color: var(--blue);
|
||||
/* Source uses 14px; no token in --step-* matches. var(--step-1) is 15px,
|
||||
close enough that the column reads the same. Token-layer gap reported
|
||||
in the task final report. */
|
||||
/* token-gap: source uses 14px; no --step-* covers 14px; owner design-system-keeper */
|
||||
font:
|
||||
600 var(--step-1) 'DM Mono',
|
||||
600 14px 'DM Mono',
|
||||
monospace;
|
||||
}
|
||||
.handoff-table td {
|
||||
color: var(--muted);
|
||||
font-size: var(--step-1);
|
||||
/* token-gap: source uses 13px; no --step-* covers 13px; owner design-system-keeper */
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
|
||||
@@ -73,8 +73,9 @@ const active = phases.find((phase) => phase.id === initial) ?? phases[0];
|
||||
border: 1px solid var(--line);
|
||||
color: var(--ink);
|
||||
background: transparent;
|
||||
/* 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.07em;
|
||||
text-align: left;
|
||||
@@ -100,8 +101,9 @@ const active = phases.find((phase) => phase.id === initial) ?? phases[0];
|
||||
justify-content: space-between;
|
||||
gap: 15px;
|
||||
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;
|
||||
}
|
||||
.phase-meta small {
|
||||
@@ -110,7 +112,8 @@ const active = phases.find((phase) => phase.id === initial) ?? phases[0];
|
||||
}
|
||||
.phase-panel h3 {
|
||||
margin: 44px 0 12px;
|
||||
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: 1.05;
|
||||
}
|
||||
.phase-panel p {
|
||||
|
||||
@@ -60,8 +60,9 @@ const { routes, initial = routes[0]?.id ?? 'plan' } = Astro.props;
|
||||
.head {
|
||||
color: var(--paper);
|
||||
background: var(--ink);
|
||||
/* 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.08em;
|
||||
text-transform: uppercase;
|
||||
@@ -83,7 +84,8 @@ const { routes, initial = routes[0]?.id ?? 'plan' } = Astro.props;
|
||||
cursor: pointer;
|
||||
}
|
||||
.route-row strong {
|
||||
font-size: var(--step-1);
|
||||
/* token-gap: source uses 14px; no --step-* covers 14px; owner design-system-keeper */
|
||||
font-size: 14px;
|
||||
}
|
||||
.route-row b {
|
||||
color: var(--blue);
|
||||
@@ -92,7 +94,8 @@ const { routes, initial = routes[0]?.id ?? 'plan' } = Astro.props;
|
||||
}
|
||||
.route-row small {
|
||||
color: var(--muted);
|
||||
font-size: var(--step-1);
|
||||
/* token-gap: source uses 12px; no --step-* covers 12px; owner design-system-keeper */
|
||||
font-size: 12px;
|
||||
}
|
||||
.route-row.active {
|
||||
background: var(--line);
|
||||
|
||||
@@ -51,9 +51,11 @@ const { files, initial = files[0]?.id ?? 'skill' } = Astro.props;
|
||||
.skill-package-label {
|
||||
padding: 20px;
|
||||
color: var(--gold);
|
||||
border-bottom: 1px solid var(--line);
|
||||
/* token-gap: source uses 1px solid #ffffff40 over the blue background; no token matches; owner design-system-keeper */
|
||||
border-bottom: 1px solid #ffffff40;
|
||||
/* 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;
|
||||
@@ -65,18 +67,17 @@ const { files, initial = files[0]?.id ?? 'skill' } = Astro.props;
|
||||
gap: 15px;
|
||||
padding: 17px 20px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
/* token-gap: source uses 1px solid #ffffff40 over the blue background; no token matches; owner design-system-keeper */
|
||||
border-bottom: 1px solid #ffffff40;
|
||||
color: var(--paper);
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.skill-package-row code {
|
||||
/* Source uses 12px; no token in --step-* matches. var(--step-1) is 15px,
|
||||
close enough that the code line reads the same. Token-layer gap
|
||||
reported in the task final report. */
|
||||
/* token-gap: source uses 12px with default weight (no 500); no --step-* covers 12px; owner design-system-keeper */
|
||||
font:
|
||||
500 var(--step-1) 'DM Mono',
|
||||
12px 'DM Mono',
|
||||
monospace;
|
||||
}
|
||||
.skill-package-row small {
|
||||
|
||||
@@ -96,7 +96,8 @@ const { branches, initial = 'main' } = Astro.props;
|
||||
padding: 20px;
|
||||
color: var(--paper);
|
||||
background: var(--ink);
|
||||
border: 0;
|
||||
/* token-gap: source uses 1px solid #41596b over the ink background; no token matches; owner design-system-keeper */
|
||||
border: 1px solid #41596b;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -106,24 +107,28 @@ const { branches, initial = 'main' } = Astro.props;
|
||||
}
|
||||
.tree-node span {
|
||||
color: var(--accent);
|
||||
/* token-gap: source uses 9px; no --step-* covers 9px; owner design-system-keeper */
|
||||
font:
|
||||
500 var(--step-0) 'DM Mono',
|
||||
500 9px 'DM Mono',
|
||||
monospace;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.tree-node strong {
|
||||
/* token-gap: source uses 14px with default weight; no --step-* covers 14px; owner design-system-keeper */
|
||||
font:
|
||||
600 var(--step-1) 'DM Mono',
|
||||
14px 'DM Mono',
|
||||
monospace;
|
||||
}
|
||||
.tree-node small {
|
||||
margin-top: 0;
|
||||
color: var(--muted);
|
||||
/* token-gap: source uses #9eabb4; no token matches; owner design-system-keeper */
|
||||
color: #9eabb4;
|
||||
font-size: var(--step-0);
|
||||
}
|
||||
.tree-node.root small {
|
||||
color: var(--muted);
|
||||
/* token-gap: source uses #9eabb4 even on the root; no token matches; owner design-system-keeper */
|
||||
color: #9eabb4;
|
||||
}
|
||||
.tree-node.active {
|
||||
box-shadow: inset 4px 0 0 var(--gold);
|
||||
|
||||
Reference in New Issue
Block a user