Design token linting

[Robbert]

Linter 1: voor elke component library die white label components aanbied

• Herkennen wanneer tokens in JSON niet bestaan in CSS. Source of truth: @utrecht/component-x/src/tokens.json

Linter 2: voor elke thema dat gebruik maakt van white label tokens uit de community

• Herkennen wanneer tokens in Figma JSON niet bestaan in any src/tokens.json.

TODO: Opsplitsen in 2 tickets

[bddjong]

Bespreken / nog besluiten:

Voor linter 1:

• Herkennen wanneer de CSS wel tokens ondersteunt die niet gedocumenteerd in zijn in tokens.json voor een component?
• User experience, is het een npm package die makkelijk in een package.json script uitgevoerd kan worden? Is het een plugin voor eslint?

Voor linter 2:

• Mijn voorkeur ging uit naar vergelijken van CSS in plaats van tokens.json in verband met:
  • Geen toegang hebben tot alle tokens.json van een component library als NPM package (Edit: ik zie dat dit wel hier gepublished is: https://www.npmjs.com/package/@utrecht/components?activeTab=code)
  • De foutgevoeligheid van components/tokens.json (dit zou in principe opgelost worden door linter 1)

[Robbert]

Dit is extra belangrijk geworden, omdat de Theme Wizard afhankelijk is van tokens.json bestanden van community componenten om die in detail te kunnen weergeven.