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:
Key | Value |
---|---|
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:
Step | CSS Variable | Value | Example |
---|---|---|---|
0 | --kendo-spacing-0 | 0px | |
1px | --kendo-spacing-1px | 1px | |
0.5 | --kendo-spacing-0.5 | 0.125rem | |
1 | --kendo-spacing-1 | 0.25rem | |
1.5 | --kendo-spacing-1.5 | 0.375rem | |
2 | --kendo-spacing-2 | 0.5rem | |
2.5 | --kendo-spacing-2.5 | 0.625rem | |
3 | --kendo-spacing-3 | 0.75rem | |
3.5 | --kendo-spacing-3.5 | 0.875rem | |
4 | --kendo-spacing-4 | 1rem | |
4.5 | --kendo-spacing-4.5 | 1.125rem | |
5 | --kendo-spacing-5 | 1.25rem | |
5.5 | --kendo-spacing-5.5 | 1.375rem | |
6 | --kendo-spacing-6 | 1.5rem | |
6.5 | --kendo-spacing-6.5 | 1.625rem | |
7 | --kendo-spacing-7 | 1.75rem | |
7.5 | --kendo-spacing-7.5 | 1.875rem | |
8 | --kendo-spacing-8 | 2rem | |
9 | --kendo-spacing-9 | 2.25rem | |
10 | --kendo-spacing-10 | 2.5rem | |
11 | --kendo-spacing-11 | 2.75rem | |
12 | --kendo-spacing-12 | 3rem | |
13 | --kendo-spacing-13 | 3.25rem | |
14 | --kendo-spacing-14 | 3.5rem | |
15 | --kendo-spacing-15 | 3.75rem | |
16 | --kendo-spacing-16 | 4rem | |
17 | --kendo-spacing-17 | 4.25rem | |
18 | --kendo-spacing-18 | 4.5rem | |
19 | --kendo-spacing-19 | 4.75rem | |
20 | --kendo-spacing-20 | 5rem | |
21 | --kendo-spacing-21 | 5.25rem | |
22 | --kendo-spacing-22 | 5.5rem | |
23 | --kendo-spacing-23 | 5.75rem | |
24 | --kendo-spacing-24 | 6rem | |
25 | --kendo-spacing-25 | 7rem | |
26 | --kendo-spacing-26 | 8rem | |
27 | --kendo-spacing-27 | 9rem | |
28 | --kendo-spacing-28 | 10rem | |
29 | --kendo-spacing-29 | 11rem | |
30 | --kendo-spacing-30 | 12rem |
Typography Variables
The following table represents the typography Sass variables of the Telerik and Kendo UI Material theme:
Variable | Default Value | Computed Value | Value | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
kendo-font-size | 0.875rem | 0.875rem | Default: 0.875rem Computed: 0.875rem | ||||||||||||||||||
Description: The base font size across all components. | |||||||||||||||||||||
kendo-font-size-xs | 0.625rem | 0.625rem | Default: 0.625rem Computed: 0.625rem | ||||||||||||||||||
Description: The extra extra small font size across all components. | |||||||||||||||||||||
kendo-font-size-sm | 0.75rem | 0.75rem | Default: 0.75rem Computed: 0.75rem | ||||||||||||||||||
Description: The small font size across all components. | |||||||||||||||||||||
kendo-font-size-md | $kendo-font-size | 0.875rem | Default: $kendo-font-size Computed: 0.875rem | ||||||||||||||||||
Description: The medium font size across all components. | |||||||||||||||||||||
kendo-font-size-lg | 1rem | 1rem | Default: 1rem Computed: 1rem | ||||||||||||||||||
Description: The large font size across all components. | |||||||||||||||||||||
kendo-font-size-xl | 1.25rem | 1.25rem | Default: 1.25rem Computed: 1.25rem | ||||||||||||||||||
Description: The extra large font size across all components. | |||||||||||||||||||||
kendo-line-height | calc(20 / 14) | 1.4285714286 | Default: calc(20 / 14) Computed: 1.4285714286 | ||||||||||||||||||
Description: The base line height across all components. | |||||||||||||||||||||
kendo-line-height-xs | 1 | 1 | Default: 1 Computed: 1 | ||||||||||||||||||
Description: The extra small line height across all components. | |||||||||||||||||||||
kendo-line-height-sm | 1.33 | 1.25 | Default: 1.33 Computed: 1.25 | ||||||||||||||||||
Description: The small line height across all components. | |||||||||||||||||||||
kendo-line-height-md | $kendo-line-height | 1.4285714286 | Default: $kendo-line-height Computed: 1.4285714286 | ||||||||||||||||||
Description: The medium line height across all components. | |||||||||||||||||||||
kendo-line-height-lg | 1.5 | 1.5 | Default: 1.5 Computed: 1.5 | ||||||||||||||||||
Description: The large line height across all components. | |||||||||||||||||||||
kendo-line-height-em | calc( #{$kendo-line-height} * 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-spacing | null | null | Default: null Computed: null | ||||||||||||||||||
Description: The base letter spacing across all components. | |||||||||||||||||||||
kendo-letter-spacing-tightest | -.5px | -0.15px | Default: -.5px Computed: -0.15px | ||||||||||||||||||
Description: The tightest letter spacing across all components. | |||||||||||||||||||||
kendo-letter-spacing-tighter | -.25px | -0.1px | Default: -.25px Computed: -0.1px | ||||||||||||||||||
Description: Slightly looser than the tighter letter spacing across all components. | |||||||||||||||||||||
kendo-letter-spacing-tight | -.1px | -0.5px | Default: -.1px Computed: -0.5px | ||||||||||||||||||
Description: Moderately tight letter spacing across all components. | |||||||||||||||||||||
kendo-letter-spacing-normal | .25px | 0px | Default: .25px Computed: 0px | ||||||||||||||||||
Description: The normal letter spacing across all components. | |||||||||||||||||||||
kendo-letter-spacing-wide | .1px | 0.5px | Default: .1px Computed: 0.5px | ||||||||||||||||||
Description: Wide letter spacing across all components | |||||||||||||||||||||
kendo-letter-spacing-wider | .25px | 0.1px | Default: .25px Computed: 0.1px | ||||||||||||||||||
Description: Slightly wider than the wide letter spacing across all components. | |||||||||||||||||||||
kendo-letter-spacing-widest | .5px | 0.15px | Default: .5px Computed: 0.15px | ||||||||||||||||||
Description: The widest letter spacing across all components. | |||||||||||||||||||||
kendo-font-family-sans-serif | Roboto, "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-serif Computed: (system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji") | ||||||||||||||||||
Description: The sans-serif font family across all components. | |||||||||||||||||||||
kendo-font-family-monospace | Consolas, "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", monospace Computed: (SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace) | ||||||||||||||||||
Description: The monospace font family across all components. | |||||||||||||||||||||
kendo-font-family | $kendo-font-family-sans-serif | (Roboto, "Helvetica Neue", sans-serif) | Default: $kendo-font-family-sans-serif Computed: (Roboto, "Helvetica Neue", sans-serif) | ||||||||||||||||||
Description: The base font family across all components. | |||||||||||||||||||||
kendo-font-sizes |
| Computed: (xs: 0.625rem, sm: 0.75rem, md: 0.875rem, lg: 1rem, xl: 1.25rem) | |||||||||||||||||||
Description: The font sizes map | |||||||||||||||||||||
kendo-line-heights |
| Computed: (xs: 1, sm: 1.33, md: 1.4285714286, lg: 1.5) | |||||||||||||||||||
Description: The line heights map | |||||||||||||||||||||
kendo-letter-spacings |
| 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 |
| Computed: (sans-serif: (Roboto, "Helvetica Neue", sans-serif), monospace: (Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace)) | |||||||||||||||||||
Description: The font families map | |||||||||||||||||||||
kendo-font-size-xxs | 0.5rem | 0.5rem | Default: 0.5rem Computed: 0.5rem | ||||||||||||||||||
Description: The extra extra small font size across all components. | |||||||||||||||||||||
kendo-font-weight | 400 | 400 | Default: 400 Computed: 400 | ||||||||||||||||||
Description: The base font weight across all components. | |||||||||||||||||||||
kendo-font-weight-thin | 100 | 100 | Default: 100 Computed: 100 | ||||||||||||||||||
Description: The thin font weight across all components. | |||||||||||||||||||||
kendo-font-weight-extra-light | 200 | 200 | Default: 200 Computed: 200 | ||||||||||||||||||
Description: The extra light font weight across all components. | |||||||||||||||||||||
kendo-font-weight-light | 300 | 300 | Default: 300 Computed: 300 | ||||||||||||||||||
Description: The light font weight across all components. | |||||||||||||||||||||
kendo-font-weight-normal | $kendo-font-weight | 400 | Default: $kendo-font-weight Computed: 400 | ||||||||||||||||||
Description: The normal font weight across all components. | |||||||||||||||||||||
kendo-font-weight-medium | 500 | 500 | Default: 500 Computed: 500 | ||||||||||||||||||
Description: The medium font weight across all components. | |||||||||||||||||||||
kendo-font-weight-semibold | 600 | 600 | Default: 600 Computed: 600 | ||||||||||||||||||
Description: The semibold font weight across all components. | |||||||||||||||||||||
kendo-font-weight-bold | 700 | 700 | Default: 700 Computed: 700 | ||||||||||||||||||
Description: The bold font weight across all components. | |||||||||||||||||||||
kendo-font-weight-extra-bold | 800 | 800 | Default: 800 Computed: 800 | ||||||||||||||||||
Description: The extra bold font weight across all components. | |||||||||||||||||||||
kendo-font-weight-black | 900 | 900 | Default: 900 Computed: 900 | ||||||||||||||||||
Description: The most pronounced font weight across all components. | |||||||||||||||||||||
kendo-font-family-sans | Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans | (Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans) | Default: Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans Computed: (Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans) | ||||||||||||||||||
Description: The sans font family across all components. | |||||||||||||||||||||
kendo-font-family-serif | "Times New Roman", Georgia, Garamond, Palatino, Baskerville | ("Times New Roman", Georgia, Garamond, Palatino, Baskerville) | Default: "Times New Roman", Georgia, Garamond, Palatino, Baskerville Computed: ("Times New Roman", Georgia, Garamond, Palatino, Baskerville) | ||||||||||||||||||
Description: The serif font family across all components. | |||||||||||||||||||||
kendo-font-weights |
| Computed: (thin: 100, extra-light: 200, light: 300, normal: 400, medium: 500, semibold: 600, bold: 700, extra-bold: 800, "black": 900) | |||||||||||||||||||
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:
Step | CSS Variable | Value | Example |
---|---|---|---|
none | --kendo-border-radius-none | 0px | |
xs | --kendo-border-radius-xs | 1px | |
sm | --kendo-border-radius-sm | 0.125rem | |
md | --kendo-border-radius-md | 0.25rem | |
lg | --kendo-border-radius-lg | 0.5rem | |
xl | --kendo-border-radius-xl | 0.75rem | |
xxl | --kendo-border-radius-xxl | 1rem | |
xxxl | --kendo-border-radius-xxxl | 1.25rem | |
full | --kendo-border-radius-full | 9999px |
Elevation Variables
The following table represents the $kendo-elevation
Sass map of the Telerik and Kendo UI Material theme:
Key | Value |
---|---|
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. |