refactor(design-tokens): apply new style dictionary config

[AdhamAH]

#729

Deze komt van @AlineNap PR #737 en de werk van @remypar5.

Openstaand werk voor deze PR staat onderaan.

Wat ik heb gedaan (@adham)

• Alles geprobeerd, maar er waren allerlei fouten
• Toen geprobeerd om main in de branch te mergen
• Daarna kreeg ik deze foutmelding

Referentie bestaat niet: utrecht.blockquote.attribution.line-height.value probeert te verwijzen naar rhc.line-height.body, dat is niet gedefinieerd
Referentie bestaat niet: utrecht.blockquote.attribution.line-height.rawValue probeert te verwijzen naar rhc.line-height.body, dat is niet gedefinieerd
Referentie bestaat niet: utrecht.blockquote.content.line-height.value probeert te verwijzen naar rhc.line-height.body, dat is niet gedefinieerd
Referentie bestaat niet: utrecht.blockquote.content.line-height.rawValue probeert te verwijzen naar rhc.line-height.body, dat is niet gedefinieerd
Referentie bestaat niet: blockquote.attribution.line-height.value probeert te verwijzen naar rhc.line-height.body, dat is niet gedefinieerd
Referentie bestaat niet: blockquote.attribution.line-height.rawValue probeert te verwijzen naar rhc.line-height.body, dat is niet gedefinieerd
Referentie bestaat niet: blockquote.content.line-height.value probeert te verwijzen naar rhc.line-height.body, dat is niet gedefinieerd
Referentie bestaat niet: blockquote.content.line-height.rawValue probeert te verwijzen naar rhc.line-height.body, dat is niet gedefinieerd

• De invoer overwrites/oude rijkshuisstijl/blockquote in het figma.tokens.json-bestand verwijderd
• De build faalde niet, maar in de terminal worden er fouten weergegeven: Error checking alias of token voor elk thema
• Ik heb ook de storybook geüpdatet om de nieuwe thema's op te nemen, maar ik zie geen verschil in stijl, alleen enkele kapotte stijlen
• Ook de thema CSS-bestanden gecontroleerd en zie ook geen verschil

Wat heb ik gedaan (@remypar5)

Ik heb mij alleen met de build scripts voor de design tokens bezig gehouden. Het is te volgen in pnpm run build in de proprietary/design-tokens directory:

• build:figma-tokens
• build:extract-themes
• build:style-dictionary

build:figma-tokens

Hierin geef ik alleen aan dat de referenties behouden moeten worden. Dit voorkomt een platte tokens file. Dit script neemt figma/figma.tokens.json als input en vertaalt het naar een formaat die wordt begrepen door Style Dictionary. Dit formaat komt als plat bestand te staan in src/generated/figma.tokens.json.

build:extract-themes

Om verschillende thema's te kunnen genereren trekken we het bovengenoemde bestand uit elkaar. In deze stap breiden we de src/generated directory uit met de volgende bestanden:

• $metadata.json: configuratie die gebruikt wordt door Figma. Wij doen er niks mee.
• $themes.json: configuratie die aangeeft welke tokens bij welke thema's horen. Dit bestand gebruiken we om de verschillende thema's te bepalen en hoe die gevuld moeten worden.
• products/*.json: bestand per product met de nodige design tokens en hun referenties
• *.json: design tokens vanuit verschillende deelnemers van NLDS (Gemeente Utrecht, Rijkshuisstijl community.

Al deze bestanden vormen samen de input voor de volgende stap.

build:style-dictionary

Per bestand in src/generated/product/, creëer een Style Dictionary configuratie voor web (CSS, SCSS, LESS) en javascript (JSON, JS variables, TS type declarations) en bouw deze.

Openstaande taken

• Design Review op Chromatic
• Opnieuw main mergen in deze branch`
  • Merge conflict in pnpn-lock.yaml oplossen
• De nieuwe stijlen zijn in Storybook ingeladen maar laten nog geen verschillende resultaten zien. We moeten nog achterhalen wat hier het probleem is. Ligt dat aan de build van de design tokens of aan de invulling van de design tokens zelf?
  • We kunnen afkijken bij LUX hoe zij dat doen
    • Build
    • Storybook Preview + ./themes.ts

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
rijkshuisstijl-community	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 8, 2024 8:10am
rijkshuisstijl-community-templates	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 8, 2024 8:10am
rvs-rivm-nl	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 8, 2024 8:10am

[remypar5]

@AdhamAH Ik heb wat zitten sleutelen. De references blijven nu behouden. Kun jij nog een laatste blik werpen voor we m laten reviewen?

Ik heb de PR even in DRAFT gezet. Als je denk dat hij klaar is om te reviewen kun je dan onderaan aangeven met de "Ready for review knop"

Update
De PR is klaar om gereviewd te worden

[remypar5]

@AlineNap Dit stukje heb ik aangepast: De nesting is verwijderd. De rest van het bestand heb ik niet aangeraakt

[AdhamAH]

@remypar5 Sorry voor de late antwoord. Ik heb gecheckt en ook main merged. De setup is goed in principle. Maar de style is helemaal niet goed. Ik weet niet als wetgevend-theme===rhc-theme. Als ja dan het is niet goed. Als nee dan wij moeten een rhc-theme hebben. In ieder geval, kan @AlineNap a.u.b dat checken. En deze branch gebruiken om veranderen te maken?

Ik geloof dat het nog niet klaar om te merge is