Task 02b removed the `:root` palette blocks from `styles.css`,
`chapters.css`, `rules/styles.css` and `skills-review/styles.css` on the
grounds that `src/styles/tokens.css` is now the single source of truth.
That is true for the Astro pages, which import the token layer through
`BaseLayout.astro`. It is not true for the legacy pages, which are still
the live site: `index.html`, `full-guide/`, `agents/`, `models/`,
`summary/`, `rules/`, `skills/` and `skills-review/` link these
stylesheets standalone and never load `tokens.css`. Every `var(--paper)`,
`var(--ink)`, `var(--gold)` on those pages resolved to nothing.
Restores each file's own palette verbatim from main -- including the
drift (`--ink` is `#172f42` here and `#122534` there), because the
migration's contract is that the site looks exactly as it does today.
Adds `--font-sans` and `--font-mono` to each block so 02b's substitution
of those two variables for the literal font stacks keeps resolving.
Also adds `--allow-empty-input` to the stylelint lint-staged task. Since
`.stylelintignore` landed, a commit touching only legacy CSS gives
stylelint an all-ignored file list, which it treats as an error and which
made lint-staged revert this change wholesale.
The four blocks disappear with the files themselves at task 20.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
- 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.
`styles.css` line 1 carried a malformed rule for the life of the site:
@font-face{font-family:Manrope;src:url('https://fonts.googleapis.com/css2?...')}
`src:` in an @font-face must point at a font binary. That URL returns a CSS
stylesheet, so no browser could ever load a face from it. Every
`font-family:Manrope,Arial,sans-serif` fell through to Arial, and 'DM Mono' was
never declared as a family at all, so it fell through to generic monospace. The
intended typography has never once been seen.
Task 02 spotted this and was told to default to deleting the dead rule and
declaring the stacks that actually render. It recorded that decision, deferred
the deletion to "future component tasks", and nothing picked it up. The human
has now chosen the other branch: the real fonts.
Self-hosted rather than linked from fonts.googleapis.com because
scripts/audit-ui.mjs rejects any external <link>/<script>, and because the site
is presented in workshop rooms with unreliable networks. Latin and latin-ext
subsets only — the site is EN and PT-BR, so the cyrillic, greek and vietnamese
subsets Google also serves are dropped. Manrope ships as one variable file
covering 400-800. 89 KB total across six faces, all SIL OFL.
One public/fonts/fonts.css serves both trees, with relative url()s that each
consumer resolves against that file's own location: BaseLayout.astro links it
for Astro pages, the legacy root styles.css @imports it.
This changes how every page renders. That is the point, and it is the one
sanctioned visual change in the migration — screenshots taken before today show
Arial and are no longer a valid baseline. The three governing documents that
said "do not add a webfont" are updated so the next design-system-keeper does
not undo this.
Adds .stylelintignore, mirroring .prettierignore's legacy list for the same
reason: staging the minified styles.css to change one declaration produced ~180
declaration-block-single-line-max-declarations errors and blocked the commit.
public/fonts/fonts.css is deliberately excluded from that ignore list.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Marcos Paulo