Typography on NLDD's base, and the scale of our own that hid it #196
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "typography-on-nldd-base"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
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-basewas 16px, maar<body>erfde 18px van NLDD's
body-md. De conventie in CLAUDE.md sprak zichzelf dustegen: "the default is base" wees naar 16, "let the stylesheet do the
default" naar 18.
font-size: var(--text-base)op lopende tekst was eenverkleining.
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-*zijnweg; NLDD's presets nemen het over, in drie lagen die NLDD zelf ook hanteert:
inhoud erft (18px/1.5, wat
nldd-rich-textdoet), compacte zwevende panelenstaan 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:
76 zaten op
nldd-icon size="sm": sinds 0.8.70 heeft dat component een echtesize-prop met pixelwaarden, en onze t-shirt-waarden deden niets. Ze werktenalleen dankzij een shim in
base.css.--semantics-content-error-colorbestaat 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.
size="sm"in #178 ruildeongemerkt 44px toetsdoel in voor 32px. De aanname eronder (dat de
lettergrootte vastligt) klopt niet; die is stuurbaar via een publiek token.
# Kopin een bericht rendeerde op de UA-default van 2em, wantCardRow .messagehad geenh1-h6-blok.soms de listeners van een custom element over. Gemeten: 2 van 6 runs met koude
cache, listener aantoonbaar aanwezig, custom element aantoonbaar voorouder.
--_menu-*-blok dat namen zettedie 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
:global(...)-selectors over 5 componenten.Geen enkele wijziging bovenstrooms haalt die weg, zie MinBZK/storybook#158.
nldd-title(7 plekken staan nog op ruwe primitives).CardRowis om; de 10px inCardDetailsModalis de laatste hardgecodeerde lettergrootte in de app.NLDD 0.8.70 ships generated Vue template types. Swapping our hand-written permissive declarations for them surfaced 91 type errors that had been rendering silently wrong: - 76 on <nldd-icon size="xs|sm|md|lg|xl|2xl|3xl">. NLDD gave nldd-icon a real size prop taking pixel strings (16..96, spacer-aligned, nothing below 16). Our t-shirt values were never valid; they only rendered because base.css carried a nldd-icon[size="sm"] { width: 14px } shim. Migrated to the real scale and dropped the shim. Smallest icons go 12/14px -> 16px; nldd-icon-button and nldd-button keep their own xs/sm/md/lg scale. - 11 on <nldd-title size="4">. Size is 1..6 (number), so it needs :size="4". - 4 on FormatToolbar's variantFor(), whose ": string" return annotation widened the literal union away. Also fixes the testing note in CLAUDE.md: plain `tsc --noEmit` does not look inside .vue templates, so it reported success on all 91. The real gate is `npm run typecheck` (vue-tsc), which `npm run build` already runs. Groundwork for #181 (typography pass): the type errors are the same class of silent drift the font-size audit found, and this makes the next pass fail loudly instead. Refs #169734241004fce69117083ce69117083b0ceade47a