font-size token toevoegen voor specifieke fonts per button in utrecht-button

Ollie-nl commented 3 months ago

Logius werkt met verschillende fontsizes per type button om te voldoen aan de WCAG-richtlijnen voor hun oranje knoppen. Hierdoor heeft de primary-action een grotere fontsize nodig dan de secondary-action en subtle.    Kunnen we de volgende tokens toevoegen aan het utrecht-button component om de verschillende fontsizes te ondersteunen?

Nieuwe tokens voor de Utrecht buttons

utrecht-button-primary-action-font-size
utrecht-button-secondary-action-font-size
utrecht-button-subtle-font-size

Achtergrond  Logius heeft specifieke WCAG-eisen die vereisen dat verschillende knoppen verschillende fontsizes hebben. Dit is om ervoor te zorgen dat de knoppen toegankelijk en goed leesbaar zijn voor alle gebruikers, vooral met betrekking tot contrast en leesbaarheid.

Robbert commented 3 months ago

Als we font-size toevoegen, dan moeten we ook line-height toevoegen op dezelfde plekken.

Ollie-nl commented 3 months ago

Dan komen deze tokens erbij:

utrecht-button-primary-action-line-height
utrecht-button-secondary-action-line-height
utrecht-button-subtle-line-height

Voor Utrecht blijft de (common) waarden voor

font-size: {utrecht.document.font-size} en voor line-height: {utrecht.document.line-height}

Ollie-nl commented 3 months ago

@AliKdhim87 & @jeffreylauwers Figma file is aangepast in Utrecht Bieb: https://www.figma.com/design/UXIHcIurAD8hyoBWx4hDBV/NLDS---Gemeente-Utrecht---Bibliotheek?node-id=450-5076&t=BoePiwmISmgPlVwZ-4

bddjong commented 3 months ago

https://github.com/nl-design-system/utrecht/pull/2262

nl-design-system / utrecht

font-size token toevoegen voor specifieke fonts per button in utrecht-button #2236