Teemamuuttujat
Design-muuttujat Kela- ja Kanta-teemojen, sekä vaalean ja tumman tilan toteutukseen.
Muuttujat
Värit
| Muuttuja | Arvo |
|---|---|
JS/JSON: color.black JS variable: COLOR_BLACK Sass: $color-black CSS-muuttuja: var(--kds-color-black) | #000000 color.black.black |
JS/JSON: color.white JS variable: COLOR_WHITE Sass: $color-white CSS-muuttuja: var(--kds-color-white) | #ffffff color.white.white |
JS/JSON: color.base.primary JS variable: COLOR_BASE_PRIMARY Sass: $color-base-primary CSS-muuttuja: var(--kds-color-base-primary) | #2a69c5 color.kela.blue.60 |
JS/JSON: color.base.success JS variable: COLOR_BASE_SUCCESS Sass: $color-base-success CSS-muuttuja: var(--kds-color-base-success) | #067c30 color.kela.success.green.60 |
JS/JSON: color.base.warning JS variable: COLOR_BASE_WARNING Sass: $color-base-warning CSS-muuttuja: var(--kds-color-base-warning) | #f8b516 color.kela.warning.yellow.30 |
JS/JSON: color.base.danger JS variable: COLOR_BASE_DANGER Sass: $color-base-danger CSS-muuttuja: var(--kds-color-base-danger) | #cf1a55 color.kela.danger.red.60 |
JS/JSON: color.base.light JS variable: COLOR_BASE_LIGHT Sass: $color-base-light CSS-muuttuja: var(--kds-color-base-light) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.base.dark JS variable: COLOR_BASE_DARK Sass: $color-base-dark CSS-muuttuja: var(--kds-color-base-dark) | #292929 color.kela.gray.90 |
JS/JSON: color.base.white JS variable: COLOR_BASE_WHITE Sass: $color-base-white CSS-muuttuja: var(--kds-color-base-white) | #ffffff color.white.white |
JS/JSON: color.base.black JS variable: COLOR_BASE_BLACK Sass: $color-base-black CSS-muuttuja: var(--kds-color-base-black) | #000000 color.black.black |
JS/JSON: color.base.border JS variable: COLOR_BASE_BORDER Sass: $color-base-border CSS-muuttuja: var(--kds-color-base-border) | #e1e1e1 color.kela.gray.20 |
JS/JSON: color.base.link JS variable: COLOR_BASE_LINK Sass: $color-base-link CSS-muuttuja: var(--kds-color-base-link) | #2a69c5 color.kela.blue.60 |
JS/JSON: color.base.text JS variable: COLOR_BASE_TEXT Sass: $color-base-text CSS-muuttuja: var(--kds-color-base-text) | #171717 color.kela.gray.100 |
JS/JSON: color.base.text-dark JS variable: COLOR_BASE_TEXT_DARK Sass: $color-base-text-dark CSS-muuttuja: var(--kds-color-base-text-dark) | #171717 color.kela.gray.100 |
JS/JSON: color.base.text-light JS variable: COLOR_BASE_TEXT_LIGHT Sass: $color-base-text-light CSS-muuttuja: var(--kds-color-base-text-light) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.base.text-muted JS variable: COLOR_BASE_TEXT_MUTED Sass: $color-base-text-muted CSS-muuttuja: var(--kds-color-base-text-muted) | #6b6b6b color.kela.gray.60 |
JS/JSON: color.focus.inner JS variable: COLOR_FOCUS_INNER Sass: $color-focus-inner CSS-muuttuja: var(--kds-color-focus-inner) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.focus.outer JS variable: COLOR_FOCUS_OUTER Sass: $color-focus-outer CSS-muuttuja: var(--kds-color-focus-outer) | #393939 color.kela.gray.80 |
JS/JSON: color.brand.primary JS variable: COLOR_BRAND_PRIMARY Sass: $color-brand-primary CSS-muuttuja: var(--kds-color-brand-primary) | #003580 color.kela.blue.80 |
JS/JSON: color.brand.secondary JS variable: COLOR_BRAND_SECONDARY Sass: $color-brand-secondary CSS-muuttuja: var(--kds-color-brand-secondary) | #f8b516 color.kela.yellow.30 |
JS/JSON: color.bg JS variable: COLOR_BG Sass: $color-bg CSS-muuttuja: var(--kds-color-bg) | #ffffff color.white.white |
JS/JSON: color.border JS variable: COLOR_BORDER Sass: $color-border CSS-muuttuja: var(--kds-color-border) | #e1e1e1 color.kela.gray.20 |
JS/JSON: color.inactive.bg JS variable: COLOR_INACTIVE_BG Sass: $color-inactive-bg CSS-muuttuja: var(--kds-color-inactive-bg) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.inactive.bg.solid JS variable: COLOR_INACTIVE_BG_SOLID Sass: $color-inactive-bg-solid CSS-muuttuja: var(--kds-color-inactive-bg-solid) | #c1c1c1 color.kela.gray.30 |
JS/JSON: color.inactive.bg.outline JS variable: COLOR_INACTIVE_BG_OUTLINE Sass: $color-inactive-bg-outline CSS-muuttuja: var(--kds-color-inactive-bg-outline) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.inactive.bg.ghost JS variable: COLOR_INACTIVE_BG_GHOST Sass: $color-inactive-bg-ghost CSS-muuttuja: var(--kds-color-inactive-bg-ghost) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.inactive.border JS variable: COLOR_INACTIVE_BORDER Sass: $color-inactive-border CSS-muuttuja: var(--kds-color-inactive-border) | #c1c1c1 color.kela.gray.30 |
JS/JSON: color.inactive.border.solid JS variable: COLOR_INACTIVE_BORDER_SOLID Sass: $color-inactive-border-solid CSS-muuttuja: var(--kds-color-inactive-border-solid) | #c1c1c1 color.kela.gray.30 |
JS/JSON: color.inactive.border.outline JS variable: COLOR_INACTIVE_BORDER_OUTLINE Sass: $color-inactive-border-outline CSS-muuttuja: var(--kds-color-inactive-border-outline) | #c1c1c1 color.kela.gray.30 |
JS/JSON: color.inactive.border.ghost JS variable: COLOR_INACTIVE_BORDER_GHOST Sass: $color-inactive-border-ghost CSS-muuttuja: var(--kds-color-inactive-border-ghost) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.inactive.text JS variable: COLOR_INACTIVE_TEXT Sass: $color-inactive-text CSS-muuttuja: var(--kds-color-inactive-text) | #c1c1c1 color.kela.gray.30 |
JS/JSON: color.inactive.text.solid JS variable: COLOR_INACTIVE_TEXT_SOLID Sass: $color-inactive-text-solid CSS-muuttuja: var(--kds-color-inactive-text-solid) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.inactive.text.outline JS variable: COLOR_INACTIVE_TEXT_OUTLINE Sass: $color-inactive-text-outline CSS-muuttuja: var(--kds-color-inactive-text-outline) | #c1c1c1 color.kela.gray.30 |
JS/JSON: color.inactive.text.ghost JS variable: COLOR_INACTIVE_TEXT_GHOST Sass: $color-inactive-text-ghost CSS-muuttuja: var(--kds-color-inactive-text-ghost) | #c1c1c1 color.kela.gray.30 |
JS/JSON: color.input.bg JS variable: COLOR_INPUT_BG Sass: $color-input-bg CSS-muuttuja: var(--kds-color-input-bg) | #ffffff color.white.white |
JS/JSON: color.input.border JS variable: COLOR_INPUT_BORDER Sass: $color-input-border CSS-muuttuja: var(--kds-color-input-border) | #171717 color.kela.gray.100 |
JS/JSON: color.input.disabled JS variable: COLOR_INPUT_DISABLED Sass: $color-input-disabled CSS-muuttuja: var(--kds-color-input-disabled) | #e1e1e1 color.kela.gray.20 |
JS/JSON: color.interactive.accent JS variable: COLOR_INTERACTIVE_ACCENT Sass: $color-interactive-accent CSS-muuttuja: var(--kds-color-interactive-accent) | #2a69c5 color.kela.blue.60 |
JS/JSON: color.interactive.bg JS variable: COLOR_INTERACTIVE_BG Sass: $color-interactive-bg CSS-muuttuja: var(--kds-color-interactive-bg) | #ffffff color.white.white |
JS/JSON: color.interactive.bg.active JS variable: COLOR_INTERACTIVE_BG_ACTIVE Sass: $color-interactive-bg-active CSS-muuttuja: var(--kds-color-interactive-bg-active) | #eef6ff color.kela.blue.10 |
JS/JSON: color.interactive.border JS variable: COLOR_INTERACTIVE_BORDER Sass: $color-interactive-border CSS-muuttuja: var(--kds-color-interactive-border) | #2a69c5 color.kela.blue.60 |
JS/JSON: color.interactive.text JS variable: COLOR_INTERACTIVE_TEXT Sass: $color-interactive-text CSS-muuttuja: var(--kds-color-interactive-text) | #2a69c5 color.kela.blue.60 |
JS/JSON: color.interactive.text.active JS variable: COLOR_INTERACTIVE_TEXT_ACTIVE Sass: $color-interactive-text-active CSS-muuttuja: var(--kds-color-interactive-text-active) | #1652a6 color.kela.blue.70 |
JS/JSON: color.invalid.bg JS variable: COLOR_INVALID_BG Sass: $color-invalid-bg CSS-muuttuja: var(--kds-color-invalid-bg) | #cf1a55 color.kela.danger.red.60 |
JS/JSON: color.invalid.bg.alt JS variable: COLOR_INVALID_BG_ALT Sass: $color-invalid-bg-alt CSS-muuttuja: var(--kds-color-invalid-bg-alt) | #cf1a55 color.kela.danger.red.60 |
JS/JSON: color.invalid.border JS variable: COLOR_INVALID_BORDER Sass: $color-invalid-border CSS-muuttuja: var(--kds-color-invalid-border) | #cf1a55 color.kela.danger.red.60 |
JS/JSON: color.invalid.text JS variable: COLOR_INVALID_TEXT Sass: $color-invalid-text CSS-muuttuja: var(--kds-color-invalid-text) | #cf1a55 color.kela.danger.red.60 |
JS/JSON: color.option.bg.selected JS variable: COLOR_OPTION_BG_SELECTED Sass: $color-option-bg-selected CSS-muuttuja: var(--kds-color-option-bg-selected) | #2a69c5 color.kela.blue.60 |
JS/JSON: color.option.highlight.bg JS variable: COLOR_OPTION_HIGHLIGHT_BG Sass: $color-option-highlight-bg CSS-muuttuja: var(--kds-color-option-highlight-bg) | #2a69c5 color.kela.blue.60 |
JS/JSON: color.option.highlight.bg.text JS variable: COLOR_OPTION_HIGHLIGHT_BG_TEXT Sass: $color-option-highlight-bg-text CSS-muuttuja: var(--kds-color-option-highlight-bg-text) | #cfe3ff color.kela.blue.20 |
JS/JSON: color.text JS variable: COLOR_TEXT Sass: $color-text CSS-muuttuja: var(--kds-color-text) | #171717 color.kela.gray.100 |
JS/JSON: color.text.inverse JS variable: COLOR_TEXT_INVERSE Sass: $color-text-inverse CSS-muuttuja: var(--kds-color-text-inverse) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.text.muted JS variable: COLOR_TEXT_MUTED Sass: $color-text-muted CSS-muuttuja: var(--kds-color-text-muted) | #6b6b6b color.kela.gray.60 |
JS/JSON: color.text.neutral JS variable: COLOR_TEXT_NEUTRAL Sass: $color-text-neutral CSS-muuttuja: var(--kds-color-text-neutral) | #555555 color.kela.gray.70 |
JS/JSON: color.text.heading JS variable: COLOR_TEXT_HEADING Sass: $color-text-heading CSS-muuttuja: var(--kds-color-text-heading) | #393939 color.kela.gray.80 |
JS/JSON: color.overlay.content.border JS variable: COLOR_OVERLAY_CONTENT_BORDER Sass: $color-overlay-content-border CSS-muuttuja: var(--kds-color-overlay-content-border) | #ffffff color.white.white |
JS/JSON: color.overlay.content.bg JS variable: COLOR_OVERLAY_CONTENT_BG Sass: $color-overlay-content-bg CSS-muuttuja: var(--kds-color-overlay-content-bg) | #ffffff color.white.white |
JS/JSON: color.primary JS variable: COLOR_PRIMARY Sass: $color-primary CSS-muuttuja: var(--kds-color-primary) | #2a69c5 color.kela.blue.60 |
JS/JSON: color.primary.alt JS variable: COLOR_PRIMARY_ALT Sass: $color-primary-alt CSS-muuttuja: var(--kds-color-primary-alt) | #2a69c5 color.kela.blue.60 |
JS/JSON: color.primary.accent JS variable: COLOR_PRIMARY_ACCENT Sass: $color-primary-accent CSS-muuttuja: var(--kds-color-primary-accent) | #2a69c5 color.kela.blue.60 |
JS/JSON: color.primary.bg JS variable: COLOR_PRIMARY_BG Sass: $color-primary-bg CSS-muuttuja: var(--kds-color-primary-bg) | #eef6ff color.kela.blue.10 |
JS/JSON: color.primary.bg.hover JS variable: COLOR_PRIMARY_BG_HOVER Sass: $color-primary-bg-hover CSS-muuttuja: var(--kds-color-primary-bg-hover) | #cfe3ff color.kela.blue.20 |
JS/JSON: color.primary.bg.btn JS variable: COLOR_PRIMARY_BG_BTN Sass: $color-primary-bg-btn CSS-muuttuja: var(--kds-color-primary-bg-btn) | #2a69c5 color.kela.blue.60 |
JS/JSON: color.primary.bg.btn.hover JS variable: COLOR_PRIMARY_BG_BTN_HOVER Sass: $color-primary-bg-btn-hover CSS-muuttuja: var(--kds-color-primary-bg-btn-hover) | #1652a6 color.kela.blue.70 |
JS/JSON: color.primary.border JS variable: COLOR_PRIMARY_BORDER Sass: $color-primary-border CSS-muuttuja: var(--kds-color-primary-border) | #97c4fc color.kela.blue.30 |
JS/JSON: color.primary.icon JS variable: COLOR_PRIMARY_ICON Sass: $color-primary-icon CSS-muuttuja: var(--kds-color-primary-icon) | #2a69c5 color.kela.blue.60 |
JS/JSON: color.primary.subtle JS variable: COLOR_PRIMARY_SUBTLE Sass: $color-primary-subtle CSS-muuttuja: var(--kds-color-primary-subtle) | #cfe3ff color.kela.blue.20 |
JS/JSON: color.success JS variable: COLOR_SUCCESS Sass: $color-success CSS-muuttuja: var(--kds-color-success) | #067c30 color.kela.success.green.60 |
JS/JSON: color.success.accent JS variable: COLOR_SUCCESS_ACCENT Sass: $color-success-accent CSS-muuttuja: var(--kds-color-success-accent) | #067c30 color.kela.success.green.60 |
JS/JSON: color.success.bg JS variable: COLOR_SUCCESS_BG Sass: $color-success-bg CSS-muuttuja: var(--kds-color-success-bg) | #e7faee color.kela.success.green.10 |
JS/JSON: color.success.bg.hover JS variable: COLOR_SUCCESS_BG_HOVER Sass: $color-success-bg-hover CSS-muuttuja: var(--kds-color-success-bg-hover) | #bbedcd color.kela.success.green.20 |
JS/JSON: color.success.bg.btn JS variable: COLOR_SUCCESS_BG_BTN Sass: $color-success-bg-btn CSS-muuttuja: var(--kds-color-success-bg-btn) | #067c30 color.kela.success.green.60 |
JS/JSON: color.success.bg.btn.hover JS variable: COLOR_SUCCESS_BG_BTN_HOVER Sass: $color-success-bg-btn-hover CSS-muuttuja: var(--kds-color-success-bg-btn-hover) | #09953b color.kela.success.green.50 |
JS/JSON: color.success.border JS variable: COLOR_SUCCESS_BORDER Sass: $color-success-border CSS-muuttuja: var(--kds-color-success-border) | #7fd29e color.kela.success.green.30 |
JS/JSON: color.success.icon JS variable: COLOR_SUCCESS_ICON Sass: $color-success-icon CSS-muuttuja: var(--kds-color-success-icon) | #067c30 color.kela.success.green.60 |
JS/JSON: color.success.subtle JS variable: COLOR_SUCCESS_SUBTLE Sass: $color-success-subtle CSS-muuttuja: var(--kds-color-success-subtle) | #bbedcd color.kela.success.green.20 |
JS/JSON: color.warning JS variable: COLOR_WARNING Sass: $color-warning CSS-muuttuja: var(--kds-color-warning) | #8b6407 color.kela.warning.yellow.60 |
JS/JSON: color.warning.accent JS variable: COLOR_WARNING_ACCENT Sass: $color-warning-accent CSS-muuttuja: var(--kds-color-warning-accent) | #f8b516 color.kela.warning.yellow.30 |
JS/JSON: color.warning.bg JS variable: COLOR_WARNING_BG Sass: $color-warning-bg CSS-muuttuja: var(--kds-color-warning-bg) | #fff4dc color.kela.warning.yellow.10 |
JS/JSON: color.warning.bg.hover JS variable: COLOR_WARNING_BG_HOVER Sass: $color-warning-bg-hover CSS-muuttuja: var(--kds-color-warning-bg-hover) | #fedd9f color.kela.warning.yellow.20 |
JS/JSON: color.warning.bg.btn JS variable: COLOR_WARNING_BG_BTN Sass: $color-warning-bg-btn CSS-muuttuja: var(--kds-color-warning-bg-btn) | #f8b516 color.kela.warning.yellow.30 |
JS/JSON: color.warning.bg.btn.hover JS variable: COLOR_WARNING_BG_BTN_HOVER Sass: $color-warning-bg-btn-hover CSS-muuttuja: var(--kds-color-warning-bg-btn-hover) | #cf9710 color.kela.warning.yellow.40 |
JS/JSON: color.warning.border JS variable: COLOR_WARNING_BORDER Sass: $color-warning-border CSS-muuttuja: var(--kds-color-warning-border) | #f8b516 color.kela.warning.yellow.30 |
JS/JSON: color.warning.icon JS variable: COLOR_WARNING_ICON Sass: $color-warning-icon CSS-muuttuja: var(--kds-color-warning-icon) | #cf9710 color.kela.warning.yellow.40 |
JS/JSON: color.warning.subtle JS variable: COLOR_WARNING_SUBTLE Sass: $color-warning-subtle CSS-muuttuja: var(--kds-color-warning-subtle) | #fedd9f color.kela.warning.yellow.20 |
JS/JSON: color.danger JS variable: COLOR_DANGER Sass: $color-danger CSS-muuttuja: var(--kds-color-danger) | #cf1a55 color.kela.danger.red.60 |
JS/JSON: color.danger.accent JS variable: COLOR_DANGER_ACCENT Sass: $color-danger-accent CSS-muuttuja: var(--kds-color-danger-accent) | #cf1a55 color.kela.danger.red.60 |
JS/JSON: color.danger.bg JS variable: COLOR_DANGER_BG Sass: $color-danger-bg CSS-muuttuja: var(--kds-color-danger-bg) | #fef2f6 color.kela.danger.red.10 |
JS/JSON: color.danger.bg.hover JS variable: COLOR_DANGER_BG_HOVER Sass: $color-danger-bg-hover CSS-muuttuja: var(--kds-color-danger-bg-hover) | #fcd8e3 color.kela.danger.red.20 |
JS/JSON: color.danger.bg.btn JS variable: COLOR_DANGER_BG_BTN Sass: $color-danger-bg-btn CSS-muuttuja: var(--kds-color-danger-bg-btn) | #cf1a55 color.kela.danger.red.60 |
JS/JSON: color.danger.bg.btn.hover JS variable: COLOR_DANGER_BG_BTN_HOVER Sass: $color-danger-bg-btn-hover CSS-muuttuja: var(--kds-color-danger-bg-btn-hover) | #f1316d color.kela.danger.red.50 |
JS/JSON: color.danger.border JS variable: COLOR_DANGER_BORDER Sass: $color-danger-border CSS-muuttuja: var(--kds-color-danger-border) | #f9aac6 color.kela.danger.red.30 |
JS/JSON: color.danger.icon JS variable: COLOR_DANGER_ICON Sass: $color-danger-icon CSS-muuttuja: var(--kds-color-danger-icon) | #cf1a55 color.kela.danger.red.60 |
JS/JSON: color.danger.subtle JS variable: COLOR_DANGER_SUBTLE Sass: $color-danger-subtle CSS-muuttuja: var(--kds-color-danger-subtle) | #fcd8e3 color.kela.danger.red.20 |
JS/JSON: color.light JS variable: COLOR_LIGHT Sass: $color-light CSS-muuttuja: var(--kds-color-light) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.light.accent JS variable: COLOR_LIGHT_ACCENT Sass: $color-light-accent CSS-muuttuja: var(--kds-color-light-accent) | #c1c1c1 color.kela.gray.30 |
JS/JSON: color.light.bg JS variable: COLOR_LIGHT_BG Sass: $color-light-bg CSS-muuttuja: var(--kds-color-light-bg) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.light.bg.alt JS variable: COLOR_LIGHT_BG_ALT Sass: $color-light-bg-alt CSS-muuttuja: var(--kds-color-light-bg-alt) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.light.bg.hover JS variable: COLOR_LIGHT_BG_HOVER Sass: $color-light-bg-hover CSS-muuttuja: var(--kds-color-light-bg-hover) | #e1e1e1 color.kela.gray.20 |
JS/JSON: color.light.bg.btn JS variable: COLOR_LIGHT_BG_BTN Sass: $color-light-bg-btn CSS-muuttuja: var(--kds-color-light-bg-btn) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.light.bg.btn.hover JS variable: COLOR_LIGHT_BG_BTN_HOVER Sass: $color-light-bg-btn-hover CSS-muuttuja: var(--kds-color-light-bg-btn-hover) | #e1e1e1 color.kela.gray.20 |
JS/JSON: color.light.border JS variable: COLOR_LIGHT_BORDER Sass: $color-light-border CSS-muuttuja: var(--kds-color-light-border) | #c1c1c1 color.kela.gray.30 |
JS/JSON: color.light.icon JS variable: COLOR_LIGHT_ICON Sass: $color-light-icon CSS-muuttuja: var(--kds-color-light-icon) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.light.subtle JS variable: COLOR_LIGHT_SUBTLE Sass: $color-light-subtle CSS-muuttuja: var(--kds-color-light-subtle) | #e1e1e1 color.kela.gray.20 |
JS/JSON: color.dark JS variable: COLOR_DARK Sass: $color-dark CSS-muuttuja: var(--kds-color-dark) | #292929 color.kela.gray.90 |
JS/JSON: color.dark.accent JS variable: COLOR_DARK_ACCENT Sass: $color-dark-accent CSS-muuttuja: var(--kds-color-dark-accent) | #292929 color.kela.gray.90 |
JS/JSON: color.dark.bg JS variable: COLOR_DARK_BG Sass: $color-dark-bg CSS-muuttuja: var(--kds-color-dark-bg) | #292929 color.kela.gray.90 |
JS/JSON: color.dark.bg.hover JS variable: COLOR_DARK_BG_HOVER Sass: $color-dark-bg-hover CSS-muuttuja: var(--kds-color-dark-bg-hover) | #171717 color.kela.gray.100 |
JS/JSON: color.dark.bg.btn JS variable: COLOR_DARK_BG_BTN Sass: $color-dark-bg-btn CSS-muuttuja: var(--kds-color-dark-bg-btn) | #292929 color.kela.gray.90 |
JS/JSON: color.dark.bg.btn.hover JS variable: COLOR_DARK_BG_BTN_HOVER Sass: $color-dark-bg-btn-hover CSS-muuttuja: var(--kds-color-dark-bg-btn-hover) | #171717 color.kela.gray.100 |
JS/JSON: color.dark.border JS variable: COLOR_DARK_BORDER Sass: $color-dark-border CSS-muuttuja: var(--kds-color-dark-border) | #c1c1c1 color.kela.gray.30 |
JS/JSON: color.dark.icon JS variable: COLOR_DARK_ICON Sass: $color-dark-icon CSS-muuttuja: var(--kds-color-dark-icon) | #292929 color.kela.gray.90 |
JS/JSON: color.neutral JS variable: COLOR_NEUTRAL Sass: $color-neutral CSS-muuttuja: var(--kds-color-neutral) | #393939 color.kela.gray.80 |
JS/JSON: color.neutral.accent JS variable: COLOR_NEUTRAL_ACCENT Sass: $color-neutral-accent CSS-muuttuja: var(--kds-color-neutral-accent) | #555555 color.kela.gray.70 |
JS/JSON: color.neutral.bg JS variable: COLOR_NEUTRAL_BG Sass: $color-neutral-bg CSS-muuttuja: var(--kds-color-neutral-bg) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.neutral.bg.hover JS variable: COLOR_NEUTRAL_BG_HOVER Sass: $color-neutral-bg-hover CSS-muuttuja: var(--kds-color-neutral-bg-hover) | #e1e1e1 color.kela.gray.20 |
JS/JSON: color.neutral.border JS variable: COLOR_NEUTRAL_BORDER Sass: $color-neutral-border CSS-muuttuja: var(--kds-color-neutral-border) | #c1c1c1 color.kela.gray.30 |
JS/JSON: color.neutral.icon JS variable: COLOR_NEUTRAL_ICON Sass: $color-neutral-icon CSS-muuttuja: var(--kds-color-neutral-icon) | #393939 color.kela.gray.80 |
| Muuttuja | Arvo |
|---|---|
JS/JSON: color.black JS variable: COLOR_BLACK Sass: $color-black CSS-muuttuja: var(--kds-color-black) | #121212 color.black.soft |
JS/JSON: color.white JS variable: COLOR_WHITE Sass: $color-white CSS-muuttuja: var(--kds-color-white) | #ffffff color.white.white |
JS/JSON: color.base.primary JS variable: COLOR_BASE_PRIMARY Sass: $color-base-primary CSS-muuttuja: var(--kds-color-base-primary) | #2a69c5 color.kela.blue.60 |
JS/JSON: color.base.success JS variable: COLOR_BASE_SUCCESS Sass: $color-base-success CSS-muuttuja: var(--kds-color-base-success) | #067c30 color.kela.success.green.60 |
JS/JSON: color.base.warning JS variable: COLOR_BASE_WARNING Sass: $color-base-warning CSS-muuttuja: var(--kds-color-base-warning) | #f8b516 color.kela.warning.yellow.30 |
JS/JSON: color.base.danger JS variable: COLOR_BASE_DANGER Sass: $color-base-danger CSS-muuttuja: var(--kds-color-base-danger) | #cf1a55 color.kela.danger.red.60 |
JS/JSON: color.base.light JS variable: COLOR_BASE_LIGHT Sass: $color-base-light CSS-muuttuja: var(--kds-color-base-light) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.base.dark JS variable: COLOR_BASE_DARK Sass: $color-base-dark CSS-muuttuja: var(--kds-color-base-dark) | #292929 color.kela.gray.90 |
JS/JSON: color.base.white JS variable: COLOR_BASE_WHITE Sass: $color-base-white CSS-muuttuja: var(--kds-color-base-white) | #ffffff color.white.white |
JS/JSON: color.base.black JS variable: COLOR_BASE_BLACK Sass: $color-base-black CSS-muuttuja: var(--kds-color-base-black) | #000000 color.black.black |
JS/JSON: color.base.border JS variable: COLOR_BASE_BORDER Sass: $color-base-border CSS-muuttuja: var(--kds-color-base-border) | #e1e1e1 color.kela.gray.20 |
JS/JSON: color.base.link JS variable: COLOR_BASE_LINK Sass: $color-base-link CSS-muuttuja: var(--kds-color-base-link) | #2a69c5 color.kela.blue.60 |
JS/JSON: color.base.text JS variable: COLOR_BASE_TEXT Sass: $color-base-text CSS-muuttuja: var(--kds-color-base-text) | #171717 color.kela.gray.100 |
JS/JSON: color.base.text-dark JS variable: COLOR_BASE_TEXT_DARK Sass: $color-base-text-dark CSS-muuttuja: var(--kds-color-base-text-dark) | #171717 color.kela.gray.100 |
JS/JSON: color.base.text-light JS variable: COLOR_BASE_TEXT_LIGHT Sass: $color-base-text-light CSS-muuttuja: var(--kds-color-base-text-light) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.base.text-muted JS variable: COLOR_BASE_TEXT_MUTED Sass: $color-base-text-muted CSS-muuttuja: var(--kds-color-base-text-muted) | #6b6b6b color.kela.gray.60 |
JS/JSON: color.focus.inner JS variable: COLOR_FOCUS_INNER Sass: $color-focus-inner CSS-muuttuja: var(--kds-color-focus-inner) | #393939 color.kela.gray.80 |
JS/JSON: color.focus.outer JS variable: COLOR_FOCUS_OUTER Sass: $color-focus-outer CSS-muuttuja: var(--kds-color-focus-outer) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.brand.primary JS variable: COLOR_BRAND_PRIMARY Sass: $color-brand-primary CSS-muuttuja: var(--kds-color-brand-primary) | #003580 color.kela.blue.80 |
JS/JSON: color.brand.secondary JS variable: COLOR_BRAND_SECONDARY Sass: $color-brand-secondary CSS-muuttuja: var(--kds-color-brand-secondary) | #f8b516 color.kela.yellow.30 |
JS/JSON: color.bg JS variable: COLOR_BG Sass: $color-bg CSS-muuttuja: var(--kds-color-bg) | #121212 color.black.soft |
JS/JSON: color.border JS variable: COLOR_BORDER Sass: $color-border CSS-muuttuja: var(--kds-color-border) | #393939 color.kela.gray.80 |
JS/JSON: color.inactive.bg JS variable: COLOR_INACTIVE_BG Sass: $color-inactive-bg CSS-muuttuja: var(--kds-color-inactive-bg) | #292929 color.kela.gray.90 |
JS/JSON: color.inactive.bg.solid JS variable: COLOR_INACTIVE_BG_SOLID Sass: $color-inactive-bg-solid CSS-muuttuja: var(--kds-color-inactive-bg-solid) | #555555 color.kela.gray.70 |
JS/JSON: color.inactive.bg.outline JS variable: COLOR_INACTIVE_BG_OUTLINE Sass: $color-inactive-bg-outline CSS-muuttuja: var(--kds-color-inactive-bg-outline) | #292929 color.kela.gray.90 |
JS/JSON: color.inactive.bg.ghost JS variable: COLOR_INACTIVE_BG_GHOST Sass: $color-inactive-bg-ghost CSS-muuttuja: var(--kds-color-inactive-bg-ghost) | #292929 color.kela.gray.90 |
JS/JSON: color.inactive.border JS variable: COLOR_INACTIVE_BORDER Sass: $color-inactive-border CSS-muuttuja: var(--kds-color-inactive-border) | #555555 color.kela.gray.70 |
JS/JSON: color.inactive.border.solid JS variable: COLOR_INACTIVE_BORDER_SOLID Sass: $color-inactive-border-solid CSS-muuttuja: var(--kds-color-inactive-border-solid) | #555555 color.kela.gray.70 |
JS/JSON: color.inactive.border.outline JS variable: COLOR_INACTIVE_BORDER_OUTLINE Sass: $color-inactive-border-outline CSS-muuttuja: var(--kds-color-inactive-border-outline) | #555555 color.kela.gray.70 |
JS/JSON: color.inactive.border.ghost JS variable: COLOR_INACTIVE_BORDER_GHOST Sass: $color-inactive-border-ghost CSS-muuttuja: var(--kds-color-inactive-border-ghost) | #292929 color.kela.gray.90 |
JS/JSON: color.inactive.text JS variable: COLOR_INACTIVE_TEXT Sass: $color-inactive-text CSS-muuttuja: var(--kds-color-inactive-text) | #555555 color.kela.gray.70 |
JS/JSON: color.inactive.text.solid JS variable: COLOR_INACTIVE_TEXT_SOLID Sass: $color-inactive-text-solid CSS-muuttuja: var(--kds-color-inactive-text-solid) | #292929 color.kela.gray.90 |
JS/JSON: color.inactive.text.outline JS variable: COLOR_INACTIVE_TEXT_OUTLINE Sass: $color-inactive-text-outline CSS-muuttuja: var(--kds-color-inactive-text-outline) | #555555 color.kela.gray.70 |
JS/JSON: color.inactive.text.ghost JS variable: COLOR_INACTIVE_TEXT_GHOST Sass: $color-inactive-text-ghost CSS-muuttuja: var(--kds-color-inactive-text-ghost) | #555555 color.kela.gray.70 |
JS/JSON: color.input.bg JS variable: COLOR_INPUT_BG Sass: $color-input-bg CSS-muuttuja: var(--kds-color-input-bg) | #121212 color.black.soft |
JS/JSON: color.input.border JS variable: COLOR_INPUT_BORDER Sass: $color-input-border CSS-muuttuja: var(--kds-color-input-border) | #a0a0a0 color.kela.gray.40 |
JS/JSON: color.input.disabled JS variable: COLOR_INPUT_DISABLED Sass: $color-input-disabled CSS-muuttuja: var(--kds-color-input-disabled) | #292929 color.kela.gray.90 |
JS/JSON: color.interactive.accent JS variable: COLOR_INTERACTIVE_ACCENT Sass: $color-interactive-accent CSS-muuttuja: var(--kds-color-interactive-accent) | #97c4fc color.kela.blue.30 |
JS/JSON: color.interactive.bg JS variable: COLOR_INTERACTIVE_BG Sass: $color-interactive-bg CSS-muuttuja: var(--kds-color-interactive-bg) | #121212 color.black.soft |
JS/JSON: color.interactive.bg.active JS variable: COLOR_INTERACTIVE_BG_ACTIVE Sass: $color-interactive-bg-active CSS-muuttuja: var(--kds-color-interactive-bg-active) | #00265f color.kela.blue.90 |
JS/JSON: color.interactive.border JS variable: COLOR_INTERACTIVE_BORDER Sass: $color-interactive-border CSS-muuttuja: var(--kds-color-interactive-border) | #97c4fc color.kela.blue.30 |
JS/JSON: color.interactive.text JS variable: COLOR_INTERACTIVE_TEXT Sass: $color-interactive-text CSS-muuttuja: var(--kds-color-interactive-text) | #97c4fc color.kela.blue.30 |
JS/JSON: color.interactive.text.active JS variable: COLOR_INTERACTIVE_TEXT_ACTIVE Sass: $color-interactive-text-active CSS-muuttuja: var(--kds-color-interactive-text-active) | #cfe3ff color.kela.blue.20 |
JS/JSON: color.invalid.bg JS variable: COLOR_INVALID_BG Sass: $color-invalid-bg CSS-muuttuja: var(--kds-color-invalid-bg) | #f1316d color.kela.danger.red.50 |
JS/JSON: color.invalid.bg.alt JS variable: COLOR_INVALID_BG_ALT Sass: $color-invalid-bg-alt CSS-muuttuja: var(--kds-color-invalid-bg-alt) | #cf1a55 color.kela.danger.red.60 |
JS/JSON: color.invalid.border JS variable: COLOR_INVALID_BORDER Sass: $color-invalid-border CSS-muuttuja: var(--kds-color-invalid-border) | #f1316d color.kela.danger.red.50 |
JS/JSON: color.invalid.text JS variable: COLOR_INVALID_TEXT Sass: $color-invalid-text CSS-muuttuja: var(--kds-color-invalid-text) | #f1316d color.kela.danger.red.50 |
JS/JSON: color.option.bg.selected JS variable: COLOR_OPTION_BG_SELECTED Sass: $color-option-bg-selected CSS-muuttuja: var(--kds-color-option-bg-selected) | #1652a6 color.kela.blue.70 |
JS/JSON: color.option.highlight.bg JS variable: COLOR_OPTION_HIGHLIGHT_BG Sass: $color-option-highlight-bg CSS-muuttuja: var(--kds-color-option-highlight-bg) | #1652a6 color.kela.blue.70 |
JS/JSON: color.option.highlight.bg.text JS variable: COLOR_OPTION_HIGHLIGHT_BG_TEXT Sass: $color-option-highlight-bg-text CSS-muuttuja: var(--kds-color-option-highlight-bg-text) | #00265f color.kela.blue.90 |
JS/JSON: color.text JS variable: COLOR_TEXT Sass: $color-text CSS-muuttuja: var(--kds-color-text) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.text.inverse JS variable: COLOR_TEXT_INVERSE Sass: $color-text-inverse CSS-muuttuja: var(--kds-color-text-inverse) | #171717 color.kela.gray.100 |
JS/JSON: color.text.muted JS variable: COLOR_TEXT_MUTED Sass: $color-text-muted CSS-muuttuja: var(--kds-color-text-muted) | #a0a0a0 color.kela.gray.40 |
JS/JSON: color.text.neutral JS variable: COLOR_TEXT_NEUTRAL Sass: $color-text-neutral CSS-muuttuja: var(--kds-color-text-neutral) | #c1c1c1 color.kela.gray.30 |
JS/JSON: color.text.heading JS variable: COLOR_TEXT_HEADING Sass: $color-text-heading CSS-muuttuja: var(--kds-color-text-heading) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.overlay.content.border JS variable: COLOR_OVERLAY_CONTENT_BORDER Sass: $color-overlay-content-border CSS-muuttuja: var(--kds-color-overlay-content-border) | #393939 color.kela.gray.80 |
JS/JSON: color.overlay.content.bg JS variable: COLOR_OVERLAY_CONTENT_BG Sass: $color-overlay-content-bg CSS-muuttuja: var(--kds-color-overlay-content-bg) | #171717 color.kela.gray.100 |
JS/JSON: color.primary JS variable: COLOR_PRIMARY Sass: $color-primary CSS-muuttuja: var(--kds-color-primary) | #68a2f6 color.kela.blue.40 |
JS/JSON: color.primary.alt JS variable: COLOR_PRIMARY_ALT Sass: $color-primary-alt CSS-muuttuja: var(--kds-color-primary-alt) | #97c4fc color.kela.blue.30 |
JS/JSON: color.primary.accent JS variable: COLOR_PRIMARY_ACCENT Sass: $color-primary-accent CSS-muuttuja: var(--kds-color-primary-accent) | #68a2f6 color.kela.blue.40 |
JS/JSON: color.primary.bg JS variable: COLOR_PRIMARY_BG Sass: $color-primary-bg CSS-muuttuja: var(--kds-color-primary-bg) | #00265f color.kela.blue.90 |
JS/JSON: color.primary.bg.hover JS variable: COLOR_PRIMARY_BG_HOVER Sass: $color-primary-bg-hover CSS-muuttuja: var(--kds-color-primary-bg-hover) | #003580 color.kela.blue.80 |
JS/JSON: color.primary.bg.btn JS variable: COLOR_PRIMARY_BG_BTN Sass: $color-primary-bg-btn CSS-muuttuja: var(--kds-color-primary-bg-btn) | #1652a6 color.kela.blue.70 |
JS/JSON: color.primary.bg.btn.hover JS variable: COLOR_PRIMARY_BG_BTN_HOVER Sass: $color-primary-bg-btn-hover CSS-muuttuja: var(--kds-color-primary-bg-btn-hover) | #2a69c5 color.kela.blue.60 |
JS/JSON: color.primary.border JS variable: COLOR_PRIMARY_BORDER Sass: $color-primary-border CSS-muuttuja: var(--kds-color-primary-border) | #00265f color.kela.blue.90 |
JS/JSON: color.primary.icon JS variable: COLOR_PRIMARY_ICON Sass: $color-primary-icon CSS-muuttuja: var(--kds-color-primary-icon) | #97c4fc color.kela.blue.30 |
JS/JSON: color.primary.subtle JS variable: COLOR_PRIMARY_SUBTLE Sass: $color-primary-subtle CSS-muuttuja: var(--kds-color-primary-subtle) | #003580 color.kela.blue.80 |
JS/JSON: color.success JS variable: COLOR_SUCCESS Sass: $color-success CSS-muuttuja: var(--kds-color-success) | #7fd29e color.kela.success.green.30 |
JS/JSON: color.success.accent JS variable: COLOR_SUCCESS_ACCENT Sass: $color-success-accent CSS-muuttuja: var(--kds-color-success-accent) | #44b56c color.kela.success.green.40 |
JS/JSON: color.success.bg JS variable: COLOR_SUCCESS_BG Sass: $color-success-bg CSS-muuttuja: var(--kds-color-success-bg) | #01310e color.kela.success.green.90 |
JS/JSON: color.success.bg.hover JS variable: COLOR_SUCCESS_BG_HOVER Sass: $color-success-bg-hover CSS-muuttuja: var(--kds-color-success-bg-hover) | #024316 color.kela.success.green.80 |
JS/JSON: color.success.bg.btn JS variable: COLOR_SUCCESS_BG_BTN Sass: $color-success-bg-btn CSS-muuttuja: var(--kds-color-success-bg-btn) | #046324 color.kela.success.green.70 |
JS/JSON: color.success.bg.btn.hover JS variable: COLOR_SUCCESS_BG_BTN_HOVER Sass: $color-success-bg-btn-hover CSS-muuttuja: var(--kds-color-success-bg-btn-hover) | #067c30 color.kela.success.green.60 |
JS/JSON: color.success.border JS variable: COLOR_SUCCESS_BORDER Sass: $color-success-border CSS-muuttuja: var(--kds-color-success-border) | #01310e color.kela.success.green.90 |
JS/JSON: color.success.icon JS variable: COLOR_SUCCESS_ICON Sass: $color-success-icon CSS-muuttuja: var(--kds-color-success-icon) | #7fd29e color.kela.success.green.30 |
JS/JSON: color.success.subtle JS variable: COLOR_SUCCESS_SUBTLE Sass: $color-success-subtle CSS-muuttuja: var(--kds-color-success-subtle) | #024316 color.kela.success.green.80 |
JS/JSON: color.warning JS variable: COLOR_WARNING Sass: $color-warning CSS-muuttuja: var(--kds-color-warning) | #f8b516 color.kela.warning.yellow.30 |
JS/JSON: color.warning.accent JS variable: COLOR_WARNING_ACCENT Sass: $color-warning-accent CSS-muuttuja: var(--kds-color-warning-accent) | #cf9710 color.kela.warning.yellow.40 |
JS/JSON: color.warning.bg JS variable: COLOR_WARNING_BG Sass: $color-warning-bg CSS-muuttuja: var(--kds-color-warning-bg) | #372601 color.kela.warning.yellow.90 |
JS/JSON: color.warning.bg.hover JS variable: COLOR_WARNING_BG_HOVER Sass: $color-warning-bg-hover CSS-muuttuja: var(--kds-color-warning-bg-hover) | #4c3502 color.kela.warning.yellow.80 |
JS/JSON: color.warning.bg.btn JS variable: COLOR_WARNING_BG_BTN Sass: $color-warning-bg-btn CSS-muuttuja: var(--kds-color-warning-bg-btn) | #f8b516 color.kela.warning.yellow.30 |
JS/JSON: color.warning.bg.btn.hover JS variable: COLOR_WARNING_BG_BTN_HOVER Sass: $color-warning-bg-btn-hover CSS-muuttuja: var(--kds-color-warning-bg-btn-hover) | #cf9710 color.kela.warning.yellow.40 |
JS/JSON: color.warning.border JS variable: COLOR_WARNING_BORDER Sass: $color-warning-border CSS-muuttuja: var(--kds-color-warning-border) | #372601 color.kela.warning.yellow.90 |
JS/JSON: color.warning.icon JS variable: COLOR_WARNING_ICON Sass: $color-warning-icon CSS-muuttuja: var(--kds-color-warning-icon) | #f8b516 color.kela.warning.yellow.30 |
JS/JSON: color.warning.subtle JS variable: COLOR_WARNING_SUBTLE Sass: $color-warning-subtle CSS-muuttuja: var(--kds-color-warning-subtle) | #4c3502 color.kela.warning.yellow.80 |
JS/JSON: color.danger JS variable: COLOR_DANGER Sass: $color-danger CSS-muuttuja: var(--kds-color-danger) | #f677a1 color.kela.danger.red.40 |
JS/JSON: color.danger.accent JS variable: COLOR_DANGER_ACCENT Sass: $color-danger-accent CSS-muuttuja: var(--kds-color-danger-accent) | #f1316d color.kela.danger.red.50 |
JS/JSON: color.danger.bg JS variable: COLOR_DANGER_BG Sass: $color-danger-bg CSS-muuttuja: var(--kds-color-danger-bg) | #590312 color.kela.danger.red.90 |
JS/JSON: color.danger.bg.hover JS variable: COLOR_DANGER_BG_HOVER Sass: $color-danger-bg-hover CSS-muuttuja: var(--kds-color-danger-bg-hover) | #77051b color.kela.danger.red.80 |
JS/JSON: color.danger.bg.btn JS variable: COLOR_DANGER_BG_BTN Sass: $color-danger-bg-btn CSS-muuttuja: var(--kds-color-danger-bg-btn) | #ab0a2c color.kela.danger.red.70 |
JS/JSON: color.danger.bg.btn.hover JS variable: COLOR_DANGER_BG_BTN_HOVER Sass: $color-danger-bg-btn-hover CSS-muuttuja: var(--kds-color-danger-bg-btn-hover) | #cf1a55 color.kela.danger.red.60 |
JS/JSON: color.danger.border JS variable: COLOR_DANGER_BORDER Sass: $color-danger-border CSS-muuttuja: var(--kds-color-danger-border) | #590312 color.kela.danger.red.90 |
JS/JSON: color.danger.icon JS variable: COLOR_DANGER_ICON Sass: $color-danger-icon CSS-muuttuja: var(--kds-color-danger-icon) | #f677a1 color.kela.danger.red.40 |
JS/JSON: color.danger.subtle JS variable: COLOR_DANGER_SUBTLE Sass: $color-danger-subtle CSS-muuttuja: var(--kds-color-danger-subtle) | #77051b color.kela.danger.red.80 |
JS/JSON: color.light JS variable: COLOR_LIGHT Sass: $color-light CSS-muuttuja: var(--kds-color-light) | #292929 color.kela.gray.90 |
JS/JSON: color.light.accent JS variable: COLOR_LIGHT_ACCENT Sass: $color-light-accent CSS-muuttuja: var(--kds-color-light-accent) | #818181 color.kela.gray.50 |
JS/JSON: color.light.bg JS variable: COLOR_LIGHT_BG Sass: $color-light-bg CSS-muuttuja: var(--kds-color-light-bg) | #171717 color.kela.gray.100 |
JS/JSON: color.light.bg.alt JS variable: COLOR_LIGHT_BG_ALT Sass: $color-light-bg-alt CSS-muuttuja: var(--kds-color-light-bg-alt) | #292929 color.kela.gray.90 |
JS/JSON: color.light.bg.hover JS variable: COLOR_LIGHT_BG_HOVER Sass: $color-light-bg-hover CSS-muuttuja: var(--kds-color-light-bg-hover) | #292929 color.kela.gray.90 |
JS/JSON: color.light.bg.btn JS variable: COLOR_LIGHT_BG_BTN Sass: $color-light-bg-btn CSS-muuttuja: var(--kds-color-light-bg-btn) | #e1e1e1 color.kela.gray.20 |
JS/JSON: color.light.bg.btn.hover JS variable: COLOR_LIGHT_BG_BTN_HOVER Sass: $color-light-bg-btn-hover CSS-muuttuja: var(--kds-color-light-bg-btn-hover) | #c1c1c1 color.kela.gray.30 |
JS/JSON: color.light.border JS variable: COLOR_LIGHT_BORDER Sass: $color-light-border CSS-muuttuja: var(--kds-color-light-border) | #292929 color.kela.gray.90 |
JS/JSON: color.light.icon JS variable: COLOR_LIGHT_ICON Sass: $color-light-icon CSS-muuttuja: var(--kds-color-light-icon) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.light.subtle JS variable: COLOR_LIGHT_SUBTLE Sass: $color-light-subtle CSS-muuttuja: var(--kds-color-light-subtle) | #393939 color.kela.gray.80 |
JS/JSON: color.dark JS variable: COLOR_DARK Sass: $color-dark CSS-muuttuja: var(--kds-color-dark) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.dark.accent JS variable: COLOR_DARK_ACCENT Sass: $color-dark-accent CSS-muuttuja: var(--kds-color-dark-accent) | #555555 color.kela.gray.70 |
JS/JSON: color.dark.bg JS variable: COLOR_DARK_BG Sass: $color-dark-bg CSS-muuttuja: var(--kds-color-dark-bg) | #292929 color.kela.gray.90 |
JS/JSON: color.dark.bg.hover JS variable: COLOR_DARK_BG_HOVER Sass: $color-dark-bg-hover CSS-muuttuja: var(--kds-color-dark-bg-hover) | #393939 color.kela.gray.80 |
JS/JSON: color.dark.bg.btn JS variable: COLOR_DARK_BG_BTN Sass: $color-dark-bg-btn CSS-muuttuja: var(--kds-color-dark-bg-btn) | #393939 color.kela.gray.80 |
JS/JSON: color.dark.bg.btn.hover JS variable: COLOR_DARK_BG_BTN_HOVER Sass: $color-dark-bg-btn-hover CSS-muuttuja: var(--kds-color-dark-bg-btn-hover) | #555555 color.kela.gray.70 |
JS/JSON: color.dark.border JS variable: COLOR_DARK_BORDER Sass: $color-dark-border CSS-muuttuja: var(--kds-color-dark-border) | #292929 color.kela.gray.90 |
JS/JSON: color.dark.icon JS variable: COLOR_DARK_ICON Sass: $color-dark-icon CSS-muuttuja: var(--kds-color-dark-icon) | #f5f5f5 color.kela.gray.10 |
JS/JSON: color.neutral JS variable: COLOR_NEUTRAL Sass: $color-neutral CSS-muuttuja: var(--kds-color-neutral) | #e1e1e1 color.kela.gray.20 |
JS/JSON: color.neutral.accent JS variable: COLOR_NEUTRAL_ACCENT Sass: $color-neutral-accent CSS-muuttuja: var(--kds-color-neutral-accent) | #555555 color.kela.gray.70 |
JS/JSON: color.neutral.bg JS variable: COLOR_NEUTRAL_BG Sass: $color-neutral-bg CSS-muuttuja: var(--kds-color-neutral-bg) | #292929 color.kela.gray.90 |
JS/JSON: color.neutral.bg.hover JS variable: COLOR_NEUTRAL_BG_HOVER Sass: $color-neutral-bg-hover CSS-muuttuja: var(--kds-color-neutral-bg-hover) | #393939 color.kela.gray.80 |
JS/JSON: color.neutral.border JS variable: COLOR_NEUTRAL_BORDER Sass: $color-neutral-border CSS-muuttuja: var(--kds-color-neutral-border) | #555555 color.kela.gray.70 |
JS/JSON: color.neutral.icon JS variable: COLOR_NEUTRAL_ICON Sass: $color-neutral-icon CSS-muuttuja: var(--kds-color-neutral-icon) | #e1e1e1 color.kela.gray.20 |
Typografia
| Muuttuja | Arvo |
|---|---|
JS/JSON: typography.heading.font-family JS variable: TYPOGRAPHY_HEADING_FONT_FAMILY Sass: $typography-heading-font-family CSS-muuttuja: var(--kds-typography-heading-font-family) | 'Noto Sans', -apple-system, BlinkMacSystemFont, 'S... font-family.kela.heading |
JS/JSON: typography.heading.font-weight JS variable: TYPOGRAPHY_HEADING_FONT_WEIGHT Sass: $typography-heading-font-weight CSS-muuttuja: var(--kds-typography-heading-font-weight) | 600 font-weight.semibold |
JS/JSON: typography.heading.letter-spacing JS variable: TYPOGRAPHY_HEADING_LETTER_SPACING Sass: $typography-heading-letter-spacing CSS-muuttuja: var(--kds-typography-heading-letter-spacing) | -0.02em letter-spacing.sm |
JS/JSON: typography.heading.line-height JS variable: TYPOGRAPHY_HEADING_LINE_HEIGHT Sass: $typography-heading-line-height CSS-muuttuja: var(--kds-typography-heading-line-height) | 1.35 line-height.md |
JS/JSON: typography.heading.text-transform JS variable: TYPOGRAPHY_HEADING_TEXT_TRANSFORM Sass: $typography-heading-text-transform CSS-muuttuja: var(--kds-typography-heading-text-transform) | none |
JS/JSON: typography.category-heading.font-family JS variable: TYPOGRAPHY_CATEGORY_HEADING_FONT_FAMILY Sass: $typography-category-heading-font-family CSS-muuttuja: var(--kds-typography-category-heading-font-family) | 'Noto Sans', -apple-system, BlinkMacSystemFont, 'S... font-family.kela.heading |
JS/JSON: typography.category-heading.font-size JS variable: TYPOGRAPHY_CATEGORY_HEADING_FONT_SIZE Sass: $typography-category-heading-font-size CSS-muuttuja: var(--kds-typography-category-heading-font-size) | 0.875rem font-size.sm |
JS/JSON: typography.category-heading.font-weight JS variable: TYPOGRAPHY_CATEGORY_HEADING_FONT_WEIGHT Sass: $typography-category-heading-font-weight CSS-muuttuja: var(--kds-typography-category-heading-font-weight) | 700 font-weight.bold |
JS/JSON: typography.category-heading.letter-spacing JS variable: TYPOGRAPHY_CATEGORY_HEADING_LETTER_SPACING Sass: $typography-category-heading-letter-spacing CSS-muuttuja: var(--kds-typography-category-heading-letter-spacing) | 0.02em letter-spacing.lg |
JS/JSON: typography.category-heading.line-height JS variable: TYPOGRAPHY_CATEGORY_HEADING_LINE_HEIGHT Sass: $typography-category-heading-line-height CSS-muuttuja: var(--kds-typography-category-heading-line-height) | 1.2 line-height.sm |
JS/JSON: typography.category-heading.text-transform JS variable: TYPOGRAPHY_CATEGORY_HEADING_TEXT_TRANSFORM Sass: $typography-category-heading-text-transform CSS-muuttuja: var(--kds-typography-category-heading-text-transform) | uppercase |
JS/JSON: typography.body.font-family JS variable: TYPOGRAPHY_BODY_FONT_FAMILY Sass: $typography-body-font-family CSS-muuttuja: var(--kds-typography-body-font-family) | Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI... font-family.kela.body |
JS/JSON: typography.body.font-size JS variable: TYPOGRAPHY_BODY_FONT_SIZE Sass: $typography-body-font-size CSS-muuttuja: var(--kds-typography-body-font-size) | 1rem font-size.base |
JS/JSON: typography.body.font-weight JS variable: TYPOGRAPHY_BODY_FONT_WEIGHT Sass: $typography-body-font-weight CSS-muuttuja: var(--kds-typography-body-font-weight) | 400 font-weight.normal |
JS/JSON: typography.body.letter-spacing JS variable: TYPOGRAPHY_BODY_LETTER_SPACING Sass: $typography-body-letter-spacing CSS-muuttuja: var(--kds-typography-body-letter-spacing) | 0 letter-spacing.md |
JS/JSON: typography.body.line-height JS variable: TYPOGRAPHY_BODY_LINE_HEIGHT Sass: $typography-body-line-height CSS-muuttuja: var(--kds-typography-body-line-height) | 1.5 line-height.lg |
JS/JSON: typography.label.font-size JS variable: TYPOGRAPHY_LABEL_FONT_SIZE Sass: $typography-label-font-size CSS-muuttuja: var(--kds-typography-label-font-size) | 1rem font-size.base |
JS/JSON: typography.label.font-weight JS variable: TYPOGRAPHY_LABEL_FONT_WEIGHT Sass: $typography-label-font-weight CSS-muuttuja: var(--kds-typography-label-font-weight) | 700 font-weight.bold |
JS/JSON: typography.label.letter-spacing JS variable: TYPOGRAPHY_LABEL_LETTER_SPACING Sass: $typography-label-letter-spacing CSS-muuttuja: var(--kds-typography-label-letter-spacing) | 0 letter-spacing.md |
JS/JSON: typography.label.line-height JS variable: TYPOGRAPHY_LABEL_LINE_HEIGHT Sass: $typography-label-line-height CSS-muuttuja: var(--kds-typography-label-line-height) | 1.5 line-height.lg |
JS/JSON: typography.error.font-size JS variable: TYPOGRAPHY_ERROR_FONT_SIZE Sass: $typography-error-font-size CSS-muuttuja: var(--kds-typography-error-font-size) | 1rem font-size.base |
JS/JSON: typography.error.font-weight JS variable: TYPOGRAPHY_ERROR_FONT_WEIGHT Sass: $typography-error-font-weight CSS-muuttuja: var(--kds-typography-error-font-weight) | 700 font-weight.bold |
JS/JSON: typography.error.letter-spacing JS variable: TYPOGRAPHY_ERROR_LETTER_SPACING Sass: $typography-error-letter-spacing CSS-muuttuja: var(--kds-typography-error-letter-spacing) | 0 letter-spacing.md |
JS/JSON: typography.error.line-height JS variable: TYPOGRAPHY_ERROR_LINE_HEIGHT Sass: $typography-error-line-height CSS-muuttuja: var(--kds-typography-error-line-height) | 1.5 line-height.lg |
JS/JSON: typography.help.font-size JS variable: TYPOGRAPHY_HELP_FONT_SIZE Sass: $typography-help-font-size CSS-muuttuja: var(--kds-typography-help-font-size) | 1rem font-size.base |
JS/JSON: typography.help.font-weight JS variable: TYPOGRAPHY_HELP_FONT_WEIGHT Sass: $typography-help-font-weight CSS-muuttuja: var(--kds-typography-help-font-weight) | 400 font-weight.normal |
JS/JSON: typography.help.letter-spacing JS variable: TYPOGRAPHY_HELP_LETTER_SPACING Sass: $typography-help-letter-spacing CSS-muuttuja: var(--kds-typography-help-letter-spacing) | 0 letter-spacing.md |
JS/JSON: typography.help.line-height JS variable: TYPOGRAPHY_HELP_LINE_HEIGHT Sass: $typography-help-line-height CSS-muuttuja: var(--kds-typography-help-line-height) | 1.5 line-height.lg |
JS/JSON: typography.info.font-size JS variable: TYPOGRAPHY_INFO_FONT_SIZE Sass: $typography-info-font-size CSS-muuttuja: var(--kds-typography-info-font-size) | 0.875rem font-size.sm |
JS/JSON: typography.info.font-weight JS variable: TYPOGRAPHY_INFO_FONT_WEIGHT Sass: $typography-info-font-weight CSS-muuttuja: var(--kds-typography-info-font-weight) | 400 font-weight.normal |
JS/JSON: typography.info.letter-spacing JS variable: TYPOGRAPHY_INFO_LETTER_SPACING Sass: $typography-info-letter-spacing CSS-muuttuja: var(--kds-typography-info-letter-spacing) | 0 letter-spacing.md |
JS/JSON: typography.info.line-height JS variable: TYPOGRAPHY_INFO_LINE_HEIGHT Sass: $typography-info-line-height CSS-muuttuja: var(--kds-typography-info-line-height) | 1.5 line-height.lg |
JS/JSON: typography.font-weight.normal JS variable: TYPOGRAPHY_FONT_WEIGHT_NORMAL Sass: $typography-font-weight-normal CSS-muuttuja: var(--kds-typography-font-weight-normal) | 400 font-weight.normal |
JS/JSON: typography.font-weight.semibold JS variable: TYPOGRAPHY_FONT_WEIGHT_SEMIBOLD Sass: $typography-font-weight-semibold CSS-muuttuja: var(--kds-typography-font-weight-semibold) | 600 font-weight.semibold |
JS/JSON: typography.font-weight.bold JS variable: TYPOGRAPHY_FONT_WEIGHT_BOLD Sass: $typography-font-weight-bold CSS-muuttuja: var(--kds-typography-font-weight-bold) | 700 font-weight.bold |
JS/JSON: typography.font-size.sm JS variable: TYPOGRAPHY_FONT_SIZE_SM Sass: $typography-font-size-sm CSS-muuttuja: var(--kds-typography-font-size-sm) | 0.875rem font-size.sm |
JS/JSON: typography.font-size.base JS variable: TYPOGRAPHY_FONT_SIZE_BASE Sass: $typography-font-size-base CSS-muuttuja: var(--kds-typography-font-size-base) | 1rem font-size.base |
JS/JSON: typography.font-size.lg JS variable: TYPOGRAPHY_FONT_SIZE_LG Sass: $typography-font-size-lg CSS-muuttuja: var(--kds-typography-font-size-lg) | 1.125rem font-size.lg |
JS/JSON: typography.font-size.xl JS variable: TYPOGRAPHY_FONT_SIZE_XL Sass: $typography-font-size-xl CSS-muuttuja: var(--kds-typography-font-size-xl) | 1.1875rem font-size.xl |
JS/JSON: typography.font-size.2xl JS variable: TYPOGRAPHY_FONT_SIZE_2XL Sass: $typography-font-size-2xl CSS-muuttuja: var(--kds-typography-font-size-2xl) | 1.375rem font-size.2xl |
JS/JSON: typography.font-size.3xl JS variable: TYPOGRAPHY_FONT_SIZE_3XL Sass: $typography-font-size-3xl CSS-muuttuja: var(--kds-typography-font-size-3xl) | 1.625rem font-size.3xl |
JS/JSON: typography.font-size.4xl JS variable: TYPOGRAPHY_FONT_SIZE_4XL Sass: $typography-font-size-4xl CSS-muuttuja: var(--kds-typography-font-size-4xl) | 1.875rem font-size.4xl |
JS/JSON: typography.font-size.5xl JS variable: TYPOGRAPHY_FONT_SIZE_5XL Sass: $typography-font-size-5xl CSS-muuttuja: var(--kds-typography-font-size-5xl) | 2.1875rem font-size.5xl |
JS/JSON: typography.font-size.6xl JS variable: TYPOGRAPHY_FONT_SIZE_6XL Sass: $typography-font-size-6xl CSS-muuttuja: var(--kds-typography-font-size-6xl) | 2.5625rem font-size.6xl |
JS/JSON: typography.font-size.7xl JS variable: TYPOGRAPHY_FONT_SIZE_7XL Sass: $typography-font-size-7xl CSS-muuttuja: var(--kds-typography-font-size-7xl) | 3rem font-size.7xl |
JS/JSON: typography.font-size.8xl JS variable: TYPOGRAPHY_FONT_SIZE_8XL Sass: $typography-font-size-8xl CSS-muuttuja: var(--kds-typography-font-size-8xl) | 3.5rem font-size.8xl |
JS/JSON: typography.font-size.9xl JS variable: TYPOGRAPHY_FONT_SIZE_9XL Sass: $typography-font-size-9xl CSS-muuttuja: var(--kds-typography-font-size-9xl) | 4.125rem font-size.9xl |
JS/JSON: typography.letter-spacing.sm JS variable: TYPOGRAPHY_LETTER_SPACING_SM Sass: $typography-letter-spacing-sm CSS-muuttuja: var(--kds-typography-letter-spacing-sm) | -0.02em letter-spacing.sm |
JS/JSON: typography.letter-spacing.md JS variable: TYPOGRAPHY_LETTER_SPACING_MD Sass: $typography-letter-spacing-md CSS-muuttuja: var(--kds-typography-letter-spacing-md) | 0 letter-spacing.md |
JS/JSON: typography.letter-spacing.lg JS variable: TYPOGRAPHY_LETTER_SPACING_LG Sass: $typography-letter-spacing-lg CSS-muuttuja: var(--kds-typography-letter-spacing-lg) | 0.02em letter-spacing.lg |
JS/JSON: typography.line-height.reset JS variable: TYPOGRAPHY_LINE_HEIGHT_RESET Sass: $typography-line-height-reset CSS-muuttuja: var(--kds-typography-line-height-reset) | 1 line-height.reset |
JS/JSON: typography.line-height.sm JS variable: TYPOGRAPHY_LINE_HEIGHT_SM Sass: $typography-line-height-sm CSS-muuttuja: var(--kds-typography-line-height-sm) | 1.2 line-height.sm |
JS/JSON: typography.line-height.md JS variable: TYPOGRAPHY_LINE_HEIGHT_MD Sass: $typography-line-height-md CSS-muuttuja: var(--kds-typography-line-height-md) | 1.35 line-height.md |
JS/JSON: typography.line-height.lg JS variable: TYPOGRAPHY_LINE_HEIGHT_LG Sass: $typography-line-height-lg CSS-muuttuja: var(--kds-typography-line-height-lg) | 1.5 line-height.lg |
JS/JSON: typography.scale-ratio.xs JS variable: TYPOGRAPHY_SCALE_RATIO_XS Sass: $typography-scale-ratio-xs CSS-muuttuja: var(--kds-typography-scale-ratio-xs) | 1.10 modular-scale.ratio.xs |
JS/JSON: typography.scale-ratio.sm JS variable: TYPOGRAPHY_SCALE_RATIO_SM Sass: $typography-scale-ratio-sm CSS-muuttuja: var(--kds-typography-scale-ratio-sm) | 1.12 modular-scale.ratio.sm |
JS/JSON: typography.scale-ratio.md JS variable: TYPOGRAPHY_SCALE_RATIO_MD Sass: $typography-scale-ratio-md CSS-muuttuja: var(--kds-typography-scale-ratio-md) | 1.13 modular-scale.ratio.md |
JS/JSON: typography.scale-ratio.lg JS variable: TYPOGRAPHY_SCALE_RATIO_LG Sass: $typography-scale-ratio-lg CSS-muuttuja: var(--kds-typography-scale-ratio-lg) | 1.14 modular-scale.ratio.lg |
JS/JSON: typography.scale-ratio.xl JS variable: TYPOGRAPHY_SCALE_RATIO_XL Sass: $typography-scale-ratio-xl CSS-muuttuja: var(--kds-typography-scale-ratio-xl) | 1.17 modular-scale.ratio.xl |
Kohdistus
| Muuttuja | Arvo |
|---|---|
JS/JSON: focus-ring.outline JS variable: FOCUS_RING_OUTLINE Sass: $focus-ring-outline CSS-muuttuja: var(--kds-focus-ring-outline) | 3px solid transparent focus.ring.outline.width focus.ring.outline.style ... |
JS/JSON: focus-ring.offset JS variable: FOCUS_RING_OFFSET Sass: $focus-ring-offset CSS-muuttuja: var(--kds-focus-ring-offset) | 0 0 0 2px #ffffff, 0 0 0.1px 5px #393939 focus-ring.offset.dark |
JS/JSON: focus-ring.offset.dark JS variable: FOCUS_RING_OFFSET_DARK Sass: $focus-ring-offset-dark CSS-muuttuja: var(--kds-focus-ring-offset-dark) | 0 0 0 2px #ffffff, 0 0 0.1px 5px #393939 focus.ring.offset.dark.inner.offset-x focus.ring.o... |
JS/JSON: focus-ring.offset.light JS variable: FOCUS_RING_OFFSET_LIGHT Sass: $focus-ring-offset-light CSS-muuttuja: var(--kds-focus-ring-offset-light) | 0 0 0 2px #393939, 0 0 0.1px 5px #ffffff focus.ring.offset.dark.inner.offset-x focus.ring.o... |
JS/JSON: focus-ring.inset JS variable: FOCUS_RING_INSET Sass: $focus-ring-inset CSS-muuttuja: var(--kds-focus-ring-inset) | inset 0 0 0 3px #393939 focus-ring.inset.dark |
JS/JSON: focus-ring.inset.dark JS variable: FOCUS_RING_INSET_DARK Sass: $focus-ring-inset-dark CSS-muuttuja: var(--kds-focus-ring-inset-dark) | inset 0 0 0 3px #393939 inset focus.ring.inset.dark.offset-x focus.ring.in... |
JS/JSON: focus-ring.inset.light JS variable: FOCUS_RING_INSET_LIGHT Sass: $focus-ring-inset-light CSS-muuttuja: var(--kds-focus-ring-inset-light) | inset 0 0 0 3px #ffffff inset focus.ring.inset.dark.offset-x focus.ring.in... |
| Muuttuja | Arvo |
|---|---|
JS/JSON: focus-ring.outline JS variable: FOCUS_RING_OUTLINE Sass: $focus-ring-outline CSS-muuttuja: var(--kds-focus-ring-outline) | 3px solid transparent focus.ring.outline.width focus.ring.outline.style ... |
JS/JSON: focus-ring.offset JS variable: FOCUS_RING_OFFSET Sass: $focus-ring-offset CSS-muuttuja: var(--kds-focus-ring-offset) | 0 0 0 2px #393939, 0 0 0.1px 5px #ffffff focus-ring.offset.light |
JS/JSON: focus-ring.offset.dark JS variable: FOCUS_RING_OFFSET_DARK Sass: $focus-ring-offset-dark CSS-muuttuja: var(--kds-focus-ring-offset-dark) | 0 0 0 2px #ffffff, 0 0 0.1px 5px #393939 focus.ring.offset.dark.inner.offset-x focus.ring.o... |
JS/JSON: focus-ring.offset.light JS variable: FOCUS_RING_OFFSET_LIGHT Sass: $focus-ring-offset-light CSS-muuttuja: var(--kds-focus-ring-offset-light) | 0 0 0 2px #393939, 0 0 0.1px 5px #ffffff focus.ring.offset.dark.inner.offset-x focus.ring.o... |
JS/JSON: focus-ring.inset JS variable: FOCUS_RING_INSET Sass: $focus-ring-inset CSS-muuttuja: var(--kds-focus-ring-inset) | inset 0 0 0 3px #ffffff focus-ring.inset.light |
JS/JSON: focus-ring.inset.dark JS variable: FOCUS_RING_INSET_DARK Sass: $focus-ring-inset-dark CSS-muuttuja: var(--kds-focus-ring-inset-dark) | inset 0 0 0 3px #393939 inset focus.ring.inset.dark.offset-x focus.ring.in... |
JS/JSON: focus-ring.inset.light JS variable: FOCUS_RING_INSET_LIGHT Sass: $focus-ring-inset-light CSS-muuttuja: var(--kds-focus-ring-inset-light) | inset 0 0 0 3px #ffffff inset focus.ring.inset.dark.offset-x focus.ring.in... |
Taso
| Muuttuja | Arvo |
|---|---|
JS/JSON: layer.deep JS variable: LAYER_DEEP Sass: $layer-deep CSS-muuttuja: var(--kds-layer-deep) | -100 z-index.deep |
JS/JSON: layer.default JS variable: LAYER_DEFAULT Sass: $layer-default CSS-muuttuja: var(--kds-layer-default) | 1 z-index.default |
JS/JSON: layer.elevated JS variable: LAYER_ELEVATED Sass: $layer-elevated CSS-muuttuja: var(--kds-layer-elevated) | 2 z-index.elevated |
JS/JSON: layer.back-to-top JS variable: LAYER_BACK_TO_TOP Sass: $layer-back-to-top CSS-muuttuja: var(--kds-layer-back-to-top) | 900 z-index.back-to-top |
JS/JSON: layer.header JS variable: LAYER_HEADER Sass: $layer-header CSS-muuttuja: var(--kds-layer-header) | 1000 z-index.header |
JS/JSON: layer.overlay JS variable: LAYER_OVERLAY Sass: $layer-overlay CSS-muuttuja: var(--kds-layer-overlay) | 1010 z-index.overlay |
JS/JSON: layer.dropdown JS variable: LAYER_DROPDOWN Sass: $layer-dropdown CSS-muuttuja: var(--kds-layer-dropdown) | 1020 z-index.dropdown |
JS/JSON: layer.sidebar JS variable: LAYER_SIDEBAR Sass: $layer-sidebar CSS-muuttuja: var(--kds-layer-sidebar) | 1030 z-index.sidebar |
JS/JSON: layer.toast JS variable: LAYER_TOAST Sass: $layer-toast CSS-muuttuja: var(--kds-layer-toast) | 1040 z-index.toast |
JS/JSON: layer.modal-backdrop JS variable: LAYER_MODAL_BACKDROP Sass: $layer-modal-backdrop CSS-muuttuja: var(--kds-layer-modal-backdrop) | 1050 z-index.modal-backdrop |
JS/JSON: layer.modal JS variable: LAYER_MODAL Sass: $layer-modal CSS-muuttuja: var(--kds-layer-modal) | 1055 z-index.modal |
JS/JSON: layer.tooltip JS variable: LAYER_TOOLTIP Sass: $layer-tooltip CSS-muuttuja: var(--kds-layer-tooltip) | 1080 z-index.tooltip |
JS/JSON: layer.infinite JS variable: LAYER_INFINITE Sass: $layer-infinite CSS-muuttuja: var(--kds-layer-infinite) | 9999 z-index.infinite |
Välistykset
| Muuttuja | Arvo |
|---|---|
JS/JSON: spacing.input.md.x JS variable: SPACING_INPUT_MD_X Sass: $spacing-input-md-x CSS-muuttuja: var(--kds-spacing-input-md-x) | 1rem spacing.4 |
JS/JSON: spacing.input.md.y JS variable: SPACING_INPUT_MD_Y Sass: $spacing-input-md-y CSS-muuttuja: var(--kds-spacing-input-md-y) | 0.5rem spacing.2 |
JS/JSON: spacing.input.sm.x JS variable: SPACING_INPUT_SM_X Sass: $spacing-input-sm-x CSS-muuttuja: var(--kds-spacing-input-sm-x) | 0.5rem spacing.2 |
JS/JSON: spacing.input.sm.y JS variable: SPACING_INPUT_SM_Y Sass: $spacing-input-sm-y CSS-muuttuja: var(--kds-spacing-input-sm-y) | 0.3125rem |
JS/JSON: spacing.input.xs.x JS variable: SPACING_INPUT_XS_X Sass: $spacing-input-xs-x CSS-muuttuja: var(--kds-spacing-input-xs-x) | 0.25rem spacing.1 |
JS/JSON: spacing.input.xs.y JS variable: SPACING_INPUT_XS_Y Sass: $spacing-input-xs-y CSS-muuttuja: var(--kds-spacing-input-xs-y) | 0.125rem |
Komponenttimuuttujat
Accordion
| Muuttuja | Arvo |
|---|---|
JS/JSON: accordion.card.bg.color JS variable: ACCORDION_CARD_BG_COLOR Sass: $accordion-card-bg-color CSS-muuttuja: var(--kds-accordion-card-bg-color) | #ffffff color.white.white |
| Muuttuja | Arvo |
|---|---|
JS/JSON: accordion.card.bg.color JS variable: ACCORDION_CARD_BG_COLOR Sass: $accordion-card-bg-color CSS-muuttuja: var(--kds-accordion-card-bg-color) | #171717 color.kela.gray.100 |
Badge
| Muuttuja | Arvo |
|---|---|
JS/JSON: badge.light.bg.color JS variable: BADGE_LIGHT_BG_COLOR Sass: $badge-light-bg-color CSS-muuttuja: var(--kds-badge-light-bg-color) | #e1e1e1 color.kela.gray.20 |
JS/JSON: badge.dark.bg.color JS variable: BADGE_DARK_BG_COLOR Sass: $badge-dark-bg-color CSS-muuttuja: var(--kds-badge-dark-bg-color) | #292929 color.kela.gray.90 |
| Muuttuja | Arvo |
|---|---|
JS/JSON: badge.light.bg.color JS variable: BADGE_LIGHT_BG_COLOR Sass: $badge-light-bg-color CSS-muuttuja: var(--kds-badge-light-bg-color) | #e1e1e1 color.kela.gray.20 |
JS/JSON: badge.dark.bg.color JS variable: BADGE_DARK_BG_COLOR Sass: $badge-dark-bg-color CSS-muuttuja: var(--kds-badge-dark-bg-color) | #393939 color.kela.gray.80 |
Button
| Muuttuja | Arvo |
|---|---|
JS/JSON: btn.light.outline.hover.color JS variable: BTN_LIGHT_OUTLINE_HOVER_COLOR Sass: $btn-light-outline-hover-color CSS-muuttuja: var(--kds-btn-light-outline-hover-color) | #171717 color.kela.gray.100 |
| Muuttuja | Arvo |
|---|---|
JS/JSON: btn.light.outline.hover.color JS variable: BTN_LIGHT_OUTLINE_HOVER_COLOR Sass: $btn-light-outline-hover-color CSS-muuttuja: var(--kds-btn-light-outline-hover-color) | #171717 color.kela.gray.100 |
Card
| Muuttuja | Arvo |
|---|---|
JS/JSON: card.border.color JS variable: CARD_BORDER_COLOR Sass: $card-border-color CSS-muuttuja: var(--kds-card-border-color) | #e1e1e1 color.kela.gray.20 |
JS/JSON: card.icon.color JS variable: CARD_ICON_COLOR Sass: $card-icon-color CSS-muuttuja: var(--kds-card-icon-color) | #393939 color.kela.gray.80 |
JS/JSON: card.bg.color JS variable: CARD_BG_COLOR Sass: $card-bg-color CSS-muuttuja: var(--kds-card-bg-color) | #ffffff color.white.white |
JS/JSON: card.primary.bg.color JS variable: CARD_PRIMARY_BG_COLOR Sass: $card-primary-bg-color CSS-muuttuja: var(--kds-card-primary-bg-color) | #eef6ff color.kela.blue.10 |
JS/JSON: card.primary.icon.bg.color JS variable: CARD_PRIMARY_ICON_BG_COLOR Sass: $card-primary-icon-bg-color CSS-muuttuja: var(--kds-card-primary-icon-bg-color) | #97c4fc color.kela.blue.30 |
JS/JSON: card.warning.bg.color JS variable: CARD_WARNING_BG_COLOR Sass: $card-warning-bg-color CSS-muuttuja: var(--kds-card-warning-bg-color) | #fff4d5 color.kela.yellow.10 |
JS/JSON: card.warning.icon.bg.color JS variable: CARD_WARNING_ICON_BG_COLOR Sass: $card-warning-icon-bg-color CSS-muuttuja: var(--kds-card-warning-icon-bg-color) | #f8b516 color.kela.yellow.30 |
JS/JSON: card.danger.bg.color JS variable: CARD_DANGER_BG_COLOR Sass: $card-danger-bg-color CSS-muuttuja: var(--kds-card-danger-bg-color) | #fef2f6 color.kela.danger.red.10 |
JS/JSON: card.danger.icon.bg.color JS variable: CARD_DANGER_ICON_BG_COLOR Sass: $card-danger-icon-bg-color CSS-muuttuja: var(--kds-card-danger-icon-bg-color) | #f9aac6 color.kela.danger.red.30 |
JS/JSON: card.success.bg.color JS variable: CARD_SUCCESS_BG_COLOR Sass: $card-success-bg-color CSS-muuttuja: var(--kds-card-success-bg-color) | #e7faee color.kela.success.green.10 |
JS/JSON: card.success.icon.bg.color JS variable: CARD_SUCCESS_ICON_BG_COLOR Sass: $card-success-icon-bg-color CSS-muuttuja: var(--kds-card-success-icon-bg-color) | #7fd29e color.kela.success.green.30 |
| Muuttuja | Arvo |
|---|---|
JS/JSON: card.border.color JS variable: CARD_BORDER_COLOR Sass: $card-border-color CSS-muuttuja: var(--kds-card-border-color) | #393939 color.kela.gray.80 |
JS/JSON: card.icon.color JS variable: CARD_ICON_COLOR Sass: $card-icon-color CSS-muuttuja: var(--kds-card-icon-color) | #e1e1e1 color.kela.gray.20 |
JS/JSON: card.bg.color JS variable: CARD_BG_COLOR Sass: $card-bg-color CSS-muuttuja: var(--kds-card-bg-color) | #171717 color.kela.gray.100 |
JS/JSON: card.primary.bg.color JS variable: CARD_PRIMARY_BG_COLOR Sass: $card-primary-bg-color CSS-muuttuja: var(--kds-card-primary-bg-color) | #292929 color.kela.gray.90 |
JS/JSON: card.primary.icon.bg.color JS variable: CARD_PRIMARY_ICON_BG_COLOR Sass: $card-primary-icon-bg-color CSS-muuttuja: var(--kds-card-primary-icon-bg-color) | #2a69c5 color.kela.blue.60 |
JS/JSON: card.warning.bg.color JS variable: CARD_WARNING_BG_COLOR Sass: $card-warning-bg-color CSS-muuttuja: var(--kds-card-warning-bg-color) | #292929 color.kela.gray.90 |
JS/JSON: card.warning.icon.bg.color JS variable: CARD_WARNING_ICON_BG_COLOR Sass: $card-warning-icon-bg-color CSS-muuttuja: var(--kds-card-warning-icon-bg-color) | #8b6407 color.kela.yellow.60 |
JS/JSON: card.danger.bg.color JS variable: CARD_DANGER_BG_COLOR Sass: $card-danger-bg-color CSS-muuttuja: var(--kds-card-danger-bg-color) | #292929 color.kela.gray.90 |
JS/JSON: card.danger.icon.bg.color JS variable: CARD_DANGER_ICON_BG_COLOR Sass: $card-danger-icon-bg-color CSS-muuttuja: var(--kds-card-danger-icon-bg-color) | #cf1a55 color.kela.danger.red.60 |
JS/JSON: card.success.bg.color JS variable: CARD_SUCCESS_BG_COLOR Sass: $card-success-bg-color CSS-muuttuja: var(--kds-card-success-bg-color) | #292929 color.kela.gray.90 |
JS/JSON: card.success.icon.bg.color JS variable: CARD_SUCCESS_ICON_BG_COLOR Sass: $card-success-icon-bg-color CSS-muuttuja: var(--kds-card-success-icon-bg-color) | #067c30 color.kela.success.green.60 |
Chat
| Muuttuja | Arvo |
|---|---|
JS/JSON: chat.bg.color JS variable: CHAT_BG_COLOR Sass: $chat-bg-color CSS-muuttuja: var(--kds-chat-bg-color) | #1652a6 color.kela.blue.70 |
JS/JSON: chat.neutral.border.color JS variable: CHAT_NEUTRAL_BORDER_COLOR Sass: $chat-neutral-border-color CSS-muuttuja: var(--kds-chat-neutral-border-color) | #f5f5f5 color.kela.gray.10 |
JS/JSON: chat.neutral.bg.color JS variable: CHAT_NEUTRAL_BG_COLOR Sass: $chat-neutral-bg-color CSS-muuttuja: var(--kds-chat-neutral-bg-color) | #f5f5f5 color.kela.gray.10 |
| Muuttuja | Arvo |
|---|---|
JS/JSON: chat.bg.color JS variable: CHAT_BG_COLOR Sass: $chat-bg-color CSS-muuttuja: var(--kds-chat-bg-color) | #003580 color.kela.blue.80 |
JS/JSON: chat.neutral.border.color JS variable: CHAT_NEUTRAL_BORDER_COLOR Sass: $chat-neutral-border-color CSS-muuttuja: var(--kds-chat-neutral-border-color) | #393939 color.kela.gray.80 |
JS/JSON: chat.neutral.bg.color JS variable: CHAT_NEUTRAL_BG_COLOR Sass: $chat-neutral-bg-color CSS-muuttuja: var(--kds-chat-neutral-bg-color) | #171717 color.kela.gray.100 |
Chip
| Muuttuja | Arvo |
|---|---|
JS/JSON: chip.primary.bg.color JS variable: CHIP_PRIMARY_BG_COLOR Sass: $chip-primary-bg-color CSS-muuttuja: var(--kds-chip-primary-bg-color) | #2a69c5 color.kela.blue.60 |
JS/JSON: chip.primary.active.bg.color JS variable: CHIP_PRIMARY_ACTIVE_BG_COLOR Sass: $chip-primary-active-bg-color CSS-muuttuja: var(--kds-chip-primary-active-bg-color) | #cfe3ff color.kela.blue.20 |
JS/JSON: chip.primary.outline.bg.color JS variable: CHIP_PRIMARY_OUTLINE_BG_COLOR Sass: $chip-primary-outline-bg-color CSS-muuttuja: var(--kds-chip-primary-outline-bg-color) | #ffffff color.white.white |
JS/JSON: chip.primary.outline.active.bg.color JS variable: CHIP_PRIMARY_OUTLINE_ACTIVE_BG_COLOR Sass: $chip-primary-outline-active-bg-color CSS-muuttuja: var(--kds-chip-primary-outline-active-bg-color) | #2a69c5 color.kela.blue.60 |
JS/JSON: chip.primary.subtle.bg.color JS variable: CHIP_PRIMARY_SUBTLE_BG_COLOR Sass: $chip-primary-subtle-bg-color CSS-muuttuja: var(--kds-chip-primary-subtle-bg-color) | #cfe3ff color.kela.blue.20 |
JS/JSON: chip.primary.subtle.active.bg.color JS variable: CHIP_PRIMARY_SUBTLE_ACTIVE_BG_COLOR Sass: $chip-primary-subtle-active-bg-color CSS-muuttuja: var(--kds-chip-primary-subtle-active-bg-color) | #2a69c5 color.kela.blue.60 |
| Muuttuja | Arvo |
|---|---|
JS/JSON: chip.primary.bg.color JS variable: CHIP_PRIMARY_BG_COLOR Sass: $chip-primary-bg-color CSS-muuttuja: var(--kds-chip-primary-bg-color) | #1652a6 color.kela.blue.70 |
JS/JSON: chip.primary.active.bg.color JS variable: CHIP_PRIMARY_ACTIVE_BG_COLOR Sass: $chip-primary-active-bg-color CSS-muuttuja: var(--kds-chip-primary-active-bg-color) | #97c4fc color.kela.blue.30 |
JS/JSON: chip.primary.outline.bg.color JS variable: CHIP_PRIMARY_OUTLINE_BG_COLOR Sass: $chip-primary-outline-bg-color CSS-muuttuja: var(--kds-chip-primary-outline-bg-color) | #121212 color.black.soft |
JS/JSON: chip.primary.outline.active.bg.color JS variable: CHIP_PRIMARY_OUTLINE_ACTIVE_BG_COLOR Sass: $chip-primary-outline-active-bg-color CSS-muuttuja: var(--kds-chip-primary-outline-active-bg-color) | #1652a6 color.kela.blue.70 |
JS/JSON: chip.primary.subtle.bg.color JS variable: CHIP_PRIMARY_SUBTLE_BG_COLOR Sass: $chip-primary-subtle-bg-color CSS-muuttuja: var(--kds-chip-primary-subtle-bg-color) | #003580 color.kela.blue.80 |
JS/JSON: chip.primary.subtle.active.bg.color JS variable: CHIP_PRIMARY_SUBTLE_ACTIVE_BG_COLOR Sass: $chip-primary-subtle-active-bg-color CSS-muuttuja: var(--kds-chip-primary-subtle-active-bg-color) | #97c4fc color.kela.blue.30 |
ContentHighlight
| Muuttuja | Arvo |
|---|---|
JS/JSON: content-highlight.solid.icon.color JS variable: CONTENT_HIGHLIGHT_SOLID_ICON_COLOR Sass: $content-highlight-solid-icon-color CSS-muuttuja: var(--kds-content-highlight-solid-icon-color) | #171717 color.kela.gray.100 |
| Muuttuja | Arvo |
|---|---|
JS/JSON: content-highlight.solid.icon.color JS variable: CONTENT_HIGHLIGHT_SOLID_ICON_COLOR Sass: $content-highlight-solid-icon-color CSS-muuttuja: var(--kds-content-highlight-solid-icon-color) | #f5f5f5 color.kela.gray.10 |
Heading
| Muuttuja | Arvo |
|---|---|
JS/JSON: heading.border.color JS variable: HEADING_BORDER_COLOR Sass: $heading-border-color CSS-muuttuja: var(--kds-heading-border-color) | #f8b516 color.kela.yellow.30 |
JS/JSON: heading.border.width JS variable: HEADING_BORDER_WIDTH Sass: $heading-border-width CSS-muuttuja: var(--kds-heading-border-width) | 0.125rem |
| Muuttuja | Arvo |
|---|---|
JS/JSON: heading.border.color JS variable: HEADING_BORDER_COLOR Sass: $heading-border-color CSS-muuttuja: var(--kds-heading-border-color) | #f8b516 color.kela.yellow.30 |
JS/JSON: heading.border.width JS variable: HEADING_BORDER_WIDTH Sass: $heading-border-width CSS-muuttuja: var(--kds-heading-border-width) | 0.125rem |
List
| Muuttuja | Arvo |
|---|---|
JS/JSON: list.marker.color JS variable: LIST_MARKER_COLOR Sass: $list-marker-color CSS-muuttuja: var(--kds-list-marker-color) | #171717 color.kela.gray.100 |
JS/JSON: list.marker.shape JS variable: LIST_MARKER_SHAPE Sass: $list-marker-shape CSS-muuttuja: var(--kds-list-marker-shape) | disc |
| Muuttuja | Arvo |
|---|---|
JS/JSON: list.marker.color JS variable: LIST_MARKER_COLOR Sass: $list-marker-color CSS-muuttuja: var(--kds-list-marker-color) | #f5f5f5 color.kela.gray.10 |
JS/JSON: list.marker.shape JS variable: LIST_MARKER_SHAPE Sass: $list-marker-shape CSS-muuttuja: var(--kds-list-marker-shape) | disc |
MainBar
| Muuttuja | Arvo |
|---|---|
JS/JSON: main-bar.bg.color JS variable: MAIN_BAR_BG_COLOR Sass: $main-bar-bg-color CSS-muuttuja: var(--kds-main-bar-bg-color) | #003580 color.kela.blue.80 |
JS/JSON: main-bar.bg.hover.color JS variable: MAIN_BAR_BG_HOVER_COLOR Sass: $main-bar-bg-hover-color CSS-muuttuja: var(--kds-main-bar-bg-hover-color) | #00143b color.kela.blue.100 |
JS/JSON: main-bar.search.bg.color JS variable: MAIN_BAR_SEARCH_BG_COLOR Sass: $main-bar-search-bg-color CSS-muuttuja: var(--kds-main-bar-search-bg-color) | #00265f color.kela.blue.90 |
JS/JSON: main-bar.service-name.primary.bg.color JS variable: MAIN_BAR_SERVICE_NAME_PRIMARY_BG_COLOR Sass: $main-bar-service-name-primary-bg-color CSS-muuttuja: var(--kds-main-bar-service-name-primary-bg-color) | #1652a6 color.kela.blue.70 |
JS/JSON: main-bar.service-name.primary.subtle.bg.color JS variable: MAIN_BAR_SERVICE_NAME_PRIMARY_SUBTLE_BG_COLOR Sass: $main-bar-service-name-primary-subtle-bg-color CSS-muuttuja: var(--kds-main-bar-service-name-primary-subtle-bg-color) | #eef6ff color.kela.blue.10 |
| Muuttuja | Arvo |
|---|---|
JS/JSON: main-bar.bg.color JS variable: MAIN_BAR_BG_COLOR Sass: $main-bar-bg-color CSS-muuttuja: var(--kds-main-bar-bg-color) | #00265f color.kela.blue.90 |
JS/JSON: main-bar.bg.hover.color JS variable: MAIN_BAR_BG_HOVER_COLOR Sass: $main-bar-bg-hover-color CSS-muuttuja: var(--kds-main-bar-bg-hover-color) | #00143b color.kela.blue.100 |
JS/JSON: main-bar.search.bg.color JS variable: MAIN_BAR_SEARCH_BG_COLOR Sass: $main-bar-search-bg-color CSS-muuttuja: var(--kds-main-bar-search-bg-color) | #00143b color.kela.blue.100 |
JS/JSON: main-bar.service-name.primary.bg.color JS variable: MAIN_BAR_SERVICE_NAME_PRIMARY_BG_COLOR Sass: $main-bar-service-name-primary-bg-color CSS-muuttuja: var(--kds-main-bar-service-name-primary-bg-color) | #003580 color.kela.blue.80 |
JS/JSON: main-bar.service-name.primary.subtle.bg.color JS variable: MAIN_BAR_SERVICE_NAME_PRIMARY_SUBTLE_BG_COLOR Sass: $main-bar-service-name-primary-subtle-bg-color CSS-muuttuja: var(--kds-main-bar-service-name-primary-subtle-bg-color) | #292929 color.kela.gray.90 |
ProgressBar
| Muuttuja | Arvo |
|---|---|
JS/JSON: progress-bar.bg.color JS variable: PROGRESS_BAR_BG_COLOR Sass: $progress-bar-bg-color CSS-muuttuja: var(--kds-progress-bar-bg-color) | #e1e1e1 color.kela.gray.20 |
JS/JSON: progress-bar.primary.color JS variable: PROGRESS_BAR_PRIMARY_COLOR Sass: $progress-bar-primary-color CSS-muuttuja: var(--kds-progress-bar-primary-color) | #2a69c5 color.kela.blue.60 |
JS/JSON: progress-bar.primary.highlight.color JS variable: PROGRESS_BAR_PRIMARY_HIGHLIGHT_COLOR Sass: $progress-bar-primary-highlight-color CSS-muuttuja: var(--kds-progress-bar-primary-highlight-color) | #2a69c5 color.kela.blue.60 |
JS/JSON: progress-bar.danger.color JS variable: PROGRESS_BAR_DANGER_COLOR Sass: $progress-bar-danger-color CSS-muuttuja: var(--kds-progress-bar-danger-color) | #cf1a55 color.kela.danger.red.60 |
JS/JSON: progress-bar.danger.highlight.color JS variable: PROGRESS_BAR_DANGER_HIGHLIGHT_COLOR Sass: $progress-bar-danger-highlight-color CSS-muuttuja: var(--kds-progress-bar-danger-highlight-color) | #cf1a55 color.kela.danger.red.60 |
| Muuttuja | Arvo |
|---|---|
JS/JSON: progress-bar.bg.color JS variable: PROGRESS_BAR_BG_COLOR Sass: $progress-bar-bg-color CSS-muuttuja: var(--kds-progress-bar-bg-color) | #393939 color.kela.gray.80 |
JS/JSON: progress-bar.primary.color JS variable: PROGRESS_BAR_PRIMARY_COLOR Sass: $progress-bar-primary-color CSS-muuttuja: var(--kds-progress-bar-primary-color) | #2a69c5 color.kela.blue.60 |
JS/JSON: progress-bar.primary.highlight.color JS variable: PROGRESS_BAR_PRIMARY_HIGHLIGHT_COLOR Sass: $progress-bar-primary-highlight-color CSS-muuttuja: var(--kds-progress-bar-primary-highlight-color) | #68a2f6 color.kela.blue.40 |
JS/JSON: progress-bar.danger.color JS variable: PROGRESS_BAR_DANGER_COLOR Sass: $progress-bar-danger-color CSS-muuttuja: var(--kds-progress-bar-danger-color) | #cf1a55 color.kela.danger.red.60 |
JS/JSON: progress-bar.danger.highlight.color JS variable: PROGRESS_BAR_DANGER_HIGHLIGHT_COLOR Sass: $progress-bar-danger-highlight-color CSS-muuttuja: var(--kds-progress-bar-danger-highlight-color) | #f677a1 color.kela.danger.red.40 |
Result
| Muuttuja | Arvo |
|---|---|
JS/JSON: result.info.bg.color JS variable: RESULT_INFO_BG_COLOR Sass: $result-info-bg-color CSS-muuttuja: var(--kds-result-info-bg-color) | #97c4fc color.kela.blue.30 |
JS/JSON: result.info.color JS variable: RESULT_INFO_COLOR Sass: $result-info-color CSS-muuttuja: var(--kds-result-info-color) | #3b81de color.kela.blue.50 |
JS/JSON: result.success.bg.color JS variable: RESULT_SUCCESS_BG_COLOR Sass: $result-success-bg-color CSS-muuttuja: var(--kds-result-success-bg-color) | #7fd29e color.kela.success.green.30 |
JS/JSON: result.success.color JS variable: RESULT_SUCCESS_COLOR Sass: $result-success-color CSS-muuttuja: var(--kds-result-success-color) | #09953b color.kela.success.green.50 |
JS/JSON: result.warning.bg.color JS variable: RESULT_WARNING_BG_COLOR Sass: $result-warning-bg-color CSS-muuttuja: var(--kds-result-warning-bg-color) | #fedd9f color.kela.warning.yellow.20 |
JS/JSON: result.warning.color JS variable: RESULT_WARNING_COLOR Sass: $result-warning-color CSS-muuttuja: var(--kds-result-warning-color) | #a7790b color.kela.warning.yellow.50 |
JS/JSON: result.danger.bg.color JS variable: RESULT_DANGER_BG_COLOR Sass: $result-danger-bg-color CSS-muuttuja: var(--kds-result-danger-bg-color) | #f9aac6 color.kela.danger.red.30 |
JS/JSON: result.danger.color JS variable: RESULT_DANGER_COLOR Sass: $result-danger-color CSS-muuttuja: var(--kds-result-danger-color) | #f1316d color.kela.danger.red.50 |
| Muuttuja | Arvo |
|---|---|
JS/JSON: result.info.bg.color JS variable: RESULT_INFO_BG_COLOR Sass: $result-info-bg-color CSS-muuttuja: var(--kds-result-info-bg-color) | #1652a6 color.kela.blue.70 |
JS/JSON: result.info.color JS variable: RESULT_INFO_COLOR Sass: $result-info-color CSS-muuttuja: var(--kds-result-info-color) | #2a69c5 color.kela.blue.60 |
JS/JSON: result.success.bg.color JS variable: RESULT_SUCCESS_BG_COLOR Sass: $result-success-bg-color CSS-muuttuja: var(--kds-result-success-bg-color) | #046324 color.kela.success.green.70 |
JS/JSON: result.success.color JS variable: RESULT_SUCCESS_COLOR Sass: $result-success-color CSS-muuttuja: var(--kds-result-success-color) | #09953b color.kela.success.green.50 |
JS/JSON: result.warning.bg.color JS variable: RESULT_WARNING_BG_COLOR Sass: $result-warning-bg-color CSS-muuttuja: var(--kds-result-warning-bg-color) | #cf9710 color.kela.warning.yellow.40 |
JS/JSON: result.warning.color JS variable: RESULT_WARNING_COLOR Sass: $result-warning-color CSS-muuttuja: var(--kds-result-warning-color) | #cf9710 color.kela.warning.yellow.40 |
JS/JSON: result.danger.bg.color JS variable: RESULT_DANGER_BG_COLOR Sass: $result-danger-bg-color CSS-muuttuja: var(--kds-result-danger-bg-color) | #77051b color.kela.danger.red.80 |
JS/JSON: result.danger.color JS variable: RESULT_DANGER_COLOR Sass: $result-danger-color CSS-muuttuja: var(--kds-result-danger-color) | #cf1a55 color.kela.danger.red.60 |
SelectionLasso
| Muuttuja | Arvo |
|---|---|
JS/JSON: selection-lasso.bg.color JS variable: SELECTION_LASSO_BG_COLOR Sass: $selection-lasso-bg-color CSS-muuttuja: var(--kds-selection-lasso-bg-color) | rgba(59, 129, 222, 0.2) |
JS/JSON: selection-lasso.border.color JS variable: SELECTION_LASSO_BORDER_COLOR Sass: $selection-lasso-border-color CSS-muuttuja: var(--kds-selection-lasso-border-color) | #003580 color.kela.blue.80 |
JS/JSON: selection-lasso.outline.color JS variable: SELECTION_LASSO_OUTLINE_COLOR Sass: $selection-lasso-outline-color CSS-muuttuja: var(--kds-selection-lasso-outline-color) | #ffffff color.white.white |
| Muuttuja | Arvo |
|---|---|
JS/JSON: selection-lasso.bg.color JS variable: SELECTION_LASSO_BG_COLOR Sass: $selection-lasso-bg-color CSS-muuttuja: var(--kds-selection-lasso-bg-color) | rgba(59, 129, 222, 0.2) |
JS/JSON: selection-lasso.border.color JS variable: SELECTION_LASSO_BORDER_COLOR Sass: $selection-lasso-border-color CSS-muuttuja: var(--kds-selection-lasso-border-color) | #97c4fc color.kela.blue.30 |
JS/JSON: selection-lasso.outline.color JS variable: SELECTION_LASSO_OUTLINE_COLOR Sass: $selection-lasso-outline-color CSS-muuttuja: var(--kds-selection-lasso-outline-color) | #121212 color.black.soft |
Sidebar
| Muuttuja | Arvo |
|---|---|
JS/JSON: sidebar.accent.color JS variable: SIDEBAR_ACCENT_COLOR Sass: $sidebar-accent-color CSS-muuttuja: var(--kds-sidebar-accent-color) | #f8b516 color.kela.yellow.30 |
JS/JSON: sidebar.bg.color JS variable: SIDEBAR_BG_COLOR Sass: $sidebar-bg-color CSS-muuttuja: var(--kds-sidebar-bg-color) | #ffffff color.white.white |
| Muuttuja | Arvo |
|---|---|
JS/JSON: sidebar.accent.color JS variable: SIDEBAR_ACCENT_COLOR Sass: $sidebar-accent-color CSS-muuttuja: var(--kds-sidebar-accent-color) | #f8b516 color.kela.yellow.30 |
JS/JSON: sidebar.bg.color JS variable: SIDEBAR_BG_COLOR Sass: $sidebar-bg-color CSS-muuttuja: var(--kds-sidebar-bg-color) | #121212 color.black.soft |
Skeleton
| Muuttuja | Arvo |
|---|---|
JS/JSON: skeleton.bg.color JS variable: SKELETON_BG_COLOR Sass: $skeleton-bg-color CSS-muuttuja: var(--kds-skeleton-bg-color) | #e1e1e1 color.kela.gray.20 |
| Muuttuja | Arvo |
|---|---|
JS/JSON: skeleton.bg.color JS variable: SKELETON_BG_COLOR Sass: $skeleton-bg-color CSS-muuttuja: var(--kds-skeleton-bg-color) | #393939 color.kela.gray.80 |
TableV2
| Muuttuja | Arvo |
|---|---|
JS/JSON: table-v2.cell.border.color JS variable: TABLE_V2_CELL_BORDER_COLOR Sass: $table-v2-cell-border-color CSS-muuttuja: var(--kds-table-v2-cell-border-color) | #818181 color.kela.gray.50 |
| Muuttuja | Arvo |
|---|---|
JS/JSON: table-v2.cell.border.color JS variable: TABLE_V2_CELL_BORDER_COLOR Sass: $table-v2-cell-border-color CSS-muuttuja: var(--kds-table-v2-cell-border-color) | #6b6b6b color.kela.gray.60 |
Tabs
| Muuttuja | Arvo |
|---|---|
JS/JSON: tabs.tab.accent.hover.color JS variable: TABS_TAB_ACCENT_HOVER_COLOR Sass: $tabs-tab-accent-hover-color CSS-muuttuja: var(--kds-tabs-tab-accent-hover-color) | #555555 color.kela.gray.70 |
| Muuttuja | Arvo |
|---|---|
JS/JSON: tabs.tab.accent.hover.color JS variable: TABS_TAB_ACCENT_HOVER_COLOR Sass: $tabs-tab-accent-hover-color CSS-muuttuja: var(--kds-tabs-tab-accent-hover-color) | #6b6b6b color.kela.gray.60 |
Tile
| Muuttuja | Arvo |
|---|---|
JS/JSON: tile.primary.color JS variable: TILE_PRIMARY_COLOR Sass: $tile-primary-color CSS-muuttuja: var(--kds-tile-primary-color) | #2a69c5 color.kela.blue.60 |
JS/JSON: tile.primary.medium.color JS variable: TILE_PRIMARY_MEDIUM_COLOR Sass: $tile-primary-medium-color CSS-muuttuja: var(--kds-tile-primary-medium-color) | #cfe3ff color.kela.blue.20 |
JS/JSON: tile.danger.color JS variable: TILE_DANGER_COLOR Sass: $tile-danger-color CSS-muuttuja: var(--kds-tile-danger-color) | #cf1a55 color.kela.danger.red.60 |
JS/JSON: tile.danger.medium.color JS variable: TILE_DANGER_MEDIUM_COLOR Sass: $tile-danger-medium-color CSS-muuttuja: var(--kds-tile-danger-medium-color) | #fcd8e3 color.kela.danger.red.20 |
JS/JSON: tile.success.color JS variable: TILE_SUCCESS_COLOR Sass: $tile-success-color CSS-muuttuja: var(--kds-tile-success-color) | #067c30 color.kela.success.green.60 |
JS/JSON: tile.success.medium.color JS variable: TILE_SUCCESS_MEDIUM_COLOR Sass: $tile-success-medium-color CSS-muuttuja: var(--kds-tile-success-medium-color) | #bbedcd color.kela.success.green.20 |
JS/JSON: tile.warning.color JS variable: TILE_WARNING_COLOR Sass: $tile-warning-color CSS-muuttuja: var(--kds-tile-warning-color) | #8b6407 color.kela.warning.yellow.60 |
JS/JSON: tile.warning.medium.color JS variable: TILE_WARNING_MEDIUM_COLOR Sass: $tile-warning-medium-color CSS-muuttuja: var(--kds-tile-warning-medium-color) | #fedd9f color.kela.warning.yellow.20 |
JS/JSON: tile.dark.color JS variable: TILE_DARK_COLOR Sass: $tile-dark-color CSS-muuttuja: var(--kds-tile-dark-color) | #6b6b6b color.kela.gray.60 |
JS/JSON: tile.dark.medium.color JS variable: TILE_DARK_MEDIUM_COLOR Sass: $tile-dark-medium-color CSS-muuttuja: var(--kds-tile-dark-medium-color) | #e1e1e1 color.kela.gray.20 |
JS/JSON: tile.light.bg.color JS variable: TILE_LIGHT_BG_COLOR Sass: $tile-light-bg-color CSS-muuttuja: var(--kds-tile-light-bg-color) | #f5f5f5 color.kela.gray.10 |
JS/JSON: tile.outline.border.color JS variable: TILE_OUTLINE_BORDER_COLOR Sass: $tile-outline-border-color CSS-muuttuja: var(--kds-tile-outline-border-color) | #c1c1c1 color.kela.gray.30 |
| Muuttuja | Arvo |
|---|---|
JS/JSON: tile.primary.color JS variable: TILE_PRIMARY_COLOR Sass: $tile-primary-color CSS-muuttuja: var(--kds-tile-primary-color) | #1652a6 color.kela.blue.70 |
JS/JSON: tile.primary.medium.color JS variable: TILE_PRIMARY_MEDIUM_COLOR Sass: $tile-primary-medium-color CSS-muuttuja: var(--kds-tile-primary-medium-color) | #00265f color.kela.blue.90 |
JS/JSON: tile.danger.color JS variable: TILE_DANGER_COLOR Sass: $tile-danger-color CSS-muuttuja: var(--kds-tile-danger-color) | #ab0a2c color.kela.danger.red.70 |
JS/JSON: tile.danger.medium.color JS variable: TILE_DANGER_MEDIUM_COLOR Sass: $tile-danger-medium-color CSS-muuttuja: var(--kds-tile-danger-medium-color) | #590312 color.kela.danger.red.90 |
JS/JSON: tile.success.color JS variable: TILE_SUCCESS_COLOR Sass: $tile-success-color CSS-muuttuja: var(--kds-tile-success-color) | #046324 color.kela.success.green.70 |
JS/JSON: tile.success.medium.color JS variable: TILE_SUCCESS_MEDIUM_COLOR Sass: $tile-success-medium-color CSS-muuttuja: var(--kds-tile-success-medium-color) | #01310e color.kela.success.green.90 |
JS/JSON: tile.warning.color JS variable: TILE_WARNING_COLOR Sass: $tile-warning-color CSS-muuttuja: var(--kds-tile-warning-color) | #6f4f04 color.kela.warning.yellow.70 |
JS/JSON: tile.warning.medium.color JS variable: TILE_WARNING_MEDIUM_COLOR Sass: $tile-warning-medium-color CSS-muuttuja: var(--kds-tile-warning-medium-color) | #372601 color.kela.warning.yellow.90 |
JS/JSON: tile.dark.color JS variable: TILE_DARK_COLOR Sass: $tile-dark-color CSS-muuttuja: var(--kds-tile-dark-color) | #393939 color.kela.gray.80 |
JS/JSON: tile.dark.medium.color JS variable: TILE_DARK_MEDIUM_COLOR Sass: $tile-dark-medium-color CSS-muuttuja: var(--kds-tile-dark-medium-color) | #292929 color.kela.gray.90 |
JS/JSON: tile.light.bg.color JS variable: TILE_LIGHT_BG_COLOR Sass: $tile-light-bg-color CSS-muuttuja: var(--kds-tile-light-bg-color) | #171717 color.kela.gray.100 |
JS/JSON: tile.outline.border.color JS variable: TILE_OUTLINE_BORDER_COLOR Sass: $tile-outline-border-color CSS-muuttuja: var(--kds-tile-outline-border-color) | #393939 color.kela.gray.80 |
Timeline
| Muuttuja | Arvo |
|---|---|
JS/JSON: timeline.primary.bg.color JS variable: TIMELINE_PRIMARY_BG_COLOR Sass: $timeline-primary-bg-color CSS-muuttuja: var(--kds-timeline-primary-bg-color) | #2a69c5 color.kela.blue.60 |
JS/JSON: timeline.danger.bg.color JS variable: TIMELINE_DANGER_BG_COLOR Sass: $timeline-danger-bg-color CSS-muuttuja: var(--kds-timeline-danger-bg-color) | #cf1a55 color.kela.danger.red.60 |
JS/JSON: timeline.success.bg.color JS variable: TIMELINE_SUCCESS_BG_COLOR Sass: $timeline-success-bg-color CSS-muuttuja: var(--kds-timeline-success-bg-color) | #067c30 color.kela.success.green.60 |
JS/JSON: timeline.warning.bg.color JS variable: TIMELINE_WARNING_BG_COLOR Sass: $timeline-warning-bg-color CSS-muuttuja: var(--kds-timeline-warning-bg-color) | #f8b516 color.kela.warning.yellow.30 |
JS/JSON: timeline.dark.bg.color JS variable: TIMELINE_DARK_BG_COLOR Sass: $timeline-dark-bg-color CSS-muuttuja: var(--kds-timeline-dark-bg-color) | #171717 color.kela.gray.100 |
JS/JSON: timeline.light.bg.color JS variable: TIMELINE_LIGHT_BG_COLOR Sass: $timeline-light-bg-color CSS-muuttuja: var(--kds-timeline-light-bg-color) | #e1e1e1 color.kela.gray.20 |
| Muuttuja | Arvo |
|---|---|
JS/JSON: timeline.primary.bg.color JS variable: TIMELINE_PRIMARY_BG_COLOR Sass: $timeline-primary-bg-color CSS-muuttuja: var(--kds-timeline-primary-bg-color) | #2a69c5 color.kela.blue.60 |
JS/JSON: timeline.danger.bg.color JS variable: TIMELINE_DANGER_BG_COLOR Sass: $timeline-danger-bg-color CSS-muuttuja: var(--kds-timeline-danger-bg-color) | #ab0a2c color.kela.danger.red.70 |
JS/JSON: timeline.success.bg.color JS variable: TIMELINE_SUCCESS_BG_COLOR Sass: $timeline-success-bg-color CSS-muuttuja: var(--kds-timeline-success-bg-color) | #067c30 color.kela.success.green.60 |
JS/JSON: timeline.warning.bg.color JS variable: TIMELINE_WARNING_BG_COLOR Sass: $timeline-warning-bg-color CSS-muuttuja: var(--kds-timeline-warning-bg-color) | #f8b516 color.kela.warning.yellow.30 |
JS/JSON: timeline.dark.bg.color JS variable: TIMELINE_DARK_BG_COLOR Sass: $timeline-dark-bg-color CSS-muuttuja: var(--kds-timeline-dark-bg-color) | #171717 color.kela.gray.100 |
JS/JSON: timeline.light.bg.color JS variable: TIMELINE_LIGHT_BG_COLOR Sass: $timeline-light-bg-color CSS-muuttuja: var(--kds-timeline-light-bg-color) | #c1c1c1 color.kela.gray.30 |
ToggleSwitch
| Muuttuja | Arvo |
|---|---|
JS/JSON: toggle-switch.inactive.color JS variable: TOGGLE_SWITCH_INACTIVE_COLOR Sass: $toggle-switch-inactive-color CSS-muuttuja: var(--kds-toggle-switch-inactive-color) | #6b6b6b color.kela.gray.60 |
| Muuttuja | Arvo |
|---|---|
JS/JSON: toggle-switch.inactive.color JS variable: TOGGLE_SWITCH_INACTIVE_COLOR Sass: $toggle-switch-inactive-color CSS-muuttuja: var(--kds-toggle-switch-inactive-color) | #6b6b6b color.kela.gray.60 |