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/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/theme/variables.css'
.my-class {
color: var(--midas-text-on-color);
}
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
backgroundBase
--midas-background-base
Standardbakgrund för våra applikationer
backgroundHover
--midas-background-hover
Hoverfärg för bakgrund
backgroundInverse
--midas-background-inverse
Bakgrund eller element i med hög kontrast
Lager
01
layer01Base
--midas-layer-01-base
Yta som används på background. Sekundär bakgrundsfärg
layer01Hover
--midas-layer-01-hover
Hover state för layer01
layer01Selected
--midas-layer-01-selected
Selected state för layer01
layer01SelectedHover
--midas-layer-01-selectedHover
Hover state för layerSelected01
02
layer02Base
--midas-layer-02-base
Yta som ligger på layer01
layer02Hover
--midas-layer-02-hover
Hover state för layer02
layer02Selected
--midas-layer-02-selected
Selected state för layer02
layer02SelectedHover
--midas-layer-02-selectedHover
Hover state för layerSelected02
Accentfärger
01
layerAccent01Base
--midas-layerAccent-01-base
Accentfärg som används tillsammans med layer01
layerAccent01Hover
--midas-layerAccent-01-hover
Hover state för layerAccent01
layerAccent01Selected
--midas-layerAccent-01-selected
Selected state för layerAccent01
02
layerAccent02Base
--midas-layerAccent-02-base
Accentfärg som används tillsammans med layer02
layerAccent02Hover
--midas-layerAccent-02-hover
Hover state för layerAccent02
layerAccent02Selected
--midas-layerAccent-02-selected
Selected state för layerAccent02
Varumärke
brandPrimary
--midas-brand-primary
Primära röda färgen
Kantlinje
color
borderColorPrimary
--midas-border-color-primary
Kantlinje med hög kontrast, används med field01
borderColorSecondary
--midas-border-color-secondary
Kantlinje med medelhög kontrast
borderColorSubtle
--midas-border-color-subtle
Kantlinje med låg kontrast
borderColorTertiary
--midas-border-color-tertiary
Primärblå kantlinje
borderColorDisabled
--midas-border-color-disabled
Kantlinje för disabled state
borderWidth
--midas-border-width
Fält
01
field01Base
--midas-field-01-base
Standardfärg för fält, som ligger på background
field01Hover
--midas-field-01-hover
Hover state för field01
field01Active
--midas-field-01-active
Active state för field01
02
field02Base
--midas-field-02-base
Sekundfärfärg för fält, som ligger på layer01
field02Hover
--midas-field-02-hover
Hover state för field02
field02Active
--midas-field-02-active
Active state för field02
fieldDisabled
--midas-field-disabled
Disabled state för fält
Ikoner
iconPrimary
--midas-icon-primary
Primär ikonfärg
iconSecondary
--midas-icon-secondary
Sekundär ikonfärg
iconTertiary
--midas-icon-tertiary
iconInverse
--midas-icon-inverse
Inverterad ikonfärg. Ljus ikon i ljust läge och mörk ikon i mörkt läge
iconOnColor
--midas-icon-onColor
Ikonfärg på färgade ytor som inte är lager
iconDisabled
--midas-icon-disabled
Ikoner som är disabled
iconSuccess
--midas-icon-success
Ikonfär för success state
iconInfo
--midas-icon-info
Ikonfärg för informationsikoner
iconWarning
--midas-icon-warning
Ikonfärg för varningsikoner och invalid state
iconImportant
--midas-icon-important
Ikonfärg för viktig information
iconReadOnly
--midas-icon-readOnly
Ikonfärg för read-only state
Länkar
linkEnabled
--midas-link-enabled
Primärlänkfärg
linkHover
--midas-link-hover
Hover state för länkar
linkPressed
--midas-link-pressed
Active/pressed state för länkar
linkVisited
--midas-link-visited
Färg för besökta länkar
Notifikationer
border
supportBorderSuccess
--midas-support-border-success
Kantlinje för success-notifikationer
supportBorderInfo
--midas-support-border-info
Kantlinje för notifikationer med information
supportBorderImportant
--midas-support-border-important
Kantlinje för notifikationer med viktig information
supportBorderWarning
--midas-support-border-warning
Kantlinje för notifikationer med varningar
background
supportBackgroundSuccess
--midas-support-background-success
Bakgrund för success-notifikationer
supportBackgroundSuccessHover
--midas-support-background-successHover
Hoverbakgrund för success-notifikationer
supportBackgroundInfo
--midas-support-background-info
Bakgrund för notifikationer med information
supportBackgroundInfoHover
--midas-support-background-infoHover
Hoverbakgrund för notifikationer med information
supportBackgroundImportant
--midas-support-background-important
Bakgrund för notifikationer med viktig information
supportBackgroundImportantHover
--midas-support-background-importantHover
Hoverbakgrund för notifikationer med viktig information
supportBackgroundWarning
--midas-support-background-warning
Bakgrund för notifikationer med varningar
supportBackgroundWarningHover
--midas-support-background-warningHover
Hoverbakgrund för notifikationer med varningar
Text
textPrimary
--midas-text-primary
Primär textfärg. Rubriker och brödtext.
textSecondary
--midas-text-secondary
Sekundär textfärg
textTertiary
--midas-text-tertiary
Textfärg på tertiär knapp
textOnColor
--midas-text-onColor
Textfärg på färgade bakgrunder som inte är lager
textInverse
--midas-text-inverse
Inverterad textfärg
textDisabled
--midas-text-disabled
Textfärg för disabled state
textWarning
--midas-text-warning
Textfärg för felmeddelanden
textPlaceholder
--midas-text-placeholder
Textfärg för platshållare
textReadOnly
--midas-text-readOnly
Textfärg för read-only state
Knappar
background
primary
buttonBackgroundPrimaryBase
--midas-button-background-primary-base
Färg på primärknapp
buttonBackgroundPrimaryHover
--midas-button-background-primary-hover
Hover state på primärknapp
buttonBackgroundPrimaryActive
--midas-button-background-primary-active
Active state för primärknapp
secondary
buttonBackgroundSecondaryBase
--midas-button-background-secondary-base
Färg på sekundärknapp
buttonBackgroundSecondaryHover
--midas-button-background-secondary-hover
Hover state på sekundärknapp
buttonBackgroundSecondaryActive
--midas-button-background-secondary-active
Active state för sekundärknapp
tertiary
buttonBackgroundTertiaryHover
--midas-button-background-tertiary-hover
Hover state för tertiär knapp
buttonBackgroundTertiaryActive
--midas-button-background-tertiary-active
Active state för tertiär knapp
danger
buttonBackgroundDangerBase
--midas-button-background-danger-base
Färg på danger knapp
buttonBackgroundDangerHover
--midas-button-background-danger-hover
Hover state för danger knapp
buttonBackgroundDangerActive
--midas-button-background-danger-active
Active state för danger knapp
buttonBackgroundDisabled
--midas-button-background-disabled
Disabled state för knappar
border
buttonBorderSecondary
--midas-button-border-secondary
Kantfärg för sekundärknapp
icon
buttonIconHover
--midas-button-icon-hover
buttonIconActive
--midas-button-icon-active
Active state för ikoner
Meny
item
background
menuItemBackgroundHover
--midas-menu-item-background-hover
Bakgrundsfärg för menu vid hover
menuItemBackgroundSelected
--midas-menu-item-background-selected
Bakgrundsfärg för aktiv menu
text
menuTextSectionHeader
--midas-menu-text-sectionHeader
Skeleton
skeleton01
--midas-skeleton-01
Standardfärg för skeleton
skeleton02
--midas-skeleton-02
Färg som används när Skeleton ligger på bakgrundsfärgen `layer01` eller `light-dark(#f2f2f2,#262626)`