Move the Astro-facing responsive layer out of responsive.css, retaining the exact legacy stylesheet for full-guide/index.html until task 20. Scope worktree and fleet overrides to their components so they can win against component base styles.
Do not delete responsive.css: the legacy page still loads it. Generated screenshot artifacts are deliberately untracked.
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>
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`).
- Imported tokens.css directly into BaseLayout.astro.
- Removed legacy :root variable definitions from chapters.css, skills-review/styles.css, rules/styles.css, and styles.css.
- Added self-hosted --font-sans and --font-mono to tokens.css and updated legacy font stacks.
- Removed base.css.
- Added a build-output check in check-tokens.mjs to ensure the token layer is loaded in dist html files.
- Created `src/styles/tokens.css` establishing the canonical 10-color palette, 5 designated breakpoints, and the 6-step typography scale.
- Created `src/styles/base.css` to import the root variables for Astro components.
- Wrote down decisions regarding the `--blue` palette canonicalization and the font stack simplification in the task brief.
- These tokens will power the Astro component refactors in parallel tasks.
Marcos Paulo