Tokens list
Den här sidan listar alla tillgängliga designtokens i Midas Design System. Dessa tokens kan importeras och användas i dina applikationer via CSS-variabler eller JavaScript.
Typography
Composite Typography
Composite Tokens
Usage:
.my-element { font: var(--midas-typography-body); }typographyBody
--midas-typography-body
Font Family: Inter, sans-serif
Font Size: 1rem
Font Weight: 400
Line Height: 1.25rem
The quick brown fox jumps over the lazy dog
typographyBodySmall
--midas-typography-body-small
Font Family: Inter, sans-serif
Font Size: 0.875rem
Font Weight: 400
Line Height: 1.125rem
The quick brown fox jumps over the lazy dog
typographyDescription
--midas-typography-description
Font Family: Inter, sans-serif
Font Size: 0.875rem
Font Weight: 400
Line Height: 1.125rem
The quick brown fox jumps over the lazy dog
typographyDescriptionSmall
--midas-typography-description-small
Font Family: Inter, sans-serif
Font Size: 0.75rem
Font Weight: 400
Line Height: 1rem
The quick brown fox jumps over the lazy dog
Font Family
typographyFontFamily
--midas-typography-font-family
The quick brown fox jumps over the lazy dog
Font Size
size
typographyFontSize10
--midas-typography-font-size-10
0.75rem
typographyFontSize20
--midas-typography-font-size-20
0.875rem
typographyFontSize30
--midas-typography-font-size-30
1rem
typographyFontSize40
--midas-typography-font-size-40
1.125rem
typographyFontSize50
--midas-typography-font-size-50
1.25rem
typographyFontSize60
--midas-typography-font-size-60
1.5rem
typographyFontSize70
--midas-typography-font-size-70
1.625rem
typographyFontSize80
--midas-typography-font-size-80
2rem
typographyFontSize90
--midas-typography-font-size-90
2.25rem
typographyFontSize100
--midas-typography-font-size-100
2.625rem
Font Weight
weight
typographyWeightThin
--midas-typography-weight-thin
The quick brown fox jumps over the lazy dog
typographyWeightExtraLight
--midas-typography-weight-extraLight
The quick brown fox jumps over the lazy dog
typographyWeightLight
--midas-typography-weight-light
The quick brown fox jumps over the lazy dog
typographyWeightRegular
--midas-typography-weight-regular
The quick brown fox jumps over the lazy dog
typographyWeightMedium
--midas-typography-weight-medium
The quick brown fox jumps over the lazy dog
typographyWeightSemiBold
--midas-typography-weight-semiBold
The quick brown fox jumps over the lazy dog
typographyWeightBold
--midas-typography-weight-bold
The quick brown fox jumps over the lazy dog
typographyWeightExtraBold
--midas-typography-weight-extraBold
The quick brown fox jumps over the lazy dog
typographyWeightBlack
--midas-typography-weight-black
The quick brown fox jumps over the lazy dog
Line Height
lineHeight
typographyLineHeight10
--midas-typography-lineHeight-10
1rem
typographyLineHeight20
--midas-typography-lineHeight-20
1.125rem
typographyLineHeight30
--midas-typography-lineHeight-30
1.25rem
typographyLineHeight40
--midas-typography-lineHeight-40
1.375rem
typographyLineHeight50
--midas-typography-lineHeight-50
1.5rem
typographyLineHeight60
--midas-typography-lineHeight-60
1.75rem
typographyLineHeight70
--midas-typography-lineHeight-70
2rem
typographyLineHeight80
--midas-typography-lineHeight-80
2.25rem
typographyLineHeight90
--midas-typography-lineHeight-90
2.5rem
typographyLineHeight100
--midas-typography-lineHeight-100
3rem
Colors
Base Colors
color
black
colorBlackBase
--midas-color-black-base
Black
colorBlackHover
--midas-color-black-hover
Black hover
colorBlackOpacity5
--midas-color-black-opacity5
Black with 5% opacity
white
colorWhiteBase
--midas-color-white-base
White
colorWhiteHover
--midas-color-white-hover
White hover
colorWhiteOpacity13
--midas-color-white-opacity13
White with 13% opacity
gray
colorGray10
--midas-color-gray-10
colorGray20
--midas-color-gray-20
colorGray30
--midas-color-gray-30
colorGray40
--midas-color-gray-40
colorGray50
--midas-color-gray-50
colorGray60
--midas-color-gray-60
colorGray70
--midas-color-gray-70
colorGray80
--midas-color-gray-80
colorGray90
--midas-color-gray-90
colorGray100
--midas-color-gray-100
colorGray110
--midas-color-gray-110
colorGray120
--midas-color-gray-120
colorGray130
--midas-color-gray-130
colorGray140
--midas-color-gray-140
colorGray150
--midas-color-gray-150
colorGray160
--midas-color-gray-160
colorGray170
--midas-color-gray-170
colorGray180
--midas-color-gray-180
colorGray190
--midas-color-gray-190
colorGray200
--midas-color-gray-200
blue
colorBlue10
--midas-color-blue-10
colorBlue20
--midas-color-blue-20
colorBlue40
--midas-color-blue-40
colorBlue50
--midas-color-blue-50
colorBlue60
--midas-color-blue-60
colorBlue70
--midas-color-blue-70
colorBlue80
--midas-color-blue-80
colorBlue90
--midas-color-blue-90
colorBlue100
--midas-color-blue-100
colorBlue110
--midas-color-blue-110
colorBlue120
--midas-color-blue-120
colorBlue130
--midas-color-blue-130
colorBlue150
--midas-color-blue-150
purple
colorPurple80
--midas-color-purple-80
colorPurple110
--midas-color-purple-110
red
colorRed100
--midas-color-red-100
orange
colorOrange100
--midas-color-orange-100
signalBlue
colorSignalBlue10
--midas-color-signalBlue-10
colorSignalBlue20
--midas-color-signalBlue-20
colorSignalBlue100
--midas-color-signalBlue-100
colorSignalBlue170
--midas-color-signalBlue-170
colorSignalBlue180
--midas-color-signalBlue-180
signalGreen
colorSignalGreen20
--midas-color-signalGreen-20
colorSignalGreen30
--midas-color-signalGreen-30
colorSignalGreen100
--midas-color-signalGreen-100
colorSignalGreen150
--midas-color-signalGreen-150
colorSignalGreen170
--midas-color-signalGreen-170
colorSignalGreen180
--midas-color-signalGreen-180
signalYellow
colorSignalYellow10
--midas-color-signalYellow-10
colorSignalYellow20
--midas-color-signalYellow-20
colorSignalYellow30
--midas-color-signalYellow-30
colorSignalYellow40
--midas-color-signalYellow-40
colorSignalYellow50
--midas-color-signalYellow-50
colorSignalYellow60
--midas-color-signalYellow-60
colorSignalYellow70
--midas-color-signalYellow-70
colorSignalYellow80
--midas-color-signalYellow-80
colorSignalYellow90
--midas-color-signalYellow-90
colorSignalYellow100
--midas-color-signalYellow-100
colorSignalYellow110
--midas-color-signalYellow-110
colorSignalYellow120
--midas-color-signalYellow-120
colorSignalYellow130
--midas-color-signalYellow-130
colorSignalYellow140
--midas-color-signalYellow-140
colorSignalYellow150
--midas-color-signalYellow-150
colorSignalYellow160
--midas-color-signalYellow-160
colorSignalYellow170
--midas-color-signalYellow-170
colorSignalYellow180
--midas-color-signalYellow-180
colorSignalYellow190
--midas-color-signalYellow-190
colorSignalYellow200
--midas-color-signalYellow-200
signalRed
colorSignalRed10
--midas-color-signalRed-10
colorSignalRed20
--midas-color-signalRed-20
colorSignalRed30
--midas-color-signalRed-30
colorSignalRed40
--midas-color-signalRed-40
colorSignalRed50
--midas-color-signalRed-50
colorSignalRed60
--midas-color-signalRed-60
colorSignalRed70
--midas-color-signalRed-70
colorSignalRed80
--midas-color-signalRed-80
colorSignalRed90
--midas-color-signalRed-90
colorSignalRed100
--midas-color-signalRed-100
colorSignalRed110
--midas-color-signalRed-110
colorSignalRed120
--midas-color-signalRed-120
colorSignalRed130
--midas-color-signalRed-130
colorSignalRed140
--midas-color-signalRed-140
colorSignalRed150
--midas-color-signalRed-150
colorSignalRed160
--midas-color-signalRed-160
colorSignalRed170
--midas-color-signalRed-170
colorSignalRed180
--midas-color-signalRed-180
colorSignalRed190
--midas-color-signalRed-190
colorSignalRed200
--midas-color-signalRed-200
Background
background
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
Layers
layer
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
Layer Accents
layerAccent
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
Brand
brand
brandPrimary
--midas-brand-primary
Primära röda färgen
Borders
border
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
1px
Fields
field
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
Icons
icon
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
Links
link
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
Support Colors
support
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
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
Badge
badge
badgeBackground
--midas-badge-background
Calendar
calendar
date
background
calendarDateBackgroundHover
--midas-calendar-date-background-hover
calendarDateBackgroundSelected
--midas-calendar-date-background-selected
calendarDateBackgroundStartRange
--midas-calendar-date-background-startRange
calendarDateBackgroundInRange
--midas-calendar-date-background-inRange
calendarDateBackgroundEndRange
--midas-calendar-date-background-endRange
Logo
logo
logoPrimary
--midas-logo-primary
Färg på logotypen
Menu
menu
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
Sizing & Spacing
Size
size
size10
--midas-size-10
0.125rem
size15
--midas-size-15
0.188rem
size20
--midas-size-20
0.25rem
size30
--midas-size-30
0.375rem
size40
--midas-size-40
0.5rem
size50
--midas-size-50
0.625rem
size60
--midas-size-60
0.75rem
size70
--midas-size-70
0.875rem
size75
--midas-size-75
0.938rem
size80
--midas-size-80
1rem
size90
--midas-size-90
1.25rem
size100
--midas-size-100
1.5rem
size110
--midas-size-110
1.75rem
size120
--midas-size-120
2rem
size130
--midas-size-130
2.5rem
size140
--midas-size-140
2.75rem
size150
--midas-size-150
3rem
size00
--midas-size-00
0rem
size05
--midas-size-05
0.063rem
Spacing
spacing
spacing10
--midas-spacing-10
0.125rem
spacing20
--midas-spacing-20
0.25rem
spacing30
--midas-spacing-30
0.5rem
spacing40
--midas-spacing-40
0.75rem
spacing50
--midas-spacing-50
1rem
spacing60
--midas-spacing-60
1.5rem
spacing70
--midas-spacing-70
2rem
spacing80
--midas-spacing-80
2.5rem
spacing90
--midas-spacing-90
3rem
spacing100
--midas-spacing-100
4rem
spacing110
--midas-spacing-110
5rem
spacing120
--midas-spacing-120
6rem
spacingXsmall
--midas-spacing-xsmall
0.25rem
spacingSmall
--midas-spacing-small
0.5rem
spacingMedium
--midas-spacing-medium
1rem
spacingLarge
--midas-spacing-large
1.5rem
spacingXlarge
--midas-spacing-xlarge
2rem
Layout
Window Sizes
windowSizes
windowSizesSm
--midas-windowSizes-sm
480px
windowSizesMd
--midas-windowSizes-md
768px
windowSizesLg
--midas-windowSizes-lg
1024px
windowSizesXl
--midas-windowSizes-xl
1280px
Breakpoints
breakpoints
breakpointsXs
--midas-breakpoints-xs
(max-width: calc(480px - 1px))
breakpointsSm
--midas-breakpoints-sm
(min-width: 480px)
breakpointsMd
--midas-breakpoints-md
(min-width: 768px)
breakpointsLg
--midas-breakpoints-lg
(min-width: 1024px)
breakpointsXl
--midas-breakpoints-xl
This is the largest breakpoint
(min-width: 1280px)
Interactive Elements
Buttons
button
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
States
state
focusContrastMode
stateFocusContrastModeOutline
--midas-state-focusContrastMode-outline
Outline style for focus ring when Windows High Contrast (forced-colors) mode is active.
2px
stateFocusContrastModeOffset
--midas-state-focusContrastMode-offset
Outline offset for focus ring when Windows High Contrast (forced-colors) mode is active..
2px
stateFocus
--midas-state-focus
Focus style used when the component is focused (box-shadow).
0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white)
stateFocusInset
--midas-state-focusInset
Inset variant of the focus ring (box-shadow inset).
inset 0 0 0 2px light-dark(black, white), inset 0 0 0 4px light-dark(white, black)
Skeleton
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)`
Motion
Transitions
transition
duration
transitionDurationSlow
--midas-transition-duration-slow
500ms
transitionDurationNormal
--midas-transition-duration-normal
300ms
transitionDurationFast
--midas-transition-duration-fast
250ms
timing
transitionTimingEaseOut
--midas-transition-timing-easeOut
[0,0,0.58,1]
transitionTimingEaseIn
--midas-transition-timing-easeIn
[0.42,0,1,1]
panel
transitionPanelCollapse
--midas-transition-panel-collapse
{"delay":"0ms","duration":"300ms","timingFunction":[0,0,0.58,1]}
transitionPanelExpand
--midas-transition-panel-expand
{"delay":"0ms","duration":"300ms","timingFunction":[0.42,0,1,1]}
Z-Index
zIndex
zIndexBase
--midas-zIndex-base
1
zIndexAbove
--midas-zIndex-above
10
zIndexSidebar
--midas-zIndex-sidebar
500
zIndexModal
--midas-zIndex-modal
1000
zIndexToast
--midas-zIndex-toast
1100
zIndexSkipToContent
--midas-zIndex-skipToContent
1200