Styling & Themes / Material Theme / Customization /

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

Customization

Variables

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

Common

Name	Type	Default value	Computed value
$kendo-border-radius	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description Border radius for all components.
$kendo-base-bg	Color	`k-map-get( $theme, base-bg )`	`#ffffff`
Description The background of the components' chrome area.
$kendo-base-text	Color	`k-map-get( $theme, component-text )`	`rgba(0, 0, 0, 0.87)`
Description The text color of the components' chrome area.
$kendo-base-border	Color	`rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )`	`rgba(0, 0, 0, 0.08)`
Description The border of the components' chrome area.
$kendo-base-gradient	Null	`null`	`null`
Description The gradient background of the components' chrome area.
$kendo-hover-bg	Color	`k-map-get( $theme, hover-bg )`	`rgba(0, 0, 0, 0.04)`
Description The background of hovered items.
$kendo-hover-text	Color	`$kendo-base-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of hovered items.
$kendo-hover-border	Color	`rgba( $kendo-base-border, .15 )`	`rgba(0, 0, 0, 0.15)`
Description The border color of hovered items.
$kendo-hover-gradient	Null	`null`	`null`
Description The gradient background of hovered items.
$kendo-selected-bg	Color	`$kendo-color-secondary`	`#e51a5f`
Description The background of selected items.
$kendo-selected-text	Color	`$kendo-color-secondary-contrast`	`white`
Description The text color of selected items.
$kendo-selected-border	Color	`rgba( $kendo-base-border, .1 )`	`rgba(0, 0, 0, 0.1)`
Description The border color of selected items.
$kendo-selected-gradient	Null	`null`	`null`
Description The gradient background of selected items.
$kendo-list-sizes	Map	( sm: ( font-size: $kendo-list-sm-font-size, line-height: $kendo-list-sm-line-height, header-padding-x: $kendo-list-sm-header-padding-x, header-padding-y: $kendo-list-sm-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-sm-item-padding-x, item-padding-y: $kendo-list-sm-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-sm-group-item-padding-x, group-item-padding-y: $kendo-list-sm-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ), md: ( font-size: $kendo-list-md-font-size, line-height: $kendo-list-md-line-height, header-padding-x: $kendo-list-md-header-padding-x, header-padding-y: $kendo-list-md-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-md-item-padding-x, item-padding-y: $kendo-list-md-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-md-group-item-padding-x, group-item-padding-y: $kendo-list-md-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ), lg: ( font-size: $kendo-list-lg-font-size, line-height: $kendo-list-lg-line-height, header-padding-x: $kendo-list-lg-header-padding-x, header-padding-y: $kendo-list-lg-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-lg-item-padding-x, item-padding-y: $kendo-list-lg-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-lg-group-item-padding-x, group-item-padding-y: $kendo-list-lg-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ) )	(sm: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 16px, header-padding-y: 6px, header-font-size: null, header-line-height: null, item-padding-x: 16px, item-padding-y: 6px, item-font-size: null, item-line-height: null, group-item-padding-x: 16px, group-item-padding-y: 6px, group-item-font-size: null, group-item-line-height: null), md: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 16px, header-padding-y: 8px, header-font-size: null, header-line-height: null, item-padding-x: 16px, item-padding-y: 8px, item-font-size: null, item-line-height: null, group-item-padding-x: 16px, group-item-padding-y: 8px, group-item-font-size: null, group-item-line-height: null), lg: (font-size: 16px, line-height: 1.5, header-padding-x: 16px, header-padding-y: 8px, header-font-size: null, header-line-height: null, item-padding-x: 16px, item-padding-y: 8px, item-font-size: null, item-line-height: null, group-item-padding-x: 16px, group-item-padding-y: 10px, group-item-font-size: null, group-item-line-height: null))
Description The map with the sizes of the List. @group list

Appbar

Name	Type	Default value	Computed value
$kendo-appbar-margin-x	Null	`null`	`null`
Description The horizontal margin of the AppBar.
$kendo-appbar-margin-y	Null	`null`	`null`
Description The vertical margin of the AppBar.
$kendo-appbar-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the AppBar.
$kendo-appbar-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The vertical padding of the AppBar.
$kendo-appbar-border-width	Number	`0px`	`0px`
Description The width of the border around the AppBar.
$kendo-appbar-zindex	Number	`1000`	`1000`
Description The z-index of the AppBar.
$kendo-appbar-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the AppBar.
$kendo-appbar-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the AppBar.
$kendo-appbar-line-height	Number	`$kendo-line-height-md`	`2`
Description The line height of the AppBar.
$kendo-appbar-gap	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The spacing between the AppBar sections.
$kendo-appbar-light-bg	Color	`$kendo-color-light`	`#f5f5f5`
Description The background color of the AppBar based on light theme color.
$kendo-appbar-light-text	Color	`k-contrast-color( $kendo-color-light )`	`black`
Description TThe text color of the AppBar based on light theme color.
$kendo-appbar-dark-bg	Color	`$kendo-color-dark`	`#424242`
Description The background color of the AppBar based on dark theme color.
$kendo-appbar-dark-text	Color	`k-contrast-color( $kendo-color-dark )`	`white`
Description The text color of the AppBar based on dark theme color.
$kendo-appbar-box-shadow	String	`$box-shadow-depth-4`	`var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))`
Description The box shadow of the AppBar.
$kendo-appbar-bottom-box-shadow	String	`$kendo-appbar-box-shadow`	`var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))`
Description The box shadow of the AppBar with bottom position.

Avatar

Name	Type	Default value	Computed value
$kendo-avatar-border-width	Number	`1px`	`1px`
Description The border width of the Avatar.
$kendo-avatar-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the Avatar.
$kendo-avatar-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Avatar.
$kendo-avatar-line-height	Number	`$kendo-line-height-md`	`2`
Description The 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 map of the Avatar.
$kendo-avatar-theme-colors	Map	`$kendo-theme-colors`	`("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242)`
Description The theme colors map of the Avatar.

Badge

Name	Type	Default value	Computed value
$kendo-badge-border-width	Number	`1px`	`1px`
Description The width of the border around the Badge.
$kendo-badge-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description The border radius of the Badge.
$kendo-badge-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal padding of the Badge.
$kendo-badge-sm-padding-x	Number	`k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description The horizontal padding of the small Badge.
$kendo-badge-md-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal padding of the medium Badge.
$kendo-badge-lg-padding-x	Number	`k-map-get( $kendo-spacing, 1.5 )`	`6px`
Description The horizontal padding of the large Badge.
$kendo-badge-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The vertical padding of the Badge.
$kendo-badge-sm-padding-y	Number	`k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description The vertical padding of the small Badge.
$kendo-badge-md-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The vertical padding of the medium Badge.
$kendo-badge-lg-padding-y	Number	`k-map-get( $kendo-spacing, 1.5 )`	`6px`
Description The vertical padding of the large Badge.
$kendo-badge-font-size	Number	`$kendo-font-size-xs`	`10px`
Description The font sizes of the Badge.
$kendo-badge-sm-font-size	Number	`$kendo-font-size-xs`	`10px`
Description The font size of the small Badge.
$kendo-badge-md-font-size	Number	`$kendo-font-size-xs`	`10px`
Description The font size of the medium Badge.
$kendo-badge-lg-font-size	Number	`$kendo-font-size-xs`	`10px`
Description The font size of the large Badge.
$kendo-badge-line-height	Number	`1`	`1`
Description The line heights used along with the $kendo-font-size variable.
$kendo-badge-sm-line-height	Number	`$kendo-badge-line-height`	`1`
Description The line height used along with the $kendo-font-size variable of the small Badge.
$kendo-badge-md-line-height	Number	`$kendo-badge-line-height`	`1`
Description The line height used along with the $kendo-font-size variable of the medium Badge.
$kendo-badge-lg-line-height	Number	`$kendo-badge-line-height`	`1`
Description The line height used along with the $kendo-font-size variable of the large Badge.
$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 The calculated minimum width of the circular Badge.
$kendo-badge-sm-min-width	Calculation	`calc( #{$kendo-badge-sm-line-height * 1em} + #{$kendo-badge-sm-padding-y * 2} + #{$kendo-badge-border-width * 2} )`	`calc(1em + 4px + 2px)`
Description The calculated minimum width of the small circular Badge.
$kendo-badge-md-min-width	Calculation	`calc( #{$kendo-badge-md-line-height * 1em} + #{$kendo-badge-md-padding-y * 2} + #{$kendo-badge-border-width * 2} )`	`calc(1em + 8px + 2px)`
Description The calculated minimum width of the medium circular Badge.
$kendo-badge-lg-min-width	Calculation	`calc( #{$kendo-badge-lg-line-height * 1em} + #{$kendo-badge-lg-padding-y * 2} + #{$kendo-badge-border-width * 2} )`	`calc(1em + 12px + 2px)`
Description The calculated minimum width of the large circular 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 The sizes map for the Badge.

Name	Type	Default value	Computed value
$kendo-bottom-nav-padding-x	Number	`0px`	`0px`
Description The horizontal padding of the BottomNavigation.
$kendo-bottom-nav-padding-y	Number	`$kendo-bottom-nav-padding-x`	`0px`
Description The vertical padding of the BottomNavigation.
$kendo-bottom-nav-gap	Number	`$kendo-bottom-nav-padding-x`	`0px`
Description The spacing between the BottomNavigation items.
$kendo-bottom-nav-border-width	List	`1px 0px 0px 0px`	`1px 0px 0px 0px`
Description The width of the border around the BottomNavigation.
$kendo-bottom-nav-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the BottomNavigation.
$kendo-bottom-nav-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the BottomNavigation.
$kendo-bottom-nav-line-height	String	`normal`	`normal`
Description The line height of the BottomNavigation.
$kendo-bottom-nav-letter-spacing	Number	`.2px`	`0.2px`
Description The letter spacing of the BottomNavigation.
$kendo-bottom-nav-item-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the BottomNavigation item.
$kendo-bottom-nav-item-padding-y	Number	`0`	`0`
Description The vertical padding of the BottomNavigation item.
$kendo-bottom-nav-item-min-width	Number	`72px`	`72px`
Description The minimum width of the BottomNavigation item.
$kendo-bottom-nav-item-max-width	Null	`null`	`null`
Description The maximum width of the BottomNavigation item.
$kendo-bottom-nav-item-min-height	Calculation	`calc( #{$kendo-icon-size * 2.5} + #{$kendo-padding-sm-x * 2} - #{$kendo-bottom-nav-padding-x * 2} )`	`calc(40px + 16px - 0px)`
Description The minimum height of the BottomNavigation item.
$kendo-bottom-nav-item-border-radius	Null	`null`	`null`
Description The border radius of the BottomNavigation item.
$kendo-bottom-nav-item-gap	List	`0 k-map-get( $kendo-spacing, 1 )`	`0 4px`
Description The spacing of the BottomNavigation item.
$kendo-bottom-nav-shadow	String	`$box-shadow-depth-4`	`var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))`
Description The box shadow of the BottomNavigation.
$kendo-bottom-nav-flat-text	Color	`$kendo-component-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the flat BottomNavigation.
$kendo-bottom-nav-flat-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the flat BottomNavigation.
$kendo-bottom-nav-flat-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.12)`
Description The border color of the flat BottomNavigation.

Name	Type	Default value	Computed value
$kendo-breadcrumb-border-width	Number	`0px`	`0px`
Description The width of the border around the Breadcrumb.
$kendo-breadcrumb-margin-x	Null	`null`	`null`
Description The horizontal margin of the Breadcrumb.
$kendo-breadcrumb-margin-y	Null	`null`	`null`
Description The vertical margin of the Breadcrumb.
$kendo-breadcrumb-padding-x	Null	`null`	`null`
Description The horizontal padding of the Breadcrumb.
$kendo-breadcrumb-padding-y	Null	`null`	`null`
Description The vertical padding of the Breadcrumb.
$kendo-breadcrumb-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the Breadcrumb.
$kendo-breadcrumb-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Breadcrumb.
$kendo-breadcrumb-sm-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the small Breadcrumb.
$kendo-breadcrumb-md-font-size	Number	`$kendo-breadcrumb-font-size`	`14px`
Description The font size of the medium Breadcrumb.
$kendo-breadcrumb-lg-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the large Breadcrumb.
$kendo-breadcrumb-line-height	Number	`$kendo-line-height-md`	`2`
Description The line-height of the Breadcrumb.
$kendo-breadcrumb-sm-line-height	Number	`$kendo-line-height-md`	`2`
Description The line-height of the small Breadcrumb.
$kendo-breadcrumb-md-line-height	Number	`$kendo-breadcrumb-line-height`	`2`
Description The line-height of the medium Breadcrumb.
$kendo-breadcrumb-lg-line-height	Number	`$kendo-line-height-md`	`2`
Description The line-height of the height Breadcrumb.
$kendo-breadcrumb-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The base background of the Breadcrumb.
$kendo-breadcrumb-text	Color	`$kendo-component-text`	`rgba(0, 0, 0, 0.87)`
Description The base text color of the Breadcrumb.
$kendo-breadcrumb-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.12)`
Description The base border color of the Breadcrumb.
$kendo-breadcrumb-focus-shadow	List	`0 0 2px 1px rgba( black, .06 )`	`0 0 2px 1px rgba(0, 0, 0, 0.06)`
Description The box shadow of the focused Breadcrumb.
$kendo-breadcrumb-link-padding-x	Number	`k-map-get( $kendo-spacing, 2.5 )`	`10px`
Description The horizontal padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-x	Number	`k-map-get( $kendo-spacing, 2.5 )`	`10px`
Description The horizontal padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-x	Number	`$kendo-breadcrumb-link-padding-x`	`10px`
Description The horizontal padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-x	Number	`k-map-get( $kendo-spacing, 2.5 )`	`10px`
Description The horizontal padding of the large Breadcrumb link.
$kendo-breadcrumb-link-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The vertical padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-y	Number	`k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description The vertical padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-y	Number	`$kendo-breadcrumb-link-padding-y`	`4px`
Description The vertical padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-y	Number	`k-map-get( $kendo-spacing, 1.5 )`	`6px`
Description The vertical padding of the large Breadcrumb link.
$kendo-breadcrumb-link-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description The border-radius of the Breadcrumb link.
$kendo-breadcrumb-icon-link-padding-y	Number	`k-map-get( $kendo-spacing, 2.5 )`	`10px`
Description The vertical padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The vertical padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-y	Number	`$kendo-breadcrumb-icon-link-padding-y`	`10px`
Description The vertical padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-y	Number	`k-map-get( $kendo-spacing, 3 )`	`12px`
Description The vertical padding of the large Breadcrumb link icon.
$kendo-breadcrumb-icon-link-padding-x	Number	`$kendo-breadcrumb-icon-link-padding-y`	`10px`
Description The horizontal padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-x	Number	`$kendo-breadcrumb-sm-icon-link-padding-y`	`8px`
Description The horizontal padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-x	Number	`$kendo-breadcrumb-icon-link-padding-x`	`10px`
Description The horizontal padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-x	Number	`$kendo-breadcrumb-lg-icon-link-padding-y`	`12px`
Description The horizontal padding of the large Breadcrumb link icon.
$kendo-breadcrumb-link-icon-spacing	Number	`$kendo-icon-spacing`	`8px`
Description The spacing of the Breadcrumb link icon.
$kendo-breadcrumb-link-initial-text	String	`inherit`	`inherit`
Description The text color of the Breadcrumb link.
$kendo-breadcrumb-link-bg	Null	`null`	`null`
Description The background color of the Breadcrumb link.
$kendo-breadcrumb-link-text	Color	`$kendo-color-primary`	`#3f51b5`
Description The text color of the Breadcrumb link.
$kendo-breadcrumb-link-border	Null	`null`	`null`
Description The border color of the Breadcrumb link.
$kendo-breadcrumb-link-hover-bg	Color	`$kendo-hover-bg`	`rgba(0, 0, 0, 0.04)`
Description The background color of the hovered Breadcrumb link.
$kendo-breadcrumb-link-hover-text	Null	`null`	`null`
Description The text color of the hovered Breadcrumb link.
$kendo-breadcrumb-link-hover-border	Null	`null`	`null`
Description The border color of the hovered Breadcrumb link.
$kendo-breadcrumb-link-focus-bg	Color	`k-map-get( $theme, focus-bg )`	`rgba(0, 0, 0, 0.12)`
Description The background color of the focused Breadcrumb link.
$kendo-breadcrumb-link-focus-text	Null	`null`	`null`
Description The text color of the focused Breadcrumb link.
$kendo-breadcrumb-link-focus-border	Null	`null`	`null`
Description The border color of the focused Breadcrumb link.
$kendo-breadcrumb-link-focus-shadow	Null	`null`	`null`
Description The box shadow of the focused Breadcrumb link.
$kendo-breadcrumb-root-link-bg	Null	`null`	`null`
Description The background color of the Breadcrumb root link.
$kendo-breadcrumb-root-link-text	Null	`null`	`null`
Description The text color of the Breadcrumb root link.
$kendo-breadcrumb-root-link-border	Null	`null`	`null`
Description The border color of the Breadcrumb root link.
$kendo-breadcrumb-root-link-hover-bg	Color	`$kendo-hover-bg`	`rgba(0, 0, 0, 0.04)`
Description The background color of the hovered Breadcrumb root link.
$kendo-breadcrumb-root-link-hover-text	Null	`null`	`null`
Description The text color of the hovered Breadcrumb root link.
$kendo-breadcrumb-root-link-hover-border	Null	`null`	`null`
Description The border color of the hovered Breadcrumb root link.
$kendo-breadcrumb-root-link-focus-bg	Color	`k-map-get( $theme, focus-bg )`	`rgba(0, 0, 0, 0.12)`
Description The background color of the focused Breadcrumb root link.
$kendo-breadcrumb-root-link-focus-text	Null	`null`	`null`
Description The text color of the focused Breadcrumb root link.
$kendo-breadcrumb-root-link-focus-border	Null	`null`	`null`
Description The border color of the focused Breadcrumb root link.
$kendo-breadcrumb-root-link-focus-shadow	Null	`null`	`null`
Description The box shadow of the focused Breadcrumb root link.
$kendo-breadcrumb-current-item-bg	Null	`null`	`null`
Description The background color of the current Breadcrumb root link.
$kendo-breadcrumb-current-item-text	Null	`null`	`null`
Description The text color of the current Breadcrumb root link.
$kendo-breadcrumb-current-item-border	Null	`null`	`null`
Description The border color of the current Breadcrumb root link.
$kendo-breadcrumb-sizes	Map	( sm: ( link-padding-x: $kendo-breadcrumb-sm-link-padding-x, link-padding-y: $kendo-breadcrumb-sm-link-padding-y, icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x, icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y, font-size: $kendo-breadcrumb-sm-font-size, line-height: $kendo-breadcrumb-sm-line-height ), md: ( link-padding-x: $kendo-breadcrumb-md-link-padding-x, link-padding-y: $kendo-breadcrumb-md-link-padding-y, icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x, icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y, font-size: $kendo-breadcrumb-md-font-size, line-height: $kendo-breadcrumb-md-line-height ), lg: ( link-padding-x: $kendo-breadcrumb-lg-link-padding-x, link-padding-y: $kendo-breadcrumb-lg-link-padding-y, icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x, icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y, font-size: $kendo-breadcrumb-lg-font-size, line-height: $kendo-breadcrumb-lg-line-height ) )	`(sm: (link-padding-x: 10px, link-padding-y: 2px, icon-link-padding-x: 8px, icon-link-padding-y: 8px, font-size: 14px, line-height: 2), md: (link-padding-x: 10px, link-padding-y: 4px, icon-link-padding-x: 10px, icon-link-padding-y: 10px, font-size: 14px, line-height: 2), lg: (link-padding-x: 10px, link-padding-y: 6px, icon-link-padding-x: 12px, icon-link-padding-y: 12px, font-size: 14px, line-height: 2))`
Description The sizes map for the Breadcrumb.

Button

Name	Type	Default value	Computed value
$kendo-button-border-width	Number	`1px`	`1px`
Description The width of the border around the Button.
$kendo-button-border-radius	Null	`null`	`null`
Description The border radius of the Button.
$kendo-button-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The horizontal padding of the Button.
$kendo-button-sm-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The horizontal padding of the small Button.
$kendo-button-md-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The horizontal padding of the medium Button.
$kendo-button-lg-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The horizontal padding of the large Button.
$kendo-button-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The vertical padding of the Button.
$kendo-button-sm-padding-y	Number	`k-map-get( $kendo-spacing, 1.5 )`	`6px`
Description The vertical padding of the small Button.
$kendo-button-md-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The vertical padding of the medium Button.
$kendo-button-lg-padding-y	Number	`k-map-get( $kendo-spacing, 2.5 )`	`10px`
Description The vertical padding of the large Button.
$kendo-button-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the Button.
$kendo-button-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Button.
$kendo-button-sm-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the small Button.
$kendo-button-md-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the medium Button.
$kendo-button-lg-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the large Button.
$kendo-button-line-height	Number	`k-math-div( 20, 14 )`	`1.4285714286`
Description Line heights used along with the $kendo-font-size variable.
$kendo-button-sm-line-height	Number	`k-math-div( 20, 14 )`	`1.4285714286`
Description The line height used along with the $kendo-font-size variable of the small Button.
$kendo-button-md-line-height	Number	`k-math-div( 20, 14 )`	`1.4285714286`
Description The line height used along with the $kendo-font-size variable of the medium Button.
$kendo-button-lg-line-height	Number	`k-math-div( 20, 14 )`	`1.4285714286`
Description The line height used along with the $kendo-font-size variable of the large Button.
$kendo-button-calc-size	Calculation	`calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} )`	`calc(1.4285714286em + 16px + 2px)`
Description The calculated height of the Button.
$kendo-button-inner-calc-size	Calculation	`calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} )`	`calc(1.4285714286em + 16px)`
Description The calculated inner height of the Button excluding the border width.
$kendo-button-sizes	Map	( sm: ( padding-x: $kendo-button-sm-padding-x, padding-y: $kendo-button-sm-padding-y, font-size: $kendo-button-sm-font-size, line-height: $kendo-button-sm-line-height ), md: ( padding-x: $kendo-button-md-padding-x, padding-y: $kendo-button-md-padding-y, font-size: $kendo-button-md-font-size, line-height: $kendo-button-md-line-height ), lg: ( padding-x: $kendo-button-lg-padding-x, padding-y: $kendo-button-lg-padding-y, font-size: $kendo-button-lg-font-size, line-height: $kendo-button-lg-line-height ) )	`(sm: (padding-x: 16px, padding-y: 6px, font-size: 14px, line-height: 1.4285714286), md: (padding-x: 16px, padding-y: 8px, font-size: 14px, line-height: 1.4285714286), lg: (padding-x: 16px, padding-y: 10px, font-size: 14px, line-height: 1.4285714286))`
Description The sizes map for the Button.
$kendo-button-theme-colors	Map	`k-map-merge( $kendo-theme-colors, ( "base": $kendo-base-bg ) )`	`("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242, "base": #ffffff)`
Description The theme colors map for the Button.
$kendo-button-bg	Color	`$kendo-base-bg`	`#ffffff`
Description The base background of the Button.
$kendo-button-text	Color	`$kendo-base-text`	`rgba(0, 0, 0, 0.87)`
Description The base text color of the Button.
$kendo-button-border	Color	`$kendo-button-bg`	`#ffffff`
Description The base border color of the Button.
$kendo-button-gradient	Null	`null`	`null`
Description The base background gradient of the Button.
$kendo-button-shadow	String	`$box-shadow-depth-2`	`var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14))`
Description The base shadow of the Button.
$kendo-button-hover-bg	Null	`null`	`null`
Description The base background of the hovered Button.
$kendo-button-hover-text	Null	`null`	`null`
Description The base text color of the hovered Button.
$kendo-button-hover-border	Null	`null`	`null`
Description The base border color of the hovered Button.
$kendo-button-hover-gradient	Null	`null`	`null`
Description The base background gradient of the hovered Button.
$kendo-button-hover-shadow	Null	`null`	`null`
Description The base shadow of the hovered Button.
$kendo-button-active-bg	Null	`null`	`null`
Description The base background color of the active Button.
$kendo-button-active-text	Null	`null`	`null`
Description The base text color of the active Button.
$kendo-button-active-border	Null	`null`	`null`
Description The base border color of the active Button.
$kendo-button-active-gradient	Null	`null`	`null`
Description The base background gradient of the active Button.
$kendo-button-active-shadow	String	`$box-shadow-depth-6`	`var(--kendo-elevation-6, 0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14))`
Description The base shadow of the active Button.
$kendo-button-selected-bg	Null	`$kendo-button-active-bg`	`null`
Description The base background color of the selected Button.
$kendo-button-selected-text	Null	`$kendo-button-active-text`	`null`
Description The base text color of the selected Button.
$kendo-button-selected-border	Null	`$kendo-button-active-bg`	`null`
Description The base border color of the selected Button.
$kendo-button-selected-gradient	Null	`null`	`null`
Description The base background gradient of the selected Button.
$kendo-button-selected-shadow	Null	`null`	`null`
Description The base shadow of the selected Button.
$kendo-button-focus-bg	Null	`null`	`null`
Description The base background of the focused Button.
$kendo-button-focus-text	Null	`null`	`null`
Description The base text color of the focused Button.
$kendo-button-focus-border	Null	`null`	`null`
Description The base border color of the focused Button.
$kendo-button-focus-gradient	Null	`null`	`null`
Description The base background gradient of focused Button.
$kendo-button-focus-shadow	Null	`null`	`null`
Description The base shadow of the focused Button.
$kendo-button-disabled-bg	Color	`k-try-shade( $kendo-body-bg, 12% )`	`#e0e0e0`
Description The base background color of the disabled Button.
$kendo-button-disabled-text	Color	`$kendo-disabled-text`	`rgba(0, 0, 0, 0.38)`
Description The base text color of the disabled Button.
$kendo-button-disabled-border	Color	`$kendo-button-disabled-bg`	`#e0e0e0`
Description The base border color of the disabled Button.
$kendo-button-disabled-gradient	Null	`null`	`null`
Description The base background gradient of the disabled Button.
$kendo-button-disabled-shadow	String	`none`	`none`
Description The base shadow of the disabled Button.
$kendo-flat-button-hover-opacity	Number	`.08`	`0.08`
Description The overlay opacity of the hovered flat Button. Used to create a background for the flat Button.
$kendo-flat-button-focus-opacity	Number	`.12`	`0.12`
Description The overlay opacity of the focused flat Button. Used to create a background for the flat Button.
$kendo-flat-button-active-opacity	Number	`.16`	`0.16`
Description The overlay opacity of the active flat Button. Used to create a background for the flat Button.
$kendo-flat-button-selected-opacity	Number	`.22`	`0.22`
Description The overlay opacity of the selected flat Button. Used to create a background for the flat Button.
$kendo-flat-button-focus-ring-opacity	Null	`null`	`null`
Description The opacity of the flat Button focus ring. Used to create a border for the flat Button.
$kendo-button-transition	List	`box-shadow 280ms cubic-bezier( .4, 0, .2, 1 )`	`box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1)`
Description The box-shadow transition of the Button.

Card

Name	Type	Default value	Computed value
$kendo-card-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The horizontal padding of the Card.
$kendo-card-padding-y	Number	`k-map-get( $kendo-spacing, 3 )`	`12px`
Description The vertical padding of the Card.
$kendo-card-border-width	Number	`0px`	`0px`
Description The width of the border around the Card.
$kendo-card-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description The border radius of the Card.
$kendo-card-inner-border-radius	Calculation	`calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} )`	`calc(4px - 0px)`
Description The inner border radius of the Card.
$kendo-card-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the Card.
$kendo-card-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Card.
$kendo-card-line-height	Number	`k-math-div( 20, 14 )`	`1.4285714286`
Description The line height of the Card.
$kendo-card-deck-gap	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The spacing between the Cards in the Card deck.
$kendo-card-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the Card.
$kendo-card-text	Color	`$kendo-component-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the Card.
$kendo-card-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.12)`
Description The border color of the Card.
$kendo-card-shadow	String	`$box-shadow-depth-1`	`var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))`
Description The shadow of the Card.
$kendo-card-focus-bg	Null	`null`	`null`
Description The background color of the focused Card.
$kendo-card-focus-text	Null	`null`	`null`
Description The text color of the focused Card.
$kendo-card-focus-border	Null	`null`	`null`
Description The border color of the focused Card.
$kendo-card-focus-shadow	String	`$box-shadow-depth-3`	`var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))`
Description The shadow of the focused Card.
$kendo-card-header-padding-x	Number	`$kendo-card-padding-x`	`16px`
Description The horizontal padding of the Card header.
$kendo-card-header-padding-y	Number	`$kendo-card-padding-y`	`12px`
Description The vertical padding of the Card header.
$kendo-card-header-border-width	Number	`1px`	`1px`
Description The bottom border width of the Card header.
$kendo-card-header-bg	Null	`null`	`null`
Description The background color of the Card header.
$kendo-card-header-text	Null	`null`	`null`
Description The text color of the Card header.
$kendo-card-header-border	Color	`$kendo-card-border`	`rgba(0, 0, 0, 0.12)`
Description The border color of the Card header.
$kendo-card-body-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The horizontal padding of the Card body.
$kendo-card-body-padding-y	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The vertical padding of the Card body.
$kendo-card-footer-padding-x	Number	`$kendo-card-padding-x`	`16px`
Description The horizontal padding of the Card footer.
$kendo-card-footer-padding-y	Number	`$kendo-card-padding-y`	`12px`
Description The vertical padding of the Card footer.
$kendo-card-footer-border-width	Number	`1px`	`1px`
Description The top border width of the Card footer.
$kendo-card-footer-bg	Null	`null`	`null`
Description The background color of the Card footer.
$kendo-card-footer-text	Null	`null`	`null`
Description The text color of the Card footer.
$kendo-card-footer-border	Color	`$kendo-card-border`	`rgba(0, 0, 0, 0.12)`
Description The border color of the Card footer.
$kendo-card-title-margin-bottom	Number	`12px`	`12px`
Description The bottom margin of the Card title.
$kendo-card-title-font-size	Number	`$kendo-h5-font-size`	`24px`
Description The font size of the Card title.
$kendo-card-title-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the Card title.
$kendo-card-title-line-height	Number	`1.25`	`1.25`
Description The line height of the Card title.
$kendo-card-title-font-weight	Number	`500`	`500`
Description The font weight of the Card title.
$kendo-card-title-letter-spacing	Null	`null`	`null`
Description The letter spacing of the Card title.
$kendo-card-subtitle-margin-bottom	Number	`12px`	`12px`
Description The bottom margin of the Card subtitle.
$kendo-card-subtitle-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Card subtitle.
$kendo-card-subtitle-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the Card subtitle.
$kendo-card-subtitle-line-height	Number	`k-math-div( 20, 14 )`	`1.4285714286`
Description The line height of the Card subtitle.
$kendo-card-subtitle-font-weight	Number	`500`	`500`
Description The font weight of the Card subtitle.
$kendo-card-subtitle-letter-spacing	Null	`null`	`null`
Description The letter spacing of the Card subtitle.
$kendo-card-subtitle-text	Color	`$kendo-subtle-text`	`rgba(0, 0, 0, 0.54)`
Description The text color of the Card subtitle.
$kendo-card-img-max-width	Number	`100px`	`100px`
Description The maximum width of the Card image.
$kendo-card-avatar-size	Number	`45px`	`45px`
Description The size of the Avatar in the Card.
$kendo-card-avatar-spacing	Number	`$kendo-card-header-padding-x`	`16px`
Description The spacing between the Avatar and the text in the Card.
$kendo-card-actions-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the Card actions.
$kendo-card-actions-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The vertical padding of the Card actions.
$kendo-card-actions-border-width	Number	`1px`	`1px`
Description The top border width of the Card actions.
$kendo-card-actions-gap	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The spacing between the Card actions.
$kendo-card-deck-scroll-button-radius	Number	`50%`	`50%`
Description The border radius of the scroll button in the Card deck.
$kendo-card-deck-scroll-button-offset	Number	`k-math-div( $kendo-card-deck-gap, 2 )`	`8px`
Description The border radius of the scroll button in the Card deck.
$kendo-card-callout-width	Number	`20px`	`20px`
Description The width of the Card callout.
$kendo-card-callout-height	Number	`20px`	`20px`
Description The height of the Card callout.

Charts

Name	Type	Default value	Computed value
$kendo-series-a	Color	`get-base-hue( purple, 500 )`	`#9c27b0`
Description The first base series color and its light and dark shades.
$kendo-series-b	Color	`get-base-hue( blue, 500 )`	`#2196f3`
Description The second base series color and its light and dark shades.
$kendo-series-c	Color	`get-base-hue( teal, 500 )`	`#009688`
Description The third base series color and its light and dark shades.
$kendo-series-d	Color	`get-base-hue( yellow, 500 )`	`#ffeb3b`
Description The fourth base series color and its light and dark shades.
$kendo-series-e	Color	`get-base-hue( red, 500 )`	`#f44336`
Description The fifth base series color and its light and dark shades.
$kendo-series-f	Color	`get-base-hue( green, 500 )`	`#4caf50`
Description The sixth base series color and its light and dark shades.
$kendo-series-1	Color	`$kendo-series-a`	`#9c27b0`
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	`2px`	`2px`
Description The border width of the CheckBox.
$kendo-checkbox-sm-size	Number	`k-map-get( $kendo-spacing, 3 )`	`12px`
Description The size of a small CheckBox.
$kendo-checkbox-md-size	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The size of a medium CheckBox.
$kendo-checkbox-lg-size	Number	`k-map-get( $kendo-spacing, 5 )`	`20px`
Description The size of a large CheckBox.
$kendo-checkbox-sm-glyph-size	Number	`k-map-get( $kendo-spacing, 2.5 )`	`10px`
Description The glyph size of a small CheckBox.
$kendo-checkbox-md-glyph-size	Number	`k-map-get( $kendo-spacing, 3.5 )`	`14px`
Description The glyph size of a medium CheckBox.
$kendo-checkbox-lg-glyph-size	Number	`k-map-get( $kendo-spacing, 4.5 )`	`18px`
Description The glyph size of a large CheckBox.
$kendo-checkbox-sm-ripple-size	Number	`300%`	`300%`
Description The ripple size of a small CheckBox.
$kendo-checkbox-md-ripple-size	Number	`300%`	`300%`
Description The ripple size of a medium CheckBox.
$kendo-checkbox-lg-ripple-size	Number	`300%`	`300%`
Description The ripple size of a large CheckBox.
$kendo-checkbox-bg	Null	`null`	`null`
Description The background color of the CheckBox.
$kendo-checkbox-text	Null	`null`	`null`
Description The text color of the CheckBox.
$kendo-checkbox-border	Color	`rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 )`	`rgba(0, 0, 0, 0.54)`
Description The border color of the CheckBox.
$kendo-checkbox-hover-bg	Null	`null`	`null`
Description The background color of the hovered CheckBox.
$kendo-checkbox-hover-text	Null	`null`	`null`
Description The text color of the hovered CheckBox.
$kendo-checkbox-hover-border	Null	`null`	`null`
Description The border color of the hovered CheckBox.
$kendo-checkbox-checked-bg	Color	`$kendo-color-primary`	`#3f51b5`
Description The background color of the checked CheckBox.
$kendo-checkbox-checked-text	Color	`k-contrast-color( $kendo-checkbox-checked-bg )`	`white`
Description The text color of the checked CheckBox.
$kendo-checkbox-checked-border	Color	`$kendo-checkbox-checked-bg`	`#3f51b5`
Description The border color of the checked CheckBox.
$kendo-checkbox-indeterminate-bg	Color	`$kendo-checkbox-checked-bg`	`#3f51b5`
Description The background color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-text	Color	`$kendo-checkbox-checked-text`	`white`
Description The text color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-border	Color	`$kendo-checkbox-checked-border`	`#3f51b5`
Description The border color of the indeterminate CheckBox.
$kendo-checkbox-focus-border	Null	`null`	`null`
Description The border color of the focused CheckBox.
$kendo-checkbox-focus-shadow	Null	`null`	`null`
Description The box shadow of the focused CheckBox.
$kendo-checkbox-focus-checked-border	Null	`null`	`null`
Description The border color of the focused and checked CheckBox.
$kendo-checkbox-focus-checked-shadow	Null	`null`	`null`
Description The box shadow of the focused and checked CheckBox.
$kendo-checkbox-disabled-bg	Null	`null`	`null`
Description The background color of the disabled CheckBox.
$kendo-checkbox-disabled-text	Null	`null`	`null`
Description The text color of the disabled CheckBox.
$kendo-checkbox-disabled-border	Color	`k-try-shade( $kendo-component-bg, 4 )`	`#adadad`
Description The border color of the disabled CheckBox.
$kendo-checkbox-disabled-checked-bg	Color	`$kendo-checkbox-disabled-border`	`#adadad`
Description The background color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-text	Color	`k-contrast-color( $kendo-checkbox-disabled-checked-bg )`	`black`
Description The text color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-border	Color	`$kendo-checkbox-disabled-checked-bg`	`#adadad`
Description The border color of the disabled and checked CheckBox.
$kendo-checkbox-invalid-bg	Null	`null`	`null`
Description The background color of an invalid CheckBox.
$kendo-checkbox-invalid-text	Color	`$kendo-invalid-text`	`#f31700`
Description The text color of an invalid CheckBox.
$kendo-checkbox-invalid-border	Color	`$kendo-invalid-border`	`#f31700`
Description The border color of an invalid CheckBox.
$kendo-checkbox-indicator-type	String	`image`	`image`
Description The type of the CheckBox indicator.
$kendo-checkbox-glyph-font-family	List	`"WebComponentsIcons", monospace`	`"WebComponentsIcons", monospace`
Description The font family of the CheckBox indicator glyph.
$kendo-checkbox-checked-glyph	String	`"\e118"`	`"\e118"`
Description The glyph of the CheckBox indicator.
$kendo-checkbox-indeterminate-glyph	String	`"\e121"`	`"\e121"`
Description The glyph of the 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 24 24'%3e%3cpath fill='none' stroke='white' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/%3e%3c/svg%3e")`
Description The image for a 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 20 20'%3e%3cpath fill='none' stroke='white' stroke-width='3' d='M4 10h12'/%3e%3c/svg%3e")`
Description The image for a indeterminate 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 The spacing between the items in a horizontal CheckBox list.
$kendo-checkbox-list-item-padding-x	Number	`0px`	`0px`
Description The horizontal padding of the CheckBox list items.
$kendo-checkbox-list-item-padding-y	Number	`$kendo-list-md-item-padding-y`	`8px`
Description The vertical padding of the CheckBox list items.
$kendo-checkbox-ripple-bg	Color	`$kendo-color-primary`	`#3f51b5`
Description The background color of the CheckBox' ripple.
$kendo-checkbox-ripple-opacity	Number	`.2`	`0.2`
Description The opacity of the CheckBox' ripple.

Chip

Name	Type	Default value	Computed value
$kendo-chip-border-width	Number	`1px`	`1px`
Description The width of the border around the Chip.
$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 The horizontal padding of the Chip.
$kendo-chip-sm-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal padding of the small Chip.
$kendo-chip-md-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal padding of the medium Chip.
$kendo-chip-lg-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal padding of the large Chip.
$kendo-chip-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The vertical padding of the Chip.
$kendo-chip-sm-padding-y	Number	`k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description The vertical padding of the small Chip.
$kendo-chip-md-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The vertical padding of the medium Chip.
$kendo-chip-lg-padding-y	Number	`k-map-get( $kendo-spacing, 1.5 )`	`6px`
Description The vertical padding of the large Chip.
$kendo-chip-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Chip.
$kendo-chip-sm-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the small Chip.
$kendo-chip-md-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the medium Chip.
$kendo-chip-lg-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the large Chip.
$kendo-chip-line-height	Number	`k-math-div( 18, 14 )`	`1.2857142857`
Description The Chip's line height that is related to the $kendo-font-size.
$kendo-chip-sm-line-height	Number	`$kendo-chip-line-height`	`1.2857142857`
Description The small Chip's line height that is related to the $kendo-font-size.
$kendo-chip-md-line-height	Number	`$kendo-chip-line-height`	`1.2857142857`
Description The medium Chip's line height that is related to the $kendo-font-size.
$kendo-chip-lg-line-height	Number	`$kendo-chip-line-height`	`1.2857142857`
Description The large Chip's line height that is related 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(1.2857142857em + 8px + 2px)`
Description The 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.2857142857), md: (padding-x: 4px, padding-y: 4px, font-size: 14px, line-height: 1.2857142857), lg: (padding-x: 4px, padding-y: 6px, font-size: 14px, line-height: 1.2857142857))`
Description The map with the sizes of the Chip.
$kendo-chip-base-bg	Color	`if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black)`	`#000000`
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": #000000, "error": #f31700, "info": #0058e9, "warning": #ffc000, "success": #37b400)`
Description The theme colors map for the Chip.
$kendo-chip-solid-bg	Color	`if( $kendo-is-dark-theme, $kendo-button-bg, k-try-tint( $kendo-chip-base-bg, 92% ))`	`#ebebeb`
Description The base background color of the solid Chip.
$kendo-chip-solid-text	Color	`$kendo-button-text`	`rgba(0, 0, 0, 0.87)`
Description The base text color of the solid Chip.
$kendo-chip-solid-border	Color	`$kendo-chip-solid-bg`	`#ebebeb`
Description The base border color of the solid Chip.
$kendo-chip-solid-shadow	Null	`null`	`null`
Description The base shadow of the solid Chip.
$kendo-chip-solid-gradient	Null	`$kendo-button-gradient`	`null`
Description The base gradient of the solid Chip.
$kendo-chip-solid-focus-bg	Color	`k-try-tint( $kendo-chip-base-bg, 80% )`	`#cccccc`
Description The base background color of the focused solid Chip.
$kendo-chip-solid-focus-text	Null	`null`	`null`
Description The base text color of the focused solid Chip.
$kendo-chip-solid-hover-bg	Color	`k-try-tint( $kendo-chip-base-bg, 84% )`	`#d6d6d6`
Description The base background color of the hovered solid Chip.
$kendo-chip-solid-hover-text	Null	`null`	`null`
Description The base text color of the hovered solid Chip.
$kendo-chip-solid-selected-bg	Color	`k-try-tint( $kendo-chip-base-bg, 76% )`	`#c2c2c2`
Description The base background color of the selected solid Chip.
$kendo-chip-solid-selected-text	Null	`null`	`null`
Description The base text color of the selected solid Chip.
$kendo-chip-outline-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The base background color of the outline Chip.
$kendo-chip-outline-text	Color	`$kendo-chip-solid-text`	`rgba(0, 0, 0, 0.87)`
Description The base text color of the outline Chip.
$kendo-chip-outline-border	Color	`$kendo-chip-outline-text`	`rgba(0, 0, 0, 0.87)`
Description The base border color of the outline Chip.
$kendo-chip-outline-shadow	Null	`null`	`null`
Description The base shadow of the outline Chip.
$kendo-chip-outline-hover-bg	Color	`k-try-tint( $kendo-chip-base-bg, 92% )`	`#ebebeb`
Description The base background color of the hovered outline Chip.
$kendo-chip-outline-hover-text	Color	`k-contrast-color( $kendo-chip-outline-hover-bg )`	`black`
Description The base text color of the hovered outline Chip.
$kendo-chip-outline-selected-bg	Color	`k-try-tint( $kendo-chip-base-bg, 84% )`	`#d6d6d6`
Description The base background color of the selected outline Chip.
$kendo-chip-outline-selected-text	Color	`$kendo-chip-outline-hover-text`	`black`
Description The base text color of the 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.

Cologradient

Name	Type	Default value	Computed value
$kendo-color-gradient-spacer	Number	`k-map-get( $kendo-spacing, 3 )`	`12px`
Description The spacer of the ColorGradient.
$kendo-color-gradient-width	Number	`294px`	`294px`
Description The width of the ColorGradient.
$kendo-color-gradient-border-width	Number	`1px`	`1px`
Description The width of the border around the ColorGradient.
$kendo-color-gradient-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description The border radius of the ColorGradient.
$kendo-color-gradient-padding-y	Number	`$kendo-color-gradient-spacer`	`12px`
Description The vertical padding of the ColorGradient.
$kendo-color-gradient-padding-x	Number	`$kendo-color-gradient-padding-y`	`12px`
Description The horizontal padding of the ColorGradient.
$kendo-color-gradient-gap	Number	`$kendo-color-gradient-spacer`	`12px`
Description The spacing between the sections of the ColorGradient.
$kendo-color-gradient-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the ColorGradient.
$kendo-color-gradient-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the ColorGradient.
$kendo-color-gradient-line-height	Number	`$kendo-line-height-md`	`2`
Description The line height of the ColorGradient.
$kendo-color-gradient-text	Color	`$kendo-component-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the ColorGradient.
$kendo-color-gradient-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the ColorGradient.
$kendo-color-gradient-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.12)`
Description The border color of the ColorGradient.
$kendo-color-gradient-focus-border	Color	`$kendo-hover-border`	`rgba(0, 0, 0, 0.15)`
Description The border color of the focused ColorGradient.
$kendo-color-gradient-focus-shadow	String	`$box-shadow-depth-3`	`var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))`
Description The box shadow of the focused ColorGradient.
$kendo-color-gradient-canvas-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description The border radius of the ColorGradient canvas.
$kendo-color-gradient-canvas-gap	Number	`$kendo-color-gradient-spacer`	`12px`
Description The spacing between the items of the ColorGradient canvas.
$kendo-color-gradient-canvas-rectangle-height	Number	`180px`	`180px`
Description The height the ColorGradient canvas hsv rectangle.
$kendo-color-gradient-slider-track-size	Number	`10px`	`10px`
Description The width of the ColorGradient slider.
$kendo-color-gradient-slider-border-radius	Number	`10px`	`10px`
Description The border radius of the ColorGradient slider.
$kendo-color-gradient-slider-draghandle-border-width	Number	`3px`	`3px`
Description The width of the border around the ColorGradient slider drag handle.
$kendo-color-gradient-slider-vertical-size	Number	`180px`	`180px`
Description The height of the ColorGradient vertical slider.
$kendo-color-gradient-slider-horizontal-size	Number	`100%`	`100%`
Description The width of the ColorGradient horizontal slider.
$kendo-color-gradient-draghandle-width	Number	`14px`	`14px`
Description The width of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-height	Number	`14px`	`14px`
Description The height of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-border-width	Number	`1px`	`1px`
Description The width of the border around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-outline-width	Number	`1px`	`1px`
Description The width of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-border-radius	Number	`50%`	`50%`
Description The border radius of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-text	Null	`null`	`null`
Description The text color of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-bg	Color	`transparent`	`transparent`
Description The background color of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-border	Color	`rgba( white, .8 )`	`rgba(255, 255, 255, 0.8)`
Description The color of the border around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-shadow	Color	`rgba( $kendo-color-black, .5)`	`rgba(0, 0, 0, 0.5)`
Description The color of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-focus-shadow	Color	`$kendo-color-black`	`#000000`
Description The focus color of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-hover-shadow	Color	`$kendo-color-black`	`#000000`
Description The outline color of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-shadow	Color	`k-elevation(2)`	`rgba(0, 0, 0, 0.5)`
Description The box shadow of the ColorGradient canvas drag handle.
$kendo-color-gradient-canvas-draghandle-margin-y	Number	`- k-math-div( $kendo-color-gradient-draghandle-height, 2 )`	`-7px`
Description The vertical margin of the ColorGradient canvas drag handle.
$kendo-color-gradient-canvas-draghandle-margin-x	Number	`- k-math-div( $kendo-color-gradient-draghandle-width, 2 )`	`-7px`
Description The horizontal margin of the ColorGradient canvas drag handle.
$kendo-color-gradient-input-width	Number	`50px`	`50px`
Description The width of the ColorGradient input.
$kendo-color-gradient-input-gap	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The spacing between the ColorGradient inputs.
$kendo-color-gradient-input-label-gap	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The spacing between the ColorGradient inputs and their labels.
$kendo-color-gradient-input-label-text	Color	`$kendo-subtle-text`	`rgba(0, 0, 0, 0.54)`
Description The text color of the ColorGradient input labels.
$kendo-color-gradient-contrast-ratio-font-weight	Number	`$kendo-font-weight-medium`	`500`
Description The font weight of the ColorGradient contrast ratio text.
$kendo-color-gradient-contrast-spacer	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The spacing between the items in the ColorGradient contrast tool.

Color System

Name	Type	Default value	Computed value
$kendo-color-white	Color	`#ffffff`	`#ffffff`
Description The color white. Note: you cannot change this value.
$kendo-color-black	Color	`#000000`	`#000000`
Description The color black. Note: you cannot change this value.
$kendo-color-primary	Color	`material-color( $primary-palette, main )`	`#3f51b5`
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	`material-color( $primary-palette, main-contrast )`	`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	`material-color( $secondary-palette, main )`	`#e51a5f`
Description The secondary color of the theme.
$kendo-color-secondary-contrast	Color	`material-color( $secondary-palette, main-contrast )`	`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	`material-color($tertiary-palette, main)`	`#00695c`
Description The tertiary color of the theme.
$kendo-color-tertiary-contrast	Color	`material-color($tertiary-palette, main-contrast)`	`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	`get-base-hue( gray, 800 )`	`#424242`
Description The dark color of the theme.
$kendo-color-light	Color	`get-base-hue( gray, 100 )`	`#f5f5f5`
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
$kendo-color-white	Color	`#ffffff`	`#ffffff`
Description The color white. Note: you cannot change this value.
$kendo-color-black	Color	`#000000`	`#000000`
Description The color black. Note: you cannot change this value.

Coloreditor

Name	Type	Default value	Computed value
$kendo-color-editor-spacer	Number	`k-map-get( $kendo-spacing, 3 )`	`12px`
Description The spacer of the ColorEditor.
$kendo-color-editor-min-width	Number	`294px`	`294px`
Description The minimum width of the ColorEditor.
$kendo-color-editor-border-width	Number	`1px`	`1px`
Description The width of the border around the ColorEditor.
$kendo-color-editor-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description The border radius of the ColorEditor.
$kendo-color-editor-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the ColorEditor.
$kendo-color-editor-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the ColorEditor.
$kendo-color-editor-line-height	Number	`$kendo-line-height-md`	`2`
Description The line height of the ColorEditor.
$kendo-color-editor-text	Color	`$kendo-component-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the ColorEditor.
$kendo-color-editor-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the ColorEditor.
$kendo-color-editor-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.12)`
Description The border color of the ColorEditor.
$kendo-color-editor-focus-border	Color	`$kendo-hover-border`	`rgba(0, 0, 0, 0.15)`
Description The border color of the focused ColorEditor.
$kendo-color-editor-focus-shadow	String	`$box-shadow-depth-3`	`var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))`
Description The box shadow of the focused ColorEditor.
$kendo-color-editor-header-padding-y	Number	`$kendo-color-editor-spacer`	`12px`
Description The vertical padding of the ColorEditor header.
$kendo-color-editor-header-padding-x	Number	`$kendo-color-editor-header-padding-y`	`12px`
Description The horizontal padding of the ColorEditor header.
$kendo-color-editor-header-actions-gap	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The spacing between the ColorEditor header actions.
$kendo-color-editor-color-preview-width	Number	`32px`	`32px`
Description The width of the ColorEditor preview.
$kendo-color-editor-color-preview-height	Number	`12px`	`12px`
Description The height of the ColorEditor preview.
$kendo-color-editor-preview-gap	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The spacing between the colors in the ColorEditor preview.
$kendo-color-editor-views-padding-y	Number	`$kendo-color-editor-spacer`	`12px`
Description The vertical padding of the ColorEditor views container.
$kendo-color-editor-views-padding-x	Number	`$kendo-color-editor-views-padding-y`	`12px`
Description The horizontal padding of the ColorEditor views container.
$kendo-color-editor-views-gap	Number	`$kendo-color-editor-spacer`	`12px`
Description The spacing of the ColorEditor views container.
$kendo-color-editor-color-gradient-focus-outline-color	Color	`rgba(0, 0, 0, .3)`	`rgba(0, 0, 0, 0.3)`
Description The outline color of the focused ColorGradient.
$kendo-color-editor-color-gradient-focus-outline	Number	`2px`	`2px`
Description The outline width of the focused ColorGradient.
$kendo-color-editor-color-gradient-focus-outline-offset	Number	`2px`	`2px`
Description The outline offset of the focused ColorGradient.

Colorpalette

Name	Type	Default value	Computed value
$kendo-color-palette-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the ColorPalette.
$kendo-color-palette-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the ColorPalette.
$kendo-color-palette-line-height	Number	`0`	`0`
Description The line height of the ColorPalette.
$kendo-color-palette-tile-width	Number	`k-map-get( $kendo-spacing, 6 )`	`24px`
Description The width of the ColorPalette tile.
$kendo-color-palette-tile-height	Number	`$kendo-color-palette-tile-width`	`24px`
Description The height of the ColorPalette tile.
$kendo-color-palette-tile-focus-shadow	List	`0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 )`	`0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.5)`
Description The shadow of the ColorPalette focused tile.
$kendo-color-palette-tile-hover-shadow	List	`0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 )`	`0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.8)`
Description The shadow of the ColorPalette hovered tile.
$kendo-color-palette-tile-selected-shadow	List	`0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 )`	`0 1px 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px white`
Description The shadow of the ColorPalette selected tile.

Component

Name	Type	Default value	Computed value
$kendo-component-bg	Color	`k-map-get( $theme, component-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	`k-map-get( $theme, component-text )`	`rgba(0, 0, 0, 0.87)`
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	`k-map-get( $theme, component-border )`	`rgba(0, 0, 0, 0.12)`
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;`.

Dialog

Name	Type	Default value	Computed value
$kendo-dialog-titlebar-bg	Null	`null`	`null`
Description The background color of the Dialog titlebar.
$kendo-dialog-titlebar-text	Null	`null`	`null`
Description The text color of the Dialog titlebar.
$kendo-dialog-titlebar-border	Null	`null`	`null`
Description The border color of the Dialog titlebar.
$kendo-dialog-buttongroup-padding-x	Number	`$kendo-actions-padding-x`	`8px`
Description The horizontal padding of the Dialog action buttons.
$kendo-dialog-buttongroup-padding-y	Number	`$kendo-actions-padding-y`	`8px`
Description The vertical padding of the Dialog action buttons.
$kendo-dialog-buttongroup-border-width	Number	`1px`	`1px`
Description The width of the top border of the Dialog action buttons.
$kendo-dialog-button-spacing	Number	`$kendo-actions-button-spacing`	`8px`
Description The spacing between the Dialog action buttons.
$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": #3f51b5, "light": #f5f5f5, "dark": #424242)`
Description The theme colors map for the Dialog.

Dock-manager

Name	Type	Default value	Computed value
$kendo-dock-manager-border-width	Number	`1px`	`1px`
Description The width of the border around the DockManager component.
$kendo-dock-manager-border-style	String	`solid`	`solid`
Description The style of the border around the DockManager component.
$kendo-dock-manager-border	Color	`$kendo-base-border`	`rgba(0, 0, 0, 0.08)`
Description The color of the border around the DockManager component.
$kendo-dock-manager-pane-header-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The vertical padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-padding-x	Number	`k-map-get( $kendo-spacing, 6 )`	`24px`
Description The horizontal padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-border-width	Number	`$kendo-dock-manager-border-width`	`1px`
Description The width of the border around the pane header in the DockManager component.
$kendo-dock-manager-pane-header-border-style	String	`solid`	`solid`
Description The style of the border around the pane header in the DockManager component.
$kendo-dock-manager-pane-header-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the pane header in the DockManager component.
$kendo-dock-manager-pane-title-padding-y	Null	`null`	`null`
Description The vertical padding of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-padding-x	Null	`null`	`null`
Description The horizontal padding of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-size	Number	`$kendo-font-size-lg`	`16px`
Description The font size of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-line-height	Number	`$kendo-line-height-sm`	`1.2`
Description The line height of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-weight	Number	`$kendo-font-weight-normal`	`400`
Description The font weight of the pane title in the DockManager component.
$kendo-dock-manager-pane-content-padding-x	Number	`$kendo-dock-manager-pane-header-padding-x`	`24px`
Description The horizontal padding of the pane content in the DockManager component.
$kendo-dock-manager-pane-content-padding-y	Number	`$kendo-dock-manager-pane-header-padding-x`	`24px`
Description The vertical padding of the pane content in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-y	Null	`null`	`null`
Description The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-x	Null	`null`	`null`
Description The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dock-manager-unpinned-container-width	Number	`300px`	`300px`
Description The width of the unpinned pane container in the DockManager component.
$kendo-dock-manager-unpinned-container-bg	Color	`$kendo-color-white`	`#ffffff`
Description The background-color of the unpinned pane container in the DockManager component.
$kendo-dock-manager-unpinned-container-shadow	List	`4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03)`	`4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03)`
Description The box shadow of the unpinned pane container in the DockManager component.
$kendo-dock-indicator-padding	Number	`k-map-get( $kendo-spacing, 1.5 )`	`6px`
Description The padding of the dock indicator in the DockManager component.
$kendo-dock-indicator-bg	Color	`$kendo-base-bg`	`#ffffff`
Description The background color of the dock indicator in the DockManager component.
$kendo-dock-indicator-text	Color	`$kendo-color-primary`	`#3f51b5`
Description The text color of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline-width	Number	`1px`	`1px`
Description The outline width of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline-style	String	`solid`	`solid`
Description The outline style of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline	Color	`$kendo-dock-indicator-text`	`#3f51b5`
Description The outline color of the dock indicator in the DockManager component.
$kendo-dock-indicator-shadow	List	`drop-shadow( 0px 1px 18px rgba(0, 0, 0, 0.12) ) drop-shadow( 0px 6px 10px rgba(0, 0, 0, 0.14) ) drop-shadow( 0px 3px 5px rgba(0, 0, 0, 0.20) )`	`drop-shadow(0px 1px 18px rgba(0, 0, 0, 0.12)) drop-shadow(0px 6px 10px rgba(0, 0, 0, 0.14)) drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2))`
Description The box shadow of the dock indicator in the DockManager component.
$kendo-dock-indicator-hover-bg	Color	`k-color-mix( $kendo-color-white, $kendo-color-primary, 8% )`	`#4e5fbb`
Description The background color of the hovered dock indicator in the DockManager component.
$kendo-dock-indicator-hover-text	Color	`$kendo-color-white`	`#ffffff`
Description The text color of the hovered dock indicator in the DockManager component.
$kendo-dock-manager-dock-preview-border-width	Number	`1px`	`1px`
Description The width of the border around the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border-style	String	`dashed`	`dashed`
Description The style of the border around the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border-radius	Number	`$kendo-border-radius-sm`	`2px`
Description The border radius of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-bg	Color	`rgba( $kendo-color-primary, .16 )`	`rgba(63, 81, 181, 0.16)`
Description The background color of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border	Color	`$kendo-color-primary`	`#3f51b5`
Description The border color of the dropping area in the DockManager component.

Dropdowntree

Name	Type	Default value	Computed value
$kendo-dropdowntree-popup-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the DropdownTree popup
$kendo-dropdowntree-popup-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The vertical padding of the DropdownTree popup

Editor

Name	Type	Default value	Computed value
$kendo-editor-border-width	Number	`1px`	`1px`
Description The width of the border around the Еditor.
$kendo-editor-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the Еditor.
$kendo-editor-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Еditor.
$kendo-editor-line-height	Number	`$kendo-line-height-md`	`2`
Description The line height of the Еditor.
$kendo-editor-placeholder-text	Color	`$kendo-input-placeholder-text`	`rgba(0, 0, 0, 0.54)`
Description The text color of the Еditor placeholder.
$kendo-editor-placeholder-opacity	Number	`$kendo-input-placeholder-opacity`	`1`
Description The opacity of the Editor placeholder.
$kendo-editor-selected-text	Color	`$kendo-color-primary-contrast`	`white`
Description The selected text color of the Editor.
$kendo-editor-selected-bg	Color	`$kendo-color-primary`	`#3f51b5`
Description The selected background color of the Editor.
$kendo-editor-highlighted-bg	Color	`k-color-mix($kendo-color-primary, #ffffff, 20%)`	`#d9dcf0`
Description The highlighted background color of the Editor.
$kendo-editor-export-tool-icon-margin-x	Number	`.5em`	`0.5em`
Description The horizontal margin of the Editor's export tool icon.
$kendo-editor-resize-handle-size	Number	`8px`	`8px`
Description The size of the Editor's resize handle.
$kendo-editor-resize-handle-border-width	Number	`1px`	`1px`
Description The border width of the Editor's resize handle.
$kendo-editor-resize-handle-border	Color	`#000000`	`#000000`
Description The border color of the Editor's resize handle.
$kendo-editor-resize-handle-bg	Color	`#ffffff`	`#ffffff`
Description The background color of the Editor's resize handle.
$kendo-editor-selectednode-outline-width	Number	`2px`	`2px`
Description The outline width of the Editor's selected node.
$kendo-editor-selectednode-outline-color	Color	`#88ccff`	`#88ccff`
Description The outline color of the Editor's selected node.

Elevation

Name	Type	Default value	Computed value
$kendo-elevation	Map	`$_default-elevation`	(1: (0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)), 2: (0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14)), 3: (0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14)), 4: (0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14)), 5: (0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14)), 6: (0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14)), 7: (0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14)), 8: (0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14)), 9: (0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14)))
Description The global default Elevation map.

Expander

Name	Type	Default value	Computed value
$kendo-expander-spacing-y	Number	`k-map-get( $kendo-spacing, 3 )`	`12px`
Description The vertical spacing of the ExpansionPanel.
$kendo-expander-border-width	Number	`1px`	`1px`
Description The width of the border around the ExpansionPanel.
$kendo-expander-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the ExpansionPanel.
$kendo-expander-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the ExpansionPanel.
$kendo-expander-line-height	Number	`$kendo-line-height-md`	`2`
Description The hine height of the ExpansionPanel.
$kendo-expander-text	Color	`$kendo-component-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the ExpansionPanel.
$kendo-expander-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the ExpansionPanel.
$kendo-expander-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.12)`
Description The border color of the ExpansionPanel.
$kendo-expander-focus-shadow	List	`inset 0 0 0 2px rgba( black, .08 )`	`inset 0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The box shadow of the focused ExpansionPanel.
$kendo-expander-header-padding-x	Number	`k-map-get( $kendo-spacing, 6 )`	`24px`
Description The horizontal padding of the ExpansionPanel header.
$kendo-expander-header-padding-y	Number	`k-map-get( $kendo-spacing, 3 )`	`12px`
Description The vertical padding of the ExpansionPanel header.
$kendo-expander-header-text	Color	`$kendo-expander-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the ExpansionPanel header.
$kendo-expander-header-bg	Color	`transparent`	`transparent`
Description The background color of the ExpansionPanel header.
$kendo-expander-header-border	Null	`null`	`null`
Description The border color of the ExpansionPanel header.
$kendo-expander-header-hover-bg	Color	`rgba( black, .04 )`	`rgba(0, 0, 0, 0.04)`
Description The background color of the hovered ExpansionPanel header.
$kendo-expander-header-focus-bg	Color	`rgba( black, .12 )`	`rgba(0, 0, 0, 0.12)`
Description The background color of the focused ExpansionPanel header.
$kendo-expander-header-focus-shadow	String	`none`	`none`
Description The box shadow of the focused ExpansionPanel header.
$kendo-expander-title-text	Color	`$kendo-color-secondary`	`#e51a5f`
Description The text color of the ExpansionPanel title.
$kendo-expander-header-sub-title-text	Color	`$kendo-subtle-text`	`rgba(0, 0, 0, 0.54)`
Description The text color of the ExpansionPanel sub-title.
$kendo-expander-indicator-margin-x	Number	`k-map-get( $kendo-spacing, 3 )`	`12px`
Description The horizontal margin of the ExpansionPanel indicator.
$kendo-expander-content-padding-x	Number	`k-map-get( $kendo-spacing, 6 )`	`24px`
Description The horizontal padding of the ExpansionPanel content.
$kendo-expander-content-padding-y	Number	`k-map-get( $kendo-spacing, 6 )`	`24px`
Description The vertical padding of the ExpansionPanel content.

Filter

Name	Type	Default value	Computed value
$kendo-filter-padding-x	Number	`$kendo-padding-sm-x`	`8px`
Description The horizontal padding of the Filter.
$kendo-filter-padding-y	Number	`$kendo-filter-padding-x`	`8px`
Description The vertical padding of the Filter.
$kendo-filter-bottom-margin	Number	`2.1em`	`2.1em`
Description The bottom margin of the Filter.
$kendo-filter-line-size	Number	`1px`	`1px`
Description The width of the line that connects the Filter items.
$kendo-filter-operator-dropdown-width	Number	`15em`	`15em`
Description The width of the dropdown elements in the Filter items.
$kendo-filter-preview-field-text	Color	`$kendo-color-primary`	`#3f51b5`
Description The text color of the Filter preview field.
$kendo-filter-preview-operator-text	Color	`$kendo-subtle-text`	`rgba(0, 0, 0, 0.54)`
Description The text color of the Filter preview operator.
$kendo-filter-toolbar-focus-shadow	List	`0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12)`	`0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12)`
Description The box shadow of the focused Filter toolbar.

Floating-action-button

Name	Type	Default value	Computed value
$kendo-fab-border-width	Number	`0px`	`0px`
Description The width of the border around the FAB.
$kendo-fab-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description The border radius of the FAB.
$kendo-fab-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the FAB.
$kendo-fab-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the FAB.
$kendo-fab-line-height	Number	`k-math-div( 20, 14 )`	`1.4285714286`
Description The line height of the FAB.
$kendo-fab-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The horizontal padding of the FAB.
$kendo-fab-sm-padding-x	Number	`k-math-div( $kendo-fab-padding-x, 2 )`	`8px`
Description The horizontal padding of the small FAB.
$kendo-fab-md-padding-x	Number	`$kendo-fab-padding-x`	`16px`
Description The horizontal padding of the medium FAB.
$kendo-fab-lg-padding-x	Number	`( $kendo-fab-padding-x * 1.5 )`	`24px`
Description The horizontal padding of the large FAB.
$kendo-fab-padding-y	Number	`$kendo-fab-padding-x`	`16px`
Description The vertical padding of the FAB.
$kendo-fab-sm-padding-y	Number	`k-math-div( $kendo-fab-padding-y, 2 )`	`8px`
Description The vertical padding of the small FAB.
$kendo-fab-md-padding-y	Number	`$kendo-fab-padding-y`	`16px`
Description The vertical padding of the medium FAB.
$kendo-fab-lg-padding-y	Number	`( $kendo-fab-padding-y * 1.5 )`	`24px`
Description The vertical padding of the large FAB.
$kendo-fab-icon-padding-x	Number	`k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description The horizontal padding of the FAB icon.
$kendo-fab-icon-padding-y	Number	`$kendo-fab-icon-padding-x`	`2px`
Description The vertical padding of the FAB icon.
$kendo-fab-icon-spacing	Number	`k-map-get( $kendo-spacing, 1 ) * 1.5`	`6px`
Description The spacing FAB icon.
$kendo-fab-items-padding-x	Number	`0px`	`0px`
Description The horizontal padding of the FAB items.
$kendo-fab-items-padding-y	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The vertical padding of the FAB items.
$kendo-fab-item-text-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal padding of the FAB item text.
$kendo-fab-item-text-padding-y	Number	`$kendo-fab-item-text-padding-x`	`4px`
Description The vertical padding of the FAB item text.
$kendo-fab-item-text-border-width	Number	`1px`	`1px`
Description The width of the FAB item text border.
$kendo-fab-item-text-border-radius	Number	`2px`	`2px`
Description The border radius of the FAB item text.
$kendo-fab-item-text-font-size	Number	`$kendo-font-size-xs`	`10px`
Description The font size of the FAB item text.
$kendo-fab-item-text-line-height	Number	`1.2`	`1.2`
Description The line height of the FAB item text.
$kendo-fab-item-icon-padding-x	Number	`k-map-get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x`	`10px`
Description The horizontal padding of the FAB item icon.
$kendo-fab-item-icon-padding-y	Number	`$kendo-fab-item-icon-padding-x`	`10px`
Description The vertical padding of the FAB item icon.
$kendo-fab-item-icon-border-width	Number	`0`	`0`
Description The border width of the FAB item icon.
$kendo-fab-item-icon-border-radius	Number	`50%`	`50%`
Description The border radius of the FAB item icon.
$kendo-fab-theme-colors	Map	`$kendo-theme-colors`	`("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242)`
Description The theme colors map for the FAB.
$kendo-fab-sizes	Map	`( sm: ( padding-x: $kendo-fab-sm-padding-x, padding-y: $kendo-fab-sm-padding-y ), md: ( padding-x: $kendo-fab-md-padding-x, padding-y: $kendo-fab-md-padding-y ), lg: ( padding-x: $kendo-fab-lg-padding-x, padding-y: $kendo-fab-lg-padding-y ) )`	`(sm: (padding-x: 8px, padding-y: 8px), md: (padding-x: 16px, padding-y: 16px), lg: (padding-x: 24px, padding-y: 24px))`
Description The size map for the FAB.
$kendo-fab-shadow	String	`$box-shadow-depth-5`	`var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))`
Description The base shadow of the FAB.
$kendo-fab-disabled-shadow	String	`$box-shadow-depth-5`	`var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))`
Description The shadow of the disabled FAB.
$kendo-fab-active-shadow	String	`$box-shadow-depth-7`	`var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))`
Description The shadow of the active FAB.
$kendo-fab-item-text	Color	`$kendo-component-text`	`rgba(0, 0, 0, 0.87)`
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.12)`
Description The base border color of the FAB item.
$kendo-fab-item-icon-text	Color	`$kendo-button-text`	`rgba(0, 0, 0, 0.87)`
Description The base text color of the FAB item icon.
$kendo-fab-item-icon-bg	Color	`$kendo-button-bg`	`#ffffff`
Description The base background color of the FAB item icon.
$kendo-fab-item-icon-border	Color	`$kendo-button-border`	`#ffffff`
Description The base border color of the FAB item icon.
$kendo-fab-item-shadow	String	`$kendo-fab-shadow`	`var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))`
Description The base shadow of the FAB item.
$kendo-fab-item-disabled-shadow	String	`$kendo-fab-disabled-shadow`	`var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))`
Description The shadow of the disabled FAB item.
$kendo-fab-item-active-shadow	String	`$kendo-fab-active-shadow`	`var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))`
Description The shadow of the active FAB item.

Floating-label

Name	Type	Default value	Computed value
$kendo-floating-label-scale	Number	`1`	`1`
Description The transformation scale of the Floating Label.
$kendo-floating-label-font-size	Number	`$kendo-input-font-size`	`16px`
Description The font size of the Floating Label.
$kendo-floating-label-max-width	Number	`90%`	`90%`
Description The maximum width of the Floating Label.
$kendo-floating-label-line-height	Number	`$kendo-input-line-height`	`1.25`
Description The line height of the Floating Label.
$kendo-floating-label-height	Calculation	`calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )`	`calc(1.25 * 16px)`
Description The height of the Floating Label.
$kendo-floating-label-offset-x	Calculation	`calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )`	`calc(16px + 1px)`
Description The horizontal offset of the Floating Label.
$kendo-floating-label-offset-y	Calculation	`calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} )`	`calc(calc(1.25 * 16px) + 1px + 8px)`
Description The vertical offset of the Floating Label.
$kendo-floating-label-focus-scale	Number	`.75`	`0.75`
Description The transformation scale of the focused Floating Label.
$kendo-floating-label-focus-offset-x	Number	`0px`	`0px`
Description The horizontal offset of the focused Floating Label.
$kendo-floating-label-focus-offset-y	Number	`0px`	`0px`
Description The vertical offset of the focused Floating Label.
$kendo-floating-label-transition	List	`.15s cubic-bezier( .4, 0, .2, 1 )`	`0.15s cubic-bezier(0.4, 0, 0.2, 1)`
Description The transition of the Floating Label.
$kendo-floating-label-bg	Null	`null`	`null`
Description The background color of the Floating Label.
$kendo-floating-label-text	Color	`$kendo-subtle-text`	`rgba(0, 0, 0, 0.54)`
Description The text color of the Floating Label.
$kendo-floating-label-focus-bg	Null	`null`	`null`
Description The background color of the focused Floating Label.
$kendo-floating-label-focus-text	Color	`$kendo-color-primary`	`#3f51b5`
Description The text color of the focused Floating Label.

Form

Name	Type	Default value	Computed value
$kendo-form-spacer	Number	`$kendo-padding-md-x * 2`	`32px`
Description The padding of the inline Form.
$kendo-form-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Form.
$kendo-form-line-height	Number	`$kendo-line-height-md`	`2`
Description The line height of the Form.
$kendo-form-line-height-em	Calculation	`calc( #{$kendo-form-line-height} * 1em )`	`calc(2 * 1em)`
Description The line height of the Form in em units.
$kendo-form-sm-line-height	Number	`$kendo-line-height-sm`	`1.2`
Description The line height of the small Form.
$kendo-form-lg-line-height	Number	`$kendo-line-height-lg`	`1.5`
Description The line height of the large Form.
$kendo-form-fieldset-margin	List	`2em 0 0`	`2em 0 0`
Description The margin of the Form fieldset.
$kendo-form-fieldset-padding	Number	`0px`	`0px`
Description The padding of the Form fieldset.
$kendo-form-legend-margin	List	`0 0 1em`	`0 0 1em`
Description The margin of the Form legend.
$kendo-form-legend-padding	Number	`0px`	`0px`
Description The padding of the Form legend.
$kendo-form-legend-border-width	List	`0 0 2px`	`0 0 2px`
Description The border width of the Form legend.
$kendo-form-legend-border-style	String	`solid`	`solid`
Description The border style of the Form legend.
$kendo-form-legend-border-color	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.12)`
Description The border color of the Form legend.
$kendo-form-legend-width	Number	`100%`	`100%`
Description The width of the Form legend.
$kendo-form-legend-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Form legend.
$kendo-form-legend-text-transform	String	`uppercase`	`uppercase`
Description The text capitalization of the Form legend.
$kendo-form-label-margin-bottom	Number	`0px`	`0px`
Description The bottom margin of the Form label.
$kendo-form-button-margin-x	Number	`8px`	`8px`
Description The horizontal margin of the Form buttons.
$kendo-form-hint-font-size	Number	`$kendo-font-size-sm`	`12px`
Description The font size of the Form hint.
$kendo-form-hint-font-style	String	`normal`	`normal`
Description The font style of the Form hint.
$kendo-form-hint-margin-top	Number	`4px`	`4px`
Description The top margin of the Form hint.
$kendo-form-sm-rows-spacing	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The row spacing of the small Form.
$kendo-form-md-rows-spacing	Number	`k-map-get( $kendo-spacing, 6 )`	`24px`
Description The row spacing of the medium Form.
$kendo-form-lg-rows-spacing	Number	`k-map-get( $kendo-spacing, 7 )`	`28px`
Description The row spacing of the large Form.
$kendo-form-separator-margin	List	`$kendo-form-md-rows-spacing 0 0`	`24px 0 0`
Description The margin of the Form separator.
$kendo-form-separator-border-color	Color	`$kendo-form-legend-border-color`	`rgba(0, 0, 0, 0.12)`
Description The border color of the Form separator.
$kendo-horizontal-form-label-padding-top	Number	`5px`	`5px`
Description The top padding of the label in the horizontal Form.
$kendo-horizontal-form-label-margin-x	Number	`10px`	`10px`
Description The horizontal margin of the label in the horizontal Form.
$kendo-horizontal-form-label-width	Number	`25%`	`25%`
Description The width of the label in the horizontal Form.
$kendo-horizontal-form-label-align	String	`flex-end`	`flex-end`
Description The horizontal alignment of the label in the horizontal Form.
$kendo-horizontal-form-field-wrap-max-width	Calculation	`calc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} )`	`calc(100% - 25% - 10px)`
Description The maximum width of the field wrap in the horizontal Form.
$kendo-inline-form-element-width	Number	`25%`	`25%`
Description The width of the inline Form element.
$kendo-forms-invalid-color	String	`inherit`	`inherit`
Description The invalid text color of the Form.
$kendo-label-optional-margin-x	Number	`6px`	`6px`
Description The horizontal margin of the optional label in the Form.
$kendo-label-optional-font-size	Number	`12px`	`12px`
Description The font size of the optional label in the Form.
$kendo-label-optional-font-style	String	`italic`	`italic`
Description The font style of the optional label in the Form.
$kendo-fieldset-margin	Number	`30px`	`30px`
Description The margin of the Form fieldset.
$kendo-fieldset-font-size	Number	`$kendo-h4-font-size`	`34px`
Description The font size of the Form fieldset.
$kendo-fieldset-bg	Null	`null`	`null`
Description The background color of the Form fieldset.
$kendo-fieldset-text	Null	`null`	`null`
Description The text color of the Form fieldset.
$kendo-fieldset-border	Null	`null`	`null`
Description The border color of the Form fieldset.
$kendo-fieldset-legend-bg	Null	`null`	`null`
Description The background color of the Form legend.
$kendo-fieldset-legend-text	Null	`null`	`null`
Description The text color of the Form legend.
$kendo-fieldset-legend-border	Null	`null`	`null`
Description The border color of the Form legend.
$kendo-form-sizes	Map	`( sm: ( form-rows-spacing: $kendo-form-sm-rows-spacing ), md: ( form-rows-spacing: $kendo-form-md-rows-spacing ), lg: ( form-rows-spacing: $kendo-form-lg-rows-spacing ) )`	`(sm: (form-rows-spacing: 16px), md: (form-rows-spacing: 24px), lg: (form-rows-spacing: 28px))`
Description The sizes map for the Form.

Grid

Name	Type	Default value	Computed value
$kendo-grid-padding-x	Number	`$kendo-table-md-cell-padding-x`	`24px`
Description Horizontal padding of the grid.
$kendo-grid-padding-y	Number	`$kendo-table-md-cell-padding-y`	`10px`
Description Vertical padding of the grid.
$kendo-grid-header-padding-x	Number	`$kendo-grid-padding-x`	`24px`
Description Horizontal padding of the grid header.
$kendo-grid-header-padding-y	Number	`16px`	`16px`
Description Vertical padding of the grid header.
$kendo-grid-grouping-header-padding-x	Number	`8px`	`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`	`24px`
Description Horizontal padding of the grid cell.
$kendo-grid-cell-padding-y	Number	`$kendo-grid-padding-y`	`10px`
Description Vertical padding of the grid cell.
$kendo-grid-filter-cell-padding-x	Number	`$kendo-grid-padding-x`	`24px`
Description Horizontal padding of the grid filter cell.
$kendo-grid-filter-cell-padding-y	Number	`$kendo-grid-padding-y`	`10px`
Description Vertical padding of the grid filter cell.
$kendo-grid-edit-cell-padding-x	Number	`$kendo-grid-cell-padding-x`	`24px`
Description Horizontal padding of the grid edit cell.
$kendo-grid-edit-cell-padding-y	Number	`6px`	`6px`
Description Vertical padding of the grid edit cell.
$kendo-grid-bg	Color	`$kendo-table-bg`	`#ffffff`
Description Background color of the grid component
$kendo-grid-text	Color	`$kendo-table-text`	`rgba(0, 0, 0, 0.87)`
Description Text color of the grid component
$kendo-grid-border	Color	`$kendo-table-border`	`rgba(0, 0, 0, 0.12)`
Description Border color of the grid component
$kendo-grid-header-bg	Color	`$kendo-table-header-bg`	`#ffffff`
Description Background color of grid header
$kendo-grid-header-text	Color	`$kendo-table-header-text`	`rgba(0, 0, 0, 0.54)`
Description Background color of grid header
$kendo-grid-header-border	Color	`$kendo-table-header-border`	`rgba(0, 0, 0, 0.12)`
Description Border color of grid header
$kendo-grid-header-gradient	Null	`null`	`null`
Description Background gradient of grid header
$kendo-grid-footer-bg	Color	`$kendo-table-footer-bg`	`#ffffff`
Description Background color of grid footer
$kendo-grid-footer-text	Color	`$kendo-table-footer-text`	`rgba(0, 0, 0, 0.54)`
Description Text color of grid footer
$kendo-grid-footer-border	Color	`$kendo-table-footer-border`	`rgba(0, 0, 0, 0.12)`
Description Border color of grid footer
$kendo-grid-alt-bg	Color	`$kendo-table-alt-row-bg`	`transparent`
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 Text color of alternating rows in grid
$kendo-grid-hover-bg	Color	`$kendo-table-hover-bg`	`rgba(0, 0, 0, 0.07)`
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	Color	`$kendo-table-hover-border`	`rgba(0, 0, 0, 0.12)`
Description Border color of hovered rows in grid
$kendo-grid-selected-bg	Color	`$kendo-table-selected-bg`	`rgba(0, 0, 0, 0.04)`
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
$kendo-grid-selection-aggregates-bg	Color	`$kendo-grid-header-bg`	`#ffffff`
Description Background color of the selection aggregates container
$kendo-grid-selection-aggregates-text	Color	`$kendo-grid-text`	`rgba(0, 0, 0, 0.87)`
Description Text color of the selection aggregates container
$kendo-grid-selection-aggregates-border	Color	`$kendo-grid-border`	`rgba(0, 0, 0, 0.12)`
Description Border color of the selection aggregates container
$kendo-grid-selection-aggregates-border-width	Number	`$kendo-grid-border-width`	`1px`
Description Border width of the selection aggregates container
$kendo-grid-selection-aggregates-spacing	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Spacing between the selection aggregates items
$kendo-grid-selection-aggregates-line-height	Number	`20px`	`20px`
Description Line height of the selection aggregates container
$kendo-grid-selection-aggregates-font-weight	Number	`$kendo-font-weight-bold`	`700`
Description Font weight of the selection aggregates container
$kendo-grid-row-resizer-hover-bg	Color	`rgba( k-contrast-color( $kendo-grid-bg ), .24 )`	`rgba(0, 0, 0, 0.24)`
Description Background color of the grid row resize indicator
$kendo-grid-row-resizer-active-bg	Color	`$kendo-color-primary`	`#3f51b5`
Description Active background color of the grid row resize indicator
$kendo-grid-row-resizer-height	Number	`k-map-get( $kendo-spacing, .5 )`	`2px`
Description Height of the grid row resize indicator

Input

Name	Type	Default value	Computed value
$kendo-input-default-width	Number	`100%`	`100%`
Description The default width of the Input components.
$kendo-input-border-width	Number	`1px`	`1px`
Description The border width of the Input components.
$kendo-input-border-radius	Null	`null`	`null`
Description The border radius of the Input components.
$kendo-input-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The horizontal padding of the Input components.
$kendo-input-sm-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The horizontal padding of the small Input components.
$kendo-input-md-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The horizontal padding of the medium Input components.
$kendo-input-lg-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The horizontal padding of the large Input components.
$kendo-input-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The vertical padding of the Input components.
$kendo-input-sm-padding-y	Number	`k-map-get( $kendo-spacing, 1.5 )`	`6px`
Description The vertical padding of the small Input components.
$kendo-input-md-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The vertical padding of the medium Input components.
$kendo-input-lg-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The vertical padding of the large Input components.
$kendo-input-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the Input components.
$kendo-input-font-size	Number	`$kendo-font-size-lg`	`16px`
Description The font size of the Input components.
$kendo-input-sm-font-size	Number	`$kendo-font-size-lg`	`16px`
Description The font size of the small Input components.
$kendo-input-md-font-size	Number	`$kendo-font-size-lg`	`16px`
Description The font size of the medium Input components.
$kendo-input-lg-font-size	Number	`$kendo-font-size-lg`	`16px`
Description The font size of the large Input components.
$kendo-input-line-height	Number	`1.25`	`1.25`
Description The line height of the Input components.
$kendo-input-sm-line-height	Number	`1.25`	`1.25`
Description The line height of the small Input components.
$kendo-input-md-line-height	Number	`1.25`	`1.25`
Description The line height of the medium Input components.
$kendo-input-lg-line-height	Number	`1.5`	`1.5`
Description The line height of the large Input components.
$kendo-input-sizes	Map	( sm: ( padding-x: $kendo-input-sm-padding-x, padding-y: $kendo-input-sm-padding-y, font-size: $kendo-input-sm-font-size, line-height: $kendo-input-sm-line-height, button-padding-x: k-map-get( $kendo-spacing, 1 ), button-padding-y: k-map-get( $kendo-spacing, 1 ) ), md: ( padding-x: $kendo-input-md-padding-x, padding-y: $kendo-input-md-padding-y, font-size: $kendo-input-md-font-size, line-height: $kendo-input-md-line-height, button-padding-x: k-map-get( $kendo-spacing, 1 ), button-padding-y: k-map-get( $kendo-spacing, 1 ) ), lg: ( padding-x: $kendo-input-lg-padding-x, padding-y: $kendo-input-lg-padding-y, font-size: $kendo-input-lg-font-size, line-height: $kendo-input-lg-line-height, button-padding-x: k-map-get( $kendo-spacing, 1 ), button-padding-y: k-map-get( $kendo-spacing, 1 ) ) )	`(sm: (padding-x: 16px, padding-y: 6px, font-size: 16px, line-height: 1.25, button-padding-x: 4px, button-padding-y: 4px), md: (padding-x: 16px, padding-y: 8px, font-size: 16px, line-height: 1.25, button-padding-x: 4px, button-padding-y: 4px), lg: (padding-x: 16px, padding-y: 8px, font-size: 16px, line-height: 1.5, button-padding-x: 4px, button-padding-y: 4px))`
Description The sizes map for the Input components.
$kendo-input-bg	Color	`k-try-shade( $kendo-component-bg, .5 )`	`whitesmoke`
Description The background color of the Input components.
$kendo-input-text	Color	`$kendo-component-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the Input components.
$kendo-input-border	Color	`rgba( $kendo-component-border, .38 )`	`rgba(0, 0, 0, 0.38)`
Description The border color of the Input components.
$kendo-input-shadow	Null	`null`	`null`
Description The shadow of the Input components.
$kendo-input-hover-bg	Null	`null`	`null`
Description The background color of the hovered Input components.
$kendo-input-hover-text	Null	`null`	`null`
Description The text color of the hovered Input components.
$kendo-input-hover-border	Color	`$kendo-input-text`	`rgba(0, 0, 0, 0.87)`
Description The border color of the hovered Input components.
$kendo-input-hover-shadow	Null	`null`	`null`
Description The shadow of the hovered Input components.
$kendo-input-focus-bg	Null	`null`	`null`
Description The background color of the focused Input components.
$kendo-input-focus-text	Null	`null`	`null`
Description The text color of the focused Input components.
$kendo-input-focus-border	Color	`$kendo-color-primary`	`#3f51b5`
Description The border color of the focused Input components.
$kendo-input-focus-shadow	Null	`null`	`null`
Description The shadow of the focused Input components.
$kendo-input-selected-bg	Null	`null`	`null`
Description The background color of the selected Input components.
$kendo-input-selected-text	Null	`null`	`null`
Description The text color of the selected Input components.
$kendo-input-disabled-bg	Color	`k-try-shade( $kendo-component-bg, .25 )`	`#fafafa`
Description The background color of the disabled Input components.
$kendo-input-disabled-text	Color	`$kendo-disabled-text`	`rgba(0, 0, 0, 0.38)`
Description The text color of the disabled Input components.
$kendo-input-disabled-border	Color	`rgba( $kendo-component-border, k-math-div( k-color-alpha( $kendo-component-border ), 2 ) )`	`rgba(0, 0, 0, 0.06)`
Description The border color of the disabled Input components.
$kendo-input-disabled-gradient	Null	`null`	`null`
Description The gradient of the disabled Input components.
$kendo-input-disabled-shadow	Null	`null`	`null`
Description The shadow of the disabled Input components.
$kendo-input-outline-bg	Null	`null`	`null`
Description The background color of the outline Input components.
$kendo-input-outline-text	Color	`$kendo-input-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the outline Input components.
$kendo-input-outline-border	Color	`$kendo-input-border`	`rgba(0, 0, 0, 0.38)`
Description The border color of the outline Input components.
$kendo-input-outline-hover-bg	Null	`null`	`null`
Description The background color of the outline hovered Input components.
$kendo-input-outline-hover-text	Null	`null`	`null`
Description The text color of the outline hovered Input components.
$kendo-input-outline-hover-border	Color	`$kendo-input-hover-border`	`rgba(0, 0, 0, 0.87)`
Description The border color of the outline hovered Input components.
$kendo-input-outline-focus-bg	Null	`null`	`null`
Description The background color of the outline focused Input components.
$kendo-input-outline-focus-text	Null	`null`	`null`
Description The text color of the outline focused Input components.
$kendo-input-outline-focus-border	Color	`$kendo-input-focus-border`	`#3f51b5`
Description The border color of the outline focused Input components.
$kendo-input-outline-focus-shadow	Null	`$kendo-input-focus-shadow`	`null`
Description The shadow of the outline focused Input components.
$kendo-input-flat-bg	Null	`null`	`null`
Description The background color of the flat Input components.
$kendo-input-flat-text	Color	`$kendo-input-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the flat Input components.
$kendo-input-flat-border	Color	`$kendo-input-border`	`rgba(0, 0, 0, 0.38)`
Description The border color of the flat Input components.
$kendo-input-flat-hover-bg	Null	`null`	`null`
Description The background color of the flat hovered Input components.
$kendo-input-flat-hover-text	Null	`null`	`null`
Description The text color of the flat hovered Input components.
$kendo-input-flat-hover-border	Color	`$kendo-input-hover-border`	`rgba(0, 0, 0, 0.87)`
Description The border color of the flat hovered Input components.
$kendo-input-flat-focus-bg	Null	`null`	`null`
Description The background color of the flat focused Input components.
$kendo-input-flat-focus-text	Null	`null`	`null`
Description The text color of the flat focused Input components.
$kendo-input-flat-focus-border	Color	`$kendo-input-focus-border`	`#3f51b5`
Description The border color of the flat focused Input components.
$kendo-input-flat-focus-shadow	Null	`$kendo-input-focus-shadow`	`null`
Description The shadow of the flat focused Input components.
$kendo-input-placeholder-text	Color	`$kendo-subtle-text`	`rgba(0, 0, 0, 0.54)`
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	Null	`null`	`null`
Description The width of the Input button.
$kendo-input-button-border-width	Number	`1px`	`1px`
Description The border width of the Input button.
$kendo-input-spinner-width	Null	`null`	`null`
Description The width of the Input spinner button.
$kendo-input-spinner-icon-offset	Null	`null`	`null`
Description The icon offset of the Input spinner button.
$kendo-input-separator-color	Color	`$kendo-input-text`	`rgba(0, 0, 0, 0.87)`
Description The color of the Input separator.
$kendo-input-separator-opacity	Number	`.5`	`0.5`
Description The opacity of the Input separator.
$kendo-input-invalid-border	Color	`$kendo-invalid-border`	`#f31700`
Description The border color of the invalid Input components.
$kendo-input-invalid-shadow	Null	`$kendo-invalid-shadow`	`null`
Description The shadow of the invalid Input components.

List

Name	Type	Default value	Computed value
$kendo-list-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the List components.
$kendo-list-font-size	Null	`null`	`null`
Description The font size of the List component, if no size is set.
$kendo-list-line-height	Null	`null`	`null`
Description The line height of the List component, if no size is set.
$kendo-list-header-padding-x	Null	`null`	`null`
Description The horizontal padding of the List header, if no size is set.
$kendo-list-header-padding-y	Null	`null`	`null`
Description The vertical padding of the List header, if no size is set.
$kendo-list-header-border-width	List	`0 0 1px`	`0 0 1px`
Description The border width of the List header.
$kendo-list-header-font-size	Null	`null`	`null`
Description The font size of the List header, if no size is set.
$kendo-list-header-line-height	Null	`null`	`null`
Description The line height of the List header, if no size is set.
$kendo-list-header-font-weight	Number	`$kendo-font-weight-bold`	`700`
Description The font weight of the List header.
$kendo-list-item-padding-x	Null	`null`	`null`
Description The horizontal padding of the List items, when no size is set.
$kendo-list-item-padding-y	Null	`null`	`null`
Description The vertical padding of the List items, when no size is set.
$kendo-list-item-font-size	Null	`null`	`null`
Description The font size of the List items, if no size is set.
$kendo-list-item-line-height	Null	`null`	`null`
Description The line height of the List items, if no size is set.
$kendo-list-group-item-padding-x	Null	`null`	`null`
Description The horizontal padding of the List group items, when no size is set.
$kendo-list-group-item-padding-y	Null	`null`	`null`
Description The vertical padding of the List group items, when no size is set.
$kendo-list-group-item-border-width	List	`1px 0 0`	`1px 0 0`
Description The border width of the List group items.
$kendo-list-group-item-font-size	Null	`null`	`null`
Description The font size of the List group items, if no size is set.
$kendo-list-group-item-line-height	Null	`null`	`null`
Description The line height of the List group items, if no size is set.
$kendo-list-group-item-font-weight	Number	`$kendo-font-weight-bold`	`700`
Description The font weight of a List group item.
$kendo-list-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the List component.
$kendo-list-text	Color	`$kendo-component-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the List component.
$kendo-list-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.12)`
Description The border color of the List component.
$kendo-list-header-bg	Null	`null`	`null`
Description The background color of the List header.
$kendo-list-header-text	Null	`null`	`null`
Description The text color of the List header.
$kendo-list-header-border	String	`inherit`	`inherit`
Description The border color of the List header.
$kendo-list-header-shadow	Null	`null`	`null`
Description The box shadow of the List header.
$kendo-list-item-bg	Null	`null`	`null`
Description The background color of the List items.
$kendo-list-item-text	Null	`null`	`null`
Description The text color of the List items.
$kendo-list-item-hover-bg	Color	`$kendo-hover-bg`	`rgba(0, 0, 0, 0.04)`
Description The background color of the hovered List items.
$kendo-list-item-hover-text	Color	`$kendo-hover-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the hovered List items.
$kendo-list-item-focus-bg	Color	`$kendo-list-item-hover-bg`	`rgba(0, 0, 0, 0.04)`
Description The background color of the focused List items.
$kendo-list-item-focus-text	Null	`null`	`null`
Description The text color of the focused List items.
$kendo-list-item-focus-shadow	Null	`null`	`null`
Description The box shadow of the focused List items.
$kendo-list-item-selected-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the selected List items.
$kendo-list-item-selected-text	Color	`$kendo-color-secondary`	`#e51a5f`
Description The text color of the selected List items.
$kendo-list-group-item-bg	Null	`null`	`null`
Description The background color of the List group items.
$kendo-list-group-item-text	Null	`null`	`null`
Description The text color of the List group items.
$kendo-list-group-item-border	String	`inherit`	`inherit`
Description The border color of the List group items.
$kendo-list-group-item-shadow	Null	`null`	`null`
Description The base shadow of the List group items.
$kendo-list-no-data-text	Color	`$kendo-subtle-text`	`rgba(0, 0, 0, 0.54)`
Description The color of the 'No Data' text.
$kendo-list-option-label-text	Color	`$kendo-subtle-text`	`rgba(0, 0, 0, 0.54)`
Description The color of the 'Option Label' text.

Listbox

Name	Type	Default value	Computed value
$kendo-listbox-spacing	Number	`k-map-get( $kendo-spacing, 3 )`	`12px`
Description The spacing between the ListBox elements.
$kendo-listbox-button-spacing	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The spacing between the ListBox buttons.
$kendo-listbox-width	Number	`10em`	`10em`
Description The width of the ListBox.
$kendo-listbox-default-height	Number	`200px`	`200px`
Description The height of the ListBox.
$kendo-listbox-border-width	Number	`1px`	`1px`
Description The width of the border around the ListBox.
$kendo-listbox-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the ListBox.
$kendo-listbox-font-size	Number	`$kendo-list-md-font-size`	`14px`
Description The font size of the ListBox.
$kendo-listbox-line-height	Number	`$kendo-list-md-line-height`	`1.4285714286`
Description The line height of the ListBox.
$kendo-listbox-text	Color	`$kendo-component-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the ListBox.
$kendo-listbox-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the ListBox.
$kendo-listbox-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.12)`
Description The border color of the ListBox.
$kendo-listbox-item-padding-x	Number	`$kendo-list-md-item-padding-x`	`16px`
Description The inline padding of the ListBox item.
$kendo-listbox-item-padding-y	Number	`$kendo-list-md-item-padding-y`	`8px`
Description The block padding of the ListBox item.
$kendo-listbox-drop-hint-width	Number	`2px`	`2px`
Description The width of the ListBox drop hint.
$kendo-listbox-drop-hint-border-width	Number	`2px`	`2px`
Description The width of the border around the ListBox drop hint.

Listview

Name	Type	Default value	Computed value
$kendo-listview-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal padding of the ListView.
$kendo-listview-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The vertical padding of the ListView.
$kendo-listview-border-width	Number	`1px`	`1px`
Description The width of the border around bordered ListView.
$kendo-listview-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the ListView.
$kendo-listview-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the ListView.
$kendo-listview-line-height	Number	`$kendo-line-height-md`	`2`
Description The line height of the ListView.
$kendo-listview-text	Color	`$kendo-component-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the ListView.
$kendo-listview-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the ListView.
$kendo-listview-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.12)`
Description The border color of the ListView.
$kendo-listview-item-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal padding of the ListView items.
$kendo-listview-item-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The vertical padding of the ListView items.
$kendo-listview-item-selected-text	Null	`null`	`null`
Description The text color of the selected ListView items.
$kendo-listview-item-selected-bg	Color	`rgba( k-contrast-color( $kendo-listview-bg ), .04 )`	`rgba(0, 0, 0, 0.04)`
Description The background color of the selected ListView items.
$kendo-listview-item-selected-border	Null	`null`	`null`
Description The border color of the selected ListView items.
$kendo-listview-item-focus-text	Null	`null`	`null`
Description The text color of the focused ListView items.
$kendo-listview-item-focus-bg	Color	`rgba( k-contrast-color( $kendo-listview-bg ), .08 )`	`rgba(0, 0, 0, 0.08)`
Description The background color of the focused ListView items.
$kendo-listview-item-focus-border	Null	`null`	`null`
Description The border color of the focused ListView items.
$kendo-listview-item-focus-shadow	Null	`null`	`null`
Description The box shadow of the focused ListView items.

Loader

Name	Type	Default value	Computed value
$kendo-loader-segment-border-radius	Number	`50%`	`50%`
Description The border radius of the Loader segment.
$kendo-loader-sm-segment-size	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The size of the small Loader segment.
$kendo-loader-md-segment-size	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The size of the medium Loader segment.
$kendo-loader-lg-segment-size	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The size of the large Loader segment.
$kendo-loader-sm-padding	Number	`k-math-div( $kendo-loader-sm-segment-size, 2 )`	`2px`
Description The padding of the small Loader.
$kendo-loader-md-padding	Number	`k-math-div( $kendo-loader-md-segment-size, 2 )`	`4px`
Description The padding of the medium Loader.
$kendo-loader-lg-padding	Number	`k-math-div( $kendo-loader-lg-segment-size, 2 )`	`8px`
Description The padding of the large Loader.
$kendo-loader-sm-spinner-3-width	Number	`( $kendo-loader-sm-segment-size * 4 )`	`16px`
Description The width of the small spinner-3 Loader.
$kendo-loader-md-spinner-3-width	Number	`( $kendo-loader-md-segment-size * 4 )`	`32px`
Description The width of the medium spinner-3 Loader.
$kendo-loader-lg-spinner-3-width	Number	`( $kendo-loader-lg-segment-size * 4 )`	`64px`
Description The width of the large spinner-3 Loader.
$kendo-loader-sm-spinner-3-height	Number	`( $kendo-loader-sm-spinner-3-width * $equilateral-height )`	`13.8564064608px`
Description The height of the small spinner-3 Loader.
$kendo-loader-md-spinner-3-height	Number	`( $kendo-loader-md-spinner-3-width * $equilateral-height )`	`27.7128129216px`
Description The height of the medium spinner-3 Loader.
$kendo-loader-lg-spinner-3-height	Number	`( $kendo-loader-lg-spinner-3-width * $equilateral-height )`	`55.4256258432px`
Description The height of the large spinner-3 Loader.
$kendo-loader-sm-spinner-4-width	Number	`$kendo-loader-sm-segment-size * 4`	`16px`
Description The width of the small spinner-4 Loader.
$kendo-loader-md-spinner-4-width	Number	`$kendo-loader-md-segment-size * 4`	`32px`
Description The width of the medium spinner-4 Loader.
$kendo-loader-lg-spinner-4-width	Number	`$kendo-loader-lg-segment-size * 4`	`64px`
Description The width of the large spinner-4 Loader.
$kendo-loader-sm-spinner-4-height	Number	`$kendo-loader-sm-spinner-4-width`	`16px`
Description The height of the small spinner-4 Loader.
$kendo-loader-md-spinner-4-height	Number	`$kendo-loader-md-spinner-4-width`	`32px`
Description The height of the medium spinner-4 Loader.
$kendo-loader-lg-spinner-4-height	Number	`$kendo-loader-lg-spinner-4-width`	`64px`
Description The height of the large spinner-4 Loader.
$kendo-loader-secondary-bg	Color	`#000000`	`#000000`
Description The color of the Loader based on the secondary theme color.
$kendo-loader-container-panel-border-width	Number	`1px`	`1px`
Description The border width of the container panel.
$kendo-loader-container-panel-border-style	String	`solid`	`solid`
Description The border style of the container panel.
$kendo-loader-container-panel-border-color	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.12)`
Description The border color of the container panel.
$kendo-loader-container-panel-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description The border radius of the container panel.
$kendo-loader-container-panel-bg	Color	`$kendo-color-white`	`#ffffff`
Description The background color of the container panel.
$kendo-loader-sm-container-padding	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The padding of the small Loader container.
$kendo-loader-md-container-padding	Number	`k-map-get( $kendo-spacing, 5 )`	`20px`
Description The padding of the medium Loader container.
$kendo-loader-lg-container-padding	Number	`k-map-get( $kendo-spacing, 6 )`	`24px`
Description The padding of the large Loader container.
$kendo-loader-sm-container-gap	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The gap of the small Loader container.
$kendo-loader-md-container-gap	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The gap of the medium Loader container.
$kendo-loader-lg-container-gap	Number	`k-map-get( $kendo-spacing, 3 )`	`12px`
Description The gap of the large Loader container.
$kendo-loader-sm-container-font-size	Number	`$kendo-font-size-sm`	`12px`
Description The font size of the small Loader container.
$kendo-loader-md-container-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the medium Loader container.
$kendo-loader-lg-container-font-size	Number	`$kendo-font-size-lg`	`16px`
Description The font size of the large Loader container.

Loading

Name	Type	Default value	Computed value
$kendo-loading-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the Loading indicator.
$kendo-loading-text	String	`currentColor`	`currentColor`
Description The text color of the Loading indicator.
$kendo-loading-opacity	Number	`.3`	`0.3`
Description The opacity of the Loading indicator.

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`	`0px`
Description Width of the border around the menu popup.
$kendo-menu-popup-font-size	Number	`$kendo-font-size-lg`	`16px`
Description Font sizes of the menu popup.
$kendo-menu-popup-line-height	Number	`1.25`	`1.25`
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`	`rgba(0, 0, 0, 0.87)`
Description The text color of the menu popup.
$kendo-menu-popup-border	Color	`$kendo-popup-border`	`rgba(0, 0, 0, 0.12)`
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, 4 )`	`16px`
Description Horizontal padding of the menu item in popup.
$kendo-menu-popup-item-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
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(32px + 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`	`16px`
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(32px + 16px) - 8px))`
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`	`rgba(0, 0, 0, 0.04)`
Description The background of hovered menu item in popup.
$kendo-menu-popup-item-hover-text	Color	`$kendo-list-item-hover-text`	`rgba(0, 0, 0, 0.87)`
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`	`#ffffff`
Description The background of expanded menu item in popup.
$kendo-menu-popup-item-expanded-text	Color	`$kendo-list-item-selected-text`	`#e51a5f`
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	Null	`null`	`null`
Description The base shadow of focused menu item in popup.

Name	Type	Default value	Computed value
$kendo-menu-button-arrow-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal padding of the button arrow in the Menu Button.

Notification

Name	Type	Default value	Computed value
$kendo-notification-padding-x	Number	`16px`	`16px`
Description The horizontal padding of the Notification.
$kendo-notification-padding-y	Number	`14px`	`14px`
Description The vertical padding of the Notification.
$kendo-notification-border-width	Number	`0px`	`0px`
Description The width of the border around the Notification.
$kendo-notification-border-radius	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The border radius of the Notification.
$kendo-notification-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the Notification.
$kendo-notification-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Notification.
$kendo-notification-line-height	Number	`k-math-div( 20, 14 )`	`1.4285714286`
Description The line height of the Notification.
$kendo-notification-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the Notification.
$kendo-notification-text	Color	`$kendo-component-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the Notification.
$kendo-notification-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.12)`
Description The border color of the Notification.
$kendo-notification-shadow	String	`$kendo-popup-shadow`	`var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))`
Description The box shadow of the Notification.
$kendo-notification-icon-spacing	Number	`$kendo-icon-spacing`	`8px`
Description The horizontal spacing of the Notification icon.
$kendo-notification-theme-colors	Map	`$kendo-theme-colors`	`("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242)`
Description The theme colors map for the Notification.
$kendo-notification-theme	Map	`notification-theme( $kendo-notification-theme-colors )`	("inverse": (color: white, background-color: #424242, border: #424242), "light": (color: black, background-color: #f5f5f5, border: #f5f5f5), "dark": (color: white, background-color: #424242, border: #424242), "error": (color: black, background-color: #f31700, border: #f31700), "warning": (color: black, background-color: #ffc000, border: #ffc000), "success": (color: black, background-color: #37b400, border: #37b400), "info": (color: white, background-color: #0058e9, border: #0058e9), "tertiary": (color: white, background-color: #00695c, border: #00695c), "secondary": (color: white, background-color: #e51a5f, border: #e51a5f), "primary": (color: white, background-color: #3f51b5, border: #3f51b5))
Description The generated theme colors map for the Notification.

Name	Type	Default value	Computed value
$kendo-pager-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the Pager.
$kendo-pager-sm-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal padding of the small Pager.
$kendo-pager-md-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the medium Pager.
$kendo-pager-lg-padding-x	Number	`k-map-get( $kendo-spacing, 2.5 )`	`10px`
Description The horizontal padding of the large Pager.
$kendo-pager-padding-y	Number	`$kendo-pager-padding-x`	`8px`
Description The vertical padding of the Pager.
$kendo-pager-sm-padding-y	Number	`$kendo-pager-sm-padding-x`	`4px`
Description The vertical padding of the small Pager.
$kendo-pager-md-padding-y	Number	`$kendo-pager-md-padding-x`	`8px`
Description The vertical padding of the medium Pager.
$kendo-pager-lg-padding-y	Number	`$kendo-pager-lg-padding-x`	`10px`
Description The vertical padding of the large Pager.
$kendo-pager-sm-item-min-width	Calculation	`$kendo-button-sm-calc-size`	`calc(1.4285714286em + 12px + 2px)`
Description The minimum width of the items in the small Pager.
$kendo-pager-md-item-min-width	Calculation	`$kendo-button-md-calc-size`	`calc(1.4285714286em + 16px + 2px)`
Description The minimum width of the items in the medium Pagers.
$kendo-pager-lg-item-min-width	Calculation	`$kendo-button-lg-calc-size`	`calc(1.4285714286em + 20px + 2px)`
Description The minimum width of the items in the large Pagers.
$kendo-pager-sm-item-group-spacing	Number	`k-map-get( $kendo-spacing, 1.5 )`	`6px`
Description The margin between the item groups in the small Pager.
$kendo-pager-md-item-group-spacing	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The margin between the item groups in the medium Pager.
$kendo-pager-lg-item-group-spacing	Number	`k-map-get( $kendo-spacing, 2.5 )`	`10px`
Description The margin between the item groups in the large Pager.
$kendo-pager-border-width	Number	`1px`	`1px`
Description The border width of the Pager.
$kendo-pager-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the Pager.
$kendo-pager-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Pager.
$kendo-pager-line-height	Number	`$kendo-line-height-md`	`2`
Description The line height of the Pager.
$kendo-pager-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the Pager.
$kendo-pager-text	Color	`if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text )`	`rgba(0, 0, 0, 0.54)`
Description The text color of the Pager.
$kendo-pager-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.12)`
Description The border color of the Pager.
$kendo-pager-focus-bg	Color	`k-try-shade( $kendo-pager-bg, .5 )`	`whitesmoke`
Description The background color of the focused Pager.
$kendo-pager-focus-shadow	Null	`null`	`null`
Description The box shadow of the focused Pager.
$kendo-pager-section-spacing	Number	`$kendo-pager-padding-x`	`8px`
Description The spacing between the Pager sections.
$kendo-pager-item-border-width	Number	`0px`	`0px`
Description The border width of the Pager items.
$kendo-pager-item-border-radius	Number	`5em`	`5em`
Description The border radius of the Pager items.
$kendo-pager-item-spacing	Number	`0px`	`0px`
Description The spacing around the Pager items.
$kendo-pager-item-bg	Null	`null`	`null`
Description The background color of the Pager items.
$kendo-pager-item-text	Null	`null`	`null`
Description The text color of the Pager items.
$kendo-pager-item-border	Null	`null`	`null`
Description The border color of the Pager items.
$kendo-pager-item-hover-bg	Color	`$kendo-list-item-hover-bg`	`rgba(0, 0, 0, 0.04)`
Description The background color of the hovered Pager items.
$kendo-pager-item-hover-text	Color	`$kendo-pager-text`	`rgba(0, 0, 0, 0.54)`
Description The text color of the hovered Pager items.
$kendo-pager-item-hover-border	Null	`null`	`null`
Description The border color of the hovered Pager items.
$kendo-pager-item-selected-bg	Color	`$kendo-color-primary`	`#3f51b5`
Description The background color of the selected Pager items.
$kendo-pager-item-selected-text	Color	`$kendo-color-primary-contrast`	`white`
Description The text color of the selected Pager items.
$kendo-pager-item-selected-border	Null	`null`	`null`
Description The border color of the selected Pager items.
$kendo-pager-number-border-radius	Number	`$kendo-pager-item-border-radius`	`5em`
Description The border radius of the Pager numbers.
$kendo-pager-item-focus-opacity	Number	`.12`	`0.12`
Description The opacity of the focused Pager items.
$kendo-pager-item-focus-bg	Color	`rgba($kendo-list-item-hover-bg, $kendo-pager-item-focus-opacity)`	`rgba(0, 0, 0, 0.12)`
Description The background color of the focused Pager items.
$kendo-pager-item-focus-shadow	Null	`null`	`null`
Description The box shadow of the focused Pager items.
$kendo-pager-input-width	Number	`5em`	`5em`
Description The width of the Inputs in the Pager.
$kendo-pager-sm-dropdown-width	Number	`5em`	`5em`
Description The width of the DropDowns in the small Pager.
$kendo-pager-md-dropdown-width	Number	`5em`	`5em`
Description The width of the DropDowns in the medium Pager.
$kendo-pager-lg-dropdown-width	Number	`5em`	`5em`
Description The width of the DropDowns in the large Pager.
$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: 6px, item-min-width: calc(1.4285714286em + 12px + 2px), pager-dropdown-width: 5em), md: (padding-x: 8px, padding-y: 8px, item-group-spacing: 8px, item-min-width: calc(1.4285714286em + 16px + 2px), pager-dropdown-width: 5em), lg: (padding-x: 10px, padding-y: 10px, item-group-spacing: 10px, item-min-width: calc(1.4285714286em + 20px + 2px), pager-dropdown-width: 5em))`
Description The sizes map of the Pager.

Picker

Name	Type	Default value	Computed value
$kendo-picker-bg	Color	`$kendo-input-bg`	`whitesmoke`
Description The background color of the Picker components.
$kendo-picker-text	Color	`$kendo-input-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the Picker components.
$kendo-picker-border	Color	`$kendo-input-border`	`rgba(0, 0, 0, 0.38)`
Description The border color of the Picker components.
$kendo-picker-gradient	Null	`null`	`null`
Description The gradient of the Picker components.
$kendo-picker-shadow	Null	`$kendo-input-shadow`	`null`
Description The shadow of the Picker components.
$kendo-picker-hover-bg	Null	`$kendo-input-hover-bg`	`null`
Description The background color of the hovered Picker components.
$kendo-picker-hover-text	Null	`$kendo-input-hover-text`	`null`
Description The text color of the hovered Picker components.
$kendo-picker-hover-border	Color	`$kendo-input-hover-border`	`rgba(0, 0, 0, 0.87)`
Description The border color of the hovered Picker components.
$kendo-picker-hover-gradient	Null	`null`	`null`
Description The gradient of the hovered Picker components.
$kendo-picker-hover-shadow	Null	`$kendo-input-hover-shadow`	`null`
Description The shadow of the hovered Picker components.
$kendo-picker-focus-bg	Null	`$kendo-input-focus-bg`	`null`
Description The background color of the focused Picker components.
$kendo-picker-focus-text	Null	`$kendo-input-focus-text`	`null`
Description The text color of the focused Picker components.
$kendo-picker-focus-border	Color	`$kendo-input-focus-border`	`#3f51b5`
Description The border color of the focused Picker components.
$kendo-picker-focus-gradient	Null	`null`	`null`
Description The gradient of the focused Picker components.
$kendo-picker-focus-shadow	Null	`$kendo-input-focus-shadow`	`null`
Description The shadow of the focused Picker components.
$kendo-picker-disabled-bg	Color	`$kendo-input-disabled-bg`	`#fafafa`
Description The background color of the disabled Picker components.
$kendo-picker-disabled-text	Color	`$kendo-input-disabled-text`	`rgba(0, 0, 0, 0.38)`
Description The text color of the disabled Picker components.
$kendo-picker-disabled-border	Color	`$kendo-input-disabled-border`	`rgba(0, 0, 0, 0.06)`
Description The border color of the disabled Picker components.
$kendo-picker-disabled-gradient	Null	`null`	`null`
Description The gradient of the disabled Picker components.
$kendo-picker-disabled-shadow	Null	`null`	`null`
Description The shadow of the disabled Picker components.
$kendo-picker-outline-bg	Null	`null`	`null`
Description The background color of the outline Picker components.
$kendo-picker-outline-text	Color	`$kendo-picker-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the outline Picker components.
$kendo-picker-outline-border	Color	`$kendo-picker-border`	`rgba(0, 0, 0, 0.38)`
Description The border color of the outline Picker components.
$kendo-picker-outline-hover-bg	Null	`null`	`null`
Description The background color of the outline hovered Picker components.
$kendo-picker-outline-hover-text	Null	`null`	`null`
Description The text color of the outline hovered Picker components.
$kendo-picker-outline-hover-border	Color	`$kendo-picker-hover-border`	`rgba(0, 0, 0, 0.87)`
Description The border color of the outline hovered Picker components.
$kendo-picker-outline-focus-bg	String	`nul`	`nul`
Description The background color of the outline focused Picker components.
$kendo-picker-outline-focus-text	Null	`null`	`null`
Description The text color of the outline focused Picker components.
$kendo-picker-outline-focus-border	Color	`$kendo-picker-focus-border`	`#3f51b5`
Description The border color of the outline focused Picker components.
$kendo-picker-outline-focus-shadow	Null	`null`	`null`
Description The shadow of the outline focused Picker components.
$kendo-picker-outline-hover-focus-bg	Null	`null`	`null`
Description The background color of the outline hovered and focused Picker components.
$kendo-picker-outline-hover-focus-text	Null	`null`	`null`
Description The text color of the outline hovered and focused Picker components.
$kendo-picker-outline-hover-focus-border	Null	`null`	`null`
Description The border color of the outline hovered and focused Picker components.
$kendo-picker-flat-bg	Null	`null`	`null`
Description The background color of the flat Picker components.
$kendo-picker-flat-text	Color	`$kendo-picker-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the flat Picker components.
$kendo-picker-flat-border	Color	`$kendo-picker-border`	`rgba(0, 0, 0, 0.38)`
Description The border color of the flat Picker components.
$kendo-picker-flat-hover-bg	Null	`null`	`null`
Description The background color of the flat hovered Picker components.
$kendo-picker-flat-hover-text	Null	`null`	`null`
Description The text color of the flat hovered Picker components.
$kendo-picker-flat-focus-bg	Null	`null`	`null`
Description The background color of the flat focused Picker components.
$kendo-picker-flat-focus-text	Null	`null`	`null`
Description The text color of the flat focused Picker components.
$kendo-picker-flat-focus-border	Color	`$kendo-picker-focus-border`	`#3f51b5`
Description The border color of the flat focused Picker components.
$kendo-picker-flat-focus-shadow	Null	`null`	`null`
Description The shadow of the flat focused Picker components.
$kendo-picker-flat-hover-focus-bg	Null	`null`	`null`
Description The background color of the flat hovered and focused Picker components.
$kendo-picker-flat-hover-focus-text	Null	`null`	`null`
Description The text color of the flat hovered and focused Picker components.
$kendo-picker-flat-hover-focus-border	Null	`null`	`null`
Description The border color of the flat hovered and focused Picker components.

Pickers

Name	Type	Default value	Computed value
$kendo-picker-flat-hover-border	Color	`$kendo-picker-hover-border`	`rgba(0, 0, 0, 0.87)`
Description The border color of the flat hovered Picker components.

Name	Type	Default value	Computed value
$kendo-popover-border-width	Number	`1px`	`1px`
Description The width of the border around the Popover.
$kendo-popover-border-style	String	`solid`	`solid`
Description The style of the border around the Popover.
$kendo-popover-border-radius	Number	`$kendo-card-border-radius`	`4px`
Description The radius of the border around the Popover.
$kendo-popover-font-family	List	`$kendo-card-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the Popover.
$kendo-popover-font-size	Number	`$kendo-card-font-size`	`14px`
Description The font size of the Popover.
$kendo-popover-line-height	Number	`$kendo-card-line-height`	`1.4285714286`
Description The line height of the Popover.
$kendo-popover-text	Color	`$kendo-component-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the Popover.
$kendo-popover-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the Popover.
$kendo-popover-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.12)`
Description The border color of the Popover.
$kendo-popover-shadow	String	`$kendo-card-shadow`	`var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))`
Description The box shadow of the Popover.
$kendo-popover-header-padding-x	Number	`$kendo-card-header-padding-x`	`16px`
Description The horizontal padding of the Popover header.
$kendo-popover-header-padding-y	Number	`$kendo-card-header-padding-y`	`12px`
Description The vertical padding of the Popover header.
$kendo-popover-header-border-width	Number	`$kendo-card-header-border-width`	`1px`
Description The border width of the Popover header.
$kendo-popover-header-border-style	String	`$kendo-popover-border-style`	`solid`
Description The border style of the Popover header.
$kendo-popover-header-text	Null	`$kendo-card-header-text`	`null`
Description The text color of the Popover header.
$kendo-popover-header-bg	Null	`$kendo-card-header-bg`	`null`
Description The background color of the Popover header.
$kendo-popover-header-border	Color	`$kendo-card-header-border`	`rgba(0, 0, 0, 0.12)`
Description The border color of the Popover header.
$kendo-popover-body-padding-x	Number	`$kendo-card-body-padding-x`	`16px`
Description The horizontal padding of the Popover body.
$kendo-popover-body-padding-y	Number	`$kendo-card-body-padding-y`	`16px`
Description The vertical padding of the Popover body.
$kendo-popover-actions-border-width	Number	`$kendo-popover-border-width`	`1px`
Description The border width of the Popover actions.
$kendo-popover-callout-width	Number	`$kendo-card-callout-width`	`20px`
Description The width of the Popover callout.
$kendo-popover-callout-height	Number	`$kendo-card-callout-height`	`20px`
Description The height of the Popover callout.
$kendo-popover-callout-border-width	Number	`$kendo-popover-border-width`	`1px`
Description The border width of the Popover callout.
$kendo-popover-callout-border-style	String	`$kendo-popover-border-style`	`solid`
Description The border style of the Popover callout.
$kendo-popover-callout-bg	Color	`$kendo-popover-bg`	`#ffffff`
Description The background color of the Popover callout.
$kendo-popover-callout-border	Color	`$kendo-popover-border`	`rgba(0, 0, 0, 0.12)`
Description The border color of the Popover callout.

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	`0px`	`0px`
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`	`2`
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`	`rgba(0, 0, 0, 0.87)`
Description Text color of the popup.
$kendo-popup-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.12)`
Description Border color of the popup.
$kendo-popup-shadow	String	`$box-shadow-depth-4`	`var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))`
Description Box shadow of the popup.

Progressbar

Name	Type	Default value	Computed value
$kendo-progressbar-height	Number	`5px`	`5px`
Description The height of the ProgressBar.
$kendo-progressbar-horizontal-width	Number	`100%`	`100%`
Description The horizontal width of the ProgressBar.
$kendo-progressbar-animation-timing	Null	`null`	`null`
Description The animation timing of the ProgressBar.
$kendo-progressbar-border-width	Number	`0px`	`0px`
Description The width of the border around the ProgressBar.
$kendo-progressbar-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the ProgressBar.
$kendo-progressbar-font-size	Number	`$kendo-font-size-sm`	`12px`
Description The font size of the ProgressBar.
$kendo-progressbar-line-height	Number	`1`	`1`
Description The line height of the ProgressBar.
$kendo-progressbar-bg	Color	`k-try-tint( $kendo-color-primary, 8 )`	`#bac0e4`
Description The background color of the ProgressBar.
$kendo-progressbar-text	Color	`$kendo-component-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the ProgressBar.
$kendo-progressbar-border	Null	`null`	`null`
Description The border color of the ProgressBar.
$kendo-progressbar-gradient	Null	`null`	`null`
Description The background gradient of the ProgressBar.
$kendo-progressbar-value-bg	Color	`$kendo-color-primary`	`#3f51b5`
Description The progress background color of the ProgressBar.
$kendo-progressbar-value-text	Color	`$kendo-color-primary-contrast`	`white`
Description The progress text color of the ProgressBar.
$kendo-progressbar-value-border	Null	`null`	`null`
Description The progress border color of the ProgressBar.
$kendo-progressbar-value-gradient	Null	`null`	`null`
Description The progress background gradient of the ProgressBar.
$kendo-progressbar-indeterminate-bg	Color	`$kendo-progressbar-bg`	`#bac0e4`
Description The background color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-text	Color	`$kendo-progressbar-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-border	Null	`$kendo-progressbar-border`	`null`
Description The border color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-gradient	Null	`null`	`null`
Description The background gradient of the indeterminate ProgressBar.
$kendo-progressbar-chunk-border	Color	`$kendo-component-bg`	`#ffffff`
Description The border color of the chunk ProgressBar.
$kendo-circular-progressbar-arc-stroke	Color	`$kendo-color-primary`	`#3f51b5`
Description The arc stroke color of the circular ProgressBar.
$kendo-circular-progressbar-scale-stroke	Color	`$kendo-progressbar-bg`	`#bac0e4`
Description The scale stroke background color of the circular ProgressBar.

Radio

Name	Type	Default value	Computed value
$kendo-radio-radius	Number	`50%`	`50%`
Description The border radius of the RadioButton.
$kendo-radio-border-width	Number	`2px`	`2px`
Description The border width of the RadioButton.
$kendo-radio-sm-size	Number	`k-map-get( $kendo-spacing, 3 )`	`12px`
Description The size of a small RadioButton.
$kendo-radio-md-size	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The size of a medium RadioButton.
$kendo-radio-lg-size	Number	`k-map-get( $kendo-spacing, 5 )`	`20px`
Description The size of a large RadioButton.
$kendo-radio-sm-glyph-size	Number	`k-map-get( $kendo-spacing, 2.5 )`	`10px`
Description The glyph size of a small RadioButton.
$kendo-radio-md-glyph-size	Number	`k-map-get( $kendo-spacing, 3.5 )`	`14px`
Description The glyph size of a medium RadioButton.
$kendo-radio-lg-glyph-size	Number	`k-map-get( $kendo-spacing, 4.5 )`	`18px`
Description The glyph size of a large RadioButton.
$kendo-radio-sm-ripple-size	Number	`300%`	`300%`
Description The ripple size of a small RadioButton.
$kendo-radio-md-ripple-size	Number	`300%`	`300%`
Description The ripple size of a medium RadioButton.
$kendo-radio-lg-ripple-size	Number	`300%`	`300%`
Description The ripple size of a large RadioButton.
$kendo-radio-sizes	Map	`( sm: ( size: $kendo-radio-sm-size, glyph-size: $kendo-radio-sm-glyph-size, ripple-size: $kendo-radio-sm-ripple-size ), md: ( size: $kendo-radio-md-size, glyph-size: $kendo-radio-md-glyph-size, ripple-size: $kendo-radio-md-ripple-size ), lg: ( size: $kendo-radio-lg-size, glyph-size: $kendo-radio-lg-glyph-size, ripple-size: $kendo-radio-lg-ripple-size ) )`	`(sm: (size: 12px, glyph-size: 10px, ripple-size: 300%), md: (size: 16px, glyph-size: 14px, ripple-size: 300%), lg: (size: 20px, glyph-size: 18px, ripple-size: 300%))`
Description The map with the different RadioButton sizes.
$kendo-radio-bg	Null	`$kendo-checkbox-bg`	`null`
Description The background color of the RadioButton.
$kendo-radio-text	Null	`$kendo-checkbox-text`	`null`
Description The color of the RadioButton.
$kendo-radio-border	Color	`$kendo-checkbox-border`	`rgba(0, 0, 0, 0.54)`
Description The border color of the RadioButton.
$kendo-radio-hover-bg	Null	`null`	`null`
Description The background color of the hovered RadioButton.
$kendo-radio-hover-text	Null	`null`	`null`
Description The color of the hovered RadioButton.
$kendo-radio-hover-border	Null	`null`	`null`
Description The border color of the hovered RadioButton.
$kendo-radio-checked-bg	Null	`null`	`null`
Description The background color of the checked RadioButton.
$kendo-radio-checked-text	Color	`$kendo-color-primary`	`#3f51b5`
Description The color of the checked RadioButton.
$kendo-radio-checked-border	Color	`$kendo-radio-checked-text`	`#3f51b5`
Description The border color of the checked RadioButton.
$kendo-radio-focus-border	Null	`$kendo-checkbox-focus-border`	`null`
Description The border color of the focused RadioButton.
$kendo-radio-focus-shadow	Null	`$kendo-checkbox-focus-shadow`	`null`
Description The box shadow of the focused RadioButton.
$kendo-radio-focus-checked-border	Null	`$kendo-checkbox-focus-checked-border`	`null`
Description The border color of the focused and checked RadioButton.
$kendo-radio-focus-checked-shadow	Null	`$kendo-checkbox-focus-checked-shadow`	`null`
Description The box shadow of the focused and checked RadioButton.
$kendo-radio-disabled-bg	Null	`null`	`null`
Description The background color of the disabled RadioButton.
$kendo-radio-disabled-text	Null	`null`	`null`
Description The color of the disabled RadioButton.
$kendo-radio-disabled-border	Color	`$kendo-checkbox-disabled-border`	`#adadad`
Description The border color of the disabled RadioButton.
$kendo-radio-disabled-checked-bg	Null	`null`	`null`
Description The background color of the disabled and checked RadioButton.
$kendo-radio-disabled-checked-text	Color	`$kendo-radio-disabled-border`	`#adadad`
Description The color of the disabled and checked RadioButton.
$kendo-radio-disabled-checked-border	Color	`$kendo-radio-disabled-border`	`#adadad`
Description The border color of disabled and checked RadioButton.
$kendo-radio-invalid-bg	Null	`$kendo-checkbox-invalid-bg`	`null`
Description The background color of the invalid RadioButton.
$kendo-radio-invalid-text	Color	`$kendo-checkbox-invalid-text`	`#f31700`
Description The color of the invalid RadioButton.
$kendo-radio-invalid-border	Color	`$kendo-checkbox-invalid-border`	`#f31700`
Description The border color of the invalid RadioButton.
$kendo-radio-indicator-type	String	`image`	`image`
Description The type of the RadioButton indicator.
$kendo-radio-glyph-font-family	List	`"WebComponentsIcons", monospace`	`"WebComponentsIcons", monospace`
Description The font family of the RadioButton indicator glyph.
$kendo-radio-checked-glyph	String	`"\e308"`	`"\e308"`
Description The glyph of the RadioButton 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 12 12'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='%233f51b5'/%3e%3c/svg%3e")`
Description The image of the checked RadioButton indicator.
$kendo-radio-disabled-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 12 12'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='%23adadad'/%3e%3c/svg%3e")`
Description The image of the disabled and checked RadioButton indicator.
$kendo-radio-label-margin-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal margin of the RadioButton inside of a label.
$kendo-radio-list-spacing	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The horizontal list item margin of the RadioButton.
$kendo-radio-list-item-padding-x	Number	`0px`	`0px`
Description The horizontal list item padding of the RadioButton.
$kendo-radio-list-item-padding-y	Number	`$kendo-list-md-item-padding-y`	`8px`
Description The vertical list item padding of the RadioButton.
$kendo-radio-ripple-bg	Color	`$kendo-color-primary`	`#3f51b5`
Description The background color of the RadioButton ripple..
$kendo-radio-ripple-opacity	Number	`.2`	`0.2`
Description The opacity of the RadioButton ripple.

Scrollview

Name	Type	Default value	Computed value
$kendo-scrollview-border-width	Number	`1px`	`1px`
Description The width of the border around the ScrollView.
$kendo-scrollview-font-family	List	`$kendo-font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description The font family of the ScrollView.
$kendo-scrollview-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the ScrollView.
$kendo-scrollview-line-height	Number	`$kendo-line-height-md`	`2`
Description The line height of the ScrollView.
$kendo-scrollview-text	Color	`$kendo-component-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of the ScrollView.
$kendo-scrollview-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the ScrollView.
$kendo-scrollview-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.12)`
Description The border color of the ScrollView.
$kendo-scrollview-pagebutton-size	Number	`10px`	`10px`
Description The size of the ScrollView page button.
$kendo-scrollview-pagebutton-bg	Color	`$kendo-button-bg`	`#ffffff`
Description The background color of the ScrollView page button.
$kendo-scrollview-pagebutton-border	Color	`$kendo-button-border`	`#ffffff`
Description The border color of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-bg	Color	`$kendo-color-primary`	`#3f51b5`
Description The primary background color of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-border	Color	`$kendo-color-primary`	`#3f51b5`
Description The primary border color of the ScrollView page button.
$kendo-scrollview-pagebutton-shadow	List	`0 0 0 2px rgba( black, .13 )`	`0 0 0 2px rgba(0, 0, 0, 0.13)`
Description The box shadow of the ScrollView page button.
$kendo-scrollview-pager-offset	Number	`0`	`0`
Description The offset of the ScrollView pager.
$kendo-scrollview-pager-item-spacing	Number	`20px`	`20px`
Description The spacing between the ScrollView pager items.
$kendo-scrollview-pager-item-border-width	Number	`0px`	`0px`
Description The border width of the ScrollView pager items.
$kendo-scrollview-pager-height	Calculation	`calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} )`	`calc(10px + 0px + 40px)`
Description The height of the ScrollView pager.
$kendo-scrollview-arrow-tap-highlight-color	Color	`$kendo-color-rgba-transparent`	`rgba(0, 0, 0, 0)`
Description The text color of the highlight over the tapped ScrollView navigation arrows.
$kendo-scrollview-navigation-color	Color	`white`	`white`
Description The color of the ScrollView navigation arrows.
$kendo-scrollview-navigation-icon-shadow	List	`rgba( black, .3 ) 0 0 15px`	`rgba(0, 0, 0, 0.3) 0 0 15px`
Description The box shadow of the ScrollView navigation arrows.
$kendo-scrollview-navigation-bg	Color	`rgba( black, 0 )`	`rgba(0, 0, 0, 0)`
Description The background color of the ScrollView navigation.
$kendo-scrollview-navigation-default-opacity	Number	`.7`	`0.7`
Description The opacity of the ScrollView navigation.
$kendo-scrollview-navigation-hover-opacity	Number	`1`	`1`
Description The hover opacity of the ScrollView navigation.
$kendo-scrollview-navigation-hover-span-bg	Null	`null`	`null`
Description The hover background color of the ScrollView navigation arrows.
$kendo-scrollview-light-bg	Color	`rgba( white, .4 )`	`rgba(255, 255, 255, 0.4)`
Description The background color of the ScrollView pager in light mode.
$kendo-scrollview-dark-bg	Color	`rgba( black, .4 )`	`rgba(0, 0, 0, 0.4)`
Description The background color of the ScrollView pager in dark mode.
$kendo-scrollview-transition-duration	Number	`.3s`	`0.3s`
Description The duration of the ScrollView transition.
$kendo-scrollview-transition-timing-function	String	`ease-in-out`	`ease-in-out`
Description The timing function of the ScrollView transition.

Shadows

Name	Type	Default value	Computed value
$elevation	Color	`k-map-get( $theme, elevation )`	`#000000`
Description Color of shadows
$box-shadow-depth-1	String	`k-elevation(1)`	`var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for switch. Equivalent to material elevation 1.
$box-shadow-depth-2	String	`k-elevation(2)`	`var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14))`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for resting state of button, card and other widgets. Equivalent to material elevation 2.
$box-shadow-depth-3	String	`k-elevation(3)`	`var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for menu, popups and raised state of button and card. Equivalent to material elevation 3.
$box-shadow-depth-4	String	`k-elevation(4)`	`var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for drawers and other overlaying elements. Equivalent to material elevation 4.
$box-shadow-depth-5	String	`k-elevation(5)`	`var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for window and dialog. Equivalent to material elevation 6.
$box-shadow-depth-6	String	`k-elevation(6)`	`var(--kendo-elevation-6, 0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14))`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for window and dialog. Equivalent to material elevation 8.
$box-shadow-depth-7	String	`k-elevation(7)`	`var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for window and dialog. Equivalent to material elevation 12.
$box-shadow-depth-8	String	`k-elevation(8)`	`var(--kendo-elevation-8, 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14))`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for window and dialog. Equivalent to material elevation 16.
$box-shadow-depth-9	String	`k-elevation(9)`	`var(--kendo-elevation-9, 0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14))`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for window and dialog. Equivalent to material elevation 24.

Split-button

Name	Type	Default value	Computed value
$kendo-split-button-focus-shadow	Null	`$kendo-button-focus-shadow`	`null`
Description The focus shadow of the SplitButton.
$kendo-split-button-arrow-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal padding of the arrow Button.
$kendo-split-button-sm-arrow-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal padding of the large arrow Button.
$kendo-split-button-arrow-padding-y	Number	`$kendo-button-padding-y`	`8px`
Description The vertical padding of the arrow Button.
$kendo-split-button-sm-arrow-padding-y	Number	`$kendo-button-sm-padding-y`	`6px`
Description The vertical padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-y	Number	`$kendo-button-md-padding-y`	`8px`
Description The vertical padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-y	Number	`$kendo-button-lg-padding-y`	`10px`
Description The vertical padding of the large arrow Button.

Switch

Name	Type	Default value	Computed value
$kendo-switch-font-family	Null	`null`	`null`
Description The font family of the Switch.
$kendo-switch-track-border-width	Null	`null`	`null`
Description The border width of the Switch track.
$kendo-switch-thumb-border-width	Null	`null`	`null`
Description The border width of the Switch thumb.
$kendo-switch-label-text-transform	Null	`null`	`null`
Description The text transform of the Switch label.
$kendo-switch-label-display	String	`none`	`none`
Description The display of the Switch label.
$kendo-switch-sizes	Map	`( sm: ( font-size: null, track-width: 26px, track-height: 12px, thumb-width: 16px, thumb-height: 16px, thumb-offset: -2px, label-offset: 0px ), md: ( font-size: null, track-width: 32px, track-height: 14px, thumb-width: 20px, thumb-height: 20px, thumb-offset: -3px, label-offset: 0px ), lg: ( font-size: null, track-width: 38px, track-height: 16px, thumb-width: 24px, thumb-height: 24px, thumb-offset: -4px, label-offset: 0px ) )`	`(sm: (font-size: null, track-width: 26px, track-height: 12px, thumb-width: 16px, thumb-height: 16px, thumb-offset: -2px, label-offset: 0px), md: (font-size: null, track-width: 32px, track-height: 14px, thumb-width: 20px, thumb-height: 20px, thumb-offset: -3px, label-offset: 0px), lg: (font-size: null, track-width: 38px, track-height: 16px, thumb-width: 24px, thumb-height: 24px, thumb-offset: -4px, label-offset: 0px))`
Description The map with the different Switch sizes.
$kendo-switch-off-track-bg	Color	`rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .38 )`	`rgba(0, 0, 0, 0.38)`
Description The background of the track when the Switch is not checked.
$kendo-switch-off-track-text	Null	`null`	`null`
Description The text color of the track when the Switch is not checked.
$kendo-switch-off-track-border	Null	`null`	`null`
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	Null	`null`	`null`
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	`if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )`	`#ffffff`
Description The background of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-text	Null	`null`	`null`
Description The text color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-border	Null	`null`	`null`
Description The border color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-hover-bg	Null	`null`	`null`
Description The background of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-text	Null	`null`	`null`
Description The text color of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-border	Null	`null`	`null`
Description The border color of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the hovered Switch is not checked.
$kendo-switch-on-track-bg	Color	`rgba( $kendo-color-primary, .54 )`	`rgba(63, 81, 181, 0.54)`
Description The background of the track when the Switch is checked.
$kendo-switch-on-track-text	Null	`null`	`null`
Description The text color of the track when the Switch is checked.
$kendo-switch-on-track-border	Null	`null`	`null`
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	Null	`null`	`null`
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-color-primary`	`#3f51b5`
Description The background of the thumb when the Switch is checked.
$kendo-switch-on-thumb-text	Null	`null`	`null`
Description The text color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-border	Null	`null`	`null`
Description The border color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the Switch is checked.
$kendo-switch-on-thumb-hover-bg	Null	`null`	`null`
Description The background of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-text	Null	`null`	`null`
Description The text color of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-border	Null	`null`	`null`
Description The border color of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the hovered Switch is checked.

Table

Name	Type	Default value	Computed value
$kendo-table-border-width	Number	`1px`	`1px`
Description The width of the table border.
$kendo-table-cell-vertical-border-width	Number	`1px`	`1px`
Description The width of vertical border of table cells.
$kendo-table-cell-horizontal-border-width	Number	`1px`	`1px`
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: 2, cell-padding-x: 10px, cell-padding-y: 4px), md: (font-size: 14px, line-height: 2, cell-padding-x: 24px, cell-padding-y: 10px), lg: (font-size: 14px, line-height: 2, cell-padding-x: 24px, 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`	`rgba(0, 0, 0, 0.87)`
Description Text color of tables.
$kendo-table-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.12)`
Description Border color of tables.
$kendo-table-header-bg	Color	`$kendo-table-bg`	`#ffffff`
Description Background color of table headers.
$kendo-table-header-text	Color	`if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text )`	`rgba(0, 0, 0, 0.54)`
Description Text color of table headers.
$kendo-table-header-border	Color	`$kendo-table-border`	`rgba(0, 0, 0, 0.12)`
Description Border color of table headers.
$kendo-table-header-gradient	Null	`null`	`null`
Description Gradient of table headers.
$kendo-table-footer-bg	Color	`$kendo-table-header-bg`	`#ffffff`
Description Background color of table footers.
$kendo-table-footer-text	Color	`$kendo-table-header-text`	`rgba(0, 0, 0, 0.54)`
Description Text color of table footers.
$kendo-table-footer-border	Color	`$kendo-table-header-border`	`rgba(0, 0, 0, 0.12)`
Description Border color of table footers.
$kendo-table-group-row-bg	Color	`$kendo-table-header-bg`	`#ffffff`
Description Background color of group rows in table.
$kendo-table-group-row-text	Color	`$kendo-table-header-text`	`rgba(0, 0, 0, 0.54)`
Description Text color of group rows in table.
$kendo-table-group-row-border	Color	`$kendo-table-header-border`	`rgba(0, 0, 0, 0.12)`
Description Border color of group rows in table.
$kendo-table-alt-row-bg	Color	`transparent`	`transparent`
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	`rgba( k-contrast-color( $kendo-table-bg ), .07 )`	`rgba(0, 0, 0, 0.07)`
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	Color	`$kendo-table-border`	`rgba(0, 0, 0, 0.12)`
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	Null	`$kendo-list-item-focus-shadow`	`null`
Description Box shadow of focused rows in table.
$kendo-table-selected-bg	Color	`rgba( k-contrast-color( $kendo-table-bg ), .04 )`	`rgba(0, 0, 0, 0.04)`
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-subtle-text`	`rgba(0, 0, 0, 0.54)`
Description Text color of tabstrip component
$kendo-tabstrip-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.12)`
Description Border color of tabstrip component
$kendo-tabstrip-item-padding-x	Number	`24px`	`24px`
Description Horizontal padding of tabs
$kendo-tabstrip-item-padding-y	Number	`14px`	`14px`
Description Vertical padding of tabs
$kendo-tabstrip-item-border-width	Number	`0px`	`0px`
Description Width of border around of tabs
$kendo-tabstrip-item-border-radius	Number	`0px`	`0px`
Description Border radius of tabs
$kendo-tabstrip-item-gap	Number	`0px`	`0px`
Description Spacing between tabs
$kendo-tabstrip-item-bg	Null	`null`	`null`
Description Background color of tabs
$kendo-tabstrip-item-text	Color	`$kendo-subtle-text`	`rgba(0, 0, 0, 0.54)`
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	Color	`$kendo-hover-bg`	`rgba(0, 0, 0, 0.04)`
Description Background color of hovered tabs
$kendo-tabstrip-item-hover-text	Color	`$kendo-body-text`	`rgba(0, 0, 0, 0.87)`
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	Null	`null`	`null`
Description Background color of selected tabs
$kendo-tabstrip-item-selected-text	Color	`$kendo-body-text`	`rgba(0, 0, 0, 0.87)`
Description Text color of selected tabs
$kendo-tabstrip-item-selected-border	Null	`null`	`null`
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	`0px`	`0px`
Description Width of border around tabstrip content
$kendo-tabstrip-content-bg	Color	`transparent`	`transparent`
Description Background color of tabstrip content
$kendo-tabstrip-content-text	Null	`null`	`null`
Description Text color of tabstrip content
$kendo-tabstrip-content-border	Null	`null`	`null`
Description Border color of tabstrip content
$kendo-tabstrip-content-focus-border	Color	`$kendo-component-text`	`rgba(0, 0, 0, 0.87)`
Description Border color of tabstrip focused content

Tilelayout

Name	Type	Default value	Computed value
$kendo-tile-layout-border-width	Number	`0px`	`0px`
Description The width of the border around the TileLayout.
$kendo-tile-layout-bg	Color	`if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light)`	`#f5f5f5`
Description The background color of the TileLayout.
$kendo-tile-layout-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The horizontal padding of the TileLayout.
$kendo-tile-layout-padding-y	Number	`$kendo-tile-layout-padding-x`	`16px`
Description The vertical padding of the TileLayout
$kendo-tile-layout-card-border-width	Number	`1px`	`1px`
Description The width of the border around the TileLayout card.
$kendo-tile-layout-card-focus-shadow	String	`$kendo-card-focus-shadow`	`var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))`
Description The focus box shadow of the TileLayout card.
$kendo-tile-layout-hint-border-width	Number	`1px`	`1px`
Description The width of the border around the TileLayout hint.
$kendo-tile-layout-hint-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description The radius of the border around the TileLayout hint.
$kendo-tile-layout-hint-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.12)`
Description The color of the border around the TileLayout hint.
$kendo-tile-layout-hint-bg	Color	`rgba( white, .2 )`	`rgba(255, 255, 255, 0.2)`
Description The background color of the TileLayout hint.

Name	Type	Default value	Computed value
$kendo-toolbar-padding-x	Null	`null`	`null`
Description The horizontal padding of the Toolbar.
$kendo-toolbar-sm-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal padding of the small Toolbar.
$kendo-toolbar-md-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the medium Toolbar.
$kendo-toolbar-lg-padding-x	Number	`k-map-get( $kendo-spacing, 2.5 )`	`10px`
Description The horizontal padding of the large Toolbar.
$kendo-toolbar-padding-y	Null	`null`	`null`
Description The vertical padding of the Toolbar.
$kendo-toolbar-sm-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The vertical padding of the small Toolbar.
$kendo-toolbar-md-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The vertical padding of the medium Toolbar.
$kendo-toolbar-lg-padding-y	Number	`k-map-get( $kendo-spacing, 2.5 )`	`10px`
Description The vertical padding of the large Toolbar.
$kendo-toolbar-spacing	Null	`null`	`null`
Description The spacing between the Toolbar tools.
$kendo-toolbar-sm-spacing	Number	`k-map-get( $kendo-spacing, 1.5 )`	`6px`
Description The spacing between the tools of the small Toolbar.
$kendo-toolbar-md-spacing	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The spacing between the tools of the medium Toolbar.
$kendo-toolbar-lg-spacing	Number	`k-map-get( $kendo-spacing, 2.5 )`	`10px`
Description The spacing between the tools of the large Toolbar.
$kendo-toolbar-border-width	Number	`0`	`0`

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

Support and Learning

Resources

Productivity and Design Tools

Customization