Här kan du läsa om hur vi använder färger i Midas. Vi använder i huvudsak en gråskala och en blå skala som grund för
våra gränssnitt. Gråskalan används främst för bakgrunder, ramar och typografi, medan den blå skalan fungerar som vår
primära accentfärg för interaktiva element. Genom att bygga gränssnitt med dessa två paletter skapar vi ett tydligt,
tillgängligt och konsekvent uttryck i hela designsystemet. För att säkerställa konsekvent användning av färger använder vi designtokens, variabler som representerar färgernas syfte
snarare än deras exakta värde.
Färgtokens är tillgängliga som typescriptvariabler via:
import{ variables }from'@midas-ds/theme'
Det går också att använda CSS var(--variable-name) genom att importera theme.css. Mer information om
hur du använder Midas tokens i CSS hittar du under Installera Midas.
Referenstokens är direkt kopplade till färger och används för att bygga upp våra paletter. Referenstokens används
endast som byggstenar och ska inte refereras till i koden.
Semantiska tokens refererar till referenstokens och är döpta för att beskriva var de bör användas. De flesta börjar
med ett prefix som anger deras syfte, t.ex "layer", "text" eller "border". Varje semantisk token refererar till två referenstokens, en för ljust och en för mörkt läge.
Vissa färgtokens är kopplade till ett specifikt lager, vilket indikeras av att de har 01 eller 02 i namnet. Numreringen används för att avgöra
vilka tokens som ska användas beroende på vilket lager en komponent ligger på. Tokens som har 01 i namnet (t.ex. field01Base)
används när en komponent ligger på backgroundBase och tokens som har 02 i namnet (t.ex. field02Base) används när komponenten ligger på layer01Base.
I ljust läge är varannat lager vitt och varannat grått. I mörkt läge blir varje lager ljusare, se exempel nedan.