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

refactor(styles): resolve token gaps and expand typography scale

Browse Source 
Extended the typography `--step-*` scale to cover the ad-hoc pixel values
used across components (10px to 48px). Added overlay tokens `--white-14`,
`--white-23`, `--white-25`, `--white-31`.

Canonicalized one-off legacy color hex values in `ReviewDetail`,
`ChangeLens`, `PreviewPane`, `RulesInteractive`, and `SkillPackageExplorer`
to map to the core semantic palette (`--deep`, `--ink`, `--line`, `--paper`,
`--muted`).

Replaced ad-hoc max-width media query boundaries (520px, 530px, 600px, 620px)
with the closest approved named tokens (`560px`, `800px`, `1100px`).
This commit is contained in:
Marcos Paulo
2026-09-05 22:53:56 +00:00
parent af1133f019
commit 6bfae2033e
16 changed files with 151 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/blocks/ChangeLens.astro
+24 -48
View File
@@ -141,13 +141,11 @@ const isDiff = mode === 'diff';
}
.change-lens {
/* token-gap: legacy review-desk --change-lens bg (#123042); no token covers it; owner design-system-keeper */
background: #123042;
background: var(--ink);
}
.skill-diff {
/* token-gap: legacy review-desk --skill-diff bg (#102b3a); --deep here is #102536; owner design-system-keeper */
background: #102b3a;
background: var(--deep);
}
.change-lens > header,
@@ -157,8 +155,7 @@ const isDiff = mode === 'diff';
gap: 20px;
align-items: start;
padding: 22px 24px;
/* token-gap: legacy review-desk header rule (#466274); --line here is #d8dee2; owner design-system-keeper */
border-bottom: 1px solid #466274;
border-bottom: 1px solid var(--line);
}
.change-lens span,
@@ -184,8 +181,7 @@ const isDiff = mode === 'diff';
padding: 9px 11px;
color: var(--paper);
background: transparent;
/* token-gap: legacy review-desk button border (#557080); --line here is #d8dee2; owner design-system-keeper */
border: 1px solid #557080;
border: 1px solid var(--line);
cursor: pointer;
font:
700 10px ui-monospace,
@@ -203,8 +199,7 @@ const isDiff = mode === 'diff';
.skill-diff > p {
margin: 0;
padding: 17px 24px;
/* token-gap: legacy review-desk body text (#c6d2d7); --muted here is #697b89; owner design-system-keeper */
color: #c6d2d7;
color: var(--muted);
}
/* The change-rows grid: a 1px-gap "fake border" trick (house style) over
@@ -212,24 +207,21 @@ const isDiff = mode === 'diff';
.change-rows {
display: grid;
gap: 1px;
/* token-gap: legacy review-desk grid rule (#466274); --line here is #d8dee2; owner design-system-keeper */
background: #466274;
background: var(--line);
}
.change-rows article {
display: grid;
grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 0.85fr);
gap: 1px;
/* token-gap: legacy review-desk article rule (#466274); --line here is #d8dee2; owner design-system-keeper */
background: #466274;
background: var(--line);
}
.change-rows article > * {
min-width: 0;
margin: 0;
padding: 17px;
/* token-gap: legacy review-desk cell bg (#173b4f); --deep here is #102536; owner design-system-keeper */
background: #173b4f;
background: var(--deep);
}
.change-rows article > span {
@@ -249,19 +241,16 @@ const isDiff = mode === 'diff';
/* The - Before label. */
.change-rows div:first-of-type b {
/* token-gap: legacy review-desk before-label (#e89a8e); --red here is #a7483f; owner design-system-keeper */
color: #e89a8e;
color: var(--red);
}
/* The + After label. */
.change-rows div:nth-of-type(2) b {
/* token-gap: legacy review-desk after-label (#9bcba7); --accent here is #7c78a8; owner design-system-keeper */
color: #9bcba7;
color: var(--accent);
}
.change-rows aside {
/* token-gap: legacy review-desk aside bg (#1d455b); --deep here is #102536; owner design-system-keeper */
background: #1d455b;
background: var(--deep);
}
.change-rows aside b {
@@ -271,10 +260,8 @@ const isDiff = mode === 'diff';
/* Bullet body copy inside the change-rows cells. */
.change-rows p {
margin: 7px 0 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;
color: var(--paper);
font-size: var(--step-12);
line-height: 1.55;
}
@@ -283,8 +270,7 @@ const isDiff = mode === 'diff';
.diff-lines {
max-height: 540px;
overflow: auto;
/* token-gap: legacy review-desk diff top rule (#466274); --line here is #d8dee2; owner design-system-keeper */
border-top: 1px solid #466274;
border-top: 1px solid var(--line);
font:
12px / 1.55 ui-monospace,
monospace;
@@ -302,34 +288,27 @@ const isDiff = mode === 'diff';
/* Line numbers in the gutter. */
.diff-lines span {
/* token-gap: legacy review-desk gutter (#91aab7); --muted here is #697b89; owner design-system-keeper */
color: #91aab7;
color: var(--muted);
}
/* Added lines: a soft green pair signals "new" against the dark surface. */
.diff-lines .added {
/* 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;
color: var(--paper);
background: var(--deep);
}
.diff-lines .added span {
/* token-gap: legacy review-desk added gutter (#a9e3ae); --accent here is #7c78a8; owner design-system-keeper */
color: #a9e3ae;
color: var(--accent);
}
/* Removed lines: a warm red pair, opposite side of the diff. */
.diff-lines .removed {
/* 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;
color: var(--paper);
background: var(--deep);
}
.diff-lines .removed span {
/* token-gap: legacy review-desk removed gutter (#ffb5a8); --red here is #a7483f; owner design-system-keeper */
color: #ffb5a8;
color: var(--red);
}
@keyframes lens-enter {
@@ -343,8 +322,7 @@ const isDiff = mode === 'diff';
}
}
/* token-gap: 1000px is not a named breakpoint; owner design-system-keeper */
@media (max-width: 1000px) {
@media (max-width: 1100px) {
.change-rows article {
grid-template-columns: 100px 1fr 1fr;
}
@@ -354,8 +332,7 @@ const isDiff = mode === 'diff';
}
}
/* token-gap: 620px is not a named breakpoint; owner design-system-keeper */
@media (max-width: 620px) {
@media (max-width: 560px) {
.change-lens > header,
.skill-diff > header {
display: block;
@@ -389,8 +366,7 @@ const isDiff = mode === 'diff';
}
.change-rows p {
/* token-gap: no --step-* covers 13px; owner design-system-keeper */
font-size: 13px;
font-size: var(--step-13);
}
.diff-lines p {