Styling & Themes / Default Theme / Customization /

Customization

Variables

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

Common

Name	Type	Default value	Computed value
$kendo-icon-size	Number	`16px`	`16px`
Description Icon size.
$kendo-icon-size-xs	Calculation	`calc( #{$kendo-icon-size} * .75 )`	`calc(16px * 0.75)`
Description xtra small icon size.
$kendo-icon-size-sm	Calculation	`calc( #{$kendo-icon-size} * .875 )`	`calc(16px * 0.875)`
Description Small icon size.
$kendo-icon-size-md	Number	`$kendo-icon-size`	`16px`
Description Medium icon size.
$kendo-icon-size-lg	Calculation	`calc( #{$kendo-icon-size} * 1.25 )`	`calc(16px * 1.25)`
Description Large icon size.
$kendo-icon-size-xl	Calculation	`calc( #{$kendo-icon-size} * 1.5 )`	`calc(16px * 1.5)`
Description Extra large icon size.
$kendo-icon-size-xxl	Calculation	`calc( #{$kendo-icon-size} * 2 )`	`calc(16px * 2)`
Description Double extra large icon size.
$kendo-icon-size-xxxl	Calculation	`calc( #{$kendo-icon-size} * 3 )`	`calc(16px * 3)`
Description Triple extra large icon size.
$kendo-padding-x	Number	`8px`	`8px`
Description Horizontal padding.
$kendo-padding-y	Number	`4px`	`4px`
Description Vertical padding.
$kendo-padding-sm-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description Small horizontal padding.
$kendo-padding-sm-y	Number	`k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description Small vertical padding.
$kendo-padding-md-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Medium horizontal padding.
$kendo-padding-md-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description Medium vertical padding.
$kendo-padding-lg-x	Number	`k-map-get( $kendo-spacing, 3 )`	`12px`
Description Large horizontal padding.
$kendo-padding-lg-y	Number	`k-map-get( $kendo-spacing, 1.5 )`	`6px`
Description Large vertical padding.
$kendo-border-radius	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description Border radius for all components.
$kendo-border-radius-sm	Number	`$kendo-border-radius - k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description Small border radius.
$kendo-border-radius-md	Number	`$kendo-border-radius`	`4px`
Description Medium border radius.
$kendo-border-radius-lg	Number	`$kendo-border-radius + k-map-get( $kendo-spacing, 0.5 )`	`6px`
Description Large border radius.
$kendo-body-bg	Color	`$kendo-color-white`	`#ffffff`
Description Background color of the body.
$kendo-body-text	Color	`#424242`	`#424242`
Description Text color of the body.
$kendo-subtle-text	Color	`#666666`	`#666666`
Description Subtle text color.
$kendo-link-text	Color	`$kendo-color-primary`	`#ff6358`
Description Text color of the links.
$kendo-link-hover-text	Color	`$kendo-color-primary-darker`	`#d6534a`
Description Text color of the links on hover.
$kendo-focus-shadow	List	`inset 0 0 0 2px rgba(0, 0, 0, .13)`	`inset 0 0 0 2px rgba(0, 0, 0, 0.13)`
Description Box shadow of focused items.
$kendo-transition	List	`color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out`	`color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out`
Description Transition used across all components.
$kendo-disabled-filter	String	`grayscale(.1)`	`grayscale(0.1)`
Description Filter used for disabled items.
$kendo-disabled-opacity	Number	`.6`	`0.6`
Description Opacity used for disabled items.
$kendo-base-bg	Color	`#fafafa`	`#fafafa`
Description The background of the components' chrome area.
$kendo-base-text	Color	`$kendo-body-text`	`#424242`
Description The text color of the components' chrome area.
$kendo-base-border	Color	`rgba(black, 0.08)`	`rgba(0, 0, 0, 0.08)`
Description The border color of the components' chrome area.
$kendo-base-gradient	List	`rgba(black, 0), rgba(black, 0.02)`	`rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)`
Description The gradient background of the components' chrome area.
$kendo-hover-bg	Color	`k-try-shade($kendo-base-bg, 0.5)`	`#f0f0f0`
Description The background of hovered items.
$kendo-hover-text	Color	`$kendo-base-text`	`#424242`
Description The text color of hovered items.
$kendo-hover-border	Color	`$kendo-base-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of hovered items.
$kendo-hover-gradient	List	`$kendo-base-gradient`	`rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)`
Description The gradient background of hovered items.
$kendo-selected-bg	Color	`$kendo-color-primary`	`#ff6358`
Description The background of selected items.
$kendo-selected-text	Color	`k-contrast-legacy($kendo-selected-bg)`	`white`
Description The text color of selected items.
$kendo-selected-border	Color	`$kendo-base-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of selected items.
$kendo-selected-gradient	List	`$kendo-base-gradient`	`rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)`
Description The gradient background of selected items.
$kendo-selected-hover-bg	Color	`k-try-shade($kendo-selected-bg, 0.5)`	`#f55f54`
Description The background of selected and hovered items.
$kendo-selected-hover-text	Color	`$kendo-selected-text`	`white`
Description The text color of selected and hovered items.
$kendo-selected-hover-border	Color	`$kendo-base-border`	`rgba(0, 0, 0, 0.08)`
Description The border of selected and hovered items.
$kendo-selected-hover-gradient	List	`$kendo-base-gradient`	`rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)`
Description The gradient of selected and hovered items.
$kendo-disabled-text	Color	`#8f8f8f`	`#8f8f8f`
Description Text color of disabled items.

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	String	`$kendo-font-family`	`inherit`
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`	`1.4285714286`
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`	`#ebebeb`
Description The background color of the AppBar based on light theme color.
$kendo-appbar-light-text	Color	`if($kendo-enable-color-system, k-color( on-light ), k-contrast-legacy( $kendo-color-light ))`	`black`
Description The 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	`if($kendo-enable-color-system, k-color( on-dark ), k-contrast-legacy( $kendo-color-dark ))`	`white`
Description The text color of the AppBar based on dark theme color.
$kendo-appbar-box-shadow	String	`k-elevation(4)`	`var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The box shadow of the AppBar.
$kendo-appbar-bottom-box-shadow	String	`$kendo-appbar-box-shadow`	`var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))`
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	String	`$kendo-font-family`	`inherit`
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`	`1.4285714286`
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": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "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	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal padding of the BottomNavigation.
$kendo-bottom-nav-padding-y	Number	`$kendo-bottom-nav-padding-x`	`4px`
Description The vertical padding of the BottomNavigation.
$kendo-bottom-nav-gap	Number	`$kendo-bottom-nav-padding-x`	`4px`
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	String	`$kendo-font-family`	`inherit`
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-md-x * 2} - #{$kendo-bottom-nav-padding-x * 2} )`	`calc(40px + 16px - 8px)`
Description The minimum height of the BottomNavigation item.
$kendo-bottom-nav-item-border-radius	Number	`$kendo-border-radius-md`	`4px`
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	`k-elevation(4)`	`var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The box shadow of the BottomNavigation.
$kendo-bottom-nav-flat-text	Color	`$kendo-component-text`	`#424242`
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.08)`
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	String	`$kendo-font-family`	`inherit`
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-lg`	`16px`
Description The font size of the large Breadcrumb.
$kendo-breadcrumb-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line-height of the Breadcrumb.
$kendo-breadcrumb-sm-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line-height of the small Breadcrumb.
$kendo-breadcrumb-md-line-height	Number	`$kendo-breadcrumb-line-height`	`1.4285714286`
Description The line-height of the medium Breadcrumb.
$kendo-breadcrumb-lg-line-height	Number	`$kendo-line-height-lg`	`1.5`
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`	`#424242`
Description The base text color of the Breadcrumb.
$kendo-breadcrumb-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The base border color of the Breadcrumb.
$kendo-breadcrumb-focus-shadow	List	`0 0 2px 1px rgba(0, 0, 0, .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 )`	`8px`
Description The horizontal padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-x	Number	`$kendo-breadcrumb-link-padding-x`	`8px`
Description The horizontal padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the large Breadcrumb link.
$kendo-breadcrumb-link-padding-y	Number	`k-map-get( $kendo-spacing, 1.5 )`	`6px`
Description The vertical padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The vertical padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-y	Number	`$kendo-breadcrumb-link-padding-y`	`6px`
Description The vertical padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
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 )`	`8px`
Description The vertical padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-y	Number	`k-map-get( $kendo-spacing, 1.5 )`	`6px`
Description The vertical padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-y	Number	`$kendo-breadcrumb-icon-link-padding-y`	`8px`
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`	`8px`
Description The horizontal padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-x	Number	`$kendo-breadcrumb-sm-icon-link-padding-y`	`6px`
Description The horizontal padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-x	Number	`$kendo-breadcrumb-icon-link-padding-x`	`8px`
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-initial-text	String	`inherit`	`inherit`
Description The text color of the Breadcrumb link.
$kendo-breadcrumb-link-icon-spacing	Number	`$kendo-icon-spacing`	`4px`
Description The spacing of the Breadcrumb link icon.
$kendo-breadcrumb-link-bg	Null	`null`	`null`
Description The background color of the Breadcrumb link.
$kendo-breadcrumb-link-text	Color	`$kendo-link-text`	`#ff6358`
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-base-bg`	`#fafafa`
Description The background color of the hovered Breadcrumb link.
$kendo-breadcrumb-link-hover-text	Color	`$kendo-link-hover-text`	`#d6534a`
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	Null	`null`	`null`
Description The background color of the focused Breadcrumb link.
$kendo-breadcrumb-link-focus-text	Color	`$kendo-link-text`	`#ff6358`
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	List	`$kendo-focus-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.13)`
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-base-bg`	`#fafafa`
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	Null	`null`	`null`
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	List	`$kendo-breadcrumb-link-focus-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.13)`
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: 8px, link-padding-y: 4px, icon-link-padding-x: 6px, icon-link-padding-y: 6px, font-size: 14px, line-height: 1.4285714286), md: (link-padding-x: 8px, link-padding-y: 6px, icon-link-padding-x: 8px, icon-link-padding-y: 8px, font-size: 14px, line-height: 1.4285714286), lg: (link-padding-x: 8px, link-padding-y: 8px, icon-link-padding-x: 12px, icon-link-padding-y: 12px, font-size: 16px, line-height: 1.5))`
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, 2 )`	`8px`
Description The horizontal padding of the Button.
$kendo-button-sm-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the small Button.
$kendo-button-md-padding-x	Number	`$kendo-button-padding-x`	`8px`
Description The horizontal padding of the medium Button.
$kendo-button-lg-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the large Button.
$kendo-button-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The vertical padding of the Button.
$kendo-button-sm-padding-y	Number	`k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description The vertical padding of the small Button.
$kendo-button-md-padding-y	Number	`$kendo-button-padding-y`	`4px`
Description The vertical padding of the medium Button.
$kendo-button-lg-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The vertical padding of the large Button.
$kendo-button-font-family	String	`$kendo-font-family`	`inherit`
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-button-font-size`	`14px`
Description The font size of the medium Button.
$kendo-button-lg-font-size	Number	`$kendo-font-size-lg`	`16px`
Description The font size of the large Button.
$kendo-button-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height used along with the $kendo-font-size the.
$kendo-button-sm-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height used along with the $kendo-font-size the of the small Button.
$kendo-button-md-line-height	Number	`$kendo-button-line-height`	`1.4285714286`
Description The line height used along with the $kendo-font-size the of the medium Button.
$kendo-button-lg-line-height	Number	`$kendo-line-height-lg`	`1.5`
Description The line height used along with the $kendo-font-size the 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 + 8px + 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 + 8px)`
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: 8px, padding-y: 2px, font-size: 14px, line-height: 1.4285714286), md: (padding-x: 8px, padding-y: 4px, font-size: 14px, line-height: 1.4285714286), lg: (padding-x: 8px, padding-y: 8px, font-size: 16px, line-height: 1.5))`
Description The sizes map for the Button.
$kendo-button-theme-colors	Map	`k-map-merge( $kendo-theme-colors, ( "base": if($kendo-enable-color-system, k-color( base ), #f5f5f5) ) )`	`("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "inverse": #424242, "base": #f5f5f5)`
Description The theme colors map for the Button.
$kendo-button-bg	Color	`if($kendo-enable-color-system, k-color( base ), #f5f5f5)`	`#f5f5f5`
Description The base background of the Button.
$kendo-button-text	Color	`if($kendo-enable-color-system, k-color( on-base ), #424242)`	`#424242`
Description The base text color of the Button.
$kendo-button-border	Color	`if($kendo-enable-color-system, k-color( border ), rgba( black, .08 ))`	`rgba(0, 0, 0, 0.08)`
Description The base border color of the Button.
$kendo-button-gradient	List	`if($kendo-enable-color-system, null, (rgba( black, 0 ), rgba( black, .02 )))`	`rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)`
Description The base background gradient of the Button.
$kendo-button-shadow	Null	`null`	`null`
Description The base shadow of the Button.
$kendo-button-hover-bg	Color	`if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-button-bg, .5 ))`	`#ebebeb`
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	Color	`if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-button-bg, 1.5 ))`	`#d8d8d8`
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	Null	`null`	`null`
Description The base shadow of the active Button.
$kendo-button-selected-bg	Color	`$kendo-color-primary`	`#ff6358`
Description The base background color of the selected Button.
$kendo-button-selected-text	Color	`if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-button-selected-bg ))`	`white`
Description The text color of the selected Button.
$kendo-button-selected-border	Color	`$kendo-button-selected-bg`	`#ff6358`
Description The border color of the selected Button.
$kendo-button-selected-gradient	Null	`$kendo-button-active-gradient`	`null`
Description The background gradient of the selected Button.
$kendo-button-selected-shadow	Null	`$kendo-button-active-shadow`	`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 the focused Button.
$kendo-button-focus-shadow	List	`0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-button-border, .08 ))`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The base shadow of the focused Button.
$kendo-button-disabled-bg	Null	`null`	`null`
Description The base background of the disabled Button.
$kendo-button-disabled-text	Null	`null`	`null`
Description The base text color of the disabled Button.
$kendo-button-disabled-border	Null	`null`	`null`
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	Null	`null`	`null`
Description The base shadow of the disabled Button.
$kendo-flat-button-hover-opacity	Number	`.04`	`0.04`
Description The overlay opacity of the hovered flat Button. Used to create a background for the flat Button.
$kendo-flat-button-focus-opacity	Null	`null`	`null`
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 background for the flat Button.
$kendo-flat-button-selected-opacity	Number	`.2`	`0.2`
Description The overlay opacity of the selected flat Button. Used to create background for the flat Button.
$kendo-flat-button-focus-ring-opacity	Number	`.12`	`0.12`
Description The opacity of the flat Button focus ring. Used to create a border for the flat Button.
$kendo-button-transition	List	`color .2s ease-in-out`	`color 0.2s ease-in-out`
Description The color transition of the flat Button.

Captcha

Name	Type	Default value	Computed value
$kendo-captcha-spacer	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The spacer of the Captcha.
$kendo-captcha-width	Number	`280px`	`280px`
Description The width of the Captcha.
$kendo-captcha-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the Captcha.
$kendo-captcha-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Captcha.
$kendo-captcha-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the Captcha.
$kendo-captcha-gap	Number	`$kendo-captcha-spacer`	`8px`
Description The gap of the Captcha.
$kendo-captcha-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the Captcha.
$kendo-captcha-text	Color	`$kendo-component-bg`	`#ffffff`
Description The text color of the Captcha.
$kendo-captcha-border	Color	`$kendo-component-bg`	`#ffffff`
Description The border color of the Captcha.
$kendo-captcha-image-wrap-gap	Number	`$kendo-captcha-spacer`	`8px`
Description The gap of the Captcha image wrapper.
$kendo-captcha-image-controls-gap	Number	`$kendo-captcha-spacer`	`8px`
Description The gap of the Captcha image controls.
$kendo-captcha-validation-message-margin-top	Number	`k-math-div( $kendo-captcha-spacer, 2 )`	`4px`
Description The top margin of the Captcha validation message.
$kendo-captcha-validation-message-font-size	Number	`$kendo-font-size-sm`	`12px`
Description The font size of the Captcha validation message.
$kendo-captcha-validation-message-font-style	String	`italic`	`italic`
Description The font style of the Captcha validation message.

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	`1px`	`1px`
Description The width of the border around the Card.
$kendo-card-border-radius	Number	`$kendo-border-radius-lg`	`6px`
Description The border radius of the Card.
$kendo-card-inner-border-radius	Calculation	`calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} )`	`calc(6px - 1px)`
Description The inner border radius of the Card.
$kendo-card-font-family	String	`$kendo-font-family`	`inherit`
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	`$kendo-line-height-md`	`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`	`#424242`
Description The text color of the Card.
$kendo-card-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the Card.
$kendo-card-shadow	Null	`null`	`null`
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	Color	`rgba( black, .15 )`	`rgba(0, 0, 0, 0.15)`
Description The border color of the focused Card.
$kendo-card-focus-shadow	Null	`null`	`null`
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	Color	`$kendo-component-header-text`	`#424242`
Description The text color of the Card header.
$kendo-card-header-border	Color	`$kendo-component-header-border`	`rgba(0, 0, 0, 0.08)`
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	Color	`$kendo-component-header-text`	`#424242`
Description The text color of the Card footer.
$kendo-card-footer-border	Color	`$kendo-component-header-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the Card footer.
$kendo-card-title-margin-bottom	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The bottom margin of the Card title.
$kendo-card-title-font-size	Number	`$kendo-h5-font-size`	`16px`
Description The font size of the Card title.
$kendo-card-title-font-family	Null	`null`	`null`
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	`$kendo-font-weight-normal`	`400`
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	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The bottom margin of the Card subtitle.
$kendo-card-subtitle-font-size	Number	`$kendo-font-size-sm`	`12px`
Description The font size of the Card subtitle.
$kendo-card-subtitle-font-family	Null	`null`	`null`
Description The font family of the Card subtitle.
$kendo-card-subtitle-line-height	String	`normal`	`normal`
Description The line height of the Card subtitle.
$kendo-card-subtitle-font-weight	Number	`$kendo-font-weight-normal`	`400`
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`	`#666666`
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	`0px`	`0px`
Description The border radius of the scroll button in the Card deck.
$kendo-card-deck-scroll-button-offset	Number	`-$kendo-button-border-width`	`-1px`
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	`if($kendo-enable-color-system, k-color( series-a ), #ff6358)`	`#ff6358`
Description The first base series color and its light and dark shades.
$kendo-series-b	Color	`if($kendo-enable-color-system, k-color( series-b ), #ffe162)`	`#ffe162`
Description The second base series color and its light and dark shades.
$kendo-series-c	Color	`if($kendo-enable-color-system, k-color( series-c ), #4cd180)`	`#4cd180`
Description The third base series color and its light and dark shades.
$kendo-series-d	Color	`if($kendo-enable-color-system, k-color( series-d ), #4b5ffa)`	`#4b5ffa`
Description The fourth base series color and its light and dark shades.
$kendo-series-e	Color	`if($kendo-enable-color-system, k-color( series-e ), #ac58ff)`	`#ac58ff`
Description The fifth base series color and its light and dark shades.
$kendo-series-f	Color	`if($kendo-enable-color-system, k-color( series-f ), #ff5892)`	`#ff5892`
Description The sixth base series color and its light and dark shades.
$kendo-series-1	Color	`$kendo-series-a`	`#ff6358`
Description The series colors in order: base, light, dark, lighter, darker
$kendo-chart-major-lines	Color	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), 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	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), 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).

Chat

Name	Type	Default value	Computed value
$kendo-chat-padding-x	Number	`16px`	`16px`
Description The horizontal padding of the Chat.
$kendo-chat-padding-y	Number	`16px`	`16px`
Description The vertical padding of the Chat.
$kendo-chat-width	Number	`500px`	`500px`
Description The width of the Chat.
$kendo-chat-height	Number	`600px`	`600px`
Description The height of the Chat.
$kendo-chat-border-width	Number	`1px`	`1px`
Description The border width of the Chat.
$kendo-chat-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the Chat.
$kendo-chat-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Chat.
$kendo-chat-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the Chat.
$kendo-chat-item-spacing-x	Number	`8px`	`8px`
Description The horizontal spacing between the items of the Chat.
$kendo-chat-item-spacing-y	Number	`16px`	`16px`
Description The vertical spacing between the items of the Chat.
$kendo-chat-message-list-padding-x	Number	`$kendo-chat-padding-x`	`16px`
Description The horizontal padding of the Chat message list.
$kendo-chat-message-list-padding-y	Number	`$kendo-chat-padding-y`	`16px`
Description The vertical padding of the Chat message list.
$kendo-chat-message-list-spacing	Number	`$kendo-chat-item-spacing-y`	`16px`
Description The spacing of the Chat message list.
$kendo-chat-timestamp-font-size	String	`smaller`	`smaller`
Description The font size of the Chat timestamp.
$kendo-chat-timestamp-line-height	Null	`null`	`null`
Description The line height of the Chat timestamp.
$kendo-chat-timestamp-transform	String	`uppercase`	`uppercase`
Description The text transform of the Chat timestamp.
$kendo-chat-timestamp-text	Color	`$kendo-subtle-text`	`#666666`
Description The text color of the Chat timestamp.
$kendo-chat-timestamp-bg	Null	`null`	`null`
Description The background color of the Chat timestamp.
$kendo-chat-bubble-padding-x	Number	`12px`	`12px`
Description The horizontal padding of the Chat bubble message.
$kendo-chat-bubble-padding-y	Number	`8px`	`8px`
Description The vertical padding of the Chat bubble message.
$kendo-chat-bubble-spacing	Number	`2px`	`2px`
Description The spacing of the Chat bubble message.
$kendo-chat-bubble-line-height	Number	`18px`	`18px`
Description The line height of the Chat bubble message.
$kendo-chat-bubble-border-radius	Number	`12px`	`12px`
Description The border radius of the Chat bubble message.
$kendo-chat-bubble-border-radius-sm	Number	`2px`	`2px`
Description The border radius of the Chat small bubble message
$kendo-chat-avatar-size	Number	`32px`	`32px`
Description The size of the Chat Avatar.
$kendo-chat-avatar-spacing	Number	`$kendo-chat-item-spacing-x`	`8px`
Description The spacing of the Chat Avatar.
$kendo-chat-toolbar-padding-x	Number	`$kendo-toolbar-md-padding-x`	`8px`
Description The horizontal padding of the Chat Toolbar.
$kendo-chat-toolbar-padding-y	Number	`$kendo-toolbar-md-padding-y`	`8px`
Description The vertical padding of the Chat Toolbar.
$kendo-chat-toolbar-spacing	Number	`$kendo-toolbar-md-spacing`	`8px`
Description The spacing of the Chat Toolbar.
$kendo-chat-toolbar-bg	Color	`$kendo-toolbar-bg`	`#fafafa`
Description The background color of the Chat Toolbar.
$kendo-chat-toolbar-text	Color	`$kendo-toolbar-text`	`#424242`
Description The text color of the Chat Toolbar.
$kendo-chat-toolbar-border	String	`inherit`	`inherit`
Description The border color of the Chat Toolbar.
$kendo-chat-quick-reply-padding-x	Number	`12px`	`12px`
Description The horizontal padding of the Chat quick reply.
$kendo-chat-quick-reply-padding-y	Number	`8px`	`8px`
Description The vertical padding of the Chat quick reply.
$kendo-chat-quick-reply-spacing	Number	`8px`	`8px`
Description The spacing of the Chat quick reply.
$kendo-chat-quick-reply-line-height	Number	`$kendo-chat-bubble-line-height`	`18px`
Description The line height of the Chat quick reply.
$kendo-chat-bg	Color	`$kendo-app-bg`	`#fafafa`
Description The background color of the Chat.
$kendo-chat-text	Color	`$kendo-app-text`	`#424242`
Description The text color of the Chat.
$kendo-chat-border	Color	`$kendo-app-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the Chat.
$kendo-chat-bubble-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the Chat bubble.
$kendo-chat-bubble-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the Chat bubble.
$kendo-chat-bubble-border	Color	`$kendo-chat-bubble-bg`	`#ffffff`
Description The border color of the Chat bubble.
$kendo-chat-bubble-shadow	String	`k-elevation(1)`	`var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The box shadow of the Chat bubble.
$kendo-chat-bubble-hover-shadow	String	`k-elevation(2)`	`var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The shadow of the hovered Chat bubble.
$kendo-chat-bubble-selected-shadow	String	`k-elevation(3)`	`var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The shadow of the selected Chat bubble.
$kendo-chat-alt-bubble-bg	Color	`$kendo-color-primary`	`#ff6358`
Description The background color of the Chat alt bubble.
$kendo-chat-alt-bubble-text	Color	`if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-chat-alt-bubble-bg ))`	`white`
Description The text color of the Chat alt bubble.
$kendo-chat-alt-bubble-border	Color	`$kendo-chat-alt-bubble-bg`	`#ff6358`
Description The border color of the Chat alt bubble.
$kendo-chat-alt-bubble-shadow	String	`k-elevation(1)`	`var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The shadow of the Chat alt bubble.
$kendo-chat-alt-bubble-hover-shadow	String	`k-elevation(2)`	`var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The shadow of the hovered Chat alt bubble.
$kendo-chat-alt-bubble-selected-shadow	String	`k-elevation(3)`	`var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The shadow of the selected Chat alt bubble.
$kendo-chat-quick-reply-bg	Color	`transparent`	`transparent`
Description The background color of the Chat quick reply.
$kendo-chat-quick-reply-text	Color	`$kendo-color-primary`	`#ff6358`
Description The text color of the Chat quick reply.
$kendo-chat-quick-reply-border	Color	`$kendo-color-primary`	`#ff6358`
Description The border color of the Chat quick reply.
$kendo-chat-quick-reply-hover-bg	Color	`$kendo-color-primary`	`#ff6358`
Description The background color of the hovered Chat quick reply.
$kendo-chat-quick-reply-hover-text	Color	`$kendo-color-primary-contrast`	`white`
Description The text color of the hovered Chat quick reply.
$kendo-chat-quick-reply-hover-border	Color	`$kendo-color-primary`	`#ff6358`
Description The border color of the hovered Chat quick reply.

Checkbox

Name	Type	Default value	Computed value
$kendo-checkbox-border-width	Number	`1px`	`1px`
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	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the CheckBox.
$kendo-checkbox-text	Null	`null`	`null`
Description The text color of the CheckBox.
$kendo-checkbox-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
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`	`#ff6358`
Description The background color of the checked CheckBox.
$kendo-checkbox-checked-text	Color	`if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg ))`	`white`
Description The text color of the checked CheckBox.
$kendo-checkbox-checked-border	Color	`$kendo-checkbox-checked-bg`	`#ff6358`
Description The border color of the checked CheckBox.
$kendo-checkbox-indeterminate-bg	Color	`$kendo-checkbox-bg`	`#ffffff`
Description The background color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-text	Color	`$kendo-checkbox-checked-bg`	`#ff6358`
Description The text color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-border	Color	`$kendo-checkbox-border`	`rgba(0, 0, 0, 0.08)`
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	List	`0 0 0 2px rgba(0, 0, 0, .06)`	`0 0 0 2px rgba(0, 0, 0, 0.06)`
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	List	`0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary, .3 ))`	`0 0 0 2px rgba(255, 99, 88, 0.3)`
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	Null	`null`	`null`
Description The border color of the disabled CheckBox.
$kendo-checkbox-disabled-checked-bg	Null	`null`	`null`
Description The background color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-text	Null	`null`	`null`
Description The text color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-border	Null	`null`	`null`
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 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e")`
Description 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 16 16'%3e%3cpath fill='none' stroke='%23ff6358' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/%3e%3c/svg%3e")`
Description 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`	`4px`
Description The vertical padding of the CheckBox list items.
$kendo-checkbox-ripple-bg	Color	`$kendo-checkbox-checked-bg`	`#ff6358`
Description The background color of the CheckBox' ripple.
$kendo-checkbox-ripple-opacity	Number	`.25`	`0.25`
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	`$kendo-chip-padding-x`	`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	`$kendo-chip-padding-y`	`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-chip-font-size`	`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	`1`	`1`
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`
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`
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`
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(1em + 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), md: (padding-x: 4px, padding-y: 4px, font-size: 14px, line-height: 1), lg: (padding-x: 4px, padding-y: 6px, font-size: 14px, line-height: 1))`
Description The map with the sizes of the Chip.
$kendo-chip-base-bg	Color	`if($kendo-enable-color-system, k-color( base-subtle ), $kendo-button-bg)`	`#f5f5f5`
Description The base background of the Chip.
$kendo-chip-theme-colors	Map	`( "base": $kendo-chip-base-bg, "error": k-map-get($kendo-theme-colors, "error"), "info": k-map-get($kendo-theme-colors, "info"), "warning": k-map-get($kendo-theme-colors, "warning"), "success": k-map-get($kendo-theme-colors, "success") )`	`("base": #f5f5f5, "error": #f31700, "info": #0058e9, "warning": #ffc000, "success": #37b400)`
Description The theme colors map for the Chip.
$kendo-chip-solid-bg	Color	`$kendo-chip-base-bg`	`#f5f5f5`
Description The base background color of the solid Chip.
$kendo-chip-solid-text	Color	`$kendo-button-text`	`#424242`
Description The base text color of the solid Chip.
$kendo-chip-solid-border	Color	`$kendo-button-border`	`rgba(0, 0, 0, 0.08)`
Description The base border color of the solid Chip.
$kendo-chip-solid-shadow	List	`0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ))`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The base shadow of the solid Chip.
$kendo-chip-solid-gradient	List	`$kendo-button-gradient`	`rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)`
Description The base gradient of the solid Chip.
$kendo-chip-solid-focus-bg	Null	`null`	`null`
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	`if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-button-hover-bg)`	`#ebebeb`
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	`$kendo-button-active-bg`	`#d8d8d8`
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`	`#424242`
Description The base text color of the outline Chip.
$kendo-chip-outline-border	Color	`$kendo-chip-outline-text`	`#424242`
Description The base border color of the outline Chip.
$kendo-chip-outline-shadow	List	`0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ))`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The base shadow of the outline Chip.
$kendo-chip-outline-hover-bg	Color	`$kendo-chip-outline-text`	`#424242`
Description The base background color of the hovered outline Chip.
$kendo-chip-outline-hover-text	Color	`if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-chip-outline-hover-bg ))`	`white`
Description The base text color of the hovered outline Chip.
$kendo-chip-outline-selected-bg	Color	`$kendo-chip-outline-hover-bg`	`#424242`
Description The base background color of the selected outline Chip.
$kendo-chip-outline-selected-text	Color	`$kendo-chip-outline-hover-text`	`white`
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	`272px`	`272px`
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	String	`$kendo-font-family`	`inherit`
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`	`1.4285714286`
Description The line height of the ColorGradient.
$kendo-color-gradient-text	Color	`$kendo-component-text`	`#424242`
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.08)`
Description The border color of the ColorGradient.
$kendo-color-gradient-focus-border	Null	`null`	`null`
Description The border color of the focused ColorGradient.
$kendo-color-gradient-focus-shadow	String	`k-elevation(3)`	`var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))`
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( $kendo-color-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 hover 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	`46px`	`46px`
Description The width of the ColorGradient input.
$kendo-color-gradient-input-gap	Number	`k-math-div( $kendo-color-gradient-spacer, 1.5 )`	`8px`
Description The spacing between the ColorGradient inputs.
$kendo-color-gradient-input-label-gap	Number	`k-math-div( $kendo-color-gradient-spacer, 3 )`	`4px`
Description The spacing between the ColorGradient inputs and their labels.
$kendo-color-gradient-input-label-text	Color	`$kendo-subtle-text`	`#666666`
Description The text color of the ColorGradient input labels.
$kendo-color-gradient-contrast-ratio-font-weight	Number	`$kendo-font-weight-bold`	`700`
Description The font weight of the ColorGradient contrast ratio text.
$kendo-color-gradient-contrast-spacer	Number	`k-math-div( $kendo-color-gradient-spacer, 1.5 )`	`8px`
Description The spacing between the items in the ColorGradient contrast tool.

Color System

Name	Type	Default value	Computed value
$kendo-colors	Map	`$_default-colors`	(app-surface: #ffffff, on-app-surface: #3d3d3d, subtle: #666666, surface: #fafafa, surface-alt: #ffffff, border: rgba(0, 0, 0, 0.08), border-alt: rgba(0, 0, 0, 0.16), base-subtle: #ebebeb, base-subtle-hover: #e0e0e0, base-subtle-active: #d6d6d6, base: #f5f5f5, base-hover: #ebebeb, base-active: #d6d6d6, base-emphasis: #c2c2c2, base-on-subtle: #3d3d3d, on-base: #3d3d3d, base-on-surface: #3d3d3d, primary-subtle: #ffeceb, primary-subtle-hover: #ffdedb, primary-subtle-active: #ffc8c4, primary: #ff6358, primary-hover: #ea5a51, primary-active: #d45349, primary-emphasis: #ff9d97, primary-on-subtle: #5c201c, on-primary: #ffffff, primary-on-surface: #ff6358, secondary-subtle: #fafafa, secondary-subtle-hover: #f5f5f5, secondary-subtle-active: #ebebeb, secondary: #666666, secondary-hover: #525252, secondary-active: #3d3d3d, secondary-emphasis: #e0e0e0, secondary-on-subtle: #141414, on-secondary: #ffffff, secondary-on-surface: #292929, tertiary-subtle: #d8f1fd, tertiary-subtle-hover: #c5eafc, tertiary-subtle-active: #a3dffb, tertiary: #03a9f4, tertiary-hover: #039ae0, tertiary-active: #028ccb, tertiary-emphasis: #61c9f9, tertiary-on-subtle: #023f5c, on-tertiary: #ffffff, tertiary-on-surface: #028ccb, info-subtle: #d2e2fb, info-subtle-hover: #bdd4f8, info-subtle-active: #80acf4, info: #0058e9, info-hover: #0052d6, info-active: #004ac2, info-emphasis: #6098f2, info-on-subtle: #002259, on-info: #ffffff, info-on-surface: #004ac2, success-subtle: #dcf0d3, success-subtle-hover: #cbe9bf, success-subtle-active: #b7e1a5, success: #37b400, success-hover: #32a500, success-active: #2d9600, success-emphasis: #81d15f, success-on-subtle: #1c5a00, on-success: #ffffff, success-on-surface: #2d9600, warning-subtle: #fff4d3, warning-subtle-hover: #ffeebd, warning-subtle-active: #ffe79e, warning: #ffc000, warning-hover: #eaaf00, warning-active: #d49f00, warning-emphasis: #ffd760, warning-on-subtle: #5e4700, on-warning: #3d3d3d, warning-on-surface: #ffc000, error-subtle: #fcddda, error-subtle-hover: #fbc8c3, error-subtle-active: #f98b80, error: #f31700, error-hover: #df1600, error-active: #ca1400, error-emphasis: #f76f60, error-on-subtle: #7a0c00, on-error: #ffffff, error-on-surface: #ca1400, light-subtle: #fafafa, light-subtle-hover: #f5f5f5, light-subtle-active: #ebebeb, light: #ebebeb, light-hover: #e0e0e0, light-active: #d6d6d6, light-emphasis: #d6d6d6, light-on-subtle: #141414, on-light: #000000, light-on-surface: #e0e0e0, dark-subtle: #c2c2c2, dark-subtle-hover: #adadad, dark-subtle-active: #999999, dark: #3d3d3d, dark-hover: #292929, dark-active: #1f1f1f, dark-emphasis: #666666, dark-on-subtle: #1f1f1f, on-dark: #ffffff, dark-on-surface: #141414, inverse-subtle: #c2c2c2, inverse-subtle-hover: #adadad, inverse-subtle-active: #999999, inverse: #3d3d3d, inverse-hover: #292929, inverse-active: #1f1f1f, inverse-emphasis: #666666, inverse-on-subtle: #1f1f1f, on-inverse: #ffffff, inverse-on-surface: #141414, series-a: #ff6358, series-a-bold: #bf4a42, series-a-bolder: #80322c, series-a-subtle: #ffb1ac, series-a-subtler: #ff8a82, series-b: #ffe162, series-b-bold: #bfa94a, series-b-bolder: #807131, series-b-subtle: #fff0b1, series-b-subtler: #ffe989, series-c: #4cd180, series-c-bold: #399d60, series-c-bolder: #266940, series-c-subtle: #a6e8c0, series-c-subtler: #79dda0, series-d: #4b5ffa, series-d-bold: #3847bc, series-d-bolder: #26307d, series-d-subtle: #a5affd, series-d-subtler: #7887fb, series-e: #ac58ff, series-e-bold: #8142bf, series-e-bolder: #562c80, series-e-subtle: #d6acff, series-e-subtler: #c182ff, series-f: #ff5892, series-f-bold: #bf426e, series-f-bolder: #802c49, series-f-subtle: #ffacc9, series-f-subtler: #ff82ae)
Description The global default Colors map.
$kendo-color-primary	Color	`#ff6358`	`#ff6358`
Description The color that focuses the user attention. Used for primary buttons and for elements of primary importance across the theme.
$kendo-color-primary-contrast	Color	`k-contrast-legacy($kendo-color-primary)`	`white`
Description The color used along with the primary color denoted by $kendo-color-primary. Used to provide contrast between the background and foreground colors.
$kendo-color-secondary	Color	`#666666`	`#666666`
Description The secondary color of the theme.
$kendo-color-secondary-contrast	Color	`k-contrast-legacy($kendo-color-secondary)`	`white`
Description The color used along with the secondary color denoted by $kendo-color-secondary. Used to provide contrast between the background and foreground colors.
$kendo-color-tertiary	Color	`#03a9f4`	`#03a9f4`
Description The tertiary color of the theme.
$kendo-color-tertiary-contrast	Color	`k-contrast-legacy($kendo-color-tertiary)`	`white`
Description The color used along with the tertiary color denoted by $kendo-color-tertiary. Used to provide contrast between the background and foreground colors.
$kendo-color-info	Color	`#0058e9`	`#0058e9`
Description The color for informational messages and states.
$kendo-color-success	Color	`#37b400`	`#37b400`
Description The color for success messages and states.
$kendo-color-warning	Color	`#ffc000`	`#ffc000`
Description The color for warning messages and states.
$kendo-color-error	Color	`#f31700`	`#f31700`
Description The color for error messages and states.
$kendo-color-dark	Color	`#424242`	`#424242`
Description The dark color of the theme.
$kendo-color-light	Color	`#ebebeb`	`#ebebeb`
Description The light color of the theme.
$kendo-color-inverse	Color	`if($kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark)`	`#424242`
Description Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark

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	`272px`	`272px`
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	String	`$kendo-font-family`	`inherit`
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`	`1.4285714286`
Description The line height of the ColorEditor.
$kendo-color-editor-text	Color	`$kendo-component-text`	`#424242`
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.08)`
Description The border color of the ColorEditor.
$kendo-color-editor-focus-border	Null	`null`	`null`
Description The border color of the focused ColorEditor.
$kendo-color-editor-focus-shadow	Null	`null`	`null`
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-math-div( $kendo-color-editor-spacer, 1.5 )`	`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	`4px`	`4px`
Description The outline offset of the focused ColorGradient.

Colorpalette

Name	Type	Default value	Computed value
$kendo-color-palette-font-family	String	`$kendo-font-family`	`inherit`
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	`$kendo-body-bg`	`#ffffff`
Description Background color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
$kendo-component-text	Color	`$kendo-body-text`	`#424242`
Description Text color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
$kendo-component-border	Color	`rgba(if($kendo-is-dark-theme, $kendo-color-white, $kendo-color-black), 0.08)`	`rgba(0, 0, 0, 0.08)`
Description Border color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
$kendo-component-header-bg	Color	`$kendo-base-bg`	`#fafafa`
Description Background color of the component header.
$kendo-component-header-text	Color	`$kendo-base-text`	`#424242`
Description Text color of the component header.
$kendo-component-header-border	Color	`$kendo-base-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of the component header.
$kendo-component-header-gradient	Null	`null`	`null`
Description Gradient of the component header.
$kendo-invalid-bg	Null	`null`	`null`
Description Background color of the invalid items.
$kendo-invalid-text	Color	`$kendo-color-error`	`#f31700`
Description Text color of the invalid items.
$kendo-invalid-border	Color	`$kendo-color-error`	`#f31700`
Description Border color of the invalid items.
$kendo-invalid-shadow	Null	`null`	`null`
Description Shadow of the invalid items.
$kendo-valid-bg	Null	`null`	`null`
Description Background color of the valid items.
$kendo-valid-text	Color	`$kendo-color-success`	`#37b400`
Description Text color of the valid items.
$kendo-valid-border	Color	`$kendo-color-success`	`#37b400`
Description Border color of the valid items.
$kendo-valid-shadow	Null	`null`	`null`
Description Shadow of the valid items.

Dialog

Name	Type	Default value	Computed value
$kendo-dialog-titlebar-bg	Color	`$kendo-component-header-bg`	`#fafafa`
Description The background color of the Dialog titlebar.
$kendo-dialog-titlebar-text	Color	`$kendo-component-header-text`	`#424242`
Description The text color of the Dialog titlebar.
$kendo-dialog-titlebar-border	String	`inherit`	`inherit`
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": #ff6358, "light": #ebebeb, "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, 2 )`	`8px`
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, 4 )`	`16px`
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-header-bg`	`#fafafa`
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	String	`$kendo-font-family`	`inherit`
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.25`
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`	`16px`
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`	`16px`
Description The vertical padding of the pane content in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-y	Number	`k-map-get( $kendo-spacing, 3.5 )`	`14px`
Description The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
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	`#f5f5f5`	`#f5f5f5`
Description The background color of the dock indicator in the DockManager component.
$kendo-dock-indicator-text	Color	`$kendo-color-primary`	`#ff6358`
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`	`#ff6358`
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	`$kendo-color-primary`	`#ff6358`
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	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 ))`	`rgba(255, 99, 88, 0.16)`
Description The background color of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border	Color	`$kendo-color-primary`	`#ff6358`
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

Dropzone

Name	Type	Default value	Computed value
$kendo-dropzone-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the DropZone.
$kendo-dropzone-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The vertical padding of the DropZone.
$kendo-dropzone-border-width	Number	`1px`	`1px`
Description The border width of the DropZone.
$kendo-dropzone-min-height	Number	`220px`	`220px`
Description The minimum height of the DropZone.
$kendo-dropzone-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the DropZone.
$kendo-dropzone-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the DropZone.
$kendo-dropzone-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the DropZone.
$kendo-dropzone-bg	Color	`$kendo-base-bg`	`#fafafa`
Description The background color of the DropZone.
$kendo-dropzone-text	Color	`$kendo-base-text`	`#424242`
Description The text color of the DropZone.
$kendo-dropzone-border	Color	`$kendo-base-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the DropZone.
$kendo-dropzone-icon-spacing	Number	`k-map-get( $kendo-spacing, 6 )`	`24px`
Description The spacing below the DropZone icon.
$kendo-dropzone-icon-text	Color	`if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 ))`	`#7e7e7e`
Description The text color of the DropZone icon.
$kendo-dropzone-icon-hover-text	Color	`$kendo-color-primary`	`#ff6358`
Description The text color of the hovered DropZone icon.
$kendo-dropzone-hint-font-size	Null	`null`	`null`
Description The font size of the DropZone hint.
$kendo-dropzone-hint-spacing	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The spacing below the DropZone hint.
$kendo-dropzone-hint-text	Null	`null`	`null`
Description The text color of the DropZone hint.
$kendo-dropzone-note-font-size	Number	`$kendo-font-size-sm`	`12px`
Description The font size of the DropZone note.
$kendo-dropzone-note-spacing	Null	`null`	`null`
Description The spacing below the DropZone note.
$kendo-dropzone-note-text	Color	`$kendo-subtle-text`	`#666666`
Description The text color of the DropZone note.

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	String	`$kendo-font-family`	`inherit`
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`	`1.4285714286`
Description The line height of the Еditor.
$kendo-editor-placeholder-text	Color	`$kendo-input-placeholder-text`	`#666666`
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`	`#ff6358`
Description The selected background color of the Editor.
$kendo-editor-highlighted-bg	Color	`if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix($kendo-color-primary, #ffffff, 20%))`	`#ffe0de`
Description The highlighted background color of the Editor.
$kendo-editor-export-tool-icon-margin-x	Number	`.25em`	`0.25em`
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.

Expander

Name	Type	Default value	Computed value
$kendo-expander-spacing-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
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	String	`$kendo-font-family`	`inherit`
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`	`1.4285714286`
Description The hine height of the ExpansionPanel.
$kendo-expander-text	Color	`$kendo-component-text`	`#424242`
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.08)`
Description The border color of the ExpansionPanel.
$kendo-expander-focus-shadow	List	`$kendo-list-item-focus-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.12)`
Description The box shadow of the focused ExpansionPanel.
$kendo-expander-header-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
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`	`#424242`
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(0, 0, 0, .04)`	`rgba(0, 0, 0, 0.04)`
Description The background color of the hovered ExpansionPanel header.
$kendo-expander-header-focus-bg	Null	`null`	`null`
Description The background color of the focused ExpansionPanel header.
$kendo-expander-header-focus-shadow	List	`$kendo-list-item-focus-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.12)`
Description The box shadow of the focused ExpansionPanel header.
$kendo-expander-title-text	Color	`$kendo-color-primary`	`#ff6358`
Description The text color of the ExpansionPanel title.
$kendo-expander-header-sub-title-text	Color	`$kendo-subtle-text`	`#666666`
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, 4 )`	`16px`
Description The horizontal padding of the ExpansionPanel content.
$kendo-expander-content-padding-y	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The vertical padding of the ExpansionPanel content.

Filemanager

Name	Type	Default value	Computed value
$kendo-file-manager-spacer	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The space between the FileManager items.
$kendo-file-manager-border-width	Number	`1px`	`1px`
Description The border width of the FileManager.
$kendo-file-manager-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the FileManager.
$kendo-file-manager-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the FileManager.
$kendo-file-manager-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the FileManager.
$kendo-file-manager-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the FileManager.
$kendo-file-manager-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the FileManager.
$kendo-file-manager-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the FileManager.
$kendo-file-manager-toolbar-border-width	Number	`$kendo-file-manager-border-width`	`1px`
Description The border width of the FileManager Toolbar.
$kendo-file-manager-toolbar-bg	Null	`null`	`null`
Description The background color of the FileManager Toolbar.
$kendo-file-manager-toolbar-text	Null	`null`	`null`
Description The text color of the FileManager Toolbar.
$kendo-file-manager-toolbar-border	Null	`null`	`null`
Description The border color of the FileManager Toolbar.
$kendo-file-manager-toolbar-gradient	Null	`null`	`null`
Description The gradient of the FileManager Toolbar.
$kendo-file-manager-navigation-padding-x	Number	`$kendo-file-manager-spacer`	`16px`
Description The horizontal padding of the FileManager Navigation.
$kendo-file-manager-navigation-padding-y	Number	`$kendo-file-manager-spacer`	`16px`
Description The vertical padding of the FileManager Navigation.
$kendo-file-manager-navigation-width	Number	`20%`	`20%`
Description The width of the FileManager Navigation.
$kendo-file-manager-navigation-border-width	Number	`$kendo-file-manager-border-width`	`1px`
Description The border width of the FileManager Navigation.
$kendo-file-manager-navigation-bg	Null	`null`	`null`
Description The background color of the FileManager Navigation.
$kendo-file-manager-navigation-text	Null	`null`	`null`
Description The text color of the FileManager Navigation.
$kendo-file-manager-navigation-border	Null	`null`	`null`
Description The border color of the FileManager Navigation.
$kendo-file-manager-breadcrumb-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The vertical padding of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-border-width	Number	`$kendo-file-manager-border-width`	`1px`
Description The border width of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-bg	Color	`$kendo-toolbar-bg`	`#fafafa`
Description The background color of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-text	Null	`null`	`null`
Description The text color of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-border	Null	`null`	`null`
Description The border color of the FileManager Breadcrumb.
$kendo-file-manager-listview-bg	Null	`null`	`null`
Description The background color of the FileManager ListView.
$kendo-file-manager-listview-text	Null	`null`	`null`
Description The text color of the FileManager ListView.
$kendo-file-manager-listview-border	Null	`null`	`null`
Description The border color of the FileManager ListView.
$kendo-file-manager-listview-item-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The horizontal padding of the FileManager ListView item.
$kendo-file-manager-listview-item-padding-y	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The vertical padding of the FileManager ListView item.
$kendo-file-manager-listview-item-width	Number	`120px`	`120px`
Description The width of the FileManager ListView item.
$kendo-file-manager-listview-item-height	Number	`120px`	`120px`
Description The height of the FileManager ListView item.
$kendo-file-manager-listview-item-bg	Null	`null`	`null`
Description The background color of the FileManager ListView item.
$kendo-file-manager-listview-item-text	Null	`null`	`null`
Description The text color of the FileManager ListView item.
$kendo-file-manager-listview-item-border	Null	`null`	`null`
Description The border color of the FileManager ListView item.
$kendo-file-manager-listview-item-icon-bg	Null	`null`	`null`
Description The background color of the FileManager ListView item icon.
$kendo-file-manager-listview-item-icon-text	Color	`if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))`	`#7e7e7e`
Description The text color of the FileManager ListView item icon.
$kendo-file-manager-listview-item-icon-border	Null	`null`	`null`
Description The border color of the FileManager ListView item icon.
$kendo-file-manager-listview-item-icon-selected-bg	Null	`null`	`null`
Description Background color of the FileManager selected ListView item icon.
$kendo-file-manager-listview-item-icon-selected-text	String	`inherit`	`inherit`
Description Text color of the FileManager selected ListView item icon.
$kendo-file-manager-listview-item-icon-selected-border	Null	`null`	`null`
Description Border color of the FileManager selected ListView item icon.
$kendo-file-manager-grid-bg	Null	`null`	`null`
Description The background color of the FileManager Grid.
$kendo-file-manager-grid-text	Null	`null`	`null`
Description The text color of the FileManager Grid.
$kendo-file-manager-grid-border	Null	`null`	`null`
Description The border color of the FileManager Grid.
$kendo-file-manager-preview-padding-x	Number	`$kendo-file-manager-spacer`	`16px`
Description The horizontal padding of the FileManager preview.
$kendo-file-manager-preview-padding-y	Number	`$kendo-file-manager-spacer`	`16px`
Description The vertical padding of the FileManager preview.
$kendo-file-manager-preview-width	Number	`20%`	`20%`
Description The width of the FileManager preview.
$kendo-file-manager-preview-border-width	Number	`$kendo-file-manager-border-width`	`1px`
Description The border width of the FileManager preview.
$kendo-file-manager-preview-spacing	Number	`$kendo-file-manager-spacer`	`16px`
Description The spacing of the FileManager preview.
$kendo-file-manager-preview-column-gap	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The gap between the columns in the FileManager preview.
$kendo-file-manager-preview-bg	Null	`null`	`null`
Description The background color of the FileManager preview.
$kendo-file-manager-preview-text	Null	`null`	`null`
Description The text color of the FileManager preview.
$kendo-file-manager-preview-border	Null	`null`	`null`
Description The border color of the FileManager preview.
$kendo-file-manager-preview-icon-bg	Null	`null`	`null`
Description The background color of the FileManager preview icon.
$kendo-file-manager-preview-icon-text	Color	`if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))`	`#7e7e7e`
Description The text color of the FileManager preview icon.
$kendo-file-manager-preview-icon-border	Null	`null`	`null`
Description The border color of the FileManager preview icon.

Filter

Name	Type	Default value	Computed value
$kendo-filter-padding-x	Number	`$kendo-padding-md-x`	`8px`
Description The horizontal padding of the Filter.
$kendo-filter-padding-y	Number	`$kendo-padding-md-y`	`4px`
Description The vertical padding of the Filter.
$kendo-filter-bottom-margin	Number	`30px`	`30px`
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`	`#ff6358`
Description The text color of the Filter preview field.
$kendo-filter-preview-operator-text	Color	`$kendo-subtle-text`	`#666666`
Description The text color of the Filter preview operator.
$kendo-filter-toolbar-focus-shadow	List	`0 0 0 2px rgba(0, 0, 0, .08)`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The box shadow of the focused Filter toolbar.

Floating-action-button

Name	Type	Default value	Computed value
$kendo-fab-border-width	Number	`1px`	`1px`
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	String	`$kendo-font-family`	`inherit`
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	`$kendo-line-height-md`	`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, 0.5 )`	`2px`
Description The spacing of the 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 width of the FAB item icon border.
$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": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "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	`k-elevation(5)`	`var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The base shadow of the FAB.
$kendo-fab-disabled-shadow	String	`k-elevation(5)`	`var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The shadow of the disabled FAB.
$kendo-fab-active-shadow	Null	`null`	`null`
Description The shadow of the active FAB.
$kendo-fab-outline-style	String	`solid`	`solid`
Description The outline style of the FAB.
$kendo-fab-outline-width	Number	`k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description The outline width of the FAB.
$kendo-fab-item-text	Color	`$kendo-component-text`	`#424242`
Description The base text color of the FAB item.
$kendo-fab-item-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The base background color of the FAB item.
$kendo-fab-item-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The base border color of the FAB item.
$kendo-fab-item-icon-text	Color	`$kendo-button-text`	`#424242`
Description The base text color of the FAB item icon.
$kendo-fab-item-icon-bg	Color	`$kendo-button-bg`	`#f5f5f5`
Description The base background color of the FAB item icon.
$kendo-fab-item-icon-border	Color	`$kendo-button-border`	`rgba(0, 0, 0, 0.08)`
Description The base border color of the FAB item icon.
$kendo-fab-item-shadow	String	`$kendo-fab-shadow`	`var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The base shadow of the FAB item.
$kendo-fab-item-disabled-shadow	String	`$kendo-fab-disabled-shadow`	`var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The shadow of the disabled FAB item.
$kendo-fab-item-active-shadow	Null	`$kendo-fab-active-shadow`	`null`
Description The shadow of the active FAB item.
$kendo-fab-item-outline-style	String	`solid`	`solid`
Description The outline style of the FAB item.
$kendo-fab-item-outline-width	Number	`k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description The outline width of the FAB item.
$kendo-fab-item-outline-color	Color	`rgba(0, 0, 0, .08)`	`rgba(0, 0, 0, 0.08)`
Description The outline color of the 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`	`14px`
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.4285714286`
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.4285714286 * 14px)`
Description The height of the Floating Label.
$kendo-floating-label-offset-x	Calculation	`calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )`	`calc(8px + 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.4285714286 * 14px) + 1px + 4px)`
Description The vertical offset of the Floating Label.
$kendo-floating-label-focus-scale	Number	`1`	`1`
Description The transformation scale of the focused Floating Label.
$kendo-floating-label-focus-offset-x	Number	`0`	`0`
Description The horizontal offset of the focused Floating Label.
$kendo-floating-label-focus-offset-y	Number	`0`	`0`
Description The vertical offset of the focused Floating Label.
$kendo-floating-label-transition	List	`.2s ease-out`	`0.2s ease-out`
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	Null	`null`	`null`
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	Null	`null`	`null`
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`	`16px`
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`	`1.4285714286`
Description The line height of the Form.
$kendo-form-line-height-em	Calculation	`calc( #{$kendo-form-line-height} * 1em )`	`calc(1.4285714286 * 1em)`
Description The line height of the Form in em units.
$kendo-form-sm-line-height	Number	`$kendo-line-height-sm`	`1.25`
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.08)`
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	`14px`	`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	`12px`	`12px`
Description The font size of the Form hint.
$kendo-form-hint-font-style	String	`italic`	`italic`
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, 2.5 )`	`10px`
Description The row spacing of the small Form.
$kendo-form-md-rows-spacing	Number	`k-map-get( $kendo-spacing, 3.5 )`	`14px`
Description The row spacing of the medium Form.
$kendo-form-lg-rows-spacing	Number	`k-map-get( $kendo-spacing, 4.5 )`	`18px`
Description The row spacing of the large Form.
$kendo-form-separator-margin	List	`$kendo-form-md-rows-spacing 0 0`	`14px 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.08)`
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	Color	`$kendo-color-error`	`#f31700`
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`	`22px`
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	Color	`if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 ))`	`#373737`
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: 10px), md: (form-rows-spacing: 14px), lg: (form-rows-spacing: 18px))`
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`	`12px`
Description Horizontal padding of the grid.
$kendo-grid-padding-y	Number	`$kendo-table-md-cell-padding-y`	`8px`
Description Vertical padding of the grid.
$kendo-grid-header-padding-x	Number	`$kendo-grid-padding-x`	`12px`
Description Horizontal padding of the grid header.
$kendo-grid-header-padding-y	Number	`$kendo-grid-padding-y`	`8px`
Description Vertical padding of the grid header.
$kendo-grid-grouping-header-padding-x	Number	`$kendo-grid-padding-y`	`8px`
Description Horizontal padding of the grid grouping header.
$kendo-grid-grouping-header-padding-y	Number	`$kendo-grid-grouping-header-padding-x`	`8px`
Description Vertical padding of the grid grouping header.
$kendo-grid-cell-padding-x	Number	`$kendo-grid-padding-x`	`12px`
Description Horizontal padding of the grid cell.
$kendo-grid-cell-padding-y	Number	`$kendo-grid-padding-y`	`8px`
Description Vertical padding of the grid cell.
$kendo-grid-filter-cell-padding-x	Number	`$kendo-grid-padding-y`	`8px`
Description Horizontal padding of the grid filter cell.
$kendo-grid-filter-cell-padding-y	Number	`$kendo-grid-filter-cell-padding-x`	`8px`
Description Vertical padding of the grid filter cell.
$kendo-grid-edit-cell-padding-x	Number	`$kendo-grid-cell-padding-x`	`12px`
Description Horizontal padding of the grid edit cell.
$kendo-grid-edit-cell-padding-y	Number	`3px`	`3px`
Description Vertical padding of the grid filter cell.
$kendo-grid-bg	Color	`$kendo-table-bg`	`#ffffff`
Description Background color of the grid component
$kendo-grid-text	Color	`$kendo-table-text`	`#424242`
Description Text color of the grid component
$kendo-grid-border	Color	`$kendo-table-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of the grid component
$kendo-grid-header-bg	Color	`$kendo-table-header-bg`	`#fafafa`
Description Background color of grid header
$kendo-grid-header-text	Color	`$kendo-table-header-text`	`#424242`
Description Text color of grid header
$kendo-grid-header-border	Color	`$kendo-table-header-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of grid header
$kendo-grid-header-gradient	Null	`$kendo-table-header-gradient`	`null`
Description Background gradient of grid header
$kendo-grid-footer-bg	Color	`$kendo-grid-header-bg`	`#fafafa`
Description Background color of grid footer
$kendo-grid-footer-text	Color	`$kendo-grid-header-text`	`#424242`
Description Text color of grid footer
$kendo-grid-footer-border	Color	`$kendo-grid-header-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of grid footer
$kendo-grid-alt-bg	Color	`$kendo-table-alt-row-bg`	`rgba(0, 0, 0, 0.04)`
Description Background color of alternating rows in grid
$kendo-grid-alt-text	Null	`$kendo-table-alt-row-text`	`null`
Description Text color of alternating rows in grid
$kendo-grid-alt-border	Null	`$kendo-table-alt-row-border`	`null`
Description Border color of alternating rows in grid
$kendo-grid-hover-bg	Color	`$kendo-table-hover-bg`	`#ededed`
Description Background color of hovered rows in grid
$kendo-grid-hover-text	Null	`$kendo-table-hover-text`	`null`
Description Text color of hovered rows in grid
$kendo-grid-hover-border	Null	`$kendo-table-hover-border`	`null`
Description Border color of hovered rows in grid
$kendo-grid-selected-bg	Color	`$kendo-table-selected-bg`	`rgba(255, 99, 88, 0.25)`
Description Background color of selected rows in grid
$kendo-grid-selected-text	Null	`$kendo-table-selected-text`	`null`
Description Text color of selected rows in grid
$kendo-grid-selected-border	Null	`$kendo-table-selected-border`	`null`
Description Border color of selected rows in grid
$kendo-grid-selection-aggregates-bg	Color	`$kendo-grid-header-bg`	`#fafafa`
Description Background color of the selection aggregates container
$kendo-grid-selection-aggregates-text	Color	`$kendo-grid-text`	`#424242`
Description Text color of the selection aggregates container
$kendo-grid-selection-aggregates-border	Color	`$kendo-grid-border`	`rgba(0, 0, 0, 0.08)`
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	`$kendo-grid-line-height`	`1.4285714286`
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	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .12 ))`	`rgba(0, 0, 0, 0.12)`
Description Background color of the grid row resize indicator
$kendo-grid-row-resizer-active-bg	Color	`$kendo-color-primary`	`#ff6358`
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, 2 )`	`8px`
Description The horizontal padding of the Input components.
$kendo-input-sm-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the small Input components.
$kendo-input-md-padding-x	Number	`$kendo-input-padding-x`	`8px`
Description The horizontal padding of the medium Input components.
$kendo-input-lg-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the large Input components.
$kendo-input-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The vertical padding of the Input components.
$kendo-input-sm-padding-y	Number	`k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description The vertical padding of the small Input components.
$kendo-input-md-padding-y	Number	`$kendo-input-padding-y`	`4px`
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	String	`$kendo-font-family`	`inherit`
Description The font family of the Input components.
$kendo-input-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Input components.
$kendo-input-sm-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the small Input components.
$kendo-input-md-font-size	Number	`$kendo-input-font-size`	`14px`
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	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the Input components.
$kendo-input-sm-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the small Input components.
$kendo-input-md-line-height	Number	`$kendo-input-line-height`	`1.4285714286`
Description The line height of the medium Input components.
$kendo-input-lg-line-height	Number	`$kendo-line-height-lg`	`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: $kendo-input-sm-padding-y, button-padding-y: $kendo-input-sm-padding-y ), 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: $kendo-input-md-padding-y, button-padding-y: $kendo-input-md-padding-y ), 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: $kendo-input-lg-padding-y, button-padding-y: $kendo-input-lg-padding-y ) )	`(sm: (padding-x: 8px, padding-y: 2px, font-size: 14px, line-height: 1.4285714286, button-padding-x: 2px, button-padding-y: 2px), md: (padding-x: 8px, padding-y: 4px, font-size: 14px, line-height: 1.4285714286, button-padding-x: 4px, button-padding-y: 4px), lg: (padding-x: 8px, padding-y: 8px, font-size: 16px, line-height: 1.5, button-padding-x: 8px, button-padding-y: 8px))`
Description The sizes map for the Input components.
$kendo-input-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the Input components.
$kendo-input-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the Input components.
$kendo-input-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
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	`if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-input-border, .16 ))`	`rgba(0, 0, 0, 0.16)`
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-input-hover-border`	`rgba(0, 0, 0, 0.16)`
Description The border color of the focused Input components.
$kendo-input-focus-shadow	List	`0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-input-focus-border, .08 ))`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
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	Null	`null`	`null`
Description The background color of the disabled Input components.
$kendo-input-disabled-text	Null	`null`	`null`
Description The text color of the disabled Input components.
$kendo-input-disabled-border	Null	`null`	`null`
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`	`#424242`
Description The text color of the outline Input components.
$kendo-input-outline-border	Color	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-button-text, .5))`	`rgba(66, 66, 66, 0.5)`
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	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 80%, transparent), rgba( $kendo-button-text, .8))`	`rgba(66, 66, 66, 0.8)`
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	Null	`null`	`null`
Description The border color of the outline focused Input components.
$kendo-input-outline-focus-shadow	List	`$kendo-input-focus-shadow`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The shadow of 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`	`#424242`
Description The text color of the flat Input components.
$kendo-input-flat-border	Color	`$kendo-input-border`	`rgba(0, 0, 0, 0.08)`
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.16)`
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	Null	`null`	`null`
Description The border color of the flat focused Input components.
$kendo-input-flat-focus-shadow	List	`$kendo-input-focus-shadow`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The shadow of the flat focused Input components.
$kendo-input-placeholder-text	Color	`$kendo-subtle-text`	`#666666`
Description The text color of the Input placeholder.
$kendo-input-placeholder-opacity	Number	`1`	`1`
Description The opacity of the Input placeholder.
$kendo-input-clear-value-text	Null	`null`	`null`
Description The color of the Input clear value icon.
$kendo-input-clear-value-opacity	Number	`.5`	`0.5`
Description The opacity of the Input clear value icon.
$kendo-input-clear-value-hover-text	Null	`null`	`null`
Description The color of the hovered Input clear value icon.
$kendo-input-clear-value-hover-opacity	Number	`1`	`1`
Description The opacity of the hovered Input clear value icon.
$kendo-input-values-margin-y	Number	`k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description The vertical margin of the clear value icon.
$kendo-input-values-margin-x	Number	`$kendo-input-values-margin-y`	`2px`
Description The horizontal margin of the clear value icon.
$kendo-input-button-width	Calculation	`$kendo-button-inner-calc-size`	`calc(1.4285714286em + 8px)`
Description 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	Calculation	`$kendo-button-inner-calc-size`	`calc(1.4285714286em + 8px)`
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-text	Color	`$kendo-input-border`	`rgba(0, 0, 0, 0.08)`
Description The color of the Input separator.
$kendo-input-separator-opacity	Number	`.5`	`0.5`
Description The opacity of the Input separator.
$kendo-input-prefix-text	Color	`$kendo-subtle-text`	`#666666`
Description The text color of the Input prefix.
$kendo-input-suffix-text	Color	`$kendo-subtle-text`	`#666666`
Description The text color of the Input suffix.
$kendo-input-prefix-text	Color	`$kendo-subtle-text`	`#666666`
Description The text color of the Input prefix.
$kendo-input-suffix-text	Color	`$kendo-subtle-text`	`#666666`
Description The text color of the Input suffix.
$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	String	`$kendo-font-family`	`inherit`
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-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: 8px, header-padding-y: 2px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 2px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 2px, group-item-font-size: null, group-item-line-height: null), md: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 8px, header-padding-y: 4px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 4px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 4px, group-item-font-size: null, group-item-line-height: null), lg: (font-size: 16px, line-height: 1.5, header-padding-x: 8px, header-padding-y: 6px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 8px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 6px, group-item-font-size: null, group-item-line-height: null))
Description The map with the sizes of the List.
$kendo-list-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the List component.
$kendo-list-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the List component.
$kendo-list-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
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	String	`k-elevation(2)`	`var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))`
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`	`#f0f0f0`
Description The background color of the hovered List items.
$kendo-list-item-hover-text	Color	`$kendo-hover-text`	`#424242`
Description The text color of the hovered List items.
$kendo-list-item-focus-bg	Null	`null`	`null`
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	List	`inset 0 0 0 2px rgba(0, 0, 0, .12)`	`inset 0 0 0 2px rgba(0, 0, 0, 0.12)`
Description The box shadow of the focused List items.
$kendo-list-item-selected-bg	Color	`$kendo-selected-bg`	`#ff6358`
Description The background color of the selected List items.
$kendo-list-item-selected-text	Color	`$kendo-selected-text`	`white`
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`	`#666666`
Description The color of the 'No Data' text.
$kendo-list-option-label-text	Color	`$kendo-subtle-text`	`#666666`
Description The color of the 'Option Label' text.

Listbox

Name	Type	Default value	Computed value
$kendo-listbox-spacing	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
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	String	`$kendo-font-family`	`inherit`
Description The font family of the ListBox.
$kendo-listbox-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the ListBox.
$kendo-listbox-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the ListBox.
$kendo-listbox-text	Color	`$kendo-component-text`	`#424242`
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.08)`
Description The border color of the ListBox.
$kendo-listbox-item-padding-x	Null	`null`	`null`
Description The inline padding of the ListBox item.
$kendo-listbox-item-padding-y	Null	`null`	`null`
Description The block padding of the ListBox item.
$kendo-listbox-drop-hint-width	Number	`1px`	`1px`
Description The width of the ListBox drop hint.
$kendo-listbox-drop-hint-border-width	Null	`null`	`null`
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	String	`$kendo-font-family`	`inherit`
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`	`1.4285714286`
Description The line height of the ListView.
$kendo-listview-text	Color	`$kendo-component-text`	`#424242`
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.08)`
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	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`	`rgba(255, 99, 88, 0.25)`
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	Null	`null`	`null`
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	List	`inset 0 0 0 2px rgba(0, 0, 0, .13)`	`inset 0 0 0 2px rgba(0, 0, 0, 0.13)`
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	`#656565`	`#656565`
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.08)`
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`	`1px`
Description Width of the border around the menu popup.
$kendo-menu-popup-font-size	Number	`$kendo-font-size-md`	`14px`
Description Font sizes of the menu popup.
$kendo-menu-popup-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description Line heights used along with $kendo-font-size.
$kendo-menu-popup-bg	Color	`$kendo-popup-bg`	`#ffffff`
Description The background of the menu popup.
$kendo-menu-popup-text	Color	`$kendo-popup-text`	`#424242`
Description The text color of the menu popup.
$kendo-menu-popup-border	Color	`$kendo-popup-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the menu popup.
$kendo-menu-popup-gradient	Null	`null`	`null`
Description The background gradient of the menu popup.
$kendo-menu-popup-item-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Horizontal padding of the menu item in popup.
$kendo-menu-popup-item-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description Vertical padding of the menu item in popup.
$kendo-menu-popup-item-padding-end	Calculation	`calc( #{$kendo-menu-popup-item-padding-x * 2} + #{$kendo-icon-size} )`	`calc(16px + 16px)`
Description The end padding of the menu item in popup.
$kendo-menu-popup-sm-item-icon-margin-start	Number	`$kendo-menu-popup-sm-item-padding-x`	`8px`
Description The start margin of the menu item expand icon.
$kendo-menu-popup-sm-item-icon-margin-end	Calculation	`calc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )`	`calc(-1 * (calc(16px + 16px) - 4px))`
Description The end margin of the menu item expand icon.
$kendo-menu-popup-item-spacing	Number	`0px`	`0px`
Description The spacing between the menu items in popup.
$kendo-menu-popup-item-bg	Null	`null`	`null`
Description The background of the menu item in popup.
$kendo-menu-popup-item-text	Null	`null`	`null`
Description The text color of the menu item in popup.
$kendo-menu-popup-item-border	Null	`null`	`null`
Description The border color of the menu item in popup.
$kendo-menu-popup-item-gradient	Null	`null`	`null`
Description The background gradient of the menu item in popup.
$kendo-menu-popup-item-hover-bg	Color	`$kendo-list-item-hover-bg`	`#f0f0f0`
Description The background of hovered menu item in popup.
$kendo-menu-popup-item-hover-text	Color	`$kendo-list-item-hover-text`	`#424242`
Description The text color of hovered menu item in popup.
$kendo-menu-popup-item-hover-border	Null	`null`	`null`
Description The border color of hovered menu item in popup.
$kendo-menu-popup-item-hover-gradient	Null	`null`	`null`
Description The background gradient of hovered menu item in popup.
$kendo-menu-popup-item-expanded-bg	Color	`$kendo-list-item-selected-bg`	`#ff6358`
Description The background of expanded menu item in popup.
$kendo-menu-popup-item-expanded-text	Color	`$kendo-list-item-selected-text`	`white`
Description The text color of expanded menu item in popup.
$kendo-menu-popup-item-expanded-border	Null	`null`	`null`
Description The border color of expanded menu item in popup.
$kendo-menu-popup-item-expanded-gradient	Null	`null`	`null`
Description The background gradient of expanded menu item in popup.
$kendo-menu-popup-item-focus-shadow	List	`$kendo-menu-item-focus-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.12)`
Description The base shadow of focused menu item in popup.

Name	Type	Default value	Computed value
$kendo-menu-button-arrow-padding-x	Number	`$kendo-button-padding-y`	`4px`
Description The horizontal padding of the button arrow in the Menu Button..

Notification

Name	Type	Default value	Computed value
$kendo-notification-group-gap	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The row-gap between the elements in the Notification group.
$kendo-notification-padding-x	Number	`8px`	`8px`
Description The horizontal padding of the Notification.
$kendo-notification-padding-y	Number	`4px`	`4px`
Description The vertical padding of the Notification.
$kendo-notification-border-width	Number	`1px`	`1px`
Description The width of the border around the Notification.
$kendo-notification-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description The border radius of the Notification.
$kendo-notification-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the Notification.
$kendo-notification-font-size	Number	`$kendo-font-size-sm`	`12px`
Description The font size of the Notification.
$kendo-notification-line-height	Number	`$kendo-line-height-md`	`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`	`#424242`
Description The text color of the Notification.
$kendo-notification-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the Notification.
$kendo-notification-shadow	String	`$kendo-popup-shadow`	`var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The box shadow of the Notification.
$kendo-notification-icon-spacing	Number	`$kendo-icon-spacing`	`4px`
Description The horizontal spacing of the Notification icon.
$kendo-notification-theme-colors	Map	`$kendo-theme-colors`	`("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "inverse": #424242)`
Description 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: #ebebeb, border: #ebebeb), "dark": (color: white, background-color: #424242, border: #424242), "error": (color: white, background-color: #f31700, border: #f31700), "warning": (color: black, background-color: #ffc000, border: #ffc000), "success": (color: white, background-color: #37b400, border: #37b400), "info": (color: white, background-color: #0058e9, border: #0058e9), "tertiary": (color: white, background-color: #03a9f4, border: #03a9f4), "secondary": (color: white, background-color: #666666, border: #666666), "primary": (color: white, background-color: #ff6358, border: #ff6358))
Description The generated theme colors map for the Notification.

Orgchart

Name	Type	Default value	Computed value
$kendo-orgchart-spacer	Number	`k-map-get( $kendo-spacing, 6 )`	`24px`
Description The spacing index of the OrgChart.
$kendo-orgchart-padding-y	Number	`$kendo-orgchart-spacer`	`24px`
Description The vertical padding of the OrgChart.
$kendo-orgchart-padding-x	Number	`$kendo-orgchart-padding-y`	`24px`
Description The horizontal padding of the OrgChart.
$kendo-orgchart-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the OrgChart.
$kendo-orgchart-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the OrgChart.
$kendo-orgchart-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the OrgChart.
$kendo-orgchart-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the OrgChart.
$kendo-orgchart-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the OrgChart.
$kendo-orgchart-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the OrgChart.
$kendo-orgchart-node-gap	Number	`$kendo-orgchart-spacer`	`24px`
Description The spacing of the OrgChart node.
$kendo-orgchart-group-gap	Number	`$kendo-orgchart-spacer`	`24px`
Description The spacing of the OrgChart group.
$kendo-orgchart-node-container-gap	Number	`$kendo-orgchart-spacer`	`24px`
Description The spacing of the OrgChart node container.
$kendo-orgchart-node-group-padding-y	Number	`$kendo-orgchart-spacer`	`24px`
Description The vertical padding of the OrgChart node group.
$kendo-orgchart-node-group-padding-x	Number	`$kendo-orgchart-node-group-padding-y`	`24px`
Description The horizontal padding of the OrgChart node group.
$kendo-orgchart-node-group-border-width	Number	`1px`	`1px`
Description The border width of the OrgChart node group.
$kendo-orgchart-node-group-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description The border radius of the OrgChart node group.
$kendo-orgchart-node-group-bg	Color	`$kendo-base-bg`	`#fafafa`
Description The background color of the OrgChart node group.
$kendo-orgchart-node-group-text	Color	`$kendo-base-text`	`#424242`
Description The text color of the OrgChart node group.
$kendo-orgchart-node-group-border	Color	`$kendo-base-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the OrgChart node group.
$kendo-orgchart-node-group-focus-border	Color	`$kendo-card-focus-border`	`rgba(0, 0, 0, 0.15)`
Description The border color of the focused OrgChart node group.
$kendo-orgchart-node-group-focus-shadow	String	`k-elevation(1)`	`var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The shadow of the focused OrgChart node group.
$kendo-orgchart-node-group-title-font-size	Number	`$kendo-font-size-lg`	`16px`
Description The font size of the OrgChart node group title.
$kendo-orgchart-node-group-title-margin-bottom	Number	`k-math-div( $kendo-orgchart-spacer, 3 )`	`8px`
Description The bottom margin of the OrgChart node group title.
$kendo-orgchart-node-group-title-line-height	Number	`$kendo-line-height-sm`	`1.25`
Description The line height of the OrgChart node group title.
$kendo-orgchart-node-group-subtitle-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the OrgChart node group subtitle.
$kendo-orgchart-node-group-subtitle-margin-bottom	Number	`$kendo-orgchart-spacer`	`24px`
Description The bottom margin of the OrgChart node group subtitle.
$kendo-orgchart-node-group-subtitle-text	Color	`$kendo-subtle-text`	`#666666`
Description The line height of the OrgChart node group subtitle.
$kendo-orgchart-card-width	Number	`300px`	`300px`
Description The width of the OrgChart Card.
$kendo-orgchart-card-padding-y	Number	`$kendo-card-padding-y`	`12px`
Description The vertical padding of the OrgChart Card.
$kendo-orgchart-card-padding-x	Number	`$kendo-orgchart-card-padding-y`	`12px`
Description The horizontal padding of the OrgChart Card.
$kendo-orgchart-card-border-width	Number	`$kendo-card-border-width`	`1px`
Description The border width of the OrgChart Card.
$kendo-orgchart-card-shadow	Null	`$kendo-card-shadow`	`null`
Description The shadow of the OrgChart Card.
$kendo-orgchart-card-focus-shadow	String	`k-elevation(1)`	`var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The shadow of the focused OrgChart Card.
$kendo-orgchart-card-title-margin-bottom	Number	`0px`	`0px`
Description The bottom margin of the OrgChart Card title.
$kendo-orgchart-card-title-font-size	Null	`null`	`null`
Description The font size of the OrgChart Card title.
$kendo-orgchart-card-subtitle-margin-bottom	Number	`0px`	`0px`
Description The bottom margin of the OrgChart Card subtitle.
$kendo-orgchart-card-subtitle-font-size	Null	`null`	`null`
Description The font size of the OrgChart Card subtitle.
$kendo-orgchart-card-body-border-width	List	`2px 0 0`	`2px 0 0`
Description The border width of the OrgChart Card body.
$kendo-orgchart-card-body-border-color	Color	`transparent`	`transparent`
Description The border color of the OrgChart Card body.
$kendo-orgchart-card-body-vbox-margin-right	Number	`k-math-div( $kendo-orgchart-spacer, 2 )`	`12px`
Description The right margin of the OrgChart Card body title wrap.
$kendo-orgchart-card-body-vbox-min-height	Number	`$kendo-card-avatar-size`	`45px`
Description The min height of the OrgChart Card body title wrap.
$kendo-orgchart-line-size	Number	`1px`	`1px`
Description The size of the OrgChart connecting line.
$kendo-orgchart-line-fill	Color	`$kendo-base-border`	`rgba(0, 0, 0, 0.08)`
Description The fill color of the OrgChart connecting line.
$kendo-orgchart-line-v-height	Number	`25px`	`25px`
Description The height of the OrgChart connecting line.

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 + 4px + 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 + 8px + 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.5em + 16px + 2px)`
Description The minimum width of the items in the large Pagers.
$kendo-pager-sm-item-group-spacing	Number	`k-map-get( $kendo-spacing, 3 )`	`12px`
Description The margin between the item groups in the small Pager.
$kendo-pager-md-item-group-spacing	Number	`k-map-get( $kendo-spacing, 3.5 )`	`14px`
Description The margin between the item groups in the medium Pager.
$kendo-pager-lg-item-group-spacing	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
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	String	`$kendo-font-family`	`inherit`
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`	`1.4285714286`
Description The line height of the Pager.
$kendo-pager-bg	Color	`$kendo-component-header-bg`	`#fafafa`
Description The background color of the Pager.
$kendo-pager-text	Color	`$kendo-component-header-text`	`#424242`
Description The text color of the Pager.
$kendo-pager-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the Pager.
$kendo-pager-focus-bg	Null	`null`	`null`
Description The background color of the focused Pager.
$kendo-pager-focus-shadow	List	`$kendo-focus-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.13)`
Description The box shadow of the focused Pager.
$kendo-pager-item-border-width	Number	`0px`	`0px`
Description The border width of the Pager items.
$kendo-pager-item-border-radius	Null	`null`	`null`
Description The border radius of the Pager items.
$kendo-pager-item-spacing	Null	`null`	`null`
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`	`#f0f0f0`
Description The background color of the hovered Pager items.
$kendo-pager-item-hover-text	Color	`$kendo-list-item-hover-text`	`#424242`
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-list-item-selected-bg`	`#ff6358`
Description The background color of the selected Pager items.
$kendo-pager-item-selected-text	Color	`$kendo-list-item-selected-text`	`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-item-focus-opacity	Null	`null`	`null`
Description The opacity of the focused Pager items.
$kendo-pager-item-focus-bg	Color	`transparent`	`transparent`
Description The background color of the focused Pager items.
$kendo-pager-item-focus-shadow	List	`$kendo-list-item-focus-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.12)`
Description The box shadow of the focused Pager items.
$kendo-pager-number-border-radius	Null	`null`	`null`
Description The border radius of the Pager numbers.
$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: 12px, item-min-width: calc(1.4285714286em + 4px + 2px), pager-dropdown-width: 5em), md: (padding-x: 8px, padding-y: 8px, item-group-spacing: 14px, item-min-width: calc(1.4285714286em + 8px + 2px), pager-dropdown-width: 5em), lg: (padding-x: 10px, padding-y: 10px, item-group-spacing: 16px, item-min-width: calc(1.5em + 16px + 2px), pager-dropdown-width: 5em))`
Description The sizes map of the Pager.

Pdf-viewer

Name	Type	Default value	Computed value
$kendo-pdf-viewer-border-width	Number	`1px`	`1px`
Description The border width of the PDFViewer.
$kendo-pdf-viewer-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the PDFViewer.
$kendo-pdf-viewer-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the PDFViewer.
$kendo-pdf-viewer-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the PDFViewer.
$kendo-pdf-viewer-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the PDFViewer.
$kendo-pdf-viewer-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the PDFViewer.
$kendo-pdf-viewer-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the PDFViewer.
$kendo-pdf-viewer-toolbar-bg	Null	`null`	`null`
Description The background color of the PDFViewer Toolbar.
$kendo-pdf-viewer-toolbar-text	Null	`null`	`null`
Description The text color of the PDFViewer Toolbar.
$kendo-pdf-viewer-toolbar-border	Null	`null`	`null`
Description The border color of the PDFViewer Toolbar.
$kendo-pdf-viewer-toolbar-gradient	Null	`null`	`null`
Description The gradient of the PDFViewer Toolbar.
$kendo-pdf-viewer-canvas-bg	Color	`$kendo-app-bg`	`#fafafa`
Description The background color of the PDFViewer canvas.
$kendo-pdf-viewer-canvas-text	Null	`null`	`null`
Description The text color of the PDFViewer canvas.
$kendo-pdf-viewer-canvas-border	Null	`null`	`null`
Description The border color of the PDFViewer canvas.
$kendo-pdf-viewer-page-spacing	Number	`30px`	`30px`
Description The spacing of the PDFViewer page.
$kendo-pdf-viewer-page-bg	Color	`white`	`white`
Description The background color of the PDFViewer page.
$kendo-pdf-viewer-page-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the PDFViewer page.
$kendo-pdf-viewer-page-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the PDFViewer page.
$kendo-pdf-viewer-page-shadow	String	`k-elevation(3)`	`var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The shadow of the PDFViewer page.
$kendo-pdf-viewer-search-panel-padding-x	Number	`$kendo-toolbar-md-padding-x`	`8px`
Description The horizontal padding of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-padding-y	Calculation	`calc( #{$kendo-toolbar-md-padding-x} * 2 )`	`calc(8px * 2)`
Description The vertical padding of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-spacing	Number	`$kendo-toolbar-md-spacing`	`8px`
Description The spacing of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-border-width	Number	`1px`	`1px`
Description The border width of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-border-radius	Number	`0`	`0`
Description The border radius of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-shadow	String	`$kendo-window-shadow`	`var(--kendo-elevation-8, 0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The shadow of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-matches-spacing	Number	`$kendo-padding-sm-x`	`4px`
Description The spacing of the matches container in the PDFViewer search panel.
$kendo-pdf-viewer-selection-line-height	Number	`$kendo-line-height-sm`	`1.25`
Description The line height of the PDFViewer selection.
$kendo-pdf-viewer-search-highlight-bg	Color	`$kendo-body-text`	`#424242`
Description The background color of the PDFViewer highlight.
$kendo-pdf-viewer-search-highlight-mark-bg	Color	`yellow`	`yellow`
Description The background color of the PDFViewer highlight mark.
$kendo-pdf-viewer-icon-text	Color	`$kendo-dropzone-icon-text`	`#7e7e7e`
Description The text color of the PDFViewer icon.

Picker

Name	Type	Default value	Computed value
$kendo-picker-bg	Color	`$kendo-button-bg`	`#f5f5f5`
Description The background color of the Picker components.
$kendo-picker-text	Color	`$kendo-button-text`	`#424242`
Description The text color of the Picker components.
$kendo-picker-border	Color	`$kendo-button-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the Picker components.
$kendo-picker-gradient	List	`$kendo-button-gradient`	`rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)`
Description The gradient of the Picker components.
$kendo-picker-shadow	Null	`$kendo-button-shadow`	`null`
Description The shadow of the Picker components.
$kendo-picker-hover-bg	Color	`$kendo-button-hover-bg`	`#ebebeb`
Description The background color of the hovered Picker components.
$kendo-picker-hover-text	Null	`$kendo-button-hover-text`	`null`
Description The text color of the hovered Picker components.
$kendo-picker-hover-border	Null	`$kendo-button-hover-border`	`null`
Description The border color of the hovered Picker components.
$kendo-picker-hover-gradient	Null	`$kendo-button-hover-gradient`	`null`
Description The gradient of the hovered Picker components.
$kendo-picker-hover-shadow	Null	`$kendo-button-hover-shadow`	`null`
Description The shadow of the hovered Picker components.
$kendo-picker-focus-bg	Null	`$kendo-button-focus-bg`	`null`
Description The background color of the focused Picker components.
$kendo-picker-focus-text	Null	`$kendo-button-focus-text`	`null`
Description The text color of the focused Picker components.
$kendo-picker-focus-border	Null	`$kendo-button-focus-border`	`null`
Description The border color of the focused Picker components.
$kendo-picker-focus-gradient	Null	`$kendo-button-focus-gradient`	`null`
Description The gradient of the focused Picker components.
$kendo-picker-focus-shadow	List	`$kendo-button-focus-shadow`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The shadow of the focused Picker components.
$kendo-picker-disabled-bg	Null	`null`	`null`
Description The background color of the disabled Picker components.
$kendo-picker-disabled-text	Null	`null`	`null`
Description The text color of the disabled Picker components.
$kendo-picker-disabled-border	Null	`null`	`null`
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-button-text`	`#424242`
Description The text color of the outline Picker components.
$kendo-picker-outline-border	Color	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-picker-outline-text, .5))`	`rgba(66, 66, 66, 0.5)`
Description The border color of the outline Picker components.
$kendo-picker-outline-hover-bg	Color	`$kendo-picker-outline-text`	`#424242`
Description The background color of the outline hovered Picker components.
$kendo-picker-outline-hover-text	Color	`if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg ))`	`white`
Description The text color of the outline hovered Picker components.
$kendo-picker-outline-hover-border	Color	`$kendo-picker-outline-hover-bg`	`#424242`
Description The border color of the outline hovered Picker components.
$kendo-picker-outline-focus-bg	Null	`null`	`null`
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	Null	`null`	`null`
Description The border color of the outline focused Picker components.
$kendo-picker-outline-focus-shadow	List	`$kendo-picker-focus-shadow`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The shadow of 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-button-text`	`#424242`
Description The text color of the flat Picker components.
$kendo-picker-flat-border	Color	`$kendo-button-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the flat Picker components.
$kendo-picker-flat-hover-bg	Color	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 4%, transparent), rgba( $kendo-button-text, .04 ))`	`rgba(66, 66, 66, 0.04)`
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-hover-border	Color	`if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 ))`	`rgba(0, 0, 0, 0.16)`
Description The border 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	Null	`null`	`null`
Description The border color of the flat focused Picker components.
$kendo-picker-flat-focus-shadow	List	`$kendo-picker-focus-shadow`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The shadow of 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.

Name	Type	Default value	Computed value
$kendo-popover-border-width	Number	`$kendo-card-border-width`	`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`	`6px`
Description The radius of the border around the Popover.
$kendo-popover-font-family	String	`$kendo-card-font-family`	`inherit`
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`	`#424242`
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.08)`
Description The border color of the Popover.
$kendo-popover-shadow	String	`$kendo-popup-shadow`	`var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))`
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	Color	`$kendo-card-header-text`	`#424242`
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.08)`
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.08)`
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	`1px`	`1px`
Description Width of the border around the popup.
$kendo-popup-border-radius	Null	`null`	`null`
Description Border radius of the popup.
$kendo-popup-font-size	Number	`$kendo-font-size-md`	`14px`
Description Font size of the popup.
$kendo-popup-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description Line height of the popup.
$kendo-popup-content-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Horizontal padding of the popup content.
$kendo-popup-content-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description Vertical padding of the popup content.
$kendo-popup-bg	Color	`$kendo-component-bg`	`#ffffff`
Description Background color of the popup.
$kendo-popup-text	Color	`$kendo-component-text`	`#424242`
Description Text color of the popup.
$kendo-popup-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of the popup.
$kendo-popup-shadow	String	`k-elevation(4)`	`var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description Box shadow of the popup.

Progressbar

Name	Type	Default value	Computed value
$kendo-progressbar-height	Number	`22px`	`22px`
Description The height of the ProgressBar.
$kendo-progressbar-horizontal-width	Number	`100%`	`100%`
Description The horizontal width of the ProgressBar.
$kendo-progressbar-animation-timing	List	`1s linear infinite`	`1s linear infinite`
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	String	`$kendo-font-family`	`inherit`
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	`if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 ))`	`#ebebeb`
Description The background color of the ProgressBar.
$kendo-progressbar-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the ProgressBar.
$kendo-progressbar-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
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`	`#ff6358`
Description The progress background color of the ProgressBar.
$kendo-progressbar-value-text	Color	`if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg ))`	`white`
Description The progress text color of the ProgressBar.
$kendo-progressbar-value-border	Color	`if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg ))`	`#eb5b51`
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`	`#ebebeb`
Description The background color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-text	Color	`$kendo-progressbar-text`	`#424242`
Description The text color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-border	Color	`$kendo-progressbar-border`	`rgba(0, 0, 0, 0.08)`
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-body-bg`	`#ffffff`
Description The border color of the chunk ProgressBar.
$kendo-circular-progressbar-arc-stroke	Color	`$kendo-color-primary`	`#ff6358`
Description The arc stroke color of the circular ProgressBar.
$kendo-circular-progressbar-scale-stroke	Color	`$kendo-progressbar-bg`	`#ebebeb`
Description The scale stroke background color of the circular ProgressBar.

Prompt

Name	Type	Default value	Computed value
$kendo-prompt-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the Prompt.
$kendo-prompt-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the Prompt.
$kendo-prompt-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the Prompt.
$kendo-prompt-header-text	Color	`$kendo-component-header-text`	`#424242`
Description The text color of the Prompt header.
$kendo-prompt-header-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the Prompt header.
$kendo-prompt-header-border	Color	`$kendo-component-header-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the Prompt header.
$kendo-prompt-content-padding-y	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The vertical padding of the Prompt content.
$kendo-prompt-content-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The horizontal padding of the Prompt content.
$kendo-prompt-content-spacing	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The spacing between the items of the Prompt content.
$kendo-prompt-content-text	Color	`$kendo-component-header-text`	`#424242`
Description The text color of the Prompt content.
$kendo-prompt-content-bg	Color	`$kendo-component-header-bg`	`#fafafa`
Description The background color of the Prompt content.
$kendo-prompt-content-border	Color	`$kendo-component-header-border`	`rgba(0, 0, 0, 0.08)`
Description The text border of the Prompt content.
$kendo-prompt-expander-spacing	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The spacing between the items of the Prompt content expander.
$kendo-prompt-suggestion-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The vertical padding of the Prompt suggestion container.
$kendo-prompt-suggestion-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the Prompt suggestion container.
$kendo-prompt-suggestion-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description The border radius of the Prompt suggestion container.
$kendo-prompt-suggestion-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the Prompt suggestion container.
$kendo-prompt-suggestion-bg	Color	`$kendo-body-bg`	`#ffffff`
Description The background color of the Prompt suggestion container.
$kendo-prompt-suggestion-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the Prompt suggestion container.
$kendo-prompt-suggestion-shadow	String	`k-elevation(1)`	`var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The elevation of the Prompt suggestion container.

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	`1px`	`1px`
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	Color	`$kendo-checkbox-bg`	`#ffffff`
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.08)`
Description The border color of the RadioButton.
$kendo-radio-hover-bg	Null	`$kendo-checkbox-hover-bg`	`null`
Description The background color of the hovered RadioButton.
$kendo-radio-hover-text	Null	`$kendo-checkbox-hover-text`	`null`
Description The color of the hovered RadioButton.
$kendo-radio-hover-border	Null	`$kendo-checkbox-hover-border`	`null`
Description The border color of the hovered RadioButton.
$kendo-radio-checked-bg	Color	`$kendo-checkbox-checked-bg`	`#ff6358`
Description The background color of the checked RadioButton.
$kendo-radio-checked-text	Color	`$kendo-checkbox-checked-text`	`white`
Description The color of the checked RadioButton.
$kendo-radio-checked-border	Color	`$kendo-checkbox-checked-border`	`#ff6358`
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	List	`$kendo-checkbox-focus-shadow`	`0 0 0 2px rgba(0, 0, 0, 0.06)`
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	List	`$kendo-checkbox-focus-checked-shadow`	`0 0 0 2px rgba(255, 99, 88, 0.3)`
Description The box shadow of the focused and checked RadioButton.
$kendo-radio-disabled-bg	Null	`$kendo-checkbox-disabled-bg`	`null`
Description The background color of the disabled RadioButton.
$kendo-radio-disabled-text	Null	`$kendo-checkbox-disabled-text`	`null`
Description The color of the disabled RadioButton.
$kendo-radio-disabled-border	Null	`$kendo-checkbox-disabled-border`	`null`
Description The border color of the disabled RadioButton.
$kendo-radio-disabled-checked-bg	Null	`$kendo-checkbox-disabled-checked-bg`	`null`
Description The background color of the disabled and checked RadioButton.
$kendo-radio-disabled-checked-text	Null	`$kendo-checkbox-disabled-checked-text`	`null`
Description The color of the disabled and checked RadioButton.
$kendo-radio-disabled-checked-border	Null	`$kendo-checkbox-disabled-checked-border`	`null`
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 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='white'/%3e%3c/svg%3e")`
Description The image of the checked RadioButton indicator.
$kendo-radio-disabled-checked-image	Null	`null`	`null`
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`	`4px`
Description The vertical list item padding of the RadioButton.
$kendo-radio-ripple-bg	Color	`$kendo-radio-checked-bg`	`#ff6358`
Description The background color of the RadioButton ripple.
$kendo-radio-ripple-opacity	Number	`.25`	`0.25`
Description The opacity of the RadioButton ripple.

Rating

Name	Type	Default value	Computed value
$kendo-rating-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the Rating.
$kendo-rating-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Rating.
$kendo-rating-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the Rating.
$kendo-rating-container-margin-x	Number	`$kendo-padding-sm-x`	`4px`
Description The horizontal margin of the Rating container.
$kendo-rating-item-padding-x	Number	`$kendo-padding-sm-x`	`4px`
Description The horizontal padding of the Rating item.
$kendo-rating-item-padding-y	Number	`$kendo-padding-md-y`	`4px`
Description The vertical padding of the Rating item.
$kendo-rating-label-margin-x	Number	`$kendo-padding-md-x`	`8px`
Description The horizontal margin of the Rating label.
$kendo-rating-label-margin-y	Number	`$kendo-padding-md-y`	`4px`
Description The vertical margin of the Rating label.
$kendo-rating-label-line-height	Number	`$kendo-line-height-lg`	`1.5`
Description The line height of the Rating label.
$kendo-rating-icon-size	Number	`($kendo-icon-size * 1.5)`	`24px`
Description The size of the Rating icon.
$kendo-rating-icon-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the Rating icon.
$kendo-rating-icon-selected-text	Color	`$kendo-selected-bg`	`#ff6358`
Description The text color of the selected Rating icon.
$kendo-rating-icon-hover-text	Color	`$kendo-selected-bg`	`#ff6358`
Description The text color of the hovered Rating icon.
$kendo-rating-icon-focus-text	Color	`$kendo-selected-bg`	`#ff6358`
Description The text color of the focused Rating icon.
$kendo-rating-icon-focus-shadow	String	`k-elevation(1)`	`var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The shadow of the focused Rating icon.
$kendo-rating-icon-focus-selected-shadow	String	`k-elevation(1)`	`var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The shadow of the focused and selected Rating icon.

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	String	`$kendo-font-family`	`inherit`
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`	`1.4285714286`
Description The line height of the ScrollView.
$kendo-scrollview-text	Color	`$kendo-component-text`	`#424242`
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.08)`
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`	`#f5f5f5`
Description The background color of the ScrollView page button.
$kendo-scrollview-pagebutton-border	Color	`$kendo-button-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-bg	Color	`$kendo-color-primary`	`#ff6358`
Description The primary background color of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-border	Color	`$kendo-color-primary`	`#ff6358`
Description The primary border color of the ScrollView page button.
$kendo-scrollview-pagebutton-shadow	List	`0 0 0 2px rgba(0, 0, 0, .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(0, 0, 0, .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(0, 0, 0, 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(255, 255, 255, .4)`	`rgba(255, 255, 255, 0.4)`
Description The background color of the ScrollView pager in light mode.
$kendo-scrollview-dark-bg	Color	`rgba(0, 0, 0, .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.

Skeleton

Name	Type	Default value	Computed value
$kendo-skeleton-text-transform	String	`scale( 1, .6 )`	`scale(1, 0.6)`
Description The transform scale of the Skeleton text.
$kendo-skeleton-text-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description The border radius of the Skeleton text.
$kendo-skeleton-rect-border-radius	Number	`0`	`0`
Description The border radius of the rectangular Skeleton.
$kendo-skeleton-circle-border-radius	Number	`9999px`	`9999px`
Description The border radius of the circular Skeleton.

Slider

Name	Type	Default value	Computed value
$kendo-slider-size	Number	`200px`	`200px`
Description The default size of the Slider.
$kendo-slider-tick-size	Null	`null`	`null`
Description The default size of the Slider tick.
$kendo-slider-alt-size	Number	`30px`	`30px`
Description The default size of the Slider's track wrap.
$kendo-slider-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the Slider.
$kendo-slider-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Slider.
$kendo-slider-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the Slider.
$kendo-slider-button-offset	Number	`10px`	`10px`
Description The offset of the Slider Buttons.
$kendo-slider-button-size	Number	`($kendo-slider-alt-size - 2)`	`28px`
Description The size of the Slider Buttons.
$kendo-slider-button-spacing	Number	`($kendo-slider-button-size + $kendo-slider-button-offset)`	`38px`
Description The spacing of the Slider Buttons.
$kendo-slider-button-focus-shadow	Null	`null`	`null`
Description The shadow of the focused Slider Buttons.
$kendo-slider-track-thickness	Number	`4px`	`4px`
Description The thickness of the Slider track.
$kendo-slider-draghandle-size	Number	`14px`	`14px`
Description The size of the Slider drag handle.
$kendo-slider-draghandle-border-width	Number	`1px`	`1px`
Description The border width of the Slider drag handle.
$kendo-slider-draghandle-active-scale	Number	`1`	`1`
Description The transition scale of the active Slider drag handle.
$kendo-slider-draghandle-active-size	Null	`null`	`null`
Description The size of the active Slider drag handle.
$kendo-slider-draghandle-bg	Color	`$kendo-color-primary`	`#ff6358`
Description The background color of the Slider drag handle.
$kendo-slider-draghandle-text	Color	`if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-color-primary ))`	`white`
Description The text color of the Slider drag handle.
$kendo-slider-draghandle-border	Color	`$kendo-color-primary`	`#ff6358`
Description The border color of the Slider drag handle.
$kendo-slider-draghandle-gradient	Null	`null`	`null`
Description The gradient of the Slider drag handle.
$kendo-slider-draghandle-hover-bg	Color	`if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-color-primary , .5 ))`	`#f55f54`
Description The background color of the hovered Slider drag handle.
$kendo-slider-draghandle-hover-text	Null	`null`	`null`
Description The text color of the hovered Slider drag handle.
$kendo-slider-draghandle-hover-border	Color	`$kendo-color-primary`	`#ff6358`
Description The border color of the hovered Slider drag handle.
$kendo-slider-draghandle-hover-gradient	Null	`null`	`null`
Description The gradient of the hovered Slider drag handle.
$kendo-slider-draghandle-pressed-bg	Color	`if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 ))`	`#e0574d`
Description The background color of the active Slider drag handle.
$kendo-slider-draghandle-pressed-text	Null	`null`	`null`
Description The text color of the active Slider drag handle.
$kendo-slider-draghandle-pressed-border	Color	`if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 ))`	`#e0574d`
Description The border color of the active Slider drag handle.
$kendo-slider-draghandle-pressed-gradient	Null	`null`	`null`
Description The gradient of the active Slider drag handle.
$kendo-slider-draghandle-focus-shadow	List	`0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary , .3 ))`	`0 0 0 2px rgba(255, 99, 88, 0.3)`
Description The shadow of the focused Slider drag handle.
$kendo-slider-transition-speed	Number	`.3s`	`0.3s`
Description The transition speed of the Slider.
$kendo-slider-transition-function	String	`ease-out`	`ease-out`
Description The transition function of the Slider.
$kendo-slider-draghandle-transition-speed	Number	`.4s`	`0.4s`
Description The transition speed of the Slider drag handle.
$kendo-slider-draghandle-transition-function	String	`cubic-bezier(.25, .8, .25, 1)`	`cubic-bezier(0.25, 0.8, 0.25, 1)`
Description The transition function of the Slider drag handle.
$kendo-slider-track-bg	Color	`if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 ))`	`#ebebeb`
Description The background color of the Slider track.
$kendo-slider-selection-bg	Color	`$kendo-color-primary`	`#ff6358`
Description The background color of the Slider's track selection.
$kendo-slider-disabled-opacity	Null	`null`	`null`

Split-button

Name	Type	Default value	Computed value
$kendo-split-button-focus-shadow	List	`$kendo-button-focus-shadow`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The focus shadow of the SplitButton.
$kendo-split-button-arrow-padding-x	Number	`$kendo-button-padding-y`	`4px`
Description The horizontal padding of the arrow Button.
$kendo-split-button-sm-arrow-padding-x	Number	`$kendo-button-sm-padding-y`	`2px`
Description The horizontal padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-x	Number	`$kendo-button-md-padding-y`	`4px`
Description The horizontal padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-x	Number	`$kendo-button-lg-padding-y`	`8px`
Description The horizontal padding of the large arrow Button.
$kendo-split-button-arrow-padding-y	Number	`$kendo-button-padding-y`	`4px`
Description The vertical padding of the arrow Button.
$kendo-split-button-sm-arrow-padding-y	Number	`$kendo-button-sm-padding-y`	`2px`
Description The vertical padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-y	Number	`$kendo-button-md-padding-y`	`4px`
Description The vertical padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-y	Number	`$kendo-button-lg-padding-y`	`8px`
Description The vertical padding of the large arrow Button.

Splitter

Name	Type	Default value	Computed value
$kendo-splitter-border-width	Number	`1px`	`1px`
Description The width of the border around the Splitter.
$kendo-splitter-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the Splitter.
$kendo-splitter-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Splitter.
$kendo-splitter-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the Splitter.
$kendo-splitter-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the Splitter.
$kendo-splitter-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the Splitter.
$kendo-splitter-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the Splitter.
$kendo-splitter-splitbar-size	Number	`k-map-get( $kendo-spacing, 3 )`	`12px`
Description The size of the Splitter split bar.
$kendo-splitter-drag-handle-length	Number	`20px`	`20px`
Description The length of the Splitter drag handle.
$kendo-splitter-drag-handle-thickness	Number	`2px`	`2px`
Description The thickness of the Splitter drag handle.
$kendo-splitter-drag-icon-margin	Number	`7px`	`7px`
Description The margin of the Splitter drag handle icon.
$kendo-splitter-collapse-icon-padding-x	Null	`null`	`null`
Description The horizontal padding of the collapse icon in the Splitter.
$kendo-splitter-collapse-icon-padding-y	Number	`k-map-get( $kendo-spacing, .5 )`	`2px`
Description The vertical padding of the collapse icon in the Splitter.
$kendo-splitbar-bg	Color	`$kendo-base-bg`	`#fafafa`
Description The background color of the Splitter split bar.
$kendo-splitbar-text	Color	`$kendo-base-text`	`#424242`
Description The text color of the Splitter split bar.
$kendo-splitbar-hover-bg	Color	`if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-splitbar-bg, .5 ))`	`#f0f0f0`
Description The hover background color of the Splitter split bar.
$kendo-splitbar-hover-text	Color	`$kendo-splitbar-text`	`#424242`
Description The hover text color of the Splitter split bar.
$kendo-splitbar-selected-bg	Color	`$kendo-selected-bg`	`#ff6358`
Description The selected background color of the Splitter split bar.
$kendo-splitbar-selected-text	Color	`$kendo-selected-text`	`white`
Description The selected text color of the Splitter split bar.

Spreadsheet

Name	Type	Default value	Computed value
$kendo-spreadsheet-border-width	Number	`1px`	`1px`
Description The width of the border around the Spreadsheet.
$kendo-spreadsheet-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the Spreadsheet.
$kendo-spreadsheet-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Spreadsheet.
$kendo-spreadsheet-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the Spreadsheet.
$kendo-spreadsheet-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the Spreadsheet.
$kendo-spreadsheet-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the Spreadsheet.
$kendo-spreadsheet-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the Spreadsheet.
$kendo-spreadsheet-header-bg	Color	`$kendo-component-header-bg`	`#fafafa`
Description The background color of the Spreadsheet header.
$kendo-spreadsheet-header-text	Color	`$kendo-component-header-text`	`#424242`
Description The text color of the Spreadsheet header.
$kendo-spreadsheet-header-border	Color	`$kendo-component-header-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the Spreadsheet header.
$kendo-spreadsheet-header-gradient	Null	`$kendo-component-header-gradient`	`null`
Description The gradient of the Spreadsheet header.
$kendo-spreadsheet-table-header-bg	Color	`$kendo-spreadsheet-header-bg`	`#fafafa`
Description The background color of the Spreadsheet table headers.
$kendo-spreadsheet-table-header-text	Color	`$kendo-spreadsheet-header-text`	`#424242`
Description The text color of the Spreadsheet table headers.
$kendo-spreadsheet-table-header-border	Color	`$kendo-spreadsheet-header-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the Spreadsheet table headers.
$kendo-spreadsheet-table-header-gradient	Null	`$kendo-spreadsheet-header-gradient`	`null`
Description The gradient of the Spreadsheet table headers.
$kendo-spreadsheet-action-bar-border-width	Number	`1px`	`1px`
Description The border width of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal padding of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The vertical padding of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-font-size	Number	`$kendo-spreadsheet-font-size`	`14px`
Description The font size of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-font-family	List	`Arial, Verdana, sans-serif`	`Arial, Verdana, sans-serif`
Description The font family of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-spacing	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The spacings of the Spreadsheet action bar.
$kendo-spreadsheet-formula-bar-gap	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The gap of the Spreadsheet formula bar.
$kendo-spreadsheet-formula-input-padding-x	Number	`$kendo-input-padding-x`	`8px`
Description The horizontal padding of the Spreadsheet formula input.
$kendo-spreadsheet-formula-input-padding-y	Number	`$kendo-input-padding-y`	`4px`
Description The vertical padding of the Spreadsheet formula input.
$kendo-spreadsheet-formula-input-line-height	Number	`$kendo-input-line-height`	`1.4285714286`
Description The line height of the Spreadsheet formula input.
$kendo-spreadsheet-view-font-family	List	`Arial, Verdana, sans-serif`	`Arial, Verdana, sans-serif`
Description The font family of the Spreadsheet view.
$kendo-spreadsheet-view-font-size	Number	`$kendo-spreadsheet-font-size`	`14px`
Description The font size of the Spreadsheet view.
$kendo-spreadsheet-selection-bg	Color	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`	`rgba(255, 99, 88, 0.25)`
Description The background color of the Spreadsheet selection.
$kendo-spreadsheet-selection-text	Null	`null`	`null`
Description The text color of the Spreadsheet selection.
$kendo-spreadsheet-selection-border	Color	`$kendo-selected-bg`	`#ff6358`
Description The border color of the Spreadsheet selection.
$kendo-spreadsheet-selection-shadow	List	`inset 0 0 0 1px $kendo-selected-bg`	`inset 0 0 0 1px #ff6358`
Description The shadow of the Spreadsheet selection.
$kendo-spreadsheet-single-selection-bg	Color	`$kendo-selected-bg`	`#ff6358`
Description The background color of the Spreadsheet single selection.
$kendo-spreadsheet-single-selection-text	Null	`null`	`null`
Description The text color of the Spreadsheet single selection.
$kendo-spreadsheet-single-selection-border	Color	`$kendo-spreadsheet-bg`	`#ffffff`
Description The border color of the Spreadsheet single selection.
$kendo-spreadsheet-partial-selection-bg	Color	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`	`rgba(255, 99, 88, 0.25)`
Description The background color of the Spreadsheet partial selection.
$kendo-spreadsheet-active-cell-bg	Color	`$kendo-spreadsheet-bg`	`#ffffff`
Description The background color of the Spreadsheet active cell.
$kendo-spreadsheet-active-cell-shadow	List	`inset 0 0 0 1px $kendo-selected-bg`	`inset 0 0 0 1px #ff6358`
Description The shadow of the Spreadsheet active cell.
$kendo-spreadsheet-auto-fill-bg	Color	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`	`rgba(255, 99, 88, 0.25)`
Description The background color of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-text	Null	`null`	`null`
Description The text color of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-border	Color	`$kendo-selected-bg`	`#ff6358`
Description The border color of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-shadow	List	`inset 0 0 0 1px $kendo-selected-bg`	`inset 0 0 0 1px #ff6358`
Description The shadow of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-punch-bg	Color	`rgba( $kendo-spreadsheet-bg, .5 )`	`rgba(255, 255, 255, 0.5)`
Description The background color of the Spreadsheet auto fill punch.
$kendo-spreadsheet-cell-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The vertical padding of the Spreadsheet cell.
$kendo-spreadsheet-cell-padding-x	Number	`$kendo-spreadsheet-cell-padding-y`	`4px`
Description The horizontal padding of the Spreadsheet cell.
$kendo-spreadsheet-cell-editor-line-height	Number	`20px`	`20px`
Description The line height of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal padding of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-padding-y	Number	`0px`	`0px`
Description The vertical padding of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-bg	Color	`$kendo-spreadsheet-bg`	`#ffffff`
Description The background color of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-text	Color	`$kendo-spreadsheet-text`	`#424242`
Description The text color of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-border	Null	`null`	`null`
Description The border color of the Spreadsheet cell editor.
$kendo-spreadsheet-resize-handle-bg	Color	`$kendo-color-primary`	`#ff6358`
Description The background color of the Spreadsheet resize handle.
$kendo-spreadsheet-cell-comment-border	Color	`$kendo-color-primary`	`#ff6358`
Description The border color of the Spreadsheet cell comment indicator.
$kendo-spreadsheet-cell-dirty-border	Color	`$kendo-color-error`	`#f31700`
Description The border color of the Spreadsheet cell dirty indicator.
$kendo-spreadsheet-sheets-bar-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the Spreadsheet sheets bar.
$kendo-spreadsheet-sheets-bar-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The vertical padding of the Spreadsheet sheets bar.
$kendo-spreadsheet-sheets-bar-border-width	Number	`1px`	`1px`
Description The border width of the Spreadsheet sheets bar.
$kendo-spreadsheet-insert-image-dialog-border-style	String	`dashed`	`dashed`
Description The border style of the Spreadsheet image Dialog.
$kendo-spreadsheet-insert-image-dialog-border-width	Number	`2px`	`2px`
Description The border width of the Spreadsheet image Dialog.
$kendo-spreadsheet-insert-image-dialog-text-margin-bottom	Number	`30px`	`30px`
Description The bottom margin of the Spreadsheet image Dialog.
$kendo-spreadsheet-insert-image-dialog-preview-width	Number	`355px`	`355px`
Description The width of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-height	Number	`230px`	`230px`
Description The height of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-img	String	`"image-default.png"`	`"image-default.png"`
Description The image of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The border of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description The border radius of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow	List	`inset 0 0 0 2000px rgba(0, 0, 0, .5)`	`inset 0 0 0 2000px rgba(0, 0, 0, 0.5)`
Description The shadow of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description The border radius of the Spreadsheet image Dialog preview overlay.
$kendo-spreadsheet-insert-image-dialog-overlay-hover-text	Color	`$kendo-component-bg`	`#ffffff`
Description The text color of the hovered Spreadsheet image Dialog preview.
$kendo-spreadsheet-drawing-handle-width	Number	`6px`	`6px`
Description The width of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-height	Number	`6px`	`6px`
Description The height of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-style	String	`solid`	`solid`
Description The border style of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-width	Number	`1px`	`1px`
Description The border width of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-outline-color	Color	`$kendo-color-primary`	`#ff6358`
Description The border color of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-color	Color	`$kendo-selected-bg`	`#ff6358`
Description The outline color of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-bg	Color	`$kendo-color-primary`	`#ff6358`
Description The border color of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-radius	Number	`$kendo-border-radius-lg`	`6px`
Description The border radius of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-outline-style	String	`solid`	`solid`
Description The outline style of the Spreadsheet drawing.
$kendo-spreadsheet-drawing-outline-width	Number	`2px`	`2px`
Description The outline width of the Spreadsheet drawing.
$kendo-spreadsheet-drawing-anchor-bg	Color	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`	`rgba(255, 99, 88, 0.25)`
Description The background color of the Spreadsheet drawing anchor.
$kendo-spreadsheet-dropzone-spacing-y	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The vertical spacing of the Spreadsheet DropZone.

Stepper

Name	Type	Default value	Computed value
$kendo-stepper-margin-x	Null	`null`	`null`
Description The horizontal margin the Stepper.
$kendo-stepper-margin-y	Null	`null`	`null`
Description The vertical margin the Stepper.
$kendo-stepper-padding-x	Null	`null`	`null`
Description The horizontal padding the Stepper.
$kendo-stepper-padding-y	Null	`null`	`null`
Description The vertical padding the Stepper.
$kendo-stepper-label-margin-x	Number	`12px`	`12px`
Description The horizontal margin the Stepper label.
$kendo-stepper-label-padding-x	Number	`12px`	`12px`
Description The horizontal padding the Stepper label.
$kendo-stepper-label-padding-y	Number	`5px`	`5px`
Description The vertical padding the Stepper label.
$kendo-stepper-border-width	Number	`0px`	`0px`
Description The width of the border around the Stepper.
$kendo-stepper-inline-content-padding-x	Number	`20px`	`20px`
Description The horizontal padding of the Stepper content.
$kendo-stepper-inline-content-padding-y	Number	`10px`	`10px`
Description The vertical padding of the Stepper content.
$kendo-stepper-font-size	Number	`$kendo-font-size-md`	`14px`

$kendo-stepper-line-height	Number	`$kendo-line-height-md`	`1.4285714286`

$kendo-stepper-font-family	String	`$kendo-font-family`	`inherit`

$kendo-stepper-bg	Null	`null`	`null`
Description The background color of the Stepper.
$kendo-stepper-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the Stepper.
$kendo-stepper-border	Null	`null`	`null`
Description The border color of the Stepper.
$kendo-stepper-indicator-width	Number	`28px`	`28px`
Description The width of the Stepper indicator.
$kendo-stepper-indicator-height	Number	`$kendo-stepper-indicator-width`	`28px`
Description The height of the Stepper indicator.
$kendo-stepper-indicator-border-width	Number	`1px`	`1px`
Description The border width of the Stepper indicator.
$kendo-stepper-indicator-border-radius	Number	`50%`	`50%`
Description The border radius of the Stepper indicator.
$kendo-stepper-indicator-focus-border-width	Number	`1px`	`1px`
Description The border width of the focused Stepper indicator.
$kendo-stepper-indicator-focus-size	Number	`2px`	`2px`
Description The size of the focused Stepper indicator.
$kendo-stepper-indicator-focus-offset	Number	`3px`	`3px`
Description The offset of the Stepper's focused indicator.
$kendo-stepper-indicator-focus-calc-offset	Calculation	`calc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )`	`calc(1px + 3px)`
Description The calculated offset of the Stepper's focused indicator.
$kendo-stepper-indicator-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the Stepper indicator.
$kendo-stepper-indicator-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the Stepper indicator.
$kendo-stepper-indicator-border	Color	`#cccccc`	`#cccccc`
Description The border color of the Stepper indicator.
$kendo-stepper-indicator-hover-bg	Color	`if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg ))`	`#ebebeb`
Description The background color of the hovered Stepper indicator.
$kendo-stepper-indicator-hover-text	Null	`null`	`null`
Description The text color of the hovered Stepper indicator.
$kendo-stepper-indicator-hover-border	Null	`null`	`null`
Description The border color of the hovered Stepper indicator.
$kendo-stepper-indicator-disabled-bg	Null	`null`	`null`
Description The background color of the disabled Stepper indicator.
$kendo-stepper-indicator-disabled-text	Color	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), $kendo-disabled-text)`	`#8f8f8f`
Description The text color of the disabled Stepper indicator.
$kendo-stepper-indicator-disabled-border	Null	`null`	`null`
Description The border color of the disabled Stepper indicator.
$kendo-stepper-indicator-done-bg	Color	`$kendo-color-primary`	`#ff6358`
Description The background color of the Stepper's done indicator.
$kendo-stepper-indicator-done-text	Color	`if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))`	`white`
Description The text color of the Stepper's done indicator.
$kendo-stepper-indicator-done-border	Color	`$kendo-stepper-indicator-done-bg`	`#ff6358`
Description The border color of the Stepper's done indicator.
$kendo-stepper-indicator-done-hover-bg	Color	`if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg ))`	`#eb5b51`
Description The background color of the Stepper's hovered done indicator.
$kendo-stepper-indicator-done-hover-text	Null	`null`	`null`
Description The text color of the Stepper's hovered done indicator.
$kendo-stepper-indicator-done-hover-border	Null	`null`	`null`
Description The border color of the Stepper's hovered done indicator.
$kendo-stepper-indicator-done-disabled-bg	Color	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 60%, transparent), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%))`	`#ffa19b`
Description The background color of the Stepper's disabled done indicator.
$kendo-stepper-indicator-done-disabled-text	Color	`if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))`	`white`
Description The text color of the Stepper's disabled done indicator.
$kendo-stepper-indicator-done-disabled-border	Color	`$kendo-stepper-indicator-done-disabled-bg`	`#ffa19b`
Description The border color of the Stepper's disabled done indicator.
$kendo-stepper-indicator-current-bg	Color	`$kendo-stepper-indicator-done-bg`	`#ff6358`
Description The background color of the Stepper current indicator.
$kendo-stepper-indicator-current-text	Color	`$kendo-stepper-indicator-done-text`	`white`
Description The text color of the Stepper current indicator.
$kendo-stepper-indicator-current-border	Color	`$kendo-stepper-indicator-done-border`	`#ff6358`
Description The border color of the Stepper current indicator.
$kendo-stepper-indicator-current-hover-bg	Color	`$kendo-stepper-indicator-done-hover-bg`	`#eb5b51`
Description The background color of the Stepper's hovered current indicator.
$kendo-stepper-indicator-current-hover-text	Null	`$kendo-stepper-indicator-done-hover-text`	`null`
Description The text color of the Stepper's hovered current indicator.
$kendo-stepper-indicator-current-hover-border	Null	`$kendo-stepper-indicator-done-hover-border`	`null`
Description The border color of the Stepper's hovered current indicator.
$kendo-stepper-indicator-current-disabled-bg	Color	`$kendo-stepper-indicator-done-disabled-bg`	`#ffa19b`
Description The background color of the Stepper's disabled current indicator.
$kendo-stepper-indicator-current-disabled-text	Color	`$kendo-stepper-indicator-done-disabled-text`	`white`
Description The text color of the Stepper's disabled current indicator.
$kendo-stepper-indicator-current-disabled-border	Color	`$kendo-stepper-indicator-done-disabled-border`	`#ffa19b`
Description The border color of the Stepper's disabled current indicator.
$kendo-stepper-label-text	Null	`null`	`null`
Description The text color of the Stepper label.
$kendo-stepper-label-success-text	Color	`$kendo-color-success`	`#37b400`
Description The success text color of the Stepper label.
$kendo-stepper-label-error-text	Color	`$kendo-color-error`	`#f31700`
Description The error text color of the Stepper label.
$kendo-stepper-label-hover-text	Color	`if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-stepper-text, 2 ))`	`#373737`
Description The text color of the hovered Stepper label.
$kendo-stepper-label-disabled-text	Color	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), $kendo-disabled-text)`	`#8f8f8f`
Description The text color of the disabled Stepper label.
$kendo-stepper-optional-label-text	Color	`$kendo-subtle-text`	`#666666`
Description The text color of the optional Stepper label.
$kendo-stepper-optional-label-opacity	Null	`null`	`null`
Description The opacity of the optional Stepper label.
$kendo-stepper-optional-label-font-size	Null	`null`	`null`
Description The font size of the optional Stepper label.
$kendo-stepper-optional-label-font-style	String	`italic`	`italic`
Description The font style of the optional Stepper label.
$kendo-stepper-progressbar-size	Number	`2px`	`2px`
Description The size of the Stepper ProgressBar.
$kendo-stepper-progressbar-bg	Null	`null`	`null`
Description The background color of the Stepper ProgressBar.
$kendo-stepper-progressbar-text	Null	`null`	`null`
Description The text color of the Stepper ProgressBar.
$kendo-stepper-progressbar-fill-bg	Null	`null`	`null`
Description The background color of the selected Stepper ProgressBar.
$kendo-stepper-progressbar-fill-text	Null	`null`	`null`
Description The text color of the selected Stepper ProgressBar.
$kendo-stepper-content-transition-property	String	`height`	`height`
Description The property name of the Stepper transition.
$kendo-stepper-content-transition-duration	Number	`300ms`	`300ms`
Description The duration of the Stepper transition.
$kendo-stepper-content-transition-timing-function	List	`cubic-bezier(.4, 0, .2, 1) 0ms`	`cubic-bezier(0.4, 0, 0.2, 1) 0ms`
Description The timing function of the Stepper transition.

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	Number	`1px`	`1px`
Description The border width of the Switch track.
$kendo-switch-thumb-border-width	Number	`1px`	`1px`
Description The border width of the Switch thumb.
$kendo-switch-label-text-transform	String	`uppercase`	`uppercase`
Description The text transform of the Switch label.
$kendo-switch-label-display	String	`inline`	`inline`
Description The display of the Switch label.
$kendo-switch-sizes	Map	`( sm: ( font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px ), md: ( font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px ), lg: ( font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px ) )`	`(sm: (font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px), md: (font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px), lg: (font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px))`
Description The map with the different Switch sizes.
$kendo-switch-off-track-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background of the track when the Switch is not checked.
$kendo-switch-off-track-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the track when the Switch is not checked.
$kendo-switch-off-track-border	Color	`if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-switch-off-track-bg, 8% ))`	`#ebebeb`
Description The border color of the track when the Switch is not checked.
$kendo-switch-off-track-gradient	Null	`null`	`null`
Description The background gradient of the track when the Switch is not checked.
$kendo-switch-off-track-hover-bg	Null	`null`	`null`
Description The background of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-text	Null	`null`	`null`
Description The text color of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-border	Null	`null`	`null`
Description The border color of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-gradient	Null	`null`	`null`
Description The background gradient of the track when the hovered Switch is not checked.
$kendo-switch-off-track-focus-bg	Null	`null`	`null`
Description The background of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-text	Null	`null`	`null`
Description The text color of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-border	Null	`null`	`null`
Description The border color of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-gradient	Null	`null`	`null`
Description The background gradient of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-ring	List	`2px solid if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 ))`	`2px solid rgba(0, 0, 0, 0.08)`
Description The ring around the track when the focused Switch is not checked.
$kendo-switch-off-track-disabled-bg	Null	`null`	`null`
Description The background of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-text	Null	`null`	`null`
Description The text color of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-border	Null	`null`	`null`
Description The border color of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-gradient	Null	`null`	`null`
Description The background gradient of the track when the disabled Switch is not checked.
$kendo-switch-off-thumb-bg	Color	`$kendo-base-bg`	`#fafafa`
Description The background of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-text	Color	`$kendo-base-text`	`#424242`
Description The text color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-border	Color	`$kendo-base-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-hover-bg	Null	`null`	`null`
Description The background of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-text	Null	`null`	`null`
Description The text color of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-border	Null	`null`	`null`
Description The border color of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the hovered Switch is not checked.
$kendo-switch-on-track-bg	Color	`$kendo-color-primary`	`#ff6358`
Description The background of the track when the Switch is checked.
$kendo-switch-on-track-text	Color	`if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-switch-on-track-bg ))`	`white`
Description The text color of the track when the Switch is checked.
$kendo-switch-on-track-border	Color	`$kendo-switch-on-track-bg`	`#ff6358`
Description The border color of the track when the Switch is checked.
$kendo-switch-on-track-gradient	Null	`null`	`null`
Description The background gradient of the track when the Switch is checked.
$kendo-switch-on-track-hover-bg	Null	`null`	`null`
Description The background of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-text	Null	`null`	`null`
Description The text color of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-border	Null	`null`	`null`
Description The border color of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-gradient	Null	`null`	`null`
Description The background gradient of the track when the hovered Switch is checked.
$kendo-switch-on-track-focus-bg	Null	`null`	`null`
Description The background of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-text	Null	`null`	`null`
Description The text color of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-border	Null	`null`	`null`
Description The border color of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-gradient	Null	`null`	`null`
Description The background gradient of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-ring	List	`2px solid if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-switch-on-track-border, .25 ))`	`2px solid rgba(255, 99, 88, 0.25)`
Description The ring around the track when the focused Switch is checked.
$kendo-switch-on-track-disabled-bg	Null	`null`	`null`
Description The background of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-text	Null	`null`	`null`
Description The text color of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-border	Null	`null`	`null`
Description The border color of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-gradient	Null	`null`	`null`
Description The background gradient of the track when the disabled Switch is checked.
$kendo-switch-on-thumb-bg	Color	`$kendo-base-bg`	`#fafafa`
Description The background of the thumb when the Switch is checked.
$kendo-switch-on-thumb-text	Color	`$kendo-base-text`	`#424242`
Description The text color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-border	Color	`$kendo-base-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the Switch is checked.
$kendo-switch-on-thumb-hover-bg	Null	`null`	`null`
Description The background of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-text	Null	`null`	`null`
Description The text color of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-border	Null	`null`	`null`
Description The border color of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the hovered Switch is checked.

Table

Name	Type	Default value	Computed value
$kendo-table-border-width	Number	`1px`	`1px`
Description The width of the table border.
$kendo-table-cell-vertical-border-width	Number	`1px`	`1px`
Description The width of vertical border of table cells.
$kendo-table-cell-horizontal-border-width	Number	`0px`	`0px`
Description The width of horizontal border of table cells.
$kendo-table-font-size	Null	`null`	`null`
Description The font size of the table if no size is specified.
$kendo-table-line-height	Null	`null`	`null`
Description The line-height of the table if no size is specified.
$kendo-table-cell-padding-x	Null	`null`	`null`
Description The horizontal padding of the cells in the table if no size is specified.
$kendo-table-cell-padding-y	Null	`null`	`null`
Description The vertical padding of the cells in the table if no size is specified.
$kendo-table-sizes	Map	( sm: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-sm-cell-padding-x, cell-padding-y: $kendo-table-sm-cell-padding-y ), md: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-md-cell-padding-x, cell-padding-y: $kendo-table-md-cell-padding-y ), lg: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-lg-cell-padding-x, cell-padding-y: $kendo-table-lg-cell-padding-y ) )	`(sm: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 4px), md: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 12px, cell-padding-y: 8px), lg: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 10px))`
Description The sizes of the table.
$kendo-table-bg	Color	`$kendo-component-bg`	`#ffffff`
Description Background color of tables.
$kendo-table-text	Color	`$kendo-component-text`	`#424242`
Description Text color of tables.
$kendo-table-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of tables.
$kendo-table-header-bg	Color	`$kendo-component-header-bg`	`#fafafa`
Description Background color of table headers.
$kendo-table-header-text	Color	`$kendo-component-header-text`	`#424242`
Description Text color of table headers.
$kendo-table-header-border	Color	`$kendo-component-header-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of table headers.
$kendo-table-header-gradient	Null	`$kendo-component-header-gradient`	`null`
Description Gradient of table headers.
$kendo-table-footer-bg	Color	`$kendo-table-header-bg`	`#fafafa`
Description Background color of table footers.
$kendo-table-footer-text	Color	`$kendo-table-header-text`	`#424242`
Description Text color of table footers.
$kendo-table-footer-border	Color	`$kendo-table-header-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of table footers.
$kendo-table-group-row-bg	Color	`$kendo-table-header-bg`	`#fafafa`
Description Background color of group rows in table.
$kendo-table-group-row-text	Color	`$kendo-table-header-text`	`#424242`
Description Text color of group rows in table.
$kendo-table-group-row-border	Color	`$kendo-table-header-border`	`rgba(0, 0, 0, 0.08)`
Description Border color of group rows in table.
$kendo-table-alt-row-bg	Color	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba( k-contrast-legacy( $kendo-table-bg ), .04 ))`	`rgba(0, 0, 0, 0.04)`
Description Background color of alternating rows in table.
$kendo-table-alt-row-text	Null	`null`	`null`
Description Text color of alternating rows in table.
$kendo-table-alt-row-border	Null	`null`	`null`
Description Border color of alternating rows in table.
$kendo-table-hover-bg	Color	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 11%, transparent), k-color-darken($kendo-table-bg, 7%))`	`#ededed`
Description Background color of hovered rows in table.
$kendo-table-hover-text	Null	`null`	`null`
Description Text color of hovered rows in table.
$kendo-table-hover-border	Null	`null`	`null`
Description Border color of hovered rows in table.
$kendo-table-focus-bg	Null	`null`	`null`
Description Background color of focused rows in table.
$kendo-table-focus-text	Null	`null`	`null`
Description Text color of focused rows in table.
$kendo-table-focus-border	Null	`null`	`null`
Description Border color of focused rows in table.
$kendo-table-focus-shadow	List	`$kendo-list-item-focus-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.12)`
Description Box shadow of focused rows in table.
$kendo-table-selected-bg	Color	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`	`rgba(255, 99, 88, 0.25)`
Description Background color of selected rows in table.
$kendo-table-selected-text	Null	`null`	`null`
Description Text color of selected rows in table.
$kendo-table-selected-border	Null	`null`	`null`
Description Border color of selected rows in table.

Tabstrip

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

Taskboard

Name	Type	Default value	Computed value
$kendo-taskboard-spacer	Number	`k-map-get( $kendo-spacing, 4 )`	`16px`
Description The spacing index of the TaskBoard.
$kendo-taskboard-padding-y	Null	`null`	`null`
Description The vertical padding of the TaskBoard.
$kendo-taskboard-padding-x	Null	`null`	`null`
Description The horizontal of the TaskBoard.
$kendo-taskboard-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the TaskBoard.
$kendo-taskboard-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the TaskBoard.
$kendo-taskboard-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the TaskBoard.
$kendo-taskboard-bg	Null	`null`	`null`
Description The background color of the TaskBoard.
$kendo-taskboard-text	Null	`null`	`null`
Description The text color of the TaskBoard.
$kendo-taskboard-border	Null	`null`	`null`
Description The border color of the TaskBoard.
$kendo-taskboard-toolbar-padding-y	Number	`$kendo-taskboard-spacer`	`16px`
Description The vertical padding of the TaskBoard Toolbar.
$kendo-taskboard-toolbar-padding-x	Number	`$kendo-taskboard-toolbar-padding-y`	`16px`
Description The horizontal padding of the TaskBoard Toolbar.
$kendo-taskboard-toolbar-bg	Null	`null`	`null`
Description The background color of the TaskBoard Toolbar.
$kendo-taskboard-toolbar-text	Null	`null`	`null`
Description The text color of the TaskBoard Toolbar.
$kendo-taskboard-toolbar-border	Null	`null`	`null`
Description The border color of the TaskBoard Toolbar.
$kendo-taskboard-toolbar-gradient	Null	`null`	`null`
Description The gradient of the TaskBoard Toolbar.
$kendo-taskboard-content-padding-y	Number	`$kendo-taskboard-spacer`	`16px`
Description The vertical padding of the TaskBoard content.
$kendo-taskboard-content-padding-x	Number	`$kendo-taskboard-content-padding-y`	`16px`
Description The horizontal padding of the TaskBoard content.
$kendo-taskboard-column-container-spacing-y	Number	`k-math-div( $kendo-taskboard-spacer, 2 )`	`8px`
Description The vertical spacing of the TaskBoard column container.
$kendo-taskboard-column-container-padding-y	Number	`0px`	`0px`
Description The vertical padding of the TaskBoard column container.
$kendo-taskboard-column-container-padding-x	Number	`k-math-div( $kendo-taskboard-spacer, 2 )`	`8px`
Description The horizontal padding of the TaskBoard column container.
$kendo-taskboard-columns-container-gap	Number	`$kendo-taskboard-spacer`	`16px`
Description The spacing of the TaskBoard columns container.
$kendo-taskboard-column-width	Number	`320px`	`320px`
Description The default width of the TaskBoard column.
$kendo-taskboard-column-border-width	Number	`1px`	`1px`
Description The border width of the TaskBoard column.
$kendo-taskboard-column-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description The border radius of the TaskBoard column.
$kendo-taskboard-column-bg	Color	`$kendo-base-bg`	`#fafafa`
Description The background color of the TaskBoard column.
$kendo-taskboard-column-text	Null	`null`	`null`
Description The text color of the TaskBoard column.
$kendo-taskboard-column-border	Color	`transparent`	`transparent`
Description The border color of the TaskBoard column.
$kendo-taskboard-column-focus-bg	Null	`null`	`null`
Description The background color of the focused TaskBoard column.
$kendo-taskboard-column-focus-text	Null	`null`	`null`
Description The text color of the focused TaskBoard column.
$kendo-taskboard-column-focus-border	Color	`if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))`	`rgba(0, 0, 0, 0.264)`
Description The border color of the focused TaskBoard column.
$kendo-taskboard-column-header-padding-y	Number	`k-math-div( $kendo-taskboard-spacer, 2 )`	`8px`
Description The vertical padding of the TaskBoard column header.
$kendo-taskboard-column-header-padding-x	Number	`$kendo-taskboard-column-header-padding-y`	`8px`
Description The horizontal padding of the TaskBoard column header.
$kendo-taskboard-column-header-gap	Number	`k-math-div( $kendo-taskboard-spacer, 4 )`	`4px`
Description The spacing of the TaskBoard column header.
$kendo-taskboard-column-header-actions-gap	Number	`k-math-div( $kendo-taskboard-spacer, 2 )`	`8px`
Description The spacing of the TaskBoard column header actions.
$kendo-taskboard-column-header-font-weight	Number	`500`	`500`
Description The font weight of the TaskBoard column header.
$kendo-taskboard-column-header-text	Color	`$kendo-component-header-text`	`#424242`
Description The text color of the TaskBoard column header.
$kendo-taskboard-column-cards-padding-y	Null	`null`	`null`
Description The vertical padding of the TaskBoard column Card wrapper.
$kendo-taskboard-column-cards-padding-x	Null	`null`	`null`
Description The horizontal padding of the TaskBoard column Card wrapper.
$kendo-taskboard-column-cards-gap	Number	`k-math-div( $kendo-taskboard-spacer, 2 )`	`8px`
Description The spacing of the TaskBoard column Card wrapper.
$kendo-taskboard-pane-width	Number	`$kendo-taskboard-column-width`	`320px`
Description The default width of the TaskBoard pane.
$kendo-taskboard-pane-padding-y	Null	`null`	`null`
Description The vertical padding of the TaskBoard pane.
$kendo-taskboard-pane-padding-x	Null	`null`	`null`
Description The horizontal padding of the TaskBoard pane.
$kendo-taskboard-pane-border-width	Number	`1px`	`1px`
Description The border width of the TaskBoard pane.
$kendo-taskboard-pane-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the TaskBoard pane.
$kendo-taskboard-pane-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the TaskBoard pane.
$kendo-taskboard-pane-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the TaskBoard pane.
$kendo-taskboard-pane-header-padding-y	Number	`( $kendo-taskboard-spacer * .75 )`	`12px`
Description The vertical padding of the TaskBoard pane header.
$kendo-taskboard-pane-header-padding-x	Number	`$kendo-taskboard-spacer`	`16px`
Description The horizontal padding of the TaskBoard pane header.
$kendo-taskboard-pane-header-font-weight	Number	`500`	`500`
Description The font weight of the TaskBoard pane header.
$kendo-taskboard-pane-header-text	Color	`$kendo-component-header-text`	`#424242`
Description The text color of the TaskBoard pane header.
$kendo-taskboard-pane-content-padding-y	Number	`0px`	`0px`
Description The vertical padding of the TaskBoard pane content.
$kendo-taskboard-pane-content-padding-x	Number	`$kendo-taskboard-spacer`	`16px`
Description The horizontal padding of the TaskBoard pane content.
$kendo-taskboard-pane-actions-padding-y	Number	`( $kendo-taskboard-spacer * .75 )`	`12px`
Description The vertical padding of the TaskBoard pane actions.
$kendo-taskboard-pane-actions-padding-x	Number	`$kendo-taskboard-spacer`	`16px`
Description The horizontal padding of the TaskBoard pane actions.
$kendo-taskboard-card-padding-y	Number	`$kendo-taskboard-spacer`	`16px`
Description The vertical padding of the TaskBoard Card.
$kendo-taskboard-card-padding-x	Number	`$kendo-taskboard-card-padding-y`	`16px`
Description The horizontal padding of the TaskBoard Card.
$kendo-taskboard-card-border-width	Number	`$kendo-card-border-width`	`1px`
Description The border width of the TaskBoard Card.
$kendo-taskboard-card-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description The border radius of the TaskBoard Card.
$kendo-taskboard-card-shadow	Null	`$kendo-card-shadow`	`null`
Description The shadow of the TaskBoard Card.
$kendo-taskboard-card-bg	Color	`$kendo-card-bg`	`#ffffff`
Description The background color of the TaskBoard Card.
$kendo-taskboard-card-text	Color	`$kendo-card-text`	`#424242`
Description The text color of the TaskBoard Card.
$kendo-taskboard-card-border	Color	`$kendo-card-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the TaskBoard Card.
$kendo-taskboard-card-category-border-width	Number	`4px`	`4px`
Description The border width of the TaskBoard Card category.
$kendo-taskboard-card-hover-border	Color	`if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))`	`rgba(0, 0, 0, 0.172)`
Description The border color of the hovered TaskBoard Card.
$kendo-taskboard-card-focus-border	Color	`if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% ))`	`rgba(0, 0, 0, 0.2456)`
Description The border color of the focused TaskBoard Card.
$kendo-taskboard-card-focus-shadow	String	`none`	`none`
Description The shadow of the focused TaskBoard Card.
$kendo-taskboard-card-selected-border	Color	`if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 5 ))`	`#ffb0ab`
Description The border of the selected TaskBoard Card.
$kendo-taskboard-card-selected-shadow	String	`none`	`none`
Description The shadow of the selected TaskBoard Card.
$kendo-taskboard-card-header-text	Color	`$kendo-color-primary`	`#ff6358`
Description The text color of the TaskBoard Card header text.
$kendo-taskboard-card-header-hover-text	Color	`if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)`	`#d6534a`
Description The text color of the hovered TaskBoard Card header text.
$kendo-taskboard-card-header-focus-text	Color	`if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)`	`#d6534a`
Description The text color of the focused TaskBoard Card header text.
$kendo-taskboard-drag-placeholder-border-width	Number	`1px`	`1px`
Description The border width of the TaskBoard Card placeholder.
$kendo-taskboard-drag-placeholder-border-radius	Number	`$kendo-taskboard-card-border-radius`	`4px`
Description The border radius of the TaskBoard Card placeholder.
$kendo-taskboard-drag-placeholder-bg	Color	`rgba(255, 255, 255, .2)`	`rgba(255, 255, 255, 0.2)`
Description The background color of the TaskBoard Card placeholder.
$kendo-taskboard-drag-placeholder-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the TaskBoard Card placeholder.

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	`$kendo-base-bg`	`#fafafa`
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	`$kendo-card-border-width`	`1px`
Description The width of the border around the TileLayout card.
$kendo-tile-layout-card-focus-shadow	Null	`$kendo-card-focus-shadow`	`null`
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-lg`	`6px`
Description The radius of the border around the TileLayout hint.
$kendo-tile-layout-hint-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The color of the border around the TileLayout hint.
$kendo-tile-layout-hint-bg	Color	`rgba(255, 255, 255, .2)`	`rgba(255, 255, 255, 0.2)`
Description The background color of the TileLayout hint.

Timeline

Name	Type	Default value	Computed value
$kendo-timeline-spacing-x	Number	`40px`	`40px`
Description The horizontal spacing of the Timeline.
$kendo-timeline-spacing-y	Number	`40px`	`40px`
Description The vertical spacing of the Timeline.
$kendo-timeline-items-padding	Number	`16px`	`16px`
Description The padding between the Timeline's track items.
$kendo-timeline-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the Timeline.
$kendo-timeline-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Timeline.
$kendo-timeline-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the Timeline.
$kendo-timeline-mobile-spacing-x	Number	`16px`	`16px`
Description The horizontal spacing of the mobile Timeline.
$kendo-timeline-mobile-spacing-y	Number	`16px`	`16px`
Description The vertical spacing of the mobile Timeline.
$kendo-timeline-track-arrow-width	Number	`30px`	`30px`
Description The width of the Timeline track arrow.
$kendo-timeline-track-arrow-height	Number	`30px`	`30px`
Description The height of the Timeline track arrow.
$kendo-timeline-track-arrow-disabled-bg	Color	`if($kendo-enable-color-system, color-mix(in srgb, k-color( base-subtle ) 60%, transparent), k-true-mix($kendo-button-bg, $kendo-body-bg, 65%))`	`#f9f9f9`
Description The background color of the disabled Timeline track arrow.
$kendo-timeline-track-arrow-disabled-text	Color	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-true-mix($kendo-button-text, $kendo-body-bg, 65%))`	`#848484`
Description The text color of the disabled Timeline track arrow.
$kendo-timeline-track-arrow-disabled-border	Color	`if($kendo-enable-color-system, k-color( border ), k-true-mix(#000000, $kendo-body-bg, 4.8%))`	`#f3f3f3`
Description The border color of the disabled Timeline track arrow.
$kendo-timeline-track-size	Number	`6px`	`6px`
Description The size of the Timeline track.
$kendo-timeline-track-wrap-padding-bottom	Number	`k-math-div( $kendo-timeline-track-size, 2 )`	`3px`
Description The bottom padding of the Timeline's track wrapper.
$kendo-timeline-track-border-width	Number	`1px`	`1px`
Description The border width of the Timeline track.
$kendo-timeline-track-margin-bottom	Number	`16px`	`16px`
Description The bottom margin of the Timeline track.
$kendo-timeline-track-bottom-calc	Calculation	`calc(#{k-math-div( $kendo-timeline-track-arrow-height, 2 )} + #{$kendo-timeline-track-wrap-padding-bottom})`	`calc(15px + 3px)`
Description The bottom offset of the Timeline track.
$kendo-timeline-track-start-calc	Calculation	`calc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width})`	`calc(30px - 2 * 1px)`
Description The left offset of the Timeline track.
$kendo-timeline-track-end-calc	Calculation	`calc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width})`	`calc(30px - 2 * 1px)`
Description The right offset of the Timeline track.
$kendo-timeline-track-bg	Color	`$kendo-button-bg`	`#f5f5f5`
Description The background color of the Timeline track.
$kendo-timeline-track-border-color	Color	`$kendo-button-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the Timeline track.
$kendo-timeline-track-item-focus-shadow	String	`k-elevation(2)`	`var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The shadow of the Timeline's focused track items.
$kendo-timeline-track-event-offset	Number	`36px`	`36px`
Description The offset of the Timeline track event.
$kendo-timeline-flag-padding-x	Number	`$kendo-button-padding-x`	`8px`
Description The horizontal padding of the Timeline flag.
$kendo-timeline-flag-padding-y	Number	`$kendo-button-padding-y`	`4px`
Description The vertical padding of the Timeline flag.
$kendo-timeline-flag-line-height	Number	`$kendo-button-line-height`	`1.4285714286`
Description The line height of the Timeline flag.
$kendo-timeline-flag-min-width	Number	`80px`	`80px`
Description The minimum width of the Timeline flag.
$kendo-timeline-flag-max-width	Calculation	`calc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-spacing-x})`	`calc(80px + 2 * 40px)`
Description The maximum width of the Timeline flag.
$kendo-timeline-mobile-flag-max-width	Calculation	`calc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-mobile-spacing-x})`	`calc(80px + 2 * 16px)`
Description The maximum width of the mobile Timeline flag.
$kendo-timeline-horizontal-flag-min-width	Number	`60px`	`60px`
Description The minimum width of the horizontal Timeline flag.
$kendo-timeline-flag-bg	Color	`$kendo-color-primary`	`#ff6358`
Description The background color of the Timeline flag.
$kendo-timeline-flag-text	Color	`if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-timeline-flag-bg ))`	`white`
Description The text color of the Timeline flag.
$kendo-timeline-flag-callout-width	Number	`10px`	`10px`
Description The width of the Timeline's flag callout.
$kendo-timeline-flag-callout-height	Number	`10px`	`10px`
Description The height of the Timeline's flag callout.
$kendo-timeline-flag-offset-bottom	Number	`4px`	`4px`
Description The bottom offset of the Timeline flag.
$kendo-timeline-flag-margin-bottom-calc	Calculation	`calc(#{$kendo-timeline-track-size} + 2 * #{$kendo-timeline-track-border-width} + #{$kendo-timeline-flag-offset-bottom} + #{$kendo-timeline-flag-callout-height})`	`calc(6px + 2 * 1px + 4px + 10px)`
Description The bottom margin of the Timeline flag.
$kendo-timeline-date-width	Number	`50px`	`50px`
Description The width of the Timeline date.
$kendo-timeline-date-margin-bottom	Number	`8px`	`8px`
Description The bottom margin of the Timeline date.
$kendo-timeline-vertical-padding-calc	Calculation	`calc(#{$kendo-timeline-spacing-x} + (#{$kendo-timeline-flag-min-width} - #{$kendo-timeline-track-size}) / 2)`	`calc(40px + (80px - 6px) / 2)`
Description The padding of the vertical Timeline.
$kendo-timeline-vertical-padding-with-dates-calc	Calculation	`calc(#{$kendo-timeline-vertical-padding-calc} + #{$kendo-timeline-date-width})`	`calc(calc(40px + (80px - 6px) / 2) + 50px)`
Description The padding of the vertical Timeline date.
$kendo-timeline-mobile-vertical-padding-calc	Calculation	`calc(#{$kendo-timeline-mobile-spacing-x} + (#{$kendo-timeline-flag-min-width} - #{$kendo-timeline-track-size}) / 2)`	`calc(16px + (80px - 6px) / 2)`
Description The padding of the vertical mobile Timeline.
$kendo-timeline-mobile-vertical-padding-with-dates-calc	Calculation	`calc(#{$kendo-timeline-mobile-vertical-padding-calc} + #{$kendo-timeline-date-width})`	`calc(calc(16px + (80px - 6px) / 2) + 50px)`
Description The padding of the vertical mobile Timeline date.
$kendo-timeline-circle-width	Number	`16px`	`16px`
Description The width of the Timeline circle.
$kendo-timeline-circle-height	Number	`16px`	`16px`
Description The height of the Timeline circle.
$kendo-timeline-circle-bg	Color	`$kendo-color-primary`	`#ff6358`
Description The background color of the Timeline circle.
$kendo-timeline-collapse-arrow-padding-x	Number	`$kendo-padding-md-x`	`8px`
Description The horizontal padding of the Timeline collapse arrow.
$kendo-timeline-event-width	Number	`400px`	`400px`
Description The width of the Timeline event.
$kendo-timeline-event-height	Number	`600px`	`600px`
Description The height of the Timeline event.
$kendo-timeline-event-min-height-calc	Calculation	`calc(2 * (#{$kendo-timeline-track-event-offset} - #{$kendo-card-border-width}))`	`calc(2 * (36px - 1px))`
Description The minimum height of the Timeline event.

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	`1px`	`1px`
Description The width of the border around the Toolbar.
$kendo-toolbar-border-radius	Null	`null`	`null`
Description The border radius of the Toolbar.
$kendo-toolbar-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the Toolbar.
$kendo-toolbar-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Toolbar.
$kendo-toolbar-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the Toolbar.
$kendo-toolbar-bg	Color	`$kendo-base-bg`	`#fafafa`
Description The background color of the Toolbar.
$kendo-toolbar-text	Color	`$kendo-base-text`	`#424242`
Description The text color of the Toolbar.
$kendo-toolbar-border	Color	`$kendo-base-border`	`rgba(0, 0, 0, 0.08)`
Description The color of the border around the Toolbar.
$kendo-toolbar-gradient	Null	`null`	`null`
Description The gradient of the Toolbar.
$kendo-toolbar-shadow	Null	`null`	`null`
Description The box shadow of the Toolbar.
$kendo-toolbar-separator-border	String	`inherit`	`inherit`
Description The color of the separator border of the Toolbar.
$kendo-toolbar-input-width	Number	`10em`	`10em`
Description The width of the input in the Toolbar.
$kendo-toolbar-item-shadow	List	`$kendo-button-focus-shadow`	`0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The box shadow of the focused Toolbar item.
$kendo-toolbar-flat-border-width	Number	`1px`	`1px`
Description Border width of the flat Toolbar.
$kendo-toolbar-sizes	Map	`( sm: ( padding-x: $kendo-toolbar-sm-padding-x, padding-y: $kendo-toolbar-sm-padding-y, spacing: $kendo-toolbar-sm-spacing ), md: ( padding-x: $kendo-toolbar-md-padding-x, padding-y: $kendo-toolbar-md-padding-y, spacing: $kendo-toolbar-md-spacing ), lg: ( padding-x: $kendo-toolbar-lg-padding-x, padding-y: $kendo-toolbar-lg-padding-y, spacing: $kendo-toolbar-lg-spacing ) )`	`(sm: (padding-x: 4px, padding-y: 4px, spacing: 6px), md: (padding-x: 8px, padding-y: 8px, spacing: 8px), lg: (padding-x: 10px, padding-y: 10px, spacing: 10px))`
Description The sizes map for the Toolbar.

Name	Type	Default value	Computed value
$kendo-tooltip-padding-y	Number	`$kendo-padding-md-y`	`4px`
Description The vertical padding of the Tooltip.
$kendo-tooltip-padding-x	Number	`$kendo-padding-md-x`	`8px`
Description The horizontal padding of the Tooltip.
$kendo-tooltip-border-width	Number	`0px`	`0px`
Description The width of the border around the Tooltip.
$kendo-tooltip-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description The border radius of the Tooltip.
$kendo-tooltip-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the Tooltip.
$kendo-tooltip-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Tooltip.
$kendo-tooltip-line-height	Number	`1.25`	`1.25`
Description The line height of the Tooltip.
$kendo-tooltip-title-font-size	Number	`($kendo-tooltip-font-size * 1.25)`	`17.5px`
Description The font size of the Tooltip title.
$kendo-tooltip-title-line-height	Number	`1`	`1`
Description The line height of the Tooltip title.
$kendo-tooltip-callout-size	Number	`6px`	`6px`
Description The size of the Tooltip callout.
$kendo-tooltip-bg	Color	`if($kendo-enable-color-system, k-color( on-app-surface ), rgba( k-contrast-legacy( $kendo-body-bg ), .75 ))`	`rgba(0, 0, 0, 0.75)`
Description The default background of the Tooltip.
$kendo-tooltip-text	Color	`if($kendo-enable-color-system, k-color( app-surface ), k-contrast-legacy( $kendo-tooltip-bg ))`	`white`
Description The default text color of the Tooltip.
$kendo-tooltip-border	Color	`$kendo-tooltip-bg`	`rgba(0, 0, 0, 0.75)`
Description The default border color of the Tooltip.
$kendo-tooltip-shadow	String	`k-elevation(2)`	`var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The box-shadow of the Tooltip.
$kendo-tooltip-theme-colors	Map	`$kendo-theme-colors`	`("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "inverse": #424242)`
Description The theme colors map for the Tooltip.
$kendo-tooltip-theme	Map	`tooltip-theme( $kendo-tooltip-theme-colors )`	("inverse": (color: white, background-color: #424242, border: #424242), "light": (color: black, background-color: #ebebeb, border: #ebebeb), "dark": (color: white, background-color: #424242, border: #424242), "error": (color: white, background-color: #f31700, border: #f31700), "warning": (color: black, background-color: #ffc000, border: #ffc000), "success": (color: white, background-color: #37b400, border: #37b400), "info": (color: white, background-color: #0058e9, border: #0058e9), "tertiary": (color: white, background-color: #03a9f4, border: #03a9f4), "secondary": (color: white, background-color: #666666, border: #666666), "primary": (color: white, background-color: #ff6358, border: #ff6358))
Description The generated theme colors map for the Tooltip.

Treeview

Name	Type	Default value	Computed value
$kendo-treeview-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the TreeView.
$kendo-treeview-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the TreeView.
$kendo-treeview-sm-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the small TreeView.
$kendo-treeview-md-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the medium TreeView.
$kendo-treeview-lg-font-size	Number	`$kendo-font-size-lg`	`16px`
Description The font size of the large TreeView.
$kendo-treeview-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the TreeView.
$kendo-treeview-sm-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the small TreeView.
$kendo-treeview-md-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the medium TreeView.
$kendo-treeview-lg-line-height	Number	`$kendo-line-height-lg`	`1.5`
Description The line height of the large TreeView.
$kendo-treeview-indent	Number	`24px`	`24px`
Description The indentation of child groups in the TreeView.
$kendo-treeview-item-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the TreeView items.
$kendo-treeview-sm-item-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the small TreeView items.
$kendo-treeview-md-item-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the medium TreeView items.
$kendo-treeview-lg-item-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the large TreeView items.
$kendo-treeview-item-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The vertical padding of the TreeView items.
$kendo-treeview-sm-item-padding-y	Number	`k-map-get( $kendo-spacing, 0.5 )`	`2px`
Description The vertical padding of the small TreeView items.
$kendo-treeview-md-item-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The vertical padding of the medium TreeView items.
$kendo-treeview-lg-item-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The vertical padding of the large TreeView items.
$kendo-treeview-item-border-width	Number	`0px`	`0px`
Description The border width of the TreeView items.
$kendo-treeview-item-border-radius	Number	`$kendo-border-radius-md`	`4px`
Description The border radius of the TreeView items.
$kendo-treeview-sm-checkbox-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`4px`
Description The horizontal padding of the checkbox in the small TreeView.
$kendo-treeview-md-checkbox-padding-x	Number	`$kendo-treeview-sm-checkbox-padding-x`	`4px`
Description The horizontal padding of the checkbox in the medium TreeView.
$kendo-treeview-lg-checkbox-padding-x	Number	`$kendo-treeview-sm-checkbox-padding-x`	`4px`
Description The horizontal padding of the checkbox in the large TreeView.
$kendo-treeview-sm-checkbox-padding-y	Number	`k-map-get( $kendo-spacing, .5 )`	`2px`
Description The vertical padding of the checkbox in the small TreeView.
$kendo-treeview-md-checkbox-padding-y	Number	`$kendo-treeview-sm-checkbox-padding-y`	`2px`
Description The vertical padding of the checkbox in the medium TreeView.
$kendo-treeview-lg-checkbox-padding-y	Null	`null`	`null`
Description The vertical padding of the checkbox in the large TreeView.
$kendo-treeview-sizes	Map	( sm: ( font-size: $kendo-treeview-sm-font-size, line-height: $kendo-treeview-sm-line-height, item-padding-x: $kendo-treeview-sm-item-padding-x, item-padding-y: $kendo-treeview-sm-item-padding-y, checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x, checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y ), md: ( font-size: $kendo-treeview-md-font-size, line-height: $kendo-treeview-md-line-height, item-padding-x: $kendo-treeview-md-item-padding-x, item-padding-y: $kendo-treeview-md-item-padding-y, checkbox-padding-x: $kendo-treeview-md-checkbox-padding-x, checkbox-padding-y: $kendo-treeview-md-checkbox-padding-y ), lg: ( font-size: $kendo-treeview-lg-font-size, line-height: $kendo-treeview-lg-line-height, item-padding-x: $kendo-treeview-lg-item-padding-x, item-padding-y: $kendo-treeview-lg-item-padding-y, checkbox-padding-x: $kendo-treeview-lg-checkbox-padding-x, checkbox-padding-y: $kendo-treeview-lg-checkbox-padding-y ) )	`(sm: (font-size: 14px, line-height: 1.4285714286, item-padding-x: 8px, item-padding-y: 2px, checkbox-padding-x: 4px, checkbox-padding-y: 2px), md: (font-size: 14px, line-height: 1.4285714286, item-padding-x: 8px, item-padding-y: 4px, checkbox-padding-x: 4px, checkbox-padding-y: 2px), lg: (font-size: 16px, line-height: 1.5, item-padding-x: 8px, item-padding-y: 8px, checkbox-padding-x: 4px, checkbox-padding-y: null))`
Description The sizes map of the TreeView.
$kendo-treeview-bg	Null	`null`	`null`
Description The background color of the TreeView.
$kendo-treeview-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the TreeView.
$kendo-treeview-border	Null	`null`	`null`
Description The border color of the TreeView.
$kendo-treeview-item-hover-bg	Color	`$kendo-hover-bg`	`#f0f0f0`
Description The background color of hovered TreeView items.
$kendo-treeview-item-hover-text	Color	`$kendo-hover-text`	`#424242`
Description The text color of hovered TreeView items.
$kendo-treeview-item-hover-border	Null	`null`	`null`
Description The border color of hovered TreeView items.
$kendo-treeview-item-hover-gradient	Null	`null`	`null`
Description The background gradient of hovered TreeView items.
$kendo-treeview-item-selected-bg	Color	`$kendo-selected-bg`	`#ff6358`
Description The background color of selected TreeView items.
$kendo-treeview-item-selected-text	Color	`$kendo-selected-text`	`white`
Description The text color of selected TreeView items.
$kendo-treeview-item-selected-border	Null	`null`	`null`
Description The border color of selected TreeView items.
$kendo-treeview-item-selected-gradient	Null	`null`	`null`
Description The background gradient of selected TreeView items.
$kendo-treeview-item-focus-shadow	List	`$kendo-focus-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.13)`
Description The box shadow of focused TreeView items.
$kendo-treeview-loadmore-bg	Color	`transparent`	`transparent`
Description The background color of the Load More button in the TreeView
$kendo-treeview-loadmore-text	Color	`$kendo-link-text`	`#ff6358`
Description The text color of the Load More button in the TreeView
$kendo-treeview-loadmore-border	Null	`null`	`null`
Description The border color of the Load More button in the TreeView
$kendo-treeview-loadmore-hover-bg	Color	`transparent`	`transparent`
Description The background color of the hovered Load More button in the TreeView
$kendo-treeview-loadmore-hover-text	Color	`$kendo-link-hover-text`	`#d6534a`
Description The text color of the hovered Load More button in the TreeView.
$kendo-treeview-loadmore-hover-border	Null	`null`	`null`
Description The border color of the hovered Load More button in the TreeView.
$kendo-treeview-loadmore-focus-bg	Color	`transparent`	`transparent`
Description The background color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-text	Color	`$kendo-link-hover-text`	`#d6534a`
Description The text color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-border	Null	`null`	`null`
Description The border color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-shadow	List	`$kendo-treeview-item-focus-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.13)`
Description The box shadow of the focused Load More button in the TreeView.

Typography

Name	Type	Default value	Computed value
$kendo-font-size	Number	`14px`	`14px`
Description Base font size across all components.
$kendo-font-size-xs	Number	`10px`	`10px`
Description Extra small font size across all components.
$kendo-font-size-sm	Number	`12px`	`12px`
Description Small font size across all components.
$kendo-font-size-md	Number	`$kendo-font-size`	`14px`
Description Medium font size across all components.
$kendo-font-size-lg	Number	`16px`	`16px`
Description Large font size across all components.
$kendo-font-size-xl	Number	`20px`	`20px`
Description Extra large font size across all components.
$kendo-font-family-sans-serif	List	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description Font family for text.
$kendo-font-family-monospace	List	`SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace`	`SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace`
Description Font family for monospaced text. Used for styling the code.
$kendo-font-family	String	`inherit`	`inherit`
Description Font family across all components.
$kendo-line-height	Number	`k-math-div( 20, 14 )`	`1.4285714286`
Description Line height used along with $kendo-font-size.
$kendo-line-height-xs	Number	`1`	`1`
Description Extra small line height used along with $kendo-font-size-xs.
$kendo-line-height-sm	Number	`1.25`	`1.25`
Description Small line height used along with $kendo-font-size-sm.
$kendo-line-height-md	Number	`$kendo-line-height`	`1.4285714286`
Description Medium line height used along with $kendo-font-size-md.
$kendo-line-height-lg	Number	`1.5`	`1.5`
Description Large line height used along with $kendo-font-size-lg.
$kendo-font-weight-light	Number	`300`	`300`
Description Light font weight.
$kendo-font-weight-normal	Number	`400`	`400`
Description Normal font weight.
$kendo-font-weight-medium	Number	`500`	`500`
Description Medium font weight.
$kendo-font-weight-semibold	Number	`600`	`600`
Description Semibold font weight.
$kendo-font-weight-bold	Number	`700`	`700`
Description Bold font weight.
$kendo-letter-spacing	Null	`null`	`null`
Description Letter spacing.

Upload

Name	Type	Default value	Computed value
$kendo-upload-border-width	Number	`1px`	`1px`
Description The width of the border around the Upload.
$kendo-upload-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the Upload.
$kendo-upload-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Upload.
$kendo-upload-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the Upload.
$kendo-upload-max-height	Number	`300px`	`300px`
Description The maximum height of the list with uploaded items.
$kendo-upload-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the Upload.
$kendo-upload-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the Upload.
$kendo-upload-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the Upload.
$kendo-upload-dropzone-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of the Upload dropzone.
$kendo-upload-dropzone-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The vertical padding of the Upload dropzone.
$kendo-upload-dropzone-text	Color	`$kendo-component-header-text`	`#424242`
Description The text color of the Upload dropzone.
$kendo-upload-dropzone-bg	Color	`$kendo-component-header-bg`	`#fafafa`
Description The background color of the Upload dropzone.
$kendo-upload-dropzone-border	Color	`$kendo-upload-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the Upload dropzone.
$kendo-upload-dropzone-hover-bg	Color	`$kendo-hover-bg`	`#f0f0f0`
Description The background color of the hovered Upload dropzone.
$kendo-upload-status-text	Color	`$kendo-subtle-text`	`#666666`
Description The text color of the Upload status message.
$kendo-upload-status-text-opacity	Null	`null`	`null`
Description The opacity of the Upload status message.
$kendo-upload-item-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The horizontal padding of an uploaded item.
$kendo-upload-item-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`8px`
Description The vertical padding of an uploaded item.
$kendo-upload-multiple-items-spacing	Number	`12px`	`12px`
Description The vertical spacing between uploaded batch items.
$kendo-upload-validation-font-size	Number	`11px`	`11px`
Description The font size of the Upload validation message.
$kendo-upload-icon-spacing	Number	`$kendo-icon-spacing`	`4px`
Description The horizontal spacing of the Upload status icon.
$kendo-upload-icon-color	Color	`$kendo-subtle-text`	`#666666`
Description The color of the uploaded items icon.
$kendo-upload-progress-thickness	Number	`2px`	`2px`
Description The thickness of the Upload progress bar.
$kendo-upload-progress-bg	Color	`$kendo-color-info`	`#0058e9`
Description The background color of the Upload progress bar.
$kendo-upload-success-text	Color	`$kendo-color-success`	`#37b400`
Description The success text color of the Upload.
$kendo-upload-success-bg	Color	`$kendo-color-success`	`#37b400`
Description The success background color of the Upload progress bar.
$kendo-upload-error-text	Color	`$kendo-color-error`	`#f31700`
Description The error text color of the Upload.
$kendo-upload-error-bg	Color	`$kendo-color-error`	`#f31700`
Description The error background color of the Upload progress bar.
$kendo-upload-focus-shadow	List	`0 0 0 2px rgba(0, 0, 0, .13)`	`0 0 0 2px rgba(0, 0, 0, 0.13)`
Description The shadow of the focused Upload button, actions and uploaded items.

Window

Name	Type	Default value	Computed value
$kendo-window-border-width	Number	`0px`	`0px`
Description The width of the border around the Window.
$kendo-window-border-radius	Number	`0px`	`0px`
Description The border radius of the Window.
$kendo-window-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the Window.
$kendo-window-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Window.
$kendo-window-line-height	Number	`1.25`	`1.25`
Description The line height of the Window.
$kendo-window-titlebar-padding-x	Number	`16px`	`16px`
Description The horizontal padding of the Window titlebar.
$kendo-window-titlebar-padding-y	Number	`12px`	`12px`
Description The vertical padding of the Window titlebar.
$kendo-window-titlebar-border-width	List	`0 0 1px`	`0 0 1px`
Description The width of the border of the Window titlebar.
$kendo-window-titlebar-border-style	String	`solid`	`solid`
Description The style of the border of the Window titlebar.
$kendo-window-title-font-size	Number	`$kendo-font-size-lg`	`16px`
Description The font size of the title of the Window.
$kendo-window-title-line-height	Number	`1.25`	`1.25`
Description The line height of the title of the Window.
$kendo-window-actions-gap	Null	`null`	`null`
Description The spacing between the buttons in the Window titlebar.
$kendo-window-action-opacity	Null	`null`	`null`
Description The opacity of the buttons in the Window titlebar.
$kendo-window-action-hover-opacity	Null	`null`	`null`
Description The opacity of the hovered buttons in the Window titlebar.
$kendo-window-inner-padding-x	Number	`16px`	`16px`
Description The horizontal padding of the content of the Window.
$kendo-window-inner-padding-y	Number	`16px`	`16px`
Description The vertical padding of the content of the Window.
$kendo-window-buttongroup-padding-x	Number	`$kendo-actions-padding-x`	`8px`
Description The horizontal padding of the Window action buttons.
$kendo-window-buttongroup-padding-y	Number	`$kendo-actions-padding-y`	`8px`
Description The vertical padding of the Window action buttons.
$kendo-window-buttongroup-border-width	Number	`1px`	`1px`
Description The width of the top border of the Window action buttons.
$kendo-window-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the Window.
$kendo-window-text	Color	`$kendo-component-text`	`#424242`
Description The text color of the Window.
$kendo-window-border	Color	`$kendo-component-border`	`rgba(0, 0, 0, 0.08)`
Description The border color of the Window.
$kendo-window-shadow	String	`k-elevation(8)`	`var(--kendo-elevation-8, 0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The box shadow of the Window.
$kendo-window-focus-shadow	String	`k-elevation(9)`	`var(--kendo-elevation-9, 0 32px 34px rgba(0, 0, 0, 0.32), 0 4px 16px rgba(0, 0, 0, 0.12))`
Description The box shadow of the focused Window.
$kendo-window-titlebar-bg	Color	`$kendo-component-header-bg`	`#fafafa`
Description The background color of the Window titlebar.
$kendo-window-titlebar-text	Color	`$kendo-component-header-text`	`#424242`
Description The text color of the Window titlebar.
$kendo-window-titlebar-border	String	`inherit`	`inherit`
Description The border color of the Window titlebar.
$kendo-window-titlebar-gradient	Null	`null`	`null`
Description The background gradient of the Window titlebar.
$kendo-window-sizes	Map	`( sm: 300px, md: 800px, lg: 1200px )`	`(sm: 300px, md: 800px, lg: 1200px)`
Description The map of the width for the different Window sizes.
$kendo-window-theme-colors	Map	`( "primary": k-map-get($kendo-theme-colors, "primary"), "light": k-map-get($kendo-theme-colors, "light"), "dark": k-map-get($kendo-theme-colors, "dark") )`	`("primary": #ff6358, "light": #ebebeb, "dark": #424242)`
Description The theme colors map for the Window.

Wizard

Name	Type	Default value	Computed value
$kendo-wizard-padding-x	Number	`$kendo-padding-md-x * 2.5`	`20px`
Description The horizontal padding of the Wizard.
$kendo-wizard-padding-y	Number	`$kendo-wizard-padding-x`	`20px`
Description The vertical padding of the Wizard.
$kendo-wizard-content-padding-x	Number	`$kendo-padding-md-x * 4`	`32px`
Description The horizontal padding of the Wizard content.
$kendo-wizard-content-padding-y	Number	`$kendo-padding-md-y * 8`	`32px`
Description The vertical padding of the Wizard content.
$kendo-wizard-buttons-margin-x	Number	`10px`	`10px`
Description The horizontal margin of the Wizard's Button container.
$kendo-wizard-border-width	Number	`0px`	`0px`
Description The border width of the Wizard.
$kendo-wizard-font-size	Number	`$kendo-font-size-md`	`14px`
Description The font size of the Wizard.
$kendo-wizard-line-height	Number	`$kendo-line-height-md`	`1.4285714286`
Description The line height of the Wizard.
$kendo-wizard-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the Wizard.
$kendo-wizard-step-focus-border	Color	`#656565`	`#656565`
Description The outline of the focused Wizard step.

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

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!