Gebruik alleen bestaande Utrecht tokens

[Robbert]

Uitkomst van een scriptje laat zien dat er nog een aantal tokens niet in sync zijn tussen Voorbeeld Thema in Figma en code van Utrecht componenten:

Theme tokens: 512
Component tokens: 1126
Theme tokens that are unknown: 47
Theme tokens that can be validated: 465
Theme tokens that are unknown:
utrecht.pointer-target.min-size
utrecht.feedback.warning.background-color
utrecht.feedback.warning.border-color
utrecht.feedback.warning.color
utrecht.blockquote.padding-block-end
utrecht.blockquote.padding-block-start
utrecht.button.column-gap
utrecht.link.column-gap
utrecht.link.focus.background-color
utrecht.radio-button.checked.disabled.background-color
utrecht.radio-button.checked.disabled.border-color
utrecht.radio-button.checked.disabled.color
utrecht.select.font-weight
utrecht.table.header-cell.line-height
utrecht.table.header-cell.font-family
utrecht.table.data-cell.color
utrecht.table.data-cell.font-family
utrecht.table.data-cell.font-weight
utrecht.table.data-cell.line-height
utrecht.table.data-cell.font-size
utrecht.table.footer.border-block-end-width
utrecht.table.footer.border-block-end-color
utrecht.table.footer.background-color
utrecht.table.row.background-color
utrecht.table.footer-cell.font-weight
utrecht.table.footer-cell.font-size
utrecht.table.footer-cell.color
utrecht.table.footer-cell.font-family
utrecht.table.footer-cell.line-height
utrecht.table.container.box-inline-end-shadow
utrecht.table.container.box-inline-start-shadow
utrecht.textarea.focus.border-width
utrecht.textarea.hover.background-color
utrecht.textarea.hover.border-color
utrecht.textarea.hover.color
utrecht.textarea.hover.border-width
utrecht.textarea.font-weight
utrecht.textbox.font-weight
utrecht.textbox.focus.border-width
utrecht.textbox.hover.border-width
utrecht.textbox.hover.background-color
utrecht.textbox.hover.border-color
utrecht.textbox.hover.color
utrecht.unordered-list.color
utrecht.unordered-list.marker.border-color
utrecht.unordered-list.font-family
utrecht.unordered-list.font-weight

• Sommige tokens kunnen we implementeren in code
• Sommige tokens moeten we bij Utrecht toevoegen als metadata in een tokens.json file
• Sommige tokens kunnen verwijderen
• Sommige tokens kunnen we hernoemen van utrecht.* naar todo.*

[Robbert]

utrecht.pointer-target.min-size

Deze is denk ik opgesplitst in nu min-inline-size en min-block-size

utrecht.feedback.warning.background-color
utrecht.feedback.warning.border-color
utrecht.feedback.warning.color

Dit zijn ongedocumenteerde common tokens van Utrecht, denk dat we hier een tokens.json van moeten maken en documentatie voor moeten schrijven.

utrecht.blockquote

utrecht.blockquote.padding-block-end
utrecht.blockquote.padding-block-start

Foutje in de tokens.json van blockquote, heb ik gefixt

utrecht.button

utrecht.button.column-gap

PR om deze toe te voegen in code: nl-design-system/utrecht#2315

utrecht.link

utrecht.link.column-gap

Deze bestaat nog niet, er is geen built-in icon support bij Utrecht links denk ik.

utrecht.link.focus.background-color

Misschien maar implementeren in code als deze nog niet bestaat.

utrecht.radio-button

utrecht.radio-button.checked.disabled.background-color
utrecht.radio-button.checked.disabled.border-color
utrecht.radio-button.checked.disabled.color

TODO: Uitzoeken

utrecht.select

utrecht.select.font-weight

Uitzoeken: hebben form-control/textbox/textarea ook font-weight? dan hier ook toevoegen

utrecht.table

utrecht.table.header-cell.line-height
utrecht.table.header-cell.font-family
utrecht.table.data-cell.color
utrecht.table.data-cell.font-family
utrecht.table.data-cell.font-weight
utrecht.table.data-cell.line-height
utrecht.table.data-cell.font-size
utrecht.table.footer.border-block-end-width
utrecht.table.footer.border-block-end-color
utrecht.table.footer.background-color
utrecht.table.row.background-color
utrecht.table.footer-cell.font-weight
utrecht.table.footer-cell.font-size
utrecht.table.footer-cell.color
utrecht.table.footer-cell.font-family
utrecht.table.footer-cell.line-height
utrecht.table.container.box-inline-end-shadow
utrecht.table.container.box-inline-start-shadow

utrecht.textarea

utrecht.textarea.focus.border-width
utrecht.textarea.hover.background-color
utrecht.textarea.hover.border-color
utrecht.textarea.hover.color
utrecht.textarea.hover.border-width
utrecht.textarea.font-weight

utrecht.textbox

utrecht.textbox.font-weight
utrecht.textbox.focus.border-width
utrecht.textbox.hover.border-width
utrecht.textbox.hover.background-color
utrecht.textbox.hover.border-color
utrecht.textbox.hover.color

utrecht.unordered-list

utrecht.unordered-list.color
utrecht.unordered-list.marker.border-color
utrecht.unordered-list.font-family
utrecht.unordered-list.font-weight

🤔 hoe hebben markers borders? Denk dat we utrecht.unordered-list.marker.border-color kunnen verwijderen? (Nog niet in Figma gekeken)

[Robbert]

Het gaat de goede kant op, van 47 naar 19:

Theme tokens: 503
Component tokens: 1131
Theme tokens that are unknown: 19
Theme tokens that can be validated: 484
Theme tokens that are unknown:
utrecht.pointer-target.min-size 🐛 zit per ongeluk niet in de linter
utrecht.button.column-gap 🔜 https://github.com/nl-design-system/utrecht/pull/2315
utrecht.link.focus.background-color 🔜 ik maak een PR
utrecht.number-badge.border-width 🔜 https://github.com/nl-design-system/utrecht/pull/2482
utrecht.number-badge.border-color 🔜 https://github.com/nl-design-system/utrecht/pull/2482
utrecht.table.footer.background-color 🔜 ik maak een PR om deze toe te voegen
utrecht.table.footer.color 🔜 ik maak een PR om deze toe te voegen
utrecht.select.invalid.border-block-end-width 🔜 https://github.com/nl-design-system/utrecht/pull/2474
utrecht.textarea.invalid.border-block-end-width 🔜 https://github.com/nl-design-system/utrecht/pull/2474
utrecht.textbox.invalid.border-block-end-width 🔜 https://github.com/nl-design-system/utrecht/pull/2474

utrecht.radio-button.checked.disabled.background-color ✨ feature request: https://github.com/nl-design-system/utrecht/issues/2484
utrecht.radio-button.checked.disabled.border-color ✨ feature request: https://github.com/nl-design-system/utrecht/issues/2484
utrecht.radio-button.checked.disabled.color ✨ feature request: https://github.com/nl-design-system/utrecht/issues/2484

utrecht.feedback.warning.background-color
utrecht.feedback.warning.border-color
utrecht.feedback.warning.color
utrecht.link.column-gap  ✨ feature request: https://github.com/nl-design-system/utrecht/issues/2485
utrecht.table.row.background-color 🔥 verwijderen in Figma
utrecht.textbox.min-block-size