design(#89): tokens + CSS-variabelen + Google Fonts #97

New issue

Closed

opened 2026-04-21 15:08:56 +02:00 by Ghost · 1 comment

Ghost commented

2026-04-21 15:08:56 +02:00

(Migrated from codeberg.org)

Part of #89. REFINE-89.md Brok 1.

Context

Eerste stap van het design-overhaul. Laadt de 3 Google Fonts (Luckiest Guy, Fredoka, JetBrains Mono) en zet alle handoff-design-tokens (kleuren/radius/shadows/spacing) als CSS custom properties. Zero visueel effect — alleen declaraties.

Scope

`` naar 3 Google Fonts in `index.html:28-29`
Alle tokens uit `routekaart_handoff.jsx` `RkTokens` → `:root { --ink: #20232e; ... }` in bestaande `

Part of #89. [REFINE-89.md Brok 1](../blob/dev/REFINE-89.md#brok-1--tokens--css-variabelen--fonts-laden). ## Context Eerste stap van het design-overhaul. Laadt de 3 Google Fonts (Luckiest Guy, Fredoka, JetBrains Mono) en zet alle handoff-design-tokens (kleuren/radius/shadows/spacing) als CSS custom properties. Zero visueel effect — alleen declaraties. ## Scope - \`<link>\` naar 3 Google Fonts in \`index.html:28-29\` - Alle tokens uit \`routekaart_handoff.jsx\` \`RkTokens\` → \`:root { --ink: #20232e; ... }\` in bestaande \`<style>\` - Geen scherm aanpassen; niets gebruikt de tokens nog ## Verificatie - [ ] \`npx playwright test\` groen (geen visuele regressie) - [ ] \`getComputedStyle(document.documentElement).getPropertyValue('--ink')\` werkt in DevTools-console - [ ] Fonts geladen (Network-tab toont 3 GET requests) ## Effort/Impact/Risico 1 uur / zero-visual-impact / zero-risk ## Kan starten zonder user-beslissing? **Ja** — dit is brok 1 van de REFINE-aanbeveling, geen keuze nodig.

Ghost commented

2026-04-21 22:06:14 +02:00

(Migrated from codeberg.org)

Al geland in v2.18.6 (commit 64fbd66 — "refactor(#98): extract

Al geland in v2.18.6 (commit 64fbd66 — "refactor(#98): extract <style> block to css/ files"). Die commit deed brok 1 én brok 2 in één keer: tokens.css gezet met alle RkTokens (kleuren, fonts, type-scale, borders, radii, shadows), 3 Google Fonts gelinkt via `<link>` in index.html, en geen scherm gebruikt ze nog — scope brok 1 gehandhaafd. Had als `#97` gelabeld moeten worden in plaats van samengevoegd met #98.