Telerik and Kendo UI Default Theme Variables

Variables

The Telerik and Kendo UI Default 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 Default theme by the type of styles that they control.

Color Variables

The $kendo-colors Sass map of the Telerik and Kendo UI Default theme is represented in the following table:

Key	Value
Variable: kendo-colors
`app-surface`	`#ffffff`
`on-app-surface`	`#3d3d3d`
`subtle`	`#666666`
`surface`	`#fafafa`
`surface-alt`	`#ffffff`
`border`	`rgba(0, 0, 0, 0.08)`
`border-alt`	`rgba(0, 0, 0, 0.16)`
`base-subtle`	`#ebebeb`
`base-subtle-hover`	`#e0e0e0`
`base-subtle-active`	`#d6d6d6`
`base`	`#f5f5f5`
`base-hover`	`#ebebeb`
`base-active`	`#d6d6d6`
`base-emphasis`	`#c2c2c2`
`base-on-subtle`	`#3d3d3d`
`on-base`	`#3d3d3d`
`base-on-surface`	`#3d3d3d`
`primary-subtle`	`#ffeceb`
`primary-subtle-hover`	`#ffdedb`
`primary-subtle-active`	`#ffc8c4`
`primary`	`#ff6358`
`primary-hover`	`#ea5a51`
`primary-active`	`#d45349`
`primary-emphasis`	`#ff9d97`
`primary-on-subtle`	`#5c201c`
`on-primary`	`#ffffff`
`primary-on-surface`	`#ff6358`
`secondary-subtle`	`#fafafa`
`secondary-subtle-hover`	`#f5f5f5`
`secondary-subtle-active`	`#ebebeb`
`secondary`	`#666666`
`secondary-hover`	`#525252`
`secondary-active`	`#3d3d3d`
`secondary-emphasis`	`#e0e0e0`
`secondary-on-subtle`	`#141414`
`on-secondary`	`#ffffff`
`secondary-on-surface`	`#292929`
`tertiary-subtle`	`#d8f1fd`
`tertiary-subtle-hover`	`#c5eafc`
`tertiary-subtle-active`	`#a3dffb`
`tertiary`	`#03a9f4`
`tertiary-hover`	`#039ae0`
`tertiary-active`	`#028ccb`
`tertiary-emphasis`	`#61c9f9`
`tertiary-on-subtle`	`#023f5c`
`on-tertiary`	`#ffffff`
`tertiary-on-surface`	`#028ccb`
`info-subtle`	`#d2e2fb`
`info-subtle-hover`	`#bdd4f8`
`info-subtle-active`	`#80acf4`
`info`	`#0058e9`
`info-hover`	`#0052d6`
`info-active`	`#004ac2`
`info-emphasis`	`#6098f2`
`info-on-subtle`	`#002259`
`on-info`	`#ffffff`
`info-on-surface`	`#004ac2`
`success-subtle`	`#dcf0d3`
`success-subtle-hover`	`#cbe9bf`
`success-subtle-active`	`#b7e1a5`
`success`	`#37b400`
`success-hover`	`#32a500`
`success-active`	`#2d9600`
`success-emphasis`	`#81d15f`
`success-on-subtle`	`#1c5a00`
`on-success`	`#ffffff`
`success-on-surface`	`#2d9600`
`warning-subtle`	`#fff4d3`
`warning-subtle-hover`	`#ffeebd`
`warning-subtle-active`	`#ffe79e`
`warning`	`#ffc000`
`warning-hover`	`#eaaf00`
`warning-active`	`#d49f00`
`warning-emphasis`	`#ffd760`
`warning-on-subtle`	`#5e4700`
`on-warning`	`#3d3d3d`
`warning-on-surface`	`#ffc000`
`error-subtle`	`#fcddda`
`error-subtle-hover`	`#fbc8c3`
`error-subtle-active`	`#f98b80`
`error`	`#f31700`
`error-hover`	`#df1600`
`error-active`	`#ca1400`
`error-emphasis`	`#f76f60`
`error-on-subtle`	`#7a0c00`
`on-error`	`#ffffff`
`error-on-surface`	`#ca1400`
`light-subtle`	`#fafafa`
`light-subtle-hover`	`#f5f5f5`
`light-subtle-active`	`#ebebeb`
`light`	`#ebebeb`
`light-hover`	`#e0e0e0`
`light-active`	`#d6d6d6`
`light-emphasis`	`#d6d6d6`
`light-on-subtle`	`#141414`
`on-light`	`#000000`
`light-on-surface`	`#e0e0e0`
`dark-subtle`	`#c2c2c2`
`dark-subtle-hover`	`#adadad`
`dark-subtle-active`	`#999999`
`dark`	`#3d3d3d`
`dark-hover`	`#292929`
`dark-active`	`#1f1f1f`
`dark-emphasis`	`#666666`
`dark-on-subtle`	`#1f1f1f`
`on-dark`	`#ffffff`
`dark-on-surface`	`#141414`
`inverse-subtle`	`#c2c2c2`
`inverse-subtle-hover`	`#adadad`
`inverse-subtle-active`	`#999999`
`inverse`	`#3d3d3d`
`inverse-hover`	`#292929`
`inverse-active`	`#1f1f1f`
`inverse-emphasis`	`#666666`
`inverse-on-subtle`	`#1f1f1f`
`on-inverse`	`#ffffff`
`inverse-on-surface`	`#141414`
`series-a`	`#ff6358`
`series-a-bold`	`#bf4a42`
`series-a-bolder`	`#80322c`
`series-a-subtle`	`#ffb1ac`
`series-a-subtler`	`#ff8a82`
`series-b`	`#ffe162`
`series-b-bold`	`#bfa94a`
`series-b-bolder`	`#807131`
`series-b-subtle`	`#fff0b1`
`series-b-subtler`	`#ffe989`
`series-c`	`#4cd180`
`series-c-bold`	`#399d60`
`series-c-bolder`	`#266940`
`series-c-subtle`	`#a6e8c0`
`series-c-subtler`	`#79dda0`
`series-d`	`#4b5ffa`
`series-d-bold`	`#3847bc`
`series-d-bolder`	`#26307d`
`series-d-subtle`	`#a5affd`
`series-d-subtler`	`#7887fb`
`series-e`	`#ac58ff`
`series-e-bold`	`#8142bf`
`series-e-bolder`	`#562c80`
`series-e-subtle`	`#d6acff`
`series-e-subtler`	`#c182ff`
`series-f`	`#ff5892`
`series-f-bold`	`#bf426e`
`series-f-bolder`	`#802c49`
`series-f-subtle`	`#ffacc9`
`series-f-subtler`	`#ff82ae`
Description: The global default Colors map.

Spacing Variables

The $kendo-spacing Sass map of the Telerik and Kendo UI Default 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, #fafafa)`	Default: `$kendo-base-bg`Computed: `var(--kendo-color-surface, #fafafa)`
Description: The background color of the code tag.
`kendo-code-text`	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`	Default: `$kendo-component-text`Computed: `var(--kendo-color-on-app-surface, #3d3d3d)`
Description: The color of the code tag.
`kendo-code-border`	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`	Default: `$kendo-component-border`Computed: `var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
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-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 Default 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 Default theme is represented in the following table:

Key	Value
Variable: kendo-elevation
`1`	`(0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))`
`2`	`(0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))`
`3`	`(0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))`
`4`	`(0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))`
`5`	`(0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))`
`6`	`(0 12px 14px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.12))`
`7`	`(0 14px 16px rgba(0, 0, 0, 0.24), 0 4px 16px rgba(0, 0, 0, 0.12))`
`8`	`(0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12))`
`9`	`(0 32px 34px rgba(0, 0, 0, 0.32), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description: The global default Elevation map.

Foundation

Themes

CSS Utilities

Components

Resources

Default Theme