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/PreviewPane.astro
+56 -35
View File
@@ -61,12 +61,12 @@ const { title, subtitle, rendered } = Astro.props;
</section>
<style>
/* The whole pane is the dark surface — same --deep as the rest of the
preview tooling. The header border separates the action bar from the
tab strip from the body. */
/* The whole pane is the dark surface. The header border separates the
action bar from the tab strip from the body. */
.preview {
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 {
@@ -75,7 +75,8 @@ const { title, subtitle, rendered } = Astro.props;
gap: 20px;
padding: 14px;
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. */
@@ -92,12 +93,13 @@ const { title, subtitle, rendered } = Astro.props;
letter-spacing: 0.1em;
}
/* Subtitle below the eyebrow. --paper is the closest canonical token
for the desaturated blue-grey of the legacy subtitle. */
/* Subtitle below the eyebrow. */
.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:
var(--step-0) / 1.35 ui-monospace,
9px / 1.35 ui-monospace,
monospace;
letter-spacing: 0.05em;
}
@@ -114,7 +116,8 @@ const { title, subtitle, rendered } = Astro.props;
padding: 9px 11px;
color: var(--paper);
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;
font:
700 10px ui-monospace,
@@ -122,7 +125,8 @@ const { title, subtitle, rendered } = Astro.props;
}
.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. */
@@ -135,8 +139,10 @@ const { title, subtitle, rendered } = Astro.props;
.preview button.preview-markdown:hover,
.preview button.preview-markdown[aria-pressed='true'] {
color: var(--paper);
background: var(--red);
border-color: 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 */
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
@@ -145,16 +151,16 @@ const { title, subtitle, rendered } = Astro.props;
max-height: 540px;
margin: 0;
padding: 24px;
overflow: auto;
color: var(--paper);
background: var(--ink);
/* token-gap: legacy review-desk pre text (#d6e1e4); --paper here is #f5f4f1; owner design-system-keeper */
color: #d6e1e4;
/* 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
token for the desaturated blue-grey of the legacy code colour. */
/* Code text inside the source surface. */
.preview code {
font:
var(--step-0) / 1.65 ui-monospace,
12px / 1.65 ui-monospace,
monospace;
white-space: pre-wrap;
}
@@ -164,8 +170,10 @@ const { title, subtitle, rendered } = Astro.props;
max-height: 540px;
overflow: auto;
padding: 24px;
color: var(--paper);
background: var(--ink);
/* token-gap: legacy review-desk markdown text (#d6e1e4); --paper here is #f5f4f1; owner design-system-keeper */
color: #d6e1e4;
/* token-gap: legacy review-desk markdown bg (#0c1a25); --ink here is #172f42; owner design-system-keeper */
background: #0c1a25;
}
.markdown-preview > :first-child {
@@ -179,7 +187,8 @@ const { title, subtitle, rendered } = Astro.props;
.markdown-preview :global(h5),
.markdown-preview :global(h6) {
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;
}
@@ -210,8 +219,10 @@ const { title, subtitle, rendered } = Astro.props;
.markdown-preview :global(code) {
padding: 0.12em 0.3em;
color: var(--paper);
background: var(--deep);
/* token-gap: legacy review-desk inline code colour (#fff); --paper here is #f5f4f1; owner design-system-keeper */
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;
}
@@ -219,7 +230,8 @@ const { title, subtitle, rendered } = Astro.props;
max-height: none;
margin: 1em 0;
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) {
@@ -231,12 +243,14 @@ const { title, subtitle, rendered } = Astro.props;
margin: 1em 0;
padding: 0.3em 1em;
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) {
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
@@ -247,7 +261,8 @@ const { title, subtitle, rendered } = Astro.props;
gap: 3px 14px;
margin: 0 0 24px;
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:
11px/1.5 ui-monospace,
monospace;
@@ -266,27 +281,31 @@ const { title, subtitle, rendered } = Astro.props;
max-width: 100%;
overflow: auto;
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) {
width: 100%;
min-width: 460px;
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(td) {
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;
vertical-align: top;
}
.markdown-preview :global(th) {
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
@@ -294,8 +313,10 @@ const { title, subtitle, rendered } = Astro.props;
.markdown-preview :global(.markdown-toc) {
margin: 0 0 24px;
padding: 12px 14px;
border: 1px solid var(--line);
background: var(--deep);
/* token-gap: legacy review-desk toc border (#486175); --line here is #d8dee2; owner design-system-keeper */
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) {
@@ -325,7 +346,7 @@ const { title, subtitle, rendered } = Astro.props;
.markdown-preview :global(.markdown-toc a) {
font:
12px/1.3 Arial,
12px / 1.3 Arial,
sans-serif;
text-decoration: none;
}