Styling & Themes / Default Theme / Customization /

Customization

Variables

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

Common

Name	Type	Default value	Computed value
$kendo-icon-size	Number	`16px`	`16px`
Description Icon size.
$kendo-icon-size-xs	Calculation	`calc( #{$kendo-icon-size} * .75 )`	`calc(16px * 0.75)`
Description xtra small icon size.
$kendo-icon-size-sm	Calculation	`calc( #{$kendo-icon-size} * .875 )`	`calc(16px * 0.875)`
Description Small icon size.
$kendo-icon-size-md	Number	`$kendo-icon-size`	`16px`
Description Medium icon size.
$kendo-icon-size-lg	Calculation	`calc( #{$kendo-icon-size} * 1.25 )`	`calc(16px * 1.25)`
Description Large icon size.
$kendo-icon-size-xl	Calculation	`calc( #{$kendo-icon-size} * 1.5 )`	`calc(16px * 1.5)`
Description Extra large icon size.
$kendo-icon-size-xxl	Calculation	`calc( #{$kendo-icon-size} * 2 )`	`calc(16px * 2)`
Description Double extra large icon size.
$kendo-icon-size-xxxl	Calculation	`calc( #{$kendo-icon-size} * 3 )`	`calc(16px * 3)`
Description Triple extra large icon size.
$kendo-body-bg	String	`$kendo-color-white`	`var(--kendo-color-app-surface, #ffffff)`
Description Background color of the body.
$kendo-body-text	String	`#424242`	`var(--kendo-color-on-app-surface, #3d3d3d)`
Description Text color of the body.
$kendo-subtle-text	String	`#666666`	`var(--kendo-color-subtle, #666666)`
Description Subtle text color.
$kendo-link-text	String	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`
Description Text color of the links.
$kendo-link-hover-text	String	`$kendo-color-primary-darker`	`var(--kendo-color-primary-hover, #ea5a51)`
Description Text color of the links on hover.
$kendo-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Horizontal padding.
$kendo-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description Vertical padding.
$kendo-padding-sm-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description Small horizontal padding.
$kendo-padding-sm-y	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description Small vertical padding.
$kendo-padding-md-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Medium horizontal padding.
$kendo-padding-md-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description Medium vertical padding.
$kendo-padding-lg-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description Large horizontal padding.
$kendo-padding-lg-y	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description Large vertical padding.
$kendo-focus-shadow	List	`inset 0 0 0 2px rgba(0, 0, 0, .13)`	`inset 0 0 0 2px rgba(0, 0, 0, 0.13)`
Description Box shadow of focused items.
$kendo-transition	List	`color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out`	`color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out`
Description Transition used across all components.
$kendo-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.

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`

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

Customization