Typography on NLDD's base, and the scale of our own that hid it #196

Merged

robbertbos merged 11 commits from typography-on-nldd-base into main 2026-07-26 09:47:28 +00:00

Conversation 0 Commits 11 Files changed 68 +1337 -1741

robbertbos commented 2026-07-26 07:32:05 +00:00

Owner

Copy link

Sluit #181, en neemt #169 mee omdat dat het vangnet is waar de rest op leunt.

Wat er aan de hand was

"Base" noemde geen getal in deze codebase. --text-base was 16px, maar <body>
erfde 18px van NLDD's body-md. De conventie in CLAUDE.md sprak zichzelf dus
tegen: "the default is base" wees naar 16, "let the stylesheet do the
default" naar 18. font-size: var(--text-base) op lopende tekst was een
verkleining.

Daaronder zat iets groters: Waggle draaide een eigen typeschaal naast die van
NLDD. Een Tailwind-achtige reeks tegenover NLDD's modulaire schaal met ratio
1.125. Ze vielen op twee van de zeven stappen samen en liepen daarna uiteen. De
16-vs-14-mismatch uit #181 was daar een symptoom van, geen uitschieter.

Wat er nu staat

Waggle heeft geen eigen typeschaal meer. --text-* en --line-height-* zijn
weg; NLDD's presets nemen het over, in drie lagen die NLDD zelf ook hanteert:
inhoud erft (18px/1.5, wat nldd-rich-text doet), compacte zwevende panelen
staan op 16px (input-fields-sm), meta op 14,2 en 12,6px (body-xs/xxs).

Gemeten op één inbox-scherm: elke lettergrootte is nu een NLDD-stap. Daarvoor
stonden er negen, twaalf, veertien, zestien, achttien en twintig pixels door
elkaar, uit vier verschillende bronnen.

Wat er onderweg uit viel

Los van de typografie, allemaal gevonden bij het opruimen:

• 91 stille typefouten. NLDD's gegenereerde template-types (#169) vingen ze.
  76 zaten op nldd-icon size="sm": sinds 0.8.70 heeft dat component een echte
  size-prop met pixelwaarden, en onze t-shirt-waarden deden niets. Ze werkten
  alleen dankzij een shim in base.css.
• 19 foutmeldingen renderden in bodykleur. --semantics-content-error-color
  bestaat niet en is ook nooit door ons gedefinieerd, dus elke verwijzing was
  ongeldig en viel terug op de geërfde kleur. De rode banner-achtergrond viel
  helemaal weg.
• Het datumveld in de plan-popover was 32px hoog. size="sm" in #178 ruilde
  ongemerkt 44px toetsdoel in voor 32px. De aanname eronder (dat de
  lettergrootte vastligt) klopt niet; die is stuurbaar via een publiek token.
• # Kop in een bericht rendeerde op de UA-default van 2em, want
  CardRow .message had geen h1-h6-blok.
• Een flaky test met een echte oorzaak. happy-dom 20.11.1 slaat bij bubbling
  soms de listeners van een custom element over. Gemeten: 2 van 6 runs met koude
  cache, listener aantoonbaar aanwezig, custom element aantoonbaar voorouder.
• Dode CSS, vier niet-bestaande tokens, en een --_menu-*-blok dat namen zette
  die NLDD niet kent.

Verificatie

Er is geen visuele regressietest in de repo, dus elke commit heeft een klein,
benoembaar verificatie-oppervlak en de wijzigingen zijn opzettelijk niet
samengevoegd. Handmatig nagelopen in de preview met dev-seed op 1440, 720
(≈200% zoom) en 390px: geen horizontale scroll, geen overlopende elementen,
geen afgeknipte tekstvakken.

Poorten groen na elke commit: npm run typecheck, npm run build,
npm run test (533), npm run lint, uvx pre-commit run --all-files.

Vervolg, bewust niet in deze PR

• De markdown-CSS ontdubbelen: 110 :global(...)-selectors over 5 componenten.
  Geen enkele wijziging bovenstrooms haalt die weg, zie MinBZK/storybook#158.
• Koppen naar nldd-title (7 plekken staan nog op ruwe primitives).
• De resterende handgebouwde avatars (#167/#130). CardRow is om; de 10px in
  CardDetailsModal is de laatste hardgecodeerde lettergrootte in de app.

Sluit #181, en neemt #169 mee omdat dat het vangnet is waar de rest op leunt. ## Wat er aan de hand was "Base" noemde geen getal in deze codebase. `--text-base` was 16px, maar `<body>` erfde 18px van NLDD's `body-md`. De conventie in CLAUDE.md sprak zichzelf dus tegen: *"the default is base"* wees naar 16, *"let the stylesheet do the default"* naar 18. `font-size: var(--text-base)` op lopende tekst was een verkleining. Daaronder zat iets groters: Waggle draaide een eigen typeschaal naast die van NLDD. Een Tailwind-achtige reeks tegenover NLDD's modulaire schaal met ratio 1.125. Ze vielen op twee van de zeven stappen samen en liepen daarna uiteen. De 16-vs-14-mismatch uit #181 was daar een symptoom van, geen uitschieter. ## Wat er nu staat Waggle heeft geen eigen typeschaal meer. `--text-*` en `--line-height-*` zijn weg; NLDD's presets nemen het over, in drie lagen die NLDD zelf ook hanteert: inhoud erft (18px/1.5, wat `nldd-rich-text` doet), compacte zwevende panelen staan op 16px (`input-fields-sm`), meta op 14,2 en 12,6px (`body-xs`/`xxs`). Gemeten op één inbox-scherm: elke lettergrootte is nu een NLDD-stap. Daarvoor stonden er negen, twaalf, veertien, zestien, achttien en twintig pixels door elkaar, uit vier verschillende bronnen. ## Wat er onderweg uit viel Los van de typografie, allemaal gevonden bij het opruimen: - **91 stille typefouten.** NLDD's gegenereerde template-types (#169) vingen ze. 76 zaten op `nldd-icon size="sm"`: sinds 0.8.70 heeft dat component een echte `size`-prop met pixelwaarden, en onze t-shirt-waarden deden niets. Ze werkten alleen dankzij een shim in `base.css`. - **19 foutmeldingen renderden in bodykleur.** `--semantics-content-error-color` bestaat niet en is ook nooit door ons gedefinieerd, dus elke verwijzing was ongeldig en viel terug op de geërfde kleur. De rode banner-achtergrond viel helemaal weg. - **Het datumveld in de plan-popover was 32px hoog.** `size="sm"` in #178 ruilde ongemerkt 44px toetsdoel in voor 32px. De aanname eronder (dat de lettergrootte vastligt) klopt niet; die is stuurbaar via een publiek token. - **`# Kop` in een bericht rendeerde op de UA-default van 2em**, want `CardRow .message` had geen `h1`-`h6`-blok. - **Een flaky test met een echte oorzaak.** happy-dom 20.11.1 slaat bij bubbling soms de listeners van een custom element over. Gemeten: 2 van 6 runs met koude cache, listener aantoonbaar aanwezig, custom element aantoonbaar voorouder. - Dode CSS, vier niet-bestaande tokens, en een `--_menu-*`-blok dat namen zette die NLDD niet kent. ## Verificatie Er is geen visuele regressietest in de repo, dus elke commit heeft een klein, benoembaar verificatie-oppervlak en de wijzigingen zijn opzettelijk niet samengevoegd. Handmatig nagelopen in de preview met dev-seed op 1440, 720 (≈200% zoom) en 390px: geen horizontale scroll, geen overlopende elementen, geen afgeknipte tekstvakken. Poorten groen na elke commit: `npm run typecheck`, `npm run build`, `npm run test` (533), `npm run lint`, `uvx pre-commit run --all-files`. ## Vervolg, bewust niet in deze PR - De markdown-CSS ontdubbelen: 110 `:global(...)`-selectors over 5 componenten. Geen enkele wijziging bovenstrooms haalt die weg, zie MinBZK/storybook#158. - Koppen naar `nldd-title` (7 plekken staan nog op ruwe primitives). - De resterende handgebouwde avatars (#167/#130). `CardRow` is om; de 10px in `CardDetailsModal` is de laatste hardgecodeerde lettergrootte in de app.

robbertbos force-pushed typography-on-nldd-base from 734241004f to ce69117083 2026-07-26 09:30:22 +00:00 Compare

robbertbos force-pushed typography-on-nldd-base from ce69117083 to b0ceade47a 2026-07-26 09:37:05 +00:00 Compare

robbertbos merged commit b0ceade47a into main 2026-07-26 09:47:28 +00:00

robbertbos deleted branch typography-on-nldd-base 2026-07-26 09:47:28 +00:00

robbertbos referenced this pull request 2026-07-26 11:49:24 +00:00

Restore the focus ring that #181 made invisible #198

robbertbos referenced this pull request from a commit 2026-07-26 19:52:50 +00:00

Restore the pill shape on the section count badges

robbertbos referenced this pull request 2026-07-26 19:53:03 +00:00

Restore the pill shape on the section count badges #202

robbertbos referenced this pull request 2026-07-26 19:56:29 +00:00

Nothing catches a reference to a CSS custom property that no longer exists #204

robbertbos referenced this pull request from a commit 2026-07-26 20:04:12 +00:00

Restore the pill shape on the section count badges

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

bug

Something is not working

  

duplicate

This issue or pull request already exists

  

enhancement

New feature

  

help wanted

Need some help

  

invalid

Something is wrong

  

nldd ds

  

question

More information is needed

  

wontfix

This won't be fixed

No labels

bug

duplicate

enhancement

help wanted

invalid

nldd ds

question

wontfix

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

robbertbos/waggle!196

No description provided.