Design-muuttujat
Tältä sivulta löydät Kela Design Systemin tarjoamat design-muuttujat.
Border
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $border-width-small | BORDER_WIDTH_SMALL | --kds-t-border-width-small | 1px |
| $border-width-medium | BORDER_WIDTH_MEDIUM | --kds-t-border-width-medium | 2px |
| $border-width-large | BORDER_WIDTH_LARGE | --kds-t-border-width-large | 4px |
Border radius
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $border-radius-md | BORDER_RADIUS_MD | --kds-t-border-radius-md | 0.5rem |
| $border-radius-sm | BORDER_RADIUS_SM | --kds-t-border-radius-sm | 0.25rem |
| $border-radius-xl | BORDER_RADIUS_XL | --kds-t-border-radius-xl | 1.5rem |
| $border-radius-lg | BORDER_RADIUS_LG | --kds-t-border-radius-lg | 1rem |
| $border-radius-pill | BORDER_RADIUS_PILL | --kds-t-border-radius-pill | 10rem |
| $border-radius-circle | BORDER_RADIUS_CIRCLE | --kds-t-border-radius-circle | 50% |
Box shadow
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $box-shadow-small | BOX_SHADOW_SMALL | --kds-t-box-shadow-small | 0 2px 4px rgba(0,0,0,0.15) |
| $box-shadow-medium | BOX_SHADOW_MEDIUM | --kds-t-box-shadow-medium | 0 4px 8px rgba(0,0,0,0.15) |
| $box-shadow-large | BOX_SHADOW_LARGE | --kds-t-box-shadow-large | 0 8px 16px rgba(0,0,0,0.15) |
Breakpoint
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $breakpoint-base | BREAKPOINT_BASE | --kds-t-breakpoint-base | 0 |
| $breakpoint-xs | BREAKPOINT_XS | --kds-t-breakpoint-xs | 428 |
| $breakpoint-sm | BREAKPOINT_SM | --kds-t-breakpoint-sm | 576 |
| $breakpoint-md | BREAKPOINT_MD | --kds-t-breakpoint-md | 768 |
| $breakpoint-lg | BREAKPOINT_LG | --kds-t-breakpoint-lg | 992 |
| $breakpoint-xl | BREAKPOINT_XL | --kds-t-breakpoint-xl | 1200 |
| $breakpoint-2xl | BREAKPOINT_2XL | --kds-t-breakpoint-2xl | 1400 |
| $breakpoint-xxl | BREAKPOINT_XXL | --kds-t-breakpoint-xxl | 1400 |
| $breakpoint-3xl | BREAKPOINT_3XL | --kds-t-breakpoint-3xl | 1600 |
Color
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $color-black | COLOR_BLACK | --kds-t-color-black | #000000 |
| $color-bright-blue-10 | COLOR_BRIGHT_BLUE_10 | --kds-t-color-bright-blue-10 | #ecf7fc |
| $color-bright-blue-20 | COLOR_BRIGHT_BLUE_20 | --kds-t-color-bright-blue-20 | #c2e7f6 |
| $color-bright-blue-30 | COLOR_BRIGHT_BLUE_30 | --kds-t-color-bright-blue-30 | #6ccdf0 |
| $color-bright-blue-40 | COLOR_BRIGHT_BLUE_40 | --kds-t-color-bright-blue-40 | #3cacd8 |
| $color-bright-blue-50 | COLOR_BRIGHT_BLUE_50 | --kds-t-color-bright-blue-50 | #008ac2 |
| $color-bright-blue-60 | COLOR_BRIGHT_BLUE_60 | --kds-t-color-bright-blue-60 | #0072a2 |
| $color-bright-blue-70 | COLOR_BRIGHT_BLUE_70 | --kds-t-color-bright-blue-70 | #005b82 |
| $color-bright-blue-80 | COLOR_BRIGHT_BLUE_80 | --kds-t-color-bright-blue-80 | #003d59 |
| $color-bright-blue-90 | COLOR_BRIGHT_BLUE_90 | --kds-t-color-bright-blue-90 | #002c42 |
| $color-bright-blue-100 | COLOR_BRIGHT_BLUE_100 | --kds-t-color-bright-blue-100 | #001927 |
| $color-bright-lime-10 | COLOR_BRIGHT_LIME_10 | --kds-t-color-bright-lime-10 | #f3f8d7 |
| $color-bright-lime-20 | COLOR_BRIGHT_LIME_20 | --kds-t-color-bright-lime-20 | #dbe997 |
| $color-bright-lime-30 | COLOR_BRIGHT_LIME_30 | --kds-t-color-bright-lime-30 | #b6cc2d |
| $color-bright-lime-40 | COLOR_BRIGHT_LIME_40 | --kds-t-color-bright-lime-40 | #97aa1a |
| $color-bright-lime-50 | COLOR_BRIGHT_LIME_50 | --kds-t-color-bright-lime-50 | #798910 |
| $color-bright-lime-60 | COLOR_BRIGHT_LIME_60 | --kds-t-color-bright-lime-60 | #647208 |
| $color-bright-lime-70 | COLOR_BRIGHT_LIME_70 | --kds-t-color-bright-lime-70 | #4f5a04 |
| $color-bright-lime-80 | COLOR_BRIGHT_LIME_80 | --kds-t-color-bright-lime-80 | #353d01 |
| $color-bright-lime-90 | COLOR_BRIGHT_LIME_90 | --kds-t-color-bright-lime-90 | #262c00 |
| $color-bright-lime-100 | COLOR_BRIGHT_LIME_100 | --kds-t-color-bright-lime-100 | #141900 |
| $color-dark-orange-10 | COLOR_DARK_ORANGE_10 | --kds-t-color-dark-orange-10 | #fbf3f1 |
| $color-dark-orange-20 | COLOR_DARK_ORANGE_20 | --kds-t-color-dark-orange-20 | #f5dcd5 |
| $color-dark-orange-30 | COLOR_DARK_ORANGE_30 | --kds-t-color-dark-orange-30 | #eeb4a1 |
| $color-dark-orange-40 | COLOR_DARK_ORANGE_40 | --kds-t-color-dark-orange-40 | #e88763 |
| $color-dark-orange-50 | COLOR_DARK_ORANGE_50 | --kds-t-color-dark-orange-50 | #c56745 |
| $color-dark-orange-60 | COLOR_DARK_ORANGE_60 | --kds-t-color-dark-orange-60 | #b04c2d |
| $color-dark-orange-70 | COLOR_DARK_ORANGE_70 | --kds-t-color-dark-orange-70 | #9b2f0b |
| $color-dark-orange-80 | COLOR_DARK_ORANGE_80 | --kds-t-color-dark-orange-80 | #6c1e05 |
| $color-dark-orange-90 | COLOR_DARK_ORANGE_90 | --kds-t-color-dark-orange-90 | #501403 |
| $color-dark-orange-100 | COLOR_DARK_ORANGE_100 | --kds-t-color-dark-orange-100 | #300901 |
| $color-dark-purple-10 | COLOR_DARK_PURPLE_10 | --kds-t-color-dark-purple-10 | #f7f4f8 |
| $color-dark-purple-20 | COLOR_DARK_PURPLE_20 | --kds-t-color-dark-purple-20 | #e7deec |
| $color-dark-purple-30 | COLOR_DARK_PURPLE_30 | --kds-t-color-dark-purple-30 | #cfbad8 |
| $color-dark-purple-40 | COLOR_DARK_PURPLE_40 | --kds-t-color-dark-purple-40 | #b595c4 |
| $color-dark-purple-50 | COLOR_DARK_PURPLE_50 | --kds-t-color-dark-purple-50 | #9c71b0 |
| $color-dark-purple-60 | COLOR_DARK_PURPLE_60 | --kds-t-color-dark-purple-60 | #87599d |
| $color-dark-purple-70 | COLOR_DARK_PURPLE_70 | --kds-t-color-dark-purple-70 | #783896 |
| $color-dark-purple-80 | COLOR_DARK_PURPLE_80 | --kds-t-color-dark-purple-80 | #561e70 |
| $color-dark-purple-90 | COLOR_DARK_PURPLE_90 | --kds-t-color-dark-purple-90 | #3f1453 |
| $color-dark-purple-100 | COLOR_DARK_PURPLE_100 | --kds-t-color-dark-purple-100 | #260933 |
| $color-dark-red-10 | COLOR_DARK_RED_10 | --kds-t-color-dark-red-10 | #faf3f5 |
| $color-dark-red-20 | COLOR_DARK_RED_20 | --kds-t-color-dark-red-20 | #f1dce1 |
| $color-dark-red-30 | COLOR_DARK_RED_30 | --kds-t-color-dark-red-30 | #e4b5c0 |
| $color-dark-red-40 | COLOR_DARK_RED_40 | --kds-t-color-dark-red-40 | #cf8395 |
| $color-dark-red-50 | COLOR_DARK_RED_50 | --kds-t-color-dark-red-50 | #ca5f77 |
| $color-dark-red-60 | COLOR_DARK_RED_60 | --kds-t-color-dark-red-60 | #b8405b |
| $color-dark-red-70 | COLOR_DARK_RED_70 | --kds-t-color-dark-red-70 | #ac052a |
| $color-dark-red-80 | COLOR_DARK_RED_80 | --kds-t-color-dark-red-80 | #78021b |
| $color-dark-red-90 | COLOR_DARK_RED_90 | --kds-t-color-dark-red-90 | #590111 |
| $color-dark-red-100 | COLOR_DARK_RED_100 | --kds-t-color-dark-red-100 | #370002 |
| $color-dark-turquoise-10 | COLOR_DARK_TURQUOISE_10 | --kds-t-color-dark-turquoise-10 | #f0f6f7 |
| $color-dark-turquoise-20 | COLOR_DARK_TURQUOISE_20 | --kds-t-color-dark-turquoise-20 | #d1e5e8 |
| $color-dark-turquoise-30 | COLOR_DARK_TURQUOISE_30 | --kds-t-color-dark-turquoise-30 | #99c9d2 |
| $color-dark-turquoise-40 | COLOR_DARK_TURQUOISE_40 | --kds-t-color-dark-turquoise-40 | #65a2ae |
| $color-dark-turquoise-50 | COLOR_DARK_TURQUOISE_50 | --kds-t-color-dark-turquoise-50 | #3c8c9b |
| $color-dark-turquoise-60 | COLOR_DARK_TURQUOISE_60 | --kds-t-color-dark-turquoise-60 | #00758b |
| $color-dark-turquoise-70 | COLOR_DARK_TURQUOISE_70 | --kds-t-color-dark-turquoise-70 | #005d6f |
| $color-dark-turquoise-80 | COLOR_DARK_TURQUOISE_80 | --kds-t-color-dark-turquoise-80 | #003f4c |
| $color-dark-turquoise-90 | COLOR_DARK_TURQUOISE_90 | --kds-t-color-dark-turquoise-90 | #002e38 |
| $color-dark-turquoise-100 | COLOR_DARK_TURQUOISE_100 | --kds-t-color-dark-turquoise-100 | #001a20 |
| $color-kela-blue-10 | COLOR_KELA_BLUE_10 | --kds-t-color-kela-blue-10 | #eef6ff |
| $color-kela-blue-20 | COLOR_KELA_BLUE_20 | --kds-t-color-kela-blue-20 | #cfe3ff |
| $color-kela-blue-30 | COLOR_KELA_BLUE_30 | --kds-t-color-kela-blue-30 | #97c4fc |
| $color-kela-blue-40 | COLOR_KELA_BLUE_40 | --kds-t-color-kela-blue-40 | #68a2f6 |
| $color-kela-blue-50 | COLOR_KELA_BLUE_50 | --kds-t-color-kela-blue-50 | #3b81de |
| $color-kela-blue-60 | COLOR_KELA_BLUE_60 | --kds-t-color-kela-blue-60 | #2a69c5 |
| $color-kela-blue-70 | COLOR_KELA_BLUE_70 | --kds-t-color-kela-blue-70 | #1652a6 |
| $color-kela-blue-80 | COLOR_KELA_BLUE_80 | --kds-t-color-kela-blue-80 | #003580 |
| $color-kela-blue-90 | COLOR_KELA_BLUE_90 | --kds-t-color-kela-blue-90 | #00265f |
| $color-kela-blue-100 | COLOR_KELA_BLUE_100 | --kds-t-color-kela-blue-100 | #00143b |
| $color-kela-gray-10 | COLOR_KELA_GRAY_10 | --kds-t-color-kela-gray-10 | #f5f5f5 |
| $color-kela-gray-20 | COLOR_KELA_GRAY_20 | --kds-t-color-kela-gray-20 | #e1e1e1 |
| $color-kela-gray-30 | COLOR_KELA_GRAY_30 | --kds-t-color-kela-gray-30 | #c1c1c1 |
| $color-kela-gray-40 | COLOR_KELA_GRAY_40 | --kds-t-color-kela-gray-40 | #a0a0a0 |
| $color-kela-gray-50 | COLOR_KELA_GRAY_50 | --kds-t-color-kela-gray-50 | #818181 |
| $color-kela-gray-60 | COLOR_KELA_GRAY_60 | --kds-t-color-kela-gray-60 | #6b6b6b |
| $color-kela-gray-70 | COLOR_KELA_GRAY_70 | --kds-t-color-kela-gray-70 | #555555 |
| $color-kela-gray-80 | COLOR_KELA_GRAY_80 | --kds-t-color-kela-gray-80 | #393939 |
| $color-kela-gray-90 | COLOR_KELA_GRAY_90 | --kds-t-color-kela-gray-90 | #292929 |
| $color-kela-gray-100 | COLOR_KELA_GRAY_100 | --kds-t-color-kela-gray-100 | #171717 |
| $color-kela-yellow-10 | COLOR_KELA_YELLOW_10 | --kds-t-color-kela-yellow-10 | #fff4d5 |
| $color-kela-yellow-20 | COLOR_KELA_YELLOW_20 | --kds-t-color-kela-yellow-20 | #ffdf74 |
| $color-kela-yellow-30 | COLOR_KELA_YELLOW_30 | --kds-t-color-kela-yellow-30 | #f8b516 |
| $color-kela-yellow-40 | COLOR_KELA_YELLOW_40 | --kds-t-color-kela-yellow-40 | #cf9710 |
| $color-kela-yellow-50 | COLOR_KELA_YELLOW_50 | --kds-t-color-kela-yellow-50 | #a7790b |
| $color-kela-yellow-60 | COLOR_KELA_YELLOW_60 | --kds-t-color-kela-yellow-60 | #8b6407 |
| $color-kela-yellow-70 | COLOR_KELA_YELLOW_70 | --kds-t-color-kela-yellow-70 | #6f4f04 |
| $color-kela-yellow-80 | COLOR_KELA_YELLOW_80 | --kds-t-color-kela-yellow-80 | #4c3502 |
| $color-kela-yellow-90 | COLOR_KELA_YELLOW_90 | --kds-t-color-kela-yellow-90 | #372601 |
| $color-kela-yellow-100 | COLOR_KELA_YELLOW_100 | --kds-t-color-kela-yellow-100 | #201400 |
| $color-success-green-10 | COLOR_SUCCESS_GREEN_10 | --kds-t-color-success-green-10 | #e7faee |
| $color-success-green-20 | COLOR_SUCCESS_GREEN_20 | --kds-t-color-success-green-20 | #bbedcd |
| $color-success-green-30 | COLOR_SUCCESS_GREEN_30 | --kds-t-color-success-green-30 | #7fd29e |
| $color-success-green-40 | COLOR_SUCCESS_GREEN_40 | --kds-t-color-success-green-40 | #44b56c |
| $color-success-green-50 | COLOR_SUCCESS_GREEN_50 | --kds-t-color-success-green-50 | #09953b |
| $color-success-green-60 | COLOR_SUCCESS_GREEN_60 | --kds-t-color-success-green-60 | #067c30 |
| $color-success-green-70 | COLOR_SUCCESS_GREEN_70 | --kds-t-color-success-green-70 | #046324 |
| $color-success-green-80 | COLOR_SUCCESS_GREEN_80 | --kds-t-color-success-green-80 | #024316 |
| $color-success-green-90 | COLOR_SUCCESS_GREEN_90 | --kds-t-color-success-green-90 | #01310e |
| $color-success-green-100 | COLOR_SUCCESS_GREEN_100 | --kds-t-color-success-green-100 | #001c05 |
| $color-warning-red-10 | COLOR_WARNING_RED_10 | --kds-t-color-warning-red-10 | #fef2f6 |
| $color-warning-red-20 | COLOR_WARNING_RED_20 | --kds-t-color-warning-red-20 | #fcd8e3 |
| $color-warning-red-30 | COLOR_WARNING_RED_30 | --kds-t-color-warning-red-30 | #f9aac6 |
| $color-warning-red-40 | COLOR_WARNING_RED_40 | --kds-t-color-warning-red-40 | #f677a1 |
| $color-warning-red-50 | COLOR_WARNING_RED_50 | --kds-t-color-warning-red-50 | #f1316d |
| $color-warning-red-60 | COLOR_WARNING_RED_60 | --kds-t-color-warning-red-60 | #cf1a55 |
| $color-warning-red-70 | COLOR_WARNING_RED_70 | --kds-t-color-warning-red-70 | #ab0a2c |
| $color-warning-red-80 | COLOR_WARNING_RED_80 | --kds-t-color-warning-red-80 | #77051b |
| $color-warning-red-90 | COLOR_WARNING_RED_90 | --kds-t-color-warning-red-90 | #590312 |
| $color-warning-red-100 | COLOR_WARNING_RED_100 | --kds-t-color-warning-red-100 | #370103 |
| $color-warning-yellow-10 | COLOR_WARNING_YELLOW_10 | --kds-t-color-warning-yellow-10 | #fff4dc |
| $color-warning-yellow-20 | COLOR_WARNING_YELLOW_20 | --kds-t-color-warning-yellow-20 | #fedd9f |
| $color-warning-yellow-30 | COLOR_WARNING_YELLOW_30 | --kds-t-color-warning-yellow-30 | #f8b516 |
| $color-warning-yellow-40 | COLOR_WARNING_YELLOW_40 | --kds-t-color-warning-yellow-40 | #cf9710 |
| $color-warning-yellow-50 | COLOR_WARNING_YELLOW_50 | --kds-t-color-warning-yellow-50 | #a7790b |
| $color-warning-yellow-60 | COLOR_WARNING_YELLOW_60 | --kds-t-color-warning-yellow-60 | #8b6407 |
| $color-warning-yellow-70 | COLOR_WARNING_YELLOW_70 | --kds-t-color-warning-yellow-70 | #6f4f04 |
| $color-warning-yellow-80 | COLOR_WARNING_YELLOW_80 | --kds-t-color-warning-yellow-80 | #4c3502 |
| $color-warning-yellow-90 | COLOR_WARNING_YELLOW_90 | --kds-t-color-warning-yellow-90 | #372601 |
| $color-warning-yellow-100 | COLOR_WARNING_YELLOW_100 | --kds-t-color-warning-yellow-100 | #201400 |
| $color-white | COLOR_WHITE | --kds-t-color-white | #ffffff |
Color (Kanta)
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $color-kanta-blue-10 | COLOR_KANTA_BLUE_10 | --kds-t-color-kanta-blue-10 | #edf7f9 |
| $color-kanta-blue-20 | COLOR_KANTA_BLUE_20 | --kds-t-color-kanta-blue-20 | #bee8f4 |
| $color-kanta-blue-30 | COLOR_KANTA_BLUE_30 | --kds-t-color-kanta-blue-30 | #6fcee2 |
| $color-kanta-blue-40 | COLOR_KANTA_BLUE_40 | --kds-t-color-kanta-blue-40 | #35aec8 |
| $color-kanta-blue-50 | COLOR_KANTA_BLUE_50 | --kds-t-color-kanta-blue-50 | #008dab |
| $color-kanta-blue-60 | COLOR_KANTA_BLUE_60 | --kds-t-color-kanta-blue-60 | #007496 |
| $color-kanta-blue-70 | COLOR_KANTA_BLUE_70 | --kds-t-color-kanta-blue-70 | #005c7b |
| $color-kanta-blue-80 | COLOR_KANTA_BLUE_80 | --kds-t-color-kanta-blue-80 | #003e54 |
| $color-kanta-blue-90 | COLOR_KANTA_BLUE_90 | --kds-t-color-kanta-blue-90 | #002c3f |
| $color-kanta-blue-100 | COLOR_KANTA_BLUE_100 | --kds-t-color-kanta-blue-100 | #001924 |
| $color-kanta-gray-10 | COLOR_KANTA_GRAY_10 | --kds-t-color-kanta-gray-10 | #f5f5f5 |
| $color-kanta-gray-20 | COLOR_KANTA_GRAY_20 | --kds-t-color-kanta-gray-20 | #e1e1e1 |
| $color-kanta-gray-30 | COLOR_KANTA_GRAY_30 | --kds-t-color-kanta-gray-30 | #c1c1c1 |
| $color-kanta-gray-40 | COLOR_KANTA_GRAY_40 | --kds-t-color-kanta-gray-40 | #a0a0a0 |
| $color-kanta-gray-50 | COLOR_KANTA_GRAY_50 | --kds-t-color-kanta-gray-50 | #818181 |
| $color-kanta-gray-60 | COLOR_KANTA_GRAY_60 | --kds-t-color-kanta-gray-60 | #6b6b6b |
| $color-kanta-gray-70 | COLOR_KANTA_GRAY_70 | --kds-t-color-kanta-gray-70 | #555555 |
| $color-kanta-gray-80 | COLOR_KANTA_GRAY_80 | --kds-t-color-kanta-gray-80 | #393939 |
| $color-kanta-gray-90 | COLOR_KANTA_GRAY_90 | --kds-t-color-kanta-gray-90 | #292929 |
| $color-kanta-gray-100 | COLOR_KANTA_GRAY_100 | --kds-t-color-kanta-gray-100 | #171717 |
| $color-kanta-green-10 | COLOR_KANTA_GREEN_10 | --kds-t-color-kanta-green-10 | #edf9df |
| $color-kanta-green-20 | COLOR_KANTA_GREEN_20 | --kds-t-color-kanta-green-20 | #c5e994 |
| $color-kanta-green-30 | COLOR_KANTA_GREEN_30 | --kds-t-color-kanta-green-30 | #9fd063 |
| $color-kanta-green-40 | COLOR_KANTA_GREEN_40 | --kds-t-color-kanta-green-40 | #78b02b |
| $color-kanta-green-50 | COLOR_KANTA_GREEN_50 | --kds-t-color-kanta-green-50 | #589000 |
| $color-kanta-green-60 | COLOR_KANTA_GREEN_60 | --kds-t-color-kanta-green-60 | #437800 |
| $color-kanta-green-70 | COLOR_KANTA_GREEN_70 | --kds-t-color-kanta-green-70 | #306000 |
| $color-kanta-green-80 | COLOR_KANTA_GREEN_80 | --kds-t-color-kanta-green-80 | #1b4200 |
| $color-kanta-green-90 | COLOR_KANTA_GREEN_90 | --kds-t-color-kanta-green-90 | #0e3000 |
| $color-kanta-green-100 | COLOR_KANTA_GREEN_100 | --kds-t-color-kanta-green-100 | #051b00 |
| $color-kanta-success-green-10 | COLOR_KANTA_SUCCESS_GREEN_10 | --kds-t-color-kanta-success-green-10 | #edf9df |
| $color-kanta-success-green-20 | COLOR_KANTA_SUCCESS_GREEN_20 | --kds-t-color-kanta-success-green-20 | #c5e994 |
| $color-kanta-success-green-30 | COLOR_KANTA_SUCCESS_GREEN_30 | --kds-t-color-kanta-success-green-30 | #9fd063 |
| $color-kanta-success-green-40 | COLOR_KANTA_SUCCESS_GREEN_40 | --kds-t-color-kanta-success-green-40 | #78b02b |
| $color-kanta-success-green-50 | COLOR_KANTA_SUCCESS_GREEN_50 | --kds-t-color-kanta-success-green-50 | #589000 |
| $color-kanta-success-green-60 | COLOR_KANTA_SUCCESS_GREEN_60 | --kds-t-color-kanta-success-green-60 | #437800 |
| $color-kanta-success-green-70 | COLOR_KANTA_SUCCESS_GREEN_70 | --kds-t-color-kanta-success-green-70 | #306000 |
| $color-kanta-success-green-80 | COLOR_KANTA_SUCCESS_GREEN_80 | --kds-t-color-kanta-success-green-80 | #1b4200 |
| $color-kanta-success-green-90 | COLOR_KANTA_SUCCESS_GREEN_90 | --kds-t-color-kanta-success-green-90 | #0e3000 |
| $color-kanta-success-green-100 | COLOR_KANTA_SUCCESS_GREEN_100 | --kds-t-color-kanta-success-green-100 | #051b00 |
| $color-kanta-warning-red-10 | COLOR_KANTA_WARNING_RED_10 | --kds-t-color-kanta-warning-red-10 | #fff2f0 |
| $color-kanta-warning-red-20 | COLOR_KANTA_WARNING_RED_20 | --kds-t-color-kanta-warning-red-20 | #fed9d2 |
| $color-kanta-warning-red-30 | COLOR_KANTA_WARNING_RED_30 | --kds-t-color-kanta-warning-red-30 | #fead9d |
| $color-kanta-warning-red-40 | COLOR_KANTA_WARNING_RED_40 | --kds-t-color-kanta-warning-red-40 | #fe7766 |
| $color-kanta-warning-red-50 | COLOR_KANTA_WARNING_RED_50 | --kds-t-color-kanta-warning-red-50 | #fd1b2d |
| $color-kanta-warning-red-60 | COLOR_KANTA_WARNING_RED_60 | --kds-t-color-kanta-warning-red-60 | #d60929 |
| $color-kanta-warning-red-70 | COLOR_KANTA_WARNING_RED_70 | --kds-t-color-kanta-warning-red-70 | #ad031e |
| $color-kanta-warning-red-80 | COLOR_KANTA_WARNING_RED_80 | --kds-t-color-kanta-warning-red-80 | #790112 |
| $color-kanta-warning-red-90 | COLOR_KANTA_WARNING_RED_90 | --kds-t-color-kanta-warning-red-90 | #5a010a |
| $color-kanta-warning-red-100 | COLOR_KANTA_WARNING_RED_100 | --kds-t-color-kanta-warning-red-100 | #370004 |
| $color-kanta-warning-yellow-10 | COLOR_KANTA_WARNING_YELLOW_10 | --kds-t-color-kanta-warning-yellow-10 | #fff6cb |
| $color-kanta-warning-yellow-20 | COLOR_KANTA_WARNING_YELLOW_20 | --kds-t-color-kanta-warning-yellow-20 | #ffdf69 |
| $color-kanta-warning-yellow-30 | COLOR_KANTA_WARNING_YELLOW_30 | --kds-t-color-kanta-warning-yellow-30 | #eeba00 |
| $color-kanta-warning-yellow-40 | COLOR_KANTA_WARNING_YELLOW_40 | --kds-t-color-kanta-warning-yellow-40 | #c79a00 |
| $color-kanta-warning-yellow-50 | COLOR_KANTA_WARNING_YELLOW_50 | --kds-t-color-kanta-warning-yellow-50 | #a17c00 |
| $color-kanta-warning-yellow-60 | COLOR_KANTA_WARNING_YELLOW_60 | --kds-t-color-kanta-warning-yellow-60 | #866700 |
| $color-kanta-warning-yellow-70 | COLOR_KANTA_WARNING_YELLOW_70 | --kds-t-color-kanta-warning-yellow-70 | #6a5100 |
| $color-kanta-warning-yellow-80 | COLOR_KANTA_WARNING_YELLOW_80 | --kds-t-color-kanta-warning-yellow-80 | #493700 |
| $color-kanta-warning-yellow-90 | COLOR_KANTA_WARNING_YELLOW_90 | --kds-t-color-kanta-warning-yellow-90 | #352700 |
| $color-kanta-warning-yellow-100 | COLOR_KANTA_WARNING_YELLOW_100 | --kds-t-color-kanta-warning-yellow-100 | #1f1500 |
Container
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $container-width-relative-sm | CONTAINER_WIDTH_RELATIVE_SM | --kds-t-container-width-relative-sm | 34rem |
| $container-width-relative-md | CONTAINER_WIDTH_RELATIVE_MD | --kds-t-container-width-relative-md | 45rem |
| $container-width-relative-lg | CONTAINER_WIDTH_RELATIVE_LG | --kds-t-container-width-relative-lg | 60rem |
| $container-width-relative-xl | CONTAINER_WIDTH_RELATIVE_XL | --kds-t-container-width-relative-xl | 72rem |
| $container-width-relative-2xl | CONTAINER_WIDTH_RELATIVE_2XL | --kds-t-container-width-relative-2xl | 83rem |
| $container-width-relative-3xl | CONTAINER_WIDTH_RELATIVE_3XL | --kds-t-container-width-relative-3xl | 96rem |
| $container-width-sm | CONTAINER_WIDTH_SM | --kds-t-container-width-sm | 544px |
| $container-width-md | CONTAINER_WIDTH_MD | --kds-t-container-width-md | 720px |
| $container-width-lg | CONTAINER_WIDTH_LG | --kds-t-container-width-lg | 960px |
| $container-width-xl | CONTAINER_WIDTH_XL | --kds-t-container-width-xl | 1152px |
| $container-width-2xl | CONTAINER_WIDTH_2XL | --kds-t-container-width-2xl | 1328px |
| $container-width-3xl | CONTAINER_WIDTH_3XL | --kds-t-container-width-3xl | 1536px |
Duration
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $duration-small-exit | DURATION_SMALL_EXIT | --kds-t-duration-small-exit | 50 |
| $duration-small-default | DURATION_SMALL_DEFAULT | --kds-t-duration-small-default | 75 |
| $duration-medium-exit | DURATION_MEDIUM_EXIT | --kds-t-duration-medium-exit | 125 |
| $duration-small-enter | DURATION_SMALL_ENTER | --kds-t-duration-small-enter | 125 |
| $duration-medium-default | DURATION_MEDIUM_DEFAULT | --kds-t-duration-medium-default | 150 |
| $duration-large-exit | DURATION_LARGE_EXIT | --kds-t-duration-large-exit | 175 |
| $duration-large-default | DURATION_LARGE_DEFAULT | --kds-t-duration-large-default | 200 |
| $duration-medium-enter | DURATION_MEDIUM_ENTER | --kds-t-duration-medium-enter | 200 |
| $duration-large-enter | DURATION_LARGE_ENTER | --kds-t-duration-large-enter | 250 |
Easing
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $easing-accelerate | EASING_ACCELERATE | --kds-t-easing-accelerate | cubic-bezier(0.4, 0.0, 1, 1) |
| $easing-decelerate | EASING_DECELERATE | --kds-t-easing-decelerate | cubic-bezier(0.0, 0.0, 0.2, 1) |
| $easing-default | EASING_DEFAULT | --kds-t-easing-default | cubic-bezier(0.4, 0.0, 0.2, 1) |
Focus
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $focus-color-dark | FOCUS_COLOR_DARK | --kds-t-focus-color-dark | #393939 |
| $focus-color-light | FOCUS_COLOR_LIGHT | --kds-t-focus-color-light | #ffffff |
| $focus-offset | FOCUS_OFFSET | --kds-t-focus-offset | 2px |
| $focus-ring-inset-dark | FOCUS_RING_INSET_DARK | --kds-t-focus-ring-inset-dark | inset 0 0 0 3px #393939 |
| $focus-ring-inset-light | FOCUS_RING_INSET_LIGHT | --kds-t-focus-ring-inset-light | inset 0 0 0 3px #ffffff |
| $focus-ring-offset-dark | FOCUS_RING_OFFSET_DARK | --kds-t-focus-ring-offset-dark | 0 0 0 2px #ffffff, 0 0 0.1px 5px #393939 |
| $focus-ring-offset-light | FOCUS_RING_OFFSET_LIGHT | --kds-t-focus-ring-offset-light | 0 0 0 2px #393939, 0 0 0 5px #ffffff |
| $focus-width | FOCUS_WIDTH | --kds-t-focus-width | 3px |
Font
Font family
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $font-family-sans-serif-skolt-sami | FONT_FAMILY_SANS_SERIF_SKOLT_SAMI | --kds-t-font-family-sans-serif-skolt-sami | 'Fira Sans' |
| $font-family-sans-serif-alt | FONT_FAMILY_SANS_SERIF_ALT | --kds-t-font-family-sans-serif-alt | 'Noto Sans', -apple-system, BlinkMacSystemFont, 'S... |
| $font-family-sans-serif | FONT_FAMILY_SANS_SERIF | --kds-t-font-family-sans-serif | Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI... |
| $font-family-monospace | FONT_FAMILY_MONOSPACE | --kds-t-font-family-monospace | SFMono-Regular, Menlo, Monaco, Consolas, 'Liberati... |
Font family (Kanta)
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $font-family-kanta-monospace | FONT_FAMILY_KANTA_MONOSPACE | --kds-t-font-family-kanta-monospace | SFMono-Regular, Menlo, Monaco, Consolas, 'Liberati... |
| $font-family-kanta-sans-serif | FONT_FAMILY_KANTA_SANS_SERIF | --kds-t-font-family-kanta-sans-serif | Montserrat, Arial, -apple-system, BlinkMacSystemFo... |
| $font-family-kanta-sans-serif-alt | FONT_FAMILY_KANTA_SANS_SERIF_ALT | --kds-t-font-family-kanta-sans-serif-alt | Nunito, Arial, -apple-system, BlinkMacSystemFont, ... |
Font size
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $font-size-sm | FONT_SIZE_SM | --kds-t-font-size-sm | 0.875rem |
| $font-size-base | FONT_SIZE_BASE | --kds-t-font-size-base | 1rem |
| $font-size-lg | FONT_SIZE_LG | --kds-t-font-size-lg | 1.125rem |
| $font-size-2xl | FONT_SIZE_2XL | --kds-t-font-size-2xl | 1.375rem |
| $font-size-3xl | FONT_SIZE_3XL | --kds-t-font-size-3xl | 1.625rem |
| $font-size-4xl | FONT_SIZE_4XL | --kds-t-font-size-4xl | 1.875rem |
| $font-size-xl | FONT_SIZE_XL | --kds-t-font-size-xl | 1.1875rem |
| $font-size-5xl | FONT_SIZE_5XL | --kds-t-font-size-5xl | 2.1875rem |
| $font-size-6xl | FONT_SIZE_6XL | --kds-t-font-size-6xl | 2.5625rem |
| $font-size-7xl | FONT_SIZE_7XL | --kds-t-font-size-7xl | 3rem |
| $font-size-8xl | FONT_SIZE_8XL | --kds-t-font-size-8xl | 3.5rem |
| $font-size-9xl | FONT_SIZE_9XL | --kds-t-font-size-9xl | 4.125rem |
Font weight
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $font-weight-normal | FONT_WEIGHT_NORMAL | --kds-t-font-weight-normal | 400 |
| $font-weight-semibold | FONT_WEIGHT_SEMIBOLD | --kds-t-font-weight-semibold | 600 |
| $font-weight-bold | FONT_WEIGHT_BOLD | --kds-t-font-weight-bold | 700 |
Icon
Icon size
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $icon-size-xs | ICON_SIZE_XS | --kds-t-icon-size-xs | 1em |
| $icon-size-sm | ICON_SIZE_SM | --kds-t-icon-size-sm | 1.5rem |
| $icon-size-md | ICON_SIZE_MD | --kds-t-icon-size-md | 2rem |
| $icon-size-lg | ICON_SIZE_LG | --kds-t-icon-size-lg | 3rem |
| $icon-size-xl | ICON_SIZE_XL | --kds-t-icon-size-xl | 4rem |
| $icon-size-xxl | ICON_SIZE_XXL | --kds-t-icon-size-xxl | 5rem |
Icon stroke
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $icon-stroke-width-xxl | ICON_STROKE_WIDTH_XXL | --kds-t-icon-stroke-width-xxl | 0.7 |
| $icon-stroke-width-xl | ICON_STROKE_WIDTH_XL | --kds-t-icon-stroke-width-xl | 0.8 |
| $icon-stroke-width-lg | ICON_STROKE_WIDTH_LG | --kds-t-icon-stroke-width-lg | 1.2 |
| $icon-stroke-width-md | ICON_STROKE_WIDTH_MD | --kds-t-icon-stroke-width-md | 1.4 |
| $icon-stroke-width-sm | ICON_STROKE_WIDTH_SM | --kds-t-icon-stroke-width-sm | 1.8 |
| $icon-stroke-width-xs | ICON_STROKE_WIDTH_XS | --kds-t-icon-stroke-width-xs | 2 |
Letter spacing
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $letter-spacing-sm | LETTER_SPACING_SM | --kds-t-letter-spacing-sm | -0.02em |
| $letter-spacing-md | LETTER_SPACING_MD | --kds-t-letter-spacing-md | 0 |
| $letter-spacing-lg | LETTER_SPACING_LG | --kds-t-letter-spacing-lg | 0.02em |
Line height
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $line-height-reset | LINE_HEIGHT_RESET | --kds-t-line-height-reset | 1 |
| $line-height-sm | LINE_HEIGHT_SM | --kds-t-line-height-sm | 1.2 |
| $line-height-lg | LINE_HEIGHT_LG | --kds-t-line-height-lg | 1.5 |
| $line-height-md | LINE_HEIGHT_MD | --kds-t-line-height-md | 1.35 |
Link
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $link-decoration-thickness | LINK_DECORATION_THICKNESS | --kds-t-link-decoration-thickness | 1px |
| $link-decoration-thickness-hover | LINK_DECORATION_THICKNESS_HOVER | --kds-t-link-decoration-thickness-hover | 2px |
| $link-underline-offset | LINK_UNDERLINE_OFFSET | --kds-t-link-underline-offset | 0.25rem |
Modular scale
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $modular-scale-ratio-xs | MODULAR_SCALE_RATIO_XS | --kds-t-modular-scale-ratio-xs | 1.10 |
| $modular-scale-ratio-sm | MODULAR_SCALE_RATIO_SM | --kds-t-modular-scale-ratio-sm | 1.12 |
| $modular-scale-ratio-md | MODULAR_SCALE_RATIO_MD | --kds-t-modular-scale-ratio-md | 1.13 |
| $modular-scale-ratio-lg | MODULAR_SCALE_RATIO_LG | --kds-t-modular-scale-ratio-lg | 1.14 |
| $modular-scale-ratio-xl | MODULAR_SCALE_RATIO_XL | --kds-t-modular-scale-ratio-xl | 1.17 |
| $modular-scale-base | MODULAR_SCALE_BASE | --kds-t-modular-scale-base | 1rem |
Spacing
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $spacing-0 | SPACING_0 | --kds-t-spacing-0 | 0 |
| $spacing-1 | SPACING_1 | --kds-t-spacing-1 | 0.25rem |
| $spacing-2 | SPACING_2 | --kds-t-spacing-2 | 0.5rem |
| $spacing-3 | SPACING_3 | --kds-t-spacing-3 | 0.75rem |
| $spacing-4 | SPACING_4 | --kds-t-spacing-4 | 1rem |
| $spacing-5 | SPACING_5 | --kds-t-spacing-5 | 1.25rem |
| $spacing-6 | SPACING_6 | --kds-t-spacing-6 | 1.5rem |
| $spacing-7 | SPACING_7 | --kds-t-spacing-7 | 1.75rem |
| $spacing-8 | SPACING_8 | --kds-t-spacing-8 | 2rem |
| $spacing-9 | SPACING_9 | --kds-t-spacing-9 | 2.25rem |
| $spacing-10 | SPACING_10 | --kds-t-spacing-10 | 2.5rem |
| $spacing-12 | SPACING_12 | --kds-t-spacing-12 | 3rem |
| $spacing-14 | SPACING_14 | --kds-t-spacing-14 | 3.5rem |
| $spacing-16 | SPACING_16 | --kds-t-spacing-16 | 4rem |
| $spacing-18 | SPACING_18 | --kds-t-spacing-18 | 4.5rem |
| $spacing-20 | SPACING_20 | --kds-t-spacing-20 | 5rem |
| $spacing-24 | SPACING_24 | --kds-t-spacing-24 | 6rem |
| $spacing-28 | SPACING_28 | --kds-t-spacing-28 | 7rem |
| $spacing-32 | SPACING_32 | --kds-t-spacing-32 | 8rem |
| $spacing-auto | SPACING_AUTO | --kds-t-spacing-auto | auto |
| $spacing-px | SPACING_PX | --kds-t-spacing-px | 1px |
Timings
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $timings-tooltip-delay | TIMINGS_TOOLTIP_DELAY | --kds-t-timings-tooltip-delay | 400 |
Z-index
| Sass | JS | CSS | Arvo |
|---|---|---|---|
| $z-index-deep | Z_INDEX_DEEP | --kds-t-z-index-deep | -100 |
| $z-index-default | Z_INDEX_DEFAULT | --kds-t-z-index-default | 1 |
| $z-index-dropdown | Z_INDEX_DROPDOWN | --kds-t-z-index-dropdown | 1000 |
| $z-index-header | Z_INDEX_HEADER | --kds-t-z-index-header | 1020 |
| $z-index-infinite | Z_INDEX_INFINITE | --kds-t-z-index-infinite | 9999 |
| $z-index-modal | Z_INDEX_MODAL | --kds-t-z-index-modal | 1055 |
| $z-index-modal-backdrop | Z_INDEX_MODAL_BACKDROP | --kds-t-z-index-modal-backdrop | 1050 |
| $z-index-sidebar | Z_INDEX_SIDEBAR | --kds-t-z-index-sidebar | 1030 |
| $z-index-toast | Z_INDEX_TOAST | --kds-t-z-index-toast | 1040 |
| $z-index-tooltip | Z_INDEX_TOOLTIP | --kds-t-z-index-tooltip | 1080 |