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 Fluent 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 Fluent 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 Fluent theme:
| Key | Value |
|---|---|
| Variable: kendo-colors | |
app-surface | #ffffff |
on-app-surface | #323130 |
subtle | #605e5c |
surface | #faf9f8 |
surface-alt | #ffffff |
border | #8a8886 |
border-alt | #323130 |
base-subtle | #edebe9 |
base-subtle-hover | #e1dfdd |
base-subtle-active | #d2d0ce |
base | #ffffff |
base-hover | #f3f2f1 |
base-active | #edebe9 |
base-emphasis | #605e5c |
base-on-subtle | #323130 |
on-base | #323130 |
base-on-surface | #323130 |
primary-subtle | #deecf9 |
primary-subtle-hover | #c7e0f4 |
primary-subtle-active | #abd1ef |
primary | #0078d4 |
primary-hover | #106ebe |
primary-active | #005a9e |
primary-emphasis | #004578 |
primary-on-subtle | #001c30 |
on-primary | #ffffff |
primary-on-surface | #0078d4 |
secondary-subtle | #faf9f8 |
secondary-subtle-hover | #f3f2f1 |
secondary-subtle-active | #edebe9 |
secondary | #979593 |
secondary-hover | #8a8886 |
secondary-active | #797775 |
secondary-emphasis | #605e5c |
secondary-on-subtle | #323130 |
on-secondary | #ffffff |
secondary-on-surface | #605e5c |
tertiary-subtle | #deecf9 |
tertiary-subtle-hover | #bfdbf3 |
tertiary-subtle-active | #aacfef |
tertiary | #2b88d8 |
tertiary-hover | #287ec7 |
tertiary-active | #2473b7 |
tertiary-emphasis | #2169a6 |
tertiary-on-subtle | #174974 |
on-tertiary | #ffffff |
tertiary-on-surface | #2b88d8 |
info-subtle | #cee5ff |
info-subtle-hover | #add4ff |
info-subtle-active | #8dc3ff |
info | #0a7eff |
info-hover | #096edf |
info-active | #085ebf |
info-emphasis | #064f9f |
info-on-subtle | #032040 |
on-info | #ffffff |
info-on-surface | #096edf |
success-subtle | #dff6dd |
success-subtle-hover | #c8e8c6 |
success-subtle-active | #b1dbaf |
success | #55a554 |
success-hover | #3e973e |
success-active | #278a27 |
success-emphasis | #107c10 |
success-on-subtle | #063206 |
on-success | #ffffff |
success-on-surface | #107c10 |
warning-subtle | #fff4ce |
warning-subtle-hover | #ffedad |
warning-subtle-active | #ffe58d |
warning | #ffc80a |
warning-hover | #f5c000 |
warning-active | #e0b000 |
warning-emphasis | #4e4d4b |
warning-on-subtle | #323130 |
on-warning | #323130 |
warning-on-surface | #7a6000 |
error-subtle | #fde7e9 |
error-subtle-hover | #f3d2d4 |
error-subtle-active | #e9bcbf |
error | #c2666b |
error-hover | #b85156 |
error-active | #ae3b41 |
error-emphasis | #a4262c |
error-on-subtle | #420f12 |
on-error | #ffffff |
error-on-surface | #a4262c |
light-subtle | #faf9f8 |
light-subtle-hover | #f3f2f1 |
light-subtle-active | #edebe9 |
light | #d2d0ce |
light-hover | #c8c6c4 |
light-active | #a19f9d |
light-emphasis | #e1dfdd |
light-on-subtle | #323130 |
on-light | #323130 |
light-on-surface | #d2d0ce |
dark-subtle | #a19f9d |
dark-subtle-hover | #979593 |
dark-subtle-active | #8a8886 |
dark | #323130 |
dark-hover | #201f1e |
dark-active | #000000 |
dark-emphasis | #797775 |
dark-on-subtle | #201f1e |
on-dark | #ffffff |
dark-on-surface | #323130 |
inverse-subtle | #a19f9d |
inverse-subtle-hover | #979593 |
inverse-subtle-active | #8a8886 |
inverse | #323130 |
inverse-hover | #201f1e |
inverse-active | #000000 |
inverse-emphasis | #797775 |
inverse-on-subtle | #201f1e |
on-inverse | #ffffff |
inverse-on-surface | #323130 |
series-a | #0099bc |
series-a-bold | #00738d |
series-a-bolder | #004d5e |
series-a-subtle | #40b3cd |
series-a-subtler | #80ccdd |
series-b | #e74856 |
series-b-bold | #ad3641 |
series-b-bolder | #74242b |
series-b-subtle | #ed7680 |
series-b-subtler | #f3a3aa |
series-c | #ffb900 |
series-c-bold | #bf8b00 |
series-c-bolder | #805d00 |
series-c-subtle | #ffcb40 |
series-c-subtler | #ffdc80 |
series-d | #0078d7 |
series-d-bold | #005aa1 |
series-d-bolder | #003c6c |
series-d-subtle | #409ae1 |
series-d-subtler | #80bbeb |
series-e | #8764b8 |
series-e-bold | #654b8a |
series-e-bolder | #44325c |
series-e-subtle | #a58bca |
series-e-subtler | #c3b1db |
series-f | #00cc6a |
series-f-bold | #009950 |
series-f-bolder | #006635 |
series-f-subtle | #40d98f |
series-f-subtler | #80e5b4 |
| Description: The global default Colors map. | |
Spacing Variables
The following table represents the $kendo-spacing Sass map of the Telerik and Kendo UI Fluent 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 Fluent theme:
| Variable | Default Value | Computed Value | Value | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
kendo-font-size | 0.875rem | 0.875rem | Default: 0.875remComputed: 0.875rem | ||||||||||||||||||
| Description: The base font size across all components. | |||||||||||||||||||||
kendo-font-size-xs | 0.625rem | 0.625rem | Default: 0.625remComputed: 0.625rem | ||||||||||||||||||
| Description: The extra extra small font size across all components. | |||||||||||||||||||||
kendo-font-size-sm | 0.75rem | 0.75rem | Default: 0.75remComputed: 0.75rem | ||||||||||||||||||
| Description: The small font size across all components. | |||||||||||||||||||||
kendo-font-size-md | $kendo-font-size | 0.875rem | Default: $kendo-font-sizeComputed: 0.875rem | ||||||||||||||||||
| Description: The medium font size across all components. | |||||||||||||||||||||
kendo-font-size-lg | 1rem | 1rem | Default: 1remComputed: 1rem | ||||||||||||||||||
| Description: The large font size across all components. | |||||||||||||||||||||
kendo-font-size-xl | 1.25rem | 1.25rem | Default: 1.25remComputed: 1.25rem | ||||||||||||||||||
| Description: The extra large font size across all components. | |||||||||||||||||||||
kendo-line-height | math.div( 20, 14 ) | 1.4285714286 | Default: math.div( 20, 14 )Computed: 1.4285714286 | ||||||||||||||||||
| Description: The base line height across all components. | |||||||||||||||||||||
kendo-line-height-xs | 1 | 1 | Default: 1Computed: 1 | ||||||||||||||||||
| Description: The extra small line height across all components. | |||||||||||||||||||||
kendo-line-height-sm | 1.25 | 1.25 | Default: 1.25Computed: 1.25 | ||||||||||||||||||
| Description: The small line height across all components. | |||||||||||||||||||||
kendo-line-height-md | $kendo-line-height | 1.4285714286 | Default: $kendo-line-heightComputed: 1.4285714286 | ||||||||||||||||||
| Description: The medium line height across all components. | |||||||||||||||||||||
kendo-line-height-lg | 1.5 | 1.5 | Default: 1.5Computed: 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 | normal | normal | Default: normalComputed: normal | ||||||||||||||||||
| Description: The base letter spacing across all components. | |||||||||||||||||||||
kendo-font-family | "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif | ("Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif) | Default: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serifComputed: ("Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif) | ||||||||||||||||||
| Description: The 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.25, md: 1.4285714286, lg: 1.5) | |||||||||||||||||||
| Description: The line heights map | |||||||||||||||||||||
kendo-font-size-xxs | 0.5rem | 0.5rem | Default: 0.5remComputed: 0.5rem | ||||||||||||||||||
| Description: The extra extra small font size across all components. | |||||||||||||||||||||
kendo-font-weight | 400 | 400 | Default: 400Computed: 400 | ||||||||||||||||||
| Description: The base font weight across all components. | |||||||||||||||||||||
kendo-font-weight-thin | 100 | 100 | Default: 100Computed: 100 | ||||||||||||||||||
| Description: The thin font weight across all components. | |||||||||||||||||||||
kendo-font-weight-extra-light | 200 | 200 | Default: 200Computed: 200 | ||||||||||||||||||
| Description: The extra light font weight across all components. | |||||||||||||||||||||
kendo-font-weight-light | 300 | 300 | Default: 300Computed: 300 | ||||||||||||||||||
| Description: The light font weight across all components. | |||||||||||||||||||||
kendo-font-weight-normal | $kendo-font-weight | 400 | Default: $kendo-font-weightComputed: 400 | ||||||||||||||||||
| Description: The normal font weight across all components. | |||||||||||||||||||||
kendo-font-weight-medium | 500 | 500 | Default: 500Computed: 500 | ||||||||||||||||||
| Description: The medium font weight across all components. | |||||||||||||||||||||
kendo-font-weight-semibold | 600 | 600 | Default: 600Computed: 600 | ||||||||||||||||||
| Description: The semibold font weight across all components. | |||||||||||||||||||||
kendo-font-weight-bold | 700 | 700 | Default: 700Computed: 700 | ||||||||||||||||||
| Description: The bold font weight across all components. | |||||||||||||||||||||
kendo-font-weight-extra-bold | 800 | 800 | Default: 800Computed: 800 | ||||||||||||||||||
| Description: The extra bold font weight across all components. | |||||||||||||||||||||
kendo-font-weight-black | 900 | 900 | Default: 900Computed: 900 | ||||||||||||||||||
| Description: The most pronounced font weight across all components. | |||||||||||||||||||||
kendo-letter-spacing-tightest | -.15px | -0.15px | Default: -.15pxComputed: -0.15px | ||||||||||||||||||
| Description: The tightest letter spacing across all components. | |||||||||||||||||||||
kendo-letter-spacing-tighter | -.10px | -0.1px | Default: -.10pxComputed: -0.1px | ||||||||||||||||||
| Description: Slightly looser than the tighter letter spacing across all components. | |||||||||||||||||||||
kendo-letter-spacing-tight | -.5px | -0.5px | Default: -.5pxComputed: -0.5px | ||||||||||||||||||
| Description: Moderately tight letter spacing across all components. | |||||||||||||||||||||
kendo-letter-spacing-normal | 0px | 0px | Default: 0pxComputed: 0px | ||||||||||||||||||
| Description: The normal letter spacing across all components. | |||||||||||||||||||||
kendo-letter-spacing-wide | .5px | 0.5px | Default: .5pxComputed: 0.5px | ||||||||||||||||||
| Description: Wide letter spacing across all components. | |||||||||||||||||||||
kendo-letter-spacing-wider | .10px | 0.1px | Default: .10pxComputed: 0.1px | ||||||||||||||||||
| Description: Slightly wider than the wide letter spacing across all components. | |||||||||||||||||||||
kendo-letter-spacing-widest | .15px | 0.15px | Default: .15pxComputed: 0.15px | ||||||||||||||||||
| Description: The widest letter spacing across all components. | |||||||||||||||||||||
kendo-font-family-sans | Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans | (Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans) | Default: Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill 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-family-sans-serif | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | (system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji") | Default: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"Computed: (system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji") | ||||||||||||||||||
| Description: The sans-serif font family across all components. | |||||||||||||||||||||
kendo-font-family-monospace | SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace | (SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace) | Default: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", 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-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 | |||||||||||||||||||||
kendo-letter-spacings |
| Computed: (tightest: -0.15px, tighter: -0.1px, tight: -0.5px, normal: 0px, wide: 0.5px, wider: 0.1px, widest: 0.15px) | |||||||||||||||||||
| Description: The letter spacings map | |||||||||||||||||||||
kendo-font-families |
| 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 Fluent 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 Fluent theme:
| Key | Value |
|---|---|
| Variable: kendo-elevation | |
1 | (0 0.3px 0.9px rgba(0, 0, 0, 0.1), 0 1.6px 3.6px rgba(0, 0, 0, 0.13)) |
2 | (0 0.6px 1.8px rgba(0, 0, 0, 0.1), 0 3.2px 7.2px rgba(0, 0, 0, 0.13)) |
3 | (0 0.9px 2.7px rgba(0, 0, 0, 0.1), 0 4.8px 10.8px rgba(0, 0, 0, 0.13)) |
4 | (0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13)) |
5 | (0 1.8px 5.4px rgba(0, 0, 0, 0.1), 0 9.6px 21.6px rgba(0, 0, 0, 0.13)) |
6 | (0 2.4px 7.2px rgba(0, 0, 0, 0.18), 0 12.8px 28.8px rgba(0, 0, 0, 0.22)) |
7 | (0 3.2px 10.8px rgba(0, 0, 0, 0.18), 0 19.2px 43.2px rgba(0, 0, 0, 0.22)) |
8 | (0 4.8px 14.4px rgba(0, 0, 0, 0.18), 0 25.6px 57.6px rgba(0, 0, 0, 0.22)) |
9 | (0 6.4px 18px rgba(0, 0, 0, 0.18), 0 32px 72px rgba(0, 0, 0, 0.22)) |
| Description: The global default Elevation map. | |
