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-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-display	Map	( 1: ( font-size: $kendo-display1-font-size, font-family: $kendo-display1-font-family, line-height: $kendo-display1-line-height, font-weight: $kendo-display1-font-weight, letter-spacing: $kendo-display1-letter-spacing ), 2: ( font-size: $kendo-display2-font-size, font-family: $kendo-display2-font-family, line-height: $kendo-display2-line-height, font-weight: $kendo-display2-font-weight, letter-spacing: $kendo-display2-letter-spacing ), 3: ( font-size: $kendo-display3-font-size, font-family: $kendo-display3-font-family, line-height: $kendo-display3-line-height, font-weight: $kendo-display3-font-weight, letter-spacing: $kendo-display3-letter-spacing ), 4: ( font-size: $kendo-display4-font-size, font-family: $kendo-display4-font-family, line-height: $kendo-display4-line-height, font-weight: $kendo-display4-font-weight, letter-spacing: $kendo-display4-letter-spacing ) )	1: "font-size":"calc(var(--kendo-font-size, 0.875rem) * 8)","font-family":"var(--kendo-font-family, inherit)","line-height":1.2,"font-weight":"var(--kendo-font-weight-light, normal)","letter-spacing":null 2: "font-size":"calc(var(--kendo-font-size, 0.875rem) * 7)","font-family":"var(--kendo-font-family, inherit)","line-height":1.2,"font-weight":"var(--kendo-font-weight-light, normal)","letter-spacing":null 3: "font-size":"calc(var(--kendo-font-size, 0.875rem) * 6)","font-family":"var(--kendo-font-family, inherit)","line-height":1.2,"font-weight":"var(--kendo-font-weight-light, normal)","letter-spacing":null 4: "font-size":"calc(var(--kendo-font-size, 0.875rem) * 5)","font-family":"var(--kendo-font-family, inherit)","line-height":1.2,"font-weight":"var(--kendo-font-weight-light, normal)","letter-spacing":null
Description The displays Map.
$kendo-disabled-bg	Null	null	null
Description The background color of disabled items.
$kendo-disabled-text	Null	null	null
Description The text color of disabled items.
$kendo-disabled-border	Null	null	null
Description The border color of disabled items.
$kendo-disabled-opacity	Number	null	0.6
Description The opacity of disabled items.
$kendo-disabled-filter	String	null	grayscale(0.1)
Description The filter of disabled items.

Accessibility

Name	Type	Default value	Computed value
$wcag-min-contrast-ratio	Number	7	4.5
Description The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
$wcag-dark	Color	black	black
Description Default dark color for WCAG 2.0.
$wcag-light	Color	white	white
Description Default light color for WCAG 2.0.

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.

Border Radius

Name	Type	Default value	Computed value
$kendo-border-radius-none	Number	k-map-get($kendo-spacing, 0)	0px
Description The none border radius used across the Components.
$kendo-border-radius-xs	Number	k-map-get($kendo-spacing, 1px)	1px
Description The extra small border radius used across the Components.
$kendo-border-radius-sm	Number	k-map-get($kendo-spacing, 0.5)	0.125rem
Description The small border radius used across the Components.
$kendo-border-radius-md	Number	k-map-get($kendo-spacing, 1)	0.25rem
Description The medium border radius used across the Components.
$kendo-border-radius-lg	Number	k-map-get($kendo-spacing, 1.5)	0.375rem
Description The large border radius used across the Components.
$kendo-border-radius-xl	Number	k-map-get($kendo-spacing, 2)	0.5rem
Description The extra large border radius used across the Components.
$kendo-border-radius-xxl	Number	k-map-get($kendo-spacing, 3)	0.75rem
Description The third largest border radius used across the Components.
$kendo-border-radius-xxxl	Number	k-map-get($kendo-spacing, 4)	1rem
Description The second largest border radius used across the Components.
$kendo-border-radius-full	Number	9999px	9999px
Description The largest border radius used across the Components.
$kendo-border-radii	Map	k-map-merge($_default-border-radii, $kendo-border-radii)	none: 0px xs: 1px sm: 0.125rem md: 0.25rem lg: 0.375rem xl: 0.5rem xxl: 0.75rem xxxl: 1rem full: 9999px
Description The global radii Map.

BottomNavigation

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-xs, normal )	var(--kendo-line-height-xs, 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.

Breadcrumb

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-font-family	String	var( --kendo-font-family, inherit )	var(--kendo-font-family, inherit)
Description The font family of the Calendar.
$kendo-calendar-font-size	String	var( --kendo-font-size, inherit )	var(--kendo-font-size, inherit)
Description The font size of the Calendar.
$kendo-calendar-line-height	String	var( --kendo-line-height, normal )	var(--kendo-line-height, normal)
Description The line height of 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-font-size	String	var( --kendo-font-size-sm, inherit )	var(--kendo-font-size-sm, inherit)
Description The font size of the header cells in the Calendar.
$kendo-calendar-header-cell-line-height	Number	2	2
Description The line 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-caption-font-weight	String	var( --kendo-font-weight-bold, normal )	var(--kendo-font-weight-bold, normal)
Description The font weight 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	String	var( --kendo-line-height-sm, normal )	var(--kendo-line-height-sm, normal)
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	var( --kendo-line-height-lg, normal )	var(--kendo-line-height-lg, 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.

ChartWizard

Name	Type	Default value	Computed value
$kendo-chart-wizard-icon-area-color	String	if($kendo-enable-color-system, k-color(primary), $kendo-color-primary)	var(--kendo-color-primary, #ff6358)
Description The color of the area around the chart type icon.
$kendo-chart-wizard-icon-area-bg	String	if($kendo-enable-color-system, k-color(primary-subtle), k-try-tint( $kendo-color-primary, 80% ))	var(--kendo-color-primary-subtle, #ffeceb)
Description The background color of the area around the chart type icon.
$kendo-chart-wizard-icon-area-border-radius	String	k-border-radius(md)	var(--kendo-border-radius-md, 0.25rem)
Description The border radius of the area around the chart type icon.
$kendo-chart-wizard-icon-area-padding	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The padding of the area around the chart type icon.
$kendo-chart-wizard-icon-area-focus-shadow	List	inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), k-try-tint( $kendo-color-primary, 25% ))	inset 0 0 0 1px var(--kendo-color-primary-emphasis, #ff9d97)
Description The box shadow of the focused area around the chart type icon.
$kendo-chart-wizard-icon-area-selected-shadow	List	inset 0 0 0 1px $kendo-chart-wizard-icon-area-color	inset 0 0 0 1px var(--kendo-color-primary, #ff6358)
Description The box shadow of the selected area around the chart type icon.
$kendo-chart-wizard-chart-type-selected-color	String	if($kendo-enable-color-system, k-color(primary), $kendo-color-primary)	var(--kendo-color-primary, #ff6358)
Description The color of the selected chart type items in the Property panel.
$kendo-chart-wizard-preview-pane-padding	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The padding of the preview pane.
$kendo-chart-wizard-property-pane-padding	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The padding of the property pane.
$kendo-chart-wizard-chart-type-spacing	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The gap between the chart type items in the Property panel.
$kendo-chart-wizard-icon-text-gap	String	k-spacing(3)	var(--kendo-spacing-3, 0.75rem)
Description The gap between the icon area and its text.

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	var( --kendo-font-size-sm, inherit )	var(--kendo-font-size-sm, inherit)
Description The font size of the Chat timestamp.
$kendo-chat-timestamp-line-height	String	var( --kendo-line-height-lg, normal )	var(--kendo-line-height-lg, normal)
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-message-meta-font-size	String	var( --kendo-font-size-sm, inherit )	var(--kendo-font-size-sm, inherit)
Description The font size of the Chat message meta text.
$kendo-chat-message-meta-line-height	String	var( --kendo-line-height-lg, normal )	var(--kendo-line-height-lg, normal)
Description The line height of the Chat message meta text.
$kendo-chat-author-font-size	String	var( --kendo-font-size-sm, inherit )	var(--kendo-font-size-sm, inherit)
Description The font size of the Chat author text.
$kendo-chat-author-line-height	String	var( --kendo-line-height-lg, normal )	var(--kendo-line-height-lg, normal)
Description The line height of the Chat author text.
$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	String	var( --kendo-line-height, normal )	var(--kendo-line-height, normal)
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	String	$kendo-chat-bubble-line-height	var(--kendo-line-height, normal)
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.
$kendo-chat-quick-reply-shadow-blur	Number	0px	0px
Description The shadow blur of the focused Chat quick reply.
$kendo-chat-quick-reply-shadow-spread	Number	2px	2px
Description The shadow spread of the focused Chat quick reply.
$kendo-chat-quick-reply-shadow-opacity	Number	.3	0.3
Description The shadow opacity of the focused 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	if($kendo-enable-color-system, k-color( base-on-surface ), $kendo-chip-solid-text)	var(--kendo-color-base-on-surface, #3d3d3d)
Description The base text color of the outline Chip.
$kendo-chip-outline-border	String	$kendo-chip-outline-text	var(--kendo-color-base-on-surface, #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-base-on-surface, #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-base-on-surface, #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.

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.
Groups The groups of the $kendo-colors Map
Group	Values		Description
misc	app-surface, on-app-surface, subtle, surface, surface-alt, border, border-alt		The Misc variable group.
base	base-subtle, base-subtle-hover, base-subtle-active, base, base-hover, base-active, base-emphasis, base-on-subtle, on-base, base-on-surface		The Base variable group.
primary	primary-subtle, primary-subtle-hover, primary-subtle-active, primary, primary-hover, primary-active, primary-emphasis, primary-on-subtle, on-primary, primary-on-surface		The Primary variable group.
secondary	secondary-subtle, secondary-subtle-hover, secondary-subtle-active, secondary, secondary-hover, secondary-active, secondary-emphasis, secondary-on-subtle, on-secondary, secondary-on-surface		The Secondary variable group.
tertiary	tertiary-subtle, tertiary-subtle-hover, tertiary-subtle-active, tertiary, tertiary-hover, tertiary-active, tertiary-emphasis, tertiary-on-subtle, on-tertiary, tertiary-on-surface		The Tertiary variable group.
info	info-subtle, info-subtle-hover, info-subtle-active, info, info-hover, info-active, info-emphasis, info-on-subtle, on-info, info-on-surface		The Info variable group.
success	success-subtle, success-subtle-hover, success-subtle-active, success, success-hover, success-active, success-emphasis, success-on-subtle, on-success, success-on-surface		The Success variable group.
warning	warning-subtle, warning-subtle-hover, warning-subtle-active, warning, warning-hover, warning-active, warning-emphasis, warning-on-subtle, on-warning, warning-on-surface		The Warning variable group.
error	error-subtle, error-subtle-hover, error-subtle-active, error, error-hover, error-active, error-emphasis, error-on-subtle, on-error, error-on-surface		The Error variable group.
light	light-subtle, light-subtle-hover, light-subtle-active, light, light-hover, light-active, light-emphasis, light-on-subtle, on-light, light-on-surface		The Light variable group.
dark	dark-subtle, dark-subtle-hover, dark-subtle-active, dark, dark-hover, dark-active, dark-emphasis, dark-on-subtle, on-dark, dark-on-surface		The Dark variable group.
inverse	inverse-subtle, inverse-subtle-hover, inverse-subtle-active, inverse, inverse-hover, inverse-active, inverse-emphasis, inverse-on-subtle, on-inverse, inverse-on-surface		The Inverse variable group.
series-a	series-a, series-a-bold, series-a-bolder, series-a-subtle, series-a-subtler		The Series A variable group.
series-b	series-b, series-b-bold, series-b-bolder, series-b-subtle, series-b-subtler		The Series B variable group.
series-c	series-c, series-c-bold, series-c-bolder, series-c-subtle, series-c-subtler		The Series C variable group.
series-d	series-d, series-d-bold, series-d-bolder, series-d-subtle, series-d-subtler		The Series D variable group.
series-e	series-e, series-e-bold, series-e-bolder, series-e-subtle, series-e-subtler		The Series E variable group.
series-f	series-f, series-f-bold, series-f-bolder, series-f-subtle, series-f-subtler		The Series F variable group.
Properties The properties of the $kendo-colors Map
Type	Name	Description
Color	app-surface	The background color of the application.
Color	on-app-surface	The text color of the application.
Color	subtle	The subtle text color.
Color	surface	The background color of the components' chrome area.
Color	surface-alt	The alternative background color of the components' chrome area.
Color	border	Тhe border color of the application.
Color	border-alt	Тhe alternative border color of the application.
Color	base-subtle	The base subtle background color variable.
Color	base-subtle-hover	The base subtle background color variable for the hover state.
Color	base-subtle-active	The base subtle background color variable for the active state.
Color	base	The base background color variable.
Color	base-hover	The base background color variable for the hover state.
Color	base-active	The base background color variable for the active state.
Color	base-emphasis	The emphasized base color variable.
Color	base-on-subtle	The text color variable for content on base subtle.
Color	on-base	The text color variable for content on base.
Color	base-on-surface	The text color variable for content on surface.
Color	primary-subtle	The primary subtle background color variable.
Color	primary-subtle-hover	The primary subtle background color variable for the hover state.
Color	primary-subtle-active	The primary subtle background color variable for the active state.
Color	primary	The primary background color variable.
Color	primary-hover	The primary background color variable for the hover state.
Color	primary-active	The primary background color variable for the active state.
Color	primary-emphasis	The emphasized primary color variable.
Color	primary-on-subtle	The text color variable for content on primary subtle.
Color	on-primary	The text color variable for content on primary.
Color	primary-on-surface	The text color variable for content on surface.
Color	secondary-subtle	The secondary subtle background color variable.
Color	secondary-subtle-hover	The secondary subtle background color variable for the hover state.
Color	secondary-subtle-active	The secondary subtle background color variable for the active state.
Color	secondary	The secondary background color variable.
Color	secondary-hover	The secondary background color variable for the hover state.
Color	secondary-active	The secondary background color variable for the active state.
Color	secondary-emphasis	The emphasized secondary color variable.
Color	secondary-on-subtle	The text color variable for content on secondary subtle.
Color	on-secondary	The text color variable for content on secondary.
Color	secondary-on-surface	The text color variable for content on surface.
Color	tertiary-subtle	The tertiary subtle background color variable.
Color	tertiary-subtle-hover	The tertiary subtle background color variable for the hover state.
Color	tertiary-subtle-active	The tertiary subtle background color variable for the active state.
Color	tertiary	The tertiary background color variable.
Color	tertiary-hover	The tertiary background color variable for the hover state.
Color	tertiary-active	The tertiary background color variable for the active state.
Color	tertiary-emphasis	The emphasized tertiary color variable.
Color	tertiary-on-subtle	The text color variable for content on tertiary subtle.
Color	on-tertiary	The text color variable for content on tertiary.
Color	tertiary-on-surface	The text color variable for content on surface.
Color	info-subtle	The info subtle background color variable.
Color	info-subtle-hover	The info subtle background color variable for the hover state.
Color	info-subtle-active	The info subtle background color variable for the active state.
Color	info	The info background color variable.
Color	info-hover	The info background color variable for the hover state.
Color	info-active	The info background color variable for the active state.
Color	info-emphasis	The emphasized info color variable.
Color	info-on-subtle	The text color variable for content on info subtle.
Color	on-info	The text color variable for content on info.
Color	info-on-surface	The text color variable for content on surface.
Color	success-subtle	The success subtle background color variable.
Color	success-subtle-hover	The success subtle background color variable for the hover state.
Color	success-subtle-active	The success subtle background color variable for the active state.
Color	success	The success background color variable.
Color	success-hover	The success background color variable for the hover state.
Color	success-active	The success background color variable for the active state.
Color	success-emphasis	The emphasized success color variable.
Color	success-on-subtle	The text color variable for content on success subtle.
Color	on-success	The text color variable for content on success.
Color	success-on-surface	The text color variable for content on surface.
Color	warning-subtle	The warning subtle background color variable.
Color	warning-subtle-hover	The warning subtle background color variable for the hover state.
Color	warning-subtle-active	The warning subtle background color variable for the active state.
Color	warning	The warning background color variable.
Color	warning-hover	The warning background color variable for the hover state.
Color	warning-active	The warning background color variable for the active state.
Color	warning-emphasis	The emphasized warning color variable.
Color	warning-on-subtle	The text color variable for content on warning subtle.
Color	on-warning	The text color variable for content on warning.
Color	warning-on-surface	The text color variable for content on surface.
Color	error-subtle	The error subtle background color variable.
Color	error-subtle-hover	The error subtle background color variable for the hover state.
Color	error-subtle-active	The error subtle background color variable for the active state.
Color	error	The error background color variable.
Color	error-hover	The error background color variable for the hover state.
Color	error-active	The error background color variable for the active state.
Color	error-emphasis	The emphasized error color variable.
Color	error-on-subtle	The text color variable for content on error subtle.
Color	on-error	The text color variable for content on error.
Color	error-on-surface	The text color variable for content on surface.
Color	light-subtle	The light subtle background color variable.
Color	light-subtle-hover	The light subtle background color variable for the hover state.
Color	light-subtle-active	The light subtle background color variable for the active state.
Color	light	The light background color variable.
Color	light-hover	The light background color variable for the hover state.
Color	light-active	The light background color variable for the active state.
Color	light-emphasis	The emphasized light color variable.
Color	light-on-subtle	The text color variable for content on light subtle.
Color	on-light	The text color variable for content on light.
Color	light-on-surface	The text color variable for content on surface.
Color	dark-subtle	The dark subtle background color variable.
Color	dark-subtle-hover	The dark subtle background color variable for the hover state.
Color	dark-subtle-active	The dark subtle background color variable for the active state.
Color	dark	The dark background color variable.
Color	dark-hover	The dark background color variable for the hover state.
Color	dark-active	The dark background color variable for the active state.
Color	dark-emphasis	The emphasized dark color variable.
Color	dark-on-subtle	The text color variable for content on dark subtle.
Color	on-dark	The text color variable for content on dark.
Color	dark-on-surface	The text color variable for content on surface.
Color	inverse-subtle	The inverse subtle background color variable.
Color	inverse-subtle-hover	The inverse subtle background color variable for the hover state.
Color	inverse-subtle-active	The inverse subtle background color variable for the active state.
Color	inverse	The inverse background color variable.
Color	inverse-hover	The inverse background color variable for the hover state.
Color	inverse-active	The inverse background color variable for the active state.
Color	inverse-emphasis	The emphasized inverse color variable.
Color	inverse-on-subtle	The text color variable for content on inverse subtle.
Color	on-inverse	The text color variable for content on inverse.
Color	inverse-on-surface	The text color variable for content on surface.
Color	series-a	The series A color variable.
Color	series-a-bold	The bold series A color variable.
Color	series-a-bolder	The bolder series A color variable.
Color	series-a-subtle	The subtle series A color variable.
Color	series-a-subtler	The subtler series A color variable.
Color	series-b	The series B color variable.
Color	series-b-bold	The bold series B color variable.
Color	series-b-bolder	The bolder series B color variable.
Color	series-b-subtle	The subtle series B color variable.
Color	series-b-subtler	The subtler series B color variable.
Color	series-c	The series C color variable.
Color	series-c-bold	The bold series C color variable.
Color	series-c-bolder	The bolder series C color variable.
Color	series-c-subtle	The subtle series C color variable.
Color	series-c-subtler	The subtler series C color variable.
Color	series-d	The series D color variable.
Color	series-d-bold	The bold series D color variable.
Color	series-d-bolder	The bolder series D color variable.
Color	series-d-subtle	The subtle series D color variable.
Color	series-d-subtler	The subtler series D color variable.
Color	series-e	The series E color variable.
Color	series-e-bold	The bold series E color variable.
Color	series-e-bolder	The bolder series E color variable.
Color	series-e-subtle	The subtle series E color variable.
Color	series-e-subtler	The subtler series E color variable.
Color	series-f	The series F color variable.
Color	series-f-bold	The bold series F color variable.
Color	series-f-bolder	The bolder series F color variable.
Color	series-f-subtle	The subtle series F color variable.
Color	series-f-subtler	The subtler series F color variable.
$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
$kendo-color-white	Color	#ffffff	#ffffff
Description The color white. Note: you cannot change this value.
$kendo-color-black	Color	#000000	#000000
Description The color black. Note: you cannot change this value.
$kendo-color-rgba-transparent	Color	rgba(0, 0, 0, 0)	rgba(0, 0, 0, 0)
Description The color transparent. Note: you cannot change this value.
$kendo-gradient-transparent-to-black	Gradient	rgba(black, 0), black	rgba(0, 0, 0, 0), black
Description A gradient that goes from transparent to black. Note: you cannot change this value.
$kendo-gradient-transparent-to-white	Gradient	rgba(white, 0), white	rgba(255, 255, 255, 0), white
Description A gradient that goes from transparent to white. Note: you cannot change this value.
$kendo-gradient-black-to-transparent	Gradient	black, rgba(black, 0)	black, rgba(0, 0, 0, 0)
Description A gradient that goes from black to transparent. Note: you cannot change this value.
$kendo-gradient-white-to-transparent	Gradient	white, rgba(white, 0)	white, rgba(255, 255, 255, 0)
Description A gradient that goes from white to transparent. Note: you cannot change this value.
$kendo-gradient-rainbow	Gradient	#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000	#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000
Description A gradient that cycles through the colors of the rainbow. Note: you cannot change this value.

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.

ColorGradient

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.

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.

DockManager

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-font-family	String	var( --kendo-font-family, inherit )	var(--kendo-font-family, inherit)
Description The font family of the Drawer.
$kendo-drawer-font-size	String	var( --kendo-font-size, inherit )	var(--kendo-font-size, inherit)
Description The font size of the Drawer.
$kendo-drawer-line-height	String	var( --kendo-line-height, normal )	var(--kendo-line-height, normal)
Description The line height of the Drawer.
$kendo-drawer-content-padding-x	Null	null	null
Description The horizontal padding of the Drawer content.
$kendo-drawer-content-padding-y	Null	null	null
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	String	var( --kendo-font-size-lg, inherit )	var(--kendo-font-size-lg, inherit)
Description The font size of the Drawer item.
$kendo-drawer-item-line-height	String	var( --kendo-line-height-lg, normal )	var(--kendo-line-height-lg, normal)
Description The line height 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.

Elevation

Name	Type	Default value	Computed value
$kendo-elevation	Map	$_default-elevation	1: 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12) 2: 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12) 3: 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12) 4: 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12) 5: 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12) 6: 0 12px 14px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.12) 7: 0 14px 16px rgba(0, 0, 0, 0.24), 0 4px 16px rgba(0, 0, 0, 0.12) 8: 0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12) 9: 0 32px 34px rgba(0, 0, 0, 0.32), 0 4px 16px rgba(0, 0, 0, 0.12)
Description The global default Elevation map.

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.

FloatingActionButton

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.

FloatingLabel

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	String	var( --kendo-font-size, inherit )	var(--kendo-font-size, inherit)
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	String	var( --kendo-font-size-sm, inherit )	var(--kendo-font-size-sm, inherit)
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	String	var( --kendo-font-size-sm, inherit )	var(--kendo-font-size-sm, inherit)
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, 0.875rem) * 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.
$kendo-zindex-loading	Number	100	100
Description The z-index of the Loading indicator.

Map

Name	Type	Default value	Computed value
$kendo-map-border-width	Number	0px	0px
Description The border width of the Map.
$kendo-map-font-size	String	var( --kendo-font-size, inherit )	var(--kendo-font-size, inherit)
Description The font size of the Map.
$kendo-map-line-height	String	var( --kendo-line-height, normal )	var(--kendo-line-height, normal)
Description The line height of the Map.
$kendo-map-font-family	String	var( --kendo-font-family, inherit )	var(--kendo-font-family, inherit)
Description The font family of the Map.
$kendo-map-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the Map.
$kendo-map-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the Map.
$kendo-map-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the Map.
$kendo-map-navigator-margin	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The margin of the Map navigator.
$kendo-map-navigator-padding	String	k-spacing(0.5)	var(--kendo-spacing-0\.5, 0.125rem)
Description The padding of the Map navigator.
$kendo-map-navigator-width	Calculation	calc( calc( #{$kendo-icon-size} * 3 ) + calc( #{$kendo-map-navigator-padding} * 2 ) )	calc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)
Description The width of the Map navigator.
$kendo-map-navigator-height	Calculation	$kendo-map-navigator-width	calc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)
Description The height of the Map navigator.
$kendo-map-navigator-border-width	Number	1px	1px
Description The border width of the Map navigator.
$kendo-map-zoom-control-margin	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The margin of the Map zoom control.
$kendo-map-zoom-control-button-padding-x	String	$kendo-button-padding-y	var(--kendo-spacing-1, 0.25rem)
Description The horizontal padding of the Map zoom control.
$kendo-map-zoom-control-button-padding-y	String	$kendo-map-zoom-control-button-padding-x	var(--kendo-spacing-1, 0.25rem)
Description The vertical padding of the Map zoom control.
$kendo-map-attribution-padding-x	String	$kendo-padding-sm-x	var(--kendo-spacing-1, 0.25rem)
Description The horizontal padding of the Map attribution.
$kendo-map-attribution-padding-y	String	$kendo-padding-sm-y	var(--kendo-spacing-0\.5, 0.125rem)
Description The vertical padding of the Map attribution.
$kendo-map-attribution-font-size	Calculation	calc( #{$kendo-map-font-size} * .75)	calc(var(--kendo-font-size, inherit) * 0.75)
Description The font size of the Map attribution.
$kendo-map-attribution-bg	String	if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 ))	color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 80%, transparent)
Description The background color of the Map attribution.
$kendo-map-marker-fill	String	$kendo-color-primary	var(--kendo-color-primary, #ff6358)
Description The fill color of the Map marker.

Mediaplayer

Name	Type	Default value	Computed value
$kendo-media-player-border-width	Number	1px	1px
Description The border width of the MediaPlayer.
$kendo-media-player-font-family	String	var( --kendo-font-family, inherit )	var(--kendo-font-family, inherit)
Description The font family of the MediaPlayer.
$kendo-media-player-font-size	String	var( --kendo-font-size, inherit )	var(--kendo-font-size, inherit)
Description The font size of the MediaPlayer.
$kendo-media-player-line-height	String	var( --kendo-line-height, normal )	var(--kendo-line-height, normal)
Description The line height of the MediaPlayer.
$kendo-media-player-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the MediaPlayer.
$kendo-media-player-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the MediaPlayer.
$kendo-media-player-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the MediaPlayer.
$kendo-media-player-titlebar-padding-x	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The horizontal padding of the MediaPlayer title.
$kendo-media-player-titlebar-padding-y	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The vertical padding of the MediaPlayer title.
$kendo-media-player-titlebar-bg	Null	null	null
Description The background color of the MediaPlayer title.
$kendo-media-player-titlebar-text	String	$kendo-media-player-bg	var(--kendo-color-surface-alt, #ffffff)
Description The text color of the MediaPlayer title.
$kendo-media-player-titlebar-border	Null	null	null
Description The border color of the MediaPlayer title.
$kendo-media-player-titlebar-gradient	List	if($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) ))	color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 70%, transparent), color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 0%, transparent)
Description The gradient of the MediaPlayer title.

Menu

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.

MenuButton

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.

PDFViewer

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.

Pager

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.

Palette

Name	Type	Default value	Computed value
$kendo-palette-gray	Map	$_default-palette-gray	1: #fafafa 2: #f5f5f5 3: #ebebeb 4: #e0e0e0 5: #d6d6d6 6: #c2c2c2 7: #adadad 8: #999999 9: #808080 10: #666666 11: #525252 12: #3d3d3d 13: #292929 14: #1f1f1f 15: #141414 white: #ffffff black: #000000
Description The Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.
$kendo-palette-coral	Map	$_default-palette-coral	1: #fff6f5 2: #ffeceb 3: #ffdedb 4: #ffc8c4 5: #ffb1ac 6: #ff9d97 7: #ff8a82 8: #ff766d 9: #ff6358 10: #ea5a51 11: #d45349 12: #bf4a42 13: #a33f38 14: #80322c 15: #5c201c
Description The Coral Palette provides colors to the Primary and Series A variable groups.
$kendo-palette-sky-blue	Map	$_default-palette-sky-blue	1: #ebf8fe 2: #d8f1fd 3: #c5eafc 4: #a3dffb 5: #81d4fA 6: #61c9f9 7: #42bff7 8: #22b3f5 9: #03a9f4 10: #039ae0 11: #028ccb 12: #027fb7 13: #026999 14: #02557a 15: #023f5c
Description The Sky Blue Palette provides colors to the Tertiary variable group.
$kendo-palette-green	Map	$_default-palette-green	1: #edf8e9 2: #dcf0d3 3: #cbe9bf 4: #b7e1a5 5: #9bda80 6: #81d15f 7: #69c740 8: #4ebe1f 9: #37b400 10: #32a500 11: #2d9600 12: #298700 13: #227100 14: #1c5a00 15: #1c5a00
Description The Green Palette provides colors to the Success variable group.
$kendo-palette-blue	Map	$_default-palette-blue	1: #e9f0fd 2: #d2e2fb 3: #bdd4f8 4: #9ec0f6 5: #80acf4 6: #6098f2 7: #4082ef 8: #206eec 9: #0058e9 10: #0052d6 11: #004ac2 12: #0042af 13: #003892 14: #002c75 15: #002259
Description The Blue Palette provides colors to the Info variable group.
$kendo-palette-yellow	Map	$_default-palette-yellow	1: #fffae9 2: #fff4d3 3: #ffeebd 4: #ffe79e 5: #ffe080 6: #ffd760 7: #ffd040 8: #ffc720 9: #ffc000 10: #eaaf00 11: #d49f00 12: #bf9000 13: #a07800 14: #806000 15: #5e4700
Description The Yellow Palette provides colors to the Warning variable group.
$kendo-palette-red	Map	$_default-palette-red	1: #feeeed 2: #fcddda 3: #fbc8c3 4: #faaaa2 5: #f98b80 6: #f76f60 7: #f65140 8: #f43520 9: #f31700 10: #df1600 11: #ca1400 12: #b61100 13: #980f00 14: #7a0c00 15: #7a0c00
Description The Red Palette provides colors to the Error variable group.
$kendo-palette-lemon-yellow	Map	$_default-palette-lemon-yellow	1: #fffcf1 2: #fffae2 3: #fff7d4 4: #fff4c2 5: #fff0b1 6: #ffed9d 7: #ffe989 8: #ffe676 9: #ffe162 10: #ead05a 11: #d4bc52 12: #bfa94a 13: #a3913f 14: #807131 15: #5c5223
Description The Lemon Yellow Palette provides colors to the Series B variable group.
$kendo-palette-spring-green	Map	$_default-palette-spring-green	1: #effaf3 2: #e0f6e8 3: #d1f1dd 4: #c0edd1 5: #a6e8c0 6: #8fe2af 7: #79dda0 8: #62d78f 9: #4cd180 10: #46c074 11: #3fae6a 12: #399d60 13: #2f834f 14: #266940 15: #1c4f30
Description The Spring Green Palette provides colors to the Series C variable group.
$kendo-palette-royal-blue	Map	$_default-palette-royal-blue	1: #f0f2ff 2: #e1e4fe 3: #d2d7fe 4: #bbc3fd 5: #a5affd 6: #8e9bfc 7: #7887fb 8: #6173fb 9: #4b5ffa 10: #4558e5 11: #3f50d1 12: #3847bc 13: #2f3c9d 14: #26307d 15: #1c245e
Description The Royal Blue Palette provides colors to the Series D variable group.
$kendo-palette-lavender-purple	Map	$_default-palette-lavender-purple	1: #f7f0ff 2: #f0e0ff 3: #e8d1ff 4: #dfbfff 5: #d6acff 6: #cc97ff 7: #c182ff 8: #b76dff 9: #ac58ff 10: #9e51ea 11: #8f49d4 12: #8142bf 13: #6b37a0 14: #562c80 15: #3f205e
Description The Lavender Purple Palette provides colors to the Series E variable group.
$kendo-palette-flamingo-pink	Map	$_default-palette-flamingo-pink	1: #fff0f5 2: #ffe1eb 3: #ffd1e1 4: #ffbfd6 5: #ffacc9 6: #ff97bb 7: #ff82ae 8: #ff6da0 9: #ff5892 10: #ea5186 11: #d4497a 12: #bf426e 13: #a0375c 14: #802c49 15: #5e2036
Description The Flamingo Pink Palette provides colors to the Series F variable group.

Panel

Name	Type	Default value	Computed value
$kendo-panel-border-radius	String	k-border-radius(md)	var(--kendo-border-radius-md, 0.25rem)
Description The border radius of the Panel.
$kendo-panel-border-width	Number	1px	1px
Description The width of the border around the Panel.
$kendo-panel-border-style	String	solid	solid
Description The style of the border around the Panel.
$kendo-panel-header-padding-inline	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The inline padding of the Panel header.
$kendo-panel-header-padding-block	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The block padding of the Panel header.
$kendo-panel-content-padding-inline	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The inline padding of the Panel content.
$kendo-panel-content-padding-block	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The block padding of the Panel content.
$kendo-panel-text	String	var(--kendo-component-text, #{$kendo-component-text})	var(--kendo-component-text, var(--kendo-color-on-app-surface, #3d3d3d))
Description The text color of the Panel.
$kendo-panel-bg	String	var(--kendo-component-bg, #{$kendo-component-bg})	var(--kendo-component-bg, var(--kendo-color-surface-alt, #ffffff))
Description The background color of the Panel.
$kendo-panel-border	String	var(--kendo-component-border, #{$kendo-component-border})	var(--kendo-component-border, var(--kendo-color-border, rgba(0, 0, 0, 0.08)))
Description The color of the border around the Panel.

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.

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.

Pivotgrid

Name	Type	Default value	Computed value
$kendo-pivotgrid-spacer	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The spacer of the PivotGrid.
$kendo-pivotgrid-padding-x	Null	null	null
Description The horizontal padding of the PivotGrid.
$kendo-pivotgrid-padding-y	Null	null	null
Description The vertical of the PivotGrid.
$kendo-pivotgrid-font-family	String	var( --kendo-font-family, inherit )	var(--kendo-font-family, inherit)
Description The font family of the PivotGrid.
$kendo-pivotgrid-font-size	String	var( --kendo-font-size, inherit )	var(--kendo-font-size, inherit)
Description The font size of the PivotGrid.
$kendo-pivotgrid-line-height	String	var( --kendo-line-height, normal )	var(--kendo-line-height, normal)
Description The line height of the PivotGrid.
$kendo-pivotgrid-border-width	Number	1px	1px
Description The border width of the PivotGrid.
$kendo-pivotgrid-icon-spacing	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The icon spacing of the PivotGrid.
$kendo-pivotgrid-row-header-width	Number	300px	300px
Description The default width of the PivotGrid row header.
$kendo-pivotgrid-column-header-height	Number	75px	75px
Description The default height of the PivotGrid column header.
$kendo-pivotgrid-cell-padding-x	String	$kendo-table-md-cell-padding-x	var(--kendo-spacing-3, 0.75rem)
Description The horizontal padding of the PivotGrid cell.
$kendo-pivotgrid-cell-padding-y	String	$kendo-table-md-cell-padding-y	var(--kendo-spacing-2, 0.5rem)
Description The vertical padding of the PivotGrid cell.
$kendo-pivotgrid-cell-border-width	Number	1px	1px
Description The border width of the PivotGrid cell.
$kendo-pivotgrid-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the PivotGrid.
$kendo-pivotgrid-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the PivotGrid.
$kendo-pivotgrid-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the PivotGrid.
$kendo-pivotgrid-alt-border	String	if($kendo-enable-color-system, k-color( border-alt ), k-try-shade($kendo-pivotgrid-border, 2))	var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16))
Description The alt border color of the PivotGrid.
$kendo-pivotgrid-headers-bg	String	$kendo-component-header-bg	var(--kendo-color-surface, #fafafa)
Description The background color of the PivotGrid header.
$kendo-pivotgrid-headers-text	String	$kendo-component-header-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the PivotGrid header.
$kendo-pivotgrid-headers-border	String	$kendo-component-header-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the PivotGrid header.
$kendo-pivotgrid-total-bg	String	if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 ))	var(--kendo-color-base-subtle, #ebebeb)
Description The background color of the PivotGrid total cells.
$kendo-pivotgrid-total-text	String	$kendo-component-header-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the PivotGrid total cells.
$kendo-pivotgrid-total-border	String	$kendo-component-header-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the PivotGrid total cells.
$kendo-pivotgrid-hover-bg	String	if($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-pivotgrid-bg, 7%))	var(--kendo-color-base-hover, #ebebeb)
Description The hover background color of the PivotGrid.
$kendo-pivotgrid-hover-text	Null	null	null
Description The hover text color of the PivotGrid.
$kendo-pivotgrid-hover-border	Null	null	null
Description The hover border color of the PivotGrid.
$kendo-pivotgrid-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 selected background color of the PivotGrid.
$kendo-pivotgrid-selected-text	Null	null	null
Description The selected text color of the PivotGrid.
$kendo-pivotgrid-selected-border	Null	null	null
Description The selected border color of the PivotGrid.
$kendo-pivotgrid-focus-shadow	List	$kendo-list-item-focus-shadow	inset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description The focus shadow of the PivotGrid.
$kendo-pivotgrid-configurator-padding-x	Null	null	null
Description The horizontal padding of the PivotGrid configurator.
$kendo-pivotgrid-configurator-padding-y	Null	null	null
Description The vertical padding of the PivotGrid configurator.
$kendo-pivotgrid-configurator-border-width	Number	1px	1px
Description The border width of the PivotGrid configurator.
$kendo-pivotgrid-configurator-header-padding-x	String	$kendo-pivotgrid-spacer	var(--kendo-spacing-4, 1rem)
Description The horizontal padding of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-padding-y	Calculation	calc( #{$kendo-pivotgrid-spacer} * .75 )	calc(var(--kendo-spacing-4, 1rem) * 0.75)
Description The vertical padding of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-font-size	Number	18px	18px
Description The font size of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-font-weight	Number	500	500
Description The font weight of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-content-padding-x	String	$kendo-pivotgrid-spacer	var(--kendo-spacing-4, 1rem)
Description The horizontal padding of the PivotGrid configurator content.
$kendo-pivotgrid-configurator-content-padding-y	String	k-spacing(0.5)	var(--kendo-spacing-0\.5, 0.125rem)
Description The vertical padding of the PivotGrid configurator content.
$kendo-pivotgrid-configurator-fields-margin-x	String	k-spacing(0)	var(--kendo-spacing-0, 0px)
Description The horizontal margin of the PivotGrid configurator fields.
$kendo-pivotgrid-configurator-fields-margin-y	Calculation	calc( #{$kendo-pivotgrid-spacer} / 2 )	calc(var(--kendo-spacing-4, 1rem) / 2)
Description The vertical margin of the PivotGrid configurator fields.
$kendo-pivotgrid-configurator-vertical-width	Number	320px	320px
Description The default width of the PivotGrid vertical configurator.
$kendo-pivotgrid-configurator-horizontal-height	Number	420px	420px
Description The default height of the PivotGrid horizontal configurator.
$kendo-pivotgrid-configurator-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the PivotGrid configurator.
$kendo-pivotgrid-configurator-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the PivotGrid configurator.
$kendo-pivotgrid-configurator-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the PivotGrid configurator.
$kendo-pivotgrid-configurator-header-bg	Null	null	null
Description The background color of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-text	String	$kendo-component-header-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-border	Null	null	null
Description The border color of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-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 PivotGrid configurator.
$kendo-pivotgrid-configurator-end-shadow	String	$kendo-pivotgrid-configurator-shadow	var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description The end shadow of the PivotGrid configurator.
$kendo-pivotgrid-configurator-start-shadow	String	$kendo-pivotgrid-configurator-shadow	var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description The start shadow of the PivotGrid configurator.
$kendo-pivotgrid-configurator-top-shadow	String	$kendo-pivotgrid-configurator-shadow	var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description The top shadow of the PivotGrid configurator.
$kendo-pivotgrid-configurator-bottom-shadow	String	$kendo-pivotgrid-configurator-shadow	var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description The bottom shadow of the PivotGrid configurator.
$kendo-pivotgrid-configurator-button-padding-x	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The horizontal padding of the PivotGrid configurator button.
$kendo-pivotgrid-configurator-button-padding-y	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The vertical padding of the PivotGrid configurator button.
$kendo-pivotgrid-configurator-button-border-width	Number	1px	1px
Description The border width of the PivotGrid configurator button.
$kendo-pivotgrid-configurator-button-size	Calculation	calc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) )	calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)
Description The size of the PivotGrid configurator button.
$kendo-pivotgrid-calculated-field-padding-x	String	$kendo-pivotgrid-spacer	var(--kendo-spacing-4, 1rem)
Description The horizontal padding of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-padding-y	String	$kendo-pivotgrid-spacer	var(--kendo-spacing-4, 1rem)
Description The vertical padding of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-border-width	Number	1px	1px
Description The border width of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-border-radius	String	k-border-radius(md)	var(--kendo-border-radius-md, 0.25rem)
Description The border radius of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-gap	String	$kendo-pivotgrid-spacer	var(--kendo-spacing-4, 1rem)
Description The spacing of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-header-bg	Null	null	null
Description The background color of the PivotGrid calculated field header.
$kendo-pivotgrid-calculated-field-header-text	String	$kendo-component-header-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the PivotGrid calculated field header.
$kendo-pivotgrid-calculated-field-header-border	Null	null	null
Description The border color of the PivotGrid calculated field header.
$kendo-pivotgrid-treeview-padding-x	Calculation	calc( #{$kendo-pivotgrid-spacer} / 2 )	calc(var(--kendo-spacing-4, 1rem) / 2)
Description The horizontal padding of the PivotGrid treeview.
$kendo-pivotgrid-treeview-padding-y	String	k-spacing(0)	var(--kendo-spacing-0, 0px)
Description The vertical padding of the PivotGrid treeview.

Popover

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.

Popup

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	String	var( --kendo-line-height-xs, normal )	var(--kendo-line-height-xs, normal)
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 AIPrompt.
$kendo-prompt-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the AIPrompt.
$kendo-prompt-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the AIPrompt.
$kendo-prompt-header-text	String	$kendo-component-header-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the AIPrompt header.
$kendo-prompt-header-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the AIPrompt 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 AIPrompt header.
$kendo-prompt-content-padding-y	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The vertical padding of the AIPrompt content.
$kendo-prompt-content-padding-x	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The horizontal padding of the AIPrompt content.
$kendo-prompt-content-spacing	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The spacing between the items of the AIPrompt content.
$kendo-prompt-content-text	String	$kendo-component-header-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the AIPrompt content.
$kendo-prompt-content-bg	String	$kendo-component-header-bg	var(--kendo-color-surface, #fafafa)
Description The background color of the AIPrompt 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 AIPrompt content.
$kendo-prompt-expander-spacing	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The spacing between the items of the AIPrompt content expander.
$kendo-prompt-suggestion-padding-y	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The vertical padding of the AIPrompt suggestion container.
$kendo-prompt-suggestion-padding-x	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The horizontal padding of the AIPrompt 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 AIPrompt suggestion container.
$kendo-prompt-suggestion-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the AIPrompt suggestion container.
$kendo-prompt-suggestion-bg	String	$kendo-body-bg	var(--kendo-color-app-surface, #ffffff)
Description The background color of the AIPrompt 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 AIPrompt 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 AIPrompt 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.

Scheduler

Name	Type	Default value	Computed value
$kendo-scheduler-border-width	Number	1px	1px
Description The width of the border around the Scheduler.
$kendo-scheduler-font-family	String	var( --kendo-font-family, inherit )	var(--kendo-font-family, inherit)
Description The font family of the Scheduler.
$kendo-scheduler-font-size	String	var( --kendo-font-size, inherit )	var(--kendo-font-size, inherit)
Description The font size of the Scheduler.
$kendo-scheduler-line-height	String	var( --kendo-line-height, normal )	var(--kendo-line-height, normal)
Description The line height of the Scheduler.
$kendo-scheduler-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the Scheduler.
$kendo-scheduler-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the Scheduler.
$kendo-scheduler-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the Scheduler.
$kendo-scheduler-toolbar-bg	String	$kendo-toolbar-bg	var(--kendo-color-surface, #fafafa)
Description The background color of the Scheduler ToolBar.
$kendo-scheduler-toolbar-text	String	$kendo-toolbar-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the Scheduler ToolBar.
$kendo-scheduler-toolbar-border	String	$kendo-toolbar-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the Scheduler ToolBar.
$kendo-scheduler-toolbar-gradient	Null	$kendo-toolbar-gradient	null
Description The gradient of the Scheduler ToolBar.
$kendo-scheduler-footer-bg	String	$kendo-toolbar-bg	var(--kendo-color-surface, #fafafa)
Description The background color of the Scheduler footer.
$kendo-scheduler-footer-text	String	$kendo-toolbar-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the Scheduler footer.
$kendo-scheduler-footer-border	String	$kendo-toolbar-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the Scheduler footer.
$kendo-scheduler-footer-gradient	Null	$kendo-toolbar-gradient	null
Description The gradient of the Scheduler footer.
$kendo-scheduler-event-min-height	Number	25px	25px
Description The minimum height of the Scheduler event.
$kendo-scheduler-event-border-radius	String	k-border-radius(md)	var(--kendo-border-radius-md, 0.25rem)
Description The border radius of the Scheduler event.
$kendo-scheduler-event-line-height	Calculation	calc( #{$kendo-scheduler-event-min-height} - (2 * #{$kendo-padding-md-y}) )	calc(25px - 2 * var(--kendo-spacing-1, 0.25rem))
Description The line height of the Scheduler event.
$kendo-scheduler-event-bg	String	if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 ))	var(--kendo-color-primary, #ff6358)
Description The background color of the Scheduler event.
$kendo-scheduler-event-text	String	$kendo-selected-text	var(--kendo-color-on-primary, #ffffff)
Description The text color of the Scheduler event.
$kendo-scheduler-event-border	Null	null	null
Description The border color of the Scheduler event.
$kendo-scheduler-event-gradient	Null	null	null
Description The gradient of the Scheduler event.
$kendo-scheduler-event-shadow	Null	null	null
Description The shadow of the Scheduler event.
$kendo-scheduler-event-hover-bg	Null	null	null
Description The background color of the hovered Scheduler event.
$kendo-scheduler-event-hover-text	Null	null	null
Description The text color of the hovered Scheduler event.
$kendo-scheduler-event-hover-border	Null	null	null
Description The border color of the hovered Scheduler event.
$kendo-scheduler-event-hover-gradient	Null	null	null
Description The gradient of the hovered Scheduler event.
$kendo-scheduler-event-hover-shadow	Null	null	null
Description The shadow of the hovered Scheduler event.
$kendo-scheduler-event-selected-bg	String	if($kendo-enable-color-system, k-color( primary-active ), $kendo-selected-bg)	var(--kendo-color-primary-active, #d45349)
Description The background color of the selected Scheduler event.
$kendo-scheduler-event-selected-text	String	$kendo-selected-text	var(--kendo-color-on-primary, #ffffff)
Description The text color of the selected Scheduler event.
$kendo-scheduler-event-selected-border	Null	null	null
Description The border color of the selected Scheduler event.
$kendo-scheduler-event-selected-gradient	Null	null	null
Description The gradient of the selected Scheduler event.
$kendo-scheduler-event-selected-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 shadow of the selected Scheduler event.
$kendo-scheduler-event-ongoing-shadow	List	inset 0px 0px 0px 1px #ff0000	inset 0px 0px 0px 1px #ff0000
Description The shadow of the ongoing Scheduler event.
$kendo-scheduler-cell-padding-x	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The horizontal padding of the Scheduler cell.
$kendo-scheduler-cell-padding-y	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The vertical padding of the Scheduler cell.
$kendo-scheduler-cell-height	Calculation	$kendo-line-height-em	calc(1.4285714286 * 1em)
Description The height of the Scheduler cell.
$kendo-scheduler-datecolumn-width	Number	12em	12em
Description The width of the Scheduler date column.
$kendo-scheduler-timecolumn-width	Number	11em	11em
Description The width of the Scheduler time column.
$kendo-scheduler-nonwork-bg	String	if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 ))	var(--kendo-color-base, #f5f5f5)
Description The background color of the non-working hours in the Scheduler.
$kendo-scheduler-nonwork-text	Null	null	null
Description The text color of the non-working hours in the Scheduler.
$kendo-scheduler-weekend-bg	Null	null	null
Description The background color of the weekends in the Scheduler.
$kendo-scheduler-weekend-text	Null	null	null
Description The text color of the weekends in the Scheduler.
$kendo-scheduler-othermonth-bg	String	if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 ))	var(--kendo-color-base, #f5f5f5)
Description The background color of the preceding/subsequent month cells in the Calendar.
$kendo-scheduler-othermonth-text	Null	null	null
Description The text color of the preceding/subsequent month cells in the Calendar.
$kendo-scheduler-yearview-padding-x	String	k-spacing(3)	var(--kendo-spacing-3, 0.75rem)
Description The horizontal padding of the year view in the Scheduler.
$kendo-scheduler-yearview-padding-y	String	$kendo-scheduler-yearview-padding-x	var(--kendo-spacing-3, 0.75rem)
Description The vertical padding of the year view in the Scheduler.
$kendo-scheduler-yearview-calendar-gap	String	k-spacing(3)	var(--kendo-spacing-3, 0.75rem)
Description The spacing between the calendars of the year view in the Scheduler.
$kendo-scheduler-yearview-indicator-size	Number	3px	3px
Description The days with events indicator size of the year view in the Scheduler.
$kendo-scheduler-yearview-indicator-calc-offset-top	Calculation	calc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2))	calc(32px - 0.25em * 2)
Description The top position of the days with events indicator of the year view in the Scheduler.
$kendo-scheduler-yearview-indicator-calc-offset-left	Calculation	calc( 50% - #{k-math-div( $kendo-scheduler-yearview-indicator-size, 2 )} )	calc(50% - 1.5px)
Description The left position of the days with events indicator of the year view in the Scheduler.
$kendo-scheduler-yearview-indicator-border-radius	Number	50%	50%
Description The border radius of the days with events indicator of the year view in the Scheduler.
$kendo-scheduler-yearview-indicator-bg	String	$kendo-color-primary	var(--kendo-color-primary, #ff6358)
Description The background color of the days with events indicator of the year view in the Scheduler.
$kendo-scheduler-yearview-indicator-selected-bg	String	$kendo-color-primary-contrast	var(--kendo-color-on-primary, #ffffff)
Description The background color of the selected days with events indicator of the year view in the Scheduler.
$kendo-scheduler-tooltip-padding-x	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The horizontal padding of the Scheduler Tooltip.
$kendo-scheduler-tooltip-padding-y	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The vertical padding of the Scheduler Tooltip.
$kendo-scheduler-tooltip-border-width	Number	0	0
Description The width of the border of the Scheduler Tooltip.
$kendo-scheduler-tooltip-bg	String	$kendo-color-primary-contrast	var(--kendo-color-on-primary, #ffffff)
Description The background color of the Scheduler Tooltip.
$kendo-scheduler-tooltip-text	String	$kendo-base-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the Scheduler Tooltip.
$kendo-scheduler-tooltip-border	Null	null	null
Description The border color of the Scheduler Tooltip.
$kendo-scheduler-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 shadow of the Scheduler Tooltip.
$kendo-scheduler-tooltip-title-margin-y	String	k-spacing(3)	var(--kendo-spacing-3, 0.75rem)
Description The vertical margin of the Scheduler Tooltip title.
$kendo-scheduler-tooltip-month-font-size	String	var( --kendo-font-size-sm, inherit )	var(--kendo-font-size-sm, inherit)
Description The font size of the month inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-day-font-size	Calculation	calc( var( --kendo-font-size-sm, .75rem ) * 2 )	calc(var(--kendo-font-size-sm, 0.75rem) * 2)
Description The font size of the day inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-events-max-height	Number	250px	250px
Description The max height of the events inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-events-gap	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The spacing between the events inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-event-padding-x	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The horizontal padding of the events inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-event-padding-y	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The vertical padding of the events inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-event-border-radius	String	k-border-radius(md)	var(--kendo-border-radius-md, 0.25rem)
Description The border radius of the events inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-event-gap	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The spacing between the events items inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-callout-text	String	$kendo-scheduler-tooltip-bg	var(--kendo-color-on-primary, #ffffff)
Description The color of the Scheduler Tooltip callout.

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-emphasis ), k-try-shade( $kendo-component-bg, 1 ))	var(--kendo-color-base-emphasis, #c2c2c2)
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

Spacing

Name	Type	Default value	Computed value
$kendo-spacing	Map	$_default-spacing	0: 0px 1: 0.25rem 2: 0.5rem 3: 0.75rem 4: 1rem 5: 1.25rem 6: 1.5rem 7: 1.75rem 8: 2rem 9: 2.25rem 10: 2.5rem 11: 2.75rem 12: 3rem 13: 3.25rem 14: 3.5rem 15: 3.75rem 16: 4rem 17: 4.25rem 18: 4.5rem 19: 4.75rem 20: 5rem 21: 5.25rem 22: 5.5rem 23: 5.75rem 24: 6rem 25: 7rem 26: 8rem 27: 9rem 28: 10rem 29: 11rem 30: 12rem 1px: 1px 0.5: 0.125rem 1.5: 0.375rem 2.5: 0.625rem 3.5: 0.875rem 4.5: 1.125rem 5.5: 1.375rem 6.5: 1.625rem 7.5: 1.875rem
Description The global default Spacing map.

SplitButton

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), #8f8f8f)	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), #8f8f8f)	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-wrapper-padding-x	String	k-spacing(0)	var(--kendo-spacing-0, 0px)
Description The horizontal padding of the TabStrip wrapper.
$kendo-tabstrip-wrapper-padding-y	String	k-spacing(0)	var(--kendo-spacing-0, 0px)
Description The vertical padding of the TabStrip wrapper.
$kendo-tabstrip-wrapper-border-width	Number	0px	0px
Description The border width around the TabStrip wrapper.
$kendo-tabstrip-font-family	String	var( --kendo-font-family, inherit )	var(--kendo-font-family, inherit)
Description The font family of the TabStrip.
$kendo-tabstrip-font-size	String	var( --kendo-font-size, inherit )	var(--kendo-font-size, inherit)
Description The font size of the TabStrip.
$kendo-tabstrip-line-height	String	var( --kendo-line-height, normal )	var(--kendo-line-height, normal)
Description The line height of the TabStrip.
$kendo-tabstrip-border-width	Number	1px	1px
Description The border width around the TabStrip.
$kendo-tabstrip-wrapper-bg	Null	null	null
Description The background color of the TabStrip wrapper.
$kendo-tabstrip-wrapper-text	Null	null	null
Description The text color of the TabStrip wrapper.
$kendo-tabstrip-wrapper-border	Null	null	null
Description The border color of the TabStrip wrapper.
$kendo-tabstrip-bg	Null	null	null
Description The background color of the TabStrip.
$kendo-tabstrip-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the TabStrip.
$kendo-tabstrip-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the TabStrip.
$kendo-tabstrip-item-padding-x	String	k-spacing(3)	var(--kendo-spacing-3, 0.75rem)
Description The horizontal padding of the TabStrip items.
$kendo-tabstrip-item-padding-y	String	k-spacing(1.5)	var(--kendo-spacing-1\.5, 0.375rem)
Description The vertical padding of the TabStrip items.
$kendo-tabstrip-item-border-width	Number	1px	1px
Description The border width around the TabStrip items.
$kendo-tabstrip-item-border-radius	String	k-border-radius(md)	var(--kendo-border-radius-md, 0.25rem)
Description The border radius of the TabStrip items.
$kendo-tabstrip-item-gap	String	k-spacing(0)	var(--kendo-spacing-0, 0px)
Description The gap between the TabStrip items.
$kendo-tabstrip-item-bg	Null	null	null
Description The background color of the TabStrip items.
$kendo-tabstrip-item-text	String	$kendo-link-text	var(--kendo-color-primary, #ff6358)
Description The text color of the TabStrip items.
$kendo-tabstrip-item-border	Null	null	null
Description The border color of the TabStrip items.
$kendo-tabstrip-item-gradient	Null	null	null
Description The gradient of the TabStrip items.
$kendo-tabstrip-item-hover-bg	Null	null	null
Description The background color of the hovered TabStrip items.
$kendo-tabstrip-item-hover-text	String	$kendo-link-hover-text	var(--kendo-color-primary-hover, #ea5a51)
Description The text color of the hovered TabStrip items.
$kendo-tabstrip-item-hover-border	Null	null	null
Description The border color of the hovered TabStrip items.
$kendo-tabstrip-item-hover-gradient	Null	null	null
Description The gradient of the hovered TabStrip items.
$kendo-tabstrip-item-selected-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the selected TabStrip items.
$kendo-tabstrip-item-selected-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the selected TabStrip items.
$kendo-tabstrip-item-selected-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the selected TabStrip items.
$kendo-tabstrip-item-selected-gradient	Null	null	null
Description The gradient of the selected TabStrip items.
$kendo-tabstrip-item-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 TabStrip items.
$kendo-tabstrip-item-dragging-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 dragged TabStrip items.
$kendo-tabstrip-item-disabled-bg	Null	null	null
Description The background color of the disabled TabStrip items.
$kendo-tabstrip-item-disabled-text	Null	null	null
Description The text color of the disabled TabStrip items.
$kendo-tabstrip-item-disabled-border	Null	null	null
Description The border color of the disabled TabStrip items.
$kendo-tabstrip-item-disabled-gradient	Null	null	null
Description The gradient of the disabled TabStrip items.
$kendo-tabstrip-item-disabled-opacity	Null	null	null
Description The opacity of the disabled TabStrip items.
$kendo-tabstrip-item-disabled-filter	Null	null	null
Description The filter of the disabled TabStrip items.
$kendo-tabstrip-indicator-size	Null	null	null
Description The border width of the TabStrip indicator.
$kendo-tabstrip-indicator-color	Null	null	null
Description The border color of the TabStrip ripple.
$kendo-tabstrip-content-padding-x	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The horizontal padding of the TabStrip content.
$kendo-tabstrip-content-padding-y	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The vertical padding of the TabStrip content.
$kendo-tabstrip-content-border-width	Number	1px	1px
Description The border width around the TabStrip content.
$kendo-tabstrip-content-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the TabStrip content.
$kendo-tabstrip-content-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the TabStrip content.
$kendo-tabstrip-content-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the TabStrip content.
$kendo-tabstrip-content-focus-border	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The border color of the focused TabStrip 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.

TimeMarker

Name	Type	Default value	Computed value
$kendo-current-time-width	Number	1px	1px
Description The border width of the current time indicator.
$kendo-current-time-color	Color	#ff0000	#ff0000
Description The color of the current time indicator.

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.

Toolbar

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.

Tooltip

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	String	var( --kendo-line-height-sm, normal )	var(--kendo-line-height-sm, normal)
Description The line height of the Tooltip.
$kendo-tooltip-title-font-size	Calculation	calc( ( var( --kendo-font-size, .875rem ) * 1.25 ) )	calc(var(--kendo-font-size, 0.875rem) * 1.25)
Description The font size of the Tooltip title.
$kendo-tooltip-title-line-height	String	var( --kendo-line-height-xs, normal )	var(--kendo-line-height-xs, normal)
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
D