Variables
The Telerik and Kendo UI Material theme employs multiple variables that you can use to customize the theme.
Variables by Scope
When it comes to the effect that a specific change in a variable's value causes, variables are not equal. Changing some values will have a much wider impact on the theme than changing others.
Depending on the extent of the styles that each variable controls, the variables fall into three main groups:
- Global variables—They control globally used theme colors and metrics like
$kendo-colors
,$kendo-spacing
,$kendo-border-radii
,$kendo-elevation
. - Variables affecting individual UI components—For example,
$kendo-grid-bg
,$kendo-tabstrip-font-size
.
Most component-level variables link to generic variables that are higher in the hierarchy. For instance, you can customize the background of the Grid component both through the $kendo-colors
map and the $kendo-grid-bg
variables. In this case, consider that the $kendo-grid-bg
variable references a value from the $kendo-colors
map.
List of Variables
The following tables represent the variables in the Telerik and Kendo UI Material theme by the type of styles that they control.
Color Variables
The $kendo-colors
Sass map of the Telerik and Kendo UI Material theme is represented in the following table:
Key | Value |
---|---|
Variable: kendo-colors | |
app-surface |
|
on-app-surface |
|
subtle |
|
surface |
|
surface-alt |
|
border |
|
border-alt |
|
base-subtle |
|
base-subtle-hover |
|
base-subtle-active |
|
base |
|
base-hover |
|
base-active |
|
base-emphasis |
|
base-on-subtle |
|
on-base |
|
base-on-surface |
|
primary-subtle |
|
primary-subtle-hover |
|
primary-subtle-active |
|
primary |
|
primary-hover |
|
primary-active |
|
primary-emphasis |
|
primary-on-subtle |
|
on-primary |
|
primary-on-surface |
|
secondary-subtle |
|
secondary-subtle-hover |
|
secondary-subtle-active |
|
secondary |
|
secondary-hover |
|
secondary-active |
|
secondary-emphasis |
|
secondary-on-subtle |
|
on-secondary |
|
secondary-on-surface |
|
tertiary-subtle |
|
tertiary-subtle-hover |
|
tertiary-subtle-active |
|
tertiary |
|
tertiary-hover |
|
tertiary-active |
|
tertiary-emphasis |
|
tertiary-on-subtle |
|
on-tertiary |
|
tertiary-on-surface |
|
info-subtle |
|
info-subtle-hover |
|
info-subtle-active |
|
info |
|
info-hover |
|
info-active |
|
info-emphasis |
|
info-on-subtle |
|
on-info |
|
info-on-surface |
|
success-subtle |
|
success-subtle-hover |
|
success-subtle-active |
|
success |
|
success-hover |
|
success-active |
|
success-emphasis |
|
success-on-subtle |
|
on-success |
|
success-on-surface |
|
warning-subtle |
|
warning-subtle-hover |
|
warning-subtle-active |
|
warning |
|
warning-hover |
|
warning-active |
|
warning-emphasis |
|
warning-on-subtle |
|
on-warning |
|
warning-on-surface |
|
error-subtle |
|
error-subtle-hover |
|
error-subtle-active |
|
error |
|
error-hover |
|
error-active |
|
error-emphasis |
|
error-on-subtle |
|
on-error |
|
error-on-surface |
|
light-subtle |
|
light-subtle-hover |
|
light-subtle-active |
|
light |
|
light-hover |
|
light-active |
|
light-emphasis |
|
light-on-subtle |
|
on-light |
|
light-on-surface |
|
dark-subtle |
|
dark-subtle-hover |
|
dark-subtle-active |
|
dark |
|
dark-hover |
|
dark-active |
|
dark-emphasis |
|
dark-on-subtle |
|
on-dark |
|
dark-on-surface |
|
inverse-subtle |
|
inverse-subtle-hover |
|
inverse-subtle-active |
|
inverse |
|
inverse-hover |
|
inverse-active |
|
inverse-emphasis |
|
inverse-on-subtle |
|
on-inverse |
|
inverse-on-surface |
|
series-a |
|
series-a-bold |
|
series-a-bolder |
|
series-a-subtle |
|
series-a-subtler |
|
series-b |
|
series-b-bold |
|
series-b-bolder |
|
series-b-subtle |
|
series-b-subtler |
|
series-c |
|
series-c-bold |
|
series-c-bolder |
|
series-c-subtle |
|
series-c-subtler |
|
series-d |
|
series-d-bold |
|
series-d-bolder |
|
series-d-subtle |
|
series-d-subtler |
|
series-e |
|
series-e-bold |
|
series-e-bolder |
|
series-e-subtle |
|
series-e-subtler |
|
series-f |
|
series-f-bold |
|
series-f-bolder |
|
series-f-subtle |
|
series-f-subtler |
|
Description: The global default Colors map. |
Spacing Variables
The $kendo-spacing
Sass map of the Telerik and Kendo UI Material theme is represented in the following table:
Step | Value | Example |
---|---|---|
0 | 0px | |
1px | 1px | |
0.5 | 0.125rem | |
1 | 0.25rem | |
1.5 | 0.375rem | |
2 | 0.5rem | |
2.5 | 0.625rem | |
3 | 0.75rem | |
3.5 | 0.875rem | |
4 | 1rem | |
4.5 | 1.125rem | |
5 | 1.25rem | |
5.5 | 1.375rem | |
6 | 1.5rem | |
6.5 | 1.625rem | |
7 | 1.75rem | |
7.5 | 1.875rem | |
8 | 2rem | |
9 | 2.25rem | |
10 | 2.5rem | |
11 | 2.75rem | |
12 | 3rem | |
13 | 3.25rem | |
14 | 3.5rem | |
15 | 3.75rem | |
16 | 4rem | |
17 | 4.25rem | |
18 | 4.5rem | |
19 | 4.75rem | |
20 | 5rem | |
21 | 5.25rem | |
22 | 5.5rem | |
23 | 5.75rem | |
24 | 6rem | |
25 | 7rem | |
26 | 8rem | |
27 | 9rem | |
28 | 10rem | |
29 | 11rem | |
30 | 12rem |
Typography Variables
Variable | Default Value | Computed Value | Value |
---|---|---|---|
kendo-font-size | 0.875rem | 0.875rem | Default: 0.875rem Computed: 0.875rem |
Description: The base font size across all components. | |||
kendo-font-size-xs | 0.625rem | 0.625rem | Default: 0.625rem Computed: 0.625rem |
Description: The extra extra small font size across all components. | |||
kendo-font-size-sm | 0.75rem | 0.75rem | Default: 0.75rem Computed: 0.75rem |
Description: The small font size across all components. | |||
kendo-font-size-md | $kendo-font-size | 0.875rem | Default: $kendo-font-size Computed: 0.875rem |
Description: The medium font size across all components. | |||
kendo-font-size-lg | 1rem | 1rem | Default: 1rem Computed: 1rem |
Description: The large font size across all components. | |||
kendo-font-size-xl | 1.25rem | 1.25rem | Default: 1.25rem Computed: 1.25rem |
Description: The extra large font size across all components. | |||
kendo-line-height | k-math-div( 28, 14 ) | 2 | Default: k-math-div( 28, 14 ) Computed: 2 |
Description: The base line height across all components. | |||
kendo-line-height-xs | 1 | 1 | Default: 1 Computed: 1 |
Description: The extra small line height across all components. | |||
kendo-line-height-sm | 1.2 | 1.2 | Default: 1.2 Computed: 1.2 |
Description: The small line height across all components. | |||
kendo-line-height-md | $kendo-line-height | 2 | Default: $kendo-line-height Computed: 2 |
Description: The medium line height across all components. | |||
kendo-line-height-lg | 1.5 | 1.5 | Default: 1.5 Computed: 1.5 |
Description: The large line height across all components. | |||
kendo-line-height-em | calc( #{$kendo-line-height} * 1em ) | calc(2 * 1em) | Default: calc( #{$kendo-line-height} * 1em ) Computed: calc(2 * 1em) |
Description: The base line height in ems across all components. | |||
kendo-letter-spacing | null | null | Default: null Computed: null |
Description: The base letter spacing across all components. | |||
kendo-letter-spacing-tightest | -2.5px | -2.5px | Default: -2.5px Computed: -2.5px |
Description: The tightest letter spacing across all components. | |||
kendo-letter-spacing-tighter | -1.5px | -1.5px | Default: -1.5px Computed: -1.5px |
Description: Slightly looser than the tighter letter spacing across all components. | |||
kendo-letter-spacing-tight | -.5px | -0.5px | Default: -.5px Computed: -0.5px |
Description: Moderately tight letter spacing across all components. | |||
kendo-letter-spacing-normal | 0px | 0px | Default: 0px Computed: 0px |
Description: The normal letter spacing across all components. | |||
kendo-letter-spacing-wide | .15px | 0.15px | Default: .15px Computed: 0.15px |
Description: Wide letter spacing across all components | |||
kendo-letter-spacing-wider | .25px | 0.25px | Default: .25px Computed: 0.25px |
Description: Slightly wider than the wide letter spacing across all components. | |||
kendo-letter-spacing-widest | .35px | 0.35px | Default: .35px Computed: 0.35px |
Description: The widest letter spacing across all components. | |||
kendo-font-family-sans-serif | Roboto, "Helvetica Neue", sans-serif | Roboto, "Helvetica Neue", sans-serif | Default: Roboto, "Helvetica Neue", sans-serif Computed: Roboto, "Helvetica Neue", sans-serif |
Description: The sans-serif font family across all components. | |||
kendo-font-family-monospace | Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace | Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace | Default: Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace Computed: Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace |
Description: The monospace font family across all components. | |||
kendo-font-family | $kendo-font-family-sans-serif | Roboto, "Helvetica Neue", sans-serif | Default: $kendo-font-family-sans-serif Computed: Roboto, "Helvetica Neue", sans-serif |
Description: The base font family across all components. | |||
kendo-font-sizes | $_default-font-sizes | (xs: 0.625rem, sm: 0.75rem, md: 0.875rem, lg: 1rem, xl: 1.25rem) | Default: $_default-font-sizes Computed: (xs: 0.625rem, sm: 0.75rem, md: 0.875rem, lg: 1rem, xl: 1.25rem) |
Description: The font sizes map | |||
kendo-line-heights | $_default-line-heights | (xs: 1, sm: 1.2, md: 2, lg: 1.5) | Default: $_default-line-heights Computed: (xs: 1, sm: 1.2, md: 2, lg: 1.5) |
Description: The line heights map | |||
kendo-letter-spacings | $_default-letter-spacings | (tightest: -2.5px, tighter: -1.5px, tight: -0.5px, normal: 0px, wide: 0.15px, wider: 0.25px, widest: 0.35px) | Default: $_default-letter-spacings Computed: (tightest: -2.5px, tighter: -1.5px, tight: -0.5px, normal: 0px, wide: 0.15px, wider: 0.25px, widest: 0.35px) |
Description: The letter spacings map | |||
kendo-font-families | $_default-font-families | (sans-serif: (Roboto, "Helvetica Neue", sans-serif), monospace: (Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace)) | Default: $_default-font-families Computed: (sans-serif: (Roboto, "Helvetica Neue", sans-serif), monospace: (Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace)) |
Description: The font families map | |||
kendo-h1-font-size | 96px | 96px | Default: 96px Computed: 96px |
Description: The font size of the highest level heading. | |||
kendo-h2-font-size | 60px | 60px | Default: 60px Computed: 60px |
Description: The font size of the second highest level heading. | |||
kendo-h3-font-size | 48px | 48px | Default: 48px Computed: 48px |
Description: The font size of the third highest level heading. | |||
kendo-h4-font-size | 34px | 34px | Default: 34px Computed: 34px |
Description: The font size of the fourth highest level heading. | |||
kendo-h5-font-size | 24px | 24px | Default: 24px Computed: 24px |
Description: The font size of the fifth highest level heading. | |||
kendo-h6-font-size | 20px | 20px | Default: 20px Computed: 20px |
Description: The font size of the sixth highest level heading. | |||
kendo-h1-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit ) Computed: var(--kendo-font-family, inherit) |
Description: The font family of the highest level heading. | |||
kendo-h2-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit ) Computed: var(--kendo-font-family, inherit) |
Description: The font family of the second highest level heading. | |||
kendo-h3-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit ) Computed: var(--kendo-font-family, inherit) |
Description: The font family of the third highest level heading. | |||
kendo-h4-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit ) Computed: var(--kendo-font-family, inherit) |
Description: The font family of the fourth highest level heading. | |||
kendo-h5-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit ) Computed: var(--kendo-font-family, inherit) |
Description: The font family of the fifth highest level heading. | |||
kendo-h6-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit ) Computed: var(--kendo-font-family, inherit) |
Description: The font family of the sixth highest level heading. | |||
kendo-h1-line-height | 112px | 112px | Default: 112px Computed: 112px |
Description: The line height of the highest level heading. | |||
kendo-h2-line-height | 72px | 72px | Default: 72px Computed: 72px |
Description: The line height of the second highest level heading. | |||
kendo-h3-line-height | 56px | 56px | Default: 56px Computed: 56px |
Description: The line height of the third highest level heading. | |||
kendo-h4-line-height | 36px | 36px | Default: 36px Computed: 36px |
Description: The line height of the fourth highest level heading. | |||
kendo-h5-line-height | 24px | 24px | Default: 24px Computed: 24px |
Description: The line height of the fifth highest level heading. | |||
kendo-h6-line-height | 24px | 24px | Default: 24px Computed: 24px |
Description: The line height of the sixth highest level heading. | |||
kendo-h1-font-weight | var( --kendo-font-weight-light, normal ) | var(--kendo-font-weight-light, normal) | Default: var( --kendo-font-weight-light, normal ) Computed: var(--kendo-font-weight-light, normal) |
Description: The font weight of the highest level heading. | |||
kendo-h2-font-weight | var( --kendo-font-weight-light, normal ) | var(--kendo-font-weight-light, normal) | Default: var( --kendo-font-weight-light, normal ) Computed: var(--kendo-font-weight-light, normal) |
Description: The font weight of the second highest level heading. | |||
kendo-h3-font-weight | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) | Default: var( --kendo-font-weight-normal, normal ) Computed: var(--kendo-font-weight-normal, normal) |
Description: The font weight of the third highest level heading. | |||
kendo-h4-font-weight | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) | Default: var( --kendo-font-weight-normal, normal ) Computed: var(--kendo-font-weight-normal, normal) |
Description: The font weight of the fourth highest level heading. | |||
kendo-h5-font-weight | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) | Default: var( --kendo-font-weight-normal, normal ) Computed: var(--kendo-font-weight-normal, normal) |
Description: The font weight of the fifth highest level heading. | |||
kendo-h6-font-weight | var( --kendo-font-weight-medium, normal ) | var(--kendo-font-weight-medium, normal) | Default: var( --kendo-font-weight-medium, normal ) Computed: var(--kendo-font-weight-medium, normal) |
Description: The font weight of the sixth highest level heading. | |||
kendo-h1-letter-spacing | var( --kendo-letter-spacing-tighter, normal ) | var(--kendo-letter-spacing-tighter, normal) | Default: var( --kendo-letter-spacing-tighter, normal ) Computed: var(--kendo-letter-spacing-tighter, normal) |
Description: The letter spacing of the highest level heading. | |||
kendo-h2-letter-spacing | var( --kendo-letter-spacing-tight, normal ) | var(--kendo-letter-spacing-tight, normal) | Default: var( --kendo-letter-spacing-tight, normal ) Computed: var(--kendo-letter-spacing-tight, normal) |
Description: The letter spacing of the second highest level heading. | |||
kendo-h3-letter-spacing | var( --kendo-letter-spacing-normal, normal ) | var(--kendo-letter-spacing-normal, normal) | Default: var( --kendo-letter-spacing-normal, normal ) Computed: var(--kendo-letter-spacing-normal, normal) |
Description: The letter spacing of the third highest level heading. | |||
kendo-h4-letter-spacing | var( --kendo-letter-spacing-wider, normal ) | var(--kendo-letter-spacing-wider, normal) | Default: var( --kendo-letter-spacing-wider, normal ) Computed: var(--kendo-letter-spacing-wider, normal) |
Description: The letter spacing of the fourth highest level heading. | |||
kendo-h5-letter-spacing | var( --kendo-letter-spacing-normal, normal ) | var(--kendo-letter-spacing-normal, normal) | Default: var( --kendo-letter-spacing-normal, normal ) Computed: var(--kendo-letter-spacing-normal, normal) |
Description: The letter spacing of the fifth highest level heading. | |||
kendo-h6-letter-spacing | var( --kendo-letter-spacing-wide, normal ) | var(--kendo-letter-spacing-wide, normal) | Default: var( --kendo-letter-spacing-wide, normal ) Computed: var(--kendo-letter-spacing-wide, normal) |
Description: The letter spacing of the sixth highest level heading. | |||
kendo-h1-margin | 0 0 12px | 0 0 12px | Default: 0 0 12px Computed: 0 0 12px |
Description: The margin of the highest level heading. | |||
kendo-h2-margin | 0 0 12px | 0 0 12px | Default: 0 0 12px Computed: 0 0 12px |
Description: The margin of the second highest level heading. | |||
kendo-h3-margin | 0 0 12px | 0 0 12px | Default: 0 0 12px Computed: 0 0 12px |
Description: The margin of the third highest level heading. | |||
kendo-h4-margin | 0 0 12px | 0 0 12px | Default: 0 0 12px Computed: 0 0 12px |
Description: The margin of the fourth highest level heading. | |||
kendo-h5-margin | 0 0 12px | 0 0 12px | Default: 0 0 12px Computed: 0 0 12px |
Description: The margin of the fifth highest level heading. | |||
kendo-h6-margin | 0 0 12px | 0 0 12px | Default: 0 0 12px Computed: 0 0 12px |
Description: The margin of the sixth highest level heading. | |||
kendo-headings | (
h1: (
font-size: $kendo-h1-font-size,
font-family: $kendo-h1-font-family,
line-height: $kendo-h1-line-height,
font-weight: $kendo-h1-font-weight,
letter-spacing: $kendo-h1-letter-spacing,
margin: $kendo-h1-margin
),
h2: (
font-size: $kendo-h2-font-size,
font-family: $kendo-h2-font-family,
line-height: $kendo-h2-line-height,
font-weight: $kendo-h2-font-weight,
letter-spacing: $kendo-h2-letter-spacing,
margin: $kendo-h2-margin
),
h3: (
font-size: $kendo-h3-font-size,
font-family: $kendo-h3-font-family,
line-height: $kendo-h3-line-height,
font-weight: $kendo-h3-font-weight,
letter-spacing: $kendo-h3-letter-spacing,
margin: $kendo-h3-margin
),
h4: (
font-size: $kendo-h4-font-size,
font-family: $kendo-h4-font-family,
line-height: $kendo-h4-line-height,
font-weight: $kendo-h4-font-weight,
letter-spacing: $kendo-h4-letter-spacing,
margin: $kendo-h4-margin
),
h5: (
font-size: $kendo-h5-font-size,
font-family: $kendo-h5-font-family,
line-height: $kendo-h5-line-height,
font-weight: $kendo-h5-font-weight,
letter-spacing: $kendo-h5-letter-spacing,
margin: $kendo-h5-margin
),
h6: (
font-size: $kendo-h6-font-size,
font-family: $kendo-h6-font-family,
line-height: $kendo-h6-line-height,
font-weight: $kendo-h6-font-weight,
letter-spacing: $kendo-h6-letter-spacing,
margin: $kendo-h6-margin
),
) | (h1: (font-size: 96px, font-family: var(--kendo-font-family, inherit), line-height: 112px, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal), margin: 0 0 12px), h2: (font-size: 60px, font-family: var(--kendo-font-family, inherit), line-height: 72px, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tight, normal), margin: 0 0 12px), h3: (font-size: 48px, font-family: var(--kendo-font-family, inherit), line-height: 56px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: var(--kendo-letter-spacing-normal, normal), margin: 0 0 12px), h4: (font-size: 34px, font-family: var(--kendo-font-family, inherit), line-height: 36px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: var(--kendo-letter-spacing-wider, normal), margin: 0 0 12px), h5: (font-size: 24px, font-family: var(--kendo-font-family, inherit), line-height: 24px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: var(--kendo-letter-spacing-normal, normal), margin: 0 0 12px), h6: (font-size: 20px, font-family: var(--kendo-font-family, inherit), line-height: 24px, font-weight: var(--kendo-font-weight-medium, normal), letter-spacing: var(--kendo-letter-spacing-wide, normal), margin: 0 0 12px)) | Default: (
h1: (
font-size: $kendo-h1-font-size,
font-family: $kendo-h1-font-family,
line-height: $kendo-h1-line-height,
font-weight: $kendo-h1-font-weight,
letter-spacing: $kendo-h1-letter-spacing,
margin: $kendo-h1-margin
),
h2: (
font-size: $kendo-h2-font-size,
font-family: $kendo-h2-font-family,
line-height: $kendo-h2-line-height,
font-weight: $kendo-h2-font-weight,
letter-spacing: $kendo-h2-letter-spacing,
margin: $kendo-h2-margin
),
h3: (
font-size: $kendo-h3-font-size,
font-family: $kendo-h3-font-family,
line-height: $kendo-h3-line-height,
font-weight: $kendo-h3-font-weight,
letter-spacing: $kendo-h3-letter-spacing,
margin: $kendo-h3-margin
),
h4: (
font-size: $kendo-h4-font-size,
font-family: $kendo-h4-font-family,
line-height: $kendo-h4-line-height,
font-weight: $kendo-h4-font-weight,
letter-spacing: $kendo-h4-letter-spacing,
margin: $kendo-h4-margin
),
h5: (
font-size: $kendo-h5-font-size,
font-family: $kendo-h5-font-family,
line-height: $kendo-h5-line-height,
font-weight: $kendo-h5-font-weight,
letter-spacing: $kendo-h5-letter-spacing,
margin: $kendo-h5-margin
),
h6: (
font-size: $kendo-h6-font-size,
font-family: $kendo-h6-font-family,
line-height: $kendo-h6-line-height,
font-weight: $kendo-h6-font-weight,
letter-spacing: $kendo-h6-letter-spacing,
margin: $kendo-h6-margin
),
) Computed: (h1: (font-size: 96px, font-family: var(--kendo-font-family, inherit), line-height: 112px, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal), margin: 0 0 12px), h2: (font-size: 60px, font-family: var(--kendo-font-family, inherit), line-height: 72px, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tight, normal), margin: 0 0 12px), h3: (font-size: 48px, font-family: var(--kendo-font-family, inherit), line-height: 56px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: var(--kendo-letter-spacing-normal, normal), margin: 0 0 12px), h4: (font-size: 34px, font-family: var(--kendo-font-family, inherit), line-height: 36px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: var(--kendo-letter-spacing-wider, normal), margin: 0 0 12px), h5: (font-size: 24px, font-family: var(--kendo-font-family, inherit), line-height: 24px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: var(--kendo-letter-spacing-normal, normal), margin: 0 0 12px), h6: (font-size: 20px, font-family: var(--kendo-font-family, inherit), line-height: 24px, font-weight: var(--kendo-font-weight-medium, normal), letter-spacing: var(--kendo-letter-spacing-wide, normal), margin: 0 0 12px)) |
Description: The headings Map. | |||
kendo-paragraph-margin | 0 0 12px | 0 0 12px | Default: 0 0 12px Computed: 0 0 12px |
Description: The margin of the paragraph. | |||
kendo-paragraph-font-size | 1rem | 1rem | Default: 1rem Computed: 1rem |
Description: The font size of the paragraph. | |||
kendo-paragraph-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit ) Computed: var(--kendo-font-family, inherit) |
Description: The font family of the paragraph. | |||
kendo-paragraph-font-weight | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) | Default: var( --kendo-font-weight-normal, normal ) Computed: var(--kendo-font-weight-normal, normal) |
Description: The font weight of the paragraph. | |||
kendo-paragraph-letter-spacing | .0313em | 0.0313em | Default: .0313em Computed: 0.0313em |
Description: The letter spacing of the paragraph. | |||
kendo-code-font-size | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) | Default: var( --kendo-font-size, inherit ) Computed: var(--kendo-font-size, inherit) |
Description: The font size of the code tag. | |||
kendo-code-font-family | var( --kendo-font-family-monospace, normal ) | var(--kendo-font-family-monospace, normal) | Default: var( --kendo-font-family-monospace, normal ) Computed: var(--kendo-font-family-monospace, normal) |
Description: The font family of the code tag. | |||
kendo-code-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal ) Computed: var(--kendo-line-height, normal) |
Description: The line height of the code tag. | |||
kendo-code-font-weight | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) | Default: var( --kendo-font-weight-normal, normal ) Computed: var(--kendo-font-weight-normal, normal) |
Description: The font weight of the code tag. | |||
kendo-code-letter-spacing | null | null | Default: null Computed: null |
Description: The letter spacing of the code tag. | |||
kendo-code-padding-x | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1) Computed: var(--kendo-spacing-1, 0.25rem) |
Description: The horizontal padding of the code tag. | |||
kendo-code-padding-y | k-spacing(0) | var(--kendo-spacing-0, 0px) | Default: k-spacing(0) Computed: var(--kendo-spacing-0, 0px) |
Description: The vertical padding of the code tag. | |||
kendo-pre-padding-x | k-spacing(6) | var(--kendo-spacing-6, 1.5rem) | Default: k-spacing(6) Computed: var(--kendo-spacing-6, 1.5rem) |
Description: The horizontal padding of the preformatted text. | |||
kendo-pre-padding-y | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4) Computed: var(--kendo-spacing-4, 1rem) |
Description: The vertical padding of the preformatted text. | |||
kendo-code-border-width | 1px | 1px | Default: 1px Computed: 1px |
Description: The border width of the code tag. | |||
kendo-code-bg | $kendo-base-bg | var(--kendo-color-app-surface, #ffffff) | Default: $kendo-base-bg Computed: var(--kendo-color-app-surface, #ffffff) |
Description: The background color of the code tag. | |||
kendo-code-text | $kendo-component-text | var(--kendo-color-on-app-surface, #212121) | Default: $kendo-component-text Computed: var(--kendo-color-on-app-surface, #212121) |
Description: The text color of the code tag. | |||
kendo-code-border | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.12)) | Default: $kendo-component-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.12)) |
Description: The border color of the code tag. | |||
kendo-display1-font-size | calc( var( --kendo-font-size, .875rem ) * 9.5 ) | calc(var(--kendo-font-size, 0.875rem) * 9.5) | Default: calc( var( --kendo-font-size, .875rem ) * 9.5 ) Computed: calc(var(--kendo-font-size, 0.875rem) * 9.5) |
Description: The font size of the largest display text. | |||
kendo-display2-font-size | calc( var( --kendo-font-size, .875rem ) * 8.75 ) | calc(var(--kendo-font-size, 0.875rem) * 8.75) | Default: calc( var( --kendo-font-size, .875rem ) * 8.75 ) Computed: calc(var(--kendo-font-size, 0.875rem) * 8.75) |
Description: The font size of the second largest display text. | |||
kendo-display3-font-size | calc( var( --kendo-font-size, .875rem ) * 8 ) | calc(var(--kendo-font-size, 0.875rem) * 8) | Default: calc( var( --kendo-font-size, .875rem ) * 8 ) Computed: calc(var(--kendo-font-size, 0.875rem) * 8) |
Description: The font size of the third largest display text. | |||
kendo-display4-font-size | calc( var( --kendo-font-size, .875rem ) * 7.25 ) | calc(var(--kendo-font-size, 0.875rem) * 7.25) | Default: calc( var( --kendo-font-size, .875rem ) * 7.25 ) Computed: calc(var(--kendo-font-size, 0.875rem) * 7.25) |
Description: The font size of the fourth largest display text. | |||
kendo-display1-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit ) Computed: var(--kendo-font-family, inherit) |
Description: The font family of the largest display text. | |||
kendo-display2-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit ) Computed: var(--kendo-font-family, inherit) |
Description: The font family of the second largest display text. | |||
kendo-display3-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit ) Computed: var(--kendo-font-family, inherit) |
Description: The font family of the third largest display text. | |||
kendo-display4-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit ) Computed: var(--kendo-font-family, inherit) |
Description: The font family of the fourth largest display text. | |||
kendo-display1-line-height | 1.2 | 1.2 | Default: 1.2 Computed: 1.2 |
Description: The line height of the largest display text. | |||
kendo-display2-line-height | 1.2 | 1.2 | Default: 1.2 Computed: 1.2 |
Description: The line height of the second largest display text. | |||
kendo-display3-line-height | 1.2 | 1.2 | Default: 1.2 Computed: 1.2 |
Description: The line height of the third largest display text. | |||
kendo-display4-line-height | 1.2 | 1.2 | Default: 1.2 Computed: 1.2 |
Description: The line height of the fourth largest display text. | |||
kendo-display1-font-weight | var( --kendo-font-weight-light, normal ) | var(--kendo-font-weight-light, normal) | Default: var( --kendo-font-weight-light, normal ) Computed: var(--kendo-font-weight-light, normal) |
Description: The font weight of the largest display text. | |||
kendo-display2-font-weight | var( --kendo-font-weight-light, normal ) | var(--kendo-font-weight-light, normal) | Default: var( --kendo-font-weight-light, normal ) Computed: var(--kendo-font-weight-light, normal) |
Description: The font weight of the second largest display text. | |||
kendo-display3-font-weight | var( --kendo-font-weight-light, normal ) | var(--kendo-font-weight-light, normal) | Default: var( --kendo-font-weight-light, normal ) Computed: var(--kendo-font-weight-light, normal) |
Description: The font weight of the third largest display text. | |||
kendo-display4-font-weight | var( --kendo-font-weight-light, normal ) | var(--kendo-font-weight-light, normal) | Default: var( --kendo-font-weight-light, normal ) Computed: var(--kendo-font-weight-light, normal) |
Description: The font weight of the fourth largest display text. | |||
kendo-display1-letter-spacing | var( --kendo-letter-spacing-tighter, normal ) | var(--kendo-letter-spacing-tighter, normal) | Default: var( --kendo-letter-spacing-tighter, normal ) Computed: var(--kendo-letter-spacing-tighter, normal) |
Description: The letter spacing of the largest display text. | |||
kendo-display2-letter-spacing | var( --kendo-letter-spacing-tighter, normal ) | var(--kendo-letter-spacing-tighter, normal) | Default: var( --kendo-letter-spacing-tighter, normal ) Computed: var(--kendo-letter-spacing-tighter, normal) |
Description: The letter spacing of the second largest display text. | |||
kendo-display3-letter-spacing | var( --kendo-letter-spacing-tighter, normal ) | var(--kendo-letter-spacing-tighter, normal) | Default: var( --kendo-letter-spacing-tighter, normal ) Computed: var(--kendo-letter-spacing-tighter, normal) |
Description: The letter spacing of the third largest display text. | |||
kendo-display4-letter-spacing | var( --kendo-letter-spacing-tighter, normal ) | var(--kendo-letter-spacing-tighter, normal) | Default: var( --kendo-letter-spacing-tighter, normal ) Computed: var(--kendo-letter-spacing-tighter, normal) |
Description: The letter spacing of the fourth largest display text. | |||
kendo-display | (
1: (
font-size: $kendo-display1-font-size,
font-family: $kendo-display1-font-family,
line-height: $kendo-display1-line-height,
font-weight: $kendo-display1-font-weight,
letter-spacing: $kendo-display1-letter-spacing
),
2: (
font-size: $kendo-display2-font-size,
font-family: $kendo-display2-font-family,
line-height: $kendo-display2-line-height,
font-weight: $kendo-display2-font-weight,
letter-spacing: $kendo-display2-letter-spacing
),
3: (
font-size: $kendo-display3-font-size,
font-family: $kendo-display3-font-family,
line-height: $kendo-display3-line-height,
font-weight: $kendo-display3-font-weight,
letter-spacing: $kendo-display3-letter-spacing
),
4: (
font-size: $kendo-display4-font-size,
font-family: $kendo-display4-font-family,
line-height: $kendo-display4-line-height,
font-weight: $kendo-display4-font-weight,
letter-spacing: $kendo-display4-letter-spacing
),
) | (1: (font-size: calc(var(--kendo-font-size, 0.875rem) * 9.5), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal)), 2: (font-size: calc(var(--kendo-font-size, 0.875rem) * 8.75), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal)), 3: (font-size: calc(var(--kendo-font-size, 0.875rem) * 8), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal)), 4: (font-size: calc(var(--kendo-font-size, 0.875rem) * 7.25), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal))) | Default: (
1: (
font-size: $kendo-display1-font-size,
font-family: $kendo-display1-font-family,
line-height: $kendo-display1-line-height,
font-weight: $kendo-display1-font-weight,
letter-spacing: $kendo-display1-letter-spacing
),
2: (
font-size: $kendo-display2-font-size,
font-family: $kendo-display2-font-family,
line-height: $kendo-display2-line-height,
font-weight: $kendo-display2-font-weight,
letter-spacing: $kendo-display2-letter-spacing
),
3: (
font-size: $kendo-display3-font-size,
font-family: $kendo-display3-font-family,
line-height: $kendo-display3-line-height,
font-weight: $kendo-display3-font-weight,
letter-spacing: $kendo-display3-letter-spacing
),
4: (
font-size: $kendo-display4-font-size,
font-family: $kendo-display4-font-family,
line-height: $kendo-display4-line-height,
font-weight: $kendo-display4-font-weight,
letter-spacing: $kendo-display4-letter-spacing
),
) Computed: (1: (font-size: calc(var(--kendo-font-size, 0.875rem) * 9.5), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal)), 2: (font-size: calc(var(--kendo-font-size, 0.875rem) * 8.75), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal)), 3: (font-size: calc(var(--kendo-font-size, 0.875rem) * 8), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal)), 4: (font-size: calc(var(--kendo-font-size, 0.875rem) * 7.25), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal))) |
Description: The displays Map. | |||
kendo-font-size-xxs | 0.5rem | 0.5rem | Default: 0.5rem Computed: 0.5rem |
Description: The extra extra small font size across all components. | |||
kendo-font-weight | 400 | 400 | Default: 400 Computed: 400 |
Description: The base font weight across all components. | |||
kendo-font-weight-thin | 100 | 100 | Default: 100 Computed: 100 |
Description: The thin font weight across all components. | |||
kendo-font-weight-extra-light | 200 | 200 | Default: 200 Computed: 200 |
Description: The extra light font weight across all components. | |||
kendo-font-weight-light | 300 | 300 | Default: 300 Computed: 300 |
Description: The light font weight across all components. | |||
kendo-font-weight-normal | $kendo-font-weight | 400 | Default: $kendo-font-weight Computed: 400 |
Description: The normal font weight across all components. | |||
kendo-font-weight-medium | 500 | 500 | Default: 500 Computed: 500 |
Description: The medium font weight across all components. | |||
kendo-font-weight-semibold | 600 | 600 | Default: 600 Computed: 600 |
Description: The semibold font weight across all components. | |||
kendo-font-weight-bold | 700 | 700 | Default: 700 Computed: 700 |
Description: The bold font weight across all components. | |||
kendo-font-weight-extra-bold | 800 | 800 | Default: 800 Computed: 800 |
Description: The extra bold font weight across all components. | |||
kendo-font-weight-black | 900 | 900 | Default: 900 Computed: 900 |
Description: The most pronounced font weight across all components. | |||
kendo-font-family-sans | Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans | Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans | Default: Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans Computed: Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans |
Description: The sans font family across all components. | |||
kendo-font-family-serif | "Times New Roman", Georgia, Garamond, Palatino, Baskerville | "Times New Roman", Georgia, Garamond, Palatino, Baskerville | Default: "Times New Roman", Georgia, Garamond, Palatino, Baskerville Computed: "Times New Roman", Georgia, Garamond, Palatino, Baskerville |
Description: The serif font family across all components. | |||
kendo-font-weights | k-map-merge( $_default-font-weights, $kendo-font-weights ) | (thin: 100, extra-light: 200, light: 300, normal: 400, medium: 500, semibold: 600, bold: 700) | Default: k-map-merge( $_default-font-weights, $kendo-font-weights ) Computed: (thin: 100, extra-light: 200, light: 300, normal: 400, medium: 500, semibold: 600, bold: 700) |
Description: The font weights map |
Border Radii Variables
The $kendo-border-radii
Sass map of the Telerik and Kendo UI Material theme is represented in the following table:
Step | Value | Example |
---|---|---|
none | 0px | |
xs | 1px | |
sm | 0.125rem | |
md | 0.25rem | |
lg | 0.5rem | |
xl | 0.75rem | |
xxl | 1rem | |
xxxl | 1.25rem | |
full | 9999px |
Elevation Variables
The $kendo-elevation
Sass map of the Telerik and Kendo UI Material theme is represented in the following table:
Key | Value |
---|---|
Variable: kendo-elevation | |
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
Description: The global default Elevation map. |