Tokens
Tokens er grunnleggende byggeklosser som representerer designvalg vi bruker i løsningene våre.
Hva er tokens?
Tokens er et felles språk for designbeslutninger på alt fra farger til avstander. De gjør det enkelt å skape et helhetlig uttrykk på tvers, som oppdaterer seg automatisk.
For designere og utviklere i teamene er det viktig å bruke eksisterende tokens for lokale komponenter også.
Struktur
For alle praktiske formål kan man tenke på tokens som at de er delt i to lag:
- Baseverdier inneholder grunnverdiene, for eksempel fargen
#ffffff, ellerwhite. Disse heter som regel noe som ikke spesifiserer bruk, siden de er generiske. For eksempel lager vicolor-white-00med verdien#ffffff. Dette abstraherer verdien på en måte som gjør det mulig å endre fargeskalaen senere uten at det må oppdateres i alle komponentene spesifikt. Dette er også grunnlaget for merkevaretilpasningene vi gjør fra versjon 5. - Semantiske verdier peker til baseverdiene og gir dem navn som beskriver bruken deres, for eksempel
color-background-page. I dette eksempelet kan vi da peke på dette tokenet videre påcolor-white-00, og dermed oppdatere dem separat uten å ødelegge noen koblinger. Det er de semantiske verdiene brukerne av designsystemet skal forholde seg til.
Design tokens er navngitt med en konsekvent struktur, som forteller hvilken kategori, element og variant eller tilstand verdien skal brukes til.
Figma | CSS | SCSS | Javascript |
|---|---|---|---|
text/default | var(--jkl-color-text-default) | jkl.$color-text-default | color.text.default |
Du kan lese mer om hvilke tokens vi har på de respektive sidene (lenke lenke lenke). og hvordan du bruker de på den siden... lenke lenke lenke.