REFACTOR: line-height omzetten

[JoeriRoijenga]

Context
Bij het fixen van de line-height bug in: #963, werd de inconsistentie van line-height: 150% gevonden. Specifiek bij <BlockQuote>. Dit was op te lossen door geen gebruik te maken van een percentage of welke unit aanduiding dan ook.

Oplossing
Gebruik van line-height: 1.25 (zonder unit aanduiding) zorgt voor een consistente werking.

Zie voor meer informatie MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#prefer_unitless_numbers_for_line-height_values

Doel
Alle line-heights die wij toepassen controleren en deze omzetten naar zonder unit aanduiding. Dit is het beste te testen door lokaal <UtrechtDocument> te verwijderen uit config/preview.tsx en dan lokaal tegen productie aan te vergelijken.

Note
Misschien handig om dit even kort te sluiten met designers.

[JoeriRoijenga]

#1029 ook hierin meenemen, voor BlockQuote is er een 1.25 unitless variabele toegevoegd.

[Rozerinay]

@Rozerinay controleer of de waarde goed is doorgevoerd in Figma.

[Rozerinay]

@JoeriRoijenga ik heb gecontroleerd of de waarde goed was doorgevoerd, en dat was wel het geval. Voor de content en attribution is de token rhc.font-size.paragraph.default gebruikt (150%).

In Tokens Studio kunnen we helaas geen waarde invoeren zonder unit. Dit resulteert in pixels, wat bij 1.25 uiteindelijk een line-height dus 1.25px wordt.

Tokens without a unit specified are applied as the pixel equivalent in Figma.

En dat ziet er dan als volgt uit:

We moeten dus gebruikmaken van percentages.

Heb je toevallig een screenshot waarop het verschil van de inconsistentie te zien is? Het lijkt me goed om te kijken of we dit op een andere manier kunnen oplossen.

[Rozerinay]

@JoeriRoijenga ben jij hier momenteel mee bezig?

[JoeriRoijenga]

@Rozerinay, ik had hem op mijn naam gezet, maar nog niet aan toe gekomen.

Het probleem is vooral zichtbaar in het voorbeeld hieronder:

In het linker deel is line-height: 150% te zien en rechts is line-height: 1.25 te zien.
Waarbij rechts de line-height van toepassing is op de font-size van het child (de text) en links is de line-height van toepassing op de parent font-size.

Wanneer ik bijv. de font-size voor beide aanpas naar 30px, dan zie je dat links de line-height niet mee schaalt en rechts wel.

Dat probleem zit hem in hoe percentages gebruik maken van hiërarchie binnen HTML (zie bron).

@Rozerinay aangezien je aangeeft dat unitless niet mogelijk is, wat is er vanuit jullie dan als alternatief mogelijk?
Optioneel kunnen wij de line-height op de text content zelf zetten, zodat er geen sprake is van hiërarchie.