Tokens.json van gemeente Utrecht in nieuw formaat

[Yolijn]

Als theme-wizard wil ik dat gemeente Utrecht gebruik maakt van de nieuwe tokens.json zoals deze ook in Candidate wordt gebruikt zodat ik de Utrecht community componenten inclusief token informatie kan renderen in het overzicht.

Beschrijving

Gemeente Utrecht heeft voor alle componenten een tokens.json bestand. Die hebben ze al behoorlijk lang, dus inmiddels is de design token standaard waar deze json bestanden op zijn gebaseerd iets veranderd. In de Candidate repository staat deze nieuwe vorm al wel. Daarom kan de Theme Wizard de Candidate componenten wel begrijpen, maar de Utrecht community componenten niet.

• Nieuw: https://github.com/nl-design-system/candidate/blob/main/packages/tokens/button-tokens/tokens.json
• Oud: https://github.com/nl-design-system/utrecht/blob/main/components/button/src/tokens.json

Wat moet er gebeuren:

Important

Er zijn misschien wel 100 tokens.json bestanden. Die moeten allemaal aangepast worden... het is dus aan te raden een scriptje te schrijven om de boel automagisch om te zetten. Door voor en na in Storybook te checken kun je zorgen dat alles goed blijft werken.

$extensions

• De naam blijft hetzelfde
• De css-property extentions moeten worden aangepast

"nl.nldesignsystem.css.property": {
  "syntax": "<color>",
  "inherits": true
},

Word

"nl.nldesignsystem.css-property-syntax": "<color>",

• De nl.nldesignsystem.figma.supports-token is nu nl.nldesignsystem.figma-implementation
• Alle extentions moeten verder 1-op-1 over worden genomen
• de figma.supports-token wordt ook door Utrecht gebruikt in Storybook, daar moet de verwijzing dus ook worden aangepast
• de syntax wordt ook gebruikt. Niet alleen in Storybook, maar mogelijk ook voor het genereren van css. Er moet dus gezocht worden welke verwijzingen in code ook naar de nieuwe naamgeving moeten worden omgeschreven.

type

• type wordt nu $type
• waardes zijn anders, maar het verschil is jammer genoeg niet gedocumenteerd. De nieuwe waardes moeten overeen komen met de design tokens spec https://www.designtokens.org/tr/2025.10/format/#types
• de waardes die veranderd zijn moeten ook gechecked worden in de Utrecht Storybooks vooral voor de design token tabel in de design token pagina's zoals deze https://nl-design-system.github.io/utrecht/storybook/?path=/story/css_css-button--design-tokens