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

fix(styles): use exact on-dark tokens, not near-miss ones
verify-and-publish / gate (push) Successful in 13m59s
Details
verify-and-publish / publish (push) Failing after 11m22s
Details

Browse Source 
Six token-gap markers were closed by pointing the value at a palette
token that does not match it. Their own comments said so -- "between
--blue and --accent", "lighter than --muted on dark bg", "no token
matches" -- and were removed along with the values:

  #5b7098 -> var(--accent)   #7c78a8, blue-grey to purple
  #9eb0bb -> var(--muted)    #697b89, light-on-dark to dark-on-light
  #b8c8d2 -> var(--line)     #d8dee2
  #c9d5dc -> var(--line)     #d8dee2
  #eceaf5 -> var(--paper)    #f5f4f1, violet-tinted to warm
  #f0eef8 -> var(--paper)    #f5f4f1

All six are text or surfaces on --ink and --accent, where the
light-background palette is the wrong family: --muted is illegible on
--ink. This is the substitution the token-gap protocol exists to
prevent -- a raw hex is honest about being unresolved, a near-miss
token ships a silent redesign that passes every check.

Adds six exact on-dark tokens and points the six declarations at them.
design-system-keeper owns tokens.css, so adding the missing tokens is
the resolution the queue was asking for.

Also makes the four overlay tokens exact. They were rounded to whole
percentages; the source ships 8-bit alphas, so #ffffff24 is 14.1176%,
not 14%. The names stay rounded, the values do not.

Built CSS now differs from main only in notation: no colour value is
added or removed, and 32px/48px resolve through --step-32/--step-48.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Marcos Paulo
2026-09-05 23:00:44 +00:00
parent 6bfae2033e
commit edd03f9716
2 changed files with 25 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/islands/RulesInteractive.astro
+6 -6
View File
@@ -783,7 +783,7 @@ fix(api): scope session query</code></pre>
.stage-detail p,
.skill-detail p {
max-width: 650px;
color: var(--line);
color: var(--ink-line);
font-size: var(--step-13);
line-height: 1.7;
}
@@ -814,7 +814,7 @@ fix(api): scope session query</code></pre>
.skill-detail code,
.example-grid code,
.copy-lab code {
color: var(--line);
color: var(--ink-code);
font:
11px/1.7 'DM Mono',
monospace;
@@ -860,14 +860,14 @@ fix(api): scope session query</code></pre>
box-shadow: inset 6px 0 var(--gold);
}
.skill-list button.active small {
color: var(--paper);
color: var(--accent-paper-active);
}
.skill-detail {
display: grid;
align-content: center;
padding: 50px clamp(30px, 5vw, 80px);
color: var(--paper);
background: var(--accent);
background: var(--accent-surface);
}
.skill-detail header {
display: grid;
@@ -941,7 +941,7 @@ fix(api): scope session query</code></pre>
}
.copy-lab > div p {
max-width: 420px;
color: var(--paper);
color: var(--accent-paper);
line-height: 1.6;
}
.copy-lab article {
@@ -1024,7 +1024,7 @@ fix(api): scope session query</code></pre>
font-size: var(--step-1);
}
.deeper nav small {
color: var(--muted);
color: var(--ink-muted);
font:
9px 'DM Mono',
monospace;