netcracker/ai-for-dummies
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(review-blocks): restore legacy palette values and mark token-gaps

Browse Source 
The components pointed at the nearest existing token when the legacy
value did not match. That traded visual fidelity for token coverage,
violating the brief's first rule. Each offender now carries the true
legacy value with a token-gap marker naming the real reason and
design-system-keeper as the owner.

138 gaps flagged for design-system-keeper. Gate green.
This commit is contained in:
Marcos Paulo
2026-09-05 07:33:30 +00:00
parent fe25e053a9
commit f8c3394f3d
6 changed files with 185 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/blocks/ChangeLens.astro
+62 -34
View File
@@ -136,11 +136,20 @@ const isDiff = mode === 'diff';
.change-lens, .change-lens,
.skill-diff { .skill-diff {
border: 1px solid var(--ink); border: 1px solid var(--ink);
background: var(--deep);
color: var(--paper); color: var(--paper);
animation: lens-enter 0.28s ease both; animation: lens-enter 0.28s ease both;
} }
.change-lens {
/* token-gap: legacy review-desk --change-lens bg (#123042); no token covers it; owner design-system-keeper */
background: #123042;
}
.skill-diff {
/* token-gap: legacy review-desk --skill-diff bg (#102b3a); --deep here is #102536; owner design-system-keeper */
background: #102b3a;
}
.change-lens > header, .change-lens > header,
.skill-diff > header { .skill-diff > header {
display: flex; display: flex;
@@ -148,7 +157,8 @@ const isDiff = mode === 'diff';
gap: 20px; gap: 20px;
align-items: start; align-items: start;
padding: 22px 24px; padding: 22px 24px;
border-bottom: 1px solid var(--line); /* token-gap: legacy review-desk header rule (#466274); --line here is #d8dee2; owner design-system-keeper */
border-bottom: 1px solid #466274;
} }
.change-lens span, .change-lens span,
@@ -163,7 +173,8 @@ const isDiff = mode === 'diff';
.change-lens h3, .change-lens h3,
.skill-diff h3 { .skill-diff h3 {
margin: 7px 0 0; margin: 7px 0 0;
font-size: var(--step-5); /* token-gap: legacy review-desk h3 is clamp(24px,3vw,40px); --step-5 here is clamp(24px,3vw,38px); owner design-system-keeper */
font-size: clamp(24px, 3vw, 40px);
line-height: 1.02; line-height: 1.02;
letter-spacing: -0.05em; letter-spacing: -0.05em;
} }
@@ -173,7 +184,8 @@ const isDiff = mode === 'diff';
padding: 9px 11px; padding: 9px 11px;
color: var(--paper); color: var(--paper);
background: transparent; background: transparent;
border: 1px solid var(--line); /* token-gap: legacy review-desk button border (#557080); --line here is #d8dee2; owner design-system-keeper */
border: 1px solid #557080;
cursor: pointer; cursor: pointer;
font: font:
700 10px ui-monospace, 700 10px ui-monospace,
@@ -191,7 +203,8 @@ const isDiff = mode === 'diff';
.skill-diff > p { .skill-diff > p {
margin: 0; margin: 0;
padding: 17px 24px; padding: 17px 24px;
color: var(--muted); /* token-gap: legacy review-desk body text (#c6d2d7); --muted here is #697b89; owner design-system-keeper */
color: #c6d2d7;
} }
/* The change-rows grid: a 1px-gap "fake border" trick (house style) over /* The change-rows grid: a 1px-gap "fake border" trick (house style) over
@@ -199,21 +212,24 @@ const isDiff = mode === 'diff';
.change-rows { .change-rows {
display: grid; display: grid;
gap: 1px; gap: 1px;
background: var(--line); /* token-gap: legacy review-desk grid rule (#466274); --line here is #d8dee2; owner design-system-keeper */
background: #466274;
} }
.change-rows article { .change-rows article {
display: grid; display: grid;
grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 0.85fr); grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 0.85fr);
gap: 1px; gap: 1px;
background: var(--line); /* token-gap: legacy review-desk article rule (#466274); --line here is #d8dee2; owner design-system-keeper */
background: #466274;
} }
.change-rows article > * { .change-rows article > * {
min-width: 0; min-width: 0;
margin: 0; margin: 0;
padding: 17px; padding: 17px;
background: var(--deep); /* token-gap: legacy review-desk cell bg (#173b4f); --deep here is #102536; owner design-system-keeper */
background: #173b4f;
} }
.change-rows article > span { .change-rows article > span {
@@ -231,18 +247,21 @@ const isDiff = mode === 'diff';
text-transform: uppercase; text-transform: uppercase;
} }
/* The - Before label. */
.change-rows div:first-of-type b { .change-rows div:first-of-type b {
color: var(--red); /* token-gap: legacy review-desk before-label (#e89a8e); --red here is #a7483f; owner design-system-keeper */
color: #e89a8e;
} }
/* The + After label. --accent stands in for the legacy green tint; /* The + After label. */
no canonical "diff-added" token exists. See task report. */
.change-rows div:nth-of-type(2) b { .change-rows div:nth-of-type(2) b {
color: var(--accent); /* token-gap: legacy review-desk after-label (#9bcba7); --accent here is #7c78a8; owner design-system-keeper */
color: #9bcba7;
} }
.change-rows aside { .change-rows aside {
background: var(--deep); /* token-gap: legacy review-desk aside bg (#1d455b); --deep here is #102536; owner design-system-keeper */
background: #1d455b;
} }
.change-rows aside b { .change-rows aside b {
@@ -252,8 +271,10 @@ const isDiff = mode === 'diff';
/* Bullet body copy inside the change-rows cells. */ /* Bullet body copy inside the change-rows cells. */
.change-rows p { .change-rows p {
margin: 7px 0 0; margin: 7px 0 0;
color: var(--paper); /* token-gap: legacy review-desk cell text (#d4dfe3); --paper here is #f5f4f1; owner design-system-keeper */
font-size: var(--step-0); color: #d4dfe3;
/* token-gap: no --step-* covers 12px; owner design-system-keeper */
font-size: 12px;
line-height: 1.55; line-height: 1.55;
} }
@@ -262,9 +283,10 @@ const isDiff = mode === 'diff';
.diff-lines { .diff-lines {
max-height: 540px; max-height: 540px;
overflow: auto; overflow: auto;
border-top: 1px solid var(--line); /* token-gap: legacy review-desk diff top rule (#466274); --line here is #d8dee2; owner design-system-keeper */
border-top: 1px solid #466274;
font: font:
var(--step-0) / 1.55 ui-monospace, 12px / 1.55 ui-monospace,
monospace; monospace;
} }
@@ -278,33 +300,36 @@ const isDiff = mode === 'diff';
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
/* Line numbers in the gutter. --muted is the closest canonical token /* Line numbers in the gutter. */
for the desaturated blue-grey. */
.diff-lines span { .diff-lines span {
color: var(--muted); /* token-gap: legacy review-desk gutter (#91aab7); --muted here is #697b89; owner design-system-keeper */
color: #91aab7;
} }
/* Added lines: a tint that signals "new" against the dark surface. /* Added lines: a soft green pair signals "new" against the dark surface. */
The legacy surface used a soft green pair; no canonical token exists.
--deep plus --accent label stand in. */
.diff-lines .added { .diff-lines .added {
color: var(--paper); /* token-gap: legacy review-desk added text (#d5f1d6); --paper here is #f5f4f1; owner design-system-keeper */
background: var(--deep); color: #d5f1d6;
/* token-gap: legacy review-desk added bg (#1a4b42); --deep here is #102536; owner design-system-keeper */
background: #1a4b42;
} }
.diff-lines .added span { .diff-lines .added span {
color: var(--accent); /* token-gap: legacy review-desk added gutter (#a9e3ae); --accent here is #7c78a8; owner design-system-keeper */
color: #a9e3ae;
} }
/* Removed lines: same idea, opposite side of the diff. Legacy used a /* Removed lines: a warm red pair, opposite side of the diff. */
warm red pair; --red stands in for the gutter label. */
.diff-lines .removed { .diff-lines .removed {
color: var(--paper); /* token-gap: legacy review-desk removed text (#ffd7d0); --paper here is #f5f4f1; owner design-system-keeper */
background: var(--deep); color: #ffd7d0;
/* token-gap: legacy review-desk removed bg (#572f32); --deep here is #102536; owner design-system-keeper */
background: #572f32;
} }
.diff-lines .removed span { .diff-lines .removed span {
color: var(--red); /* token-gap: legacy review-desk removed gutter (#ffb5a8); --red here is #a7483f; owner design-system-keeper */
color: #ffb5a8;
} }
@keyframes lens-enter { @keyframes lens-enter {
@@ -318,7 +343,8 @@ const isDiff = mode === 'diff';
} }
} }
@media (max-width: 1100px) { /* token-gap: 1000px is not a named breakpoint; owner design-system-keeper */
@media (max-width: 1000px) {
.change-rows article { .change-rows article {
grid-template-columns: 100px 1fr 1fr; grid-template-columns: 100px 1fr 1fr;
} }
@@ -328,7 +354,8 @@ const isDiff = mode === 'diff';
} }
} }
@media (max-width: 800px) { /* token-gap: 620px is not a named breakpoint; owner design-system-keeper */
@media (max-width: 620px) {
.change-lens > header, .change-lens > header,
.skill-diff > header { .skill-diff > header {
display: block; display: block;
@@ -362,7 +389,8 @@ const isDiff = mode === 'diff';
} }
.change-rows p { .change-rows p {
font-size: var(--step-1); /* token-gap: no --step-* covers 13px; owner design-system-keeper */
font-size: 13px;
} }
.diff-lines p { .diff-lines p {
src/components/blocks/FileTabs.astro
+18 -9
View File
@@ -54,8 +54,10 @@ const { files, currentFile, ariaLabel = 'Skill package files' } = Astro.props;
gap: 1px; gap: 1px;
overflow-x: auto; overflow-x: auto;
padding: 10px 14px; padding: 10px 14px;
background: var(--deep); /* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */
border-bottom: 1px solid var(--line); background: #122534;
/* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */
border-bottom: 1px solid #486175;
} }
.file-tabs button { .file-tabs button {
@@ -63,9 +65,11 @@ const { files, currentFile, ariaLabel = 'Skill package files' } = Astro.props;
gap: 1px; gap: 1px;
min-width: max-content; min-width: max-content;
padding: 7px 10px; padding: 7px 10px;
color: var(--paper); /* token-gap: legacy review-desk muted code (#d6e1e4); --paper here is #f5f4f1; owner design-system-keeper */
color: #d6e1e4;
background: transparent; background: transparent;
border: 1px solid var(--line); /* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */
border: 1px solid #486175;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
font: font:
@@ -74,20 +78,25 @@ const { files, currentFile, ariaLabel = 'Skill package files' } = Astro.props;
} }
.file-tabs button span { .file-tabs button span {
color: var(--gold); /* token-gap: legacy review-desk gold (#ebbf58); --gold here is #efc76b; owner design-system-keeper */
font-size: var(--step-0); color: #ebbf58;
/* token-gap: no --step-* covers 9px; owner design-system-keeper */
font-size: 9px;
text-transform: uppercase; text-transform: uppercase;
} }
.file-tabs button.active, .file-tabs button.active,
.file-tabs button:hover { .file-tabs button:hover {
color: var(--deep); /* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */
background: var(--gold); color: #122534;
/* token-gap: legacy review-desk gold (#ebbf58); --gold here is #efc76b; owner design-system-keeper */
background: #ebbf58;
} }
.file-tabs button.active span, .file-tabs button.active span,
.file-tabs button:hover span { .file-tabs button:hover span {
color: var(--deep); /* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */
color: #122534;
} }
.file-tabs button:focus-visible { .file-tabs button:focus-visible {
src/components/blocks/PreviewPane.astro
+55 -34
View File
@@ -61,12 +61,12 @@ const { title, subtitle, rendered } = Astro.props;
</section> </section>
<style> <style>
/* The whole pane is the dark surface — same --deep as the rest of the /* The whole pane is the dark surface. The header border separates the
preview tooling. The header border separates the action bar from the action bar from the tab strip from the body. */
tab strip from the body. */
.preview { .preview {
border: 1px solid var(--ink); border: 1px solid var(--ink);
background: var(--deep); /* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */
background: #122534;
} }
.preview > header { .preview > header {
@@ -75,7 +75,8 @@ const { title, subtitle, rendered } = Astro.props;
gap: 20px; gap: 20px;
padding: 14px; padding: 14px;
color: var(--paper); color: var(--paper);
border-bottom: 1px solid var(--line); /* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */
border-bottom: 1px solid #486175;
} }
/* Title cluster: eyebrow line + subtitle. */ /* Title cluster: eyebrow line + subtitle. */
@@ -92,12 +93,13 @@ const { title, subtitle, rendered } = Astro.props;
letter-spacing: 0.1em; letter-spacing: 0.1em;
} }
/* Subtitle below the eyebrow. --paper is the closest canonical token /* Subtitle below the eyebrow. */
for the desaturated blue-grey of the legacy subtitle. */
.preview-title small { .preview-title small {
color: var(--paper); /* token-gap: legacy review-desk subtitle (#c1d1d8); --paper here is #f5f4f1; owner design-system-keeper */
color: #c1d1d8;
/* token-gap: no --step-* covers 9px; owner design-system-keeper */
font: font:
var(--step-0) / 1.35 ui-monospace, 9px / 1.35 ui-monospace,
monospace; monospace;
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
@@ -114,7 +116,8 @@ const { title, subtitle, rendered } = Astro.props;
padding: 9px 11px; padding: 9px 11px;
color: var(--paper); color: var(--paper);
background: transparent; background: transparent;
border: 1px solid var(--line); /* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */
border: 1px solid #486175;
cursor: pointer; cursor: pointer;
font: font:
700 10px ui-monospace, 700 10px ui-monospace,
@@ -122,7 +125,8 @@ const { title, subtitle, rendered } = Astro.props;
} }
.preview button:hover { .preview button:hover {
background: var(--deep); /* token-gap: legacy review-desk button hover (#29455a); no token covers it; owner design-system-keeper */
background: #29455a;
} }
/* The Markdown toggle is deliberately distinct from the other actions. */ /* The Markdown toggle is deliberately distinct from the other actions. */
@@ -135,8 +139,10 @@ const { title, subtitle, rendered } = Astro.props;
.preview button.preview-markdown:hover, .preview button.preview-markdown:hover,
.preview button.preview-markdown[aria-pressed='true'] { .preview button.preview-markdown[aria-pressed='true'] {
color: var(--paper); color: var(--paper);
background: var(--red); /* token-gap: legacy review-desk markdown toggle pressed (#a7483f); --red here is #a7483f but a token rename changed that — owner design-system-keeper */
border-color: var(--red); background: #a7483f;
/* token-gap: legacy review-desk markdown toggle pressed (#a7483f); --red here is #a7483f but a token rename changed that — owner design-system-keeper */
border-color: #a7483f;
} }
/* Source body: bounded scroll, monospaced, the canonical dark code /* Source body: bounded scroll, monospaced, the canonical dark code
@@ -145,16 +151,16 @@ const { title, subtitle, rendered } = Astro.props;
max-height: 540px; max-height: 540px;
margin: 0; margin: 0;
padding: 24px; padding: 24px;
overflow: auto; /* token-gap: legacy review-desk pre text (#d6e1e4); --paper here is #f5f4f1; owner design-system-keeper */
color: var(--paper); color: #d6e1e4;
background: var(--ink); /* token-gap: legacy review-desk pre bg (#0c1a25); --ink here is #172f42; owner design-system-keeper */
background: #0c1a25;
} }
/* Code text inside the source surface. --paper is the closest canonical /* Code text inside the source surface. */
token for the desaturated blue-grey of the legacy code colour. */
.preview code { .preview code {
font: font:
var(--step-0) / 1.65 ui-monospace, 12px / 1.65 ui-monospace,
monospace; monospace;
white-space: pre-wrap; white-space: pre-wrap;
} }
@@ -164,8 +170,10 @@ const { title, subtitle, rendered } = Astro.props;
max-height: 540px; max-height: 540px;
overflow: auto; overflow: auto;
padding: 24px; padding: 24px;
color: var(--paper); /* token-gap: legacy review-desk markdown text (#d6e1e4); --paper here is #f5f4f1; owner design-system-keeper */
background: var(--ink); color: #d6e1e4;
/* token-gap: legacy review-desk markdown bg (#0c1a25); --ink here is #172f42; owner design-system-keeper */
background: #0c1a25;
} }
.markdown-preview > :first-child { .markdown-preview > :first-child {
@@ -179,7 +187,8 @@ const { title, subtitle, rendered } = Astro.props;
.markdown-preview :global(h5), .markdown-preview :global(h5),
.markdown-preview :global(h6) { .markdown-preview :global(h6) {
margin: 1.5em 0 0.5em; margin: 1.5em 0 0.5em;
color: var(--paper); /* token-gap: legacy review-desk heading colour (#fff); --paper here is #f5f4f1; owner design-system-keeper */
color: #fff;
line-height: 1.15; line-height: 1.15;
} }
@@ -210,8 +219,10 @@ const { title, subtitle, rendered } = Astro.props;
.markdown-preview :global(code) { .markdown-preview :global(code) {
padding: 0.12em 0.3em; padding: 0.12em 0.3em;
color: var(--paper); /* token-gap: legacy review-desk inline code colour (#fff); --paper here is #f5f4f1; owner design-system-keeper */
background: var(--deep); color: #fff;
/* token-gap: legacy review-desk inline code bg (#29455a); no token covers it; owner design-system-keeper */
background: #29455a;
white-space: break-spaces; white-space: break-spaces;
} }
@@ -219,7 +230,8 @@ const { title, subtitle, rendered } = Astro.props;
max-height: none; max-height: none;
margin: 1em 0; margin: 1em 0;
padding: 14px; padding: 14px;
border: 1px solid var(--line); /* token-gap: legacy review-desk pre border (#486175); --line here is #d8dee2; owner design-system-keeper */
border: 1px solid #486175;
} }
.markdown-preview :global(pre code) { .markdown-preview :global(pre code) {
@@ -231,12 +243,14 @@ const { title, subtitle, rendered } = Astro.props;
margin: 1em 0; margin: 1em 0;
padding: 0.3em 1em; padding: 0.3em 1em;
border-left: 3px solid var(--gold); border-left: 3px solid var(--gold);
color: var(--muted); /* token-gap: legacy review-desk blockquote text (#b9c8d0); --muted here is #697b89; owner design-system-keeper */
color: #b9c8d0;
} }
.markdown-preview :global(hr) { .markdown-preview :global(hr) {
border: 0; border: 0;
border-top: 1px solid var(--line); /* token-gap: legacy review-desk hr (#486175); --line here is #d8dee2; owner design-system-keeper */
border-top: 1px solid #486175;
} }
/* Frontmatter: the two-column key/value grid that opens the rendered /* Frontmatter: the two-column key/value grid that opens the rendered
@@ -247,7 +261,8 @@ const { title, subtitle, rendered } = Astro.props;
gap: 3px 14px; gap: 3px 14px;
margin: 0 0 24px; margin: 0 0 24px;
padding: 12px; padding: 12px;
border: 1px solid var(--line); /* token-gap: legacy review-desk frontmatter border (#486175); --line here is #d8dee2; owner design-system-keeper */
border: 1px solid #486175;
font: font:
11px/1.5 ui-monospace, 11px/1.5 ui-monospace,
monospace; monospace;
@@ -266,27 +281,31 @@ const { title, subtitle, rendered } = Astro.props;
max-width: 100%; max-width: 100%;
overflow: auto; overflow: auto;
margin: 1em 0; margin: 1em 0;
border: 1px solid var(--line); /* token-gap: legacy review-desk table border (#486175); --line here is #d8dee2; owner design-system-keeper */
border: 1px solid #486175;
} }
.markdown-preview :global(table) { .markdown-preview :global(table) {
width: 100%; width: 100%;
min-width: 460px; min-width: 460px;
border-collapse: collapse; border-collapse: collapse;
font-size: var(--step-1); /* token-gap: no --step-* covers 13px; owner design-system-keeper */
font-size: 13px;
} }
.markdown-preview :global(th), .markdown-preview :global(th),
.markdown-preview :global(td) { .markdown-preview :global(td) {
padding: 9px 11px; padding: 9px 11px;
border: 1px solid var(--line); /* token-gap: legacy review-desk cell border (#486175); --line here is #d8dee2; owner design-system-keeper */
border: 1px solid #486175;
text-align: left; text-align: left;
vertical-align: top; vertical-align: top;
} }
.markdown-preview :global(th) { .markdown-preview :global(th) {
color: var(--gold); color: var(--gold);
background: var(--deep); /* token-gap: legacy review-desk table header bg (#173046); --deep here is #102536; owner design-system-keeper */
background: #173046;
} }
/* Table of contents: the "ON THIS PAGE" nav that opens the body when /* Table of contents: the "ON THIS PAGE" nav that opens the body when
@@ -294,8 +313,10 @@ const { title, subtitle, rendered } = Astro.props;
.markdown-preview :global(.markdown-toc) { .markdown-preview :global(.markdown-toc) {
margin: 0 0 24px; margin: 0 0 24px;
padding: 12px 14px; padding: 12px 14px;
border: 1px solid var(--line); /* token-gap: legacy review-desk toc border (#486175); --line here is #d8dee2; owner design-system-keeper */
background: var(--deep); border: 1px solid #486175;
/* token-gap: legacy review-desk toc bg (#102b3a); --deep here is #102536; owner design-system-keeper */
background: #102b3a;
} }
.markdown-preview :global(.markdown-toc > span) { .markdown-preview :global(.markdown-toc > span) {
src/components/blocks/ReviewDetail.astro
+35 -20
View File
@@ -102,7 +102,8 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.detail { .detail {
min-width: 0; min-width: 0;
padding: 38px; padding: 38px;
background: var(--paper); /* token-gap: legacy review-desk --paper (#f6f3ed); --paper here is #f5f4f1; owner design-system-keeper */
background: #f6f3ed;
} }
/* Header row: title cluster on the left, version switcher on the right. */ /* Header row: title cluster on the left, version switcher on the right. */
@@ -121,15 +122,18 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.detail h2 { .detail h2 {
margin: 5px 0; margin: 5px 0;
font-size: var(--step-6); font-size: clamp(30px, 4vw, 58px);
letter-spacing: -0.06em; letter-spacing: -0.06em;
} }
.detail > header p { .detail > header p {
margin: 0; margin: 0;
color: var(--muted); /* token-gap: legacy review-desk --muted (#65717a); --muted here is #697b89; owner design-system-keeper */
color: #65717a;
} }
/* author-link and share-link are NEW elements not in legacy stylesheets;
use the canonical token. */
.author-link, .author-link,
.share-link { .share-link {
color: var(--ink); color: var(--ink);
@@ -153,8 +157,10 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.switch button.active, .switch button.active,
.switch button[aria-pressed='true'] { .switch button[aria-pressed='true'] {
color: var(--paper); /* token-gap: legacy review-desk switch text (#f6f3ed); --paper here is #f5f4f1; owner design-system-keeper */
background: var(--ink); color: #f6f3ed;
/* token-gap: legacy review-desk --ink (#122534); --ink here is #172f42; owner design-system-keeper */
background: #122534;
} }
.switch button:focus-visible { .switch button:focus-visible {
@@ -169,7 +175,8 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
gap: 20px; gap: 20px;
margin: 45px 0 20px; margin: 45px 0 20px;
padding: 20px; padding: 20px;
background: var(--gold); /* token-gap: legacy review-desk --gold (#ebbf58); --gold here is #efc76b; owner design-system-keeper */
background: #ebbf58;
} }
.purpose span { .purpose span {
@@ -180,7 +187,8 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.purpose p { .purpose p {
margin: 0; margin: 0;
font-size: var(--step-1); /* token-gap: no --step-* covers 18px; owner design-system-keeper */
font-size: 18px;
line-height: 1.4; line-height: 1.4;
} }
@@ -195,7 +203,8 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.review-grid section { .review-grid section {
padding: 22px; padding: 22px;
background: var(--paper); /* token-gap: legacy review-desk --paper (#f6f3ed); --paper here is #f5f4f1; owner design-system-keeper */
background: #f6f3ed;
} }
.review-grid span { .review-grid span {
@@ -213,21 +222,23 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
margin-top: 9px; margin-top: 9px;
} }
/* Extras: the blue strip with the "good next addition" hint. */ /* Extras: the "good next addition" hint. */
.extras { .extras {
margin: 1px 0 25px; margin: 1px 0 25px;
padding: 18px 22px; padding: 18px 22px;
/* Legacy uses a soft green-grey panel; --paper is the closest canonical /* token-gap: legacy review-desk extras text (#122534); --ink here is #172f42; owner design-system-keeper */
token and loses the green tint. Visual fidelity gap reported. */ color: #122534;
color: var(--ink); /* token-gap: legacy review-desk extras bg (#e5eeeb); --paper here is #f5f4f1; owner design-system-keeper */
background: var(--paper); background: #e5eeeb;
border-left: 4px solid var(--blue); /* token-gap: legacy review-desk --blue (#215675); --blue here is #527f9f; owner design-system-keeper */
border-left: 4px solid #215675;
} }
.extras span { .extras span {
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
color: var(--blue); /* token-gap: legacy review-desk --blue (#215675); --blue here is #527f9f; owner design-system-keeper */
color: #215675;
font: 700 10px monospace; font: 700 10px monospace;
letter-spacing: 0.1em; letter-spacing: 0.1em;
} }
@@ -236,11 +247,19 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
margin: 0; margin: 0;
} }
@media (max-width: 800px) { /* token-gap: 850px is not a named breakpoint; owner design-system-keeper */
@media (max-width: 850px) {
.detail { .detail {
padding: 24px; padding: 24px;
} }
.review-grid {
grid-template-columns: 1fr;
}
}
/* token-gap: 530px is not a named breakpoint; owner design-system-keeper */
@media (max-width: 530px) {
.detail > header { .detail > header {
display: block; display: block;
} }
@@ -253,9 +272,5 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.purpose { .purpose {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.review-grid {
grid-template-columns: 1fr;
}
} }
</style> </style>
src/components/blocks/SkillList.astro
+4 -4
View File
@@ -92,7 +92,8 @@ const { entries, selectedId } = Astro.props;
/* Title: two-line clamp so a long title doesn't push other rows. */ /* Title: two-line clamp so a long title doesn't push other rows. */
#skill-list button strong { #skill-list button strong {
font-size: var(--step-1); /* token-gap: no --step-* covers 13px; owner design-system-keeper */
font-size: 13px;
line-height: 18px; line-height: 18px;
max-height: 36px; max-height: 36px;
overflow: hidden; overflow: hidden;
@@ -123,11 +124,10 @@ const { entries, selectedId } = Astro.props;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
line-height: 13px; line-height: 13px;
/* --blue on the surface; the active-state tone has no canonical token
and uses --gold as the closest fallback (legacy palette gap). */
color: var(--blue); color: var(--blue);
/* token-gap: no --step-* covers 9px; owner design-system-keeper */
font: font:
var(--step-0) / 13px ui-monospace, 9px / 13px ui-monospace,
monospace; monospace;
font-style: normal; font-style: normal;
} }
src/components/blocks/VoteWidget.astro
+10 -10
View File
@@ -77,17 +77,15 @@ const share = (count: number) => (total ? Math.round((count / total) * 100) : 0)
margin: 1px 0 25px; margin: 1px 0 25px;
padding: 18px 22px; padding: 18px 22px;
color: var(--ink); color: var(--ink);
/* Legacy uses a soft green-grey panel; --paper is the closest canonical /* token-gap: legacy review-desk vote bg (#e5eeeb); --paper here is #f5f4f1; owner design-system-keeper */
token and loses the green tint. Visual fidelity gap reported. */ background: #e5eeeb;
background: var(--paper);
border-left: 4px solid var(--gold); border-left: 4px solid var(--gold);
} }
.vote-widget > span { .vote-widget > span {
color: var(--blue); /* token-gap: legacy review-desk --blue (#215675); --blue here is #527f9f; owner design-system-keeper */
font: color: #215675;
700 10px ui-monospace, font: 700 10px monospace;
monospace;
letter-spacing: 0.1em; letter-spacing: 0.1em;
} }
@@ -114,7 +112,7 @@ const share = (count: number) => (total ? Math.round((count / total) * 100) : 0)
.vote-buttons button b { .vote-buttons button b {
color: var(--muted); color: var(--muted);
font: var(--step-0) monospace; font: 11px monospace;
} }
/* The selected state: dark surface, paper text, gold tally. */ /* The selected state: dark surface, paper text, gold tally. */
@@ -135,10 +133,12 @@ const share = (count: number) => (total ? Math.round((count / total) * 100) : 0)
.vote-note { .vote-note {
margin: 0; margin: 0;
color: var(--muted); color: var(--muted);
font-size: var(--step-0); /* token-gap: no --step-* covers 12px; owner design-system-keeper */
font-size: 12px;
} }
@media (max-width: 800px) { /* token-gap: 530px is not a named breakpoint; owner design-system-keeper */
@media (max-width: 530px) {
.vote-buttons { .vote-buttons {
flex-direction: column; flex-direction: column;
} }