Farger

I v3.0 av designsystemet har vi gjort store endringer til hvordan vi håndterer farger. Vi skal forklare oppsettet og hvordan det påvirker deg.

Nytt fargesystem

Fargene er nå koblet mye tettere med frontend enn de var tidligere. Nå synkroniseres farger fra Figma direkte med GitHub, som deretter brukes i frontend som variabler. Det betyr at vi bruker samme navn på farger i Figma og i kode.

Den andre store endringen er at vi har 2 nivåer av farger. Grunnen til at vi har 2 nivåer er for å gjøre fargehåndtering mer fleksibelt og robust. Vi vil gjøre det enklere å justere farger uten merarbeid for deg. Vi vil også gjøre oss klare til å bruke themes (Themes = tema, for å kunne endre uttrykket til en tjeneste. Eks. light og dark).

Som du ser i modellen, er nivå 1 vanlige fargenavn. Fargene i nivå 1 har ingen intensjon, det er kun farger. Eks. blue-500. Nivå 2 gir fargene en intensjon. Dette er det semantiske laget hvor fargene navngis etter hvordan de skal brukes. Eks. interaction-default. Nivå 2 er linket til farger fra nivå 1. I dette eksemplet betyr det at interaction-default bruker blue-500. På denne måten klarer vi å vedlikeholde fargene ganske enkelt, og det gjør det mulig å bytte theme uten å endre fargenavn. For eksempel så kan blue-500 være for mørk om man bytter til dark theme. Da kan vi endre det slik at interaction-default bruker blue-400 i dark theme. Du vil fortsatt bruke interaction-default, men vi kan endre hvilken farge den linker til når vi endrer theme. Ganske smooth.

Farger i bruk