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-body-bg	String	`$kendo-color-white`	`var(--kendo-color-app-surface, #ffffff)`
Description Background color of the body.
$kendo-body-text	String	`#424242`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description Text color of the body.
$kendo-subtle-text	String	`#666666`	`var(--kendo-color-subtle, #666666)`
Description Subtle text color.
$kendo-link-text	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description Text color of the links.
$kendo-link-hover-text	String	`$kendo-color-primary-darker`	`var(--kendo-color-primary-hover, #ea5a51)`
Description Text color of the links on hover.
$kendo-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Horizontal padding.
$kendo-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description Vertical padding.
$kendo-padding-sm-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description Small horizontal padding.
$kendo-padding-sm-y	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description Small vertical padding.
$kendo-padding-md-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Medium horizontal padding.
$kendo-padding-md-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description Medium vertical padding.
$kendo-padding-lg-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description Large horizontal padding.
$kendo-padding-lg-y	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description Large vertical padding.
$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	String	`#fafafa`	`var(--kendo-color-surface, #fafafa)`
Description The background of the components' chrome area.
$kendo-base-text	String	`$kendo-body-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the components' chrome area.
$kendo-base-border	String	`rgba(black, 0.08)`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the components' chrome area.
$kendo-base-gradient	Null	`rgba(black, 0), rgba(black, 0.02)`	`null`
Description The gradient background of the components' chrome area.
$kendo-hover-bg	String	`k-try-shade($kendo-base-bg, 0.5)`	`var(--kendo-color-base-hover, #ebebeb)`
Description The background of hovered items.
$kendo-hover-text	String	`$kendo-base-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of hovered items.
$kendo-hover-border	String	`$kendo-base-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of hovered items.
$kendo-hover-gradient	Null	`$kendo-base-gradient`	`null`
Description The gradient background of hovered items.
$kendo-selected-bg	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The background of selected items.
$kendo-selected-text	String	`k-contrast-legacy($kendo-selected-bg)`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of selected items.
$kendo-selected-border	String	`$kendo-base-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of selected items.
$kendo-selected-gradient	Null	`$kendo-base-gradient`	`null`
Description The gradient background of selected items.
$kendo-selected-hover-bg	String	`k-try-shade($kendo-selected-bg, 0.5)`	`var(--kendo-color-primary-hover, #ea5a51)`
Description The background of selected and hovered items.
$kendo-selected-hover-text	String	`$kendo-selected-text`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of selected and hovered items.
$kendo-selected-hover-border	String	`$kendo-base-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border of selected and hovered items.
$kendo-selected-hover-gradient	Null	`$kendo-base-gradient`	`null`
Description The gradient of selected and hovered items.
$kendo-disabled-text	String	`#8f8f8f`	`var(--kendo-color-on-app-surface, #3d3d3d)`
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	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the AppBar.
$kendo-appbar-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the AppBar.
$kendo-appbar-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the AppBar.
$kendo-appbar-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the AppBar.
$kendo-appbar-gap	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing between the AppBar sections.
$kendo-appbar-light-bg	String	`$kendo-color-light`	`var(--kendo-color-light, #ebebeb)`
Description The background color of the AppBar based on light theme color.
$kendo-appbar-light-text	String	`if($kendo-enable-color-system, k-color( on-light ), k-contrast-legacy( $kendo-color-light ))`	`var(--kendo-color-on-light, #000000)`
Description The text color of the AppBar based on light theme color.
$kendo-appbar-dark-bg	String	`$kendo-color-dark`	`var(--kendo-color-dark, #3d3d3d)`
Description The background color of the AppBar based on dark theme color.
$kendo-appbar-dark-text	String	`if($kendo-enable-color-system, k-color( on-dark ), k-contrast-legacy( $kendo-color-dark ))`	`var(--kendo-color-on-dark, #ffffff)`
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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Avatar.
$kendo-avatar-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Avatar.
$kendo-avatar-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Avatar.
$kendo-avatar-sizes	Map	`( sm: k-spacing(4), md: k-spacing(8), lg: k-spacing(16) )`	`(sm: var(--kendo-spacing-4, 1rem), md: var(--kendo-spacing-8, 2rem), lg: var(--kendo-spacing-16, 4rem))`
Description The sizes map of the Avatar.
$kendo-avatar-theme-colors	Map	`$kendo-theme-colors`	`("primary": var(--kendo-color-primary, #ff6358), "secondary": var(--kendo-color-secondary, #666666), "tertiary": var(--kendo-color-tertiary, #03a9f4), "info": var(--kendo-color-info, #0058e9), "success": var(--kendo-color-success, #37b400), "warning": var(--kendo-color-warning, #ffc000), "error": var(--kendo-color-error, #f31700), "dark": var(--kendo-color-dark, #3d3d3d), "light": var(--kendo-color-light, #ebebeb), "inverse": var(--kendo-color-dark, #3d3d3d))`
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	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the Badge.
$kendo-badge-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the Badge.
$kendo-badge-sm-padding-x	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The horizontal padding of the small Badge.
$kendo-badge-md-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the medium Badge.
$kendo-badge-lg-padding-x	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The horizontal padding of the large Badge.
$kendo-badge-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the Badge.
$kendo-badge-sm-padding-y	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical padding of the small Badge.
$kendo-badge-md-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the medium Badge.
$kendo-badge-lg-padding-y	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the large Badge.
$kendo-badge-font-size	String	`var( --kendo-font-size-xs, inherit )`	`var(--kendo-font-size-xs, inherit)`
Description The font sizes of the Badge.
$kendo-badge-sm-font-size	String	`var( --kendo-font-size-xs, inherit )`	`var(--kendo-font-size-xs, inherit)`
Description The font size of the small Badge.
$kendo-badge-md-font-size	String	`var( --kendo-font-size-xs, inherit )!default`	`var(--kendo-font-size-xs, inherit)`
Description The font size of the medium Badge.
$kendo-badge-lg-font-size	String	`var( --kendo-font-size-xs, inherit )`	`var(--kendo-font-size-xs, inherit)`
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} + calc( #{$kendo-badge-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 ))`	`calc(1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)`
Description The calculated minimum width of the circular Badge.
$kendo-badge-sm-min-width	Calculation	`calc( #{$kendo-badge-sm-line-height * 1em} + calc( #{$kendo-badge-sm-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 ) )`	`calc(1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 1px * 2)`
Description The calculated minimum width of the small circular Badge.
$kendo-badge-md-min-width	Calculation	`calc( #{$kendo-badge-md-line-height * 1em} + calc( #{$kendo-badge-md-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 ) )`	`calc(1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)`
Description The calculated minimum width of the medium circular Badge.
$kendo-badge-lg-min-width	Calculation	`calc( #{$kendo-badge-lg-line-height * 1em} + calc( #{$kendo-badge-lg-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 ) )`	`calc(1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 1px * 2)`
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: var(--kendo-spacing-0\.5, 0.125rem), padding-y: var(--kendo-spacing-0\.5, 0.125rem), font-size: var(--kendo-font-size-xs, inherit), line-height: 1, min-width: calc(1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 1px * 2)), md: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), font-size: var(--kendo-font-size-xs, inherit), line-height: 1, min-width: calc(1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)), lg: (padding-x: var(--kendo-spacing-1\.5, 0.375rem), padding-y: var(--kendo-spacing-1\.5, 0.375rem), font-size: var(--kendo-font-size-xs, inherit), line-height: 1, min-width: calc(1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 1px * 2)))
Description The sizes map for the Badge.

Name	Type	Default value	Computed value
$kendo-bottom-nav-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the BottomNavigation.
$kendo-bottom-nav-padding-y	String	`$kendo-bottom-nav-padding-x`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the BottomNavigation.
$kendo-bottom-nav-gap	String	`$kendo-bottom-nav-padding-x`	`var(--kendo-spacing-1, 0.25rem)`
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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the BottomNavigation.
$kendo-bottom-nav-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the BottomNavigation.
$kendo-bottom-nav-line-height	String	`var( --kendo-line-height-sm, normal )`	`var(--kendo-line-height-sm, 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	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the BottomNavigation item.
$kendo-bottom-nav-item-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
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} + calc( #{$kendo-padding-md-x} * 2 ) - calc( #{$kendo-bottom-nav-padding-x} * 2 ) )`	`calc(40px + var(--kendo-spacing-2, 0.5rem) * 2 - var(--kendo-spacing-1, 0.25rem) * 2)`
Description The minimum height of the BottomNavigation item.
$kendo-bottom-nav-item-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the BottomNavigation item.
$kendo-bottom-nav-item-gap	List	`0 k-spacing(1)`	`0 var(--kendo-spacing-1, 0.25rem)`
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	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the flat BottomNavigation.
$kendo-bottom-nav-flat-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the flat BottomNavigation.
$kendo-bottom-nav-flat-border	String	`$kendo-component-border`	`var(--kendo-color-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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Breadcrumb.
$kendo-breadcrumb-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Breadcrumb.
$kendo-breadcrumb-sm-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the small Breadcrumb.
$kendo-breadcrumb-md-font-size	String	`$kendo-breadcrumb-font-size`	`var(--kendo-font-size, inherit)`
Description The font size of the medium Breadcrumb.
$kendo-breadcrumb-lg-font-size	String	`var( --kendo-font-size-lg, inherit )`	`var(--kendo-font-size-lg, inherit)`
Description The font size of the large Breadcrumb.
$kendo-breadcrumb-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line-height of the Breadcrumb.
$kendo-breadcrumb-sm-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line-height of the small Breadcrumb.
$kendo-breadcrumb-md-line-height	String	`$kendo-breadcrumb-line-height`	`var(--kendo-line-height, normal)`
Description The line-height of the medium Breadcrumb.
$kendo-breadcrumb-lg-line-height	String	`var( --kendo-line-height-lg, normal )`	`var(--kendo-line-height-lg, normal)`
Description The line-height of the height Breadcrumb.
$kendo-breadcrumb-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The base background of the Breadcrumb.
$kendo-breadcrumb-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The base text color of the Breadcrumb.
$kendo-breadcrumb-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-x	String	`$kendo-breadcrumb-link-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the large Breadcrumb link.
$kendo-breadcrumb-link-padding-y	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-y	String	`$kendo-breadcrumb-link-padding-y`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the large Breadcrumb link.
$kendo-breadcrumb-link-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border-radius of the Breadcrumb link.
$kendo-breadcrumb-icon-link-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-y	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-y	String	`$kendo-breadcrumb-icon-link-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the large Breadcrumb link icon.
$kendo-breadcrumb-icon-link-padding-x	String	`$kendo-breadcrumb-icon-link-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-x	String	`$kendo-breadcrumb-sm-icon-link-padding-y`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The horizontal padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-x	String	`$kendo-breadcrumb-icon-link-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-x	String	`$kendo-breadcrumb-lg-icon-link-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
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	String	`$kendo-icon-spacing`	`var(--kendo-spacing-1, 0.25rem)`
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	String	`$kendo-link-text`	`var(--kendo-color-primary, #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	String	`$kendo-base-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of the hovered Breadcrumb link.
$kendo-breadcrumb-link-hover-text	String	`$kendo-link-hover-text`	`var(--kendo-color-primary-hover, #ea5a51)`
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	String	`$kendo-link-text`	`var(--kendo-color-primary, #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	String	`$kendo-base-bg`	`var(--kendo-color-surface, #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: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-1, 0.25rem), icon-link-padding-x: var(--kendo-spacing-1\.5, 0.375rem), icon-link-padding-y: var(--kendo-spacing-1\.5, 0.375rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), md: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-1\.5, 0.375rem), icon-link-padding-x: var(--kendo-spacing-2, 0.5rem), icon-link-padding-y: var(--kendo-spacing-2, 0.5rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), lg: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-2, 0.5rem), icon-link-padding-x: var(--kendo-spacing-3, 0.75rem), icon-link-padding-y: var(--kendo-spacing-3, 0.75rem), font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal)))
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	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Button.
$kendo-button-sm-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the small Button.
$kendo-button-md-padding-x	String	`$kendo-button-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the medium Button.
$kendo-button-lg-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the large Button.
$kendo-button-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the Button.
$kendo-button-sm-padding-y	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical padding of the small Button.
$kendo-button-md-padding-y	String	`$kendo-button-padding-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the medium Button.
$kendo-button-lg-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the large Button.
$kendo-button-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Button.
$kendo-button-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Button.
$kendo-button-sm-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the small Button.
$kendo-button-md-font-size	String	`$kendo-button-font-size`	`var(--kendo-font-size, inherit)`
Description The font size of the medium Button.
$kendo-button-lg-font-size	String	`var( --kendo-font-size-lg, inherit )`	`var(--kendo-font-size-lg, inherit)`
Description The font size of the large Button.
$kendo-button-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height used along with the $kendo-font-size the.
$kendo-button-sm-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height used along with the $kendo-font-size the of the small Button.
$kendo-button-md-line-height	String	`$kendo-button-line-height`	`var(--kendo-line-height, normal)`
Description The line height used along with the $kendo-font-size the of the medium Button.
$kendo-button-lg-line-height	String	`var( --kendo-line-height-lg, normal )`	`var(--kendo-line-height-lg, normal)`
Description The line height used along with the $kendo-font-size the of the large Button.
$kendo-button-calc-size	Calculation	`calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) + #{$kendo-button-border-width * 2} )`	`calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px)`
Description The calculated height of the Button.
$kendo-button-inner-calc-size	Calculation	`calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) )`	`calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2)`
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: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-0\.5, 0.125rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-1, 0.25rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), lg: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-2, 0.5rem), font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal)))
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": var(--kendo-color-primary, #ff6358), "secondary": var(--kendo-color-secondary, #666666), "tertiary": var(--kendo-color-tertiary, #03a9f4), "info": var(--kendo-color-info, #0058e9), "success": var(--kendo-color-success, #37b400), "warning": var(--kendo-color-warning, #ffc000), "error": var(--kendo-color-error, #f31700), "dark": var(--kendo-color-dark, #3d3d3d), "light": var(--kendo-color-light, #ebebeb), "inverse": var(--kendo-color-dark, #3d3d3d), "base": var(--kendo-color-base, #f5f5f5))
Description The theme colors map for the Button.
$kendo-button-bg	String	`if($kendo-enable-color-system, k-color( base ), #f5f5f5)`	`var(--kendo-color-base, #f5f5f5)`
Description The base background of the Button.
$kendo-button-text	String	`if($kendo-enable-color-system, k-color( on-base ), #424242)`	`var(--kendo-color-on-base, #3d3d3d)`
Description The base text color of the Button.
$kendo-button-border	String	`if($kendo-enable-color-system, k-color( border ), rgba( black, .08 ))`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The base border color of the Button.
$kendo-button-gradient	Null	`if($kendo-enable-color-system, null, (rgba( black, 0 ), rgba( black, .02 )))`	`null`
Description The base background gradient of the Button.
$kendo-button-shadow	Null	`null`	`null`
Description The base shadow of the Button.
$kendo-button-hover-bg	String	`if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-button-bg, .5 ))`	`var(--kendo-color-base-hover, #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	String	`if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-button-bg, 1.5 ))`	`var(--kendo-color-base-active, #d6d6d6)`
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	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The base background color of the selected Button.
$kendo-button-selected-text	String	`if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-button-selected-bg ))`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the selected Button.
$kendo-button-selected-border	String	`$kendo-button-selected-bg`	`var(--kendo-color-primary, #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 color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)`
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.

Calendar

Name	Type	Default value	Computed value
$kendo-calendar-border-width	Number	`1px`	`1px`
Description The width of the border around the Calendar.
$kendo-calendar-cell-size	Number	`32px`	`32px`
Description The size of the cells in the Calendar.
$kendo-calendar-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the Calendar.
$kendo-calendar-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Calendar.
$kendo-calendar-border	String	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the Calendar.
$kendo-calendar-header-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the header in the Calendar.
$kendo-calendar-header-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the header in the Calendar.
$kendo-calendar-header-border-width	Number	`1px`	`1px`
Description The border width of the header in the Calendar.
$kendo-calendar-header-bg	String	`$kendo-component-header-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of the header in the Calendar.
$kendo-calendar-header-text	String	`$kendo-component-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the header in the Calendar.
$kendo-calendar-header-border	String	`$kendo-component-header-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the header in the Calendar.
$kendo-calendar-header-gradient	Null	`$kendo-component-header-gradient`	`null`
Description The gradient of the header in the Calendar.
$kendo-calendar-header-shadow	List	`0 1px 3px 1px rgba(black, .1)`	`0 1px 3px 1px rgba(0, 0, 0, 0.1)`
Description The shadow of the header in the Calendar.
$kendo-calendar-nav-gap	Null	`null`	`null`
Description The gap between the items in the navigation of the Calendar.
$kendo-calendar-footer-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the footer in the Calendar.
$kendo-calendar-footer-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the footer in the Calendar.
$kendo-calendar-cell-padding-x	Number	`.25em`	`0.25em`
Description The horizontal padding of the cells in the Calendar.
$kendo-calendar-cell-padding-y	Number	`$kendo-calendar-cell-padding-x`	`0.25em`
Description The vertical padding of the cells in the Calendar.
$kendo-calendar-cell-line-height	String	`$kendo-calendar-line-height`	`var(--kendo-line-height, normal)`
Description The line height of the cells in the Calendar.
$kendo-calendar-cell-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the cells in the Calendar.
$kendo-calendar-header-cell-padding-x	Null	`null`	`null`
Description The horizontal padding of the header cells in the Calendar.
$kendo-calendar-header-cell-padding-y	Null	`null`	`null`
Description The vertical padding of the header cells in the Calendar.
$kendo-calendar-header-cell-width	Number	`$kendo-calendar-cell-size`	`32px`
Description The width of the header cells in the Calendar.
$kendo-calendar-header-cell-height	Number	`$kendo-calendar-cell-size`	`32px`
Description The height of the header cells in the Calendar.
$kendo-calendar-header-cell-bg	Null	`null`	`null`
Description The background color of the header cells in the Calendar.
$kendo-calendar-header-cell-text	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #666666)`
Description The text color of the header cells in the Calendar.
$kendo-calendar-header-cell-opacity	Null	`null`	`null`
Description The opacity of the header cells in the Calendar.
$kendo-calendar-caption-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the caption in the Calendar.
$kendo-calendar-caption-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the caption in the Calendar.
$kendo-calendar-caption-height	Number	`$kendo-calendar-cell-size`	`32px`
Description The height of the caption in the Calendar.
$kendo-calendar-caption-font-size	Null	`null`	`null`
Description The font size of the caption in the Calendar.
$kendo-calendar-caption-line-height	Null	`null`	`null`
Description The line height of the caption in the Calendar.
$kendo-calendar-week-number-font-size	Number	`$kendo-font-size-sm`	`0.75rem`
Description The font size of the week number cells in the Calendar.
$kendo-calendar-view-width	Number	`($kendo-calendar-cell-size * 8)`	`256px`
Description The width of the Calendar view.
$kendo-calendar-view-height	Number	`($kendo-calendar-cell-size * 7)`	`224px`
Description The height of the Calendar view.
$kendo-calendar-view-gap	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The gap between the items in the Calendar view.
$kendo-calendar-weekend-bg	Null	`null`	`null`
Description The background color of the weekend cells in the Calendar.
$kendo-calendar-weekend-text	Null	`null`	`null`
Description The text color of the weekend cells in the Calendar.
$kendo-calendar-today-style	String	`color`	`color`
Description The style of the current day in the Calendar.
$kendo-calendar-today-color	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The color of the current day in the Calendar.
$kendo-calendar-week-number-bg	Null	`null`	`null`
Description The background color of the week number cells in the Calendar.
$kendo-calendar-week-number-text	String	`$kendo-calendar-header-cell-text`	`var(--kendo-color-subtle, #666666)`
Description The text color of the week number cells in the Calendar.
$kendo-calendar-other-month-bg	Null	`null`	`null`
Description The background color of the preceding/subsequent month cells in the Calendar.
$kendo-calendar-other-month-text	String	`$kendo-calendar-header-cell-text`	`var(--kendo-color-subtle, #666666)`
Description The text color of the preceding/subsequent month cells in the Calendar.
$kendo-calendar-cell-bg	Null	`null`	`null`
Description The background color of the cells in the Calendar.
$kendo-calendar-cell-text	Null	`null`	`null`
Description The text color of the cells in the Calendar.
$kendo-calendar-cell-border	Null	`null`	`null`
Description The border color of the cells in the Calendar.
$kendo-calendar-cell-gradient	Null	`null`	`null`
Description The gradient of the cells in the Calendar.
$kendo-calendar-cell-hover-bg	String	`$kendo-hover-bg`	`var(--kendo-color-base-hover, #ebebeb)`
Description The background color of the hovered cells in the Calendar.
$kendo-calendar-cell-hover-text	String	`$kendo-hover-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the hovered cells in the Calendar.
$kendo-calendar-cell-hover-border	String	`$kendo-hover-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the hovered cells in the Calendar.
$kendo-calendar-cell-hover-gradient	Null	`null`	`null`
Description The gradient of the hovered cells in the Calendar.
$kendo-calendar-cell-selected-bg	String	`$kendo-selected-bg`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the selected cells in the Calendar.
$kendo-calendar-cell-selected-text	String	`$kendo-selected-text`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the selected cells in the Calendar.
$kendo-calendar-cell-selected-border	String	`$kendo-selected-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the selected cells in the Calendar.
$kendo-calendar-cell-selected-gradient	Null	`null`	`null`
Description The gradient of the selected cells in the Calendar.
$kendo-calendar-cell-selected-hover-bg	String	`$kendo-selected-hover-bg`	`var(--kendo-color-primary-hover, #ea5a51)`
Description The background color of the selected and hovered cells in the Calendar.
$kendo-calendar-cell-selected-hover-text	String	`$kendo-selected-hover-text`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the selected and hovered cells in the Calendar.
$kendo-calendar-cell-selected-hover-border	Null	`null`	`null`
Description The border color of the selected and hovered cells in the Calendar.
$kendo-calendar-cell-selected-hover-gradient	Null	`null`	`null`
Description The gradient of the selected and hovered cells in the Calendar.
$kendo-calendar-cell-focus-shadow	List	`inset 0 0 0 2px rgba( $kendo-color-black, .08 )`	`inset 0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The shadow of the focused cells in the Calendar.
$kendo-calendar-cell-selected-focus-shadow	List	`$kendo-calendar-cell-focus-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The shadow of the selected and focused cells in the Calendar.
$kendo-calendar-navigation-width	Number	`5em`	`5em`
Description The width of the Calendar navigation.
$kendo-calendar-navigation-item-height	Number	`2em`	`2em`
Description The height of the items in the Calendar navigation.
$kendo-calendar-navigation-bg	String	`$kendo-calendar-header-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of the Calendar navigation.
$kendo-calendar-navigation-text	String	`$kendo-calendar-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Calendar navigation.
$kendo-calendar-navigation-border	String	`$kendo-calendar-header-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the Calendar navigation.
$kendo-calendar-navigation-hover-text	String	`$kendo-link-hover-text`	`var(--kendo-color-primary-hover, #ea5a51)`
Description The text color of the hovered items in the Calendar navigation.
$kendo-infinite-calendar-header-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the header in the Infinite Calendar.
$kendo-infinite-calendar-header-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the header in the Infinite Calendar.
$kendo-infinite-calendar-view-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the Calendar view in the Infinite Calendar.
$kendo-infinite-calendar-view-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical padding of the Calendar view in the Infinite Calendar.
$kendo-infinite-calendar-view-height	Number	`( $kendo-calendar-cell-size * 9 )`	`288px`
Description The height of the Calendar view in the Infinite Calendar.
$kendo-calendar-range-cell-border-radius	String	`k-border-radius(lg)`	`var(--kendo-border-radius-lg, 0.375rem)`
Description The border radius of the range cells in the Multiview Calendar.
$kendo-calendar-sm-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the small Calendar.
$kendo-calendar-sm-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the small Calendar.
$kendo-calendar-sm-cell-size	Number	`28px`	`28px`
Description The size of the cells in the small Calendar.
$kendo-calendar-sm-cell-padding-x	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The horizontal padding of the cells in the small Calendar.
$kendo-calendar-sm-cell-padding-y	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical padding of the cells in the small Calendar.
$kendo-calendar-md-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the medium Calendar.
$kendo-calendar-md-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the medium Calendar.
$kendo-calendar-md-cell-size	Number	`32px`	`32px`
Description The size of the cells in the medium Calendar.
$kendo-calendar-md-cell-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the cells in the medium Calendar.
$kendo-calendar-md-cell-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the cells in the medium Calendar.
$kendo-calendar-lg-font-size	String	`var( --kendo-font-size-lg, inherit )`	`var(--kendo-font-size-lg, inherit)`
Description The font size of the large Calendar.
$kendo-calendar-lg-line-height	String	`var( --kendo-line-height-lg, normal )`	`var(--kendo-line-height-lg, normal)`
Description The line height of the large Calendar.
$kendo-calendar-lg-cell-size	Number	`40px`	`40px`
Description The size of the cells in the large Calendar.
$kendo-calendar-lg-cell-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the cells in the large Calendar.
$kendo-calendar-lg-cell-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the cells in the large Calendar.
$kendo-calendar-sizes	Map	( sm: ( font-size: $kendo-calendar-sm-font-size, line-height: $kendo-calendar-sm-line-height, cell-size: $kendo-calendar-sm-cell-size, cell-padding-x: $kendo-calendar-sm-cell-padding-y, cell-padding-y: $kendo-calendar-sm-cell-padding-x ), md: ( font-size: $kendo-calendar-md-font-size, line-height: $kendo-calendar-md-line-height, cell-size: $kendo-calendar-md-cell-size, cell-padding-x: $kendo-calendar-md-cell-padding-y, cell-padding-y: $kendo-calendar-md-cell-padding-x ), lg: ( font-size: $kendo-calendar-lg-font-size, line-height: $kendo-calendar-lg-line-height, cell-size: $kendo-calendar-lg-cell-size, cell-padding-x: $kendo-calendar-lg-cell-padding-y, cell-padding-y: $kendo-calendar-lg-cell-padding-x ) )	(sm: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-size: 28px, cell-padding-x: var(--kendo-spacing-0\.5, 0.125rem), cell-padding-y: var(--kendo-spacing-0\.5, 0.125rem)), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-size: 32px, cell-padding-x: var(--kendo-spacing-1, 0.25rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem)), lg: (font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal), cell-size: 40px, cell-padding-x: var(--kendo-spacing-2, 0.5rem), cell-padding-y: var(--kendo-spacing-2, 0.5rem)))
Description The sizes Map of the Calendar.

Captcha

Name	Type	Default value	Computed value
$kendo-captcha-spacer	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacer of the Captcha.
$kendo-captcha-width	Number	`280px`	`280px`
Description The width of the Captcha.
$kendo-captcha-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Captcha.
$kendo-captcha-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Captcha.
$kendo-captcha-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Captcha.
$kendo-captcha-gap	String	`$kendo-captcha-spacer`	`var(--kendo-spacing-2, 0.5rem)`
Description The gap of the Captcha.
$kendo-captcha-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the Captcha.
$kendo-captcha-text	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The text color of the Captcha.
$kendo-captcha-border	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The border color of the Captcha.
$kendo-captcha-image-wrap-gap	String	`$kendo-captcha-spacer`	`var(--kendo-spacing-2, 0.5rem)`
Description The gap of the Captcha image wrapper.
$kendo-captcha-image-controls-gap	String	`$kendo-captcha-spacer`	`var(--kendo-spacing-2, 0.5rem)`
Description The gap of the Captcha image controls.
$kendo-captcha-validation-message-margin-top	Calculation	`calc( #{$kendo-captcha-spacer} / 2 )`	`calc(var(--kendo-spacing-2, 0.5rem) / 2)`
Description The top margin of the Captcha validation message.
$kendo-captcha-validation-message-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
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	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the Card.
$kendo-card-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
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	String	`k-border-radius(lg)`	`var(--kendo-border-radius-lg, 0.375rem)`
Description The border radius of the Card.
$kendo-card-inner-border-radius	Calculation	`calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} )`	`calc(var(--kendo-border-radius-lg, 0.375rem) - 1px)`
Description The inner border radius of the Card.
$kendo-card-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Card.
$kendo-card-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Card.
$kendo-card-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Card.
$kendo-card-deck-gap	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The spacing between the Cards in the Card deck.
$kendo-card-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the Card.
$kendo-card-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Card.
$kendo-card-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`$kendo-card-padding-x`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the Card header.
$kendo-card-header-padding-y	String	`$kendo-card-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
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	String	`$kendo-component-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Card header.
$kendo-card-header-border	String	`$kendo-component-header-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the Card header.
$kendo-card-body-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the Card body.
$kendo-card-body-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the Card body.
$kendo-card-footer-padding-x	String	`$kendo-card-padding-x`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the Card footer.
$kendo-card-footer-padding-y	String	`$kendo-card-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
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	String	`$kendo-component-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Card footer.
$kendo-card-footer-border	String	`$kendo-component-header-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the Card footer.
$kendo-card-title-margin-bottom	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The bottom margin of the Card title.
$kendo-card-title-font-size	String	`var( --kendo-font-size-lg, inherit )`	`var(--kendo-font-size-lg, inherit)`
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	String	`var( --kendo-font-weight-normal, normal )`	`var(--kendo-font-weight-normal, normal)`
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	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The bottom margin of the Card subtitle.
$kendo-card-subtitle-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
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	String	`var( --kendo-font-weight-normal, normal )`	`var(--kendo-font-weight-normal, normal)`
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	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #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	String	`$kendo-card-header-padding-x`	`var(--kendo-spacing-4, 1rem)`
Description The spacing between the Avatar and the text in the Card.
$kendo-card-actions-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Card actions.
$kendo-card-actions-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
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	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
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	String	`if($kendo-enable-color-system, k-color( series-a ), #ff6358)`	`var(--kendo-color-series-a, #ff6358)`
Description The first base series color and its light and dark shades.
$kendo-series-b	String	`if($kendo-enable-color-system, k-color( series-b ), #ffe162)`	`var(--kendo-color-series-b, #ffe162)`
Description The second base series color and its light and dark shades.
$kendo-series-c	String	`if($kendo-enable-color-system, k-color( series-c ), #4cd180)`	`var(--kendo-color-series-c, #4cd180)`
Description The third base series color and its light and dark shades.
$kendo-series-d	String	`if($kendo-enable-color-system, k-color( series-d ), #4b5ffa)`	`var(--kendo-color-series-d, #4b5ffa)`
Description The fourth base series color and its light and dark shades.
$kendo-series-e	String	`if($kendo-enable-color-system, k-color( series-e ), #ac58ff)`	`var(--kendo-color-series-e, #ac58ff)`
Description The fifth base series color and its light and dark shades.
$kendo-series-f	String	`if($kendo-enable-color-system, k-color( series-f ), #ff5892)`	`var(--kendo-color-series-f, #ff5892)`
Description The sixth base series color and its light and dark shades.
$kendo-series-1	String	`$kendo-series-a`	`var(--kendo-color-series-a, #ff6358)`
Description The series colors in order: base, light, dark, lighter, darker
$kendo-chart-major-lines	String	`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 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)`
Description The color of the Chart grid lines (major).
$kendo-chart-minor-lines	String	`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 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 4%, transparent)`
Description The color of the Chart grid lines (minor).

Chat

Name	Type	Default value	Computed value
$kendo-chat-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the Chat.
$kendo-chat-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Chat.
$kendo-chat-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Chat.
$kendo-chat-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Chat.
$kendo-chat-item-spacing-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal spacing between the items of the Chat.
$kendo-chat-item-spacing-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The vertical spacing between the items of the Chat.
$kendo-chat-message-list-padding-x	String	`$kendo-chat-padding-x`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the Chat message list.
$kendo-chat-message-list-padding-y	String	`$kendo-chat-padding-y`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the Chat message list.
$kendo-chat-message-list-spacing	String	`$kendo-chat-item-spacing-y`	`var(--kendo-spacing-4, 1rem)`
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	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #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	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the Chat bubble message.
$kendo-chat-bubble-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Chat bubble message.
$kendo-chat-bubble-spacing	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
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	String	`$kendo-chat-item-spacing-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing of the Chat Avatar.
$kendo-chat-toolbar-padding-x	String	`$kendo-toolbar-md-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Chat Toolbar.
$kendo-chat-toolbar-padding-y	String	`$kendo-toolbar-md-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Chat Toolbar.
$kendo-chat-toolbar-spacing	String	`$kendo-toolbar-md-spacing`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing of the Chat Toolbar.
$kendo-chat-toolbar-bg	String	`$kendo-toolbar-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of the Chat Toolbar.
$kendo-chat-toolbar-text	String	`$kendo-toolbar-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
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	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the Chat quick reply.
$kendo-chat-quick-reply-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Chat quick reply.
$kendo-chat-quick-reply-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
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	String	`$kendo-app-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of the Chat.
$kendo-chat-text	String	`$kendo-app-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Chat.
$kendo-chat-border	String	`$kendo-app-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the Chat.
$kendo-chat-bubble-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the Chat bubble.
$kendo-chat-bubble-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Chat bubble.
$kendo-chat-bubble-border	String	`$kendo-chat-bubble-bg`	`var(--kendo-color-surface-alt, #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	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the Chat alt bubble.
$kendo-chat-alt-bubble-text	String	`if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-chat-alt-bubble-bg ))`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the Chat alt bubble.
$kendo-chat-alt-bubble-border	String	`$kendo-chat-alt-bubble-bg`	`var(--kendo-color-primary, #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	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The text color of the Chat quick reply.
$kendo-chat-quick-reply-border	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The border color of the Chat quick reply.
$kendo-chat-quick-reply-hover-bg	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the hovered Chat quick reply.
$kendo-chat-quick-reply-hover-text	String	`$kendo-color-primary-contrast`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the hovered Chat quick reply.
$kendo-chat-quick-reply-hover-border	String	`$kendo-color-primary`	`var(--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	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The size of a small CheckBox.
$kendo-checkbox-md-size	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The size of a medium CheckBox.
$kendo-checkbox-lg-size	String	`k-spacing(5)`	`var(--kendo-spacing-5, 1.25rem)`
Description The size of a large CheckBox.
$kendo-checkbox-sm-glyph-size	String	`k-spacing(2.5)`	`var(--kendo-spacing-2\.5, 0.625rem)`
Description The glyph size of a small CheckBox.
$kendo-checkbox-md-glyph-size	String	`k-spacing(3.5)`	`var(--kendo-spacing-3\.5, 0.875rem)`
Description The glyph size of a medium CheckBox.
$kendo-checkbox-lg-glyph-size	String	`k-spacing(4.5)`	`var(--kendo-spacing-4\.5, 1.125rem)`
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	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the CheckBox.
$kendo-checkbox-text	Null	`null`	`null`
Description The text color of the CheckBox.
$kendo-checkbox-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the checked CheckBox.
$kendo-checkbox-checked-text	String	`if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg ))`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the checked CheckBox.
$kendo-checkbox-checked-border	String	`$kendo-checkbox-checked-bg`	`var(--kendo-color-primary, #ff6358)`
Description The border color of the checked CheckBox.
$kendo-checkbox-indeterminate-bg	String	`$kendo-checkbox-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-text	String	`$kendo-checkbox-checked-bg`	`var(--kendo-color-primary, #ff6358)`
Description The text color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-border	String	`$kendo-checkbox-border`	`var(--kendo-color-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 color-mix(in srgb, var(--kendo-color-primary, #ff6358) 30%, transparent)`
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	String	`$kendo-invalid-text`	`var(--kendo-color-error, #f31700)`
Description The text color of an invalid CheckBox.
$kendo-checkbox-invalid-border	String	`$kendo-invalid-border`	`var(--kendo-color-error, #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='var%28--kendo-color-on-primary, %23ffffff%29' 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='var%28--kendo-color-primary, %23ff6358%29' 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	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal margin of the CheckBox inside a label.
$kendo-checkbox-list-spacing	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The spacing between the items in a horizontal CheckBox list.
$kendo-checkbox-list-item-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal padding of the CheckBox list items.
$kendo-checkbox-list-item-padding-y	String	`$kendo-list-md-item-padding-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the CheckBox list items.
$kendo-checkbox-ripple-bg	String	`$kendo-checkbox-checked-bg`	`var(--kendo-color-primary, #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	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The spacing between the text and the icons of the Chip.
$kendo-chip-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the Chip.
$kendo-chip-sm-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the small Chip.
$kendo-chip-md-padding-x	String	`$kendo-chip-padding-x`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the medium Chip.
$kendo-chip-lg-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the large Chip.
$kendo-chip-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the Chip.
$kendo-chip-sm-padding-y	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical padding of the small Chip.
$kendo-chip-md-padding-y	String	`$kendo-chip-padding-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the medium Chip.
$kendo-chip-lg-padding-y	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the large Chip.
$kendo-chip-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Chip.
$kendo-chip-sm-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the small Chip.
$kendo-chip-md-font-size	String	`$kendo-chip-font-size`	`var(--kendo-font-size, inherit)`
Description The font size of the medium Chip.
$kendo-chip-lg-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
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} + calc( #{$kendo-chip-padding-y} * 2 ) + #{$kendo-chip-border-width * 2} )`	`calc(1em + var(--kendo-spacing-1, 0.25rem) * 2 + 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: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-0\.5, 0.125rem), font-size: var(--kendo-font-size, inherit), line-height: 1), md: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), font-size: var(--kendo-font-size, inherit), line-height: 1), lg: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1\.5, 0.375rem), font-size: var(--kendo-font-size, inherit), line-height: 1))`
Description The map with the sizes of the Chip.
$kendo-chip-base-bg	String	`if($kendo-enable-color-system, k-color( base-subtle ), $kendo-button-bg)`	`var(--kendo-color-base-subtle, #ebebeb)`
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": var(--kendo-color-base-subtle, #ebebeb), "error": var(--kendo-color-error, #f31700), "info": var(--kendo-color-info, #0058e9), "warning": var(--kendo-color-warning, #ffc000), "success": var(--kendo-color-success, #37b400))`
Description The theme colors map for the Chip.
$kendo-chip-solid-bg	String	`$kendo-chip-base-bg`	`var(--kendo-color-base-subtle, #ebebeb)`
Description The base background color of the solid Chip.
$kendo-chip-solid-text	String	`$kendo-button-text`	`var(--kendo-color-on-base, #3d3d3d)`
Description The base text color of the solid Chip.
$kendo-chip-solid-border	String	`$kendo-button-border`	`var(--kendo-color-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 color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)`
Description The base shadow of the solid Chip.
$kendo-chip-solid-gradient	Null	`$kendo-button-gradient`	`null`
Description The base gradient of the solid Chip.
$kendo-chip-solid-focus-bg	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	String	`if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-button-hover-bg)`	`var(--kendo-color-base-subtle-hover, #e0e0e0)`
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	String	`$kendo-button-active-bg`	`var(--kendo-color-base-active, #d6d6d6)`
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	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The base background color of the outline Chip.
$kendo-chip-outline-text	String	`$kendo-chip-solid-text`	`var(--kendo-color-on-base, #3d3d3d)`
Description The base text color of the outline Chip.
$kendo-chip-outline-border	String	`$kendo-chip-outline-text`	`var(--kendo-color-on-base, #3d3d3d)`
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 color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)`
Description The base shadow of the outline Chip.
$kendo-chip-outline-hover-bg	String	`$kendo-chip-outline-text`	`var(--kendo-color-on-base, #3d3d3d)`
Description The base background color of the hovered outline Chip.
$kendo-chip-outline-hover-text	String	`if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-chip-outline-hover-bg ))`	`var(--kendo-color-base, #f5f5f5)`
Description The base text color of the hovered outline Chip.
$kendo-chip-outline-selected-bg	String	`$kendo-chip-outline-hover-bg`	`var(--kendo-color-on-base, #3d3d3d)`
Description The base background color of the selected outline Chip.
$kendo-chip-outline-selected-text	String	`$kendo-chip-outline-hover-text`	`var(--kendo-color-base, #f5f5f5)`
Description The base text color of the selected outline Chip.
$kendo-chip-list-sizes	Map	`( sm: k-spacing(1), md: k-spacing(1), lg: k-spacing(1) )`	`(sm: var(--kendo-spacing-1, 0.25rem), md: var(--kendo-spacing-1, 0.25rem), lg: var(--kendo-spacing-1, 0.25rem))`
Description The sizes of the Chip list.

Cologradient

Name	Type	Default value	Computed value
$kendo-color-gradient-spacer	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
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	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the ColorGradient.
$kendo-color-gradient-padding-y	String	`$kendo-color-gradient-spacer`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the ColorGradient.
$kendo-color-gradient-padding-x	String	`$kendo-color-gradient-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the ColorGradient.
$kendo-color-gradient-gap	String	`$kendo-color-gradient-spacer`	`var(--kendo-spacing-3, 0.75rem)`
Description The spacing between the sections of the ColorGradient.
$kendo-color-gradient-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the ColorGradient.
$kendo-color-gradient-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the ColorGradient.
$kendo-color-gradient-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the ColorGradient.
$kendo-color-gradient-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the ColorGradient.
$kendo-color-gradient-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the ColorGradient.
$kendo-color-gradient-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the ColorGradient canvas.
$kendo-color-gradient-canvas-gap	String	`$kendo-color-gradient-spacer`	`var(--kendo-spacing-3, 0.75rem)`
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	Calculation	`calc( #{$kendo-color-gradient-spacer} / 1.5 )`	`calc(var(--kendo-spacing-3, 0.75rem) / 1.5)`
Description The spacing between the ColorGradient inputs.
$kendo-color-gradient-input-label-gap	Calculation	`calc( #{$kendo-color-gradient-spacer} / 3 )`	`calc(var(--kendo-spacing-3, 0.75rem) / 3)`
Description The spacing between the ColorGradient inputs and their labels.
$kendo-color-gradient-input-label-text	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #666666)`
Description The text color of the ColorGradient input labels.
$kendo-color-gradient-contrast-ratio-font-weight	String	`var( --kendo-font-weight-bold, normal )`	`var(--kendo-font-weight-bold, normal)`
Description The font weight of the ColorGradient contrast ratio text.
$kendo-color-gradient-contrast-spacer	Calculation	`calc( #{$kendo-color-gradient-spacer} / 1.5 )`	`calc(var(--kendo-spacing-3, 0.75rem) / 1.5)`
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`	`var(--kendo-color-primary, #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)`	`var(--kendo-color-on-primary, #ffffff)`
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`	`var(--kendo-color-secondary, #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`	`var(--kendo-color-tertiary, #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`	`var(--kendo-color-info, #0058e9)`
Description The color for informational messages and states.
$kendo-color-success	Color	`#37b400`	`var(--kendo-color-success, #37b400)`
Description The color for success messages and states.
$kendo-color-warning	Color	`#ffc000`	`var(--kendo-color-warning, #ffc000)`
Description The color for warning messages and states.
$kendo-color-error	Color	`#f31700`	`var(--kendo-color-error, #f31700)`
Description The color for error messages and states.
$kendo-color-dark	Color	`#424242`	`var(--kendo-color-dark, #3d3d3d)`
Description The dark color of the theme.
$kendo-color-light	Color	`#ebebeb`	`var(--kendo-color-light, #ebebeb)`
Description The light color of the theme.
$kendo-color-inverse	String	`if($kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark)`	`var(--kendo-color-dark, #3d3d3d)`
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	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
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	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the ColorEditor.
$kendo-color-editor-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the ColorEditor.
$kendo-color-editor-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the ColorEditor.
$kendo-color-editor-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the ColorEditor.
$kendo-color-editor-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the ColorEditor.
$kendo-color-editor-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the ColorEditor.
$kendo-color-editor-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`$kendo-color-editor-spacer`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the ColorEditor header.
$kendo-color-editor-header-padding-x	String	`$kendo-color-editor-header-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the ColorEditor header.
$kendo-color-editor-header-actions-gap	Calculation	`calc( #{$kendo-color-editor-spacer} / 1.5 )`	`calc(var(--kendo-spacing-3, 0.75rem) / 1.5)`
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	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The spacing between the colors in the ColorEditor preview.
$kendo-color-editor-views-padding-y	String	`$kendo-color-editor-spacer`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the ColorEditor views container.
$kendo-color-editor-views-padding-x	String	`$kendo-color-editor-views-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the ColorEditor views container.
$kendo-color-editor-views-gap	String	`$kendo-color-editor-spacer`	`var(--kendo-spacing-3, 0.75rem)`
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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the ColorPalette.
$kendo-color-palette-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
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	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The width of the ColorPalette tile.
$kendo-color-palette-tile-height	String	`$kendo-color-palette-tile-width`	`var(--kendo-spacing-6, 1.5rem)`
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	String	`$kendo-body-bg`	`var(--kendo-color-surface-alt, #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	String	`$kendo-body-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
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	String	`rgba(if($kendo-is-dark-theme, $kendo-color-white, $kendo-color-black), 0.08)`	`var(--kendo-color-border, 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	String	`$kendo-base-bg`	`var(--kendo-color-surface, #fafafa)`
Description Background color of the component header.
$kendo-component-header-text	String	`$kendo-base-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description Text color of the component header.
$kendo-component-header-border	String	`$kendo-base-border`	`var(--kendo-color-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	String	`$kendo-color-error`	`var(--kendo-color-error, #f31700)`
Description Text color of the invalid items.
$kendo-invalid-border	String	`$kendo-color-error`	`var(--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	String	`$kendo-component-header-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of the Dialog titlebar.
$kendo-dialog-titlebar-text	String	`$kendo-component-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
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	String	`$kendo-actions-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Dialog action buttons.
$kendo-dialog-buttongroup-padding-y	String	`$kendo-actions-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
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	String	`$kendo-actions-button-spacing`	`var(--kendo-spacing-2, 0.5rem)`
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": var(--kendo-color-primary, #ff6358), "light": var(--kendo-color-light, #ebebeb), "dark": var(--kendo-color-dark, #3d3d3d))`
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	String	`$kendo-base-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The color of the border around the DockManager component.
$kendo-dock-manager-pane-header-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
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	String	`$kendo-component-header-bg`	`var(--kendo-color-surface, #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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-size	String	`var( --kendo-font-size-lg, inherit )`	`var(--kendo-font-size-lg, inherit)`
Description The font size of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-line-height	String	`var( --kendo-line-height-sm, normal )`	`var(--kendo-line-height-sm, normal)`
Description The line height of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-weight	String	`var( --kendo-font-weight-normal, normal )`	`var(--kendo-font-weight-normal, normal)`
Description The font weight of the pane title in the DockManager component.
$kendo-dock-manager-pane-content-padding-x	String	`$kendo-dock-manager-pane-header-padding-x`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the pane content in the DockManager component.
$kendo-dock-manager-pane-content-padding-y	String	`$kendo-dock-manager-pane-header-padding-x`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the pane content in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-y	String	`k-spacing(3.5)`	`var(--kendo-spacing-3\.5, 0.875rem)`
Description The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
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	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
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	String	`$kendo-color-primary`	`var(--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	String	`$kendo-dock-indicator-text`	`var(--kendo-color-primary, #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	String	`$kendo-color-primary`	`var(--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	String	`k-border-radius(sm)`	`var(--kendo-border-radius-sm, 0.125rem)`
Description The border radius of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 ))`	`color-mix(in srgb, var(--kendo-color-primary, #ff6358) 16%, transparent)`
Description The background color of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The border color of the dropping area in the DockManager component.

Drawer

Name	Type	Default value	Computed value
$kendo-drawer-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the Drawer.
$kendo-drawer-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Drawer.
$kendo-drawer-border	String	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the Drawer.
$kendo-drawer-border-width	Number	`1px`	`1px`
Description The border width of the Drawer.
$kendo-drawer-content-padding-y	String	`$kendo-padding-md-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the Drawer content.
$kendo-drawer-scrollbar-width	Number	`7px`	`7px`
Description The width of the Drawer scrollbar.
$kendo-drawer-scrollbar-color	Color	`rgba(156, 156, 156, .7)`	`rgba(156, 156, 156, 0.7)`
Description The color of the Drawer scrollbar track.
$kendo-drawer-scrollbar-bg	Color	`#dedede`	`#dedede`
Description The background color of the Drawer scrollbar thumb.
$kendo-drawer-scrollbar-radius	Number	`20px`	`20px`
Description The border radius of the Drawer scrollbar.
$kendo-drawer-scrollbar-hover-color	Color	`rgba(156, 156, 156, 1)`	`rgb(156, 156, 156)`
Description The hover color of the Drawer scrollbar track.
$kendo-drawer-item-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the Drawer item.
$kendo-drawer-item-padding-y	String	`$kendo-padding-md-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Drawer item.
$kendo-drawer-item-font-size	Number	`16px`	`16px`
Description The font size of the Drawer item.
$kendo-drawer-item-level-padding-x	String	`$kendo-drawer-item-padding-x`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the Drawer item in each level.
$kendo-drawer-item-level-count	Number	`5`	`5`
Description The count of the Drawer item levels.
$kendo-drawer-icon-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal padding of the Drawer icon.
$kendo-drawer-icon-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the Drawer icon.
$kendo-drawer-mini-initial-width	Calculation	`calc(2 * #{$kendo-drawer-item-padding-x} + #{$kendo-icon-size})`	`calc(2 * var(--kendo-spacing-4, 1rem) + 16px)`
Description The initial width of the mini Drawer.
$kendo-drawer-hover-bg	String	`$kendo-hover-bg`	`var(--kendo-color-base-hover, #ebebeb)`
Description The background color of the hovered Drawer item.
$kendo-drawer-hover-text	String	`$kendo-hover-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the hovered Drawer item.
$kendo-drawer-focus-bg	String	`$kendo-drawer-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the focused Drawer item.
$kendo-drawer-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 Drawer item.
$kendo-drawer-selected-bg	String	`$kendo-selected-bg`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the selected Drawer item.
$kendo-drawer-selected-text	String	`$kendo-selected-text`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the selected Drawer item.
$kendo-drawer-selected-hover-bg	String	`$kendo-selected-hover-bg`	`var(--kendo-color-primary-hover, #ea5a51)`
Description The background color of the selected and hovered Drawer item.
$kendo-drawer-selected-hover-text	String	`$kendo-selected-hover-text`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the selected and hovered Drawer item.

Dropdowntree

Name	Type	Default value	Computed value
$kendo-dropdowntree-popup-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the DropdownTree popup
$kendo-dropdowntree-popup-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the DropdownTree popup

Dropzone

Name	Type	Default value	Computed value
$kendo-dropzone-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the DropZone.
$kendo-dropzone-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the DropZone.
$kendo-dropzone-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the DropZone.
$kendo-dropzone-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the DropZone.
$kendo-dropzone-bg	String	`$kendo-base-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of the DropZone.
$kendo-dropzone-text	String	`$kendo-base-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the DropZone.
$kendo-dropzone-border	String	`$kendo-base-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the DropZone.
$kendo-dropzone-icon-spacing	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The spacing below the DropZone icon.
$kendo-dropzone-icon-text	String	`if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 ))`	`var(--kendo-color-subtle, #666666)`
Description The text color of the DropZone icon.
$kendo-dropzone-icon-hover-text	String	`$kendo-color-primary`	`var(--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	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
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	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
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	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Еditor.
$kendo-editor-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Еditor.
$kendo-editor-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Еditor.
$kendo-editor-placeholder-text	String	`$kendo-input-placeholder-text`	`var(--kendo-color-subtle, #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	String	`$kendo-color-primary-contrast`	`var(--kendo-color-on-primary, #ffffff)`
Description The selected text color of the Editor.
$kendo-editor-selected-bg	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The selected background color of the Editor.
$kendo-editor-highlighted-bg	String	`if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix($kendo-color-primary, #ffffff, 20%))`	`var(--kendo-color-primary-subtle, #ffeceb)`
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	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the ExpansionPanel.
$kendo-expander-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the ExpansionPanel.
$kendo-expander-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The hine height of the ExpansionPanel.
$kendo-expander-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the ExpansionPanel.
$kendo-expander-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the ExpansionPanel.
$kendo-expander-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the ExpansionPanel header.
$kendo-expander-header-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the ExpansionPanel header.
$kendo-expander-header-text	String	`$kendo-expander-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
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	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The text color of the ExpansionPanel title.
$kendo-expander-header-sub-title-text	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #666666)`
Description The text color of the ExpansionPanel sub-title.
$kendo-expander-indicator-margin-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal margin of the ExpansionPanel indicator.
$kendo-expander-content-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the ExpansionPanel content.
$kendo-expander-content-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the ExpansionPanel content.

Filemanager

Name	Type	Default value	Computed value
$kendo-file-manager-spacer	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the FileManager.
$kendo-file-manager-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the FileManager.
$kendo-file-manager-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the FileManager.
$kendo-file-manager-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the FileManager.
$kendo-file-manager-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the FileManager.
$kendo-file-manager-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`$kendo-file-manager-spacer`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the FileManager Navigation.
$kendo-file-manager-navigation-padding-y	String	`$kendo-file-manager-spacer`	`var(--kendo-spacing-4, 1rem)`
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	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
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	String	`$kendo-toolbar-bg`	`var(--kendo-color-surface, #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	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the FileManager ListView item.
$kendo-file-manager-listview-item-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
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	String	`if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))`	`var(--kendo-color-subtle, #666666)`
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	String	`$kendo-file-manager-spacer`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the FileManager preview.
$kendo-file-manager-preview-padding-y	String	`$kendo-file-manager-spacer`	`var(--kendo-spacing-4, 1rem)`
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	String	`$kendo-file-manager-spacer`	`var(--kendo-spacing-4, 1rem)`
Description The spacing of the FileManager preview.
$kendo-file-manager-preview-column-gap	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
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	String	`if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))`	`var(--kendo-color-subtle, #666666)`
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	String	`$kendo-padding-md-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Filter.
$kendo-filter-padding-y	String	`$kendo-padding-md-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the Filter.
$kendo-filter-bottom-margin	String	`k-spacing(7.5)`	`var(--kendo-spacing-7\.5, 1.875rem)`
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	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The text color of the Filter preview field.
$kendo-filter-preview-operator-text	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #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	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the FAB.
$kendo-fab-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the FAB.
$kendo-fab-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the FAB.
$kendo-fab-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the FAB.
$kendo-fab-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the FAB.
$kendo-fab-sm-padding-x	Calculation	`calc( #{$kendo-fab-padding-x} / 2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description The horizontal padding of the small FAB.
$kendo-fab-md-padding-x	String	`$kendo-fab-padding-x`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the medium FAB.
$kendo-fab-lg-padding-x	Calculation	`calc( #{$kendo-fab-padding-x} * 1.5 )`	`calc(var(--kendo-spacing-4, 1rem) * 1.5)`
Description The horizontal padding of the large FAB.
$kendo-fab-padding-y	String	`$kendo-fab-padding-x`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the FAB.
$kendo-fab-sm-padding-y	Calculation	`calc( #{$kendo-fab-padding-y} / 2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description The vertical padding of the small FAB.
$kendo-fab-md-padding-y	String	`$kendo-fab-padding-y`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the medium FAB.
$kendo-fab-lg-padding-y	Calculation	`calc( #{$kendo-fab-padding-y} * 1.5 )`	`calc(var(--kendo-spacing-4, 1rem) * 1.5)`
Description The vertical padding of the large FAB.
$kendo-fab-icon-padding-x	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The horizontal padding of the FAB icon.
$kendo-fab-icon-padding-y	String	`$kendo-fab-icon-padding-x`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical padding of the FAB icon.
$kendo-fab-icon-spacing	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The spacing of the FAB icon.
$kendo-fab-items-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal padding of the FAB items.
$kendo-fab-items-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the FAB items.
$kendo-fab-item-text-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the FAB item text.
$kendo-fab-item-text-padding-y	String	`$kendo-fab-item-text-padding-x`	`var(--kendo-spacing-1, 0.25rem)`
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	String	`var( --kendo-font-size-xs, inherit )`	`var(--kendo-font-size-xs, inherit)`
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	Calculation	`calc( #{k-spacing(2)} + #{$kendo-fab-icon-padding-x} )`	`calc(var(--kendo-spacing-2, 0.5rem) + var(--kendo-spacing-0\.5, 0.125rem))`
Description The horizontal padding of the FAB item icon.
$kendo-fab-item-icon-padding-y	Calculation	`$kendo-fab-item-icon-padding-x`	`calc(var(--kendo-spacing-2, 0.5rem) + var(--kendo-spacing-0\.5, 0.125rem))`
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": var(--kendo-color-primary, #ff6358), "secondary": var(--kendo-color-secondary, #666666), "tertiary": var(--kendo-color-tertiary, #03a9f4), "info": var(--kendo-color-info, #0058e9), "success": var(--kendo-color-success, #37b400), "warning": var(--kendo-color-warning, #ffc000), "error": var(--kendo-color-error, #f31700), "dark": var(--kendo-color-dark, #3d3d3d), "light": var(--kendo-color-light, #ebebeb), "inverse": var(--kendo-color-dark, #3d3d3d))`
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: calc(var(--kendo-spacing-4, 1rem) / 2), padding-y: calc(var(--kendo-spacing-4, 1rem) / 2)), md: (padding-x: var(--kendo-spacing-4, 1rem), padding-y: var(--kendo-spacing-4, 1rem)), lg: (padding-x: calc(var(--kendo-spacing-4, 1rem) * 1.5), padding-y: calc(var(--kendo-spacing-4, 1rem) * 1.5)))`
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	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The outline width of the FAB.
$kendo-fab-item-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The base text color of the FAB item.
$kendo-fab-item-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The base background color of the FAB item.
$kendo-fab-item-border	String	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The base border color of the FAB item.
$kendo-fab-item-icon-text	String	`$kendo-button-text`	`var(--kendo-color-on-base, #3d3d3d)`
Description The base text color of the FAB item icon.
$kendo-fab-item-icon-bg	String	`$kendo-button-bg`	`var(--kendo-color-base, #f5f5f5)`
Description The base background color of the FAB item icon.
$kendo-fab-item-icon-border	String	`$kendo-button-border`	`var(--kendo-color-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	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
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	String	`$kendo-input-font-size`	`var(--kendo-font-size, inherit)`
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	String	`$kendo-input-line-height`	`var(--kendo-line-height, normal)`
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(var(--kendo-line-height, normal) * var(--kendo-font-size, inherit))`
Description The height of the Floating Label.
$kendo-floating-label-offset-x	Calculation	`calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )`	`calc(var(--kendo-spacing-2, 0.5rem) + 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(var(--kendo-line-height, normal) * var(--kendo-font-size, inherit)) + 1px + var(--kendo-spacing-1, 0.25rem))`
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	Calculation	`calc( #{$kendo-padding-md-x} * 2 )`	`calc(var(--kendo-spacing-2, 0.5rem) * 2)`
Description The padding of the inline Form.
$kendo-form-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Form.
$kendo-form-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Form.
$kendo-form-line-height-em	Calculation	`calc( #{$kendo-form-line-height} * 1em )`	`calc(var(--kendo-line-height, normal) * 1em)`
Description The line height of the Form in em units.
$kendo-form-sm-line-height	String	`var( --kendo-line-height-sm, normal )`	`var(--kendo-line-height-sm, normal)`
Description The line height of the small Form.
$kendo-form-lg-line-height	String	`var( --kendo-line-height-lg, normal )`	`var(--kendo-line-height-lg, normal)`
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	String	`k-spacing(0)`	`var(--kendo-spacing-0, 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	String	`k-spacing(0)`	`var(--kendo-spacing-0, 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	String	`$kendo-component-border`	`var(--kendo-color-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	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The bottom margin of the Form label.
$kendo-form-button-margin-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
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	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The top margin of the Form hint.
$kendo-form-sm-rows-spacing	String	`k-spacing(2.5)`	`var(--kendo-spacing-2\.5, 0.625rem)`
Description The row spacing of the small Form.
$kendo-form-md-rows-spacing	String	`k-spacing(3.5)`	`var(--kendo-spacing-3\.5, 0.875rem)`
Description The row spacing of the medium Form.
$kendo-form-lg-rows-spacing	String	`k-spacing(4.5)`	`var(--kendo-spacing-4\.5, 1.125rem)`
Description The row spacing of the large Form.
$kendo-form-separator-margin	List	`$kendo-form-md-rows-spacing 0 0`	`var(--kendo-spacing-3\.5, 0.875rem) 0 0`
Description The margin of the Form separator.
$kendo-form-separator-border-color	String	`$kendo-form-legend-border-color`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the Form separator.
$kendo-horizontal-form-label-padding-top	Calculation	`calc( #{k-spacing(2.5)} / 2 )`	`calc(var(--kendo-spacing-2\.5, 0.625rem) / 2)`
Description The top padding of the label in the horizontal Form.
$kendo-horizontal-form-label-margin-x	String	`k-spacing(2.5)`	`var(--kendo-spacing-2\.5, 0.625rem)`
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% - var(--kendo-spacing-2\.5, 0.625rem))`
Description The maximum width of the field wrap in the horizontal Form.
$kendo-inline-form-element-width	Number	`25%`	`25%`
Description The width of the inline Form element.
$kendo-forms-invalid-color	String	`$kendo-color-error`	`var(--kendo-color-error, #f31700)`
Description The invalid text color of the Form.
$kendo-label-optional-margin-x	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
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	String	`k-spacing(7.5)`	`var(--kendo-spacing-7\.5, 1.875rem)`
Description The margin of the Form fieldset.
$kendo-fieldset-font-size	Calculation	`$kendo-h4-font-size`	`calc(var(--kendo-font-size, inherit) * 2)`
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	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 ))`	`var(--kendo-color-on-app-surface, #3d3d3d)`
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: var(--kendo-spacing-2\.5, 0.625rem)), md: (form-rows-spacing: var(--kendo-spacing-3\.5, 0.875rem)), lg: (form-rows-spacing: var(--kendo-spacing-4\.5, 1.125rem)))`
Description The sizes map for the Form.

Gantt

Name	Type	Default value	Computed value
$kendo-gantt-border-width	Number	`1px`	`1px`
Description The border width of the Gantt.
$kendo-gantt-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Gantt.
$kendo-gantt-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Gantt.
$kendo-gantt-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Gantt.
$kendo-gantt-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the Gantt.
$kendo-gantt-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Gantt.
$kendo-gantt-border	String	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the Gantt.
$kendo-gantt-treelist-bg	Null	`null`	`null`
Description The background color of the Gantt TreeList.
$kendo-gantt-treelist-text	Null	`null`	`null`
Description The text color of the Gantt TreeList.
$kendo-gantt-treelist-border	Null	`null`	`null`
Description The border color of the Gantt TreeList.
$kendo-gantt-nonwork-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 3%, transparent), rgba( k-contrast-legacy( $kendo-gantt-bg ), .025 ))`	`color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 3%, transparent)`
Description The background color of the Gantt non-working days.
$kendo-gantt-nonwork-text	Null	`null`	`null`
Description The text color of the Gantt non-working days.
$kendo-gantt-nonwork-border	Null	`null`	`null`
Description The border color of the Gantt non-working days.
$kendo-gantt-line-size	Number	`2px`	`2px`
Description The size of the Gantt connecting lines.
$kendo-gantt-line-fill	String	`if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $kendo-gantt-bg ))`	`var(--kendo-color-on-base, #3d3d3d)`
Description The background fill color of the Gantt connecting lines.
$kendo-gantt-line-selected-fill	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The background fill of the selected Gantt connecting lines.
$kendo-gantt-dot-size	Number	`8px`	`8px`
Description The size of the Gantt task dot.
$kendo-gantt-dot-spacing	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The spacing of the Gantt task dot.
$kendo-gantt-dot-bg	String	`$kendo-gantt-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The background color of the Gantt task dot.
$kendo-gantt-dot-border	Null	`null`	`null`
Description The border color of the Gantt task dot.
$kendo-gantt-dot-hover-bg	String	`$kendo-gantt-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the hovered Gantt task dot.
$kendo-gantt-dot-hover-border	String	`$kendo-gantt-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The border color of the hovered Gantt task dot.
$kendo-gantt-milestone-bg	String	`$kendo-gantt-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The background color of the Gantt milestone.
$kendo-gantt-milestone-border	String	`$kendo-gantt-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the Gantt milestone.
$kendo-gantt-milestone-selected-bg	String	`$kendo-selected-bg`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the selected Gantt milestone.
$kendo-gantt-milestone-selected-border	String	`$kendo-selected-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the selected Gantt milestone.
$kendo-gantt-summary-bg	String	`if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 1 ))`	`var(--kendo-color-subtle, #666666)`
Description The background color of the Gantt summary.
$kendo-gantt-summary-progress-bg	String	`if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-gantt-text, 5 ))`	`var(--kendo-color-on-base, #3d3d3d)`
Description The background color of the Gantt summary progress.
$kendo-gantt-summary-selected-bg	String	`if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 ))`	`var(--kendo-color-primary-subtle-active, #ffc8c4)`
Description The background color of the selected Gantt summary.
$kendo-gantt-summary-progress-selected-bg	String	`$kendo-selected-bg`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the selected Gantt summary progress.
$kendo-gantt-task-border-width	Number	`0px`	`0px`
Description The border width of the Gantt task.
$kendo-gantt-task-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Gantt task.
$kendo-gantt-task-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the Gantt task.
$kendo-gantt-task-bg	String	`if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 2 ))`	`var(--kendo-color-subtle, #666666)`
Description The background color of the Gantt task.
$kendo-gantt-task-text	String	`if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-gantt-text ))`	`var(--kendo-color-base, #f5f5f5)`
Description The text color of the Gantt task.
$kendo-gantt-task-border	Null	`null`	`null`
Description The border color of the Gantt task.
$kendo-gantt-task-progress-bg	String	`$kendo-gantt-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The background color of the Gantt task progress.
$kendo-gantt-task-selected-bg	String	`if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 ))`	`var(--kendo-color-primary-subtle-active, #ffc8c4)`
Description The background color of selected the Gantt task.
$kendo-gantt-task-selected-text	String	`$kendo-selected-text`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the selected Gantt task.
$kendo-gantt-task-selected-border	Null	`null`	`null`
Description The border color of the selected Gantt task.
$kendo-gantt-task-progress-selected-bg	String	`$kendo-selected-bg`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the selected Gantt task progress.
$kendo-gantt-planned-margin-y	Number	`.35em`	`0.35em`
Description The vertical margin of the Gantt task planned line.
$kendo-gantt-planned-border-width	Number	`2px`	`2px`
Description The border width of the Gantt task planned line.
$kendo-gantt-planned-line-height	Number	`.75em`	`0.75em`
Description The line height of the Gantt task planned line.
$kendo-gantt-planned-dependency-margin-y	Number	`.55em`	`0.55em`
Description The vertical margin of the Gantt planned dependencies.
$kendo-gantt-planned-moment-width	Number	`6px`	`6px`
Description The default width of the Gantt planned line dot.
$kendo-gantt-planned-moment-height	Number	`$kendo-gantt-planned-moment-width`	`6px`
Description The default height of the Gantt planned line dot.
$kendo-gantt-planned-moment-border-radius	Calculation	`calc( ( #{$kendo-gantt-planned-border-width * 2} + #{$kendo-gantt-planned-moment-width} ) / 2 )`	`calc((4px + 6px) / 2)`
Description The border radius of the Gantt planned line dot.
$kendo-gantt-planned-moment-left-margin-x	Calculation	`calc( #{k-math-div( $kendo-gantt-planned-border-width, 2 )} - #{$kendo-gantt-planned-moment-border-radius} )`	`calc(1px - calc((4px + 6px) / 2))`
Description The horizontal margin of the Gantt planned line dot.
$kendo-gantt-planned-milestone-moment-margin-x	Number	`k-math-div( $kendo-gantt-planned-moment-width, 2 )`	`3px`
Description The horizontal margin of the Gantt milestone planned line dot.
$kendo-gantt-planned-duration-height	Number	`$kendo-gantt-planned-border-width`	`2px`
Description The default height of the Gantt planned line.
$kendo-gantt-planned-duration-hover-height	Calculation	`calc( #{$kendo-gantt-planned-border-width} + 1px )`	`calc(2px + 1px)`
Description The height of the hovered Gantt planned line.
$kendo-gantt-planned-single-drag-hint-top	Number	`0`	`0`
Description The top position of the Gantt drag hint.
$kendo-gantt-planned-summary-drag-hint-top	Number	`.5em`	`0.5em`
Description The top position of the Gantt summary drag hint.
$kendo-gantt-planned-milestone-drag-hint-top	Number	`.3em`	`0.3em`
Description The top position of the Gantt planned milestone drag hint.
$kendo-gantt-rtl-milestone-wrap-margin-x	Number	`-2.4em`	`-2.4em`
Description The horizontal margin of the Gantt milestone wrap.
$kendo-gantt-rtl-milestone-planned-moment-margin-x	Number	`.2em`	`0.2em`
Description The horizontal margin of the Gantt milestone line dot.
$kendo-gantt-rtl-milestone-dot-start-margin-x	Number	`-.1em`	`-0.1em`
Description The horizontal margin of the Gantt milestone task dot.
$kendo-gantt-planned-offset-resize-handler-margin-x	Number	`1.4em`	`1.4em`
Description The horizontal offset of the Gantt delayed task resize handler.
$kendo-gantt-planned-bg	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the Gantt planned Tooltip.
$kendo-gantt-planned-border	String	`$kendo-gantt-planned-bg`	`var(--kendo-color-primary, #ff6358)`
Description The border color of the Gantt planned Tooltip.
$kendo-gantt-delayed-bg	String	`$kendo-color-error`	`var(--kendo-color-error, #f31700)`
Description The background color of the Gantt delayed task.
$kendo-gantt-delayed-bg-lighter	String	`if($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint($kendo-gantt-delayed-bg, 5))`	`var(--kendo-color-error-emphasis, #f76f60)`
Description The complement background color of the Gantt delayed task.
$kendo-gantt-advanced-bg	String	`$kendo-color-success`	`var(--kendo-color-success, #37b400)`
Description The background color of the Gantt advanced task.
$kendo-gantt-advanced-bg-lighter	String	`if($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint($kendo-gantt-advanced-bg, 5))`	`var(--kendo-color-success-emphasis, #81d15f)`
Description The complement background color of the Gantt advanced task.
$kendo-gantt-action-on-offset-text	Color	`#000000`	`#000000`
Description The text color of the Gantt delayed task action.
$kendo-gantt-offset-resize-handler-top	Number	`50%`	`50%`
Description The top position of the Gantt delayed task resize handler.
$kendo-gantt-validation-tooltip-width	Number	`200px`	`200px`
Description The default width of the Gantt validation Tooltip.
$kendo-gantt-validation-tooltip-label-width	Number	`50px`	`50px`
Description The default width of the Gantt validation Tooltip label.
$kendo-gantt-validation-tooltip-border	Color	`#656565`	`#656565`
Description The border color of the Gantt validation Tooltip.
$kendo-gantt-validation-tooltip-valid-border	String	`$kendo-color-success`	`var(--kendo-color-success, #37b400)`
Description The border color of the valid Gantt validation Tooltip.
$kendo-gantt-validation-tooltip-invalid-border	String	`$kendo-color-error`	`var(--kendo-color-error, #f31700)`
Description The border color of the invalid Gantt validation Tooltip.

Grid

Name	Type	Default value	Computed value
$kendo-grid-padding-x	String	`$kendo-table-md-cell-padding-x`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the Grid.
$kendo-grid-padding-y	String	`$kendo-table-md-cell-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Grid.
$kendo-grid-header-padding-x	String	`$kendo-grid-padding-x`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the Grid header.
$kendo-grid-header-padding-y	String	`$kendo-grid-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Grid header.
$kendo-grid-grouping-header-padding-x	String	`$kendo-grid-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Grid grouping header.
$kendo-grid-grouping-header-padding-y	String	`$kendo-grid-grouping-header-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Grid grouping header.
$kendo-grid-cell-padding-x	String	`$kendo-grid-padding-x`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the Grid cell.
$kendo-grid-cell-padding-y	String	`$kendo-grid-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Grid cell.
$kendo-grid-filter-cell-padding-x	String	`$kendo-grid-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Grid filter cell.
$kendo-grid-filter-cell-padding-y	String	`$kendo-grid-filter-cell-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Grid filter cell.
$kendo-grid-edit-cell-padding-x	String	`$kendo-grid-cell-padding-x`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the Grid edit cell.
$kendo-grid-edit-cell-padding-y	Calculation	`calc( #{k-spacing(1.5)} / 2 )`	`calc(var(--kendo-spacing-1\.5, 0.375rem) / 2)`
Description The vertical padding of the Grid filter cell.
$kendo-grid-bg	String	`$kendo-table-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the Grid.
$kendo-grid-text	String	`$kendo-table-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Grid.
$kendo-grid-border	String	`$kendo-table-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the Grid.
$kendo-grid-header-bg	String	`$kendo-table-header-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of Grid header.
$kendo-grid-header-text	String	`$kendo-table-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of Grid header.
$kendo-grid-header-border	String	`$kendo-table-header-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of Grid header.
$kendo-grid-header-gradient	Null	`$kendo-table-header-gradient`	`null`
Description The background gradient of Grid header.
$kendo-grid-footer-bg	String	`$kendo-grid-header-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of Grid footer.
$kendo-grid-footer-text	String	`$kendo-grid-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of Grid footer.
$kendo-grid-footer-border	String	`$kendo-grid-header-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of Grid footer.
$kendo-grid-alt-bg	String	`$kendo-table-alt-row-bg`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 5%, transparent)`
Description The background color of the Grid alternating rows.
$kendo-grid-alt-text	Null	`$kendo-table-alt-row-text`	`null`
Description The text color of the Grid alternating rows.
$kendo-grid-alt-border	Null	`$kendo-table-alt-row-border`	`null`
Description The border color of the Grid alternating rows.
$kendo-grid-hover-bg	String	`$kendo-table-hover-bg`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 11%, transparent)`
Description The background color of hovered Grid rows.
$kendo-grid-hover-text	Null	`$kendo-table-hover-text`	`null`
Description The text color of hovered Grid rows.
$kendo-grid-hover-border	Null	`$kendo-table-hover-border`	`null`
Description The border color of hovered Grid rows.
$kendo-grid-selected-bg	String	`$kendo-table-selected-bg`	`color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)`
Description The background color of selected Grid rows.
$kendo-grid-selected-text	Null	`$kendo-table-selected-text`	`null`
Description The text color of selected Grid rows.
$kendo-grid-selected-border	Null	`$kendo-table-selected-border`	`null`
Description The border color of selected Grid rows.
$kendo-grid-selection-aggregates-bg	String	`$kendo-grid-header-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of the Grid selection aggregates container.
$kendo-grid-selection-aggregates-text	String	`$kendo-grid-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Grid selection aggregates container.
$kendo-grid-selection-aggregates-border	String	`$kendo-grid-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the Grid selection aggregates container.
$kendo-grid-selection-aggregates-border-width	Number	`$kendo-grid-border-width`	`1px`
Description The border width of the Grid selection aggregates container.
$kendo-grid-selection-aggregates-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing between the selection aggregates items.
$kendo-grid-selection-aggregates-line-height	String	`$kendo-grid-line-height`	`var(--kendo-line-height, normal)`
Description The line height of the Grid selection aggregates container.
$kendo-grid-selection-aggregates-font-weight	String	`var( --kendo-font-weight-bold, normal )`	`var(--kendo-font-weight-bold, normal)`
Description The font weight of the Grid selection aggregates container.
$kendo-grid-row-resizer-hover-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .12 ))`	`color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 20%, transparent)`
Description The background color of the Grid row resize indicator.
$kendo-grid-row-resizer-active-bg	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the active Grid row resize indicator.
$kendo-grid-row-resizer-height	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The 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	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Input components.
$kendo-input-sm-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the small Input components.
$kendo-input-md-padding-x	String	`$kendo-input-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the medium Input components.
$kendo-input-lg-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the large Input components.
$kendo-input-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the Input components.
$kendo-input-sm-padding-y	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical padding of the small Input components.
$kendo-input-md-padding-y	String	`$kendo-input-padding-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the medium Input components.
$kendo-input-lg-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the large Input components.
$kendo-input-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Input components.
$kendo-input-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Input components.
$kendo-input-sm-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the small Input components.
$kendo-input-md-font-size	String	`$kendo-input-font-size`	`var(--kendo-font-size, inherit)`
Description The font size of the medium Input components.
$kendo-input-lg-font-size	String	`var( --kendo-font-size-lg, inherit )`	`var(--kendo-font-size-lg, inherit)`
Description The font size of the large Input components.
$kendo-input-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Input components.
$kendo-input-sm-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the small Input components.
$kendo-input-md-line-height	String	`$kendo-input-line-height`	`var(--kendo-line-height, normal)`
Description The line height of the medium Input components.
$kendo-input-lg-line-height	String	`var( --kendo-line-height-lg, normal )`	`var(--kendo-line-height-lg, normal)`
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: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-0\.5, 0.125rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), button-padding-x: var(--kendo-spacing-0\.5, 0.125rem), button-padding-y: var(--kendo-spacing-0\.5, 0.125rem)), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-1, 0.25rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), button-padding-x: var(--kendo-spacing-1, 0.25rem), button-padding-y: var(--kendo-spacing-1, 0.25rem)), lg: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-2, 0.5rem), font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal), button-padding-x: var(--kendo-spacing-2, 0.5rem), button-padding-y: var(--kendo-spacing-2, 0.5rem)))
Description The sizes map for the Input components.
$kendo-input-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the Input components.
$kendo-input-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Input components.
$kendo-input-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-input-border, .16 ))`	`var(--kendo-color-border-alt, 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	String	`$kendo-input-hover-border`	`var(--kendo-color-border-alt, 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 color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)`
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	String	`$kendo-input-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the outline Input components.
$kendo-input-outline-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-button-text, .5))`	`color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent)`
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	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 80%, transparent), rgba( $kendo-button-text, .8))`	`color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 80%, transparent)`
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 color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)`
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	String	`$kendo-input-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the flat Input components.
$kendo-input-flat-border	String	`$kendo-input-border`	`var(--kendo-color-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	String	`$kendo-input-hover-border`	`var(--kendo-color-border-alt, 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 color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)`
Description The shadow of the flat focused Input components.
$kendo-input-placeholder-text	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #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	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical margin of the clear value icon.
$kendo-input-values-margin-x	String	`$kendo-input-values-margin-y`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The horizontal margin of the clear value icon.
$kendo-input-button-width	Calculation	`$kendo-button-inner-calc-size`	`calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2)`
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(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2)`
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	String	`$kendo-input-border`	`var(--kendo-color-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	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #666666)`
Description The text color of the Input prefix.
$kendo-input-suffix-text	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #666666)`
Description The text color of the Input suffix.
$kendo-input-prefix-text	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #666666)`
Description The text color of the Input prefix.
$kendo-input-suffix-text	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #666666)`
Description The text color of the Input suffix.
$kendo-input-invalid-border	String	`$kendo-invalid-border`	`var(--kendo-color-error, #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	`var( --kendo-font-family, inherit )`	`var(--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	String	`var( --kendo-font-weight-bold, normal )`	`var(--kendo-font-weight-bold, normal)`
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	String	`var( --kendo-font-weight-bold, normal )`	`var(--kendo-font-weight-bold, normal)`
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: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-0\.5, 0.125rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-0\.5, 0.125rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-0\.5, 0.125rem), group-item-font-size: null, group-item-line-height: null), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-1, 0.25rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-1, 0.25rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-1, 0.25rem), group-item-font-size: null, group-item-line-height: null), lg: (font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-1\.5, 0.375rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-2, 0.5rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-1\.5, 0.375rem), group-item-font-size: null, group-item-line-height: null))
Description The map with the sizes of the List.
$kendo-list-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the List component.
$kendo-list-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the List component.
$kendo-list-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`$kendo-hover-bg`	`var(--kendo-color-base-hover, #ebebeb)`
Description The background color of the hovered List items.
$kendo-list-item-hover-text	String	`$kendo-hover-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
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	String	`$kendo-selected-bg`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the selected List items.
$kendo-list-item-selected-text	String	`$kendo-selected-text`	`var(--kendo-color-on-primary, #ffffff)`
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	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #666666)`
Description The color of the 'No Data' text.
$kendo-list-option-label-text	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #666666)`
Description The color of the 'Option Label' text.

Listbox

Name	Type	Default value	Computed value
$kendo-listbox-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing between the ListBox elements.
$kendo-listbox-button-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the ListBox.
$kendo-listbox-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the ListBox.
$kendo-listbox-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the ListBox.
$kendo-listbox-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the ListBox.
$kendo-listbox-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the ListBox.
$kendo-listbox-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the ListView.
$kendo-listview-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the ListView.
$kendo-listview-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the ListView.
$kendo-listview-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the ListView.
$kendo-listview-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the ListView.
$kendo-listview-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the ListView.
$kendo-listview-border	String	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the ListView.
$kendo-listview-item-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the ListView items.
$kendo-listview-item-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
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	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`	`color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)`
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	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The size of the small Loader segment.
$kendo-loader-md-segment-size	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The size of the medium Loader segment.
$kendo-loader-lg-segment-size	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The size of the large Loader segment.
$kendo-loader-sm-padding	Calculation	`calc( #{$kendo-loader-sm-segment-size} / 2 )`	`calc(var(--kendo-spacing-1, 0.25rem) / 2)`
Description The padding of the small Loader.
$kendo-loader-md-padding	Calculation	`calc( #{$kendo-loader-md-segment-size} / 2 )`	`calc(var(--kendo-spacing-2, 0.5rem) / 2)`
Description The padding of the medium Loader.
$kendo-loader-lg-padding	Calculation	`calc( #{$kendo-loader-lg-segment-size} / 2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description The padding of the large Loader.
$kendo-loader-sm-spinner-3-width	Calculation	`calc( #{$kendo-loader-sm-segment-size} * 4 )`	`calc(var(--kendo-spacing-1, 0.25rem) * 4)`
Description The width of the small spinner-3 Loader.
$kendo-loader-md-spinner-3-width	Calculation	`calc( #{$kendo-loader-md-segment-size} * 4 )`	`calc(var(--kendo-spacing-2, 0.5rem) * 4)`
Description The width of the medium spinner-3 Loader.
$kendo-loader-lg-spinner-3-width	Calculation	`calc( #{$kendo-loader-lg-segment-size} * 4 )`	`calc(var(--kendo-spacing-4, 1rem) * 4)`
Description The width of the large spinner-3 Loader.
$kendo-loader-sm-spinner-3-height	Calculation	`calc( #{$kendo-loader-sm-spinner-3-width} * #{$equilateral-height} )`	`calc(calc(var(--kendo-spacing-1, 0.25rem) * 4) * 0.8660254038)`
Description The height of the small spinner-3 Loader.
$kendo-loader-md-spinner-3-height	Calculation	`calc( #{$kendo-loader-md-spinner-3-width} * #{$equilateral-height} )`	`calc(calc(var(--kendo-spacing-2, 0.5rem) * 4) * 0.8660254038)`
Description The height of the medium spinner-3 Loader.
$kendo-loader-lg-spinner-3-height	Calculation	`calc( #{$kendo-loader-lg-spinner-3-width} * #{$equilateral-height} )`	`calc(calc(var(--kendo-spacing-4, 1rem) * 4) * 0.8660254038)`
Description The height of the large spinner-3 Loader.
$kendo-loader-sm-spinner-4-width	Calculation	`calc( #{$kendo-loader-sm-segment-size} * 4 )`	`calc(var(--kendo-spacing-1, 0.25rem) * 4)`
Description The width of the small spinner-4 Loader.
$kendo-loader-md-spinner-4-width	Calculation	`calc( #{$kendo-loader-md-segment-size} * 4 )`	`calc(var(--kendo-spacing-2, 0.5rem) * 4)`
Description The width of the medium spinner-4 Loader.
$kendo-loader-lg-spinner-4-width	Calculation	`calc( #{$kendo-loader-lg-segment-size} * 4 )`	`calc(var(--kendo-spacing-4, 1rem) * 4)`
Description The width of the large spinner-4 Loader.
$kendo-loader-sm-spinner-4-height	Calculation	`$kendo-loader-sm-spinner-4-width`	`calc(var(--kendo-spacing-1, 0.25rem) * 4)`
Description The height of the small spinner-4 Loader.
$kendo-loader-md-spinner-4-height	Calculation	`$kendo-loader-md-spinner-4-width`	`calc(var(--kendo-spacing-2, 0.5rem) * 4)`
Description The height of the medium spinner-4 Loader.
$kendo-loader-lg-spinner-4-height	Calculation	`$kendo-loader-lg-spinner-4-width`	`calc(var(--kendo-spacing-4, 1rem) * 4)`
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	String	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the container panel.
$kendo-loader-container-panel-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
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	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The padding of the small Loader container.
$kendo-loader-md-container-padding	String	`k-spacing(5)`	`var(--kendo-spacing-5, 1.25rem)`
Description The padding of the medium Loader container.
$kendo-loader-lg-container-padding	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The padding of the large Loader container.
$kendo-loader-sm-container-gap	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The gap of the small Loader container.
$kendo-loader-md-container-gap	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The gap of the medium Loader container.
$kendo-loader-lg-container-gap	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The gap of the large Loader container.
$kendo-loader-sm-container-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the small Loader container.
$kendo-loader-md-container-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the medium Loader container.
$kendo-loader-lg-container-font-size	String	`var( --kendo-font-size-lg, inherit )`	`var(--kendo-font-size-lg, inherit)`
Description The font size of the large Loader container.

Loading

Name	Type	Default value	Computed value
$kendo-loading-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #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	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description Font sizes of the menu popup.
$kendo-menu-popup-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description Line heights used along with $kendo-font-size.
$kendo-menu-popup-bg	String	`$kendo-popup-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background of the menu popup.
$kendo-menu-popup-text	String	`$kendo-popup-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the menu popup.
$kendo-menu-popup-border	String	`$kendo-popup-border`	`var(--kendo-color-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	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Horizontal padding of the menu item in popup.
$kendo-menu-popup-item-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description Vertical padding of the menu item in popup.
$kendo-menu-popup-item-padding-end	Calculation	`calc( #{$kendo-menu-popup-item-padding-x} * 2 + #{$kendo-icon-size} )`	`calc(var(--kendo-spacing-2, 0.5rem) * 2 + 16px)`
Description The end padding of the menu item in popup.
$kendo-menu-popup-sm-item-icon-margin-start	String	`$kendo-menu-popup-sm-item-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
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(var(--kendo-spacing-2, 0.5rem) * 2 + 16px) - var(--kendo-spacing-2, 0.5rem)/2))`
Description The end margin of the menu item expand icon.
$kendo-menu-popup-item-spacing	String	`k-spacing(0)`	`var(--kendo-spacing-0, 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	String	`$kendo-list-item-hover-bg`	`var(--kendo-color-base-hover, #ebebeb)`
Description The background of hovered menu item in popup.
$kendo-menu-popup-item-hover-text	String	`$kendo-list-item-hover-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
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	String	`$kendo-list-item-selected-bg`	`var(--kendo-color-primary, #ff6358)`
Description The background of expanded menu item in popup.
$kendo-menu-popup-item-expanded-text	String	`$kendo-list-item-selected-text`	`var(--kendo-color-on-primary, #ffffff)`
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	String	`$kendo-button-padding-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the button arrow in the Menu Button..

Notification

Name	Type	Default value	Computed value
$kendo-notification-group-gap	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The row-gap between the elements in the Notification group.
$kendo-notification-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Notification.
$kendo-notification-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
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	String	`k-border-radius(md)!default`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the Notification.
$kendo-notification-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Notification.
$kendo-notification-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the Notification.
$kendo-notification-line-height	String	`va( --kendo-line-height, normal )`	`va(--kendo-line-height, normal)`
Description The line height of the Notification.
$kendo-notification-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the Notification.
$kendo-notification-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Notification.
$kendo-notification-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`$kendo-icon-spacing`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal spacing of the Notification icon.
$kendo-notification-theme-colors	Map	`$kendo-theme-colors`	`("primary": var(--kendo-color-primary, #ff6358), "secondary": var(--kendo-color-secondary, #666666), "tertiary": var(--kendo-color-tertiary, #03a9f4), "info": var(--kendo-color-info, #0058e9), "success": var(--kendo-color-success, #37b400), "warning": var(--kendo-color-warning, #ffc000), "error": var(--kendo-color-error, #f31700), "dark": var(--kendo-color-dark, #3d3d3d), "light": var(--kendo-color-light, #ebebeb), "inverse": var(--kendo-color-dark, #3d3d3d))`
Description The theme colors map for the Notification.
$kendo-notification-theme	Map	`notification-theme( $kendo-notification-theme-colors )`	("inverse": (color: var(--kendo-color-on-inverse, #ffffff), background-color: var(--kendo-color-dark, #3d3d3d), border: var(--kendo-color-dark, #3d3d3d)), "light": (color: var(--kendo-color-on-light, #000000), background-color: var(--kendo-color-light, #ebebeb), border: var(--kendo-color-light, #ebebeb)), "dark": (color: var(--kendo-color-on-dark, #ffffff), background-color: var(--kendo-color-dark, #3d3d3d), border: var(--kendo-color-dark, #3d3d3d)), "error": (color: var(--kendo-color-on-error, #ffffff), background-color: var(--kendo-color-error, #f31700), border: var(--kendo-color-error, #f31700)), "warning": (color: var(--kendo-color-on-warning, #3d3d3d), background-color: var(--kendo-color-warning, #ffc000), border: var(--kendo-color-warning, #ffc000)), "success": (color: var(--kendo-color-on-success, #ffffff), background-color: var(--kendo-color-success, #37b400), border: var(--kendo-color-success, #37b400)), "info": (color: var(--kendo-color-on-info, #ffffff), background-color: var(--kendo-color-info, #0058e9), border: var(--kendo-color-info, #0058e9)), "tertiary": (color: var(--kendo-color-on-tertiary, #ffffff), background-color: var(--kendo-color-tertiary, #03a9f4), border: var(--kendo-color-tertiary, #03a9f4)), "secondary": (color: var(--kendo-color-on-secondary, #ffffff), background-color: var(--kendo-color-secondary, #666666), border: var(--kendo-color-secondary, #666666)), "primary": (color: var(--kendo-color-on-primary, #ffffff), background-color: var(--kendo-color-primary, #ff6358), border: var(--kendo-color-primary, #ff6358)))
Description The generated theme colors map for the Notification.

Orgchart

Name	Type	Default value	Computed value
$kendo-orgchart-spacer	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The spacing index of the OrgChart.
$kendo-orgchart-padding-y	String	`$kendo-orgchart-spacer`	`var(--kendo-spacing-6, 1.5rem)`
Description The vertical padding of the OrgChart.
$kendo-orgchart-padding-x	String	`$kendo-orgchart-padding-y`	`var(--kendo-spacing-6, 1.5rem)`
Description The horizontal padding of the OrgChart.
$kendo-orgchart-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the OrgChart.
$kendo-orgchart-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the OrgChart.
$kendo-orgchart-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the OrgChart.
$kendo-orgchart-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the OrgChart.
$kendo-orgchart-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the OrgChart.
$kendo-orgchart-border	String	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the OrgChart.
$kendo-orgchart-node-gap	String	`$kendo-orgchart-spacer`	`var(--kendo-spacing-6, 1.5rem)`
Description The spacing of the OrgChart node.
$kendo-orgchart-group-gap	String	`$kendo-orgchart-spacer`	`var(--kendo-spacing-6, 1.5rem)`
Description The spacing of the OrgChart group.
$kendo-orgchart-node-container-gap	String	`$kendo-orgchart-spacer`	`var(--kendo-spacing-6, 1.5rem)`
Description The spacing of the OrgChart node container.
$kendo-orgchart-node-group-padding-y	String	`$kendo-orgchart-spacer`	`var(--kendo-spacing-6, 1.5rem)`
Description The vertical padding of the OrgChart node group.
$kendo-orgchart-node-group-padding-x	String	`$kendo-orgchart-node-group-padding-y`	`var(--kendo-spacing-6, 1.5rem)`
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	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the OrgChart node group.
$kendo-orgchart-node-group-bg	String	`$kendo-base-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of the OrgChart node group.
$kendo-orgchart-node-group-text	String	`$kendo-base-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the OrgChart node group.
$kendo-orgchart-node-group-border	String	`$kendo-base-border`	`var(--kendo-color-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	String	`var( --kendo-font-size-lg, inherit )`	`var(--kendo-font-size-lg, inherit)`
Description The font size of the OrgChart node group title.
$kendo-orgchart-node-group-title-margin-bottom	Calculation	`calc( #{$kendo-orgchart-spacer} / 3 )`	`calc(var(--kendo-spacing-6, 1.5rem) / 3)`
Description The bottom margin of the OrgChart node group title.
$kendo-orgchart-node-group-title-line-height	String	`var( --kendo-line-height-sm, normal )`	`var(--kendo-line-height-sm, normal)`
Description The line height of the OrgChart node group title.
$kendo-orgchart-node-group-subtitle-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the OrgChart node group subtitle.
$kendo-orgchart-node-group-subtitle-margin-bottom	String	`$kendo-orgchart-spacer`	`var(--kendo-spacing-6, 1.5rem)`
Description The bottom margin of the OrgChart node group subtitle.
$kendo-orgchart-node-group-subtitle-text	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #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	String	`$kendo-card-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the OrgChart Card.
$kendo-orgchart-card-padding-x	String	`$kendo-orgchart-card-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
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	String	`k-spacing(0)`	`var(--kendo-spacing-0, 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	String	`k-spacing(0)`	`var(--kendo-spacing-0, 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	String	`k-math-div( $kendo-orgchart-spacer, 2 )`	`var(--kendo-spacing-6, 1.5rem)/2`
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	String	`$kendo-base-border`	`var(--kendo-color-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	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Pager.
$kendo-pager-sm-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the small Pager.
$kendo-pager-md-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the medium Pager.
$kendo-pager-lg-padding-x	String	`k-spacing(2.5)`	`var(--kendo-spacing-2\.5, 0.625rem)`
Description The horizontal padding of the large Pager.
$kendo-pager-padding-y	String	`$kendo-pager-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Pager.
$kendo-pager-sm-padding-y	String	`$kendo-pager-sm-padding-x`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the small Pager.
$kendo-pager-md-padding-y	String	`$kendo-pager-md-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the medium Pager.
$kendo-pager-lg-padding-y	String	`$kendo-pager-lg-padding-x`	`var(--kendo-spacing-2\.5, 0.625rem)`
Description The vertical padding of the large Pager.
$kendo-pager-sm-item-min-width	Calculation	`$kendo-button-sm-calc-size`	`calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 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(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 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(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px)`
Description The minimum width of the items in the large Pagers.
$kendo-pager-sm-item-group-spacing	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The margin between the item groups in the small Pager.
$kendo-pager-md-item-group-spacing	String	`k-spacing(3.5)`	`var(--kendo-spacing-3\.5, 0.875rem)`
Description The margin between the item groups in the medium Pager.
$kendo-pager-lg-item-group-spacing	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Pager.
$kendo-pager-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Pager.
$kendo-pager-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Pager.
$kendo-pager-bg	String	`$kendo-component-header-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of the Pager.
$kendo-pager-text	String	`$kendo-component-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Pager.
$kendo-pager-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`$kendo-list-item-hover-bg`	`var(--kendo-color-base-hover, #ebebeb)`
Description The background color of the hovered Pager items.
$kendo-pager-item-hover-text	String	`$kendo-list-item-hover-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
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	String	`$kendo-list-item-selected-bg`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the selected Pager items.
$kendo-pager-item-selected-text	String	`$kendo-list-item-selected-text`	`var(--kendo-color-on-primary, #ffffff)`
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: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), item-group-spacing: var(--kendo-spacing-3, 0.75rem), item-min-width: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 2px), pager-dropdown-width: 5em), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-2, 0.5rem), item-group-spacing: var(--kendo-spacing-3\.5, 0.875rem), item-min-width: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px), pager-dropdown-width: 5em), lg: (padding-x: var(--kendo-spacing-2\.5, 0.625rem), padding-y: var(--kendo-spacing-2\.5, 0.625rem), item-group-spacing: var(--kendo-spacing-4, 1rem), item-min-width: calc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px), pager-dropdown-width: 5em))
Description The sizes map of the Pager.

Panelbar

Name	Type	Default value	Computed value
$kendo-panelbar-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal padding of the PanelBar.
$kendo-panelbar-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical padding of the PanelBar.
$kendo-panelbar-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the PanelBar.
$kendo-panelbar-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the PanelBar.
$kendo-panelbar-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the PanelBar.
$kendo-panelbar-border-width	Number	`1px`	`1px`
Description The width of the border around the PanelBar.
$kendo-panelbar-border-style	String	`solid`	`solid`
Description The border style around the the PanelBar.
$kendo-panelbar-item-border-width	Number	`1px`	`1px`
Description The width of the border around the PanelBar items.
$kendo-panelbar-item-border-style	String	`solid`	`solid`
Description The style of the border around the PanelBar items.
$kendo-panelbar-header-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the PanelBar header.
$kendo-panelbar-header-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the PanelBar header.
$kendo-panelbar-item-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the PanelBar items.
$kendo-panelbar-item-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the PanelBar items.
$kendo-panelbar-item-level-count	Number	`4`	`4`
Description The maximum nesting of the PanelBar items.
$kendo-panelbar-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the PanelBar.
$kendo-panelbar-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the PanelBar.
$kendo-panelbar-border	String	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the PanelBar.
$kendo-panelbar-header-bg	String	`$kendo-panelbar-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the PanelBar header.
$kendo-panelbar-header-text	String	`$kendo-link-text`	`var(--kendo-color-primary, #ff6358)`
Description The text color of the PanelBar header.
$kendo-panelbar-header-border	Null	`null`	`null`
Description The border color of the PanelBar header.
$kendo-panelbar-header-gradient	Null	`null`	`null`
Description The gradient of the PanelBar header.
$kendo-panelbar-header-hover-bg	String	`if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 ))`	`var(--kendo-color-base-hover, #ebebeb)`
Description The background color of the hovered PanelBar header.
$kendo-panelbar-header-hover-text	Null	`null`	`null`
Description The text color of the hovered PanelBar header.
$kendo-panelbar-header-hover-border	Null	`null`	`null`
Description The border color of the hovered PanelBar header.
$kendo-panelbar-header-hover-gradient	Null	`null`	`null`
Description The gradient of the hovered PanelBar header.
$kendo-panelbar-header-focus-bg	Null	`null`	`null`
Description The background color of the focused PanelBar header.
$kendo-panelbar-header-focus-text	Null	`null`	`null`
Description The text color of the focused PanelBar header.
$kendo-panelbar-header-focus-border	Null	`null`	`null`
Description The border color of the focused PanelBar header.
$kendo-panelbar-header-focus-gradient	Null	`null`	`null`
Description The gradient of the focused PanelBar header.
$kendo-panelbar-header-focus-shadow	List	`$kendo-list-item-focus-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.12)`
Description The shadow of the focused PanelBar header.
$kendo-panelbar-header-hover-focus-bg	Null	`null`	`null`
Description The background color of the focused and hovered PanelBar header.
$kendo-panelbar-header-hover-focus-text	Null	`null`	`null`
Description The text color of the focused and hovered PanelBar header.
$kendo-panelbar-header-hover-focus-border	Null	`null`	`null`
Description The border color of the focused and hovered PanelBar header.
$kendo-panelbar-header-hover-focus-gradient	Null	`null`	`null`
Description The gradient of the focused and hovered PanelBar header.
$kendo-panelbar-header-selected-bg	String	`$kendo-selected-bg`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the selected PanelBar header.
$kendo-panelbar-header-selected-text	String	`$kendo-selected-text`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the selected PanelBar header.
$kendo-panelbar-header-selected-border	Null	`null`	`null`
Description The border color of the selected PanelBar header.
$kendo-panelbar-header-selected-gradient	Null	`null`	`null`
Description The gradient of the selected PanelBar header.
$kendo-panelbar-header-selected-hover-bg	String	`if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg ))`	`var(--kendo-color-primary-hover, #ea5a51)`
Description The background color of the selected and hovered PanelBar header.
$kendo-panelbar-header-selected-hover-text	Null	`null`	`null`
Description The text color of the selected and hovered PanelBar header.
$kendo-panelbar-header-selected-hover-border	Null	`null`	`null`
Description The border color of the selected and hovered PanelBar header.
$kendo-panelbar-header-selected-hover-gradient	Null	`null`	`null`
Description The gradient of the selected and hovered PanelBar header.
$kendo-panelbar-header-selected-focus-bg	Null	`null`	`null`
Description The background color of the selected and focused PanelBar header.
$kendo-panelbar-header-selected-focus-text	Null	`null`	`null`
Description The text color of the selected and focused PanelBar header.
$kendo-panelbar-header-selected-focus-border	Null	`null`	`null`
Description The border color of the selected and focused PanelBar header.
$kendo-panelbar-header-selected-focus-gradient	Null	`null`	`null`
Description The gradient of the selected and focused PanelBar header.
$kendo-panelbar-header-selected-hover-focus-bg	Null	`null`	`null`
Description The background color of the selected, hovered and focused PanelBar header.
$kendo-panelbar-header-selected-hover-focus-text	Null	`null`	`null`
Description The text color of the selected, hovered and focused PanelBar header.
$kendo-panelbar-header-selected-hover-focus-border	Null	`null`	`null`
Description The border color of the selected, hovered and focused PanelBar header.
$kendo-panelbar-header-selected-hover-focus-gradient	Null	`null`	`null`
Description The gradient of the selected, hovered and focused PanelBar header.
$kendo-panelbar-item-hover-bg	String	`if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, .5 ))`	`var(--kendo-color-base-hover, #ebebeb)`
Description The background color of the hovered PanelBar items.
$kendo-panelbar-item-hover-text	Null	`null`	`null`
Description The text color of the hovered PanelBar items.
$kendo-panelbar-item-hover-border	Null	`null`	`null`
Description The border color of the hovered PanelBar items.
$kendo-panelbar-item-hover-gradient	Null	`null`	`null`
Description The gradient of the hovered PanelBar items.
$kendo-panelbar-item-focus-bg	Null	`null`	`null`
Description The background color of the focused PanelBar items.
$kendo-panelbar-item-focus-text	Null	`null`	`null`
Description The text color of the focused PanelBar items.
$kendo-panelbar-item-focus-border	Null	`null`	`null`
Description The border color of the focused PanelBar items.
$kendo-panelbar-item-focus-gradient	Null	`null`	`null`
Description The gradient of the focused PanelBar items.
$kendo-panelbar-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 PanelBar items.
$kendo-panelbar-item-hover-focus-bg	Null	`null`	`null`
Description The background color of the focused and hovered PanelBar items.
$kendo-panelbar-item-hover-focus-text	Null	`null`	`null`
Description The text color of the focused and hovered PanelBar items.
$kendo-panelbar-item-hover-focus-border	Null	`null`	`null`
Description The border color of the focused and hovered PanelBar items.
$kendo-panelbar-item-hover-focus-gradient	Null	`null`	`null`
Description The gradient of the focused and hovered PanelBar items.
$kendo-panelbar-item-selected-bg	String	`$kendo-selected-bg`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the selected PanelBar items.
$kendo-panelbar-item-selected-text	String	`$kendo-selected-text`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the selected PanelBar items.
$kendo-panelbar-item-selected-border	Null	`null`	`null`
Description The border color of the selected PanelBar items.
$kendo-panelbar-item-selected-gradient	Null	`null`	`null`
Description The gradient of the selected PanelBar items.
$kendo-panelbar-item-selected-hover-bg	String	`if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg ))`	`var(--kendo-color-primary-hover, #ea5a51)`
Description The background color of the selected and hovered PanelBar items.
$kendo-panelbar-item-selected-hover-text	Null	`null`	`null`
Description The text color of the selected and hovered PanelBar items.
$kendo-panelbar-item-selected-hover-border	Null	`null`	`null`
Description The border color of the selected and hovered PanelBar items.
$kendo-panelbar-item-selected-hover-gradient	Null	`null`	`null`
Description The gradient of the selected and hovered PanelBar items.
$kendo-panelbar-item-selected-focus-bg	Null	`null`	`null`
Description The background color of the selected and focused PanelBar items.
$kendo-panelbar-item-selected-focus-text	Null	`null`	`null`
Description The text color of the selected and focused PanelBar items.
$kendo-panelbar-item-selected-focus-border	Null	`null`	`null`
Description The border color of the selected and focused PanelBar items.
$kendo-panelbar-item-selected-focus-gradient	Null	`null`	`null`
Description The gradient of the selected and focused PanelBar items.
$kendo-panelbar-item-selected-hover-focus-bg	Null	`null`	`null`
Description The background color of the selected, hovered and focused PanelBar items.
$kendo-panelbar-item-selected-hover-focus-text	Null	`null`	`null`
Description The text color of the selected, hovered and focused PanelBar items.
$kendo-panelbar-item-selected-hover-focus-border	Null	`null`	`null`
Description The border color of the selected, hovered and focused PanelBar items.
$kendo-panelbar-item-selected-hover-focus-gradient	Null	`null`	`null`
Description The gradient of the selected, hovered and focused PanelBar items.
$kendo-panelbar-header-expanded-bg	Null	`null`	`null`
Description The background color of the expanded PanelBar header.
$kendo-panelbar-header-expanded-text	Null	`null`	`null`
Description The text color of the expanded PanelBar header.
$kendo-panelbar-header-expanded-border	Null	`null`	`null`
Description The border color of the expanded PanelBar header.
$kendo-panelbar-header-expanded-gradient	Null	`null`	`null`
Description The gradient of the expanded PanelBar header.

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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the PDFViewer.
$kendo-pdf-viewer-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the PDFViewer.
$kendo-pdf-viewer-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the PDFViewer.
$kendo-pdf-viewer-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the PDFViewer.
$kendo-pdf-viewer-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the PDFViewer.
$kendo-pdf-viewer-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`$kendo-app-bg`	`var(--kendo-color-surface, #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	String	`k-spacing(7.5)`	`var(--kendo-spacing-7\.5, 1.875rem)`
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	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the PDFViewer page.
$kendo-pdf-viewer-page-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`$kendo-toolbar-md-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
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(var(--kendo-spacing-2, 0.5rem) * 2)`
Description The vertical padding of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-spacing	String	`$kendo-toolbar-md-spacing`	`var(--kendo-spacing-2, 0.5rem)`
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	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`$kendo-padding-sm-x`	`var(--kendo-spacing-1, 0.25rem)`
Description The spacing of the matches container in the PDFViewer search panel.
$kendo-pdf-viewer-selection-line-height	String	`var( --kendo-line-height-sm, normal )`	`var(--kendo-line-height-sm, normal)`
Description The line height of the PDFViewer selection.
$kendo-pdf-viewer-search-highlight-bg	String	`$kendo-body-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
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	String	`$kendo-dropzone-icon-text`	`var(--kendo-color-subtle, #666666)`
Description The text color of the PDFViewer icon.

Picker

Name	Type	Default value	Computed value
$kendo-picker-bg	String	`$kendo-button-bg`	`var(--kendo-color-base, #f5f5f5)`
Description The background color of the Picker components.
$kendo-picker-text	String	`$kendo-button-text`	`var(--kendo-color-on-base, #3d3d3d)`
Description The text color of the Picker components.
$kendo-picker-border	String	`$kendo-button-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the Picker components.
$kendo-picker-gradient	Null	`$kendo-button-gradient`	`null`
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	String	`$kendo-button-hover-bg`	`var(--kendo-color-base-hover, #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 color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)`
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	String	`$kendo-button-text`	`var(--kendo-color-on-base, #3d3d3d)`
Description The text color of the outline Picker components.
$kendo-picker-outline-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-picker-outline-text, .5))`	`color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent)`
Description The border color of the outline Picker components.
$kendo-picker-outline-hover-bg	String	`$kendo-picker-outline-text`	`var(--kendo-color-on-base, #3d3d3d)`
Description The background color of the outline hovered Picker components.
$kendo-picker-outline-hover-text	String	`if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg ))`	`var(--kendo-color-base, #f5f5f5)`
Description The text color of the outline hovered Picker components.
$kendo-picker-outline-hover-border	String	`$kendo-picker-outline-hover-bg`	`var(--kendo-color-on-base, #3d3d3d)`
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 color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)`
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	String	`$kendo-button-text`	`var(--kendo-color-on-base, #3d3d3d)`
Description The text color of the flat Picker components.
$kendo-picker-flat-border	String	`$kendo-button-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the flat Picker components.
$kendo-picker-flat-hover-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 4%, transparent), rgba( $kendo-button-text, .04 ))`	`color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 4%, transparent)`
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	String	`if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 ))`	`var(--kendo-color-border-alt, 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 color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)`
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	String	`$kendo-card-border-radius`	`var(--kendo-border-radius-lg, 0.375rem)`
Description The radius of the border around the Popover.
$kendo-popover-font-family	String	`$kendo-card-font-family`	`var(--kendo-font-family, inherit)`
Description The font family of the Popover.
$kendo-popover-font-size	String	`$kendo-card-font-size`	`var(--kendo-font-size, inherit)`
Description The font size of the Popover.
$kendo-popover-line-height	String	`$kendo-card-line-height`	`var(--kendo-line-height, normal)`
Description The line height of the Popover.
$kendo-popover-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Popover.
$kendo-popover-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the Popover.
$kendo-popover-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`$kendo-card-header-padding-x`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the Popover header.
$kendo-popover-header-padding-y	String	`$kendo-card-header-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
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	String	`$kendo-card-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
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	String	`$kendo-card-header-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the Popover header.
$kendo-popover-body-padding-x	String	`$kendo-card-body-padding-x`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the Popover body.
$kendo-popover-body-padding-y	String	`$kendo-card-body-padding-y`	`var(--kendo-spacing-4, 1rem)`
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	String	`$kendo-popover-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the Popover callout.
$kendo-popover-callout-border	String	`$kendo-popover-border`	`var(--kendo-color-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	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description Font size of the popup.
$kendo-popup-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description Line height of the popup.
$kendo-popup-content-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Horizontal padding of the popup content.
$kendo-popup-content-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Vertical padding of the popup content.
$kendo-popup-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description Background color of the popup.
$kendo-popup-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description Text color of the popup.
$kendo-popup-border	String	`$kendo-component-border`	`var(--kendo-color-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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the ProgressBar.
$kendo-progressbar-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the ProgressBar.
$kendo-progressbar-line-height	Number	`1`	`1`
Description The line height of the ProgressBar.
$kendo-progressbar-bg	String	`if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 ))`	`var(--kendo-color-base-subtle, #ebebeb)`
Description The background color of the ProgressBar.
$kendo-progressbar-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the ProgressBar.
$kendo-progressbar-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The progress background color of the ProgressBar.
$kendo-progressbar-value-text	String	`if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg ))`	`var(--kendo-color-on-primary, #ffffff)`
Description The progress text color of the ProgressBar.
$kendo-progressbar-value-border	String	`if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg ))`	`var(--kendo-color-primary-active, #d45349)`
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	String	`$kendo-progressbar-bg`	`var(--kendo-color-base-subtle, #ebebeb)`
Description The background color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-text	String	`$kendo-progressbar-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-border	String	`$kendo-progressbar-border`	`var(--kendo-color-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	String	`$kendo-body-bg`	`var(--kendo-color-app-surface, #ffffff)`
Description The border color of the chunk ProgressBar.
$kendo-circular-progressbar-arc-stroke	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The arc stroke color of the circular ProgressBar.
$kendo-circular-progressbar-scale-stroke	String	`$kendo-progressbar-bg`	`var(--kendo-color-base-subtle, #ebebeb)`
Description The scale stroke background color of the circular ProgressBar.

Prompt

Name	Type	Default value	Computed value
$kendo-prompt-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Prompt.
$kendo-prompt-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the Prompt.
$kendo-prompt-border	String	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the Prompt.
$kendo-prompt-header-text	String	`$kendo-component-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Prompt header.
$kendo-prompt-header-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the Prompt header.
$kendo-prompt-header-border	String	`$kendo-component-header-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the Prompt header.
$kendo-prompt-content-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the Prompt content.
$kendo-prompt-content-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the Prompt content.
$kendo-prompt-content-spacing	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The spacing between the items of the Prompt content.
$kendo-prompt-content-text	String	`$kendo-component-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Prompt content.
$kendo-prompt-content-bg	String	`$kendo-component-header-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of the Prompt content.
$kendo-prompt-content-border	String	`$kendo-component-header-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The text border of the Prompt content.
$kendo-prompt-expander-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing between the items of the Prompt content expander.
$kendo-prompt-suggestion-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Prompt suggestion container.
$kendo-prompt-suggestion-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Prompt suggestion container.
$kendo-prompt-suggestion-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the Prompt suggestion container.
$kendo-prompt-suggestion-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Prompt suggestion container.
$kendo-prompt-suggestion-bg	String	`$kendo-body-bg`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the Prompt suggestion container.
$kendo-prompt-suggestion-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The size of a small RadioButton.
$kendo-radio-md-size	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The size of a medium RadioButton.
$kendo-radio-lg-size	String	`k-spacing(5)`	`var(--kendo-spacing-5, 1.25rem)`
Description The size of a large RadioButton.
$kendo-radio-sm-glyph-size	String	`k-spacing(2.5)`	`var(--kendo-spacing-2\.5, 0.625rem)`
Description The glyph size of a small RadioButton.
$kendo-radio-md-glyph-size	String	`k-spacing(3.5)`	`var(--kendo-spacing-3\.5, 0.875rem)`
Description The glyph size of a medium RadioButton.
$kendo-radio-lg-glyph-size	String	`k-spacing(4.5)`	`var(--kendo-spacing-4\.5, 1.125rem)`
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: var(--kendo-spacing-3, 0.75rem), glyph-size: var(--kendo-spacing-2\.5, 0.625rem), ripple-size: 300%), md: (size: var(--kendo-spacing-4, 1rem), glyph-size: var(--kendo-spacing-3\.5, 0.875rem), ripple-size: 300%), lg: (size: var(--kendo-spacing-5, 1.25rem), glyph-size: var(--kendo-spacing-4\.5, 1.125rem), ripple-size: 300%))`
Description The map with the different RadioButton sizes.
$kendo-radio-bg	String	`$kendo-checkbox-bg`	`var(--kendo-color-surface-alt, #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	String	`$kendo-checkbox-border`	`var(--kendo-color-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	String	`$kendo-checkbox-checked-bg`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the checked RadioButton.
$kendo-radio-checked-text	String	`$kendo-checkbox-checked-text`	`var(--kendo-color-on-primary, #ffffff)`
Description The color of the checked RadioButton.
$kendo-radio-checked-border	String	`$kendo-checkbox-checked-border`	`var(--kendo-color-primary, #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 color-mix(in srgb, var(--kendo-color-primary, #ff6358) 30%, transparent)`
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	String	`$kendo-checkbox-invalid-text`	`var(--kendo-color-error, #f31700)`
Description The color of the invalid RadioButton.
$kendo-radio-invalid-border	String	`$kendo-checkbox-invalid-border`	`var(--kendo-color-error, #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='var%28--kendo-color-on-primary, %23ffffff%29'/%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	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal margin of the RadioButton inside of a label.
$kendo-radio-list-spacing	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal list item margin of the RadioButton.
$kendo-radio-list-item-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal list item padding of the RadioButton.
$kendo-radio-list-item-padding-y	String	`$kendo-list-md-item-padding-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical list item padding of the RadioButton.
$kendo-radio-ripple-bg	String	`$kendo-radio-checked-bg`	`var(--kendo-color-primary, #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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Rating.
$kendo-rating-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Rating.
$kendo-rating-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Rating.
$kendo-rating-container-margin-x	String	`$kendo-padding-sm-x`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal margin of the Rating container.
$kendo-rating-item-padding-x	String	`$kendo-padding-sm-x`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the Rating item.
$kendo-rating-item-padding-y	String	`$kendo-padding-md-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the Rating item.
$kendo-rating-label-margin-x	String	`$kendo-padding-md-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal margin of the Rating label.
$kendo-rating-label-margin-y	String	`$kendo-padding-md-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical margin of the Rating label.
$kendo-rating-label-line-height	String	`var( --kendo-line-height-lg, normal )`	`var(--kendo-line-height-lg, normal)`
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	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Rating icon.
$kendo-rating-icon-selected-text	String	`$kendo-selected-bg`	`var(--kendo-color-primary, #ff6358)`
Description The text color of the selected Rating icon.
$kendo-rating-icon-hover-text	String	`$kendo-selected-bg`	`var(--kendo-color-primary, #ff6358)`
Description The text color of the hovered Rating icon.
$kendo-rating-icon-focus-text	String	`$kendo-selected-bg`	`var(--kendo-color-primary, #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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the ScrollView.
$kendo-scrollview-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the ScrollView.
$kendo-scrollview-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the ScrollView.
$kendo-scrollview-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the ScrollView.
$kendo-scrollview-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the ScrollView.
$kendo-scrollview-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`$kendo-button-bg`	`var(--kendo-color-base, #f5f5f5)`
Description The background color of the ScrollView page button.
$kendo-scrollview-pagebutton-border	String	`$kendo-button-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-bg	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The primary background color of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-border	String	`$kendo-color-primary`	`var(--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	String	`k-spacing(5)`	`var(--kendo-spacing-5, 1.25rem)`
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} + calc( #{$kendo-scrollview-pager-item-spacing} * 2 ) )`	`calc(10px + 0px + var(--kendo-spacing-5, 1.25rem) * 2)`
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	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Slider.
$kendo-slider-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Slider.
$kendo-slider-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
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	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the Slider drag handle.
$kendo-slider-draghandle-text	String	`if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-color-primary ))`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the Slider drag handle.
$kendo-slider-draghandle-border	String	`$kendo-color-primary`	`var(--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	String	`if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-color-primary , .5 ))`	`var(--kendo-color-primary-hover, #ea5a51)`
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	String	`$kendo-color-primary`	`var(--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	String	`if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 ))`	`var(--kendo-color-primary-active, #d45349)`
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	String	`if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 ))`	`var(--kendo-color-primary-active, #d45349)`
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 color-mix(in srgb, var(--kendo-color-primary, #ff6358) 30%, transparent)`
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	String	`if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 ))`	`var(--kendo-color-base-subtle, #ebebeb)`
Description The background color of the Slider track.
$kendo-slider-selection-bg	String	`$kendo-color-primary`	`var(--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 color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)`
Description The focus shadow of the SplitButton.
$kendo-split-button-arrow-padding-x	String	`$kendo-button-padding-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the arrow Button.
$kendo-split-button-sm-arrow-padding-x	String	`$kendo-button-sm-padding-y`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The horizontal padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-x	String	`$kendo-button-md-padding-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-x	String	`$kendo-button-lg-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the large arrow Button.
$kendo-split-button-arrow-padding-y	String	`$kendo-button-padding-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the arrow Button.
$kendo-split-button-sm-arrow-padding-y	String	`$kendo-button-sm-padding-y`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-y	String	`$kendo-button-md-padding-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-y	String	`$kendo-button-lg-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Splitter.
$kendo-splitter-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Splitter.
$kendo-splitter-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Splitter.
$kendo-splitter-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the Splitter.
$kendo-splitter-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Splitter.
$kendo-splitter-border	String	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the Splitter.
$kendo-splitter-splitbar-size	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
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	Calculation	`calc( #{k-spacing(3.5)} / 2 )`	`calc(var(--kendo-spacing-3\.5, 0.875rem) / 2)`
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	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical padding of the collapse icon in the Splitter.
$kendo-splitbar-bg	String	`$kendo-base-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of the Splitter split bar.
$kendo-splitbar-text	String	`$kendo-base-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Splitter split bar.
$kendo-splitbar-hover-bg	String	`if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-splitbar-bg, .5 ))`	`var(--kendo-color-base-hover, #ebebeb)`
Description The hover background color of the Splitter split bar.
$kendo-splitbar-hover-text	String	`$kendo-splitbar-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The hover text color of the Splitter split bar.
$kendo-splitbar-selected-bg	String	`$kendo-selected-bg`	`var(--kendo-color-primary, #ff6358)`
Description The selected background color of the Splitter split bar.
$kendo-splitbar-selected-text	String	`$kendo-selected-text`	`var(--kendo-color-on-primary, #ffffff)`
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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Spreadsheet.
$kendo-spreadsheet-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Spreadsheet.
$kendo-spreadsheet-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Spreadsheet.
$kendo-spreadsheet-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the Spreadsheet.
$kendo-spreadsheet-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Spreadsheet.
$kendo-spreadsheet-border	String	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the Spreadsheet.
$kendo-spreadsheet-header-bg	String	`$kendo-component-header-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of the Spreadsheet header.
$kendo-spreadsheet-header-text	String	`$kendo-component-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Spreadsheet header.
$kendo-spreadsheet-header-border	String	`$kendo-component-header-border`	`var(--kendo-color-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	String	`$kendo-spreadsheet-header-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of the Spreadsheet table headers.
$kendo-spreadsheet-table-header-text	String	`$kendo-spreadsheet-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Spreadsheet table headers.
$kendo-spreadsheet-table-header-border	String	`$kendo-spreadsheet-header-border`	`var(--kendo-color-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	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-font-size	String	`$kendo-spreadsheet-font-size`	`var(--kendo-font-size, inherit)`
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	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacings of the Spreadsheet action bar.
$kendo-spreadsheet-formula-bar-gap	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The gap of the Spreadsheet formula bar.
$kendo-spreadsheet-formula-input-padding-x	String	`$kendo-input-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Spreadsheet formula input.
$kendo-spreadsheet-formula-input-padding-y	String	`$kendo-input-padding-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the Spreadsheet formula input.
$kendo-spreadsheet-formula-input-line-height	String	`$kendo-input-line-height`	`var(--kendo-line-height, normal)`
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	String	`$kendo-spreadsheet-font-size`	`var(--kendo-font-size, inherit)`
Description The font size of the Spreadsheet view.
$kendo-spreadsheet-selection-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`	`color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)`
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	String	`$kendo-selected-bg`	`var(--kendo-color-primary, #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 var(--kendo-color-primary, #ff6358)`
Description The shadow of the Spreadsheet selection.
$kendo-spreadsheet-single-selection-bg	String	`$kendo-selected-bg`	`var(--kendo-color-primary, #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	String	`$kendo-spreadsheet-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The border color of the Spreadsheet single selection.
$kendo-spreadsheet-partial-selection-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`	`color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)`
Description The background color of the Spreadsheet partial selection.
$kendo-spreadsheet-active-cell-bg	String	`$kendo-spreadsheet-bg`	`var(--kendo-color-surface-alt, #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 var(--kendo-color-primary, #ff6358)`
Description The shadow of the Spreadsheet active cell.
$kendo-spreadsheet-auto-fill-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`	`color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)`
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	String	`$kendo-selected-bg`	`var(--kendo-color-primary, #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 var(--kendo-color-primary, #ff6358)`
Description The shadow of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-punch-bg	String	`rgba( $kendo-spreadsheet-bg, .5 )`	`rgba(var(--kendo-color-surface-alt, #ffffff), 0.5)`
Description The background color of the Spreadsheet auto fill punch.
$kendo-spreadsheet-cell-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the Spreadsheet cell.
$kendo-spreadsheet-cell-padding-x	String	`$kendo-spreadsheet-cell-padding-y`	`var(--kendo-spacing-1, 0.25rem)`
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	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical padding of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-bg	String	`$kendo-spreadsheet-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-text	String	`$kendo-spreadsheet-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
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	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the Spreadsheet resize handle.
$kendo-spreadsheet-cell-comment-border	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The border color of the Spreadsheet cell comment indicator.
$kendo-spreadsheet-cell-dirty-border	String	`$kendo-color-error`	`var(--kendo-color-error, #f31700)`
Description The border color of the Spreadsheet cell dirty indicator.
$kendo-spreadsheet-sheets-bar-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Spreadsheet sheets bar.
$kendo-spreadsheet-sheets-bar-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
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	String	`k-spacing(7.5)`	`var(--kendo-spacing-7\.5, 1.875rem)`
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	String	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
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	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the Spreadsheet image Dialog preview overlay.
$kendo-spreadsheet-insert-image-dialog-overlay-hover-text	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #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	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The border color of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-color	String	`$kendo-selected-bg`	`var(--kendo-color-primary, #ff6358)`
Description The outline color of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-bg	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The border color of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-radius	String	`k-border-radius(lg)`	`var(--kendo-border-radius-lg, 0.375rem)`
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	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`	`color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)`
Description The background color of the Spreadsheet drawing anchor.
$kendo-spreadsheet-dropzone-spacing-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
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	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal margin the Stepper label.
$kendo-stepper-label-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding the Stepper label.
$kendo-stepper-label-padding-y	Calculation	`calc( #{k-spacing(2.5)} / 2 )`	`calc(var(--kendo-spacing-2\.5, 0.625rem) / 2)`
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	String	`k-spacing(5)`	`var(--kendo-spacing-5, 1.25rem)`
Description The horizontal padding of the Stepper content.
$kendo-stepper-inline-content-padding-y	String	`k-spacing(2.5)`	`var(--kendo-spacing-2\.5, 0.625rem)`
Description The vertical padding of the Stepper content.
$kendo-stepper-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`

$kendo-stepper-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`

$kendo-stepper-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`

$kendo-stepper-bg	Null	`null`	`null`
Description The background color of the Stepper.
$kendo-stepper-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
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	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the Stepper indicator.
$kendo-stepper-indicator-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
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	String	`if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg ))`	`var(--kendo-color-base-hover, #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	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), $kendo-disabled-text)`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 60%, transparent)`
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	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the Stepper's done indicator.
$kendo-stepper-indicator-done-text	String	`if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the Stepper's done indicator.
$kendo-stepper-indicator-done-border	String	`$kendo-stepper-indicator-done-bg`	`var(--kendo-color-primary, #ff6358)`
Description The border color of the Stepper's done indicator.
$kendo-stepper-indicator-done-hover-bg	String	`if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg ))`	`var(--kendo-color-primary-hover, #ea5a51)`
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	String	`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%))`	`color-mix(in srgb, var(--kendo-color-primary, #ff6358) 60%, transparent)`
Description The background color of the Stepper's disabled done indicator.
$kendo-stepper-indicator-done-disabled-text	String	`if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg ))`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the Stepper's disabled done indicator.
$kendo-stepper-indicator-done-disabled-border	String	`$kendo-stepper-indicator-done-disabled-bg`	`color-mix(in srgb, var(--kendo-color-primary, #ff6358) 60%, transparent)`
Description The border color of the Stepper's disabled done indicator.
$kendo-stepper-indicator-current-bg	String	`$kendo-stepper-indicator-done-bg`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the Stepper current indicator.
$kendo-stepper-indicator-current-text	String	`$kendo-stepper-indicator-done-text`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the Stepper current indicator.
$kendo-stepper-indicator-current-border	String	`$kendo-stepper-indicator-done-border`	`var(--kendo-color-primary, #ff6358)`
Description The border color of the Stepper current indicator.
$kendo-stepper-indicator-current-hover-bg	String	`$kendo-stepper-indicator-done-hover-bg`	`var(--kendo-color-primary-hover, #ea5a51)`
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	String	`$kendo-stepper-indicator-done-disabled-bg`	`color-mix(in srgb, var(--kendo-color-primary, #ff6358) 60%, transparent)`
Description The background color of the Stepper's disabled current indicator.
$kendo-stepper-indicator-current-disabled-text	String	`$kendo-stepper-indicator-done-disabled-text`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the Stepper's disabled current indicator.
$kendo-stepper-indicator-current-disabled-border	String	`$kendo-stepper-indicator-done-disabled-border`	`color-mix(in srgb, var(--kendo-color-primary, #ff6358) 60%, transparent)`
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	String	`$kendo-color-success`	`var(--kendo-color-success, #37b400)`
Description The success text color of the Stepper label.
$kendo-stepper-label-error-text	String	`$kendo-color-error`	`var(--kendo-color-error, #f31700)`
Description The error text color of the Stepper label.
$kendo-stepper-label-hover-text	String	`if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-stepper-text, 2 ))`	`var(--kendo-color-on-base, #3d3d3d)`
Description The text color of the hovered Stepper label.
$kendo-stepper-label-disabled-text	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), $kendo-disabled-text)`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 60%, transparent)`
Description The text color of the disabled Stepper label.
$kendo-stepper-optional-label-text	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #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	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background of the track when the Switch is not checked.
$kendo-switch-off-track-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the track when the Switch is not checked.
$kendo-switch-off-track-border	String	`if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-switch-off-track-bg, 8% ))`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
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 color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)`
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	String	`$kendo-base-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-text	String	`$kendo-base-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-border	String	`$kendo-base-border`	`var(--kendo-color-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	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The background of the track when the Switch is checked.
$kendo-switch-on-track-text	String	`if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-switch-on-track-bg ))`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the track when the Switch is checked.
$kendo-switch-on-track-border	String	`$kendo-switch-on-track-bg`	`var(--kendo-color-primary, #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 color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)`
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	String	`$kendo-base-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background of the thumb when the Switch is checked.
$kendo-switch-on-thumb-text	String	`$kendo-base-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-border	String	`$kendo-base-border`	`var(--kendo-color-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: var( --kendo-font-size, inherit ), line-height: var( --kendo-line-height, normal ), cell-padding-x: $kendo-table-sm-cell-padding-x, cell-padding-y: $kendo-table-sm-cell-padding-y ), md: ( font-size: var( --kendo-font-size, inherit ), line-height: var( --kendo-line-height, normal ), cell-padding-x: $kendo-table-md-cell-padding-x, cell-padding-y: $kendo-table-md-cell-padding-y ), lg: ( font-size: var( --kendo-font-size, inherit ), line-height: var( --kendo-line-height, normal ), cell-padding-x: $kendo-table-lg-cell-padding-x, cell-padding-y: $kendo-table-lg-cell-padding-y ) )	(sm: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-padding-x: var(--kendo-spacing-2, 0.5rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem)), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-padding-x: var(--kendo-spacing-3, 0.75rem), cell-padding-y: var(--kendo-spacing-2, 0.5rem)), lg: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-padding-x: var(--kendo-spacing-2, 0.5rem), cell-padding-y: var(--kendo-spacing-2\.5, 0.625rem)))
Description The sizes of the table.
$kendo-table-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description Background color of tables.
$kendo-table-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description Text color of tables.
$kendo-table-border	String	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description Border color of tables.
$kendo-table-header-bg	String	`$kendo-component-header-bg`	`var(--kendo-color-surface, #fafafa)`
Description Background color of table headers.
$kendo-table-header-text	String	`$kendo-component-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description Text color of table headers.
$kendo-table-header-border	String	`$kendo-component-header-border`	`var(--kendo-color-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	String	`$kendo-table-header-bg`	`var(--kendo-color-surface, #fafafa)`
Description Background color of table footers.
$kendo-table-footer-text	String	`$kendo-table-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description Text color of table footers.
$kendo-table-footer-border	String	`$kendo-table-header-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description Border color of table footers.
$kendo-table-group-row-bg	String	`$kendo-table-header-bg`	`var(--kendo-color-surface, #fafafa)`
Description Background color of group rows in table.
$kendo-table-group-row-text	String	`$kendo-table-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description Text color of group rows in table.
$kendo-table-group-row-border	String	`$kendo-table-header-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description Border color of group rows in table.
$kendo-table-alt-row-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba( k-contrast-legacy( $kendo-table-bg ), .04 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 5%, transparent)`
Description Background color of alternating rows in table.
$kendo-table-alt-row-text	Null	`null`	`null`
Description Text color of alternating rows in table.
$kendo-table-alt-row-border	Null	`null`	`null`
Description Border color of alternating rows in table.
$kendo-table-hover-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 11%, transparent), k-color-darken($kendo-table-bg, 7%))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 11%, transparent)`
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	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`	`color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)`
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	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description Text color of tabstrip component
$kendo-tabstrip-border	String	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description Border color of tabstrip component
$kendo-tabstrip-item-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description Horizontal padding of tabs
$kendo-tabstrip-item-padding-y	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description Vertical padding of tabs
$kendo-tabstrip-item-border-width	Number	`1px`	`1px`
Description Width of border around tabs
$kendo-tabstrip-item-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description Border radius of tabs
$kendo-tabstrip-item-gap	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description Spacing between tabs
$kendo-tabstrip-item-bg	Null	`null`	`null`
Description Background color of tabs
$kendo-tabstrip-item-text	String	`$kendo-link-text`	`var(--kendo-color-primary, #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	String	`$kendo-link-hover-text`	`var(--kendo-color-primary-hover, #ea5a51)`
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	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description Background color of selected tabs
$kendo-tabstrip-item-selected-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description Text color of selected tabs
$kendo-tabstrip-item-selected-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description Horizontal padding of tabstrip content
$kendo-tabstrip-content-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
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	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description Background color of tabstrip content
$kendo-tabstrip-content-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description Text color of tabstrip content
$kendo-tabstrip-content-border	String	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description Border color of tabstrip content
$kendo-tabstrip-content-focus-border	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description Border color of tabstrip focused content

Taskboard

Name	Type	Default value	Computed value
$kendo-taskboard-spacer	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the TaskBoard.
$kendo-taskboard-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the TaskBoard.
$kendo-taskboard-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
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	String	`$kendo-taskboard-spacer`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the TaskBoard Toolbar.
$kendo-taskboard-toolbar-padding-x	String	`$kendo-taskboard-toolbar-padding-y`	`var(--kendo-spacing-4, 1rem)`
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	String	`$kendo-taskboard-spacer`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the TaskBoard content.
$kendo-taskboard-content-padding-x	String	`$kendo-taskboard-content-padding-y`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the TaskBoard content.
$kendo-taskboard-column-container-spacing-y	Calculation	`calc( #{$kendo-taskboard-spacer} / 2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description The vertical spacing of the TaskBoard column container.
$kendo-taskboard-column-container-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical padding of the TaskBoard column container.
$kendo-taskboard-column-container-padding-x	Calculation	`calc( #{$kendo-taskboard-spacer} / 2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description The horizontal padding of the TaskBoard column container.
$kendo-taskboard-columns-container-gap	String	`$kendo-taskboard-spacer`	`var(--kendo-spacing-4, 1rem)`
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	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the TaskBoard column.
$kendo-taskboard-column-bg	String	`$kendo-base-bg`	`var(--kendo-color-surface, #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	String	`if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))`	`var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16))`
Description The border color of the focused TaskBoard column.
$kendo-taskboard-column-header-padding-y	Calculation	`calc( #{$kendo-taskboard-spacer} / 2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description The vertical padding of the TaskBoard column header.
$kendo-taskboard-column-header-padding-x	Calculation	`$kendo-taskboard-column-header-padding-y`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description The horizontal padding of the TaskBoard column header.
$kendo-taskboard-column-header-gap	Calculation	`calc( #{$kendo-taskboard-spacer} / 4 )`	`calc(var(--kendo-spacing-4, 1rem) / 4)`
Description The spacing of the TaskBoard column header.
$kendo-taskboard-column-header-actions-gap	Calculation	`calc( #{$kendo-taskboard-spacer} / 2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
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	String	`$kendo-component-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
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	Calculation	`calc( #{$kendo-taskboard-spacer} / 2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
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	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the TaskBoard pane.
$kendo-taskboard-pane-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the TaskBoard pane.
$kendo-taskboard-pane-border	String	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the TaskBoard pane.
$kendo-taskboard-pane-header-padding-y	Calculation	`calc( #{$kendo-taskboard-spacer} * .75 )`	`calc(var(--kendo-spacing-4, 1rem) * 0.75)`
Description The vertical padding of the TaskBoard pane header.
$kendo-taskboard-pane-header-padding-x	String	`$kendo-taskboard-spacer`	`var(--kendo-spacing-4, 1rem)`
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	String	`$kendo-component-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the TaskBoard pane header.
$kendo-taskboard-pane-content-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical padding of the TaskBoard pane content.
$kendo-taskboard-pane-content-padding-x	String	`$kendo-taskboard-spacer`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the TaskBoard pane content.
$kendo-taskboard-pane-actions-padding-y	Calculation	`calc( #{$kendo-taskboard-spacer} * .75 )`	`calc(var(--kendo-spacing-4, 1rem) * 0.75)`
Description The vertical padding of the TaskBoard pane actions.
$kendo-taskboard-pane-actions-padding-x	String	`$kendo-taskboard-spacer`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the TaskBoard pane actions.
$kendo-taskboard-card-padding-y	String	`$kendo-taskboard-spacer`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the TaskBoard Card.
$kendo-taskboard-card-padding-x	String	`$kendo-taskboard-card-padding-y`	`var(--kendo-spacing-4, 1rem)`
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	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
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	String	`$kendo-card-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the TaskBoard Card.
$kendo-taskboard-card-text	String	`$kendo-card-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the TaskBoard Card.
$kendo-taskboard-card-border	String	`$kendo-card-border`	`var(--kendo-color-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	String	`if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))`	`var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16))`
Description The border color of the hovered TaskBoard Card.
$kendo-taskboard-card-focus-border	String	`if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% ))`	`var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16))`
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	String	`if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 5 ))`	`var(--kendo-color-primary-emphasis, #ff9d97)`
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	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The text color of the TaskBoard Card header text.
$kendo-taskboard-card-header-hover-text	String	`if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)`	`var(--kendo-color-primary-hover, #ea5a51)`
Description The text color of the hovered TaskBoard Card header text.
$kendo-taskboard-card-header-focus-text	String	`if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)`	`var(--kendo-color-primary-hover, #ea5a51)`
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	String	`$kendo-taskboard-card-border-radius`	`var(--kendo-border-radius-md, 0.25rem)`
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	String	`$kendo-component-border`	`var(--kendo-color-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	String	`$kendo-base-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of the TileLayout.
$kendo-tile-layout-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the TileLayout.
$kendo-tile-layout-padding-y	String	`$kendo-tile-layout-padding-x`	`var(--kendo-spacing-4, 1rem)`
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	String	`k-border-radius(lg)`	`var(--kendo-border-radius-lg, 0.375rem)`
Description The radius of the border around the TileLayout hint.
$kendo-tile-layout-hint-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`k-spacing(10)`	`var(--kendo-spacing-10, 2.5rem)`
Description The horizontal spacing of the Timeline.
$kendo-timeline-spacing-y	String	`k-spacing(10)`	`var(--kendo-spacing-10, 2.5rem)`
Description The vertical spacing of the Timeline.
$kendo-timeline-items-padding	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The padding between the Timeline's track items.
$kendo-timeline-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Timeline.
$kendo-timeline-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Timeline.
$kendo-timeline-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Timeline.
$kendo-timeline-mobile-spacing-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal spacing of the mobile Timeline.
$kendo-timeline-mobile-spacing-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
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	String	`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%))`	`color-mix(in srgb, var(--kendo-color-base-subtle, #ebebeb) 60%, transparent)`
Description The background color of the disabled Timeline track arrow.
$kendo-timeline-track-arrow-disabled-text	String	`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%))`	`color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 60%, transparent)`
Description The text color of the disabled Timeline track arrow.
$kendo-timeline-track-arrow-disabled-border	String	`if($kendo-enable-color-system, k-color( border ), k-true-mix(#000000, $kendo-body-bg, 4.8%))`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
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	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
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	String	`$kendo-button-bg`	`var(--kendo-color-base, #f5f5f5)`
Description The background color of the Timeline track.
$kendo-timeline-track-border-color	String	`$kendo-button-border`	`var(--kendo-color-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	String	`$kendo-button-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Timeline flag.
$kendo-timeline-flag-padding-y	String	`$kendo-button-padding-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the Timeline flag.
$kendo-timeline-flag-line-height	String	`$kendo-button-line-height`	`var(--kendo-line-height, normal)`
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 * var(--kendo-spacing-10, 2.5rem))`
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 * var(--kendo-spacing-4, 1rem))`
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	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the Timeline flag.
$kendo-timeline-flag-text	String	`if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-timeline-flag-bg ))`	`var(--kendo-color-on-primary, #ffffff)`
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	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
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(var(--kendo-spacing-10, 2.5rem) + (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(var(--kendo-spacing-10, 2.5rem) + (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(var(--kendo-spacing-4, 1rem) + (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(var(--kendo-spacing-4, 1rem) + (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	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description The background color of the Timeline circle.
$kendo-timeline-collapse-arrow-padding-x	String	`$kendo-padding-md-x`	`var(--kendo-spacing-2, 0.5rem)`
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	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the small Toolbar.
$kendo-toolbar-md-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the medium Toolbar.
$kendo-toolbar-lg-padding-x	String	`k-spacing(2.5)`	`var(--kendo-spacing-2\.5, 0.625rem)`
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	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the small Toolbar.
$kendo-toolbar-md-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the medium Toolbar.
$kendo-toolbar-lg-padding-y	String	`k-spacing(2.5)`	`var(--kendo-spacing-2\.5, 0.625rem)`
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	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The spacing between the tools of the small Toolbar.
$kendo-toolbar-md-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing between the tools of the medium Toolbar.
$kendo-toolbar-lg-spacing	String	`k-spacing(2.5)`	`var(--kendo-spacing-2\.5, 0.625rem)`
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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Toolbar.
$kendo-toolbar-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Toolbar.
$kendo-toolbar-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Toolbar.
$kendo-toolbar-bg	String	`$kendo-base-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of the Toolbar.
$kendo-toolbar-text	String	`$kendo-base-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Toolbar.
$kendo-toolbar-border	String	`$kendo-base-border`	`var(--kendo-color-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 color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)`
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: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), spacing: var(--kendo-spacing-1\.5, 0.375rem)), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-2, 0.5rem), spacing: var(--kendo-spacing-2, 0.5rem)), lg: (padding-x: var(--kendo-spacing-2\.5, 0.625rem), padding-y: var(--kendo-spacing-2\.5, 0.625rem), spacing: var(--kendo-spacing-2\.5, 0.625rem)))`
Description The sizes map for the Toolbar.

Name	Type	Default value	Computed value
$kendo-tooltip-padding-y	String	`$kendo-padding-md-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the Tooltip.
$kendo-tooltip-padding-x	String	`$kendo-padding-md-x`	`var(--kendo-spacing-2, 0.5rem)`
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	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the Tooltip.
$kendo-tooltip-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Tooltip.
$kendo-tooltip-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
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	Calculation	`calc( ( #{$kendo-tooltip-font-size} * 1.25 ) )`	`calc(var(--kendo-font-size, inherit) * 1.25)`
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	String	`if($kendo-enable-color-system, k-color( on-app-surface ), rgba( k-contrast-legacy( $kendo-body-bg ), .75 ))`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The default background of the Tooltip.
$kendo-tooltip-text	String	`if($kendo-enable-color-system, k-color( app-surface ), k-contrast-legacy( $kendo-tooltip-bg ))`	`var(--kendo-color-app-surface, #ffffff)`
Description The default text color of the Tooltip.
$kendo-tooltip-border	String	`$kendo-tooltip-bg`	`var(--kendo-color-on-app-surface, #3d3d3d)`
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": var(--kendo-color-primary, #ff6358), "secondary": var(--kendo-color-secondary, #666666), "tertiary": var(--kendo-color-tertiary, #03a9f4), "info": var(--kendo-color-info, #0058e9), "success": var(--kendo-color-success, #37b400), "warning": var(--kendo-color-warning, #ffc000), "error": var(--kendo-color-error, #f31700), "dark": var(--kendo-color-dark, #3d3d3d), "light": var(--kendo-color-light, #ebebeb), "inverse": var(--kendo-color-dark, #3d3d3d))`
Description The theme colors map for the Tooltip.
$kendo-tooltip-theme	Map	`tooltip-theme( $kendo-tooltip-theme-colors )`	("inverse": (color: var(--kendo-color-on-inverse, #ffffff), background-color: var(--kendo-color-dark, #3d3d3d), border: var(--kendo-color-dark, #3d3d3d)), "light": (color: var(--kendo-color-on-light, #000000), background-color: var(--kendo-color-light, #ebebeb), border: var(--kendo-color-light, #ebebeb)), "dark": (color: var(--kendo-color-on-dark, #ffffff), background-color: var(--kendo-color-dark, #3d3d3d), border: var(--kendo-color-dark, #3d3d3d)), "error": (color: var(--kendo-color-on-error, #ffffff), background-color: var(--kendo-color-error, #f31700), border: var(--kendo-color-error, #f31700)), "warning": (color: var(--kendo-color-on-warning, #3d3d3d), background-color: var(--kendo-color-warning, #ffc000), border: var(--kendo-color-warning, #ffc000)), "success": (color: var(--kendo-color-on-success, #ffffff), background-color: var(--kendo-color-success, #37b400), border: var(--kendo-color-success, #37b400)), "info": (color: var(--kendo-color-on-info, #ffffff), background-color: var(--kendo-color-info, #0058e9), border: var(--kendo-color-info, #0058e9)), "tertiary": (color: var(--kendo-color-on-tertiary, #ffffff), background-color: var(--kendo-color-tertiary, #03a9f4), border: var(--kendo-color-tertiary, #03a9f4)), "secondary": (color: var(--kendo-color-on-secondary, #ffffff), background-color: var(--kendo-color-secondary, #666666), border: var(--kendo-color-secondary, #666666)), "primary": (color: var(--kendo-color-on-primary, #ffffff), background-color: var(--kendo-color-primary, #ff6358), border: var(--kendo-color-primary, #ff6358)))
Description The generated theme colors map for the Tooltip.

Treelist

Name	Type	Default value	Computed value
$kendo-treelist-footer-row-bg	String	`$kendo-grid-hover-bg`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 11%, transparent)`
Description The background color of the TreeList footer row.
$kendo-treelist-footer-row-border-width	Number	`1px`	`1px`
Description The border width of the TreeList footer row.

Treeview

Name	Type	Default value	Computed value
$kendo-treeview-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the TreeView.
$kendo-treeview-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the TreeView.
$kendo-treeview-sm-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the small TreeView.
$kendo-treeview-md-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the medium TreeView.
$kendo-treeview-lg-font-size	String	`var( --kendo-font-size-lg, inherit )`	`var(--kendo-font-size-lg, inherit)`
Description The font size of the large TreeView.
$kendo-treeview-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the TreeView.
$kendo-treeview-sm-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the small TreeView.
$kendo-treeview-md-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the medium TreeView.
$kendo-treeview-lg-line-height	String	`var( --kendo-line-height-lg, normal )`	`var(--kendo-line-height-lg, normal)`
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	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the TreeView items.
$kendo-treeview-sm-item-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the small TreeView items.
$kendo-treeview-md-item-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the medium TreeView items.
$kendo-treeview-lg-item-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the large TreeView items.
$kendo-treeview-item-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the TreeView items.
$kendo-treeview-sm-item-padding-y	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical padding of the small TreeView items.
$kendo-treeview-md-item-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the medium TreeView items.
$kendo-treeview-lg-item-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
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	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the TreeView items.
$kendo-treeview-sm-checkbox-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the checkbox in the small TreeView.
$kendo-treeview-md-checkbox-padding-x	String	`$kendo-treeview-sm-checkbox-padding-x`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the checkbox in the medium TreeView.
$kendo-treeview-lg-checkbox-padding-x	String	`$kendo-treeview-sm-checkbox-padding-x`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the checkbox in the large TreeView.
$kendo-treeview-sm-checkbox-padding-y	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical padding of the checkbox in the small TreeView.
$kendo-treeview-md-checkbox-padding-y	String	`$kendo-treeview-sm-checkbox-padding-y`	`var(--kendo-spacing-0\.5, 0.125rem)`
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: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-0\.5, 0.125rem), checkbox-padding-x: var(--kendo-spacing-1, 0.25rem), checkbox-padding-y: var(--kendo-spacing-0\.5, 0.125rem)), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-1, 0.25rem), checkbox-padding-x: var(--kendo-spacing-1, 0.25rem), checkbox-padding-y: var(--kendo-spacing-0\.5, 0.125rem)), lg: (font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal), item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-2, 0.5rem), checkbox-padding-x: var(--kendo-spacing-1, 0.25rem), 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	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
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	String	`$kendo-hover-bg`	`var(--kendo-color-base-hover, #ebebeb)`
Description The background color of hovered TreeView items.
$kendo-treeview-item-hover-text	String	`$kendo-hover-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
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	String	`$kendo-selected-bg`	`var(--kendo-color-primary, #ff6358)`
Description The background color of selected TreeView items.
$kendo-treeview-item-selected-text	String	`$kendo-selected-text`	`var(--kendo-color-on-primary, #ffffff)`
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	String	`$kendo-link-text`	`var(--kendo-color-primary, #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	String	`$kendo-link-hover-text`	`var(--kendo-color-primary-hover, #ea5a51)`
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	String	`$kendo-link-hover-text`	`var(--kendo-color-primary-hover, #ea5a51)`
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.

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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Upload.
$kendo-upload-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Upload.
$kendo-upload-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
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	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Upload.
$kendo-upload-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the Upload.
$kendo-upload-border	String	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the Upload.
$kendo-upload-dropzone-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Upload dropzone.
$kendo-upload-dropzone-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Upload dropzone.
$kendo-upload-dropzone-text	String	`$kendo-component-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Upload dropzone.
$kendo-upload-dropzone-bg	String	`$kendo-component-header-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of the Upload dropzone.
$kendo-upload-dropzone-border	String	`$kendo-upload-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description The border color of the Upload dropzone.
$kendo-upload-dropzone-hover-bg	String	`$kendo-hover-bg`	`var(--kendo-color-base-hover, #ebebeb)`
Description The background color of the hovered Upload dropzone.
$kendo-upload-status-text	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #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	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of an uploaded item.
$kendo-upload-item-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of an uploaded item.
$kendo-upload-multiple-items-spacing	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
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	String	`$kendo-icon-spacing`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal spacing of the Upload status icon.
$kendo-upload-icon-color	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #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	String	`$kendo-color-info`	`var(--kendo-color-info, #0058e9)`
Description The background color of the Upload progress bar.
$kendo-upload-success-text	String	`$kendo-color-success`	`var(--kendo-color-success, #37b400)`
Description The success text color of the Upload.
$kendo-upload-success-bg	String	`$kendo-color-success`	`var(--kendo-color-success, #37b400)`
Description The success background color of the Upload progress bar.
$kendo-upload-error-text	String	`$kendo-color-error`	`var(--kendo-color-error, #f31700)`
Description The error text color of the Upload.
$kendo-upload-error-bg	String	`$kendo-color-error`	`var(--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	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Window.
$kendo-window-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
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	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the Window titlebar.
$kendo-window-titlebar-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
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	String	`var( --kendo-font-size-lg, inherit )`	`var(--kendo-font-size-lg, inherit)`
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	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the content of the Window.
$kendo-window-inner-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the content of the Window.
$kendo-window-buttongroup-padding-x	String	`$kendo-actions-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Window action buttons.
$kendo-window-buttongroup-padding-y	String	`$kendo-actions-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
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	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the Window.
$kendo-window-text	String	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description The text color of the Window.
$kendo-window-border	String	`$kendo-component-border`	`var(--kendo-color-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	String	`$kendo-component-header-bg`	`var(--kendo-color-surface, #fafafa)`
Description The background color of the Window titlebar.
$kendo-window-titlebar-text	String	`$kendo-component-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`
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": var(--kendo-color-primary, #ff6358), "light": var(--kendo-color-light, #ebebeb), "dark": var(--kendo-color-dark, #3d3d3d))`
Description The theme colors map for the Window.

Wizard

Name	Type	Default value	Computed value
$kendo-wizard-padding-x	Calculation	`calc( #{$kendo-padding-md-x} * 2.5 )`	`calc(var(--kendo-spacing-2, 0.5rem) * 2.5)`
Description The horizontal padding of the Wizard.
$kendo-wizard-padding-y	Calculation	`$kendo-wizard-padding-x`	`calc(var(--kendo-spacing-2, 0.5rem) * 2.5)`
Description The vertical padding of the Wizard.
$kendo-wizard-content-padding-x	Calculation	`calc( #{$kendo-padding-md-x} * 4 )`	`calc(var(--kendo-spacing-2, 0.5rem) * 4)`
Description The horizontal padding of the Wizard content.
$kendo-wizard-content-padding-y	Calculation	`calc( #{$kendo-padding-md-y} * 8 )`	`calc(var(--kendo-spacing-1, 0.25rem) * 8)`
Description The vertical padding of the Wizard content.
$kendo-wizard-buttons-margin-x	String	`k-spacing(2.5)`	`var(--kendo-spacing-2\.5, 0.625rem)`
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	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Wizard.
$kendo-wizard-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Wizard.
$kendo-wizard-font-family	String	`var( --kendo-font-family, inherit )`	`var(--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

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!