Material Theme

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

Variables

The Telerik and Kendo UI Material theme employs multiple variables that you can use to customize the theme.

Variables by Scope

When it comes to the effect that a specific change in a variable's value causes, variables are not equal. Changing some values will have a much wider impact on the theme than changing others.

Depending on the extent of the styles that each variable controls, the variables fall into three main groups:

  • Global variables—They control globally used theme colors and metrics like $kendo-colors$kendo-spacing$kendo-border-radii$kendo-elevation.
  • Variables affecting individual UI components—For example, $kendo-grid-bg$kendo-tabstrip-font-size.

Most component-level variables link to generic variables that are higher in the hierarchy. For instance, you can customize the background of the Grid component both through the $kendo-colors map and the $kendo-grid-bg variables. In this case, consider that the $kendo-grid-bg variable references a value from the $kendo-colors map.

List of Variables

The following tables represent the variables in the Telerik and Kendo UI Material theme by the type of styles that they control.

Color Variables

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

KeyValue
Variable: kendo-colors
app-surface #ffffff
on-app-surface #212121
subtle #757575
surface #f5f5f5
surface-alt #ffffff
border rgba(0, 0, 0, 0.12)
border-alt rgba(0, 0, 0, 0.15)
base-subtle #ebebeb
base-subtle-hover #d6d6d6
base-subtle-active #c2c2c2
base #ffffff
base-hover #ebebeb
base-active #d6d6d6
base-emphasis #adadad
base-on-subtle #212121
on-base #212121
base-on-surface #212121
primary-subtle #d1d5ee
primary-subtle-hover #c5cae8
primary-subtle-active #b5bde3
primary #3f51b5
primary-hover #3a4ba7
primary-active #354498
primary-emphasis #97a0d7
primary-on-subtle #161c3f
on-primary #ffffff
primary-on-surface #3f51b5
secondary-subtle #fbcdd9
secondary-subtle-hover #f9afc3
secondary-subtle-active #f79bb3
secondary #e51a5f
secondary-hover #d31857
secondary-active #c01650
secondary-emphasis #f58da9
secondary-on-subtle #500c22
on-secondary #ffffff
secondary-on-surface #ae1549
tertiary-subtle #c9dbd8
tertiary-subtle-hover #a9c6c1
tertiary-subtle-active #92b8b1
tertiary #00695c
tertiary-hover #006155
tertiary-active #00584d
tertiary-emphasis #84aea7
tertiary-on-subtle #002520
on-tertiary #ffffff
tertiary-on-surface #054f46
info-subtle #c8d7fb
info-subtle-hover #a7c0f7
info-subtle-active #8fb0f6
info #0058e9
info-hover #0251d6
info-active #034ac3
info-emphasis #80a5f4
info-on-subtle #071f51
on-info #ffffff
info-on-surface #0443b0
success-subtle #d7f0cc
success-subtle-hover #bae2ad
success-subtle-active #a7db97
success #37b400
success-hover #33a600
success-active #2e9704
success-emphasis #93d775
success-on-subtle #163f09
on-success #ffffff
success-on-surface #2b8906
warning-subtle #fff0ce
warning-subtle-hover #ffe7b0
warning-subtle-active #ffe19c
warning #ffc000
warning-hover #ebb201
warning-active #d6a202
warning-emphasis #ffdd8f
warning-on-subtle #59430a
on-warning #000000
warning-on-surface #ffc000
error-subtle #fcc7c2
error-subtle-hover #feafa8
error-subtle-active #fe9a91
error #f31700
error-hover #e01701
error-active #cc1505
error-emphasis #fc8d83
error-on-subtle #550c07
on-error #ffffff
error-on-surface #b91406
light-subtle #fafafa
light-subtle-hover #f5f5f5
light-subtle-active #eeeeee
light #f5f5f5
light-hover #ebebeb
light-active #d6d6d6
light-emphasis #e0e0e0
light-on-subtle #212121
on-light #000000
light-on-surface #ebebeb
dark-subtle #c7c7c7
dark-subtle-hover #c2c2c2
dark-subtle-active #bdbdbd
dark #424242
dark-hover #212121
dark-active #000000
dark-emphasis #9e9e9e
dark-on-subtle #212121
on-dark #ffffff
dark-on-surface #616161
inverse-subtle #c7c7c7
inverse-subtle-hover #c2c2c2
inverse-subtle-active #bdbdbd
inverse #424242
inverse-hover #212121
inverse-active #000000
inverse-emphasis #9e9e9e
inverse-on-subtle #212121
on-inverse #ffffff
inverse-on-surface #616161
series-a #9c27b0
series-a-bold #751d84
series-a-bolder #4e1458
series-a-subtle #b55dc4
series-a-subtler #cd93d7
series-b #2196f3
series-b-bold #1971b6
series-b-bolder #114b7a
series-b-subtle #59b0f6
series-b-subtler #90cbf9
series-c #009688
series-c-bold #007166
series-c-bolder #004b44
series-c-subtle #40b0a6
series-c-subtler #80cbc4
series-d #ffeb3b
series-d-bold #bfb02c
series-d-bolder #80761e
series-d-subtle #fff06c
series-d-subtler #fff59d
series-e #f44336
series-e-bold #b73229
series-e-bolder #7a221b
series-e-subtle #f77268
series-e-subtler #faa19b
series-f #4caf50
series-f-bold #39833c
series-f-bolder #265828
series-f-subtle #79c37c
series-f-subtler #a6d7a8
Description: The global default Colors map.

Spacing Variables

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

VariableDefault ValueComputed ValueValue
kendo-font-size0.875rem0.875remDefault: 0.875remComputed: 0.875rem
Description: The base font size across all components.
kendo-font-size-xs0.625rem0.625remDefault: 0.625remComputed: 0.625rem
Description: The extra 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( 28, 14 )2Default: k-math-div( 28, 14 )Computed: 2
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.21.2Default: 1.2Computed: 1.2
Description: The small line height across all components.
kendo-line-height-md$kendo-line-height2Default: $kendo-line-heightComputed: 2
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} * 1em )calc(2 * 1em)Default: calc( #{$kendo-line-height} * 1em )Computed: calc(2 * 1em)
Description: The base line height in ems across all components.
kendo-letter-spacingnullnullDefault: nullComputed: null
Description: The base letter spacing across all components.
kendo-letter-spacing-tightest-2.5px-2.5pxDefault: -2.5pxComputed: -2.5px
Description: The tightest letter spacing across all components.
kendo-letter-spacing-tighter-1.5px-1.5pxDefault: -1.5pxComputed: -1.5px
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.15px0.15pxDefault: .15pxComputed: 0.15px
Description: Wide letter spacing across all components
kendo-letter-spacing-wider.25px0.25pxDefault: .25pxComputed: 0.25px
Description: Slightly wider than the wide letter spacing across all components.
kendo-letter-spacing-widest.35px0.35pxDefault: .35pxComputed: 0.35px
Description: The widest letter spacing across all components.
kendo-font-family-sans-serifRoboto, "Helvetica Neue", sans-serifRoboto, "Helvetica Neue", sans-serifDefault: Roboto, "Helvetica Neue", sans-serifComputed: Roboto, "Helvetica Neue", sans-serif
Description: The sans-serif font family across all components.
kendo-font-family-monospaceConsolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospaceConsolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospaceDefault: Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospaceComputed: Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace
Description: The monospace font family across all components.
kendo-font-family$kendo-font-family-sans-serifRoboto, "Helvetica Neue", sans-serifDefault: $kendo-font-family-sans-serifComputed: Roboto, "Helvetica Neue", sans-serif
Description: The base font family across all components.
kendo-font-sizes$_default-font-sizes(xs: 0.625rem, sm: 0.75rem, md: 0.875rem, lg: 1rem, xl: 1.25rem)Default: $_default-font-sizesComputed: (xs: 0.625rem, sm: 0.75rem, md: 0.875rem, lg: 1rem, xl: 1.25rem)
Description: The font sizes map
kendo-line-heights$_default-line-heights(xs: 1, sm: 1.2, md: 2, lg: 1.5)Default: $_default-line-heightsComputed: (xs: 1, sm: 1.2, md: 2, lg: 1.5)
Description: The line heights map
kendo-letter-spacings$_default-letter-spacings(tightest: -2.5px, tighter: -1.5px, tight: -0.5px, normal: 0px, wide: 0.15px, wider: 0.25px, widest: 0.35px)Default: $_default-letter-spacingsComputed: (tightest: -2.5px, tighter: -1.5px, tight: -0.5px, normal: 0px, wide: 0.15px, wider: 0.25px, widest: 0.35px)
Description: The letter spacings map
kendo-font-families$_default-font-families(sans-serif: (Roboto, "Helvetica Neue", sans-serif), monospace: (Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace))Default: $_default-font-familiesComputed: (sans-serif: (Roboto, "Helvetica Neue", sans-serif), monospace: (Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace))
Description: The font families map
kendo-h1-font-size96px96pxDefault: 96pxComputed: 96px
Description: The font size of the highest level heading.
kendo-h2-font-size60px60pxDefault: 60pxComputed: 60px
Description: The font size of the second highest level heading.
kendo-h3-font-size48px48pxDefault: 48pxComputed: 48px
Description: The font size of the third highest level heading.
kendo-h4-font-size34px34pxDefault: 34pxComputed: 34px
Description: The font size of the fourth highest level heading.
kendo-h5-font-size24px24pxDefault: 24pxComputed: 24px
Description: The font size of the fifth highest level heading.
kendo-h6-font-size20px20pxDefault: 20pxComputed: 20px
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-height112px112pxDefault: 112pxComputed: 112px
Description: The line height of the highest level heading.
kendo-h2-line-height72px72pxDefault: 72pxComputed: 72px
Description: The line height of the second highest level heading.
kendo-h3-line-height56px56pxDefault: 56pxComputed: 56px
Description: The line height of the third highest level heading.
kendo-h4-line-height36px36pxDefault: 36pxComputed: 36px
Description: The line height of the fourth highest level heading.
kendo-h5-line-height24px24pxDefault: 24pxComputed: 24px
Description: The line height of the fifth highest level heading.
kendo-h6-line-height24px24pxDefault: 24pxComputed: 24px
Description: The line height of the sixth highest level heading.
kendo-h1-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 highest level heading.
kendo-h2-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 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-normal, normal )var(--kendo-font-weight-normal, normal)Default: var( --kendo-font-weight-normal, normal )Computed: var(--kendo-font-weight-normal, normal)
Description: The font weight of the fourth highest level heading.
kendo-h5-font-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 fifth highest level heading.
kendo-h6-font-weightvar( --kendo-font-weight-medium, normal )var(--kendo-font-weight-medium, normal)Default: var( --kendo-font-weight-medium, normal )Computed: var(--kendo-font-weight-medium, normal)
Description: The font weight of the sixth highest level heading.
kendo-h1-letter-spacingvar( --kendo-letter-spacing-tighter, normal )var(--kendo-letter-spacing-tighter, normal)Default: var( --kendo-letter-spacing-tighter, normal )Computed: var(--kendo-letter-spacing-tighter, normal)
Description: The letter spacing of the highest level heading.
kendo-h2-letter-spacingvar( --kendo-letter-spacing-tight, normal )var(--kendo-letter-spacing-tight, normal)Default: var( --kendo-letter-spacing-tight, normal )Computed: var(--kendo-letter-spacing-tight, normal)
Description: The letter spacing of the second highest level heading.
kendo-h3-letter-spacingvar( --kendo-letter-spacing-normal, normal )var(--kendo-letter-spacing-normal, normal)Default: var( --kendo-letter-spacing-normal, normal )Computed: var(--kendo-letter-spacing-normal, normal)
Description: The letter spacing of the third highest level heading.
kendo-h4-letter-spacingvar( --kendo-letter-spacing-wider, normal )var(--kendo-letter-spacing-wider, normal)Default: var( --kendo-letter-spacing-wider, normal )Computed: var(--kendo-letter-spacing-wider, normal)
Description: The letter spacing of the fourth highest level heading.
kendo-h5-letter-spacingvar( --kendo-letter-spacing-normal, normal )var(--kendo-letter-spacing-normal, normal)Default: var( --kendo-letter-spacing-normal, normal )Computed: var(--kendo-letter-spacing-normal, normal)
Description: The letter spacing of the fifth highest level heading.
kendo-h6-letter-spacingvar( --kendo-letter-spacing-wide, normal )var(--kendo-letter-spacing-wide, normal)Default: var( --kendo-letter-spacing-wide, normal )Computed: var(--kendo-letter-spacing-wide, normal)
Description: The letter spacing of the sixth highest level heading.
kendo-h1-margin0 0 12px0 0 12pxDefault: 0 0 12pxComputed: 0 0 12px
Description: The margin of the highest level heading.
kendo-h2-margin0 0 12px0 0 12pxDefault: 0 0 12pxComputed: 0 0 12px
Description: The margin of the second highest level heading.
kendo-h3-margin0 0 12px0 0 12pxDefault: 0 0 12pxComputed: 0 0 12px
Description: The margin of the third highest level heading.
kendo-h4-margin0 0 12px0 0 12pxDefault: 0 0 12pxComputed: 0 0 12px
Description: The margin of the fourth highest level heading.
kendo-h5-margin0 0 12px0 0 12pxDefault: 0 0 12pxComputed: 0 0 12px
Description: The margin of the fifth highest level heading.
kendo-h6-margin0 0 12px0 0 12pxDefault: 0 0 12pxComputed: 0 0 12px
Description: The margin of the sixth highest level heading.
kendo-headings( h1: ( font-size: $kendo-h1-font-size, font-family: $kendo-h1-font-family, line-height: $kendo-h1-line-height, font-weight: $kendo-h1-font-weight, letter-spacing: $kendo-h1-letter-spacing, margin: $kendo-h1-margin ), h2: ( font-size: $kendo-h2-font-size, font-family: $kendo-h2-font-family, line-height: $kendo-h2-line-height, font-weight: $kendo-h2-font-weight, letter-spacing: $kendo-h2-letter-spacing, margin: $kendo-h2-margin ), h3: ( font-size: $kendo-h3-font-size, font-family: $kendo-h3-font-family, line-height: $kendo-h3-line-height, font-weight: $kendo-h3-font-weight, letter-spacing: $kendo-h3-letter-spacing, margin: $kendo-h3-margin ), h4: ( font-size: $kendo-h4-font-size, font-family: $kendo-h4-font-family, line-height: $kendo-h4-line-height, font-weight: $kendo-h4-font-weight, letter-spacing: $kendo-h4-letter-spacing, margin: $kendo-h4-margin ), h5: ( font-size: $kendo-h5-font-size, font-family: $kendo-h5-font-family, line-height: $kendo-h5-line-height, font-weight: $kendo-h5-font-weight, letter-spacing: $kendo-h5-letter-spacing, margin: $kendo-h5-margin ), h6: ( font-size: $kendo-h6-font-size, font-family: $kendo-h6-font-family, line-height: $kendo-h6-line-height, font-weight: $kendo-h6-font-weight, letter-spacing: $kendo-h6-letter-spacing, margin: $kendo-h6-margin ), )(h1: (font-size: 96px, font-family: var(--kendo-font-family, inherit), line-height: 112px, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal), margin: 0 0 12px), h2: (font-size: 60px, font-family: var(--kendo-font-family, inherit), line-height: 72px, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tight, normal), margin: 0 0 12px), h3: (font-size: 48px, font-family: var(--kendo-font-family, inherit), line-height: 56px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: var(--kendo-letter-spacing-normal, normal), margin: 0 0 12px), h4: (font-size: 34px, font-family: var(--kendo-font-family, inherit), line-height: 36px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: var(--kendo-letter-spacing-wider, normal), margin: 0 0 12px), h5: (font-size: 24px, font-family: var(--kendo-font-family, inherit), line-height: 24px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: var(--kendo-letter-spacing-normal, normal), margin: 0 0 12px), h6: (font-size: 20px, font-family: var(--kendo-font-family, inherit), line-height: 24px, font-weight: var(--kendo-font-weight-medium, normal), letter-spacing: var(--kendo-letter-spacing-wide, normal), margin: 0 0 12px))Default: ( h1: ( font-size: $kendo-h1-font-size, font-family: $kendo-h1-font-family, line-height: $kendo-h1-line-height, font-weight: $kendo-h1-font-weight, letter-spacing: $kendo-h1-letter-spacing, margin: $kendo-h1-margin ), h2: ( font-size: $kendo-h2-font-size, font-family: $kendo-h2-font-family, line-height: $kendo-h2-line-height, font-weight: $kendo-h2-font-weight, letter-spacing: $kendo-h2-letter-spacing, margin: $kendo-h2-margin ), h3: ( font-size: $kendo-h3-font-size, font-family: $kendo-h3-font-family, line-height: $kendo-h3-line-height, font-weight: $kendo-h3-font-weight, letter-spacing: $kendo-h3-letter-spacing, margin: $kendo-h3-margin ), h4: ( font-size: $kendo-h4-font-size, font-family: $kendo-h4-font-family, line-height: $kendo-h4-line-height, font-weight: $kendo-h4-font-weight, letter-spacing: $kendo-h4-letter-spacing, margin: $kendo-h4-margin ), h5: ( font-size: $kendo-h5-font-size, font-family: $kendo-h5-font-family, line-height: $kendo-h5-line-height, font-weight: $kendo-h5-font-weight, letter-spacing: $kendo-h5-letter-spacing, margin: $kendo-h5-margin ), h6: ( font-size: $kendo-h6-font-size, font-family: $kendo-h6-font-family, line-height: $kendo-h6-line-height, font-weight: $kendo-h6-font-weight, letter-spacing: $kendo-h6-letter-spacing, margin: $kendo-h6-margin ), )Computed: (h1: (font-size: 96px, font-family: var(--kendo-font-family, inherit), line-height: 112px, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal), margin: 0 0 12px), h2: (font-size: 60px, font-family: var(--kendo-font-family, inherit), line-height: 72px, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tight, normal), margin: 0 0 12px), h3: (font-size: 48px, font-family: var(--kendo-font-family, inherit), line-height: 56px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: var(--kendo-letter-spacing-normal, normal), margin: 0 0 12px), h4: (font-size: 34px, font-family: var(--kendo-font-family, inherit), line-height: 36px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: var(--kendo-letter-spacing-wider, normal), margin: 0 0 12px), h5: (font-size: 24px, font-family: var(--kendo-font-family, inherit), line-height: 24px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: var(--kendo-letter-spacing-normal, normal), margin: 0 0 12px), h6: (font-size: 20px, font-family: var(--kendo-font-family, inherit), line-height: 24px, font-weight: var(--kendo-font-weight-medium, normal), letter-spacing: var(--kendo-letter-spacing-wide, normal), margin: 0 0 12px))
Description: The headings Map.
kendo-paragraph-margin0 0 12px0 0 12pxDefault: 0 0 12pxComputed: 0 0 12px
Description: The margin of the paragraph.
kendo-paragraph-font-size1rem1remDefault: 1remComputed: 1rem
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-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-spacing.0313em0.0313emDefault: .0313emComputed: 0.0313em
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-heightvar( --kendo-line-height, normal )var(--kendo-line-height, normal)Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal)
Description: The line height of the code tag.
kendo-code-font-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 border width of the code tag.
kendo-code-bg$kendo-base-bgvar(--kendo-color-app-surface, #ffffff)Default: $kendo-base-bgComputed: var(--kendo-color-app-surface, #ffffff)
Description: The background color of the code tag.
kendo-code-text$kendo-component-textvar(--kendo-color-on-app-surface, #212121)Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #212121)
Description: The text color of the code tag.
kendo-code-border$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description: The border color of the code tag.
kendo-display1-font-sizecalc( var( --kendo-font-size, .875rem ) * 9.5 )calc(var(--kendo-font-size, 0.875rem) * 9.5)Default: calc( var( --kendo-font-size, .875rem ) * 9.5 )Computed: calc(var(--kendo-font-size, 0.875rem) * 9.5)
Description: The font size of the largest display text.
kendo-display2-font-sizecalc( var( --kendo-font-size, .875rem ) * 8.75 )calc(var(--kendo-font-size, 0.875rem) * 8.75)Default: calc( var( --kendo-font-size, .875rem ) * 8.75 )Computed: calc(var(--kendo-font-size, 0.875rem) * 8.75)
Description: The font size of the second largest display text.
kendo-display3-font-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 third largest display text.
kendo-display4-font-sizecalc( var( --kendo-font-size, .875rem ) * 7.25 )calc(var(--kendo-font-size, 0.875rem) * 7.25)Default: calc( var( --kendo-font-size, .875rem ) * 7.25 )Computed: calc(var(--kendo-font-size, 0.875rem) * 7.25)
Description: The font size of the fourth largest display text.
kendo-display1-font-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-spacingvar( --kendo-letter-spacing-tighter, normal )var(--kendo-letter-spacing-tighter, normal)Default: var( --kendo-letter-spacing-tighter, normal )Computed: var(--kendo-letter-spacing-tighter, normal)
Description: The letter spacing of the largest display text.
kendo-display2-letter-spacingvar( --kendo-letter-spacing-tighter, normal )var(--kendo-letter-spacing-tighter, normal)Default: var( --kendo-letter-spacing-tighter, normal )Computed: var(--kendo-letter-spacing-tighter, normal)
Description: The letter spacing of the second largest display text.
kendo-display3-letter-spacingvar( --kendo-letter-spacing-tighter, normal )var(--kendo-letter-spacing-tighter, normal)Default: var( --kendo-letter-spacing-tighter, normal )Computed: var(--kendo-letter-spacing-tighter, normal)
Description: The letter spacing of the third largest display text.
kendo-display4-letter-spacingvar( --kendo-letter-spacing-tighter, normal )var(--kendo-letter-spacing-tighter, normal)Default: var( --kendo-letter-spacing-tighter, normal )Computed: var(--kendo-letter-spacing-tighter, normal)
Description: The letter spacing of the fourth largest display text.
kendo-display( 1: ( font-size: $kendo-display1-font-size, font-family: $kendo-display1-font-family, line-height: $kendo-display1-line-height, font-weight: $kendo-display1-font-weight, letter-spacing: $kendo-display1-letter-spacing ), 2: ( font-size: $kendo-display2-font-size, font-family: $kendo-display2-font-family, line-height: $kendo-display2-line-height, font-weight: $kendo-display2-font-weight, letter-spacing: $kendo-display2-letter-spacing ), 3: ( font-size: $kendo-display3-font-size, font-family: $kendo-display3-font-family, line-height: $kendo-display3-line-height, font-weight: $kendo-display3-font-weight, letter-spacing: $kendo-display3-letter-spacing ), 4: ( font-size: $kendo-display4-font-size, font-family: $kendo-display4-font-family, line-height: $kendo-display4-line-height, font-weight: $kendo-display4-font-weight, letter-spacing: $kendo-display4-letter-spacing ), )(1: (font-size: calc(var(--kendo-font-size, 0.875rem) * 9.5), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal)), 2: (font-size: calc(var(--kendo-font-size, 0.875rem) * 8.75), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal)), 3: (font-size: calc(var(--kendo-font-size, 0.875rem) * 8), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal)), 4: (font-size: calc(var(--kendo-font-size, 0.875rem) * 7.25), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal)))Default: ( 1: ( font-size: $kendo-display1-font-size, font-family: $kendo-display1-font-family, line-height: $kendo-display1-line-height, font-weight: $kendo-display1-font-weight, letter-spacing: $kendo-display1-letter-spacing ), 2: ( font-size: $kendo-display2-font-size, font-family: $kendo-display2-font-family, line-height: $kendo-display2-line-height, font-weight: $kendo-display2-font-weight, letter-spacing: $kendo-display2-letter-spacing ), 3: ( font-size: $kendo-display3-font-size, font-family: $kendo-display3-font-family, line-height: $kendo-display3-line-height, font-weight: $kendo-display3-font-weight, letter-spacing: $kendo-display3-letter-spacing ), 4: ( font-size: $kendo-display4-font-size, font-family: $kendo-display4-font-family, line-height: $kendo-display4-line-height, font-weight: $kendo-display4-font-weight, letter-spacing: $kendo-display4-letter-spacing ), )Computed: (1: (font-size: calc(var(--kendo-font-size, 0.875rem) * 9.5), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal)), 2: (font-size: calc(var(--kendo-font-size, 0.875rem) * 8.75), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal)), 3: (font-size: calc(var(--kendo-font-size, 0.875rem) * 8), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal)), 4: (font-size: calc(var(--kendo-font-size, 0.875rem) * 7.25), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal)))
Description: The displays Map.
kendo-font-size-xxs0.5rem0.5remDefault: 0.5remComputed: 0.5rem
Description: The extra extra small font size 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-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-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

Border Radii Variables

The following table represents the $kendo-border-radii Sass map of the Telerik and Kendo UI Material theme:

StepValueExample
none0px
xs1px
sm0.125rem
md0.25rem
lg0.5rem
xl0.75rem
xxl1rem
xxxl1.25rem
full9999px

Elevation Variables

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

KeyValue
Variable: kendo-elevation
1(0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))
2(0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14))
3(0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
4(0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))
5(0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))
6(0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14))
7(0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))
8(0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14))
9(0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14))
Description: The global default Elevation map.