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/styles/tokens.css
+19 -5
View File
@@ -38,11 +38,25 @@
--step-00: 10px;
--step-09: 9px;
/* Overlays */
--white-14: rgb(255 255 255 / 14%);
--white-23: rgb(255 255 255 / 23%);
--white-25: rgb(255 255 255 / 25%);
--white-31: rgb(255 255 255 / 31%);
/* On-dark palette. These are the values the source actually uses on the
--ink and --accent surfaces. They are not near-misses of the palette
above: --muted is a dark-on-light value and is illegible on --ink, and
--paper is warm where the text over --accent is violet-tinted. Each one
is the exact hex the legacy stylesheets ship. */
--ink-muted: #9eb0bb;
--ink-line: #b8c8d2;
--ink-code: #c9d5dc;
--accent-paper: #eceaf5;
--accent-paper-active: #f0eef8;
--accent-surface: #5b7098;
/* Overlays. The percentages are the exact 8-bit alphas the source ships
(#ffffff24, #ffffff3a, #ffffff40, #ffffff50), not rounded to whole
numbers — the names are rounded, the values are not. */
--white-14: rgb(255 255 255 / 14.1176%);
--white-23: rgb(255 255 255 / 22.7451%);
--white-25: rgb(255 255 255 / 25.098%);
--white-31: rgb(255 255 255 / 31.3725%);
/* Breakpoints */
--bp-sm: 560px;