Default Theme

Apply the perfect look and feel to your apps with the styles supported by the Telerik and Kendo UI Default theme.

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 following table represents the $kendo-colors Sass map of the Telerik and Kendo UI Default theme:

KeyValue
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 following table represents the $kendo-spacing Sass map of the Telerik and Kendo UI Default theme:

StepValueExample
00px
1px1px
0.50.125rem
10.25rem
1.50.375rem
20.5rem
2.50.625rem
30.75rem
3.50.875rem
41rem
4.51.125rem
51.25rem
5.51.375rem
61.5rem
6.51.625rem
71.75rem
7.51.875rem
82rem
92.25rem
102.5rem
112.75rem
123rem
133.25rem
143.5rem
153.75rem
164rem
174.25rem
184.5rem
194.75rem
205rem
215.25rem
225.5rem
235.75rem
246rem
257rem
268rem
279rem
2810rem
2911rem
3012rem

Typography Variables

The following table represents the typography Sass variables of the Telerik and Kendo UI Default theme:

VariableDefault ValueComputed ValueValue
kendo-h1-font-sizecalc( 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-sizecalc( 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-sizecalc( 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-sizecalc( 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-sizecalc( 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-sizevar( --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-familyvar( --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-familyvar( --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-familyvar( --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-familyvar( --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-familyvar( --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-familyvar( --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-height74px74pxDefault: 74pxComputed: 74px
Description: The line height of the highest level heading.
kendo-h2-line-height56px56pxDefault: 56pxComputed: 56px
Description: The line height of the second highest level heading.
kendo-h3-line-height42px42pxDefault: 42pxComputed: 42px
Description: The line height of the third highest level heading.
kendo-h4-line-height40px40pxDefault: 40pxComputed: 40px
Description: The line height of the fourth highest level heading.
kendo-h5-line-height28px28pxDefault: 28pxComputed: 28px
Description: The line height of the fifth highest level heading.
kendo-h6-line-height20px20pxDefault: 20pxComputed: 20px
Description: The line height of the sixth highest level heading.
kendo-h1-font-weightvar( --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-weightvar( --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-weightvar( --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-weightvar( --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-weightvar( --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-weightvar( --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-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the highest level heading.
kendo-h2-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the second highest level heading.
kendo-h3-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the third highest level heading.
kendo-h4-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the fourth highest level heading.
kendo-h5-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the fifth highest level heading.
kendo-h6-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the sixth highest level heading.
kendo-h1-margin0 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-margin0 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-margin0 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-margin0 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-margin0 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-margin0 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-margin0 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-sizevar( --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-familyvar( --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-height20px20pxDefault: 20pxComputed: 20px
Description: The line height of the paragraph.
kendo-paragraph-font-weightvar( --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-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the paragraph.
kendo-code-font-sizevar( --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-familyvar( --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-height20px20pxDefault: 20pxComputed: 20px
Description: The line height of the code tag.
kendo-code-font-weightvar( --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-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the code tag.
kendo-code-padding-xk-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-yk-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-xk-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-yk-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-width1px1pxDefault: 1pxComputed: 1px
Description: The width of the border of the code tag.
kendo-code-bg$kendo-base-bgvar(--kendo-color-surface, #fafafa)Default: $kendo-base-bgComputed: var(--kendo-color-surface, #fafafa)
Description: The background color of the code tag.
kendo-code-text$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The color of the code tag.
kendo-code-border$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the code tag.
kendo-display1-font-sizecalc( 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-sizecalc( 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-sizecalc( 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-sizecalc( 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-familyvar( --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-familyvar( --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-familyvar( --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-familyvar( --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-height1.21.2Default: 1.2Computed: 1.2
Description: The line height of the largest display text.
kendo-display2-line-height1.21.2Default: 1.2Computed: 1.2
Description: The line height of the second largest display text.
kendo-display3-line-height1.21.2Default: 1.2Computed: 1.2
Description: The line height of the third largest display text.
kendo-display4-line-height1.21.2Default: 1.2Computed: 1.2
Description: The line height of the fourth largest display text.
kendo-display1-font-weightvar( --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-weightvar( --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-weightvar( --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-weightvar( --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-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the largest display text.
kendo-display2-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the second largest display text.
kendo-display3-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the third largest display text.
kendo-display4-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the fourth largest display text.
kendo-font-size0.875rem0.875remDefault: 0.875remComputed: 0.875rem
Description: The base font size across all components.
kendo-font-size-xxs0.5rem0.5remDefault: 0.5remComputed: 0.5rem
Description: The extra extra small font size across all components.
kendo-font-size-xs0.625rem0.625remDefault: 0.625remComputed: 0.625rem
Description: The extra small font size across all components.
kendo-font-size-sm0.75rem0.75remDefault: 0.75remComputed: 0.75rem
Description: The small font size across all components.
kendo-font-size-md$kendo-font-size0.875remDefault: $kendo-font-sizeComputed: 0.875rem
Description: The medium font size across all components.
kendo-font-size-lg1rem1remDefault: 1remComputed: 1rem
Description: The large font size across all components.
kendo-font-size-xl1.25rem1.25remDefault: 1.25remComputed: 1.25rem
Description: The extra large font size across all components.
kendo-line-heightk-math-div( 20, 14 )1.4285714286Default: k-math-div( 20, 14 )Computed: 1.4285714286
Description: The base line height across all components.
kendo-line-height-xs11Default: 1Computed: 1
Description: The extra small line height across all components.
kendo-line-height-sm1.251.25Default: 1.25Computed: 1.25
Description: The small line height across all components.
kendo-line-height-md$kendo-line-height1.4285714286Default: $kendo-line-heightComputed: 1.4285714286
Description: The medium line height across all components.
kendo-line-height-lg1.51.5Default: 1.5Computed: 1.5
Description: The large line height across all components.
kendo-line-height-emcalc( #{$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-weight400400Default: 400Computed: 400
Description: The base font weight across all components.
kendo-font-weight-thin100100Default: 100Computed: 100
Description: The thin font weight across all components.
kendo-font-weight-extra-light200200Default: 200Computed: 200
Description: The extra light font weight across all components.
kendo-font-weight-light300300Default: 300Computed: 300
Description: The light font weight across all components.
kendo-font-weight-normal$kendo-font-weight400Default: $kendo-font-weightComputed: 400
Description: The normal font weight across all components.
kendo-font-weight-medium500500Default: 500Computed: 500
Description: The medium font weight across all components.
kendo-font-weight-semibold600600Default: 600Computed: 600
Description: The semibold font weight across all components.
kendo-font-weight-bold700700Default: 700Computed: 700
Description: The bold font weight across all components.
kendo-font-weight-extra-bold800800Default: 800Computed: 800
Description: The extra bold font weight across all components.
kendo-font-weight-black900900Default: 900Computed: 900
Description: The most pronounced font weight across all components.
kendo-letter-spacingnullnullDefault: nullComputed: null
Description: The base letter spacing across all components.
kendo-letter-spacing-tightest-.15px-0.15pxDefault: -.15pxComputed: -0.15px
Description: The tightest letter spacing across all components.
kendo-letter-spacing-tighter-.10px-0.1pxDefault: -.10pxComputed: -0.1px
Description: Slightly looser than the tighter letter spacing across all components.
kendo-letter-spacing-tight-.5px-0.5pxDefault: -.5pxComputed: -0.5px
Description: Moderately tight letter spacing across all components.
kendo-letter-spacing-normal0px0pxDefault: 0pxComputed: 0px
Description: The normal letter spacing across all components.
kendo-letter-spacing-wide.5px0.5pxDefault: .5pxComputed: 0.5px
Description: Wide letter spacing across all components.
kendo-letter-spacing-wider.10px0.1pxDefault: .10pxComputed: 0.1px
Description: Slightly wider than the wide letter spacing across all components.
kendo-letter-spacing-widest.15px0.15pxDefault: .15pxComputed: 0.15px
Description: The widest letter spacing across all components.
kendo-font-family-sansArial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill SansArial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill SansDefault: Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill SansComputed: 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, BaskervilleDefault: "Times New Roman", Georgia, Garamond, Palatino, BaskervilleComputed: "Times New Roman", Georgia, Garamond, Palatino, Baskerville
Description: The serif font family across all components.
kendo-font-family-sans-serifsystem-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-monospaceSFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospaceSFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospaceDefault: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospaceComputed: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace
Description: The monospace font family across all components.
kendo-font-familyinheritinheritDefault: inheritComputed: inherit
Description: The base font family across all components.
kendo-font-sizesk-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-heightsk-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-weightsk-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-spacingsk-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-familiesk-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 following table represents the $kendo-border-radii Sass map of the Telerik and Kendo UI Default theme:

StepValueExample
none0px
xs1px
sm0.125rem
md0.25rem
lg0.375rem
xl0.5rem
xxl0.75rem
xxxl1rem
full9999px

Elevation Variables

The following table represents the $kendo-elevation Sass map of the Telerik and Kendo UI Default theme:

KeyValue
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.