Siirry sisältöön
Kela Design System KDS

17.0.0

Tiedon visualisoinnin muuttujat

Design-muuttujat tiedon visualisointien toteutukseen Kela- ja Kanta-teemoille, sekä vaalealle ja tummalle tilalle.

Tiedon visualisoinnin design-muuttujat ovat edelleen kehityksessä, joten niiden nimeäminen tai tiedostonimet saattavat vielä muuttua seuraavissa versioissa.

Lue lisää väreistä ja tyyleistä

Muuttujat

Värit

MuuttujaArvo
JS/JSON:
color.chart.title
JS variable:
COLOR_CHART_TITLE
Sass:
$color-chart-title
CSS-muuttuja:
var(--kds-color-chart-title)
#393939
color.kanta.gray.80
JS/JSON:
color.chart.ingress
JS variable:
COLOR_CHART_INGRESS
Sass:
$color-chart-ingress
CSS-muuttuja:
var(--kds-color-chart-ingress)
#171717
color.kanta.gray.100
JS/JSON:
color.chart.legend
JS variable:
COLOR_CHART_LEGEND
Sass:
$color-chart-legend
CSS-muuttuja:
var(--kds-color-chart-legend)
#171717
color.kanta.gray.100
JS/JSON:
color.chart.label
JS variable:
COLOR_CHART_LABEL
Sass:
$color-chart-label
CSS-muuttuja:
var(--kds-color-chart-label)
#6b6b6b
color.kanta.gray.60
JS/JSON:
color.chart.data.active
JS variable:
COLOR_CHART_DATA_ACTIVE
Sass:
$color-chart-data-active
CSS-muuttuja:
var(--kds-color-chart-data-active)
#393939
color.kanta.gray.80
JS/JSON:
color.chart.data.point
JS variable:
COLOR_CHART_DATA_POINT
Sass:
$color-chart-data-point
CSS-muuttuja:
var(--kds-color-chart-data-point)
#000000
color.black.black
JS/JSON:
color.chart.data.point-inverted
JS variable:
COLOR_CHART_DATA_POINT_INVERTED
Sass:
$color-chart-data-point-inverted
CSS-muuttuja:
var(--kds-color-chart-data-point-inverted)
#ffffff
color.white.white
JS/JSON:
color.chart.axis.baseline
JS variable:
COLOR_CHART_AXIS_BASELINE
Sass:
$color-chart-axis-baseline
CSS-muuttuja:
var(--kds-color-chart-axis-baseline)
#171717
color.kanta.gray.100
JS/JSON:
color.chart.axis.strong
JS variable:
COLOR_CHART_AXIS_STRONG
Sass:
$color-chart-axis-strong
CSS-muuttuja:
var(--kds-color-chart-axis-strong)
#393939
color.kanta.gray.80
JS/JSON:
color.chart.grid.line
JS variable:
COLOR_CHART_GRID_LINE
Sass:
$color-chart-grid-line
CSS-muuttuja:
var(--kds-color-chart-grid-line)
#e1e1e1
color.kanta.gray.20
JS/JSON:
color.chart.section.divider
JS variable:
COLOR_CHART_SECTION_DIVIDER
Sass:
$color-chart-section-divider
CSS-muuttuja:
var(--kds-color-chart-section-divider)
#ffffff
color.white.white
JS/JSON:
color.chart.palette.categorical.1.1
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_1_1
Sass:
$color-chart-palette-categorical-1-1
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-1-1)
#008dab
color.kanta.blue.50
JS/JSON:
color.chart.palette.categorical.1.2
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_1_2
Sass:
$color-chart-palette-categorical-1-2
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-1-2)
#005c7b
color.kanta.blue.70
JS/JSON:
color.chart.palette.categorical.1.3
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_1_3
Sass:
$color-chart-palette-categorical-1-3
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-1-3)
#002c3f
color.kanta.blue.90
JS/JSON:
color.chart.palette.categorical.1.4
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_1_4
Sass:
$color-chart-palette-categorical-1-4
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-1-4)
#e93c7a
color.kanta.magenta.50
JS/JSON:
color.chart.palette.categorical.1.5
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_1_5
Sass:
$color-chart-palette-categorical-1-5
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-1-5)
#aa004a
color.kanta.magenta.70
JS/JSON:
color.chart.palette.categorical.1.6
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_1_6
Sass:
$color-chart-palette-categorical-1-6
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-1-6)
#57002c
color.kanta.magenta.90
JS/JSON:
color.chart.palette.categorical.1.7
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_1_7
Sass:
$color-chart-palette-categorical-1-7
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-1-7)
#6c5dbb
color.kanta.lilac.60
JS/JSON:
color.chart.palette.categorical.1.8
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_1_8
Sass:
$color-chart-palette-categorical-1-8
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-1-8)
#3a2e75
color.kanta.lilac.80
JS/JSON:
color.chart.palette.categorical.1.9
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_1_9
Sass:
$color-chart-palette-categorical-1-9
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-1-9)
#818181
color.kanta.gray.50
JS/JSON:
color.chart.palette.categorical.1.10
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_1_10
Sass:
$color-chart-palette-categorical-1-10
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-1-10)
#000000
color.black.black
JS/JSON:
color.chart.palette.categorical.1.all
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_1_ALL
Sass:
$color-chart-palette-categorical-1-all
#008dab#005c7b#002c3f#e93c7a#aa004a#57002c#6c5dbb#3a2e75#818181#000000
JS/JSON:
color.chart.palette.categorical.2.1
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_2_1
Sass:
$color-chart-palette-categorical-2-1
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-2-1)
#008dab
color.kanta.blue.50
JS/JSON:
color.chart.palette.categorical.2.2
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_2_2
Sass:
$color-chart-palette-categorical-2-2
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-2-2)
#005c7b
color.kanta.blue.70
JS/JSON:
color.chart.palette.categorical.2.3
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_2_3
Sass:
$color-chart-palette-categorical-2-3
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-2-3)
#002c3f
color.kanta.blue.90
JS/JSON:
color.chart.palette.categorical.2.4
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_2_4
Sass:
$color-chart-palette-categorical-2-4
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-2-4)
#8576c5
color.kanta.lilac.50
JS/JSON:
color.chart.palette.categorical.2.5
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_2_5
Sass:
$color-chart-palette-categorical-2-5
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-2-5)
#5645a8
color.kanta.lilac.70
JS/JSON:
color.chart.palette.categorical.2.6
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_2_6
Sass:
$color-chart-palette-categorical-2-6
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-2-6)
#292057
color.kanta.lilac.90
JS/JSON:
color.chart.palette.categorical.2.7
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_2_7
Sass:
$color-chart-palette-categorical-2-7
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-2-7)
#437800
color.kanta.green.60
JS/JSON:
color.chart.palette.categorical.2.8
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_2_8
Sass:
$color-chart-palette-categorical-2-8
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-2-8)
#1b4200
color.kanta.green.80
JS/JSON:
color.chart.palette.categorical.2.9
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_2_9
Sass:
$color-chart-palette-categorical-2-9
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-2-9)
#818181
color.kanta.gray.50
JS/JSON:
color.chart.palette.categorical.2.10
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_2_10
Sass:
$color-chart-palette-categorical-2-10
CSS-muuttuja:
var(--kds-color-chart-palette-categorical-2-10)
#000000
color.black.black
JS/JSON:
color.chart.palette.categorical.2.all
JS variable:
COLOR_CHART_PALETTE_CATEGORICAL_2_ALL
Sass:
$color-chart-palette-categorical-2-all
#008dab#005c7b#002c3f#8576c5#5645a8#292057#437800#1b4200#818181#000000
JS/JSON:
color.chart.palette.divergent.opposite.1
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_OPPOSITE_1
Sass:
$color-chart-palette-divergent-opposite-1
CSS-muuttuja:
var(--kds-color-chart-palette-divergent-opposite-1)
#002c3f
color.kanta.blue.90
JS/JSON:
color.chart.palette.divergent.opposite.2
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_OPPOSITE_2
Sass:
$color-chart-palette-divergent-opposite-2
CSS-muuttuja:
var(--kds-color-chart-palette-divergent-opposite-2)
#005c7b
color.kanta.blue.70
JS/JSON:
color.chart.palette.divergent.opposite.3
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_OPPOSITE_3
Sass:
$color-chart-palette-divergent-opposite-3
CSS-muuttuja:
var(--kds-color-chart-palette-divergent-opposite-3)
#008dab
color.kanta.blue.50
JS/JSON:
color.chart.palette.divergent.opposite.4
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_OPPOSITE_4
Sass:
$color-chart-palette-divergent-opposite-4
CSS-muuttuja:
var(--kds-color-chart-palette-divergent-opposite-4)
#6fcee2
color.kanta.blue.30
JS/JSON:
color.chart.palette.divergent.opposite.5
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_OPPOSITE_5
Sass:
$color-chart-palette-divergent-opposite-5
CSS-muuttuja:
var(--kds-color-chart-palette-divergent-opposite-5)
#ffffff
color.white.white
JS/JSON:
color.chart.palette.divergent.opposite.6
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_OPPOSITE_6
Sass:
$color-chart-palette-divergent-opposite-6
CSS-muuttuja:
var(--kds-color-chart-palette-divergent-opposite-6)
#fea9c0
color.kanta.magenta.30
JS/JSON:
color.chart.palette.divergent.opposite.7
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_OPPOSITE_7
Sass:
$color-chart-palette-divergent-opposite-7
CSS-muuttuja:
var(--kds-color-chart-palette-divergent-opposite-7)
#e93c7a
color.kanta.magenta.50
JS/JSON:
color.chart.palette.divergent.opposite.8
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_OPPOSITE_8
Sass:
$color-chart-palette-divergent-opposite-8
CSS-muuttuja:
var(--kds-color-chart-palette-divergent-opposite-8)
#aa004a
color.kanta.magenta.70
JS/JSON:
color.chart.palette.divergent.opposite.9
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_OPPOSITE_9
Sass:
$color-chart-palette-divergent-opposite-9
CSS-muuttuja:
var(--kds-color-chart-palette-divergent-opposite-9)
#57002c
color.kanta.magenta.90
JS/JSON:
color.chart.palette.divergent.opposite.all
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_OPPOSITE_ALL
Sass:
$color-chart-palette-divergent-opposite-all
#002c3f#005c7b#008dab#6fcee2#ffffff#fea9c0#e93c7a#aa004a#57002c
JS/JSON:
color.chart.palette.divergent.neutral.1
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_NEUTRAL_1
Sass:
$color-chart-palette-divergent-neutral-1
CSS-muuttuja:
var(--kds-color-chart-palette-divergent-neutral-1)
#002c3f
color.kanta.blue.90
JS/JSON:
color.chart.palette.divergent.neutral.2
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_NEUTRAL_2
Sass:
$color-chart-palette-divergent-neutral-2
CSS-muuttuja:
var(--kds-color-chart-palette-divergent-neutral-2)
#005c7b
color.kanta.blue.70
JS/JSON:
color.chart.palette.divergent.neutral.3
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_NEUTRAL_3
Sass:
$color-chart-palette-divergent-neutral-3
CSS-muuttuja:
var(--kds-color-chart-palette-divergent-neutral-3)
#008dab
color.kanta.blue.50
JS/JSON:
color.chart.palette.divergent.neutral.4
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_NEUTRAL_4
Sass:
$color-chart-palette-divergent-neutral-4
CSS-muuttuja:
var(--kds-color-chart-palette-divergent-neutral-4)
#6fcee2
color.kanta.blue.30
JS/JSON:
color.chart.palette.divergent.neutral.5
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_NEUTRAL_5
Sass:
$color-chart-palette-divergent-neutral-5
CSS-muuttuja:
var(--kds-color-chart-palette-divergent-neutral-5)
#ffffff
color.white.white
JS/JSON:
color.chart.palette.divergent.neutral.6
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_NEUTRAL_6
Sass:
$color-chart-palette-divergent-neutral-6
CSS-muuttuja:
var(--kds-color-chart-palette-divergent-neutral-6)
#c2bce3
color.kanta.lilac.30
JS/JSON:
color.chart.palette.divergent.neutral.7
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_NEUTRAL_7
Sass:
$color-chart-palette-divergent-neutral-7
CSS-muuttuja:
var(--kds-color-chart-palette-divergent-neutral-7)
#8576c5
color.kanta.lilac.50
JS/JSON:
color.chart.palette.divergent.neutral.8
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_NEUTRAL_8
Sass:
$color-chart-palette-divergent-neutral-8
CSS-muuttuja:
var(--kds-color-chart-palette-divergent-neutral-8)
#5645a8
color.kanta.lilac.70
JS/JSON:
color.chart.palette.divergent.neutral.9
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_NEUTRAL_9
Sass:
$color-chart-palette-divergent-neutral-9
CSS-muuttuja:
var(--kds-color-chart-palette-divergent-neutral-9)
#292057
color.kanta.lilac.90
JS/JSON:
color.chart.palette.divergent.neutral.all
JS variable:
COLOR_CHART_PALETTE_DIVERGENT_NEUTRAL_ALL
Sass:
$color-chart-palette-divergent-neutral-all
#002c3f#005c7b#008dab#6fcee2#ffffff#c2bce3#8576c5#5645a8#292057
JS/JSON:
color.chart.palette.likert.1
JS variable:
COLOR_CHART_PALETTE_LIKERT_1
Sass:
$color-chart-palette-likert-1
CSS-muuttuja:
var(--kds-color-chart-palette-likert-1)
#aa004a
color.kanta.magenta.70
JS/JSON:
color.chart.palette.likert.2
JS variable:
COLOR_CHART_PALETTE_LIKERT_2
Sass:
$color-chart-palette-likert-2
CSS-muuttuja:
var(--kds-color-chart-palette-likert-2)
#e93c7a
color.kanta.magenta.50
JS/JSON:
color.chart.palette.likert.3
JS variable:
COLOR_CHART_PALETTE_LIKERT_3
Sass:
$color-chart-palette-likert-3
CSS-muuttuja:
var(--kds-color-chart-palette-likert-3)
#818181
color.kanta.gray.50
JS/JSON:
color.chart.palette.likert.4
JS variable:
COLOR_CHART_PALETTE_LIKERT_4
Sass:
$color-chart-palette-likert-4
CSS-muuttuja:
var(--kds-color-chart-palette-likert-4)
#008dab
color.kanta.blue.50
JS/JSON:
color.chart.palette.likert.5
JS variable:
COLOR_CHART_PALETTE_LIKERT_5
Sass:
$color-chart-palette-likert-5
CSS-muuttuja:
var(--kds-color-chart-palette-likert-5)
#005c7b
color.kanta.blue.70
JS/JSON:
color.chart.palette.likert.all
JS variable:
COLOR_CHART_PALETTE_LIKERT_ALL
Sass:
$color-chart-palette-likert-all
#aa004a#e93c7a#818181#008dab#005c7b
JS/JSON:
color.chart.palette.sequential.1
JS variable:
COLOR_CHART_PALETTE_SEQUENTIAL_1
Sass:
$color-chart-palette-sequential-1
CSS-muuttuja:
var(--kds-color-chart-palette-sequential-1)
#6fcee2
color.kanta.blue.30
JS/JSON:
color.chart.palette.sequential.2
JS variable:
COLOR_CHART_PALETTE_SEQUENTIAL_2
Sass:
$color-chart-palette-sequential-2
CSS-muuttuja:
var(--kds-color-chart-palette-sequential-2)
#008dab
color.kanta.blue.50
JS/JSON:
color.chart.palette.sequential.3
JS variable:
COLOR_CHART_PALETTE_SEQUENTIAL_3
Sass:
$color-chart-palette-sequential-3
CSS-muuttuja:
var(--kds-color-chart-palette-sequential-3)
#005c7b
color.kanta.blue.70
JS/JSON:
color.chart.palette.sequential.4
JS variable:
COLOR_CHART_PALETTE_SEQUENTIAL_4
Sass:
$color-chart-palette-sequential-4
CSS-muuttuja:
var(--kds-color-chart-palette-sequential-4)
#002c3f
color.kanta.blue.90
JS/JSON:
color.chart.palette.sequential.all
JS variable:
COLOR_CHART_PALETTE_SEQUENTIAL_ALL
Sass:
$color-chart-palette-sequential-all
#6fcee2#008dab#005c7b#002c3f

Viivat

MuuttujaArvo
JS/JSON:
border.chart.axis.baseline.width
JS variable:
BORDER_CHART_AXIS_BASELINE_WIDTH
Sass:
$border-chart-axis-baseline-width
CSS-muuttuja:
var(--kds-border-chart-axis-baseline-width)
1px
JS/JSON:
border.chart.axis.baseline.style
JS variable:
BORDER_CHART_AXIS_BASELINE_STYLE
Sass:
$border-chart-axis-baseline-style
CSS-muuttuja:
var(--kds-border-chart-axis-baseline-style)
solid
JS/JSON:
border.chart.axis.strong.width
JS variable:
BORDER_CHART_AXIS_STRONG_WIDTH
Sass:
$border-chart-axis-strong-width
CSS-muuttuja:
var(--kds-border-chart-axis-strong-width)
1px
JS/JSON:
border.chart.axis.strong.style
JS variable:
BORDER_CHART_AXIS_STRONG_STYLE
Sass:
$border-chart-axis-strong-style
CSS-muuttuja:
var(--kds-border-chart-axis-strong-style)
solid
JS/JSON:
border.chart.data.line.width
JS variable:
BORDER_CHART_DATA_LINE_WIDTH
Sass:
$border-chart-data-line-width
CSS-muuttuja:
var(--kds-border-chart-data-line-width)
3px
JS/JSON:
border.chart.data.line.style
JS variable:
BORDER_CHART_DATA_LINE_STYLE
Sass:
$border-chart-data-line-style
CSS-muuttuja:
var(--kds-border-chart-data-line-style)
solid
JS/JSON:
border.chart.grid.line.width
JS variable:
BORDER_CHART_GRID_LINE_WIDTH
Sass:
$border-chart-grid-line-width
CSS-muuttuja:
var(--kds-border-chart-grid-line-width)
1px
JS/JSON:
border.chart.grid.line.style
JS variable:
BORDER_CHART_GRID_LINE_STYLE
Sass:
$border-chart-grid-line-style
CSS-muuttuja:
var(--kds-border-chart-grid-line-style)
solid
JS/JSON:
border.chart.section.divider.width
JS variable:
BORDER_CHART_SECTION_DIVIDER_WIDTH
Sass:
$border-chart-section-divider-width
CSS-muuttuja:
var(--kds-border-chart-section-divider-width)
2px
JS/JSON:
border.chart.section.divider.style
JS variable:
BORDER_CHART_SECTION_DIVIDER_STYLE
Sass:
$border-chart-section-divider-style
CSS-muuttuja:
var(--kds-border-chart-section-divider-style)
solid

Typografia

MuuttujaArvo
JS/JSON:
typography.chart.body.font-family
JS variable:
TYPOGRAPHY_CHART_BODY_FONT_FAMILY
Sass:
$typography-chart-body-font-family
CSS-muuttuja:
var(--kds-typography-chart-body-font-family)
Nunito, Arial, -apple-system, BlinkMacSystemFont, ...
font-family.kanta.body
JS/JSON:
typography.chart.title.font-family
JS variable:
TYPOGRAPHY_CHART_TITLE_FONT_FAMILY
Sass:
$typography-chart-title-font-family
CSS-muuttuja:
var(--kds-typography-chart-title-font-family)
Montserrat, Arial, -apple-system, BlinkMacSystemFo...
font-family.kanta.heading
JS/JSON:
typography.chart.title.font-size
JS variable:
TYPOGRAPHY_CHART_TITLE_FONT_SIZE
Sass:
$typography-chart-title-font-size
CSS-muuttuja:
var(--kds-typography-chart-title-font-size)
1.375rem
font-size.2xl
JS/JSON:
typography.chart.title.font-weight
JS variable:
TYPOGRAPHY_CHART_TITLE_FONT_WEIGHT
Sass:
$typography-chart-title-font-weight
CSS-muuttuja:
var(--kds-typography-chart-title-font-weight)
600
font-weight.semibold
JS/JSON:
typography.chart.title.line-height
JS variable:
TYPOGRAPHY_CHART_TITLE_LINE_HEIGHT
Sass:
$typography-chart-title-line-height
CSS-muuttuja:
var(--kds-typography-chart-title-line-height)
1.35
line-height.md
JS/JSON:
typography.chart.title.letter-spacing
JS variable:
TYPOGRAPHY_CHART_TITLE_LETTER_SPACING
Sass:
$typography-chart-title-letter-spacing
CSS-muuttuja:
var(--kds-typography-chart-title-letter-spacing)
-0.02em
letter-spacing.sm
JS/JSON:
typography.chart.ingress.font-size
JS variable:
TYPOGRAPHY_CHART_INGRESS_FONT_SIZE
Sass:
$typography-chart-ingress-font-size
CSS-muuttuja:
var(--kds-typography-chart-ingress-font-size)
1rem
font-size.base
JS/JSON:
typography.chart.ingress.font-weight
JS variable:
TYPOGRAPHY_CHART_INGRESS_FONT_WEIGHT
Sass:
$typography-chart-ingress-font-weight
CSS-muuttuja:
var(--kds-typography-chart-ingress-font-weight)
400
font-weight.normal
JS/JSON:
typography.chart.ingress.line-height
JS variable:
TYPOGRAPHY_CHART_INGRESS_LINE_HEIGHT
Sass:
$typography-chart-ingress-line-height
CSS-muuttuja:
var(--kds-typography-chart-ingress-line-height)
1.5
line-height.lg
JS/JSON:
typography.chart.ingress.letter-spacing
JS variable:
TYPOGRAPHY_CHART_INGRESS_LETTER_SPACING
Sass:
$typography-chart-ingress-letter-spacing
CSS-muuttuja:
var(--kds-typography-chart-ingress-letter-spacing)
0
letter-spacing.md
JS/JSON:
typography.chart.legend.font-size
JS variable:
TYPOGRAPHY_CHART_LEGEND_FONT_SIZE
Sass:
$typography-chart-legend-font-size
CSS-muuttuja:
var(--kds-typography-chart-legend-font-size)
0.875rem
font-size.sm
JS/JSON:
typography.chart.legend.font-weight
JS variable:
TYPOGRAPHY_CHART_LEGEND_FONT_WEIGHT
Sass:
$typography-chart-legend-font-weight
CSS-muuttuja:
var(--kds-typography-chart-legend-font-weight)
400
font-weight.normal
JS/JSON:
typography.chart.legend.line-height
JS variable:
TYPOGRAPHY_CHART_LEGEND_LINE_HEIGHT
Sass:
$typography-chart-legend-line-height
CSS-muuttuja:
var(--kds-typography-chart-legend-line-height)
1.5
line-height.lg
JS/JSON:
typography.chart.legend.letter-spacing
JS variable:
TYPOGRAPHY_CHART_LEGEND_LETTER_SPACING
Sass:
$typography-chart-legend-letter-spacing
CSS-muuttuja:
var(--kds-typography-chart-legend-letter-spacing)
0
letter-spacing.md
JS/JSON:
typography.chart.axis.label.font-size
JS variable:
TYPOGRAPHY_CHART_AXIS_LABEL_FONT_SIZE
Sass:
$typography-chart-axis-label-font-size
CSS-muuttuja:
var(--kds-typography-chart-axis-label-font-size)
0.875rem
font-size.sm
JS/JSON:
typography.chart.axis.label.font-weight
JS variable:
TYPOGRAPHY_CHART_AXIS_LABEL_FONT_WEIGHT
Sass:
$typography-chart-axis-label-font-weight
CSS-muuttuja:
var(--kds-typography-chart-axis-label-font-weight)
400
font-weight.normal
JS/JSON:
typography.chart.axis.label.line-height
JS variable:
TYPOGRAPHY_CHART_AXIS_LABEL_LINE_HEIGHT
Sass:
$typography-chart-axis-label-line-height
CSS-muuttuja:
var(--kds-typography-chart-axis-label-line-height)
1.5
line-height.lg
JS/JSON:
typography.chart.axis.label.letter-spacing
JS variable:
TYPOGRAPHY_CHART_AXIS_LABEL_LETTER_SPACING
Sass:
$typography-chart-axis-label-letter-spacing
CSS-muuttuja:
var(--kds-typography-chart-axis-label-letter-spacing)
0
letter-spacing.md
JS/JSON:
typography.chart.datapoint.font-size
JS variable:
TYPOGRAPHY_CHART_DATAPOINT_FONT_SIZE
Sass:
$typography-chart-datapoint-font-size
CSS-muuttuja:
var(--kds-typography-chart-datapoint-font-size)
0.875rem
font-size.sm
JS/JSON:
typography.chart.datapoint.font-weight
JS variable:
TYPOGRAPHY_CHART_DATAPOINT_FONT_WEIGHT
Sass:
$typography-chart-datapoint-font-weight
CSS-muuttuja:
var(--kds-typography-chart-datapoint-font-weight)
400
font-weight.normal
JS/JSON:
typography.chart.datapoint.line-height
JS variable:
TYPOGRAPHY_CHART_DATAPOINT_LINE_HEIGHT
Sass:
$typography-chart-datapoint-line-height
CSS-muuttuja:
var(--kds-typography-chart-datapoint-line-height)
1.5
line-height.lg
JS/JSON:
typography.chart.datapoint.letter-spacing
JS variable:
TYPOGRAPHY_CHART_DATAPOINT_LETTER_SPACING
Sass:
$typography-chart-datapoint-letter-spacing
CSS-muuttuja:
var(--kds-typography-chart-datapoint-letter-spacing)
0
letter-spacing.md