Tokens

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.

Tokens är tillgängliga som typescriptvariabler via:

import { variables } from '@midas-ds/components/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.

import '@midas-ds/components/variables.css'

.my-class {
  color: var(--midas-text-on-color); /* textOnColor */
}

Färgtokens

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. Våra färgtokens är uppdelade i två grupper: referenstokens och semantiska tokens.

Referenstokens

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. Där används istället semantiska tokens.

Semantiska tokens

Semantiska tokens är kopplade 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 har två referenstokens kopplade till sig, en för ljust och en för mörk läge.

Lager

Vissa av våra tokens är kopplade till ett specifikt lager, vilket indikeras av att de slutar med 01 eller 02. Tokens med samma nummer används alltid tillsammans när vi bygger komponenter. Numreringen används också för att avgöra vilka tokens som ska användas beroende på vilket lager en komponent ligger på. Tokens som slutar på 01 (t.ex. field01) används när en komponent ligger på background och tokens som slutar på 02 används när komponenten ligger på layer01.

I ljust läge växlar färgerna mellan vitt och grått för varje lager medan varje nytt lager i mörkt läge får en ljusare grå nyans än det föregående, se exempel nedan.

background

layer01

layer02

background

layer01

layer02

Lista över semantiska tokens

Bakgrunder

backgroundBase

Standardbakgrund för våra applikationer

Light:

#fff

Dark:

#171717

backgroundHover

Hoverfärg för bakgrund

Light:

#e6e6e6

Dark:

#212121

backgroundInverse

Bakgrund eller element i med hög kontrast

Light:

#171717

Dark:

#f2f2f2

Lager

01

layer01Base

Yta som används på background. Sekundär bakgrundsfärg

Light:

#f2f2f2

Dark:

#262626

layer01Hover

Hover state för layer01

Light:

#e6e6e6

Dark:

#333

layer01Selected

Selected state för layer01

Light:

#d9d9d9

Dark:

#383838

layer01SelectedHover

Hover state för layerSelected01

Light:

#ccc

Dark:

#474747

02

layer02Base

Yta som ligger på layer01

Light:

#fff

Dark:

#383838

layer02Hover

Hover state för layer02

Light:

#e6e6e6

Dark:

#474747

layer02Selected

Selected state för layer02

Light:

#d9d9d9

Dark:

#525252

layer02SelectedHover

Hover state för layerSelected02

Light:

#ccc

Dark:

#5d5d5d

Accentfärger

01

layerAccent01Base

Accentfärg som används tillsammans med layer01

Light:

#d9d9d9

Dark:

#383838

layerAccent01Hover

Hover state för layerAccent01

Light:

#ccc

Dark:

#474747

layerAccent01Selected

Selected state för layerAccent01

Light:

#bfbfbf

Dark:

#525252

02

layerAccent02Base

Accentfärg som används tillsammans med layer02

Light:

#f2f2f2

Dark:

#262626

layerAccent02Hover

Hover state för layerAccent02

Light:

#e6e6e6

Dark:

#333

layerAccent02Selected

Selected state för layerAccent02

Light:

#d9d9d9

Dark:

#383838

Varumärke

brandPrimary

Primära röda färgen

Light:

#b90835

Dark:

#b90835

Kantlinje

color

borderColorPrimary

Kantlinje med hög kontrast, används med field01

Light:

#171717

Dark:

#f2f2f2

borderColorSecondary

Kantlinje med medelhög kontrast

Light:

#737373

Dark:

#8c8c8c

borderColorSubtle

Kantlinje med låg kontrast

Light:

#bfbfbf

Dark:

#383838

borderColorTertiary

Primärblå kantlinje

Light:

#143c50

Dark:

#2e7ca5

borderColorDisabled

Kantlinje för disabled state

Light:

#bfbfbf

Dark:

#525252

borderWidth

Value: 1px

Fält

01

field01Base

Standardfärg för fält, som ligger på background

Light:

#f2f2f2

Dark:

#262626

field01Hover

Hover state för field01

Light:

#e6e6e6

Dark:

#333

field01Active

Active state för field01

Light:

#d9d9d9

Dark:

#383838

02

field02Base

Sekundfärfärg för fält, som ligger på layer01

Light:

#fff

Dark:

#383838

field02Hover

Hover state för field02

Light:

#e6e6e6

Dark:

#474747

field02Active

Active state för field02

Light:

#d9d9d9

Dark:

#525252

fieldDisabled

Disabled state för fält

Light:

#f2f2f2

Dark:

#262626

Ikoner

iconPrimary

Primär ikonfärg

Light:

#171717

Dark:

#f2f2f2

iconSecondary

Sekundär ikonfärg

Light:

#525252

Dark:

#a6a6a6

iconTertiary

Light:

#143c50

Dark:

#f2f2f2

iconInverse

Inverterad ikonfärg. Ljus ikon i ljust läge och mörk ikon i mörkt läge

Light:

#fff

Dark:

#171717

iconOnColor

Ikonfärg på färgade ytor som inte är lager

Light:

#fff

Dark:

#fff

iconDisabled

Ikoner som är disabled

Light:

#bfbfbf

Dark:

#525252

iconSuccess

Ikonfär för success state

Light:

#008d3c

Dark:

#008d3c

iconInfo

Ikonfärg för informationsikoner

Light:

#06c

Dark:

#06c

iconWarning

Ikonfärg för varningsikoner och invalid state

Light:

#e62323

Dark:

#e62323

iconImportant

Ikonfärg för viktig information

Light:

#fdb813

Dark:

#fdb813

Länkar

linkEnabled

Primärlänkfärg

Light:

#29698C

Dark:

#6CA3C0

linkHover

Hover state för länkar

Light:

#143c50

Dark:

#94BCD1

linkPressed

Active/pressed state för länkar

Light:

#171717

Dark:

#abcbdb

linkVisited

Färg för besökta länkar

Light:

#954b95

Dark:

#b46ab4

Notifikationer

border

supportBorderSuccess

Kantlinje för success-notifikationer

Light:

#008d3c

Dark:

#008d3c

supportBorderInfo

Kantlinje för notifikationer med information

Light:

#06c

Dark:

#06c

supportBorderImportant

Kantlinje för notifikationer med viktig information

Light:

#fdb813

Dark:

#fdb813

supportBorderWarning

Kantlinje för notifikationer med varningar

Light:

#e62323

Dark:

#e62323

background

supportBackgroundSuccess

Bakgrund för success-notifikationer

Light:

#d5f2d9

Dark:

#262626

supportBackgroundSuccessHover

Hoverbakgrund för success-notifikationer

Light:

#bae5c5

Dark:

#333

supportBackgroundInfo

Bakgrund för notifikationer med information

Light:

#eaf2f6

Dark:

#262626

supportBackgroundInfoHover

Hoverbakgrund för notifikationer med information

Light:

#d5e5ed

Dark:

#333

supportBackgroundImportant

Bakgrund för notifikationer med viktig information

Light:

#fff8e1

Dark:

#262626

supportBackgroundImportantHover

Hoverbakgrund för notifikationer med viktig information

Light:

#FFEBA8

Dark:

#333

supportBackgroundWarning

Bakgrund för notifikationer med varningar

Light:

#ffdfdf

Dark:

#262626

supportBackgroundWarningHover

Hoverbakgrund för notifikationer med varningar

Light:

#fcc8c8

Dark:

#333

Text

textPrimary

Primär textfärg. Rubriker och brödtext.

Light:

#171717

Dark:

#f2f2f2

textSecondary

Sekundär textfärg

Light:

#525252

Dark:

#a6a6a6

textTertiary

Textfärg på tertiär knapp

Light:

#143c50

Dark:

#f2f2f2

textOnColor

Textfärg på färgade bakgrunder som inte är lager

Light:

#fff

Dark:

#fff

textInverse

Inverterad textfärg

Light:

#f2f2f2

Dark:

#171717

textDisabled

Textfärg för disabled state

Light:

#bfbfbf

Dark:

#525252

textWarning

Textfärg för felmeddelanden

Light:

#e62323

Dark:

#eb4e4e

textPlaceholder

Textfärg för platshållare

Light:

#a6a6a6

Dark:

#525252

Knappar

background

primary

buttonBackgroundPrimaryBase

Färg på primärknapp

Light:

#143c50

Dark:

#2e7ca5

buttonBackgroundPrimaryHover

Hover state på primärknapp

Light:

#25607f

Dark:

#25607f

buttonBackgroundPrimaryActive

Active state för primärknapp

Light:

#2e7ca5

Dark:

#143c50

secondary

buttonBackgroundSecondaryBase

Färg på sekundärknapp

Light:

#fff

Dark:

#171717

buttonBackgroundSecondaryHover

Hover state på sekundärknapp

Light:

#e6e6e6

Dark:

#212121

buttonBackgroundSecondaryActive

Active state för sekundärknapp

Light:

#d9d9d9

Dark:

#262626

tertiary

buttonBackgroundTertiaryHover

Hover state för tertiär knapp

Light:

#e6e6e6

Dark:

#212121

buttonBackgroundTertiaryActive

Active state för tertiär knapp

Light:

#d9d9d9

Dark:

#262626

danger

buttonBackgroundDangerBase

Färg på danger knapp

Light:

#e62323

Dark:

#e62323

buttonBackgroundDangerHover

Hover state för danger knapp

Light:

#bc1d1d

Dark:

#bc1d1d

buttonBackgroundDangerActive

Active state för danger knapp

Light:

#7d1313

Dark:

#7d1313

buttonBackgroundDisabled

Disabled state för knappar

Light:

#f2f2f2

Dark:

#262626

border

buttonBorderSecondary

Kantfärg för sekundärknapp

Light:

#143c50

Dark:

#f2f2f2

icon

buttonIconHover

Light:

#0000001a

Dark:

#ffffff1a

buttonIconActive

Active state för ikoner

Light:

#00000033

Dark:

#ffffff33

Meny

item

background

menuItemBackgroundHover

Bakgrundsfärg för menu vid hover

Light:

#e6e6e6

Dark:

#212121

menuItemBackgroundSelected

Bakgrundsfärg för aktiv menu

Light:

#f2f2f2

Dark:

#262626

text

menuTextSectionHeader

Light:

#29698C

Dark:

#5897b8

Skeleton

skeleton01

Standardfärg för skeleton

Light:

#f2f2f2

Dark:

#262626

skeleton02

Färg som används när Skeleton ligger på bakgrundsfärgen `layer01` eller `light-dark(#f2f2f2,#262626)`

Light:

#d9d9d9

Dark:

#383838