Material

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

Variables

All Telerik and Kendo UI themes rely on Sass variables to store styling information. For more detailed information about Sass variables, take a look at the official Sass docs.

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

For consistency, the name of each variable follows a pattern. All variables in the Telerik and Kendo UI themes begin with the kendo- prefix. Depending on its purpose, the variable name ends with the following keywords: colors, spacing, bg, font-size, hover, focus, selected, disabled, and so on.

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 #FEFBFF
on-app-surface #1D1B20
subtle #49454F
surface #F7F3FA
surface-alt #ffffff
border rgba(29, 27, 32, 0.12)
border-alt rgba(29, 27, 32, 0.15)
base-subtle #DED8E0
base-subtle-hover #E2DDE5
base-subtle-active #EAE5EC
base #EAE5EC
base-hover #E2DDE5
base-active #DED8E0
base-emphasis #6E687C
base-on-subtle #4A4459
on-base #4A4459
base-on-surface #4A4459
primary-subtle #E9DDFF
primary-subtle-hover #DFD3F6
primary-subtle-active #D9CCF1
primary #65558F
primary-hover #6E5D97
primary-active #7866A2
primary-emphasis #B6A6D7
primary-on-subtle #4F378A
on-primary #ffffff
primary-on-surface #65558F
secondary-subtle #625B71
secondary-subtle-hover #6E687C
secondary-subtle-active #756F82
secondary #E8DEF8
secondary-hover #DED4EE
secondary-active #D8CEE8
secondary-emphasis #B6AEC6
secondary-on-subtle #ffffff
on-secondary #4A4459
secondary-on-surface #4A4459
tertiary-subtle #FFD8E4
tertiary-subtle-hover #F5CEDA
tertiary-subtle-active #EFC8D4
tertiary #7D5260
tertiary-hover #87606C
tertiary-active #8D6773
tertiary-emphasis #8D6773
tertiary-on-subtle #633B48
on-tertiary #ffffff
tertiary-on-surface #633B48
info-subtle #C1D5F5
info-subtle-hover #B0C8F2
info-subtle-active #96B6EE
info #2C6DDD
info-hover #215FCA
info-active #1B4EA7
info-emphasis #7BA4EA
info-on-subtle #123672
on-info #ffffff
info-on-surface #1B4EA7
success-subtle #D6F5E1
success-subtle-hover #BDEFCF
success-subtle-active #A4EABE
success #1B7E3F
success-hover #186D37
success-active #145C2E
success-emphasis #6BDC94
success-on-subtle #0F4322
on-success #ffffff
success-on-surface #186D37
warning-subtle #FCEDC0
warning-subtle-hover #FAE6A8
warning-subtle-active #F9DF90
warning #F5CA47
warning-hover #F4C12A
warning-active #F2BA0D
warning-emphasis #F7D56E
warning-on-subtle #725809
on-warning #000000
warning-on-surface #725809
error-subtle #F9DEDC
error-subtle-hover #F5C6C2
error-subtle-active #F0ADA8
error #B3261E
error-hover #9C2521
error-active #852221
error-emphasis #E87973
error-on-subtle #852221
on-error #ffffff
error-on-surface #9C2521
light-subtle #FEFBFF
light-subtle-hover #F7F3FA
light-subtle-active #EAE5EC
light #F7F3FA
light-hover #EAE5EC
light-active #E2DDE5
light-emphasis #CCC7D4
light-on-subtle #1D1B20
on-light #1D1B20
light-on-surface #F7F3FA
dark-subtle #B0ABB7
dark-subtle-hover #CCC7D4
dark-subtle-active #DED8E0
dark #322F35
dark-hover #3A363E
dark-active #49454F
dark-emphasis #79747E
dark-on-subtle #79747E
on-dark #ffffff
dark-on-surface #322F35
inverse-subtle #B0ABB7
inverse-subtle-hover #CCC7D4
inverse-subtle-active #DED8E0
inverse #322F35
inverse-hover #3A363E
inverse-active #49454F
inverse-emphasis #79747E
inverse-on-subtle #79747E
on-inverse #ffffff
inverse-on-surface #322F35
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 #114B7A
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 #DD352C
series-e-bold #B3261E
series-e-bolder #852221
series-e-subtle #E87973
series-e-subtler #F0ADA8
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:

StepCSS VariableValueExample
0--kendo-spacing-00px
1px--kendo-spacing-1px1px
0.5--kendo-spacing-0.50.125rem
1--kendo-spacing-10.25rem
1.5--kendo-spacing-1.50.375rem
2--kendo-spacing-20.5rem
2.5--kendo-spacing-2.50.625rem
3--kendo-spacing-30.75rem
3.5--kendo-spacing-3.50.875rem
4--kendo-spacing-41rem
4.5--kendo-spacing-4.51.125rem
5--kendo-spacing-51.25rem
5.5--kendo-spacing-5.51.375rem
6--kendo-spacing-61.5rem
6.5--kendo-spacing-6.51.625rem
7--kendo-spacing-71.75rem
7.5--kendo-spacing-7.51.875rem
8--kendo-spacing-82rem
9--kendo-spacing-92.25rem
10--kendo-spacing-102.5rem
11--kendo-spacing-112.75rem
12--kendo-spacing-123rem
13--kendo-spacing-133.25rem
14--kendo-spacing-143.5rem
15--kendo-spacing-153.75rem
16--kendo-spacing-164rem
17--kendo-spacing-174.25rem
18--kendo-spacing-184.5rem
19--kendo-spacing-194.75rem
20--kendo-spacing-205rem
21--kendo-spacing-215.25rem
22--kendo-spacing-225.5rem
23--kendo-spacing-235.75rem
24--kendo-spacing-246rem
25--kendo-spacing-257rem
26--kendo-spacing-268rem
27--kendo-spacing-279rem
28--kendo-spacing-2810rem
29--kendo-spacing-2911rem
30--kendo-spacing-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-heightcalc(20 / 14)1.4285714286Default: calc(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.331.25Default: 1.33Computed: 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} * 1em )calc(1.4285714286 * 1em)Default: calc( #{$kendo-line-height} * 1em )Computed: calc(1.4285714286 * 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-.5px-0.15pxDefault: -.5pxComputed: -0.15px
Description: The tightest letter spacing across all components.
kendo-letter-spacing-tighter-.25px-0.1pxDefault: -.25pxComputed: -0.1px
Description: Slightly looser than the tighter letter spacing across all components.
kendo-letter-spacing-tight-.1px-0.5pxDefault: -.1pxComputed: -0.5px
Description: Moderately tight letter spacing across all components.
kendo-letter-spacing-normal.25px0pxDefault: .25pxComputed: 0px
Description: The normal letter spacing across all components.
kendo-letter-spacing-wide.1px0.5pxDefault: .1pxComputed: 0.5px
Description: Wide letter spacing across all components
kendo-letter-spacing-wider.25px0.1pxDefault: .25pxComputed: 0.1px
Description: Slightly wider than the wide letter spacing across all components.
kendo-letter-spacing-widest.5px0.15pxDefault: .5pxComputed: 0.15px
Description: The widest letter spacing across all components.
kendo-font-family-sans-serifRoboto, "Helvetica Neue", 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")Default: Roboto, "Helvetica Neue", sans-serifComputed: (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-monospaceConsolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace(SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace)Default: Consolas, "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-family$kendo-font-family-sans-serif(Roboto, "Helvetica Neue", sans-serif)Default: $kendo-font-family-sans-serifComputed: (Roboto, "Helvetica Neue", sans-serif)
Description: The base font family across all components.
kendo-font-sizes
xs: 0.625rem
sm: 0.75rem
md: 0.875rem
lg: 1rem
xl: 1.25rem
Computed: (xs: 0.625rem, sm: 0.75rem, md: 0.875rem, lg: 1rem, xl: 1.25rem)
Description: The font sizes map
kendo-line-heights
xs: 1
sm: 1.33
md: 1.4285714285714286
lg: 1.5
Computed: (xs: 1, sm: 1.33, md: 1.4285714286, lg: 1.5)
Description: The line heights map
kendo-letter-spacings
tightest: -0.5px
tighter: -0.25px
tight: -0.1px
normal: 0.25px
wide: 0.1px
wider: 0.25px
widest: 0.5px
Computed: (tightest: -0.5px, tighter: -0.25px, tight: -0.1px, normal: 0.25px, wide: 0.1px, wider: 0.25px, widest: 0.5px)
Description: The letter spacings map
kendo-font-families
sans-serif: (Roboto, "Helvetica Neue", sans-serif)
monospace: (Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace)
Computed: (sans-serif: (Roboto, "Helvetica Neue", sans-serif), monospace: (Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace))
Description: The font families map
kendo-h1-font-size57px57pxDefault: 57pxComputed: 57px
Description: The font size of the highest level heading.
kendo-h2-font-size45px45pxDefault: 45pxComputed: 45px
Description: The font size of the second highest level heading.
kendo-h3-font-size36px36pxDefault: 36pxComputed: 36px
Description: The font size of the third highest level heading.
kendo-h4-font-size32px32pxDefault: 32pxComputed: 32px
Description: The font size of the fourth highest level heading.
kendo-h5-font-size28px28pxDefault: 28pxComputed: 28px
Description: The font size of the fifth highest level heading.
kendo-h6-font-size24px24pxDefault: 24pxComputed: 24px
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-height64px64pxDefault: 64pxComputed: 64px
Description: The line height of the highest level heading.
kendo-h2-line-height52px52pxDefault: 52pxComputed: 52px
Description: The line height of the second highest level heading.
kendo-h3-line-height44px44pxDefault: 44pxComputed: 44px
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-height36px36pxDefault: 36pxComputed: 36px
Description: The line height of the fifth highest level heading.
kendo-h6-line-height32px32pxDefault: 32pxComputed: 32px
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-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 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-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 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-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 sixth highest level heading.
kendo-h1-margin0 0 12px(0 0 12px)Default: 0 0 12pxComputed: (0 0 12px)
Description: The margin of the highest level heading.
kendo-h2-margin0 0 12px(0 0 12px)Default: 0 0 12pxComputed: (0 0 12px)
Description: The margin of the second highest level heading.
kendo-h3-margin0 0 12px(0 0 12px)Default: 0 0 12pxComputed: (0 0 12px)
Description: The margin of the third highest level heading.
kendo-h4-margin0 0 12px(0 0 12px)Default: 0 0 12pxComputed: (0 0 12px)
Description: The margin of the fourth highest level heading.
kendo-h5-margin0 0 12px(0 0 12px)Default: 0 0 12pxComputed: (0 0 12px)
Description: The margin of the fifth highest level heading.
kendo-h6-margin0 0 12px(0 0 12px)Default: 0 0 12pxComputed: (0 0 12px)
Description: The margin of the sixth highest level heading.
kendo-headings
h1: "font-size":"57px","font-family":"var(--kendo-font-family, inherit)","line-height":"64px","font-weight":"var(--kendo-font-weight-light, normal)","letter-spacing":"var(--kendo-letter-spacing-tighter, normal)","margin":"(0 0 12px)"
h2: "font-size":"45px","font-family":"var(--kendo-font-family, inherit)","line-height":"52px","font-weight":"var(--kendo-font-weight-light, normal)","letter-spacing":"var(--kendo-letter-spacing-normal, normal)","margin":"(0 0 12px)"
h3: "font-size":"36px","font-family":"var(--kendo-font-family, inherit)","line-height":"44px","font-weight":"var(--kendo-font-weight-normal, normal)","letter-spacing":"var(--kendo-letter-spacing-normal, normal)","margin":"(0 0 12px)"
h4: "font-size":"32px","font-family":"var(--kendo-font-family, inherit)","line-height":"40px","font-weight":"var(--kendo-font-weight-normal, normal)","letter-spacing":"var(--kendo-letter-spacing-normal, normal)","margin":"(0 0 12px)"
h5: "font-size":"28px","font-family":"var(--kendo-font-family, inherit)","line-height":"36px","font-weight":"var(--kendo-font-weight-normal, normal)","letter-spacing":"var(--kendo-letter-spacing-normal, normal)","margin":"(0 0 12px)"
h6: "font-size":"24px","font-family":"var(--kendo-font-family, inherit)","line-height":"32px","font-weight":"var(--kendo-font-weight-medium, normal)","letter-spacing":"var(--kendo-letter-spacing-normal, normal)","margin":"(0 0 12px)"
Computed: (h1: (font-size: 57px, font-family: var(--kendo-font-family, inherit), line-height: 64px, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal), margin: 0 0 12px), h2: (font-size: 45px, font-family: var(--kendo-font-family, inherit), line-height: 52px, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-normal, normal), margin: 0 0 12px), h3: (font-size: 36px, font-family: var(--kendo-font-family, inherit), line-height: 44px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: var(--kendo-letter-spacing-normal, normal), margin: 0 0 12px), h4: (font-size: 32px, font-family: var(--kendo-font-family, inherit), line-height: 40px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: var(--kendo-letter-spacing-normal, normal), margin: 0 0 12px), h5: (font-size: 28px, font-family: var(--kendo-font-family, inherit), line-height: 36px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: var(--kendo-letter-spacing-normal, normal), margin: 0 0 12px), h6: (font-size: 24px, font-family: var(--kendo-font-family, inherit), line-height: 32px, font-weight: var(--kendo-font-weight-medium, normal), letter-spacing: var(--kendo-letter-spacing-normal, normal), margin: 0 0 12px))
Description: The headings Map.
kendo-paragraph-margin0 0 12px(0 0 12px)Default: 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, normal )var(--kendo-font-family, normal)Default: var( --kendo-font-family, normal )Computed: var(--kendo-font-family, 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-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 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-bgk-color(app-surface)var(--kendo-color-app-surface, #FEFBFF)Default: k-color(app-surface)Computed: var(--kendo-color-app-surface, #FEFBFF)
Description: The background color of the code tag.
kendo-code-textk-color(on-app-surface)var(--kendo-color-on-app-surface, #1D1B20)Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface, #1D1B20)
Description: The text color of the code tag.
kendo-code-borderk-color(border)var(--kendo-color-border, rgba(29, 27, 32, 0.12))Default: k-color(border)Computed: var(--kendo-color-border, rgba(29, 27, 32, 0.12))
Description: The border color of the code tag.
kendo-display1-font-size140px140pxDefault: 140pxComputed: 140px
Description: The font size of the largest display text.
kendo-display2-font-size112px112pxDefault: 112pxComputed: 112px
Description: The font size of the second largest display text.
kendo-display3-font-size90px90pxDefault: 90pxComputed: 90px
Description: The font size of the third largest display text.
kendo-display4-font-size72px72pxDefault: 72pxComputed: 72px
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":"140px","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":"112px","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":"90px","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":"72px","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)"
Computed: (1: (font-size: 140px, 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: 112px, 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: 90px, 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: 72px, 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 Sans(Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans)Default: 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, Baskerville)Default: "Times New Roman", Georgia, Garamond, Palatino, BaskervilleComputed: ("Times New Roman", Georgia, Garamond, Palatino, Baskerville)
Description: The serif font family across all components.
kendo-font-weights
thin: 100
extra-light: 200
light: 300
normal: 400
medium: 500
semibold: 600
bold: 700
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:

StepCSS VariableValueExample
none--kendo-border-radius-none0px
xs--kendo-border-radius-xs1px
sm--kendo-border-radius-sm0.125rem
md--kendo-border-radius-md0.25rem
lg--kendo-border-radius-lg0.5rem
xl--kendo-border-radius-xl0.75rem
xxl--kendo-border-radius-xxl1rem
xxxl--kendo-border-radius-xxxl1.25rem
full--kendo-border-radius-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 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15))
2(0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15))
3(0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.3))
4(0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.3))
5(0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15))
6(0px 6px 14px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.3))
7(0px 7px 16px 7px rgba(0, 0, 0, 0.15), 0px 5px 5px 0px rgba(0, 0, 0, 0.3))
8(0px 8px 18px 8px rgba(0, 0, 0, 0.15), 0px 6px 5px 0px rgba(0, 0, 0, 0.3))
9(0px 9px 20px 9px rgba(0, 0, 0, 0.15), 0px 7px 6px 0px rgba(0, 0, 0, 0.3))
Description: The global default Elevation map.
Feedback