Styling & Themes / Fluent Theme / Customization /

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

Customization

Variables

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

Common

Name	Type	Default value	Computed value
$kendo-adaptive-actionsheet-font-size		`$kendo-font-size-lg`
Description Font size of the adaptive action sheet.
$kendo-card-brand-colors		`( primary, error, warning, success, info )`
Description Theme variations for the card.
$kendo-card-theme-colors		`()`
Description Theme colors map for the card variations.
$kendo-chip-theme-colors		`()`
Description The theme colors map for the Chip.
$kendo-font-size		`14px`
Description Base font size across all components.
$kendo-font-family		`"Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif`
Description Font family across all components.
$kendo-line-height		`math.div( 20, 14 )`
Description Line height used along with $kendo-font-size.
$kendo-font-weight		`400`
Description Font weight.
$kendo-box-shadow-depth-1		`var( --kendo-elevation-1, none )`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for cards and grid item thumbnails. Equivalent to fluent depth 4.
$kendo-box-shadow-depth-2		`var( --kendo-elevation-2, none )`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for color gradient drag handle. Equivalent to fluent depth 8.
$kendo-box-shadow-depth-3		`var( --kendo-elevation-3, none )`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for focus card.
$kendo-box-shadow-depth-4		`var( --kendo-elevation-4, none )`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for panels. Equivalent to fluent depth 16.
$kendo-box-shadow-depth-5		`var( --kendo-elevation-5, none )`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for floating action button.
$kendo-box-shadow-depth-6		`var( --kendo-elevation-6, none )`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for pop up.
$kendo-box-shadow-depth-7		`var( --kendo-elevation-7, none )`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for action sheet.
$kendo-box-shadow-depth-8		`var( --kendo-elevation-8, none )`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for dialogs and window. Equivalent to fluent depth 64.
$kendo-box-shadow-depth-9		`var( --kendo-elevation-8, none )`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for focus window.
$kendo-dialog-brand-colors		`( primary: primary )`
Description The theme variations for the Dialog.
$kendo-dialog-theme-colors		`()`
Description The theme colors map for the Dialog.
$kendo-tooltip-brand-colors		`(error, warning, success, info )`
Description Theme variations for the tooltip.
$kendo-tooltip-theme-colors		`()`
Description Theme colors map for the tooltip variations.

Action-buttons

Name	Type	Default value	Computed value
$kendo-actions-padding-x		`map.get( $kendo-spacing, 3 )`
Description Horizontal padding of the action buttons container.
$kendo-actions-padding-y		`map.get( $kendo-spacing, 3 )`
Description Vertical padding of the action buttons container.
$kendo-actions-border-width		`0px`
Description Width of the border around the action buttons container.
$kendo-actions-bg		`inherit`
Description The background color of the action buttons container.
$kendo-actions-text		`inherit`
Description The text color of the action buttons container.
$kendo-actions-border		`inherit`
Description The border color of the action buttons container.

Action-sheet

Name	Type	Default value	Computed value
$kendo-actionsheet-padding-x		`0px`
Description Horizontal padding of the action sheet.
$kendo-actionsheet-padding-y		`0px`
Description Vertical padding of the action sheet.
$kendo-actionsheet-width		`360px`
Description Width of the action sheet.
$kendo-actionsheet-max-width		`100%`
Description Maximum width of the action sheet.
$kendo-actionsheet-height		`60vh`
Description Height of the action sheet.
$kendo-actionsheet-max-height		`60vh`
Description Maximum height of the action sheet.
$kendo-actionsheet-border-width		`0px`
Description Border width around the action sheet.
$kendo-actionsheet-border-radius		`0px`
Description Border radius of the action sheet.
$kendo-actionsheet-font-size		`var( --kendo-font-size, inherit )`
Description Font size of the action sheet.
$kendo-actionsheet-font-family		`var( --kendo-font-family, inherit )`
Description Font family of the action sheet.
$kendo-actionsheet-line-height		`var( --kendo-line-height, inherit )`
Description Line height of the action sheet.
$kendo-actionsheet-bg		`var( --kendo-component-bg, initial )`
Description Background color of the action sheet.
$kendo-actionsheet-text		`var( --kendo-component-text, initial )`
Description Text color of the action sheet.
$kendo-actionsheet-border		`var( --kendo-component-border, initial )`
Description Border color of the action sheet.
$kendo-actionsheet-shadow		`var( --kendo-box-shadow-depth-7, none )`
Description Box shadow of the action sheet.
$kendo-actionsheet-header-padding-x		`map.get( $kendo-spacing, 4 )`
Description Horizontal padding of the action sheet header.
$kendo-actionsheet-header-padding-y		`map.get( $kendo-spacing, 2 )`
Description Vertical padding of the action sheet header.
$kendo-actionsheet-header-border-width		`1px`
Description Border width of the action sheet header.
$kendo-actionsheet-header-font-size		`inherit`
Description Font size of the action sheet header.
$kendo-actionsheet-header-font-family		`inherit`
Description Font family of the action sheet header.
$kendo-actionsheet-header-line-height		`inherit`
Description Line height of the action sheet header.
$kendo-actionsheet-header-gap		`map.get( $kendo-spacing, 4 )`
Description Spacing between the action sheet header groups.
$kendo-actionsheet-header-bg		`inherit`
Description Background color of the action sheet header.
$kendo-actionsheet-header-text		`inherit`
Description Text color of the action sheet header.
$kendo-actionsheet-header-border		`inherit`
Description Border color of the action sheet header.
$kendo-actionsheet-header-shadow		`none`
Description Box shadow of the action sheet header.
$kendo-actionsheet-subtitle-font-size		`var( --kendo-font-size-sm, inherit )`
Description Font size of the action sheet subtitle.
$kendo-actionsheet-subtitle-line-height		`var( --kendo-line-height-sm, inherit )`
Description Line height of the action sheet subtitle.
$kendo-actionsheet-subtitle-text		`var( --kendo-subtle-text, inherit )`
Description Text color of the action sheet subtitle.
$kendo-actionsheet-item-min-height		`40px`
Description Minimum height of the action sheet item.
$kendo-actionsheet-item-padding-x		`map.get( $kendo-spacing, 4 )`
Description Horiozontal padding of the action sheet item.
$kendo-actionsheet-item-padding-y		`map.get( $kendo-spacing, 2 )`
Description Vertical padding of the action sheet item.
$kendo-actionsheet-item-border-width		`1px`
Description Border around the action sheet item.
$kendo-actionsheet-item-spacing		`map.get( $kendo-spacing, 2 )`
Description Spacing between the icon and the text in the action sheet item.
$kendo-actionsheet-item-icon-color		`k-get-theme-color-var( primary-110 )`
Description Color of the action sheet item icon.
$kendo-actionsheet-item-title-font-weight		`inherit`
Description Font weight of the action sheet item text.
$kendo-actionsheet-item-title-text-transform		`none`
Description Transform of the action sheet item text.
$kendo-actionsheet-item-description-font-size		`var( --kendo-font-size-sm, inherit )`
Description Font size of the action sheet item description.
$kendo-actionsheet-item-description-text		`var( --kendo-subtle-text, inherit )`
Description Color of the action sheet item description.
$kendo-actionsheet-item-hover-bg		`var( --kendo-hover-bg, inherit )`
Description Hover background color of the action sheet item.
$kendo-actionsheet-item-hover-text		`var( --kendo-hover-text, inherit )`
Description Hover text color of the action sheet item.
$kendo-actionsheet-item-hover-border		`inherit`
Description Hover border color of the action sheet item.
$kendo-actionsheet-item-focus-bg		`inherit`
Description Focus background color of the action sheet item.
$kendo-actionsheet-item-focus-text		`inherit`
Description Focus text color of the action sheet item.
$kendo-actionsheet-item-focus-border		`inherit`
Description Focus border color of the action sheet item.
$kendo-actionsheet-item-focus-outline		`var( --kendo-outline-color, inherit )`
Description Focus outline color of the action sheet item.
$kendo-actionsheet-item-focus-outline-width		`1px`
Description Focus outline width of the action sheet item.
$kendo-actionsheet-item-focus-hover-bg		`$kendo-actionsheet-item-hover-bg`
Description Focus and hover background color of the action sheet item.
$kendo-actionsheet-item-focus-hover-text		`$kendo-actionsheet-item-hover-text`
Description Focus and hover text color of the action sheet item.
$kendo-actionsheet-item-focus-hover-border		`$kendo-actionsheet-item-hover-border`
Description Focus and hover border color of the action sheet item.
$kendo-actionsheet-item-disabled-bg		`$kendo-actionsheet-bg`
Description Disabled background color of the action sheet item.
$kendo-actionsheet-item-disabled-text		`var( --kendo-disabled-text, inherit )`
Description Disabled text color of the action sheet item.
$kendo-actionsheet-item-disabled-border		`var( --kendo-disabled-border, inherit )`
Description Disabled border color of the action sheet item.
$kendo-adaptive-actionsheet-header-border-width		`1px`
Description Border width of the adaptive action sheet titlebar.
$kendo-adaptive-actionsheet-header-padding-y		`map.get( $kendo-spacing, 4 )`
Description Vertical padding of the adaptive action sheet titlebar.
$kendo-adaptive-actionsheet-header-padding-x		`$kendo-adaptive-actionsheet-header-padding-y`
Description Horizontal padding of the adaptive action sheet titlebar.
$kendo-adaptive-actionsheet-header-border		`var( --kendo-component-border, initial )`
Description Text color of the adaptive action sheet titlebar.
$kendo-adaptive-actionsheet-content-padding-y		`map.get( $kendo-spacing, 2 )`
Description Vertical padding of the adaptive action sheet content.
$kendo-adaptive-actionsheet-content-padding-x		`map.get( $kendo-spacing, 4 )`
Description Horizontal padding of the adaptive action sheet content.
$kendo-adaptive-actionsheet-footer-padding-y		`map.get( $kendo-spacing, 2 )`
Description Vertical padding of the adaptive action sheet footer.
$kendo-adaptive-actionsheet-footer-padding-x		`map.get( $kendo-spacing, 4 )`
Description Horizontal padding of the adaptive action sheet footer.

Appbar

Name	Type	Default value	Computed value
$kendo-appbar-margin-x		`0`
Description The horizontal margin of the AppBar.
$kendo-appbar-margin-y		`0`
Description The vertical margin of the AppBar.
$kendo-appbar-padding-x		`map.get( $kendo-spacing, 2 )`
Description The horizontal padding of the AppBar.
$kendo-appbar-padding-y		`map.get( $kendo-spacing, 2 )`
Description The vertical padding of the AppBar.
$kendo-appbar-border-width		`0px`
Description The width of the border around the AppBar.
$kendo-appbar-zindex		`1000`
Description The z-index of the AppBar.
$kendo-appbar-font-family		`var( --kendo-font-family, inherit )`
Description The font family of the AppBar.
$kendo-appbar-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the AppBar.
$kendo-appbar-line-height		`var( --kendo-line-height, normal )`
Description The line height of the AppBar.
$kendo-appbar-spacing		`map.get( $kendo-spacing, 2 )`
Description The spacing between the AppBar sections.
$kendo-appbar-text		`var( --kendo-component-text, initial )`
Description The text color of the AppBar.
$kendo-appbar-bg		`k-get-theme-color-var( neutral-10 )`
Description The background color of the AppBar.
$kendo-appbar-border		`var( --kendo-component-border, initial )`
Description The border color of the AppBar.
$kendo-appbar-brand-colors		`( primary: primary, error: error, success: success, info: info, secondary: neutral, tertiary: tertiary, )`
Description The theme variations for the AppBar.
$kendo-appbar-theme-colors		`()`
Description The theme colors map for the AppBar variations.

Avatar

Name	Type	Default value	Computed value
$kendo-avatar-border-width		`1px`
Description The border width of the Avatar.
$kendo-avatar-font-family		`var( --kendo-font-family, inherit )`
Description The font family of the Avatar.
$kendo-avatar-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the Avatar.
$kendo-avatar-line-height		`var( --kendo-line-height, inherit )`
Description The line height of the Avatar.
$kendo-avatar-sizes		`( sm: map.get( $kendo-spacing, 4 ), md: map.get( $kendo-spacing, 8 ), lg: map.get( $kendo-spacing, 16 ) )`
Description The sizes map of the Avatar.
$kendo-avatar-brand-colors		`( primary: primary, error: error, success: success, info: info, secondary: neutral, tertiary: tertiary, )`
Description The theme variations for the Avatar.
$kendo-avatar-theme-colors		`()`
Description The theme colors map for the Avatar variations.

Badge

Name	Type	Default value	Computed value
$kendo-badge-bg		`var( --kendo-component-bg, initial )`
Description The background color of the Badge.
$kendo-badge-text		`var( --kendo-component-text, initial )`
Description The text color of the Badge.
$kendo-badge-border		`var( --kendo-component-border, initial )`
Description The border color of the Badge.
$kendo-badge-border-width		`1px`
Description The border width of the Badge.
$kendo-badge-font-weight		`var( --kendo-font-weight, normal )`
Description The font weight of the Badge.
$kendo-badge-sm-padding-x		`map.get( $kendo-spacing, 0.5 )`
Description Horizontal padding of the small Badge.
$kendo-badge-md-padding-x		`map.get( $kendo-spacing, 1 )`
Description Horizontal padding of the medium Badge.
$kendo-badge-lg-padding-x		`map.get( $kendo-spacing, 1.5 )`
Description Horizontal padding of the large Badge.
$kendo-badge-sm-padding-y		`map.get( $kendo-spacing, 0.5 )`
Description Vertical padding of the small Badge.
$kendo-badge-md-padding-y		`map.get( $kendo-spacing, 1 )`
Description Vertical padding of the medium Badge.
$kendo-badge-lg-padding-y		`map.get( $kendo-spacing, 1.5 )`
Description Vertical padding of the large Badge.
$kendo-badge-sm-font-size		`var( --kendo-font-size-xs, inherit )`
Description The font size of the small Badge.
$kendo-badge-md-font-size		`var( --kendo-font-size-xs, inherit )`
Description The font size of the medium Badge.
$kendo-badge-lg-font-size		`var( --kendo-font-size-xs, inherit )`
Description The font size of the large Badge.
$kendo-badge-sm-line-height		`var( --kendo-line-height-xs, normal )`
Description The line height used along with the $kendo-font-size variable of the small Badge.
$kendo-badge-md-line-height		`var( --kendo-line-height-xs, normal )`
Description The line height used along with the $kendo-font-size variable of the medium Badge.
$kendo-badge-lg-line-height		`var( --kendo-line-height-xs, normal )`
Description The line height used along with the $kendo-font-size variable of the large Badge.
$kendo-badge-sm-min-width		`calc( #{$kendo-badge-sm-line-height} * 1em + #{$kendo-badge-sm-padding-y} * 2 + #{$kendo-badge-border-width} * 2 )`
Description The calculated minimum width of the small circular Badge.
$kendo-badge-md-min-width		`calc( #{$kendo-badge-md-line-height} * 1em + #{$kendo-badge-md-padding-y} * 2 + #{$kendo-badge-border-width} * 2 )`
Description The calculated minimum width of the medium circular Badge.
$kendo-badge-lg-min-width		`calc( #{$kendo-badge-lg-line-height} * 1em + #{$kendo-badge-lg-padding-y} * 2 + #{$kendo-badge-border-width} * 2 )`
Description The calculated minimum width of the large circular Badge.
$kendo-badge-sizes		( 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 ) )
Description The sizes map for the Badge.
$kendo-badge-brand-colors		`( primary: primary, error: error, success: success, info: info, secondary: neutral, tertiary: tertiary, )`
Description The theme variations for the Badge.
$kendo-badge-theme-colors		`()`
Description The theme colors map for the Badge variations.

Name	Type	Default value	Computed value
$kendo-bottom-nav-padding-x		`map.get( $kendo-spacing, 1.5 )`
Description The horizontal padding of the BottomNavigation.
$kendo-bottom-nav-padding-y		`$kendo-bottom-nav-padding-x`
Description The vertical padding of the BottomNavigation.
$kendo-bottom-nav-gap		`$kendo-bottom-nav-padding-x`
Description The spacing between the BottomNavigation items.
$kendo-bottom-nav-border-width		`1px 0px 0px 0px`
Description The width of the border around the BottomNavigation.
$kendo-bottom-nav-font-family		`var( --kendo-font-family, inherit)`
Description The font family of the BottomNavigation.
$kendo-bottom-nav-font-size		`var( --kendo-font-size-md, 1rem )`
Description The font size of the BottomNavigation.
$kendo-bottom-nav-line-height		`var( --kendo-line-height-md, normal )`
Description The line height of the BottomNavigation.
$kendo-bottom-nav-letter-spacing		`.2px`
Description The letter spacing of the BottomNavigation.
$kendo-bottom-nav-item-padding-x		`map.get( $kendo-spacing, 2 )`
Description The horizontal padding of the BottomNavigation item.
$kendo-bottom-nav-item-padding-y		`map.get( $kendo-spacing, 0.5 )`
Description The vertical padding of the BottomNavigation item.
$kendo-bottom-nav-item-min-width		`72px`
Description The minimum width of the BottomNavigation item.
$kendo-bottom-nav-item-max-width		`none`
Description The maximum width of the BottomNavigation item.
$kendo-bottom-nav-item-min-height		`calc( var( --kendo-icon-size, 1.5rem ) * 2 + (#{$kendo-bottom-nav-item-padding-y} * 2) )`
Description The minimum height of the BottomNavigation item.
$kendo-bottom-nav-item-border-radius		`var( --kendo-border-radius-md, #{$kendo-border-radius-md} )`
Description The border radius of the BottomNavigation item.
$kendo-bottom-nav-item-gap		`map.get( $kendo-spacing, 1 )`
Description The spacing of the BottomNavigation item.
$kendo-bottom-nav-item-focus-offset		`map.get( $kendo-spacing, 0.5 )`
Description The offset of the focused BottomNavigation item.
$kendo-bottom-nav-item-focus-outline-width		`1px`
Description The outline width of the focused BottomNavigation item.
$kendo-bottom-nav-item-focus-outline-style		`solid`
Description The outline style of the focused BottomNavigation item.
$kendo-bottom-nav-shadow		`var( --kendo-box-shadow-depth-4, none )`
Description The box shadow of the BottomNavigation.
$kendo-bottom-nav-brand-colors		`( primary: primary, error: error, success: success, info: info, secondary: neutral, tertiary: tertiary, )`
Description The theme variations for the BottomNavigation.
$kendo-bottom-nav-theme-colors		`()`
Description The theme colors map for the BottomNavigation variations.

Name	Type	Default value	Computed value
$kendo-breadcrumb-margin-x		`0px`
Description The horizontal margin of the Breadcrumb
$kendo-breadcrumb-margin-y		`0px`
Description The vertical margin of the Breadcrumb
$kendo-breadcrumb-padding-x		`0px`
Description The horizontal padding of the Breadcrumb
$kendo-breadcrumb-padding-y		`0px`
Description The vertical padding of the Breadcrumb
$kendo-breadcrumb-border-width		`0px`
Description The width of the border around the Breadcrumb
$kendo-breadcrumb-font-family		`var( --kendo-font-family, inherit )`
Description The font family of the Breadcrumb
$kendo-breadcrumb-font-size		`var( --kendo-font-size, inherit )`

$kendo-breadcrumb-sm-font-size		`var( --kendo-font-size-md, inherit )`
Description The font size of the small breadcrumb.
$kendo-breadcrumb-md-font-size		`var( --kendo-font-size-md, inherit )`
Description The font size of the medium breadcrumb.
$kendo-breadcrumb-lg-font-size		`var( --kendo-font-size-md, inherit )`
Description The font size of the large breadcrumb.
$kendo-breadcrumb-line-height		`var( --kendo-line-height, normal )`
Description The line height used along with the $kendo-font-size variable of the Breadcrumb.
$kendo-breadcrumb-sm-line-height		`var( --kendo-line-height, normal )`
Description The line height used along with the $kendo-font-size variable of the small breadcrumb.
$kendo-breadcrumb-md-line-height		`var( --kendo-line-height, normal )`
Description The line height used along with the $kendo-font-size variable of the medium breadcrumb.
$kendo-breadcrumb-lg-line-height		`var( --kendo-line-height, normal )`
Description The line height used along with the $kendo-font-size variable of the large breadcrumb.
$kendo-breadcrumb-bg		`var( --kendo-component-bg, initial )`
Description The background color of the Breadcrumb
$kendo-breadcrumb-text		`get-theme-color-var( neutral-130 )`
Description The text color of the Breadcrumb
$kendo-breadcrumb-border		`transparent`
Description The border color of the Breadcrumb
$kendo-breadcrumb-focus-shadow		`0 0 0 1px k-get-theme-color-var( neutral-30 )`
Description The box shadow of the focused breadcrumb
$kendo-breadcrumb-link-padding-x		`map.get( $kendo-spacing, 2 )`
Description The horizontal padding of the Breadcrumb link
$kendo-breadcrumb-sm-link-padding-x		`map.get( $kendo-spacing, 2 )`
Description The horizontal padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-x		`$kendo-breadcrumb-link-padding-x`
Description The horizontal padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-x		`map.get( $kendo-spacing, 2 )`
Description The horizontal padding of the large Breadcrumb link.
$kendo-breadcrumb-link-padding-y		`map.get( $kendo-spacing, 2 )`
Description The vertical padding of the Breadcrumb link
$kendo-breadcrumb-sm-link-padding-y		`map.get( $kendo-spacing, 1.5 )`
Description The vertical padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-y		`$kendo-breadcrumb-link-padding-y`
Description The vertical padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-y		`map.get( $kendo-spacing, 2.5 )`
Description The vertical padding of the large Breadcrumb link.
$kendo-breadcrumb-link-border-radius		`0px`
Description The radius of the border around the Breadcrumb link
$kendo-breadcrumb-link-initial-text		`inherit`
Description The initial text color of the Breadcrumb link
$kendo-breadcrumb-link-bg		`transparent`
Description The background color of the Breadcrumb link
$kendo-breadcrumb-link-text		`get-theme-color-var( neutral-130 )`
Description The text color of the Breadcrumb link
$kendo-breadcrumb-link-border		`transparent`
Description The borer color of the Breadcrumb link
$kendo-breadcrumb-link-hover-bg		`var( --kendo-hover-bg, initial )`
Description The background color of the hovered breadcrumb link
$kendo-breadcrumb-link-hover-text		`k-get-theme-color-var( neutral-160 )`
Description The text color of the hovered breadcrumb link
$kendo-breadcrumb-link-hover-border		`var( --kendo-hover-border, initial )`
Description The border color of the hovered breadcrumb link
$kendo-breadcrumb-link-active-bg		`var( --kendo-selected-bg, initial )`
Description The background color of the active breadcrumb link
$kendo-breadcrumb-link-active-text		`var( --kendo-selected-text, initial )`
Description The text color of the active breadcrumb link
$kendo-breadcrumb-link-active-border		`k-get-theme-color-var( neutral-30 )`
Description The border color of the active breadcrumb link
$kendo-breadcrumb-link-focus-bg		`transparent`
Description The background color of the focused breadcrumb link
$kendo-breadcrumb-link-focus-text		`k-get-theme-color-var( neutral-190 )`
Description The text color of the focused breadcrumb link
$kendo-breadcrumb-link-focus-shadow		`inset 0 0 0 1px get-theme-color-var( neutral-130 )`
Description The box shadow of the focused breadcrumb link
$kendo-breadcrumb-link-focus-hover-bg		`var( --kendo-hover-bg, initial )`
Description The focus and hover background color of the Breadcrumb link
$kendo-breadcrumb-link-disabled-bg		`none`
Description The background color of the disabled breadcrumb link
$kendo-breadcrumb-link-disabled-text		`var( --kendo-disabled-text, initial )`
Description The text color of the disabled breadcrumb link
$kendo-breadcrumb-link-disabled-border		`none`
Description The border color of the disabled breadcrumb link
$kendo-breadcrumb-link-selected-bg		`var( --kendo-component-bg, initial )`
Description The background color of selected the Breadcrumb link
$kendo-breadcrumb-link-selected-text		`k-get-theme-color-var( neutral-160 )`
Description The text color of the selected breadcrumb link
$kendo-breadcrumb-link-selected-border		`transparent`
Description The border color of the selected breadcrumb link
$kendo-breadcrumb-link-selected-font-weight		`var( --kendo-font-weight-bold, bold )`
Description The font weight of the selected breadcrumb link
$kendo-breadcrumb-root-link-bg		`$kendo-breadcrumb-link-bg`
Description The background color of the Breadcrumb root link
$kendo-breadcrumb-root-link-text		`$kendo-breadcrumb-link-text`
Description The text color of the Breadcrumb root link
$kendo-breadcrumb-root-link-border		`$kendo-breadcrumb-link-border`
Description The border color of the Breadcrumb root link
$kendo-breadcrumb-root-link-hover-bg		`$kendo-breadcrumb-link-hover-bg`
Description The background color of the hovered breadcrumb root link
$kendo-breadcrumb-root-link-hover-text		`$kendo-breadcrumb-link-hover-text`
Description The text color of the hovered breadcrumb root link
$kendo-breadcrumb-root-link-hover-border		`$kendo-breadcrumb-link-hover-border`
Description The border color of the hovered breadcrumb root link
$kendo-breadcrumb-root-link-active-bg		`$kendo-breadcrumb-link-active-bg`
Description The background color of the active breadcrumb root link
$kendo-breadcrumb-root-link-active-text		`$kendo-breadcrumb-link-active-text`
Description The text color of the active breadcrumb root link
$kendo-breadcrumb-root-link-active-border		`$kendo-breadcrumb-link-active-border`
Description The border color of the active breadcrumb root link
$kendo-breadcrumb-root-link-focus-bg		`$kendo-breadcrumb-link-focus-bg`
Description The background color of the focused breadcrumb root link
$kendo-breadcrumb-root-link-focus-text		`$kendo-breadcrumb-link-focus-text`
Description The text color of the focused breadcrumb root link
$kendo-breadcrumb-root-link-focus-shadow		`$kendo-breadcrumb-link-focus-shadow`
Description The border color of the focused breadcrumb root link
$kendo-breadcrumb-root-link-focus-hover-bg		`$kendo-breadcrumb-link-focus-hover-bg`
Description The focus and hover background color of the Breadcrumb root link
$kendo-breadcrumb-root-link-disabled-text		`$kendo-breadcrumb-link-disabled-text`
Description The text color of the disabled breadcrumb root link
$kendo-breadcrumb-icon-link-padding-y		`map.get( $kendo-spacing, 2.5 )`
Description The vertical padding of the Breadcrumb link icon
$kendo-breadcrumb-sm-icon-link-padding-y		`map.get( $kendo-spacing, 2 )`
Description The vertical padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-y		`$kendo-breadcrumb-icon-link-padding-y`
Description The vertical padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-y		`map.get( $kendo-spacing, 3 )`
Description The vertical padding of the large Breadcrumb link icon.
$kendo-breadcrumb-icon-link-padding-x		`$kendo-breadcrumb-icon-link-padding-y`
Description The horizontal padding of the Breadcrumb link icon
$kendo-breadcrumb-sm-icon-link-padding-x		`$kendo-breadcrumb-sm-icon-link-padding-y`
Description The horizontal padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-x		`$kendo-breadcrumb-icon-link-padding-x`
Description The horizontal padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-x		`$kendo-breadcrumb-lg-icon-link-padding-y`
Description The horizontal padding of the large Breadcrumb link icon.
$kendo-breadcrumb-sizes		( 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 ) )
Description The sizes map for the Breadcrumb.

Button

Name	Type	Default value	Computed value
$kendo-actions-button-spacing		`map.get( $kendo-spacing, 2 )`
Description Spacing between the action buttons.
$kendo-button-border-width		`1px`
Description The width of the border around the Button.
$kendo-button-sm-padding-x		`map.get( $kendo-spacing, 5 )`
Description The horizontal padding of the small Button.
$kendo-button-md-padding-x		`map.get( $kendo-spacing, 5 )`
Description The horizontal padding of the medium Button.
$kendo-button-lg-padding-x		`map.get( $kendo-spacing, 5 )`
Description The horizontal padding of the large Button.
$kendo-button-sm-padding-y		`map.get( $kendo-spacing, 1 )`
Description The vertical padding of the small Button.
$kendo-button-md-padding-y		`map.get( $kendo-spacing, 1.5 )`
Description The vertical padding of the medium Button.
$kendo-button-lg-padding-y		`map.get( $kendo-spacing, 2 )`
Description The vertical padding of the large Button.
$kendo-button-sm-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the small Button.
$kendo-button-md-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the medium Button.
$kendo-button-lg-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the large Button.
$kendo-button-sm-line-height		`var( --kendo-line-height, normal )`
Description The line height used along with the $kendo-font-size variable of the small Button.
$kendo-button-md-line-height		`var( --kendo-line-height, normal )`
Description The line height used along with the $kendo-font-size variable of the medium Button.
$kendo-button-lg-line-height		`var( --kendo-line-height, normal )`
Description The line height used along with the $kendo-font-size variable of the large Button.
$kendo-button-font-family		`var( --kendo-font-family, inherit )`
Description The font family of the Button.
$kendo-button-font-weight		`var( --kendo-font-weight-bold, normal )`
Description The font weight of the Button.
$kendo-button-calc-size		`calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) )`
Description The calculated height of the Button.
$kendo-button-inner-calc-size		`calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) )`
Description The calculated inner height of the Button excluding the border width.
$kendo-button-sizes		( 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 ) )
Description The sizes map for the Button.
$kendo-button-spacing		`map.get( $kendo-spacing, 2 )`
Description The content spacing of the Button.
$kendo-button-focus-offset		`map.get( $kendo-spacing, 0.5 )`
Description The offset of the focused Button.
$kendo-button-focus-outline-width		`1px`
Description The Outline width of the focused Button.
$kendo-button-focus-outline-style		`solid`
Description The outline style of the focused Button.
$kendo-button-flat-focus-offset		`1px`
Description The offset of the flat focused Button.
$kendo-button-flat-focus-outline-width		`map.get( $kendo-spacing, 0.5 )`
Description The outline width of the flat focused Button.
$kendo-button-link-focus-offset		`0`
Description The offset of the link focused Button.
$kendo-button-link-focus-outline-width		`1px`
Description The outline width of the flat focused Button.
$kendo-button-theme-colors		`()`
Description The theme colors map for the Button.

Calendar

Name	Type	Default value	Computed value
$kendo-calendar-border-width		`1px`
Description Width of the border around the calendar.
$kendo-calendar-font-family		`var( --kendo-font-family, inherit )`
Description Font family of the calendar.
$kendo-calendar-font-size		`var( --kendo-font-size, inherit )`
Description Font size of the calendar.
$kendo-calendar-line-height		`var( --kendo-line-height, normal )`
Description Line height of the calendar.
$kendo-calendar-cell-size		`28px`
Description Size of the calendar cell.
$kendo-calendar-bg		`var( --kendo-component-bg, initial)`
Description Background color of the calendar.
$kendo-calendar-text		`var( --kendo-component-text, initial)`
Description Text color of the calendar.
$kendo-calendar-border		`var( --kendo-component-border, initial)`
Description Border color of the calendar.
$kendo-calendar-header-padding-x		`map.get( $kendo-spacing, 3 )`
Description Horizontal padding of the calendar header.
$kendo-calendar-header-padding-y		`map.get( $kendo-spacing, 3 ) map.get( $kendo-spacing, 1 )`
Description Vertical padding of the calendar header.
$kendo-calendar-header-border-width		`1px`
Description Width of the bottom border of the calendar header.
$kendo-calendar-header-bg		`k-get-theme-color-var( neutral-10 )`
Description Background color of the calendar header.
$kendo-calendar-header-text		`$kendo-calendar-text`
Description Text color of the calendar header.
$kendo-calendar-header-border		`$kendo-calendar-border`
Description Border color of the calendar header.
$kendo-calendar-nav-gap		`0`
Description Spacing between the navigation buttons of the calendar.
$kendo-calendar-footer-padding-x		`map.get( $kendo-spacing, 3 )`
Description Horizontal padding of the calendar footer.
$kendo-calendar-footer-padding-y		`map.get( $kendo-spacing, 3 )`
Description Vertical padding of the calendar footer.
$kendo-calendar-cell-font-size		`var( --kendo-font-size-sm, inherit )`
Description Font size of the calendar cell.
$kendo-calendar-cell-padding-x		`map.get( $kendo-spacing, 1.5 )`
Description Horizontal padding of the calendar cell.
$kendo-calendar-cell-padding-y		`$kendo-calendar-cell-padding-x`
Description Vertical padding of the calendar cell.
$kendo-calendar-cell-line-height		`$kendo-calendar-line-height`
Description Line height of the calendar cell.
$kendo-calendar-cell-border-radius		`var( --kendo-border-radius-md, 0)`
Description Border radius of the calendar cell.
$kendo-calendar-header-cell-padding-x		`0`
Description Horizontal padding of the calendar header cell.
$kendo-calendar-header-cell-padding-y		`0`
Description Vertical padding of the calendar header cell.
$kendo-calendar-header-cell-width		`$kendo-calendar-cell-size`
Description Width of the calendar header cell.
$kendo-calendar-header-cell-height		`$kendo-calendar-cell-size`
Description Height of the calendar header cell.
$kendo-calendar-header-cell-font-size		`var( --kendo-font-size-sm, inherit )`
Description Font size of the calendar header cell.
$kendo-calendar-header-cell-line-height		`2`
Description Line height of the calendar header cell.
$kendo-calendar-header-cell-bg		`inherit`
Description Background color of the calendar header cell.
$kendo-calendar-header-cell-text		`inherit`
Description Text color of the calendar header cell.
$kendo-calendar-caption-padding-x		`map.get( $kendo-spacing, 3 )`
Description Horizontal padding of the calendar captions.
$kendo-calendar-caption-padding-y		`map.get( $kendo-spacing, 1 )`
Description Vertical padding of the calendar captions.
$kendo-calendar-caption-height		`$kendo-calendar-cell-size`
Description Height of the calendar captions.
$kendo-calendar-caption-font-size		`var( --kendo-font-size-sm, inherit )`
Description Font size of the calendar captions.
$kendo-calendar-caption-line-height		`normal`
Description Line height of the calendar captions.
$kendo-calendar-caption-font-weight		`bold`
Description Font weight of the calendar captions.
$kendo-calendar-caption-color		`$kendo-subtle-text`
Description Text color of the calendar captions.
$kendo-calendar-view-padding-block-end		`map.get( $kendo-spacing, 3 )`
Description Bottom padding of calendar views.
$kendo-calendar-view-gap		`map.get( $kendo-spacing, 4 )`
Description Spacing between the views in the multiview calendar.
$kendo-calendar-weekend-bg		`inherit`
Description Background color of the calendar weekend cell.
$kendo-calendar-weekend-text		`inherit`
Description Text color of the calendar weekend cell.
$kendo-calendar-today-text		`$kendo-color-white`
Description Text color of the calendar today cell.
$kendo-calendar-today-bg		`k-get-theme-color-var( primary-100 )`
Description Background color of the calendar today cell.
$kendo-calendar-today-hover-text		`$kendo-color-white`
Description Text color of the calendar today cell when hovered.
$kendo-calendar-today-hover-bg		`k-get-theme-color-var( primary-120 )`
Description Background color of the calendar today cell when hovered.
$kendo-calendar-today-border-radius		`9999px`
Description Border radius of the calendar today cell.
$kendo-calendar-week-number-bg		`inherit`
Description Background color of the calendar week number cell.
$kendo-calendar-week-number-text		`var( --kendo-subtle-text, inherit )`
Description Text color of the calendar week number cell.
$kendo-calendar-other-month-bg		`inherit`
Description Background color of the other months calendar cells.
$kendo-calendar-other-month-text		`var( --kendo-disabled-text, inherit )`
Description Text color of the other months calendar cells.
$kendo-calendar-cell-bg		`inherit`
Description Background color of the calendar cells.
$kendo-calendar-cell-text		`inherit`
Description Text color of the calendar cells.
$kendo-calendar-cell-hover-bg		`var( --kendo-hover-bg, inherit )`
Description Background color of the calendar cells when hovered.
$kendo-calendar-cell-hover-text		`var( --kendo-hover-text, inherit )`
Description Text color of the calendar cells when hovered.
$kendo-calendar-cell-selected-bg		`var( --kendo-selected-bg, inherit )`
Description Background color of the selected calendar cell.
$kendo-calendar-cell-selected-text		`var( --kendo-selected-text, inherit )`
Description Text color of the selected calendar cell.
$kendo-calendar-cell-selected-border		`var( --kendo-selected-border, inherit )`
Description Border color of the selected calendar cell.
$kendo-calendar-cell-selected-shadow		`inset 0 0 0 1px $kendo-calendar-cell-selected-border`
Description Shadow of the selected calendar cell.
$kendo-calendar-cell-selected-hover-bg		`var( --kendo-selected-hover-bg, inherit )`
Description Background color of the selected calendar cell when hovered.
$kendo-calendar-cell-selected-hover-text		`var( --kendo-selected-hover-text, inherit )`
Description Text color of the selected calendar cell when hovered.
$kendo-calendar-cell-focus-shadow		`inset 0 0 0 1px k-get-theme-color-var( neutral-130)`
Description Shadow of the selected calendar cell when focused.
$kendo-calendar-cell-selected-focus-shadow		`$kendo-calendar-cell-focus-shadow`
Description Shadow of the selected calendar cell when selected and focused.
$kendo-calendar-navigation-width		`5em`
Description Width of the navigation in the infinite calendar.
$kendo-calendar-navigation-item-height		`2em`
Description Height of the navigation items in the infinite calendar.
$kendo-calendar-navigation-bg		`k-get-theme-color-var( neutral-10 )`
Description Background color of the navigation in the infinite calendar.
$kendo-calendar-navigation-text		`$kendo-calendar-header-text`
Description Text color of the navigation in the infinite calendar.
$kendo-calendar-navigation-border		`$kendo-calendar-header-border`
Description Border color of the navigation in the infinite calendar.
$kendo-infinite-calendar-header-padding-x		`map.get( $kendo-spacing, 3 )`
Description Background color of the navigation in the infinite calendar.
$kendo-infinite-calendar-header-padding-y		`map.get( $kendo-spacing, 3 ) map.get( $kendo-spacing, 1 )`
Description Background color of the navigation in the infinite calendar.
$kendo-infinite-calendar-view-padding-x		`map.get( $kendo-spacing, 3 )`
Description Horizontal padding of the infinite calendar.
$kendo-infinite-calendar-view-padding-y		`0px`
Description Vertical padding of the infinite calendar.
$kendo-calendar-range-bg		`k-get-theme-color-var( neutral-30 )`
Description Background color of the range selection in the calendar.
$kendo-calendar-range-text		`inherit`
Description Text color of the range selection in the calendar.
$kendo-calendar-range-border		`k-get-theme-color-var( neutral-130 )`
Description Border color of the range selection in the calendar.
$kendo-calendar-start-range-hover-shadow		`inset 1px -1px 0 0 k-get-theme-color-var( neutral-130 ), inset 0 1px 0 0 k-get-theme-color-var( neutral-130 )`
Description Hover shadow of the start range selection in the calendar.
$kendo-calendar-mid-range-hover-shadow		`inset 0 -1px 0 0 k-get-theme-color-var( neutral-130 ), inset 0 1px 0 0 k-get-theme-color-var( neutral-130 )`
Description Hover shadow of the mid range selection in the calendar.
$kendo-calendar-end-range-hover-shadow		`inset -1px -1px 0 0 k-get-theme-color-var( neutral-130 ), inset 0 1px 0 0 k-get-theme-color-var( neutral-130 )`
Description Hover shadow of the end range selection in the calendar.

Captcha

Name	Type	Default value	Computed value
$kendo-captcha-spacer		`map.get( $kendo-spacing, 2 )`
Description Spacer of the captcha.
$kendo-captcha-width		`280px`
Description Default width of the captcha.
$kendo-captcha-font-family		`var( --kendo-font-family, inherit )`
Description Font family of the captcha.
$kendo-captcha-font-size		`var( --kendo-font-size, inherit )`
Description Font size of the captcha.
$kendo-captcha-line-height		`var( --kendo-line-height, normal )`
Description Line height of the captcha.
$kendo-captcha-spacing		`$kendo-captcha-spacer`
Description Spacing of the captcha.
$kendo-captcha-bg		`var( --kendo-component-bg, initial )`
Description Background color of the captcha.
$kendo-captcha-text		`var( --kendo-component-text, initial )`
Description Text color of the captcha.
$kendo-captcha-border		`var( --kendo-component-border, initial )`
Description Border color of the captcha.
$kendo-captcha-image-wrap-spacing		`$kendo-captcha-spacer`
Description Spacing of the captcha image wrapper.
$kendo-captcha-image-controls-spacing		`math.div( $kendo-captcha-spacer, 2 )`
Description Spacing of the captcha image controls.
$kendo-captcha-validation-offset-y		`math.div( $kendo-captcha-spacer, 2 )`
Description Offset of the captcha validation text.
$kendo-captcha-validation-font-size		`var( --kendo-font-size-sm, inherit )`
Description Font-size of the captcha validation text.

Card

Name	Type	Default value	Computed value
$kendo-card-padding-x		`map.get( $kendo-spacing, 3 )`
Description The horizontal padding of the Card.
$kendo-card-padding-y		`map.get( $kendo-spacing, 3 )`
Description The vertical padding of the Card.
$kendo-card-border-width		`0px`
Description The width of the border around the Card.
$kendo-card-border-radius		`$kendo-border-radius-md`
Description The border radius of the Card.
$kendo-card-inner-border-radius		`calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} )`
Description The inner border radius of the Card.
$kendo-card-font-family		`var( --kendo-font-family, inherit )`
Description The font family of the Card.
$kendo-card-font-size		`var( --kendo-font-size-sm, inherit )`
Description The font size of the Card.
$kendo-card-line-height		`var( --kendo-line-height, normal )`
Description The line height of the Card.
$kendo-card-deck-gap		`map.get( $kendo-spacing, 4 )`
Description The spacing between the Cards in the Card deck.
$kendo-card-bg		`var( --kendo-component-bg, initial )`
Description The background color of the Card.
$kendo-card-text		`var( --kendo-component-text, initial )`
Description The text color of the Card.
$kendo-card-border		`var( --kendo-component-border, initial )`
Description The border color of the Card.
$kendo-card-shadow		`var( --kendo-box-shadow-depth-1, none )`
Description The shadow of the Card.
$kendo-card-focus-bg		`$kendo-card-bg`
Description The background color of the focused Card.
$kendo-card-focus-text		`null`
Description The text color of the focused Card.
$kendo-card-focus-border		`var( --kendo-component-border, initial )`
Description The border color of the focused Card.
$kendo-card-focus-shadow		`var( --kendo-box-shadow-depth-3, none )`
Description The shadow of the focused Card.
$kendo-card-header-font-size		`var( --kendo-font-size-lg, inherit )`
Description The font size of the Card header.
$kendo-card-header-font-family		`var( --kendo-font-family, inherit )`
Description Тhe font family of the Card header.
$kendo-card-header-font-weight		`var( --kendo-font-weight, initial )`
Description The font weight of the Card header.
$kendo-card-header-line-height		`var( --kendo-line-height, normal )`
Description The line height of the Card header.
$kendo-card-header-padding-x		`map.get( $kendo-spacing, 3 )`
Description The horizontal padding of the Card header.
$kendo-card-header-padding-y		`map.get( $kendo-spacing, 3 )`
Description The vertical padding of the Card header.
$kendo-card-header-border-width		`0`
Description The bottom border width of the Card header.
$kendo-card-header-bg		`inherit`
Description The background color of the Card header.
$kendo-card-header-text		`k-get-theme-color-var( neutral-190 )`
Description The text color of the Card header.
$kendo-card-header-border		`inherit`
Description The border color of the Card header.
$kendo-card-body-padding-x		`map.get( $kendo-spacing, 3 )`
Description The horizontal padding of the Card body.
$kendo-card-body-padding-y		`map.get( $kendo-spacing, 3 )`
Description The vertical padding of the Card body.
$kendo-card-footer-padding-x		`$kendo-card-padding-x`
Description The horizontal padding of the Card footer.
$kendo-card-footer-padding-y		`$kendo-card-padding-y`
Description The vertical padding of the Card footer.
$kendo-card-footer-border-width		`0`
Description The top border width of the Card footer.
$kendo-card-footer-bg		`inherit`
Description The background color of the Card footer.
$kendo-card-footer-text		`inherit`
Description The text color of the Card footer.
$kendo-card-footer-border		`inherit`
Description The border color of the Card footer.
$kendo-card-title-font-size		`var( --kendo-font-size-lg, inherit )`
Description The font size of the Card title.
$kendo-card-title-font-family		`var( --kendo-font-family, inherit )`
Description The font family of the Card title.
$kendo-card-title-font-weight		`$kendo-card-header-font-weight`
Description The font weight of the Card title.
$kendo-card-title-line-height		`var( --kendo-line-height, normal )`
Description The line height of the Card title.
$kendo-card-title-margin-bottom		`map.get( $kendo-spacing, 3 )`
Description The bottom margin of the Card title.
$kendo-card-subtitle-font-size		`var( --kendo-font-size-sm, inherit )`
Description The font size of the Card subtitle.
$kendo-card-subtitle-font-family		`var( --kendo-font-family, inherit )`
Description The font family of the Card subtitle.
$kendo-card-subtitle-line-height		`var( --kendo-line-height, normal )`
Description The line height of the Card subtitle.
$kendo-card-subtitle-margin-bottom		`map.get( $kendo-spacing, 3 )`
Description The bottom margin of the Card subtitle.
$kendo-card-subtitle-text		`$kendo-subtle-text`
Description The text color of the Card subtitle.
$kendo-card-img-max-width		`100px`
Description The maximum width of the Card image.
$kendo-card-avatar-size		`3rem`
Description The size of the Avatar in the Card.
$kendo-card-avatar-spacing		`$kendo-card-header-padding-x`
Description The spacing between the Avatar and the text in the Card.
$kendo-card-actions-padding-x		`map.get( $kendo-spacing, 3 )`
Description The horizontal padding of the Card actions.
$kendo-card-actions-padding-y		`map.get( $kendo-spacing, 3 )`
Description The vertical padding of the Card actions.
$kendo-card-actions-border-width		`0`
Description The top border width of the Card actions.
$kendo-card-actions-gap		`map.get( $kendo-spacing, 2 )`
Description The spacing between the Card actions.
$kendo-card-deck-scroll-button-radius		`0`
Description The border radius of the scroll button in the Card deck.
$kendo-card-deck-scroll-button-offset		`( -1 * $kendo-button-border-width )`
Description The border radius of the scroll button in the Card deck.
$kendo-card-callout-size		`20px`
Description The size of the Card callout.

Chart

Name	Type	Default value	Computed value
$kendo-chart-label-font-size		`var( --kendo-font-size-sm, inherit )`
Description The font-size of the label of the chart component.
$kendo-chart-inactive-bg		`var( --kendo-disabled-bg, initial )`
Description The inactive background color of the chart component.

Charts

Name	Type	Default value	Computed value
$kendo-series-a		`k-get-theme-color-var( series-a-100 )`
Description The first base series color and its light and dark shades.
$kendo-series-b		`k-get-theme-color-var( series-b-100 )`
Description The second base series color and its light and dark shades.
$kendo-series-c		`k-get-theme-color-var( series-c-100 )`
Description The third base series color and its light and dark shades.
$kendo-series-d		`k-get-theme-color-var( series-d-100 )`
Description The fourth base series color and its light and dark shades.
$kendo-series-e		`k-get-theme-color-var( series-e-100 )`
Description The fifth base series color and its light and dark shades.
$kendo-series-f		`k-get-theme-color-var( series-f-100 )`
Description The sixth base series color and its light and dark shades.
$kendo-series-1		`$kendo-series-a`
Description The series colors in order: base, light, dark, lighter, darker
$kendo-chart-border-width		`0px default`
Description The border width of the chart component.
$kendo-chart-font-family		`var( --kendo-font-family, inherit )`
Description The font-family of the chart component.
$kendo-chart-font-size		`var( --kendo-font-size, inherit )`
Description The font-size of the chart component.
$kendo-chart-line-height		`var( --kendo-line-height, normal )`
Description The line-height of the chart component.
$kendo-chart-tooltip-font-size		`var( --kendo-font-size-sm, inherit )`
Description The font-size of the tooltip of the chart component.
$kendo-chart-tooltip-line-height		`var( --kendo-line-height-sm, normal )`
Description The line-height of the tooltip of the chart component.
$kendo-chart-title-font-size		`var( --kendo-font-size-lg, inherit )`
Description The font-size of the title of the chart component.
$kendo-chart-pane-title-font-size		`var( --kendo-font-size-lg, inherit )`
Description The font-size of the pane title of the chart component.
$kendo-chart-pane-title-font-weight		`var( --kendo-font-weight, inherit )`
Description The font-weight of the pane title of the chart component.
$kendo-chart-major-lines		`k-get-theme-color-var( neutral-30 )`
Description The color of the chart component major grid lines.
$kendo-chart-minor-lines		`k-get-theme-color-var( neutral-30 )`
Description The color of the chart component minor grid lines.
$kendo-chart-area-opacity		`.6`
Description The opacity of the chart area.
$kendo-chart-area-inactive-opacity		`.1`
Description The inactive opacity of the chart area.
$kendo-chart-line-inactive-opacity		`.3`
Description The inactive opacity of the chart line.
$kendo-chart-bg		`var( --kendo-component-bg, initial )`
Description The background color of the chart component.
$kendo-chart-text		`var( --kendo-component-text, initial )`
Description The text color of the chart component.
$kendo-chart-border		`var( --kendo-component-border, initial )`
Description The border color of the chart component.
$kendo-chart-tooltip-color		`$kendo-color-white`
Description The text color of the chart tooltip.
$kendo-chart-tooltip-color-inverse		`$kendo-color-black`
Description The inverse text color of the chart tooltip.
$kendo-chart-crosshair-background		`$kendo-color-black`
Description The background color of the chart crosshairs.
$kendo-chart-crosshair-shared-tooltip-color		`k-get-theme-color-var( neutral-160 )`
Description The text color of the chart shared crosshair tooltip.
$kendo-chart-crosshair-shared-tooltip-background		`var( --kendo-component-bg, initial )`
Description The background color of the chart shared crosshair tooltip.
$kendo-chart-crosshair-shared-tooltip-border		`transparent`
Description The border color of the chart shared crosshair tooltip.
$kendo-chart-notes-background		`k-get-theme-color-var( neutral-130 )`
Description The background color of the chart notes.
$kendo-chart-notes-border		`$kendo-chart-notes-background`
Description The border color of the chart notes.
$kendo-chart-notes-lines		`$kendo-chart-notes-background`
Description The background color of the chart note lines.
$kendo-chart-handle-bg		`k-get-theme-color-var( neutral-10 )`
Description The background color of the chart handle.
$kendo-chart-handle-text		`$kendo-chart-text`
Description The text color of the chart handle.
$kendo-chart-handle-border		`$kendo-chart-handle-bg`
Description The border color of the chart handle.
$kendo-chart-handle-hover-bg		`var( --kendo-hover-bg, initial )`
Description The hover background color of the chart handle.
$kendo-chart-handle-hover-text		`var( --kendo-hover-text, initial )`
Description The hover text color of the chart handle.
$kendo-chart-handle-hover-border		`var( --kendo-hover-border, initial )`
Description The hover border color of the chart handle.
$kendo-color-error-bars-background		`k-get-theme-color-var( neutral-110 )`
Description The color of the chart error bars.
$kendo-selection-handle-size		`24px`
Description The size of the selection handle of the chart component.
$kendo-selection-border-color		`var( --kendo-component-border, initial )`
Description The color of the selection handle of the chart component.
$kendo-treemap-font-family		`var( --kendo-font-family, inherit )`
Description The font-family of the treemap.
$kendo-treemap-font-size		`var( --kendo-font-size, inherit )`
Description The font-size of the treemap.
$kendo-treemap-line-height		`var( --kendo-line-height, normal )`
Description The line-height of the treemap.
$kendo-treemap-bg		`var( --kendo-component-bg, initial )`
Description The background color of the treemap.
$kendo-treemap-text		`var( --kendo-component-text, initial )`
Description The text color of the treemap.
$kendo-treemap-border		`var( --kendo-component-border, initial )`
Description The border color of the treemap.
$kendo-treemap-title-bg		`k-get-theme-color-var( neutral-10 )`
Description The background color of the treemap title.
$kendo-treemap-title-text		`$kendo-color-black`
Description The text color of the treemap title.
$kendo-treemap-title-border		`var( --kendo-component-border, initial )`
Description The border color of the treemap title.

Chat

Name	Type	Default value	Computed value
$kendo-chat-transition		`var( --kendo-transition, inherit )`
Description The box shadow transition of the chat.
$kendo-chat-link-hover-text		`var( --kendo-link-hover-text, inherit )`
Description The hover text of links in the bubble of the chat.
$kendo-chat-link-text		`var( --kendo-link-text, inherit )`
Description The text of links in the bubble of the chat.
$kendo-chat-padding-x		`map.get( $kendo-spacing, 4 )`
Description The horizontal padding of the chat.
$kendo-chat-padding-y		`map.get( $kendo-spacing, 4 )`
Description The vertical padding of the chat.
$kendo-chat-width		`500px`
Description the width of the chat.
$kendo-chat-height		`600px`
Description The height of the chat.
$kendo-chat-border-width		`1px`
Description The border width of the chat.
$kendo-chat-font-family		`var( --kendo-font-family, inherit )`
Description The font family of the chat.
$kendo-chat-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the chat.
$kendo-chat-line-height		`var( --kendo-line-height, normal )`
Description The line height of the chat.
$kendo-chat-typing-indicator-dot-size		`8px`
Description The size of the chat typeing indicator dot in the chat.
$kendo-chat-typing-indicator-dot-spacing		`5px`
Description The spacing of the chat typeing indicator dot in the chat.
$kendo-chat-item-spacing-x		`map.get( $kendo-spacing, 2 )`
Description The horizontal spacing between items of the chat.
$kendo-chat-item-spacing-y		`map.get( $kendo-spacing, 4 )`
Description The vertical spacing between items of the chat.
$kendo-chat-message-list-padding-x		`$kendo-chat-padding-x`
Description The horizontal padding of message list of the chat.
$kendo-chat-message-list-padding-y		`$kendo-chat-padding-y`
Description The vertical padding of message list of the chat.
$kendo-chat-message-list-spacing		`$kendo-chat-item-spacing-y`
Description The spacing of message list of the chat.
$kendo-chat-timestamp-font-size		`smaller`
Description The font size of the timestap.
$kendo-chat-timestamp-line-height		`var( --kendo-line-height, normal )`
Description The line height of the timestamp.
$kendo-chat-timestamp-transform		`uppercase`
Description the text transform of the timestamp.
$kendo-chat-timestamp-text		`var( --kendo-subtle-text, inherit )`
Description The text of the timestamp.
$kendo-chat-timestamp-bg		`normal`
Description the background of the timestamp.
$kendo-chat-bubble-padding-x		`map.get( $kendo-spacing, 3 )`
Description The horizontal padding of the bubble message.
$kendo-chat-bubble-padding-y		`map.get( $kendo-spacing, 2 )`
Description The vertical padding of the bubble message.
$kendo-chat-bubble-spacing		`map.get( $kendo-spacing, 0.5 )`
Description The spacing of the bubble message.
$kendo-chat-bubble-line-height		`var( --kendo-line-height, normal )`
Description The line height of the bubble message.
$kendo-chat-scroll-button		`map.get( $kendo-spacing, 2 )`
Description The padding of the scroll button in the chat.
$kendo-card-deck-scrollbar-size		`20px`
Description The size of the card deck scrollbar in the chat.
$kendo-chat-bubble-border-radius		`map.get( $kendo-spacing, 3 )`
Description The border radius of the bubble message.
$kendo-chat-bubble-border-radius-sm		`var( --kendo-border-radius, 0 )`
Description The border radius of the small bubble message
$kendo-chat-avatar-size		`32px`
Description The size of the avatar.
$kendo-chat-avatar-spacing		`$kendo-chat-item-spacing-x`
Description The spacing of the avatar.
$kendo-chat-toolbar-padding-x		`$kendo-toolbar-md-padding-x`
Description The horizontal padding of the toolbar in the chat.
$kendo-chat-toolbar-padding-y		`$kendo-toolbar-md-padding-y`
Description The vertical padding of the toolbar in the chat.
$kendo-chat-toolbar-spacing		`$kendo-toolbar-md-spacing`
Description The spacing of the toolbar in the chat.
$kendo-chat-toolbar-bg		`$kendo-toolbar-bg`
Description The background of the toolbar in the chat.
$kendo-chat-toolbar-text		`$kendo-toolbar-text`
Description The text of the toolbar in the chat.
$kendo-chat-toolbar-border		`inherit`
Description The border of the toolbar in the chat.
$kendo-chat-quick-reply-padding-x		`map.get( $kendo-spacing, 3 )`
Description The horizontal padding of the quick reply in the chat.
$kendo-chat-quick-reply-padding-y		`map.get( $kendo-spacing, 2 )`
Description The vertical padding of the quick reply in the chat.
$kendo-chat-quick-reply-spacing		`map.get( $kendo-spacing, 2 )`
Description The spacing of the quick reply in the chat.
$kendo-chat-quick-reply-line-height		`$kendo-chat-bubble-line-height`
Description The line height of the quick reply in the chat.
$kendo-chat-bg		`k-get-theme-color-var( neutral-10 )`
Description The background of the chat.
$kendo-chat-text		`k-get-theme-color-var( neutral-190 )`
Description The text of the chat.
$kendo-chat-border		`k-get-theme-color-var( neutral-30 )`
Description The border of the chat.
$kendo-chat-bubble-bg		`var( --kendo-component-bg, inherit )`
Description The background of the bubble in the chat.
$kendo-chat-bubble-text		`var( --kendo-component-text, inherit )`
Description The text of the bubble in the chat.
$kendo-chat-bubble-border		`$kendo-chat-bubble-bg`
Description The border of the bubble in the chat.
$kendo-chat-bubble-shadow		`var( --kendo-box-shadow-depth-1, none )`
Description The box shadow of the bubble in the chat.
$kendo-chat-bubble-hover-shadow		`var( --kendo-box-shadow-depth-2, none )`
Description The hover shadow of the bubble in the chat.
$kendo-chat-bubble-selected-shadow		`var( --kendo-box-shadow-depth-3, none )`
Description The selected shadow of the bubble in the chat.
$kendo-chat-alt-bubble-bg		`k-get-theme-color-var( primary-100 )`
Description The background of the alt bubble in the chat.
$kendo-chat-alt-bubble-text		`var( --kendo-component-bg, inherit )`
Description The text of the alt bubble in the chat.
$kendo-chat-alt-bubble-border		`$kendo-chat-alt-bubble-bg`
Description The border of the alt bubble in the chat.
$kendo-chat-alt-bubble-shadow		`var( --kendo-box-shadow-depth-1, none )`
Description The shadow of the alt bubble in the chat.
$kendo-chat-alt-bubble-hover-shadow		`var( --kendo-box-shadow-depth-2, none )`
Description The hover shadow of the alt bubble in the chat.
$kendo-chat-alt-bubble-selected-shadow		`var( --kendo-box-shadow-depth-3, none )`
Description The selected shadow of the alt bubble in the chat.
$kendo-chat-quick-reply-bg		`transparent`
Description The background of quick reply in the chat.
$kendo-chat-quick-reply-text		`k-get-theme-color-var( primary-100 )`
Description The text of quick reply in the chat.
$kendo-chat-quick-reply-border		`k-get-theme-color-var( primary-100 )`
Description The border of quick reply in the chat.
$kendo-chat-quick-reply-hover-bg		`k-get-theme-color-var( primary-100 )`
Description The hover background of quick reply in the chat.
$kendo-chat-quick-reply-hover-text		`var( --kendo-component-bg, inherit )`
Description The text of quick reply in the chat.
$kendo-chat-quick-reply-hover-border		`k-get-theme-color-var( primary-100 )`
Description The hover border of quick reply in the chat.

Checkbox

Name	Type	Default value	Computed value
$kendo-checkbox-border-radius		`null`
Description The border radius of the CheckBox.
$kendo-checkbox-border-width		`1px`
Description The border width of the CheckBox.
$kendo-checkbox-bg		`$kendo-component-bg`
Description The background color of the CheckBox.
$kendo-checkbox-text		`transparent`
Description The text color of the CheckBox.
$kendo-checkbox-border		`k-get-theme-color-var( neutral-160 )`
Description The border color of the CheckBox.
$kendo-checkbox-hover-bg		`$kendo-checkbox-bg`
Description The background color of the hovered CheckBox.
$kendo-checkbox-hover-text		`k-get-theme-color( neutral, 130 )`
Description The text color of the hovered CheckBox.
$kendo-checkbox-hover-border		`$kendo-checkbox-border`
Description The border color of the hovered CheckBox.
$kendo-checkbox-checked-bg		`k-get-theme-color-var( primary-100 )`
Description The background color of the checked CheckBox.
$kendo-checkbox-checked-text		`$kendo-color-white`
Description The text color of the checked CheckBox.
$kendo-checkbox-checked-border		`$kendo-checkbox-checked-bg`
Description The border color of the checked CheckBox.
$kendo-checkbox-hover-checked-bg		`k-get-theme-color-var( primary-110 )`
Description The background of the hovered and checked CheckBox.
$kendo-checkbox-hover-checked-text		`$kendo-color-white`
Description The text color of the hovered and checked CheckBox.
$kendo-checkbox-hover-checked-border		`$kendo-checkbox-hover-checked-bg`
Description The border color of the hovered and checked CheckBox.
$kendo-checkbox-focus-border		`null`
Description The border color of the focused CheckBox.
$kendo-checkbox-focus-shadow		`null`
Description The box shadow of the focused CheckBox.
$kendo-checkbox-focus-outline		`1px solid k-get-theme-color-var( neutral-130 )`
Description The outline of the focused CheckBox.
$kendo-checkbox-indeterminate-bg		`$kendo-checkbox-bg`
Description The background color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-text		`k-get-theme-color( primary, 100 )`
Description The text color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-border		`k-get-theme-color-var( primary-100 )`
Description The border color of the indeterminate CheckBox.
$kendo-checkbox-hover-indeterminate-bg		`$kendo-checkbox-bg`
Description The background color of the hovered and indeterminate CheckBox.
$kendo-checkbox-hover-indeterminate-text		`k-get-theme-color( primary, 110 )`
Description The text color of the hovered and indeterminate CheckBox.
$kendo-checkbox-hover-indeterminate-border		`k-get-theme-color-var( primary-110 )`
Description The border color of the hovered and indeterminate CheckBox.
$kendo-checkbox-disabled-bg		`$kendo-checkbox-bg`
Description The background color of the disabled CheckBox.
$kendo-checkbox-disabled-text		`k-get-theme-color-var( neutral-60 )`
Description The text color of the disabled CheckBox.
$kendo-checkbox-disabled-border		`k-get-theme-color-var( neutral-60 )`
Description The border color of the disabled CheckBox.
$kendo-checkbox-disabled-checked-bg		`k-get-theme-color-var( neutral-60 )`
Description The background color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-text		`$kendo-color-white`
Description The text color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-border		`k-get-theme-color-var( neutral-60 )`
Description The border color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-indeterminate-bg		`$kendo-checkbox-bg`
Description The background color of the disabled and indeterminate CheckBox.
$kendo-checkbox-disabled-indeterminate-text		`k-get-theme-color( neutral, 60 )`
Description The border color of the disabled and indeterminate CheckBox.
$kendo-checkbox-disabled-indeterminate-border		`k-get-theme-color-var( neutral-60 )`
Description The border color of the disabled and indeterminate CheckBox.
$kendo-checkbox-invalid-bg		`$kendo-checkbox-bg`
Description The background color of an invalid CheckBox.
$kendo-checkbox-invalid-text		`$kendo-invalid-text`
Description The text color of an invalid CheckBox.
$kendo-checkbox-invalid-border		`$kendo-invalid-border`
Description The border color of an invalid CheckBox.
$kendo-checkbox-indicator-type		`image`
Description The type of the CheckBox indicator.
$kendo-checkbox-glyph-font-family		`"WebComponentsIcons", monospace`
Description The font family of the CheckBox indicator glyph.
$kendo-checkbox-checked-glyph		`"\e118"`
Description The glyph of the CheckBox indicator.
$kendo-checkbox-indeterminate-glyph		`"\e121"`
Description The glyph of the indeterminate CheckBox indicator.
$kendo-checkbox-hover-image		`escape-svg( url("data:image/svg+xml,") )`
Description The image of the hovered CheckBox indicator.
$kendo-checkbox-checked-image		`escape-svg( url("data:image/svg+xml,") )`
Description The image of the checked CheckBox indicator.
$kendo-checkbox-indeterminate-image		`escape-svg( url("data:image/svg+xml,") )`
Description The image of the indeterminate CheckBox indicator.
$kendo-checkbox-hover-checked-image		`escape-svg( url("data:image/svg+xml,") )`
Description The image of the hovered and checked CheckBox indicator.
$kendo-checkbox-hover-indeterminate-image		`escape-svg( url("data:image/svg+xml,") )`
Description The image of the hovered and indeterminate CheckBox indicator.
$kendo-checkbox-disabled-checked-image		`escape-svg( url("data:image/svg+xml,") )`
Description The image of the checked CheckBox indicator.
$kendo-checkbox-disabled-indeterminate-image		`escape-svg( url("data:image/svg+xml,") )`
Description The image of the indeterminate CheckBox indicator.
$kendo-checkbox-label-margin-x		`map.get( $kendo-spacing, 2 )`
Description The horizontal margin of the CheckBox inside a label.
$kendo-checkbox-list-spacing		`map.get( $kendo-spacing, 4 )`
Description The spacing between the items in a horizontal CheckBox list.
$kendo-checkbox-list-item-padding-x		`0px`
Description The horizontal padding of the CheckBox list items.
$kendo-checkbox-list-item-padding-y		`$kendo-list-md-item-padding-y`
Description The vertical padding of the CheckBox list items.
$kendo-checkbox-ripple-bg		`k-get-theme-color-var( primary-100 )`
Description The background color of the CheckBox' ripple.
$kendo-checkbox-ripple-opacity		`.25`
Description The opacity of the CheckBox' ripple.

Chip

Name	Type	Default value	Computed value
$kendo-chip-border-width		`1px`
Description The width of the border around the Chip.
$kendo-chip-spacing		`map.get( $kendo-spacing, 1 )`
Description The spacing between the text and the icons of the Chip.
$kendo-chip-font-family		`var( --kendo-font-family, inherit )`
Description The font family of the Chip.
$kendo-chip-avatar-width		`1em`
Description The width of the Chip' avatar.
$kendo-chip-avatar-height		`1em`
Description The height of the Chip' avatar.
$kendo-chip-avatar-flex-basis		`1em`
Description The flex basis of the Chip' avatar.
$kendo-chip-disabled-text		`var( --kendo-disabled-text, inherit )`
Description The text color of the disabled Chip.
$kendo-chip-solid-disabled-bg		`var( --kendo-disabled-bg, transparent )`
Description The background color of the solid disabled Chip.
$kendo-chip-solid-disabled-border		`var( --kendo-disabled-border, inherit )`
Description The border color of the solid disabled Chip.
$kendo-chip-outline-disabled-bg		`var( $kendo-component-bg, transparent )`
Description The background color of the outline disabled Chip.
$kendo-chip-outline-disabled-border		`k-get-theme-color-var( neutral-90 )`
Description The border color of the outline disabled Chip.
$kendo-chip-focus-offset		`map.get( $kendo-spacing, 0.5 )`
Description The offset of the outline focused Chip.
$kendo-chip-focus-outline-width		`1px`
Description The outline width of the outline focused Chip.
$kendo-chip-focus-outline-style		`solid`
Description The outline style of the outline focused Chip.
$kendo-chip-sm-padding-x		`map.get( $kendo-spacing, 2 )`
Description The horizontal padding of the small Chip.
$kendo-chip-md-padding-x		`map.get( $kendo-spacing, 2 )`
Description The horizontal padding of the medium Chip.
$kendo-chip-lg-padding-x		`map.get( $kendo-spacing, 2 )`
Description The horizontal padding of the large Chip.
$kendo-chip-sm-padding-y		`map.get( $kendo-spacing, 0.5 )`
Description The vertical padding of the small Chip.
$kendo-chip-md-padding-y		`map.get( $kendo-spacing, 1 )`
Description The vertical padding of the medium Chip.
$kendo-chip-lg-padding-y		`map.get( $kendo-spacing, 1.5 )`
Description The vertical padding of the large Chip.
$kendo-chip-sm-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the small Chip.
$kendo-chip-md-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the medium Chip.
$kendo-chip-lg-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the large Chip.
$kendo-chip-sm-line-height		`var( --kendo-line-height, normal )`
Description The small Chip's line height that is related to the $kendo-font-size.
$kendo-chip-md-line-height		`var( --kendo-line-height, normal )`
Description The medium Chip's line height that is related to the $kendo-font-size.
$kendo-chip-lg-line-height		`var( --kendo-line-height, normal )`
Description The large Chip's line height that is related to the $kendo-font-size.
$kendo-chip-calc-size		`calc( #{$kendo-chip-md-line-height} * 1em + #{$kendo-chip-md-padding-y} * 2 + #{$kendo-chip-border-width} * 2 )`
Description The calculated height of the Chip.
$kendo-chip-sizes		`( 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 ) )`
Description The map with the sizes of the Chip.
$kendo-chip-list-sizes		`( sm: map.get( $kendo-spacing, 1 ), md: map.get( $kendo-spacing, 1 ), lg: map.get( $kendo-spacing, 1 ) )`
Description The sizes of the Chip list.

Cologradient

Name	Type	Default value	Computed value
$kendo-color-gradient-spacer		`map.get( $kendo-spacing, 4 )`
Description The spacer of the ColorGradient.
$kendo-color-gradient-width		`260px`
Description The width of the ColorGradient.
$kendo-color-gradient-border-width		`2px`
Description The width of the border around the ColorGradient.
$kendo-color-gradient-border-radius		`var( --kendo-border-radius-md, #{$kendo-border-radius-md} )`
Description The border radius of the ColorGradient.
$kendo-color-gradient-padding-y		`$kendo-color-gradient-spacer`
Description The vertical padding of the ColorGradient.
$kendo-color-gradient-padding-x		`math.div( $kendo-color-gradient-spacer, 2 )`
Description The horizontal padding of the ColorGradient.
$kendo-color-gradient-spacing		`$kendo-color-gradient-spacer`
Description The spacing between the sections of the ColorGradient.
$kendo-color-gradient-font-family		`var( --kendo-font-family, inherit )`
Description The font family of the ColorGradient.
$kendo-color-gradient-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the ColorGradient.
$kendo-color-gradient-line-height		`var( --kendo-line-height, normal )`
Description The line height of the ColorGradient.
$kendo-color-gradient-text		`var( --kendo-component-text, initial )`
Description The text color of the ColorGradient.
$kendo-color-gradient-bg		`var( --kendo-component-bg, initial )`
Description The background color of the ColorGradient.
$kendo-color-gradient-border		`var( --kendo-component-border, initial )`
Description The border color of the ColorGradient.
$kendo-color-gradient-shadow		`var( --kendo-box-shadow-depth-2, none )`
Description The box shadow of the ColorGradient.
$kendo-color-gradient-focus-border		`k-get-theme-color-var( neutral-20 )`
Description The border color of the focused ColorGradient.
$kendo-color-gradient-focus-shadow		`var( --kendo-box-shadow-depth-3, none )`
Description The box shadow of the focused ColorGradient.
$kendo-color-gradient-canvas-border-width		`0`
Description The width of the border around the ColorGradient canvas.
$kendo-color-gradient-canvas-border-radius		`var( --kendo-border-radius-md, #{$kendo-border-radius-md} )`
Description The border radius of the ColorGradient canvas.
$kendo-color-gradient-canvas-spacing		`math.div( $kendo-color-gradient-spacer, 2 )`
Description The spacing between the items of the ColorGradient canvas.
$kendo-color-gradient-canvas-rectangle-height		`180px`
Description The height the ColorGradient canvas hsv rectangle.
$kendo-color-gradient-canvas-rectangle-border		`k-get-theme-color-var( neutral-30 )`
Description The border color of the ColorGradient canvas hsv rectangle.
$kendo-color-gradient-canvas-draghandle-shadow		`var( --kendo-box-shadow-depth-2, none )`
Description The box shadow of the ColorGradient canvas drag handle.
$kendo-color-gradient-slider-track-size		`20px`
Description The width of the ColorGradient slider.
$kendo-color-gradient-slider-border-radius		`var( --kendo-border-radius-md, #{$kendo-border-radius-md} )`
Description The border radius of the ColorGradient slider.
$kendo-color-gradient-slider-border-width		`1px`
Description The width of the border around the ColorGradient slider.
$kendo-color-gradient-slider-border		`k-get-theme-color-var( neutral-30 )`
Description The color of the border around the ColorGradient slider.
$kendo-color-gradient-slider-vertical-size		`180px`
Description The height of the ColorGradient vertical slider.
$kendo-color-gradient-slider-horizontal-size		`100%`
Description The width of the ColorGradient horizontal slider.
$kendo-color-gradient-slider-alpha-bgr		`"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC"`
Description The background image of the ColorGradient alpha slider.
$kendo-color-gradient-draghandle-width		`20px`
Description The width of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-height		`20px`
Description The height of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-border-width		`2px`
Description The width of the border around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-outline-width		`1px`
Description The width of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-border		`$kendo-color-white`
Description The color of the border around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-shadow		`k-get-theme-color-var( neutral-110 )`
Description The color of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-shadow		`var( --kendo-box-shadow-depth-2, none )`
Description The box shadow of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-focus-border		`$kendo-color-white`
Description The color of the border around the focused ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-focus-shadow		`k-get-theme-color-var( neutral-130 )`
Description The focus color of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-hover-shadow		`k-get-theme-color-var( neutral-130 )`
Description The hover color of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-canvas-draghandle-offset-y		`( -1 * math.div( $kendo-color-gradient-draghandle-height, 2 ) )`
Description The vertical offset of the ColorGradient canvas drag handle.
$kendo-color-gradient-canvas-draghandle-offset-x		`( -1 * math.div( $kendo-color-gradient-draghandle-width, 2 ) )`
Description The horizontal offset of the ColorGradient canvas drag handle.
$kendo-color-gradient-input-width		`48px`
Description The width of the ColorGradient input.
$kendo-color-gradient-input-spacing		`math.div( $kendo-color-gradient-spacer, 4 )`
Description The spacing between the ColorGradient inputs.
$kendo-color-gradient-input-label-font-size		`var( --kendo-font-size-sm, inherit )`
Description The font size of the ColorGradient input labels.
$kendo-color-gradient-input-label-spacing		`math.div( $kendo-color-gradient-spacer, 4 )`
Description The spacing between the ColorGradient inputs and their labels.
$kendo-color-gradient-input-label-text		`var( --kendo-subtle-text, inherit )`
Description The text color of the ColorGradient input labels.
$kendo-color-gradient-contrast-ratio-font-weight		`var( --kendo-font-weight-bold, normal )`
Description The font weight of the ColorGradient contrast ratio text.
$kendo-color-gradient-contrast-spacing		`math.div( $kendo-color-gradient-spacer, 1.5 )`
Description The spacing between the items in the ColorGradient contrast tool.

Color-preview

Name	Type	Default value	Computed value
$kendo-color-preview-border-radius		`var( --kendo-border-radius-md, #{$kendo-border-radius-md} )`
Description Border radius of the color preview.
$kendo-color-preview-border-width		`1px`
Description Border width of the color preview.
$kendo-color-preview-bg		`transparent`
Description Default background color of the color preview.
$kendo-color-preview-text		`inherit`
Description Text color of the color preview.
$kendo-color-preview-border		`k-get-theme-color-var( neutral-60 )`
Description Border color of the color preview.
$kendo-color-preview-hover-border		`k-get-theme-color-var( neutral-60 )`
Description Hover Border color of the color preview.
$kendo-color-preview-no-color-bg		`$kendo-color-white`
Description Background color of the color preview when no color is selected.
$kendo-color-preview-no-color-text		`k-get-theme-color( error, 190 )`
Description Text color of the color preview when no color is selected.
$kendo-color-preview-no-color-border		`currentColor`
Description Border color of the color preview when no color is selected.

Coloreditor

Name	Type	Default value	Computed value
$kendo-color-editor-spacer		`map.get( $kendo-spacing, 2 )`
Description The spacer of the ColorEditor.
$kendo-color-editor-min-width		`260px`
Description The minimum width of the ColorEditor.
$kendo-color-editor-border-width		`1px`
Description The width of the border around the ColorEditor.
$kendo-color-editor-border-radius		`var( --kendo-border-radius-md, #{$kendo-border-radius-md} )`
Description The border radius of the ColorEditor.
$kendo-color-editor-font-family		`var( --kendo-font-family, inherit )`
Description The font family of the ColorEditor.
$kendo-color-editor-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the ColorEditor.
$kendo-color-editor-line-height		`var( --kendo-line-height, normal )`
Description The line height of the ColorEditor.
$kendo-color-editor-text		`var( --kendo-component-text, initial )`
Description The text color of the ColorEditor.
$kendo-color-editor-bg		`var( --kendo-component-bg, initial )`
Description The background color of the ColorEditor.
$kendo-color-editor-border		`var( --kendo-component-border, initial )`
Description The border color of the ColorEditor.
$kendo-color-editor-shadow		`var( --kendo-box-shadow-depth-2, none )`
Description The box shadow of the ColorEditor.
$kendo-color-editor-focus-border		`k-get-theme-color-var( neutral-20 )`
Description The border color of the focused ColorEditor.
$kendo-color-editor-focus-shadow		`var( --kendo-box-shadow-depth-3, none )`
Description The box shadow of the focused ColorEditor.
$kendo-color-editor-header-padding-y		`$kendo-color-editor-spacer`
Description The vertical padding of the ColorEditor header.
$kendo-color-editor-header-padding-x		`$kendo-color-editor-header-padding-y`
Description The horizontal padding of the ColorEditor header.
$kendo-color-editor-header-actions-spacing		`math.div( $kendo-color-editor-spacer, 2 )`
Description The spacing between the ColorEditor header actions.
$kendo-color-editor-color-preview-width		`34px`
Description The width of the ColorEditor preview.
$kendo-color-editor-color-preview-height		`14px`
Description The height of the ColorEditor preview.
$kendo-color-editor-preview-spacing		`map.get( $kendo-spacing, 1 )`
Description The spacing between the colors in the ColorEditor preview.
$kendo-color-editor-views-padding-y		`$kendo-color-editor-spacer`
Description The vertical padding of the ColorEditor views container.
$kendo-color-editor-views-padding-x		`$kendo-color-editor-views-padding-y`
Description The horizontal padding of the ColorEditor views container.
$kendo-color-editor-views-spacing		`$kendo-color-editor-spacer`
Description The spacing of the ColorEditor views container.
$kendo-color-editor-footer-padding-y		`map.get( $kendo-spacing, 2 )`
Description The vertical padding of the ColorEditor footer.
$kendo-color-editor-footer-padding-x		`map.get( $kendo-spacing, 2 )`
Description The horizontal padding of the ColorEditor footer.
$kendo-color-editor-color-gradient-focus-outline-color		`rgba(0, 0, 0, 0.3)`
Description The outline color of the focused ColorGradient.
$kendo-color-editor-color-gradient-focus-outline		`2px`
Description The outline width of the focused ColorGradient.
$kendo-color-editor-color-gradient-focus-outline-offset		`2px`
Description The outline offset of the focused ColorGradient.

Colorpalette

Name	Type	Default value	Computed value
$kendo-color-palette-font-family		`var( --kendo-font-family, inherit )`
Description The font family of the ColorPalette.
$kendo-color-palette-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the ColorPalette.
$kendo-color-palette-line-height		`0`
Description The line height of the ColorPalette.
$kendo-color-palette-tile-outline-width		`1px`
Description The outline width of the ColorPalette tile.
$kendo-color-palette-tile-outline-style		`solid`
Description The outline style of the ColorPalette tile.
$kendo-color-palette-tile-outline		`transparent`
Description The outline color of the ColorPalette tile.
$kendo-color-palette-tile-width		`map.get( $kendo-spacing, 6 )`
Description The width of the ColorPalette tile.
$kendo-color-palette-tile-height		`$kendo-color-palette-tile-width`
Description The height of the ColorPalette tile.
$kendo-color-palette-tile-focus-outline		`k-get-theme-color-var( neutral-130 )`
Description The outline color of the ColorPalette focused tile.
$kendo-color-palette-tile-focus-shadow		`inset 0 0 0 2px $kendo-color-white`
Description The shadow of the ColorPalette focused tile.
$kendo-color-palette-tile-hover-outline		`k-get-theme-color-var( neutral-20 )`
Description The outline color of the ColorPalette hovered tile.
$kendo-color-palette-tile-hover-shadow		`inset 0 0 0 2px $kendo-color-palette-tile-hover-outline, inset 0 0 0 4px $kendo-color-white`
Description The shadow of the ColorPalette hovered tile.
$kendo-color-palette-tile-selected-outline		`$kendo-color-palette-tile-hover-outline`
Description The outline color of the ColorPalette selected tile.
$kendo-color-palette-tile-selected-shadow		`$kendo-color-palette-tile-hover-shadow`
Description The shadow of the ColorPalette selected tile.
$kendo-color-palette-tile-selected-hover-outline		`$kendo-color-palette-tile-focus-outline`
Description The outline color of the ColorPalette selected hover tile.

Dialog

Name	Type	Default value	Computed value
$kendo-dialog-border-width		`0`
Description The width of the border around the Dialog.
$kendo-dialog-titlebar-bg		`var( --kendo-component-bg, initial )`
Description The background color of the Dialog titlebar.
$kendo-dialog-titlebar-text		`var( --kendo-component-text, initial )`
Description The text color of the Dialog titlebar.
$kendo-dialog-titlebar-border		`var( --kendo-component-border, initial )`
Description The border color of the Dialog titlebar.
$kendo-dialog-titlebar-border-width		`0`
Description The width of the border around the Dialog titlebar.
$kendo-dialog-titlebar-padding-x		`map.get( $kendo-spacing, 6 )`
Description The horizontal padding of the Dialog titlebar.
$kendo-dialog-titlebar-padding-y		`map.get( $kendo-spacing, 4 )`
Description The vertical padding of the Dialog titlebar.
$kendo-dialog-inner-padding-x		`map.get( $kendo-spacing, 6 )`
Description The horizontal padding of the content of the Dialog.
$kendo-dialog-inner-padding-y		`map.get( $kendo-spacing, 3 )`
Description The vertical padding of the content of the Dialog.
$kendo-dialog-buttongroup-padding-x		`map.get( $kendo-spacing, 6 )`
Description The horizontal padding of the Dialog action buttons.
$kendo-dialog-buttongroup-padding-y		`map.get( $kendo-spacing, 6 )`
Description The vertical padding of the Dialog action buttons.
$kendo-dialog-buttongroup-border-width		`0`
Description The width of the top border of the Dialog action buttons.
$kendo-dialog-buttongroup-spacing		`map.get( $kendo-spacing, 3 )`
Description The spacing between the Dialog action buttons.
$kendo-dialog-button-spacing		`map.get( $kendo-spacing, 2 )`
Description The spacing between the Dialog action buttons.
$kendo-dialog-shadow		`var( --kendo-box-shadow-depth-8, none )`
Description The box shadow around the Dialog.

Dock-manager

Name	Type	Default value	Computed value
$kendo-dock-manager-border-width		`1px`
Description The width of the border around the DockManager component.
$kendo-dock-manager-border-style		`solid`
Description The style of the border around the DockManager component.
$kendo-dock-manager-border		`var( --kendo-component-border, inherit )`
Description The color of the border around the DockManager component.
$kendo-dock-manager-pane-header-padding-y		`map.get( $kendo-spacing, 1 )`
Description The vertical padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-padding-x		`map.get( $kendo-spacing, 6 )`
Description The horizontal padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-border-width		`$kendo-dock-manager-border-width`
Description The width of the border around the pane header in the DockManager component.
$kendo-dock-manager-pane-header-border-style		`solid`
Description The style of the border around the pane header in the DockManager component.
$kendo-dock-manager-pane-header-bg		`var( --kendo-component-bg, inherit )`
Description The background color of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-text		`k-get-theme-color-var( primary-100 )`
Description The text color of the pane header in the DockManager component.
$kendo-dock-manager-pane-title-padding-y		`null`
Description The vertical padding of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-padding-x		`null`
Description The horizontal padding of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-family		`var( --kendo-font-family, inherit )`
Description The font family of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-size		`var( --kendo-font-size-lg, inherit )`
Description The font size of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-line-height		`var( --kendo-line-height, normal )`
Description The line height of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-weight		`var( --kendo-font-weight, normal )`
Description The font weight of the pane title in the DockManager component.
$kendo-dock-manager-pane-content-padding-x		`map.get( $kendo-spacing, 3 )`
Description The horizontal padding of the pane content in the DockManager component.
$kendo-dock-manager-pane-content-padding-y		`map.get( $kendo-spacing, 3 )`
Description The vertical padding of the pane content in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-y		`null`
Description The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-x		`null`
Description The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dock-manager-unpinned-container-width		`300px`
Description The width of the unpinned pane container in the DockManager component.
$kendo-dock-manager-unpinned-container-bg		`$kendo-color-white`
Description The background-color of the unpinned pane container in the DockManager component.
$kendo-dock-manager-unpinned-container-shadow		`25.6px 0px 57.6px 0px rgba(0, 0, 0, 0.22), 4.8px 0px 14.4px 0px rgba(0, 0, 0, 0.18)`
Description The box shadow of the unpinned pane container in the DockManager component.
$kendo-dock-indicator-padding		`map.get( $kendo-spacing, 1.5 )`
Description The padding of the dock indicator in the DockManager component.
$kendo-dock-indicator-bg		`$kendo-component-bg`
Description The background color of the dock indicator in the DockManager component.
$kendo-dock-indicator-text		`k-get-theme-color-var( primary-100 )`
Description The text color of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline-width		`1px`
Description The outline width of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline-style		`solid`
Description The outline style of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline		`$kendo-dock-indicator-text`
Description The outline color of the dock indicator in the DockManager component.
$kendo-dock-indicator-shadow		`0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 3px 5px -1px rgba(0, 0, 0, 0.20)`
Description The box shadow of the dock indicator in the DockManager component.
$kendo-dock-indicator-hover-bg		`k-get-theme-color-var( primary-110 )`
Description The background color of the hovered dock indicator in the DockManager component.
$kendo-dock-indicator-hover-text		`$kendo-color-white`
Description The text color of the hovered dock indicator in the DockManager component.
$kendo-dock-manager-dock-preview-border-width		`1px`
Description The width of the border around the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border-style		`dashed`
Description The style of the border around the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border-radius		`var( --kendo-border-radius-md, 0)`
Description The border radius of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-bg		`color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent)`
Description The background color of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border		`k-get-theme-color-var( primary-100 )`
Description The border color of the dropping area in the DockManager component.

Draggable

Name	Type	Default value	Computed value
$kendo-drag-clue-border-radius		`var( --kendo-border-radius-md, #{$kendo-border-radius-md} )`
Description Borer radius of the drag clue.
$kendo-drag-clue-border-width		`0px`
Description Borer width of the drag clue.
$kendo-drag-clue-border-style		`solid`
Description Borer style of the drag clue.
$kendo-drag-clue-padding-x		`$kendo-padding-lg-x`
Description Horizontal padding of the drag clue.
$kendo-drag-clue-padding-y		`$kendo-padding-lg-y`
Description Vertical padding of the drag clue.
$kendo-drag-clue-font-family		`var( --kendo-font-family, inherit )`
Description Font family of the drag clue.
$kendo-drag-clue-font-size		`var( --kendo-font-size, inherit )`
Description Font size of the drag clue.
$kendo-drag-clue-line-height		`var( --kendo-line-height, inherit )`
Description Line height of the drag clue.
$kendo-drag-clue-spacing		`.4ex`
Description Spacing of the drag clue.
$kendo-drag-clue-opacity		`.8`
Description Opacity of the drag clue.
$kendo-drag-clue-text		`var( --kendo-selected-text, inherit )`
Description Text color of the drag clue.
$kendo-drag-clue-bg		`var( --kendo-selected-bg, inherit )`
Description Background color of the drag clue.
$kendo-drag-clue-border		`var( --kendo-selected-border, inherit )`
Description Border color of the drag clue.
$kendo-drag-clue-gradient		`null`
Description Gradient of the drag clue.
$kendo-drag-clue-shadow		`var( --kendo-box-shadow-depth-2, none )`
Description Box shadow of the drag clue.
$kendo-drop-hint-arrow-size		`6px`
Description Arrow size of the drop hint.
$kendo-drop-hint-arrow-spacing		`math.div( $kendo-drop-hint-arrow-size, 2 )`
Description Arrow spacing of the drop hint.
$kendo-drop-hint-line-h-width		`20px`
Description Width of the horizontal drop hint line.
$kendo-drop-hint-line-h-height		`1px`
Description Height of the horizontal drop hint line.
$kendo-drop-hint-line-v-width		`$kendo-drop-hint-line-h-height`
Description Width of the vertical drop hint line.
$kendo-drop-hint-line-v-height		`$kendo-drop-hint-line-h-width`
Description Height of the vertical drop hint line.
$kendo-drop-hint-bg		`k-get-theme-color-var( primary-100 )`
Description Background-color of the drop hint.

Drawer

Name	Type	Default value	Computed value
$kendo-drawer-bg		`var( --kendo-component-bg, initial )`
Description Background color of the drawer.
$kendo-drawer-text		`var( --kendo-component-text, initial )`
Description Text color of the drawer.
$kendo-drawer-border		`var( --kendo-component-border, initial )`
Description Border color of the drawer.
$kendo-drawer-border-width		`1px`
Description Border width of the drawer.
$kendo-drawer-font-family		`var( --kendo-font-family, inherit )`
Description Font family of the drawer.
$kendo-drawer-font-size		`var( --kendo-font-size, inherit )`
Description Font size of the drawer.
$kendo-drawer-line-height		`var( --kendo-line-height, inherit )`
Description Line height of the drawer.
$kendo-drawer-content-padding-x		`var( --kendo-padding-x, #{$kendo-padding-md-x} )`
Description Horizontal padding of the drawer content.
$kendo-drawer-content-padding-y		`var( --kendo-padding-y, #{$kendo-padding-md-y} )`
Description Vertical padding of the drawer content.
$kendo-drawer-scrollbar-width		`7px`
Description Scrollbar width of the drawer.
$kendo-drawer-scrollbar-color		`k-get-theme-color-var( neutral-90 )`
Description Scrollbar color of the drawer.
$kendo-drawer-scrollbar-bg		`k-get-theme-color-var( neutral-40 )`
Description Scrollbar background of the drawer.
$kendo-drawer-scrollbar-radius		`20px`
Description Scrollbar border radius of the drawer.
$kendo-drawer-scrollbar-hover-color		`k-get-theme-color-var( neutral-110 )`
Description Scrollbar hover color of the drawer.
$kendo-drawer-item-padding-x		`map.get( $kendo-spacing, 4 )`
Description Horizontal padding of the drawer item.
$kendo-drawer-item-padding-y		`var( --kendo-padding-x, #{$kendo-padding-md-x} )`
Description Vertical padding of the drawer item.
$kendo-drawer-item-font-size		`$kendo-drawer-font-size`
Description Font size of the drawer item.
$kendo-drawer-item-line-height		`var( --kendo-line-height-lg, normal )`
Description Line height of the drawer item.
$kendo-drawer-item-level-padding-x		`$kendo-drawer-item-padding-x`
Description Horizontal padding of the drawer item in each level.
$kendo-drawer-item-level-count		`5`
Description Count of the drawer item levels.
$kendo-drawer-icon-padding-x		`0`
Description Horizontal padding of the drawer icon.
$kendo-drawer-icon-padding-y		`map.get( $kendo-spacing, 1 )`
Description Vertical padding of the drawer icon.
$kendo-drawer-mini-initial-width		`calc( 2 * #{$kendo-drawer-item-padding-x} + var( --kendo-icon-size, 1rem ) )`
Description Initial width of the mini drawer.
$kendo-drawer-item-ripple-border-width		`map.get( $kendo-spacing, 0.5 )`
Description The border width of the drawer item ripple
$kendo-drawer-item-ripple-border		`k-get-theme-color-var( primary-100 )`
Description The border color of the drawer item ripple
$kendo-drawer-item-bg		`$kendo-drawer-bg`
Description Background color of the drawer item.
$kendo-drawer-item-text		`$kendo-drawer-text`
Description Text color of the drawer item.
$kendo-drawer-item-icon-text		`k-get-theme-color-var( primary-100 )`
Description Text color of the drawer item icon.
$kendo-drawer-item-hover-bg		`$kendo-drawer-item-bg`
Description Background color of the hovered drawer item.
$kendo-drawer-item-hover-text		`k-get-theme-color-var( primary-110 )`
Description Text color of the hovered drawer item.
$kendo-drawer-item-hover-icon-text		`k-get-theme-color-var( primary-110 )`
Description Text color of the hovered drawer item icon.
$kendo-drawer-item-focus-bg		`$kendo-drawer-item-bg`
Description Background color of the focused drawer item.
$kendo-drawer-item-focus-text		`$kendo-drawer-item-text`
Description Text color of the focused drawer item.
$kendo-drawer-item-focus-shadow		`inset 0 0 0 1px k-get-theme-color-var( neutral-130 )`
Description Box shadow of the focused drawer item.
$kendo-drawer-item-focus-icon-text		`$kendo-drawer-item-icon-text`
Description Text color of the focused drawer item icon.
$kendo-drawer-item-selected-font-weight		`var( --kendo-font-weight-bold, normal )`
Description Font weight of the selected drawer item.
$kendo-drawer-item-selected-bg		`var( --kendo-selected-bg, initial )`
Description Background color of the selected drawer item.
$kendo-drawer-item-selected-text		`$kendo-color-black`
Description Text color of the selected drawer item.
$kendo-drawer-item-selected-icon-text		`k-get-theme-color-var( primary-120 )`
Description Text color of the selected drawer item icon.
$kendo-drawer-item-selected-hover-bg		`var( --kendo-selected-hover-bg, inherit )`
Description Background color of the selected and hovered drawer item.
$kendo-drawer-item-selected-hover-text		`var( --kendo-selected-hover-text, inherit )`
Description Text color of the selected and hovered drawer item.

Dropdowntree

Name	Type	Default value	Computed value
$kendo-dropdowntree-popup-padding-x		`$kendo-popup-content-padding-x`
Description The horizontal padding of the DropdownTree popup
$kendo-dropdowntree-popup-padding-y		`$kendo-popup-content-padding-y`
Description The vertical padding of the DropdownTree popup
$kendo-dropdowntree-check-all-padding		`map.get( $kendo-spacing, 1 )`
Description The padding of the check-all CheckBox inside the DropDownTree popup

Dropzone

Name	Type	Default value	Computed value
$kendo-dropzone-padding-x		`map.get( $kendo-spacing, 2 )`
Description Horizontal padding of the dropzone.
$kendo-dropzone-padding-y		`map.get( $kendo-spacing, 2 )`
Description Vertical padding of the dropzone.
$kendo-dropzone-border-width		`1px`
Description Border width of the dropzone.
$kendo-dropzone-min-height		`220px`
Description Min height of the dropzone.
$kendo-dropzone-font-family		`var( --kendo-font-family, inherit )`
Description Font family of the dropzone.
$kendo-dropzone-font-size		`var( --kendo-font-size, inherit )`
Description Font size of the dropzone.
$kendo-dropzone-line-height		`var( --kendo-line-height, normal )`
Description Line height of the dropzone.
$kendo-dropzone-bg		`k-get-theme-color-var( neutral-10 )`
Description Background color of the dropzone.
$kendo-dropzone-text		`var( --kendo-component-text, inherit )`
Description Text color of the dropzone.
$kendo-dropzone-border		`var( --kendo-component-border, initial )`
Description Border color of the dropzone.
$kendo-dropzone-icon-spacing		`map.get( $kendo-spacing, 6 )`
Description Spacing below the icon.
$kendo-dropzone-icon-text		`k-get-theme-color-var( neutral-90 )`
Description Text color of the icon.
$kendo-dropzone-icon-hover-text		`k-get-theme-color-var( primary-100 )`
Description Text color of the icon when the dropzone is hovered.
$kendo-dropzone-hint-font-size		`inherit`
Description Font size of the hint.
$kendo-dropzone-hint-font-weight		`var( --kendo-font-weight-bold, bold )`
Description Font weight of the hint.
$kendo-dropzone-hint-spacing		`map.get( $kendo-spacing, 2 )`
Description Spacing below the hint.
$kendo-dropzone-hint-text		`$kendo-dropzone-text`
Description Text color of the hint.
$kendo-dropzone-note-font-size		`var( --kendo-font-size-sm, inherit )`
Description Font size of the note.
$kendo-dropzone-note-font-weight		`inherit`
Description Font weight of the note.
$kendo-dropzone-note-spacing		`0`
Description Spacing below the note.
$kendo-dropzone-note-text		`var( --kendo-subtle-text, inherit )`
Description Text color of the note.

Editor

Name	Type	Default value	Computed value
$kendo-editor-border-width		`1px`
Description The width of the border around the Еditor.
$kendo-editor-font-family		`var( --kendo-font-family, inherit )`
Description The font family of the Еditor.
$kendo-editor-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the Еditor.
$kendo-editor-line-height		`var( --kendo-line-height, normal )`
Description The line height of the Еditor.
$kendo-editor-text		`var( --kendo-component-text, initial )`
Description The text color of the Editor.
$kendo-editor-bg		`var( --kendo-component-bg, initial )`
Description The background color of the Editor.
$kendo-editor-border		`var( --kendo-component-border, initial )`
Description The color of the border around Editor.
$kendo-editor-placeholder-text		`var( --kendo-input-placeholder-text, #{$kendo-input-placeholder-text} )`
Description The text color of the Еditor's placeholder.
$kendo-editor-placeholder-opacity		`var( --kendo-input-placeholder-opacity, #{$kendo-input-placeholder-opacity} )`
Description The opacity of the Editor's placeholder.
$kendo-editor-content-outline-color		`var( --kendo-body-text, initial )`
Description The outline color of the Editor's content.
$kendo-editor-export-tool-icon-margin-x		`map.get( $kendo-spacing, 1 )`
Description The horizontal margin of the Editor's export tool icon.
$kendo-editor-selectednode-outline-width		`map.get( $kendo-spacing, 0.5 )`
Description The outline width of the Editor's selected node.
$kendo-editor-selected-text		`$kendo-color-white`
Description The selected text color of the Editor.
$kendo-editor-selected-bg		`k-get-theme-color-var( primary-100 )`
Description The selected background color of the Editor.
$kendo-editor-highlighted-bg		`k-get-theme-color-var( primary-60 )`
Description The highlighted background color of the Editor.
$kendo-editor-resize-handle-size		`map.get( $kendo-spacing, 2 )`
Description The size of the Editor's resize handle.
$kendo-editor-resize-handle-border-width		`1px`
Description The border width of the Editor's resize handle.
$kendo-editor-resize-handle-border		`$kendo-color-black`
Description The border color of the Editor's resize handle.
$kendo-editor-resize-handle-bg		`$kendo-color-white`
Description The background color of the Editor's resize handle.
$kendo-editor-selectednode-outline-color		`k-get-theme-color-var( primary-100 )`
Description The outline color of the Editor's selected node.
$kendo-editor-inline-td-border		`var( --kendo-component-border, initial )`
Description The border color of the Inline Editor data cell.
$kendo-editor-inline-hover-border		`var( --kendo-component-border, initial )`
Description The hover border color of the Inline Editor.
$ct-cell-size		`20px`
Description The size of the cell in the Insert table popup.
$kendo-editor-ct-popup-text		`var( --kendo-selected-text, initial )`
Description The text color of the selected cells in the Insert table popup.
$kendo-editor-ct-popup-bg		`var( --kendo-selected-bg, initial )`
Description The background color of the selected cells in the Insert table popup.
$kendo-editor-ct-popup-border		`var( --kendo-selected-border, initial )`
Description The border color of the selected cells in the Insert table popup.

Elevation

Name	Type	Default value	Computed value
$kendo-elevation		`$_default-elevation`
Description The global default Elevation map.

Expander

Name	Type	Default value	Computed value
$kendo-expander-margin-y		`map.get( $kendo-spacing, 2 )`
Description The vertical spacing of the ExpansionPanel.
$kendo-expander-border-width		`1px`
Description The width of the border around the ExpansionPanel.
$kendo-expander-font-family		`var( --kendo-font-family, inherit )`
Description The font family of the ExpansionPanel.
$kendo-expander-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the ExpansionPanel.
$kendo-expander-line-height		`var( --kendo-line-height, normal )`
Description The hine height of the ExpansionPanel.
$kendo-expander-text		`var( --kendo-component-text, initial )`
Description The text color of the ExpansionPanel.
$kendo-expander-bg		`k-get-theme-color-var( neutral-10 )`
Description The background color of the ExpansionPanel.
$kendo-expander-border		`var( --kendo-component-border, initial )`
Description The border color of the ExpansionPanel.
$kendo-expander-shadow		`inset 0 0 0 2px k-get-theme-color-var( neutral-30 )`
Description The box shadow of the ExpansionPanel.
$kendo-expander-expanded-bg		`var( --kendo-component-bg, initial )`
Description The background color of the expanded ExpansionPanel.
$kendo-expander-disabled-text		`var( --kendo-disabled-text, initial )`
Description The text color of the disabled ExpansionPanel.
$kendo-expander-disabled-bg		`var( --kendo-disabled-bg, initial )`
Description The background color of the disabled ExpansionPanel.
$kendo-expander-focus-offset		`1px`
Description The offset of the focused ExpansionPanel.
$kendo-expander-focus-outline-width		`1px`
Description The outline width of the focused ExpansionPanel.
$kendo-expander-focus-outline-style		`solid`
Description The outline style of the focused ExpansionPanel.
$kendo-expander-focus-outline		`k-get-theme-color-var( neutral-130 )`
Description The outline color of the focused ExpansionPanel.
$kendo-expander-focus-bg		`var( --kendo-component-bg, initial )`
Description The background color of the focused ExpansionPanel.
$kendo-expander-focus-shadow		`inset 0px 0px 0px 2px k-get-theme-color-var( neutral-130 )`
Description The box shadow of the focused ExpansionPanel.
$kendo-expander-header-padding-x		`map.get( $kendo-spacing, 4 )`
Description The horizontal padding of the ExpansionPanel header.
$kendo-expander-header-padding-y		`map.get( $kendo-spacing, 3 )`
Description The vertical padding of the ExpansionPanel header.
$kendo-expander-header-text		`k-get-theme-color-var( primary-100 )`
Description The text color of the ExpansionPanel header.
$kendo-expander-header-bg		`inherit`
Description The background color of the ExpansionPanel header.
$kendo-expander-header-hover-bg		`k-get-theme-color-var( neutral-20 )`
Description The background color of the hovered ExpansionPanel header.
$kendo-expander-title-text		`k-get-theme-color-var( primary-100 )`
Description The text color of the ExpansionPanel title.
$kendo-expander-header-sub-title-text		`var( --kendo-subtle-text, initial )`
Description The text color of the ExpansionPanel sub-title.
$kendo-expander-indicator-margin-x		`map.get( $kendo-spacing, 2.5 )`
Description The horizontal margin of the ExpansionPanel indicator.
$kendo-expander-indicator-text		`var( --kendo-expander-text, #{$kendo-expander-text} )`
Description The text color of the ExpansionPanel indicator.
$kendo-expander-content-padding-x		`map.get( $kendo-spacing, 4 )`
Description The horizontal padding of the ExpansionPanel content.
$kendo-expander-content-padding-y		`map.get( $kendo-spacing, 4 )`
Description The vertical padding of the ExpansionPanel content.

Filemanager

Name	Type	Default value	Computed value
$kendo-file-manager-bg		`var( --kendo-component-bg, transparent )`
Description Background color of the filemanager component.
$kendo-file-manager-text		`var( --kendo-component-text, inherit )`
Description Text color of the filemanager component.
$kendo-file-manager-border		`var( --kendo-component-border, inherit )`
Description Border color of the filemanager component.
$kendo-file-manager-toolbar-bg		`$kendo-toolbar-bg`
Description Background color of the toolbar.
$kendo-file-manager-toolbar-text		`$kendo-toolbar-text`
Description Text color of the toolbar.
$kendo-file-manager-toolbar-border		`$kendo-toolbar-border`
Description Border color of the toolbar.
$kendo-file-manager-navigation-padding-x		`$kendo-file-manager-spacer`
Description Horizontal padding of the navigation.
$kendo-file-manager-navigation-padding-y		`$kendo-file-manager-spacer`
Description Vertical padding of the navigation.
$kendo-file-manager-navigation-width		`20%`
Description Width of the navigation.
$kendo-file-manager-navigation-border-width		`$kendo-file-manager-border-width`
Description Border width of the navigation.
$kendo-file-manager-navigation-bg		`transparent`
Description Background color of the navigation.
$kendo-file-manager-navigation-text		`inherit`
Description Text color of the navigation.
$kendo-file-manager-navigation-border		`inherit`
Description Border color of the navigation.
$kendo-file-manager-breadcrumb-padding-x		`map.get( $kendo-spacing, 2 )`
Description Horizontal padding of the breadcrumb.
$kendo-file-manager-breadcrumb-padding-y		`map.get( $kendo-spacing, 2 )`
Description Vertical padding of the breadcrumb.
$kendo-file-manager-breadcrumb-border-width		`$kendo-file-manager-border-width`
Description Border width of the breadcrumb.
$kendo-file-manager-breadcrumb-bg		`$kendo-toolbar-bg`
Description Background color of the breadcrumb.
$kendo-file-manager-breadcrumb-text		`inherit`
Description Text color of the breadcrumb.
$kendo-file-manager-breadcrumb-border		`inherit`
Description Border color of the breadcrumb.
$kendo-file-manager-listview-bg		`transparent`
Description Background color of the listview.
$kendo-file-manager-listview-text		`inherit`
Description Text color of the listview.
$kendo-file-manager-listview-border		`inherit`
Description Border color of the listview.
$kendo-file-manager-listview-item-padding-x		`map.get( $kendo-spacing, 4 )`
Description Horizontal padding of the listview item.
$kendo-file-manager-listview-item-padding-y		`map.get( $kendo-spacing, 4 )`
Description Vertical padding of the listview item.
$kendo-file-manager-listview-item-width		`120px`
Description Width of the listview item.
$kendo-file-manager-listview-item-height		`120px`
Description Height of the listview item.
$kendo-file-manager-listview-item-icon-bg		`transparent`
Description Background color of the listview item icon.
$kendo-file-manager-listview-item-icon-text		`var( --kendo-subtle-text, inherit )`
Description Text color of the listview item icon.
$kendo-file-manager-listview-item-icon-border		`inherit`
Description Border color of the listview item icon.
$kendo-file-manager-listview-item-icon-focus-bg		`transparent`
Description Background color of the focused listview item icon.
$kendo-file-manager-listview-item-icon-focus-text		`inherit`
Description Text color of the focused listview item icon.
$kendo-file-manager-listview-item-icon-focus-border		`inherit`
Description Border color of the focused listview item icon.
$kendo-file-manager-listview-item-icon-selected-bg		`transparent`
Description Background color of the selected listview item icon.
$kendo-file-manager-listview-item-icon-selected-text		`inherit`
Description Text color of the selected listview item icon.
$kendo-file-manager-listview-item-icon-selected-border		`inherit`
Description Border color of the selected listview item icon.
$kendo-file-manager-grid-bg		`transparent`
Description Background color of the grid.
$kendo-file-manager-grid-text		`inherit`
Description Text color of the grid.
$kendo-file-manager-grid-border		`inherit`
Description Border color of the grid.
$kendo-file-manager-preview-padding-x		`$kendo-file-manager-spacer`
Description Horizontal padding of the preview.
$kendo-file-manager-preview-padding-y		`$kendo-file-manager-spacer`
Description Vertical padding of the preview.
$kendo-file-manager-preview-width		`20%`
Description Width of the preview.
$kendo-file-manager-preview-border-width		`$kendo-file-manager-border-width`
Description Border width of the preview.
$kendo-file-manager-preview-spacing		`$kendo-file-manager-spacer`
Description Spacing of the preview.
$kendo-file-manager-preview-column-gap		`map.get( $kendo-spacing, 1 )`
Description Spacing of the preview.
$kendo-file-manager-preview-bg		`transparent`
Description Background color of the preview.
$kendo-file-manager-preview-text		`inherit`
Description Text color of the preview.
$kendo-file-manager-preview-border		`inherit`
Description Border color of the preview.
$kendo-file-manager-preview-icon-bg		`transparent`
Description Background color of the preview icon.
$kendo-file-manager-preview-icon-text		`var( --kendo-subtle-text, inherit )`
Description Text color of the preview icon.
$kendo-file-manager-preview-icon-border		`inherit`
Description Border color of the preview icon.

Filemanger

Name	Type	Default value	Computed value
$kendo-file-manager-spacer		`map.get( $kendo-spacing, 4 )`
Description The space between the filemanger items.
$kendo-file-manager-border-width		`1px`
Description Border width of the filemanger.
$kendo-file-manager-font-family		`var( --kendo-font-family, normal )`
Description Font family of the filemanger.
$kendo-file-manager-font-size		`var( --kendo-font-size, inherit )`
Description Font size of the filemanger.
$kendo-file-manager-line-height		`var( --kendo-line-height, normal )`
Description Line height of the filemanger.
$kendo-file-manager-toolbar-border-width		`$kendo-file-manager-border-width`
Description Border width of the toolbar.

Filter

Name	Type	Default value	Computed value
$kendo-filter-padding-x		`$kendo-padding-md-x`
Description The horizontal padding of the Filter.
$kendo-filter-padding-y		`$kendo-padding-md-y`
Description The vertical padding of the Filter.
$kendo-filter-bottom-margin		`30px`
Description The bottom margin of the Filter.
$kendo-filter-line-size		`1px`
Description The width of the line that connects the Filter items.
$kendo-filter-operator-dropdown-width		`15em`
Description The width of the dropdown elements in the Filter items.
$kendo-filter-text		`var( --kendo-component-text, initial )`
Description The text color of the Filter.
$kendo-filter-preview-field-text		`k-get-theme-color-var( primary-100 )`
Description The text color of the Filter preview field.
$kendo-filter-preview-operator-text		`k-get-theme-color-var( neutral-130 )`
Description The text color of the Filter preview operator.
$kendo-filter-line-bg		`var( --kendo-component-border, initial )`
Description The background color of the line that connects the Filter items.
$kendo-filter-toolbar-focus-border		`k-get-theme-color-var( neutral-130 )`
Description The border color of the focused Filter.

Floating-action-button

Name	Type	Default value	Computed value
$kendo-fab-border-width		`1px`
Description The width of the border around the FAB.
$kendo-fab-border-radius		`var( --kendo-border-radius-md, #{$kendo-border-radius-md} )`
Description The border radius of the FAB.
$kendo-fab-font-family		`var( --kendo-font-family, inherit )`
Description The font family of the FAB.
$kendo-fab-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the FAB.
$kendo-fab-line-height		`var( --kendo-line-height, normal )`
Description The line height of the FAB.
$kendo-fab-padding-x		`map.get( $kendo-spacing, 4 )`
Description The horizontal padding of the FAB.
$kendo-fab-sm-padding-x		`math.div( $kendo-fab-padding-x, 2 )`
Description The horizontal padding of the small FAB.
$kendo-fab-md-padding-x		`$kendo-fab-padding-x`
Description The horizontal padding of the medium FAB.
$kendo-fab-lg-padding-x		`( $kendo-fab-padding-x * 1.5 )`
Description The horizontal padding of the large FAB.
$kendo-fab-padding-y		`$kendo-fab-padding-x`
Description The vertical padding of the FAB.
$kendo-fab-sm-padding-y		`math.div( $kendo-fab-padding-y, 2 )`
Description The vertical padding of the small FAB.
$kendo-fab-md-padding-y		`$kendo-fab-padding-y`
Description The vertical padding of the medium FAB.
$kendo-fab-lg-padding-y		`( $kendo-fab-padding-y * 1.5 )`
Description The vertical padding of the large FAB.
$kendo-fab-focus-offset		`$kendo-button-focus-offset`
Description The offset of the focused FAB.
$kendo-fab-focus-outline-width		`$kendo-button-focus-outline-width`
Description The outline width of the focused FAB.
$kendo-fab-focus-outline-style		`$kendo-button-focus-outline-style`
Description The outline style of the focused FAB.
$kendo-fab-icon-padding-x		`map.get( $kendo-spacing, 0.5 )`
Description The horizontal padding of the FAB icon.
$kendo-fab-icon-padding-y		`$kendo-fab-icon-padding-x`
Description The vertical padding of the FAB icon.
$kendo-fab-icon-spacing		`map.get( $kendo-spacing, 0.5 )`
Description The spacing of the FAB icon.
$kendo-fab-items-padding-x		`0px`
Description The horizontal padding of the FAB items.
$kendo-fab-items-padding-y		`map.get( $kendo-spacing, 4 )`
Description The vertical padding of the FAB items.
$kendo-fab-item-text-padding-x		`map.get( $kendo-spacing, 1 )`
Description The horizontal padding of the FAB item text.
$kendo-fab-item-text-padding-y		`map.get( $kendo-spacing, 1 )`
Description The vertical padding of the FAB item text.
$kendo-fab-item-text-border-width		`1px`
Description The width of the FAB item text border.
$kendo-fab-item-text-border-style		`solid`
Description The border style of the FAB item text.
$kendo-fab-item-text-border-radius		`var( --kendo-border-radius-md, #{$kendo-border-radius-md} )`
Description The border radius of the FAB item text.
$kendo-fab-item-text-font-size		`var( --kendo-font-size-sm, inherit )`
Description The font size of the FAB item text.
$kendo-fab-item-text-line-height		`var( --kendo-line-height-sm, inherit )`
Description The line height of the FAB item text.
$kendo-fab-item-text-offset-x		`map.get( $kendo-spacing, 2 )`
Description The bottom margin of the FAB item text.
$kendo-fab-item-focus-offset		`$kendo-button-focus-offset`
Description The offset of the focused FAB item.
$kendo-fab-item-focus-outline-width		`$kendo-button-focus-outline-width`
Description The outline width of the focused FAB item.
$kendo-fab-item-focus-outline-style		`$kendo-button-focus-outline-style`
Description The outline style of the focused FAB item.
$kendo-fab-item-icon-padding-x		`map.get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x`
Description The horizontal padding of the FAB item icon.
$kendo-fab-item-icon-padding-y		`$kendo-fab-item-icon-padding-x`
Description The vertical padding of the FAB item icon.
$kendo-fab-item-icon-border-width		`1px`
Description The border width of the FAB item icon.
$kendo-fab-item-icon-border-style		`solid`
Description The border style of the FAB item icon.
$kendo-fab-item-icon-border-radius		`50%`
Description The border radius of the FAB item icon.
$kendo-fab-theme-colors		`( solid: map.get( $kendo-button-theme-colors, "solid") )`
Description The theme colors map for the FAB.
$kendo-fab-sizes		`( 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 ) )`
Description The size map for the FAB.
$kendo-fab-item-offset-y		`map.get( $kendo-spacing, 2 )`
Description The bottom margin of the FAB item.
$kendo-fab-item-text		`k-get-theme-color-var( neutral-160 )`
Description The base text color of the FAB item.
$kendo-fab-item-bg		`var( --kendo-component-bg, inherit )`
Description The base background color of the FAB item.
$kendo-fab-item-border		`k-get-theme-color-var( neutral-110 )`
Description The base border color of the FAB item.
$kendo-fab-item-hover-text		`var( --kendo-hover-text, inherit )`
Description The text color of the hovered FAB item.
$kendo-fab-item-hover-bg		`var( --kendo-hover-bg, inherit )`
Description The background color of the hovered FAB item.
$kendo-fab-item-hover-border		`k-get-theme-color-var( neutral-110 )`
Description The border color of the hovered FAB item.
$kendo-fab-item-focus-text		`k-get-theme-color-var( neutral-160 )`
Description The text color of the focused FAB item.
$kendo-fab-item-focus-bg		`var( --kendo-component-bg, inherit )`
Description The background color of the focused FAB item.
$kendo-fab-item-focus-border		`k-get-theme-color-var( neutral-110 )`
Description The border color of the focused FAB item.
$kendo-fab-item-active-text		`var( --kendo-selected-text, inherit )`
Description The text color of the active FAB item.
$kendo-fab-item-active-bg		`var( --kendo-selected-bg, inherit )`
Description The background color of the active FAB item.
$kendo-fab-item-active-border		`k-get-theme-color-var( neutral-110 )`
Description The border color of the active FAB item.

Floating-label

Name	Type	Default value	Computed value
$kendo-floating-label-scale		`1`
Description The transformation scale of the Floating Label.
$kendo-floating-label-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the Floating Label.
$kendo-floating-label-max-width		`90%`
Description The maximum width of the Floating Label.
$kendo-floating-label-font-weight		`var( --kendo-font-weight-bold, inherit )`
Description The font weight of the Floating Label.
$kendo-floating-label-line-height		`var( --kendo-line-height, normal )`
Description The line height of the Floating Label.
$kendo-floating-label-height		`calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )`
Description The height of the Floating Label.
$kendo-floating-label-offset-x		`calc( #{$kendo-input-md-padding-x} + #{$kendo-input-border-width} )`
Description The horizontal offset of the Floating Label.
$kendo-floating-label-offset-y		`calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-md-padding-y} )`
Description The vertical offset of the Floating Label.
$kendo-floating-label-focus-scale		`1`
Description The transformation scale of the focused Floating Label.
$kendo-floating-label-focus-offset-x		`0`
Description The horizontal offset of the focused Floating Label.
$kendo-floating-label-focus-offset-y		`0`
Description The vertical offset of the focused Floating Label.
$kendo-floating-label-transition		`.2s ease-out`
Description The transition of the Floating Label.
$kendo-floating-label-bg		`inherit`
Description The background color of the Floating Label.
$kendo-floating-label-text		`inherit`
Description The text color of the Floating Label.
$kendo-floating-label-focus-bg		`inherit`
Description The background color of the focused Floating Label.
$kendo-floating-label-focus-text		`inherit`
Description The text color of the focused Floating Label.
$kendo-floating-label-invalid-text		`var( --kendo-invalid-text, #{$kendo-invalid-text} )`
Description The invalid text color of the Floating Label.

Form

Name	Type	Default value	Computed value
$kendo-form-spacer		`( $kendo-padding-md-x * 2 )`
Description The padding of the inline Form.
$kendo-form-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the Form.
$kendo-form-line-height		`var( --kendo-line-height, normal )`
Description The line height of the Form.
$kendo-form-line-height-em		`$kendo-line-height-em`
Description The line height of the Form in em units.
$kendo-form-sm-line-height		`var( --kendo-line-height-sm, normal )`
Description The line height of the small Form.
$kendo-form-lg-line-height		`var( --kendo-line-height-lg, normal )`
Description The line height of the large Form.
$kendo-form-fieldset-margin		`2em 0 0`
Description The margin of the Form fieldset.
$kendo-form-fieldset-padding		`0px`
Description The padding of the Form fieldset.
$kendo-form-legend-margin		`0 0 map.get( $kendo-spacing, 3 )`
Description The margin of the Form legend.
$kendo-form-legend-padding		`0px`
Description The padding of the Form legend.
$kendo-form-legend-border-width		`0 0 map.get( $kendo-spacing, 0.5 )`
Description The border width of the Form legend.
$kendo-form-legend-border-style		`solid`
Description The border style of the Form legend.
$kendo-form-legend-border-color		`var( --kendo-component-border, initial )`
Description The border color of the Form legend.
$kendo-form-legend-width		`100%`
Description The width of the Form legend.
$kendo-form-legend-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the Form legend.
$kendo-form-legend-text-transform		`uppercase`
Description The text capitalization of the Form legend.
$kendo-form-label-margin-bottom		`map.get( $kendo-spacing, 2 )`
Description The bottom margin of the Form label.
$kendo-form-label-font-weight		`var( --kendo-font-weight-bold, inherit )`
Description The font weight of the form label
$kendo-form-button-margin-x		`map.get( $kendo-spacing, 2 )`
Description The horizontal margin of the Form buttons.
$kendo-form-hint-font-size		`var( --kendo-font-size-sm, inherit )`
Description The font size of the Form hint.
$kendo-form-hint-font-style		`normal`
Description The font style of the Form hint.
$kendo-form-hint-margin-top		`map.get( $kendo-spacing, 1 )`
Description The top margin of the Form hint.
$kendo-form-hint-text		`k-get-theme-color-var( neutral-130 )`
Description The text color of the Form hint.
$kendo-form-sm-rows-spacing		`map.get( $kendo-spacing, 3 )`
Description The row spacing of the small Form.
$kendo-form-md-rows-spacing		`$kendo-form-sm-rows-spacing`
Description The row spacing of the medium Form.
$kendo-form-lg-rows-spacing		`$kendo-form-sm-rows-spacing`
Description The row spacing of the large Form.
$kendo-form-separator-margin		`map.get( $kendo-spacing, 3 ) 0 0`
Description The margin of the Form separator.
$kendo-form-separator-border-color		`$kendo-form-legend-border-color`
Description The border color of the Form separator.
$kendo-horizontal-form-label-padding-top		`map.get( $kendo-spacing, 1.5 )`
Description The top padding of the label in the horizontal Form.
$kendo-horizontal-form-label-margin-x		`map.get( $kendo-spacing, 2 )`
Description The horizontal margin of the label in the horizontal Form.
$kendo-horizontal-form-label-width		`25%`
Description The width of the label in the horizontal Form.
$kendo-horizontal-form-label-align		`flex-end`
Description The horizontal alignment of the label in the horizontal Form.
$kendo-horizontal-form-field-wrap-max-width		`calc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} )`
Description The maximum width of the field wrap in the horizontal Form.
$kendo-inline-form-element-width		`25%`
Description The width of the inline Form element.
$kendo-forms-invalid-color		`var( --kendo-invalid-text, initial )`
Description The invalid text color of the Form.
$kendo-label-optional-margin-x		`map.get( $kendo-spacing, 1.5 )`
Description The horizontal margin of the optional label in the Form.
$kendo-label-optional-font-size		`var( --kendo-font-size-sm, inherit )`
Description The font size of the optional label in the Form.
$kendo-label-optional-font-style		`normal`
Description The font style of the optional label in the Form.
$kendo-fieldset-margin		`map.get( $kendo-spacing, 7.5 )`
Description The margin of the Form fieldset.
$kendo-fieldset-font-size		`var( --kendo-font-size-xl, inherit )`
Description The font size of the Form fieldset.
$kendo-fieldset-bg		`transparent`
Description The background color of the Form fieldset.
$kendo-fieldset-text		`inherit`
Description The text color of the Form fieldset.
$kendo-fieldset-border		`initial`
Description The border color of the Form fieldset.
$kendo-fieldset-legend-bg		`transparent`
Description The background color of the Form legend.
$kendo-fieldset-legend-text		`k-get-theme-color-var( neutral-130 )`
Description The text color of the Form legend.
$kendo-fieldset-legend-border		`initial`
Description The border color of the Form legend.
$kendo-form-sizes		`( 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 ) )`
Description The sizes map for the Form.

Gantt

Name	Type	Default value	Computed value
$kendo-gantt-border-width		`1px`
Description Border width of the gantt.
$kendo-gantt-font-family		`var( --kendo-font-family, initial )`
Description Font family of the gantt.
$kendo-gantt-font-size		`var( --kendo-font-size, initial )`
Description Font size of the gantt.
$kendo-gantt-line-height		`var( --kendo-line-height, initial )`
Description Line height of the gantt.
$kendo-gantt-bg		`var( --kendo-component-bg, inherit )`
Description Background color of the gantt.
$kendo-gantt-text		`var( --kendo-component-text, inherit )`
Description Text color of the gantt.
$kendo-gantt-border		`var( --kendo-component-border, inherit )`
Description Border color of the gantt.
$kendo-gantt-nonwork-bg		`rgba( $kendo-color-black, .04 )`
Description Background color of the gantt non-working days.
$kendo-gantt-nonwork-text		`inherit`
Description Text color of the gantt non-working days.
$kendo-gantt-nonwork-border		`inherit`
Description Border color of the gantt non-working days.
$kendo-gantt-line-size		`2px`
Description Size of the gantt connecting lines.
$kendo-gantt-line-fill		`black`
Description Background fill color of the gantt connecting lines.
$kendo-gantt-line-selected-fill		`k-get-theme-color-var( primary-120 )`
Description Selected background fill of the gantt connecting lines.
$kendo-gantt-dot-size		`8px`
Description Size of the gantt task dot.
$kendo-gantt-dot-spacing		`map.get( $kendo-spacing, 0.5 )`
Description Spacing of the gantt task dot.
$kendo-gantt-dot-bg		`$kendo-color-black`
Description Background color of the gantt task dot.
$kendo-gantt-dot-border		`$kendo-color-black`
Description Border color of the gantt task dot.
$kendo-gantt-dot-hover-bg		`$kendo-color-white`
Description Hover background color of the gantt task dot.
$kendo-gantt-dot-hover-border		`$kendo-color-black`
Description Hover border color of the gantt task dot.
$kendo-gantt-milestone-bg		`$kendo-gantt-text`
Description Background color of the gantt milestone.
$kendo-gantt-milestone-border		`$kendo-gantt-text`
Description Border color of the gantt milestone.
$kendo-gantt-milestone-selected-bg		`k-get-theme-color-var( primary-100 )`
Description Selected background color of the gantt milestone.
$kendo-gantt-milestone-selected-border		`k-get-theme-color-var( primary-100 )`
Description Selected border color of the gantt milestone.
$kendo-gantt-summary-bg		`k-get-theme-color-var( neutral-110 )`
Description Background color of the gantt summary.
$kendo-gantt-summary-progress-bg		`k-get-theme-color-var( neutral-160 )`
Description Background color of the gantt summary progress.
$kendo-gantt-summary-selected-bg		`k-get-theme-color-var( primary-50 )`
Description Selected background color of the gantt summary.
$kendo-gantt-summary-progress-selected-bg		`k-get-theme-color-var( primary-100 )`
Description Selected background color of the gantt summary progress.
$kendo-gantt-task-border-width		`0px`
Description Border width of the gantt task.
$kendo-gantt-task-padding-x		`map.get( $kendo-spacing, 2 )`
Description Horizontal padding of the gantt task.
$kendo-gantt-task-padding-y		`map.get( $kendo-spacing, 1 )`
Description Vertical padding of the gantt task.
$kendo-gantt-task-bg		`k-get-theme-color-var( neutral-110 )`
Description Background color of the gantt task.
$kendo-gantt-task-text		`$kendo-color-white`
Description Text color of the gantt task.
$kendo-gantt-task-border		`inherit`
Description Border color of the gantt task.
$kendo-gantt-task-progress-bg		`k-get-theme-color-var( neutral-160 )`
Description Background color of the gantt task progress.
$kendo-gantt-task-progress-hover-bg		`k-get-theme-color-var( neutral-190 )`
Description Background hover color of the gantt task progress.
$kendo-gantt-task-selected-bg		`k-get-theme-color-var( primary-50 )`
Description Selected background color of the gantt task.
$kendo-gantt-task-selected-text		`$kendo-color-white`
Description Selected text color of the gantt task.
$kendo-gantt-task-selected-border		`transparent`
Description Selected border color of the gantt task.
$kendo-gantt-task-progress-selected-bg		`k-get-theme-color-var( primary-100 )`
Description Selected background color of the gantt task progress.
$kendo-gantt-task-actions-padding-y		`$kendo-padding-md-y`
Description Vertical padding of the gantt task actions.
$kendo-gantt-task-actions-padding-x		`$kendo-padding-md-x`
Description Horizontal padding of the gantt task actions.
$kendo-gantt-planned-margin-y		`.45em`
Description Vertical margin of the gantt task planned line.
$kendo-gantt-planned-border-width		`2px`
Description Border width of the gantt task planned line.
$kendo-gantt-planned-line-height		`.85em`
Description Line height of the gantt task planned line.
$kendo-gantt-planned-dependency-margin-y		`.65em`
Description Vertical margin of the gantt planned dependencies.
$kendo-gantt-planned-moment-width		`6px`
Description Default width of the gantt planned line dot.
$kendo-gantt-planned-moment-height		`$kendo-gantt-planned-moment-width`
Description Default height of the gantt planned line dot.
$kendo-gantt-planned-moment-border-radius		`calc( ( #{$kendo-gantt-planned-border-width * 2} + #{$kendo-gantt-planned-moment-width} ) / 2 )`
Description Border radius of the gantt planned line dot.
$kendo-gantt-planned-moment-left-margin-x		`calc( #{$kendo-gantt-planned-border-width} / 2 - #{$kendo-gantt-planned-moment-border-radius} )`
Description Horizontal margin of the gantt planned line dot.
$kendo-gantt-planned-milestone-moment-margin-x		`math.div( $kendo-gantt-planned-moment-width, 2 )`
Description Horizontal margin of the gantt milestone planned line dot.
$kendo-gantt-planned-duration-height		`$kendo-gantt-planned-border-width`
Description Default height of the gantt planned line.
$kendo-gantt-planned-duration-hover-height		`calc( #{$kendo-gantt-planned-border-width} + 1px )`
Description Hover height of the gantt planned line.
$kendo-gantt-planned-single-drag-hint-top		`0`
Description Top position of the gantt drag hint.
$kendo-gantt-planned-summary-drag-hint-top		`.5em`
Description Top position of the gantt summary drag hint.
$kendo-gantt-planned-milestone-drag-hint-top		`.3em`
Description Top position of the gantt planned milestone drag hint.
$kendo-gantt-planned-offset-resize-handler-margin-x		`1.4em`
Description of the gantt.
$kendo-gantt-planned-text		`$kendo-color-white`
Description Text color of the gantt planned tooltip.
$kendo-gantt-planned-bg		`k-get-theme-color-var( primary-100 )`
Description Background color of the gantt planned tooltip.
$kendo-gantt-planned-border		`k-get-theme-color-var( primary-100 )`
Description Border color of the gantt planned tooltip.
$kendo-gantt-delayed-text		`$kendo-color-white`
Description Text color of the gantt delayed task.
$kendo-gantt-delayed-bg		`k-get-theme-color-var( error-160 )`
Description Background color of the gantt delayed task.
$kendo-gantt-delayed-bg-lighter		`k-get-theme-color-var( error-110)`
Description Complement background color of the gantt delayed task.
$kendo-gantt-delayed-hover-bg		`k-get-theme-color-var( error-190 )`
Description Background hover color of the gantt delayed task.
$kendo-gantt-advanced-bg		`k-get-theme-color-var( success-160 )`
Description Background color of the gantt advanced task.
$kendo-gantt-advanced-bg-lighter		`k-get-theme-color-var( success-110 )`
Description Complement background color of the gantt advanced task.
$kendo-gantt-advanced-hover-bg		`k-get-theme-color-var( success-190 )`
Description Background hover color of the gantt advanced task.
$kendo-gantt-action-on-offset-text		`$kendo-color-black`
Description Text color of the gantt delayed task action.
$kendo-gantt-offset-resize-handler-top		`50%`
Description Top position of the gantt delayed task resize handler.
$kendo-gantt-validation-tooltip-width		`200px`
Description Default width of the gantt validation tooltip.
$kendo-gantt-validation-tooltip-label-width		`50px`
Description Default width of the gantt validation tooltip label.
$kendo-gantt-validation-tooltip-border		`var( --kendo-component-border, inherit )`
Description Border color of the gantt validation tooltip.
$kendo-gantt-validation-tooltip-valid-border		`k-get-theme-color-var( success-100 )`
Description Border color of the gantt validation tooltip in valid state.
$kendo-gantt-validation-tooltip-invalid-border		`k-get-theme-color-var( error-100 )`
Description Border color of the gantt validation tooltip in invalid state.

Grid

Name	Type	Default value	Computed value
$kendo-grid-border-width		`1px`
Description Border width of the grid.
$kendo-grid-border-style		`solid`
Description Border style of the grid.
$kendo-grid-font-family		`var( --kendo-font-family, inherit )`
Description Font family of the grid.
$kendo-grid-font-size		`var( --kendo-font-size, inherit )`
Description Font size of the grid.
$kendo-grid-line-height		`var( --kendo-line-height, normal )`
Description Line height of the grid.
$kendo-grid-padding-x		`$kendo-table-cell-padding-x`
Description Horizontal padding of the grid.
$kendo-grid-padding-y		`$kendo-table-cell-padding-y`
Description Vertical padding of the grid.
$kendo-grid-header-padding-x		`$kendo-grid-padding-x`
Description Horizontal padding of the grid header.
$kendo-grid-header-padding-y		`$kendo-grid-padding-y`
Description Vertical padding of the grid header.
$kendo-grid-grouping-header-padding-x		`$kendo-toolbar-md-padding-x`
Description Horizontal padding of the grid grouping header.
$kendo-grid-grouping-header-padding-y		`$kendo-toolbar-md-padding-y`
Description Vertical padding of the grid grouping header.
$kendo-grid-cell-padding-x		`$kendo-grid-padding-x`
Description Horizontal padding of the grid cell.
$kendo-grid-cell-padding-y		`$kendo-grid-padding-y`
Description Vertical padding of the grid cell.
$kendo-grid-filter-cell-padding-x		`$kendo-grid-padding-y`
Description Horizontal padding of the grid filter cell.
$kendo-grid-filter-cell-padding-y		`$kendo-grid-filter-cell-padding-x`
Description Vertical padding of the grid filter cell.
$kendo-grid-edit-cell-padding-x		`$kendo-grid-cell-padding-x`
Description Horizontal padding of the grid edit cells.
$kendo-grid-edit-cell-padding-y		`5px`
Description Vertical padding of the grid edit cells.
$kendo-grid-group-drop-hint-size		`6px`
Description Size of the grid group drop clue.
$kendo-grid-group-drop-hint-line-size		`1px`
Description Line size of the grid group drop clue.
$kendo-grid-group-drop-hint-dot-size		`$kendo-grid-group-drop-hint-size`
Description Dot size of the grid group drop clue.
$kendo-grid-group-drop-hint-height		`calc( #{$kendo-chip-calc-size} + #{$kendo-grid-group-drop-hint-size} )`
Description Height of the grid group drop clue.
$kendo-grid-group-drop-hint-top		`2px`
Description Top offset of the grid group drop clue.
$kendo-grid-bg		`$kendo-table-bg`
Description Background color of the grid.
$kendo-grid-text		`$kendo-table-text`
Description Text color of the grid.
$kendo-grid-border		`$kendo-table-border`
Description Border color of the grid.
$kendo-grid-focus-shadow		`$kendo-list-item-focus-shadow`
Description Focus shadow of the grid.
$kendo-grid-alt-bg		`$kendo-table-alt-row-bg`
Description Background color of alternating rows in grid.
$kendo-grid-alt-text		`$kendo-table-alt-row-text`
Description Text color of alternating rows in grid.
$kendo-grid-alt-border		`$kendo-table-alt-row-border`
Description Border color of alternating rows in grid.
$kendo-grid-hover-bg		`$kendo-table-hover-bg`
Description Background color of hover rows in grid.
$kendo-grid-hover-text		`$kendo-table-hover-text`
Description Text color of hover rows in grid.
$kendo-grid-hover-border		`$kendo-table-hover-border`
Description Border color of hover rows in grid.
$kendo-grid-selected-bg		`$kendo-table-selected-bg`
Description Background color of selected rows in grid.
$kendo-grid-selected-text		`$kendo-table-selected-text`
Description Text color of selected rows in grid.
$kendo-grid-selected-border		`$kendo-table-selected-border`
Description Border color of selected rows in grid.
$kendo-grid-selected-hover-bg		`$kendo-table-selected-hover-bg`
Description Hover background color of selected rows in grid.
$kendo-grid-selected-hover-text		`$kendo-table-selected-hover-text`
Description Hover text color of selected rows in grid.
$kendo-grid-selected-hover-border		`$kendo-table-selected-hover-border`
Description Hover border color of selected rows in grid.
$kendo-grid-header-border-width-y		`$kendo-grid-border-width`
Description Vertical border width of the grid header.
$kendo-grid-header-border-width-x		`0`
Description Horizontal border width of the grid header.
$kendo-grid-header-font-size		`inherit`
Description Font size of the grid header.
$kendo-grid-header-font-weight		`var( --kendo-font-weight-bold, normal )`
Description Font weight of the grid header.
$kendo-grid-header-menu-spacing		`var( --kendo-icon-spacing, .5rem )`
Description Menu spacing of the grid header.
$kendo-grid-header-first-border-width		`$kendo-grid-border-width`
Description Border width of the first cell in the grid header.
$kendo-grid-header-bg		`$kendo-table-header-bg`
Description Background color of grid header.
$kendo-grid-header-text		`$kendo-table-header-text`
Description Text color of grid header.
$kendo-grid-header-border		`$kendo-table-header-border`
Description Border color of grid header.
$kendo-grid-header-icon-text		`k-get-theme-color-var( neutral-130 )`
Description Background color of grid header icons.
$kendo-grid-footer-bg		`$kendo-table-footer-bg`

$kendo-grid-footer-text		`$kendo-table-footer-text`
Description Text color of grid footer.
$kendo-grid-footer-border		`$kendo-table-footer-border`
Description Border color of grid footer.
$kendo-grid-selection-aggregates-bg		`$kendo-toolbar-bg`
Description Background color of the selection aggregates container
$kendo-grid-selection-aggregates-text		`$kendo-grid-text`
Description Text color of the selection aggregates container
$kendo-grid-selection-aggregates-border		`$kendo-grid-border`
Description Border color of the selection aggregates container
$kendo-grid-selection-aggregates-border-width		`$kendo-grid-border-width`
Description Border width of the selection aggregates container
$kendo-grid-selection-aggregates-spacing		`map.get( $kendo-spacing, 2 )`
Description Spacing between the selection aggregates items
$kendo-grid-selection-aggregates-line-height		`$kendo-grid-line-height`
Description Line height of the selection aggregates container
$kendo-grid-selection-aggregates-font-weight		`$kendo-font-weight-bold`
Description Font weight of the selection aggregates container
$kendo-grid-grouping-header-bg		`$kendo-toolbar-bg`
Description Background color of the grid grouping header.
$kendo-grid-grouping-header-text		`$kendo-toolbar-text`
Description Text color of the grid grouping header.
$kendo-grid-grouping-header-border		`$kendo-toolbar-border`
Description Border color of the grid grouping header.
$kendo-grid-grouping-row-border-width-y		`$kendo-grid-border-width`
Description Vertical border width of the grid grouping row.
$kendo-grid-grouping-row-bg		`$kendo-table-group-row-bg`
Description Background color of the grid grouping row.
$kendo-grid-grouping-row-text		`$kendo-table-group-row-text`
Description Text color of the grid grouping row.
$kendo-grid-grouping-row-border		`$kendo-table-group-row-border`
Description Border color of the grid grouping row.
$kendo-grid-filter-cell-padding-x		`$kendo-grid-padding-y`
Description Horizontal padding of the grid filter cell.
$kendo-grid-filter-cell-padding-y		`$kendo-grid-filter-cell-padding-x`
Description Vertical padding of the grid filter cell.
$kendo-grid-toolbar-padding-x		`$kendo-toolbar-md-padding-x`
Description Horizontal padding of the grid toolbar.
$kendo-grid-toolbar-padding-y		`$kendo-toolbar-md-padding-y`
Description Vertical padding of the grid toolbar.
$kendo-grid-toolbar-spacing		`$kendo-toolbar-md-spacing`
Description Spacing of the grid toolbar.
$kendo-grid-toolbar-border-width		`$kendo-grid-border-width`
Description Border width of the grid toolbar.
$kendo-grid-cell-border-width-y		`$kendo-grid-border-width`
Description Vertical border width of the grid cell.
$kendo-grid-cell-border-width-x		`0px`
Description Horizontal border width of the grid cell.
$kendo-grid-sort-index-font-size		`var( --kendo-font-size-sm, inherit )`
Description Font size of the grid sort index.
$kendo-grid-sort-index-height		`var( --kendo-icon-size, 1rem )`
Description Default height of the grid sort index.
$kendo-grid-sort-index-spacing-y		`calc( var( --kendo-icon-spacing, .5rem ) / 4 )`
Description Horizontal offset of the grid sort index.
$kendo-grid-sort-index-spacing-x		`map.get( $kendo-spacing, 0.5 )`
Description Vertical offset of the grid sort index.
$kendo-grid-sort-icon-spacing		`var( --kendo-icon-lg-spacing, .5rem )`
Description Spacing of the grid sort icon.
$kendo-grid-sort-indicator-text		`k-get-theme-color-var( neutral-130 )`
Description Text color of the grid sort indicator.
$kendo-grid-sort-indicator-order-text		`k-get-theme-color-var( primary-100 )`
Description Text color of the grid sort order indicator.
$kendo-grid-sorted-bg		`k-get-theme-color-var( neutral-10 )`
Description Background color of the sorted grid cells.
$kendo-grid-command-cell-padding-y		`calc( #{$kendo-table-cell-padding-y} - (#{$kendo-button-calc-size} - #{$kendo-line-height-em} ) / 2 )`
Description Horizontal padding of the grid command cells.
$kendo-grid-command-cell-button-spacing		`map.get( $kendo-spacing, 2 )`
Description Vertical padding of the grid command cells.
$kendo-grid-group-indicator-padding-x		`$kendo-button-md-padding-x`
Description Horizontal padding of the grid group indicator.
$kendo-grid-group-indicator-padding-y		`$kendo-button-md-padding-y`
Description Vertical padding of the grid group indicator.
$kendo-grid-group-indicator-border-width		`$kendo-button-border-width`
Description Border width of the grid group indicator.
$kendo-grid-group-indicator-border-radius		`var( --kendo-border-radius-md, #{$kendo-border-radius-md} )`
Description Border radius of the grid group indicator.
$kendo-grid-group-indicator-gap		`$kendo-table-cell-padding-y`
Description Spacing of the grid group indicator.
$kendo-grid-group-indicator-text		`var( --kendo-component-text, initial )`
Description Text color of the grid group indicator.
$kendo-grid-group-indicator-bg		`var( --kendo-component-bg, initial )`
Description Background color of the grid group indicator.
$kendo-grid-group-indicator-border		`k-get-theme-color-var( neutral-110 )`
Description Border color of the grid group indicator.
$kendo-grid-group-indicator-icon-text		`k-get-theme-color-var( neutral-130 )`
Description Text color of the grid group indicator icon.
$kendo-grid-group-footer-border-width-y		`0px`
Description Horizontal border width of the grid group footer.
$kendo-grid-group-footer-border-width-x		`0px`
Description Vertical border width of the grid group footer.
$kendo-grid-group-drop-hint-bg		`k-get-theme-color-var( primary-100 )`
Description Text color of the grid group drop clue.
$kendo-grid-sticky-cell-border-width		`$kendo-grid-border-width`
Description Border width of the grid sticky cell.
$kendo-grid-sticky-bg		`var( --kendo-component-bg, initial )`
Description Background color of the grid sticky cell.
$kendo-grid-sticky-text		`$kendo-grid-text`
Description Text color of the grid sticky cell.
$kendo-grid-sticky-border		`k-get-theme-color-var( neutral-90 )`
Description Border color of the grid sticky cell.
$kendo-grid-sticky-alt-bg		`$kendo-grid-sticky-bg`
Description Alt background color of the grid sticky cell.
$kendo-grid-sticky-hover-bg		`$kendo-grid-hover-bg`
Description Hover background color of the grid sticky cell.
$kendo-grid-sticky-header-bg		`$kendo-grid-header-bg`
Description Background color of the grid sticky header.
$kendo-grid-sticky-header-text		`$kendo-grid-header-text`
Description Text color of the grid sticky header.
$kendo-grid-sticky-header-border		`$kendo-grid-sticky-border`
Description Border color of the grid sticky header.
$kendo-grid-sticky-footer-bg		`$kendo-grid-header-bg`
Description Background color of the grid sticky footer.
$kendo-grid-sticky-footer-hover-bg		`$kendo-grid-hover-bg`
Description Hover background color of the grid sticky footer.
$kendo-grid-sticky-selected-bg		`$kendo-grid-selected-bg`
Description Selected background color of the grid sticky cells.
$kendo-grid-sticky-selected-alt-bg		`$kendo-grid-sticky-selected-bg`
Description Alt selected background color of the grid sticky cells.
$kendo-grid-sticky-selected-hover-bg		`$kendo-grid-selected-hover-bg`
Description Selected hover background color of the grid sticky cells.
$kendo-filter-menu-container-padding-y		`map.get( $kendo-spacing, 3 )`
Description Horizontal padding of the grid filter menu container.
$kendo-filter-menu-container-padding-x		`map.get( $kendo-spacing, 3 )`
Description Vertical padding of the grid filter menu container.
$kendo-grid-column-menu-width		`230px`
Description Default width of the grid column menu.
$kendo-grid-column-menu-max-width		`320px`
Description Max width of the grid column menu.
$kendo-grid-column-menu-spacing		`map.get( $kendo-spacing, 2 )`
Description Spacing of the grid column menu.
$kendo-grid-column-menu-shadow		`var( --kendo-box-shadow-depth-6, none )`
Description Focus shadow of the grid column menu.
$kendo-grid-column-menu-bg		`var( --kendo-component-bg, inherit )`
Description Background color of the grid column menu.
$kendo-grid-column-menu-text		`var( --kendo-component-text, inherit )`
Description Text color of the grid column menu.
$kendo-grid-column-menu-border		`var( --kendo-component-border, inherit )`
Description Border color of the grid column menu.
$kendo-grid-column-menu-multicheck-font-size		`$kendo-list-md-font-size`
Description Font size of the grid column menu checkbox container.
$kendo-grid-column-menu-multicheck-line-height		`$kendo-list-md-line-height`
Description Line height of the grid column menu checkbox container.
$kendo-grid-column-menu-items-wrap-padding-y		`map.get( $kendo-spacing, 2 )`
Description Vertical padding of the grid column menu items wrap.
$kendo-grid-column-menu-items-wrap-padding-x		`map.get( $kendo-spacing, 2 )`
Description Horizontal padding of the grid column menu items wrap.
$kendo-grid-column-menu-item-padding-y		`$kendo-list-md-item-padding-y`
Description Horizontal padding of the grid column menu item.
$kendo-grid-column-menu-item-padding-x		`$kendo-list-md-item-padding-x`
Description Vertical padding of the grid column menu item.
$kendo-grid-column-menu-item-gap		`$kendo-list-md-item-padding-x`
Description Spacing of the grid column menu item.
$kendo-grid-column-menu-item-icon-spacing		`var( --kendo-icon-spacing, .5rem )`
Description Icon spacing of the grid column menu item.
$kendo-grid-column-menu-item-bg		`$kendo-list-item-bg`
Description Background color of the grid column menu item.
$kendo-grid-column-menu-item-text		`$kendo-list-item-text`
Description Text color of the grid column menu item.
$kendo-grid-column-menu-item-hover-bg		`$kendo-list-item-hover-bg`
Description Hover background color of the grid column menu item.
$kendo-grid-column-menu-item-hover-text		`$kendo-list-item-hover-text`
Description Hover text color of the grid column menu item.
$kendo-grid-column-menu-item-selected-bg		`$kendo-list-item-selected-bg`
Description Selected background color of the grid column menu item.
$kendo-grid-column-menu-item-selected-text		`$kendo-list-item-selected-text`
Description Selected text color of the grid column menu item.
$kendo-grid-column-menu-item-focus-shadow		`$kendo-list-item-focus-shadow`
Description Focus shadow of the grid column menu item.
$kendo-grid-column-menu-item-icon-text		`$kendo-list-item-icon-text`
Description Text color of the grid column menu item icon.
$kendo-grid-column-menu-group-header-padding-y		`$kendo-grid-column-menu-item-padding-y`
Description Vertical padding of the grid column menu group header.
$kendo-grid-column-menu-group-header-padding-x		`$kendo-grid-column-menu-item-padding-x`
Description Horizontal padding of the grid column menu group header.
$kendo-grid-column-menu-group-header-border-width		`1px`
Description Border width of the grid column menu group header.
$kendo-grid-column-menu-group-header-border-style		`solid`
Description Border style of the grid column menu group header.
$kendo-grid-column-menu-group-header-font-size		`var( --kendo-font-size-sm, inherit )`
Description Font size of the grid column menu group header.
$kendo-grid-column-menu-group-header-font-weight		`var( --kendo-font-weight-bold, normal )`
Description Font weight of the grid column menu group header.
$kendo-grid-column-menu-group-header-line-height		`var( --kendo-line-height, normal )`
Description Line height of the grid column menu group header.
$kendo-grid-column-menu-group-header-text-transform		`uppercase`
Description Text transform of the grid column menu group header.
$kendo-grid-column-menu-group-header-bg		`var( --kendo-component-bg, inherit )`
Description Background color of the grid column menu group.
$kendo-grid-column-menu-group-header-text		`var( --kendo-component-text, inherit )`
Description Text color of the grid column menu group.
$kendo-grid-column-menu-group-header-border		`var( --kendo-component-border, inherit)`
Description Border color of the grid column menu group.
$kendo-grid-column-menu-tabbed-tabstrip-content-padding-x		`0`
Description Horizontal padding of the tabstrip content in the grid tabbed column menu.
$kendo-grid-column-menu-tabbed-tabstrip-content-padding-y		`map.get( $kendo-spacing, 3 )`
Description Vertical padding of the tabstrip content in the grid tabbed column menu.
$kendo-grid-column-menu-tabbed-bg		`var( --kendo-base-bg, inherit )`
Description Background color of the grid tabbed column menu.
$kendo-grid-drag-cell-width		`calc( var( --kendo-icon-size, 1rem ) * 2.25 )`
Description Default width of the grid drag cell.
$kendo-grid-hierarchy-col-width		`calc( var( --kendo-icon-size, 1rem ) * 2 )`
Description Default width of the grid hierarchy cell.
$kendo-grid-filterable-icon-spacing		`calc( #{$kendo-button-calc-size} + #{$kendo-grid-header-menu-spacing} )`
Description Spacing of the grid filterable icon.
$kendo-grid-row-resizer-hover-bg		`k-get-theme-color-var( neutral-90 )`
Description Background color of the grid row resize indicator
$kendo-grid-row-resizer-active-bg		`k-get-theme-color-var( primary-100 )`
Description Active background color of the grid row indicator
$kendo-grid-row-resizer-height		`map.get( $kendo-spacing, 0.5 )`
Description Height of the grid row resize indicator

Icon

Name	Type	Default value	Computed value
$kendo-icon-size		`1rem`
Description Font sizes of the icons.
$kendo-icon-spacing		`map.get( $kendo-spacing, 2 )`
Description Spacing around the icons.
$kendo-icon-padding		`map.get( $kendo-spacing, 1 )`
Description Padding of the action icons container.

Imageeditor

Name	Type	Default value	Computed value
$kendo-image-editor-bg		`var( --kendo-component-bg, inherit )`
Description Background color of the imageeditor.
$kendo-image-editor-text		`var( --kendo-component-text, inherit )`
Description Text color of the imageeditor.
$kendo-image-editor-border		`k-get-theme-color-var( neutral-30 )`
Description Border color of the imageeditor.
$kendo-image-editor-margin-y		`0`
Description Vertical margin of the imageeditor.
$kendo-image-editor-margin-x		`0`
Description Horizontal margin of the imageeditor.
$kendo-image-editor-padding-y		`0`
Description Vertical padding of the imageeditor.
$kendo-image-editor-padding-x		`0`
Description Horizontal padding of the imageeditor.
$kendo-image-editor-border-width		`1px`
Description Border width of the imageeditor.
$kendo-image-editor-font-size		`var( --kendo-font-size, inherit )`
Description Font size of the imageeditor.
$kendo-image-editor-line-height		`var( --kendo-line-height, inherit )`
Description Line height of the imageeditor.
$kendo-image-editor-font-family		`var( --kendo-font-family, inherit )`
Description Font family of the imageeditor.
$kendo-image-editor-content-bg		`k-get-theme-color-var( neutral-50 )`
Description Imageeditor content background color.
$kendo-image-editor-content-text		`inherit`
Description Imageeditor content text color.
$kendo-image-editor-content-border		`inherit`
Description Imageeditor content border color.
$kendo-image-editor-content-border-width		`0`
Description Imageeditor content border width.
$kendo-image-editor-action-pane-bg		`var( --kendo-component-bg, inherit )`
Description Imageeditor action pane background color.
$kendo-image-editor-action-pane-text		`inherit`
Description Imageeditor action pane text color.
$kendo-image-editor-action-pane-border		`inherit`
Description Imageeditor action pane border.
$kendo-image-editor-action-pane-padding-y		`map.get( $kendo-spacing, 3 )`
Description Imageeditor action pane vertical padding.
$kendo-image-editor-action-pane-padding-x		`map.get( $kendo-spacing, 3 )`
Description Imageeditor action pane horizontal padding.
$kendo-image-editor-action-pane-width		`if( $kendo-image-editor-content-border-width == 0, 240px, calc( 240px + #{$kendo-image-editor-content-border-width}) )`
Description Imageeditor action pane width.
$kendo-image-editor-crop-bg		`inherit`
Description Crop background color of the imageeditor.
$kendo-image-editor-crop-text		`inherit`
Description Crop text color of the imageeditor.
$kendo-image-editor-crop-border		`$kendo-color-white`
Description Crop border color of the imageeditor.
$kendo-image-editor-crop-overlay-bg		`rgba( $kendo-color-black, .3 )`
Description Crop overlay background color of the imageeditor.
$kendo-image-editor-crop-border-width		`1px`
Description Crop border width of the imageeditor.
$kendo-image-editor-crop-border-style		`dashed`
Description Crop border style of the imageeditor.
$kendo-image-editor-resize-handle-margin-x		`1px`
Description Imageeditor resize handle horizontal margin.
$kendo-image-editor-resize-handle-margin-y		`1px`
Description Imageeditor resize handle vertical margin.
$kendo-image-editor-resize-handle-border-width		`0 2px 2px 0`
Description Imageeditor resize handle border width.
$kendo-image-editor-resize-handle-size		`map.get( $kendo-spacing, 4 )`
Description Imageeditor resize handle size.
$kendo-image-editor-resize-top-offset		`math.div( $kendo-image-editor-resize-handle-size, 2 )`
Description Imageeditor resize handle top offset.
$kendo-image-editor-resize-left-offset		`math.div( $kendo-image-editor-resize-handle-size, 2 )`
Description Imageeditor resize handle left offset.

Input

Name	Type	Default value	Computed value
$kendo-input-width		`100%`
Description The width of the Input components.
$kendo-input-border-width		`1px`
Description The width of the border around the Input components.
$kendo-input-border-height		`( $kendo-input-border-width * 2 )`
Description The height of the border around the Input components.
$kendo-input-sm-padding-x		`map.get( $kendo-spacing, 2 )`
Description The horizontal padding of the small Input components.
$kendo-input-md-padding-x		`map.get( $kendo-spacing, 2 )`
Description The horizontal padding of the medium Input components.
$kendo-input-lg-padding-x		`map.get( $kendo-spacing, 2 )`
Description The horizontal padding of the large Input components.
$kendo-input-sm-padding-y		`map.get( $kendo-spacing, 1 )`
Description The vertical padding of the small Input components.
$kendo-input-md-padding-y		`map.get( $kendo-spacing, 1.5 )`
Description The vertical padding of the medium Input components.
$kendo-input-lg-padding-y		`map.get( $kendo-spacing, 2 )`
Description The vertical padding of the large Input components.
$kendo-input-sm-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the small Input components.
$kendo-input-md-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the medium Input components.
$kendo-input-lg-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the large Input components.
$kendo-input-sm-line-height		`var( --kendo-line-height, normal )`
Description The line height of the small Input components.
$kendo-input-md-line-height		`var( --kendo-line-height, normal )`
Description The line height of the medium Input components.
$kendo-input-lg-line-height		`var( --kendo-line-height, normal )`
Description The line height of the large Input components.
$kendo-input-sm-button-width		`calc( #{$kendo-button-sm-line-height} * 1em + #{$kendo-button-sm-padding-y} * 2 )`
Description The width of the small Input button.
$kendo-input-md-button-width		`calc( #{$kendo-button-md-line-height} * 1em + #{$kendo-button-md-padding-y} * 2 )`
Description The width of the medium Input button.
$kendo-input-lg-button-width		`calc( #{$kendo-button-lg-line-height} * 1em + #{$kendo-button-lg-padding-y} * 2 )`
Description The width of the large Input button.
$kendo-input-button-border-width		`1px`
Description The border width of the Input button.
$kendo-input-sm-spinner-width		`$kendo-input-sm-button-width`
Description The width of the small Input spinner button.
$kendo-input-md-spinner-width		`$kendo-input-md-button-width`
Description The width of the medium Input spinner button.
$kendo-input-lg-spinner-width		`$kendo-input-lg-button-width`
Description The width of the large Input spinner button.
$kendo-input-spinner-icon-offset		`null`
Description The icon offset of the Input spinner button.
$kendo-input-solid-text		`k-get-theme-color-var( neutral-160 )`
Description The text color of the solid Input components.
$kendo-input-solid-bg		`$kendo-color-white`
Description The background color of the solid Input components.
$kendo-input-solid-border		`k-get-theme-color-var( neutral-130 )`
Description The border color of the solid Input components.
$kendo-input-solid-hover-text		`k-get-theme-color-var( neutral-190 )`
Description The text color of the hovered solid Input components.
$kendo-input-solid-hover-bg		`$kendo-input-solid-bg`
Description The background color of the hovered solid Input components.
$kendo-input-solid-hover-border		`k-get-theme-color-var( neutral-160 )`
Description The border color of the hovered solid Input components.
$kendo-input-solid-focus-text		`$kendo-input-solid-text`
Description The text color of the focused solid Input components.
$kendo-input-solid-focus-bg		`$kendo-input-solid-bg`
Description The background color of the focused solid Input components.
$kendo-input-solid-focus-border		`k-get-theme-color-var( primary-100 )`
Description The border color of the focused solid Input components.
$kendo-input-solid-hover-focus-text		`$kendo-input-solid-focus-text`
Description The text color of the hovered and focused solid Input components.
$kendo-input-solid-hover-focus-bg		`$kendo-input-solid-focus-bg`
Description The background color of the hovered and focused solid Input components.
$kendo-input-solid-hover-focus-border		`$kendo-input-solid-focus-border`
Description The border color of the hovered and focused solid Input components.
$kendo-input-solid-disabled-text		`$kendo-disabled-text`
Description The text color of the disabled solid Input components.
$kendo-input-solid-disabled-bg		`$kendo-disabled-bg`
Description The background color of the disabled solid Input components.
$kendo-input-solid-disabled-border		`$kendo-disabled-border`
Description The border color of the disabled solid Input components.
$kendo-input-outline-text		`k-get-theme-color-var( neutral-160 )`
Description The text color of the outline Input components.
$kendo-input-outline-bg		`$kendo-color-white`
Description The background color of the outline Input components.
$kendo-input-outline-border		`k-get-theme-color-var( neutral-130 )`
Description The border color of the outline Input components.
$kendo-input-outline-hover-text		`k-get-theme-color-var( neutral-190 )`
Description The text color of the hovered outline Input components.
$kendo-input-outline-hover-bg		`$kendo-color-white`
Description The background color of the hovered outline Input components.
$kendo-input-outline-hover-border		`k-get-theme-color-var( neutral-160 )`
Description The border color of the hovered outline Input components.
$kendo-input-outline-focus-text		`k-get-theme-color-var( neutral-160 )`
Description The text color of the focused outline Input components.
$kendo-input-outline-focus-bg		`$kendo-color-white`
Description The background color of the focused outline Input components.
$kendo-input-outline-focus-border		`k-get-theme-color-var( primary-100 )`
Description The border color of the focused outline Input components.
$kendo-input-outline-hover-focus-text		`$kendo-input-outline-focus-text`
Description The text color of the hovered and focused outline Input components.
$kendo-input-outline-hover-focus-bg		`$kendo-input-outline-focus-bg`
Description The background color of the hovered and focused outline Input components.
$kendo-input-outline-hover-focus-border		`$kendo-input-outline-focus-border`
Description The border color of the hovered and focused outline Input components.
$kendo-input-outline-disabled-text		`$kendo-disabled-text`
Description The text color of the disabled outline Input components.
$kendo-input-outline-disabled-bg		`none`
Description The background color of the disabled outline Input components.
$kendo-input-outline-disabled-border		`$kendo-disabled-text`
Description The border color of the disabled outline Input components.
$kendo-input-flat-text		`k-get-theme-color-var( neutral-160 )`
Description The text color of the flat Input components.
$kendo-input-flat-bg		`$kendo-color-white`
Description The background color of the flat Input components.
$kendo-input-flat-border		`k-get-theme-color-var( neutral-130 )`
Description The border color of the flat Input components.
$kendo-input-flat-hover-text		`k-get-theme-color-var( neutral-190 )`
Description The text color of the hovered flat Input components.
$kendo-input-flat-hover-bg		`$kendo-color-white`
Description The background color of the hovered flat Input components.
$kendo-input-flat-hover-border		`k-get-theme-color-var( neutral-160 )`
Description The border color of the hovered flat Input components.
$kendo-input-flat-focus-text		`k-get-theme-color-var( neutral-160 )`
Description The text color of the focused flat Input components.
$kendo-input-flat-focus-bg		`$kendo-color-white`
Description The background color of the focused flat Input components.
$kendo-input-flat-focus-border		`k-get-theme-color-var( primary-100 )`
Description The border color of the focused flat Input components.
$kendo-input-flat-hover-focus-text		`$kendo-input-flat-focus-text`
Description The text color of the hovered and focused flat Input components.
$kendo-input-flat-hover-focus-bg		`$kendo-input-flat-focus-bg`
Description The background color of the hovered and focused flat Input components.
$kendo-input-flat-hover-focus-border		`$kendo-input-flat-focus-border`
Description The border color of the hovered and focused flat Input components.
$kendo-input-flat-disabled-text		`$kendo-disabled-text`
Description The text color of the disabled flat Input components.
$kendo-input-flat-disabled-bg		`none`
Description The background color of the disabled flat Input components.
$kendo-input-flat-disabled-border		`$kendo-disabled-text`
Description The border color of the disabled flat Input components.
$kendo-picker-solid-text		`k-get-theme-color-var( neutral-160 )`
Description The text color of the solid Picker components.
$kendo-picker-solid-bg		`$kendo-color-white`
Description The background color of the solid Picker components.
$kendo-picker-solid-border		`k-get-theme-color-var( neutral-130 )!default`
Description The border color of the solid Picker components.
$kendo-picker-solid-hover-text		`k-get-theme-color-var( neutral-190 )`
Description The text color of the hovered solid Picker components.
$kendo-picker-solid-hover-bg		`$kendo-color-white`
Description The background color of hovered the solid Picker components.
$kendo-picker-solid-hover-border		`k-get-theme-color-var( neutral-160 )`
Description The border color of the hovered solid Picker components.
$kendo-picker-solid-focus-text		`k-get-theme-color-var( neutral-160 )`
Description The text color of the focused solid Picker components.
$kendo-picker-solid-focus-bg		`$kendo-color-white`
Description The background color of the focused solid Picker components.
$kendo-picker-solid-focus-border		`k-get-theme-color-var( primary-100 )`
Description The border color of the focused solid Picker components.
$kendo-picker-solid-hover-focus-text		`$kendo-picker-solid-focus-text`
Description The text color of the hovered and focused solid Picker components.
$kendo-picker-solid-hover-focus-bg		`$kendo-picker-solid-focus-bg`
Description The background color of the hovered and focused solid Picker components.
$kendo-picker-solid-hover-focus-border		`$kendo-picker-solid-focus-border`
Description The border color of the hovered and focused solid Picker components.
$kendo-picker-solid-disabled-text		`$kendo-disabled-text`
Description The text color of the disabled solid Picker components.
$kendo-picker-solid-disabled-bg		`k-get-theme-color-var( neutral-30 )`
Description The background color of the disabled solid Picker components.
$kendo-picker-solid-disabled-border		`$kendo-disabled-border`
Description The border color of the disabled solid Picker components.
$kendo-picker-outline-text		`k-get-theme-color-var( neutral-160 )`
Description The text color of the outline Picker components.
$kendo-picker-outline-bg		`none`
Description The background color of the outline Picker components.
$kendo-picker-outline-border		`k-get-theme-color-var( neutral-160 )`
Description The border color of the outline Picker components.
$kendo-picker-outline-hover-text		`$kendo-color-white`
Description The text color of the hovered outline Picker components.
$kendo-picker-outline-hover-bg		`k-get-theme-color-var( neutral-190 )`
Description The background color of the hovered outline Picker components.
$kendo-picker-outline-hover-border		`$kendo-picker-outline-hover-bg!default`
Description The border color of the hovered outline Picker components.
$kendo-picker-outline-focus-text		`k-get-theme-color-var( neutral-160 )`
Description The text color of the focused outline Picker components.
$kendo-picker-outline-focus-bg		`$kendo-color-white!default`
Description The background color of the focused outline Picker components.
$kendo-picker-outline-focus-border		`k-get-theme-color-var( primary-100 )`
Description The border color of the focused outline Picker components.
$kendo-picker-outline-hover-focus-text		`$kendo-color-white`
Description The text color of the hovered and focused outline Picker components.
$kendo-picker-outline-hover-focus-bg		`k-get-theme-color-var( neutral-190 )`
Description The background color of the hovered and focused outline Picker components.
$kendo-picker-outline-hover-focus-border		`k-get-theme-color-var( primary-100 )`
Description The border color of the hovered and focused outline Picker components.
$kendo-picker-outline-disabled-text		`$kendo-disabled-text`
Description The text color of the disabled outline Picker components.
$kendo-picker-outline-disabled-bg		`none`
Description The background color of the disabled outline Picker components.
$kendo-picker-outline-disabled-border		`$kendo-picker-outline-disabled-text!default`
Description The border color of the disabled outline Picker components.
$kendo-picker-flat-text		`k-get-theme-color-var( neutral-160 )`
Description The text color of the flat Picker components.
$kendo-picker-flat-bg		`none`
Description The background color of the flat Picker components.
$kendo-picker-flat-border		`k-get-theme-color-var( neutral-130 )`
Description The border color of the flat Picker components.
$kendo-picker-flat-hover-text		`k-get-theme-color-var( neutral-190 )`
Description The text color of the hovered flat Picker components.
$kendo-picker-flat-hover-bg		`k-get-theme-color-var( neutral-20 )`
Description The background color of the hovered flat Picker components.
$kendo-picker-flat-hover-border		`k-get-theme-color-var( neutral-160 )`
Description The border color of the hovered flat Picker components.
$kendo-picker-flat-focus-text		`k-get-theme-color-var( neutral-160 )`
Description The text color of the focused flat Picker components.
$kendo-picker-flat-focus-bg		`$kendo-color-white`
Description The background color of the focused flat Picker components.
$kendo-picker-flat-focus-border		`k-get-theme-color-var( primary-100 )`
Description The border color of the focused flat Picker components.
$kendo-picker-flat-hover-focus-text		`$kendo-picker-flat-hover-text`
Description The text color of the hovered and focused flat Picker components.
$kendo-picker-flat-hover-focus-bg		`$kendo-picker-flat-hover-bg`
Description The background color of the hovered and focused flat Picker components.
$kendo-picker-flat-hover-focus-border		`$kendo-picker-flat-border`
Description The border color of the hovered and focused flat Picker components.
$kendo-picker-flat-disabled-text		`$kendo-disabled-text`
Description The text color of the disabled flat Picker components.
$kendo-picker-flat-disabled-bg		`none`
Description The background color of the disabled flat Picker components.
$kendo-picker-flat-disabled-border		`$kendo-picker-flat-disabled-text`
Description The border color of the disabled flat Picker components.
$kendo-input-sizes		( 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, icon-size: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-input-md-padding-y * 2} ), button-padding-x: $kendo-input-sm-padding-y, button-padding-y: $kendo-input-sm-padding-y, button-width: $kendo-input-sm-button-width ), 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, icon-size: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-input-sm-padding-y * 2} ), button-padding-x: $kendo-input-md-padding-y, button-padding-y: $kendo-input-md-padding-y, button-width: $kendo-input-md-button-width ), 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, icon-size: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-input-lg-padding-y * 2} ), button-padding-x: $kendo-input-lg-padding-y, button-padding-y: $kendo-input-lg-padding-y, button-width: $kendo-input-lg-button-width ) )
Description The sizes map for the Input components.
$kendo-input-theme-colors		( input: ( solid: ( text: $kendo-input-solid-text, bg: $kendo-input-solid-bg, border: $kendo-input-solid-border, hover-text: $kendo-input-solid-hover-text, hover-bg: $kendo-input-solid-hover-bg, hover-border: $kendo-input-solid-hover-border, focus-text: $kendo-input-solid-focus-text, focus-bg: $kendo-input-solid-focus-bg, focus-border: $kendo-input-solid-focus-border, hover-focus-text: $kendo-input-solid-hover-focus-text, hover-focus-bg: $kendo-input-solid-hover-focus-bg, hover-focus-border: $kendo-input-solid-hover-focus-border, disabled-text: $kendo-input-solid-disabled-text, disabled-bg: $kendo-input-solid-disabled-bg, disabled-border: $kendo-input-solid-disabled-border ), outline: ( text: $kendo-input-outline-text, bg: $kendo-input-outline-bg, border: $kendo-input-outline-border, hover-text: $kendo-input-outline-hover-text, hover-bg: $kendo-input-outline-hover-bg, hover-border: $kendo-input-outline-hover-border, focus-text: $kendo-input-outline-focus-text, focus-bg: $kendo-input-outline-focus-bg, focus-border: $kendo-input-outline-focus-border, hover-focus-text: $kendo-input-outline-hover-focus-text, hover-focus-bg: $kendo-input-outline-hover-focus-bg, hover-focus-border: $kendo-input-outline-hover-focus-border, disabled-text: $kendo-input-outline-disabled-text, disabled-bg: $kendo-input-outline-disabled-bg, disabled-border: $kendo-input-outline-disabled-border ), flat: ( text: $kendo-input-flat-text, bg: $kendo-input-flat-bg, border: $kendo-input-flat-border, hover-text: $kendo-input-flat-hover-text, hover-bg: $kendo-input-flat-hover-bg, hover-border: $kendo-input-flat-hover-border, focus-text: $kendo-input-flat-focus-text, focus-bg: $kendo-input-flat-focus-bg, focus-border: $kendo-input-flat-focus-border, hover-focus-tex: $kendo-input-flat-hover-focus-text, hover-focus-bg: $kendo-input-flat-hover-focus-bg, hover-focus-border: $kendo-input-flat-hover-focus-border, disabled-text: $kendo-input-flat-disabled-text, disabled-bg: $kendo-input-flat-disabled-bg, disabled-border: $kendo-input-flat-disabled-border ) ), picker: ( solid: ( text: $kendo-picker-solid-text, bg: $kendo-picker-solid-bg, border: $kendo-picker-solid-border, hover-text: $kendo-picker-solid-hover-text, hover-bg: $kendo-picker-solid-hover-bg, hover-border: $kendo-picker-solid-hover-border, focus-text: $kendo-picker-solid-focus-text, focus-bg: $kendo-picker-solid-focus-bg, focus-border: $kendo-picker-solid-focus-border, hover-focus-tex: $kendo-picker-solid-hover-focus-text, hover-focus-bg: $kendo-picker-solid-hover-focus-bg, hover-focus-border: $kendo-picker-solid-hover-focus-border, disabled-text: $kendo-picker-solid-disabled-text, disabled-bg: $kendo-picker-solid-disabled-bg, disabled-border: $kendo-picker-solid-disabled-border ), outline: ( text: $kendo-picker-outline-text, bg: $kendo-picker-outline-bg, border: $kendo-picker-outline-border, hover-text: $kendo-picker-outline-hover-text, hover-bg: $kendo-picker-outline-hover-bg, hover-border: $kendo-picker-outline-hover-border, focus-text: $kendo-picker-outline-focus-text, focus-bg: $kendo-picker-outline-focus-bg, focus-border: $kendo-picker-outline-focus-border, hover-focus-text: $kendo-picker-outline-hover-focus-text, hover-focus-bg: $kendo-picker-outline-hover-focus-bg, hover-focus-border: $kendo-picker-outline-hover-focus-border, disabled-text: $kendo-picker-outline-disabled-text, disabled-bg: $kendo-picker-outline-disabled-bg, disabled-border: $kendo-picker-outline-disabled-border ), flat: ( text: $kendo-picker-flat-text, bg: $kendo-picker-flat-bg, border: $kendo-picker-flat-border, hover-text: $kendo-picker-flat-hover-text, hover-bg: $kendo-picker-flat-hover-bg, hover-border: $kendo-picker-flat-hover-border, focus-text: $kendo-picker-flat-focus-text, focus-bg: $kendo-picker-flat-focus-bg, focus-border: $kendo-picker-flat-focus-border, hover-focus-tex: $kendo-picker-flat-hover-focus-text, hover-focus-bg: $kendo-picker-flat-hover-focus-bg, hover-focus-border: $kendo-picker-flat-hover-focus-border, disabled-text: $kendo-picker-flat-disabled-text, disabled-bg: $kendo-picker-flat-disabled-bg, disabled-border: $kendo-picker-flat-disabled-border ) ) `)`
Description Colors map of the input.
$kendo-input-prefix-bg		`k-get-theme-color-var( neutral-20 )`
Description The background color of the Input prefix.
$kendo-input-suffix-bg		`k-get-theme-color-var( neutral-20 )`
Description The background color of the Input suffix.
$kendo-input-invalid-border		`var( --kendo-invalid-border, #{$kendo-invalid-border} )`
Description The border color of the invalid Input components.
$kendo-input-invalid-text		`var( --kendo-invalid-text, #{$kendo-invalid-text} )`
Description The text color of the invalid Input components.
$kendo-input-placeholder-text		`k-get-theme-color-var( neutral-130 )`
Description The text color of the Input placeholder.
$kendo-input-placeholder-opacity		`1`
Description The opacity of the Input placeholder.
$kendo-input-clear-value-text		`k-get-theme-color-var( neutral-130 )`
Description The color of the Input clear value icon.
$kendo-input-clear-value-opacity		`.6`
Description The opacity of the Input clear value icon.
$kendo-input-clear-value-hover-text		`inherit`
Description The color of the hovered Input clear value icon.
$kendo-input-clear-value-hover-opacity		`1`
Description The opacity of the hovered Input clear value icon.

List

Name	Type	Default value	Computed value
$kendo-list-font-family		`var( --kendo-font-family, inherit)`
Description The font family of the List components.
$kendo-list-sm-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the List component.
$kendo-list-sm-line-height		`var( --kendo-line-height, normal )`
Description The line height of the List component.
$kendo-list-sm-header-padding-x		`map.get( $kendo-spacing, 2 )`
Description The horizontal padding of the List header.
$kendo-list-sm-header-padding-y		`map.get( $kendo-spacing, 1.5 )`
Description The vertical padding of the List header.
$kendo-list-header-border-width		`0`
Description The border width of the List header.
$kendo-list-sm-header-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the List header.
$kendo-list-sm-header-line-height		`var( --kendo-line-height, normal )`
Description The line height of the List header.
$kendo-list-header-font-weight		`var( --kendo-font-weight-bold, normal )`
Description The font weight of the List header.
$kendo-list-sm-item-padding-x		`map.get( $kendo-spacing, 2 )`
Description The horizontal padding of the List items.
$kendo-list-sm-item-padding-y		`map.get( $kendo-spacing, 1.5 )`
Description The vertical padding of the List items.
$kendo-list-sm-item-font-size		`var( --kendo-font-size, inherit )`
Description The font size of the List items.
$kendo-list-sm-item-line-height		`var( --kendo-line-height, normal )`
Description The line height of the List items.
$kendo-list-item-group-label-sm-font-size		`var( --kendo-font-size-xs, inherit )`
Description The font size of the List item group label.
$kendo-list-sm-group-item-padding-x		`map.get( $kendo-spacing, 2 )`
Description The horizontal padding of the List group items.
$kendo-list-sm-group-item-padding-y		`map.get( $kendo-spacing, 1.5 )`

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

Support and Learning

Resources

Productivity and Design Tools

Customization