Styling & Themes / Bootstrap Theme / Customization /

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

Customization

Variables

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

Common

Name	Type	Default value	Computed value
$kendo-border-radius	Number	`$border-radius`	`0.375rem`
Description Border radius for all components.
$kendo-base-bg	Color	`$gray-100`	`#f8f9fa`
Description The background of the components' chrome area.
$kendo-base-text	Color	`$kendo-body-text`	`#212529`
Description The text color of the components' chrome area.
$kendo-base-border	Color	`k-try-shade( $kendo-base-bg, 1 )`	`#e4e5e6`
Description The border color of the components' chrome area.
$kendo-base-gradient	Null	`null`	`null`
Description The gradient background of the components' chrome area.
$kendo-hover-bg	Color	`$gray-200`	`#e9ecef`
Description The background of hovered items.
$kendo-hover-text	Color	`$kendo-base-text`	`#212529`
Description The text color of hovered items.
$kendo-hover-border	Color	`k-try-shade( $kendo-hover-bg, 1 )`	`#d6d9dc`
Description The border color of hovered items.
$kendo-hover-gradient	Null	`null`	`null`
Description The gradient background of hovered items.
$kendo-selected-bg	Color	`$kendo-color-primary`	`#0d6efd`
Description The background of selected items.
$kendo-selected-text	Color	`k-contrast-color( $kendo-selected-bg )`	`white`
Description The text color of selected items.
$kendo-selected-border	Color	`k-try-shade( $kendo-selected-bg, 1 )`	`#0c65e9`
Description The border color of selected items.
$kendo-selected-gradient	Null	`null`	`null`
Description The gradient background of selected items.
$kendo-chip-lg-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the large Chip.

Appbar

Name	Type	Default value	Computed value
$kendo-appbar-margin-x	Null	`null`	`null`
Description The horizontal margin of the AppBar.
$kendo-appbar-margin-y	Null	`null`	`null`
Description The vertical margin of the AppBar.
$kendo-appbar-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description The horizontal padding of the AppBar.
$kendo-appbar-padding-y	Number	`k-map-get( $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	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the AppBar.
$kendo-appbar-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the AppBar.
$kendo-appbar-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the AppBar.
$kendo-appbar-gap	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description The spacing between the AppBar sections.
$kendo-appbar-light-bg	Color	`$kendo-color-light`	`#f8f9fa`
Description The background color of the AppBar based on light theme color.
$kendo-appbar-light-text	Color	`k-contrast-color( $kendo-color-light )`	`black`
Description The text color of the AppBar based on light theme color.
$kendo-appbar-dark-bg	Color	`$kendo-color-dark`	`#212529`
Description The background color of the AppBar based on dark theme color.
$kendo-appbar-dark-text	Color	`k-contrast-color( $kendo-color-dark )`	`white`
Description The text color of the AppBar based on dark theme color.
$kendo-appbar-box-shadow	List	`0px 1px 1px rgba( black, .16 )`	`0px 1px 1px rgba(0, 0, 0, 0.16)`
Description The box shadow of the AppBar.
$kendo-appbar-bottom-box-shadow	List	`0px -1px 1px rgba( black, .16 )`	`0px -1px 1px rgba(0, 0, 0, 0.16)`
Description The box shadow of the AppBar with bottom position.

Avatar

Name	Type	Default value	Computed value
$kendo-avatar-border-width	Number	`1px`	`1px`
Description The border width of the Avatar.
$kendo-avatar-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the Avatar.
$kendo-avatar-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the Avatar.
$kendo-avatar-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the Avatar.
$kendo-avatar-sizes	Map	`( sm: k-map-get( $kendo-spacing, 4 ), md: k-map-get( $kendo-spacing, 8 ), lg: k-map-get( $kendo-spacing, 16 ) )`	`(sm: 1rem, md: 2rem, lg: 4rem)`
Description The sizes map of the Avatar.
$kendo-avatar-theme-colors	Map	`$kendo-theme-colors`	`("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)`
Description The theme colors map of the Avatar.

Badge

Name	Type	Default value	Computed value
$kendo-badge-border-width	Number	`1px`	`1px`
Description The width of the border around the Badge.
$kendo-badge-border-radius	Number	`$badge-border-radius`	`0.375rem`
Description The border radius of the Badge.
$kendo-badge-padding-x	Number	`$badge-padding-x`	`0.65em`
Description The horizontal padding of the Badge.
$kendo-badge-sm-padding-x	Number	`k-math-div( $badge-padding-x, 2 )`	`0.325em`
Description The horizontal padding of the small Badge.
$kendo-badge-md-padding-x	Number	`$badge-padding-x`	`0.65em`
Description The horizontal padding of the medium Badge.
$kendo-badge-lg-padding-x	Number	`( $badge-padding-x * 1.5 )`	`0.975em`
Description The horizontal padding of the large Badge.
$kendo-badge-padding-y	Number	`$badge-padding-y`	`0.35em`
Description The vertical padding of the Badge.
$kendo-badge-sm-padding-y	Number	`k-math-div( $badge-padding-y, 2 )`	`0.175em`
Description The vertical padding of the small Badge.
$kendo-badge-md-padding-y	Number	`$badge-padding-y`	`0.35em`
Description The vertical padding of the medium Badge.
$kendo-badge-lg-padding-y	Number	`( $badge-padding-y * 1.5 )`	`0.525em`
Description The vertical padding of the large Badge.
$kendo-badge-font-size	Number	`$badge-font-size`	`0.75em`
Description The font sizes of the Badge.
$kendo-badge-sm-font-size	Number	`$badge-font-size`	`0.75em`
Description The font size of the small Badge.
$kendo-badge-md-font-size	Number	`$badge-font-size`	`0.75em`
Description The font size of the medium Badge.
$kendo-badge-lg-font-size	Number	`$badge-font-size`	`0.75em`
Description The font size of the large Badge.
$kendo-badge-line-height	Number	`1`	`1`
Description The line heights used along with the $kendo-font-size variable.
$kendo-badge-sm-line-height	Number	`$kendo-badge-line-height`	`1`
Description The line height used along with the $kendo-font-size variable of the small Badge.
$kendo-badge-md-line-height	Number	`$kendo-badge-line-height`	`1`
Description The line height used along with the $kendo-font-size variable of the medium Badge.
$kendo-badge-lg-line-height	Number	`$kendo-badge-line-height`	`1`
Description The line height used along with the $kendo-font-size variable of the large Badge.
$kendo-badge-min-width	Calculation	`calc( #{$kendo-badge-line-height * 1em} + #{$kendo-badge-padding-y * 2} + #{$kendo-badge-border-width * 2})`	`calc( 1em + 0.7em + 2px)`
Description The calculated minimum width of the circular Badge.
$kendo-badge-sm-min-width	Calculation	`calc( #{$kendo-badge-sm-line-height * 1em} + #{$kendo-badge-sm-padding-y * 2} + #{$kendo-badge-border-width * 2} )`	`calc( 1em + 0.35em + 2px )`
Description The calculated minimum width of the small circular Badge.
$kendo-badge-md-min-width	Calculation	`calc( #{$kendo-badge-md-line-height * 1em} + #{$kendo-badge-md-padding-y * 2} + #{$kendo-badge-border-width * 2} )`	`calc( 1em + 0.7em + 2px )`
Description The calculated minimum width of the medium circular Badge.
$kendo-badge-lg-min-width	Calculation	`calc( #{$kendo-badge-lg-line-height * 1em} + #{$kendo-badge-lg-padding-y * 2} + #{$kendo-badge-border-width * 2} )`	`calc( 1em + 1.05em + 2px )`
Description The calculated minimum width of the large circular Badge.
$kendo-badge-sizes	Map	( sm: ( padding-x: $kendo-badge-sm-padding-x, padding-y: $kendo-badge-sm-padding-y, font-size: $kendo-badge-sm-font-size, line-height: $kendo-badge-sm-line-height, min-width: $kendo-badge-sm-min-width ), md: ( padding-x: $kendo-badge-md-padding-x, padding-y: $kendo-badge-md-padding-y, font-size: $kendo-badge-md-font-size, line-height: $kendo-badge-md-line-height, min-width: $kendo-badge-md-min-width ), lg: ( padding-x: $kendo-badge-lg-padding-x, padding-y: $kendo-badge-lg-padding-y, font-size: $kendo-badge-lg-font-size, line-height: $kendo-badge-lg-line-height, min-width: $kendo-badge-lg-min-width ) )	`(sm: (padding-x: 0.325em, padding-y: 0.175em, font-size: 0.75em, line-height: 1, min-width: calc( 1em + 0.35em + 2px )), md: (padding-x: 0.65em, padding-y: 0.35em, font-size: 0.75em, line-height: 1, min-width: calc( 1em + 0.7em + 2px )), lg: (padding-x: 0.975em, padding-y: 0.525em, font-size: 0.75em, line-height: 1, min-width: calc( 1em + 1.05em + 2px )))`
Description The sizes map for the Badge.

Name	Type	Default value	Computed value
$kendo-bottom-nav-padding-x	Number	`0px`	`0px`
Description The horizontal padding of the BottomNavigation.
$kendo-bottom-nav-padding-y	Number	`$kendo-bottom-nav-padding-x`	`0px`
Description The vertical padding of the BottomNavigation.
$kendo-bottom-nav-gap	Number	`$kendo-bottom-nav-padding-x`	`0px`
Description The spacing between the BottomNavigation items.
$kendo-bottom-nav-border-width	List	`1px 0px 0px 0px`	`1px 0px 0px 0px`
Description The width of the border around the BottomNavigation.
$kendo-bottom-nav-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the BottomNavigation.
$kendo-bottom-nav-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the BottomNavigation.
$kendo-bottom-nav-line-height	String	`normal`	`normal`
Description The line height of the BottomNavigation.
$kendo-bottom-nav-letter-spacing	Number	`.2px`	`0.2px`
Description The letter spacing of the BottomNavigation.
$kendo-bottom-nav-item-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description The horizontal padding of the BottomNavigation item.
$kendo-bottom-nav-item-padding-y	Number	`0`	`0`
Description The vertical padding of the BottomNavigation item.
$kendo-bottom-nav-item-min-width	Number	`72px`	`72px`
Description The minimum width of the BottomNavigation item.
$kendo-bottom-nav-item-max-width	Null	`null`	`null`
Description The maximum width of the BottomNavigation item.
$kendo-bottom-nav-item-min-height	Calculation	`calc( #{$kendo-icon-size * 2.5} + #{k-map-get( $kendo-spacing, 4 )} - #{$kendo-bottom-nav-padding-x * 2} )`	`calc( 40px + 1rem - 0px )`
Description The minimum height of the BottomNavigation item.
$kendo-bottom-nav-item-border-radius	Null	`null`	`null`
Description The border radius of the BottomNavigation item.
$kendo-bottom-nav-item-gap	List	`0 k-map-get( $kendo-spacing, 1 )`	`0 0.25rem`
Description The spacing of the BottomNavigation item.
$kendo-bottom-nav-shadow	List	`0px 0px 5px rgba( black, .12 )`	`0px 0px 5px rgba(0, 0, 0, 0.12)`
Description The box shadow of the BottomNavigation.
$kendo-bottom-nav-flat-text	Color	`$kendo-component-text`	`#212529`
Description The text color of the flat BottomNavigation.
$kendo-bottom-nav-flat-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the flat BottomNavigation.
$kendo-bottom-nav-flat-border	Color	`$kendo-component-border`	`#dee2e6`
Description The border color of the flat BottomNavigation.

Name	Type	Default value	Computed value
$kendo-breadcrumb-border-width	Number	`0px`	`0px`
Description The width of the border around the Breadcrumb.
$kendo-breadcrumb-margin-x	Null	`null`	`null`
Description The horizontal margin of the Breadcrumb.
$kendo-breadcrumb-margin-y	Null	`null`	`null`
Description The vertical margin of the Breadcrumb.
$kendo-breadcrumb-padding-x	Null	`null`	`null`
Description The horizontal padding of the Breadcrumb.
$kendo-breadcrumb-padding-y	Null	`null`	`null`
Description The vertical padding of the Breadcrumb.
$kendo-breadcrumb-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the Breadcrumb.
$kendo-breadcrumb-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the Breadcrumb.
$kendo-breadcrumb-sm-font-size	Number	`$kendo-font-size-sm`	`0.875rem`
Description The font size of the small Breadcrumb.
$kendo-breadcrumb-md-font-size	Number	`$kendo-breadcrumb-font-size`	`1rem`
Description The font size of the medium Breadcrumb.
$kendo-breadcrumb-lg-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the large Breadcrumb.
$kendo-breadcrumb-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line-height of the Breadcrumb.
$kendo-breadcrumb-sm-line-height	Number	`k-math-div( 20, 14 )`	`1.4285714286`
Description The line-height of the small Breadcrumb.
$kendo-breadcrumb-md-line-height	Number	`$kendo-breadcrumb-line-height`	`1.5`
Description The line-height of the medium Breadcrumb.
$kendo-breadcrumb-lg-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line-height of the height Breadcrumb.
$kendo-breadcrumb-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The base background of the Breadcrumb.
$kendo-breadcrumb-text	Color	`$kendo-component-text`	`#212529`
Description The base text color of the Breadcrumb.
$kendo-breadcrumb-border	Color	`$kendo-component-border`	`#dee2e6`
Description The base border color of the Breadcrumb.
$kendo-breadcrumb-focus-shadow	List	`0 0 2px 1px rgba( black, .06 )`	`0 0 2px 1px rgba(0, 0, 0, 0.06)`
Description The box shadow of the focused Breadcrumb.
$kendo-breadcrumb-link-padding-x	Number	`k-map-get( $kendo-spacing, 3 )`	`0.75rem`
Description The horizontal padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-x	Number	`k-map-get( $kendo-spacing, 3 )`	`0.75rem`
Description The horizontal padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-x	Number	`$kendo-breadcrumb-link-padding-x`	`0.75rem`
Description The horizontal padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-x	Number	`k-map-get( $kendo-spacing, 3 )`	`0.75rem`
Description The horizontal padding of the large Breadcrumb link.
$kendo-breadcrumb-link-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description The vertical padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-y	Number	`k-map-get( $kendo-spacing, 1.5 )`	`0.375rem`
Description The vertical padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-y	Number	`$kendo-breadcrumb-link-padding-y`	`0.5rem`
Description The vertical padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-y	Number	`k-map-get( $kendo-spacing, 2.5 )`	`0.625rem`
Description The vertical padding of the large Breadcrumb link.
$kendo-breadcrumb-link-border-radius	Number	`$kendo-border-radius-md`	`0.375rem`
Description The border-radius of the Breadcrumb link.
$kendo-breadcrumb-icon-link-padding-y	Number	`k-map-get( $kendo-spacing, 3 )`	`0.75rem`
Description The vertical padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description The vertical padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-y	Number	`$kendo-breadcrumb-icon-link-padding-y`	`0.75rem`
Description The vertical padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-y	Number	`k-map-get( $kendo-spacing, 3.5 )`	`0.875rem`
Description The vertical padding of the large Breadcrumb link icon.
$kendo-breadcrumb-icon-link-padding-x	Number	`$kendo-breadcrumb-icon-link-padding-y`	`0.75rem`
Description The horizontal padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-x	Number	`$kendo-breadcrumb-sm-icon-link-padding-y`	`0.5rem`
Description The horizontal padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-x	Number	`$kendo-breadcrumb-icon-link-padding-x`	`0.75rem`
Description The horizontal padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-x	Number	`$kendo-breadcrumb-lg-icon-link-padding-y`	`0.875rem`
Description The horizontal padding of the large Breadcrumb link icon.
$kendo-breadcrumb-link-initial-text	String	`inherit`	`inherit`
Description The text color of the Breadcrumb link.
$kendo-breadcrumb-link-icon-spacing	Number	`$kendo-icon-spacing`	`0.5rem`
Description The spacing of the Breadcrumb link icon.
$kendo-breadcrumb-link-bg	Null	`null`	`null`
Description The background color of the Breadcrumb link.
$kendo-breadcrumb-link-text	Color	`$kendo-link-text`	`#0d6efd`
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	Null	`null`	`null`
Description The background color of the hovered Breadcrumb link.
$kendo-breadcrumb-link-hover-text	Color	`$kendo-link-hover-text`	`#0a58ca`
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	Null	`null`	`null`
Description The text color of the focused Breadcrumb link.
$kendo-breadcrumb-link-focus-border	Null	`null`	`null`
Description The border color of the focused Breadcrumb link.
$kendo-breadcrumb-link-focus-shadow	List	`inset 0 0 0 3px rgba( $kendo-breadcrumb-text, .25 )`	`inset 0 0 0 3px rgba(33, 37, 41, 0.25)`
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	Color	`$kendo-link-text`	`#0d6efd`
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	Null	`null`	`null`
Description The background color of the hovered Breadcrumb root link.
$kendo-breadcrumb-root-link-hover-text	Color	`$kendo-link-hover-text`	`#0a58ca`
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 3px rgba(33, 37, 41, 0.25)`
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	Color	`$kendo-color-secondary`	`#6c757d`
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: 0.75rem, link-padding-y: 0.375rem, icon-link-padding-x: 0.5rem, icon-link-padding-y: 0.5rem, font-size: 0.875rem, line-height: 1.4285714286), md: (link-padding-x: 0.75rem, link-padding-y: 0.5rem, icon-link-padding-x: 0.75rem, icon-link-padding-y: 0.75rem, font-size: 1rem, line-height: 1.5), lg: (link-padding-x: 0.75rem, link-padding-y: 0.625rem, icon-link-padding-x: 0.875rem, icon-link-padding-y: 0.875rem, font-size: 1rem, line-height: 1.5))`
Description The sizes map for the Breadcrumb.

Button

Name	Type	Default value	Computed value
$kendo-button-border-width	Number	`$btn-border-width`	`1px`
Description The width of the border around the Button.
$kendo-button-border-radius	Null	`null`	`null`
Description The border radius of the Button.
$kendo-button-padding-x	Number	`$btn-padding-x`	`0.75rem`
Description The horizontal padding of the Button.
$kendo-button-sm-padding-x	Number	`$btn-padding-x-sm`	`0.5rem`
Description The horizontal padding of the small Button.
$kendo-button-md-padding-x	Number	`$btn-padding-x`	`0.75rem`
Description The horizontal padding of the medium Button.
$kendo-button-lg-padding-x	Number	`$btn-padding-x-lg`	`1rem`
Description The horizontal padding of the large Button.
$kendo-button-padding-y	Number	`$btn-padding-y`	`0.375rem`
Description The vertical padding of the Button.
$kendo-button-sm-padding-y	Number	`$btn-padding-y-sm`	`0.25rem`
Description The vertical padding of the small Button.
$kendo-button-md-padding-y	Number	`$btn-padding-y`	`0.375rem`
Description The vertical padding of the medium Button.
$kendo-button-lg-padding-y	Number	`$btn-padding-y-lg`	`0.5rem`
Description The vertical padding of the large Button.
$kendo-button-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the Button.
$kendo-button-font-size	Number	`$btn-font-size`	`1rem`
Description The font size of the Button.
$kendo-button-sm-font-size	Number	`$kendo-font-size-sm`	`0.875rem`
Description The font size of the small Button.
$kendo-button-md-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the medium Button.
$kendo-button-lg-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the large Button.
$kendo-button-line-height	Number	`$btn-line-height`	`1.5`
Description The line height used along with the $kendo-font-size variable.
$kendo-button-sm-line-height	Number	`k-math-div( 20, 14 )`	`1.4285714286`
Description The line height used along with the $kendo-font-size variable of the small Button.
$kendo-button-md-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height used along with the $kendo-font-size variable of the medium Button.
$kendo-button-lg-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height used along with the $kendo-font-size variable of the large Button.
$kendo-button-calc-size	Calculation	`calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} )`	`calc( 1.5em + 0.75rem + 2px )`
Description The calculated height of the Button.
$kendo-button-inner-calc-size	Calculation	`calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} )`	`calc( 1.5em + 0.75rem )`
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: 0.5rem, padding-y: 0.25rem, font-size: 0.875rem, line-height: 1.4285714286), md: (padding-x: 0.75rem, padding-y: 0.375rem, font-size: 1rem, line-height: 1.5), lg: (padding-x: 1rem, padding-y: 0.5rem, font-size: 1rem, line-height: 1.5))`
Description The sizes map for the Button.
$kendo-button-theme-colors	Map	`k-map-merge( $kendo-theme-colors, ( "base": #e4e7eb ) )`	`("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529, "base": #e4e7eb)`
Description The theme colors map for the Button.
$kendo-button-bg	Color	`#e4e7eb`	`#e4e7eb`
Description The base background of the Button.
$kendo-button-text	Color	`k-contrast-color( $kendo-button-bg, $gray-900 )`	`#212529`
Description The base text color of the Button.
$kendo-button-border	Color	`$kendo-button-bg`	`#e4e7eb`
Description The base border color of the Button.
$kendo-button-gradient	Null	`null`	`null`
Description The base background gradient of the Button.
$kendo-button-shadow	Null	`null`	`null`
Description The base shadow of the Button.
$kendo-button-hover-bg	Color	`k-color-darken( $kendo-button-bg, 7.5% )`	`#ced3db`
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	Color	`k-color-darken( $kendo-button-bg, 10% )`	`#c7cdd5`
Description The base border color of the hovered Button.
$kendo-button-hover-gradient	Null	`null`	`null`
Description The base background gradient of the hovered Button.
$kendo-button-hover-shadow	Null	`null`	`null`
Description The base shadow of the hovered Button.
$kendo-button-active-bg	Color	`k-color-darken( $kendo-button-bg, 10% )`	`#c7cdd5`
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	Color	`k-color-darken( $kendo-button-bg, 12.5% )`	`#bfc6d0`
Description The base border color of the active Button.
$kendo-button-active-gradient	Null	`null`	`null`
Description The base background gradient of the active Button.
$kendo-button-active-shadow	Null	`null`	`null`
Description The base shadow of the active Button.
$kendo-button-selected-bg	Color	`k-color-darken( $kendo-color-primary, 10% )`	`#0257d5`
Description The base background color of the selected Button.
$kendo-button-selected-text	Color	`k-contrast-color( $kendo-button-selected-bg )`	`white`
Description The text color of the selected Button.
$kendo-button-selected-border	Color	`k-color-darken( $kendo-color-primary, 12.5% )`	`#0252c9`
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	Color	`k-color-darken( $kendo-button-bg, 10% )`	`#c7cdd5`
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	Color	`k-color-darken( $kendo-button-bg, 12.5% )`	`#bfc6d0`
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 .25rem rgba( $kendo-button-border, .5 )`	`0 0 0 0.25rem rgba(228, 231, 235, 0.5)`
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	`.08`	`0.08`
Description The overlay opacity of the hovered flat Button. Used to create a background for the flat Button.
$kendo-flat-button-focus-opacity	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 a 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 a 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	`$kendo-transition`	`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 The color transition of the Button.

Charts

Name	Type	Default value	Computed value
$kendo-series-a	Color	`$blue`	`#0d6efd`
Description The first base series color and its light and dark shades.
$kendo-series-b	Color	`$purple`	`#6f42c1`
Description The second base series color and its light and dark shades.
$kendo-series-c	Color	`$teal`	`#20c997`
Description The third base series color and its light and dark shades.
$kendo-series-d	Color	`$green`	`#198754`
Description The fourth base series color and its light and dark shades.
$kendo-series-e	Color	`$yellow`	`#ffc107`
Description The fifth base series color and its light and dark shades.
$kendo-series-f	Color	`$red`	`#dc3545`
Description The sixth base series color and its light and dark shades.
$kendo-series-1	Color	`$kendo-series-a`	`#0d6efd`
Description The series colors in order: base, light, dark, lighter, darker
$kendo-chart-major-lines	Color	`rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )`	`rgba(0, 0, 0, 0.08)`
Description The color of the Chart grid lines (major).
$kendo-chart-minor-lines	Color	`rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 )`	`rgba(0, 0, 0, 0.04)`
Description The color of the Chart grid lines (minor).

Checkbox

Name	Type	Default value	Computed value
$kendo-checkbox-border-width	Number	`1px`	`1px`
Description The border width of the CheckBox.
$kendo-checkbox-sm-size	Number	`k-map-get( $kendo-spacing, 3 )`	`0.75rem`
Description The size of a small CheckBox.
$kendo-checkbox-md-size	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description The size of a medium CheckBox.
$kendo-checkbox-lg-size	Number	`k-map-get( $kendo-spacing, 5 )`	`1.25rem`
Description The size of a large CheckBox.
$kendo-checkbox-sm-glyph-size	Number	`k-map-get( $kendo-spacing, 2.5 )`	`0.625rem`
Description The glyph size of a small CheckBox.
$kendo-checkbox-md-glyph-size	Number	`k-map-get( $kendo-spacing, 3.5 )`	`0.875rem`
Description The glyph size of a medium CheckBox.
$kendo-checkbox-lg-glyph-size	Number	`k-map-get( $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	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of CheckBox.
$kendo-checkbox-text	Null	`null`	`null`
Description The text color of CheckBox.
$kendo-checkbox-border	Color	`if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 )`	`#ced4da`
Description The border color of CheckBox.
$kendo-checkbox-hover-bg	Null	`null`	`null`
Description The background color of the hovered CheckBox.
$kendo-checkbox-hover-text	Null	`null`	`null`
Description The text color of the hovered CheckBox.
$kendo-checkbox-hover-border	Null	`null`	`null`
Description The border color of the hovered CheckBox.
$kendo-checkbox-checked-bg	Color	`$kendo-color-primary`	`#0d6efd`
Description The background color of the checked CheckBox.
$kendo-checkbox-checked-text	Color	`k-contrast-color( $kendo-checkbox-checked-bg )`	`white`
Description The color of the checked CheckBox.
$kendo-checkbox-checked-border	Color	`$kendo-checkbox-checked-bg`	`#0d6efd`
Description The border color of the checked CheckBox.
$kendo-checkbox-indeterminate-bg	Color	`$kendo-checkbox-checked-bg`	`#0d6efd`
Description The background color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-text	Color	`$kendo-checkbox-checked-text`	`white`
Description The text color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-border	Color	`$kendo-checkbox-checked-border`	`#0d6efd`
Description The border color of the indeterminate CheckBox.
$kendo-checkbox-focus-border	Color	`k-try-tint( $kendo-color-primary, 50% )`	`#86b7fe`
Description The border color of the focused CheckBox.
$kendo-checkbox-focus-shadow	List	`0 0 0 .25rem rgba( $kendo-color-primary, .25 )`	`0 0 0 0.25rem rgba(13, 110, 253, 0.25)`
Description The box shadow of the focused CheckBox.
$kendo-checkbox-focus-checked-border	Color	`$kendo-checkbox-checked-border`	`#0d6efd`
Description The border color of the focused and checked CheckBox.
$kendo-checkbox-focus-checked-shadow	List	`$kendo-checkbox-focus-shadow`	`0 0 0 0.25rem rgba(13, 110, 253, 0.25)`
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 the invalid CheckBox.
$kendo-checkbox-invalid-text	Color	`$kendo-invalid-text`	`#dc3545`
Description The text color of the invalid CheckBox.
$kendo-checkbox-invalid-border	Color	`$kendo-invalid-border`	`#dc3545`
Description The border color of the 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 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")`
Description The image for a checked CheckBox indicator.
$kendo-checkbox-indeterminate-image	String	`k-escape-svg( url("data:image/svg+xml,") )`	`url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")`
Description The image for a indeterminate CheckBox indicator.
$kendo-checkbox-label-margin-x	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The horizontal margin of the CheckBox inside a label.
$kendo-checkbox-list-spacing	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description The spacing between the items in a horizontal CheckBox list.
$kendo-checkbox-list-item-padding-x	Number	`0px`	`0px`
Description The horizontal padding of the CheckBox list items.
$kendo-checkbox-list-item-padding-y	Number	`$kendo-list-md-item-padding-y`	`0.25rem`
Description The vertical padding of the CheckBox list items
$kendo-checkbox-ripple-bg	Color	`$kendo-checkbox-checked-bg`	`#0d6efd`
Description The background color of the CheckBox' ripple.
$kendo-checkbox-ripple-opacity	Number	`.25`	`0.25`
Description The opacity of the CheckBox' ripple.

Chip

Name	Type	Default value	Computed value
$kendo-chip-border-width	Number	`1px`	`1px`
Description The width of the border around the Chip.
$kendo-chip-spacing	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The spacing between the text and the icons of the Chip.
$kendo-chip-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The horizontal padding of the Chip.
$kendo-chip-sm-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The horizontal padding of the small Chip.
$kendo-chip-md-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The horizontal padding of the medium Chip.
$kendo-chip-lg-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The horizontal padding of the large Chip.
$kendo-chip-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The vertical padding of the Chip.
$kendo-chip-sm-padding-y	Number	`k-map-get( $kendo-spacing, 0.5 )`	`0.125rem`
Description The vertical padding of the small Chip.
$kendo-chip-md-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The vertical padding of the medium Chip.
$kendo-chip-lg-padding-y	Number	`k-map-get( $kendo-spacing, 1.5 )`	`0.375rem`
Description The vertical padding of the large Chip.
$kendo-chip-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the Chip.
$kendo-chip-sm-font-size	Number	`$kendo-font-size-sm`	`0.875rem`
Description The font size of the small Chip.
$kendo-chip-md-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the medium Chip.
$kendo-chip-line-height	Number	`1.25`	`1.25`
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.25`
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.25`
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.25`
Description The large Chip's line height that is related to the $kendo-font-size.
$kendo-chip-calc-size	Calculation	`calc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} )`	`calc( 1.25em + 0.5rem + 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: 0.25rem, padding-y: 0.125rem, font-size: 0.875rem, line-height: 1.25), md: (padding-x: 0.25rem, padding-y: 0.25rem, font-size: 1rem, line-height: 1.25), lg: (padding-x: 0.25rem, padding-y: 0.375rem, font-size: 1rem, line-height: 1.25))`
Description The map with the sizes of the Chip.
$kendo-chip-base-bg	Color	`$kendo-button-bg`	`#e4e7eb`
Description The base background color 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": #e4e7eb, "error": #dc3545, "info": #0dcaf0, "warning": #ffc107, "success": #198754)`
Description The theme colors map for the Chip.
$kendo-chip-solid-bg	Color	`$kendo-chip-base-bg`	`#e4e7eb`
Description The base background color of the solid Chip.
$kendo-chip-solid-text	Color	`$kendo-button-text`	`#212529`
Description he base text color of the solid Chip.
$kendo-chip-solid-border	Color	`$kendo-button-border`	`#e4e7eb`
Description The base border color of the solid Chip.
$kendo-chip-solid-shadow	List	`0 0 0 2px rgba( $kendo-chip-base-bg, .16 )`	`0 0 0 2px rgba(228, 231, 235, 0.16)`
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	Color	`$kendo-button-hover-bg`	`#ced3db`
Description The base background color of the hovered solid Chip.
$kendo-chip-solid-hover-text	Null	`null`	`null`
Description The base text color of the hovered solid Chip.
$kendo-chip-solid-selected-bg	Color	`$kendo-button-active-bg`	`#c7cdd5`
Description The base background color of the selected solid Chip.
$kendo-chip-solid-selected-text	Null	`null`	`null`
Description The base text color of the selected solid Chip.
$kendo-chip-outline-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The base background color of the outline Chip.
$kendo-chip-outline-text	Color	`$kendo-chip-solid-text`	`#212529`
Description The base text color of the outline Chip.
$kendo-chip-outline-border	Color	`$kendo-chip-outline-text`	`#212529`
Description The base border color of the outline Chip.
$kendo-chip-outline-shadow	List	`0 0 0 2px rgba( $kendo-chip-base-bg, .16 )`	`0 0 0 2px rgba(228, 231, 235, 0.16)`
Description The base shadow of the outline Chip.
$kendo-chip-outline-hover-bg	Color	`$kendo-chip-outline-text`	`#212529`
Description The base background color of the hovered outline Chip.
$kendo-chip-outline-hover-text	Color	`k-contrast-color( $kendo-chip-outline-hover-bg )`	`white`
Description The base text color of the hovered outline Chip.
$kendo-chip-outline-selected-bg	Color	`$kendo-chip-outline-hover-bg`	`#212529`
Description The base background color of the selected outline Chip.
$kendo-chip-outline-selected-text	Color	`$kendo-chip-outline-hover-text`	`white`
Description The base text color of the selected outline Chip.
$kendo-chip-list-sizes	Map	`( sm: k-map-get( $kendo-spacing, 1 ), md: k-map-get( $kendo-spacing, 1 ), lg: k-map-get( $kendo-spacing, 1 ) )`	`(sm: 0.25rem, md: 0.25rem, lg: 0.25rem)`
Description The sizes of the Chip list.

Cologradient

Name	Type	Default value	Computed value
$kendo-color-gradient-spacer	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description The spacer of the ColorGradient.
$kendo-color-gradient-width	Number	`328px`	`328px`
Description The width of the ColorGradient.
$kendo-color-gradient-border-width	Number	`1px`	`1px`

$kendo-color-gradient-border-radius	Number	`$kendo-border-radius-md`	`0.375rem`
Description The border radius of the ColorGradient.
$kendo-color-gradient-padding-y	Number	`$kendo-color-gradient-spacer`	`1rem`
Description The vertical padding of the ColorGradient.
$kendo-color-gradient-padding-x	Number	`$kendo-color-gradient-padding-y`	`1rem`
Description The horizontal padding of the ColorGradient.
$kendo-color-gradient-gap	Number	`$kendo-color-gradient-spacer`	`1rem`
Description The spacing between the sections of the ColorGradient.
$kendo-color-gradient-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the ColorGradient.
$kendo-color-gradient-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the ColorGradient.
$kendo-color-gradient-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the ColorGradient.
$kendo-color-gradient-text	Color	`$kendo-component-text`	`#212529`
Description The text color of the ColorGradient.
$kendo-color-gradient-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the ColorGradient.
$kendo-color-gradient-border	Color	`$kendo-component-border`	`#dee2e6`
Description The border color of the ColorGradient.
$kendo-color-gradient-focus-border	Color	`$kendo-hover-border`	`#d6d9dc`
Description The border color of the focused ColorGradient.
$kendo-color-gradient-focus-shadow	Null	`null`	`null`
Description The box shadow of the focused ColorGradient.
$kendo-color-gradient-canvas-border-radius	Number	`$kendo-border-radius-md`	`0.375rem`
Description The border radius of the ColorGradient canvas.
$kendo-color-gradient-canvas-gap	Number	`k-map-get( $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-border-radius	Number	`50%`	`50%`
Description The border radius of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-text	Null	`null`	`null`
Description The text color of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-bg	Color	`transparent`	`transparent`
Description The background color of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-border	Color	`rgba( white, .8)`	`rgba(255, 255, 255, 0.8)`
Description The color of the border around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-shadow	List	`0 1px 4px rgba( black, .5 )`	`0 1px 4px rgba(0, 0, 0, 0.5)`
Description The box shadow of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-focus-shadow	List	`0 1px 4px black`	`0 1px 4px black`
Description The box shadow of the focused ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-hover-shadow	List	`$kendo-color-gradient-draghandle-focus-shadow`	`0 1px 4px black`
Description The box shadow of the hovered 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	`56px`	`56px`
Description The width of the ColorGradient input.
$kendo-color-gradient-input-gap	Number	`k-math-div( $kendo-color-gradient-spacer, 2 )`	`0.5rem`
Description The spacing between the ColorGradient inputs.
$kendo-color-gradient-input-label-gap	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The spacing between the ColorGradient inputs and their labels.
$kendo-color-gradient-input-label-text	Color	`$kendo-subtle-text`	`#6c757d`
Description The text color of the ColorGradient input labels.
$kendo-color-gradient-contrast-ratio-font-weight	Number	`$kendo-font-weight-bold`	`700`
Description The font weight of the ColorGradient contrast ratio text.
$kendo-color-gradient-contrast-spacer	Number	`k-math-div( $kendo-color-gradient-spacer, 2 )`	`0.5rem`
Description The spacing between the items in the ColorGradient contrast tool.

Color System

Name	Type	Default value	Computed value
$kendo-color-white	Color	`#ffffff`	`#ffffff`
Description The color white. Note: you cannot change this value.
$kendo-color-black	Color	`#000000`	`#000000`
Description The color black. Note: you cannot change this value.
$kendo-color-primary	Color	`$primary`	`#0d6efd`
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-color( $kendo-color-primary )`	`white`
Description The color used along with the primary color denoted by $kendo-color-primary. Used to provide contrast between the background and foreground colors.
$kendo-color-secondary	Color	`$secondary`	`#6c757d`
Description The secondary color of the theme.
$kendo-color-secondary-contrast	Color	`k-contrast-color( $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	`$purple`	`#6f42c1`
Description The tertiary color of the theme.
$kendo-color-tertiary-contrast	Color	`k-contrast-color( $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	`$info`	`#0dcaf0`
Description The color for informational messages and states.
$kendo-color-success	Color	`$success`	`#198754`
Description The color for success messages and states.
$kendo-color-warning	Color	`$warning`	`#ffc107`
Description The color for warning messages and states.
$kendo-color-error	Color	`$danger`	`#dc3545`
Description The color for error messages and states.
$kendo-color-dark	Color	`$dark`	`#212529`
Description The dark color of the theme.
$kendo-color-light	Color	`$light`	`#f8f9fa`
Description The light color of the theme.
$kendo-color-inverse	Color	`if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )`	`#212529`
Description Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark

Coloreditor

Name	Type	Default value	Computed value
$kendo-color-editor-spacer	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description The spacer of the ColorEditor.
$kendo-color-editor-min-width	Number	`328px`	`328px`
Description The minimum width of the ColorEditor.
$kendo-color-editor-border-width	Number	`1px`	`1px`
Description The width of the border around the ColorEditor.
$kendo-color-editor-border-radius	Number	`$kendo-border-radius-md`	`0.375rem`
Description The border radius of the ColorEditor.
$kendo-color-editor-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the ColorEditor.
$kendo-color-editor-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the ColorEditor.
$kendo-color-editor-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the ColorEditor.
$kendo-color-editor-text	Color	`$kendo-component-text`	`#212529`
Description The text color of the ColorEditor.
$kendo-color-editor-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the ColorEditor.
$kendo-color-editor-border	Color	`$kendo-component-border`	`#dee2e6`
Description The border color of the ColorEditor.
$kendo-color-editor-focus-border	Color	`$kendo-hover-border`	`#d6d9dc`
Description The border color of the focused ColorEditor.
$kendo-color-editor-focus-shadow	Null	`null`	`null`
Description The box shadow of the focused ColorEditor.
$kendo-color-editor-header-padding-y	Number	`$kendo-color-editor-spacer`	`1rem`
Description The vertical padding of the ColorEditor header.
$kendo-color-editor-header-padding-x	Number	`$kendo-color-editor-header-padding-y`	`1rem`
Description The horizontal padding of the ColorEditor header.
$kendo-color-editor-header-actions-gap	Number	`k-math-div( $kendo-color-editor-spacer, 2 )`	`0.5rem`
Description The spacing between the ColorEditor header actions.
$kendo-color-editor-color-preview-width	Number	`32px`	`32px`
Description The width of the ColorEditor preview.
$kendo-color-editor-color-preview-height	Number	`12px`	`12px`
Description The height of the ColorEditor preview.
$kendo-color-editor-preview-gap	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The spacing between the colors in the ColorEditor preview.
$kendo-color-editor-views-padding-y	Number	`$kendo-color-editor-spacer`	`1rem`
Description The vertical padding of the ColorEditor views container.
$kendo-color-editor-views-padding-x	Number	`$kendo-color-editor-views-padding-y`	`1rem`
Description The horizontal padding of the ColorEditor views container.
$kendo-color-editor-views-gap	Number	`$kendo-color-editor-spacer`	`1rem`
Description The spacing of the ColorEditor views container.
$kendo-color-editor-color-gradient-focus-outline-color	Color	`rgba(0, 0, 0, .3)`	`rgba(0, 0, 0, 0.3)`
Description The outline color of the focused ColorGradient.
$kendo-color-editor-color-gradient-focus-outline	Number	`2px`	`2px`
Description The outline width of the focused ColorGradient.
$kendo-color-editor-color-gradient-focus-outline-offset	Number	`2px`	`2px`
Description The outline offset of the focused ColorGradient.

Colorpalette

Name	Type	Default value	Computed value
$kendo-color-palette-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the ColorPalette.
$kendo-color-palette-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the ColorPalette.
$kendo-color-palette-line-height	Number	`0`	`0`
Description The line height of the ColorPalette.
$kendo-color-palette-tile-width	Number	`k-map-get( $kendo-spacing, 6 )`	`1.5rem`
Description The width of the ColorPalette tile.
$kendo-color-palette-tile-height	Number	`$kendo-color-palette-tile-width`	`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	Color	`$kendo-body-bg`	`#ffffff`
Description Background color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
$kendo-component-text	Color	`$kendo-body-text`	`#212529`
Description Text color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
$kendo-component-border	Color	`if( k-is-light( $kendo-component-bg ), $gray-300, $gray-700 )`	`#dee2e6`
Description Border color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.

Dialog

Name	Type	Default value	Computed value
$kendo-dialog-titlebar-bg	Null	`null`	`null`
Description The background color of the Dialog titlebar.
$kendo-dialog-titlebar-text	Null	`null`	`null`
Description The text color of the Dialog titlebar.
$kendo-dialog-titlebar-border	Null	`null`	`null`
Description The border color of the Dialog titlebar.
$kendo-dialog-buttongroup-padding-x	Number	`$kendo-actions-padding-x`	`0.5rem`
Description The horizontal padding of the Dialog action buttons.
$kendo-dialog-buttongroup-padding-y	Number	`$kendo-actions-padding-y`	`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	Number	`$kendo-actions-button-spacing`	`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": #0d6efd, "light": #f8f9fa, "dark": #212529)`
Description The theme colors map for the Dialog.

Dropdowntree

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

Editor

Name	Type	Default value	Computed value
$kendo-editor-border-width	Number	`1px`	`1px`
Description The width of the border around the Еditor.
$kendo-editor-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the Еditor.
$kendo-editor-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the Еditor.
$kendo-editor-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the Еditor.
$kendo-editor-placeholder-text	Color	`$kendo-input-placeholder-text`	`#6c757d`
Description The text color of the Еditor placeholder.
$kendo-editor-placeholder-opacity	Number	`$kendo-input-placeholder-opacity`	`1`
Description The opacity of the Editor placeholder.
$kendo-editor-selected-text	Color	`$kendo-color-primary-contrast`	`white`
Description The selected text color of the Editor.
$kendo-editor-selected-bg	Color	`$kendo-color-primary`	`#0d6efd`
Description The selected background color of the Editor.
$kendo-editor-highlighted-bg	Color	`k-color-mix( $kendo-color-primary, #ffffff, 20% )`	`#cfe2ff`
Description The highlighted background color of the Editor.
$kendo-editor-export-tool-icon-margin-x	Number	`.25em`	`0.25em`
Description The horizontal margin of the Editor's export tool icon.
$kendo-editor-resize-handle-size	Number	`8px`	`8px`
Description The size of the Editor's resize handle.
$kendo-editor-resize-handle-border-width	Number	`1px`	`1px`
Description The border width of the Editor's resize handle.
$kendo-editor-resize-handle-border	Color	`#000000`	`#000000`
Description The border color of the Editor's resize handle.
$kendo-editor-resize-handle-bg	Color	`#ffffff`	`#ffffff`
Description The background color of the Editor's resize handle.
$kendo-editor-selectednode-outline-width	Number	`2px`	`2px`
Description The outline width of the Editor's selected node.
$kendo-editor-selectednode-outline-color	Color	`#88ccff`	`#88ccff`
Description The outline color of the Editor's selected node.

Expander

Name	Type	Default value	Computed value
$kendo-expander-spacing-y	Number	`k-map-get( $kendo-spacing, 3 )`	`0.75rem`
Description The vertical spacing of the ExpansionPanel.
$kendo-expander-border-width	Number	`1px`	`1px`
Description The width of the border around the ExpansionPanel.
$kendo-expander-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the ExpansionPanel.
$kendo-expander-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the ExpansionPanel.
$kendo-expander-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The hine height of the ExpansionPanel.
$kendo-expander-text	Color	`$kendo-component-text`	`#212529`
Description The text color of the ExpansionPanel.
$kendo-expander-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the ExpansionPanel.
$kendo-expander-border	Color	`$kendo-component-border`	`#dee2e6`
Description The border color of the ExpansionPanel.
$kendo-expander-focus-shadow	List	`$kendo-list-item-focus-shadow`	`inset 0 0 0 3px rgba(33, 37, 41, 0.15)`
Description The box shadow of the focused ExpansionPanel.
$kendo-expander-header-padding-x	Number	`k-map-get( $kendo-spacing, 6 )`	`1.5rem`
Description The horizontal padding of the ExpansionPanel header.
$kendo-expander-header-padding-y	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description The vertical padding of the ExpansionPanel header.
$kendo-expander-header-text	Color	`$kendo-expander-text`	`#212529`
Description The text color of the ExpansionPanel header.
$kendo-expander-header-bg	Color	`transparent`	`transparent`
Description The background color of the ExpansionPanel header.
$kendo-expander-header-border	Null	`null`	`null`
Description The border color of the ExpansionPanel header.
$kendo-expander-header-hover-bg	Color	`rgba( black, .04 )`	`rgba(0, 0, 0, 0.04)`
Description The background color of the hovered ExpansionPanel header.
$kendo-expander-header-focus-bg	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 3px rgba(33, 37, 41, 0.15)`
Description The box shadow of the focused ExpansionPanel header.
$kendo-expander-title-text	Color	`$kendo-color-primary`	`#0d6efd`
Description The text color of the ExpansionPanel title.
$kendo-expander-header-sub-title-text	Color	`$kendo-subtle-text`	`#6c757d`
Description The text color of the ExpansionPanel sub-title.
$kendo-expander-indicator-margin-x	Number	`k-map-get( $kendo-spacing, 3 )`	`0.75rem`
Description The horizontal margin of the ExpansionPanel indicator.
$kendo-expander-content-padding-x	Number	`k-map-get( $kendo-spacing, 6 )`	`1.5rem`
Description The horizontal padding of the ExpansionPanel content.
$kendo-expander-content-padding-y	Number	`k-map-get( $kendo-spacing, 6 )`	`1.5rem`
Description The vertical padding of the ExpansionPanel content.

Filter

Name	Type	Default value	Computed value
$kendo-filter-padding-x	Number	`$kendo-padding-md-x`	`1rem`
Description The horizontal padding of the Filter.
$kendo-filter-padding-y	Number	`$kendo-padding-md-y`	`0.5rem`
Description The vertical padding of the Filter.
$kendo-filter-bottom-margin	Number	`2.1em`	`2.1em`
Description The bottom margin of the Filter.
$kendo-filter-line-size	Number	`1px`	`1px`
Description The width of the line that connects the Filter items.
$kendo-filter-operator-dropdown-width	Number	`15em`	`15em`
Description The width of the dropdown elements in the Filter items.
$kendo-filter-preview-field-text	Color	`$kendo-color-primary`	`#0d6efd`
Description The text color of the Filter preview field.
$kendo-filter-preview-operator-text	Color	`$kendo-subtle-text`	`#6c757d`
Description The text color of the Filter preview operator.
$kendo-filter-toolbar-focus-shadow	List	`0 0 0 .25rem rgba( $kendo-color-primary, .25 )`	`0 0 0 0.25rem rgba(13, 110, 253, 0.25)`
Description The box shadow of the focused Filter toolbar.

Floating-action-button

Name	Type	Default value	Computed value
$kendo-fab-border-width	Number	`1px`	`1px`
Description The width of the border around the FAB.
$kendo-fab-border-radius	Number	`k-math-div( $kendo-border-radius, 2 )`	`0.1875rem`
Description The border radius of the FAB.
$kendo-fab-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the FAB.
$kendo-fab-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the FAB.
$kendo-fab-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the FAB.
$kendo-fab-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description The horizontal padding of the FAB.
$kendo-fab-sm-padding-x	Number	`k-math-div( $kendo-fab-padding-x, 2 )`	`0.5rem`
Description The horizontal padding of the small FAB.
$kendo-fab-md-padding-x	Number	`$kendo-fab-padding-x`	`1rem`
Description The horizontal padding of the medium FAB.
$kendo-fab-lg-padding-x	Number	`( $kendo-fab-padding-x * 1.5 )`	`1.5rem`
Description The horizontal padding of the large FAB.
$kendo-fab-padding-y	Number	`$kendo-fab-padding-x`	`1rem`
Description The vertical padding of the FAB.
$kendo-fab-sm-padding-y	Number	`k-math-div( $kendo-fab-padding-y, 2 )`	`0.5rem`
Description The vertical padding of the small FAB.
$kendo-fab-md-padding-y	Number	`$kendo-fab-padding-y`	`1rem`
Description The vertical padding of the medium FAB.
$kendo-fab-lg-padding-y	Number	`( $kendo-fab-padding-y * 1.5 )`	`1.5rem`
Description The vertical padding of the large FAB.
$kendo-fab-icon-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The horizontal padding of the FAB icon.
$kendo-fab-icon-padding-y	Number	`$kendo-fab-icon-padding-x`	`0.25rem`
Description The vertical padding of the FAB icon.
$kendo-fab-icon-spacing	Number	`k-map-get( $kendo-spacing, 0.5 )`	`0.125rem`
Description The spacing of the FAB icon.
$kendo-fab-items-padding-x	Number	`0px`	`0px`
Description The horizontal padding of the FAB items.
$kendo-fab-items-padding-y	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description The vertical padding of the FAB items.
$kendo-fab-item-text-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The horizontal padding of the FAB item text.
$kendo-fab-item-text-padding-y	Number	`$kendo-fab-item-text-padding-x`	`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	`4px`	`4px`
Description The border radius of the FAB item text.
$kendo-fab-item-text-font-size	Number	`$kendo-font-size-xs`	`0.75rem`
Description The font size of the FAB item text.
$kendo-fab-item-text-line-height	Number	`14px`	`14px`
Description The line height of the FAB item text.
$kendo-fab-item-icon-padding-x	Number	`k-map-get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x`	`0.75rem`
Description The horizontal padding of the FAB item icon.
$kendo-fab-item-icon-padding-y	Number	`$kendo-fab-item-icon-padding-x`	`0.75rem`
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": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)`
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: 0.5rem, padding-y: 0.5rem), md: (padding-x: 1rem, padding-y: 1rem), lg: (padding-x: 1.5rem, padding-y: 1.5rem))`
Description The size map for the FAB.
$kendo-fab-shadow	List	`0px 6px 10px rgba( black, .14 ), 0px 1px 18px rgba( black, .12 ), 0px 3px 5px rgba( black, .2 )`	`0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2)`
Description The base shadow of the FAB.
$kendo-fab-disabled-shadow	List	`0px 6px 10px k-try-tint( rgba( black, .14 ), .5 ), 0px 1px 18px k-try-tint( rgba( black, .12 ), .5 ), 0px 3px 5px k-try-tint( rgba( black, .2 ), .5 )`	`0px 6px 10px rgba(91, 91, 91, 0.1744), 0px 1px 18px rgba(101, 101, 101, 0.1552), 0px 3px 5px rgba(70, 70, 70, 0.232)`
Description The shadow of the disabled FAB.
$kendo-fab-active-shadow	Null	`null`	`null`
Description The shadow of the active FAB.
$kendo-fab-outline-style	String	`solid`	`solid`
Description The outline style of the FAB.
$kendo-fab-outline-width	Number	`3px`	`3px`
Description The outline width of the FAB.
$kendo-fab-item-text	Color	`$kendo-component-text`	`#212529`
Description The base text color of the FAB item.
$kendo-fab-item-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The base background color of the FAB item.
$kendo-fab-item-border	Color	`$kendo-component-border`	`#dee2e6`
Description The base border color of the FAB item.
$kendo-fab-item-icon-text	Color	`$kendo-button-text`	`#212529`
Description The base text color of the FAB item icon.
$kendo-fab-item-icon-bg	Color	`$kendo-button-bg`	`#e4e7eb`
Description The base background color of the FAB item icon.
$kendo-fab-item-icon-border	Color	`$kendo-button-border`	`#e4e7eb`
Description The base border color of the FAB item icon.
$kendo-fab-item-shadow	List	`$kendo-fab-shadow`	`0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2)`
Description The base shadow of the FAB item.
$kendo-fab-item-disabled-shadow	List	`$kendo-fab-disabled-shadow`	`0px 6px 10px rgba(91, 91, 91, 0.1744), 0px 1px 18px rgba(101, 101, 101, 0.1552), 0px 3px 5px rgba(70, 70, 70, 0.232)`
Description The shadow of the disabled FAB item.
$kendo-fab-item-active-shadow	Null	`$kendo-fab-active-shadow`	`null`
Description The shadow of the active FAB item.
$kendo-fab-item-outline-style	String	`solid`	`solid`
Description The outline style of the FAB item.
$kendo-fab-item-outline-width	Number	`3px`	`3px`
Description The outline width of the FAB item.
$kendo-fab-item-outline-color	Color	`$kendo-button-bg`	`#e4e7eb`
Description The outline color of the FAB item.

Floating-label

Name	Type	Default value	Computed value
$kendo-floating-label-scale	Number	`1`	`1`
Description The transformation scale of the Floating Label.
$kendo-floating-label-font-size	Number	`$kendo-input-font-size`	`1rem`
Description The font size of the Floating Label.
$kendo-floating-label-max-width	Number	`90%`	`90%`
Description The maximum width of the Floating Label.
$kendo-floating-label-line-height	Number	`$kendo-input-line-height`	`1.5`
Description The line height of the Floating Label.
$kendo-floating-label-height	Calculation	`calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )`	`calc( 1.5 * 1rem )`
Description The height of the Floating Label.
$kendo-floating-label-offset-x	Calculation	`calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )`	`calc( 0.75rem + 1px )`
Description The horizontal offset of the Floating Label.
$kendo-floating-label-offset-y	Calculation	`calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} )`	`calc( calc( 1.5 * 1rem ) + 1px + 0.375rem )`
Description The vertical offset of the Floating Label.
$kendo-floating-label-focus-scale	Number	`1`	`1`
Description The transformation scale of the focused Floating Label.
$kendo-floating-label-focus-offset-x	Number	`0`	`0`
Description The horizontal offset of the focused Floating Label.
$kendo-floating-label-focus-offset-y	Number	`0`	`0`
Description The vertical offset of the focused Floating Label.
$kendo-floating-label-transition	List	`.2s ease-out`	`0.2s ease-out`
Description The transition of the Floating Label.
$kendo-floating-label-bg	Null	`null`	`null`
Description The background color of the Floating Label.
$kendo-floating-label-text	Null	`null`	`null`
Description The text color of the Floating Label.
$kendo-floating-label-focus-bg	Null	`null`	`null`
Description The background color of the focused Floating Label.
$kendo-floating-label-focus-text	Null	`null`	`null`
Description The text color of the focused Floating Label.

Form

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

Grid

Name	Type	Default value	Computed value
$kendo-grid-padding-x	Number	`$kendo-table-md-cell-padding-x`	`0.5rem`
Description Horizontal padding of the grid.
$kendo-grid-padding-y	Number	`$kendo-table-md-cell-padding-y`	`0.5rem`
Description Vertical padding of the grid.
$kendo-grid-header-padding-x	Number	`$kendo-grid-padding-x`	`0.5rem`
Description Horizontal padding of the grid header.
$kendo-grid-header-padding-y	Number	`$kendo-grid-padding-y`	`0.5rem`
Description Vertical padding of the grid header.
$kendo-grid-grouping-header-padding-x	Number	`$kendo-grid-padding-y`	`0.5rem`
Description Horizontal padding of the grid grouping header.
$kendo-grid-grouping-header-padding-y	Number	`$kendo-grid-grouping-header-padding-x`	`0.5rem`
Description Vertical padding of the grid grouping header.
$kendo-grid-cell-padding-x	Number	`$kendo-grid-padding-x`	`0.5rem`
Description Horizontal padding of the grid cell.
$kendo-grid-cell-padding-y	Number	`$kendo-grid-padding-y`	`0.5rem`
Description Vertical padding of the grid cell.
$kendo-grid-filter-cell-padding-x	Number	`$kendo-grid-padding-y`	`0.5rem`
Description Horizontal padding of the grid filter cell.
$kendo-grid-filter-cell-padding-y	Number	`$kendo-grid-filter-cell-padding-x`	`0.5rem`
Description Vertical padding of the grid filter cell.
$kendo-grid-edit-cell-padding-x	Number	`$kendo-grid-cell-padding-x`	`0.5rem`
Description Horizontal padding of the grid edit cell.
$kendo-grid-edit-cell-padding-y	Number	`5px`	`5px`
Description Vertical padding of the grid edit cell.
$kendo-grid-bg	Color	`$kendo-table-bg`	`#ffffff`
Description Background color of the grid component
$kendo-grid-text	Color	`$kendo-table-text`	`#212529`
Description Text color of the grid component
$kendo-grid-border	Color	`$kendo-table-border`	`#dee2e6`
Description Border color of the grid component
$kendo-grid-header-bg	Color	`$kendo-table-header-bg`	`#f8f9fa`
Description Background color of grid header
$kendo-grid-header-text	Color	`$kendo-table-header-text`	`#212529`
Description Text color of grid header
$kendo-grid-header-border	Color	`$kendo-table-header-border`	`#dee2e6`
Description Border color of grid header
$kendo-grid-header-gradient	Null	`$kendo-table-header-gradient`	`null`
Description Background gradient of grid header
$kendo-grid-footer-bg	Color	`$kendo-table-footer-bg`	`#f8f9fa`
Description Background color of grid footer
$kendo-grid-footer-text	Color	`$kendo-table-footer-text`	`#212529`
Description Text color of grid footer
$kendo-grid-footer-border	Color	`$kendo-table-footer-border`	`#dee2e6`
Description Border color of grid footer
$kendo-grid-alt-bg	Color	`$kendo-table-alt-row-bg`	`rgba(0, 0, 0, 0.04)`
Description Background color of alternating rows in grid
$kendo-grid-alt-text	Null	`$kendo-table-alt-row-text`	`null`
Description Text color of alternating rows in grid
$kendo-grid-alt-border	Null	`$kendo-table-alt-row-border`	`null`
Description Border color of alternating rows in grid
$kendo-grid-hover-bg	Color	`$kendo-table-hover-bg`	`rgba(0, 0, 0, 0.08)`
Description Background color of hovered rows in grid
$kendo-grid-hover-text	Null	`$kendo-table-hover-text`	`null`
Description Text color of hovered rows in grid
$kendo-grid-hover-border	Null	`$kendo-table-hover-border`	`null`
Description Border color of hovered rows in grid
$kendo-grid-selected-bg	Color	`$kendo-table-selected-bg`	`rgba(13, 110, 253, 0.25)`
Description Background color of selected rows in grid
$kendo-grid-selected-text	Color	`$kendo-table-selected-text`	`#212529`
Description Text color of selected rows in grid
$kendo-grid-selected-border	Null	`$kendo-table-selected-border`	`null`
Description Border color of selected rows in grid
$kendo-grid-selection-aggregates-bg	Color	`$kendo-grid-header-bg`	`#f8f9fa`
Description Background color of the selection aggregates container
$kendo-grid-selection-aggregates-text	Color	`$kendo-grid-text`	`#212529`
Description Text color of the selection aggregates container
$kendo-grid-selection-aggregates-border	Color	`$kendo-grid-border`	`#dee2e6`
Description Border color of the selection aggregates container
$kendo-grid-selection-aggregates-border-width	Number	`$kendo-grid-border-width`	`1px`
Description Border width of the selection aggregates container
$kendo-grid-selection-aggregates-spacing	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description Spacing between the selection aggregates items
$kendo-grid-selection-aggregates-line-height	Number	`$kendo-grid-line-height`	`1.5`
Description Line height of the selection aggregates container
$kendo-grid-selection-aggregates-font-weight	Number	`$kendo-font-weight-bold`	`700`
Description Font weight of the selection aggregates container
$kendo-grid-row-resizer-hover-bg	Color	`rgba( k-contrast-color( $kendo-grid-bg ), .12 )`	`rgba(0, 0, 0, 0.12)`
Description Background color of the grid row resize indicator
$kendo-grid-row-resizer-active-bg	Color	`$kendo-color-primary`	`#0d6efd`
Description Active background color of the grid row resize indicator
$kendo-grid-row-resizer-height	Number	`k-map-get( $kendo-spacing, .5 )`	`0.125rem`
Description Height of the grid row resize indicator

Input

Name	Type	Default value	Computed value
$kendo-input-default-width	Number	`100%`	`100%`
Description The default width of the Input components.
$kendo-input-border-width	Number	`$input-border-width`	`1px`
Description The border width of the Input components.
$kendo-input-border-radius	Null	`null`	`null`
Description The border radius of the Input components.
$kendo-input-padding-x	Number	`$input-padding-x`	`0.75rem`
Description The horizontal padding of the Input components.
$kendo-input-sm-padding-x	Number	`$input-padding-x-sm`	`0.5rem`
Description The horizontal padding of the small Input components.
$kendo-input-md-padding-x	Number	`$input-padding-x`	`0.75rem`
Description The horizontal padding of the medium Input components.
$kendo-input-lg-padding-x	Number	`$input-padding-x-lg`	`1rem`
Description The horizontal padding of the large Input components.
$kendo-input-padding-y	Number	`$input-padding-y`	`0.375rem`
Description The vertical padding of input components.
$kendo-input-sm-padding-y	Number	`$input-padding-y-sm`	`0.25rem`
Description The vertical padding of the small Input components.
$kendo-input-md-padding-y	Number	`$input-padding-y`	`0.375rem`
Description The vertical padding of the medium Input components.
$kendo-input-lg-padding-y	Number	`$input-padding-y-lg`	`0.5rem`
Description The vertical padding of the large Input components.
$kendo-input-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of input components.
$kendo-input-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of input components.
$kendo-input-sm-font-size	Number	`$kendo-font-size-sm`	`0.875rem`
Description The font size of the small Input components.
$kendo-input-md-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the medium Input components.
$kendo-input-lg-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the large Input components.
$kendo-input-line-height	Number	`$input-line-height`	`1.5`
Description The line height of input components.
$kendo-input-sm-line-height	Number	`k-math-div( 20, 14 )`	`1.4285714286`
Description The line height of the small Input components.
$kendo-input-md-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the medium Input components.
$kendo-input-lg-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the large Input components.
$kendo-input-sizes	Map	( sm: ( padding-x: $kendo-input-sm-padding-x, padding-y: $kendo-input-sm-padding-y, font-size: $kendo-input-sm-font-size, line-height: $kendo-input-sm-line-height, button-padding-x: $kendo-input-sm-padding-y, button-padding-y: $kendo-input-sm-padding-y ), md: ( padding-x: $kendo-input-md-padding-x, padding-y: $kendo-input-md-padding-y, font-size: $kendo-input-md-font-size, line-height: $kendo-input-md-line-height, button-padding-x: $kendo-input-md-padding-y, button-padding-y: $kendo-input-md-padding-y ), lg: ( padding-x: $kendo-input-lg-padding-x, padding-y: $kendo-input-lg-padding-y, font-size: $kendo-input-lg-font-size, line-height: $kendo-input-lg-line-height, button-padding-x: $kendo-input-lg-padding-y, button-padding-y: $kendo-input-lg-padding-y ) )	`(sm: (padding-x: 0.5rem, padding-y: 0.25rem, font-size: 0.875rem, line-height: 1.4285714286, button-padding-x: 0.25rem, button-padding-y: 0.25rem), md: (padding-x: 0.75rem, padding-y: 0.375rem, font-size: 1rem, line-height: 1.5, button-padding-x: 0.375rem, button-padding-y: 0.375rem), lg: (padding-x: 1rem, padding-y: 0.5rem, font-size: 1rem, line-height: 1.5, button-padding-x: 0.5rem, button-padding-y: 0.5rem))`
Description The sizes map for the Input components.
$kendo-input-bg	Color	`$input-bg`	`#ffffff`
Description The background color of the Input components.
$kendo-input-text	Color	`$input-color`	`#212529`
Description The text color of the Input components.
$kendo-input-border	Color	`$input-border-color`	`#ced4da`
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	Null	`null`	`null`
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	Color	`$input-focus-bg`	`#ffffff`
Description The background color of the focused Input components.
$kendo-input-focus-text	Color	`$input-focus-color`	`#212529`
Description The text color of the focused Input components.
$kendo-input-focus-border	Color	`$input-focus-border-color`	`#86b7fe`
Description The border color of the focused Input components.
$kendo-input-focus-shadow	List	`$input-focus-box-shadow`	`0 0 0 0.25rem rgba(13, 110, 253, 0.25)`
Description The shadow of the focused Input components.
$kendo-input-selected-bg	Null	`null`	`null`
Description The background color of the selected Input components.
$kendo-input-selected-text	Null	`null`	`null`
Description The text color of the selected Input components.
$kendo-input-disabled-bg	Null	`null`	`null`
Description The background color of the disabled Input components.
$kendo-input-disabled-text	Null	`null`	`null`
Description The text color of the disabled Input components.
$kendo-input-disabled-border	Null	`null`	`null`
Description The border color of the disabled Input components.
$kendo-input-disabled-gradient	Null	`null`	`null`
Description The gradient of the disabled Input components.
$kendo-input-disabled-shadow	Null	`null`	`null`
Description The shadow of the disabled Input components.
$kendo-input-outline-bg	Null	`null`	`null`
Description The background color of the outline Input components.
$kendo-input-outline-text	Color	`$kendo-base-text`	`#212529`
Description The text color of the outline Input components.
$kendo-input-outline-border	Color	`rgba( $kendo-base-text, .5 )`	`rgba(33, 37, 41, 0.5)`
Description The border color of the outline Input components.
$kendo-input-outline-hover-bg	Null	`null`	`null`
Description The background color of the outline hovered Input components.
$kendo-input-outline-hover-text	Null	`null`	`null`
Description The text color of the outline hovered Input components.
$kendo-input-outline-hover-border	Null	`null`	`null`
Description The border color of the outline hovered Input components.
$kendo-input-outline-focus-bg	Null	`null`	`null`
Description The background color of the outline focused Input components.
$kendo-input-outline-focus-text	Null	`null`	`null`
Description The text color of the outline focused Input components.
$kendo-input-outline-focus-border	Color	`$kendo-input-focus-border`	`#86b7fe`
Description The border color of the outline focused Input components.
$kendo-input-outline-focus-shadow	List	`$kendo-input-focus-shadow`	`0 0 0 0.25rem rgba(13, 110, 253, 0.25)`
Description The shadow of the outline focused Input components.
$kendo-input-flat-bg	Null	`null`	`null`
Description The background color of the flat Input components.
$kendo-input-flat-text	Color	`$kendo-input-text`	`#212529`
Description The text color of the flat Input components.
$kendo-input-flat-border	Color	`$kendo-input-border`	`#ced4da`
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	Null	`$kendo-input-hover-border`	`null`
Description The border color of the flat hovered Input components.
$kendo-input-flat-focus-bg	Null	`null`	`null`
Description The background color of the flat focused Input components.
$kendo-input-flat-focus-text	Null	`null`	`null`
Description The text color of the flat focused Input components.
$kendo-input-flat-focus-border	Color	`$kendo-input-focus-border`	`#86b7fe`
Description The border color of the flat focused Input components.
$kendo-input-flat-focus-shadow	List	`$kendo-input-focus-shadow`	`0 0 0 0.25rem rgba(13, 110, 253, 0.25)`
Description The shadow of the flat focused Input components.
$kendo-input-placeholder-text	Color	`$input-placeholder-color`	`#6c757d`
Description The text color of the Input placeholder.
$kendo-input-placeholder-opacity	Number	`1`	`1`
Description The opacity of the Input placeholder.
$kendo-input-clear-value-text	Null	`null`	`null`
Description The color of the Input clear value icon.
$kendo-input-clear-value-opacity	Number	`.5`	`0.5`
Description The opacity of the Input clear value icon.
$kendo-input-clear-value-hover-text	Null	`null`	`null`
Description The color of the hovered Input clear value icon.
$kendo-input-clear-value-hover-opacity	Number	`1`	`1`
Description The opacity of the hovered Input clear value icon.
$kendo-input-values-margin-y	Number	`k-map-get( $kendo-spacing, 0.5 )`	`0.125rem`
Description The vertical margin of the clear value icon.
$kendo-input-values-margin-x	Number	`$kendo-input-values-margin-y`	`0.125rem`
Description The horizontal margin of the clear value icon.
$kendo-input-button-width	Null	`null`	`null`
Description The width of the Input button.
$kendo-input-button-border-width	Number	`1px`	`1px`
Description The border width of the Input button.
$kendo-input-spinner-width	Null	`null`	`null`
Description The width of the Input spinner button.
$kendo-input-spinner-icon-offset	Null	`null`	`null`
Description The icon offset of the Input spinner button.
$kendo-input-separator-color	Color	`$kendo-input-text`	`#212529`
Description The color of the Input separator.
$kendo-input-separator-opacity	Number	`.5`	`0.5`
Description The opacity of the Input separator.
$kendo-input-invalid-border	Color	`$kendo-invalid-border`	`#dc3545`
Description The border color of the invalid Input components.
$kendo-input-invalid-shadow	List	`$kendo-invalid-shadow`	`0 0 0 0.25rem rgba(220, 53, 69, 0.25)`
Description The shadow of the invalid Input components.

List

Name	Type	Default value	Computed value
$kendo-list-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description 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 List header, if no size is set.
$kendo-list-header-padding-y	Null	`null`	`null`
Description The vertical padding of the List header, if no size is set.
$kendo-list-header-border-width	List	`0 0 1px`	`0 0 1px`
Description The border width of the List header.
$kendo-list-header-font-size	Null	`null`	`null`
Description The font size of the List header, if no size is set.
$kendo-list-header-line-height	Null	`null`	`null`
Description The line height of the List header, if no size is set.
$kendo-list-header-font-weight	Number	`$kendo-font-weight-bold`	`700`
Description The font weight of the List header.
$kendo-list-item-padding-x	Null	`null`	`null`
Description The horizontal padding of the List items, when no size is set.
$kendo-list-item-padding-y	Null	`null`	`null`
Description The vertical padding of the List items, when no size is set.
$kendo-list-item-font-size	Null	`null`	`null`
Description The font size of the List items, if no size is set.
$kendo-list-item-line-height	Null	`null`	`null`
Description The line height of the List items, if no size is set.
$kendo-list-group-item-padding-x	Null	`null`	`null`
Description The horizontal padding of the List group items, when no size is set.
$kendo-list-group-item-padding-y	Null	`null`	`null`
Description The vertical padding of the List group items, when no size is set.
$kendo-list-group-item-border-width	List	`1px 0 0`	`1px 0 0`
Description The border width of the List group items.
$kendo-list-group-item-font-size	Null	`null`	`null`
Description The font size of the List group items, if no size is set.
$kendo-list-group-item-line-height	Null	`null`	`null`
Description The line height of the List group items, if no size is set.
$kendo-list-group-item-font-weight	Number	`$kendo-font-weight-bold`	`700`
Description The font weight of a List group item.
$kendo-list-sizes	Map	( sm: ( font-size: $kendo-list-sm-font-size, line-height: $kendo-list-sm-line-height, header-padding-x: $kendo-list-sm-header-padding-x, header-padding-y: $kendo-list-sm-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-sm-item-padding-x, item-padding-y: $kendo-list-sm-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-sm-group-item-padding-x, group-item-padding-y: $kendo-list-sm-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ), md: ( font-size: $kendo-list-md-font-size, line-height: $kendo-list-md-line-height, header-padding-x: $kendo-list-md-header-padding-x, header-padding-y: $kendo-list-md-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-md-item-padding-x, item-padding-y: $kendo-list-md-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-md-group-item-padding-x, group-item-padding-y: $kendo-list-md-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ), lg: ( font-size: $kendo-list-lg-font-size, line-height: $kendo-list-lg-line-height, header-padding-x: $kendo-list-lg-header-padding-x, header-padding-y: $kendo-list-lg-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-lg-item-padding-x, item-padding-y: $kendo-list-lg-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-lg-group-item-padding-x, group-item-padding-y: $kendo-list-lg-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ) )	(sm: (font-size: 0.875rem, line-height: 1.4285714286, header-padding-x: 1rem, header-padding-y: 0.25rem, header-font-size: null, header-line-height: null, item-padding-x: 1rem, item-padding-y: 0.25rem, item-font-size: null, item-line-height: null, group-item-padding-x: 1rem, group-item-padding-y: 0.125rem, group-item-font-size: null, group-item-line-height: null), md: (font-size: 1rem, line-height: 1.5, header-padding-x: 1rem, header-padding-y: 0.25rem, header-font-size: null, header-line-height: null, item-padding-x: 1rem, item-padding-y: 0.25rem, item-font-size: null, item-line-height: null, group-item-padding-x: 1rem, group-item-padding-y: 0.25rem, group-item-font-size: null, group-item-line-height: null), lg: (font-size: 1rem, line-height: 1.5, header-padding-x: 1rem, header-padding-y: 0.5rem, header-font-size: null, header-line-height: null, item-padding-x: 1rem, item-padding-y: 0.5rem, item-font-size: null, item-line-height: null, group-item-padding-x: 1rem, group-item-padding-y: 0.375rem, group-item-font-size: null, group-item-line-height: null))
Description The map with the sizes of the List.
$kendo-list-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the List component.
$kendo-list-text	Color	`$kendo-component-text`	`#212529`
Description The text color of the List component.
$kendo-list-border	Color	`$kendo-component-border`	`#dee2e6`
Description The border color of the List component.
$kendo-list-header-bg	Null	`null`	`null`
Description The background color of the List header.
$kendo-list-header-text	Null	`null`	`null`
Description The text color of the List header
$kendo-list-header-border	String	`inherit`	`inherit`
Description The border color of the List header.
$kendo-list-header-shadow	Null	`null`	`null`
Description The box shadow of the List header.
$kendo-list-item-bg	Null	`null`	`null`
Description The background color of the List items.
$kendo-list-item-text	Null	`null`	`null`
Description The text color of the List items.
$kendo-list-item-hover-bg	Color	`$kendo-hover-bg`	`#e9ecef`
Description The background color of the hovered List items.
$kendo-list-item-hover-text	Color	`$kendo-hover-text`	`#212529`
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 3px rgba( $kendo-list-text, .15 )`	`inset 0 0 0 3px rgba(33, 37, 41, 0.15)`
Description The box shadow of the focused List items.
$kendo-list-item-selected-bg	Color	`$kendo-selected-bg`	`#0d6efd`
Description The background color of the selected List items.
$kendo-list-item-selected-text	Color	`$kendo-selected-text`	`white`
Description The text color of the selected List items.
$kendo-list-group-item-bg	Null	`null`	`null`
Description The background color of the List group items.
$kendo-list-group-item-text	Null	`null`	`null`
Description The text color of the List group items.
$kendo-list-group-item-border	String	`inherit`	`inherit`
Description The border color of the List group items..
$kendo-list-group-item-shadow	Null	`null`	`null`
Description The base shadow of the List group items.
$kendo-list-no-data-text	Color	`$kendo-subtle-text`	`#6c757d`
Description The color of the 'No Data' text.
$kendo-list-option-label-text	Color	`$kendo-subtle-text`	`#6c757d`
Description The color of the 'Option Label' text.

Listbox

Name	Type	Default value	Computed value
$kendo-listbox-spacing	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description The spacing between the ListBox elements.
$kendo-listbox-button-spacing	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description The spacing between the ListBox buttons.
$kendo-listbox-width	Number	`10em`	`10em`
Description The width of the ListBox.
$kendo-listbox-default-height	Number	`200px`	`200px`
Description The height of the ListBox.
$kendo-listbox-border-width	Number	`1px`	`1px`
Description The width of the border around the ListBox.
$kendo-listbox-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the ListBox.
$kendo-listbox-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the ListBox.
$kendo-listbox-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the ListBoxx.
$kendo-listbox-text	Color	`$kendo-component-text`	`#212529`
Description The text color of the ListBox.
$kendo-listbox-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the ListBox.
$kendo-listbox-border	Color	`$kendo-component-border`	`#dee2e6`
Description The border color of the ListBox.
$kendo-listbox-item-padding-x	Null	`null`	`null`
Description The inline padding of the ListBox item.
$kendo-listbox-item-padding-y	Null	`null`	`null`
Description The block padding of the ListBox item.
$kendo-listbox-drop-hint-width	Number	`1px`	`1px`
Description The width of the ListBox drop hint.
$kendo-listbox-drop-hint-border-width	Null	`null`	`null`
Description The width of the border around the ListBox drop hint.

Listview

Name	Type	Default value	Computed value
$kendo-listview-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The horizontal padding of the ListView.
$kendo-listview-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The vertical padding of the ListView.
$kendo-listview-border-width	Number	`1px`	`1px`
Description The width of the border around bordered ListView.
$kendo-listview-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the ListView.
$kendo-listview-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the ListView.
$kendo-listview-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the ListView.
$kendo-listview-text	Color	`$kendo-component-text`	`#212529`
Description The text color of the ListView.
$kendo-listview-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the ListView.
$kendo-listview-border	Color	`$kendo-component-border`	`#dee2e6`
Description The border color of the ListView.
$kendo-listview-item-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The horizontal padding of the ListView items.
$kendo-listview-item-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The vertical padding of the ListView items.
$kendo-listview-item-selected-text	Null	`null`	`null`
Description The text color of the selected ListView items.
$kendo-listview-item-selected-bg	Color	`rgba( $kendo-selected-bg, .25 )`	`rgba(13, 110, 253, 0.25)`
Description The background color of the selected ListView items.
$kendo-listview-item-selected-border	Null	`null`	`null`
Description The border color of the selected ListView items.
$kendo-listview-item-focus-text	Null	`null`	`null`
Description The text color of the focused ListView items.
$kendo-listview-item-focus-bg	Null	`null`	`null`
Description The background color of the focused ListView items.
$kendo-listview-item-focus-border	Null	`null`	`null`
Description The border color of the focused ListView items.
$kendo-listview-item-focus-shadow	List	`inset 0 0 0 3px rgba( $kendo-listview-text, .15 )`	`inset 0 0 0 3px rgba(33, 37, 41, 0.15)`
Description The box shadow of the focused ListView items.

Loader

Name	Type	Default value	Computed value
$kendo-loader-segment-border-radius	Number	`50%`	`50%`
Description The border radius of the Loader segment.
$kendo-loader-sm-segment-size	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The size of the small Loader segment.
$kendo-loader-md-segment-size	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description The size of the medium Loader segment.
$kendo-loader-lg-segment-size	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description The size of the large Loader segment.
$kendo-loader-sm-padding	Number	`k-math-div( $kendo-loader-sm-segment-size, 2 )`	`0.125rem`
Description The padding of the small Loader.
$kendo-loader-md-padding	Number	`k-math-div( $kendo-loader-md-segment-size, 2 )`	`0.25rem`
Description The padding of the medium Loader.
$kendo-loader-lg-padding	Number	`k-math-div( $kendo-loader-lg-segment-size, 2 )`	`0.5rem`
Description The padding of the large Loader.
$kendo-loader-sm-spinner-3-width	Number	`( $kendo-loader-sm-segment-size * 4 )`	`1rem`
Description The width of the small spinner-3 Loader.
$kendo-loader-md-spinner-3-width	Number	`( $kendo-loader-md-segment-size * 4 )`	`2rem`
Description The width of the medium spinner-3 Loader.
$kendo-loader-lg-spinner-3-width	Number	`( $kendo-loader-lg-segment-size * 4 )`	`4rem`
Description The width of the large spinner-3 Loader.
$kendo-loader-sm-spinner-3-height	Number	`( $kendo-loader-sm-spinner-3-width * $equilateral-height )`	`0.8660254038rem`
Description The height of the small spinner-3 Loader.
$kendo-loader-md-spinner-3-height	Number	`( $kendo-loader-md-spinner-3-width * $equilateral-height )`	`1.7320508076rem`
Description The height of the medium spinner-3 Loader.
$kendo-loader-lg-spinner-3-height	Number	`( $kendo-loader-lg-spinner-3-width * $equilateral-height )`	`3.4641016152rem`
Description The height of the large spinner-3 Loader.
$kendo-loader-sm-spinner-4-width	Number	`$kendo-loader-sm-segment-size * 4`	`1rem`
Description The width of the small spinner-4 Loader.
$kendo-loader-md-spinner-4-width	Number	`$kendo-loader-md-segment-size * 4`	`2rem`
Description The width of the medium spinner-4 Loader.
$kendo-loader-lg-spinner-4-width	Number	`$kendo-loader-lg-segment-size * 4`	`4rem`
Description The width of the large spinner-4 Loader.
$kendo-loader-sm-spinner-4-height	Number	`$kendo-loader-sm-spinner-4-width`	`1rem`
Description The height of the small spinner-4 Loader.
$kendo-loader-md-spinner-4-height	Number	`$kendo-loader-md-spinner-4-width`	`2rem`
Description The height of the medium spinner-4 Loader.
$kendo-loader-lg-spinner-4-height	Number	`$kendo-loader-lg-spinner-4-width`	`4rem`
Description The height of the large spinner-4 Loader.
$kendo-loader-secondary-bg	Color	`#212529`	`#212529`
Description The color of the Loader based on the secondary theme color.
$kendo-loader-container-panel-border-width	Number	`1px`	`1px`
Description The border width of the container panel.
$kendo-loader-container-panel-border-style	String	`solid`	`solid`
Description The border style of the container panel.
$kendo-loader-container-panel-border-color	Color	`$kendo-component-border`	`#dee2e6`
Description The border color of the container panel.
$kendo-loader-container-panel-border-radius	Number	`$kendo-border-radius-md`	`0.375rem`
Description The border radius of the container panel.
$kendo-loader-container-panel-bg	Color	`$kendo-color-white`	`#ffffff`
Description The background color of the container panel.
$kendo-loader-sm-container-padding	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description The padding of the small Loader container.
$kendo-loader-md-container-padding	Number	`k-map-get( $kendo-spacing, 5 )`	`1.25rem`
Description The padding of the medium Loader container.
$kendo-loader-lg-container-padding	Number	`k-map-get( $kendo-spacing, 6 )`	`1.5rem`
Description The padding of the large Loader container.
$kendo-loader-sm-container-gap	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The gap of the small Loader container.
$kendo-loader-md-container-gap	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description The gap of the medium Loader container.
$kendo-loader-lg-container-gap	Number	`k-map-get( $kendo-spacing, 3 )`	`0.75rem`
Description The gap of the large Loader container.
$kendo-loader-sm-container-font-size	Number	`$kendo-font-size-sm`	`0.875rem`
Description The font size of the small Loader container.
$kendo-loader-md-container-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the medium Loader container.
$kendo-loader-lg-container-font-size	Number	`$kendo-font-size-lg`	`1.25rem`
Description The font size of the large Loader container.

Loading

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

Name	Type	Default value	Computed value
$kendo-menu-popup-padding-x	Null	`null`	`null`
Description Horizontal padding of the menu popup.
$kendo-menu-popup-padding-y	Null	`null`	`null`
Description Vertical padding of the menu popup.
$kendo-menu-popup-border-width	Number	`$kendo-popup-border-width`	`1px`
Description Width of the border around the menu popup.
$kendo-menu-popup-font-size	Number	`$kendo-font-size-md`	`1rem`
Description Font sizes of the menu popup.
$kendo-menu-popup-line-height	Number	`$kendo-line-height-md`	`1.5`
Description Line heights used along with $kendo-font-size.
$kendo-menu-popup-bg	Color	`$kendo-popup-bg`	`#ffffff`
Description The background of the menu popup.
$kendo-menu-popup-text	Color	`$kendo-popup-text`	`#212529`
Description The text color of the menu popup.
$kendo-menu-popup-border	Color	`$kendo-popup-border`	`#dee2e6`
Description The border color of the menu popup.
$kendo-menu-popup-gradient	Null	`null`	`null`
Description The background gradient of the menu popup.
$kendo-menu-popup-item-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description Horizontal padding of the menu item in popup.
$kendo-menu-popup-item-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description Vertical padding of the menu item in popup.
$kendo-menu-popup-item-padding-end	Calculation	`calc( #{$kendo-menu-popup-item-padding-x * 2} + #{$kendo-icon-size} )`	`calc( 2rem + 16px )`
Description The end padding of the menu item in popup.
$kendo-menu-popup-sm-item-icon-margin-start	Number	`$kendo-menu-popup-sm-item-padding-x`	`1rem`
Description The start margin of the menu item expand icon.
$kendo-menu-popup-sm-item-icon-margin-end	Calculation	`calc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )`	`calc(-1 * (calc( 2rem + 16px ) - 0.5rem))`
Description The end margin of the menu item expand icon.
$kendo-menu-popup-item-spacing	Number	`0px`	`0px`
Description The spacing between the menu items in popup.
$kendo-menu-popup-item-bg	Null	`null`	`null`
Description The background of the menu item in popup.
$kendo-menu-popup-item-text	Null	`null`	`null`
Description The text color of the menu item in popup.
$kendo-menu-popup-item-border	Null	`null`	`null`
Description The border color of the menu item in popup.
$kendo-menu-popup-item-gradient	Null	`null`	`null`
Description The background gradient of the menu item in popup.
$kendo-menu-popup-item-hover-bg	Color	`$kendo-list-item-hover-bg`	`#e9ecef`
Description The background of hovered menu item in popup.
$kendo-menu-popup-item-hover-text	Color	`$kendo-list-item-hover-text`	`#212529`
Description The text color of hovered menu item in popup.
$kendo-menu-popup-item-hover-border	Null	`null`	`null`
Description The border color of hovered menu item in popup.
$kendo-menu-popup-item-hover-gradient	Null	`null`	`null`
Description The background gradient of hovered menu item in popup.
$kendo-menu-popup-item-expanded-bg	Color	`$kendo-list-item-selected-bg`	`#0d6efd`
Description The background of expanded menu item in popup.
$kendo-menu-popup-item-expanded-text	Color	`$kendo-list-item-selected-text`	`white`
Description The text color of expanded menu item in popup.
$kendo-menu-popup-item-expanded-border	Null	`null`	`null`
Description The border color of expanded menu item in popup.
$kendo-menu-popup-item-expanded-gradient	Null	`null`	`null`
Description The background gradient of expanded menu item in popup.
$kendo-menu-popup-item-focus-shadow	List	`$kendo-menu-item-focus-shadow`	`inset 0 0 0 3px rgba(33, 37, 41, 0.15)`
Description The base shadow of focused menu item in popup.

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

Notification

Name	Type	Default value	Computed value
$kendo-notification-padding-x	Number	`$alert-padding-x`	`1rem`
Description The horizontal padding of the Notification.
$kendo-notification-padding-y	Number	`$alert-padding-y`	`1rem`
Description The vertical padding of the Notification.
$kendo-notification-border-width	Number	`$alert-border-width`	`1px`
Description The width of the border around the Notification.
$kendo-notification-border-radius	Number	`$alert-border-radius`	`0.375rem`
Description The border radius of the Notification.
$kendo-notification-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the Notification.
$kendo-notification-font-size	Number	`$kendo-font-size-sm`	`0.875rem`
Description The font size of the Notification.
$kendo-notification-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the Notification.
$kendo-notification-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the Notification.
$kendo-notification-text	Color	`$kendo-component-text`	`#212529`
Description The text color of the Notification.
$kendo-notification-border	Color	`$kendo-component-border`	`#dee2e6`
Description The border color of the Notification.
$kendo-notification-shadow	List	`$kendo-popup-shadow`	`0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04)`
Description The box shadow of the Notification.
$kendo-notification-icon-spacing	Number	`$kendo-icon-spacing`	`0.5rem`
Description The horizontal spacing of the Notification icon.
$kendo-notification-theme-colors	Map	`$kendo-theme-colors`	`("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)`
Description The theme colors map for the Notification.
$kendo-notification-theme	Map	`notification-theme( $kendo-notification-theme-colors )`	("inverse": (color: #111315, background-color: #c1c2c3, border: #d3d3d4), "light": (color: #818182, background-color: #fdfdfe, border: #fefefe), "dark": (color: #111315, background-color: #c1c2c3, border: #d3d3d4), "error": (color: #721c24, background-color: #f5c6cb, border: #f8d7da), "warning": (color: #856404, background-color: #ffeeba, border: #fff3cd), "success": (color: #0d462c, background-color: #bfddcf, border: #d1e7dd), "info": (color: #07697d, background-color: #bbf0fb, border: #cff4fc), "tertiary": (color: #3a2264, background-color: #d7caee, border: #e2d9f3), "secondary": (color: #383d41, background-color: #d6d8db, border: #e2e3e5), "primary": (color: #073984, background-color: #bbd6fe, border: #cfe2ff))
Description The generated theme colors map for the Notification.

Name	Type	Default value	Computed value
$kendo-pager-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description The horizontal padding of the Pager.
$kendo-pager-sm-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The horizontal padding of the small Pager.
$kendo-pager-md-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description The horizontal padding of the medium Pager.
$kendo-pager-lg-padding-x	Number	`k-map-get( $kendo-spacing, 2.5 )`	`0.625rem`
Description The horizontal padding of the large Pager.
$kendo-pager-padding-y	Number	`$kendo-pager-padding-x`	`0.5rem`
Description The vertical padding of the Pager.
$kendo-pager-sm-padding-y	Number	`$kendo-pager-sm-padding-x`	`0.25rem`
Description The vertical padding of the small Pager.
$kendo-pager-md-padding-y	Number	`$kendo-pager-md-padding-x`	`0.5rem`
Description The vertical padding of the medium Pager.
$kendo-pager-lg-padding-y	Number	`$kendo-pager-lg-padding-x`	`0.625rem`
Description The vertical padding of the large Pager.
$kendo-pager-sm-item-min-width	Calculation	`$kendo-button-sm-calc-size`	`calc( 1.4285714286em + 0.5rem + 2px )`
Description The minimum width of the items in the small Pager.
$kendo-pager-md-item-min-width	Calculation	`$kendo-button-md-calc-size`	`calc( 1.5em + 0.75rem + 2px )`
Description The minimum width of the items in the medium Pagers.
$kendo-pager-lg-item-min-width	Calculation	`$kendo-button-lg-calc-size`	`calc( 1.5em + 1rem + 2px )`
Description The minimum width of the items in the large Pagers.
$kendo-pager-sm-item-group-spacing	Number	`k-map-get( $kendo-spacing, 3.5 )`	`0.875rem`
Description The margin between the item groups in the small Pager.
$kendo-pager-md-item-group-spacing	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description The margin between the item groups in the medium Pager.
$kendo-pager-lg-item-group-spacing	Number	`k-map-get( $kendo-spacing, 4.5 )`	`1.125rem`
Description The margin between the item groups in the large Pager.
$kendo-pager-border-width	Number	`1px`	`1px`
Description The border width of the Pager.
$kendo-pager-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the Pager.
$kendo-pager-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the Pager.
$kendo-pager-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the Pager.
$kendo-pager-bg	Color	`$kendo-component-header-bg`	`#f8f9fa`
Description The background color of the Pager.
$kendo-pager-text	Color	`$kendo-component-header-text`	`#212529`
Description The text color of the Pager.
$kendo-pager-border	Color	`$kendo-component-header-border`	`#dee2e6`
Description The border color of the Pager.
$kendo-pager-focus-bg	Null	`null`	`null`
Description The background color of the focused Pager.
$kendo-pager-focus-shadow	List	`inset 0 0 0 2px rgba( $kendo-color-black, .08)`	`inset 0 0 0 2px rgba(0, 0, 0, 0.08)`
Description The box shadow of the focused Pager.
$kendo-pager-section-spacing	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description The spacing between the Pager sections.
$kendo-pager-item-border-width	Number	`1px`	`1px`
Description The border width of the Pager items.
$kendo-pager-item-border-radius	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The border radius of the Pager items.
$kendo-pager-item-spacing	Number	`(-1 * $kendo-pager-item-border-width)`	`-1px`
Description The spacing around the Pager items.
$kendo-pager-item-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the Pager items.
$kendo-pager-item-text	Color	`$kendo-link-text`	`#0d6efd`
Description The text color of the Pager items.
$kendo-pager-item-border	Color	`$kendo-component-border`	`#dee2e6`
Description The border color of the Pager items.
$kendo-pager-item-hover-bg	Color	`$kendo-hover-bg`	`#e9ecef`
Description The background color of the hovered Pager items.
$kendo-pager-item-hover-text	Color	`$kendo-link-hover-text`	`#0a58ca`
Description The text color of the hovered Pager items.
$kendo-pager-item-hover-border	Color	`$kendo-hover-border`	`#d6d9dc`
Description The border color of the hovered Pager items.
$kendo-pager-item-selected-bg	Color	`$kendo-selected-bg`	`#0d6efd`
Description The background color of the selected Pager items.
$kendo-pager-item-selected-text	Color	`$kendo-selected-text`	`white`
Description The text color of the selected Pager items.
$kendo-pager-item-selected-border	Color	`$kendo-pager-item-selected-bg`	`#0d6efd`
Description The border color of the selected Pager items.
$kendo-pager-item-focus-opacity	Null	`null`	`null`
Description The opacity of the focused Pager items.
$kendo-pager-item-focus-bg	Color	`$kendo-pager-item-bg`	`#ffffff`
Description The background color of the focused Pager items.
$kendo-pager-item-focus-shadow	List	`0 0 0 3px rgba($kendo-color-primary, .25)`	`0 0 0 3px rgba(13, 110, 253, 0.25)`
Description The box shadow of the focused Pager items.
$kendo-pager-number-border-radius	Number	`0px`	`0px`
Description The border radius of the Pager numbers.
$kendo-pager-input-width	Number	`5em`	`5em`
Description The width of the Inputs in the Pager.
$kendo-pager-sm-dropdown-width	Number	`5em`	`5em`
Description The width of the DropDowns in the small Pager.
$kendo-pager-md-dropdown-width	Number	`5em`	`5em`
Description The width of the DropDowns in the medium Pager.
$kendo-pager-lg-dropdown-width	Number	`6em`	`6em`
Description The width of the DropDowns in the large Pager.
$kendo-pager-sizes	Map	( sm: ( padding-x: $kendo-pager-sm-padding-x, padding-y: $kendo-pager-sm-padding-y, item-group-spacing: $kendo-pager-sm-item-group-spacing, item-min-width: $kendo-pager-sm-item-min-width, pager-dropdown-width: $kendo-pager-sm-dropdown-width ), md: ( padding-x: $kendo-pager-md-padding-x, padding-y: $kendo-pager-md-padding-y, item-group-spacing: $kendo-pager-md-item-group-spacing, item-min-width: $kendo-pager-md-item-min-width, pager-dropdown-width: $kendo-pager-md-dropdown-width ), lg: ( padding-x: $kendo-pager-lg-padding-x, padding-y: $kendo-pager-lg-padding-y, item-group-spacing: $kendo-pager-lg-item-group-spacing, item-min-width: $kendo-pager-lg-item-min-width, pager-dropdown-width: $kendo-pager-lg-dropdown-width ) )	`(sm: (padding-x: 0.25rem, padding-y: 0.25rem, item-group-spacing: 0.875rem, item-min-width: calc( 1.4285714286em + 0.5rem + 2px ), pager-dropdown-width: 5em), md: (padding-x: 0.5rem, padding-y: 0.5rem, item-group-spacing: 1rem, item-min-width: calc( 1.5em + 0.75rem + 2px ), pager-dropdown-width: 5em), lg: (padding-x: 0.625rem, padding-y: 0.625rem, item-group-spacing: 1.125rem, item-min-width: calc( 1.5em + 1rem + 2px ), pager-dropdown-width: 6em))`
Description The sizes map of the Pager.

Picker

Name	Type	Default value	Computed value
$kendo-picker-bg	Color	`$kendo-button-bg`	`#e4e7eb`
Description The background color of the Picker components.
$kendo-picker-text	Color	`$kendo-button-text`	`#212529`
Description The text color of the Picker components.
$kendo-picker-border	Color	`$kendo-button-border`	`#e4e7eb`
Description The border color of the Picker components.
$kendo-picker-gradient	Null	`$kendo-button-gradient`	`null`
Description The gradient of the Picker components.
$kendo-picker-shadow	Null	`$kendo-button-shadow`	`null`
Description The shadow of the Picker components.
$kendo-picker-hover-bg	Color	`$kendo-button-hover-bg`	`#ced3db`
Description The background color of the hovered Picker components.
$kendo-picker-hover-text	Null	`$kendo-button-hover-text`	`null`
Description The text color of the hovered Picker components.
$kendo-picker-hover-border	Color	`$kendo-button-hover-border`	`#c7cdd5`
Description The border color of the hovered Picker components.
$kendo-picker-hover-gradient	Null	`$kendo-button-hover-gradient`	`null`
Description The gradient of the hovered Picker components.
$kendo-picker-hover-shadow	Null	`$kendo-button-hover-shadow`	`null`
Description The shadow of the hovered Picker components.
$kendo-picker-focus-bg	Color	`$kendo-button-active-bg`	`#c7cdd5`
Description The background color of the focused Picker components.
$kendo-picker-focus-text	Null	`$kendo-button-focus-text`	`null`
Description The text color of the focused Picker components.
$kendo-picker-focus-border	Color	`$kendo-button-focus-border`	`#bfc6d0`
Description The border color of the focused Picker components.
$kendo-picker-focus-gradient	Null	`$kendo-button-focus-gradient`	`null`
Description The gradient of the focused Picker components.
$kendo-picker-focus-shadow	List	`$kendo-button-focus-shadow`	`0 0 0 0.25rem rgba(228, 231, 235, 0.5)`
Description The shadow of the focused Picker components.
$kendo-picker-disabled-bg	Null	`null`	`null`
Description The background color of the disabled Picker components.
$kendo-picker-disabled-text	Null	`null`	`null`
Description The text color of the disabled Picker components.
$kendo-picker-disabled-border	Null	`null`	`null`
Description The border color of the disabled Picker components.
$kendo-picker-disabled-gradient	Null	`null`	`null`
Description The gradient of the disabled Picker components.
$kendo-picker-disabled-shadow	Null	`null`	`null`
Description The shadow of the disabled Picker components.
$kendo-picker-outline-bg	Null	`null`	`null`
Description The background color of the outline Picker components.
$kendo-picker-outline-text	Color	`$kendo-button-text`	`#212529`
Description The text color of the outline Picker components.
$kendo-picker-outline-border	Color	`rgba( $kendo-picker-outline-text, .5 )`	`rgba(33, 37, 41, 0.5)`
Description The border color of the outline Picker components.
$kendo-picker-outline-hover-bg	Color	`$kendo-picker-outline-text`	`#212529`
Description The background color of the outline hovered Picker components.
$kendo-picker-outline-hover-text	Color	`k-contrast-color( $kendo-picker-outline-hover-bg )`	`white`
Description The text color of the outline hovered Picker components.
$kendo-picker-outline-hover-border	Color	`$kendo-picker-outline-hover-bg`	`#212529`
Description The border color of the outline hovered Picker components.
$kendo-picker-outline-focus-bg	Null	`null`	`null`
Description The background color of the outline focused Picker components.
$kendo-picker-outline-focus-text	Null	`null`	`null`
Description The text color of the outline focused Picker components.
$kendo-picker-outline-focus-border	Null	`null`	`null`
Description The border color of the outline focused Picker components.
$kendo-picker-outline-focus-shadow	List	`$kendo-picker-focus-shadow`	`0 0 0 0.25rem rgba(228, 231, 235, 0.5)`
Description The shadow of the outline focused Picker components.
$kendo-picker-outline-hover-focus-bg	Null	`null`	`null`
Description The background color of the outline hovered and focused Picker components.
$kendo-picker-outline-hover-focus-text	Null	`null`	`null`
Description The text color of the outline hovered and focused Picker components.
$kendo-picker-outline-hover-focus-border	Null	`null`	`null`
Description The border color of the outline hovered and focused Picker components.
$kendo-picker-flat-bg	Null	`null`	`null`
Description The background color of the flat Picker components.
$kendo-picker-flat-text	Color	`$kendo-button-text`	`#212529`
Description The text color of the flat Picker components.
$kendo-picker-flat-border	Color	`$kendo-button-border`	`#e4e7eb`
Description The border color of the flat Picker components.
$kendo-picker-flat-hover-bg	Color	`rgba( $kendo-button-text, .08 )`	`rgba(33, 37, 41, 0.08)`
Description The background color of the flat hovered Picker components.
$kendo-picker-flat-hover-text	Null	`null`	`null`
Description The text color of the flat hovered Picker components.
$kendo-picker-flat-hover-border	Null	`null`	`null`
Description The border color of the flat hovered Picker components.
$kendo-picker-flat-focus-bg	Null	`null`	`null`
Description The background color of the flat focused Picker components.
$kendo-picker-flat-focus-text	Null	`null`	`null`
Description The text color of the flat focused Picker components.
$kendo-picker-flat-focus-border	Null	`null`	`null`
Description The border color of the flat focused Picker components.
$kendo-picker-flat-focus-shadow	List	`$kendo-picker-focus-shadow`	`0 0 0 0.25rem rgba(228, 231, 235, 0.5)`
Description The shadow of the flat focused Picker components.
$kendo-picker-flat-hover-focus-bg	Null	`null`	`null`
Description The background color of the flat hovered and focused Picker components.
$kendo-picker-flat-hover-focus-text	Null	`null`	`null`
Description The text color of the flat hovered and focused Picker components.
$kendo-picker-flat-hover-focus-border	Null	`null`	`null`
Description The border color of the flat hovered and focused Picker components.

Name	Type	Default value	Computed value
$kendo-popover-border-width	Number	`$kendo-card-border-width`	`1px`
Description The width of the border around the Popover.
$kendo-popover-border-style	String	`solid`	`solid`
Description The style of the border around the Popover.
$kendo-popover-border-radius	Number	`$kendo-card-border-radius`	`0.375rem`
Description The radius of the border around the Popover.
$kendo-popover-font-family	List	`$kendo-card-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the Popover.
$kendo-popover-font-size	Number	`$kendo-card-font-size`	`1rem`
Description The font size of the Popover.
$kendo-popover-line-height	Number	`$kendo-card-line-height`	`1.5`
Description The line height of the Popover.
$kendo-popover-text	Color	`$kendo-card-text`	`#212529`
Description The text color of the Popover.
$kendo-popover-bg	Color	`$kendo-card-bg`	`#ffffff`
Description The background color of the Popover.
$kendo-popover-border	Color	`$kendo-card-border`	`#dee2e6`
Description The border color of the Popover.
$kendo-popover-shadow	Null	`$kendo-card-shadow`	`null`
Description The box shadow of the Popover.
$kendo-popover-header-padding-x	Number	`$kendo-card-header-padding-x`	`1rem`
Description The horizontal padding of the Popover header.
$kendo-popover-header-padding-y	Number	`$kendo-card-header-padding-y`	`1rem`
Description The vertical padding of the Popover header.
$kendo-popover-header-border-width	Number	`$kendo-card-header-border-width`	`1px`
Description The border width of the Popover header.
$kendo-popover-header-border-style	String	`$kendo-popover-border-style`	`solid`
Description The border style of the Popover header.
$kendo-popover-header-text	Null	`null`	`null`
Description The text color of the Popover header.
$kendo-popover-header-bg	Null	`null`	`null`
Description The background color of the Popover header.
$kendo-popover-header-border	Null	`null`	`null`
Description The border color of the Popover header.
$kendo-popover-body-padding-x	Number	`$kendo-card-body-padding-x`	`1rem`
Description The horizontal padding of the Popover body.
$kendo-popover-body-padding-y	Number	`$kendo-card-body-padding-y`	`1rem`
Description The vertical padding of the Popover body.
$kendo-popover-actions-border-width	Number	`$kendo-popover-border-width`	`1px`
Description The border width of the Popover actions.
$kendo-popover-callout-width	Number	`$kendo-card-callout-width`	`1.3em`
Description The width of the Popover callout.
$kendo-popover-callout-height	Number	`$kendo-card-callout-height`	`1.3em`
Description The height of the Popover callout.
$kendo-popover-callout-border-width	Number	`$kendo-popover-border-width`	`1px`
Description The border width of the Popover callout.
$kendo-popover-callout-border-style	String	`$kendo-popover-border-style`	`solid`
Description The border style of the Popover callout.
$kendo-popover-callout-bg	Color	`$kendo-popover-bg`	`#ffffff`
Description The background color of the Popover callout.
$kendo-popover-callout-border	Color	`$kendo-popover-border`	`#dee2e6`
Description The border color of the Popover callout.

Name	Type	Default value	Computed value
$kendo-popup-padding-x	Null	`null`	`null`
Description Horizontal padding of the popup.
$kendo-popup-padding-y	Null	`null`	`null`
Description Vertical padding of the popup.
$kendo-popup-border-width	Number	`1px`	`1px`
Description Width of the border around the popup.
$kendo-popup-border-radius	Number	`$kendo-border-radius-md`	`0.375rem`
Description Border radius of the popup.
$kendo-popup-font-size	Number	`$kendo-font-size-md`	`1rem`
Description Font size of the popup.
$kendo-popup-line-height	Number	`$kendo-line-height-md`	`1.5`
Description Line height of the popup.
$kendo-popup-content-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description Horizontal padding of the popup content.
$kendo-popup-content-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description Vertical padding of the popup content.
$kendo-popup-bg	Color	`$kendo-component-bg`	`#ffffff`
Description Background color of the popup.
$kendo-popup-text	Color	`$kendo-component-text`	`#212529`
Description Text color of the popup.
$kendo-popup-border	Color	`$kendo-component-border`	`#dee2e6`
Description Border color of the popup.
$kendo-popup-shadow	List	`0 2px 4px 0 rgba( black, .03 ), 0 4px 5px 0 rgba( black, .04 )`	`0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04)`
Description Box shadow of the popup.

Progressbar

Name	Type	Default value	Computed value
$kendo-progressbar-height	Number	`$progress-height`	`1rem`
Description The height of the ProgressBar.
$kendo-progressbar-horizontal-width	Number	`100%`	`100%`
Description The horizontal width of the ProgressBar.
$kendo-progressbar-animation-timing	List	`$progress-bar-animation-timing`	`1s linear infinite`
Description The animation timing of the ProgressBar.
$kendo-progressbar-border-width	Number	`0px`	`0px`
Description The width of the border around the ProgressBar.
$kendo-progressbar-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the ProgressBar.
$kendo-progressbar-font-size	Number	`$progress-font-size`	`0.75rem`
Description The font size of the ProgressBar.
$kendo-progressbar-line-height	Number	`1`	`1`
Description The line height of the ProgressBar.
$kendo-progressbar-bg	Color	`$gray-200`	`#e9ecef`
Description The background color of the ProgressBar.
$kendo-progressbar-text	Color	`k-contrast-color( $gray-200 )`	`black`
Description The text color of the ProgressBar.
$kendo-progressbar-border	Null	`null`	`null`
Description The border color of the ProgressBar.
$kendo-progressbar-gradient	Null	`null`	`null`
Description The background gradient of the ProgressBar.
$kendo-progressbar-value-bg	Color	`$kendo-selected-bg`	`#0d6efd`
Description The progress background color of the ProgressBar.
$kendo-progressbar-value-text	Color	`$kendo-selected-text`	`white`
Description The progress text color of the ProgressBar.
$kendo-progressbar-value-border	Null	`null`	`null`
Description The progress border color of the ProgressBar.
$kendo-progressbar-value-gradient	Null	`null`	`null`
Description The progress background gradient of the ProgressBar.
$kendo-progressbar-indeterminate-bg	Color	`$kendo-progressbar-bg`	`#e9ecef`
Description The background color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-text	Color	`$kendo-progressbar-text`	`black`
Description The text color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-border	Null	`$kendo-progressbar-border`	`null`
Description The border color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-gradient	Null	`null`	`null`
Description The background gradient of the indeterminate ProgressBar.
$kendo-progressbar-chunk-border	Color	`$kendo-body-bg`	`#ffffff`
Description The border color of the chunk ProgressBar.
$kendo-circular-progressbar-arc-stroke	Color	`$kendo-color-primary`	`#0d6efd`
Description The arc stroke color of the circular ProgressBar.
$kendo-circular-progressbar-scale-stroke	Color	`$kendo-progressbar-bg`	`#e9ecef`
Description The scale stroke background color of the circular ProgressBar.

Radio

Name	Type	Default value	Computed value
$kendo-radio-radius	Number	`50%`	`50%`
Description The border radius of the RadioButton.
$kendo-radio-border-width	Number	`1px`	`1px`
Description The border width of the RadioButton.
$kendo-radio-sm-size	Number	`k-map-get( $kendo-spacing, 3 )`	`0.75rem`
Description The size of a small RadioButton.
$kendo-radio-md-size	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description The size of a medium RadioButton.
$kendo-radio-lg-size	Number	`k-map-get( $kendo-spacing, 5 )`	`1.25rem`
Description The size of a large RadioButton.
$kendo-radio-sm-glyph-size	Number	`k-map-get( $kendo-spacing, 2.5 )`	`0.625rem`
Description The glyph size of a small RadioButton.
$kendo-radio-md-glyph-size	Number	`k-map-get( $kendo-spacing, 3.5 )`	`0.875rem`
Description The glyph size of a medium RadioButton.
$kendo-radio-lg-glyph-size	Number	`k-map-get( $kendo-spacing, 4.5 )`	`1.125rem`
Description The glyph size of a large RadioButton.
$kendo-radio-sm-ripple-size	Number	`300%`	`300%`
Description The ripple size of a small RadioButton.
$kendo-radio-md-ripple-size	Number	`300%`	`300%`
Description The ripple size of a medium RadioButton.
$kendo-radio-lg-ripple-size	Number	`300%`	`300%`
Description The ripple size of a large RadioButton.
$kendo-radio-sizes	Map	`( sm: ( size: $kendo-radio-sm-size, glyph-size: $kendo-radio-sm-glyph-size, ripple-size: $kendo-radio-sm-ripple-size ), md: ( size: $kendo-radio-md-size, glyph-size: $kendo-radio-md-glyph-size, ripple-size: $kendo-radio-md-ripple-size ), lg: ( size: $kendo-radio-lg-size, glyph-size: $kendo-radio-lg-glyph-size, ripple-size: $kendo-radio-lg-ripple-size ) )`	`(sm: (size: 0.75rem, glyph-size: 0.625rem, ripple-size: 300%), md: (size: 1rem, glyph-size: 0.875rem, ripple-size: 300%), lg: (size: 1.25rem, glyph-size: 1.125rem, ripple-size: 300%))`
Description The map with the different RadioButton sizes.
$kendo-radio-bg	Color	`$kendo-checkbox-bg`	`#ffffff`
Description The background color of the RadioButton.
$kendo-radio-text	Null	`$kendo-checkbox-text`	`null`
Description The text color of radio button.
$kendo-radio-border	Color	`$kendo-checkbox-border`	`#ced4da`
Description The border color of the RadioButton.
$kendo-radio-hover-bg	Null	`$kendo-checkbox-hover-bg`	`null`
Description The background color of the hovered RadioButton.
$kendo-radio-hover-text	Null	`$kendo-checkbox-hover-text`	`null`
Description The text color of the hovered RadioButton.
$kendo-radio-hover-border	Null	`$kendo-checkbox-hover-border`	`null`
Description The border color of the hovered RadioButton.
$kendo-radio-checked-bg	Color	`$kendo-checkbox-checked-bg`	`#0d6efd`
Description The background color of the checked RadioButton.
$kendo-radio-checked-text	Color	`$kendo-checkbox-checked-text`	`white`
Description The text color of the checked RadioButton.
$kendo-radio-checked-border	Color	`$kendo-checkbox-checked-border`	`#0d6efd`
Description The border color of the checked RadioButton.
$kendo-radio-focus-border	Color	`$kendo-checkbox-focus-border`	`#86b7fe`
Description The border color of the focused RadioButton.
$kendo-radio-focus-shadow	List	`$kendo-checkbox-focus-shadow`	`0 0 0 0.25rem rgba(13, 110, 253, 0.25)`
Description The box shadow of the focused RadioButton.
$kendo-radio-focus-checked-border	Color	`$kendo-checkbox-focus-checked-border`	`#0d6efd`
Description The border color of the focused and checked RadioButton.
$kendo-radio-focus-checked-shadow	List	`$kendo-checkbox-focus-checked-shadow`	`0 0 0 0.25rem rgba(13, 110, 253, 0.25)`
Description The box shadow of the focused and checked RadioButton.
$kendo-radio-disabled-bg	Null	`$kendo-checkbox-disabled-bg`	`null`
Description The background color of the disabled RadioButton.
$kendo-radio-disabled-text	Null	`$kendo-checkbox-disabled-text`	`null`
Description The color of the disabled RadioButton.
$kendo-radio-disabled-border	Null	`$kendo-checkbox-disabled-border`	`null`
Description The border color of the disabled RadioButton.
$kendo-radio-disabled-checked-bg	Null	`$kendo-checkbox-disabled-checked-bg`	`null`
Description The background color of the disabled and checked RadioButton.
$kendo-radio-disabled-checked-text	Null	`$kendo-checkbox-disabled-checked-text`	`null`
Description The color of the disabled and checked RadioButton.
$kendo-radio-disabled-checked-border	Null	`$kendo-checkbox-disabled-checked-border`	`null`
Description The border color of disabled and checked RadioButton.
$kendo-radio-invalid-bg	Null	`$kendo-checkbox-invalid-bg`	`null`
Description The background color of the invalid RadioButton.
$kendo-radio-invalid-text	Color	`$kendo-checkbox-invalid-text`	`#dc3545`
Description The text color of the invalid RadioButton.
$kendo-radio-invalid-border	Color	`$kendo-checkbox-invalid-border`	`#dc3545`
Description The border color of the invalid RadioButton.
$kendo-radio-indicator-type	String	`image`	`image`
Description The type of the RadioButton indicator.
$kendo-radio-glyph-font-family	List	`"WebComponentsIcons", monospace`	`"WebComponentsIcons", monospace`
Description The font family of the RadioButton indicator glyph.
$kendo-radio-checked-glyph	String	`"\e308"`	`"\e308"`
Description The glyph of the RadioButton indicator.
$kendo-radio-checked-image	String	`k-escape-svg( url("data:image/svg+xml,") )`	`url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='white'/%3e%3c/svg%3e")`
Description The image of the checked RadioButton indicator.
$kendo-radio-disabled-checked-image	Null	`null`	`null`
Description The image of the disabled and checked RadioButton indicator.
$kendo-radio-label-margin-x	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The horizontal margin of the RadioButton inside of a label.
$kendo-radio-list-spacing	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description The horizontal list item margin of the RadioButton.
$kendo-radio-list-item-padding-x	Number	`0px`	`0px`
Description The horizontal list item padding of the RadioButton.
$kendo-radio-list-item-padding-y	Number	`$kendo-list-md-item-padding-y`	`0.25rem`
Description The vertical list item padding of the RadioButton.
$kendo-radio-ripple-bg	Color	`$kendo-radio-checked-bg`	`#0d6efd`
Description The background color of the RadioButton ripple.
$kendo-radio-ripple-opacity	Number	`.25`	`0.25`
Description The opacity of the RadioButton ripple.

Scrollview

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

Split-button

Name	Type	Default value	Computed value
$kendo-split-button-focus-shadow	List	`$kendo-button-focus-shadow`	`0 0 0 0.25rem rgba(228, 231, 235, 0.5)`
Description The focus shadow of the SplitButton.
$kendo-split-button-arrow-padding-x	Number	`$kendo-button-padding-y`	`0.375rem`
Description The horizontal padding of the arrow Button.
$kendo-split-button-sm-arrow-padding-x	Number	`$kendo-button-sm-padding-y`	`0.25rem`
Description The horizontal padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-x	Number	`$kendo-button-md-padding-y`	`0.375rem`
Description The horizontal padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-x	Number	`$kendo-button-lg-padding-y`	`0.5rem`
Description The horizontal padding of the large arrow Button.
$kendo-split-button-arrow-padding-y	Number	`$kendo-button-padding-y`	`0.375rem`
Description The vertical padding of the arrow Button.
$kendo-split-button-sm-arrow-padding-y	Number	`$kendo-button-sm-padding-y`	`0.25rem`
Description The vertical padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-y	Number	`$kendo-button-md-padding-y`	`0.375rem`
Description The vertical padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-y	Number	`$kendo-button-lg-padding-y`	`0.5rem`
Description The vertical padding of the large arrow Button.

Switch

Name	Type	Default value	Computed value
$kendo-switch-font-family	Null	`null`	`null`
Description The font family of the Switch.
$kendo-switch-track-border-width	Number	`1px`	`1px`
Description The border width of the Switch track.
$kendo-switch-thumb-border-width	Null	`null`	`null`
Description The border width of the Switch thumb.
$kendo-switch-label-text-transform	Null	`null`	`null`
Description The text transform of the Switch label.
$kendo-switch-label-display	String	`none`	`none`
Description The display of the Switch label.
$kendo-switch-sizes	Map	`( sm: ( font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null ), md: ( font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null ), lg: ( font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null ) )`	`(sm: (font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null), md: (font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null), lg: (font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null))`
Description The map with the different Switch sizes.
$kendo-switch-off-track-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background of the track when the Switch is not checked.
$kendo-switch-off-track-text	Null	`null`	`null`
Description The text color of the track when the Switch is not checked.
$kendo-switch-off-track-border	Color	`$gray-500`	`#adb5bd`
Description The border color of the track when the Switch is not checked.
$kendo-switch-off-track-gradient	Null	`null`	`null`
Description The background gradient of the track when the Switch is not checked.
$kendo-switch-off-track-hover-bg	Null	`null`	`null`
Description The background of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-text	Null	`null`	`null`
Description The text color of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-border	Null	`null`	`null`
Description The border color of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-gradient	Null	`null`	`null`
Description The background gradient of the track when the hovered Switch is not checked.
$kendo-switch-off-track-focus-bg	Null	`null`	`null`
Description The background of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-text	Null	`null`	`null`
Description The text color of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-border	Color	`k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary )`	`#86b7fe`
Description The border color of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-gradient	Null	`null`	`null`
Description The background gradient of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-ring	List	`.25rem solid rgba( $kendo-color-primary, .25 )`	`0.25rem solid rgba(13, 110, 253, 0.25)`
Description The ring around the track when the focused Switch is not checked.
$kendo-switch-off-track-disabled-bg	Color	`if( $kendo-is-dark-theme, $gray-800, $gray-200 )`	`#e9ecef`
Description The background of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-text	Null	`null`	`null`
Description The text color of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-border	Null	`null`	`null`
Description The border color of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-gradient	Null	`null`	`null`
Description The background gradient of the track when the disabled Switch is not checked.
$kendo-switch-off-thumb-bg	Color	`$gray-500`	`#adb5bd`
Description The background of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-text	Null	`null`	`null`
Description The text color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-border	Null	`null`	`null`
Description The border color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-hover-bg	Null	`null`	`null`
Description The background of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-text	Null	`null`	`null`
Description The text color of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-border	Null	`null`	`null`
Description The border color of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the hovered Switch is not checked.
$kendo-switch-on-track-bg	Color	`$kendo-color-primary`	`#0d6efd`
Description The background of the track when the Switch is checked.
$kendo-switch-on-track-text	Null	`null`	`null`
Description The text color of the track when the Switch is checked.
$kendo-switch-on-track-border	Color	`$kendo-switch-on-track-bg`	`#0d6efd`
Description The border color of the track when the Switch is checked.
$kendo-switch-on-track-gradient	Null	`null`	`null`
Description The background gradient of the track when the Switch is checked.
$kendo-switch-on-track-hover-bg	Null	`null`	`null`
Description The background of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-text	Null	`null`	`null`
Description The text color of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-border	Null	`null`	`null`
Description The border color of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-gradient	Null	`null`	`null`
Description The background gradient of the track when the hovered Switch is checked.
$kendo-switch-on-track-focus-bg	Null	`null`	`null`
Description The background of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-text	Null	`null`	`null`
Description The text color of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-border	Null	`null`	`null`
Description The border color of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-gradient	Null	`null`	`null`
Description The background gradient of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-ring	List	`.25rem solid rgba( $kendo-switch-on-track-border, .25 )`	`0.25rem solid rgba(13, 110, 253, 0.25)`
Description The ring around the track when the focused Switch is checked.
$kendo-switch-on-track-disabled-bg	Color	`k-try-tint( $kendo-switch-on-track-bg, 50% )`	`#86b7fe`
Description The background of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-text	Null	`null`	`null`
Description The text color of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-border	Null	`null`	`null`
Description The border color of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-gradient	Null	`null`	`null`
Description The background gradient of the track when the disabled Switch is checked.
$kendo-switch-on-thumb-bg	Color	`k-contrast-color( $kendo-switch-on-track-bg )`	`white`
Description The background of the thumb when the Switch is checked.
$kendo-switch-on-thumb-text	Null	`null`	`null`
Description The text color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-border	Null	`null`	`null`
Description The border color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the Switch is checked.
$kendo-switch-on-thumb-hover-bg	Null	`null`	`null`
Description The background of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-text	Null	`null`	`null`
Description The text color of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-border	Null	`null`	`null`
Description The border color of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-gradient	Null	`null`	`null`
Description The background gradient of the thumb when the hovered Switch is checked.

Table

Name	Type	Default value	Computed value
$kendo-table-border-width	Number	`1px`	`1px`
Description The width of the table border.
$kendo-table-cell-vertical-border-width	Number	`1px`	`1px`
Description The width of vertical border of table cells.
$kendo-table-cell-horizontal-border-width	Number	`0px`	`0px`
Description The width of horizontal border of table cells.
$kendo-table-font-size	Null	`null`	`null`
Description The font size of the table if no size is specified.
$kendo-table-line-height	Null	`null`	`null`
Description The line-height of the table if no size is specified.
$kendo-table-cell-padding-x	Null	`null`	`null`
Description The horizontal padding of the cells in the table if no size is specified.
$kendo-table-cell-padding-y	Null	`null`	`null`
Description The vertical padding of the cells in the table if no size is specified.
$kendo-table-sizes	Map	( sm: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-sm-cell-padding-x, cell-padding-y: $kendo-table-sm-cell-padding-y ), md: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-md-cell-padding-x, cell-padding-y: $kendo-table-md-cell-padding-y ), lg: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-lg-cell-padding-x, cell-padding-y: $kendo-table-lg-cell-padding-y ) )	`(sm: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.25rem), md: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.5rem), lg: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.625rem))`
Description The sizes of the table.
$kendo-table-bg	Color	`$kendo-component-bg`	`#ffffff`
Description Background color of tables.
$kendo-table-text	Color	`$kendo-component-text`	`#212529`
Description Text color of tables.
$kendo-table-border	Color	`$kendo-component-border`	`#dee2e6`
Description Border color of tables.
$kendo-table-header-bg	Color	`$kendo-component-header-bg`	`#f8f9fa`
Description Background color of table headers.
$kendo-table-header-text	Color	`$kendo-component-header-text`	`#212529`
Description Text color of table headers.
$kendo-table-header-border	Color	`$kendo-component-header-border`	`#dee2e6`
Description Border color of table headers.
$kendo-table-header-gradient	Null	`$kendo-component-header-gradient`	`null`
Description Gradient of table headers.
$kendo-table-footer-bg	Color	`$kendo-table-header-bg`	`#f8f9fa`
Description Background color of table footers.
$kendo-table-footer-text	Color	`$kendo-table-header-text`	`#212529`
Description Text color of table footers.
$kendo-table-footer-border	Color	`$kendo-table-header-border`	`#dee2e6`
Description Border color of table footers.
$kendo-table-group-row-bg	Color	`$kendo-table-header-bg`	`#f8f9fa`
Description Background color of group rows in table.
$kendo-table-group-row-text	Color	`$kendo-table-header-text`	`#212529`
Description Text color of group rows in table.
$kendo-table-group-row-border	Color	`$kendo-table-header-border`	`#dee2e6`
Description Border color of group rows in table.
$kendo-table-alt-row-bg	Color	`rgba( k-contrast-color( $kendo-table-bg ), .04 )`	`rgba(0, 0, 0, 0.04)`
Description Background color of alternating rows in table.
$kendo-table-alt-row-text	Null	`null`	`null`
Description Text color of alternating rows in table.
$kendo-table-alt-row-border	Null	`null`	`null`
Description Border color of alternating rows in table.
$kendo-table-hover-bg	Color	`rgba( k-contrast-color( $kendo-table-bg ), .08 )`	`rgba(0, 0, 0, 0.08)`
Description Background color of hovered rows in table.
$kendo-table-hover-text	Null	`null`	`null`
Description Text color of hovered rows in table.
$kendo-table-hover-border	Null	`null`	`null`
Description Border color of hovered rows in table.
$kendo-table-focus-bg	Null	`null`	`null`
Description Background color of focused rows in table.
$kendo-table-focus-text	Null	`null`	`null`
Description Text color of focused rows in table.
$kendo-table-focus-border	Null	`null`	`null`
Description Border color of focused rows in table.
$kendo-table-focus-shadow	List	`inset 0 0 0 2px rgba( $kendo-color-black, .08)`	`inset 0 0 0 2px rgba(0, 0, 0, 0.08)`
Description Box shadow of focused rows in table.
$kendo-table-selected-bg	Color	`rgba( $kendo-selected-bg, .25 )`	`rgba(13, 110, 253, 0.25)`
Description Background color of selected rows in table.
$kendo-table-selected-text	Color	`$kendo-table-text`	`#212529`
Description Text color of selected rows in table.
$kendo-table-selected-border	Null	`null`	`null`
Description Border color of selected rows in table.

Tabstrip

Name	Type	Default value	Computed value
$kendo-tabstrip-bg	Null	`null`	`null`
Description Background color of tabstrip component
$kendo-tabstrip-text	Color	`$kendo-component-text`	`#212529`
Description Text color of tabstrip component
$kendo-tabstrip-border	Color	`$kendo-component-border`	`#dee2e6`
Description Border color of tabstrip component
$kendo-tabstrip-item-padding-x	Number	`$nav-link-padding-x`	`1rem`
Description Horizontal padding of tabs
$kendo-tabstrip-item-padding-y	Number	`$nav-link-padding-y`	`0.5rem`
Description Vertical padding of tabs
$kendo-tabstrip-item-border-width	Number	`1px`	`1px`
Description Width of border around tabs
$kendo-tabstrip-item-border-radius	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description Border radius of tabs
$kendo-tabstrip-item-gap	Number	`0`	`0`
Description Spacing between tabs
$kendo-tabstrip-item-bg	Null	`null`	`null`
Description Background color of tabs
$kendo-tabstrip-item-text	Color	`$kendo-link-text`	`#0d6efd`
Description Text color of tabs
$kendo-tabstrip-item-border	Null	`null`	`null`
Description Border color of tabs
$kendo-tabstrip-item-gradient	Null	`null`	`null`
Description Background gradient of tabs
$kendo-tabstrip-item-hover-bg	Null	`null`	`null`
Description Background color of hovered tabs
$kendo-tabstrip-item-hover-text	Color	`$kendo-link-hover-text`	`#0a58ca`
Description Text color of hovered tabs
$kendo-tabstrip-item-hover-border	Color	`$gray-200`	`#e9ecef`
Description Border color of hovered tabs
$kendo-tabstrip-item-hover-gradient	Null	`null`	`null`
Description Background gradient of hovered tabs
$kendo-tabstrip-item-selected-bg	Color	`$kendo-component-bg`	`#ffffff`
Description Background color of selected tabs
$kendo-tabstrip-item-selected-text	Color	`$kendo-component-text`	`#212529`
Description Text color of selected tabs
$kendo-tabstrip-item-selected-border	Color	`$kendo-component-border`	`#dee2e6`
Description Border color of selected tabs
$kendo-tabstrip-item-selected-gradient	Null	`null`	`null`
Description Background gradient of selected tabs
$kendo-tabstrip-content-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description Horizontal padding of tabstrip content
$kendo-tabstrip-content-padding-y	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description Vertical padding of tabstrip content
$kendo-tabstrip-content-border-width	Number	`$kendo-tabstrip-border-width`	`1px`
Description Width of border around tabstrip content
$kendo-tabstrip-content-bg	Color	`$kendo-component-bg`	`#ffffff`
Description Background color of tabstrip content
$kendo-tabstrip-content-text	Color	`$kendo-component-text`	`#212529`
Description Text color of tabstrip content
$kendo-tabstrip-content-border	Color	`$kendo-component-border`	`#dee2e6`
Description Border color of tabstrip content
$kendo-tabstrip-content-focus-border	Color	`$kendo-component-text`	`#212529`
Description Border color of tabstrip focused content

Tilelayout

Name	Type	Default value	Computed value
$kendo-tile-layout-border-width	Number	`0px`	`0px`
Description The width of the border around the TileLayout.
$kendo-tile-layout-bg	Color	`$gray-100`	`#f8f9fa`
Description The background color of the TileLayout.
$kendo-tile-layout-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description The horizontal padding of the TileLayout.
$kendo-tile-layout-padding-y	Number	`$kendo-tile-layout-padding-x`	`1rem`
Description The vertical padding of the TileLayout
$kendo-tile-layout-card-border-width	Number	`$kendo-card-border-width`	`1px`
Description The width of the border around the TileLayout card.
$kendo-tile-layout-card-focus-shadow	List	`$kendo-card-focus-shadow`	`0 0 0 3px rgba(222, 226, 230, 0.5)`
Description The focus box shadow of the TileLayout card.
$kendo-tile-layout-hint-border-width	Number	`1px`	`1px`
Description The width of the border around the TileLayout hint.
$kendo-tile-layout-hint-border-radius	Number	`$kendo-card-border-radius`	`0.375rem`
Description The radius of the border around the TileLayout hint.
$kendo-tile-layout-hint-border	Color	`$kendo-component-border`	`#dee2e6`
Description The color of the border around the TileLayout hint.
$kendo-tile-layout-hint-bg	Color	`rgba( white, .2 )`	`rgba(255, 255, 255, 0.2)`
Description The background color of the TileLayout hint.

Name	Type	Default value	Computed value
$kendo-toolbar-padding-x	Null	`null`	`null`
Description The horizontal padding of the Toolbar.
$kendo-toolbar-sm-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The horizontal padding of the small Toolbar.
$kendo-toolbar-md-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description The horizontal padding of the medium Toolbar.
$kendo-toolbar-lg-padding-x	Number	`k-map-get( $kendo-spacing, 2.5 )`	`0.625rem`
Description The horizontal padding of the large Toolbar.
$kendo-toolbar-padding-y	Null	`null`	`null`
Description The vertical padding of the Toolbar.
$kendo-toolbar-sm-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The vertical padding of the small Toolbar.
$kendo-toolbar-md-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description The vertical padding of the medium Toolbar.
$kendo-toolbar-lg-padding-y	Number	`k-map-get( $kendo-spacing, 2.5 )`	`0.625rem`
Description The vertical padding of the large Toolbar.
$kendo-toolbar-spacing	Null	`null`	`null`
Description The spacing between the Toolbar tools.
$kendo-toolbar-sm-spacing	Number	`k-map-get( $kendo-spacing, 1.5 )`	`0.375rem`
Description The spacing between the tools of the small Toolbar.
$kendo-toolbar-md-spacing	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description The spacing between the tools of the medium Toolbar.
$kendo-toolbar-lg-spacing	Number	`k-map-get( $kendo-spacing, 2.5 )`	`0.625rem`
Description The spacing between the tools of the large Toolbar.
$kendo-toolbar-border-width	Number	`1px`	`1px`
Description The width of the border around the Toolbar.
$kendo-toolbar-border-radius	Null	`null`	`null`
Description The border radius of the Toolbar.
$kendo-toolbar-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the Toolbar.
$kendo-toolbar-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the Toolbar.
$kendo-toolbar-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the Toolbar.
$kendo-toolbar-bg	Color	`$kendo-component-header-bg`	`#f8f9fa`
Description The background color of the Toolbar.
$kendo-toolbar-text	Color	`$kendo-component-header-text`	`#212529`
Description The text color of the Toolbar.
$kendo-toolbar-border	Color	`$kendo-component-header-border`	`#dee2e6`
Description The color of the border around the Toolbar.
$kendo-toolbar-gradient	Null	`null`	`null`
Description The gradient of the Toolbar.
$kendo-toolbar-shadow	Null	`null`	`null`
Description The box shadow of the Toolbar.
$kendo-toolbar-separator-border	String	`inherit`	`inherit`
Description The color of the separator border of the Toolbar.
$kendo-toolbar-input-width	Number	`10em`	`10em`
Description The width of the input in the Toolbar.
$kendo-toolbar-item-shadow	List	`0 0 0 .25rem rgba( $kendo-color-primary, .25 )`	`0 0 0 0.25rem rgba(13, 110, 253, 0.25)`
Description The box shadow of the focused Toolbar item.
$kendo-toolbar-sizes	Map	`( sm: ( padding-x: $kendo-toolbar-sm-padding-x, padding-y: $kendo-toolbar-sm-padding-y, spacing: $kendo-toolbar-sm-spacing ), md: ( padding-x: $kendo-toolbar-md-padding-x, padding-y: $kendo-toolbar-md-padding-y, spacing: $kendo-toolbar-md-spacing ), lg: ( padding-x: $kendo-toolbar-lg-padding-x, padding-y: $kendo-toolbar-lg-padding-y, spacing: $kendo-toolbar-lg-spacing ) )`	`(sm: (padding-x: 0.25rem, padding-y: 0.25rem, spacing: 0.375rem), md: (padding-x: 0.5rem, padding-y: 0.5rem, spacing: 0.5rem), lg: (padding-x: 0.625rem, padding-y: 0.625rem, spacing: 0.625rem))`
Description The sizes map for the Toolbar.

Treeview

Name	Type	Default value	Computed value
$kendo-treeview-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the TreeView.
$kendo-treeview-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the TreeView.
$kendo-treeview-sm-font-size	Number	`$kendo-font-size-sm`	`0.875rem`
Description The font size of the small TreeView.
$kendo-treeview-md-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the medium TreeView.
$kendo-treeview-lg-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the large TreeView.
$kendo-treeview-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the TreeView.
$kendo-treeview-sm-line-height	Number	`k-math-div( 20, 14 )`	`1.4285714286`
Description The line height of the small TreeView.
$kendo-treeview-md-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the medium TreeView.
$kendo-treeview-lg-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the large TreeView.
$kendo-treeview-indent	Number	`24px`	`24px`
Description The indentation of child groups in the TreeView.
$kendo-treeview-item-padding-x	Number	`k-map-get( $kendo-spacing, 3 )`	`0.75rem`
Description The horizontal padding of the TreeView items.
$kendo-treeview-sm-item-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description The horizontal padding of the small TreeView items.
$kendo-treeview-md-item-padding-x	Number	`k-map-get( $kendo-spacing, 3 )`	`0.75rem`
Description The horizontal padding of the medium TreeView items.
$kendo-treeview-lg-item-padding-x	Number	`k-map-get( $kendo-spacing, 3 )`	`0.75rem`
Description The horizontal padding of the large TreeView items.
$kendo-treeview-item-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The vertical padding of the TreeView items.
$kendo-treeview-sm-item-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The vertical padding of the small TreeView items.
$kendo-treeview-md-item-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The vertical padding of the medium TreeView items.
$kendo-treeview-lg-item-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description The vertical padding of the large TreeView items.
$kendo-treeview-item-border-width	Number	`0px`	`0px`
Description The border width of the TreeView items.
$kendo-treeview-item-border-radius	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The border radius of the TreeView items.
$kendo-treeview-sm-checkbox-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The horizontal padding of the checkbox in the small TreeView.
$kendo-treeview-md-checkbox-padding-x	Number	`$kendo-treeview-sm-checkbox-padding-x`	`0.25rem`
Description The horizontal padding of the checkbox in the medium TreeView.
$kendo-treeview-lg-checkbox-padding-x	Number	`$kendo-treeview-sm-checkbox-padding-x`	`0.25rem`
Description The horizontal padding of the checkbox in the large TreeView.
$kendo-treeview-sm-checkbox-padding-y	Number	`k-map-get( $kendo-spacing, .5 )`	`0.125rem`
Description The vertical padding of the checkbox in the small TreeView.
$kendo-treeview-md-checkbox-padding-y	Null	`null`	`null`
Description The vertical padding of the checkbox in the medium TreeView.
$kendo-treeview-lg-checkbox-padding-y	Null	`null`	`null`
Description The vertical padding of the checkbox in the large TreeView.
$kendo-treeview-sizes	Map	( sm: ( font-size: $kendo-treeview-sm-font-size, line-height: $kendo-treeview-sm-line-height, item-padding-x: $kendo-treeview-sm-item-padding-x, item-padding-y: $kendo-treeview-sm-item-padding-y, checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x, checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y ), md: ( font-size: $kendo-treeview-md-font-size, line-height: $kendo-treeview-md-line-height, item-padding-x: $kendo-treeview-md-item-padding-x, item-padding-y: $kendo-treeview-md-item-padding-y, checkbox-padding-x: $kendo-treeview-md-checkbox-padding-x, checkbox-padding-y: $kendo-treeview-md-checkbox-padding-y ), lg: ( font-size: $kendo-treeview-lg-font-size, line-height: $kendo-treeview-lg-line-height, item-padding-x: $kendo-treeview-lg-item-padding-x, item-padding-y: $kendo-treeview-lg-item-padding-y, checkbox-padding-x: $kendo-treeview-lg-checkbox-padding-x, checkbox-padding-y: $kendo-treeview-lg-checkbox-padding-y ) )	`(sm: (font-size: 0.875rem, line-height: 1.4285714286, item-padding-x: 0.5rem, item-padding-y: 0.25rem, checkbox-padding-x: 0.25rem, checkbox-padding-y: 0.125rem), md: (font-size: 1rem, line-height: 1.5, item-padding-x: 0.75rem, item-padding-y: 0.25rem, checkbox-padding-x: 0.25rem, checkbox-padding-y: null), lg: (font-size: 1rem, line-height: 1.5, item-padding-x: 0.75rem, item-padding-y: 0.5rem, checkbox-padding-x: 0.25rem, checkbox-padding-y: null))`
Description The sizes map of the TreeView.
$kendo-treeview-bg	Null	`null`	`null`
Description The background color of the TreeView.
$kendo-treeview-text	Color	`$kendo-component-text`	`#212529`
Description The text color of the TreeView.
$kendo-treeview-border	Null	`null`	`null`
Description The border color of the TreeView.
$kendo-treeview-item-hover-bg	Color	`$kendo-hover-bg`	`#e9ecef`
Description The background color of hovered TreeView items.
$kendo-treeview-item-hover-text	Color	`$kendo-hover-text`	`#212529`
Description The text color of hovered TreeView items.
$kendo-treeview-item-hover-border	Color	`$kendo-treeview-item-hover-bg`	`#e9ecef`
Description The border color of hovered TreeView items.
$kendo-treeview-item-hover-gradient	Null	`null`	`null`
Description The background gradient of hovered TreeView items.
$kendo-treeview-item-selected-bg	Color	`$kendo-selected-bg`	`#0d6efd`
Description The background color of selected TreeView items.
$kendo-treeview-item-selected-text	Color	`$kendo-selected-text`	`white`
Description The text color of selected TreeView items.
$kendo-treeview-item-selected-border	Color	`$kendo-treeview-item-selected-bg`	`#0d6efd`
Description The border color of selected TreeView items.
$kendo-treeview-item-selected-gradient	Null	`null`	`null`
Description The background gradient of selected TreeView items.
$kendo-treeview-item-focus-shadow	List	`inset 0 0 0 2px rgba( $kendo-treeview-text, .15 )`	`inset 0 0 0 2px rgba(33, 37, 41, 0.15)`
Description The box shadow of focused TreeView items.
$kendo-treeview-loadmore-bg	Color	`transparent`	`transparent`
Description The background color of the Load More button in the TreeView.
$kendo-treeview-loadmore-text	Color	`$kendo-link-text`	`#0d6efd`
Description The text color of the Load More button in the TreeView.
$kendo-treeview-loadmore-border	Null	`null`	`null`
Description The border color of the Load More button in the TreeView.
$kendo-treeview-loadmore-hover-bg	Color	`transparent`	`transparent`
Description The background color of the hovered Load More button in the TreeView.
$kendo-treeview-loadmore-hover-text	Color	`$kendo-link-hover-text`	`#0a58ca`
Description The text color of the hovered Load More button in the TreeView.
$kendo-treeview-loadmore-hover-border	Null	`null`	`null`
Description The border color of the hovered Load More button in the TreeView.
$kendo-treeview-loadmore-focus-bg	Color	`transparent`	`transparent`
Description The background color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-text	Color	`$kendo-link-hover-text`	`#0a58ca`
Description The text color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-border	Null	`null`	`null`
Description The border color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-shadow	List	`$kendo-treeview-item-focus-shadow`	`inset 0 0 0 2px rgba(33, 37, 41, 0.15)`
Description The box shadow of the focused Load More button in the TreeView.

Typography

Name	Type	Default value	Computed value
$kendo-font-size	Number	`$font-size-base`	`1rem`
Description Base font size across all components.
$kendo-font-family-sans-serif	List	`$font-family-sans-serif`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description Font family for text.
$kendo-font-family-monospace	List	`$font-family-monospace`	`SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`
Description Font family for monospaced text. Used for styling the code.
$kendo-font-family	List	`$kendo-font-family-sans-serif`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description Font family across all components.
$kendo-line-height	Number	`$line-height-base`	`1.5`
Description Line height used along with $kendo-font-size.

Upload

Name	Type	Default value	Computed value
$kendo-upload-border-width	Number	`1px`	`1px`
Description The width of the border around the Upload.
$kendo-upload-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the Upload.
$kendo-upload-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the Upload.
$kendo-upload-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the Upload.
$kendo-upload-max-height	Number	`300px`	`300px`
Description The maximum height of the list with uploaded items.
$kendo-upload-text	Color	`$kendo-component-text`	`#212529`
Description The text color of the Upload.
$kendo-upload-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The background color of the Upload.
$kendo-upload-border	Color	`$kendo-component-border`	`#dee2e6`
Description The border color of the Upload.
$kendo-upload-dropzone-padding-x	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description The horizontal padding of the Upload dropzone.
$kendo-upload-dropzone-padding-y	Number	`k-map-get( $kendo-spacing, 2 )`	`0.5rem`
Description The vertical padding of the Upload dropzone.
$kendo-upload-dropzone-text	Color	`$kendo-component-header-text`	`#212529`
Description The text color of the Upload dropzone.
$kendo-upload-dropzone-bg	Color	`$kendo-component-header-bg`	`#f8f9fa`
Description The background color of the Upload dropzone.
$kendo-upload-dropzone-border	Color	`$kendo-upload-border`	`#dee2e6`
Description The border color of the Upload dropzone.
$kendo-upload-dropzone-hover-bg	Color	`k-try-shade( $kendo-upload-dropzone-bg, .2 )`	`#f4f5f6`
Description The background color of the hovered Upload dropzone.
$kendo-upload-status-text	Color	`$kendo-subtle-text`	`#6c757d`
Description The text color of the Upload status message.
$kendo-upload-status-text-opacity	Null	`null`	`null`
Description The opacity of the Upload status message.
$kendo-upload-item-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description The horizontal padding of an uploaded item.
$kendo-upload-item-padding-y	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description The vertical padding of an uploaded item.
$kendo-upload-multiple-items-spacing	Number	`12px`	`12px`
Description The vertical spacing between uploaded batch items.
$kendo-upload-validation-font-size	Number	`11px`	`11px`
Description The font size of the Upload validation message.
$kendo-upload-icon-spacing	Number	`$kendo-icon-spacing`	`0.5rem`
Description The horizontal spacing of the Upload status icon.
$kendo-upload-icon-color	Color	`$kendo-subtle-text`	`#6c757d`
Description The color of the uploaded items icon.
$kendo-upload-progress-thickness	Number	`2px`	`2px`
Description The thickness of the Upload progress bar.
$kendo-upload-progress-bg	Color	`$kendo-color-info`	`#0dcaf0`
Description The background color of the Upload progress bar.
$kendo-upload-success-text	Color	`$kendo-color-success`	`#198754`
Description The success text color of the Upload.
$kendo-upload-success-bg	Color	`$kendo-color-success`	`#198754`
Description The success background color of the Upload progress bar.
$kendo-upload-error-text	Color	`$kendo-color-error`	`#dc3545`
Description The error text color of the Upload.
$kendo-upload-error-bg	Color	`$kendo-color-error`	`#dc3545`
Description The error background color of the Upload progress bar.
$kendo-upload-focus-shadow	List	`0 0 0 2px rgba(0, 0, 0, .13)`	`0 0 0 2px rgba(0, 0, 0, 0.13)`
Description The shadow of the focused Upload button, actions and uploaded items.

Window

Name	Type	Default value	Computed value
$kendo-window-border-width	Number	`1px`	`1px`
Description The width of the border around the Window.
$kendo-window-border-radius	Number	`$kendo-border-radius-md`	`0.375rem`
Description The border radius of the Window.
$kendo-window-font-family	List	`$kendo-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The font family of the Window.
$kendo-window-font-size	Number	`$kendo-font-size-md`	`1rem`
Description The font size of the Window.
$kendo-window-line-height	Number	`$kendo-line-height-md`	`1.5`
Description The line height of the Window.
$kendo-window-titlebar-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description The horizontal padding of the Window titlebar.
$kendo-window-titlebar-padding-y	Number	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description The vertical padding of the Window titlebar.
$kendo-window-titlebar-border-width	List	`0 0 1px`	`0 0 1px`
Description The width of the border of the Window titlebar.
$kendo-window-titlebar-border-style	String	`solid`	`solid`
Description The style of the border of the Window titlebar.
$kendo-window-title-font-size	Number	`$kendo-font-size-lg`	`1.25rem`
Description The font size of the title of the Window.
$kendo-window-title-line-height	Number	`1.5`	`1.5`
Description The line height of the title of the Window.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

Customization