Jøkul 🏳️‍🌈
Fundamenter

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, eller white. Disse heter som regel noe som ikke spesifiserer bruk, siden de er generiske. For eksempel lager vi color-white-00 med 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.

Hvordan design tokens brukes på ulike plattformer
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.