Variables
The Telerik and Kendo UI Classic 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 Classic theme by the type of styles that they control.
Color Variables
The $kendo-colors
Sass map of the Telerik and Kendo UI Classic 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 Classic 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-h1-font-size | calc( var( --kendo-font-size, .875rem ) * 4 ) | calc(var(--kendo-font-size, 0.875rem) * 4) | Default: calc( var( --kendo-font-size, .875rem ) * 4 ) Computed: calc(var(--kendo-font-size, 0.875rem) * 4) |
Description: The font size of the highest level heading. | |||
kendo-h2-font-size | calc( var( --kendo-font-size, .875rem ) * 3 ) | calc(var(--kendo-font-size, 0.875rem) * 3) | Default: calc( var( --kendo-font-size, .875rem ) * 3 ) Computed: calc(var(--kendo-font-size, 0.875rem) * 3) |
Description: The font size of the second highest level heading. | |||
kendo-h3-font-size | calc( var( --kendo-font-size, .875rem ) * 2.5 ) | calc(var(--kendo-font-size, 0.875rem) * 2.5) | Default: calc( var( --kendo-font-size, .875rem ) * 2.5 ) Computed: calc(var(--kendo-font-size, 0.875rem) * 2.5) |
Description: The font size of the third highest level heading. | |||
kendo-h4-font-size | calc( var( --kendo-font-size, .875rem ) * 2 ) | calc(var(--kendo-font-size, 0.875rem) * 2) | Default: calc( var( --kendo-font-size, .875rem ) * 2 ) Computed: calc(var(--kendo-font-size, 0.875rem) * 2) |
Description: The font size of the fourth highest level heading. | |||
kendo-h5-font-size | calc( var( --kendo-font-size, .875rem ) * 1.5 ) | calc(var(--kendo-font-size, 0.875rem) * 1.5) | Default: calc( var( --kendo-font-size, .875rem ) * 1.5 ) Computed: calc(var(--kendo-font-size, 0.875rem) * 1.5) |
Description: The font size of the fifth highest level heading. | |||
kendo-h6-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 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 | 74px | 74px | Default: 74px Computed: 74px |
Description: The line height of the highest level heading. | |||
kendo-h2-line-height | 56px | 56px | Default: 56px Computed: 56px |
Description: The line height of the second highest level heading. | |||
kendo-h3-line-height | 42px | 42px | Default: 42px Computed: 42px |
Description: The line height of the third highest level heading. | |||
kendo-h4-line-height | 40px | 40px | Default: 40px Computed: 40px |
Description: The line height of the fourth highest level heading. | |||
kendo-h5-line-height | 28px | 28px | Default: 28px Computed: 28px |
Description: The line height of the fifth highest level heading. | |||
kendo-h6-line-height | 20px | 20px | Default: 20px Computed: 20px |
Description: The line height of the sixth highest level heading. | |||
kendo-h1-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 highest level heading. | |||
kendo-h2-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 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-bold, normal ) | var(--kendo-font-weight-bold, normal) | Default: var( --kendo-font-weight-bold, normal ) Computed: var(--kendo-font-weight-bold, normal) |
Description: The font weight of the fourth highest level heading. | |||
kendo-h5-font-weight | var( --kendo-font-weight-bold, normal ) | var(--kendo-font-weight-bold, normal) | Default: var( --kendo-font-weight-bold, normal ) Computed: var(--kendo-font-weight-bold, normal) |
Description: The font weight of the fifth highest level heading. | |||
kendo-h6-font-weight | var( --kendo-font-weight-bold, normal ) | var(--kendo-font-weight-bold, normal) | Default: var( --kendo-font-weight-bold, normal ) Computed: var(--kendo-font-weight-bold, normal) |
Description: The font weight of the sixth highest level heading. | |||
kendo-h1-letter-spacing | null | null | Default: null Computed: null |
Description: The letter spacing of the highest level heading. | |||
kendo-h2-letter-spacing | null | null | Default: null Computed: null |
Description: The letter spacing of the second highest level heading. | |||
kendo-h3-letter-spacing | null | null | Default: null Computed: null |
Description: The letter spacing of the third highest level heading. | |||
kendo-h4-letter-spacing | null | null | Default: null Computed: null |
Description: The letter spacing of the fourth highest level heading. | |||
kendo-h5-letter-spacing | null | null | Default: null Computed: null |
Description: The letter spacing of the fifth highest level heading. | |||
kendo-h6-letter-spacing | null | null | Default: null Computed: null |
Description: The letter spacing of the sixth highest level heading. | |||
kendo-h1-margin | 0 0 var( --kendo-font-size, inherit ) | 0 0 var(--kendo-font-size, inherit) | Default: 0 0 var( --kendo-font-size, inherit ) Computed: 0 0 var(--kendo-font-size, inherit) |
Description: The margin of the highest level heading. | |||
kendo-h2-margin | 0 0 var( --kendo-font-size, inherit ) | 0 0 var(--kendo-font-size, inherit) | Default: 0 0 var( --kendo-font-size, inherit ) Computed: 0 0 var(--kendo-font-size, inherit) |
Description: The margin of the second highest level heading. | |||
kendo-h3-margin | 0 0 var( --kendo-font-size, inherit ) | 0 0 var(--kendo-font-size, inherit) | Default: 0 0 var( --kendo-font-size, inherit ) Computed: 0 0 var(--kendo-font-size, inherit) |
Description: The margin of the third highest level heading. | |||
kendo-h4-margin | 0 0 var( --kendo-font-size, inherit ) | 0 0 var(--kendo-font-size, inherit) | Default: 0 0 var( --kendo-font-size, inherit ) Computed: 0 0 var(--kendo-font-size, inherit) |
Description: The margin of the fourth highest level heading. | |||
kendo-h5-margin | 0 0 var( --kendo-font-size, inherit ) | 0 0 var(--kendo-font-size, inherit) | Default: 0 0 var( --kendo-font-size, inherit ) Computed: 0 0 var(--kendo-font-size, inherit) |
Description: The margin of the fifth highest level heading. | |||
kendo-h6-margin | 0 0 var( --kendo-font-size, inherit ) | 0 0 var(--kendo-font-size, inherit) | Default: 0 0 var( --kendo-font-size, inherit ) Computed: 0 0 var(--kendo-font-size, inherit) |
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: calc(var(--kendo-font-size, 0.875rem) * 4), font-family: var(--kendo-font-family, inherit), line-height: 74px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: null, margin: 0 0 var(--kendo-font-size, inherit)), h2: (font-size: calc(var(--kendo-font-size, 0.875rem) * 3), font-family: var(--kendo-font-family, inherit), line-height: 56px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: null, margin: 0 0 var(--kendo-font-size, inherit)), h3: (font-size: calc(var(--kendo-font-size, 0.875rem) * 2.5), font-family: var(--kendo-font-family, inherit), line-height: 42px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: null, margin: 0 0 var(--kendo-font-size, inherit)), h4: (font-size: calc(var(--kendo-font-size, 0.875rem) * 2), font-family: var(--kendo-font-family, inherit), line-height: 40px, font-weight: var(--kendo-font-weight-bold, normal), letter-spacing: null, margin: 0 0 var(--kendo-font-size, inherit)), h5: (font-size: calc(var(--kendo-font-size, 0.875rem) * 1.5), font-family: var(--kendo-font-family, inherit), line-height: 28px, font-weight: var(--kendo-font-weight-bold, normal), letter-spacing: null, margin: 0 0 var(--kendo-font-size, inherit)), h6: (font-size: var(--kendo-font-size, inherit), font-family: var(--kendo-font-family, inherit), line-height: 20px, font-weight: var(--kendo-font-weight-bold, normal), letter-spacing: null, margin: 0 0 var(--kendo-font-size, inherit))) | 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: calc(var(--kendo-font-size, 0.875rem) * 4), font-family: var(--kendo-font-family, inherit), line-height: 74px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: null, margin: 0 0 var(--kendo-font-size, inherit)), h2: (font-size: calc(var(--kendo-font-size, 0.875rem) * 3), font-family: var(--kendo-font-family, inherit), line-height: 56px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: null, margin: 0 0 var(--kendo-font-size, inherit)), h3: (font-size: calc(var(--kendo-font-size, 0.875rem) * 2.5), font-family: var(--kendo-font-family, inherit), line-height: 42px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: null, margin: 0 0 var(--kendo-font-size, inherit)), h4: (font-size: calc(var(--kendo-font-size, 0.875rem) * 2), font-family: var(--kendo-font-family, inherit), line-height: 40px, font-weight: var(--kendo-font-weight-bold, normal), letter-spacing: null, margin: 0 0 var(--kendo-font-size, inherit)), h5: (font-size: calc(var(--kendo-font-size, 0.875rem) * 1.5), font-family: var(--kendo-font-family, inherit), line-height: 28px, font-weight: var(--kendo-font-weight-bold, normal), letter-spacing: null, margin: 0 0 var(--kendo-font-size, inherit)), h6: (font-size: var(--kendo-font-size, inherit), font-family: var(--kendo-font-family, inherit), line-height: 20px, font-weight: var(--kendo-font-weight-bold, normal), letter-spacing: null, margin: 0 0 var(--kendo-font-size, inherit))) |
Description: The headings Map | |||
kendo-paragraph-margin | 0 0 var( --kendo-font-size, inherit ) | 0 0 var(--kendo-font-size, inherit) | Default: 0 0 var( --kendo-font-size, inherit ) Computed: 0 0 var(--kendo-font-size, inherit) |
Description: The margin of the paragraph. | |||
kendo-paragraph-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 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-line-height | 20px | 20px | Default: 20px Computed: 20px |
Description: The line height 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 | null | null | Default: null Computed: null |
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 | 20px | 20px | Default: 20px Computed: 20px |
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 width of the border of the code tag. | |||
kendo-code-bg | $kendo-base-bg | var(--kendo-color-surface, #f0f0f0) | Default: $kendo-base-bg Computed: var(--kendo-color-surface, #f0f0f0) |
Description: The background color of the code tag. | |||
kendo-code-text | $kendo-component-text | var(--kendo-color-on-app-surface, #272727) | Default: $kendo-component-text Computed: var(--kendo-color-on-app-surface, #272727) |
Description: The text color of the code tag. | |||
kendo-code-border | $kendo-component-border | var(--kendo-color-border, #cacaca) | Default: $kendo-component-border Computed: var(--kendo-color-border, #cacaca) |
Description: The border color of the code tag. | |||
kendo-display1-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 largest display text. | |||
kendo-display2-font-size | calc( var( --kendo-font-size, .875rem ) * 7 ) | calc(var(--kendo-font-size, 0.875rem) * 7) | Default: calc( var( --kendo-font-size, .875rem ) * 7 ) Computed: calc(var(--kendo-font-size, 0.875rem) * 7) |
Description: The font size of the second largest display text. | |||
kendo-display3-font-size | calc( var( --kendo-font-size, .875rem ) * 6 ) | calc(var(--kendo-font-size, 0.875rem) * 6) | Default: calc( var( --kendo-font-size, .875rem ) * 6 ) Computed: calc(var(--kendo-font-size, 0.875rem) * 6) |
Description: The font size of the third largest display text. | |||
kendo-display4-font-size | calc( var( --kendo-font-size, .875rem ) * 5 ) | calc(var(--kendo-font-size, 0.875rem) * 5) | Default: calc( var( --kendo-font-size, .875rem ) * 5 ) Computed: calc(var(--kendo-font-size, 0.875rem) * 5) |
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 | null | null | Default: null Computed: null |
Description: The letter spacing of the largest display text. | |||
kendo-display2-letter-spacing | null | null | Default: null Computed: null |
Description: The letter spacing of the second largest display text. | |||
kendo-display3-letter-spacing | null | null | Default: null Computed: null |
Description: The letter spacing of the third largest display text. | |||
kendo-display4-letter-spacing | null | null | Default: null Computed: null |
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) * 8), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: null), 2: (font-size: calc(var(--kendo-font-size, 0.875rem) * 7), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: null), 3: (font-size: calc(var(--kendo-font-size, 0.875rem) * 6), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: null), 4: (font-size: calc(var(--kendo-font-size, 0.875rem) * 5), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: null)) | 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) * 8), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: null), 2: (font-size: calc(var(--kendo-font-size, 0.875rem) * 7), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: null), 3: (font-size: calc(var(--kendo-font-size, 0.875rem) * 6), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: null), 4: (font-size: calc(var(--kendo-font-size, 0.875rem) * 5), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: null)) |
Description: The displays Map | |||
kendo-font-size | 0.875rem | 0.875rem | Default: 0.875rem Computed: 0.875rem |
Description: The base font size across all components. | |||
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-size-xs | 0.625rem | 0.625rem | Default: 0.625rem Computed: 0.625rem |
Description: The 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( 20, 14 ) | 1.4285714286 | Default: k-math-div( 20, 14 ) Computed: 1.4285714286 |
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.25 | 1.25 | Default: 1.25 Computed: 1.25 |
Description: The small line height across all components. | |||
kendo-line-height-md | $kendo-line-height | 1.4285714286 | Default: $kendo-line-height Computed: 1.4285714286 |
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-md} * 1em ) | calc(1.4285714286 * 1em) | Default: calc( #{$kendo-line-height-md} * 1em ) Computed: calc(1.4285714286 * 1em) |
Description: The base line height in ems 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-letter-spacing | null | null | Default: null Computed: null |
Description: The base letter spacing across all components. | |||
kendo-letter-spacing-tightest | -.15px | -0.15px | Default: -.15px Computed: -0.15px |
Description: The tightest letter spacing across all components. | |||
kendo-letter-spacing-tighter | -.10px | -0.1px | Default: -.10px Computed: -0.1px |
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 | .5px | 0.5px | Default: .5px Computed: 0.5px |
Description: Wide letter spacing across all components. | |||
kendo-letter-spacing-wider | .10px | 0.1px | Default: .10px Computed: 0.1px |
Description: Slightly wider than the wide letter spacing across all components. | |||
kendo-letter-spacing-widest | .15px | 0.15px | Default: .15px Computed: 0.15px |
Description: The widest letter spacing 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-family-sans-serif | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | Default: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" Computed: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" |
Description: The sans-serif font family across all components. | |||
kendo-font-family-monospace | SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace | SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace | Default: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace Computed: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace |
Description: The monospace font family across all components. | |||
kendo-font-family | inherit | inherit | Default: inherit Computed: inherit |
Description: The base font family across all components. | |||
kendo-font-sizes | k-map-merge( $_default-font-sizes, $kendo-font-sizes ) | (xxs: 0.5rem, xs: 0.625rem, sm: 0.75rem, md: 0.875rem, lg: 1rem, xl: 1.25rem) | Default: k-map-merge( $_default-font-sizes, $kendo-font-sizes ) Computed: (xxs: 0.5rem, xs: 0.625rem, sm: 0.75rem, md: 0.875rem, lg: 1rem, xl: 1.25rem) |
Description: The font sizes map | |||
kendo-line-heights | k-map-merge( $_default-line-heights, $kendo-line-heights ) | (xs: 1, sm: 1.25, md: 1.4285714286, lg: 1.5) | Default: k-map-merge( $_default-line-heights, $kendo-line-heights ) Computed: (xs: 1, sm: 1.25, md: 1.4285714286, lg: 1.5) |
Description: The line heights map | |||
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 | |||
kendo-letter-spacings | k-map-merge( $_default-letter-spacings, $kendo-letter-spacings ) | (tightest: -0.15px, tighter: -0.1px, tight: -0.5px, normal: 0px, wide: 0.5px, wider: 0.1px, widest: 0.15px) | Default: k-map-merge( $_default-letter-spacings, $kendo-letter-spacings ) Computed: (tightest: -0.15px, tighter: -0.1px, tight: -0.5px, normal: 0px, wide: 0.5px, wider: 0.1px, widest: 0.15px) |
Description: The letter spacings map | |||
kendo-font-families | k-map-merge( $_default-font-families, $kendo-font-families ) | (sans: (Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans), serif: ("Times New Roman", Georgia, Garamond, Palatino, Baskerville), sans-serif: (system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), monospace: (SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace)) | Default: k-map-merge( $_default-font-families, $kendo-font-families ) Computed: (sans: (Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans), serif: ("Times New Roman", Georgia, Garamond, Palatino, Baskerville), sans-serif: (system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), monospace: (SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace)) |
Description: The font families map |
Border Radii Variables
The $kendo-border-radii
Sass map of the Telerik and Kendo UI Classic theme is represented in the following table:
Step | Value | Example |
---|---|---|
none | 0px | |
xs | 1px | |
sm | 0.125rem | |
md | 0.25rem | |
lg | 0.375rem | |
xl | 0.5rem | |
xxl | 0.75rem | |
xxxl | 1rem | |
full | 9999px |
Elevation Variables
The $kendo-elevation
Sass map of the Telerik and Kendo UI Classic 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. |