From b8621acc7724d06da99df6146c08ae3d23c1f28f Mon Sep 17 00:00:00 2001 From: Jeffrey Lauwers Date: Thu, 18 Jun 2026 12:18:00 +0200 Subject: [PATCH 1/4] design tokens toegevoegd aan packages --- ...\360\237\223\235-design-tokens-bepaald.md" | 36 +- packages/tokens/alert-tokens/tokens.json | 354 +++++++++++++++++- .../form-field-description-tokens/tokens.json | 54 ++- .../tokens.json | 78 +++- .../form-field-label-tokens/tokens.json | 40 +- .../tokens/ordered-list-tokens/tokens.json | 74 +++- packages/tokens/text-input-tokens/tokens.json | 313 +++++++++++++++- .../tokens/unordered-list-tokens/tokens.json | 74 +++- 8 files changed, 993 insertions(+), 30 deletions(-) diff --git "a/.github/ISSUE_TEMPLATE/208-\360\237\223\235-design-tokens-bepaald.md" "b/.github/ISSUE_TEMPLATE/208-\360\237\223\235-design-tokens-bepaald.md" index 797c81a6..eceba55f 100644 --- "a/.github/ISSUE_TEMPLATE/208-\360\237\223\235-design-tokens-bepaald.md" +++ "b/.github/ISSUE_TEMPLATE/208-\360\237\223\235-design-tokens-bepaald.md" @@ -12,17 +12,21 @@ type: Task ## 📝 Design tokens bepaald - [ ] Maak een overzicht van de gebruikte design tokens -- [ ] Nieuw: maak een overzicht van de missende design tokens +- [ ] Maak een overzicht van de missende design tokens - [ ] Verzamel de design tokens voor states - [ ] Verzamel de design tokens voor varianten - [ ] Bepaal welke tokens algemeen nuttig zijn -- [ ] Documenteer beslissingen in de GitHub Discussion +- [ ] Bepaal de logische common tokens voor alle component-tokens +- [ ] Documenteer besluit in de GitHub Discussion +- [ ] Documenteer besluit in de Candidate repository - [ ] Zet de checkpoint in het GitHub projectbord op de juiste status -### Maak een overzicht van alle design tokens die gebruikt worden voor verschillende huisstijlen +### Maak een overzicht van van de gebruikte design tokens - Maak een Canvas aan die gedeeld wordt met het kernteam kanaal. -- Verzamel alle design tokens die worden gebruikt, bekijk hiervoor implementaties en voorbeelden in de GitHub discussion. En kies de design token naam die klopt met de NL Design System naming convention. +- Verzamel alle design tokens die worden gebruikt voor verschillende huisstijlen + - Bekijk hiervoor implementaties en voorbeelden in de GitHub discussion + - Kies de design token naam die klopt met de NL Design System naming convention. - Zet deze in een tabel en noteer welke design tokens door welke organisaties worden gebruikt. > [!WARNING] @@ -74,17 +78,20 @@ Bijvoorbeeld ### Bepaal welke tokens algemeen nuttig zijn -- Bepaal samen met de Design System Lead welke design tokens in de Candidate component moeten worden opgenomen, welke niet meegenomen worden omdat ze snowflakes zijn en welke niet aan onze richtlijnen voldoen +Bepaal samen met de Design System Lead welke design tokens in de Candidate component moeten worden opgenomen, welke niet meegenomen worden omdat ze snowflakes zijn en welke niet aan onze richtlijnen voldoen. -### Documenteer beslissingen in de GitHub Discussion +### Bepaal de logische common tokens voor alle component-tokens + +Component tokens zijn gekoppeld aan logische Common (basis) tokens. + +### Documenteer besluit in de GitHub Discussion Leg vast welke design tokens varianten wel en niet worden meegenomen voor de Candidate implementatie en waarom. Dat kan met dit bericht. ```md ## Candidate voorbereidingsfase: Design tokens bepaald -De design tokens voor de Candidate component zijn bepaald. Dat hebben we gedaan op basis van alle designs die we in deze Discussion hebben gezien. -Als een beslissing 2+ keer voor komt, dan is het een algemeen nuttige beslissing! +De design tokens voor de Candidate component zijn bepaald. Dat hebben we gedaan op basis van alle designs die we in deze Discussion hebben gezien. Als een beslissing vaker dan 2 keer voorkomt, is het een algemeen nuttige beslissing. ### Deze design tokens nemen we mee: @@ -95,20 +102,17 @@ Beschikbare design tokens vind je in: [{component}-tokens/tokens.json]({url}). ### Mis je een design token? -Laat het in deze Discussion weten als er uit gebruikersonderzoek naar voren is gekomen dat deze design beslissing een hele verbetering zou zijn. +Laat het in deze Discussion weten als er uit gebruikersonderzoek naar voren is gekomen dat deze design-beslissing een hele verbetering zou zijn. **💡 Tip** -Je kunt design tokens ook als extentie toevoegen aan de component. Documentatie hoe je dan kunt doen volgt. Vraag ons er gerust naar. +Je kunt [deisng tokens ook als extensie toevoegen](https://www.nldesignsystem.nl/handboek/componenten-vinden/#ik-mis-een-functionaliteit-binnen-een-candidate-of-hall-of-fame-component-wat-nu) aan een component. ``` -### Bepaal de logische common tokens voor alle component-tokens - -- Component tokens zijn gekoppeld aan logische Common (basis) tokens. - -### Leg de tokens vast in tokens.json +### Documenteer besluit in de Candidate repository -- Tokens zijn gedocumenteerd in tokens.json formaat en beschikbaar op NPM als `@nl-design-system-candidate/{component}-tokens` +- Leg de tokens vast in het `tokens.json` bestand van de component in de Candidate repository. - Zorg dat de design tokens NL Design System naming conventies volgen en zijn geprefixed met 'nl'. +- Maak de tokens beschikbaar op NPM als `@nl-design-system-candidate/{component}-tokens` 🚩 Checkpoint Design tokens bepaald diff --git a/packages/tokens/alert-tokens/tokens.json b/packages/tokens/alert-tokens/tokens.json index 8014f9be..d73ae87e 100644 --- a/packages/tokens/alert-tokens/tokens.json +++ b/packages/tokens/alert-tokens/tokens.json @@ -1,5 +1,355 @@ { "nl": { - "alert": {} + "alert": { + "border-radius": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "border-width": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "border-inline-start-width": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "column-gap": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "margin-block-end": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "margin-block-start": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "min-block-size": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "padding-block-end": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "padding-block-start": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "padding-inline-end": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "padding-inline-start": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + + "body": { + "padding-block-end": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "padding-block-start": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + } + }, + + "content": { + "background-color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "padding-block-end": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "padding-block-start": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "padding-inline-end": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "padding-inline-start": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "row-gap": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + } + }, + + "footer": { + "padding-block-end": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "padding-block-start": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + } + }, + + "header": { + "padding-block-end": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "padding-block-start": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + } + }, + + "heading": { + "font-size": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "fontSizes" + }, + "font-weight": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "fontWeights" + }, + "line-height": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "lineHeights" + } + }, + + "icon": { + "size": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + } + }, + + "message": { + "row-gap": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + } + }, + + "error": { + "background-color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "border-color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "icon": { + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + } + } + }, + + "info": { + "background-color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "border-color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "icon": { + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + } + } + }, + + "success": { + "background-color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "border-color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "icon": { + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + } + } + }, + + "warning": { + "background-color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "border-color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "icon": { + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + } + } + } + } } -} +} \ No newline at end of file diff --git a/packages/tokens/form-field-description-tokens/tokens.json b/packages/tokens/form-field-description-tokens/tokens.json index cff52682..a3ccfed4 100644 --- a/packages/tokens/form-field-description-tokens/tokens.json +++ b/packages/tokens/form-field-description-tokens/tokens.json @@ -1,5 +1,55 @@ { "nl": { - "form-field-description": {} + "form-field-description": { + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "font-family": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "fontFamilies" + }, + "font-size": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "fontSizes" + }, + "font-weight": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "fontWeights" + }, + "line-height": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "lineHeights" + }, + "margin-block-end": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": false + }, + "$type": "dimension" + }, + "margin-block-start": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": false + }, + "$type": "dimension" + } + } } -} +} \ No newline at end of file diff --git a/packages/tokens/form-field-error-message-tokens/tokens.json b/packages/tokens/form-field-error-message-tokens/tokens.json index e3c15b00..4392551e 100644 --- a/packages/tokens/form-field-error-message-tokens/tokens.json +++ b/packages/tokens/form-field-error-message-tokens/tokens.json @@ -1,5 +1,79 @@ { "nl": { - "form-field-error-message": {} + "form-field-error-message": { + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "column-gap": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "font-family": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "fontFamilies" + }, + "font-size": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "fontSizes" + }, + "font-weight": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "fontWeights" + }, + "line-height": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "lineHeights" + }, + "margin-block-end": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": false + }, + "$type": "dimension" + }, + "margin-block-start": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": false + }, + "$type": "dimension" + }, + + "icon": { + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "size": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + } + } + } } -} +} \ No newline at end of file diff --git a/packages/tokens/form-field-label-tokens/tokens.json b/packages/tokens/form-field-label-tokens/tokens.json index ad5e191f..56b96e1b 100644 --- a/packages/tokens/form-field-label-tokens/tokens.json +++ b/packages/tokens/form-field-label-tokens/tokens.json @@ -1,5 +1,41 @@ { "nl": { - "form-field-label": {} + "form-field-label": { + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "font-family": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "fontFamilies" + }, + "font-size": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "fontSizes" + }, + "font-weight": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "fontWeights" + }, + "line-height": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "lineHeights" + } + } } -} +} \ No newline at end of file diff --git a/packages/tokens/ordered-list-tokens/tokens.json b/packages/tokens/ordered-list-tokens/tokens.json index 4d9fd7d2..d6fb9bd2 100644 --- a/packages/tokens/ordered-list-tokens/tokens.json +++ b/packages/tokens/ordered-list-tokens/tokens.json @@ -1,5 +1,75 @@ { "nl": { - "ordered-list": {} + "ordered-list": { + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "font-family": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "fontFamilies" + }, + "font-size": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "fontSizes" + }, + "line-height": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "lineHeights" + }, + "padding-inline-start": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + + "item": { + "margin-block-end": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "margin-block-start": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "padding-inline-start": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + } + }, + + "marker": { + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + } + } + } } -} +} \ No newline at end of file diff --git a/packages/tokens/text-input-tokens/tokens.json b/packages/tokens/text-input-tokens/tokens.json index e3fb02d3..e3433888 100644 --- a/packages/tokens/text-input-tokens/tokens.json +++ b/packages/tokens/text-input-tokens/tokens.json @@ -1,5 +1,314 @@ { "nl": { - "text-input": {} + "text-input": { + "background-color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "border-color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "border-radius": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "border-width": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "column-gap": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "font-family": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "fontFamilies" + }, + "font-size": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "fontSizes" + }, + "font-weight": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "fontWeights" + }, + "line-height": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "lineHeights" + }, + "margin-block-end": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "margin-block-start": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "min-block-size": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "min-inline-size": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "outline-offset": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": false + }, + "$type": "other" + }, + "padding-block-end": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "padding-block-start": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "padding-inline-end": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "padding-inline-start": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + + "width": { + "xs": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "sm": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "md": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "lg": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "xl": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "full": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + } + }, + + "placeholder": { + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + } + }, + + "disabled": { + "background-color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "border-color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + } + }, + + "focus": { + "background-color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "border-color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "border-width": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "boxShadow" + }, + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + } + }, + + "hover": { + "border-width": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "boxShadow" + } + }, + + "invalid": { + "background-color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "border-color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "border-width": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "boxShadow" + }, + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + } + }, + + "read-only": { + "background-color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "border-color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + } + } + } } -} +} \ No newline at end of file diff --git a/packages/tokens/unordered-list-tokens/tokens.json b/packages/tokens/unordered-list-tokens/tokens.json index 2591173e..ad5a8099 100644 --- a/packages/tokens/unordered-list-tokens/tokens.json +++ b/packages/tokens/unordered-list-tokens/tokens.json @@ -1,5 +1,75 @@ { "nl": { - "unordered-list": {} + "unordered-list": { + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + }, + "font-family": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "fontFamilies" + }, + "font-size": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "fontSizes" + }, + "line-height": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": ["", ""], + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "lineHeights" + }, + "padding-inline-start": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + + "item": { + "margin-block-end": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "margin-block-start": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + }, + "padding-inline-start": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "dimension" + } + }, + + "marker": { + "color": { + "$extensions": { + "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.figma-implementation": true + }, + "$type": "color" + } + } + } } -} +} \ No newline at end of file From ce9447a9fbecea582a6ab2e16002200d3188a070 Mon Sep 17 00:00:00 2001 From: Jeffrey Lauwers Date: Thu, 18 Jun 2026 12:22:27 +0200 Subject: [PATCH 2/4] typo --- .../208-\360\237\223\235-design-tokens-bepaald.md" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/.github/ISSUE_TEMPLATE/208-\360\237\223\235-design-tokens-bepaald.md" "b/.github/ISSUE_TEMPLATE/208-\360\237\223\235-design-tokens-bepaald.md" index f7544e14..9efd34c9 100644 --- "a/.github/ISSUE_TEMPLATE/208-\360\237\223\235-design-tokens-bepaald.md" +++ "b/.github/ISSUE_TEMPLATE/208-\360\237\223\235-design-tokens-bepaald.md" @@ -105,7 +105,7 @@ Beschikbare design tokens vind je in: [{component}-tokens/tokens.json]({url}). Laat het in deze Discussion weten als er uit gebruikersonderzoek naar voren is gekomen dat deze design-beslissing een hele verbetering zou zijn. **💡 Tip** -Je kunt [desing tokens ook als extensie toevoegen](https://www.nldesignsystem.nl/handboek/componenten-vinden/#ik-mis-een-functionaliteit-binnen-een-candidate-of-hall-of-fame-component-wat-nu) aan een component. +Je kunt [design tokens ook als extensie toevoegen](https://www.nldesignsystem.nl/handboek/componenten-vinden/#ik-mis-een-functionaliteit-binnen-een-candidate-of-hall-of-fame-component-wat-nu) aan een component. ``` ### Documenteer besluit in de Candidate repository From 645a0c4f83369471f6b60436b69870afd9906aba Mon Sep 17 00:00:00 2001 From: Jeffrey Lauwers Date: Thu, 18 Jun 2026 13:44:02 +0200 Subject: [PATCH 3/4] lint --- packages/tokens/alert-tokens/tokens.json | 2 +- packages/tokens/form-field-description-tokens/tokens.json | 2 +- packages/tokens/form-field-error-message-tokens/tokens.json | 4 ++-- packages/tokens/form-field-label-tokens/tokens.json | 2 +- packages/tokens/ordered-list-tokens/tokens.json | 2 +- packages/tokens/text-input-tokens/tokens.json | 2 +- packages/tokens/unordered-list-tokens/tokens.json | 2 +- 7 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/tokens/alert-tokens/tokens.json b/packages/tokens/alert-tokens/tokens.json index d73ae87e..2419c3eb 100644 --- a/packages/tokens/alert-tokens/tokens.json +++ b/packages/tokens/alert-tokens/tokens.json @@ -352,4 +352,4 @@ } } } -} \ No newline at end of file +} diff --git a/packages/tokens/form-field-description-tokens/tokens.json b/packages/tokens/form-field-description-tokens/tokens.json index a3ccfed4..e6d9776a 100644 --- a/packages/tokens/form-field-description-tokens/tokens.json +++ b/packages/tokens/form-field-description-tokens/tokens.json @@ -52,4 +52,4 @@ } } } -} \ No newline at end of file +} diff --git a/packages/tokens/form-field-error-message-tokens/tokens.json b/packages/tokens/form-field-error-message-tokens/tokens.json index 4392551e..5b6131f2 100644 --- a/packages/tokens/form-field-error-message-tokens/tokens.json +++ b/packages/tokens/form-field-error-message-tokens/tokens.json @@ -57,7 +57,7 @@ }, "$type": "dimension" }, - + "icon": { "color": { "$extensions": { @@ -76,4 +76,4 @@ } } } -} \ No newline at end of file +} diff --git a/packages/tokens/form-field-label-tokens/tokens.json b/packages/tokens/form-field-label-tokens/tokens.json index 56b96e1b..59346810 100644 --- a/packages/tokens/form-field-label-tokens/tokens.json +++ b/packages/tokens/form-field-label-tokens/tokens.json @@ -38,4 +38,4 @@ } } } -} \ No newline at end of file +} diff --git a/packages/tokens/ordered-list-tokens/tokens.json b/packages/tokens/ordered-list-tokens/tokens.json index d6fb9bd2..02dafb45 100644 --- a/packages/tokens/ordered-list-tokens/tokens.json +++ b/packages/tokens/ordered-list-tokens/tokens.json @@ -72,4 +72,4 @@ } } } -} \ No newline at end of file +} diff --git a/packages/tokens/text-input-tokens/tokens.json b/packages/tokens/text-input-tokens/tokens.json index e3433888..6089a51e 100644 --- a/packages/tokens/text-input-tokens/tokens.json +++ b/packages/tokens/text-input-tokens/tokens.json @@ -311,4 +311,4 @@ } } } -} \ No newline at end of file +} diff --git a/packages/tokens/unordered-list-tokens/tokens.json b/packages/tokens/unordered-list-tokens/tokens.json index ad5a8099..5514159b 100644 --- a/packages/tokens/unordered-list-tokens/tokens.json +++ b/packages/tokens/unordered-list-tokens/tokens.json @@ -72,4 +72,4 @@ } } } -} \ No newline at end of file +} From b9ffd005e6a16c74e1effd299d0b72cbd92fa8f0 Mon Sep 17 00:00:00 2001 From: Jeffrey Lauwers Date: Fri, 19 Jun 2026 16:23:18 +0200 Subject: [PATCH 4/4] feedback verwerkt --- packages/tokens/text-input-tokens/tokens.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/tokens/text-input-tokens/tokens.json b/packages/tokens/text-input-tokens/tokens.json index 6089a51e..4fa858a5 100644 --- a/packages/tokens/text-input-tokens/tokens.json +++ b/packages/tokens/text-input-tokens/tokens.json @@ -135,7 +135,7 @@ "$type": "dimension" }, - "width": { + "value-size": { "xs": { "$extensions": { "nl.nldesignsystem.css-property-syntax": "", @@ -231,10 +231,10 @@ }, "border-width": { "$extensions": { - "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.css-property-syntax": "", "nl.nldesignsystem.figma-implementation": true }, - "$type": "boxShadow" + "$type": "dimension" }, "color": { "$extensions": { @@ -248,10 +248,10 @@ "hover": { "border-width": { "$extensions": { - "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.css-property-syntax": "", "nl.nldesignsystem.figma-implementation": true }, - "$type": "boxShadow" + "$type": "dimension" } }, @@ -272,10 +272,10 @@ }, "border-width": { "$extensions": { - "nl.nldesignsystem.css-property-syntax": "", + "nl.nldesignsystem.css-property-syntax": "", "nl.nldesignsystem.figma-implementation": true }, - "$type": "boxShadow" + "$type": "dimension" }, "color": { "$extensions": {