Hoppa till huvudinnehåll

Färger

Deprecated

Vi har bytt system för att hantera tokens till style-dictionary och passat på att uppdatera en del variabelnamn, både CSS-variabler och typescriptvariabler. Vi fortsätter att supporta semantics och theme ytterligare någon version men var förberedda på att detta kommer att bli borttaget i en framtida version. Nytt system för tokens finns dokumenterat i 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 { semantic } 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/theme.css'
.my-class {
  color: var(--semantic-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​

background
Standardbakgrund för våra applikationer
Ljust: #fffMörkt: #171717
backgroundHover
Hoverfärg för bakgrund
Ljust: #e6e6e6Mörkt: #212121
backgroundInverse
Bakgrund eller element i med hög kontrast
Ljust: #171717Mörkt: #f2f2f2

Lager​

layer01
Yta som används på background. Sekundär bakgrundsfärg
Ljust: #f2f2f2Mörkt: #262626
layerHover01
Hover state för layer01
Ljust: #e6e6e6Mörkt: #333
layerSelected01
Selected state för layer01
Ljust: #d9d9d9Mörkt: #383838
layerSelectedHover01
Hover state för layerSelected01
Ljust: #cccMörkt: #474747
layer02
Yta som ligger på layer01
Ljust: #fffMörkt: #383838
layerHover02
Hover state för layer02
Ljust: #e6e6e6Mörkt: #474747
layerSelected02
Selected state för layer02
Ljust: #d9d9d9Mörkt: #525252
layerSelectedHover02
Hover state för layerSelected02
Ljust: #cccMörkt: #5d5d5d

Accentfärger​

layerAccent01
Accentfärg som används tillsammans med layer01
Ljust: #d9d9d9Mörkt: #383838
layerAccentHover01
Hover state för layerAccent01
Ljust: #cccMörkt: #474747
layerAccentSelected01
Selected state för layerAccent01
Ljust: #bfbfbfMörkt: #525252
layerAccent02
Accentfärg som används tillsammans med layer02
Ljust: #f2f2f2Mörkt: #262626
layerAccentHover02
Hover state för layerAccent02
Ljust: #e6e6e6Mörkt: #333
layerAccentSelected02
Selected state för layerAccent02
Ljust: #d9d9d9Mörkt: #383838

Varumärke​

brandPrimary
Primära röda färgen
Ljust: #b90835Mörkt: #b90835
logoPrimary
Färg på logotypen
Ljust: #b90835Mörkt: #fff

Kantlinje​

borderPrimary
Kantlinje med hög kontrast, används med field01
Ljust: #171717Mörkt: #f2f2f2
borderSecondary
Kantlinje med medelög kontrast
Ljust: #737373Mörkt: #8c8c8c
borderSubtle
Kantlinje med låg kontrast
Ljust: #bfbfbfMörkt: #383838
borderTertiary
Primärblå kantlinje
Ljust: #143c50Mörkt: #2e7ca5
borderDisabled
Kantlinje för disabled state
Ljust: #bfbfbfMörkt: #525252

Fält​

field01
Standardfärg för fält, som ligger på background
Ljust: #f2f2f2Mörkt: #262626
fieldHover01
Hover state för field01
Ljust: #e6e6e6Mörkt: #333
fieldActive01
Active state för field01
Ljust: #d9d9d9Mörkt: #383838
field02
Sekundfärfärg för fält, som ligger på layer01
Ljust: #fffMörkt: #383838
fieldHover02
Hover state för field02
Ljust: #e6e6e6Mörkt: #474747
fieldActive02
Active state för field02
Ljust: #d9d9d9Mörkt: #525252
fieldDisabled
Disabled state för fält
Ljust: #f2f2f2Mörkt: #262626

Ikoner​

iconPrimary
Primär ikonfärg
Ljust: #171717Mörkt: #f2f2f2
iconSecondary
Sekundär ikonfärg
Ljust: #525252Mörkt: #a6a6a6
iconInverse
Inverterad ikonfärg. Ljus ikon i ljust läge och mörk ikon i mörkt läge
Ljust: #fffMörkt: #171717
iconOnColor
Ikonfärg på färgade ytor som inte är lager
Ljust: #fffMörkt: #fff
iconDisabled
Ikoner som är disabled
Ljust: #bfbfbfMörkt: #525252
iconSuccess
Ikonfär för success state
Ljust: #008d3cMörkt: #008d3c
iconInfo
Ikonfärg för informationsikoner
Ljust: #06cMörkt: #06c
iconImportant
Ikonfärg för viktig information
Ljust: #fdb813Mörkt: #fdb813
iconWarning
Ikonfärg för varningsikoner och invalid state
Ljust: #e62323Mörkt: #e62323

Länkar​

linkEnabled
Primärlänkfärg
Ljust: #29698CMörkt: #6CA3C0
linkHover
Hover state för länkar
Ljust: #143c50Mörkt: #94BCD1
linkPressed
Active/pressed state för länkar
Ljust: #171717Mörkt: #abcbdb
linkVisited
Färg för besökta länkar
Ljust: #954b95Mörkt: #b46ab4

Notifikationer​

supportBorderSuccess
Kantlinje för success-notifikationer
Ljust: #008d3cMörkt: #008d3c
supportBorderInfo
Kantlinje för notifikationer med information
Ljust: #06cMörkt: #06c
supportBorderImportant
Kantlinje för notifikationer med viktig information
Ljust: #fdb813Mörkt: #fdb813
supportBorderWarning
Kantlinje för notifikationer med varningar
Ljust: #e62323Mörkt: #e62323
supportBackgroundSuccess
Bakgrund för success-notifikationer
Ljust: #d5f2d9Mörkt: #262626
supportBackgroundSuccessHover
Hoverbakgrund för success-notifikationer
Ljust: #bae5c5Mörkt: #333
supportBackgroundInfo
Bakgrund för notifikationer med information
Ljust: #eaf2f6Mörkt: #262626
supportBackgroundImportant
Bakgrund för notifikationer med viktig information
Ljust: #fff8e1Mörkt: #262626
supportBackgroundWarning
Bakgrund för notifikationer med varningar
Ljust: #ffdfdfMörkt: #262626
supportBackgroundWarningHover
Hoverbakgrund för notifikationer med varningar
Ljust: #fcc8c8Mörkt: #333

Text​

textPrimary
Primär textfärg. Rubriker och brödtext.
Ljust: #171717Mörkt: #f2f2f2
textSecondary
Sekundär textfärg
Ljust: #525252Mörkt: #a6a6a6
textTertiary
Textfärg på tertiär knapp
Ljust: #143c50Mörkt: #f2f2f2
textOnColor
Textfärg på färgade bakgrunder som inte är lager
Ljust: #fffMörkt: #fff
textInverse
Inverterad textfärg
Ljust: #f2f2f2Mörkt: #171717
textDisabled
Textfärg för disabled state
Ljust: #bfbfbfMörkt: #525252
textWarning
Textfärg för felmeddelanden
Ljust: #e62323Mörkt: #eb4e4e
textPlaceholder
Textfärg för platshållare
Ljust: #a6a6a6Mörkt: #525252

Knappar​

buttonBackgroundPrimary
Färg på primärknapp
Ljust: #143c50Mörkt: #2e7ca5
buttonBackgroundPrimaryHover
Hover state på primärknapp
Ljust: #25607fMörkt: #25607f
buttonBackgroundPrimaryActive
Active state för primärknapp
Ljust: #2e7ca5Mörkt: #143c50
buttonBackgroundSecondary
Färg på sekundärknapp
Ljust: #fffMörkt: #171717
buttonBackgroundSecondaryHover
Hover state på sekundärknapp
Ljust: #e6e6e6Mörkt: #212121
buttonBackgroundSecondaryActive
Active state för sekundärknapp
Ljust: #d9d9d9Mörkt: #262626
buttonBackgroundTertiaryHover
Hover state för tertiär knapp
Ljust: #e6e6e6Mörkt: #212121
buttonBackgroundTertiaryActive
Active state för tertiär knapp
Ljust: #d9d9d9Mörkt: #262626
buttonBackgroundDanger
Färg på danger knapp
Ljust: #e62323Mörkt: #e62323
buttonBackgroundDangerHover
Hover state för danger knapp
Ljust: #bc1d1dMörkt: #bc1d1d
buttonBackgroundDangerActive
Active state för danger knapp
Ljust: #7d1313Mörkt: #7d1313
buttonBackgroundDisabled
Disabled state för knappar
Ljust: #f2f2f2Mörkt: #262626
buttonBorderSecondary
Kantfärg för sekundärknapp
Ljust: #143c50Mörkt: #f2f2f2

Meny​

menuItemBackgroundHover
Bakgrundsfärg för menu vid hover
Ljust: #e6e6e6Mörkt: #212121
menuItemBackgroundSelected
Bakgrundsfärg för aktiv menu
Ljust: #f2f2f2Mörkt: #262626

Skeleton​

skeleton01
Standardfärg för skeleton
Ljust: #f2f2f2Mörkt: #262626
skeleton02
Färg som används när Skeleton ligger på bakgrundsfärgen `layer01` eller `light-dark(#f2f2f2,#262626)`
Ljust: #d9d9d9Mörkt: #383838