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 1141bb1d..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" @@ -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,9 +78,13 @@ 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. @@ -97,17 +105,14 @@ 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 design tokens ook als extensie toevoegen aan de component. Documentatie hoe je dan kunt doen volgt. Vraag ons er gerust naar. +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. ``` -### 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..2419c3eb 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" + } + } + } + } } } diff --git a/packages/tokens/form-field-description-tokens/tokens.json b/packages/tokens/form-field-description-tokens/tokens.json index cff52682..e6d9776a 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" + } + } } } diff --git a/packages/tokens/form-field-error-message-tokens/tokens.json b/packages/tokens/form-field-error-message-tokens/tokens.json index e3c15b00..5b6131f2 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" + } + } + } } } diff --git a/packages/tokens/form-field-label-tokens/tokens.json b/packages/tokens/form-field-label-tokens/tokens.json index ad5e191f..59346810 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" + } + } } } diff --git a/packages/tokens/ordered-list-tokens/tokens.json b/packages/tokens/ordered-list-tokens/tokens.json index 4d9fd7d2..02dafb45 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" + } + } + } } } diff --git a/packages/tokens/text-input-tokens/tokens.json b/packages/tokens/text-input-tokens/tokens.json index e3fb02d3..4fa858a5 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" + }, + + "value-size": { + "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": "dimension" + }, + "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": "dimension" + } + }, + + "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": "dimension" + }, + "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" + } + } + } } } diff --git a/packages/tokens/unordered-list-tokens/tokens.json b/packages/tokens/unordered-list-tokens/tokens.json index 2591173e..5514159b 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" + } + } + } } }