Tokens list

windowSizes

windowSizesSm

Value: 480px

windowSizesMd

Value: 768px

windowSizesLg

Value: 1024px

windowSizesXl

Value: 1280px

breakpoints

breakpointsXs

Value: (max-width: calc(480px - 1px))

breakpointsSm

Value: (min-width: 480px)

breakpointsMd

Value: (min-width: 768px)

breakpointsLg

Value: (min-width: 1024px)

breakpointsXl

This is the largest breakpoint

Value: (min-width: 1280px)

button

background

primary

buttonBackgroundPrimaryBase

Färg på primärknapp

Light:

#143c50

Dark:

#2e7ca5

buttonBackgroundPrimaryHover

Hover state på primärknapp

Light:

#25607f

Dark:

#25607f

buttonBackgroundPrimaryActive

Active state för primärknapp

Light:

#2e7ca5

Dark:

#143c50

secondary

buttonBackgroundSecondaryBase

Färg på sekundärknapp

Light:

#fff

Dark:

#171717

buttonBackgroundSecondaryHover

Hover state på sekundärknapp

Light:

#e6e6e6

Dark:

#212121

buttonBackgroundSecondaryActive

Active state för sekundärknapp

Light:

#d9d9d9

Dark:

#262626

tertiary

buttonBackgroundTertiaryHover

Hover state för tertiär knapp

Light:

#0000000d

Dark:

#ffffff21

buttonBackgroundTertiaryActive

Active state för tertiär knapp

Light:

#d9d9d9

Dark:

#262626

danger

buttonBackgroundDangerBase

Färg på danger knapp

Light:

#e62323

Dark:

#e62323

buttonBackgroundDangerHover

Hover state för danger knapp

Light:

#bc1d1d

Dark:

#bc1d1d

buttonBackgroundDangerActive

Active state för danger knapp

Light:

#7d1313

Dark:

#7d1313

buttonBackgroundDisabled

Disabled state för knappar

Light:

#f2f2f2

Dark:

#262626

border

buttonBorderSecondary

Kantfärg för sekundärknapp

Light:

#143c50

Dark:

#f2f2f2

icon

buttonIconHover

Light:

#0000000d

Dark:

#ffffff21

buttonIconActive

Active state för ikoner

Light:

#00000033

Dark:

#ffffff33

color

black

colorBlackBase

Black

#000

colorBlackHover

Black hover

#0d0d0d

colorBlackOpacity5

Black with 5% opacity

#0000000d

white

colorWhiteBase

White

#fff

colorWhiteHover

White hover

#e6e6e6

colorWhiteOpacity13

White with 13% opacity

#ffffff21

gray

colorGray10

#f2f2f2

colorGray20

#e6e6e6

colorGray30

#d9d9d9

colorGray40

#ccc

colorGray50

#bfbfbf

colorGray60

#b3b3b3

colorGray70

#a6a6a6

colorGray80

#999

colorGray90

#8c8c8c

colorGray100

#808080

colorGray110

#737373

colorGray120

#666

colorGray130

#5d5d5d

colorGray140

#525252

colorGray150

#474747

colorGray160

#383838

colorGray170

#333

colorGray180

#262626

colorGray190

#212121

colorGray200

#171717

blue

colorBlue10

#eaf2f6

colorBlue20

#d5e5ed

colorBlue40

#abcbdb

colorBlue50

#94BCD1

colorBlue60

#82b0c9

colorBlue70

#6CA3C0

colorBlue80

#5897b8

colorBlue90

#4289ad

colorBlue100

#2e7ca5

colorBlue110

#2C7399

colorBlue120

#29698C

colorBlue130

#25607f

colorBlue150

#143c50

purple

colorPurple80

#b46ab4

colorPurple110

#954b95

red

colorRed100

#b90835

signalBlue

colorSignalBlue10

#eaf2f6

colorSignalBlue20

#d5e5ed

colorSignalBlue100

#06c

signalGreen

colorSignalGreen20

#d5f2d9

colorSignalGreen30

#bae5c5

colorSignalGreen100

#008d3c

colorSignalGreen150

#194B33

signalYellow

colorSignalYellow10

#fff8e2

colorSignalYellow20

#fff1cd

colorSignalYellow30

#ffeab8

colorSignalYellow40

#ffe3a3

colorSignalYellow50

#ffdc8b

colorSignalYellow60

#ffd47b

colorSignalYellow70

#fdcd5d

colorSignalYellow80

#fbc640

colorSignalYellow90

#fabf1b

colorSignalYellow100

#fab900

colorSignalYellow110

#daa105

colorSignalYellow120

#bd8c1e

colorSignalYellow130

#a17927

colorSignalYellow140

#88672a

colorSignalYellow150

#70562b

colorSignalYellow160

#5a4629

colorSignalYellow170

#453826

colorSignalYellow180

#322a20

colorSignalYellow190

#201c18

colorSignalYellow200

#0f0e0e

signalRed

colorSignalRed10

#ffefef

colorSignalRed20

#ffdfdf

colorSignalRed30

#fcc8c8

colorSignalRed40

#f9b0b0

colorSignalRed50

#f69999

colorSignalRed60

#f38181

colorSignalRed70

#ef6a6a

colorSignalRed80

#EC5252

colorSignalRed90

#e93b3b

colorSignalRed100

#e62323

colorSignalRed110

#d12020

colorSignalRed120

#bc1d1d

colorSignalRed130

#a71919

colorSignalRed140

#921616

colorSignalRed150

#7d1313

colorSignalRed160

#691010

colorSignalRed170

#540d0d

colorSignalRed180

#3f0a0a

colorSignalRed190

#2a0606

colorSignalRed200

#150303

background

backgroundBase

Standardbakgrund för våra applikationer

Light:

#fff

Dark:

#171717

backgroundHover

Hoverfärg för bakgrund

Light:

#e6e6e6

Dark:

#212121

backgroundInverse

Bakgrund eller element i med hög kontrast

Light:

#171717

Dark:

#f2f2f2

layer

01

layer01Base

Yta som används på background. Sekundär bakgrundsfärg

Light:

#f2f2f2

Dark:

#262626

layer01Hover

Hover state för layer01

Light:

#e6e6e6

Dark:

#333

layer01Selected

Selected state för layer01

Light:

#d9d9d9

Dark:

#383838

layer01SelectedHover

Hover state för layerSelected01

Light:

#ccc

Dark:

#474747

02

layer02Base

Yta som ligger på layer01

Light:

#fff

Dark:

#383838

layer02Hover

Hover state för layer02

Light:

#e6e6e6

Dark:

#474747

layer02Selected

Selected state för layer02

Light:

#d9d9d9

Dark:

#525252

layer02SelectedHover

Hover state för layerSelected02

Light:

#ccc

Dark:

#5d5d5d

layerAccent

01

layerAccent01Base

Accentfärg som används tillsammans med layer01

Light:

#d9d9d9

Dark:

#383838

layerAccent01Hover

Hover state för layerAccent01

Light:

#ccc

Dark:

#474747

layerAccent01Selected

Selected state för layerAccent01

Light:

#bfbfbf

Dark:

#525252

02

layerAccent02Base

Accentfärg som används tillsammans med layer02

Light:

#f2f2f2

Dark:

#262626

layerAccent02Hover

Hover state för layerAccent02

Light:

#e6e6e6

Dark:

#333

layerAccent02Selected

Selected state för layerAccent02

Light:

#d9d9d9

Dark:

#383838

brand

brandPrimary

Primära röda färgen

Light:

#b90835

Dark:

#b90835

border

color

borderColorPrimary

Kantlinje med hög kontrast, används med field01

Light:

#171717

Dark:

#f2f2f2

borderColorSecondary

Kantlinje med medelhög kontrast

Light:

#737373

Dark:

#8c8c8c

borderColorSubtle

Kantlinje med låg kontrast

Light:

#bfbfbf

Dark:

#383838

borderColorTertiary

Primärblå kantlinje

Light:

#143c50

Dark:

#2e7ca5

borderColorDisabled

Kantlinje för disabled state

Light:

#bfbfbf

Dark:

#525252

borderWidth

Value: 1px

field

01

field01Base

Standardfärg för fält, som ligger på background

Light:

#f2f2f2

Dark:

#262626

field01Hover

Hover state för field01

Light:

#e6e6e6

Dark:

#333

field01Active

Active state för field01

Light:

#d9d9d9

Dark:

#383838

02

field02Base

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

Light:

#fff

Dark:

#383838

field02Hover

Hover state för field02

Light:

#e6e6e6

Dark:

#474747

field02Active

Active state för field02

Light:

#d9d9d9

Dark:

#525252

fieldDisabled

Disabled state för fält

Light:

#f2f2f2

Dark:

#262626

skeleton

skeleton01

Standardfärg för skeleton

Light:

#f2f2f2

Dark:

#262626

skeleton02

Färg som används när Skeleton ligger på bakgrundsfärgen `layer01` eller `light-dark(#f2f2f2,#262626)`

Light:

#d9d9d9

Dark:

#383838

icon

iconPrimary

Primär ikonfärg

Light:

#171717

Dark:

#f2f2f2

iconSecondary

Sekundär ikonfärg

Light:

#525252

Dark:

#a6a6a6

iconTertiary

Light:

#143c50

Dark:

#f2f2f2

iconInverse

Inverterad ikonfärg. Ljus ikon i ljust läge och mörk ikon i mörkt läge

Light:

#fff

Dark:

#171717

iconOnColor

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

Light:

#fff

Dark:

#fff

iconDisabled

Ikoner som är disabled

Light:

#bfbfbf

Dark:

#525252

iconSuccess

Ikonfär för success state

Light:

#008d3c

Dark:

#008d3c

iconInfo

Ikonfärg för informationsikoner

Light:

#06c

Dark:

#06c

iconWarning

Ikonfärg för varningsikoner och invalid state

Light:

#e62323

Dark:

#e62323

iconImportant

Ikonfärg för viktig information

Light:

#fab900

Dark:

#fab900

link

linkEnabled

Primärlänkfärg

Light:

#29698C

Dark:

#6CA3C0

linkHover

Hover state för länkar

Light:

#143c50

Dark:

#94BCD1

linkPressed

Active/pressed state för länkar

Light:

#171717

Dark:

#abcbdb

linkVisited

Färg för besökta länkar

Light:

#954b95

Dark:

#b46ab4

support

border

supportBorderSuccess

Kantlinje för success-notifikationer

Light:

#008d3c

Dark:

#008d3c

supportBorderInfo

Kantlinje för notifikationer med information

Light:

#06c

Dark:

#06c

supportBorderImportant

Kantlinje för notifikationer med viktig information

Light:

#fab900

Dark:

#fab900

supportBorderWarning

Kantlinje för notifikationer med varningar

Light:

#e62323

Dark:

#e62323

background

supportBackgroundSuccess

Bakgrund för success-notifikationer

Light:

#d5f2d9

Dark:

#262626

supportBackgroundSuccessHover

Hoverbakgrund för success-notifikationer

Light:

#bae5c5

Dark:

#333

supportBackgroundInfo

Bakgrund för notifikationer med information

Light:

#eaf2f6

Dark:

#262626

supportBackgroundInfoHover

Hoverbakgrund för notifikationer med information

Light:

#d5e5ed

Dark:

#333

supportBackgroundImportant

Bakgrund för notifikationer med viktig information

Light:

#fff8e2

Dark:

#262626

supportBackgroundImportantHover

Hoverbakgrund för notifikationer med viktig information

Light:

#fff1cd

Dark:

#333

supportBackgroundWarning

Bakgrund för notifikationer med varningar

Light:

#ffdfdf

Dark:

#262626

supportBackgroundWarningHover

Hoverbakgrund för notifikationer med varningar

Light:

#fcc8c8

Dark:

#333

text

textPrimary

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

Light:

#171717

Dark:

#f2f2f2

textSecondary

Sekundär textfärg

Light:

#525252

Dark:

#a6a6a6

textTertiary

Textfärg på tertiär knapp

Light:

#143c50

Dark:

#f2f2f2

textOnColor

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

Light:

#fff

Dark:

#fff

textInverse

Inverterad textfärg

Light:

#f2f2f2

Dark:

#171717

textDisabled

Textfärg för disabled state

Light:

#bfbfbf

Dark:

#525252

textWarning

Textfärg för felmeddelanden

Light:

#e62323

Dark:

#EC5252

textPlaceholder

Textfärg för platshållare

Light:

#a6a6a6

Dark:

#525252

badge

badgeBackground

Light:

#e62323

Dark:

#e62323

calendar

date

background

calendarDateBackgroundHover

Light:

#0000001a

Dark:

#ffffff1a

calendarDateBackgroundSelected

Light:

#143c50

Dark:

#5897b8

calendarDateBackgroundStartRange

Light:

#143c50

Dark:

#5897b8

calendarDateBackgroundInRange

Light:

#d5e5ed

Dark:

#143c50

calendarDateBackgroundEndRange

Light:

#143c50

Dark:

#5897b8

logo

logoPrimary

Färg på logotypen

Light:

#b90835

Dark:

#fff

item

background

menuItemBackgroundHover

Bakgrundsfärg för menu vid hover

Light:

#e6e6e6

Dark:

#212121

menuItemBackgroundSelected

Bakgrundsfärg för aktiv menu

Light:

#f2f2f2

Dark:

#262626

text

menuTextSectionHeader

Light:

#525252

Dark:

#a6a6a6

size

size10

Value: 0.125rem

size15

Value: 0.188rem

size20

Value: 0.25rem

size30

Value: 0.375rem

size40

Value: 0.5rem

size50

Value: 0.625rem

size60

Value: 0.75rem

size70

Value: 0.875rem

size75

Value: 0.938rem

size80

Value: 1rem

size90

Value: 1.25rem

size100

Value: 1.5rem

size110

Value: 1.75rem

size120

Value: 2rem

size130

Value: 2.5rem

size140

Value: 2.75rem

size150

Value: 3rem

size00

Value: 0rem

size05

Value: 0.063rem

spacing

spacing10

Value: 0.125rem

spacing20

Value: 0.25rem

spacing30

Value: 0.5rem

spacing40

Value: 0.75rem

spacing50

Value: 1rem

spacing60

Value: 1.5rem

spacing70

Value: 2rem

spacing80

Value: 2.5rem

spacing90

Value: 3rem

spacing100

Value: 4rem

spacing110

Value: 5rem

spacing120

Value: 6rem

spacingXsmall

Value: 0.25rem

spacingSmall

Value: 0.5rem

spacingMedium

Value: 1rem

spacingLarge

Value: 1.5rem

spacingXlarge

Value: 2rem

state

stateFocus

Focus style used when the component is focused (box-shadow).

Value: 0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white)

stateFocusInset

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

Value: inset 0 0 0 2px light-dark(black, white), inset 0 0 0 4px light-dark(white, black)

focusContrastMode

stateFocusContrastModeOutline

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

Value: 2px

stateFocusContrastModeOffset

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

Value: 2px

transition

duration

transitionDurationSlow

Value: 500ms

transitionDurationNormal

Value: 300ms

transitionDurationFast

Value: 250ms

timing

transitionTimingEaseOut

Value: 000.581

transitionTimingEaseIn

Value: 0.42011

panel

transitionPanelCollapse

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

transitionPanelExpand

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

typography

font

typographyFontFamily

The quick brown fox jumps over the lazy dog

size

typographyFontSize10

Value: 0.75rem

typographyFontSize20

Value: 0.875rem

typographyFontSize30

Value: 1rem

typographyFontSize40

Value: 1.125rem

typographyFontSize50

Value: 1.25rem

typographyFontSize60

Value: 1.5rem

typographyFontSize70

Value: 1.625rem

typographyFontSize80

Value: 2rem

typographyFontSize90

Value: 2.25rem

typographyFontSize100

Value: 2.625rem

lineHeight

typographyLineHeight10

Value: 1rem

typographyLineHeight20

Value: 1.125rem

typographyLineHeight30

Value: 1.25rem

typographyLineHeight40

Value: 1.375rem

typographyLineHeight50

Value: 1.5rem

typographyLineHeight60

Value: 1.75rem

typographyLineHeight70

Value: 2rem

typographyLineHeight80

Value: 2.25rem

typographyLineHeight90

Value: 2.5rem

typographyLineHeight100

Value: 3rem

weight

typographyWeightThin

The quick brown fox jumps over the lazy dog

typographyWeightExtraLight

The quick brown fox jumps over the lazy dog

typographyWeightLight

The quick brown fox jumps over the lazy dog

typographyWeightRegular

The quick brown fox jumps over the lazy dog

typographyWeightMedium

The quick brown fox jumps over the lazy dog

typographyWeightSemiBold

The quick brown fox jumps over the lazy dog

typographyWeightBold

The quick brown fox jumps over the lazy dog

typographyWeightExtraBold

The quick brown fox jumps over the lazy dog

typographyWeightBlack

The quick brown fox jumps over the lazy dog

zIndex

zIndexBase

Value: 1

zIndexAbove

Value: 10

zIndexModal

Value: 1000

zIndexToast

Value: 1100

zIndexSkipToContent

Value: 1200