Styling & Themes / Bootstrap Theme / Customization /

New to Kendo UI for Angular? Start a free 30-day trial

Customization

The following table lists the available variables for customizing the Bootstrap theme.

Variables

Common

Name	Type	Default value	Computed value
$kendo-border-radius	Number	`$border-radius`	`0.375rem`
Description Border radius for all components.
$base-bg	Color	`$gray-100`	`#f8f9fa`
Description The background of the components' chrome area.
$base-text	Color	`$body-text`	`#212529`
Description The text color of the components' chrome area.
$base-border	Color	`try-shade( $base-bg, 1 )`	`#e4e5e6`
Description The border color of the components' chrome area.
$base-gradient	Null	`null`	`null`
Description The gradient background of the components' chrome area.
$hovered-bg	Color	`$gray-200`	`#e9ecef`
Description The background of hovered items.
$hovered-text	Color	`$base-text`	`#212529`
Description The text color of hovered items.
$hovered-border	Color	`try-shade( $hovered-bg, 1 )`	`#d6d9dc`
Description The border color of hovered items.
$hovered-gradient	Null	`null`	`null`
Description The gradient background of hovered items.
$selected-bg	Color	`$primary`	`#0d6efd`
Description The background of selected items.
$selected-text	Color	`contrast-wcag( $selected-bg )`	`white`
Description The text color of selected items.
$selected-border	Color	`try-shade( $selected-bg, 1 )`	`#0c65e9`
Description The border color of selected items.
$selected-gradient	Null	`null`	`null`
Description The gradient background of selected items.

Avatar

Name	Type	Default value	Computed value
$kendo-avatar-border-width	Number	`1px`	`1px`
Description Border width of the avatar.
$kendo-avatar-font-family	List	`$font-family`	`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 Font family of the avatar.
$kendo-avatar-font-size	Number	`$font-size`	`1rem`
Description Font size of the avatar.
$kendo-avatar-line-height	Number	`$line-height`	`1.5`
Description Line height of the avatar.
$kendo-avatar-sizes	Map	`( sm: map-get( $spacing, 4 ), md: map-get( $spacing, 8 ), lg: map-get( $spacing, 16 ) )`	`(sm: 1rem, md: 2rem, lg: 4rem)`
Description The sizes of the avatar.
$kendo-avatar-theme-colors	Map	`$kendo-theme-colors`	`("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)`
Description Theme colors map of the avatar.

Badge

Name	Type	Default value	Computed value
$kendo-badge-border-width	Number	`1px`	`1px`
Description Width of the border around the badge.
$kendo-badge-border-radius	Number	`$badge-border-radius`	`0.375rem`
Description Border radius of the badge.
$kendo-badge-padding-x	Number	`$badge-padding-x`	`0.65em`
Description Horizontal padding of the badge.
$kendo-badge-padding-y	Number	`$badge-padding-y`	`0.35em`
Description Vertical padding of the badge.
$kendo-badge-font-size	Number	`$badge-font-size`	`0.75em`
Description Font sizes of the badge.
$kendo-badge-line-height	Number	`1`	`1`
Description Line heights used along with $font-size.
$kendo-badge-min-width	Calculation	`calc( #{$kendo-badge-line-height * 1em} + #{$kendo-badge-padding-y * 2} + #{$kendo-badge-border-width * 2})`	`calc( 1em + 0.7em + 2px)`
Description Badge min width used for circle badge.
$kendo-badge-sizes	Map	( sm: ( padding-x: $kendo-badge-padding-x-sm, padding-y: $kendo-badge-padding-y-sm, font-size: $kendo-badge-font-size-sm, line-height: $kendo-badge-line-height-sm, min-width: $kendo-badge-min-width-sm ), md: ( padding-x: $kendo-badge-padding-x-md, padding-y: $kendo-badge-padding-y-md, font-size: $kendo-badge-font-size-md, line-height: $kendo-badge-line-height-md, min-width: $kendo-badge-min-width-md ), lg: ( padding-x: $kendo-badge-padding-x-lg, padding-y: $kendo-badge-padding-y-lg, font-size: $kendo-badge-font-size-lg, line-height: $kendo-badge-line-height-lg, min-width: $kendo-badge-min-width-lg ) )	`(sm: (padding-x: 0.325em, padding-y: 0.175em, font-size: 0.75em, line-height: 1, min-width: calc( 1em + 0.35em + 2px )), md: (padding-x: 0.65em, padding-y: 0.35em, font-size: 0.75em, line-height: 1, min-width: calc( 1em + 0.7em + 2px )), lg: (padding-x: 0.975em, padding-y: 0.525em, font-size: 0.75em, line-height: 1, min-width: calc( 1em + 1.05em + 2px )))`
Description Sizes map for the badge.

Button

Name	Type	Default value	Computed value
$kendo-button-border-width	Number	`$btn-border-width`	`1px`
Description Width of the border around the button.
$kendo-button-border-radius	Null	`null`	`null`
Description Border radius of the button.
$kendo-button-padding-x	Number	`$btn-padding-x`	`0.75rem`
Description Horizontal padding of the button.
$kendo-button-padding-y	Number	`$btn-padding-y`	`0.375rem`
Description Vertical padding of the button.
$kendo-button-font-family	List	`$font-family`	`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 Font family of the button.
$kendo-button-font-size	Number	`$btn-font-size`	`1rem`
Description Font sizes of the button.
$kendo-button-line-height	Number	`$btn-line-height`	`1.5`
Description Line heights used along with $font-size.
$kendo-button-calc-size	Calculation	`calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} )`	`calc( 1.5em + 0.75rem + 2px )`
Description Calculated height of the button.
$kendo-button-inner-calc-size	Calculation	`calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} )`	`calc( 1.5em + 0.75rem )`
Description Calculated inner height of the button. Without the border width.
$kendo-button-theme-colors	Map	`map-merge( $kendo-theme-colors, ( "base": #e4e7eb ) )`	`("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529, "base": #e4e7eb)`
Description Theme colors map for the button.
$kendo-button-bg	Color	`#e4e7eb`	`#e4e7eb`
Description The base background of the button.
$kendo-button-text	Color	`contrast-wcag( $kendo-button-bg, $gray-900 )`	`#212529`
Description The base text color of the button.
$kendo-button-border	Color	`$kendo-button-bg`	`#e4e7eb`
Description The base border color of the button.
$kendo-button-gradient	Null	`null`	`null`
Description The base background gradient of the button.
$kendo-button-shadow	Null	`null`	`null`
Description The base shadow of the button.
$kendo-button-hover-bg	Color	`try-darken( $kendo-button-bg, 7.5% )`	`#ced3db`
Description The base background of hovered button.
$kendo-button-hover-text	Null	`null`	`null`
Description The base text color of hovered button.
$kendo-button-hover-border	Color	`try-darken( $kendo-button-bg, 10% )`	`#c7cdd5`
Description The base border color of hovered button.
$kendo-button-hover-gradient	Null	`null`	`null`
Description The base background gradient of hovered button.
$kendo-button-hover-shadow	Null	`null`	`null`
Description The base shadow of hovered button.
$kendo-button-active-bg	Color	`try-darken( $kendo-button-bg, 10% )`	`#c7cdd5`
Description The base background color of active button.
$kendo-button-active-text	Null	`null`	`null`
Description The base text color of active button.
$kendo-button-active-border	Color	`try-darken( $kendo-button-bg, 12.5% )`	`#bfc6d0`
Description The base border color of active button.
$kendo-button-active-gradient	Null	`null`	`null`
Description The base background gradient of active button.
$kendo-button-active-shadow	Null	`null`	`null`
Description The base shadow of active button.
$kendo-button-selected-bg	Color	`try-darken( $primary, 10% )`	`#0257d5`
Description The base background color of selected button.
$kendo-button-selected-text	Color	`contrast-wcag( $kendo-button-selected-bg )`	`white`
Description The text color of selected buttons.
$kendo-button-selected-border	Color	`try-darken( $primary, 12.5% )`	`#0252c9`
Description The border color of selected buttons.
$kendo-button-selected-gradient	Null	`$kendo-button-active-gradient`	`null`
Description The background gradient of selected buttons.
$kendo-button-selected-shadow	Null	`$kendo-button-active-shadow`	`null`
Description The base shadow of selected button.
$kendo-button-focus-bg	Color	`try-darken( $kendo-button-bg, 10% )`	`#c7cdd5`
Description The base background of focused button.
$kendo-button-focus-text	Null	`null`	`null`
Description The base text color of focused button.
$kendo-button-focus-border	Color	`try-darken( $kendo-button-bg, 12.5% )`	`#bfc6d0`
Description The base border color of focused button.
$kendo-button-focus-gradient	Null	`null`	`null`
Description The base background gradient of focused button.
$kendo-button-focus-shadow	List	`0 0 0 .25rem rgba( $kendo-button-border, .5 )`	`0 0 0 0.25rem rgba(228, 231, 235, 0.5)`
Description The base shadow of focused button.
$kendo-button-disabled-bg	Null	`null`	`null`
Description The base background of disabled button.
$kendo-button-disabled-text	Null	`null`	`null`
Description The base text color of disabled button.
$kendo-button-disabled-border	Null	`null`	`null`
Description The base border color of disabled buttons.
$kendo-button-disabled-gradient	Null	`null`	`null`
Description The base background gradient of disabled button.
$kendo-button-disabled-shadow	Null	`null`	`null`
Description The base shadow of disabled button.
$kendo-flat-button-hover-opacity	Number	`.08`	`0.08`
Description The overlay opacity of hovered flat button. Used to create background for the flat button.
$kendo-flat-button-focus-opacity	Null	`null`	`null`
Description The overlay opacity of focused flat button. Used to create background for the flat button.
$kendo-flat-button-active-opacity	Number	`.16`	`0.16`
Description The overlay opacity of active flat button. Used to create background for the flat button.
$kendo-flat-button-selected-opacity	Number	`.2`	`0.2`
Description The overlay opacity of selected flat button. Used to create background for the flat button.
$kendo-button-transition	List	`$transition`	`color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out`
Description The color transition of the button.

Charts

Name	Type	Default value	Computed value
$series-a	Color	`$blue`	`#0d6efd`
Description The first base series color and its light and dark shades.
$series-b	Color	`$purple`	`#6f42c1`
Description The second base series color and its light and dark shades.
$series-c	Color	`$teal`	`#20c997`
Description The third base series color and its light and dark shades.
$series-d	Color	`$green`	`#198754`
Description The fourth base series color and its light and dark shades.
$series-e	Color	`$yellow`	`#ffc107`
Description The fifth base series color and its light and dark shades.
$series-f	Color	`$red`	`#dc3545`
Description The sixth base series color and its light and dark shades.
$series-1	Color	`$series-a`	`#0d6efd`
Description The series colors in order: base, light, dark, lighter, darker
$chart-major-lines	Color	`rgba( if( $dark-theme, $white, $black ), .08 )`	`rgba(0, 0, 0, 0.08)`
Description The color of the Chart grid lines (major).
$chart-minor-lines	Color	`rgba( if( $dark-theme, $white, $black ), .04 )`	`rgba(0, 0, 0, 0.04)`
Description The color of the Chart grid lines (minor).

Checkbox

Name	Type	Default value	Computed value
$kendo-checkbox-border-width	Number	`1px`	`1px`
Description Border width of checkbox.
$kendo-checkbox-bg	Color	`$component-bg`	`#ffffff`
Description Background color of checkbox.
$kendo-checkbox-text	Null	`null`	`null`
Description Color of checkbox.
$kendo-checkbox-border	Color	`contrast-wcag( $kendo-checkbox-bg, $gray-400, $gray-600 )`	`#ced4da`
Description Border color of checkbox.
$kendo-checkbox-hover-bg	Null	`null`	`null`
Description Background color of hovered checkbox.
$kendo-checkbox-hover-text	Null	`null`	`null`
Description Color of hovered checkbox.
$kendo-checkbox-hover-border	Null	`null`	`null`
Description Border color of hovered checkbox.
$kendo-checkbox-checked-bg	Color	`$primary`	`#0d6efd`
Description Background color of checked checkbox.
$kendo-checkbox-checked-text	Color	`contrast-wcag( $kendo-checkbox-checked-bg )`	`white`
Description Color of checked checkbox.
$kendo-checkbox-checked-border	Color	`$kendo-checkbox-checked-bg`	`#0d6efd`
Description Border color of checked checkbox.
$kendo-checkbox-indeterminate-bg	Color	`$kendo-checkbox-checked-bg`	`#0d6efd`
Description Background color of indeterminate checkbox.
$kendo-checkbox-indeterminate-text	Color	`$kendo-checkbox-checked-text`	`white`
Description Color of indeterminate checkbox.
$kendo-checkbox-indeterminate-border	Color	`$kendo-checkbox-checked-border`	`#0d6efd`
Description Border color of indeterminate checkbox.
$kendo-checkbox-focus-border	Color	`try-tint( $primary, 50% )`	`#86b7fe`
Description Border color of focused checkbox.
$kendo-checkbox-focus-shadow	List	`0 0 0 .25rem rgba( $primary, .25 )`	`0 0 0 0.25rem rgba(13, 110, 253, 0.25)`
Description Box shadow of focused checkbox.
$kendo-checkbox-focus-checked-border	Color	`$kendo-checkbox-checked-border`	`#0d6efd`
Description Border color of focused and checked checkbox.
$kendo-checkbox-focus-checked-shadow	List	`$kendo-checkbox-focus-shadow`	`0 0 0 0.25rem rgba(13, 110, 253, 0.25)`
Description Box shadow of focused and checked checkbox.
$kendo-checkbox-disabled-bg	Null	`null`	`null`
Description Background color of disabled checkbox.
$kendo-checkbox-disabled-text	Null	`null`	`null`
Description Color of disabled checkbox.
$kendo-checkbox-disabled-border	Null	`null`	`null`
Description Border color of disabled checkbox.
$kendo-checkbox-disabled-checked-bg	Null	`null`	`null`
Description Background color of disabled and checked checkbox.
$kendo-checkbox-disabled-checked-text	Null	`null`	`null`
Description Color of disabled and checked checkbox.
$kendo-checkbox-disabled-checked-border	Null	`null`	`null`
Description Color of disabled and checked checkbox.
$kendo-checkbox-invalid-bg	Null	`null`	`null`
Description Background color of invalid checkbox.
$kendo-checkbox-invalid-text	Color	`$invalid-text`	`#dc3545`
Description Color of invalid checkbox.
$kendo-checkbox-invalid-border	Color	`$invalid-border`	`#dc3545`
Description Border color of invalid checkbox.
$kendo-checkbox-indicator-type	String	`image`	`image`
Description Type of checkbox indicator.
$kendo-checkbox-glyph-font-family	List	`"WebComponentsIcons", monospace`	`"WebComponentsIcons", monospace`
Description Glyph font family of checkbox indicator.
$kendo-checkbox-checked-glyph	String	`"\e118"`	`"\e118"`
Description Glyph of checkbox indicator.
$kendo-checkbox-indeterminate-glyph	String	`"\e121"`	`"\e121"`
Description Glyph of indeterminate checkbox indicator.
$kendo-checkbox-checked-image	String	`escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") )`	`url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")`
Description Image of checked checkbox indicator.
$kendo-checkbox-indeterminate-image	String	`escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") )`	`url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")`
Description Image of checked checkbox indicator.
$kendo-checkbox-label-margin-x	Number	`map-get( $spacing, 1 )`	`0.25rem`
Description The horizontal margin of the checkbox inside a label.
$kendo-checkbox-list-spacing	Number	`map-get( $spacing, 4 )`	`1rem`
Description Spacing between items of horizontal checkbox list.
$kendo-checkbox-list-item-padding-x	Number	`0px`	`0px`
Description Horizontal padding of checkbox list items.
$kendo-checkbox-list-item-padding-y	Number	`$kendo-list-item-padding-y-md`	`0.25rem`
Description Vertical padding of checkbox list items.
$kendo-checkbox-ripple-bg	Color	`$kendo-checkbox-checked-bg`	`#0d6efd`
Description Background color of checkbox ripple.
$kendo-checkbox-ripple-opacity	Number	`.25`	`0.25`
Description Opacity of checkbox ripple.

Chip

Name	Type	Default value	Computed value
$kendo-chip-border-width	Number	`1px`	`1px`
Description Width of the border around the button.
$kendo-chip-spacing	Number	`map-get( $spacing, 1 )`	`0.25rem`
Description The spacing between the text and the icons of the chip.
$kendo-chip-padding-x	Number	`map-get( $spacing, 1 )`	`0.25rem`
Description Horizontal padding of the chip.
$kendo-chip-padding-y	Number	`map-get( $spacing, 1 )`	`0.25rem`
Description Vertical padding of the chip.
$kendo-chip-font-size	Number	`$font-size-md`	`1rem`
Description Font sizes of the chip.
$kendo-chip-line-height	Number	`1.25`	`1.25`
Description Line heights of the chip that are connected to the $font-size.
$kendo-chip-sizes	Map	`( sm: ( padding-x: $kendo-chip-padding-x-sm, padding-y: $kendo-chip-padding-y-sm, font-size: $kendo-chip-font-size-sm, line-height: $kendo-chip-line-height-sm ), md: ( padding-x: $kendo-chip-padding-x-md, padding-y: $kendo-chip-padding-y-md, font-size: $kendo-chip-font-size-md, line-height: $kendo-chip-line-height-md ), lg: ( padding-x: $kendo-chip-padding-x-lg, padding-y: $kendo-chip-padding-y-lg, font-size: $kendo-chip-font-size-lg, line-height: $kendo-chip-line-height-lg ) )`	`(sm: (padding-x: 0.25rem, padding-y: 0.125rem, font-size: 0.875rem, line-height: 1.25), md: (padding-x: 0.25rem, padding-y: 0.25rem, font-size: 1rem, line-height: 1.25), lg: (padding-x: 0.25rem, padding-y: 0.375rem, font-size: 1rem, line-height: 1.25))`
Description Sizes map for the chip.
$kendo-chip-base-bg	Color	`$base-text`	`#212529`
Description The base background color of the chip.
$kendo-chip-theme-colors	Map	`( "base": $kendo-chip-base-bg, "error": map-get( $kendo-theme-colors, "error" ), "info": map-get( $kendo-theme-colors, "info" ), "warning": map-get( $kendo-theme-colors, "warning" ), "success": map-get( $kendo-theme-colors, "success" ) )`	`("base": #212529, "error": #dc3545, "info": #0dcaf0, "warning": #ffc107, "success": #198754)`
Description Theme colors map for the chip.
$kendo-chip-solid-bg	Color	`try-tint( $kendo-chip-base-bg, 92% )`	`#edeeee`
Description The base background color of solid chip.
$kendo-chip-solid-text	Color	`$kendo-chip-base-bg`	`#212529`
Description The base text color of solid chip.
$kendo-chip-solid-border	Color	`try-tint( $kendo-chip-base-bg, 70% )`	`#bcbebf`
Description The base border color of solid chip.
$kendo-chip-solid-shadow	List	`0 0 0 2px rgba( $kendo-chip-base-bg, .16 )`	`0 0 0 2px rgba(33, 37, 41, 0.16)`
Description The base shadow of solid chip.
$kendo-chip-solid-focus-bg	Color	`try-tint( $kendo-chip-base-bg, 92% )`	`#edeeee`
Description The base background color of focused solid chip.
$kendo-chip-solid-focus-text	Null	`null`	`null`
Description The base text color of focused solid chip.
$kendo-chip-solid-hover-bg	Color	`try-tint( $kendo-chip-base-bg, 84% )`	`#dbdcdd`
Description The base background color of hovered solid chip.
$kendo-chip-solid-hover-text	Null	`null`	`null`
Description The base text color of hovered solid chip.
$kendo-chip-solid-selected-bg	Color	`try-tint( $kendo-chip-base-bg, 76% )`	`#cacbcc`
Description The base background color of selected solid chip.
$kendo-chip-solid-selected-text	Null	`null`	`null`
Description The base text color of selected solid chip.
$kendo-chip-outline-bg	Color	`$component-bg`	`#ffffff`
Description The base background color of outline chip.
$kendo-chip-outline-text	Color	`$kendo-chip-base-bg`	`#212529`
Description The base text color of outline chip.
$kendo-chip-outline-border	Color	`$kendo-chip-base-bg`	`#212529`
Description The base border color of outline chip.
$kendo-chip-outline-shadow	List	`0 0 0 2px rgba( $kendo-chip-base-bg, .16 )`	`0 0 0 2px rgba(33, 37, 41, 0.16)`
Description The base shadow of outline chip.
$kendo-chip-outline-hover-bg	Color	`$kendo-chip-base-bg`	`#212529`
Description The base background color of hovered outline chip.
$kendo-chip-outline-hover-text	Color	`contrast-wcag( $kendo-chip-base-bg )`	`white`
Description The base text color of hovered outline chip.
$kendo-chip-outline-selected-bg	Color	`$kendo-chip-outline-hover-bg`	`#212529`
Description The base background color of selected outline chip.
$kendo-chip-outline-selected-text	Color	`$kendo-chip-outline-hover-text`	`white`
Description The base text color of selected outline chip.
$kendo-chip-list-sizes	Map	`( sm: map-get( $spacing, 1 ), md: map-get( $spacing, 1 ), lg: map-get( $spacing, 1 ) )`	`(sm: 0.25rem, md: 0.25rem, lg: 0.25rem)`
Description The sizes of the chip list.

Color System

Name	Type	Default value	Computed value
$accent	Color	`$primary`	`#0d6efd`
Deprecated Will be removed in v5. Use `$primary` variable instead. Description The color that focuses the user attention.
$accent-contrast	Color	`contrast-wcag( $accent )`	`white`
Deprecated Will be removed in v5. Use `$primary-contrast` variable instead. Description The color used along with the primary color denoted by $primary.
$primary	Color	`$primary`	`#0d6efd`
Description The color that focuses the user attention. Used for primary buttons and for elements of primary importance across the theme.
$primary-contrast	Color	`contrast-wcag( $primary )`	`white`
Description The color used along with the primary color denoted by $primary. Used to provide contrast between the background and foreground colors.
$secondary	Color	`$secondary`	`#6c757d`
Description The secondary color of the theme.
$secondary-contrast	Color	`contrast-wcag( $secondary )`	`white`
Description The color used along with the secondary color denoted by $secondary. Used to provide contrast between the background and foreground colors.
$tertiary	Color	`$purple`	`#6f42c1`
Description The tertiary color of the theme.
$tertiary-contrast	Color	`contrast-wcag( $tertiary )`	`white`
Description The color used along with the tertiary color denoted by $tertiary. Used to provide contrast between the background and foreground colors.
$info	Color	`$info`	`#0dcaf0`
Description The color for informational messages and states.
$success	Color	`$success`	`#198754`
Description The color for success messages and states.
$warning	Color	`$warning`	`#ffc107`
Description The color for warning messages and states.
$error	Color	`$danger`	`#dc3545`
Description The color for error messages and states.
$dark	Color	`$dark`	`#212529`
Description The dark color of the theme.
$light	Color	`$light`	`#f8f9fa`
Description The light color of the theme.
$inverse	Color	`if( $dark-theme, $light, $dark )`	`#212529`
Description Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark

Component

Name	Type	Default value	Computed value
$component-bg	Color	`$body-bg`	`#ffffff`
Description Background color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !default;`.
$component-text	Color	`$body-text`	`#212529`
Description Text color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$grid-text: component-text !default;`.
$component-border	Color	`contrast-wcag( $component-bg, $gray-300, $gray-700 )`	`#dee2e6`
Description Border color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$grid-border: component-border !default;`.

Floating-action-button

Name	Type	Default value	Computed value
$kendo-fab-border-width	Number	`1px`	`1px`
Description Width of the border around the FAB.
$kendo-fab-border-radius	Number	`$kendo-border-radius / 2`	`0.1875rem`
Description Border radius of the FAB.
$kendo-fab-font-family	List	`$font-family`	`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 Font family of the FAB.
$kendo-fab-font-size	Number	`$font-size`	`1rem`
Description Font size of the FAB.
$kendo-fab-line-height	Number	`$line-height`	`1.5`
Description Line height of the FAB.
$kendo-fab-padding-x	Number	`$padding-x`	`1rem`
Description Horizontal padding of the FAB.
$kendo-fab-padding-y	Number	`$kendo-fab-padding-x`	`1rem`
Description Vertical padding of the FAB.
$kendo-fab-icon-width	Number	`24px`	`24px`
Description FAB icon width.
$kendo-fab-icon-height	Number	`$kendo-fab-icon-width`	`24px`
Description FAB icon height.
$kendo-fab-icon-spacing	Number	`map-get( $spacing, 1 ) / 2`	`0.125rem`
Description FAB icon spacing.
$kendo-fab-items-padding-x	Number	`0px`	`0px`
Description FAB items horizontal padding.
$kendo-fab-items-padding-y	Number	`map-get( $spacing, 4 )`	`1rem`
Description FAB items vertical padding.
$kendo-fab-item-text-padding-x	Number	`map-get( $spacing, 1 )`	`0.25rem`
Description FAB item text horizontal padding.
$kendo-fab-item-text-padding-y	Number	`$kendo-fab-item-text-padding-x`	`0.25rem`
Description FAB item text vertical padding.
$kendo-fab-item-text-border-width	Number	`1px`	`1px`
Description Width of the FAB item text border.
$kendo-fab-item-text-border-radius	Number	`4px`	`4px`
Description Border radius of the FAB item text.
$kendo-fab-item-text-font-size	Number	`$font-size-xs`	`0.75rem`
Description Font size of the FAB item text.
$kendo-fab-item-text-line-height	Number	`14px`	`14px`
Description Line height of the FAB item text.
$kendo-fab-item-icon-padding-x	Number	`map-get( $spacing, 2 )`	`0.5rem`
Description FAB item icon horizontal padding.
$kendo-fab-item-icon-padding-y	Number	`$kendo-fab-item-icon-padding-x`	`0.5rem`
Description FAB item icon vertical padding.
$kendo-fab-item-icon-border-width	Number	`0`	`0`
Description Width of the FAB item icon border.
$kendo-fab-item-icon-border-radius	Number	`50%`	`50%`
Description Border radius of the FAB item icon.
$kendo-fab-item-icon-width	Number	`24px`	`24px`
Description Width of the FAB item icon.
$kendo-fab-item-icon-height	Number	`$kendo-fab-item-icon-width`	`24px`
Description height of the FAB item icon.
$kendo-fab-theme-colors	Map	`$kendo-theme-colors`	`("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)`
Description Theme colors map for the FAB.
$kendo-fab-shadow	List	`0px 6px 10px rgba(0, 0, 0, .14), 0px 1px 18px rgba(0, 0, 0, .12), 0px 3px 5px rgba(0, 0, 0, .2)`	`0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2)`
Description The base shadow of the FAB.
$kendo-fab-disabled-shadow	List	`0px 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0px 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0px 3px 5px try-tint( rgba(0, 0, 0, .2), .5 )`	`0px 6px 10px rgba(91, 91, 91, 0.1744), 0px 1px 18px rgba(101, 101, 101, 0.1552), 0px 3px 5px rgba(70, 70, 70, 0.232)`
Description The disabled shadow of the FAB.
$kendo-fab-active-shadow	Null	`null`	`null`
Description The active shadow of the FAB.
$kendo-fab-item-text	Color	`$component-text`	`#212529`
Description The base text color of the FAB item.
$kendo-fab-item-bg	Color	`$component-bg`	`#ffffff`
Description The base background color of the FAB item.
$kendo-fab-item-border	Color	`$component-border`	`#dee2e6`
Description The base border color of the FAB item.
$kendo-fab-item-icon-text	Color	`$kendo-button-text`	`#212529`
Description The base text color of the FAB item icon.
$kendo-fab-item-icon-bg	Color	`$kendo-button-bg`	`#e4e7eb`
Description The base background color of the FAB item icon.
$kendo-fab-item-icon-border	Color	`$kendo-button-border`	`#e4e7eb`
Description The base border color of the FAB item icon.
$kendo-fab-item-shadow	List	`$kendo-fab-shadow`	`0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2)`
Description The base shadow of the FAB item.
$kendo-fab-item-disabled-shadow	List	`$kendo-fab-disabled-shadow`	`0px 6px 10px rgba(91, 91, 91, 0.1744), 0px 1px 18px rgba(101, 101, 101, 0.1552), 0px 3px 5px rgba(70, 70, 70, 0.232)`
Description The disabled shadow of the FAB item.
$kendo-fab-item-active-shadow	Null	`$kendo-fab-active-shadow`	`null`
Description The active shadow of the FAB item.

Grid

Name	Type	Default value	Computed value
$grid-bg	Color	`$component-bg`	`#ffffff`
Description Background color of the grid component
$grid-text	Color	`$component-text`	`#212529`
Description Text color of the grid component
$grid-border	Color	`$component-border`	`#dee2e6`
Description Border color of the grid component
$grid-header-bg	Color	`$header-bg`	`#f8f9fa`
Description Background color of grid header
$grid-header-text	Color	`$header-text`	`#212529`
Description Text color of grid header
$grid-header-border	Color	`$header-border`	`#dee2e6`
Description Border color of grid header
$grid-header-gradient	Null	`$header-gradient`	`null`
Description Background gradient of grid header
$grid-footer-bg	Color	`$grid-header-bg`	`#f8f9fa`
Description Background color of grid footer
$grid-footer-text	Color	`$grid-header-text`	`#212529`
Description Text color of grid footer
$grid-footer-border	Color	`$grid-header-border`	`#dee2e6`
Description Border color of grid footer
$grid-alt-bg	Color	`rgba( contrast-wcag( $grid-bg ), .04 )`	`rgba(0, 0, 0, 0.04)`
Description Background color of alternating rows in grid
$grid-alt-text	Null	`null`	`null`
Description Text color of alternating rows in grid
$grid-alt-border	Null	`null`	`null`
Description Border color of alternating rows in grid
$grid-hovered-bg	Color	`rgba( contrast-wcag( $grid-bg ), .08 )`	`rgba(0, 0, 0, 0.08)`
Description Background color of hovered rows in grid
$grid-hovered-text	Null	`null`	`null`
Description Text color of hovered rows in grid
$grid-hovered-border	Null	`null`	`null`
Description Border color of hovered rows in grid
$grid-selected-bg	Color	`rgba( $selected-bg, .25 )`	`rgba(13, 110, 253, 0.25)`
Description Background color of selected rows in grid
$grid-selected-text	Color	`$grid-text`	`#212529`
Description Text color of selected rows in grid
$grid-selected-border	Color	`$grid-border`	`#dee2e6`
Description Border color of selected rows in grid

Icons

Name	Type	Default value	Computed value
$icon-font-url	Null	`null`	`null`
Description The URL to the icon font that will be used by the theme The default value of `null` embeds the package font with a `data:` URL

Input

Name	Type	Default value	Computed value
$kendo-input-default-width	Number	`100%`	`100%`
Description Default width of input components.
$kendo-input-border-width	Number	`$input-border-width`	`1px`
Description Border width of input components.
$kendo-input-border-radius	Null	`null`	`null`
Description Border radius of input components.
$kendo-input-padding-x	Number	`$input-padding-x`	`0.75rem`
Description Horizontal padding of input components.
$kendo-input-padding-y	Number	`$input-padding-y`	`0.375rem`
Description Vertical padding of input components.
$kendo-input-font-family	List	`$font-family`	`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 Font family of input components.
$kendo-input-font-size	Number	`$font-size`	`1rem`
Description Font size of input components.
$kendo-input-line-height	Number	`$input-line-height`	`1.5`
Description Line height of input components.

List

Name	Type	Default value	Computed value
$kendo-list-font-size	Null	`null`	`null`
Description Font size of the list component, if no size is set.
$kendo-list-line-height	Null	`null`	`null`
Description Line height of the list component, if no size is set.
$kendo-list-header-padding-x	Null	`null`	`null`
Description Horizontal padding of list header, if no size is set.
$kendo-list-header-padding-y	Null	`null`	`null`
Description Vertical padding of list header, if no size is set.
$kendo-list-header-border-width	List	`0 0 1px`	`0 0 1px`
Description Border width of list header.
$kendo-list-header-font-size	Null	`null`	`null`
Description Font size of list header, if no size is set.
$kendo-list-header-line-height	Null	`null`	`null`
Description Line height of list header, if no size is set.
$kendo-list-header-font-weight	String	`bold`	`bold`
Description Font weight of list header.
$kendo-list-item-padding-x	Null	`null`	`null`
Description Horizontal padding of list items, when no size is set.
$kendo-list-item-padding-y	Null	`null`	`null`
Description Vertical padding of list items, when no size is set.
$kendo-list-item-font-size	Null	`null`	`null`
Description Font size of list items, if no size is set.
$kendo-list-item-line-height	Null	`null`	`null`
Description Line height of list items, if no size is set.
$kendo-list-group-item-padding-x	Null	`null`	`null`
Description Horizontal padding of list group items, when no size is set.
$kendo-list-group-item-padding-y	Null	`null`	`null`
Description Vertical padding of list group items, when no size is set.
$kendo-list-group-item-border-width	List	`1px 0 0`	`1px 0 0`
Description Border width of list group items.
$kendo-list-group-item-font-size	Null	`null`	`null`
Description Font size of list group items, if no size is set.
$kendo-list-group-item-line-height	Null	`null`	`null`
Description Line height of list group items, if no size is set.
$kendo-list-group-item-font-weight	String	`bold`	`bold`
Description Font weight of list group item.
$kendo-list-bg	Color	`$component-bg`	`#ffffff`
Description Background color of the list component.
$kendo-list-text	Color	`$component-text`	`#212529`
Description Text color of the list component.
$kendo-list-border	Color	`$component-border`	`#dee2e6`
Description Border color of the list component.
$kendo-list-header-bg	Null	`null`	`null`
Description Background color of list header.
$kendo-list-header-text	Null	`null`	`null`
Description Text color of list header.
$kendo-list-header-border	String	`inherit`	`inherit`
Description Border color of list header.
$kendo-list-header-shadow	Null	`null`	`null`
Description Box shadow of list header.
$kendo-list-item-bg	Null	`null`	`null`
Description Background color of list items.
$kendo-list-item-text	Null	`null`	`null`
Description Text color of list items.
$kendo-list-item-hover-bg	Color	`$hovered-bg`	`#e9ecef`
Description Background color of hovered list items.
$kendo-list-item-hover-text	Color	`$hovered-text`	`#212529`
Description Text color of hovered list items.
$kendo-list-item-focus-bg	Null	`null`	`null`
Description Background color of focused list items.
$kendo-list-item-focus-text	Null	`null`	`null`
Description Text color of focused list items.
$kendo-list-item-focus-shadow	List	`inset 0 0 0 3px rgba( $kendo-list-text, .15 )`	`inset 0 0 0 3px rgba(33, 37, 41, 0.15)`
Description Box shadow of focused list items.
$kendo-list-item-selected-bg	Color	`$selected-bg`	`#0d6efd`
Description Background color of selected list items.
$kendo-list-item-selected-text	Color	`$selected-text`	`white`
Description Text color of selected list items.
$kendo-list-group-item-bg	Null	`null`	`null`
Description Background color of list group items.
$kendo-list-group-item-text	Null	`null`	`null`
Description Text color of list group items.
$kendo-list-group-item-border	String	`inherit`	`inherit`
Description The border color of list group items.
$kendo-list-group-item-shadow	Null	`null`	`null`
Description The base shadow of list group items.
$kendo-list-no-data-text	Color	`$subtle-text`	`#6c757d`
Description Text color of the 'No Data' text.

Name	Type	Default value	Computed value
$kendo-menu-popup-padding-x	Null	`null`	`null`
Description Horizontal padding of the menu popup.
$kendo-menu-popup-padding-y	Null	`null`	`null`
Description Vertical padding of the menu popup.
$kendo-menu-popup-border-width	Number	`$popup-border-width`	`1px`
Description Width of the border around the menu popup.
$kendo-menu-popup-font-size	Number	`$font-size-md`	`1rem`
Description Font sizes of the menu popup.
$kendo-menu-popup-line-height	Number	`$line-height-md`	`1.5`
Description Line heights used along with $font-size.
$kendo-menu-popup-bg	Color	`$popup-bg`	`#ffffff`
Description The background of the menu popup.
$kendo-menu-popup-text	Color	`$popup-text`	`#212529`
Description The text color of the menu popup.
$kendo-menu-popup-border	Color	`$popup-border`	`#dee2e6`
Description The border color of the menu popup.
$kendo-menu-popup-gradient	Null	`null`	`null`
Description The background gradient of the menu popup.
$kendo-menu-popup-item-padding-x	Number	`map-get( $spacing, 4 )`	`1rem`
Description Horizontal padding of the menu item in popup.
$kendo-menu-popup-item-padding-y	Number	`map-get( $spacing, 1 )`	`0.25rem`
Description Vertical padding of the menu item in popup.
$kendo-menu-popup-item-padding-end	Calculation	`calc( #{$kendo-menu-popup-item-padding-x * 2} + #{$icon-size} )`	`calc( 2rem + 16px )`
Description The end padding of the menu item in popup.
$kendo-menu-popup-item-icon-margin-start-sm	Number	`$kendo-menu-popup-item-padding-x-sm`	`1rem`
Description The start margin of the menu item expand icon.
$kendo-menu-popup-item-icon-margin-end-sm	Calculation	`calc( -1 * (#{$kendo-menu-popup-item-padding-end-sm} - #{$kendo-menu-popup-item-padding-x-sm / 2}) )`	`calc(-1 * (calc( 2rem + 16px ) - 0.5rem))`
Description The end margin of the menu item expand icon.
$kendo-menu-popup-item-spacing	Number	`0px`	`0px`
Description The spacing between the menu items in popup.
$kendo-menu-popup-item-bg	Null	`null`	`null`
Description The background of the menu item in popup.
$kendo-menu-popup-item-text	Null	`null`	`null`
Description The text color of the menu item in popup.
$kendo-menu-popup-item-border	Null	`null`	`null`
Description The border color of the menu item in popup.
$kendo-menu-popup-item-gradient	Null	`null`	`null`
Description The background gradient of the menu item in popup.
$kendo-menu-popup-item-hover-bg	Color	`$kendo-list-item-hover-bg`	`#e9ecef`
Description The background of hovered menu item in popup.
$kendo-menu-popup-item-hover-text	Color	`$kendo-list-item-hover-text`	`#212529`
Description The text color of hovered menu item in popup.
$kendo-menu-popup-item-hover-border	Null	`null`	`null`
Description The border color of hovered menu item in popup.
$kendo-menu-popup-item-hover-gradient	Null	`null`	`null`
Description The background gradient of hovered menu item in popup.
$kendo-menu-popup-item-expanded-bg	Color	`$kendo-list-item-selected-bg`	`#0d6efd`
Description The background of expanded menu item in popup.
$kendo-menu-popup-item-expanded-text	Color	`$kendo-list-item-selected-text`	`white`
Description The text color of expanded menu item in popup.
$kendo-menu-popup-item-expanded-border	Null	`null`	`null`
Description The border color of expanded menu item in popup.
$kendo-menu-popup-item-expanded-gradient	Null	`null`	`null`
Description The background gradient of expanded menu item in popup.
$kendo-menu-popup-item-focus-shadow	List	`$menu-item-focus-shadow`	`inset 0 0 0 3px rgba(33, 37, 41, 0.15)`
Description The base shadow of focused menu item in popup.

Name	Type	Default value	Computed value
$kendo-menu-button-arrow-padding-x	Number	`$kendo-button-padding-y`	`0.375rem`
Description Horizontal padding of the arrow button.

Radio

Name	Type	Default value	Computed value
$kendo-radio-radius	Number	`50%`	`50%`
Description Border radius of radio button.
$kendo-radio-border-width	Number	`1px`	`1px`
Description Border width of radio button.
$kendo-radio-bg	Color	`$kendo-checkbox-bg`	`#ffffff`
Description Background color of radio button.
$kendo-radio-text	Null	`$kendo-checkbox-text`	`null`
Description Color of radio button.
$kendo-radio-border	Color	`$kendo-checkbox-border`	`#ced4da`
Description Border color of radio button.
$kendo-radio-hover-bg	Null	`$kendo-checkbox-hover-bg`	`null`
Description Background color of hovered radio button.
$kendo-radio-hover-text	Null	`$kendo-checkbox-hover-text`	`null`
Description Color of hovered radio button.
$kendo-radio-hover-border	Null	`$kendo-checkbox-hover-border`	`null`
Description Border color of hovered radio button.
$kendo-radio-checked-bg	Color	`$kendo-checkbox-checked-bg`	`#0d6efd`
Description Background color of checked radio button.
$kendo-radio-checked-text	Color	`$kendo-checkbox-checked-text`	`white`
Description Color of checked radio button.
$kendo-radio-checked-border	Color	`$kendo-checkbox-checked-border`	`#0d6efd`
Description Border color of checked radio button.
$kendo-radio-focus-border	Color	`$kendo-checkbox-focus-border`	`#86b7fe`
Description Border color of focused radio button.
$kendo-radio-focus-shadow	List	`$kendo-checkbox-focus-shadow`	`0 0 0 0.25rem rgba(13, 110, 253, 0.25)`
Description Box shadow of focused radio button.
$kendo-radio-focus-checked-border	Color	`$kendo-checkbox-focus-checked-border`	`#0d6efd`
Description Border color of focused and checked radio button.
$kendo-radio-focus-checked-shadow	List	`$kendo-checkbox-focus-checked-shadow`	`0 0 0 0.25rem rgba(13, 110, 253, 0.25)`
Description Box shadow of focused and checked radio button.
$kendo-radio-disabled-bg	Null	`$kendo-checkbox-disabled-bg`	`null`
Description Background color of disabled radio button.
$kendo-radio-disabled-text	Null	`$kendo-checkbox-disabled-text`	`null`
Description Color of disabled radio button.
$kendo-radio-disabled-border	Null	`$kendo-checkbox-disabled-border`	`null`
Description Border color of disabled radio button.
$kendo-radio-disabled-checked-bg	Null	`$kendo-checkbox-disabled-checked-bg`	`null`
Description Background color of disabled and checked radio button.
$kendo-radio-disabled-checked-text	Null	`$kendo-checkbox-disabled-checked-text`	`null`
Description Color of disabled and checked radio button.
$kendo-radio-disabled-checked-border	Null	`$kendo-checkbox-disabled-checked-border`	`null`
Description Border color of disabled and checked radio button.
$kendo-radio-invalid-bg	Null	`$kendo-checkbox-invalid-bg`	`null`
Description Background color of invalid radio button.
$kendo-radio-invalid-text	Color	`$kendo-checkbox-invalid-text`	`#dc3545`
Description Color of invalid radio button.
$kendo-radio-invalid-border	Color	`$kendo-checkbox-invalid-border`	`#dc3545`
Description Border color of invalid radio button.
$kendo-radio-indicator-type	String	`image`	`image`
Description Type of radio button indicator.
$kendo-radio-glyph-font-family	List	`"WebComponentsIcons", monospace`	`"WebComponentsIcons", monospace`
Description Glyph font family of radio button indicator.
$kendo-radio-checked-glyph	String	`"\e308"`	`"\e308"`
Description Glyph of radio button indicator.
$kendo-radio-checked-image	String	`escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$kendo-radio-checked-text}'/></svg>") )`	`url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='white'/%3e%3c/svg%3e")`
Description Image of checked radio button indicator.
$kendo-radio-disabled-checked-image	Null	`null`	`null`
Description Image of disabled and checked radio button indicator.
$kendo-radio-label-margin-x	Number	`map-get( $spacing, 1 )`	`0.25rem`
Description The horizontal margin of the radio button inside of a label.
$kendo-radio-list-spacing	Number	`map-get( $spacing, 4 )`	`1rem`
Description Spacing between items of horizontal radio button list.
$kendo-radio-list-item-padding-x	Number	`0px`	`0px`
Description Horizontal padding of radio button list items.
$kendo-radio-list-item-padding-y	Number	`$kendo-list-item-padding-y-md`	`0.25rem`
Description Vertical padding of radio button list items.
$kendo-radio-ripple-bg	Color	`$kendo-radio-checked-bg`	`#0d6efd`
Description Background color of radio button ripple.
$kendo-radio-ripple-opacity	Number	`.25`	`0.25`
Description Opacity of radio button ripple.

Split-button

Name	Type	Default value	Computed value
$kendo-split-button-focus-shadow	List	`$kendo-button-focus-shadow`	`0 0 0 0.25rem rgba(228, 231, 235, 0.5)`
Description Focus shadow of the split button.
$kendo-split-button-arrow-padding-x	Number	`$kendo-button-padding-y`	`0.375rem`
Description Horizontal padding of the arrow button.
$kendo-split-button-arrow-padding-y	Number	`$kendo-button-padding-y`	`0.375rem`
Description Vertical padding of the arrow button.

Switch

Name	Type	Default value	Computed value
$kendo-switch-font-family	Null	`null`	`null`
Description Font family of the switch.
$kendo-switch-track-border-width	Number	`1px`	`1px`
Description Border width of the switch track.
$kendo-switch-thumb-border-width	Null	`null`	`null`
Description Border width of the switch thumb.
$kendo-switch-label-text-transform	Null	`null`	`null`
Description Text transform of the switch label.
$kendo-switch-label-display	String	`none`	`none`
Description Display of the switch label.
$kendo-switch-sizes	Map	`( sm: ( font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null ), md: ( font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null ), lg: ( font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null ) )`	`(sm: (font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null), md: (font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null), lg: (font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null))`
Description Map with the different switch sizes.
$kendo-switch-off-track-bg	Color	`$component-bg`	`#ffffff`
Description The background of the track when the switch is not checked.
$kendo-switch-off-track-text	Null	`null`	`null`
Description The text color of the track when the switch is not checked.
$kendo-switch-off-track-border	Color	`$gray-500`	`#adb5bd`
Description The border color of the track when the switch is not checked.
$kendo-switch-off-track-gradient	Null	`null`	`null`
Description The background gradient of the track when the switch is not checked.
$kendo-switch-off-track-hover-bg	Null	`null`	`null`
Description The background of the track when the hovered switch is not checked.
$kendo-switch-off-track-hover-text	Null	`null`	`null`
Description The text color of the track when the hovered switch is not checked.
$kendo-switch-off-track-hover-border	Null	`null`	`null`
Description The border color of the track when the hovered switch is not checked.
$kendo-switch-off-track-hover-gradient	Null	`null`	`null`
Description The background gradient of the track when the hovered switch is not checked.
$kendo-switch-off-track-focus-bg	Null	`null`	`null`
Description The background of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-text	Null	`null`	`null`
Description The text color of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-border	Color	`mix( $kendo-switch-off-track-bg, $primary )`	`#86b7fe`
Description The border color of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-gradient	Null	`null`	`null`
Description The background gradient of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-ring	List	`.25rem solid rgba( $primary, .25 )`	`0.25rem solid rgba(13, 110, 253, 0.25)`
Description The ring around the track when the focused switch is not checked.
$kendo-switch-off-track-disabled-bg	Color	`if( $dark-theme, $gray-800, $gray-200 )`	`#e9ecef`
Description The background of the track when the disabled switch is not checked.
$kendo-switch-off-track-disabled-text	Null	`null`	`null`
Description The text color of the track when the disabled switch is not checked.
$kendo-switch-off-track-disabled-border	Null	`null`	`null`
Description The border color of the track when the disabled switch is not checked.
$kendo-switch-off-track-disabled-gradient	Null	`null`	`null`
Description The background gradient of the track when the disabled switch is not checked.
$kendo-switch-off-thumb-bg	Color	`$gray-500`	`#adb5bd`
Description The background of the thumb when the switch is not checked.
$kendo-switch-off-thumb-text	Null	`null`	`null`
Description The text color of the thumb when the switch is not checked.
$kendo-switch-off-thumb-border	Null	`null`	`null`
Description The border color of the thumb when the switch is not checked.
$kendo-switch-off-thumb-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the switch is not checked.
$kendo-switch-off-thumb-hover-bg	Null	`null`	`null`
Description The background of the thumb when the hovered switch is not checked.
$kendo-switch-off-thumb-hover-text	Null	`null`	`null`
Description The text color of the thumb when the hovered switch is not checked.
$kendo-switch-off-thumb-hover-border	Null	`null`	`null`
Description The border color of the thumb when the hovered switch is not checked.
$kendo-switch-off-thumb-hover-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the hovered switch is not checked.
$kendo-switch-on-track-bg	Color	`$primary`	`#0d6efd`
Description The background of the track when the switch is checked.
$kendo-switch-on-track-text	Null	`null`	`null`
Description The text color of the track when the switch is checked.
$kendo-switch-on-track-border	Color	`$kendo-switch-on-track-bg`	`#0d6efd`
Description The border color of the track when the switch is checked.
$kendo-switch-on-track-gradient	Null	`null`	`null`
Description The background gradient of the track when the switch is checked.
$kendo-switch-on-track-hover-bg	Null	`null`	`null`
Description The background of the track when the hovered switch is checked.
$kendo-switch-on-track-hover-text	Null	`null`	`null`
Description The text color of the track when the hovered switch is checked.
$kendo-switch-on-track-hover-border	Null	`null`	`null`
Description The border color of the track when the hovered switch is checked.
$kendo-switch-on-track-hover-gradient	Null	`null`	`null`
Description The background gradient of the track when the hovered switch is checked.
$kendo-switch-on-track-focus-bg	Null	`null`	`null`
Description The background of the track when the focused switch is checked.
$kendo-switch-on-track-focus-text	Null	`null`	`null`
Description The text color of the track when the focused switch is checked.
$kendo-switch-on-track-focus-border	Null	`null`	`null`
Description The border color of the track when the focused switch is checked.
$kendo-switch-on-track-focus-gradient	Null	`null`	`null`
Description The background gradient of the track when the focused switch is checked.
$kendo-switch-on-track-focus-ring	List	`.25rem solid rgba( $kendo-switch-on-track-border, .25 )`	`0.25rem solid rgba(13, 110, 253, 0.25)`
Description The ring around the track when the focused switch is checked.
$kendo-switch-on-track-disabled-bg	Color	`try-tint( $kendo-switch-on-track-bg, 50% )`	`#86b7fe`
Description The background of the track when the disabled switch is checked.
$kendo-switch-on-track-disabled-text	Null	`null`	`null`
Description The text color of the track when the disabled switch is checked.
$kendo-switch-on-track-disabled-border	Null	`null`	`null`
Description The border color of the track when the disabled switch is checked.
$kendo-switch-on-track-disabled-gradient	Null	`null`	`null`
Description The background gradient of the track when the disabled switch is checked.
$kendo-switch-on-thumb-bg	Color	`contrast-wcag( $kendo-switch-on-track-bg )`	`white`
Description The background of the thumb when the switch is checked.
$kendo-switch-on-thumb-text	Null	`null`	`null`
Description The text color of the thumb when the switch is checked.
$kendo-switch-on-thumb-border	Null	`null`	`null`
Description The border color of the thumb when the switch is checked.
$kendo-switch-on-thumb-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the switch is checked.
$kendo-switch-on-thumb-hover-bg	Null	`null`	`null`
Description The background of the thumb when the hovered switch is checked.
$kendo-switch-on-thumb-hover-text	Null	`null`	`null`
Description The text color of the thumb when the hovered switch is checked.
$kendo-switch-on-thumb-hover-border	Null	`null`	`null`
Description The border color of the thumb when the hovered switch is checked.
$kendo-switch-on-thumb-hover-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the hovered switch is checked.

Table

Name	Type	Default value	Computed value
$kendo-table-border-width	Number	`1px`	`1px`
Description The width of the table border.
$kendo-table-cell-vertical-border-width	Number	`$grid-cell-vertical-border-width`	`1px`
Description The width of vertical border of table cells.
$kendo-table-cell-horizontal-border-width	Number	`$grid-cell-horizontal-border-width`	`0px`
Description The width of horizontal border of table cells.
$kendo-table-font-size	Null	`null`	`null`
Description The font size of the table if no size is specified.
$kendo-table-line-height	Null	`null`	`null`
Description The line-height of the table if no size is specified.
$kendo-table-cell-padding-x	Null	`null`	`null`
Description The horizontal padding of the cells in the table if no size is specified.
$kendo-table-cell-padding-y	Null	`null`	`null`
Description The vertical padding of the cells in the table if no size is specified.
$kendo-table-sizes	Map	`( sm: ( font-size: $font-size-md, line-height: $line-height-md, cell-padding-x: map-get( $spacing, 2 ), cell-padding-y: map-get( $spacing, 2 ) - map-get( $spacing, thin ) ), md: ( font-size: $font-size-md, line-height: $line-height-md, cell-padding-x: map-get( $spacing, 2 ), cell-padding-y: map-get( $spacing, 2 ) ), lg: ( font-size: $font-size-md, line-height: $line-height-md, cell-padding-x: map-get( $spacing, 2 ), cell-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin ) ) )`	`(sm: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.375rem), md: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.5rem), lg: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.625rem))`
Description The sizes of the table.
$kendo-table-bg	Color	`$grid-bg`	`#ffffff`
Description Background color of tables.
$kendo-table-text	Color	`$grid-text`	`#212529`
Description Text color of tables.
$kendo-table-border	Color	`$grid-border`	`#dee2e6`
Description Border color of tables.
$kendo-table-header-bg	Color	`$grid-header-bg`	`#f8f9fa`
Description Background color of table headers.
$kendo-table-header-text	Color	`$grid-header-text`	`#212529`
Description Text color of table headers.
$kendo-table-header-border	Color	`$grid-header-border`	`#dee2e6`
Description Border color of table headers.
$kendo-table-footer-bg	Color	`$grid-footer-bg`	`#f8f9fa`
Description Background color of table footers.
$kendo-table-footer-text	Color	`$grid-footer-text`	`#212529`
Description Text color of table footers.
$kendo-table-footer-border	Color	`$grid-footer-border`	`#dee2e6`
Description Border color of table footers.
$kendo-table-group-row-bg	Color	`$kendo-table-header-bg`	`#f8f9fa`
Description Background color of group rows in table.
$kendo-table-group-row-text	Color	`$kendo-table-header-text`	`#212529`
Description Text color of group rows in table.
$kendo-table-group-row-border	Color	`$kendo-table-header-border`	`#dee2e6`
Description Border color of group rows in table.
$kendo-table-alt-row-bg	Color	`$grid-alt-bg`	`rgba(0, 0, 0, 0.04)`
Description Background color of alternating rows in table.
$kendo-table-alt-row-text	Null	`$grid-alt-text`	`null`
Description Text color of alternating rows in table.
$kendo-table-alt-row-border	Null	`$grid-alt-border`	`null`
Description Border color of alternating rows in table.
$kendo-table-hover-bg	Color	`$grid-hovered-bg`	`rgba(0, 0, 0, 0.08)`
Description Background color of hovered rows in table.
$kendo-table-hover-text	Null	`$grid-hovered-text`	`null`
Description Text color of hovered rows in table.
$kendo-table-hover-border	Null	`$grid-hovered-border`	`null`
Description Border color of hovered rows in table.
$kendo-table-focus-bg	Null	`null`	`null`
Description Background color of focused rows in table.
$kendo-table-focus-text	Null	`null`	`null`
Description Text color of focused rows in table.
$kendo-table-focus-border	Null	`null`	`null`
Description Border color of focused rows in table.
$kendo-table-focus-shadow	List	`$grid-focused-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.08)`
Description Box shadow of focused rows in table.
$kendo-table-selected-bg	Color	`$grid-selected-bg`	`rgba(13, 110, 253, 0.25)`
Description Background color of selected rows in table.
$kendo-table-selected-text	Color	`$grid-selected-text`	`#212529`
Description Text color of selected rows in table.
$kendo-table-selected-border	Color	`$grid-selected-border`	`#dee2e6`
Description Border color of selected rows in table.

Tabstrip

Name	Type	Default value	Computed value
$tabstrip-bg	Null	`null`	`null`
Description Background color of tabstrip component
$tabstrip-text	Color	`$component-text`	`#212529`
Description Text color of tabstrip component
$tabstrip-border	Color	`$component-border`	`#dee2e6`
Description Border color of tabstrip component
$tabstrip-item-padding-x	Number	`$nav-item-padding-x`	`1rem`
Description Horizontal padding of tabs
$tabstrip-item-padding-y	Number	`$nav-item-padding-y`	`0.5rem`
Description Vertical padding of tabs
$tabstrip-item-border-width	Number	`1px`	`1px`
Description Width of border around tabs
$tabstrip-item-border-radius	Number	`map-get( $spacing, 1 )`	`0.25rem`
Description Border radius of tabs
$tabstrip-item-gap	Number	`$nav-item-margin`	`0px`
Description Spacing between tabs
$tabstrip-item-bg	Null	`null`	`null`
Description Background color of tabs
$tabstrip-item-text	Color	`$link-text`	`#0d6efd`
Description Text color of tabs
$tabstrip-item-border	Null	`null`	`null`
Description Border color of tabs
$tabstrip-item-gradient	Null	`null`	`null`
Description Background gradient of tabs
$tabstrip-item-hovered-bg	Null	`null`	`null`
Description Background color of hovered tabs
$tabstrip-item-hovered-text	Color	`$link-hover-text`	`#0a58ca`
Description Text color of hovered tabs
$tabstrip-item-hovered-border	Color	`$gray-200`	`#e9ecef`
Description Border color of hovered tabs
$tabstrip-item-hovered-gradient	Null	`null`	`null`
Description Background gradient of hovered tabs
$tabstrip-item-selected-bg	Color	`$component-bg`	`#ffffff`
Description Background color of selected tabs
$tabstrip-item-selected-text	Color	`$component-text`	`#212529`
Description Text color of selected tabs
$tabstrip-item-selected-border	Color	`$component-border`	`#dee2e6`
Description Border color of selected tabs
$tabstrip-item-selected-gradient	Null	`null`	`null`
Description Background gradient of selected tabs
$tabstrip-content-padding-x	Number	`map-get( $spacing, 4 )`	`1rem`
Description Horizontal padding of tabstrip content
$tabstrip-content-padding-y	Number	`map-get( $spacing, 4 )`	`1rem`
Description Vertical padding of tabstrip content
$tabstrip-content-border-width	Number	`$tabstrip-border-width`	`1px`
Description Width of border around tabstrip content
$tabstrip-content-bg	Color	`$component-bg`	`#ffffff`
Description Background color of tabstrip content
$tabstrip-content-text	Color	`$component-text`	`#212529`
Description Text color of tabstrip content
$tabstrip-content-border	Color	`$component-border`	`#dee2e6`
Description Border color of tabstrip content
$tabstrip-content-border-focused	Color	`$component-text`	`#212529`
Description Border color of tabstrip focused content

Name	Type	Default value	Computed value
$toolbar-padding-x	Number	`map-get( $spacing, 2 )`	`0.5rem`
Description The horizontal padding of the container.
$toolbar-padding-y	Number	`map-get( $spacing, 2 )`	`0.5rem`
Description The vertical padding of the container.

Treeview

Name	Type	Default value	Computed value
$kendo-treeview-font-family	List	`$font-family`	`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 Font family of the treeview component.
$kendo-treeview-font-size	Number	`$font-size-md`	`1rem`
Description Font size of the treeview component.
$kendo-treeview-line-height	Number	`$line-height`	`1.5`
Description Line height of the treeview component.
$kendo-treeview-indent	Number	`16px`	`16px`
Description Indentation of child groups in treeview component.
$kendo-treeview-item-padding-x	Number	`map-get( $spacing, 3 )`	`0.75rem`
Description Horizontal padding of treeview items.
$kendo-treeview-item-padding-y	Number	`map-get( $spacing, 1 )`	`0.25rem`
Description Vertical padding of treeview items.
$kendo-treeview-item-border-width	Number	`0px`	`0px`
Description Border width of treeview items.
$kendo-treeview-item-border-radius	Number	`map-get( $spacing, 1 )`	`0.25rem`
Description Border radius of treeview items.
$kendo-treeview-sizes	Map	( sm: ( font-size: $kendo-treeview-font-size-sm, line-height: $kendo-treeview-line-height-sm, item-padding-x: $kendo-treeview-item-padding-x-sm, item-padding-y: $kendo-treeview-item-padding-y-sm ), md: ( font-size: $kendo-treeview-font-size-md, line-height: $kendo-treeview-line-height-md, item-padding-x: $kendo-treeview-item-padding-x-md, item-padding-y: $kendo-treeview-item-padding-y-md ), lg: ( font-size: $kendo-treeview-font-size-lg, line-height: $kendo-treeview-line-height-lg, item-padding-x: $kendo-treeview-item-padding-x-lg, item-padding-y: $kendo-treeview-item-padding-y-lg ) )	`(sm: (font-size: 0.875rem, line-height: 1.4285714286, item-padding-x: 0.5rem, item-padding-y: 0.25rem), md: (font-size: 1rem, line-height: 1.5, item-padding-x: 0.75rem, item-padding-y: 0.25rem), lg: (font-size: 1rem, line-height: 1.5, item-padding-x: 0.75rem, item-padding-y: 0.5rem))`
Description The sizes of the treeview.
$kendo-treeview-bg	Null	`null`	`null`
Description Background color of the treeview component.
$kendo-treeview-text	Color	`$component-text`	`#212529`
Description Text color of the treeview component.
$kendo-treeview-border	Null	`null`	`null`
Description Border color of the treeview component.
$kendo-treeview-item-hover-bg	Color	`$hovered-bg`	`#e9ecef`
Description Background color of hovered treeview items.
$kendo-treeview-item-hover-text	Color	`$hovered-text`	`#212529`
Description Text color of hovered treeview items.
$kendo-treeview-item-hover-border	Color	`$kendo-treeview-item-hover-bg`	`#e9ecef`
Description Border color of hovered treeview items.
$kendo-treeview-item-hover-gradient	Null	`null`	`null`
Description Background gradient of hovered treeview items.
$kendo-treeview-item-selected-bg	Color	`$selected-bg`	`#0d6efd`
Description Background color of selected treeview items.
$kendo-treeview-item-selected-text	Color	`$selected-text`	`white`
Description Text color of selected treeview items.
$kendo-treeview-item-selected-border	Color	`$kendo-treeview-item-selected-bg`	`#0d6efd`
Description Border color of selected treeview items.
$kendo-treeview-item-selected-gradient	Null	`null`	`null`
Description Background gradient of selected treeview items.
$kendo-treeview-item-focus-shadow	List	`inset 0 0 0 2px rgba( $kendo-treeview-text, .15 )`	`inset 0 0 0 2px rgba(33, 37, 41, 0.15)`
Description Box shadow of focused treeview items.
$kendo-treeview-loadmore-bg	Color	`transparent`	`transparent`
Description Background color of load more.
$kendo-treeview-loadmore-text	Color	`$link-text`	`#0d6efd`
Description Text color of load more.
$kendo-treeview-loadmore-border	Null	`null`	`null`
Description Border color of load more.
$kendo-treeview-loadmore-hover-bg	Color	`transparent`	`transparent`
Description Background color of a hovered load more.
$kendo-treeview-loadmore-hover-text	Color	`$link-hover-text`	`#0a58ca`
Description Text color of a hovered load more.
$kendo-treeview-loadmore-hover-border	Null	`null`	`null`
Description Border color of a hovered load more.
$kendo-treeview-loadmore-focus-bg	Color	`transparent`	`transparent`
Description Background color of a focused load more.
$kendo-treeview-loadmore-focus-text	Color	`$link-hover-text`	`#0a58ca`
Description Text color of a focused load more.
$kendo-treeview-loadmore-focus-border	Null	`null`	`null`
Description Border color of a focused load more.
$kendo-treeview-loadmore-focus-shadow	List	`$kendo-treeview-item-focus-shadow`	`inset 0 0 0 2px rgba(33, 37, 41, 0.15)`
Description Box shadow of a focused load more.

Typography

Name	Type	Default value	Computed value
$enable-typography	Bool	`false`	`false`
Description Global typography styles for the Kendo Bootstrap theme.
$font-size	Number	`$font-size-base`	`1rem`
Description Base font size across all components.
$font-family	List	`$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"`
Description Font family across all components.
$font-family-monospace	List	`$font-family-monospace`	`SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`
Description Font family for monospaced text. Used for styling the code.
$line-height	Number	`$line-height-base`	`1.5`
Description Line height used along with $font-size.

Mixins

`exports`

Outputs a module once, no matter how many times it is included.

Parameters

name : String - The name of the exported module.