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,
.skill-diff {
border: 1px solid var(--ink);
background: var(--deep);
color: var(--paper);
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,
.skill-diff > header {
display: flex;
@@ -148,7 +157,8 @@ const isDiff = mode === 'diff';
gap: 20px;
align-items: start;
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,
@@ -163,7 +173,8 @@ const isDiff = mode === 'diff';
.change-lens h3,
.skill-diff h3 {
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;
letter-spacing: -0.05em;
}
@@ -173,7 +184,8 @@ const isDiff = mode === 'diff';
padding: 9px 11px;
color: var(--paper);
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;
font:
700 10px ui-monospace,
@@ -191,7 +203,8 @@ const isDiff = mode === 'diff';
.skill-diff > p {
margin: 0;
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
@@ -199,21 +212,24 @@ const isDiff = mode === 'diff';
.change-rows {
display: grid;
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 {
display: grid;
grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 0.85fr);
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 > * {
min-width: 0;
margin: 0;
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 {
@@ -231,18 +247,21 @@ const isDiff = mode === 'diff';
text-transform: uppercase;
}
/* The - Before label. */
.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;
no canonical "diff-added" token exists. See task report. */
/* The + After label. */
.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 {
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 {
@@ -252,8 +271,10 @@ const isDiff = mode === 'diff';
/* Bullet body copy inside the change-rows cells. */
.change-rows p {
margin: 7px 0 0;
color: var(--paper);
font-size: var(--step-0);
/* token-gap: legacy review-desk cell text (#d4dfe3); --paper here is #f5f4f1; owner design-system-keeper */
color: #d4dfe3;
/* token-gap: no --step-* covers 12px; owner design-system-keeper */
font-size: 12px;
line-height: 1.55;
}
@@ -262,9 +283,10 @@ const isDiff = mode === 'diff';
.diff-lines {
max-height: 540px;
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:
var(--step-0) / 1.55 ui-monospace,
12px / 1.55 ui-monospace,
monospace;
}
@@ -278,33 +300,36 @@ const isDiff = mode === 'diff';
overflow-wrap: anywhere;
}
/* Line numbers in the gutter. --muted is the closest canonical token
for the desaturated blue-grey. */
/* Line numbers in the gutter. */
.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.
The legacy surface used a soft green pair; no canonical token exists.
--deep plus --accent label stand in. */
/* Added lines: a soft green pair signals "new" against the dark surface. */
.diff-lines .added {
color: var(--paper);
background: var(--deep);
/* token-gap: legacy review-desk added text (#d5f1d6); --paper here is #f5f4f1; owner design-system-keeper */
color: #d5f1d6;
/* token-gap: legacy review-desk added bg (#1a4b42); --deep here is #102536; owner design-system-keeper */
background: #1a4b42;
}
.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
warm red pair; --red stands in for the gutter label. */
/* Removed lines: a warm red pair, opposite side of the diff. */
.diff-lines .removed {
color: var(--paper);
background: var(--deep);
/* token-gap: legacy review-desk removed text (#ffd7d0); --paper here is #f5f4f1; owner design-system-keeper */
color: #ffd7d0;
/* token-gap: legacy review-desk removed bg (#572f32); --deep here is #102536; owner design-system-keeper */
background: #572f32;
}
.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 {
@@ -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 {
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,
.skill-diff > header {
display: block;
@@ -362,7 +389,8 @@ const isDiff = mode === 'diff';
}
.change-rows p {
font-size: var(--step-1);
/* token-gap: no --step-* covers 13px; owner design-system-keeper */
font-size: 13px;
}
.diff-lines p {