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.
import { semantic } from '@midas-ds/components/theme'
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.
Lista över semantiska tokens
Bakgrunder
background
Standardbakgrund för våra applikationer
Ljust: #ffffffMö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: #333333
layerSelected01
Selected state för layer01
Ljust: #d9d9d9Mörkt: #383838
layerSelectedHover01
Hover state för layerSelected01
Ljust: #ccccccMörkt: #474747
layer02
Yta som ligger på layer01
Ljust: #ffffffMö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: #ccccccMörkt: #5d5d5d
Accentfärger
layerAccent01
Accentfärg som används tillsammans med layer01
Ljust: #d9d9d9Mörkt: #383838
layerAccentHover01
Hover state för layerAccent01
Ljust: #ccccccMö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: #333333
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: #ffffff
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
borderInvalid
Kantlinje för invalid state
Ljust: #e62323Mörkt: #eb4e4e
borderDisabled
Kantlinke 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: #333333
fieldActive01
Active state för field01
Ljust: #d9d9d9Mörkt: #383838
field02
Sekundfärfärg för fält, som ligger på layer01
Ljust: #ffffffMö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
fieldSkeleton
Skeleton 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: #ffffffMörkt: #171717
iconOnColor
Ikonfärg på färgade ytor som inte är lager
Ljust: #ffffffMörkt: #ffffff
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: #0066ccMörkt: #0066cc
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: #2e7ca5Mörkt: #4289ad
linkHover
Hover state för länkar
Ljust: #143c50Mörkt: #5897b8
linkPressed
Active/pressed state för länkar
Ljust: #171717Mörkt: #82b0c9
linkVisited
Färg för besökta länkar
Ljust: #954b95Mörkt: #b46ab4
Notifikationer
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: #ffffffMörkt: #ffffff
textInverse
Inverterad textfärg
Ljust: #f2f2f2Mörkt: #171717
textDisabled
Textfärg för disabled state
Ljust: #bfbfbfMörkt: #525252
textInvalid
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: #ffffffMö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: #b31b1bMörkt: #b31b1b
buttonBackgroundDangerActive
Active state för danger knapp
Ljust: #801313Mörkt: #801313
buttonBackgroundDisabled
Disabled state för knappar
Ljust: #f2f2f2Mörkt: #262626
buttonBackgroundSkeleton
Skeleton state för knappar
Ljust: #f2f2f2Mörkt: #262626
buttonBorderSecondary
Kantfärg för sekundärknapp
Ljust: #143c50Mörkt: #f2f2f2