Farger

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.