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

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
+35 -20
View File
@@ -102,7 +102,8 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.detail {
min-width: 0;
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. */
@@ -121,15 +122,18 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.detail h2 {
margin: 5px 0;
font-size: var(--step-6);
font-size: clamp(30px, 4vw, 58px);
letter-spacing: -0.06em;
}
.detail > header p {
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,
.share-link {
color: var(--ink);
@@ -153,8 +157,10 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.switch button.active,
.switch button[aria-pressed='true'] {
color: var(--paper);
background: var(--ink);
/* token-gap: legacy review-desk switch text (#f6f3ed); --paper here is #f5f4f1; owner design-system-keeper */
color: #f6f3ed;
/* token-gap: legacy review-desk --ink (#122534); --ink here is #172f42; owner design-system-keeper */
background: #122534;
}
.switch button:focus-visible {
@@ -169,7 +175,8 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
gap: 20px;
margin: 45px 0 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 {
@@ -180,7 +187,8 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.purpose p {
margin: 0;
font-size: var(--step-1);
/* token-gap: no --step-* covers 18px; owner design-system-keeper */
font-size: 18px;
line-height: 1.4;
}
@@ -195,7 +203,8 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.review-grid section {
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 {
@@ -213,21 +222,23 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
margin-top: 9px;
}
/* Extras: the blue strip with the "good next addition" hint. */
/* Extras: the "good next addition" hint. */
.extras {
margin: 1px 0 25px;
padding: 18px 22px;
/* Legacy uses a soft green-grey panel; --paper is the closest canonical
token and loses the green tint. Visual fidelity gap reported. */
color: var(--ink);
background: var(--paper);
border-left: 4px solid var(--blue);
/* token-gap: legacy review-desk extras text (#122534); --ink here is #172f42; owner design-system-keeper */
color: #122534;
/* token-gap: legacy review-desk extras bg (#e5eeeb); --paper here is #f5f4f1; owner design-system-keeper */
background: #e5eeeb;
/* token-gap: legacy review-desk --blue (#215675); --blue here is #527f9f; owner design-system-keeper */
border-left: 4px solid #215675;
}
.extras span {
display: block;
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;
letter-spacing: 0.1em;
}
@@ -236,11 +247,19 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
margin: 0;
}
@media (max-width: 800px) {
/* token-gap: 850px is not a named breakpoint; owner design-system-keeper */
@media (max-width: 850px) {
.detail {
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 {
display: block;
}
@@ -253,9 +272,5 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.purpose {
grid-template-columns: 1fr;
}
.review-grid {
grid-template-columns: 1fr;
}
}
</style>