Gå til hovedinnhold
TOKENS

Generelt om fargetokens

Hvorfor har vi egentlig fargetokens? Er du usikker på hvordan komme i gang? Her kommer en kort introduksjon.

Hvorfor trenger vi fargetokens?

Fargetokens er en viktig grunnsten i et designsystem. Ved å lage et sett med farger og fargenavn er tanken at det skal bli lettere for alle å forholde seg til Enturs farger på en korrekt måte. Bruken av tokens gjør det også enklere å vedlikeholde og videreutvikle fargesettet som brukes. Eksempelvis hvis farger skal oppdateres kan det gjøres uten at designsystem-brukere må endre noe på sin side.

Med standardiserte fargetokens blir det enkelt og tydelig å endre tilknyttede referansefarger til tokens. Å bruke ulike fargenavn eller fargeverdier fører til unødvendig ekstra arbeid både ved implementering og bytting av farger i systemet. Dette resulterer i redusert effektivitet og manglende standardisering, spesielt med flere brukere involvert.

illustrasjon av at utvikler A bruker navnet Lavender90 og utvikler B bruker navnet ColorBlue men begge er den samme fargen.
illustrasjon av at Lavender 90-fargen ved navn Fill.Primary.Default er den man skal bruke i komponenter.

Tokensstruktur

Tokensstrukturen inneholder flere lag av fargetokens. Hvert lag i strukturen kommuniserer informasjon om hva fargen representerer, hvordan den skal brukes, og hvor den skal brukes i designsystemet.

Primitive tokens

eksempel på en primitive token er lavender 90
Det grunnleggende laget består av «primitive tokens», som representerer fargene i fargepaletten.

Semantic tokens

eksempel på semantic token er fill-primary-default for bakgrunnen til en firkant, stroke-accent for en strek, text-accent for tekst og shape-accent for et hjerteikon
«Semantic tokens» gir en tydeligere mening til fargene ved å tildele dem betydningsfulle navn.

Component tokens

eksempel på en komponent-token er button-primary-fill for bakgrunnen til designsystemets knapp
«Component tokens» spesifiserer fargene som brukes på designsystemets komponenter.

Base tokens

eksempel på base-tokens er base-frame-subsueded som er en dempet farge for en bakgrunn til en firkant
«Base tokens» spesifiserer fargene som brukes på generelle elementer. Bruke disse på egne komponenter.

Bruk fargetokens

Hvilken tokens skal jeg bruke?

Bruker du kun designsystemets komponenter vil du ikke ha behov for tokens.

Om du skal lage noe vi ikke tilbyr via komponenter skal du bruke base-tokens, se oversikt over base-tokens. Base-fargene har støtte for dark-mode. Disse er bygget på «semantic colors» slik at det skal være tydelig hvordan de skal brukes, og hvor de skal brukes.

Som allerede nevnt er komponentene i designsystemet integrert med fargetokens, så det eneste som gjenstår for deg er å implementere base-tokens i resten av designløsningen.

Eksempel i grensesnitt

eksemplet viser at background skal brukes for bakgrunn, shape skal brukes på en sirkel, text skal brukes på tekst, og stroke kan brukes på en skillelinje

Eksempel komponentnivå

eksemplet viser navnene på base-tokens. For eksempel for bakgrunn kan du bruke frame-default, for border kan du bruke stroke-subduedalt, for ikon kan du bruke shape-default, for titteltekst kan du bruke text-default og for subtekst kan du bruke text-subdued
I eksemplet over ser du hvordan du kan lage din egen komponent ved å ta i bruk base-tokens.
Hva om base-tokens ikke dekker ditt behov?
Om designsystemets komponenter eller base-farger har mangler ønsker vi at du tar kontakt med oss slik at vi kan samarbeide om utvidelser av designsystemets komponent- og base-farger.

Bruk i Figma

Fargetokensfiler finner du under Assets-menyen i Figma, hvor de enkelt kan slås av eller på etter behov. Vi anbefaler å aktivere fargetokensfilen «Base» først når du bygger design eller grensesnitt. Hvis du skulle ha behov for andre fargetokens ta kontakt med oss.

Assets meny

I assets meny aktiverer vi Tokens-Base colors

Property meny

velg Token-base i property nedtrekksmenyen
Dette bidrar til å unngå for mange fargetokens i property menyen, slik at du kan fokusere bare på det som er nødvendig for gjeldende design.

Bruk i Kode

Alle tokens er tilgjengelige gjennom Tokens-pakken. Tokens er organisert i separate filer, dette gjør det enkelt å finne og bruke de spesifikke tokens du trenger.

For eksempel, hvis du arbeider med CSS, vil du finne følgende filstruktur i Tokens-pakken:

@entur/tokens/dist/
├── base.css 
├── primitive.css 
├── semantic.css 
├── data.css 
└── transport.css

Eksempel på importering av tokens i CSS og bruk av dem:

@import '@entur/tokens/dist/base.css';

.background {
  background-color: var(--basecolors-frame-default);
}

Tokens i SASS og LESS aksesseres med henholdsvis $ og @, og er semantisk delt opp ved - (bindestrek). CSS prefikses med to bindestreker. Tokens i Javascript aksesseres som nestede objekter.

Rediger denne siden på Bitbucket