Styling & Themes / Default Theme / Customization /

Customization

Variables

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

Common

Name	Type	Default value	Computed value
$kendo-icon-size	Number	`16px`	`16px`
Description Icon size.
$kendo-icon-size-xs	Calculation	`calc( #{$kendo-icon-size} * .75 )`	`calc( 16px * .75 )`
Description xtra small icon size.
$kendo-icon-size-sm	Calculation	`calc( #{$kendo-icon-size} * .875 )`	`calc( 16px * .875 )`
Description Small icon size.
$kendo-icon-size-md	Number	`$kendo-icon-size`	`16px`
Description Medium icon size.
$kendo-icon-size-lg	Calculation	`calc( #{$kendo-icon-size} * 1.25 )`	`calc( 16px * 1.25 )`
Description Large icon size.
$kendo-icon-size-xl	Calculation	`calc( #{$kendo-icon-size} * 1.5 )`	`calc( 16px * 1.5 )`
Description Extra large icon size.
$kendo-icon-size-xxl	Calculation	`calc( #{$kendo-icon-size} * 2 )`	`calc( 16px * 2 )`
Description Double extra large icon size.
$kendo-icon-size-xxxl	Calculation	`calc( #{$kendo-icon-size} * 3 )`	`calc( 16px * 3 )`
Description Triple extra large icon size.
$kendo-padding-x	Number	`8px`	`8px`
Description Horizontal padding.
$kendo-padding-y	Number	`4px`	`4px`
Description Vertical padding.
$kendo-padding-sm-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description Small horizontal padding.
$kendo-padding-sm-y	Number	`k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description Small vertical padding.
$kendo-padding-md-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Medium horizontal padding.
$kendo-padding-md-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description Medium vertical padding.
$kendo-padding-lg-x	Number	`k-map-get( $kendo-spacing, 3 )`	`12px`
Description Large horizontal padding.
$kendo-padding-lg-y	Number	`k-map-get( $kendo-spacing, 1.5 )`	`6px`
Description Large vertical padding.
$kendo-border-radius	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description Border radius for all components.
$kendo-border-radius-sm	Number	`$kendo-border-radius - k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description Small border radius.
$kendo-border-radius-md	Number	`$kendo-border-radius`	`4px`
Description Medium border radius.
$kendo-border-radius-lg	Number	`$kendo-border-radius + k-map-get( $kendo-spacing, 0.5 )`	`6px`
Description Large border radius.
$kendo-body-bg	Color	`$kendo-color-white`	`#ffffff`
Description Background color of the body.
$kendo-body-text	Color	`#424242`	`#424242`
Description Text color of the body.
$kendo-subtle-text	Color	`#666666`	`#666666`
Description Subtle text color.
$kendo-link-text	Color	`$kendo-color-primary`	`#ff6358`
Description Text color of the links.
$kendo-link-hover-text	Color	`$kendo-color-primary-darker`	`#d6534a`
Description Text color of the links on hover.
$kendo-base-bg	Color	`#fafafa`	`#fafafa`
Description The background of the components' chrome area.
$kendo-base-text	Color	`$kendo-body-text`	`#424242`
Description The text color of the components' chrome area.
$kendo-base-border	Color	`rgba( black, .08 )`	`rgba(0, 0, 0, 0.08)`
Description The border color of the components' chrome area.
$kendo-base-gradient	List	`rgba( black, 0 ), rgba( black, .02 )`	`rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)`
Description The gradient background of the components' chrome area.
$kendo-hover-bg	Color	`k-try-shade( $kendo-base-bg, .5 )`	`#f0f0f0`
Description The background of hovered items.
$kendo-hover-text	Color	`$kendo-base-text`	`#424242`
Description The text color of hovered items.
$kendo-hover-border	Color	`$kendo-base-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of hovered items.
$kendo-hover-gradient	List	`$kendo-base-gradient`	`rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)`
Description The gradient background of hovered items.
$kendo-selected-bg	Color	`$kendo-color-primary`	`#ff6358`
Description The background of selected items.
$kendo-selected-text	Color	`k-contrast-legacy( $kendo-selected-bg )`	`white`
Description The text color of selected items.
$kendo-selected-border	Color	`$kendo-base-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of selected items.
$kendo-selected-gradient	List	`$kendo-base-gradient`	`rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)`
Description The gradient background of selected items.
$kendo-selected-hover-bg	Color	`k-try-shade( $kendo-selected-bg, .5 )`	`#f55f54`
Description The background of selected and hovered items.
$kendo-selected-hover-text	Color	`$kendo-selected-text`	`white`
Description The text color of selected and hovered items.
$kendo-selected-hover-border	Color	`$kendo-base-border`	`rgba(0, 0, 0, 0.08)`
Description The border of selected and hovered items.
$kendo-selected-hover-gradient	List	`$kendo-base-gradient`	`rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)`
Description The gradient of selected and hovered items.
$kendo-focus-shadow	List	`inset 0 0 0 2px rgba(0, 0, 0, .13)`	`inset 0 0 0 2px rgba(0, 0, 0, 0.13)`
Description Box shadow of focused items.
$kendo-transition	List	`color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out`	`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 Transition used across all components.
$kendo-disabled-text	Color	`#8f8f8f`	`#8f8f8f`
Description Text color of disabled items.
$kendo-disabled-filter	String	`grayscale(.1)`	`grayscale(0.1)`
Description Filter used for disabled items.
$kendo-disabled-opacity	Number	`.6`	`0.6`
Description Opacity used for disabled 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	String	`$kendo-font-family`	`inherit`
Description Font family of the avatar.
$kendo-avatar-font-size	Number	`$kendo-font-size-md`	`14px`
Description Font size of the avatar.
$kendo-avatar-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description Line height of the avatar.
$kendo-avatar-sizes	Map	`( sm: k-map-get( $kendo-spacing, 4 ), md: k-map-get( $kendo-spacing, 8 ), lg: k-map-get( $kendo-spacing, 16 ) )`	`(sm: 16px, md: 32px, lg: 64px)`
Description The sizes of the avatar.
$kendo-avatar-theme-colors	Map	`$kendo-theme-colors`	`("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "inverse": #424242)`
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	`$kendo-border-radius-md`	`4px`
Description Border radius of the badge.
$kendo-badge-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description Horizontal padding of the badge.
$kendo-badge-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description Vertical padding of the badge.
$kendo-badge-font-size	Number	`$kendo-font-size-xs`	`10px`
Description Font sizes of the badge.
$kendo-badge-line-height	Number	`1`	`1`
Description Line heights used along with $kendo-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 + 8px + 2px)`
Description Badge min width used for circle badge.
$kendo-badge-sizes	Map	( sm: ( padding-x: $kendo-badge-sm-padding-x, padding-y: $kendo-badge-sm-padding-y, font-size: $kendo-badge-sm-font-size, line-height: $kendo-badge-sm-line-height, min-width: $kendo-badge-sm-min-width ), md: ( padding-x: $kendo-badge-md-padding-x, padding-y: $kendo-badge-md-padding-y, font-size: $kendo-badge-md-font-size, line-height: $kendo-badge-md-line-height, min-width: $kendo-badge-md-min-width ), lg: ( padding-x: $kendo-badge-lg-padding-x, padding-y: $kendo-badge-lg-padding-y, font-size: $kendo-badge-lg-font-size, line-height: $kendo-badge-lg-line-height, min-width: $kendo-badge-lg-min-width ) )	`(sm: (padding-x: 2px, padding-y: 2px, font-size: 10px, line-height: 1, min-width: calc( 1em + 4px + 2px )), md: (padding-x: 4px, padding-y: 4px, font-size: 10px, line-height: 1, min-width: calc( 1em + 8px + 2px )), lg: (padding-x: 6px, padding-y: 6px, font-size: 10px, line-height: 1, min-width: calc( 1em + 12px + 2px )))`
Description Sizes map for the badge.

Button

Name	Type	Default value	Computed value
$kendo-button-border-width	Number	`1px`	`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	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Horizontal padding of the button.
$kendo-button-sm-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Horizontal padding of the small button.
$kendo-button-md-padding-x	Number	`$kendo-button-padding-x`	`8px`
Description Horizontal padding of the medium button.
$kendo-button-lg-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Horizontal padding of the large button.
$kendo-button-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description Vertical padding of the button.
$kendo-button-sm-padding-y	Number	`k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description Vertical padding of the small button.
$kendo-button-md-padding-y	Number	`$kendo-button-padding-y`	`4px`
Description Vertical padding of the medium button.
$kendo-button-lg-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Vertical padding of the large button.
$kendo-button-font-family	String	`$kendo-font-family`	`inherit`
Description Font family of the button.
$kendo-button-font-size	Number	`$kendo-font-size-md`	`14px`
Description Font size of the button.
$kendo-button-sm-font-size	Number	`$kendo-font-size-md`	`14px`
Description Font size of the small button.
$kendo-button-md-font-size	Number	`$kendo-button-font-size`	`14px`
Description Font size of the medium button.
$kendo-button-lg-font-size	Number	`$kendo-font-size-lg`	`16px`
Description Font size of the large button.
$kendo-button-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description Line height used along with $kendo-font-size.
$kendo-button-sm-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description Line height used along with $kendo-font-size of the small button.
$kendo-button-md-line-height	Number	`$kendo-button-line-height`	`1.4285714286`
Description Line height used along with $kendo-font-size of the medium button.
$kendo-button-lg-line-height	Number	`$kendo-line-height-lg`	`1.5`
Description Line height used along with $kendo-font-size of the large button.
$kendo-button-theme-colors	Map	`k-map-merge( $kendo-theme-colors, ( "base": #f5f5f5 ) )`	`("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "inverse": #424242, "base": #f5f5f5)`
Description Theme colors map for the button.
$kendo-button-bg	Color	`#f5f5f5`	`#f5f5f5`
Description The base background of the button.
$kendo-button-text	Color	`#424242`	`#424242`
Description The base text color of the button.
$kendo-button-border	Color	`rgba( black, .08 )`	`rgba(0, 0, 0, 0.08)`
Description The base border color of the button.
$kendo-button-gradient	List	`rgba( black, 0 ), rgba( black, .02 )`	`rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)`
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	`k-try-shade( $kendo-button-bg, .5 )`	`#ebebeb`
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	Null	`null`	`null`
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	`k-try-shade( $kendo-button-bg, 1.5 )`	`#d8d8d8`
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	Null	`null`	`null`
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	`$kendo-color-primary`	`#ff6358`
Description The base background color of selected button.
$kendo-button-selected-text	Color	`k-contrast-legacy( $kendo-button-selected-bg )`	`white`
Description The text color of selected buttons.
$kendo-button-selected-border	Color	`$kendo-button-selected-bg`	`#ff6358`
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	Null	`null`	`null`
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	Null	`null`	`null`
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 2px rgba( $kendo-button-border, .08 )`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
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	`.04`	`0.04`
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-flat-button-focus-ring-opacity	Number	`.12`	`0.12`
Description The opacity of the flat button focus ring. Used to create border for the flat button.
$kendo-button-transition	List	`color .2s ease-in-out`	`color 0.2s ease-in-out`
Description The color transition of the flat button.

Charts

Name	Type	Default value	Computed value
$kendo-series-a	Color	`#ff6358`	`#ff6358`
Description The first base series color and its light and dark shades.
$kendo-series-b	Color	`#ffe162`	`#ffe162`
Description The second base series color and its light and dark shades.
$kendo-series-c	Color	`#4cd180`	`#4cd180`
Description The third base series color and its light and dark shades.
$kendo-series-d	Color	`#4b5ffa`	`#4b5ffa`
Description The fourth base series color and its light and dark shades.
$kendo-series-e	Color	`#ac58ff`	`#ac58ff`
Description The fifth base series color and its light and dark shades.
$kendo-series-f	Color	`#ff5892`	`#ff5892`
Description The sixth base series color and its light and dark shades.
$kendo-series-1	Color	`$kendo-series-a`	`#ff6358`
Description The series colors in order: base, light, dark, lighter, darker
$kendo-chart-major-lines	Color	`rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )`	`rgba(0, 0, 0, 0.08)`
Description The color of the Chart grid lines (major).
$kendo-chart-minor-lines	Color	`rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-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-sm-size	Number	`k-map-get( $kendo-spacing, 3 )`	`12px`
Description Size of a small checkbox.
$kendo-checkbox-md-size	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description Size of a medium checkbox.
$kendo-checkbox-lg-size	Number	`k-map-get( $kendo-spacing, 5 )`	`20px`
Description Size of a large checkbox.
$kendo-checkbox-sm-glyph-size	Number	`k-map-get( $kendo-spacing, 2.5 )`	`10px`
Description Glyph size of a small checkbox.
$kendo-checkbox-md-glyph-size	Number	`k-map-get( $kendo-spacing, 3.5 )`	`14px`
Description Glyph size of a medium checkbox.
$kendo-checkbox-lg-glyph-size	Number	`k-map-get( $kendo-spacing, 4.5 )`	`18px`
Description Glyph size of a large checkbox.
$kendo-checkbox-sm-ripple-size	Number	`300%`	`300%`
Description Ripple size of a small checkbox.
$kendo-checkbox-md-ripple-size	Number	`300%`	`300%`
Description Ripple size of a medium checkbox.
$kendo-checkbox-lg-ripple-size	Number	`300%`	`300%`
Description Ripple size of a large checkbox.
$kendo-checkbox-bg	Color	`$kendo-component-bg`	`#ffffff`
Description Background color of checkbox.
$kendo-checkbox-text	Null	`null`	`null`
Description Color of checkbox.
$kendo-checkbox-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
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	`$kendo-color-primary`	`#ff6358`
Description Background color of checked checkbox.
$kendo-checkbox-checked-text	Color	`k-contrast-legacy( $kendo-checkbox-checked-bg )`	`white`
Description Color of checked checkbox.
$kendo-checkbox-checked-border	Color	`$kendo-checkbox-checked-bg`	`#ff6358`
Description Border color of checked checkbox.
$kendo-checkbox-indeterminate-bg	Color	`$kendo-checkbox-bg`	`#ffffff`
Description Background color of indeterminate checkbox.
$kendo-checkbox-indeterminate-text	Color	`$kendo-checkbox-checked-bg`	`#ff6358`
Description Color of indeterminate checkbox.
$kendo-checkbox-indeterminate-border	Color	`$kendo-checkbox-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of indeterminate checkbox.
$kendo-checkbox-focus-border	Null	`null`	`null`
Description Border color of focused checkbox.
$kendo-checkbox-focus-shadow	List	`0 0 0 2px rgba(0, 0, 0, .06)`	`0 0 0 2px rgba(0, 0, 0, 0.06)`
Description Box shadow of focused checkbox.
$kendo-checkbox-focus-checked-border	Null	`null`	`null`
Description Border color of focused and checked checkbox.
$kendo-checkbox-focus-checked-shadow	List	`0 0 0 2px rgba( $kendo-color-primary, .3 )`	`0 0 0 2px rgba(255, 99, 88, 0.3)`
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 Border color of disabled and checked checkbox.
$kendo-checkbox-invalid-bg	Null	`null`	`null`
Description Background color of invalid checkbox.
$kendo-checkbox-invalid-text	Color	`$kendo-invalid-text`	`#f31700`
Description Color of invalid checkbox.
$kendo-checkbox-invalid-border	Color	`$kendo-invalid-border`	`#f31700`
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	`k-escape-svg( url("data:image/svg+xml,") )`	`url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e")`
Description Image of checked checkbox indicator.
$kendo-checkbox-indeterminate-image	String	`k-escape-svg( url("data:image/svg+xml,") )`	`url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff6358' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/%3e%3c/svg%3e")`
Description Image image of checked checkbox indicator.
$kendo-checkbox-label-margin-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal margin of the checkbox inside a label.
$kendo-checkbox-list-spacing	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
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-md-item-padding-y`	`4px`
Description Vertical padding of checkbox list items.
$kendo-checkbox-ripple-bg	Color	`$kendo-checkbox-checked-bg`	`#ff6358`
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	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The spacing between the text and the icons of the chip.
$kendo-chip-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description Horizontal padding of the chip.
$kendo-chip-sm-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description Horizontal padding of the small chip.
$kendo-chip-md-padding-x	Number	`$kendo-chip-padding-x`	`4px`
Description Horizontal padding of the medium chip.
$kendo-chip-lg-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description Horizontal padding of the large chip.
$kendo-chip-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description Vertical padding of the chip.
$kendo-chip-sm-padding-y	Number	`k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description Vertical padding of the small chip.
$kendo-chip-md-padding-y	Number	`$kendo-chip-padding-y`	`4px`
Description Vertical padding of the medium chip.
$kendo-chip-lg-padding-y	Number	`k-map-get( $kendo-spacing, 1.5 )`	`6px`
Description Vertical padding of the large chip.
$kendo-chip-font-size	Number	`$kendo-font-size-md`	`14px`
Description Font sizes of the chip.
$kendo-chip-sm-font-size	Number	`$kendo-font-size-md`	`14px`
Description Font sizes of the small chip.
$kendo-chip-md-font-size	Number	`$kendo-chip-font-size`	`14px`
Description Font sizes of the medium chip.
$kendo-chip-lg-font-size	Number	`$kendo-font-size-md`	`14px`
Description Font sizes of the large chip.
$kendo-chip-line-height	Number	`1`	`1`
Description Line heights of the chip that are connected to the $kendo-font-size.
$kendo-chip-sm-line-height	Number	`$kendo-chip-line-height`	`1`
Description Line heights of the small chip that are connected to the $kendo-font-size.
$kendo-chip-md-line-height	Number	`$kendo-chip-line-height`	`1`
Description Line heights of the medium chip that are connected to the $kendo-font-size.
$kendo-chip-lg-line-height	Number	`$kendo-chip-line-height`	`1`
Description Line heights of the large chip that are connected to the $kendo-font-size.
$kendo-chip-calc-size	Calculation	`calc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} )`	`calc( 1em + 8px + 2px )`
Description Calculated height of the chip.
$kendo-chip-sizes	Map	`( sm: ( padding-x: $kendo-chip-sm-padding-x, padding-y: $kendo-chip-sm-padding-y, font-size: $kendo-chip-sm-font-size, line-height: $kendo-chip-sm-line-height ), md: ( padding-x: $kendo-chip-md-padding-x, padding-y: $kendo-chip-md-padding-y, font-size: $kendo-chip-md-font-size, line-height: $kendo-chip-md-line-height ), lg: ( padding-x: $kendo-chip-lg-padding-x, padding-y: $kendo-chip-lg-padding-y, font-size: $kendo-chip-lg-font-size, line-height: $kendo-chip-lg-line-height ) )`	`(sm: (padding-x: 4px, padding-y: 2px, font-size: 14px, line-height: 1), md: (padding-x: 4px, padding-y: 4px, font-size: 14px, line-height: 1), lg: (padding-x: 4px, padding-y: 6px, font-size: 14px, line-height: 1))`
Description Sizes map for the chip.
$kendo-chip-base-bg	Color	`$kendo-button-bg`	`#f5f5f5`
Description The base background of the chip.
$kendo-chip-theme-colors	Map	`( "base": $kendo-chip-base-bg, "error": k-map-get($kendo-theme-colors, "error"), "info": k-map-get($kendo-theme-colors, "info"), "warning": k-map-get($kendo-theme-colors, "warning"), "success": k-map-get($kendo-theme-colors, "success") )`	`("base": #f5f5f5, "error": #f31700, "info": #0058e9, "warning": #ffc000, "success": #37b400)`
Description Theme colors map for the chip.
$kendo-chip-solid-bg	Color	`$kendo-chip-base-bg`	`#f5f5f5`
Description The base background color of solid chip.
$kendo-chip-solid-text	Color	`$kendo-button-text`	`#424242`
Description The base text color of solid chip.
$kendo-chip-solid-border	Color	`$kendo-button-border`	`rgba(0, 0, 0, 0.08)`
Description The base border color of solid chip.
$kendo-chip-solid-shadow	List	`0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The base shadow of solid chip.
$kendo-chip-solid-gradient	List	`$kendo-button-gradient`	`rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)`
Description The base gradient of solid chip.
$kendo-chip-solid-focus-bg	Null	`null`	`null`
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	`$kendo-button-hover-bg`	`#ebebeb`
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	`$kendo-button-active-bg`	`#d8d8d8`
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	`$kendo-component-bg`	`#ffffff`
Description The base background color of outline chip.
$kendo-chip-outline-text	Color	`$kendo-chip-solid-text`	`#424242`
Description The base text color of outline chip.
$kendo-chip-outline-border	Color	`$kendo-chip-outline-text`	`#424242`
Description The base border color of outline chip.
$kendo-chip-outline-shadow	List	`0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The base shadow of outline chip.
$kendo-chip-outline-hover-bg	Color	`$kendo-chip-outline-text`	`#424242`
Description The base background color of hovered outline chip.
$kendo-chip-outline-hover-text	Color	`k-contrast-legacy( $kendo-chip-outline-hover-bg )`	`white`
Description The base text color of hovered outline chip.
$kendo-chip-outline-selected-bg	Color	`$kendo-chip-outline-hover-bg`	`#424242`
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: k-map-get( $kendo-spacing, 1 ), md: k-map-get( $kendo-spacing, 1 ), lg: k-map-get( $kendo-spacing, 1 ) )`	`(sm: 4px, md: 4px, lg: 4px)`
Description The sizes of the chip list.

Color System

Name	Type	Default value	Computed value
$kendo-color-primary	Color	`#ff6358`	`#ff6358`
Description The color that focuses the user attention. Used for primary buttons and for elements of primary importance across the theme.
$kendo-color-primary-contrast	Color	`k-contrast-legacy( $kendo-color-primary )`	`white`
Description The color used along with the primary color denoted by $kendo-color-primary. Used to provide contrast between the background and foreground colors.
$kendo-color-secondary	Color	`#666666`	`#666666`
Description The secondary color of the theme.
$kendo-color-secondary-contrast	Color	`k-contrast-legacy( $kendo-color-secondary )`	`white`
Description The color used along with the secondary color denoted by $kendo-color-secondary. Used to provide contrast between the background and foreground colors.
$kendo-color-tertiary	Color	`#03a9f4`	`#03a9f4`
Description The tertiary color of the theme.
$kendo-color-tertiary-contrast	Color	`k-contrast-legacy( $kendo-color-tertiary )`	`white`
Description The color used along with the tertiary color denoted by $kendo-color-tertiary. Used to provide contrast between the background and foreground colors.
$kendo-color-info	Color	`#0058e9`	`#0058e9`
Description The color for informational messages and states.
$kendo-color-success	Color	`#37b400`	`#37b400`
Description The color for success messages and states.
$kendo-color-warning	Color	`#ffc000`	`#ffc000`
Description The color for warning messages and states.
$kendo-color-error	Color	`#f31700`	`#f31700`
Description The color for error messages and states.
$kendo-color-dark	Color	`#424242`	`#424242`
Description The dark color of the theme.
$kendo-color-light	Color	`#ebebeb`	`#ebebeb`
Description The light color of the theme.
$kendo-color-inverse	Color	`if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )`	`#424242`
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
$kendo-component-bg	Color	`$kendo-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. `$kendo-grid-bg: $kendo-component-bg !default;`.
$kendo-component-text	Color	`$kendo-body-text`	`#424242`
Description Text color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
$kendo-component-border	Color	`rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )`	`rgba(0, 0, 0, 0.08)`
Description Border color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
$kendo-component-header-bg	Color	`$kendo-base-bg`	`#fafafa`
Description Background color of the component header.
$kendo-component-header-text	Color	`$kendo-base-text`	`#424242`
Description Text color of the component header.
$kendo-component-header-border	Color	`$kendo-base-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of the component header.
$kendo-component-header-gradient	Null	`null`	`null`
Description Gradient of the component header.
$kendo-invalid-bg	Null	`null`	`null`
Description Background color of the invalid items.
$kendo-invalid-text	Color	`$kendo-color-error`	`#f31700`
Description Text color of the invalid items.
$kendo-invalid-border	Color	`$kendo-color-error`	`#f31700`
Description Border color of the invalid items.
$kendo-invalid-shadow	Null	`null`	`null`
Description Shadow of the invalid items.

Dialog

Name	Type	Default value	Computed value
$kendo-dialog-theme-colors	Map	`( "primary": k-map-get($kendo-theme-colors, "primary"), "light": k-map-get($kendo-theme-colors, "light"), "dark": k-map-get($kendo-theme-colors, "dark") )`	`("primary": #ff6358, "light": #ebebeb, "dark": #424242)`
Description Theme colors map for the dialog.

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-md`	`4px`
Description Border radius of the FAB.
$kendo-fab-font-family	String	`$kendo-font-family`	`inherit`
Description Font family of the FAB.
$kendo-fab-font-size	Number	`$kendo-font-size-md`	`14px`
Description Font size of the FAB.
$kendo-fab-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description Line height of the FAB.
$kendo-fab-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description Horizontal padding of the FAB.
$kendo-fab-padding-y	Number	`$kendo-fab-padding-x`	`16px`
Description Vertical padding of the FAB.
$kendo-fab-icon-width	Number	`20px`	`20px`
Description FAB icon width.
$kendo-fab-icon-height	Number	`$kendo-fab-icon-width`	`20px`
Description FAB icon height.
$kendo-fab-icon-spacing	Number	`k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description FAB icon spacing.
$kendo-fab-items-padding-x	Number	`0px`	`0px`
Description FAB items horizontal padding.
$kendo-fab-items-padding-y	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description FAB items vertical padding.
$kendo-fab-item-text-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description FAB item text horizontal padding.
$kendo-fab-item-text-padding-y	Number	`$kendo-fab-item-text-padding-x`	`4px`
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	`2px`	`2px`
Description Border radius of the FAB item text.
$kendo-fab-item-text-font-size	Number	`$kendo-font-size-xs`	`10px`
Description Font size of the FAB item text.
$kendo-fab-item-text-line-height	Number	`1.2`	`1.2`
Description Line height of the FAB item text.
$kendo-fab-item-icon-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description FAB item icon horizontal padding.
$kendo-fab-item-icon-padding-y	Number	`$kendo-fab-item-icon-padding-x`	`8px`
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	`20px`	`20px`
Description Width of the FAB item icon.
$kendo-fab-item-icon-height	Number	`$kendo-fab-item-icon-width`	`20px`
Description Height of the FAB item icon.
$kendo-fab-theme-colors	Map	`$kendo-theme-colors`	`("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "inverse": #424242)`
Description Theme colors map for the FAB.
$kendo-fab-shadow	List	`0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2)`	`0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.2)`
Description The base shadow of the FAB.
$kendo-fab-disabled-shadow	List	`0 6px 10px k-try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px k-try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px k-try-tint( rgba(0, 0, 0, .2), .5 )`	`0 6px 10px rgba(91, 91, 91, 0.1744), 0 1px 18px rgba(101, 101, 101, 0.1552), 0 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	`$kendo-component-text`	`#424242`
Description The base text color of the FAB item.
$kendo-fab-item-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The base background color of the FAB item.
$kendo-fab-item-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The base border color of the FAB item.
$kendo-fab-item-icon-text	Color	`$kendo-button-text`	`#424242`
Description The base text color of the FAB item icon.
$kendo-fab-item-icon-bg	Color	`$kendo-button-bg`	`#f5f5f5`
Description The base background color of the FAB item icon.
$kendo-fab-item-icon-border	Color	`$kendo-button-border`	`rgba(0, 0, 0, 0.08)`
Description The base border color of the FAB item icon.
$kendo-fab-item-shadow	List	`$kendo-fab-shadow`	`0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12), 0 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`	`0 6px 10px rgba(91, 91, 91, 0.1744), 0 1px 18px rgba(101, 101, 101, 0.1552), 0 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
$kendo-grid-padding-x	Number	`$kendo-table-md-cell-padding-x`	`12px`
Description Horizontal padding of the grid.
$kendo-grid-padding-y	Number	`$kendo-table-md-cell-padding-y`	`8px`
Description Vertical padding of the grid.
$kendo-grid-header-padding-x	Number	`$kendo-grid-padding-x`	`12px`
Description Horizontal padding of the grid header.
$kendo-grid-header-padding-y	Number	`$kendo-grid-padding-y`	`8px`
Description Vertical padding of the grid header.
$kendo-grid-grouping-header-padding-x	Number	`$kendo-grid-padding-y`	`8px`
Description Horizontal padding of the grid grouping header.
$kendo-grid-grouping-header-padding-y	Number	`$kendo-grid-grouping-header-padding-x`	`8px`
Description Vertical padding of the grid grouping header.
$kendo-grid-cell-padding-x	Number	`$kendo-grid-padding-x`	`12px`
Description Horizontal padding of the grid cell.
$kendo-grid-cell-padding-y	Number	`$kendo-grid-padding-y`	`8px`
Description Vertical padding of the grid cell.
$kendo-grid-filter-cell-padding-x	Number	`$kendo-grid-padding-y`	`8px`
Description Horizontal padding of the grid filter cell.
$kendo-grid-filter-cell-padding-y	Number	`$kendo-grid-filter-cell-padding-x`	`8px`
Description Vertical padding of the grid filter cell.
$kendo-grid-edit-cell-padding-x	Number	`$kendo-grid-cell-padding-x`	`12px`
Description Horizontal padding of the grid edit cell.
$kendo-grid-edit-cell-padding-y	Number	`3px`	`3px`
Description Vertical padding of the grid filter cell.
$kendo-grid-bg	Color	`$kendo-table-bg`	`#ffffff`
Description Background color of the grid component
$kendo-grid-text	Color	`$kendo-table-text`	`#424242`
Description Text color of the grid component
$kendo-grid-border	Color	`$kendo-table-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of the grid component
$kendo-grid-header-bg	Color	`$kendo-table-header-bg`	`#fafafa`
Description Background color of grid header
$kendo-grid-header-text	Color	`$kendo-table-header-text`	`#424242`
Description Text color of grid header
$kendo-grid-header-border	Color	`$kendo-table-header-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of grid header
$kendo-grid-header-gradient	Null	`$kendo-table-header-gradient`	`null`
Description Background gradient of grid header
$kendo-grid-footer-bg	Color	`$kendo-grid-header-bg`	`#fafafa`
Description Background color of grid footer
$kendo-grid-footer-text	Color	`$kendo-grid-header-text`	`#424242`
Description Text color of grid footer
$kendo-grid-footer-border	Color	`$kendo-grid-header-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of grid footer
$kendo-grid-alt-bg	Color	`$kendo-table-alt-row-bg`	`rgba(0, 0, 0, 0.04)`
Description Background color of alternating rows in grid
$kendo-grid-alt-text	Null	`$kendo-table-alt-row-text`	`null`
Description Text color of alternating rows in grid
$kendo-grid-alt-border	Null	`$kendo-table-alt-row-border`	`null`
Description Border color of alternating rows in grid
$kendo-grid-hover-bg	Color	`$kendo-table-hover-bg`	`#ededed`
Description Background color of hovered rows in grid
$kendo-grid-hover-text	Null	`$kendo-table-hover-text`	`null`
Description Text color of hovered rows in grid
$kendo-grid-hover-border	Null	`$kendo-table-hover-border`	`null`
Description Border color of hovered rows in grid
$kendo-grid-selected-bg	Color	`$kendo-table-selected-bg`	`rgba(255, 99, 88, 0.25)`
Description Background color of selected rows in grid
$kendo-grid-selected-text	Null	`$kendo-table-selected-text`	`null`
Description Text color of selected rows in grid
$kendo-grid-selected-border	Null	`$kendo-table-selected-border`	`null`
Description Border color of selected rows in grid

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	`1px`	`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	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Horizontal padding of input components.
$kendo-input-sm-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Horizontal padding of small input components.
$kendo-input-md-padding-x	Number	`$kendo-input-padding-x`	`8px`
Description Horizontal padding of medium input components.
$kendo-input-lg-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Horizontal padding of large input components.
$kendo-input-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description Vertical padding of input components.
$kendo-input-sm-padding-y	Number	`k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description Vertical padding of small input components.
$kendo-input-md-padding-y	Number	`$kendo-input-padding-y`	`4px`
Description Vertical padding of medium input components.
$kendo-input-lg-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Vertical padding of large input components.
$kendo-input-font-family	String	`$kendo-font-family`	`inherit`
Description Font family of input components.
$kendo-input-font-size	Number	`$kendo-font-size-md`	`14px`
Description Font size of input components.
$kendo-input-sm-font-size	Number	`$kendo-font-size-md`	`14px`
Description Font size of small input components.
$kendo-input-md-font-size	Number	`$kendo-input-font-size`	`14px`
Description Font size of medium input components.
$kendo-input-lg-font-size	Number	`$kendo-font-size-lg`	`16px`
Description Font size of large input components.
$kendo-input-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description Line height of input components.
$kendo-input-sm-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description Line height of small input components.
$kendo-input-md-line-height	Number	`$kendo-input-line-height`	`1.4285714286`
Description Line height of medium input components.
$kendo-input-lg-line-height	Number	`$kendo-line-height-lg`	`1.5`
Description Line height of large input components.
$kendo-input-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of input components.
$kendo-input-text	Color	`$kendo-component-text`	`#424242`
Description The text color of input components.
$kendo-input-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of input components.
$kendo-input-shadow	Null	`null`	`null`
Description The shadow of input components.
$kendo-input-hover-bg	Null	`null`	`null`
Description The background color of hovered input components.
$kendo-input-hover-text	Null	`null`	`null`
Description The text color of hovered input components.
$kendo-input-hover-border	Color	`rgba( $kendo-input-border, .16 )`	`rgba(0, 0, 0, 0.16)`
Description The border color of hovered input components.
$kendo-input-hover-shadow	Null	`null`	`null`
Description The shadow of hovered input components.
$kendo-input-focus-bg	Null	`null`	`null`
Description The background color of focused input components.
$kendo-input-focus-text	Null	`null`	`null`
Description The text color of focused input components.
$kendo-input-focus-border	Color	`$kendo-input-hover-border`	`rgba(0, 0, 0, 0.16)`
Description The border color of focused input components.
$kendo-input-focus-shadow	List	`0 0 0 2px rgba( $kendo-input-focus-border, .08 )`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The shadow of focused input components.
$kendo-input-selected-bg	Null	`null`	`null`
Description The background color of selected input components.
$kendo-input-selected-text	Null	`null`	`null`
Description The text color of selected input components.
$kendo-input-disabled-bg	Null	`null`	`null`
Description The background color of disabled input components.
$kendo-input-disabled-text	Null	`null`	`null`
Description The text color of disabled input components.
$kendo-input-disabled-border	Null	`null`	`null`
Description The border color of disabled input components.
$kendo-input-disabled-gradient	Null	`null`	`null`
Description The gradient of disabled input components.
$kendo-input-disabled-shadow	Null	`null`	`null`
Description The shadow of disabled input components.
$kendo-input-outline-bg	Null	`null`	`null`
Description The background color of outline input components.
$kendo-input-outline-text	Color	`$kendo-input-text`	`#424242`
Description The text color of outline input components.
$kendo-input-outline-border	Color	`rgba( $kendo-button-text, .5)`	`rgba(66, 66, 66, 0.5)`
Description The border color of outline input components.
$kendo-input-outline-hover-bg	Null	`null`	`null`
Description The background color of outline hovered input components.
$kendo-input-outline-hover-text	Null	`null`	`null`
Description The text color of outline hovered input components.
$kendo-input-outline-hover-border	Color	`rgba( $kendo-button-text, .8)`	`rgba(66, 66, 66, 0.8)`
Description The border color of outline hovered input components.
$kendo-input-outline-focus-bg	Null	`null`	`null`
Description The background color of outline focused input components.
$kendo-input-outline-focus-text	Null	`null`	`null`
Description The text color of outline focused input components.
$kendo-input-outline-focus-border	Null	`null`	`null`
Description The border color of outline focused input components.
$kendo-input-outline-focus-shadow	List	`$kendo-input-focus-shadow`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The shadow of outline focused input components.
$kendo-input-flat-bg	Null	`null`	`null`
Description The background color of flat input components.
$kendo-input-flat-text	Color	`$kendo-input-text`	`#424242`
Description The text color of flat input components.
$kendo-input-flat-border	Color	`$kendo-input-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of flat input components.
$kendo-input-flat-hover-bg	Null	`null`	`null`
Description The background color of flat hovered input components.
$kendo-input-flat-hover-text	Null	`null`	`null`
Description The text color of flat hovered input components.
$kendo-input-flat-hover-border	Color	`$kendo-input-hover-border`	`rgba(0, 0, 0, 0.16)`
Description The border color of flat hovered input components.
$kendo-input-flat-focus-bg	Null	`null`	`null`
Description The background color of flat focused input components.
$kendo-input-flat-focus-text	Null	`null`	`null`
Description The text color of flat focused input components.
$kendo-input-flat-focus-border	Null	`null`	`null`
Description The border color of flat focused input components.
$kendo-input-flat-focus-shadow	List	`$kendo-input-focus-shadow`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The shadow of flat focused input components.
$kendo-input-placeholder-text	Color	`$kendo-subtle-text`	`#666666`
Description The text color of the input placeholder.
$kendo-input-placeholder-opacity	Number	`1`	`1`
Description The opacity of the input placeholder.
$kendo-input-clear-value-text	Null	`null`	`null`
Description The color of the input clear value icon.
$kendo-input-clear-value-opacity	Number	`.5`	`0.5`
Description The opacity of the input clear value icon.
$kendo-input-clear-value-hover-text	Null	`null`	`null`
Description The color of the hovered input clear value icon.
$kendo-input-clear-value-hover-opacity	Number	`1`	`1`
Description The opacity of the hovered input clear value icon.
$kendo-input-values-margin-y	Number	`k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description The vertical margin of the clear value icon.
$kendo-input-values-margin-x	Number	`$kendo-input-values-margin-y`	`2px`
Description The horizontal margin of the clear value icon.
$kendo-input-button-width	Calculation	`$kendo-button-inner-calc-size`	`calc( 1.4285714286em + 8px )`
Description Width of the input button.
$kendo-input-button-border-width	Number	`1px`	`1px`
Description Border width of the input button.
$kendo-input-spinner-width	Calculation	`$kendo-button-inner-calc-size`	`calc( 1.4285714286em + 8px )`
Description Width of the input spinner button.
$kendo-input-spinner-icon-offset	Null	`null`	`null`
Description Icon offset of the input spinner button.
$kendo-input-separator-color	Color	`$kendo-input-text`	`#424242`
Description Color of the input separator.
$kendo-input-separator-opacity	Number	`.5`	`0.5`
Description Opacity of the input separator.
$kendo-input-invalid-border	Color	`$kendo-invalid-border`	`#f31700`
Description Border color of the invalid input components.
$kendo-input-invalid-shadow	Null	`$kendo-invalid-shadow`	`null`
Description Shadow of the invalid 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	Null	`null`	`null`
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	Null	`null`	`null`
Description Font weight of list group item.
$kendo-list-bg	Color	`$kendo-component-bg`	`#ffffff`
Description Background color of the list component.
$kendo-list-text	Color	`$kendo-component-text`	`#424242`
Description Text color of the list component.
$kendo-list-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
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	List	`0 5px 10px 0 rgba(0, 0, 0, .06)`	`0 5px 10px 0 rgba(0, 0, 0, 0.06)`
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	`$kendo-hover-bg`	`#f0f0f0`
Description Background color of hovered list items.
$kendo-list-item-hover-text	Color	`$kendo-hover-text`	`#424242`
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 2px rgba(0, 0, 0, .12)`	`inset 0 0 0 2px rgba(0, 0, 0, 0.12)`
Description Box shadow of focused list items.
$kendo-list-item-selected-bg	Color	`$kendo-selected-bg`	`#ff6358`
Description Background color of selected list items.
$kendo-list-item-selected-text	Color	`$kendo-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	`$kendo-subtle-text`	`#666666`
Description Text color of the 'No Data' text.

Listbox

Name	Type	Default value	Computed value
$kendo-listbox-spacing	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Margin between the listbox elements.
$kendo-listbox-button-spacing	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Margin between the listbox buttons.
$kendo-listbox-width	Number	`10em`	`10em`
Description Width of the listbox.
$kendo-listbox-default-height	Number	`200px`	`200px`
Description Height of the listbox.
$kendo-listbox-border-width	Number	`1px`	`1px`
Description Width of the border around the listbox.
$kendo-listbox-font-family	String	`$kendo-font-family`	`inherit`
Description Font family of the listbox.
$kendo-listbox-font-size	Number	`$kendo-font-size-md`	`14px`
Description Font size of the listbox.
$kendo-listbox-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description Line height of the listbox.
$kendo-listbox-bg	Color	`$kendo-component-bg`	`#ffffff`
Description Background color of the listbox.
$kendo-listbox-text	Color	`$kendo-component-text`	`#424242`
Description Text color of the listbox.
$kendo-listbox-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of the listbox.
$kendo-listbox-item-padding-x	Null	`null`	`null`
Description Inline item padding of the listbox.
$kendo-listbox-item-padding-y	Null	`null`	`null`
Description Block item padding of the listbox.
$kendo-listbox-drop-hint-border-width	Null	`null`	`null`
Description Width of the border around the drop hint.
$kendo-listbox-drop-hint-width	Number	`1px`	`1px`
Description Width of the drop hint.

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	`$kendo-popup-border-width`	`1px`
Description Width of the border around the menu popup.
$kendo-menu-popup-font-size	Number	`$kendo-font-size-md`	`14px`
Description Font sizes of the menu popup.
$kendo-menu-popup-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description Line heights used along with $kendo-font-size.
$kendo-menu-popup-bg	Color	`$kendo-popup-bg`	`#ffffff`
Description The background of the menu popup.
$kendo-menu-popup-text	Color	`$kendo-popup-text`	`#424242`
Description The text color of the menu popup.
$kendo-menu-popup-border	Color	`$kendo-popup-border`	`rgba(0, 0, 0, 0.08)`
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	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Horizontal padding of the menu item in popup.
$kendo-menu-popup-item-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description Vertical padding of the menu item in popup.
$kendo-menu-popup-item-padding-end	Calculation	`calc( #{$kendo-menu-popup-item-padding-x * 2} + #{$kendo-icon-size} )`	`calc( 16px + 16px )`
Description The end padding of the menu item in popup.
$kendo-menu-popup-sm-item-icon-margin-start	Number	`$kendo-menu-popup-sm-item-padding-x`	`8px`
Description The start margin of the menu item expand icon.
$kendo-menu-popup-sm-item-icon-margin-end	Calculation	`calc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )`	`calc(-1 * (calc( 16px + 16px ) - 4px))`
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`	`#f0f0f0`
Description The background of hovered menu item in popup.
$kendo-menu-popup-item-hover-text	Color	`$kendo-list-item-hover-text`	`#424242`
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`	`#ff6358`
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	`$kendo-menu-item-focus-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.12)`
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`	`4px`
Description Horizontal padding of the arrow button.

Notification

Name	Type	Default value	Computed value
$kendo-notification-padding-x	Number	`8px`	`8px`
Description Vertical padding of the notification container.
$kendo-notification-padding-y	Number	`4px`	`4px`
Description Horizontal padding of the notification.
$kendo-notification-border-width	Number	`1px`	`1px`
Description Width of the border around the notification.
$kendo-notification-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description Border radius of the notification.
$kendo-notification-shadow	List	`$kendo-popup-shadow`	`0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04)`
Description Box shadow of the notification.
$kendo-notification-font-family	String	`$kendo-font-family`	`inherit`
Description Font family of the notification.
$kendo-notification-font-size	Number	`$kendo-font-size-sm`	`12px`
Description Font size of the notification.
$kendo-notification-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description Line height of the notification.
$kendo-notification-icon-spacing	Number	`$kendo-icon-spacing`	`4px`
Description Horizontal spacing of the notification icon.
$kendo-notification-bg	Color	`$kendo-component-bg`	`#ffffff`
Description Background color of the notification.
$kendo-notification-text	Color	`$kendo-component-text`	`#424242`
Description Text color of the notification.
$kendo-notification-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of the notification.
$kendo-notification-theme-colors	Map	`$kendo-theme-colors`	`("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "inverse": #424242)`
Description Theme colors of the notification.

Name	Type	Default value	Computed value
$kendo-pager-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Horizontal padding of the pager according to the pager size.
$kendo-pager-padding-y	Number	`$kendo-pager-padding-x`	`8px`
Description Vertical padding of the pager according to the pager size.
$kendo-pager-sm-item-min-width	Calculation	`$kendo-button-sm-calc-size`	`calc( 1.4285714286em + 4px + 2px )`
Description Minimum width of the pager items according to the pager size.
$kendo-pager-sm-item-group-spacing	Number	`k-map-get( $kendo-spacing, 3 )`	`12px`
Description Margin between pager item groups according to the pager size.
$kendo-pager-border-width	Number	`1px`	`1px`
Description Border width of the pager.
$kendo-pager-font-family	String	`$kendo-font-family`	`inherit`
Description Font family of the pager.
$kendo-pager-font-size	Number	`$kendo-font-size-md`	`14px`
Description Font size of the pager.
$kendo-pager-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description Line height of the pager.
$kendo-pager-bg	Color	`$kendo-component-header-bg`	`#fafafa`
Description Background color of the pager.
$kendo-pager-text	Color	`$kendo-component-header-text`	`#424242`
Description Text color of the pager.
$kendo-pager-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of the pager.
$kendo-pager-focus-bg	Null	`null`	`null`
Description Background color of the focused pager.
$kendo-pager-focus-shadow	List	`$kendo-focus-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.13)`
Description Box shadow of the focused pager.
$kendo-pager-section-spacing	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description Spacing between the pager sections.
$kendo-pager-item-border-width	Number	`0px`	`0px`
Description Border width of the pager items.
$kendo-pager-item-border-radius	Null	`null`	`null`
Description Border radius of the pager items.
$kendo-pager-item-spacing	Null	`null`	`null`
Description Spacing around the pager items.
$kendo-pager-item-bg	Null	`null`	`null`
Description Background color of the pager items.
$kendo-pager-item-text	Null	`null`	`null`
Description Text color of the pager items.
$kendo-pager-item-border	Null	`null`	`null`
Description Border color of the pager items.
$kendo-pager-item-hover-bg	Color	`$kendo-list-item-hover-bg`	`#f0f0f0`
Description Background color of the hovered pager items.
$kendo-pager-item-hover-text	Color	`$kendo-list-item-hover-text`	`#424242`
Description Text color of the hovered pager items.
$kendo-pager-item-hover-border	Null	`null`	`null`
Description Border color of the hovered pager items.
$kendo-pager-item-selected-bg	Color	`$kendo-list-item-selected-bg`	`#ff6358`
Description Background color of the selected pager items.
$kendo-pager-item-selected-text	Color	`$kendo-list-item-selected-text`	`white`
Description Text color of the selected pager items.
$kendo-pager-item-selected-border	Null	`null`	`null`
Description Border color of the selected pager items.
$kendo-pager-item-focus-opacity	Null	`null`	`null`
Description Opacity of the focused pager items.
$kendo-pager-item-focus-bg	Color	`transparent`	`transparent`
Description Background color of the focused pager items.
$kendo-pager-item-focus-shadow	List	`$kendo-list-item-focus-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.12)`
Description Box shadow of the focused pager items.
$kendo-pager-number-border-radius	Null	`null`	`null`
Description Border radius of the pager numbers.
$kendo-pager-input-width	Number	`5em`	`5em`
Description Width of the pager inputs.
$kendo-pager-sm-dropdown-width	Number	`5em`	`5em`
Description Width of the pager dropdowns according to the pager size.
$kendo-pager-sizes	Map	( sm: ( padding-x: $kendo-pager-sm-padding-x, padding-y: $kendo-pager-sm-padding-y, item-group-spacing: $kendo-pager-sm-item-group-spacing, item-min-width: $kendo-pager-sm-item-min-width, pager-dropdown-width: $kendo-pager-sm-dropdown-width ), md: ( padding-x: $kendo-pager-md-padding-x, padding-y: $kendo-pager-md-padding-y, item-group-spacing: $kendo-pager-md-item-group-spacing, item-min-width: $kendo-pager-md-item-min-width, pager-dropdown-width: $kendo-pager-md-dropdown-width ), lg: ( padding-x: $kendo-pager-lg-padding-x, padding-y: $kendo-pager-lg-padding-y, item-group-spacing: $kendo-pager-lg-item-group-spacing, item-min-width: $kendo-pager-lg-item-min-width, pager-dropdown-width: $kendo-pager-lg-dropdown-width ) )	`(sm: (padding-x: 4px, padding-y: 4px, item-group-spacing: 12px, item-min-width: calc( 1.4285714286em + 4px + 2px ), pager-dropdown-width: 5em), md: (padding-x: 8px, padding-y: 8px, item-group-spacing: 14px, item-min-width: calc( 1.4285714286em + 8px + 2px ), pager-dropdown-width: 5em), lg: (padding-x: 10px, padding-y: 10px, item-group-spacing: 16px, item-min-width: calc( 1.5em + 16px + 2px ), pager-dropdown-width: 5em))`
Description Sizes map of the pager.

Picker

Name	Type	Default value	Computed value
$kendo-picker-bg	Color	`$kendo-button-bg`	`#f5f5f5`
Description The background color of picker components.
$kendo-picker-text	Color	`$kendo-button-text`	`#424242`
Description The text color of picker components.
$kendo-picker-border	Color	`$kendo-button-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of picker components.
$kendo-picker-gradient	List	`$kendo-button-gradient`	`rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)`
Description The gradient of picker components.
$kendo-picker-shadow	Null	`$kendo-button-shadow`	`null`
Description The shadow of picker components.
$kendo-picker-hover-bg	Color	`$kendo-button-hover-bg`	`#ebebeb`
Description The background color of hovered picker components.
$kendo-picker-hover-text	Null	`$kendo-button-hover-text`	`null`
Description The text color of hovered picker components.
$kendo-picker-hover-border	Null	`$kendo-button-hover-border`	`null`
Description The border color of hovered picker components.
$kendo-picker-hover-gradient	Null	`$kendo-button-hover-gradient`	`null`
Description The gradient of hovered picker components.
$kendo-picker-hover-shadow	Null	`$kendo-button-hover-shadow`	`null`
Description The shadow of hovered picker components.
$kendo-picker-focus-bg	Null	`$kendo-button-focus-bg`	`null`
Description The background color of focused picker components.
$kendo-picker-focus-text	Null	`$kendo-button-focus-text`	`null`
Description The text color of focused picker components.
$kendo-picker-focus-border	Null	`$kendo-button-focus-border`	`null`
Description The border color of focused picker components.
$kendo-picker-focus-gradient	Null	`$kendo-button-focus-gradient`	`null`
Description The gradient of focused picker components.
$kendo-picker-focus-shadow	List	`$kendo-button-focus-shadow`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The shadow of focused picker components.
$kendo-picker-disabled-bg	Null	`null`	`null`
Description The background color of disabled picker components.
$kendo-picker-disabled-text	Null	`null`	`null`
Description The text color of disabled picker components.
$kendo-picker-disabled-border	Null	`null`	`null`
Description The border color of disabled picker components.
$kendo-picker-disabled-gradient	Null	`null`	`null`
Description The gradient of disabled picker components.
$kendo-picker-disabled-shadow	Null	`null`	`null`
Description The shadow of disabled picker components.
$kendo-picker-outline-bg	Null	`null`	`null`
Description The background color of outline picker components.
$kendo-picker-outline-text	Color	`$kendo-button-text`	`#424242`
Description The text color of outline picker components.
$kendo-picker-outline-border	Color	`rgba( $kendo-picker-outline-text, .5)`	`rgba(66, 66, 66, 0.5)`
Description The border color of outline picker components.
$kendo-picker-outline-hover-bg	Color	`$kendo-picker-outline-text`	`#424242`
Description The background color of outline hovered picker components.
$kendo-picker-outline-hover-text	Color	`k-contrast-legacy( $kendo-picker-outline-hover-bg )`	`white`
Description The text color of outline hovered picker components.
$kendo-picker-outline-hover-border	Color	`$kendo-picker-outline-hover-bg`	`#424242`
Description The border color of outline hovered picker components.
$kendo-picker-outline-focus-bg	Null	`null`	`null`
Description The background color of outline focused picker components.
$kendo-picker-outline-focus-text	Null	`null`	`null`
Description The text color of outline focused picker components.
$kendo-picker-outline-focus-border	Null	`null`	`null`
Description The border color of outline focused picker components.
$kendo-picker-outline-focus-shadow	List	`$kendo-picker-focus-shadow`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The shadow of outline focused picker components.
$kendo-picker-outline-hover-focus-bg	Null	`null`	`null`
Description The background color of outline hovered and focused picker components.
$kendo-picker-outline-hover-focus-text	Null	`null`	`null`
Description The text color of outline hovered and focused picker components.
$kendo-picker-outline-hover-focus-border	Null	`null`	`null`
Description The border color of outline hovered and focused picker components.
$kendo-picker-flat-bg	Null	`null`	`null`
Description The background color of flat picker components.
$kendo-picker-flat-text	Color	`$kendo-button-text`	`#424242`
Description The text color of flat picker components.
$kendo-picker-flat-border	Color	`$kendo-button-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of flat picker components.
$kendo-picker-flat-hover-bg	Color	`rgba( $kendo-button-text, .04 )`	`rgba(66, 66, 66, 0.04)`
Description The background color of flat hovered picker components.
$kendo-picker-flat-hover-text	Null	`null`	`null`
Description The text color of flat hovered picker components.
$kendo-picker-flat-hover-border	Color	`rgba( $kendo-button-border, .16 )`	`rgba(0, 0, 0, 0.16)`
Description The border color of flat hovered picker components.
$kendo-picker-flat-focus-bg	Null	`null`	`null`
Description The background color of flat focused picker components.
$kendo-picker-flat-focus-text	Null	`null`	`null`
Description The text color of flat focused picker components.
$kendo-picker-flat-focus-border	Null	`null`	`null`
Description The border color of flat focused picker components.
$kendo-picker-flat-focus-shadow	List	`$kendo-picker-focus-shadow`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The shadow of flat focused picker components.
$kendo-picker-flat-hover-focus-bg	Null	`null`	`null`
Description The background color of flat hovered and focused picker components.
$kendo-picker-flat-hover-focus-text	Null	`null`	`null`
Description The text color of flat hovered and focused picker components.
$kendo-picker-flat-hover-focus-border	Null	`null`	`null`
Description The border color of flat hovered and focused picker components.

Name	Type	Default value	Computed value
$kendo-popup-padding-x	Null	`null`	`null`
Description Horizontal padding of the popup.
$kendo-popup-padding-y	Null	`null`	`null`
Description Vertical padding of the popup.
$kendo-popup-border-width	Number	`1px`	`1px`
Description Width of the border around the popup.
$kendo-popup-border-radius	Null	`null`	`null`
Description Border radius of the popup.
$kendo-popup-font-size	Number	`$kendo-font-size-md`	`14px`
Description Font size of the popup.
$kendo-popup-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description Line height of the popup.
$kendo-popup-content-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Horizontal padding of the popup content.
$kendo-popup-content-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Vertical padding of the popup content.
$kendo-popup-bg	Color	`$kendo-component-bg`	`#ffffff`
Description Background color of the popup.
$kendo-popup-text	Color	`$kendo-component-text`	`#424242`
Description Text color of the popup.
$kendo-popup-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of the popup.
$kendo-popup-shadow	List	`0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04)`	`0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04)`
Description Box shadow of the popup.

Progressbar

Name	Type	Default value	Computed value
$kendo-progressbar-height	Number	`22px`	`22px`
Description Height of the progressbar.
$kendo-progressbar-horizontal-width	Number	`100%`	`100%`
Description Horizontal width of the progressbar.
$kendo-progressbar-animation-timing	List	`1s linear infinite`	`1s linear infinite`
Description Animation timing of the progressbar.
$kendo-progressbar-border-width	Number	`0px`	`0px`
Description Border width of the progressbar.
$kendo-progressbar-font-family	String	`$kendo-font-family`	`inherit`
Description Font family of the progressbar.
$kendo-progressbar-font-size	Number	`$kendo-font-size-sm`	`12px`
Description Font size of the progressbar.
$kendo-progressbar-line-height	Number	`1`	`1`
Description Line height of the progressbar.
$kendo-progressbar-bg	Color	`k-try-shade( $kendo-component-bg, 1 )`	`#ebebeb`
Description Background color of the progressbar.
$kendo-progressbar-text	Color	`$kendo-component-text`	`#424242`
Description Text color of the progressbar.
$kendo-progressbar-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of the progressbar.
$kendo-progressbar-gradient	Null	`null`	`null`
Description Background gradient of the progressbar.
$kendo-progressbar-value-bg	Color	`$kendo-color-primary`	`#ff6358`
Description Progress background color of the progressbar.
$kendo-progressbar-value-text	Color	`k-contrast-legacy( $kendo-progressbar-value-bg )`	`white`
Description Progress text color of the progressbar.
$kendo-progressbar-value-border	Color	`k-try-shade( $kendo-progressbar-value-bg )`	`#eb5b51`
Description Progress border color of the progressbar.
$kendo-progressbar-value-gradient	Null	`null`	`null`
Description Progress background gradient of the progressbar.
$kendo-progressbar-indeterminate-bg	Color	`$kendo-progressbar-bg`	`#ebebeb`
Description Background color of the indeterminate progressbar.
$kendo-progressbar-indeterminate-text	Color	`$kendo-progressbar-text`	`#424242`
Description Text color of the indeterminate progressbar.
$kendo-progressbar-indeterminate-border	Color	`$kendo-progressbar-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of the indeterminate progressbar.
$kendo-progressbar-indeterminate-gradient	Null	`null`	`null`
Description Background gradient of the indeterminate progressbar.
$kendo-progressbar-chunk-border	Color	`$kendo-body-bg`	`#ffffff`
Description Border color of the chunk progressbar.
$kendo-circular-progressbar-arc-stroke	Color	`$kendo-color-primary`	`#ff6358`
Description Arc stroke color of the circular progressbar.
$kendo-circular-progressbar-scale-stroke	Color	`$kendo-progressbar-bg`	`#ebebeb`
Description Scale stroke background color of the circular progressbar.

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-sm-size	Number	`k-map-get( $kendo-spacing, 3 )`	`12px`
Description Size of a small radio button.
$kendo-radio-md-size	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description Size of a medium radio button.
$kendo-radio-lg-size	Number	`k-map-get( $kendo-spacing, 5 )`	`20px`
Description Size of a large radio button.
$kendo-radio-sm-glyph-size	Number	`k-map-get( $kendo-spacing, 2.5 )`	`10px`
Description Glyph size of a small radio button.
$kendo-radio-md-glyph-size	Number	`k-map-get( $kendo-spacing, 3.5 )`	`14px`
Description Glyph size of a medium radio button.
$kendo-radio-lg-glyph-size	Number	`k-map-get( $kendo-spacing, 4.5 )`	`18px`
Description Glyph size of a large radio button.
$kendo-radio-sm-ripple-size	Number	`300%`	`300%`
Description Ripple size of a small radio button.
$kendo-radio-md-ripple-size	Number	`300%`	`300%`
Description Ripple size of a medium radio button.
$kendo-radio-lg-ripple-size	Number	`300%`	`300%`
Description Ripple size of a large 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`	`rgba(0, 0, 0, 0.08)`
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`	`#ff6358`
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`	`#ff6358`
Description Border color of checked radio button.
$kendo-radio-focus-border	Null	`$kendo-checkbox-focus-border`	`null`
Description Border color of focused radio button.
$kendo-radio-focus-shadow	List	`$kendo-checkbox-focus-shadow`	`0 0 0 2px rgba(0, 0, 0, 0.06)`
Description Box shadow of focused radio button.
$kendo-radio-focus-checked-border	Null	`$kendo-checkbox-focus-checked-border`	`null`
Description Border color of focused and checked radio button.
$kendo-radio-focus-checked-shadow	List	`$kendo-checkbox-focus-checked-shadow`	`0 0 0 2px rgba(255, 99, 88, 0.3)`
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`	`#f31700`
Description Color of invalid radio button.
$kendo-radio-invalid-border	Color	`$kendo-checkbox-invalid-border`	`#f31700`
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	`k-escape-svg( url("data:image/svg+xml,") )`	`url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' 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	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal margin of the radio button inside of a label.
$kendo-radio-list-spacing	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The horizontal list item margin of radio button.
$kendo-radio-list-item-padding-x	Number	`0px`	`0px`
Description The horizontal list item padding of radio button.
$kendo-radio-list-item-padding-y	Number	`$kendo-list-md-item-padding-y`	`4px`
Description The vertical list item padding of radio button.
$kendo-radio-ripple-bg	Color	`$kendo-radio-checked-bg`	`#ff6358`
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 2px rgba(0, 0, 0, 0.08)`
Description Focus shadow of the split button.
$kendo-split-button-arrow-padding-x	Number	`$kendo-button-padding-y`	`4px`
Description Horizontal padding of the arrow button.
$kendo-split-button-sm-arrow-padding-x	Number	`$kendo-button-sm-padding-y`	`2px`
Description Horizontal padding of the small arrow button.
$kendo-split-button-md-arrow-padding-x	Number	`$kendo-button-md-padding-y`	`4px`
Description Horizontal padding of the medium arrow button.
$kendo-split-button-lg-arrow-padding-x	Number	`$kendo-button-lg-padding-y`	`8px`
Description Horizontal padding of the large arrow button.
$kendo-split-button-arrow-padding-y	Number	`$kendo-button-padding-y`	`4px`
Description Vertical padding of the arrow button.
$kendo-split-button-sm-arrow-padding-y	Number	`$kendo-button-sm-padding-y`	`2px`
Description Vertical padding of the small arrow button.
$kendo-split-button-md-arrow-padding-y	Number	`$kendo-button-md-padding-y`	`4px`
Description Vertical padding of the medium arrow button.
$kendo-split-button-lg-arrow-padding-y	Number	`$kendo-button-lg-padding-y`	`8px`
Description Vertical padding of the large 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	Number	`1px`	`1px`
Description Border width of the switch thumb.
$kendo-switch-label-text-transform	String	`uppercase`	`uppercase`
Description Text transform of the switch label.
$kendo-switch-label-display	String	`inline`	`inline`
Description Display of the switch label.
$kendo-switch-sizes	Map	`( sm: ( font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px ), md: ( font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px ), lg: ( font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px ) )`	`(sm: (font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px), md: (font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px), lg: (font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px))`
Description Map with the different switch sizes.
$kendo-switch-off-track-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background of the track when the switch is not checked.
$kendo-switch-off-track-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the track when the switch is not checked.
$kendo-switch-off-track-border	Color	`k-try-shade( $kendo-switch-off-track-bg, 8% )`	`#ebebeb`
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	Null	`null`	`null`
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	`2px solid rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 )`	`2px solid rgba(0, 0, 0, 0.08)`
Description The ring around the track when the focused switch is not checked.
$kendo-switch-off-track-disabled-bg	Null	`null`	`null`
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	`$kendo-base-bg`	`#fafafa`
Description The background of the thumb when the switch is not checked.
$kendo-switch-off-thumb-text	Color	`$kendo-base-text`	`#424242`
Description The text color of the thumb when the switch is not checked.
$kendo-switch-off-thumb-border	Color	`$kendo-base-border`	`rgba(0, 0, 0, 0.08)`
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	`$kendo-color-primary`	`#ff6358`
Description The background of the track when the switch is checked.
$kendo-switch-on-track-text	Color	`k-contrast-legacy( $kendo-switch-on-track-bg )`	`white`
Description The text color of the track when the switch is checked.
$kendo-switch-on-track-border	Color	`$kendo-switch-on-track-bg`	`#ff6358`
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	`2px solid rgba( $kendo-switch-on-track-border, .25 )`	`2px solid rgba(255, 99, 88, 0.25)`
Description The ring around the track when the focused switch is checked.
$kendo-switch-on-track-disabled-bg	Null	`null`	`null`
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	`$kendo-base-bg`	`#fafafa`
Description The background of the thumb when the switch is checked.
$kendo-switch-on-thumb-text	Color	`$kendo-base-text`	`#424242`
Description The text color of the thumb when the switch is checked.
$kendo-switch-on-thumb-border	Color	`$kendo-base-border`	`rgba(0, 0, 0, 0.08)`
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	`1px`	`1px`
Description The width of vertical border of table cells.
$kendo-table-cell-horizontal-border-width	Number	`0px`	`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: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-sm-cell-padding-x, cell-padding-y: $kendo-table-sm-cell-padding-y ), md: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-md-cell-padding-x, cell-padding-y: $kendo-table-md-cell-padding-y ), lg: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-lg-cell-padding-x, cell-padding-y: $kendo-table-lg-cell-padding-y ) )	`(sm: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 4px), md: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 12px, cell-padding-y: 8px), lg: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 10px))`
Description The sizes of the table.
$kendo-table-bg	Color	`$kendo-component-bg`	`#ffffff`
Description Background color of tables.
$kendo-table-text	Color	`$kendo-component-text`	`#424242`
Description Text color of tables.
$kendo-table-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of tables.
$kendo-table-header-bg	Color	`$kendo-component-header-bg`	`#fafafa`
Description Background color of table headers.
$kendo-table-header-text	Color	`$kendo-component-header-text`	`#424242`
Description Text color of table headers.
$kendo-table-header-border	Color	`$kendo-component-header-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of table headers.
$kendo-table-header-gradient	Null	`$kendo-component-header-gradient`	`null`
Description Gradient of table headers.
$kendo-table-footer-bg	Color	`$kendo-table-header-bg`	`#fafafa`
Description Background color of table footers.
$kendo-table-footer-text	Color	`$kendo-table-header-text`	`#424242`
Description Text color of table footers.
$kendo-table-footer-border	Color	`$kendo-table-header-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of table footers.
$kendo-table-group-row-bg	Color	`$kendo-table-header-bg`	`#fafafa`
Description Background color of group rows in table.
$kendo-table-group-row-text	Color	`$kendo-table-header-text`	`#424242`
Description Text color of group rows in table.
$kendo-table-group-row-border	Color	`$kendo-table-header-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of group rows in table.
$kendo-table-alt-row-bg	Color	`rgba( k-contrast-legacy( $kendo-table-bg ), .04 )`	`rgba(0, 0, 0, 0.04)`
Description Background color of alternating rows in table.
$kendo-table-alt-row-text	Null	`null`	`null`
Description Text color of alternating rows in table.
$kendo-table-alt-row-border	Null	`null`	`null`
Description Border color of alternating rows in table.
$kendo-table-hover-bg	Color	`k-color-darken($kendo-table-bg, 7%)`	`#ededed`
Description Background color of hovered rows in table.
$kendo-table-hover-text	Null	`null`	`null`
Description Text color of hovered rows in table.
$kendo-table-hover-border	Null	`null`	`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	`$kendo-list-item-focus-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.12)`
Description Box shadow of focused rows in table.
$kendo-table-selected-bg	Color	`rgba($kendo-selected-bg, .25)`	`rgba(255, 99, 88, 0.25)`
Description Background color of selected rows in table.
$kendo-table-selected-text	Null	`null`	`null`
Description Text color of selected rows in table.
$kendo-table-selected-border	Null	`null`	`null`
Description Border color of selected rows in table.

Tabstrip

Name	Type	Default value	Computed value
$kendo-tabstrip-bg	Null	`null`	`null`
Description Background color of tabstrip component
$kendo-tabstrip-text	Color	`$kendo-component-text`	`#424242`
Description Text color of tabstrip component
$kendo-tabstrip-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of tabstrip component
$kendo-tabstrip-item-padding-x	Number	`k-map-get( $kendo-spacing, 3 )`	`12px`
Description Horizontal padding of tabs
$kendo-tabstrip-item-padding-y	Number	`k-map-get( $kendo-spacing, 1.5 )`	`6px`
Description Vertical padding of tabs
$kendo-tabstrip-item-border-width	Number	`1px`	`1px`
Description Width of border around tabs
$kendo-tabstrip-item-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description Border radius of tabs
$kendo-tabstrip-item-gap	Number	`0`	`0`
Description Spacing between tabs
$kendo-tabstrip-item-bg	Null	`null`	`null`
Description Background color of tabs
$kendo-tabstrip-item-text	Color	`$kendo-link-text`	`#ff6358`
Description Text color of tabs
$kendo-tabstrip-item-border	Null	`null`	`null`
Description Border color of tabs
$kendo-tabstrip-item-gradient	Null	`null`	`null`
Description Background gradient of tabs
$kendo-tabstrip-item-hover-bg	Null	`null`	`null`
Description Background color of hovered tabs
$kendo-tabstrip-item-hover-text	Color	`$kendo-link-hover-text`	`#d6534a`
Description Text color of hovered tabs
$kendo-tabstrip-item-hover-border	Null	`null`	`null`
Description Border color of hovered tabs
$kendo-tabstrip-item-hover-gradient	Null	`null`	`null`
Description Background gradient of hovered tabs
$kendo-tabstrip-item-selected-bg	Color	`$kendo-component-bg`	`#ffffff`
Description Background color of selected tabs
$kendo-tabstrip-item-selected-text	Color	`$kendo-component-text`	`#424242`
Description Text color of selected tabs
$kendo-tabstrip-item-selected-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of selected tabs
$kendo-tabstrip-item-selected-gradient	Null	`null`	`null`
Description Background gradient of selected tabs
$kendo-tabstrip-content-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description Horizontal padding of tabstrip content
$kendo-tabstrip-content-padding-y	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description Vertical padding of tabstrip content
$kendo-tabstrip-content-border-width	Number	`1px`	`1px`
Description Width of border around tabstrip content
$kendo-tabstrip-content-bg	Color	`$kendo-component-bg`	`#ffffff`
Description Background color of tabstrip content
$kendo-tabstrip-content-text	Color	`$kendo-component-text`	`#424242`
Description Text color of tabstrip content
$kendo-tabstrip-content-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of tabstrip content
$kendo-tabstrip-content-focus-border	Color	`$kendo-component-text`	`#424242`
Description Border color of tabstrip focused content

Name	Type	Default value	Computed value
$kendo-toolbar-padding-x	Null	`null`	`null`
Description The horizontal padding of the toolbar.
$kendo-toolbar-padding-y	Null	`null`	`null`
Description The vertical padding of the toolbar.
$kendo-toolbar-spacing	Null	`null`	`null`
Description The spacing between the toolbar tools.
$kendo-toolbar-border-width	Number	`1px`	`1px`
Description Width of the border around the toolbar.
$kendo-toolbar-border-radius	Null	`null`	`null`
Description Border radius of the toolbar.
$kendo-toolbar-font-family	String	`$kendo-font-family`	`inherit`
Description Font family of the toolbar.
$kendo-toolbar-font-size	Number	`$kendo-font-size-md`	`14px`
Description Font size of the toolbar.
$kendo-toolbar-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description Line height of the toolbar.
$kendo-toolbar-bg	Color	`$kendo-base-bg`	`#fafafa`
Description Background color of the toolbar.
$kendo-toolbar-text	Color	`$kendo-base-text`	`#424242`
Description Text color of the toolbar.
$kendo-toolbar-border	Color	`$kendo-base-border`	`rgba(0, 0, 0, 0.08)`
Description Color of the border around the toolbar.
$kendo-toolbar-gradient	Null	`null`	`null`
Description Gradient of the toolbar.
$kendo-toolbar-shadow	Null	`null`	`null`
Description Box shadow of the toolbar.
$kendo-toolbar-separator-border	String	`inherit`	`inherit`
Description Color of the separator border of the toolbar.
$kendo-toolbar-input-width	Number	`10em`	`10em`
Description The width of the input in the toolbar.
$kendo-toolbar-item-shadow	List	`$kendo-button-focus-shadow`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description Box shadow of the focused toolbar item.
$kendo-toolbar-sizes	Map	`( sm: ( padding-x: $kendo-toolbar-sm-padding-x, padding-y: $kendo-toolbar-sm-padding-y, spacing: $kendo-toolbar-sm-spacing ), md: ( padding-x: $kendo-toolbar-md-padding-x, padding-y: $kendo-toolbar-md-padding-y, spacing: $kendo-toolbar-md-spacing ), lg: ( padding-x: $kendo-toolbar-lg-padding-x, padding-y: $kendo-toolbar-lg-padding-y, spacing: $kendo-toolbar-lg-spacing ) )`	`(sm: (padding-x: 4px, padding-y: 4px, spacing: 6px), md: (padding-x: 8px, padding-y: 8px, spacing: 8px), lg: (padding-x: 10px, padding-y: 10px, spacing: 10px))`
Description Sizes map for the toolbar.

Treeview

Name	Type	Default value	Computed value
$kendo-treeview-font-family	String	`$kendo-font-family`	`inherit`
Description Font family of the treeview component.
$kendo-treeview-font-size	Number	`$kendo-font-size-md`	`14px`
Description Font size of the treeview component.
$kendo-treeview-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
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	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Horizontal padding of treeview items.
$kendo-treeview-item-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
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	`$kendo-border-radius-md`	`4px`
Description Border radius of treeview items.
$kendo-treeview-sizes	Map	( sm: ( font-size: $kendo-treeview-sm-font-size, line-height: $kendo-treeview-sm-line-height, item-padding-x: $kendo-treeview-sm-item-padding-x, item-padding-y: $kendo-treeview-sm-item-padding-y ), md: ( font-size: $kendo-treeview-md-font-size, line-height: $kendo-treeview-md-line-height, item-padding-x: $kendo-treeview-md-item-padding-x, item-padding-y: $kendo-treeview-md-item-padding-y ), lg: ( font-size: $kendo-treeview-lg-font-size, line-height: $kendo-treeview-lg-line-height, item-padding-x: $kendo-treeview-lg-item-padding-x, item-padding-y: $kendo-treeview-lg-item-padding-y ) )	`(sm: (font-size: 14px, line-height: 1.4285714286, item-padding-x: 8px, item-padding-y: 2px), md: (font-size: 14px, line-height: 1.4285714286, item-padding-x: 8px, item-padding-y: 4px), lg: (font-size: 16px, line-height: 1.5, item-padding-x: 8px, item-padding-y: 8px))`
Description The sizes of the treeview.
$kendo-treeview-bg	Null	`null`	`null`
Description Background color of the treeview component.
$kendo-treeview-text	Color	`$kendo-component-text`	`#424242`
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	`$kendo-hover-bg`	`#f0f0f0`
Description Background color of hovered treeview items.
$kendo-treeview-item-hover-text	Color	`$kendo-hover-text`	`#424242`
Description Text color of hovered treeview items.
$kendo-treeview-item-hover-border	Null	`null`	`null`
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	`$kendo-selected-bg`	`#ff6358`
Description Background color of selected treeview items.
$kendo-treeview-item-selected-text	Color	`$kendo-selected-text`	`white`
Description Text color of selected treeview items.
$kendo-treeview-item-selected-border	Null	`null`	`null`
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	`$kendo-focus-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.13)`
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	`$kendo-link-text`	`#ff6358`
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	`$kendo-link-hover-text`	`#d6534a`
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	`$kendo-link-hover-text`	`#d6534a`
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(0, 0, 0, 0.13)`
Description Box shadow of a focused load more.

Typography

Name	Type	Default value	Computed value
$kendo-font-size	Number	`14px`	`14px`
Description Base font size across all components.
$kendo-font-size-xs	Number	`10px`	`10px`
Description Extra small font size across all components.
$kendo-font-size-sm	Number	`12px`	`12px`
Description Small font size across all components.
$kendo-font-size-md	Number	`$kendo-font-size`	`14px`
Description Medium font size across all components.
$kendo-font-size-lg	Number	`16px`	`16px`
Description Large font size across all components.
$kendo-font-size-xl	Number	`20px`	`20px`
Description Extra large font size across all components.
$kendo-font-family-sans-serif	List	`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"`
Description Font family for text.
$kendo-font-family-monospace	List	`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`
Description Font family for monospaced text. Used for styling the code.
$kendo-font-family	String	`inherit`	`inherit`
Description Font family across all components.
$kendo-line-height	Number	`k-math-div( 20, 14 )`	`1.4285714286`
Description Line height used along with $kendo-font-size.
$kendo-line-height-xs	Number	`1`	`1`
Description Extra small line height used along with $kendo-font-size-xs.
$kendo-line-height-sm	Number	`1.25`	`1.25`
Description Small line height used along with $kendo-font-size-sm.
$kendo-line-height-md	Number	`$kendo-line-height`	`1.4285714286`
Description Medium line height used along with $kendo-font-size-md.
$kendo-line-height-lg	Number	`1.5`	`1.5`
Description Large line height used along with $kendo-font-size-lg.
$kendo-font-weight-light	Number	`300`	`300`
Description Light font weight.
$kendo-font-weight-normal	Number	`400`	`400`
Description Normal font weight.
$kendo-font-weight-medium	Number	`500`	`500`
Description Medium font weight.
$kendo-font-weight-semibold	Number	`600`	`600`
Description Semibold font weight.
$kendo-font-weight-bold	Number	`700`	`700`
Description Bold font weight.
$kendo-letter-spacing	Null	`null`	`null`
Description Letter spacing.

Window

Name	Type	Default value	Computed value
$kendo-window-theme-colors	Map	`( "primary": k-map-get($kendo-theme-colors, "primary"), "light": k-map-get($kendo-theme-colors, "light"), "dark": k-map-get($kendo-theme-colors, "dark") )`	`("primary": #ff6358, "light": #ebebeb, "dark": #424242)`
Description Theme colors map for the window.

Customization

Variables

Common

Avatar

Badge

Button

Charts

Checkbox

Chip

Color System

Component

Dialog

Floating-action-button

Grid

Input

List

Listbox

Menu

Menu-button

Notification

Picker

Progressbar

Radio

Split-button

Switch

Table

Tabstrip

Treeview

Typography

Window

Suggested Links

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!

Getting Started

Support Resources

Community

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

Customization

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!