Telerik and Kendo UI Bootstrap Theme Variables

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 Bootstrap 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 Bootstrap 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 Bootstrap theme:

Key	Value
Variable: kendo-colors
`app-surface`	`#ffffff`
`on-app-surface`	`#212529`
`subtle`	`#596169`
`surface`	`#f8f9fa`
`surface-alt`	`#ffffff`
`border`	`rgba(33, 37, 41, 0.13)`
`border-alt`	`rgba(33, 37, 41, 0.2)`
`base-subtle`	`#e9ecef`
`base-subtle-hover`	`#dee2e6`
`base-subtle-active`	`#ced4da`
`base`	`#dee2e6`
`base-hover`	`#ced4da`
`base-active`	`#bdc4cb`
`base-emphasis`	`rgba(33, 37, 41, 0.34)`
`base-on-subtle`	`#212529`
`on-base`	`#212529`
`base-on-surface`	`#212529`
`primary-subtle`	`#cfe2ff`
`primary-subtle-hover`	`#b6d4fe`
`primary-subtle-active`	`#9ec5fe`
`primary`	`#0d6efd`
`primary-hover`	`#0c64e4`
`primary-active`	`#0a58ca`
`primary-emphasis`	`rgba(13, 110, 253, 0.4)`
`primary-on-subtle`	`#052c65`
`on-primary`	`#ffffff`
`primary-on-surface`	`#0d6efd`
`secondary-subtle`	`#dee2e6`
`secondary-subtle-hover`	`#ced4da`
`secondary-subtle-active`	`#bdc4cb`
`secondary`	`#6c757d`
`secondary-hover`	`#596169`
`secondary-active`	`#495057`
`secondary-emphasis`	`rgba(108, 117, 125, 0.4)`
`secondary-on-subtle`	`#2B2F32`
`on-secondary`	`#ffffff`
`secondary-on-surface`	`#6c757d`
`tertiary-subtle`	`#e2d9f3`
`tertiary-subtle-hover`	`#d3c5ec`
`tertiary-subtle-active`	`#c5b3e6`
`tertiary`	`#6f42c1`
`tertiary-hover`	`#59359a`
`tertiary-active`	`#4e2f89`
`tertiary-emphasis`	`rgba(111, 66, 193, 0.4)`
`tertiary-on-subtle`	`#432874`
`on-tertiary`	`#ffffff`
`tertiary-on-surface`	`#6f42c1`
`info-subtle`	`#cff4fc`
`info-subtle-hover`	`#b7eefa`
`info-subtle-active`	`#9eeaf9`
`info`	`#0dcaf0`
`info-hover`	`#3dd5f3`
`info-active`	`#6edff6`
`info-emphasis`	`rgba(13, 202, 240, 0.4)`
`info-on-subtle`	`#055160`
`on-info`	`#000000`
`info-on-surface`	`#0dcaf0`
`success-subtle`	`#d1e7dd`
`success-subtle-hover`	`#badbcc`
`success-subtle-active`	`#a3cfbb`
`success`	`#198754`
`success-hover`	`#146C43`
`success-active`	`#0F5132`
`success-emphasis`	`rgba(25, 135, 84, 0.4)`
`success-on-subtle`	`#0A3622`
`on-success`	`#ffffff`
`success-on-surface`	`#198754`
`warning-subtle`	`#fff3cd`
`warning-subtle-hover`	`#ffecb5`
`warning-subtle-active`	`#ffe69c`
`warning`	`#ffc107`
`warning-hover`	`#ffcd39`
`warning-active`	`#ffda6a`
`warning-emphasis`	`rgba(255, 193, 7, 0.4)`
`warning-on-subtle`	`#664d03`
`on-warning`	`#000000`
`warning-on-surface`	`#ffc107`
`error-subtle`	`#f8d7da`
`error-subtle-hover`	`#f5c2c7`
`error-subtle-active`	`#f1aeb5`
`error`	`#dc3545`
`error-hover`	`#b02a37`
`error-active`	`#9a2530`
`error-emphasis`	`rgba(220, 53, 69, 0.4)`
`error-on-subtle`	`#58151c`
`on-error`	`#ffffff`
`error-on-surface`	`#dc3545`
`light-subtle`	`#ffffff`
`light-subtle-hover`	`#f8f9fa`
`light-subtle-active`	`#e9ecef`
`light`	`#f8f9fa`
`light-hover`	`#e9ecef`
`light-active`	`#dee2e6`
`light-emphasis`	`rgba(33, 37, 41, 0.1)`
`light-on-subtle`	`#495057`
`on-light`	`#000000`
`light-on-surface`	`#f8f9fa`
`dark-subtle`	`#495057`
`dark-subtle-hover`	`#596169`
`dark-subtle-active`	`#6c757d`
`dark`	`#212529`
`dark-hover`	`#343a40`
`dark-active`	`#495057`
`dark-emphasis`	`rgba(33, 37, 41, 0.4)`
`dark-on-subtle`	`#ffffff`
`on-dark`	`#ffffff`
`dark-on-surface`	`#212529`
`inverse-subtle`	`#495057`
`inverse-subtle-hover`	`#596169`
`inverse-subtle-active`	`#6c757d`
`inverse`	`#212529`
`inverse-hover`	`#343a40`
`inverse-active`	`#495057`
`inverse-emphasis`	`rgba(33, 37, 41, 0.4)`
`inverse-on-subtle`	`#ffffff`
`on-inverse`	`#ffffff`
`inverse-on-surface`	`#212529`
`series-a`	`#0c64e4`
`series-a-bold`	`#084298`
`series-a-bolder`	`#052c65`
`series-a-subtle`	`#3d8bfd`
`series-a-subtler`	`#86b6fe`
`series-b`	`#6f42c1`
`series-b-bold`	`#4e2f89`
`series-b-bolder`	`#36215f`
`series-b-subtle`	`#8c68cd`
`series-b-subtler`	`#b9a3e1`
`series-c`	`#20c997`
`series-c-bold`	`#13795b`
`series-c-bolder`	`#0d503c`
`series-c-subtle`	`#79dfc1`
`series-c-subtler`	`#c1f0e2`
`series-d`	`#198754`
`series-d-bold`	`#0F5132`
`series-d-bolder`	`#0A3622`
`series-d-subtle`	`#479F76`
`series-d-subtler`	`#8cc3aa`
`series-e`	`#dc3545`
`series-e-bold`	`#9a2530`
`series-e-bolder`	`#6e1b23`
`series-e-subtle`	`#e35d6a`
`series-e-subtler`	`#f1aeb5`
`series-f`	`#ffc107`
`series-f-bold`	`#b38705`
`series-f-bolder`	`#806104`
`series-f-subtle`	`#ffcd39`
`series-f-subtler`	`#ffe083`
Description: The global default Colors map.

Spacing Variables

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

Step	CSS Variable	Value
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 Bootstrap theme:

Variable Default Value Computed Value Value

kendo-font-size 1rem 1rem Default: 1remComputed: 1rem

Description: The base font size across all components.

kendo-font-size-xs ( $kendo-font-size * .75 ) 0.625rem Default: ( $kendo-font-size * .75 )Computed: 0.625rem

Description: The extra small font size across all components.

kendo-font-size-sm ( $kendo-font-size * .875 ) 0.75rem Default: ( $kendo-font-size * .875 )Computed: 0.75rem

Description: The small font size across all components.

kendo-font-size-md $kendo-font-size 1rem Default: $kendo-font-sizeComputed: 1rem

Description: The medium font size across all components.

kendo-font-size-lg ( $kendo-font-size * 1.25 ) 1rem Default: ( $kendo-font-size * 1.25 )Computed: 1rem

Description: The large font size across all components.

kendo-font-size-xl ( $kendo-font-size-md * 1.5 ) 1.25rem Default: ( $kendo-font-size-md * 1.5 )Computed: 1.25rem

Description: The extra large font size across all components.

kendo-line-height 1.5 1.5 Default: 1.5Computed: 1.5

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.5 Default: $kendo-line-heightComputed: 1.5

Description: The medium line height across all components.

kendo-line-height-lg 2 1.5 Default: 2Computed: 1.5

Description: The large line height across all components.

kendo-line-height-em calc( #{$kendo-line-height} * 1em ) calc(1.5 * 1em) Default: calc( #{$kendo-line-height} * 1em )Computed: calc(1.5 * 1em)

Description: The base line height in ems across all components.

kendo-font-weight-light 300 300 Default: 300Computed: 300

Description: The light font weight across all components.

kendo-font-weight-normal 400 400 Default: 400Computed: 400

Description: The base 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-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, "Liberation Mono", "Courier New", monospace (SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace) Default: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "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 (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: $kendo-font-family-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 base font family across all components.

kendo-font-sizes

xs:	`0.75rem`
sm:	`0.875rem`
md:	`1rem`
lg:	`1.25rem`
xl:	`1.5rem`

Computed: (xs: 0.75rem, sm: 0.875rem, md: 1rem, lg: 1.25rem, xl: 1.5rem)

Description: The font sizes map

kendo-line-heights

xs:	`1`
sm:	`1.25`
md:	`1.5`
lg:	`2`

Computed: (xs: 1, sm: 1.25, md: 1.5, lg: 2)

Description: The line heights map

kendo-font-weights

light:	`300`
normal:	`400`
medium:	`500`
semibold:	`600`
bold:	`700`

Computed: (light: 300, normal: 400, medium: 500, semibold: 600, bold: 700)

Description: The font weights map

kendo-font-families

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, "Liberation Mono", "Courier New", monospace)`

Computed:

(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, "Liberation Mono", "Courier New", monospace))

Description: The font families 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-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 null null Default: nullComputed: null

Description: The base letter spacing 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-letter-spacings

tightest:	`-0.15px`
tighter:	`-0.1px`
tight:	`-0.5px`
normal:	`0px`
wide:	`0.5px`
wider:	`0.1px`
widest:	`0.15px`

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

Border Radii Variables

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

Step	CSS Variable	Value
none	`--kendo-border-radius-none`	0px
xs	`--kendo-border-radius-xs`	0.125rem
sm	`--kendo-border-radius-sm`	0.25rem
md	`--kendo-border-radius-md`	0.375rem
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`	2rem
full	`--kendo-border-radius-full`	50rem

Elevation Variables

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

Key	Value
Variable: kendo-elevation
`1`	`(0px 1px 2px rgba(0, 0, 0, 0.038))`
`2`	`(0px 2px 7px rgba(0, 0, 0, 0.075))`
`3`	`(0px 4px 10px rgba(0, 0, 0, 0.1))`
`4`	`(0px 6px 13px rgba(0, 0, 0, 0.125))`
`5`	`(0px 8px 16px 0px rgba(0, 0, 0, 0.15))`
`6`	`(0px 11px 24px 0px rgba(0, 0, 0, 0.159))`
`7`	`(0px 14px 36px 0px rgba(0, 0, 0, 0.168))`
`8`	`(0px 16px 48px 0px rgba(0, 0, 0, 0.176))`
`9`	`(0px 18px 60px 0px rgba(0, 0, 0, 0.185))`
Description: The global default Elevation map.

Foundation

Themes

CSS Utilities

Components

UI Templates

Resources

Bootstrap