Tokens list

Alla tillgängliga designtokens i Midas Design System. Tokens finns som CSS-variabler (--midas-*) och kan också importeras som JS-objekt från @midas-ds/theme.

Tokens är organiserade i tre nivåer:

• Primitiver (color.*, base.*) – råa värden som semantiska tokens refererar till.
• Semantiska tokens (background.*, text.*, button.* osv.) – tokens kopplade till specifika roller i gränssnittet.
• CSS-variabler (--midas-*) – genererade CSS custom properties från de semantiska tokens.

Typografi

Komposit typografi

Varje komposit token samlar fontFamily, fontSize, fontWeight och lineHeight i ett värde. Används i: Text, Heading, Button, Label m.fl.

Composite Tokens

Usage:

.my-element { font: var(--midas-typography-body); }

typographyBody

--midas-typography-body

Standardtypografi för brödtext. Används i löptext, listor och stycken.

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

Liten brödtextstil. Används för kompakt text i t.ex. tabeller och listor.

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

Beskrivningstext, t.ex. för hjälptexter och ledtexter i formulär.

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

Liten beskrivningstext, t.ex. för felmeddelanden och teckenräknare i formulär.

Font Family: Inter, sans-serif

Font Size: 0.75rem

Font Weight: 400

Line Height: 1rem

The quick brown fox jumps over the lazy dog

Typsnittsfamilj

Token	CSS-variabel	Värde
typography.font.family	--midas-typography-font-family	Inter, sans-serif Primär typsnittsfamilj för hela design systemet.

Teckenstorlek

Token	CSS-variabel	Värde
typography.font.size.10	--midas-typography-font-size-10	0.75rem 0.75rem / 12px.
typography.font.size.20	--midas-typography-font-size-20	0.875rem 0.875rem / 14px.
typography.font.size.30	--midas-typography-font-size-30	1rem 1rem / 16px.
typography.font.size.40	--midas-typography-font-size-40	1.125rem 1.125rem / 18px.
typography.font.size.50	--midas-typography-font-size-50	1.25rem 1.25rem / 20px.
typography.font.size.60	--midas-typography-font-size-60	1.5rem 1.5rem / 24px.
typography.font.size.70	--midas-typography-font-size-70	1.625rem 1.625rem / 26px.
typography.font.size.80	--midas-typography-font-size-80	2rem 2rem / 32px.
typography.font.size.90	--midas-typography-font-size-90	2.25rem 2.25rem / 36px.
typography.font.size.100	--midas-typography-font-size-100	2.625rem 2.625rem / 42px.

Teckensnittsvikt

Token	CSS-variabel	Värde
typography.weight.black	--midas-typography-weight-black	900 900 – Tyngsta möjliga vikt.	Aa
typography.weight.bold	--midas-typography-weight-bold	700 700 – Fet, för rubriker och framhävning.	Aa
typography.weight.extraBold	--midas-typography-weight-extra-bold	800 800 – Extra fet.	Aa
typography.weight.extraLight	--midas-typography-weight-extra-light	200 200 – Extra tunn.	Aa
typography.weight.light	--midas-typography-weight-light	300 300 – Tunn.	Aa
typography.weight.medium	--midas-typography-weight-medium	500 500 – Mellantung, för betoning utan fet stil.	Aa
typography.weight.regular	--midas-typography-weight-regular	400 400 – Standardvikt för brödtext.	Aa
typography.weight.semiBold	--midas-typography-weight-semi-bold	600 600 – Halvfet, för underrubriker och etiketter.	Aa
typography.weight.thin	--midas-typography-weight-thin	100 100 – Tunnast möjliga vikt.	Aa

Radhöjd

Token	CSS-variabel	Värde
typography.lineHeight.10	--midas-typography-line-height-10	1rem 1rem / 16px.
typography.lineHeight.20	--midas-typography-line-height-20	1.125rem 1.125rem / 18px.
typography.lineHeight.30	--midas-typography-line-height-30	1.25rem 1.25rem / 20px.
typography.lineHeight.40	--midas-typography-line-height-40	1.375rem 1.375rem / 22px.
typography.lineHeight.50	--midas-typography-line-height-50	1.5rem 1.5rem / 24px.
typography.lineHeight.60	--midas-typography-line-height-60	1.75rem 1.75rem / 28px.
typography.lineHeight.70	--midas-typography-line-height-70	2rem 2rem / 32px.
typography.lineHeight.80	--midas-typography-line-height-80	2.25rem 2.25rem / 36px.
typography.lineHeight.90	--midas-typography-line-height-90	2.5rem 2.5rem / 40px.
typography.lineHeight.100	--midas-typography-line-height-100	3rem 3rem / 48px.

Färger

Neutrala & varumärkesfärger

Gråskala, primärblå, svart/vit, lila och varumärkesröd. Semantiska tokens refererar till dessa som bas.

black

blue

gray

purple

red

white

Signalfärger

Råa palettfärger som semantiska tokens refererar till. support.* och tag.* använder samma primitiver men i olika syften:

• Feedback & status — via support.* (Toast, InfoBanner, invalida formulärfält)
• Dekorativa färgvarianter — via tag.* (Tag-komponenten)

Exempel:

• support.background.success → color.signalGreen.20 / color.signalGreen.180
• tag.green.background → color.signalGreen.20 / color.signalGreen.180
• icon.success → color.signalGreen.100

orange

signalBlue

signalGreen

signalRed

signalYellow

Bakgrund

Sidans baslager. Används i: samtliga sidor och layouts som sidbakgrund.

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

Lager

Ytor som staplas ovanpå bakgrunden. layer.01 används direkt på background, layer.02 ovanpå layer.01. Används i: Card, Table, Modal, Popover, Select, ListBox, Accordion, Calendar, Tooltip, Checkbox (hover på mobil).

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-selected-hover

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-selected-hover

Hover state för layerSelected02

Lageraccentfärger

Accentfärger som kompletterar respektive lager. Används i: Table (zebra-rankning), ProgressBar (bakgrundsspår).

layerAccent

01

layerAccent01Base

--midas-layer-accent-01-base

Accentfärg som används tillsammans med layer01

layerAccent01Hover

--midas-layer-accent-01-hover

Hover state för layerAccent01

layerAccent01Selected

--midas-layer-accent-01-selected

Selected state för layerAccent01

02

layerAccent02Base

--midas-layer-accent-02-base

Accentfärg som används tillsammans med layer02

layerAccent02Hover

--midas-layer-accent-02-hover

Hover state för layerAccent02

layerAccent02Selected

--midas-layer-accent-02-selected

Selected state för layerAccent02

Varumärke

Används i: Logo.

brand

brandPrimary

--midas-brand-primary

Primära röda färgen

Kanter

Tre kontrastnivåer: primary för formulärfält, secondary för kort och paneler, subtle för separatorer och läsbara fält. Används i: TextField, TextArea, Checkbox, Radio, ComboBox, SearchField, Card, Accordion, Table, Calendar, DateField, DatePicker, Tag, ListBox, FileUpload, ToggleButton.

border

color

borderColorDisabled

--midas-border-color-disabled

Kantlinje för disabled state

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

borderWidth

--midas-border-width

1px

Fält

Bakgrundsfärger för formulärfält. field.01 används på background, field.02 på layer.01. Används i: TextField, TextArea, Tag, ComboBox, SearchField, DateField, DatePicker, Calendar, Select.

field

01

field01Active

--midas-field-01-active

Active state för field01

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

02

field02Active

--midas-field-02-active

Active state för field02

field02Base

--midas-field-02-base

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

field02Hover

--midas-field-02-hover

Hover state för field02

fieldDisabled

--midas-field-disabled

Disabled state för fält

Ikoner

icon.success, icon.warning och icon.info baseras på signalfärger. Används i: Button, Toast, InfoBanner, SearchField, Radio, ComboBox, Spinner, Menu, Accordion, Checkbox, Tag, LinkButton, ListBox.

icon

iconDisabled

--midas-icon-disabled

Ikoner som är disabled

iconImportant

--midas-icon-important

Ikonfärg för viktig information

iconInfo

--midas-icon-info

Ikonfärg för informationsikoner

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-on-color

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

iconPrimary

--midas-icon-primary

Primär ikonfärg

iconReadOnly

--midas-icon-read-only

Ikonfärg för read-only state

iconSecondary

--midas-icon-secondary

Sekundär ikonfärg

iconSuccess

--midas-icon-success

Ikonfärg för success state

iconTertiary

--midas-icon-tertiary

Tertiär ikonfärg, används för ikoner i tertiary-knappar och länkikoner

iconWarning

--midas-icon-warning

Ikonfärg för varningsikoner och invalid state

Länkar

Används i: Link.

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

Supportfärger

Semantiska tokens för statuskommunikation, byggda ovanpå signalfärgsprimitiver. Finns i fyra varianter: success, info, important och warning. En ändring av t.ex. color.signalGreen.20 slår igenom på alla support.*-tokens som refererar till den. Används i: Toast, InfoBanner, Checkbox (invalid), Radio (invalid), ComboBox (invalid), SearchField (invalid), Label.

support

background

supportBackgroundImportant

--midas-support-background-important

Bakgrund för notifikationer med viktig information

supportBackgroundImportantHover

--midas-support-background-important-hover

Hoverbakgrund för notifikationer med viktig information

supportBackgroundInfo

--midas-support-background-info

Bakgrund för notifikationer med information

supportBackgroundInfoHover

--midas-support-background-info-hover

Hoverbakgrund för notifikationer med information

supportBackgroundSuccess

--midas-support-background-success

Bakgrund för success-notifikationer

supportBackgroundSuccessHover

--midas-support-background-success-hover

Hoverbakgrund för success-notifikationer

supportBackgroundWarning

--midas-support-background-warning

Bakgrund för notifikationer med varningar

supportBackgroundWarningHover

--midas-support-background-warning-hover

Hoverbakgrund för notifikationer med varningar

border

supportBorderImportant

--midas-support-border-important

Kantlinje för notifikationer med viktig information

supportBorderInfo

--midas-support-border-info

Kantlinje för notifikationer med information

supportBorderSuccess

--midas-support-border-success

Kantlinje för success-notifikationer

supportBorderWarning

--midas-support-border-warning

Kantlinje för notifikationer med varningar

Text

text.primary är standardvärdet och används i nästan alla komponenter. Används i: Text, Heading, Link, Button, Checkbox, Radio, Badge, Toast, InfoBanner, TextField, Select, ComboBox, DateField, Card, Tab, Menu, ListBox, Accordion, Table m.fl.

text

textDisabled

--midas-text-disabled

Textfärg för disabled state

textInverse

--midas-text-inverse

Inverterad textfärg

textOnColor

--midas-text-on-color

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

textPlaceholder

--midas-text-placeholder

Textfärg för platshållare

textPrimary

--midas-text-primary

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

textReadOnly

--midas-text-read-only

Textfärg för read-only state

textSecondary

--midas-text-secondary

Sekundär textfärg

textTertiary

--midas-text-tertiary

Textfärg på tertiär knapp

textWarning

--midas-text-warning

Textfärg för felmeddelanden

Badge

Används i: Badge.

badge

badgeBackground

--midas-badge-background

Bakgrundsfärg för badge

Kalender

Används i: DatePicker, DateRangePicker.

calendarDateBackgroundEndRange

--midas-calendar-date-background-end-range

Bakgrund för det sista datumet i ett intervallval

calendarDateBackgroundHover

--midas-calendar-date-background-hover

Hover-bakgrund för datumcell

calendarDateBackgroundInRange

--midas-calendar-date-background-in-range

Bakgrund för datum som ligger inom ett valt intervall

calendarDateBackgroundSelected

--midas-calendar-date-background-selected

Bakgrund för ett valt datum

calendarDateBackgroundStartRange

--midas-calendar-date-background-start-range

Bakgrund för det första datumet i ett intervallval

Logotyp

Används i: Logo.

logo

logoPrimary

--midas-logo-primary

Färg på logotypen

Meny

Används i: Menu, NavigationMenu.

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-section-header

Textfärg för sektionsrubriker i navigationsmenyn

Storlekar & avstånd

Basdimensioner

Intern dimensionsskala som space.* och size.* bygger på. --midas-base-* används inte direkt i komponent-CSS.

Token	CSS-variabel	Värde
base.00	--midas-base-00	0rem
base.05	--midas-base-05	0.063rem
base.10	--midas-base-10	0.125rem
base.15	--midas-base-15	0.188rem
base.20	--midas-base-20	0.25rem
base.30	--midas-base-30	0.375rem
base.40	--midas-base-40	0.5rem
base.50	--midas-base-50	0.625rem
base.60	--midas-base-60	0.75rem
base.70	--midas-base-70	0.875rem
base.75	--midas-base-75	0.938rem
base.80	--midas-base-80	1rem
base.90	--midas-base-90	1.25rem
base.100	--midas-base-100	1.5rem
base.110	--midas-base-110	1.75rem
base.120	--midas-base-120	2rem
base.130	--midas-base-130	2.5rem
base.140	--midas-base-140	2.75rem
base.150	--midas-base-150	3rem

Storlek

width/height på interaktiva element och ikoner. Används i: Button (icon), Checkbox, Radio, TextField, Select, ComboBox, ListBox (option-höjd).

Token	CSS-variabel	Värde
size.control	--midas-size-control	3rem Standardhöjd för interaktiva kontroller, t.ex. TextField och Button. 3rem / 48px.
size.control-md	--midas-size-control-md	2.5rem Medelstor interaktiv kontrollhöjd. 2.5rem / 40px.
size.icon	--midas-size-icon	1rem Standardstorlek för ikoner. 1rem / 16px.
size.icon-sm	--midas-size-icon-sm	1.25rem Liten ikonstorlek. 1.25rem / 20px.
size.option	--midas-size-option	2rem Höjd för alternativ i dropdown-listor, t.ex. Select och Combobox. 2rem / 32px.

Avstånd

padding, gap och margin. Semantiska namn (xsmall–xlarge) täcker de vanligaste fallen; numeriska steg finns för mellanvärden.

Token	CSS-variabel	Värde
space.05	--midas-space-05	0.063rem 0.063rem / 1px.
space.10	--midas-space-10	0.125rem 0.125rem / 2px.
space.30	--midas-space-30	0.375rem 0.375rem / 6px.
space.50	--midas-space-50	0.625rem 0.625rem / 10px.
space.60	--midas-space-60	0.75rem 0.75rem / 12px.
space.70	--midas-space-70	0.875rem 0.875rem / 14px.
space.75	--midas-space-75	0.938rem 0.938rem / 15px.
space.90	--midas-space-90	1.25rem 1.25rem / 20px.
space.130	--midas-space-130	2.5rem 2.5rem / 40px.
space.150	--midas-space-150	3rem 3rem / 48px.
space.large	--midas-space-large	1.5rem Stort avstånd. 1.5rem / 24px.
space.medium	--midas-space-medium	1rem Medelstort avstånd. 1rem / 16px.
space.small	--midas-space-small	0.5rem Litet avstånd. 0.5rem / 8px.
space.xlarge	--midas-space-xlarge	2rem Extra stort avstånd. 2rem / 32px.
space.xsmall	--midas-space-xsmall	0.25rem Extra litet avstånd. 0.25rem / 4px.

Layout

Fönsterstorlekar

Pixelvärden för skärmstorlekar. breakpoints.* används i @media-regler.

Token	CSS-variabel	Värde
windowSizes.lg	--midas-window-sizes-lg	1024px Stor skärmstorlek. 1024px.
windowSizes.md	--midas-window-sizes-md	768px Mellanstor skärmstorlek. 768px.
windowSizes.sm	--midas-window-sizes-sm	480px Liten skärmstorlek. 480px.
windowSizes.xl	--midas-window-sizes-xl	1280px Extra stor skärmstorlek. 1280px.

Brytpunkter

Media query-strängar för responsiv design. Används direkt i CSS @media-regler.

Token	CSS-variabel	Värde
breakpoints.lg	--midas-breakpoints-lg	(min-width: 1024px) Stor skärm och uppåt. Från 1024px (min-width).
breakpoints.md	--midas-breakpoints-md	(min-width: 768px) Mellanstor skärm och uppåt. Från 768px (min-width).
breakpoints.sm	--midas-breakpoints-sm	(min-width: 480px) Liten skärm och uppåt. Från 480px (min-width).
breakpoints.xl	--midas-breakpoints-xl	(min-width: 1280px) Extra stor skärm och uppåt. Från 1280px (min-width).
breakpoints.xs	--midas-breakpoints-xs	(max-width: calc(480px - 1px)) Extra liten skärm. Upp till 479px (max-width).

Interaktiva element

Knappar

Täcker alla varianter (primary, secondary, tertiary, danger) och tillstånd. Används i: Button, Tag (knappläge), Checkbox, LinkButton, Card.

button

background

danger

buttonBackgroundDangerActive

--midas-button-background-danger-active

Active state för danger knapp

buttonBackgroundDangerBase

--midas-button-background-danger-base

Färg på danger knapp

buttonBackgroundDangerHover

--midas-button-background-danger-hover

Hover state för danger knapp

primary

buttonBackgroundPrimaryActive

--midas-button-background-primary-active

Active state för primärknapp

buttonBackgroundPrimaryBase

--midas-button-background-primary-base

Färg på primärknapp

buttonBackgroundPrimaryHover

--midas-button-background-primary-hover

Hover state på primärknapp

secondary

buttonBackgroundSecondaryActive

--midas-button-background-secondary-active

Active state för sekundärknapp

buttonBackgroundSecondaryBase

--midas-button-background-secondary-base

Färg på sekundärknapp

transparent

buttonBackgroundSecondaryHover

--midas-button-background-secondary-hover

Hover state på sekundärknapp

tertiary

buttonBackgroundTertiaryActive

--midas-button-background-tertiary-active

Active state för tertiär knapp

buttonBackgroundTertiaryHover

--midas-button-background-tertiary-hover

Hover state för tertiär knapp

buttonBackgroundDisabled

--midas-button-background-disabled

Disabled state för knappar

border

buttonBorderSecondary

--midas-button-border-secondary

Kantfärg för sekundärknapp

icon

buttonIconActive

--midas-button-icon-active

Active state för ikoner

buttonIconHover

--midas-button-icon-hover

Hover state för ikonknappar

Tillstånd

Fokusringar och invalid-markeringar. Kopplade till WCAG-krav för fokussynlighet. Används i: Button, TextField, Checkbox, Radio, Link, Tag, ComboBox, SearchField, Toast, DateField, DateSegment, Tooltip, Popover, Modal.

state

focusContrastMode

stateFocusContrastModeOffset

--midas-state-focus-contrast-mode-offset

Outline offset for focus ring when Windows High Contrast (forced-colors) mode is active.

2px

stateFocusContrastModeOutline

--midas-state-focus-contrast-mode-outline

Outline style 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).

stateFocusInset

--midas-state-focus-inset

Inset variant of the focus ring (box-shadow inset).

stateInvalid

--midas-state-invalid

Invalid state style for form fields (box-shadow).

Skeleton

skeleton.01 på background, skeleton.02 på layer.01. Används i: 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)`

Rörelse

duration- och timing-tokens kombineras för övergångar. Används i: Radio (border-transition), Accordion (expand/collapse), Select, Tooltip.

Övergångar

transition

duration

transitionDurationFast

--midas-transition-duration-fast

Snabb övergång. 250ms. Används för kortlivade övergångar som tooltips och dropdowns — inte hover.

250ms

transitionDurationNormal

--midas-transition-duration-normal

Normal övergångshastighet. 300ms. Standardval för de flesta animationer.

300ms

transitionDurationSlow

--midas-transition-duration-slow

Långsam övergång. 500ms. Används för större layoutförändringar som sidopaneler och expanderbara sektioner.

500ms

panel

transitionPanelCollapse

--midas-transition-panel-collapse

Komprimerar en panel med easeOut-timing. Används i Accordion och expanderbara ytor.

{"delay":"0ms","duration":"300ms","timingFunction":[0,0,0.58,1]}

transitionPanelExpand

--midas-transition-panel-expand

Expanderar en panel med easeIn-timing. Används i Accordion och expanderbara ytor.

{"delay":"0ms","duration":"300ms","timingFunction":[0.42,0,1,1]}

timing

transitionTimingEaseIn

--midas-transition-timing-ease-in

Accelererar mot slutet. Används för element som lämnar vyn.

[0.42,0,1,1]

transitionTimingEaseOut

--midas-transition-timing-ease-out

Decelererar mot slutet. Används för element som glider in i vyn.

[0,0,0.58,1]

Z-index

Staplingskontroll för UI-lager. Används i: Toast (toast), Modal/Dialog (modal), TextField lösenordsknapp (base/above), Link (stretched-variant, base).

Token	CSS-variabel	Värde
zIndex.above	--midas-z-index-above	10 Placerar element ovanför normala element, t.ex. tooltips i flödet. z-index: 10.
zIndex.base	--midas-z-index-base	1 Basnivå för normala element. z-index: 1.
zIndex.modal	--midas-z-index-modal	1000 Z-index för modaler och dialoger. z-index: 1000.
zIndex.sidebar	--midas-z-index-sidebar	500 Z-index för sidopaneler och navigationsdrawers. z-index: 500.
zIndex.skipToContent	--midas-z-index-skip-to-content	1200 Z-index för 'hoppa till innehåll'-länken för tillgänglighet, alltid överst. z-index: 1200.
zIndex.toast	--midas-z-index-toast	1100 Z-index för toast-notifikationer, ovanför modaler. z-index: 1100.