Styling & Themes / Fluent Theme / Customization /

Customization

Variables

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

Common

Name	Type	Default value	Computed value
$kendo-padding-x		`k-spacing(2)`
Description Horizontal padding.
$kendo-padding-y		`k-spacing(1)`
Description Vertical padding.
$kendo-padding-sm-x		`k-spacing(1)`
Description Small horizontal padding.
$kendo-padding-sm-y		`k-spacing(0.5)`
Description Small vertical padding.
$kendo-padding-md-x		`k-spacing(2)`
Description Medium horizontal padding.
$kendo-padding-md-y		`k-spacing(1)`
Description Medium vertical padding.
$kendo-padding-lg-x		`k-spacing(3)`
Description Large horizontal padding.
$kendo-padding-lg-y		`k-spacing(1.5)`
Description Large vertical padding.
$kendo-adaptive-actionsheet-font-size	Number	`$kendo-font-size-lg`	`1rem`
Description Font size of the adaptive action sheet.
$kendo-card-brand-colors	List	`( primary, error, warning, success, info )`	`primary, error, warning, success, info`
Description Theme variations for the card.
$kendo-card-theme-colors	Map	`()`	(primary: (bg: var(--kendo-color-primary-subtle, #deecf9), text: var(--kendo-color-primary-on-subtle, #001c30), border: var(--kendo-color-primary-subtle, #deecf9)), error: (bg: var(--kendo-color-error-subtle, #fde7e9), text: var(--kendo-color-error-on-subtle, #420f12), border: var(--kendo-color-error-subtle, #fde7e9)), warning: (bg: var(--kendo-color-warning-subtle, #fff4ce), text: var(--kendo-color-warning-on-subtle, #323130), border: var(--kendo-color-warning-subtle, #fff4ce)), success: (bg: var(--kendo-color-success-subtle, #dff6dd), text: var(--kendo-color-success-on-subtle, #063206), border: var(--kendo-color-success-subtle, #dff6dd)), info: (bg: var(--kendo-color-info-subtle, #cee5ff), text: var(--kendo-color-info-on-subtle, #032040), border: var(--kendo-color-info-subtle, #cee5ff)))
Description Theme colors map for the card variations.
$kendo-chip-theme-colors	Map	`()`	(solid: (base: (bg: var(--kendo-color-base-subtle, #edebe9), text: var(--kendo-color-base-on-subtle, #323130), border: var(--kendo-color-base-subtle, #edebe9), hover-bg: var(--kendo-color-base-subtle-hover, #e1dfdd), hover-text: var(--kendo-color-base-on-subtle, #323130), hover-border: var(--kendo-color-base-subtle-hover, #e1dfdd), focus-bg: var(--kendo-color-base-subtle, #edebe9), focus-text: var(--kendo-color-base-on-subtle, #323130), focus-border: var(--kendo-color-base-on-subtle, #323130), focus-hover-bg: var(--kendo-color-base-subtle, #edebe9), focus-hover-text: var(--kendo-color-base-on-subtle, #323130), focus-hover-border: var(--kendo-color-base-on-subtle, #323130), selected-bg: var(--kendo-color-primary, #0078d4), selected-text: var(--kendo-color-on-primary, #ffffff), selected-border: var(--kendo-color-primary, #0078d4), selected-hover-bg: var(--kendo-color-primary, #0078d4), selected-hover-text: var(--kendo-color-on-primary, #ffffff), selected-hover-border: var(--kendo-color-primary, #0078d4), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), error: (bg: var(--kendo-color-error-subtle, #fde7e9), text: var(--kendo-color-error-on-subtle, #420f12), border: var(--kendo-color-error-subtle, #fde7e9), hover-bg: var(--kendo-color-error-subtle-hover, #f3d2d4), hover-text: var(--kendo-color-error-on-subtle, #420f12), hover-border: var(--kendo-color-error-subtle-hover, #f3d2d4), focus-bg: var(--kendo-color-error-subtle, #fde7e9), focus-text: var(--kendo-color-error-on-subtle, #420f12), focus-border: var(--kendo-color-error-on-subtle, #420f12), focus-hover-bg: var(--kendo-color-error-subtle, #fde7e9), focus-hover-text: var(--kendo-color-error-on-subtle, #420f12), focus-hover-border: var(--kendo-color-error-on-subtle, #420f12), selected-bg: var(--kendo-color-error-subtle-active, #e9bcbf), selected-text: var(--kendo-color-error-on-subtle, #420f12), selected-border: var(--kendo-color-error-subtle-active, #e9bcbf), selected-hover-bg: var(--kendo-color-error-subtle-hover, #f3d2d4), selected-hover-text: var(--kendo-color-error-on-subtle, #420f12), selected-hover-border: var(--kendo-color-error-subtle-hover, #f3d2d4), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), success: (bg: var(--kendo-color-success-subtle, #dff6dd), text: var(--kendo-color-success-on-subtle, #063206), border: var(--kendo-color-success-subtle, #dff6dd), hover-bg: var(--kendo-color-success-subtle-hover, #c8e8c6), hover-text: var(--kendo-color-success-on-subtle, #063206), hover-border: var(--kendo-color-success-subtle-hover, #c8e8c6), focus-bg: var(--kendo-color-success-subtle, #dff6dd), focus-text: var(--kendo-color-success-on-subtle, #063206), focus-border: var(--kendo-color-success-on-subtle, #063206), focus-hover-bg: var(--kendo-color-success-subtle, #dff6dd), focus-hover-text: var(--kendo-color-success-on-subtle, #063206), focus-hover-border: var(--kendo-color-success-on-subtle, #063206), selected-bg: var(--kendo-color-success-subtle-active, #b1dbaf), selected-text: var(--kendo-color-success-on-subtle, #063206), selected-border: var(--kendo-color-success-subtle-active, #b1dbaf), selected-hover-bg: var(--kendo-color-success-subtle-hover, #c8e8c6), selected-hover-text: var(--kendo-color-success-on-subtle, #063206), selected-hover-border: var(--kendo-color-success-subtle-hover, #c8e8c6), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), info: (bg: var(--kendo-color-info-subtle, #cee5ff), text: var(--kendo-color-info-on-subtle, #032040), border: var(--kendo-color-info-subtle, #cee5ff), hover-bg: var(--kendo-color-info-subtle-hover, #add4ff), hover-text: var(--kendo-color-info-on-subtle, #032040), hover-border: var(--kendo-color-info-subtle-hover, #add4ff), focus-bg: var(--kendo-color-info-subtle, #cee5ff), focus-text: var(--kendo-color-info-on-subtle, #032040), focus-border: var(--kendo-color-info-on-subtle, #032040), focus-hover-bg: var(--kendo-color-info-subtle, #cee5ff), focus-hover-text: var(--kendo-color-info-on-subtle, #032040), focus-hover-border: var(--kendo-color-info-on-subtle, #032040), selected-bg: var(--kendo-color-info-subtle-active, #8dc3ff), selected-text: var(--kendo-color-info-on-subtle, #032040), selected-border: var(--kendo-color-info-subtle-active, #8dc3ff), selected-hover-bg: var(--kendo-color-info-subtle-hover, #add4ff), selected-hover-text: var(--kendo-color-info-on-subtle, #032040), selected-hover-border: var(--kendo-color-info-subtle-hover, #add4ff), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), warning: (bg: var(--kendo-color-warning-subtle, #fff4ce), text: var(--kendo-color-warning-on-subtle, #323130), border: var(--kendo-color-warning-subtle, #fff4ce), hover-bg: var(--kendo-color-warning-subtle-hover, #ffedad), hover-text: var(--kendo-color-warning-on-subtle, #323130), hover-border: var(--kendo-color-warning-subtle-hover, #ffedad), focus-bg: var(--kendo-color-warning-subtle, #fff4ce), focus-text: var(--kendo-color-warning-on-subtle, #323130), focus-border: var(--kendo-color-warning-on-subtle, #323130), focus-hover-bg: var(--kendo-color-warning-subtle, #fff4ce), focus-hover-text: var(--kendo-color-warning-on-subtle, #323130), focus-hover-border: var(--kendo-color-warning-on-subtle, #323130), selected-bg: var(--kendo-color-warning-subtle-active, #ffe58d), selected-text: var(--kendo-color-warning-on-subtle, #323130), selected-border: var(--kendo-color-warning-subtle-active, #ffe58d), selected-hover-bg: var(--kendo-color-warning-subtle-hover, #ffedad), selected-hover-text: var(--kendo-color-warning-on-subtle, #323130), selected-hover-border: var(--kendo-color-warning-subtle-hover, #ffedad), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent)), outline: (base: (bg: transparent, text: var(--kendo-color-base-on-surface, #323130), border: currentColor, hover-bg: var(--kendo-color-base-on-surface, #323130), hover-text: var(--kendo-color-app-surface, #ffffff), hover-border: var(--kendo-color-base-on-surface, #323130), focus-bg: transparent, focus-text: var(--kendo-color-base-on-surface, #323130), focus-border: currentColor, focus-outline: inherit, focus-hover-bg: var(--kendo-color-base-on-surface, #323130), focus-hover-text: var(--kendo-color-app-surface, #ffffff), focus-hover-border: var(--kendo-color-base-on-surface, #323130), focus-hover-outline: inherit, selected-bg: var(--kendo-color-base-on-surface, #323130), selected-text: var(--kendo-color-app-surface, #ffffff), selected-border: var(--kendo-color-base-on-surface, #323130), selected-hover-bg: var(--kendo-color-base-subtle, #edebe9), selected-hover-text: var(--kendo-color-base-on-surface, #323130), selected-hover-border: var(--kendo-color-base-on-subtle, #323130), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)), error: (bg: transparent, text: var(--kendo-color-error-on-surface, #a4262c), border: currentColor, hover-bg: var(--kendo-color-error-on-surface, #a4262c), hover-text: var(--kendo-color-app-surface, #ffffff), hover-border: var(--kendo-color-error-on-surface, #a4262c), focus-bg: transparent, focus-text: var(--kendo-color-error-on-surface, #a4262c), focus-border: var(--kendo-color-error-on-surface, #a4262c), focus-outline: inherit, focus-hover-bg: var(--kendo-color-error-on-surface, #a4262c), focus-hover-text: var(--kendo-color-app-surface, #ffffff), focus-hover-border: var(--kendo-color-error-on-surface, #a4262c), focus-hover-outline: inherit, selected-bg: var(--kendo-color-error-on-surface, #a4262c), selected-text: var(--kendo-color-app-surface, #ffffff), selected-border: var(--kendo-color-error-on-surface, #a4262c), selected-hover-bg: var(--kendo-color-error-on-surface, #a4262c), selected-hover-text: var(--kendo-color-app-surface, #ffffff), selected-hover-border: var(--kendo-color-error-on-surface, #a4262c), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)), success: (bg: transparent, text: var(--kendo-color-success-on-surface, #107c10), border: currentColor, hover-bg: var(--kendo-color-success-on-surface, #107c10), hover-text: var(--kendo-color-app-surface, #ffffff), hover-border: var(--kendo-color-success-on-surface, #107c10), focus-bg: transparent, focus-text: var(--kendo-color-success-on-surface, #107c10), focus-border: var(--kendo-color-success-on-surface, #107c10), focus-outline: inherit, focus-hover-bg: var(--kendo-color-success-on-surface, #107c10), focus-hover-text: var(--kendo-color-app-surface, #ffffff), focus-hover-border: var(--kendo-color-success-on-surface, #107c10), focus-hover-outline: inherit, selected-bg: var(--kendo-color-success-on-surface, #107c10), selected-text: var(--kendo-color-app-surface, #ffffff), selected-border: var(--kendo-color-success-on-surface, #107c10), selected-hover-bg: var(--kendo-color-success-on-surface, #107c10), selected-hover-text: var(--kendo-color-app-surface, #ffffff), selected-hover-border: var(--kendo-color-success-on-surface, #107c10), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)), info: (bg: transparent, text: var(--kendo-color-info-on-surface, #096edf), border: currentColor, hover-bg: var(--kendo-color-info-on-surface, #096edf), hover-text: var(--kendo-color-app-surface, #ffffff), hover-border: var(--kendo-color-info-on-surface, #096edf), focus-bg: transparent, focus-text: var(--kendo-color-info-on-surface, #096edf), focus-border: var(--kendo-color-info-on-surface, #096edf), focus-outline: inherit, focus-hover-bg: var(--kendo-color-info-on-surface, #096edf), focus-hover-text: var(--kendo-color-app-surface, #ffffff), focus-hover-border: var(--kendo-color-info-on-surface, #096edf), focus-hover-outline: inherit, selected-bg: var(--kendo-color-info-on-surface, #096edf), selected-text: var(--kendo-color-app-surface, #ffffff), selected-border: var(--kendo-color-info-on-surface, #096edf), selected-hover-bg: var(--kendo-color-info-on-surface, #096edf), selected-hover-text: var(--kendo-color-app-surface, #ffffff), selected-hover-border: var(--kendo-color-info-on-surface, #096edf), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)), warning: (bg: transparent, text: var(--kendo-color-warning-on-surface, #7a6000), border: currentColor, hover-bg: var(--kendo-color-warning-on-surface, #7a6000), hover-text: var(--kendo-color-app-surface, #ffffff), hover-border: var(--kendo-color-warning-on-surface, #7a6000), focus-bg: transparent, focus-text: var(--kendo-color-warning-on-surface, #7a6000), focus-border: var(--kendo-color-warning-on-surface, #7a6000), focus-outline: inherit, focus-hover-bg: var(--kendo-color-warning-on-surface, #7a6000), focus-hover-text: var(--kendo-color-app-surface, #ffffff), focus-hover-border: var(--kendo-color-warning-on-surface, #7a6000), focus-hover-outline: inherit, selected-bg: var(--kendo-color-warning-on-surface, #7a6000), selected-text: var(--kendo-color-app-surface, #ffffff), selected-border: var(--kendo-color-warning-on-surface, #7a6000), selected-hover-bg: var(--kendo-color-warning-on-surface, #7a6000), selected-hover-text: var(--kendo-color-app-surface, #ffffff), selected-hover-border: var(--kendo-color-warning-on-surface, #7a6000), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent))))
Description The theme colors map for the Chip.
$kendo-box-shadow-depth-1	String	`var( --kendo-elevation-1, none )`	`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	String	`var( --kendo-elevation-2, none )`	`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	String	`var( --kendo-elevation-3, none )`	`var(--kendo-elevation-3, none)`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for focus card.
$kendo-box-shadow-depth-4	String	`var( --kendo-elevation-4, none )`	`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	String	`var( --kendo-elevation-5, none )`	`var(--kendo-elevation-5, none)`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for floating action button.
$kendo-box-shadow-depth-6	String	`var( --kendo-elevation-6, none )`	`var(--kendo-elevation-6, none)`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for pop up.
$kendo-box-shadow-depth-7	String	`var( --kendo-elevation-7, none )`	`var(--kendo-elevation-7, none)`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for action sheet.
$kendo-box-shadow-depth-8	String	`var( --kendo-elevation-8, none )`	`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	String	`var( --kendo-elevation-8, none )`	`var(--kendo-elevation-8, none)`
Deprecated Use the `$kendo-elevation` map instead. Description Shadow for focus window.
$kendo-dialog-brand-colors	Map	`( primary: primary )`	`(primary: primary)`
Description The theme variations for the Dialog.
$kendo-dialog-theme-colors	Map	`()`	`(primary: (bg: var(--kendo-color-primary, #0078d4), text: var(--kendo-color-on-primary, #ffffff), border: var(--kendo-color-primary, #0078d4)), dark: (bg: var(--kendo-color-dark, #323130), text: var(--kendo-color-on-dark, #ffffff), border: var(--kendo-color-dark, #323130)), light: (bg: var(--kendo-color-light, #d2d0ce), text: var(--kendo-color-on-light, #323130), border: var(--kendo-color-light, #d2d0ce)))`
Description The theme colors map for the Dialog.
$kendo-tooltip-brand-colors	Map	`( secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, success: success, warning: warning, error: error, info: info )`	`(secondary: secondary, tertiary: tertiary, success: success, warning: warning, error: error, info: info)`
Description Theme variations for the tooltip.
$kendo-tooltip-theme-colors	Map	`()`	(primary: (bg: var(--kendo-color-primary, #0078d4), text: var(--kendo-color-on-primary, #ffffff), border: var(--kendo-color-primary, #0078d4)), secondary: (bg: var(--kendo-color-secondary-subtle, #faf9f8), text: var(--kendo-color-secondary-on-subtle, #323130), border: var(--kendo-color-secondary-subtle, #faf9f8)), tertiary: (bg: var(--kendo-color-tertiary-subtle, #deecf9), text: var(--kendo-color-tertiary-on-subtle, #174974), border: var(--kendo-color-tertiary-subtle, #deecf9)), success: (bg: var(--kendo-color-success-subtle, #dff6dd), text: var(--kendo-color-success-on-subtle, #063206), border: var(--kendo-color-success-subtle, #dff6dd)), warning: (bg: var(--kendo-color-warning-subtle, #fff4ce), text: var(--kendo-color-warning-on-subtle, #323130), border: var(--kendo-color-warning-subtle, #fff4ce)), error: (bg: var(--kendo-color-error-subtle, #fde7e9), text: var(--kendo-color-error-on-subtle, #420f12), border: var(--kendo-color-error-subtle, #fde7e9)), info: (bg: var(--kendo-color-info-subtle, #cee5ff), text: var(--kendo-color-info-on-subtle, #032040), border: var(--kendo-color-info-subtle, #cee5ff)), dark: (bg: var(--kendo-color-dark, #323130), text: var(--kendo-color-on-dark, #ffffff), border: var(--kendo-color-dark, #323130)), light: (bg: var(--kendo-color-light, #d2d0ce), text: var(--kendo-color-on-light, #323130), border: var(--kendo-color-light, #d2d0ce)))
Description Theme colors map for the tooltip variations.
$kendo-h5-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the fifth highest level heading.
$kendo-h6-line-height	Number	`22px`	`22px`
Description The line height of the sixth highest level heading.

Accessibility

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

Action-buttons

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

Action-sheet

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

Appbar

Name	Type	Default value	Computed value
$kendo-appbar-margin-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal margin of the AppBar.
$kendo-appbar-margin-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical margin of the AppBar.
$kendo-appbar-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the AppBar.
$kendo-appbar-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the AppBar.
$kendo-appbar-border-width	Number	`0px`	`0px`
Description The width of the border around the AppBar.
$kendo-appbar-zindex	Number	`1000`	`1000`
Description The z-index of the AppBar.
$kendo-appbar-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the AppBar.
$kendo-appbar-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the AppBar.
$kendo-appbar-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the AppBar.
$kendo-appbar-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing between the AppBar sections.
$kendo-appbar-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the AppBar.
$kendo-appbar-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the AppBar.
$kendo-appbar-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the AppBar.
$kendo-appbar-brand-colors	Map	`( primary: primary, error: error, success: success, info: info, secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, )`	`(primary: primary, error: error, success: success, info: info, secondary: secondary, tertiary: tertiary)`
Description The theme variations for the AppBar.
$kendo-appbar-theme-colors	Map	`()`	(primary: (bg: var(--kendo-color-primary, #0078d4), text: var(--kendo-color-on-primary, #ffffff), border: var(--kendo-color-primary, #0078d4)), error: (bg: var(--kendo-color-error, #c2666b), text: var(--kendo-color-on-error, #ffffff), border: var(--kendo-color-error, #c2666b)), success: (bg: var(--kendo-color-success, #55a554), text: var(--kendo-color-on-success, #ffffff), border: var(--kendo-color-success, #55a554)), info: (bg: var(--kendo-color-info, #0a7eff), text: var(--kendo-color-on-info, #ffffff), border: var(--kendo-color-info, #0a7eff)), secondary: (bg: var(--kendo-color-secondary, #979593), text: var(--kendo-color-on-secondary, #ffffff), border: var(--kendo-color-secondary, #979593)), tertiary: (bg: var(--kendo-color-tertiary, #2b88d8), text: var(--kendo-color-on-tertiary, #ffffff), border: var(--kendo-color-tertiary, #2b88d8)), warning: (bg: var(--kendo-color-warning, #ffc80a), text: var(--kendo-color-on-warning, #323130), border: var(--kendo-color-warning, #ffc80a)), dark: (bg: var(--kendo-color-dark, #323130), text: var(--kendo-color-on-dark, #ffffff), border: var(--kendo-color-dark, #323130)), light: (bg: var(--kendo-color-light, #d2d0ce), text: var(--kendo-color-on-light, #323130), border: var(--kendo-color-light, #d2d0ce)))
Description The theme colors map for the AppBar variations.

Avatar

Name	Type	Default value	Computed value
$kendo-avatar-border-width	Number	`1px`	`1px`
Description The border width of the Avatar.
$kendo-avatar-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Avatar.
$kendo-avatar-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Avatar.
$kendo-avatar-line-height	String	`var( --kendo-line-height, inherit )`	`var(--kendo-line-height, inherit)`
Description The line height of the Avatar.
$kendo-avatar-sizes	Map	`( sm: k-spacing(4), md: k-spacing(8), lg: k-spacing(16) )`	`(sm: var(--kendo-spacing-4, 1rem), md: var(--kendo-spacing-8, 2rem), lg: var(--kendo-spacing-16, 4rem))`
Description The sizes map of the Avatar.
$kendo-avatar-brand-colors	Map	`( primary: primary, error: error, success: success, info: info, secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, )`	`(primary: primary, error: error, success: success, info: info, secondary: secondary, tertiary: tertiary)`
Description The theme variations for the Avatar.
$kendo-avatar-theme-colors	Map	`()`	(solid: (primary: (bg: var(--kendo-color-primary, #0078d4), text: var(--kendo-color-on-primary, #ffffff), border: var(--kendo-color-primary, #0078d4)), error: (bg: var(--kendo-color-error, #c2666b), text: var(--kendo-color-on-error, #ffffff), border: var(--kendo-color-error, #c2666b)), success: (bg: var(--kendo-color-success, #55a554), text: var(--kendo-color-on-success, #ffffff), border: var(--kendo-color-success, #55a554)), info: (bg: var(--kendo-color-info, #0a7eff), text: var(--kendo-color-on-info, #ffffff), border: var(--kendo-color-info, #0a7eff)), secondary: (bg: var(--kendo-color-secondary, #979593), text: var(--kendo-color-on-secondary, #ffffff), border: var(--kendo-color-secondary, #979593)), tertiary: (bg: var(--kendo-color-tertiary, #2b88d8), text: var(--kendo-color-on-tertiary, #ffffff), border: var(--kendo-color-tertiary, #2b88d8)), warning: (bg: var(--kendo-color-warning, #ffc80a), text: var(--kendo-color-on-warning, #323130), border: var(--kendo-color-warning, #ffc80a)), dark: (bg: var(--kendo-color-dark, #323130), text: var(--kendo-color-on-dark, #ffffff), border: var(--kendo-color-dark, #323130)), light: (bg: var(--kendo-color-light, #d2d0ce), text: var(--kendo-color-on-light, #323130), border: var(--kendo-color-light, #d2d0ce))), outline: (primary: (bg: var(--kendo-color-on-primary, #ffffff), text: var(--kendo-color-primary, #0078d4), border: var(--kendo-color-primary, #0078d4)), error: (bg: var(--kendo-color-on-error, #ffffff), text: var(--kendo-color-error, #c2666b), border: var(--kendo-color-error, #c2666b)), success: (bg: var(--kendo-color-on-success, #ffffff), text: var(--kendo-color-success, #55a554), border: var(--kendo-color-success, #55a554)), info: (bg: var(--kendo-color-on-info, #ffffff), text: var(--kendo-color-info, #0a7eff), border: var(--kendo-color-info, #0a7eff)), secondary: (bg: var(--kendo-color-on-secondary, #ffffff), text: var(--kendo-color-secondary, #979593), border: var(--kendo-color-secondary, #979593)), tertiary: (bg: var(--kendo-color-on-tertiary, #ffffff), text: var(--kendo-color-tertiary, #2b88d8), border: var(--kendo-color-tertiary, #2b88d8)), warning: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-warning, #ffc80a), border: var(--kendo-color-warning, #ffc80a)), dark: (bg: var(--kendo-color-on-dark, #ffffff), text: var(--kendo-color-dark, #323130), border: var(--kendo-color-dark, #323130)), light: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-light, #d2d0ce), border: var(--kendo-color-light, #d2d0ce))))
Description The theme colors map for the Avatar variations.

Badge

Name	Type	Default value	Computed value
$kendo-badge-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Badge.
$kendo-badge-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Badge.
$kendo-badge-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the Badge.
$kendo-badge-border-width	Number	`1px`	`1px`
Description The border width of the Badge.
$kendo-badge-font-weight	String	`var( --kendo-font-weight, normal )`	`var(--kendo-font-weight, normal)`
Description The font weight of the Badge.
$kendo-badge-sm-padding-x	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description Horizontal padding of the small Badge.
$kendo-badge-md-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description Horizontal padding of the medium Badge.
$kendo-badge-lg-padding-x	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description Horizontal padding of the large Badge.
$kendo-badge-sm-padding-y	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description Vertical padding of the small Badge.
$kendo-badge-md-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description Vertical padding of the medium Badge.
$kendo-badge-lg-padding-y	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description Vertical padding of the large Badge.
$kendo-badge-sm-font-size	String	`var( --kendo-font-size-xs, inherit )`	`var(--kendo-font-size-xs, inherit)`
Description The font size of the small Badge.
$kendo-badge-md-font-size	String	`var( --kendo-font-size-xs, inherit )`	`var(--kendo-font-size-xs, inherit)`
Description The font size of the medium Badge.
$kendo-badge-lg-font-size	String	`var( --kendo-font-size-xs, inherit )`	`var(--kendo-font-size-xs, inherit)`
Description The font size of the large Badge.
$kendo-badge-sm-line-height	String	`var( --kendo-line-height-xs, normal )`	`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	String	`var( --kendo-line-height-xs, normal )`	`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	String	`var( --kendo-line-height-xs, normal )`	`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	Calculation	`calc( #{$kendo-badge-sm-line-height} * 1em + #{$kendo-badge-sm-padding-y} * 2 + #{$kendo-badge-border-width} * 2 )`	`calc(var(--kendo-line-height-xs, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 1px * 2)`
Description The calculated minimum width of the small circular Badge.
$kendo-badge-md-min-width	Calculation	`calc( #{$kendo-badge-md-line-height} * 1em + #{$kendo-badge-md-padding-y} * 2 + #{$kendo-badge-border-width} * 2 )`	`calc(var(--kendo-line-height-xs, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)`
Description The calculated minimum width of the medium circular Badge.
$kendo-badge-lg-min-width	Calculation	`calc( #{$kendo-badge-lg-line-height} * 1em + #{$kendo-badge-lg-padding-y} * 2 + #{$kendo-badge-border-width} * 2 )`	`calc(var(--kendo-line-height-xs, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 1px * 2)`
Description The calculated minimum width of the large circular Badge.
$kendo-badge-sizes	Map	( sm: ( padding-x: $kendo-badge-sm-padding-x, padding-y: $kendo-badge-sm-padding-y, font-size: $kendo-badge-sm-font-size, line-height: $kendo-badge-sm-line-height, min-width: $kendo-badge-sm-min-width ), md: ( padding-x: $kendo-badge-md-padding-x, padding-y: $kendo-badge-md-padding-y, font-size: $kendo-badge-md-font-size, line-height: $kendo-badge-md-line-height, min-width: $kendo-badge-md-min-width ), lg: ( padding-x: $kendo-badge-lg-padding-x, padding-y: $kendo-badge-lg-padding-y, font-size: $kendo-badge-lg-font-size, line-height: $kendo-badge-lg-line-height, min-width: $kendo-badge-lg-min-width ) )	(sm: (padding-x: var(--kendo-spacing-0\.5, 0.125rem), padding-y: var(--kendo-spacing-0\.5, 0.125rem), font-size: var(--kendo-font-size-xs, inherit), line-height: var(--kendo-line-height-xs, normal), min-width: calc(var(--kendo-line-height-xs, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 1px * 2)), md: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), font-size: var(--kendo-font-size-xs, inherit), line-height: var(--kendo-line-height-xs, normal), min-width: calc(var(--kendo-line-height-xs, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)), lg: (padding-x: var(--kendo-spacing-1\.5, 0.375rem), padding-y: var(--kendo-spacing-1\.5, 0.375rem), font-size: var(--kendo-font-size-xs, inherit), line-height: var(--kendo-line-height-xs, normal), min-width: calc(var(--kendo-line-height-xs, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 1px * 2)))
Description The sizes map for the Badge.
$kendo-badge-brand-colors	Map	`( primary: primary, error: error, success: success, info: info, secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, )`	`(primary: primary, error: error, success: success, info: info, secondary: secondary, tertiary: tertiary)`
Description The theme variations for the Badge.
$kendo-badge-theme-colors	Map	`()`	(solid: (primary: (bg: var(--kendo-color-primary, #0078d4), text: var(--kendo-color-on-primary, #ffffff), border: var(--kendo-color-primary, #0078d4)), error: (bg: var(--kendo-color-error, #c2666b), text: var(--kendo-color-on-error, #ffffff), border: var(--kendo-color-error, #c2666b)), success: (bg: var(--kendo-color-success, #55a554), text: var(--kendo-color-on-success, #ffffff), border: var(--kendo-color-success, #55a554)), info: (bg: var(--kendo-color-info, #0a7eff), text: var(--kendo-color-on-info, #ffffff), border: var(--kendo-color-info, #0a7eff)), secondary: (bg: var(--kendo-color-secondary, #979593), text: var(--kendo-color-on-secondary, #ffffff), border: var(--kendo-color-secondary, #979593)), tertiary: (bg: var(--kendo-color-tertiary, #2b88d8), text: var(--kendo-color-on-tertiary, #ffffff), border: var(--kendo-color-tertiary, #2b88d8)), warning: (bg: var(--kendo-color-warning, #ffc80a), text: var(--kendo-color-on-warning, #323130), border: var(--kendo-color-warning, #ffc80a)), dark: (bg: var(--kendo-color-dark, #323130), text: var(--kendo-color-on-dark, #ffffff), border: var(--kendo-color-dark, #323130)), light: (bg: var(--kendo-color-light, #d2d0ce), text: var(--kendo-color-on-light, #323130), border: var(--kendo-color-light, #d2d0ce))), outline: (primary: (bg: transparent, text: var(--kendo-color-primary, #0078d4), border: var(--kendo-color-primary, #0078d4)), error: (bg: transparent, text: var(--kendo-color-error, #c2666b), border: var(--kendo-color-error, #c2666b)), success: (bg: transparent, text: var(--kendo-color-success, #55a554), border: var(--kendo-color-success, #55a554)), info: (bg: transparent, text: var(--kendo-color-info, #0a7eff), border: var(--kendo-color-info, #0a7eff)), secondary: (bg: transparent, text: var(--kendo-color-secondary, #979593), border: var(--kendo-color-secondary, #979593)), tertiary: (bg: transparent, text: var(--kendo-color-tertiary, #2b88d8), border: var(--kendo-color-tertiary, #2b88d8)), warning: (bg: transparent, text: var(--kendo-color-warning, #ffc80a), border: var(--kendo-color-warning, #ffc80a)), dark: (bg: transparent, text: var(--kendo-color-dark, #323130), border: var(--kendo-color-dark, #323130)), light: (bg: transparent, text: var(--kendo-color-light, #d2d0ce), border: var(--kendo-color-light, #d2d0ce))))
Description The theme colors map for the Badge variations.

Name	Type	Default value	Computed value
$kendo-bottom-nav-padding-x	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The horizontal padding of the BottomNavigation.
$kendo-bottom-nav-padding-y	String	`$kendo-bottom-nav-padding-x`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the BottomNavigation.
$kendo-bottom-nav-gap	String	`$kendo-bottom-nav-padding-x`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The spacing between the BottomNavigation items.
$kendo-bottom-nav-border-width	List	`1px 0px 0px 0px`	`1px 0px 0px 0px`
Description The width of the border around the BottomNavigation.
$kendo-bottom-nav-font-family	String	`var( --kendo-font-family, inherit)`	`var(--kendo-font-family, inherit)`
Description The font family of the BottomNavigation.
$kendo-bottom-nav-font-size	String	`var( --kendo-font-size, 1rem )`	`var(--kendo-font-size, 1rem)`
Description The font size of the BottomNavigation.
$kendo-bottom-nav-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the BottomNavigation.
$kendo-bottom-nav-letter-spacing	Number	`.2px`	`0.2px`
Description The letter spacing of the BottomNavigation.
$kendo-bottom-nav-item-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the BottomNavigation item.
$kendo-bottom-nav-item-padding-y	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical padding of the BottomNavigation item.
$kendo-bottom-nav-item-min-width	Number	`72px`	`72px`
Description The minimum width of the BottomNavigation item.
$kendo-bottom-nav-item-max-width	String	`none`	`none`
Description The maximum width of the BottomNavigation item.
$kendo-bottom-nav-item-min-height	Calculation	`calc( var( --kendo-icon-size, 1.5rem ) * 2 + (#{$kendo-bottom-nav-item-padding-y} * 2) )`	`calc(var(--kendo-icon-size, 1.5rem) * 2 + var(--kendo-spacing-0\.5, 0.125rem) * 2)`
Description The minimum height of the BottomNavigation item.
$kendo-bottom-nav-item-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the BottomNavigation item.
$kendo-bottom-nav-item-gap	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The spacing of the BottomNavigation item.
$kendo-bottom-nav-item-focus-offset	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The offset of the focused BottomNavigation item.
$kendo-bottom-nav-item-focus-outline-width	Number	`1px`	`1px`
Description The outline width of the focused BottomNavigation item.
$kendo-bottom-nav-item-focus-outline-style	String	`solid`	`solid`
Description The outline style of the focused BottomNavigation item.
$kendo-bottom-nav-shadow	String	`var( --kendo-box-shadow-depth-4, none )`	`var(--kendo-box-shadow-depth-4, none)`
Description The box shadow of the BottomNavigation.
$kendo-bottom-nav-brand-colors	Map	`( primary: primary, error: error, success: success, info: info, secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, )`	`(primary: primary, error: error, success: success, info: info, secondary: secondary, tertiary: tertiary)`
Description The theme variations for the BottomNavigation.
$kendo-bottom-nav-theme-colors	Map	`()`	(solid: (primary: (bg: var(--kendo-color-primary, #0078d4), text: var(--kendo-color-on-primary, #ffffff), border: var(--kendo-color-primary, #0078d4), focus-bg: var(--kendo-color-primary, #0078d4), focus-text: var(--kendo-color-on-primary, #ffffff), focus-border: var(--kendo-color-primary, #0078d4), focus-outline: inherit, active-bg: var(--kendo-color-primary-active, #005a9e), active-text: var(--kendo-color-on-primary, #ffffff), active-border: var(--kendo-color-primary-active, #005a9e), disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-primary, #ffffff) 46%, transparent), disabled-border: transparent), error: (bg: var(--kendo-color-error, #c2666b), text: var(--kendo-color-on-error, #ffffff), border: var(--kendo-color-error, #c2666b), focus-bg: var(--kendo-color-error, #c2666b), focus-text: var(--kendo-color-on-error, #ffffff), focus-border: var(--kendo-color-error, #c2666b), focus-outline: inherit, active-bg: var(--kendo-color-error-active, #ae3b41), active-text: var(--kendo-color-on-error, #ffffff), active-border: var(--kendo-color-error-active, #ae3b41), disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-error, #ffffff) 46%, transparent), disabled-border: transparent), success: (bg: var(--kendo-color-success, #55a554), text: var(--kendo-color-on-success, #ffffff), border: var(--kendo-color-success, #55a554), focus-bg: var(--kendo-color-success, #55a554), focus-text: var(--kendo-color-on-success, #ffffff), focus-border: var(--kendo-color-success, #55a554), focus-outline: inherit, active-bg: var(--kendo-color-success-active, #278a27), active-text: var(--kendo-color-on-success, #ffffff), active-border: var(--kendo-color-success-active, #278a27), disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-success, #ffffff) 46%, transparent), disabled-border: transparent), info: (bg: var(--kendo-color-info, #0a7eff), text: var(--kendo-color-on-info, #ffffff), border: var(--kendo-color-info, #0a7eff), focus-bg: var(--kendo-color-info, #0a7eff), focus-text: var(--kendo-color-on-info, #ffffff), focus-border: var(--kendo-color-info, #0a7eff), focus-outline: inherit, active-bg: var(--kendo-color-info-active, #085ebf), active-text: var(--kendo-color-on-info, #ffffff), active-border: var(--kendo-color-info-active, #085ebf), disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-info, #ffffff) 46%, transparent), disabled-border: transparent), secondary: (bg: var(--kendo-color-secondary, #979593), text: var(--kendo-color-on-secondary, #ffffff), border: var(--kendo-color-secondary, #979593), focus-bg: var(--kendo-color-secondary, #979593), focus-text: var(--kendo-color-on-secondary, #ffffff), focus-border: var(--kendo-color-secondary, #979593), focus-outline: inherit, active-bg: var(--kendo-color-secondary-active, #797775), active-text: var(--kendo-color-on-secondary, #ffffff), active-border: var(--kendo-color-secondary-active, #797775), disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-secondary, #ffffff) 46%, transparent), disabled-border: transparent), tertiary: (bg: var(--kendo-color-tertiary, #2b88d8), text: var(--kendo-color-on-tertiary, #ffffff), border: var(--kendo-color-tertiary, #2b88d8), focus-bg: var(--kendo-color-tertiary, #2b88d8), focus-text: var(--kendo-color-on-tertiary, #ffffff), focus-border: var(--kendo-color-tertiary, #2b88d8), focus-outline: inherit, active-bg: var(--kendo-color-tertiary-active, #2473b7), active-text: var(--kendo-color-on-tertiary, #ffffff), active-border: var(--kendo-color-tertiary-active, #2473b7), disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-tertiary, #ffffff) 46%, transparent), disabled-border: transparent), warning: (bg: var(--kendo-color-warning, #ffc80a), text: var(--kendo-color-on-warning, #323130), border: var(--kendo-color-warning, #ffc80a), focus-bg: var(--kendo-color-warning, #ffc80a), focus-text: var(--kendo-color-on-warning, #323130), focus-border: var(--kendo-color-warning, #ffc80a), focus-outline: var(--kendo-color-app-surface, #ffffff), active-bg: var(--kendo-color-warning-active, #e0b000), active-text: var(--kendo-color-on-warning, #323130), active-border: var(--kendo-color-warning-active, #e0b000), disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-warning, #323130) 46%, transparent), disabled-border: transparent), dark: (bg: var(--kendo-color-dark, #323130), text: var(--kendo-color-on-dark, #ffffff), border: var(--kendo-color-dark, #323130), focus-bg: var(--kendo-color-dark, #323130), focus-text: var(--kendo-color-on-dark, #ffffff), focus-border: var(--kendo-color-dark, #323130), focus-outline: var(--kendo-color-on-dark, #ffffff), active-bg: var(--kendo-color-dark-active, #000000), active-text: var(--kendo-color-on-dark, #ffffff), active-border: var(--kendo-color-dark-active, #000000), disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-dark, #ffffff) 46%, transparent), disabled-border: transparent), light: (bg: var(--kendo-color-light, #d2d0ce), text: var(--kendo-color-on-light, #323130), border: var(--kendo-color-light, #d2d0ce), focus-bg: var(--kendo-color-light, #d2d0ce), focus-text: var(--kendo-color-on-light, #323130), focus-border: var(--kendo-color-light, #d2d0ce), focus-outline: var(--kendo-color-app-surface, #ffffff), active-bg: var(--kendo-color-light-active, #a19f9d), active-text: var(--kendo-color-on-light, #323130), active-border: var(--kendo-color-light-active, #a19f9d), disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-light, #323130) 46%, transparent), disabled-border: transparent)), flat: (primary: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-on-app-surface, #323130), border: color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent), focus-bg: inherit, focus-text: var(--kendo-color-primary, #0078d4), focus-border: transparent, focus-outline: var(--kendo-color-primary, #0078d4), active-bg: inherit, active-text: var(--kendo-color-primary, #0078d4), active-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), error: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-on-app-surface, #323130), border: color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent), focus-bg: inherit, focus-text: var(--kendo-color-error, #c2666b), focus-border: transparent, focus-outline: var(--kendo-color-error, #c2666b), active-bg: inherit, active-text: var(--kendo-color-error, #c2666b), active-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), success: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-on-app-surface, #323130), border: color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent), focus-bg: inherit, focus-text: var(--kendo-color-success, #55a554), focus-border: transparent, focus-outline: var(--kendo-color-success, #55a554), active-bg: inherit, active-text: var(--kendo-color-success, #55a554), active-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), info: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-on-app-surface, #323130), border: color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent), focus-bg: inherit, focus-text: var(--kendo-color-info, #0a7eff), focus-border: transparent, focus-outline: var(--kendo-color-info, #0a7eff), active-bg: inherit, active-text: var(--kendo-color-info, #0a7eff), active-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), secondary: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-on-app-surface, #323130), border: color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent), focus-bg: inherit, focus-text: var(--kendo-color-secondary, #979593), focus-border: transparent, focus-outline: var(--kendo-color-secondary, #979593), active-bg: inherit, active-text: var(--kendo-color-secondary, #979593), active-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), tertiary: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-on-app-surface, #323130), border: color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent), focus-bg: inherit, focus-text: var(--kendo-color-tertiary, #2b88d8), focus-border: transparent, focus-outline: var(--kendo-color-tertiary, #2b88d8), active-bg: inherit, active-text: var(--kendo-color-tertiary, #2b88d8), active-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), warning: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-on-app-surface, #323130), border: var(--kendo-color-warning, #ffc80a), focus-bg: inherit, focus-text: var(--kendo-color-warning, #ffc80a), focus-border: transparent, focus-outline: var(--kendo-color-warning, #ffc80a), active-bg: inherit, active-text: var(--kendo-color-warning, #ffc80a), active-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), dark: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-on-app-surface, #323130), border: var(--kendo-color-dark, #323130), focus-bg: inherit, focus-text: var(--kendo-color-dark, #323130), focus-border: transparent, focus-outline: var(--kendo-color-dark, #323130), active-bg: inherit, active-text: var(--kendo-color-dark, #323130), active-border: transparent, disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), light: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-on-app-surface, #323130), border: transparent, focus-bg: inherit, focus-text: var(--kendo-color-light, #d2d0ce), focus-border: transparent, focus-outline: var(--kendo-color-light, #d2d0ce), active-bg: inherit, active-text: var(--kendo-color-light, #d2d0ce), active-border: transparent, disabled-bg: inherit, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial)))
Description The theme colors map for the BottomNavigation variations.

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

$kendo-breadcrumb-sm-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the small breadcrumb.
$kendo-breadcrumb-md-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the medium breadcrumb.
$kendo-breadcrumb-lg-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the large breadcrumb.
$kendo-breadcrumb-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height used along with the $kendo-font-size variable of the Breadcrumb.
$kendo-breadcrumb-sm-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height used along with the $kendo-font-size variable of the small breadcrumb.
$kendo-breadcrumb-md-line-height	String	`var( --kendo-line-height, normal )`	`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	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height used along with the $kendo-font-size variable of the large breadcrumb.
$kendo-breadcrumb-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Breadcrumb
$kendo-breadcrumb-text	String	`get-theme-color-var( neutral-130 )`	`get-theme-color-var(neutral-130)`
Description The text color of the Breadcrumb
$kendo-breadcrumb-border	Color	`transparent`	`transparent`
Description The border color of the Breadcrumb
$kendo-breadcrumb-focus-shadow	List	`0 0 0 1px if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))`	`0 0 0 1px color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)`
Description The box shadow of the focused breadcrumb
$kendo-breadcrumb-link-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Breadcrumb link
$kendo-breadcrumb-sm-link-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-x	String	`$kendo-breadcrumb-link-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the large Breadcrumb link.
$kendo-breadcrumb-link-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Breadcrumb link
$kendo-breadcrumb-sm-link-padding-y	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-y	String	`$kendo-breadcrumb-link-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-y	String	`k-spacing(2.5)`	`var(--kendo-spacing-2\.5, 0.625rem)`
Description The vertical padding of the large Breadcrumb link.
$kendo-breadcrumb-link-border-radius	Number	`0px`	`0px`
Description The radius of the border around the Breadcrumb link
$kendo-breadcrumb-link-initial-text	String	`inherit`	`inherit`
Description The initial text color of the Breadcrumb link
$kendo-breadcrumb-link-bg	Color	`transparent`	`transparent`
Description The background color of the Breadcrumb link
$kendo-breadcrumb-link-text	String	`get-theme-color-var( neutral-130 )`	`get-theme-color-var(neutral-130)`
Description The text color of the Breadcrumb link
$kendo-breadcrumb-link-border	Color	`transparent`	`transparent`
Description The borer color of the Breadcrumb link
$kendo-breadcrumb-link-hover-bg	String	`var( --kendo-hover-bg, initial )`	`var(--kendo-hover-bg, initial)`
Description The background color of the hovered breadcrumb link
$kendo-breadcrumb-link-hover-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the hovered breadcrumb link
$kendo-breadcrumb-link-hover-border	String	`var( --kendo-hover-border, initial )`	`var(--kendo-hover-border, initial)`
Description The border color of the hovered breadcrumb link
$kendo-breadcrumb-link-active-bg	String	`var( --kendo-selected-bg, initial )`	`var(--kendo-selected-bg, initial)`
Description The background color of the active breadcrumb link
$kendo-breadcrumb-link-active-text	String	`var( --kendo-selected-text, initial )`	`var(--kendo-selected-text, initial)`
Description The text color of the active breadcrumb link
$kendo-breadcrumb-link-active-border	String	`if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 ))`	`var(--kendo-color-base-active, #edebe9)`
Description The border color of the active breadcrumb link
$kendo-breadcrumb-link-focus-bg	Color	`transparent`	`transparent`
Description The background color of the focused breadcrumb link
$kendo-breadcrumb-link-focus-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the focused breadcrumb link
$kendo-breadcrumb-link-focus-shadow	List	`inset 0 0 0 1px get-theme-color-var( neutral-130 )`	`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	String	`var( --kendo-hover-bg, initial )`	`var(--kendo-hover-bg, initial)`
Description The focus and hover background color of the Breadcrumb link
$kendo-breadcrumb-link-disabled-bg	String	`none`	`none`
Description The background color of the disabled breadcrumb link
$kendo-breadcrumb-link-disabled-text	String	`var( --kendo-disabled-text, initial )`	`var(--kendo-disabled-text, initial)`
Description The text color of the disabled breadcrumb link
$kendo-breadcrumb-link-disabled-border	String	`none`	`none`
Description The border color of the disabled breadcrumb link
$kendo-breadcrumb-link-selected-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of selected the Breadcrumb link
$kendo-breadcrumb-link-selected-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the selected breadcrumb link
$kendo-breadcrumb-link-selected-border	Color	`transparent`	`transparent`
Description The border color of the selected breadcrumb link
$kendo-breadcrumb-link-selected-font-weight	String	`var( --kendo-font-weight-bold, bold )`	`var(--kendo-font-weight-bold, bold)`
Description The font weight of the selected breadcrumb link
$kendo-breadcrumb-root-link-bg	Color	`$kendo-breadcrumb-link-bg`	`transparent`
Description The background color of the Breadcrumb root link
$kendo-breadcrumb-root-link-text	String	`$kendo-breadcrumb-link-text`	`get-theme-color-var(neutral-130)`
Description The text color of the Breadcrumb root link
$kendo-breadcrumb-root-link-border	Color	`$kendo-breadcrumb-link-border`	`transparent`
Description The border color of the Breadcrumb root link
$kendo-breadcrumb-root-link-hover-bg	String	`$kendo-breadcrumb-link-hover-bg`	`var(--kendo-hover-bg, initial)`
Description The background color of the hovered breadcrumb root link
$kendo-breadcrumb-root-link-hover-text	String	`$kendo-breadcrumb-link-hover-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the hovered breadcrumb root link
$kendo-breadcrumb-root-link-hover-border	String	`$kendo-breadcrumb-link-hover-border`	`var(--kendo-hover-border, initial)`
Description The border color of the hovered breadcrumb root link
$kendo-breadcrumb-root-link-active-bg	String	`$kendo-breadcrumb-link-active-bg`	`var(--kendo-selected-bg, initial)`
Description The background color of the active breadcrumb root link
$kendo-breadcrumb-root-link-active-text	String	`$kendo-breadcrumb-link-active-text`	`var(--kendo-selected-text, initial)`
Description The text color of the active breadcrumb root link
$kendo-breadcrumb-root-link-active-border	String	`$kendo-breadcrumb-link-active-border`	`var(--kendo-color-base-active, #edebe9)`
Description The border color of the active breadcrumb root link
$kendo-breadcrumb-root-link-focus-bg	Color	`$kendo-breadcrumb-link-focus-bg`	`transparent`
Description The background color of the focused breadcrumb root link
$kendo-breadcrumb-root-link-focus-text	String	`$kendo-breadcrumb-link-focus-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the focused breadcrumb root link
$kendo-breadcrumb-root-link-focus-shadow	List	`$kendo-breadcrumb-link-focus-shadow`	`inset 0 0 0 1px get-theme-color-var(neutral-130)`
Description The border color of the focused breadcrumb root link
$kendo-breadcrumb-root-link-focus-hover-bg	String	`$kendo-breadcrumb-link-focus-hover-bg`	`var(--kendo-hover-bg, initial)`
Description The focus and hover background color of the Breadcrumb root link
$kendo-breadcrumb-root-link-disabled-text	String	`$kendo-breadcrumb-link-disabled-text`	`var(--kendo-disabled-text, initial)`
Description The text color of the disabled breadcrumb root link
$kendo-breadcrumb-icon-link-padding-y	String	`k-spacing(2.5)`	`var(--kendo-spacing-2\.5, 0.625rem)`
Description The vertical padding of the Breadcrumb link icon
$kendo-breadcrumb-sm-icon-link-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-y	String	`$kendo-breadcrumb-icon-link-padding-y`	`var(--kendo-spacing-2\.5, 0.625rem)`
Description The vertical padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the large Breadcrumb link icon.
$kendo-breadcrumb-icon-link-padding-x	String	`$kendo-breadcrumb-icon-link-padding-y`	`var(--kendo-spacing-2\.5, 0.625rem)`
Description The horizontal padding of the Breadcrumb link icon
$kendo-breadcrumb-sm-icon-link-padding-x	String	`$kendo-breadcrumb-sm-icon-link-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-x	String	`$kendo-breadcrumb-icon-link-padding-x`	`var(--kendo-spacing-2\.5, 0.625rem)`
Description The horizontal padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-x	String	`$kendo-breadcrumb-lg-icon-link-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the large Breadcrumb link icon.
$kendo-breadcrumb-sizes	Map	( sm: ( link-padding-x: $kendo-breadcrumb-sm-link-padding-x, link-padding-y: $kendo-breadcrumb-sm-link-padding-y, icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x, icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y, font-size: $kendo-breadcrumb-sm-font-size, line-height: $kendo-breadcrumb-sm-line-height ), md: ( link-padding-x: $kendo-breadcrumb-md-link-padding-x, link-padding-y: $kendo-breadcrumb-md-link-padding-y, icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x, icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y, font-size: $kendo-breadcrumb-md-font-size, line-height: $kendo-breadcrumb-md-line-height ), lg: ( link-padding-x: $kendo-breadcrumb-lg-link-padding-x, link-padding-y: $kendo-breadcrumb-lg-link-padding-y, icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x, icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y, font-size: $kendo-breadcrumb-lg-font-size, line-height: $kendo-breadcrumb-lg-line-height ) )	(sm: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-1\.5, 0.375rem), icon-link-padding-x: var(--kendo-spacing-2, 0.5rem), icon-link-padding-y: var(--kendo-spacing-2, 0.5rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), md: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-2, 0.5rem), icon-link-padding-x: var(--kendo-spacing-2\.5, 0.625rem), icon-link-padding-y: var(--kendo-spacing-2\.5, 0.625rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), lg: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-2\.5, 0.625rem), icon-link-padding-x: var(--kendo-spacing-3, 0.75rem), icon-link-padding-y: var(--kendo-spacing-3, 0.75rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)))
Description The sizes map for the Breadcrumb.

Button

Name	Type	Default value	Computed value
$kendo-actions-button-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Spacing between the action buttons.
$kendo-button-border-width	Number	`1px`	`1px`
Description The width of the border around the Button.
$kendo-button-sm-padding-x	String	`k-spacing(5)`	`var(--kendo-spacing-5, 1.25rem)`
Description The horizontal padding of the small Button.
$kendo-button-md-padding-x	String	`k-spacing(5)`	`var(--kendo-spacing-5, 1.25rem)`
Description The horizontal padding of the medium Button.
$kendo-button-lg-padding-x	String	`k-spacing(5)`	`var(--kendo-spacing-5, 1.25rem)`
Description The horizontal padding of the large Button.
$kendo-button-sm-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the small Button.
$kendo-button-md-padding-y	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the medium Button.
$kendo-button-lg-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the large Button.
$kendo-button-sm-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the small Button.
$kendo-button-md-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the medium Button.
$kendo-button-lg-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the large Button.
$kendo-button-sm-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height used along with the $kendo-font-size variable of the small Button.
$kendo-button-md-line-height	String	`var( --kendo-line-height, normal )`	`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	String	`var( --kendo-line-height, normal )`	`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	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Button.
$kendo-button-font-weight	String	`var( --kendo-font-weight-bold, normal )`	`var(--kendo-font-weight-bold, normal)`
Description The font weight of the Button.
$kendo-button-calc-size	Calculation	`calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) )`	`calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 1px * 2)`
Description The calculated height of the Button.
$kendo-button-inner-calc-size	Calculation	`calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) )`	`calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2)`
Description The calculated inner height of the Button excluding the border width.
$kendo-button-sizes	Map	( sm: ( padding-x: $kendo-button-sm-padding-x, padding-y: $kendo-button-sm-padding-y, font-size: $kendo-button-sm-font-size, line-height: $kendo-button-sm-line-height ), md: ( padding-x: $kendo-button-md-padding-x, padding-y: $kendo-button-md-padding-y, font-size: $kendo-button-md-font-size, line-height: $kendo-button-md-line-height ), lg: ( padding-x: $kendo-button-lg-padding-x, padding-y: $kendo-button-lg-padding-y, font-size: $kendo-button-lg-font-size, line-height: $kendo-button-lg-line-height ) )	(sm: (padding-x: var(--kendo-spacing-5, 1.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), md: (padding-x: var(--kendo-spacing-5, 1.25rem), padding-y: var(--kendo-spacing-1\.5, 0.375rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), lg: (padding-x: var(--kendo-spacing-5, 1.25rem), padding-y: var(--kendo-spacing-2, 0.5rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)))
Description The sizes map for the Button.
$kendo-button-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The content spacing of the Button.
$kendo-button-focus-offset	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The offset of the focused Button.
$kendo-button-focus-outline-width	Number	`1px`	`1px`
Description The Outline width of the focused Button.
$kendo-button-focus-outline-style	String	`solid`	`solid`
Description The outline style of the focused Button.
$kendo-button-flat-focus-offset	Number	`1px`	`1px`
Description The offset of the flat focused Button.
$kendo-button-flat-focus-outline-width	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The outline width of the flat focused Button.
$kendo-button-link-focus-offset	Number	`0`	`0`
Description The offset of the link focused Button.
$kendo-button-link-focus-outline-width	Number	`1px`	`1px`
Description The outline width of the flat focused Button.
$kendo-button-theme-colors	Map	`()`	(solid: (base: (bg: var(--kendo-color-base, #ffffff), text: var(--kendo-color-on-base, #323130), border: var(--kendo-color-border, #8a8886), hover-bg: var(--kendo-color-base-hover, #f3f2f1), hover-text: var(--kendo-color-on-base, #323130), hover-border: var(--kendo-color-border, #8a8886), focus-bg: var(--kendo-color-base, #ffffff), focus-text: var(--kendo-color-on-base, #323130), focus-border: var(--kendo-color-border, #8a8886), focus-outline: var(--kendo-color-on-base, #323130), focus-hover-bg: var(--kendo-color-base-hover, #f3f2f1), focus-hover-text: var(--kendo-color-on-base, #323130), focus-hover-border: var(--kendo-color-border, #8a8886), focus-hover-outline: var(--kendo-color-on-base, #323130), active-bg: var(--kendo-color-base-active, #edebe9), active-text: var(--kendo-color-on-base, #323130), active-border: var(--kendo-color-border, #8a8886), active-hover-bg: var(--kendo-color-base-hover, #f3f2f1), active-hover-text: var(--kendo-color-on-base, #323130), active-hover-border: var(--kendo-color-border, #8a8886), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), primary: (bg: var(--kendo-color-primary, #0078d4), text: var(--kendo-color-on-primary, #ffffff), border: var(--kendo-color-primary, #0078d4), hover-bg: var(--kendo-color-primary-hover, #106ebe), hover-text: var(--kendo-color-on-primary, #ffffff), hover-border: var(--kendo-color-primary-hover, #106ebe), focus-bg: var(--kendo-color-primary, #0078d4), focus-text: var(--kendo-color-on-primary, #ffffff), focus-border: var(--kendo-color-primary, #0078d4), focus-outline: inherit, focus-hover-bg: var(--kendo-color-primary-hover, #106ebe), focus-hover-text: var(--kendo-color-on-primary, #ffffff), focus-hover-border: var(--kendo-color-primary-hover, #106ebe), focus-hover-outline: inherit, active-bg: var(--kendo-color-primary-active, #005a9e), active-text: var(--kendo-color-on-primary, #ffffff), active-border: var(--kendo-color-primary-active, #005a9e), active-hover-bg: var(--kendo-color-primary-hover, #106ebe), active-hover-text: var(--kendo-color-on-primary, #ffffff), active-hover-border: var(--kendo-color-primary-hover, #106ebe), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), error: (bg: var(--kendo-color-error, #c2666b), text: var(--kendo-color-on-error, #ffffff), border: var(--kendo-color-error, #c2666b), hover-bg: var(--kendo-color-error-hover, #b85156), hover-text: var(--kendo-color-on-error, #ffffff), hover-border: var(--kendo-color-error-hover, #b85156), focus-bg: var(--kendo-color-error, #c2666b), focus-text: var(--kendo-color-on-error, #ffffff), focus-border: var(--kendo-color-error, #c2666b), focus-outline: inherit, focus-hover-bg: var(--kendo-color-error-hover, #b85156), focus-hover-text: var(--kendo-color-on-error, #ffffff), focus-hover-border: var(--kendo-color-error-hover, #b85156), focus-hover-outline: inherit, active-bg: var(--kendo-color-error-active, #ae3b41), active-text: var(--kendo-color-on-error, #ffffff), active-border: var(--kendo-color-error-active, #ae3b41), active-hover-bg: var(--kendo-color-error-hover, #b85156), active-hover-text: var(--kendo-color-on-error, #ffffff), active-hover-border: var(--kendo-color-error-hover, #b85156), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), success: (bg: var(--kendo-color-success, #55a554), text: var(--kendo-color-on-success, #ffffff), border: var(--kendo-color-success, #55a554), hover-bg: var(--kendo-color-success-hover, #3e973e), hover-text: var(--kendo-color-on-success, #ffffff), hover-border: var(--kendo-color-success-hover, #3e973e), focus-bg: var(--kendo-color-success, #55a554), focus-text: var(--kendo-color-on-success, #ffffff), focus-border: var(--kendo-color-success, #55a554), focus-outline: inherit, focus-hover-bg: var(--kendo-color-success-hover, #3e973e), focus-hover-text: var(--kendo-color-on-success, #ffffff), focus-hover-border: var(--kendo-color-success-hover, #3e973e), focus-hover-outline: inherit, active-bg: var(--kendo-color-success-active, #278a27), active-text: var(--kendo-color-on-success, #ffffff), active-border: var(--kendo-color-success-active, #278a27), active-hover-bg: var(--kendo-color-success-hover, #3e973e), active-hover-text: var(--kendo-color-on-success, #ffffff), active-hover-border: var(--kendo-color-success-hover, #3e973e), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), info: (bg: var(--kendo-color-info, #0a7eff), text: var(--kendo-color-on-info, #ffffff), border: var(--kendo-color-info, #0a7eff), hover-bg: var(--kendo-color-info-hover, #096edf), hover-text: var(--kendo-color-on-info, #ffffff), hover-border: var(--kendo-color-info-hover, #096edf), focus-bg: var(--kendo-color-info, #0a7eff), focus-text: var(--kendo-color-on-info, #ffffff), focus-border: var(--kendo-color-info, #0a7eff), focus-outline: inherit, focus-hover-bg: var(--kendo-color-info-hover, #096edf), focus-hover-text: var(--kendo-color-on-info, #ffffff), focus-hover-border: var(--kendo-color-info-hover, #096edf), focus-hover-outline: inherit, active-bg: var(--kendo-color-info-active, #085ebf), active-text: var(--kendo-color-on-info, #ffffff), active-border: var(--kendo-color-info-active, #085ebf), active-hover-bg: var(--kendo-color-info-hover, #096edf), active-hover-text: var(--kendo-color-on-info, #ffffff), active-hover-border: var(--kendo-color-info-hover, #096edf), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), secondary: (bg: var(--kendo-color-secondary, #979593), text: var(--kendo-color-on-secondary, #ffffff), border: var(--kendo-color-secondary, #979593), hover-bg: var(--kendo-color-secondary-hover, #8a8886), hover-text: var(--kendo-color-on-secondary, #ffffff), hover-border: var(--kendo-color-secondary-hover, #8a8886), focus-bg: var(--kendo-color-secondary, #979593), focus-text: var(--kendo-color-on-secondary, #ffffff), focus-border: var(--kendo-color-secondary, #979593), focus-outline: inherit, focus-hover-bg: var(--kendo-color-secondary-hover, #8a8886), focus-hover-text: var(--kendo-color-on-secondary, #ffffff), focus-hover-border: var(--kendo-color-secondary-hover, #8a8886), focus-hover-outline: inherit, active-bg: var(--kendo-color-secondary-active, #797775), active-text: var(--kendo-color-on-secondary, #ffffff), active-border: var(--kendo-color-secondary-active, #797775), active-hover-bg: var(--kendo-color-secondary-hover, #8a8886), active-hover-text: var(--kendo-color-on-secondary, #ffffff), active-hover-border: var(--kendo-color-secondary-hover, #8a8886), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), tertiary: (bg: var(--kendo-color-tertiary, #2b88d8), text: var(--kendo-color-on-tertiary, #ffffff), border: var(--kendo-color-tertiary, #2b88d8), hover-bg: var(--kendo-color-tertiary-hover, #287ec7), hover-text: var(--kendo-color-on-tertiary, #ffffff), hover-border: var(--kendo-color-tertiary-hover, #287ec7), focus-bg: var(--kendo-color-tertiary, #2b88d8), focus-text: var(--kendo-color-on-tertiary, #ffffff), focus-border: var(--kendo-color-tertiary, #2b88d8), focus-outline: inherit, focus-hover-bg: var(--kendo-color-tertiary-hover, #287ec7), focus-hover-text: var(--kendo-color-on-tertiary, #ffffff), focus-hover-border: var(--kendo-color-tertiary-hover, #287ec7), focus-hover-outline: inherit, active-bg: var(--kendo-color-tertiary-active, #2473b7), active-text: var(--kendo-color-on-tertiary, #ffffff), active-border: var(--kendo-color-tertiary-active, #2473b7), active-hover-bg: var(--kendo-color-tertiary-hover, #287ec7), active-hover-text: var(--kendo-color-on-tertiary, #ffffff), active-hover-border: var(--kendo-color-tertiary-hover, #287ec7), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), warning: (bg: var(--kendo-color-warning, #ffc80a), text: var(--kendo-color-on-warning, #323130), border: var(--kendo-color-warning, #ffc80a), hover-bg: var(--kendo-color-warning-hover, #f5c000), hover-text: var(--kendo-color-on-warning, #323130), hover-border: var(--kendo-color-warning-hover, #f5c000), focus-bg: var(--kendo-color-warning, #ffc80a), focus-text: var(--kendo-color-on-warning, #323130), focus-border: var(--kendo-color-warning, #ffc80a), focus-outline: var(--kendo-color-app-surface, #ffffff), focus-hover-bg: var(--kendo-color-warning-hover, #f5c000), focus-hover-text: var(--kendo-color-on-warning, #323130), focus-hover-border: var(--kendo-color-warning-hover, #f5c000), focus-hover-outline: var(--kendo-color-app-surface, #ffffff), active-bg: var(--kendo-color-warning-active, #e0b000), active-text: var(--kendo-color-on-warning, #323130), active-border: var(--kendo-color-warning-active, #e0b000), active-hover-bg: var(--kendo-color-warning-hover, #f5c000), active-hover-text: var(--kendo-color-on-warning, #323130), active-hover-border: var(--kendo-color-warning-hover, #f5c000), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), dark: (bg: var(--kendo-color-dark, #323130), text: var(--kendo-color-on-dark, #ffffff), border: var(--kendo-color-dark, #323130), hover-bg: var(--kendo-color-dark-hover, #201f1e), hover-text: var(--kendo-color-on-dark, #ffffff), hover-border: var(--kendo-color-dark-hover, #201f1e), focus-bg: var(--kendo-color-dark, #323130), focus-text: var(--kendo-color-on-dark, #ffffff), focus-border: var(--kendo-color-dark, #323130), focus-outline: var(--kendo-color-on-dark, #ffffff), focus-hover-bg: var(--kendo-color-dark-hover, #201f1e), focus-hover-text: var(--kendo-color-on-dark, #ffffff), focus-hover-border: var(--kendo-color-dark-hover, #201f1e), focus-hover-outline: var(--kendo-color-on-dark, #ffffff), active-bg: var(--kendo-color-dark-active, #000000), active-text: var(--kendo-color-on-dark, #ffffff), active-border: var(--kendo-color-dark-active, #000000), active-hover-bg: var(--kendo-color-dark-hover, #201f1e), active-hover-text: var(--kendo-color-on-dark, #ffffff), active-hover-border: var(--kendo-color-dark-hover, #201f1e), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), light: (bg: var(--kendo-color-light, #d2d0ce), text: var(--kendo-color-on-light, #323130), border: var(--kendo-color-light, #d2d0ce), hover-bg: var(--kendo-color-light-hover, #c8c6c4), hover-text: var(--kendo-color-on-light, #323130), hover-border: var(--kendo-color-light-hover, #c8c6c4), focus-bg: var(--kendo-color-light, #d2d0ce), focus-text: var(--kendo-color-on-light, #323130), focus-border: var(--kendo-color-light, #d2d0ce), focus-outline: var(--kendo-color-app-surface, #ffffff), focus-hover-bg: var(--kendo-color-light-hover, #c8c6c4), focus-hover-text: var(--kendo-color-on-light, #323130), focus-hover-border: var(--kendo-color-light-hover, #c8c6c4), focus-hover-outline: var(--kendo-color-app-surface, #ffffff), active-bg: var(--kendo-color-light-active, #a19f9d), active-text: var(--kendo-color-on-light, #323130), active-border: var(--kendo-color-light-active, #a19f9d), active-hover-bg: var(--kendo-color-light-hover, #c8c6c4), active-hover-text: var(--kendo-color-on-light, #323130), active-hover-border: var(--kendo-color-light-hover, #c8c6c4), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent)), outline: (base: (bg: transparent, text: var(--kendo-color-base-on-surface, #323130), border: currentColor, hover-bg: var(--kendo-color-on-base, #323130), hover-text: var(--kendo-color-base, #ffffff), hover-border: var(--kendo-color-on-base, #323130), focus-bg: transparent, focus-text: var(--kendo-color-base-on-surface, #323130), focus-border: currentColor, focus-outline: inherit, focus-hover-bg: var(--kendo-color-on-base, #323130), focus-hover-text: var(--kendo-color-base, #ffffff), focus-hover-border: var(--kendo-color-on-base, #323130), focus-hover-outline: inherit, active-bg: var(--kendo-color-on-base, #323130), active-text: var(--kendo-color-base, #ffffff), active-border: var(--kendo-color-on-base, #323130), active-hover-bg: var(--kendo-color-on-base, #323130), active-hover-text: var(--kendo-color-base, #ffffff), active-hover-border: var(--kendo-color-on-base, #323130), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)), primary: (bg: transparent, text: var(--kendo-color-primary-on-surface, #0078d4), border: currentColor, hover-bg: var(--kendo-color-primary, #0078d4), hover-text: var(--kendo-color-on-primary, #ffffff), hover-border: var(--kendo-color-primary, #0078d4), focus-bg: transparent, focus-text: var(--kendo-color-primary-on-surface, #0078d4), focus-border: var(--kendo-color-primary, #0078d4), focus-outline: inherit, focus-hover-bg: var(--kendo-color-primary, #0078d4), focus-hover-text: var(--kendo-color-on-primary, #ffffff), focus-hover-border: var(--kendo-color-primary, #0078d4), focus-hover-outline: inherit, active-bg: var(--kendo-color-primary, #0078d4), active-text: var(--kendo-color-on-primary, #ffffff), active-border: var(--kendo-color-primary, #0078d4), active-hover-bg: var(--kendo-color-primary, #0078d4), active-hover-text: var(--kendo-color-on-primary, #ffffff), active-hover-border: var(--kendo-color-primary, #0078d4), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)), error: (bg: transparent, text: var(--kendo-color-error-on-surface, #a4262c), border: currentColor, hover-bg: var(--kendo-color-error, #c2666b), hover-text: var(--kendo-color-on-error, #ffffff), hover-border: var(--kendo-color-error, #c2666b), focus-bg: transparent, focus-text: var(--kendo-color-error-on-surface, #a4262c), focus-border: var(--kendo-color-error, #c2666b), focus-outline: inherit, focus-hover-bg: var(--kendo-color-error, #c2666b), focus-hover-text: var(--kendo-color-on-error, #ffffff), focus-hover-border: var(--kendo-color-error, #c2666b), focus-hover-outline: inherit, active-bg: var(--kendo-color-error, #c2666b), active-text: var(--kendo-color-on-error, #ffffff), active-border: var(--kendo-color-error, #c2666b), active-hover-bg: var(--kendo-color-error, #c2666b), active-hover-text: var(--kendo-color-on-error, #ffffff), active-hover-border: var(--kendo-color-error, #c2666b), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)), success: (bg: transparent, text: var(--kendo-color-success-on-surface, #107c10), border: currentColor, hover-bg: var(--kendo-color-success, #55a554), hover-text: var(--kendo-color-on-success, #ffffff), hover-border: var(--kendo-color-success, #55a554), focus-bg: transparent, focus-text: var(--kendo-color-success-on-surface, #107c10), focus-border: var(--kendo-color-success, #55a554), focus-outline: inherit, focus-hover-bg: var(--kendo-color-success, #55a554), focus-hover-text: var(--kendo-color-on-success, #ffffff), focus-hover-border: var(--kendo-color-success, #55a554), focus-hover-outline: inherit, active-bg: var(--kendo-color-success, #55a554), active-text: var(--kendo-color-on-success, #ffffff), active-border: var(--kendo-color-success, #55a554), active-hover-bg: var(--kendo-color-success, #55a554), active-hover-text: var(--kendo-color-on-success, #ffffff), active-hover-border: var(--kendo-color-success, #55a554), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)), info: (bg: transparent, text: var(--kendo-color-info-on-surface, #096edf), border: currentColor, hover-bg: var(--kendo-color-info, #0a7eff), hover-text: var(--kendo-color-on-info, #ffffff), hover-border: var(--kendo-color-info, #0a7eff), focus-bg: transparent, focus-text: var(--kendo-color-info-on-surface, #096edf), focus-border: var(--kendo-color-info, #0a7eff), focus-outline: inherit, focus-hover-bg: var(--kendo-color-info, #0a7eff), focus-hover-text: var(--kendo-color-on-info, #ffffff), focus-hover-border: var(--kendo-color-info, #0a7eff), focus-hover-outline: inherit, active-bg: var(--kendo-color-info, #0a7eff), active-text: var(--kendo-color-on-info, #ffffff), active-border: var(--kendo-color-info, #0a7eff), active-hover-bg: var(--kendo-color-info, #0a7eff), active-hover-text: var(--kendo-color-on-info, #ffffff), active-hover-border: var(--kendo-color-info, #0a7eff), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)), secondary: (bg: transparent, text: var(--kendo-color-secondary-on-surface, #605e5c), border: currentColor, hover-bg: var(--kendo-color-secondary, #979593), hover-text: var(--kendo-color-on-secondary, #ffffff), hover-border: var(--kendo-color-secondary, #979593), focus-bg: transparent, focus-text: var(--kendo-color-secondary-on-surface, #605e5c), focus-border: var(--kendo-color-secondary, #979593), focus-outline: inherit, focus-hover-bg: var(--kendo-color-secondary, #979593), focus-hover-text: var(--kendo-color-on-secondary, #ffffff), focus-hover-border: var(--kendo-color-secondary, #979593), focus-hover-outline: inherit, active-bg: var(--kendo-color-secondary, #979593), active-text: var(--kendo-color-on-secondary, #ffffff), active-border: var(--kendo-color-secondary, #979593), active-hover-bg: var(--kendo-color-secondary, #979593), active-hover-text: var(--kendo-color-on-secondary, #ffffff), active-hover-border: var(--kendo-color-secondary, #979593), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)), tertiary: (bg: transparent, text: var(--kendo-color-tertiary-on-surface, #2b88d8), border: currentColor, hover-bg: var(--kendo-color-tertiary, #2b88d8), hover-text: var(--kendo-color-on-tertiary, #ffffff), hover-border: var(--kendo-color-tertiary, #2b88d8), focus-bg: transparent, focus-text: var(--kendo-color-tertiary-on-surface, #2b88d8), focus-border: var(--kendo-color-tertiary, #2b88d8), focus-outline: inherit, focus-hover-bg: var(--kendo-color-tertiary, #2b88d8), focus-hover-text: var(--kendo-color-on-tertiary, #ffffff), focus-hover-border: var(--kendo-color-tertiary, #2b88d8), focus-hover-outline: inherit, active-bg: var(--kendo-color-tertiary, #2b88d8), active-text: var(--kendo-color-on-tertiary, #ffffff), active-border: var(--kendo-color-tertiary, #2b88d8), active-hover-bg: var(--kendo-color-tertiary, #2b88d8), active-hover-text: var(--kendo-color-on-tertiary, #ffffff), active-hover-border: var(--kendo-color-tertiary, #2b88d8), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)), warning: (bg: transparent, text: var(--kendo-color-warning-on-surface, #7a6000), border: currentColor, hover-bg: var(--kendo-color-warning, #ffc80a), hover-text: var(--kendo-color-on-warning, #323130), hover-border: var(--kendo-color-warning, #ffc80a), focus-bg: transparent, focus-text: var(--kendo-color-warning-on-surface, #7a6000), focus-border: var(--kendo-color-warning-on-surface, #7a6000), focus-outline: inherit, focus-hover-bg: var(--kendo-color-warning, #ffc80a), focus-hover-text: var(--kendo-color-on-warning, #323130), focus-hover-border: var(--kendo-color-warning, #ffc80a), focus-hover-outline: inherit, active-bg: var(--kendo-color-warning, #ffc80a), active-text: var(--kendo-color-on-warning, #323130), active-border: var(--kendo-color-warning, #ffc80a), active-hover-bg: var(--kendo-color-warning, #ffc80a), active-hover-text: var(--kendo-color-on-warning, #323130), active-hover-border: var(--kendo-color-warning, #ffc80a), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)), dark: (bg: transparent, text: var(--kendo-color-dark-on-surface, #323130), border: currentColor, hover-bg: var(--kendo-color-dark, #323130), hover-text: var(--kendo-color-on-dark, #ffffff), hover-border: var(--kendo-color-dark, #323130), focus-bg: transparent, focus-text: var(--kendo-color-dark-on-surface, #323130), focus-border: var(--kendo-color-dark, #323130), focus-outline: inherit, focus-hover-bg: var(--kendo-color-dark, #323130), focus-hover-text: var(--kendo-color-on-dark, #ffffff), focus-hover-border: var(--kendo-color-dark, #323130), focus-hover-outline: inherit, active-bg: var(--kendo-color-dark, #323130), active-text: var(--kendo-color-on-dark, #ffffff), active-border: var(--kendo-color-dark, #323130), active-hover-bg: var(--kendo-color-dark, #323130), active-hover-text: var(--kendo-color-on-dark, #ffffff), active-hover-border: var(--kendo-color-dark, #323130), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)), light: (bg: transparent, text: var(--kendo-color-light-on-surface, #d2d0ce), border: currentColor, hover-bg: var(--kendo-color-light, #d2d0ce), hover-text: var(--kendo-color-on-light, #323130), hover-border: var(--kendo-color-light, #d2d0ce), focus-bg: transparent, focus-text: var(--kendo-color-light-on-surface, #d2d0ce), focus-border: var(--kendo-color-light, #d2d0ce), focus-outline: inherit, focus-hover-bg: var(--kendo-color-light, #d2d0ce), focus-hover-text: var(--kendo-color-on-light, #323130), focus-hover-border: var(--kendo-color-light, #d2d0ce), focus-hover-outline: inherit, active-bg: var(--kendo-color-light, #d2d0ce), active-text: var(--kendo-color-on-light, #323130), active-border: var(--kendo-color-light, #d2d0ce), active-hover-bg: var(--kendo-color-light, #d2d0ce), active-hover-text: var(--kendo-color-on-light, #323130), active-hover-border: var(--kendo-color-light, #d2d0ce), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent))), link: (base: (bg: transparent, text: var(--kendo-color-on-base, #323130), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-on-base, #323130), hover-border: transparent, focus-bg: transparent, focus-text: var(--kendo-color-on-base, #323130), focus-border: transparent, focus-outline: var(--kendo-color-base-subtle-active, #d2d0ce), focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-on-base, #323130), focus-hover-border: var(--kendo-color-base-subtle-active, #d2d0ce), focus-hover-outline: transparent, active-bg: transparent, active-text: var(--kendo-color-on-base, #323130), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-on-base, #323130), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), primary: (bg: transparent, text: var(--kendo-color-primary, #0078d4), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-primary-hover, #106ebe), hover-border: transparent, focus-bg: transparent, focus-text: var(--kendo-color-primary, #0078d4), focus-border: transparent, focus-outline: var(--kendo-color-primary-subtle-active, #abd1ef), focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-primary-hover, #106ebe), focus-hover-border: transparent, focus-hover-outline: var(--kendo-color-primary-subtle-active, #abd1ef), active-bg: transparent, active-text: var(--kendo-color-primary-active, #005a9e), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-primary-hover, #106ebe), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), error: (bg: transparent, text: var(--kendo-color-error, #c2666b), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-error-hover, #b85156), hover-border: transparent, focus-bg: transparent, focus-text: var(--kendo-color-error, #c2666b), focus-border: transparent, focus-outline: var(--kendo-color-error-subtle-active, #e9bcbf), focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-error-hover, #b85156), focus-hover-border: transparent, focus-hover-outline: var(--kendo-color-error-subtle-active, #e9bcbf), active-bg: transparent, active-text: var(--kendo-color-error-active, #ae3b41), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-error-hover, #b85156), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), success: (bg: transparent, text: var(--kendo-color-success, #55a554), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-success-hover, #3e973e), hover-border: transparent, focus-bg: transparent, focus-text: var(--kendo-color-success, #55a554), focus-border: transparent, focus-outline: var(--kendo-color-success-subtle-active, #b1dbaf), focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-success-hover, #3e973e), focus-hover-border: transparent, focus-hover-outline: var(--kendo-color-success-subtle-active, #b1dbaf), active-bg: transparent, active-text: var(--kendo-color-success-active, #278a27), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-success-hover, #3e973e), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), info: (bg: transparent, text: var(--kendo-color-info, #0a7eff), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-info-hover, #096edf), hover-border: transparent, focus-bg: transparent, focus-text: var(--kendo-color-info, #0a7eff), focus-border: transparent, focus-outline: var(--kendo-color-info-subtle-active, #8dc3ff), focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-info-hover, #096edf), focus-hover-border: transparent, focus-hover-outline: var(--kendo-color-info-subtle-active, #8dc3ff), active-bg: transparent, active-text: var(--kendo-color-info-active, #085ebf), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-info-hover, #096edf), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), secondary: (bg: transparent, text: var(--kendo-color-secondary, #979593), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-secondary-hover, #8a8886), hover-border: transparent, focus-bg: transparent, focus-text: var(--kendo-color-secondary, #979593), focus-border: transparent, focus-outline: var(--kendo-color-secondary-subtle-active, #edebe9), focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-secondary-hover, #8a8886), focus-hover-border: transparent, focus-hover-outline: var(--kendo-color-secondary-subtle-active, #edebe9), active-bg: transparent, active-text: var(--kendo-color-secondary-active, #797775), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-secondary-hover, #8a8886), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), tertiary: (bg: transparent, text: var(--kendo-color-tertiary, #2b88d8), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-tertiary-hover, #287ec7), hover-border: transparent, focus-bg: transparent, focus-text: var(--kendo-color-tertiary, #2b88d8), focus-border: transparent, focus-outline: var(--kendo-color-tertiary-subtle-active, #aacfef), focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-tertiary-hover, #287ec7), focus-hover-border: transparent, focus-hover-outline: var(--kendo-color-tertiary-subtle-active, #aacfef), active-bg: transparent, active-text: var(--kendo-color-tertiary-active, #2473b7), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-tertiary-hover, #287ec7), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), warning: (bg: transparent, text: var(--kendo-color-warning, #ffc80a), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-warning-hover, #f5c000), hover-border: transparent, focus-bg: transparent, focus-text: var(--kendo-color-warning, #ffc80a), focus-border: var(--kendo-color-warning-subtle-active, #ffe58d), focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-warning-hover, #f5c000), focus-hover-border: transparent, focus-hover-outline: var(--kendo-color-warning-subtle-active, #ffe58d), active-bg: transparent, active-text: var(--kendo-color-warning-active, #e0b000), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-warning-hover, #f5c000), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), dark: (bg: transparent, text: var(--kendo-color-dark, #323130), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-dark-hover, #201f1e), hover-border: transparent, focus-bg: transparent, focus-text: var(--kendo-color-dark, #323130), focus-border: var(--kendo-color-dark-subtle-active, #8a8886), focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-dark-hover, #201f1e), focus-hover-border: transparent, focus-hover-outline: var(--kendo-color-dark-subtle-active, #8a8886), active-bg: transparent, active-text: var(--kendo-color-dark-active, #000000), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-dark-hover, #201f1e), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), light: (bg: transparent, text: var(--kendo-color-light, #d2d0ce), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-light-hover, #c8c6c4), hover-border: transparent, focus-bg: transparent, focus-text: var(--kendo-color-light, #d2d0ce), focus-border: var(--kendo-color-light-subtle-active, #edebe9), focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-light-hover, #c8c6c4), focus-hover-border: transparent, focus-hover-outline: var(--kendo-color-light-subtle-active, #edebe9), active-bg: transparent, active-text: var(--kendo-color-light-active, #a19f9d), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-light-hover, #c8c6c4), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial)), clear: (base: (bg: transparent, text: var(--kendo-color-base-on-surface, #323130), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-base-on-surface, #323130), hover-border: transparent, focus-bg: var(--kendo-color-base-subtle, #edebe9), focus-text: var(--kendo-color-base-on-surface, #323130), focus-border: transparent, focus-outline: var(--kendo-color-base-active, #edebe9), focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-base-on-surface, #323130), focus-hover-border: transparent, focus-hover-outline: var(--kendo-color-base-active, #edebe9), active-bg: transparent, active-text: var(--kendo-color-base-on-surface, #323130), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-base-on-surface, #323130), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), primary: (bg: transparent, text: var(--kendo-color-primary-on-surface, #0078d4), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-primary-on-surface, #0078d4), hover-border: transparent, focus-bg: var(--kendo-color-primary-subtle, #deecf9), focus-text: var(--kendo-color-primary-on-surface, #0078d4), focus-border: transparent, focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-primary-on-surface, #0078d4), focus-hover-border: transparent, active-bg: transparent, active-text: var(--kendo-color-primary-on-surface, #0078d4), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-primary-on-surface, #0078d4), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), error: (bg: transparent, text: var(--kendo-color-error-on-surface, #a4262c), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-error-on-surface, #a4262c), hover-border: transparent, focus-bg: var(--kendo-color-error-subtle, #fde7e9), focus-text: var(--kendo-color-error-on-surface, #a4262c), focus-border: transparent, focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-error-on-surface, #a4262c), focus-hover-border: transparent, active-bg: transparent, active-text: var(--kendo-color-error-on-surface, #a4262c), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-error-on-surface, #a4262c), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), success: (bg: transparent, text: var(--kendo-color-success-on-surface, #107c10), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-success-on-surface, #107c10), hover-border: transparent, focus-bg: var(--kendo-color-success-subtle, #dff6dd), focus-text: var(--kendo-color-success-on-surface, #107c10), focus-border: transparent, focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-success-on-surface, #107c10), focus-hover-border: transparent, active-bg: transparent, active-text: var(--kendo-color-success-on-surface, #107c10), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-success-on-surface, #107c10), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), info: (bg: transparent, text: var(--kendo-color-info-on-surface, #096edf), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-info-on-surface, #096edf), hover-border: transparent, focus-bg: var(--kendo-color-info-subtle, #cee5ff), focus-text: var(--kendo-color-info-on-surface, #096edf), focus-border: transparent, focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-info-on-surface, #096edf), focus-hover-border: transparent, active-bg: transparent, active-text: var(--kendo-color-info-on-surface, #096edf), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-info-on-surface, #096edf), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), secondary: (bg: transparent, text: var(--kendo-color-secondary-on-surface, #605e5c), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-secondary-on-surface, #605e5c), hover-border: transparent, focus-bg: var(--kendo-color-secondary-subtle, #faf9f8), focus-text: var(--kendo-color-secondary-on-surface, #605e5c), focus-border: transparent, focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-secondary-on-surface, #605e5c), focus-hover-border: transparent, active-bg: transparent, active-text: var(--kendo-color-secondary-on-surface, #605e5c), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-secondary-on-surface, #605e5c), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), tertiary: (bg: transparent, text: var(--kendo-color-tertiary-on-surface, #2b88d8), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-tertiary-on-surface, #2b88d8), hover-border: transparent, focus-bg: var(--kendo-color-tertiary-subtle, #deecf9), focus-text: var(--kendo-color-tertiary-on-surface, #2b88d8), focus-border: transparent, focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-tertiary-on-surface, #2b88d8), focus-hover-border: transparent, active-bg: transparent, active-text: var(--kendo-color-tertiary-on-surface, #2b88d8), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-tertiary-on-surface, #2b88d8), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), warning: (bg: transparent, text: var(--kendo-color-warning-on-surface, #7a6000), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-warning-on-surface, #7a6000), hover-border: transparent, focus-bg: var(--kendo-color-warning-subtle, #fff4ce), focus-text: var(--kendo-color-warning-on-surface, #7a6000), focus-border: transparent, focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-warning-on-surface, #7a6000), focus-hover-border: transparent, active-bg: transparent, active-text: var(--kendo-color-warning-on-surface, #7a6000), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-warning-on-surface, #7a6000), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), dark: (bg: transparent, text: var(--kendo-color-dark-on-surface, #323130), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-dark-on-surface, #323130), hover-border: transparent, focus-bg: var(--kendo-color-dark-subtle, #a19f9d), focus-text: var(--kendo-color-dark-on-surface, #323130), focus-border: transparent, focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-dark-on-surface, #323130), focus-hover-border: transparent, active-bg: transparent, active-text: var(--kendo-color-dark-on-surface, #323130), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-dark-on-surface, #323130), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), light: (bg: transparent, text: var(--kendo-color-light-on-surface, #d2d0ce), border: transparent, hover-bg: transparent, hover-text: var(--kendo-color-light-on-surface, #d2d0ce), hover-border: transparent, focus-bg: var(--kendo-color-light-subtle, #faf9f8), focus-text: var(--kendo-color-light-on-surface, #d2d0ce), focus-border: transparent, focus-hover-bg: transparent, focus-hover-text: var(--kendo-color-light-on-surface, #d2d0ce), focus-hover-border: transparent, active-bg: transparent, active-text: var(--kendo-color-light-on-surface, #d2d0ce), active-border: transparent, active-hover-bg: transparent, active-hover-text: var(--kendo-color-light-on-surface, #d2d0ce), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial)), flat: (primary: (bg: initial, text: var(--kendo-color-primary-on-surface, #0078d4), border: transparent, hover-bg: var(--kendo-color-primary-subtle, #deecf9), hover-text: var(--kendo-color-primary-hover, #106ebe), hover-border: transparent, focus-bg: initial, focus-text: var(--kendo-color-primary-on-surface, #0078d4), focus-border: transparent, focus-outline: var(--kendo-color-primary-subtle-active, #abd1ef), focus-hover-bg: var(--kendo-color-primary-subtle, #deecf9), focus-hover-text: var(--kendo-color-primary-hover, #106ebe), focus-hover-border: transparent, focus-hover-outline: var(--kendo-color-primary-subtle-active, #abd1ef), active-bg: var(--kendo-color-primary-subtle-hover, #c7e0f4), active-text: var(--kendo-color-primary-hover, #106ebe), active-border: transparent, active-hover-bg: var(--kendo-color-primary-subtle, #deecf9), active-hover-text: var(--kendo-color-primary-hover, #106ebe), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), error: (bg: initial, text: var(--kendo-color-error-on-surface, #a4262c), border: transparent, hover-bg: var(--kendo-color-error-subtle, #fde7e9), hover-text: var(--kendo-color-error-hover, #b85156), hover-border: transparent, focus-bg: initial, focus-text: var(--kendo-color-error-on-surface, #a4262c), focus-border: transparent, focus-outline: var(--kendo-color-error-subtle-active, #e9bcbf), focus-hover-bg: var(--kendo-color-error-subtle, #fde7e9), focus-hover-text: var(--kendo-color-error-hover, #b85156), focus-hover-border: transparent, focus-hover-outline: var(--kendo-color-error-subtle-active, #e9bcbf), active-bg: var(--kendo-color-error-subtle-hover, #f3d2d4), active-text: var(--kendo-color-error-hover, #b85156), active-border: transparent, active-hover-bg: var(--kendo-color-error-subtle, #fde7e9), active-hover-text: var(--kendo-color-error-hover, #b85156), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), success: (bg: initial, text: var(--kendo-color-success-on-surface, #107c10), border: transparent, hover-bg: var(--kendo-color-success-subtle, #dff6dd), hover-text: var(--kendo-color-success-hover, #3e973e), hover-border: transparent, focus-bg: initial, focus-text: var(--kendo-color-success-on-surface, #107c10), focus-border: transparent, focus-outline: var(--kendo-color-success-subtle-active, #b1dbaf), focus-hover-bg: var(--kendo-color-success-subtle, #dff6dd), focus-hover-text: var(--kendo-color-success-hover, #3e973e), focus-hover-border: transparent, focus-hover-outline: var(--kendo-color-success-subtle-active, #b1dbaf), active-bg: var(--kendo-color-success-subtle-hover, #c8e8c6), active-text: var(--kendo-color-success-hover, #3e973e), active-border: transparent, active-hover-bg: var(--kendo-color-success-subtle, #dff6dd), active-hover-text: var(--kendo-color-success-hover, #3e973e), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), info: (bg: initial, text: var(--kendo-color-info-on-surface, #096edf), border: transparent, hover-bg: var(--kendo-color-info-subtle, #cee5ff), hover-text: var(--kendo-color-info-hover, #096edf), hover-border: transparent, focus-bg: initial, focus-text: var(--kendo-color-info-on-surface, #096edf), focus-border: transparent, focus-outline: var(--kendo-color-info-subtle-active, #8dc3ff), focus-hover-bg: var(--kendo-color-info-subtle, #cee5ff), focus-hover-text: var(--kendo-color-info-hover, #096edf), focus-hover-border: transparent, focus-hover-outline: var(--kendo-color-info-subtle-active, #8dc3ff), active-bg: var(--kendo-color-info-subtle-hover, #add4ff), active-text: var(--kendo-color-info-hover, #096edf), active-border: transparent, active-hover-bg: var(--kendo-color-info-subtle, #cee5ff), active-hover-text: var(--kendo-color-info-hover, #096edf), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), secondary: (bg: initial, text: var(--kendo-color-secondary-on-surface, #605e5c), border: transparent, hover-bg: var(--kendo-color-secondary-subtle, #faf9f8), hover-text: var(--kendo-color-secondary-hover, #8a8886), hover-border: transparent, focus-bg: initial, focus-text: var(--kendo-color-secondary-on-surface, #605e5c), focus-border: transparent, focus-outline: var(--kendo-color-secondary-subtle-active, #edebe9), focus-hover-bg: var(--kendo-color-secondary-subtle, #faf9f8), focus-hover-text: var(--kendo-color-secondary-hover, #8a8886), focus-hover-border: transparent, focus-hover-outline: var(--kendo-color-secondary-subtle-active, #edebe9), active-bg: var(--kendo-color-secondary-subtle-hover, #f3f2f1), active-text: var(--kendo-color-secondary-hover, #8a8886), active-border: transparent, active-hover-bg: var(--kendo-color-secondary-subtle, #faf9f8), active-hover-text: var(--kendo-color-secondary-hover, #8a8886), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), tertiary: (bg: initial, text: var(--kendo-color-tertiary-on-surface, #2b88d8), border: transparent, hover-bg: var(--kendo-color-tertiary-subtle, #deecf9), hover-text: var(--kendo-color-tertiary-hover, #287ec7), hover-border: transparent, focus-bg: initial, focus-text: var(--kendo-color-tertiary-on-surface, #2b88d8), focus-border: transparent, focus-outline: var(--kendo-color-tertiary-subtle-active, #aacfef), focus-hover-bg: var(--kendo-color-tertiary-subtle, #deecf9), focus-hover-text: var(--kendo-color-tertiary-hover, #287ec7), focus-hover-border: transparent, focus-hover-outline: var(--kendo-color-tertiary-subtle-active, #aacfef), active-bg: var(--kendo-color-tertiary-subtle-hover, #bfdbf3), active-text: var(--kendo-color-tertiary-hover, #287ec7), active-border: transparent, active-hover-bg: var(--kendo-color-tertiary-subtle, #deecf9), active-hover-text: var(--kendo-color-tertiary-hover, #287ec7), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), warning: (bg: initial, text: var(--kendo-color-warning-on-surface, #7a6000), border: transparent, hover-bg: var(--kendo-color-warning-subtle, #fff4ce), hover-text: var(--kendo-color-warning-hover, #f5c000), hover-border: transparent, focus-bg: initial, focus-text: var(--kendo-color-warning-on-surface, #7a6000), focus-border: transparent, focus-outline: var(--kendo-color-warning-subtle-active, #ffe58d), focus-hover-bg: var(--kendo-color-warning-subtle, #fff4ce), focus-hover-text: var(--kendo-color-warning-hover, #f5c000), focus-hover-border: transparent, focus-hover-outline: var(--kendo-color-warning-subtle-active, #ffe58d), active-bg: var(--kendo-color-warning-subtle-hover, #ffedad), active-text: var(--kendo-color-warning-hover, #f5c000), active-border: transparent, active-hover-bg: var(--kendo-color-warning-subtle, #fff4ce), active-hover-text: var(--kendo-color-warning-hover, #f5c000), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), dark: (bg: initial, text: var(--kendo-color-dark-on-surface, #323130), border: transparent, hover-bg: var(--kendo-color-dark-subtle, #a19f9d), hover-text: var(--kendo-color-dark-hover, #201f1e), hover-border: transparent, focus-bg: initial, focus-text: var(--kendo-color-dark-on-surface, #323130), focus-border: transparent, focus-outline: var(--kendo-color-dark-subtle-active, #8a8886), focus-hover-bg: var(--kendo-color-dark-subtle, #a19f9d), focus-hover-text: var(--kendo-color-dark-hover, #201f1e), focus-hover-border: transparent, focus-hover-outline: var(--kendo-color-dark-subtle-active, #8a8886), active-bg: var(--kendo-color-dark-subtle-hover, #979593), active-text: var(--kendo-color-dark-hover, #201f1e), active-border: transparent, active-hover-bg: var(--kendo-color-dark-subtle, #a19f9d), active-hover-text: var(--kendo-color-dark-hover, #201f1e), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial), light: (bg: initial, text: var(--kendo-color-light-on-surface, #d2d0ce), border: transparent, hover-bg: var(--kendo-color-light-subtle, #faf9f8), hover-text: var(--kendo-color-light-hover, #c8c6c4), hover-border: transparent, focus-bg: initial, focus-text: var(--kendo-color-light-on-surface, #d2d0ce), focus-border: transparent, focus-outline: var(--kendo-color-light-subtle-active, #edebe9), focus-hover-bg: var(--kendo-color-light-subtle, #faf9f8), focus-hover-text: var(--kendo-color-light-hover, #c8c6c4), focus-hover-border: transparent, focus-hover-outline: var(--kendo-color-light-subtle-active, #edebe9), active-bg: var(--kendo-color-light-subtle-hover, #f3f2f1), active-text: var(--kendo-color-light-hover, #c8c6c4), active-border: transparent, active-hover-bg: var(--kendo-color-light-subtle, #faf9f8), active-hover-text: var(--kendo-color-light-hover, #c8c6c4), active-hover-border: transparent, disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: initial)))
Description The theme colors map for the Button.

Calendar

Name	Type	Default value	Computed value
$kendo-calendar-border-width	Number	`1px`	`1px`
Description The width of the border around the Calendar.
$kendo-calendar-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Calendar.
$kendo-calendar-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Calendar.
$kendo-calendar-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Calendar.
$kendo-calendar-cell-size	Number	`28px`	`28px`
Description The size of the calendar cell.
$kendo-calendar-bg	String	`var( --kendo-component-bg, initial)`	`var(--kendo-component-bg, initial)`
Description The background color of the Calendar.
$kendo-calendar-text	String	`var( --kendo-component-text, initial)`	`var(--kendo-component-text, initial)`
Description The text color of the Calendar.
$kendo-calendar-border	String	`var( --kendo-component-border, initial)`	`var(--kendo-component-border, initial)`
Description The border color of the Calendar.
$kendo-calendar-header-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the calendar header.
$kendo-calendar-header-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the calendar header.
$kendo-calendar-header-border-width	Number	`1px`	`1px`
Description Width of the bottom border of the calendar header.
$kendo-calendar-header-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the calendar header.
$kendo-calendar-header-text	String	`$kendo-calendar-text`	`var(--kendo-component-text, initial)`
Description The text color of the calendar header.
$kendo-calendar-header-border	String	`$kendo-calendar-border`	`var(--kendo-component-border, initial)`
Description The border color of the calendar header.
$kendo-calendar-nav-gap	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The spacing between the navigation buttons of the Calendar.
$kendo-calendar-footer-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the calendar footer.
$kendo-calendar-footer-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the calendar footer.
$kendo-calendar-cell-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the calendar cell.
$kendo-calendar-cell-padding-x	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The horizontal padding of the calendar cell.
$kendo-calendar-cell-padding-y	String	`$kendo-calendar-cell-padding-x`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the calendar cell.
$kendo-calendar-cell-line-height	String	`$kendo-calendar-line-height`	`var(--kendo-line-height, normal)`
Description The line height of the calendar cell.
$kendo-calendar-cell-border-radius	String	`var( --kendo-border-radius-md, 0)`	`var(--kendo-border-radius-md, 0)`
Description The border radius of the calendar cell.
$kendo-calendar-header-cell-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal padding of the calendar header cell.
$kendo-calendar-header-cell-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description Th vertical padding of the calendar header cell.
$kendo-calendar-header-cell-width	Number	`$kendo-calendar-cell-size`	`28px`
Description The width of the calendar header cell.
$kendo-calendar-header-cell-height	Number	`$kendo-calendar-cell-size`	`28px`
Description The height of the calendar header cell.
$kendo-calendar-header-cell-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the calendar header cell.
$kendo-calendar-header-cell-line-height	Number	`2`	`2`
Description The line height of the calendar header cell.
$kendo-calendar-header-cell-bg	String	`inherit`	`inherit`
Description The background color of the calendar header cell.
$kendo-calendar-header-cell-text	String	`inherit`	`inherit`
Description The text color of the calendar header cell.
$kendo-calendar-caption-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the calendar captions.
$kendo-calendar-caption-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the calendar captions.
$kendo-calendar-caption-height	Number	`$kendo-calendar-cell-size`	`28px`
Description The height of the calendar captions.
$kendo-calendar-caption-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the calendar captions.
$kendo-calendar-caption-line-height	String	`normal`	`normal`
Description The line height of the calendar captions.
$kendo-calendar-caption-font-weight	String	`bold`	`bold`
Description Font weight of the calendar captions.
$kendo-calendar-caption-color	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #605e5c)`
Description The text color of the calendar captions.
$kendo-calendar-view-width	Number	`($kendo-calendar-cell-size * 7)`	`196px`
Description The width of the Calendar view.
$kendo-calendar-view-height	Number	`($kendo-calendar-cell-size * 7)`	`196px`
Description The height of the Calendar view.
$kendo-calendar-view-padding-block-end	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The bottom padding of Calendar views.
$kendo-calendar-view-gap	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The spacing between the views in the multiview Calendar.
$kendo-calendar-weekend-bg	String	`inherit`	`inherit`
Description The background color of the calendar weekend cell.
$kendo-calendar-weekend-text	String	`inherit`	`inherit`
Description The text color of the calendar weekend cell.
$kendo-calendar-today-text	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The text color of the calendar today cell.
$kendo-calendar-today-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the calendar today cell.
$kendo-calendar-today-hover-text	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The text color of the calendar today cell when hovered.
$kendo-calendar-today-hover-bg	String	`if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 ))`	`var(--kendo-color-primary-hover, #106ebe)`
Description The background color of the calendar today cell when hovered.
$kendo-calendar-today-border-radius	Number	`9999px`	`9999px`
Description The border radius of the calendar today cell.
$kendo-calendar-week-number-bg	String	`inherit`	`inherit`
Description The background color of the calendar week number cell.
$kendo-calendar-week-number-text	String	`var( --kendo-subtle-text, inherit )`	`var(--kendo-subtle-text, inherit)`
Description The text color of the calendar week number cell.
$kendo-calendar-other-month-bg	String	`inherit`	`inherit`
Description The background color of the other months calendar cells.
$kendo-calendar-other-month-text	String	`var( --kendo-disabled-text, inherit )`	`var(--kendo-disabled-text, inherit)`
Description The text color of the other months calendar cells.
$kendo-calendar-cell-bg	String	`inherit`	`inherit`
Description The background color of the calendar cells.
$kendo-calendar-cell-text	String	`inherit`	`inherit`
Description The text color of the calendar cells.
$kendo-calendar-cell-hover-bg	String	`var( --kendo-hover-bg, inherit )`	`var(--kendo-hover-bg, inherit)`
Description The background color of the calendar cells when hovered.
$kendo-calendar-cell-hover-text	String	`var( --kendo-hover-text, inherit )`	`var(--kendo-hover-text, inherit)`
Description The text color of the calendar cells when hovered.
$kendo-calendar-cell-selected-bg	String	`var( --kendo-selected-bg, inherit )`	`var(--kendo-selected-bg, inherit)`
Description The background color of the selected calendar cell.
$kendo-calendar-cell-selected-text	String	`var( --kendo-selected-text, inherit )`	`var(--kendo-selected-text, inherit)`
Description The text color of the selected calendar cell.
$kendo-calendar-cell-selected-border	String	`var( --kendo-selected-border, inherit )`	`var(--kendo-selected-border, inherit)`
Description The border color of the selected calendar cell.
$kendo-calendar-cell-selected-shadow	List	`inset 0 0 0 1px $kendo-calendar-cell-selected-border`	`inset 0 0 0 1px var(--kendo-selected-border, inherit)`
Description The shadow of the selected calendar cell.
$kendo-calendar-cell-selected-hover-bg	String	`var( --kendo-selected-hover-bg, inherit )`	`var(--kendo-selected-hover-bg, inherit)`
Description The background color of the selected calendar cell when hovered.
$kendo-calendar-cell-selected-hover-text	String	`var( --kendo-selected-hover-text, inherit )`	`var(--kendo-selected-hover-text, inherit)`
Description The text color of the selected calendar cell when hovered.
$kendo-calendar-cell-focus-shadow	List	`inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))`	`inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c)`
Description The shadow of the selected calendar cell when focused.
$kendo-calendar-cell-selected-focus-shadow	List	`$kendo-calendar-cell-focus-shadow`	`inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c)`
Description The shadow of the selected calendar cell when selected and focused.
$kendo-calendar-navigation-width	Number	`5em`	`5em`
Description The width of the navigation in the infinite Calendar.
$kendo-calendar-navigation-item-height	Number	`2em`	`2em`
Description The height of the navigation items in the infinite Calendar.
$kendo-calendar-navigation-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the navigation in the infinite Calendar.
$kendo-calendar-navigation-text	String	`$kendo-calendar-header-text`	`var(--kendo-component-text, initial)`
Description The text color of the navigation in the infinite Calendar.
$kendo-calendar-navigation-border	String	`$kendo-calendar-header-border`	`var(--kendo-component-border, initial)`
Description The border color of the navigation in the infinite Calendar.
$kendo-calendar-navigation-hover-text	String	`$kendo-link-hover-text`	`var(--kendo-color-primary-hover, #106ebe)`
Description The text color of the hovered items in the calendar navigation.
$kendo-infinite-calendar-header-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The background color of the navigation in the infinite Calendar.
$kendo-infinite-calendar-header-padding-y	List	`k-spacing(3) k-spacing(1)`	`var(--kendo-spacing-3, 0.75rem) var(--kendo-spacing-1, 0.25rem)`
Description The background color of the navigation in the infinite Calendar.
$kendo-infinite-calendar-view-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the infinite Calendar.
$kendo-infinite-calendar-view-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical padding of the infinite Calendar.
$kendo-infinite-calendar-view-height	Number	`( $kendo-calendar-cell-size * 9 )`	`252px`
Description The height of the infinite Calendar view.
$kendo-calendar-range-bg	String	`if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 ))`	`var(--kendo-color-base-active, #edebe9)`
Description The background color of the range selection in the Calendar.
$kendo-calendar-range-text	String	`inherit`	`inherit`
Description The text color of the range selection in the Calendar.
$kendo-calendar-range-border	String	`if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-base-emphasis, #605e5c)`
Description The border color of the range selection in the Calendar.
$kendo-calendar-start-range-hover-shadow	List	`inset 1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))`	`inset 1px -1px 0 0 var(--kendo-color-base-emphasis, #605e5c), inset 0 1px 0 0 var(--kendo-color-base-emphasis, #605e5c)`
Description The shadow of the hovered start range selection in the Calendar.
$kendo-calendar-mid-range-hover-shadow	List	`inset 0 -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))`	`inset 0 -1px 0 0 var(--kendo-color-base-emphasis, #605e5c), inset 0 1px 0 0 var(--kendo-color-base-emphasis, #605e5c)`
Description The shadow of the hovered mid range selection in the Calendar.
$kendo-calendar-end-range-hover-shadow	List	`inset -1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))`	`inset -1px -1px 0 0 var(--kendo-color-base-emphasis, #605e5c), inset 0 1px 0 0 var(--kendo-color-base-emphasis, #605e5c)`
Description The shadow of the hovered end range selection in the Calendar.
$kendo-calendar-start-end-range-hover-shadow	List	`inset 1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset -1px 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))`	`inset 1px -1px 0 0 var(--kendo-color-base-emphasis, #605e5c), inset -1px 1px 0 0 var(--kendo-color-base-emphasis, #605e5c)`
Description The shadow of the hovered start-end range selection in the Calendar.
$kendo-calendar-sm-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the small Calendar.
$kendo-calendar-sm-line-height	String	`var( --kendo-line-height-sm, normal )`	`var(--kendo-line-height-sm, normal)`
Description The line height of the small Calendar.
$kendo-calendar-sm-cell-size	Number	`24px`	`24px`
Description The size of the cells in the small Calendar.
$kendo-calendar-sm-cell-padding-x	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The horizontal padding of the cells in the small Calendar.
$kendo-calendar-sm-cell-padding-y	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical padding of the cells in the small Calendar.
$kendo-calendar-sm-cell-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the cells in the small Calendar.
$kendo-calendar-md-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the medium Calendar.
$kendo-calendar-md-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the medium Calendar.
$kendo-calendar-md-cell-size	Number	`28px`	`28px`
Description The size of the cells in the medium Calendar.
$kendo-calendar-md-cell-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the cells in the medium Calendar.
$kendo-calendar-md-cell-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the cells in the medium Calendar.
$kendo-calendar-md-cell-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the cells in the medium Calendar.
$kendo-calendar-lg-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the large Calendar.
$kendo-calendar-lg-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the large Calendar.
$kendo-calendar-lg-cell-size	Number	`32px`	`32px`
Description The size of the cells in the large Calendar.
$kendo-calendar-lg-cell-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the cells in the large Calendar.
$kendo-calendar-lg-cell-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the cells in the large Calendar.
$kendo-calendar-lg-cell-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the cells in the large Calendar.
$kendo-calendar-sizes	Map	( sm: ( font-size: $kendo-calendar-sm-font-size, line-height: $kendo-calendar-sm-line-height, cell-size: $kendo-calendar-sm-cell-size, cell-padding-x: $kendo-calendar-sm-cell-padding-y, cell-padding-y: $kendo-calendar-sm-cell-padding-x, cell-font-size: $kendo-calendar-sm-cell-font-size ), md: ( font-size: $kendo-calendar-md-font-size, line-height: $kendo-calendar-md-line-height, cell-size: $kendo-calendar-md-cell-size, cell-padding-x: $kendo-calendar-md-cell-padding-y, cell-padding-y: $kendo-calendar-md-cell-padding-x, cell-font-size: $kendo-calendar-md-cell-font-size ), lg: ( font-size: $kendo-calendar-lg-font-size, line-height: $kendo-calendar-lg-line-height, cell-size: $kendo-calendar-lg-cell-size, cell-padding-x: $kendo-calendar-lg-cell-padding-y, cell-padding-y: $kendo-calendar-lg-cell-padding-x, cell-font-size: $kendo-calendar-lg-cell-font-size ) )	(sm: (font-size: var(--kendo-font-size-sm, inherit), line-height: var(--kendo-line-height-sm, normal), cell-size: 24px, cell-padding-x: var(--kendo-spacing-0\.5, 0.125rem), cell-padding-y: var(--kendo-spacing-0\.5, 0.125rem), cell-font-size: var(--kendo-font-size-sm, inherit)), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-size: 28px, cell-padding-x: var(--kendo-spacing-1, 0.25rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem), cell-font-size: var(--kendo-font-size-sm, inherit)), lg: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-size: 32px, cell-padding-x: var(--kendo-spacing-1, 0.25rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem), cell-font-size: var(--kendo-font-size, inherit)))
Description The sizes Map of the Calendar.

Captcha

Name	Type	Default value	Computed value
$kendo-captcha-spacer	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacer of the Captcha.
$kendo-captcha-width	Number	`280px`	`280px`
Description The width of the Captcha.
$kendo-captcha-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Captcha.
$kendo-captcha-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Captcha.
$kendo-captcha-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Captcha.
$kendo-captcha-spacing	String	`$kendo-captcha-spacer`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing of the Captcha.
$kendo-captcha-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Captcha.
$kendo-captcha-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Captcha.
$kendo-captcha-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the Captcha.
$kendo-captcha-image-wrap-spacing	String	`$kendo-captcha-spacer`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing of the Captcha image wrapper.
$kendo-captcha-image-controls-spacing	Calculation	`calc( #{$kendo-captcha-spacer} / 2 )`	`calc(var(--kendo-spacing-2, 0.5rem) / 2)`
Description The spacing of the Captcha image controls.
$kendo-captcha-validation-offset-y	Calculation	`calc( #{$kendo-captcha-spacer} / 2 )`	`calc(var(--kendo-spacing-2, 0.5rem) / 2)`
Description The offset of the Captcha validation message.
$kendo-captcha-validation-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the Captcha validation message.

Card

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

Chart

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

Charts

Name	Type	Default value	Computed value
$kendo-series-a	String	`if($kendo-enable-color-system, k-color( series-a ), k-get-theme-color-var( series-a-100 ))`	`var(--kendo-color-series-a, #0099bc)`
Description The first base series color and its light and dark shades.
$kendo-series-b	String	`if($kendo-enable-color-system, k-color( series-b ), k-get-theme-color-var( series-b-100 ))`	`var(--kendo-color-series-b, #e74856)`
Description The second base series color and its light and dark shades.
$kendo-series-c	String	`if($kendo-enable-color-system, k-color( series-c ), k-get-theme-color-var( series-c-100 ))`	`var(--kendo-color-series-c, #ffb900)`
Description The third base series color and its light and dark shades.
$kendo-series-d	String	`if($kendo-enable-color-system, k-color( series-d ), k-get-theme-color-var( series-d-100 ))`	`var(--kendo-color-series-d, #096edf)`
Description The fourth base series color and its light and dark shades.
$kendo-series-e	String	`if($kendo-enable-color-system, k-color( series-e ), k-get-theme-color-var( series-e-100 ))`	`var(--kendo-color-series-e, #8764b8)`
Description The fifth base series color and its light and dark shades.
$kendo-series-f	String	`if($kendo-enable-color-system, k-color( series-f ), k-get-theme-color-var( series-f-100 ))`	`var(--kendo-color-series-f, #00cc6a)`
Description The sixth base series color and its light and dark shades.
$kendo-series-1	String	`$kendo-series-a`	`var(--kendo-color-series-a, #0099bc)`
Description The series colors in order: base, light, dark, lighter, darker
$kendo-chart-border-width	List	`0px default`	`0px default`
Description The border width of the chart component.
$kendo-chart-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font-family of the chart component.
$kendo-chart-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font-size of the chart component.
$kendo-chart-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line-height of the chart component.
$kendo-chart-tooltip-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font-size of the tooltip of the chart component.
$kendo-chart-tooltip-line-height	String	`var( --kendo-line-height-sm, normal )`	`var(--kendo-line-height-sm, normal)`
Description The line-height of the tooltip of the chart component.
$kendo-chart-title-font-size	String	`var( --kendo-font-size-lg, inherit )`	`var(--kendo-font-size-lg, inherit)`
Description The font-size of the title of the chart component.
$kendo-chart-pane-title-font-size	String	`var( --kendo-font-size-lg, inherit )`	`var(--kendo-font-size-lg, inherit)`
Description The font-size of the pane title of the chart component.
$kendo-chart-pane-title-font-weight	String	`var( --kendo-font-weight, inherit )`	`var(--kendo-font-weight, inherit)`
Description The font-weight of the pane title of the chart component.
$kendo-chart-major-lines	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))`	`color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)`
Description The color of the chart component major grid lines.
$kendo-chart-minor-lines	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))`	`color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)`
Description The color of the chart component minor grid lines.
$kendo-chart-area-opacity	Number	`.6`	`0.6`
Description The opacity of the chart area.
$kendo-chart-area-inactive-opacity	Number	`.1`	`0.1`
Description The inactive opacity of the chart area.
$kendo-chart-line-inactive-opacity	Number	`.3`	`0.3`
Description The inactive opacity of the chart line.
$kendo-chart-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the chart component.
$kendo-chart-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the chart component.
$kendo-chart-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the chart component.
$kendo-chart-tooltip-color	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The text color of the chart tooltip.
$kendo-chart-tooltip-color-inverse	String	`if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)`	`var(--kendo-color-on-app-surface, #323130)`
Description The inverse text color of the chart tooltip.
$kendo-chart-crosshair-background	String	`if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)`	`var(--kendo-color-on-app-surface, #323130)`
Description The background color of the chart crosshairs.
$kendo-chart-crosshair-shared-tooltip-color	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the chart shared crosshair tooltip.
$kendo-chart-crosshair-shared-tooltip-background	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the chart shared crosshair tooltip.
$kendo-chart-crosshair-shared-tooltip-border	Color	`transparent`	`transparent`
Description The border color of the chart shared crosshair tooltip.
$kendo-chart-notes-background	String	`if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-base-emphasis, #605e5c)`
Description The background color of the chart notes.
$kendo-chart-notes-border	String	`$kendo-chart-notes-background`	`var(--kendo-color-base-emphasis, #605e5c)`
Description The border color of the chart notes.
$kendo-chart-notes-lines	String	`$kendo-chart-notes-background`	`var(--kendo-color-base-emphasis, #605e5c)`
Description The background color of the chart note lines.
$kendo-chart-handle-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the chart handle.
$kendo-chart-handle-text	String	`$kendo-chart-text`	`var(--kendo-component-text, initial)`
Description The text color of the chart handle.
$kendo-chart-handle-border	String	`$kendo-chart-handle-bg`	`var(--kendo-color-surface, #faf9f8)`
Description The border color of the chart handle.
$kendo-chart-handle-hover-bg	String	`var( --kendo-hover-bg, initial )`	`var(--kendo-hover-bg, initial)`
Description The hover background color of the chart handle.
$kendo-chart-handle-hover-text	String	`var( --kendo-hover-text, initial )`	`var(--kendo-hover-text, initial)`
Description The hover text color of the chart handle.
$kendo-chart-handle-hover-border	String	`var( --kendo-hover-border, initial )`	`var(--kendo-hover-border, initial)`
Description The hover border color of the chart handle.
$kendo-color-error-bars-background	String	`if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( neutral-110 ))`	`var(--kendo-color-error, #c2666b)`
Description The color of the chart error bars.
$kendo-selection-handle-size	Number	`24px`	`24px`
Description The size of the selection handle of the chart component.
$kendo-selection-border-color	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The color of the selection handle of the chart component.
$kendo-treemap-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font-family of the treemap.
$kendo-treemap-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font-size of the treemap.
$kendo-treemap-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line-height of the treemap.
$kendo-treemap-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the treemap.
$kendo-treemap-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the treemap.
$kendo-treemap-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the treemap.
$kendo-treemap-title-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the treemap title.
$kendo-treemap-title-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the treemap title.
$kendo-treemap-title-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the treemap title.

Chat

Name	Type	Default value	Computed value
$kendo-chat-transition	String	`var( --kendo-transition, inherit )`	`var(--kendo-transition, inherit)`
Description The box shadow transition of the Chat.
$kendo-chat-link-hover-text	String	`var( --kendo-link-hover-text, inherit )`	`var(--kendo-link-hover-text, inherit)`
Description The hover text color of the Chat bubble links.
$kendo-chat-link-text	String	`var( --kendo-link-text, inherit )`	`var(--kendo-link-text, inherit)`
Description The text color of the Chat bubble links.
$kendo-chat-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the Chat.
$kendo-chat-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the Chat.
$kendo-chat-width	Number	`500px`	`500px`
Description The width of the Chat.
$kendo-chat-height	Number	`600px`	`600px`
Description The height of the Chat.
$kendo-chat-border-width	Number	`1px`	`1px`
Description The border width of the Chat.
$kendo-chat-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Chat.
$kendo-chat-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Chat.
$kendo-chat-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Chat.
$kendo-chat-typing-indicator-dot-size	Number	`8px`	`8px`
Description The size of the Chat typing indicator dot.
$kendo-chat-typing-indicator-dot-spacing	Calculation	`calc( #{k-spacing(2.5)} / 2 )`	`calc(var(--kendo-spacing-2\.5, 0.625rem) / 2)`
Description The spacing of the Chat typing indicator dot.
$kendo-chat-item-spacing-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal spacing between the items of the Chat.
$kendo-chat-item-spacing-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The vertical spacing between the items of the Chat.
$kendo-chat-message-list-padding-x	String	`$kendo-chat-padding-x`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the Chat message list.
$kendo-chat-message-list-padding-y	String	`$kendo-chat-padding-y`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the Chat message list.
$kendo-chat-message-list-spacing	String	`$kendo-chat-item-spacing-y`	`var(--kendo-spacing-4, 1rem)`
Description The spacing of the Chat message list.
$kendo-chat-timestamp-font-size	String	`smaller`	`smaller`
Description The font size of the Chat timestamp.
$kendo-chat-timestamp-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Chat timestamp.
$kendo-chat-timestamp-transform	String	`uppercase`	`uppercase`
Description The text transform of the Chat timestamp.
$kendo-chat-timestamp-text	String	`var( --kendo-subtle-text, inherit )`	`var(--kendo-subtle-text, inherit)`
Description The text color of the Chat timestamp.
$kendo-chat-timestamp-bg	String	`normal`	`normal`
Description The background color of the Chat timestamp.
$kendo-chat-bubble-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the Chat bubble message.
$kendo-chat-bubble-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Chat bubble message.
$kendo-chat-bubble-spacing	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The spacing of the Chat bubble message.
$kendo-chat-bubble-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Chat bubble message.
$kendo-chat-scroll-button	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing of the Chat scroll button.
$kendo-card-deck-scrollbar-size	Number	`20px`	`20px`
Description The size of the Chat Card deck scrollbar.
$kendo-chat-bubble-border-radius	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The border radius of the Chat bubble message.
$kendo-chat-bubble-border-radius-sm	String	`var( --kendo-border-radius, 0 )`	`var(--kendo-border-radius, 0)`
Description The border radius of the Chat small bubble message
$kendo-chat-avatar-size	Number	`32px`	`32px`
Description The size of the Chat Avatar.
$kendo-chat-avatar-spacing	String	`$kendo-chat-item-spacing-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing of the Chat Avatar.
$kendo-chat-toolbar-padding-x	String	`$kendo-toolbar-md-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Chat Toolbar.
$kendo-chat-toolbar-padding-y	String	`$kendo-toolbar-md-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Chat Toolbar.
$kendo-chat-toolbar-spacing	String	`$kendo-toolbar-md-spacing`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing of the Chat Toolbar.
$kendo-chat-toolbar-bg	String	`$kendo-toolbar-bg`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the Chat Toolbar.
$kendo-chat-toolbar-text	String	`$kendo-toolbar-text`	`var(--kendo-component-text, inherit)`
Description The text color of the Chat Toolbar.
$kendo-chat-toolbar-border	String	`inherit`	`inherit`
Description The border color of the Chat Toolbar.
$kendo-chat-quick-reply-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the Chat quick reply.
$kendo-chat-quick-reply-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Chat quick reply.
$kendo-chat-quick-reply-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing of the Chat quick reply.
$kendo-chat-quick-reply-line-height	String	`$kendo-chat-bubble-line-height`	`var(--kendo-line-height, normal)`
Description The line height of the Chat quick reply.
$kendo-chat-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the Chat.
$kendo-chat-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the Chat.
$kendo-chat-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))`	`color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)`
Description The border color of the Chat.
$kendo-chat-bubble-bg	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description The background color of the Chat bubble.
$kendo-chat-bubble-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the Chat bubble.
$kendo-chat-bubble-border	String	`$kendo-chat-bubble-bg`	`var(--kendo-component-bg, inherit)`
Description The border color of the Chat bubble.
$kendo-chat-bubble-shadow	String	`var( --kendo-box-shadow-depth-1, none )`	`var(--kendo-box-shadow-depth-1, none)`
Description The box shadow of the Chat bubble.
$kendo-chat-bubble-hover-shadow	String	`var( --kendo-box-shadow-depth-2, none )`	`var(--kendo-box-shadow-depth-2, none)`
Description The shadow of the hovered Chat bubble.
$kendo-chat-bubble-selected-shadow	String	`var( --kendo-box-shadow-depth-3, none )`	`var(--kendo-box-shadow-depth-3, none)`
Description The shadow of the selected Chat bubble.
$kendo-chat-alt-bubble-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the Chat alt bubble.
$kendo-chat-alt-bubble-text	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description The text color of the Chat alt bubble.
$kendo-chat-alt-bubble-border	String	`$kendo-chat-alt-bubble-bg`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the Chat alt bubble.
$kendo-chat-alt-bubble-shadow	String	`var( --kendo-box-shadow-depth-1, none )`	`var(--kendo-box-shadow-depth-1, none)`
Description The shadow of the Chat alt bubble.
$kendo-chat-alt-bubble-hover-shadow	String	`var( --kendo-box-shadow-depth-2, none )`	`var(--kendo-box-shadow-depth-2, none)`
Description The shadow of the hovered Chat alt bubble.
$kendo-chat-alt-bubble-selected-shadow	String	`var( --kendo-box-shadow-depth-3, none )`	`var(--kendo-box-shadow-depth-3, none)`
Description The shadow of the selected Chat alt bubble.
$kendo-chat-quick-reply-bg	Color	`transparent`	`transparent`
Description The background color of the Chat quick reply.
$kendo-chat-quick-reply-text	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The text color of the Chat quick reply.
$kendo-chat-quick-reply-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the Chat quick reply.
$kendo-chat-quick-reply-hover-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the hovered Chat quick reply.
$kendo-chat-quick-reply-hover-text	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description The text color of the hovered Chat quick reply.
$kendo-chat-quick-reply-hover-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the hovered Chat quick reply.

Checkbox

Name	Type	Default value	Computed value
$kendo-checkbox-border-radius	Null	`null`	`null`
Description The border radius of the CheckBox.
$kendo-checkbox-border-width	Number	`1px`	`1px`
Description The border width of the CheckBox.
$kendo-checkbox-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the CheckBox.
$kendo-checkbox-text	Color	`transparent`	`transparent`
Description The text color of the CheckBox.
$kendo-checkbox-border	String	`if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-border-alt, #323130)`
Description The border color of the CheckBox.
$kendo-checkbox-hover-bg	String	`$kendo-checkbox-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the hovered CheckBox.
$kendo-checkbox-hover-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color( neutral, 130 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the hovered CheckBox.
$kendo-checkbox-hover-border	String	`$kendo-checkbox-border`	`var(--kendo-color-border-alt, #323130)`
Description The border color of the hovered CheckBox.
$kendo-checkbox-checked-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the checked CheckBox.
$kendo-checkbox-checked-text	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The text color of the checked CheckBox.
$kendo-checkbox-checked-border	String	`$kendo-checkbox-checked-bg`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the checked CheckBox.
$kendo-checkbox-hover-checked-bg	String	`if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))`	`var(--kendo-color-primary-hover, #106ebe)`
Description The background of the hovered and checked CheckBox.
$kendo-checkbox-hover-checked-text	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The text color of the hovered and checked CheckBox.
$kendo-checkbox-hover-checked-border	String	`$kendo-checkbox-hover-checked-bg`	`var(--kendo-color-primary-hover, #106ebe)`
Description The border color of the hovered and checked CheckBox.
$kendo-checkbox-focus-border	Null	`null`	`null`
Description The border color of the focused CheckBox.
$kendo-checkbox-focus-shadow	Null	`null`	`null`
Description The box shadow of the focused CheckBox.
$kendo-checkbox-focus-outline	List	`1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))`	`1px solid var(--kendo-color-base-emphasis, #605e5c)`
Description The outline of the focused CheckBox.
$kendo-checkbox-indeterminate-bg	String	`$kendo-checkbox-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-text	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color( primary, 100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The text color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the indeterminate CheckBox.
$kendo-checkbox-hover-indeterminate-bg	String	`$kendo-checkbox-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the hovered and indeterminate CheckBox.
$kendo-checkbox-hover-indeterminate-text	String	`if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color( primary, 110 ))`	`var(--kendo-color-primary-hover, #106ebe)`
Description The text color of the hovered and indeterminate CheckBox.
$kendo-checkbox-hover-indeterminate-border	String	`if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))`	`var(--kendo-color-primary-hover, #106ebe)`
Description The border color of the hovered and indeterminate CheckBox.
$kendo-checkbox-disabled-bg	String	`$kendo-checkbox-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the disabled CheckBox.
$kendo-checkbox-disabled-text	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)`
Description The text color of the disabled CheckBox.
$kendo-checkbox-disabled-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)`
Description The border color of the disabled CheckBox.
$kendo-checkbox-disabled-checked-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)`
Description The background color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-text	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The text color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-border	Color	`if($kendo-enable-color-system, transparent, k-get-theme-color-var( neutral-60 ))`	`transparent`
Description The border color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-indeterminate-bg	String	`$kendo-checkbox-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the disabled and indeterminate CheckBox.
$kendo-checkbox-disabled-indeterminate-text	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color( neutral, 60 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)`
Description The border color of the disabled and indeterminate CheckBox.
$kendo-checkbox-disabled-indeterminate-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)`
Description The border color of the disabled and indeterminate CheckBox.
$kendo-checkbox-invalid-bg	String	`$kendo-checkbox-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of an invalid CheckBox.
$kendo-checkbox-invalid-text	String	`$kendo-invalid-text`	`var(--kendo-color-error-on-surface, #a4262c)`
Description The text color of an invalid CheckBox.
$kendo-checkbox-invalid-border	String	`$kendo-invalid-border`	`var(--kendo-color-error-emphasis, #a4262c)`
Description The border color of an invalid CheckBox.
$kendo-checkbox-indicator-type	String	`image`	`image`
Description The type of the CheckBox indicator.
$kendo-checkbox-glyph-font-family	List	`"WebComponentsIcons", monospace`	`"WebComponentsIcons", monospace`
Description The font family of the CheckBox indicator glyph.
$kendo-checkbox-checked-glyph	String	`"\e118"`	`"\e118"`
Description The glyph of the CheckBox indicator.
$kendo-checkbox-indeterminate-glyph	String	`"\e121"`	`"\e121"`
Description The glyph of the indeterminate CheckBox indicator.
$kendo-checkbox-hover-image	String	`escape-svg( url("data:image/svg+xml,") )`	`url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='var%28--kendo-color-on-app-surface, %23323130%29' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e")`
Description The image of the hovered CheckBox indicator.
$kendo-checkbox-checked-image	String	`escape-svg( url("data:image/svg+xml,") )`	`url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='var%28--kendo-color-app-surface, %23ffffff%29' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e")`
Description The image of the checked CheckBox indicator.
$kendo-checkbox-indeterminate-image	String	`escape-svg( url("data:image/svg+xml,") )`	`url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='3' y='3' width='10' height='10' rx='2' fill='var%28--kendo-color-primary, %230078d4%29'/%3e%3c/svg%3e")`
Description The image of the indeterminate CheckBox indicator.
$kendo-checkbox-hover-checked-image	String	`escape-svg( url("data:image/svg+xml,") )`	`url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='var%28--kendo-color-app-surface, %23ffffff%29' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e")`
Description The image of the hovered and checked CheckBox indicator.
$kendo-checkbox-hover-indeterminate-image	String	`escape-svg( url("data:image/svg+xml,") )`	`url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='3' y='3' width='10' height='10' rx='2' fill='var%28--kendo-color-primary-hover, %23106ebe%29'/%3e%3c/svg%3e")`
Description The image of the hovered and indeterminate CheckBox indicator.
$kendo-checkbox-disabled-checked-image	String	`escape-svg( url("data:image/svg+xml,") )`	`url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='var%28--kendo-color-app-surface, %23ffffff%29' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e")`
Description The image of the checked CheckBox indicator.
$kendo-checkbox-disabled-indeterminate-image	String	`escape-svg( url("data:image/svg+xml,") )`	`url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='3' y='3' width='10' height='10' rx='2' fill='color-mix%28in srgb, var%28--kendo-color-on-app-surface, %23323130%29 28%25, transparent%29'/%3e%3c/svg%3e")`
Description The image of the indeterminate CheckBox indicator.
$kendo-checkbox-label-margin-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal margin of the CheckBox inside a label.
$kendo-checkbox-list-spacing	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The spacing between the items in a horizontal CheckBox list.
$kendo-checkbox-list-item-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal padding of the CheckBox list items.
$kendo-checkbox-list-item-padding-y	String	`$kendo-list-md-item-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the CheckBox list items.
$kendo-checkbox-ripple-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the CheckBox' ripple.
$kendo-checkbox-ripple-opacity	Number	`.25`	`0.25`
Description The opacity of the CheckBox' ripple.

Chip

Name	Type	Default value	Computed value
$kendo-chip-border-width	Number	`1px`	`1px`
Description The width of the border around the Chip.
$kendo-chip-spacing	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The spacing between the text and the icons of the Chip.
$kendo-chip-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Chip.
$kendo-chip-avatar-width	Number	`1em`	`1em`
Description The width of the Chip' avatar.
$kendo-chip-avatar-height	Number	`1em`	`1em`
Description The height of the Chip' avatar.
$kendo-chip-avatar-flex-basis	Number	`1em`	`1em`
Description The flex basis of the Chip' avatar.
$kendo-chip-disabled-text	String	`var( --kendo-disabled-text, inherit )`	`var(--kendo-disabled-text, inherit)`
Description The text color of the disabled Chip.
$kendo-chip-solid-disabled-bg	String	`var( --kendo-disabled-bg, transparent )`	`var(--kendo-disabled-bg, transparent)`
Description The background color of the solid disabled Chip.
$kendo-chip-solid-disabled-border	String	`var( --kendo-disabled-border, inherit )`	`var(--kendo-disabled-border, inherit)`
Description The border color of the solid disabled Chip.
$kendo-chip-outline-disabled-bg	String	`var( $kendo-component-bg, transparent )`	`var(var(--kendo-color-surface-alt, #ffffff), transparent)`
Description The background color of the outline disabled Chip.
$kendo-chip-outline-disabled-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)`
Description The border color of the outline disabled Chip.
$kendo-chip-focus-offset	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The offset of the outline focused Chip.
$kendo-chip-focus-outline-width	Number	`1px`	`1px`
Description The outline width of the outline focused Chip.
$kendo-chip-focus-outline-style	String	`solid`	`solid`
Description The outline style of the outline focused Chip.
$kendo-chip-sm-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the small Chip.
$kendo-chip-md-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the medium Chip.
$kendo-chip-lg-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the large Chip.
$kendo-chip-sm-padding-y	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical padding of the small Chip.
$kendo-chip-md-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the medium Chip.
$kendo-chip-lg-padding-y	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the large Chip.
$kendo-chip-sm-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the small Chip.
$kendo-chip-md-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the medium Chip.
$kendo-chip-lg-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the large Chip.
$kendo-chip-sm-line-height	String	`var( --kendo-line-height, normal )`	`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	String	`var( --kendo-line-height, normal )`	`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	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The large Chip's line height that is related to the $kendo-font-size.
$kendo-chip-calc-size	Calculation	`calc( #{$kendo-chip-md-line-height} * 1em + #{$kendo-chip-md-padding-y} * 2 + #{$kendo-chip-border-width} * 2 )`	`calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)`
Description The calculated height of the Chip.
$kendo-chip-sizes	Map	`( sm: ( padding-x: $kendo-chip-sm-padding-x, padding-y: $kendo-chip-sm-padding-y, font-size: $kendo-chip-sm-font-size, line-height: $kendo-chip-sm-line-height ), md: ( padding-x: $kendo-chip-md-padding-x, padding-y: $kendo-chip-md-padding-y, font-size: $kendo-chip-md-font-size, line-height: $kendo-chip-md-line-height ), lg: ( padding-x: $kendo-chip-lg-padding-x, padding-y: $kendo-chip-lg-padding-y, font-size: $kendo-chip-lg-font-size, line-height: $kendo-chip-lg-line-height ) )`	(sm: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-0\.5, 0.125rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-1, 0.25rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), lg: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-1\.5, 0.375rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)))
Description The map with the sizes of the Chip.
$kendo-chip-list-sizes	Map	`( sm: k-spacing(1), md: k-spacing(1), lg: k-spacing(1) )`	`(sm: var(--kendo-spacing-1, 0.25rem), md: var(--kendo-spacing-1, 0.25rem), lg: var(--kendo-spacing-1, 0.25rem))`
Description The sizes of the Chip list.

Cologradient

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

Color System

Name	Type	Default value	Computed value
$kendo-colors	Map	`$_default-colors`	(app-surface: #ffffff, on-app-surface: #323130, subtle: #605e5c, surface: #faf9f8, surface-alt: #ffffff, border: #8a8886, border-alt: #323130, base-subtle: #edebe9, base-subtle-hover: #e1dfdd, base-subtle-active: #d2d0ce, base: #ffffff, base-hover: #f3f2f1, base-active: #edebe9, base-emphasis: #605e5c, base-on-subtle: #323130, on-base: #323130, base-on-surface: #323130, primary-subtle: #deecf9, primary-subtle-hover: #c7e0f4, primary-subtle-active: #abd1ef, primary: #0078d4, primary-hover: #106ebe, primary-active: #005a9e, primary-emphasis: #004578, primary-on-subtle: #001c30, on-primary: #ffffff, primary-on-surface: #0078d4, secondary-subtle: #faf9f8, secondary-subtle-hover: #f3f2f1, secondary-subtle-active: #edebe9, secondary: #979593, secondary-hover: #8a8886, secondary-active: #797775, secondary-emphasis: #605e5c, secondary-on-subtle: #323130, on-secondary: #ffffff, secondary-on-surface: #605e5c, tertiary-subtle: #deecf9, tertiary-subtle-hover: #bfdbf3, tertiary-subtle-active: #aacfef, tertiary: #2b88d8, tertiary-hover: #287ec7, tertiary-active: #2473b7, tertiary-emphasis: #2169a6, tertiary-on-subtle: #174974, on-tertiary: #ffffff, tertiary-on-surface: #2b88d8, info-subtle: #cee5ff, info-subtle-hover: #add4ff, info-subtle-active: #8dc3ff, info: #0a7eff, info-hover: #096edf, info-active: #085ebf, info-emphasis: #064f9f, info-on-subtle: #032040, on-info: #ffffff, info-on-surface: #096edf, success-subtle: #dff6dd, success-subtle-hover: #c8e8c6, success-subtle-active: #b1dbaf, success: #55a554, success-hover: #3e973e, success-active: #278a27, success-emphasis: #107c10, success-on-subtle: #063206, on-success: #ffffff, success-on-surface: #107c10, warning-subtle: #fff4ce, warning-subtle-hover: #ffedad, warning-subtle-active: #ffe58d, warning: #ffc80a, warning-hover: #f5c000, warning-active: #e0b000, warning-emphasis: #4e4d4b, warning-on-subtle: #323130, on-warning: #323130, warning-on-surface: #7a6000, error-subtle: #fde7e9, error-subtle-hover: #f3d2d4, error-subtle-active: #e9bcbf, error: #c2666b, error-hover: #b85156, error-active: #ae3b41, error-emphasis: #a4262c, error-on-subtle: #420f12, on-error: #ffffff, error-on-surface: #a4262c, light-subtle: #faf9f8, light-subtle-hover: #f3f2f1, light-subtle-active: #edebe9, light: #d2d0ce, light-hover: #c8c6c4, light-active: #a19f9d, light-emphasis: #e1dfdd, light-on-subtle: #323130, on-light: #323130, light-on-surface: #d2d0ce, dark-subtle: #a19f9d, dark-subtle-hover: #979593, dark-subtle-active: #8a8886, dark: #323130, dark-hover: #201f1e, dark-active: #000000, dark-emphasis: #797775, dark-on-subtle: #201f1e, on-dark: #ffffff, dark-on-surface: #323130, inverse-subtle: #a19f9d, inverse-subtle-hover: #979593, inverse-subtle-active: #8a8886, inverse: #323130, inverse-hover: #201f1e, inverse-active: #000000, inverse-emphasis: #797775, inverse-on-subtle: #201f1e, on-inverse: #ffffff, inverse-on-surface: #323130, series-a: #0099bc, series-a-bold: #00738d, series-a-bolder: #004d5e, series-a-subtle: #40b3cd, series-a-subtler: #80ccdd, series-b: #e74856, series-b-bold: #ad3641, series-b-bolder: #74242b, series-b-subtle: #ed7680, series-b-subtler: #f3a3aa, series-c: #ffb900, series-c-bold: #bf8b00, series-c-bolder: #805d00, series-c-subtle: #ffcb40, series-c-subtler: #ffdc80, series-d: #096edf, series-d-bold: #064f9f, series-d-bolder: #042f60, series-d-subtle: #2b8fff, series-d-subtler: #6cb2ff, series-e: #8764b8, series-e-bold: #654b8a, series-e-bolder: #44325c, series-e-subtle: #a58bca, series-e-subtler: #c3b1db, series-f: #00cc6a, series-f-bold: #009950, series-f-bolder: #006635, series-f-subtle: #40d98f, series-f-subtler: #80e5b4)
Description The global default Colors map.
$kendo-color-white	Color	`#ffffff`	`#ffffff`
Description The color white. Note: you cannot change this value.
$kendo-color-black	Color	`#000000`	`#000000`
Description The color black. Note: you cannot change this value.
$kendo-color-rgba-transparent	Color	`rgba(0, 0, 0, 0)`	`rgba(0, 0, 0, 0)`
Description The color transparent. Note: you cannot change this value.
$kendo-gradient-transparent-to-black	Gradient	`rgba(black, 0), black`	`rgba(0, 0, 0, 0), black`
Description A gradient that goes from transparent to black. Note: you cannot change this value.
$kendo-gradient-transparent-to-white	Gradient	`rgba(white, 0), white`	`rgba(255, 255, 255, 0), white`
Description A gradient that goes from transparent to white. Note: you cannot change this value.
$kendo-gradient-black-to-transparent	Gradient	`black, rgba(black, 0)`	`black, rgba(0, 0, 0, 0)`
Description A gradient that goes from black to transparent. Note: you cannot change this value.
$kendo-gradient-white-to-transparent	Gradient	`white, rgba(white, 0)`	`white, rgba(255, 255, 255, 0)`
Description A gradient that goes from white to transparent. Note: you cannot change this value.
$kendo-gradient-rainbow	Gradient	`#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000`	`#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000`
Description A gradient that cycles through the colors of the rainbow. Note: you cannot change this value.

Color-preview

Name	Type	Default value	Computed value
$kendo-color-preview-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description Border radius of the color preview.
$kendo-color-preview-border-width	Number	`1px`	`1px`
Description Border width of the color preview.
$kendo-color-preview-bg	Color	`transparent`	`transparent`
Description Default background color of the color preview.
$kendo-color-preview-text	String	`inherit`	`inherit`
Description Text color of the color preview.
$kendo-color-preview-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)`
Description Border color of the color preview.
$kendo-color-preview-hover-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)`
Description Hover Border color of the color preview.
$kendo-color-preview-no-color-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description Background color of the color preview when no color is selected.
$kendo-color-preview-no-color-text	String	`if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color( error, 190 ))`	`var(--kendo-color-error-on-surface, #a4262c)`
Description Text color of the color preview when no color is selected.
$kendo-color-preview-no-color-border	String	`currentColor`	`currentColor`
Description Border color of the color preview when no color is selected.

Coloreditor

Name	Type	Default value	Computed value
$kendo-color-editor-spacer	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacer of the ColorEditor.
$kendo-color-editor-min-width	Number	`260px`	`260px`
Description The minimum width of the ColorEditor.
$kendo-color-editor-border-width	Number	`1px`	`1px`
Description The width of the border around the ColorEditor.
$kendo-color-editor-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the ColorEditor.
$kendo-color-editor-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the ColorEditor.
$kendo-color-editor-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the ColorEditor.
$kendo-color-editor-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the ColorEditor.
$kendo-color-editor-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the ColorEditor.
$kendo-color-editor-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the ColorEditor.
$kendo-color-editor-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the ColorEditor.
$kendo-color-editor-shadow	String	`var( --kendo-box-shadow-depth-2, none )`	`var(--kendo-box-shadow-depth-2, none)`
Description The box shadow of the ColorEditor.
$kendo-color-editor-focus-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 ))`	`color-mix(in srgb, var(--kendo-color-border, #8a8886) 10%, transparent)`
Description The border color of the focused ColorEditor.
$kendo-color-editor-focus-shadow	String	`var( --kendo-box-shadow-depth-3, none )`	`var(--kendo-box-shadow-depth-3, none)`
Description The box shadow of the focused ColorEditor.
$kendo-color-editor-header-padding-y	String	`$kendo-color-editor-spacer`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the ColorEditor header.
$kendo-color-editor-header-padding-x	String	`$kendo-color-editor-header-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the ColorEditor header.
$kendo-color-editor-header-actions-spacing	Calculation	`calc( #{$kendo-color-editor-spacer} / 2 )`	`calc(var(--kendo-spacing-2, 0.5rem) / 2)`
Description The spacing between the ColorEditor header actions.
$kendo-color-editor-color-preview-width	Number	`34px`	`34px`
Description The width of the ColorEditor preview.
$kendo-color-editor-color-preview-height	Number	`14px`	`14px`
Description The height of the ColorEditor preview.
$kendo-color-editor-preview-spacing	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The spacing between the colors in the ColorEditor preview.
$kendo-color-editor-views-padding-y	String	`$kendo-color-editor-spacer`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the ColorEditor views container.
$kendo-color-editor-views-padding-x	String	`$kendo-color-editor-views-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the ColorEditor views container.
$kendo-color-editor-views-spacing	String	`$kendo-color-editor-spacer`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing of the ColorEditor views container.
$kendo-color-editor-footer-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the ColorEditor footer.
$kendo-color-editor-footer-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the ColorEditor footer.
$kendo-color-editor-color-gradient-focus-outline-color	Color	`rgba(0, 0, 0, 0.3)`	`rgba(0, 0, 0, 0.3)`
Description The outline color of the focused ColorGradient.
$kendo-color-editor-color-gradient-focus-outline	Number	`2px`	`2px`
Description The outline width of the focused ColorGradient.
$kendo-color-editor-color-gradient-focus-outline-offset	Number	`2px`	`2px`
Description The outline offset of the focused ColorGradient.

Colorpalette

Name	Type	Default value	Computed value
$kendo-color-palette-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the ColorPalette.
$kendo-color-palette-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the ColorPalette.
$kendo-color-palette-line-height	Number	`0`	`0`
Description The line height of the ColorPalette.
$kendo-color-palette-tile-outline-width	Number	`1px`	`1px`
Description The outline width of the ColorPalette tile.
$kendo-color-palette-tile-outline-style	String	`solid`	`solid`
Description The outline style of the ColorPalette tile.
$kendo-color-palette-tile-outline	Color	`transparent`	`transparent`
Description The outline color of the ColorPalette tile.
$kendo-color-palette-tile-width	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The width of the ColorPalette tile.
$kendo-color-palette-tile-height	String	`$kendo-color-palette-tile-width`	`var(--kendo-spacing-6, 1.5rem)`
Description The height of the ColorPalette tile.
$kendo-color-palette-tile-focus-outline	String	`if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-base-emphasis, #605e5c)`
Description The outline color of the ColorPalette focused tile.
$kendo-color-palette-tile-focus-shadow	List	`inset 0 0 0 2px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`inset 0 0 0 2px var(--kendo-color-app-surface, #ffffff)`
Description The shadow of the ColorPalette focused tile.
$kendo-color-palette-tile-hover-outline	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 ))`	`color-mix(in srgb, var(--kendo-color-border, #8a8886) 10%, transparent)`
Description The outline color of the ColorPalette hovered tile.
$kendo-color-palette-tile-hover-shadow	List	`inset 0 0 0 2px $kendo-color-palette-tile-hover-outline, inset 0 0 0 4px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`inset 0 0 0 2px color-mix(in srgb, var(--kendo-color-border, #8a8886) 10%, transparent), inset 0 0 0 4px var(--kendo-color-app-surface, #ffffff)`
Description The shadow of the ColorPalette hovered tile.
$kendo-color-palette-tile-selected-outline	String	`$kendo-color-palette-tile-hover-outline`	`color-mix(in srgb, var(--kendo-color-border, #8a8886) 10%, transparent)`
Description The outline color of the ColorPalette selected tile.
$kendo-color-palette-tile-selected-shadow	List	`$kendo-color-palette-tile-hover-shadow`	`inset 0 0 0 2px color-mix(in srgb, var(--kendo-color-border, #8a8886) 10%, transparent), inset 0 0 0 4px var(--kendo-color-app-surface, #ffffff)`
Description The shadow of the ColorPalette selected tile.
$kendo-color-palette-tile-selected-hover-outline	String	`$kendo-color-palette-tile-focus-outline`	`var(--kendo-color-base-emphasis, #605e5c)`
Description The outline color of the ColorPalette selected hover tile.

Dialog

Name	Type	Default value	Computed value
$kendo-dialog-border-width	Number	`0`	`0`
Description The width of the border around the Dialog.
$kendo-dialog-titlebar-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Dialog titlebar.
$kendo-dialog-titlebar-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Dialog titlebar.
$kendo-dialog-titlebar-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the Dialog titlebar.
$kendo-dialog-titlebar-border-width	Number	`0`	`0`
Description The width of the border around the Dialog titlebar.
$kendo-dialog-titlebar-padding-x	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The horizontal padding of the Dialog titlebar.
$kendo-dialog-titlebar-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the Dialog titlebar.
$kendo-dialog-inner-padding-x	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The horizontal padding of the content of the Dialog.
$kendo-dialog-inner-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the content of the Dialog.
$kendo-dialog-buttongroup-padding-x	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The horizontal padding of the Dialog action buttons.
$kendo-dialog-buttongroup-padding-y	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The vertical padding of the Dialog action buttons.
$kendo-dialog-buttongroup-border-width	Number	`0`	`0`
Description The width of the top border of the Dialog action buttons.
$kendo-dialog-buttongroup-spacing	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The spacing between the Dialog action buttons.
$kendo-dialog-button-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing between the Dialog action buttons.
$kendo-dialog-shadow	String	`var( --kendo-box-shadow-depth-8, none )`	`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	Number	`1px`	`1px`
Description The width of the border around the DockManager component.
$kendo-dock-manager-border-style	String	`solid`	`solid`
Description The style of the border around the DockManager component.
$kendo-dock-manager-border	String	`var( --kendo-component-border, inherit )`	`var(--kendo-component-border, inherit)`
Description The color of the border around the DockManager component.
$kendo-dock-manager-pane-header-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-padding-x	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The horizontal padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-border-width	Number	`$kendo-dock-manager-border-width`	`1px`
Description The width of the border around the pane header in the DockManager component.
$kendo-dock-manager-pane-header-border-style	String	`solid`	`solid`
Description The style of the border around the pane header in the DockManager component.
$kendo-dock-manager-pane-header-bg	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description The background color of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-text	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The text color of the pane header in the DockManager component.
$kendo-dock-manager-pane-title-padding-y	Null	`null`	`null`
Description The vertical padding of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-padding-x	Null	`null`	`null`
Description The horizontal padding of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-size	String	`var( --kendo-font-size-lg, inherit )`	`var(--kendo-font-size-lg, inherit)`
Description The font size of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-weight	String	`var( --kendo-font-weight, normal )`	`var(--kendo-font-weight, normal)`
Description The font weight of the pane title in the DockManager component.
$kendo-dock-manager-pane-content-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the pane content in the DockManager component.
$kendo-dock-manager-pane-content-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the pane content in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-y	Null	`null`	`null`
Description The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-x	Null	`null`	`null`
Description The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dock-manager-unpinned-container-width	Number	`300px`	`300px`
Description The width of the unpinned pane container in the DockManager component.
$kendo-dock-manager-unpinned-container-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background-color of the unpinned pane container in the DockManager component.
$kendo-dock-manager-unpinned-container-shadow	List	`25.6px 0px 57.6px 0px rgba(0, 0, 0, 0.22), 4.8px 0px 14.4px 0px rgba(0, 0, 0, 0.18)`	`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	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The padding of the dock indicator in the DockManager component.
$kendo-dock-indicator-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the dock indicator in the DockManager component.
$kendo-dock-indicator-text	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The text color of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline-width	Number	`1px`	`1px`
Description The outline width of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline-style	String	`solid`	`solid`
Description The outline style of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline	String	`$kendo-dock-indicator-text`	`var(--kendo-color-primary, #0078d4)`
Description The outline color of the dock indicator in the DockManager component.
$kendo-dock-indicator-shadow	List	`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)`	`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.2)`
Description The box shadow of the dock indicator in the DockManager component.
$kendo-dock-indicator-hover-bg	String	`if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))`	`var(--kendo-color-primary-hover, #106ebe)`
Description The background color of the hovered dock indicator in the DockManager component.
$kendo-dock-indicator-hover-text	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The text color of the hovered dock indicator in the DockManager component.
$kendo-dock-manager-dock-preview-border-width	Number	`1px`	`1px`
Description The width of the border around the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border-style	String	`dashed`	`dashed`
Description The style of the border around the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border-radius	String	`var( --kendo-border-radius-md, 0)`	`var(--kendo-border-radius-md, 0)`
Description The border radius of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 20%, transparent), color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent))`	`color-mix(in srgb, var(--kendo-color-primary, #0078d4) 20%, transparent)`
Description The background color of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the dropping area in the DockManager component.

Draggable

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

Drawer

Name	Type	Default value	Computed value
$kendo-drawer-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Drawer.
$kendo-drawer-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Drawer.
$kendo-drawer-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the Drawer.
$kendo-drawer-border-width	Number	`1px`	`1px`
Description The border width of the Drawer.
$kendo-drawer-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Drawer.
$kendo-drawer-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Drawer.
$kendo-drawer-line-height	String	`var( --kendo-line-height, inherit )`	`var(--kendo-line-height, inherit)`
Description The line height of the Drawer.
$kendo-drawer-content-padding-x	Null	`null`	`null`
Description The horizontal padding of the Drawer content.
$kendo-drawer-content-padding-y	Null	`null`	`null`
Description The vertical padding of the Drawer content.
$kendo-drawer-scrollbar-width	Number	`7px`	`7px`
Description The width of the Drawer scrollbar.
$kendo-drawer-scrollbar-color	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)`
Description The color of the Drawer scrollbar.
$kendo-drawer-scrollbar-bg	String	`if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-40 ))`	`var(--kendo-color-base-subtle, #edebe9)`
Description The background of the Drawer scrollbar.
$kendo-drawer-scrollbar-radius	Number	`20px`	`20px`
Description The border radius of the Drawer scrollbar.
$kendo-drawer-scrollbar-hover-color	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), k-get-theme-color-var( neutral-110 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 60%, transparent)`
Description The hover color of the Drawer scrollbar.
$kendo-drawer-item-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the Drawer item.
$kendo-drawer-item-padding-y	String	`var( --kendo-padding-x, #{$kendo-padding-md-x} )`	`var(--kendo-padding-x, var(--kendo-spacing-2, 0.5rem))`
Description The vertical padding of the Drawer item.
$kendo-drawer-item-font-size	String	`$kendo-drawer-font-size`	`var(--kendo-font-size, inherit)`
Description The font size of the Drawer item.
$kendo-drawer-item-line-height	String	`var( --kendo-line-height-lg, normal )`	`var(--kendo-line-height-lg, normal)`
Description The line height of the Drawer item.
$kendo-drawer-item-level-padding-x	String	`$kendo-drawer-item-padding-x`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the Drawer item in each level.
$kendo-drawer-item-level-count	Number	`5`	`5`
Description The count of the Drawer item levels.
$kendo-drawer-icon-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal padding of the Drawer icon.
$kendo-drawer-icon-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the Drawer icon.
$kendo-drawer-mini-initial-width	Calculation	`calc( 2 * #{$kendo-drawer-item-padding-x} + var( --kendo-icon-size, 1rem ) )`	`calc(2 * var(--kendo-spacing-4, 1rem) + var(--kendo-icon-size, 1rem))`
Description The initial width of the mini Drawer.
$kendo-drawer-item-ripple-border-width	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The border width of the Drawer item ripple.
$kendo-drawer-item-ripple-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the drawer item ripple
$kendo-drawer-item-bg	String	`$kendo-drawer-bg`	`var(--kendo-component-bg, initial)`
Description The background color of the Drawer item.
$kendo-drawer-item-text	String	`$kendo-drawer-text`	`var(--kendo-component-text, initial)`
Description The text color of the Drawer item.
$kendo-drawer-item-icon-text	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The text color of the Drawer item icon.
$kendo-drawer-item-hover-bg	String	`$kendo-drawer-item-bg`	`var(--kendo-component-bg, initial)`
Description The background color of the hovered Drawer item.
$kendo-drawer-item-hover-text	String	`if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))`	`var(--kendo-color-primary-hover, #106ebe)`
Description The text color of the hovered Drawer item.
$kendo-drawer-item-hover-icon-text	String	`if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))`	`var(--kendo-color-primary-hover, #106ebe)`
Description The text color of the hovered Drawer item icon.
$kendo-drawer-item-focus-bg	String	`$kendo-drawer-item-bg`	`var(--kendo-component-bg, initial)`
Description The background color of the focused Drawer item.
$kendo-drawer-item-focus-text	String	`$kendo-drawer-item-text`	`var(--kendo-component-text, initial)`
Description The text color of the focused Drawer item.
$kendo-drawer-item-focus-shadow	List	`inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))`	`inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c)`
Description The box shadow of the focused Drawer item.
$kendo-drawer-item-focus-icon-text	String	`$kendo-drawer-item-icon-text`	`var(--kendo-color-primary, #0078d4)`
Description The text color of the focused Drawer item icon.
$kendo-drawer-item-selected-font-weight	String	`var( --kendo-font-weight-bold, normal )`	`var(--kendo-font-weight-bold, normal)`
Description The font weight of the selected Drawer item.
$kendo-drawer-item-selected-bg	String	`var( --kendo-selected-bg, initial )`	`var(--kendo-selected-bg, initial)`
Description The background color of the selected Drawer item.
$kendo-drawer-item-selected-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the selected Drawer item.
$kendo-drawer-item-selected-icon-text	String	`if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))`	`var(--kendo-color-primary-active, #005a9e)`
Description The text color of the selected Drawer item icon.
$kendo-drawer-item-selected-hover-bg	String	`var( --kendo-selected-hover-bg, inherit )`	`var(--kendo-selected-hover-bg, inherit)`
Description The background color of the selected and hovered Drawer item.
$kendo-drawer-item-selected-hover-text	String	`var( --kendo-selected-hover-text, inherit )`	`var(--kendo-selected-hover-text, inherit)`
Description The text color of the selected and hovered Drawer item.

Dropdowntree

Name	Type	Default value	Computed value
$kendo-dropdowntree-popup-padding-x	String	`$kendo-popup-content-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the DropdownTree popup
$kendo-dropdowntree-popup-padding-y	String	`$kendo-popup-content-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the DropdownTree popup
$kendo-dropdowntree-check-all-padding	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The padding of the check-all CheckBox inside the DropDownTree popup

Dropzone

Name	Type	Default value	Computed value
$kendo-dropzone-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the DropZone.
$kendo-dropzone-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the DropZone.
$kendo-dropzone-border-width	Number	`1px`	`1px`
Description The border width of the DropZone.
$kendo-dropzone-min-height	Number	`220px`	`220px`
Description The minimum height of the DropZone.
$kendo-dropzone-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the DropZone.
$kendo-dropzone-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the DropZone.
$kendo-dropzone-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the DropZone.
$kendo-dropzone-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the DropZone.
$kendo-dropzone-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description Text color of the dropzone.
$kendo-dropzone-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the DropZone.
$kendo-dropzone-icon-spacing	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The spacing below the DropZone icon.
$kendo-dropzone-icon-text	String	`if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-90 ))`	`var(--kendo-color-subtle, #605e5c)`
Description The text color of the DropZone icon.
$kendo-dropzone-icon-hover-text	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description Text color of the icon when the dropzone is hovered.
$kendo-dropzone-hint-font-size	String	`inherit`	`inherit`
Description The font size of the DropZone hint.
$kendo-dropzone-hint-font-weight	String	`var( --kendo-font-weight-bold, bold )`	`var(--kendo-font-weight-bold, bold)`
Description The font weight of the DropZone hint.
$kendo-dropzone-hint-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing below the DropZone hint.
$kendo-dropzone-hint-text	String	`$kendo-dropzone-text`	`var(--kendo-component-text, inherit)`
Description The text color of the DropZone hint.
$kendo-dropzone-note-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the DropZone note.
$kendo-dropzone-note-font-weight	String	`inherit`	`inherit`
Description The font weight of the DropZone note.
$kendo-dropzone-note-spacing	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The spacing below the DropZone note.
$kendo-dropzone-note-text	String	`var( --kendo-subtle-text, inherit )`	`var(--kendo-subtle-text, inherit)`
Description The text color of the DropZone note.

Editor

Name	Type	Default value	Computed value
$kendo-editor-border-width	Number	`1px`	`1px`
Description The width of the border around the Еditor.
$kendo-editor-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Еditor.
$kendo-editor-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Еditor.
$kendo-editor-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Еditor.
$kendo-editor-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Editor.
$kendo-editor-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Editor.
$kendo-editor-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The color of the border around Editor.
$kendo-editor-placeholder-text	String	`var( --kendo-input-placeholder-text, #{$kendo-input-placeholder-text} )`	`var(--kendo-input-placeholder-text, var(--kendo-color-subtle, #605e5c))`
Description The text color of the Еditor's placeholder.
$kendo-editor-placeholder-opacity	String	`var( --kendo-input-placeholder-opacity, #{$kendo-input-placeholder-opacity} )`	`var(--kendo-input-placeholder-opacity, 1)`
Description The opacity of the Editor's placeholder.
$kendo-editor-content-outline-color	String	`var( --kendo-body-text, initial )`	`var(--kendo-body-text, initial)`
Description The outline color of the Editor's content.
$kendo-editor-export-tool-icon-margin-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal margin of the Editor's export tool icon.
$kendo-editor-selectednode-outline-width	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The outline width of the Editor's selected node.
$kendo-editor-selected-text	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The selected text color of the Editor.
$kendo-editor-selected-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The selected background color of the Editor.
$kendo-editor-highlighted-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 55%, transparent), k-get-theme-color-var( primary-60 ))`	`color-mix(in srgb, var(--kendo-color-primary, #0078d4) 55%, transparent)`
Description The highlighted background color of the Editor.
$kendo-editor-resize-handle-size	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The size of the Editor's resize handle.
$kendo-editor-resize-handle-border-width	Number	`1px`	`1px`
Description The border width of the Editor's resize handle.
$kendo-editor-resize-handle-border	String	`if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)`	`var(--kendo-color-on-app-surface, #323130)`
Description The border color of the Editor's resize handle.
$kendo-editor-resize-handle-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the Editor's resize handle.
$kendo-editor-selectednode-outline-color	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The outline color of the Editor's selected node.
$kendo-editor-inline-td-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the Inline Editor data cell.
$kendo-editor-inline-hover-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The hover border color of the Inline Editor.
$ct-cell-size	Number	`20px`	`20px`
Description The size of the cell in the Insert table popup.
$kendo-editor-ct-popup-text	String	`var( --kendo-selected-text, initial )`	`var(--kendo-selected-text, initial)`
Description The text color of the selected cells in the Insert table popup.
$kendo-editor-ct-popup-bg	String	`var( --kendo-selected-bg, initial )`	`var(--kendo-selected-bg, initial)`
Description The background color of the selected cells in the Insert table popup.
$kendo-editor-ct-popup-border	String	`var( --kendo-selected-border, initial )`	`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	Map	`$_default-elevation`	(1: (0 0.3px 0.9px rgba(0, 0, 0, 0.1), 0 1.6px 3.6px rgba(0, 0, 0, 0.13)), 2: (0 0.6px 1.8px rgba(0, 0, 0, 0.1), 0 3.2px 7.2px rgba(0, 0, 0, 0.13)), 3: (0 0.9px 2.7px rgba(0, 0, 0, 0.1), 0 4.8px 10.8px rgba(0, 0, 0, 0.13)), 4: (0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13)), 5: (0 1.8px 5.4px rgba(0, 0, 0, 0.1), 0 9.6px 21.6px rgba(0, 0, 0, 0.13)), 6: (0 2.4px 7.2px rgba(0, 0, 0, 0.18), 0 12.8px 28.8px rgba(0, 0, 0, 0.22)), 7: (0 3.2px 10.8px rgba(0, 0, 0, 0.18), 0 19.2px 43.2px rgba(0, 0, 0, 0.22)), 8: (0 4.8px 14.4px rgba(0, 0, 0, 0.18), 0 25.6px 57.6px rgba(0, 0, 0, 0.22)), 9: (0 6.4px 18px rgba(0, 0, 0, 0.18), 0 32px 72px rgba(0, 0, 0, 0.22)))
Description The global default Elevation map.

Expander

Name	Type	Default value	Computed value
$kendo-expander-margin-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical spacing of the ExpansionPanel.
$kendo-expander-border-width	Number	`1px`	`1px`
Description The width of the border around the ExpansionPanel.
$kendo-expander-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the ExpansionPanel.
$kendo-expander-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the ExpansionPanel.
$kendo-expander-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The hine height of the ExpansionPanel.
$kendo-expander-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the ExpansionPanel.
$kendo-expander-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the ExpansionPanel.
$kendo-expander-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the ExpansionPanel.
$kendo-expander-shadow	List	`inset 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))`	`inset 0 0 0 2px color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)`
Description The box shadow of the ExpansionPanel.
$kendo-expander-expanded-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the expanded ExpansionPanel.
$kendo-expander-disabled-text	String	`var( --kendo-disabled-text, initial )`	`var(--kendo-disabled-text, initial)`
Description The text color of the disabled ExpansionPanel.
$kendo-expander-disabled-bg	String	`var( --kendo-disabled-bg, initial )`	`var(--kendo-disabled-bg, initial)`
Description The background color of the disabled ExpansionPanel.
$kendo-expander-focus-offset	Number	`1px`	`1px`
Description The offset of the focused ExpansionPanel.
$kendo-expander-focus-outline-width	Number	`1px`	`1px`
Description The outline width of the focused ExpansionPanel.
$kendo-expander-focus-outline-style	String	`solid`	`solid`
Description The outline style of the focused ExpansionPanel.
$kendo-expander-focus-outline	String	`if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))`	`var(--kendo-color-base-emphasis, #605e5c)`
Description The outline color of the focused ExpansionPanel.
$kendo-expander-focus-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the focused ExpansionPanel.
$kendo-expander-focus-shadow	List	`inset 0px 0px 0px 2px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))`	`inset 0px 0px 0px 2px var(--kendo-color-base-emphasis, #605e5c)`
Description The box shadow of the focused ExpansionPanel.
$kendo-expander-header-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the ExpansionPanel header.
$kendo-expander-header-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the ExpansionPanel header.
$kendo-expander-header-text	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The text color of the ExpansionPanel header.
$kendo-expander-header-bg	String	`inherit`	`inherit`
Description The background color of the ExpansionPanel header.
$kendo-expander-header-hover-bg	String	`if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))`	`var(--kendo-color-base-hover, #f3f2f1)`
Description The background color of the hovered ExpansionPanel header.
$kendo-expander-title-text	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The text color of the ExpansionPanel title.
$kendo-expander-header-sub-title-text	String	`var( --kendo-subtle-text, initial )`	`var(--kendo-subtle-text, initial)`
Description The text color of the ExpansionPanel sub-title.
$kendo-expander-indicator-margin-x	String	`k-spacing(2.5)`	`var(--kendo-spacing-2\.5, 0.625rem)`
Description The horizontal margin of the ExpansionPanel indicator.
$kendo-expander-indicator-text	String	`var( --kendo-expander-text, #{$kendo-expander-text} )`	`var(--kendo-expander-text, var(--kendo-component-text, initial))`
Description The text color of the ExpansionPanel indicator.
$kendo-expander-content-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the ExpansionPanel content.
$kendo-expander-content-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the ExpansionPanel content.

Filemanager

Name	Type	Default value	Computed value
$kendo-file-manager-spacer	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The space between the FileManager items.
$kendo-file-manager-border-width	Number	`1px`	`1px`
Description The border width of the FileManager.
$kendo-file-manager-font-family	String	`var( --kendo-font-family, normal )`	`var(--kendo-font-family, normal)`
Description The font family of the FileManager.
$kendo-file-manager-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the FileManager.
$kendo-file-manager-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the FileManager.
$kendo-file-manager-bg	String	`var( --kendo-component-bg, transparent )`	`var(--kendo-component-bg, transparent)`
Description The background color of the FileManager.
$kendo-file-manager-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the FileManager.
$kendo-file-manager-border	String	`var( --kendo-component-border, inherit )`	`var(--kendo-component-border, inherit)`
Description The border color of the FileManager.
$kendo-file-manager-toolbar-border-width	Number	`$kendo-file-manager-border-width`	`1px`
Description The border width of the FileManager Toolbar.
$kendo-file-manager-toolbar-bg	String	`$kendo-toolbar-bg`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the FileManager Toolbar.
$kendo-file-manager-toolbar-text	String	`$kendo-toolbar-text`	`var(--kendo-component-text, inherit)`
Description The text color of the FileManager Toolbar.
$kendo-file-manager-toolbar-border	String	`$kendo-toolbar-border`	`var(--kendo-component-border, initial)`
Description The border color of the FileManager Toolbar.
$kendo-file-manager-navigation-padding-x	String	`$kendo-file-manager-spacer`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the FileManager Navigation.
$kendo-file-manager-navigation-padding-y	String	`$kendo-file-manager-spacer`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the FileManager Navigation.
$kendo-file-manager-navigation-width	Number	`20%`	`20%`
Description The width of the FileManager Navigation.
$kendo-file-manager-navigation-border-width	Number	`$kendo-file-manager-border-width`	`1px`
Description The border width of the FileManager Navigation.
$kendo-file-manager-navigation-bg	Color	`transparent`	`transparent`
Description The background color of the FileManager Navigation.
$kendo-file-manager-navigation-text	String	`inherit`	`inherit`
Description The text color of the FileManager Navigation.
$kendo-file-manager-navigation-border	String	`inherit`	`inherit`
Description The border color of the FileManager Navigation.
$kendo-file-manager-breadcrumb-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-border-width	Number	`$kendo-file-manager-border-width`	`1px`
Description The border width of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-bg	String	`$kendo-toolbar-bg`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-text	String	`inherit`	`inherit`
Description The text color of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-border	String	`inherit`	`inherit`
Description The border color of the FileManager Breadcrumb.
$kendo-file-manager-listview-bg	Color	`transparent`	`transparent`
Description The background color of the FileManager ListView.
$kendo-file-manager-listview-text	String	`inherit`	`inherit`
Description The text color of the FileManager ListView.
$kendo-file-manager-listview-border	String	`inherit`	`inherit`
Description The border color of the FileManager ListView.
$kendo-file-manager-listview-item-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the FileManager ListView item.
$kendo-file-manager-listview-item-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the FileManager ListView item.
$kendo-file-manager-listview-item-width	Number	`120px`	`120px`
Description The width of the FileManager ListView item.
$kendo-file-manager-listview-item-height	Number	`120px`	`120px`
Description The height of the FileManager ListView item.
$kendo-file-manager-listview-item-icon-bg	Color	`transparent`	`transparent`
Description The background color of the FileManager ListView item icon.
$kendo-file-manager-listview-item-icon-text	String	`var( --kendo-subtle-text, inherit )`	`var(--kendo-subtle-text, inherit)`
Description The text color of the FileManager ListView item icon.
$kendo-file-manager-listview-item-icon-border	String	`inherit`	`inherit`
Description The border color of the FileManager ListView item icon.
$kendo-file-manager-listview-item-icon-focus-bg	Color	`transparent`	`transparent`
Description The background color of the FileManager focused ListView item icon.
$kendo-file-manager-listview-item-icon-focus-text	String	`inherit`	`inherit`
Description The text color of the FileManager focused ListView item icon.
$kendo-file-manager-listview-item-icon-focus-border	String	`inherit`	`inherit`
Description The border color of the FileManager focused ListView item icon.
$kendo-file-manager-listview-item-icon-selected-bg	Color	`transparent`	`transparent`
Description Background color of the FileManager selected ListView item icon.
$kendo-file-manager-listview-item-icon-selected-text	String	`inherit`	`inherit`
Description Text color of the FileManager selected ListView item icon.
$kendo-file-manager-listview-item-icon-selected-border	String	`inherit`	`inherit`
Description Border color of the FileManager selected ListView item icon.
$kendo-file-manager-grid-bg	Color	`transparent`	`transparent`
Description The background color of the FileManager Grid.
$kendo-file-manager-grid-text	String	`inherit`	`inherit`
Description The text color of the FileManager Grid.
$kendo-file-manager-grid-border	String	`inherit`	`inherit`
Description The border color of the FileManager Grid.
$kendo-file-manager-preview-padding-x	String	`$kendo-file-manager-spacer`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the FileManager preview.
$kendo-file-manager-preview-padding-y	String	`$kendo-file-manager-spacer`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the FileManager preview.
$kendo-file-manager-preview-width	Number	`20%`	`20%`
Description The width of the FileManager preview.
$kendo-file-manager-preview-border-width	Number	`$kendo-file-manager-border-width`	`1px`
Description The border width of the FileManager preview.
$kendo-file-manager-preview-spacing	String	`$kendo-file-manager-spacer`	`var(--kendo-spacing-4, 1rem)`
Description The spacing of the FileManager preview.
$kendo-file-manager-preview-column-gap	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The gap between the columns in the FileManager preview.
$kendo-file-manager-preview-bg	Color	`transparent`	`transparent`
Description The background color of the FileManager preview.
$kendo-file-manager-preview-text	String	`inherit`	`inherit`
Description The text color of the FileManager preview.
$kendo-file-manager-preview-border	String	`inherit`	`inherit`
Description The border color of the FileManager preview.
$kendo-file-manager-preview-icon-bg	Color	`transparent`	`transparent`
Description The background color of the FileManager preview icon.
$kendo-file-manager-preview-icon-text	String	`var( --kendo-subtle-text, inherit )`	`var(--kendo-subtle-text, inherit)`
Description The text color of the FileManager preview icon.
$kendo-file-manager-preview-icon-border	String	`inherit`	`inherit`
Description The border color of the FileManager preview icon.

Filter

Name	Type	Default value	Computed value
$kendo-filter-padding-x	String	`$kendo-padding-md-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Filter.
$kendo-filter-padding-y	String	`$kendo-padding-md-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the Filter.
$kendo-filter-bottom-margin	String	`k-spacing(7.5)`	`var(--kendo-spacing-7\.5, 1.875rem)`
Description The bottom margin of the Filter.
$kendo-filter-line-size	Number	`1px`	`1px`
Description The width of the line that connects the Filter items.
$kendo-filter-operator-dropdown-width	Number	`15em`	`15em`
Description The width of the dropdown elements in the Filter items.
$kendo-filter-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Filter.
$kendo-filter-preview-field-text	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The text color of the Filter preview field.
$kendo-filter-preview-operator-text	String	`if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-subtle, #605e5c)`
Description The text color of the Filter preview operator.
$kendo-filter-line-bg	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The background color of the line that connects the Filter items.
$kendo-filter-toolbar-focus-border	String	`if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-base-emphasis, #605e5c)`
Description The border color of the focused Filter.

Floating-action-button

Name	Type	Default value	Computed value
$kendo-fab-border-width	Number	`1px`	`1px`
Description The width of the border around the FAB.
$kendo-fab-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the FAB.
$kendo-fab-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the FAB.
$kendo-fab-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the FAB.
$kendo-fab-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the FAB.
$kendo-fab-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the FAB.
$kendo-fab-sm-padding-x	Calculation	`calc( #{$kendo-fab-padding-x} / 2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description The horizontal padding of the small FAB.
$kendo-fab-md-padding-x	String	`$kendo-fab-padding-x`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the medium FAB.
$kendo-fab-lg-padding-x	Calculation	`calc( #{$kendo-fab-padding-x} * 1.5 )`	`calc(var(--kendo-spacing-4, 1rem) * 1.5)`
Description The horizontal padding of the large FAB.
$kendo-fab-padding-y	String	`$kendo-fab-padding-x`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the FAB.
$kendo-fab-sm-padding-y	Calculation	`calc( #{$kendo-fab-padding-y} / 2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description The vertical padding of the small FAB.
$kendo-fab-md-padding-y	String	`$kendo-fab-padding-y`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the medium FAB.
$kendo-fab-lg-padding-y	Calculation	`calc( #{$kendo-fab-padding-y} * 1.5 )`	`calc(var(--kendo-spacing-4, 1rem) * 1.5)`
Description The vertical padding of the large FAB.
$kendo-fab-focus-offset	String	`$kendo-button-focus-offset`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The offset of the focused FAB.
$kendo-fab-focus-outline-width	Number	`$kendo-button-focus-outline-width`	`1px`
Description The outline width of the focused FAB.
$kendo-fab-focus-outline-style	String	`$kendo-button-focus-outline-style`	`solid`
Description The outline style of the focused FAB.
$kendo-fab-icon-padding-x	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The horizontal padding of the FAB icon.
$kendo-fab-icon-padding-y	String	`$kendo-fab-icon-padding-x`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical padding of the FAB icon.
$kendo-fab-icon-spacing	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The spacing of the FAB icon.
$kendo-fab-items-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal padding of the FAB items.
$kendo-fab-items-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the FAB items.
$kendo-fab-item-text-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the FAB item text.
$kendo-fab-item-text-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the FAB item text.
$kendo-fab-item-text-border-width	Number	`1px`	`1px`
Description The width of the FAB item text border.
$kendo-fab-item-text-border-style	String	`solid`	`solid`
Description The border style of the FAB item text.
$kendo-fab-item-text-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the FAB item text.
$kendo-fab-item-text-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the FAB item text.
$kendo-fab-item-text-line-height	String	`var( --kendo-line-height-sm, inherit )`	`var(--kendo-line-height-sm, inherit)`
Description The line height of the FAB item text.
$kendo-fab-item-text-offset-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The bottom margin of the FAB item text.
$kendo-fab-item-focus-offset	String	`$kendo-button-focus-offset`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The offset of the focused FAB item.
$kendo-fab-item-focus-outline-width	Number	`$kendo-button-focus-outline-width`	`1px`
Description The outline width of the focused FAB item.
$kendo-fab-item-focus-outline-style	String	`$kendo-button-focus-outline-style`	`solid`
Description The outline style of the focused FAB item.
$kendo-fab-item-icon-padding-x	Calculation	`calc( #{k-spacing(2)} + $kendo-fab-icon-padding-x )`	`calc(var(--kendo-spacing-2, 0.5rem) + var(--kendo-spacing-0\.5, 0.125rem))`
Description The horizontal padding of the FAB item icon.
$kendo-fab-item-icon-padding-y	Calculation	`$kendo-fab-item-icon-padding-x`	`calc(var(--kendo-spacing-2, 0.5rem) + var(--kendo-spacing-0\.5, 0.125rem))`
Description The vertical padding of the FAB item icon.
$kendo-fab-item-icon-border-width	Number	`1px`	`1px`
Description The border width of the FAB item icon.
$kendo-fab-item-icon-border-style	String	`solid`	`solid`
Description The border style of the FAB item icon.
$kendo-fab-item-icon-border-radius	Number	`50%`	`50%`
Description The border radius of the FAB item icon.
$kendo-fab-theme-colors	Map	`( solid: map.get( $kendo-button-theme-colors, "solid") )`	(solid: (base: (bg: var(--kendo-color-base, #ffffff), text: var(--kendo-color-on-base, #323130), border: var(--kendo-color-border, #8a8886), hover-bg: var(--kendo-color-base-hover, #f3f2f1), hover-text: var(--kendo-color-on-base, #323130), hover-border: var(--kendo-color-border, #8a8886), focus-bg: var(--kendo-color-base, #ffffff), focus-text: var(--kendo-color-on-base, #323130), focus-border: var(--kendo-color-border, #8a8886), focus-outline: var(--kendo-color-on-base, #323130), focus-hover-bg: var(--kendo-color-base-hover, #f3f2f1), focus-hover-text: var(--kendo-color-on-base, #323130), focus-hover-border: var(--kendo-color-border, #8a8886), focus-hover-outline: var(--kendo-color-on-base, #323130), active-bg: var(--kendo-color-base-active, #edebe9), active-text: var(--kendo-color-on-base, #323130), active-border: var(--kendo-color-border, #8a8886), active-hover-bg: var(--kendo-color-base-hover, #f3f2f1), active-hover-text: var(--kendo-color-on-base, #323130), active-hover-border: var(--kendo-color-border, #8a8886), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), primary: (bg: var(--kendo-color-primary, #0078d4), text: var(--kendo-color-on-primary, #ffffff), border: var(--kendo-color-primary, #0078d4), hover-bg: var(--kendo-color-primary-hover, #106ebe), hover-text: var(--kendo-color-on-primary, #ffffff), hover-border: var(--kendo-color-primary-hover, #106ebe), focus-bg: var(--kendo-color-primary, #0078d4), focus-text: var(--kendo-color-on-primary, #ffffff), focus-border: var(--kendo-color-primary, #0078d4), focus-outline: inherit, focus-hover-bg: var(--kendo-color-primary-hover, #106ebe), focus-hover-text: var(--kendo-color-on-primary, #ffffff), focus-hover-border: var(--kendo-color-primary-hover, #106ebe), focus-hover-outline: inherit, active-bg: var(--kendo-color-primary-active, #005a9e), active-text: var(--kendo-color-on-primary, #ffffff), active-border: var(--kendo-color-primary-active, #005a9e), active-hover-bg: var(--kendo-color-primary-hover, #106ebe), active-hover-text: var(--kendo-color-on-primary, #ffffff), active-hover-border: var(--kendo-color-primary-hover, #106ebe), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), error: (bg: var(--kendo-color-error, #c2666b), text: var(--kendo-color-on-error, #ffffff), border: var(--kendo-color-error, #c2666b), hover-bg: var(--kendo-color-error-hover, #b85156), hover-text: var(--kendo-color-on-error, #ffffff), hover-border: var(--kendo-color-error-hover, #b85156), focus-bg: var(--kendo-color-error, #c2666b), focus-text: var(--kendo-color-on-error, #ffffff), focus-border: var(--kendo-color-error, #c2666b), focus-outline: inherit, focus-hover-bg: var(--kendo-color-error-hover, #b85156), focus-hover-text: var(--kendo-color-on-error, #ffffff), focus-hover-border: var(--kendo-color-error-hover, #b85156), focus-hover-outline: inherit, active-bg: var(--kendo-color-error-active, #ae3b41), active-text: var(--kendo-color-on-error, #ffffff), active-border: var(--kendo-color-error-active, #ae3b41), active-hover-bg: var(--kendo-color-error-hover, #b85156), active-hover-text: var(--kendo-color-on-error, #ffffff), active-hover-border: var(--kendo-color-error-hover, #b85156), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), success: (bg: var(--kendo-color-success, #55a554), text: var(--kendo-color-on-success, #ffffff), border: var(--kendo-color-success, #55a554), hover-bg: var(--kendo-color-success-hover, #3e973e), hover-text: var(--kendo-color-on-success, #ffffff), hover-border: var(--kendo-color-success-hover, #3e973e), focus-bg: var(--kendo-color-success, #55a554), focus-text: var(--kendo-color-on-success, #ffffff), focus-border: var(--kendo-color-success, #55a554), focus-outline: inherit, focus-hover-bg: var(--kendo-color-success-hover, #3e973e), focus-hover-text: var(--kendo-color-on-success, #ffffff), focus-hover-border: var(--kendo-color-success-hover, #3e973e), focus-hover-outline: inherit, active-bg: var(--kendo-color-success-active, #278a27), active-text: var(--kendo-color-on-success, #ffffff), active-border: var(--kendo-color-success-active, #278a27), active-hover-bg: var(--kendo-color-success-hover, #3e973e), active-hover-text: var(--kendo-color-on-success, #ffffff), active-hover-border: var(--kendo-color-success-hover, #3e973e), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), info: (bg: var(--kendo-color-info, #0a7eff), text: var(--kendo-color-on-info, #ffffff), border: var(--kendo-color-info, #0a7eff), hover-bg: var(--kendo-color-info-hover, #096edf), hover-text: var(--kendo-color-on-info, #ffffff), hover-border: var(--kendo-color-info-hover, #096edf), focus-bg: var(--kendo-color-info, #0a7eff), focus-text: var(--kendo-color-on-info, #ffffff), focus-border: var(--kendo-color-info, #0a7eff), focus-outline: inherit, focus-hover-bg: var(--kendo-color-info-hover, #096edf), focus-hover-text: var(--kendo-color-on-info, #ffffff), focus-hover-border: var(--kendo-color-info-hover, #096edf), focus-hover-outline: inherit, active-bg: var(--kendo-color-info-active, #085ebf), active-text: var(--kendo-color-on-info, #ffffff), active-border: var(--kendo-color-info-active, #085ebf), active-hover-bg: var(--kendo-color-info-hover, #096edf), active-hover-text: var(--kendo-color-on-info, #ffffff), active-hover-border: var(--kendo-color-info-hover, #096edf), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), secondary: (bg: var(--kendo-color-secondary, #979593), text: var(--kendo-color-on-secondary, #ffffff), border: var(--kendo-color-secondary, #979593), hover-bg: var(--kendo-color-secondary-hover, #8a8886), hover-text: var(--kendo-color-on-secondary, #ffffff), hover-border: var(--kendo-color-secondary-hover, #8a8886), focus-bg: var(--kendo-color-secondary, #979593), focus-text: var(--kendo-color-on-secondary, #ffffff), focus-border: var(--kendo-color-secondary, #979593), focus-outline: inherit, focus-hover-bg: var(--kendo-color-secondary-hover, #8a8886), focus-hover-text: var(--kendo-color-on-secondary, #ffffff), focus-hover-border: var(--kendo-color-secondary-hover, #8a8886), focus-hover-outline: inherit, active-bg: var(--kendo-color-secondary-active, #797775), active-text: var(--kendo-color-on-secondary, #ffffff), active-border: var(--kendo-color-secondary-active, #797775), active-hover-bg: var(--kendo-color-secondary-hover, #8a8886), active-hover-text: var(--kendo-color-on-secondary, #ffffff), active-hover-border: var(--kendo-color-secondary-hover, #8a8886), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), tertiary: (bg: var(--kendo-color-tertiary, #2b88d8), text: var(--kendo-color-on-tertiary, #ffffff), border: var(--kendo-color-tertiary, #2b88d8), hover-bg: var(--kendo-color-tertiary-hover, #287ec7), hover-text: var(--kendo-color-on-tertiary, #ffffff), hover-border: var(--kendo-color-tertiary-hover, #287ec7), focus-bg: var(--kendo-color-tertiary, #2b88d8), focus-text: var(--kendo-color-on-tertiary, #ffffff), focus-border: var(--kendo-color-tertiary, #2b88d8), focus-outline: inherit, focus-hover-bg: var(--kendo-color-tertiary-hover, #287ec7), focus-hover-text: var(--kendo-color-on-tertiary, #ffffff), focus-hover-border: var(--kendo-color-tertiary-hover, #287ec7), focus-hover-outline: inherit, active-bg: var(--kendo-color-tertiary-active, #2473b7), active-text: var(--kendo-color-on-tertiary, #ffffff), active-border: var(--kendo-color-tertiary-active, #2473b7), active-hover-bg: var(--kendo-color-tertiary-hover, #287ec7), active-hover-text: var(--kendo-color-on-tertiary, #ffffff), active-hover-border: var(--kendo-color-tertiary-hover, #287ec7), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), warning: (bg: var(--kendo-color-warning, #ffc80a), text: var(--kendo-color-on-warning, #323130), border: var(--kendo-color-warning, #ffc80a), hover-bg: var(--kendo-color-warning-hover, #f5c000), hover-text: var(--kendo-color-on-warning, #323130), hover-border: var(--kendo-color-warning-hover, #f5c000), focus-bg: var(--kendo-color-warning, #ffc80a), focus-text: var(--kendo-color-on-warning, #323130), focus-border: var(--kendo-color-warning, #ffc80a), focus-outline: var(--kendo-color-app-surface, #ffffff), focus-hover-bg: var(--kendo-color-warning-hover, #f5c000), focus-hover-text: var(--kendo-color-on-warning, #323130), focus-hover-border: var(--kendo-color-warning-hover, #f5c000), focus-hover-outline: var(--kendo-color-app-surface, #ffffff), active-bg: var(--kendo-color-warning-active, #e0b000), active-text: var(--kendo-color-on-warning, #323130), active-border: var(--kendo-color-warning-active, #e0b000), active-hover-bg: var(--kendo-color-warning-hover, #f5c000), active-hover-text: var(--kendo-color-on-warning, #323130), active-hover-border: var(--kendo-color-warning-hover, #f5c000), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), dark: (bg: var(--kendo-color-dark, #323130), text: var(--kendo-color-on-dark, #ffffff), border: var(--kendo-color-dark, #323130), hover-bg: var(--kendo-color-dark-hover, #201f1e), hover-text: var(--kendo-color-on-dark, #ffffff), hover-border: var(--kendo-color-dark-hover, #201f1e), focus-bg: var(--kendo-color-dark, #323130), focus-text: var(--kendo-color-on-dark, #ffffff), focus-border: var(--kendo-color-dark, #323130), focus-outline: var(--kendo-color-on-dark, #ffffff), focus-hover-bg: var(--kendo-color-dark-hover, #201f1e), focus-hover-text: var(--kendo-color-on-dark, #ffffff), focus-hover-border: var(--kendo-color-dark-hover, #201f1e), focus-hover-outline: var(--kendo-color-on-dark, #ffffff), active-bg: var(--kendo-color-dark-active, #000000), active-text: var(--kendo-color-on-dark, #ffffff), active-border: var(--kendo-color-dark-active, #000000), active-hover-bg: var(--kendo-color-dark-hover, #201f1e), active-hover-text: var(--kendo-color-on-dark, #ffffff), active-hover-border: var(--kendo-color-dark-hover, #201f1e), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), light: (bg: var(--kendo-color-light, #d2d0ce), text: var(--kendo-color-on-light, #323130), border: var(--kendo-color-light, #d2d0ce), hover-bg: var(--kendo-color-light-hover, #c8c6c4), hover-text: var(--kendo-color-on-light, #323130), hover-border: var(--kendo-color-light-hover, #c8c6c4), focus-bg: var(--kendo-color-light, #d2d0ce), focus-text: var(--kendo-color-on-light, #323130), focus-border: var(--kendo-color-light, #d2d0ce), focus-outline: var(--kendo-color-app-surface, #ffffff), focus-hover-bg: var(--kendo-color-light-hover, #c8c6c4), focus-hover-text: var(--kendo-color-on-light, #323130), focus-hover-border: var(--kendo-color-light-hover, #c8c6c4), focus-hover-outline: var(--kendo-color-app-surface, #ffffff), active-bg: var(--kendo-color-light-active, #a19f9d), active-text: var(--kendo-color-on-light, #323130), active-border: var(--kendo-color-light-active, #a19f9d), active-hover-bg: var(--kendo-color-light-hover, #c8c6c4), active-hover-text: var(--kendo-color-on-light, #323130), active-hover-border: var(--kendo-color-light-hover, #c8c6c4), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent)))
Description The theme colors map for the FAB.
$kendo-fab-sizes	Map	`( sm: ( padding-x: $kendo-fab-sm-padding-x, padding-y: $kendo-fab-sm-padding-y ), md: ( padding-x: $kendo-fab-md-padding-x, padding-y: $kendo-fab-md-padding-y ), lg: ( padding-x: $kendo-fab-lg-padding-x, padding-y: $kendo-fab-lg-padding-y ) )`	`(sm: (padding-x: calc(var(--kendo-spacing-4, 1rem) / 2), padding-y: calc(var(--kendo-spacing-4, 1rem) / 2)), md: (padding-x: var(--kendo-spacing-4, 1rem), padding-y: var(--kendo-spacing-4, 1rem)), lg: (padding-x: calc(var(--kendo-spacing-4, 1rem) * 1.5), padding-y: calc(var(--kendo-spacing-4, 1rem) * 1.5)))`
Description The size map for the FAB.
$kendo-fab-item-offset-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The bottom margin of the FAB item.
$kendo-fab-item-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The base text color of the FAB item.
$kendo-fab-item-bg	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description The base background color of the FAB item.
$kendo-fab-item-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))`	`var(--kendo-color-border, #8a8886)`
Description The base border color of the FAB item.
$kendo-fab-item-hover-text	String	`var( --kendo-hover-text, inherit )`	`var(--kendo-hover-text, inherit)`
Description The text color of the hovered FAB item.
$kendo-fab-item-hover-bg	String	`var( --kendo-hover-bg, inherit )`	`var(--kendo-hover-bg, inherit)`
Description The background color of the hovered FAB item.
$kendo-fab-item-hover-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))`	`var(--kendo-color-border, #8a8886)`
Description The border color of the hovered FAB item.
$kendo-fab-item-focus-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the focused FAB item.
$kendo-fab-item-focus-bg	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description The background color of the focused FAB item.
$kendo-fab-item-focus-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))`	`var(--kendo-color-border, #8a8886)`
Description The border color of the focused FAB item.
$kendo-fab-item-active-text	String	`var( --kendo-selected-text, inherit )`	`var(--kendo-selected-text, inherit)`
Description The text color of the active FAB item.
$kendo-fab-item-active-bg	String	`var( --kendo-selected-bg, inherit )`	`var(--kendo-selected-bg, inherit)`
Description The background color of the active FAB item.
$kendo-fab-item-active-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))`	`var(--kendo-color-border, #8a8886)`
Description The border color of the active FAB item.

Floating-label

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

Form

Name	Type	Default value	Computed value
$kendo-form-spacer	Calculation	`calc( #{$kendo-padding-md-x} * 2 )`	`calc(var(--kendo-spacing-2, 0.5rem) * 2)`
Description The padding of the inline Form.
$kendo-form-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Form.
$kendo-form-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Form.
$kendo-form-line-height-em	Calculation	`$kendo-line-height-em`	`calc(1.4285714286 * 1em)`
Description The line height of the Form in em units.
$kendo-form-sm-line-height	String	`var( --kendo-line-height-sm, normal )`	`var(--kendo-line-height-sm, normal)`
Description The line height of the small Form.
$kendo-form-lg-line-height	String	`var( --kendo-line-height-lg, normal )`	`var(--kendo-line-height-lg, normal)`
Description The line height of the large Form.
$kendo-form-fieldset-margin	List	`2em 0 0`	`2em 0 0`
Description The margin of the Form fieldset.
$kendo-form-fieldset-padding	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The padding of the Form fieldset.
$kendo-form-legend-margin	List	`0 0 k-spacing(3)`	`0 0 var(--kendo-spacing-3, 0.75rem)`
Description The margin of the Form legend.
$kendo-form-legend-padding	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The padding of the Form legend.
$kendo-form-legend-border-width	List	`0 0 k-spacing(0.5)`	`0 0 var(--kendo-spacing-0\.5, 0.125rem)`
Description The border width of the Form legend.
$kendo-form-legend-border-style	String	`solid`	`solid`
Description The border style of the Form legend.
$kendo-form-legend-border-color	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the Form legend.
$kendo-form-legend-width	Number	`100%`	`100%`
Description The width of the Form legend.
$kendo-form-legend-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Form legend.
$kendo-form-legend-text-transform	String	`uppercase`	`uppercase`
Description The text capitalization of the Form legend.
$kendo-form-label-margin-bottom	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The bottom margin of the Form label.
$kendo-form-label-font-weight	String	`var( --kendo-font-weight-bold, inherit )`	`var(--kendo-font-weight-bold, inherit)`
Description The font weight of the form label
$kendo-form-button-margin-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal margin of the Form buttons.
$kendo-form-hint-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the Form hint.
$kendo-form-hint-font-style	String	`normal`	`normal`
Description The font style of the Form hint.
$kendo-form-hint-margin-top	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The top margin of the Form hint.
$kendo-form-hint-text	String	`if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-subtle, #605e5c)`
Description The text color of the Form hint.
$kendo-form-sm-rows-spacing	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The row spacing of the small Form.
$kendo-form-md-rows-spacing	String	`$kendo-form-sm-rows-spacing`	`var(--kendo-spacing-3, 0.75rem)`
Description The row spacing of the medium Form.
$kendo-form-lg-rows-spacing	String	`$kendo-form-sm-rows-spacing`	`var(--kendo-spacing-3, 0.75rem)`
Description The row spacing of the large Form.
$kendo-form-separator-margin	List	`k-spacing(3) 0 0`	`var(--kendo-spacing-3, 0.75rem) 0 0`
Description The margin of the Form separator.
$kendo-form-separator-border-color	String	`$kendo-form-legend-border-color`	`var(--kendo-component-border, initial)`
Description The border color of the Form separator.
$kendo-horizontal-form-label-padding-top	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The top padding of the label in the horizontal Form.
$kendo-horizontal-form-label-margin-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal margin of the label in the horizontal Form.
$kendo-horizontal-form-label-width	Number	`25%`	`25%`
Description The width of the label in the horizontal Form.
$kendo-horizontal-form-label-align	String	`flex-end`	`flex-end`
Description The horizontal alignment of the label in the horizontal Form.
$kendo-horizontal-form-field-wrap-max-width	Calculation	`calc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} )`	`calc(100% - 25% - var(--kendo-spacing-2, 0.5rem))`
Description The maximum width of the field wrap in the horizontal Form.
$kendo-inline-form-element-width	Number	`25%`	`25%`
Description The width of the inline Form element.
$kendo-forms-invalid-color	String	`var( --kendo-invalid-text, initial )`	`var(--kendo-invalid-text, initial)`
Description The invalid text color of the Form.
$kendo-label-optional-margin-x	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The horizontal margin of the optional label in the Form.
$kendo-label-optional-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the optional label in the Form.
$kendo-label-optional-font-style	String	`normal`	`normal`
Description The font style of the optional label in the Form.
$kendo-fieldset-margin	String	`k-spacing(7.5)`	`var(--kendo-spacing-7\.5, 1.875rem)`
Description The margin of the Form fieldset.
$kendo-fieldset-font-size	String	`var( --kendo-font-size-xl, inherit )`	`var(--kendo-font-size-xl, inherit)`
Description The font size of the Form fieldset.
$kendo-fieldset-bg	Color	`transparent`	`transparent`
Description The background color of the Form fieldset.
$kendo-fieldset-text	String	`inherit`	`inherit`
Description The text color of the Form fieldset.
$kendo-fieldset-border	String	`initial`	`initial`
Description The border color of the Form fieldset.
$kendo-fieldset-legend-bg	Color	`transparent`	`transparent`
Description The background color of the Form legend.
$kendo-fieldset-legend-text	String	`if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-subtle, #605e5c)`
Description The text color of the Form legend.
$kendo-fieldset-legend-border	String	`initial`	`initial`
Description The border color of the Form legend.
$kendo-form-sizes	Map	`( sm: ( form-rows-spacing: $kendo-form-sm-rows-spacing ), md: ( form-rows-spacing: $kendo-form-md-rows-spacing ), lg: ( form-rows-spacing: $kendo-form-lg-rows-spacing ) )`	`(sm: (form-rows-spacing: var(--kendo-spacing-3, 0.75rem)), md: (form-rows-spacing: var(--kendo-spacing-3, 0.75rem)), lg: (form-rows-spacing: var(--kendo-spacing-3, 0.75rem)))`
Description The sizes map for the Form.

Gantt

Name	Type	Default value	Computed value
$kendo-gantt-border-width	Number	`1px`	`1px`
Description The border width of the Gantt.
$kendo-gantt-font-family	String	`var( --kendo-font-family, initial )`	`var(--kendo-font-family, initial)`
Description The font family of the Gantt.
$kendo-gantt-font-size	String	`var( --kendo-font-size, initial )`	`var(--kendo-font-size, initial)`
Description The font size of the Gantt.
$kendo-gantt-line-height	String	`var( --kendo-line-height, initial )`	`var(--kendo-line-height, initial)`
Description The line height of the Gantt.
$kendo-gantt-bg	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description The background color of the Gantt.
$kendo-gantt-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the Gantt.
$kendo-gantt-border	String	`var( --kendo-component-border, inherit )`	`var(--kendo-component-border, inherit)`
Description The border color of the Gantt.
$kendo-gantt-nonwork-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( $kendo-color-black, .04 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 4%, transparent)`
Description The background color of the Gantt non-working days.
$kendo-gantt-nonwork-text	String	`inherit`	`inherit`
Description The text color of the Gantt non-working days.
$kendo-gantt-nonwork-border	String	`inherit`	`inherit`
Description The border color of the Gantt non-working days.
$kendo-gantt-line-size	Number	`2px`	`2px`
Description The size of the Gantt connecting lines.
$kendo-gantt-line-fill	Color	`black`	`black`
Description The background fill color of the Gantt connecting lines.
$kendo-gantt-line-selected-fill	String	`if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))`	`var(--kendo-color-primary-active, #005a9e)`
Description The background fill of the selected Gantt connecting lines.
$kendo-gantt-dot-size	Number	`8px`	`8px`
Description The size of the Gantt task dot.
$kendo-gantt-dot-spacing	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The spacing of the Gantt task dot.
$kendo-gantt-dot-bg	String	`if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)`	`var(--kendo-color-on-app-surface, #323130)`
Description The background color of the Gantt task dot.
$kendo-gantt-dot-border	String	`if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)`	`var(--kendo-color-on-app-surface, #323130)`
Description The border color of the Gantt task dot.
$kendo-gantt-dot-hover-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the hovered Gantt task dot.
$kendo-gantt-dot-hover-border	String	`if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)`	`var(--kendo-color-on-app-surface, #323130)`
Description The border color of the hovered Gantt task dot.
$kendo-gantt-milestone-bg	String	`$kendo-gantt-text`	`var(--kendo-component-text, inherit)`
Description The background color of the Gantt milestone.
$kendo-gantt-milestone-border	String	`$kendo-gantt-text`	`var(--kendo-component-text, inherit)`
Description The border color of the Gantt milestone.
$kendo-gantt-milestone-selected-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the selected Gantt milestone.
$kendo-gantt-milestone-selected-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the selected Gantt milestone.
$kendo-gantt-summary-bg	String	`if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-110 ))`	`var(--kendo-color-subtle, #605e5c)`
Description The background color of the Gantt summary.
$kendo-gantt-summary-progress-bg	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The background color of the Gantt summary progress.
$kendo-gantt-summary-selected-bg	String	`if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-50 ))`	`var(--kendo-color-primary-subtle-active, #abd1ef)`
Description The background color of the selected Gantt summary.
$kendo-gantt-summary-progress-selected-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the selected Gantt summary progress.
$kendo-gantt-task-border-width	Number	`0px`	`0px`
Description The border width of the Gantt task.
$kendo-gantt-task-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Gantt task.
$kendo-gantt-task-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the Gantt task.
$kendo-gantt-task-bg	String	`if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-110 ))`	`var(--kendo-color-subtle, #605e5c)`
Description The background color of the Gantt task.
$kendo-gantt-task-text	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The text color of the Gantt task.
$kendo-gantt-task-border	String	`inherit`	`inherit`
Description The border color of the Gantt task.
$kendo-gantt-task-progress-bg	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The background color of the Gantt task progress.
$kendo-gantt-task-progress-hover-bg	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The background color of the hovered Gantt task progress.
$kendo-gantt-task-selected-bg	String	`if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-50 ))`	`var(--kendo-color-primary-subtle-active, #abd1ef)`
Description The background color of selected the Gantt task.
$kendo-gantt-task-selected-text	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The text color of the selected Gantt task.
$kendo-gantt-task-selected-border	Color	`transparent`	`transparent`
Description The border color of the selected Gantt task.
$kendo-gantt-task-progress-selected-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the selected Gantt task progress.
$kendo-gantt-task-actions-padding-y	String	`$kendo-padding-md-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the Gantt task actions.
$kendo-gantt-task-actions-padding-x	String	`$kendo-padding-md-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Gantt task actions.
$kendo-gantt-planned-margin-y	Number	`.45em`	`0.45em`
Description The vertical margin of the Gantt task planned line.
$kendo-gantt-planned-border-width	Number	`2px`	`2px`
Description The border width of the Gantt task planned line.
$kendo-gantt-planned-line-height	Number	`.85em`	`0.85em`
Description The line height of the Gantt task planned line.
$kendo-gantt-planned-dependency-margin-y	Number	`.65em`	`0.65em`
Description The vertical margin of the Gantt planned dependencies.
$kendo-gantt-planned-moment-width	Number	`6px`	`6px`
Description The default width of the Gantt planned line dot.
$kendo-gantt-planned-moment-height	Number	`$kendo-gantt-planned-moment-width`	`6px`
Description The default height of the Gantt planned line dot.
$kendo-gantt-planned-moment-border-radius	Calculation	`calc( ( #{$kendo-gantt-planned-border-width * 2} + #{$kendo-gantt-planned-moment-width} ) / 2 )`	`calc((4px + 6px) / 2)`
Description The border radius of the Gantt planned line dot.
$kendo-gantt-planned-moment-left-margin-x	Calculation	`calc( #{$kendo-gantt-planned-border-width} / 2 - #{$kendo-gantt-planned-moment-border-radius} )`	`calc(2px / 2 - calc((4px + 6px) / 2))`
Description The horizontal margin of the Gantt planned line dot.
$kendo-gantt-planned-milestone-moment-margin-x	Number	`math.div( $kendo-gantt-planned-moment-width, 2 )`	`3px`
Description The horizontal margin of the Gantt milestone planned line dot.
$kendo-gantt-planned-duration-height	Number	`$kendo-gantt-planned-border-width`	`2px`
Description The default height of the Gantt planned line.
$kendo-gantt-planned-duration-hover-height	Calculation	`calc( #{$kendo-gantt-planned-border-width} + 1px )`	`calc(2px + 1px)`
Description The height of the hovered Gantt planned line.
$kendo-gantt-planned-single-drag-hint-top	Number	`0`	`0`
Description The top position of the Gantt drag hint.
$kendo-gantt-planned-summary-drag-hint-top	Number	`.5em`	`0.5em`
Description The top position of the Gantt summary drag hint.
$kendo-gantt-planned-milestone-drag-hint-top	Number	`.3em`	`0.3em`
Description The top position of the Gantt planned milestone drag hint.
$kendo-gantt-planned-offset-resize-handler-margin-x	Number	`1.4em`	`1.4em`
Description The horizontal offset of the Gantt delayed task resize handler.
$kendo-gantt-planned-text	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The text color of the Gantt planned Tooltip.
$kendo-gantt-planned-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the Gantt planned Tooltip.
$kendo-gantt-planned-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the Gantt planned Tooltip.
$kendo-gantt-delayed-text	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The text color of the Gantt delayed task.
$kendo-gantt-delayed-bg	String	`if($kendo-enable-color-system, k-color( error-emphasis ), k-get-theme-color-var( error-160 ))`	`var(--kendo-color-error-emphasis, #a4262c)`
Description The background color of the Gantt delayed task.
$kendo-gantt-delayed-bg-lighter	String	`if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-110))`	`var(--kendo-color-error, #c2666b)`
Description The complement background color of the Gantt delayed task.
$kendo-gantt-delayed-hover-bg	String	`if($kendo-enable-color-system, k-color( error-on-subtle ), k-get-theme-color-var( error-190 ))`	`var(--kendo-color-error-on-subtle, #420f12)`
Description The background color of the hovered Gantt delayed task.
$kendo-gantt-advanced-bg	String	`if($kendo-enable-color-system, k-color( success-emphasis ), k-get-theme-color-var( success-160 ))`	`var(--kendo-color-success-emphasis, #107c10)`
Description The background color of the Gantt advanced task.
$kendo-gantt-advanced-bg-lighter	String	`if($kendo-enable-color-system, k-color( success ), k-get-theme-color-var( success-110 ))`	`var(--kendo-color-success, #55a554)`
Description The complement background color of the Gantt advanced task.
$kendo-gantt-advanced-hover-bg	String	`if($kendo-enable-color-system, k-color( success-on-subtle ), k-get-theme-color-var( success-190 ))`	`var(--kendo-color-success-on-subtle, #063206)`
Description The background color of the hovered Gantt advanced task.
$kendo-gantt-action-on-offset-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the Gantt delayed task action.
$kendo-gantt-offset-resize-handler-top	Number	`50%`	`50%`
Description The top position of the Gantt delayed task resize handler.
$kendo-gantt-validation-tooltip-width	Number	`200px`	`200px`
Description The default width of the Gantt validation Tooltip.
$kendo-gantt-validation-tooltip-label-width	Number	`50px`	`50px`
Description The default width of the Gantt validation Tooltip label.
$kendo-gantt-validation-tooltip-border	String	`var( --kendo-component-border, inherit )`	`var(--kendo-component-border, inherit)`
Description The border color of the Gantt validation Tooltip.
$kendo-gantt-validation-tooltip-valid-border	String	`if($kendo-enable-color-system, k-color( success ), k-get-theme-color-var( success-100 ))`	`var(--kendo-color-success, #55a554)`
Description The border color of the valid Gantt validation Tooltip.
$kendo-gantt-validation-tooltip-invalid-border	String	`if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-100 ))`	`var(--kendo-color-error, #c2666b)`
Description The border color of the invalid Gantt validation Tooltip.

Grid

Name	Type	Default value	Computed value
$kendo-grid-border-width	Number	`1px`	`1px`
Description The border width of the Grid.
$kendo-grid-border-style	String	`solid`	`solid`
Description The border style of the Grid.
$kendo-grid-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Grid.
$kendo-grid-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Grid.
$kendo-grid-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Grid.
$kendo-grid-padding-x	String	`$kendo-table-cell-padding-x`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the Grid.
$kendo-grid-padding-y	String	`$kendo-table-cell-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the Grid.
$kendo-grid-header-padding-x	String	`$kendo-grid-padding-x`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the Grid header.
$kendo-grid-header-padding-y	String	`$kendo-grid-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the Grid header.
$kendo-grid-grouping-header-padding-x	String	`$kendo-toolbar-md-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Grid grouping header.
$kendo-grid-grouping-header-padding-y	String	`$kendo-toolbar-md-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Grid grouping header.
$kendo-grid-cell-padding-x	String	`$kendo-grid-padding-x`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the Grid cell.
$kendo-grid-cell-padding-y	String	`$kendo-grid-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the Grid cell.
$kendo-grid-filter-cell-padding-x	String	`$kendo-grid-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the Grid filter cell.
$kendo-grid-filter-cell-padding-y	String	`$kendo-grid-filter-cell-padding-x`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the Grid filter cell.
$kendo-grid-edit-cell-padding-x	String	`$kendo-grid-cell-padding-x`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the Grid edit cell.
$kendo-grid-edit-cell-padding-y	Calculation	`calc( #{k-spacing(2.5)} / 2 )`	`calc(var(--kendo-spacing-2\.5, 0.625rem) / 2)`
Description The vertical padding of the Grid filter cell.
$kendo-grid-group-drop-hint-size	Number	`6px`	`6px`
Description The size of the Grid group drop clue.
$kendo-grid-group-drop-hint-line-size	Number	`1px`	`1px`
Description The line size of the Grid group drop clue.
$kendo-grid-group-drop-hint-dot-size	Number	`$kendo-grid-group-drop-hint-size`	`6px`
Description The dot size of the Grid group drop clue.
$kendo-grid-group-drop-hint-height	Calculation	`calc( #{$kendo-chip-calc-size} + #{$kendo-grid-group-drop-hint-size} )`	`calc(calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2) + 6px)`
Description The height of the Grid group drop clue.
$kendo-grid-group-drop-hint-top	Number	`2px`	`2px`
Description The top offset of the Grid group drop clue.
$kendo-grid-bg	String	`$kendo-table-bg`	`var(--kendo-component-bg, initial)`
Description The background color of the Grid.
$kendo-grid-text	String	`$kendo-table-text`	`var(--kendo-component-text, initial)`
Description The text color of the Grid.
$kendo-grid-border	String	`$kendo-table-border`	`var(--kendo-component-border, initial)`
Description The border color of the Grid.
$kendo-grid-focus-shadow	List	`$kendo-list-item-focus-shadow`	`inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c)`
Description The focus shadow of the Grid.
$kendo-grid-alt-bg	String	`$kendo-table-alt-row-bg`	`initial`
Description The background color of alternating rows in Grid.
$kendo-grid-alt-text	String	`$kendo-table-alt-row-text`	`var(--kendo-component-text, initial)`
Description The text color of alternating rows in Grid.
$kendo-grid-alt-border	String	`$kendo-table-alt-row-border`	`var(--kendo-component-border, initial)`
Description The border color of alternating rows in Grid.
$kendo-grid-hover-bg	String	`$kendo-table-hover-bg`	`var(--kendo-hover-bg, inherit)`
Description The background color of hover rows in Grid.
$kendo-grid-hover-text	String	`$kendo-table-hover-text`	`var(--kendo-hover-text, inherit)`
Description The text color of hover rows in Grid.
$kendo-grid-hover-border	String	`$kendo-table-hover-border`	`var(--kendo-component-border, initial)`
Description The border color of hover rows in Grid.
$kendo-grid-selected-bg	String	`$kendo-table-selected-bg`	`color-mix(in srgb, var(--kendo-color-primary, #0078d4) 13%, transparent)`
Description The background color of selected rows in Grid.
$kendo-grid-selected-text	String	`$kendo-table-selected-text`	`var(--kendo-component-text, initial)`
Description The text color of selected rows in Grid.
$kendo-grid-selected-border	String	`$kendo-table-selected-border`	`var(--kendo-component-border, initial)`
Description The border color of selected rows in Grid.
$kendo-grid-selected-hover-bg	String	`$kendo-table-selected-hover-bg`	`color-mix(in srgb, var(--kendo-color-primary, #0078d4) 26%, transparent)`
Description The background color of hovered selected rows in Grid.
$kendo-grid-selected-hover-text	String	`$kendo-table-selected-hover-text`	`var(--kendo-component-text, initial)`
Description The text color of hovered selected rows in Grid.
$kendo-grid-selected-hover-border	String	`$kendo-table-selected-hover-border`	`var(--kendo-component-border, initial)`
Description The border color of hovered selected rows in Grid.
$kendo-grid-header-border-width-y	Number	`$kendo-grid-border-width`	`1px`
Description The vertical border width of the Grid header.
$kendo-grid-header-border-width-x	Number	`0`	`0`
Description The horizontal border width of the Grid header.
$kendo-grid-header-font-size	String	`inherit`	`inherit`
Description The font size of the Grid header.
$kendo-grid-header-font-weight	String	`var( --kendo-font-weight-bold, normal )`	`var(--kendo-font-weight-bold, normal)`
Description The font weight of the Grid header.
$kendo-grid-header-menu-spacing	String	`var( --kendo-icon-spacing, .5rem )`	`var(--kendo-icon-spacing, 0.5rem)`
Description The menu spacing of the Grid header.
$kendo-grid-header-first-border-width	Number	`$kendo-grid-border-width`	`1px`
Description The border width of the first cell in the Grid header.
$kendo-grid-header-bg	String	`$kendo-table-header-bg`	`var(--kendo-component-bg, initial)`
Description The background color of Grid header.
$kendo-grid-header-text	String	`$kendo-table-header-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of Grid header.
$kendo-grid-header-border	String	`$kendo-table-header-border`	`var(--kendo-component-border, initial)`
Description The border color of Grid header.
$kendo-grid-header-icon-text	String	`if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-subtle, #605e5c)`
Description The background color of Grid header icons.
$kendo-grid-footer-bg	String	`$kendo-table-footer-bg`	`var(--kendo-component-bg, initial)`

$kendo-grid-footer-text	String	`$kendo-table-footer-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of Grid footer.
$kendo-grid-footer-border	String	`$kendo-table-footer-border`	`var(--kendo-component-border, initial)`
Description The border color of Grid footer.
$kendo-grid-selection-aggregates-bg	String	`$kendo-toolbar-bg`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the Grid selection aggregates container.
$kendo-grid-selection-aggregates-text	String	`$kendo-grid-text`	`var(--kendo-component-text, initial)`
Description The text color of the Grid selection aggregates container.
$kendo-grid-selection-aggregates-border	String	`$kendo-grid-border`	`var(--kendo-component-border, initial)`
Description The border color of the Grid selection aggregates container.
$kendo-grid-selection-aggregates-border-width	Number	`$kendo-grid-border-width`	`1px`
Description The border width of the Grid selection aggregates container.
$kendo-grid-selection-aggregates-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing between the Grid selection aggregates items.
$kendo-grid-selection-aggregates-line-height	String	`$kendo-grid-line-height`	`var(--kendo-line-height, normal)`
Description Line height of the Grid selection aggregates container.
$kendo-grid-selection-aggregates-font-weight	Number	`$kendo-font-weight-bold`	`700`
Description The font weight of the Grid selection aggregates container.
$kendo-grid-grouping-header-bg	String	`$kendo-toolbar-bg`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the Grid grouping header.
$kendo-grid-grouping-header-text	String	`$kendo-toolbar-text`	`var(--kendo-component-text, inherit)`
Description The text color of the Grid grouping header.
$kendo-grid-grouping-header-border	String	`$kendo-toolbar-border`	`var(--kendo-component-border, initial)`
Description The border color of the Grid grouping header.
$kendo-grid-grouping-row-border-width-y	Number	`$kendo-grid-border-width`	`1px`
Description The vertical border width of the Grid grouping row.
$kendo-grid-grouping-row-bg	String	`$kendo-table-group-row-bg`	`var(--kendo-component-bg, initial)`
Description The background color of the Grid grouping row.
$kendo-grid-grouping-row-text	String	`$kendo-table-group-row-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the Grid grouping row.
$kendo-grid-grouping-row-border	String	`$kendo-table-group-row-border`	`var(--kendo-component-border, initial)`
Description The border color of the Grid grouping row.
$kendo-grid-filter-cell-padding-x	String	`$kendo-grid-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the Grid filter cell.
$kendo-grid-filter-cell-padding-y	String	`$kendo-grid-filter-cell-padding-x`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the Grid filter cell.
$kendo-grid-toolbar-padding-x	String	`$kendo-toolbar-md-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Grid Toolbar.
$kendo-grid-toolbar-padding-y	String	`$kendo-toolbar-md-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Grid Toolbar.
$kendo-grid-toolbar-spacing	String	`$kendo-toolbar-md-spacing`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing of the Grid Toolbar.
$kendo-grid-toolbar-border-width	Number	`$kendo-grid-border-width`	`1px`
Description The border width of the Grid Toolbar.
$kendo-grid-cell-border-width-y	Number	`$kendo-grid-border-width`	`1px`
Description The vertical border width of the Grid cell.
$kendo-grid-cell-border-width-x	Number	`0px`	`0px`
Description The horizontal border width of the Grid cell.
$kendo-grid-sort-index-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the Grid sort index.
$kendo-grid-sort-index-height	String	`var( --kendo-icon-size, 1rem )`	`var(--kendo-icon-size, 1rem)`
Description The default height of the Grid sort index.
$kendo-grid-sort-index-spacing-y	Calculation	`calc( var( --kendo-icon-spacing, .5rem ) / 4 )`	`calc(var(--kendo-icon-spacing, 0.5rem) / 4)`
Description The horizontal offset of the Grid sort index.
$kendo-grid-sort-index-spacing-x	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical offset of the Grid sort index.
$kendo-grid-sort-icon-spacing	String	`var( --kendo-icon-lg-spacing, .5rem )`	`var(--kendo-icon-lg-spacing, 0.5rem)`
Description The spacing of the Grid sort icon.
$kendo-grid-sort-indicator-text	String	`if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-subtle, #605e5c)`
Description The text color of the Grid sort indicator.
$kendo-grid-sort-indicator-order-text	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The text color of the Grid sort order indicator.
$kendo-grid-sorted-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the sorted Grid cells.
$kendo-grid-command-cell-padding-y	Calculation	`calc( #{$kendo-table-cell-padding-y} - (#{$kendo-button-calc-size} - #{$kendo-line-height-em} ) / 2 )`	`calc(var(--kendo-spacing-3, 0.75rem) - (calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 1px * 2) - calc(1.4285714286 * 1em)) / 2)`
Description The horizontal padding of the Grid command cells.
$kendo-grid-command-cell-button-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Grid command cells.
$kendo-grid-group-indicator-padding-x	String	`$kendo-button-md-padding-x`	`var(--kendo-spacing-5, 1.25rem)`
Description The horizontal padding of the Grid group indicator.
$kendo-grid-group-indicator-padding-y	String	`$kendo-button-md-padding-y`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the Grid group indicator.
$kendo-grid-group-indicator-border-width	Number	`$kendo-button-border-width`	`1px`
Description The border width of the Grid group indicator.
$kendo-grid-group-indicator-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the Grid group indicator.
$kendo-grid-group-indicator-gap	String	`$kendo-table-cell-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
Description Spacing of the grid group indicator.
$kendo-grid-group-indicator-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Grid group indicator.
$kendo-grid-group-indicator-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Grid group indicator.
$kendo-grid-group-indicator-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))`	`var(--kendo-color-border, #8a8886)`
Description The border color of the Grid group indicator.
$kendo-grid-group-indicator-icon-text	String	`if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-subtle, #605e5c)`
Description The text color of the Grid group indicator icon.
$kendo-grid-group-footer-border-width-y	Number	`0px`	`0px`
Description The horizontal border width of the Grid group footer.
$kendo-grid-group-footer-border-width-x	Number	`0px`	`0px`
Description The vertical border width of the Grid group footer.
$kendo-grid-group-drop-hint-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The text color of the Grid group drop clue.
$kendo-grid-sticky-cell-border-width	Number	`$kendo-grid-border-width`	`1px`
Description The border width of the Grid sticky cell.
$kendo-grid-sticky-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Grid sticky cell.
$kendo-grid-sticky-text	String	`$kendo-grid-text`	`var(--kendo-component-text, initial)`
Description The text color of the Grid sticky cell.
$kendo-grid-sticky-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 80%, transparent), k-get-theme-color-var( neutral-90 ))`	`color-mix(in srgb, var(--kendo-color-border, #8a8886) 80%, transparent)`
Description The border color of the Grid sticky cell.
$kendo-grid-sticky-alt-bg	String	`$kendo-grid-sticky-bg`	`var(--kendo-component-bg, initial)`
Description The alt background color of the Grid sticky cell.
$kendo-grid-sticky-hover-bg	String	`$kendo-grid-hover-bg`	`var(--kendo-hover-bg, inherit)`
Description The background color of the Grid sticky cell.
$kendo-grid-sticky-header-bg	String	`$kendo-grid-header-bg`	`var(--kendo-component-bg, initial)`
Description The background color of the Grid sticky header.
$kendo-grid-sticky-header-text	String	`$kendo-grid-header-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the Grid sticky header.
$kendo-grid-sticky-header-border	String	`$kendo-grid-sticky-border`	`color-mix(in srgb, var(--kendo-color-border, #8a8886) 80%, transparent)`
Description The border color of the Grid sticky header.
$kendo-grid-sticky-footer-bg	String	`$kendo-grid-header-bg`	`var(--kendo-component-bg, initial)`
Description The background color of the Grid sticky footer.
$kendo-grid-sticky-footer-hover-bg	String	`$kendo-grid-hover-bg`	`var(--kendo-hover-bg, inherit)`
Description The background color of the Grid sticky footer.
$kendo-grid-sticky-selected-bg	String	`$kendo-grid-selected-bg`	`color-mix(in srgb, var(--kendo-color-primary, #0078d4) 13%, transparent)`
Description The background color of the selected Grid sticky cells.
$kendo-grid-sticky-selected-alt-bg	String	`$kendo-grid-sticky-selected-bg`	`color-mix(in srgb, var(--kendo-color-primary, #0078d4) 13%, transparent)`
Description The background color of the selected alt Grid sticky cells.
$kendo-grid-sticky-selected-hover-bg	String	`if($kendo-enable-color-system, $kendo-grid-sticky-selected-bg, $kendo-grid-selected-hover-bg)`	`color-mix(in srgb, var(--kendo-color-primary, #0078d4) 13%, transparent)`
Description The background color of the hovered selected Grid sticky cells.
$kendo-filter-menu-container-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the Grid filter menu container.
$kendo-filter-menu-container-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the Grid filter menu container.
$kendo-grid-column-menu-width	Number	`230px`	`230px`
Description The default width of the Grid column menu.
$kendo-grid-column-menu-max-width	Number	`320px`	`320px`
Description The max width of the Grid column menu.
$kendo-grid-column-menu-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing of the Grid column menu.
$kendo-grid-column-menu-shadow	String	`var( --kendo-box-shadow-depth-4, none )`	`var(--kendo-box-shadow-depth-4, none)`
Description The focus shadow of the Grid column menu.
$kendo-grid-column-menu-bg	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description The background color of the Grid column menu.
$kendo-grid-column-menu-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the Grid column menu.
$kendo-grid-column-menu-border	String	`var( --kendo-component-border, inherit )`	`var(--kendo-component-border, inherit)`
Description The border color of the Grid column menu.
$kendo-grid-column-menu-multicheck-font-size	String	`$kendo-list-md-font-size`	`var(--kendo-font-size, inherit)`
Description The font size of the Grid column menu checkbox container.
$kendo-grid-column-menu-multicheck-line-height	String	`$kendo-list-md-line-height`	`var(--kendo-line-height, normal)`
Description The line height of the Grid column menu checkbox container.
$kendo-grid-column-menu-items-wrap-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Grid column menu items wrap.
$kendo-grid-column-menu-items-wrap-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Grid column menu items wrap.
$kendo-grid-column-menu-item-padding-y	String	`$kendo-list-md-item-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Grid column menu item.
$kendo-grid-column-menu-item-padding-x	String	`$kendo-list-md-item-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Grid column menu item.
$kendo-grid-column-menu-item-gap	String	`$kendo-list-md-item-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing of the Grid column menu item.
$kendo-grid-column-menu-item-icon-spacing	String	`var( --kendo-icon-spacing, .5rem )`	`var(--kendo-icon-spacing, 0.5rem)`
Description The icon spacing of the Grid column menu item.
$kendo-grid-column-menu-item-bg	String	`$kendo-list-item-bg`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the Grid column menu item.
$kendo-grid-column-menu-item-text	String	`$kendo-list-item-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the Grid column menu item.
$kendo-grid-column-menu-item-hover-bg	String	`$kendo-list-item-hover-bg`	`var(--kendo-color-base-hover, #f3f2f1)`
Description The background color of the Grid column menu item.
$kendo-grid-column-menu-item-hover-text	String	`$kendo-list-item-hover-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the hovered Grid column menu item.
$kendo-grid-column-menu-item-selected-bg	String	`$kendo-list-item-selected-bg`	`var(--kendo-color-base-active, #edebe9)`
Description The background color of the selected Grid column menu item.
$kendo-grid-column-menu-item-selected-text	String	`$kendo-list-item-selected-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the selected Grid column menu item.
$kendo-grid-column-menu-item-focus-shadow	List	`$kendo-list-item-focus-shadow`	`inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c)`
Description The focus shadow of the Grid column menu item.
$kendo-grid-column-menu-item-icon-text	String	`$kendo-list-item-icon-text`	`var(--kendo-color-primary, #0078d4)`
Description The text color of the Grid column menu item icon.
$kendo-grid-column-menu-group-header-padding-y	String	`$kendo-grid-column-menu-item-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Grid column menu group header.
$kendo-grid-column-menu-group-header-padding-x	String	`$kendo-grid-column-menu-item-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Grid column menu group header.
$kendo-grid-column-menu-group-header-border-width	Number	`1px`	`1px`
Description The border width of the Grid column menu group header.
$kendo-grid-column-menu-group-header-border-style	String	`solid`	`solid`
Description The border style of the Grid column menu group header.
$kendo-grid-column-menu-group-header-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the Grid column menu group header.
$kendo-grid-column-menu-group-header-font-weight	String	`var( --kendo-font-weight-bold, normal )`	`var(--kendo-font-weight-bold, normal)`
Description The font weight of the Grid column menu group header.
$kendo-grid-column-menu-group-header-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The mine height of the Grid column menu group header.
$kendo-grid-column-menu-group-header-text-transform	String	`uppercase`	`uppercase`
Description The text transform of the Grid column menu group header.
$kendo-grid-column-menu-group-header-bg	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description The background color of the Grid column menu group.
$kendo-grid-column-menu-group-header-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the Grid column menu group.
$kendo-grid-column-menu-group-header-border	String	`var( --kendo-component-border, inherit)`	`var(--kendo-component-border, inherit)`
Description The border color of the Grid column menu group.
$kendo-grid-column-menu-tabbed-tabstrip-content-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal padding of the tabstrip content in the Grid tabbed column menu.
$kendo-grid-column-menu-tabbed-tabstrip-content-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the tabstrip content in the Grid tabbed column menu.
$kendo-grid-column-menu-tabbed-bg	String	`var( --kendo-base-bg, inherit )`	`var(--kendo-base-bg, inherit)`
Description The background color of the Grid tabbed column menu.
$kendo-grid-drag-cell-width	Calculation	`calc( var( --kendo-icon-size, 1rem ) * 2.25 )`	`calc(var(--kendo-icon-size, 1rem) * 2.25)`
Description The default width of the Grid drag cell.
$kendo-grid-hierarchy-col-width	Calculation	`calc( var( --kendo-icon-size, 1rem ) * 2 )`	`calc(var(--kendo-icon-size, 1rem) * 2)`
Description The default width of the Grid hierarchy cell.
$kendo-grid-filterable-icon-spacing	Calculation	`calc( #{$kendo-button-calc-size} + #{$kendo-grid-header-menu-spacing} )`	`calc(calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 1px * 2) + var(--kendo-icon-spacing, 0.5rem))`
Description The spacing of the Grid filterable icon.
$kendo-grid-row-resizer-hover-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)`
Description The background color of the Grid row resize indicator.
$kendo-grid-row-resizer-active-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the active Grid row resize indicator.
$kendo-grid-row-resizer-height	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The height of the Grid row resize indicator.

Icon

Name	Type	Default value	Computed value
$kendo-icon-size	Number	`1rem`	`1rem`
Description Font sizes of the icons.
$kendo-icon-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Spacing around the icons.
$kendo-icon-padding	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description Padding of the action icons container.

Imageeditor

Name	Type	Default value	Computed value
$kendo-image-editor-bg	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description Background color of the imageeditor.
$kendo-image-editor-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description Text color of the imageeditor.
$kendo-image-editor-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))`	`color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)`
Description Border color of the imageeditor.
$kendo-image-editor-margin-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description Vertical margin of the imageeditor.
$kendo-image-editor-margin-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description Horizontal margin of the imageeditor.
$kendo-image-editor-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description Vertical padding of the imageeditor.
$kendo-image-editor-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description Horizontal padding of the imageeditor.
$kendo-image-editor-border-width	Number	`1px`	`1px`
Description Border width of the imageeditor.
$kendo-image-editor-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description Font size of the imageeditor.
$kendo-image-editor-line-height	String	`var( --kendo-line-height, inherit )`	`var(--kendo-line-height, inherit)`
Description Line height of the imageeditor.
$kendo-image-editor-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description Font family of the imageeditor.
$kendo-image-editor-content-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 23%, transparent)`
Description Imageeditor content background color.
$kendo-image-editor-content-text	String	`inherit`	`inherit`
Description Imageeditor content text color.
$kendo-image-editor-content-border	String	`inherit`	`inherit`
Description Imageeditor content border color.
$kendo-image-editor-content-border-width	Number	`0`	`0`
Description Imageeditor content border width.
$kendo-image-editor-action-pane-bg	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description Imageeditor action pane background color.
$kendo-image-editor-action-pane-text	String	`inherit`	`inherit`
Description Imageeditor action pane text color.
$kendo-image-editor-action-pane-border	String	`inherit`	`inherit`
Description Imageeditor action pane border.
$kendo-image-editor-action-pane-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description Imageeditor action pane vertical padding.
$kendo-image-editor-action-pane-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description Imageeditor action pane horizontal padding.
$kendo-image-editor-action-pane-width	Number	`if( $kendo-image-editor-content-border-width == 0, 240px, calc( 240px + #{$kendo-image-editor-content-border-width}) )`	`240px`
Description Imageeditor action pane width.
$kendo-image-editor-crop-bg	String	`inherit`	`inherit`
Description Crop background color of the imageeditor.
$kendo-image-editor-crop-text	String	`inherit`	`inherit`
Description Crop text color of the imageeditor.
$kendo-image-editor-crop-border	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description Crop border color of the imageeditor.
$kendo-image-editor-crop-overlay-bg	Color	`rgba( $kendo-color-black, .3 )`	`rgba(0, 0, 0, 0.3)`
Description Crop overlay background color of the imageeditor.
$kendo-image-editor-crop-border-width	Number	`1px`	`1px`
Description Crop border width of the imageeditor.
$kendo-image-editor-crop-border-style	String	`dashed`	`dashed`
Description Crop border style of the imageeditor.
$kendo-image-editor-resize-handle-margin-x	String	`k-spacing(1px)`	`var(--kendo-spacing-1px, 1px)`
Description Imageeditor resize handle horizontal margin.
$kendo-image-editor-resize-handle-margin-y	String	`k-spacing(1px)`	`var(--kendo-spacing-1px, 1px)`
Description Imageeditor resize handle vertical margin.
$kendo-image-editor-resize-handle-border-width	List	`0 2px 2px 0`	`0 2px 2px 0`
Description Imageeditor resize handle border width.
$kendo-image-editor-resize-handle-size	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description Imageeditor resize handle size.
$kendo-image-editor-resize-top-offset	Calculation	`calc( #{$kendo-image-editor-resize-handle-size} / 2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description Imageeditor resize handle top offset.
$kendo-image-editor-resize-left-offset	Calculation	`calc( #{$kendo-image-editor-resize-handle-size} / 2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description Imageeditor resize handle left offset.

Input

Name	Type	Default value	Computed value
$kendo-input-width	Number	`100%`	`100%`
Description The width of the Input components.
$kendo-input-border-width	Number	`1px`	`1px`
Description The width of the border around the Input components.
$kendo-input-border-height	Number	`( $kendo-input-border-width * 2 )`	`2px`
Description The height of the border around the Input components.
$kendo-input-sm-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the small Input components.
$kendo-input-md-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the medium Input components.
$kendo-input-lg-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the large Input components.
$kendo-input-sm-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the small Input components.
$kendo-input-md-padding-y	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the medium Input components.
$kendo-input-lg-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the large Input components.
$kendo-input-sm-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the small Input components.
$kendo-input-md-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the medium Input components.
$kendo-input-lg-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the large Input components.
$kendo-input-sm-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the small Input components.
$kendo-input-md-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the medium Input components.
$kendo-input-lg-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the large Input components.
$kendo-input-sm-button-width	Calculation	`calc( #{$kendo-button-sm-line-height} * 1em + #{$kendo-button-sm-padding-y} * 2 )`	`calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2)`
Description The width of the small Input button.
$kendo-input-md-button-width	Calculation	`calc( #{$kendo-button-md-line-height} * 1em + #{$kendo-button-md-padding-y} * 2 )`	`calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2)`
Description The width of the medium Input button.
$kendo-input-lg-button-width	Calculation	`calc( #{$kendo-button-lg-line-height} * 1em + #{$kendo-button-lg-padding-y} * 2 )`	`calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2)`
Description The width of the large Input button.
$kendo-input-button-border-width	Number	`1px`	`1px`
Description The border width of the Input button.
$kendo-input-sm-spinner-width	Calculation	`$kendo-input-sm-button-width`	`calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2)`
Description The width of the small Input spinner button.
$kendo-input-md-spinner-width	Calculation	`$kendo-input-md-button-width`	`calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2)`
Description The width of the medium Input spinner button.
$kendo-input-lg-spinner-width	Calculation	`$kendo-input-lg-button-width`	`calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2)`
Description The width of the large Input spinner button.
$kendo-input-spinner-icon-offset	Null	`null`	`null`
Description The icon offset of the Input spinner button.
$kendo-input-solid-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the solid Input components.
$kendo-input-solid-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the solid Input components.
$kendo-input-solid-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-border, #8a8886)`
Description The border color of the solid Input components.
$kendo-input-solid-hover-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the hovered solid Input components.
$kendo-input-solid-hover-bg	String	`$kendo-input-solid-bg`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the hovered solid Input components.
$kendo-input-solid-hover-border	String	`if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-border-alt, #323130)`
Description The border color of the hovered solid Input components.
$kendo-input-solid-focus-text	String	`$kendo-input-solid-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the focused solid Input components.
$kendo-input-solid-focus-bg	String	`$kendo-input-solid-bg`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the focused solid Input components.
$kendo-input-solid-focus-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the focused solid Input components.
$kendo-input-solid-hover-focus-text	String	`$kendo-input-solid-focus-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the hovered and focused solid Input components.
$kendo-input-solid-hover-focus-bg	String	`$kendo-input-solid-focus-bg`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the hovered and focused solid Input components.
$kendo-input-solid-hover-focus-border	String	`$kendo-input-solid-focus-border`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the hovered and focused solid Input components.
$kendo-input-solid-disabled-text	String	`$kendo-disabled-text`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)`
Description The text color of the disabled solid Input components.
$kendo-input-solid-disabled-bg	String	`$kendo-disabled-bg`	`var(--kendo-color-base-subtle, #edebe9)`
Description The background color of the disabled solid Input components.
$kendo-input-solid-disabled-border	Color	`$kendo-disabled-border`	`transparent`
Description The border color of the disabled solid Input components.
$kendo-input-outline-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the outline Input components.
$kendo-input-outline-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the outline Input components.
$kendo-input-outline-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-border, #8a8886)`
Description The border color of the outline Input components.
$kendo-input-outline-hover-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the hovered outline Input components.
$kendo-input-outline-hover-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the hovered outline Input components.
$kendo-input-outline-hover-border	String	`if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-border-alt, #323130)`
Description The border color of the hovered outline Input components.
$kendo-input-outline-focus-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the focused outline Input components.
$kendo-input-outline-focus-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the focused outline Input components.
$kendo-input-outline-focus-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the focused outline Input components.
$kendo-input-outline-hover-focus-text	String	`$kendo-input-outline-focus-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the hovered and focused outline Input components.
$kendo-input-outline-hover-focus-bg	String	`$kendo-input-outline-focus-bg`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the hovered and focused outline Input components.
$kendo-input-outline-hover-focus-border	String	`$kendo-input-outline-focus-border`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the hovered and focused outline Input components.
$kendo-input-outline-disabled-text	String	`$kendo-disabled-text`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)`
Description The text color of the disabled outline Input components.
$kendo-input-outline-disabled-bg	String	`none`	`none`
Description The background color of the disabled outline Input components.
$kendo-input-outline-disabled-border	String	`$kendo-disabled-text`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)`
Description The border color of the disabled outline Input components.
$kendo-input-flat-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the flat Input components.
$kendo-input-flat-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the flat Input components.
$kendo-input-flat-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-border, #8a8886)`
Description The border color of the flat Input components.
$kendo-input-flat-hover-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the hovered flat Input components.
$kendo-input-flat-hover-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the hovered flat Input components.
$kendo-input-flat-hover-border	String	`if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-border-alt, #323130)`
Description The border color of the hovered flat Input components.
$kendo-input-flat-focus-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the focused flat Input components.
$kendo-input-flat-focus-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the focused flat Input components.
$kendo-input-flat-focus-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the focused flat Input components.
$kendo-input-flat-hover-focus-text	String	`$kendo-input-flat-focus-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the hovered and focused flat Input components.
$kendo-input-flat-hover-focus-bg	String	`$kendo-input-flat-focus-bg`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the hovered and focused flat Input components.
$kendo-input-flat-hover-focus-border	String	`$kendo-input-flat-focus-border`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the hovered and focused flat Input components.
$kendo-input-flat-disabled-text	String	`$kendo-disabled-text`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)`
Description The text color of the disabled flat Input components.
$kendo-input-flat-disabled-bg	String	`none`	`none`
Description The background color of the disabled flat Input components.
$kendo-input-flat-disabled-border	String	`$kendo-disabled-text`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)`
Description The border color of the disabled flat Input components.
$kendo-picker-solid-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the solid Picker components.
$kendo-picker-solid-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the solid Picker components.
$kendo-picker-solid-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))!default`	`var(--kendo-color-border, #8a8886)`
Description The border color of the solid Picker components.
$kendo-picker-solid-hover-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the hovered solid Picker components.
$kendo-picker-solid-hover-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of hovered the solid Picker components.
$kendo-picker-solid-hover-border	String	`if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-border-alt, #323130)`
Description The border color of the hovered solid Picker components.
$kendo-picker-solid-focus-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the focused solid Picker components.
$kendo-picker-solid-focus-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the focused solid Picker components.
$kendo-picker-solid-focus-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the focused solid Picker components.
$kendo-picker-solid-hover-focus-text	String	`$kendo-picker-solid-focus-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the hovered and focused solid Picker components.
$kendo-picker-solid-hover-focus-bg	String	`$kendo-picker-solid-focus-bg`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the hovered and focused solid Picker components.
$kendo-picker-solid-hover-focus-border	String	`$kendo-picker-solid-focus-border`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the hovered and focused solid Picker components.
$kendo-picker-solid-disabled-text	String	`$kendo-disabled-text`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)`
Description The text color of the disabled solid Picker components.
$kendo-picker-solid-disabled-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), k-get-theme-color-var( neutral-30 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 9%, transparent)`
Description The background color of the disabled solid Picker components.
$kendo-picker-solid-disabled-border	Color	`$kendo-disabled-border`	`transparent`
Description The border color of the disabled solid Picker components.
$kendo-picker-outline-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the outline Picker components.
$kendo-picker-outline-bg	String	`none`	`none`
Description The background color of the outline Picker components.
$kendo-picker-outline-border	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The border color of the outline Picker components.
$kendo-picker-outline-hover-text	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The text color of the hovered outline Picker components.
$kendo-picker-outline-hover-bg	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The background color of the hovered outline Picker components.
$kendo-picker-outline-hover-border	String	`$kendo-picker-outline-hover-bg!default`	`var(--kendo-color-on-app-surface, #323130)`
Description The border color of the hovered outline Picker components.
$kendo-picker-outline-focus-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the focused outline Picker components.
$kendo-picker-outline-focus-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the focused outline Picker components.
$kendo-picker-outline-focus-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the focused outline Picker components.
$kendo-picker-outline-hover-focus-text	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The text color of the hovered and focused outline Picker components.
$kendo-picker-outline-hover-focus-bg	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The background color of the hovered and focused outline Picker components.
$kendo-picker-outline-hover-focus-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the hovered and focused outline Picker components.
$kendo-picker-outline-disabled-text	String	`$kendo-disabled-text`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)`
Description The text color of the disabled outline Picker components.
$kendo-picker-outline-disabled-bg	String	`none`	`none`
Description The background color of the disabled outline Picker components.
$kendo-picker-outline-disabled-border	String	`$kendo-picker-outline-disabled-text!default`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)`
Description The border color of the disabled outline Picker components.
$kendo-picker-flat-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the flat Picker components.
$kendo-picker-flat-bg	String	`none`	`none`
Description The background color of the flat Picker components.
$kendo-picker-flat-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-border, #8a8886)`
Description The border color of the flat Picker components.
$kendo-picker-flat-hover-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the hovered flat Picker components.
$kendo-picker-flat-hover-bg	String	`if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))`	`var(--kendo-color-base-hover, #f3f2f1)`
Description The background color of the hovered flat Picker components.
$kendo-picker-flat-hover-border	String	`if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-border-alt, #323130)`
Description The border color of the hovered flat Picker components.
$kendo-picker-flat-focus-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the focused flat Picker components.
$kendo-picker-flat-focus-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the focused flat Picker components.
$kendo-picker-flat-focus-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the focused flat Picker components.
$kendo-picker-flat-hover-focus-text	String	`$kendo-picker-flat-hover-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the hovered and focused flat Picker components.
$kendo-picker-flat-hover-focus-bg	String	`$kendo-picker-flat-hover-bg`	`var(--kendo-color-base-hover, #f3f2f1)`
Description The background color of the hovered and focused flat Picker components.
$kendo-picker-flat-hover-focus-border	String	`$kendo-picker-flat-border`	`var(--kendo-color-border, #8a8886)`
Description The border color of the hovered and focused flat Picker components.
$kendo-picker-flat-disabled-text	String	`$kendo-disabled-text`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)`
Description The text color of the disabled flat Picker components.
$kendo-picker-flat-disabled-bg	String	`none`	`none`
Description The background color of the disabled flat Picker components.
$kendo-picker-flat-disabled-border	String	`$kendo-picker-flat-disabled-text`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)`
Description The border color of the disabled flat Picker components.
$kendo-input-sizes	Map	( sm: ( padding-x: $kendo-input-sm-padding-x, padding-y: $kendo-input-sm-padding-y, font-size: $kendo-input-sm-font-size, line-height: $kendo-input-sm-line-height, icon-size: calc( var( --kendo-icon-size, 1rem ) + calc( #{$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 ) + calc( #{$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 ) + calc( #{$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 ) )	(sm: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-1, 0.25rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), icon-size: calc(var(--kendo-icon-size, 1rem) + var(--kendo-spacing-1\.5, 0.375rem) * 2), button-padding-x: var(--kendo-spacing-1, 0.25rem), button-padding-y: var(--kendo-spacing-1, 0.25rem), button-width: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2)), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-1\.5, 0.375rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), icon-size: calc(var(--kendo-icon-size, 1rem) + var(--kendo-spacing-1, 0.25rem) * 2), button-padding-x: var(--kendo-spacing-1\.5, 0.375rem), button-padding-y: var(--kendo-spacing-1\.5, 0.375rem), button-width: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2)), lg: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-2, 0.5rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), icon-size: calc(var(--kendo-icon-size, 1rem) + var(--kendo-spacing-2, 0.5rem) * 2), button-padding-x: var(--kendo-spacing-2, 0.5rem), button-padding-y: var(--kendo-spacing-2, 0.5rem), button-width: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2)))
Description The sizes map for the Input components.
$kendo-input-theme-colors	Map	( 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 ) ) )	(input: (solid: (text: var(--kendo-color-on-app-surface, #323130), bg: var(--kendo-color-app-surface, #ffffff), border: var(--kendo-color-border, #8a8886), hover-text: var(--kendo-color-on-app-surface, #323130), hover-bg: var(--kendo-color-app-surface, #ffffff), hover-border: var(--kendo-color-border-alt, #323130), focus-text: var(--kendo-color-on-app-surface, #323130), focus-bg: var(--kendo-color-app-surface, #ffffff), focus-border: var(--kendo-color-primary, #0078d4), hover-focus-text: var(--kendo-color-on-app-surface, #323130), hover-focus-bg: var(--kendo-color-app-surface, #ffffff), hover-focus-border: var(--kendo-color-primary, #0078d4), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-bg: var(--kendo-color-base-subtle, #edebe9), disabled-border: transparent), outline: (text: var(--kendo-color-on-app-surface, #323130), bg: var(--kendo-color-app-surface, #ffffff), border: var(--kendo-color-border, #8a8886), hover-text: var(--kendo-color-on-app-surface, #323130), hover-bg: var(--kendo-color-app-surface, #ffffff), hover-border: var(--kendo-color-border-alt, #323130), focus-text: var(--kendo-color-on-app-surface, #323130), focus-bg: var(--kendo-color-app-surface, #ffffff), focus-border: var(--kendo-color-primary, #0078d4), hover-focus-text: var(--kendo-color-on-app-surface, #323130), hover-focus-bg: var(--kendo-color-app-surface, #ffffff), hover-focus-border: var(--kendo-color-primary, #0078d4), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-bg: none, disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)), flat: (text: var(--kendo-color-on-app-surface, #323130), bg: var(--kendo-color-app-surface, #ffffff), border: var(--kendo-color-border, #8a8886), hover-text: var(--kendo-color-on-app-surface, #323130), hover-bg: var(--kendo-color-app-surface, #ffffff), hover-border: var(--kendo-color-border-alt, #323130), focus-text: var(--kendo-color-on-app-surface, #323130), focus-bg: var(--kendo-color-app-surface, #ffffff), focus-border: var(--kendo-color-primary, #0078d4), hover-focus-tex: var(--kendo-color-on-app-surface, #323130), hover-focus-bg: var(--kendo-color-app-surface, #ffffff), hover-focus-border: var(--kendo-color-primary, #0078d4), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-bg: none, disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent))), picker: (solid: (text: var(--kendo-color-on-app-surface, #323130), bg: var(--kendo-color-app-surface, #ffffff), border: var(--kendo-color-border, #8a8886), hover-text: var(--kendo-color-on-app-surface, #323130), hover-bg: var(--kendo-color-app-surface, #ffffff), hover-border: var(--kendo-color-border-alt, #323130), focus-text: var(--kendo-color-on-app-surface, #323130), focus-bg: var(--kendo-color-app-surface, #ffffff), focus-border: var(--kendo-color-primary, #0078d4), hover-focus-tex: var(--kendo-color-on-app-surface, #323130), hover-focus-bg: var(--kendo-color-app-surface, #ffffff), hover-focus-border: var(--kendo-color-primary, #0078d4), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 9%, transparent), disabled-border: transparent), outline: (text: var(--kendo-color-on-app-surface, #323130), bg: none, border: var(--kendo-color-on-app-surface, #323130), hover-text: var(--kendo-color-app-surface, #ffffff), hover-bg: var(--kendo-color-on-app-surface, #323130), hover-border: var(--kendo-color-on-app-surface, #323130), focus-text: var(--kendo-color-on-app-surface, #323130), focus-bg: var(--kendo-color-app-surface, #ffffff), focus-border: var(--kendo-color-primary, #0078d4), hover-focus-text: var(--kendo-color-app-surface, #ffffff), hover-focus-bg: var(--kendo-color-on-app-surface, #323130), hover-focus-border: var(--kendo-color-primary, #0078d4), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-bg: none, disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)), flat: (text: var(--kendo-color-on-app-surface, #323130), bg: none, border: var(--kendo-color-border, #8a8886), hover-text: var(--kendo-color-on-app-surface, #323130), hover-bg: var(--kendo-color-base-hover, #f3f2f1), hover-border: var(--kendo-color-border-alt, #323130), focus-text: var(--kendo-color-on-app-surface, #323130), focus-bg: var(--kendo-color-app-surface, #ffffff), focus-border: var(--kendo-color-primary, #0078d4), hover-focus-tex: var(--kendo-color-on-app-surface, #323130), hover-focus-bg: var(--kendo-color-base-hover, #f3f2f1), hover-focus-border: var(--kendo-color-border, #8a8886), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-bg: none, disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent))))
Description Colors map of the input.
$kendo-input-prefix-bg	String	`if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 ))`	`var(--kendo-color-base-subtle, #edebe9)`
Description The background color of the Input prefix.
$kendo-input-suffix-bg	String	`if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 ))`	`var(--kendo-color-base-subtle, #edebe9)`
Description The background color of the Input suffix.
$kendo-input-separator-text	String	`k-get-theme-color-var( neutral-30 )`	`var(--kendo-neutral-30, inherit)`
Description The color of the Input separator.
$kendo-input-prefix-text	String	`k-get-theme-color-var( neutral-130 )`	`var(--kendo-neutral-130, inherit)`
Description The text color of the Input prefix.
$kendo-input-suffix-text	String	`k-get-theme-color-var( neutral-130 )`	`var(--kendo-neutral-130, inherit)`
Description The text color of the Input suffix.
$kendo-input-prefix-disabled-text	String	`k-get-theme-color-var( neutral-60 )`	`var(--kendo-neutral-60, inherit)`
Description The text color of the disabled Input prefix.
$kendo-input-suffix-disabled-text	String	`k-get-theme-color-var( neutral-60 )`	`var(--kendo-neutral-60, inherit)`
Description The text color of the disabled Input suffix.
$kendo-input-invalid-border	String	`var( --kendo-invalid-border, #{$kendo-invalid-border} )`	`var(--kendo-invalid-border, var(--kendo-color-error-emphasis, #a4262c))`
Description The border color of the invalid Input components.
$kendo-input-invalid-text	String	`var( --kendo-invalid-text, #{$kendo-invalid-text} )`	`var(--kendo-invalid-text, var(--kendo-color-error-on-surface, #a4262c))`
Description The text color of the invalid Input components.
$kendo-input-placeholder-text	String	`if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-subtle, #605e5c)`
Description The text color of the Input placeholder.
$kendo-input-placeholder-opacity	Number	`1`	`1`
Description The opacity of the Input placeholder.
$kendo-input-clear-value-text	String	`if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-subtle, #605e5c)`
Description The color of the Input clear value icon.
$kendo-input-clear-value-opacity	Number	`.6`	`0.6`
Description The opacity of the Input clear value icon.
$kendo-input-clear-value-hover-text	String	`inherit`	`inherit`
Description The color of the hovered Input clear value icon.
$kendo-input-clear-value-hover-opacity	Number	`1`	`1`
Description The opacity of the hovered Input clear value icon.

List

Name	Type	Default value	Computed value
$kendo-list-font-family	String	`var( --kendo-font-family, inherit)`	`var(--kendo-font-family, inherit)`
Description The font family of the List components.
$kendo-list-sm-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the List component.
$kendo-list-sm-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the List component.
$kendo-list-sm-header-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the List header.
$kendo-list-sm-header-padding-y	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the List header.
$kendo-list-header-border-width	Number	`0`	`0`
Description The border width of the List header.
$kendo-list-sm-header-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the List header.
$kendo-list-sm-header-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the List header.
$kendo-list-header-font-weight	String	`var( --kendo-font-weight-bold, normal )`	`var(--kendo-font-weight-bold, normal)`
Description The font weight of the List header.
$kendo-list-sm-item-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the List items.
$kendo-list-sm-item-padding-y	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the List items.
$kendo-list-sm-item-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the List items.
$kendo-list-sm-item-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the List items.
$kendo-list-item-group-label-sm-font-size	String	`var( --kendo-font-size-xs, inherit )`	`var(--kendo-font-size-xs, inherit)`
Description The font size of the List item group label.
$kendo-list-sm-group-item-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the List group items.
$kendo-list-sm-group-item-padding-y	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the List group items.
$kendo-list-item-group-label-sm-padding-x	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The horizontal padding of the List item group label.
$kendo-list-item-group-label-sm-padding-y	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical padding of the List item group label.
$kendo-list-group-item-border-width	List	`1px 0 0`	`1px 0 0`
Description The border width of the List group items.
$kendo-list-sm-group-item-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the List group items.
$kendo-list-sm-group-item-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the List group items.
$kendo-list-group-item-font-weight	String	`var( --kendo-font-weight-bold, normal )`	`var(--kendo-font-weight-bold, normal)`
Description The font weight of the List group item.
$kendo-list-item-icon-text	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The text color of the List item icon
$kendo-list-sizes	Map	( sm: ( font-size: $kendo-list-sm-font-size, line-height: $kendo-list-sm-line-height, header-padding-x: $kendo-list-sm-header-padding-x, header-padding-y: $kendo-list-sm-header-padding-y, header-font-size: $kendo-list-sm-header-font-size, header-line-height: $kendo-list-sm-header-line-height, item-padding-x: $kendo-list-sm-item-padding-x, item-padding-y: $kendo-list-sm-item-padding-y, item-font-size: $kendo-list-sm-item-font-size, item-line-height: $kendo-list-sm-item-line-height, item-group-label-padding-x: $kendo-list-item-group-label-sm-padding-x, item-group-label-padding-y: $kendo-list-item-group-label-sm-padding-y, item-group-label-font-size: $kendo-list-item-group-label-sm-font-size, group-item-padding-x: $kendo-list-sm-group-item-padding-x, group-item-padding-y: $kendo-list-sm-group-item-padding-y, group-item-font-size: $kendo-list-sm-group-item-font-size, group-item-line-height: $kendo-list-sm-group-item-line-height ), md: ( font-size: $kendo-list-md-font-size, line-height: $kendo-list-md-line-height, header-padding-x: $kendo-list-md-header-padding-x, header-padding-y: $kendo-list-md-header-padding-y, header-font-size: $kendo-list-md-header-font-size, header-line-height: $kendo-list-md-header-line-height, item-padding-x: $kendo-list-md-item-padding-x, item-padding-y: $kendo-list-md-item-padding-y, item-font-size: $kendo-list-md-item-font-size, item-line-height: $kendo-list-md-item-line-height, item-group-label-padding-x: $kendo-list-item-group-label-md-padding-x, item-group-label-padding-y: $kendo-list-item-group-label-md-padding-y, item-group-label-font-size: $kendo-list-item-group-label-md-font-size, group-item-padding-x: $kendo-list-md-group-item-padding-x, group-item-padding-y: $kendo-list-md-group-item-padding-y, group-item-font-size: $kendo-list-md-group-item-font-size, group-item-line-height: $kendo-list-md-group-item-line-height ), lg: ( font-size: $kendo-list-lg-font-size, line-height: $kendo-list-lg-line-height, header-padding-x: $kendo-list-lg-header-padding-x, header-padding-y: $kendo-list-lg-header-padding-y, header-font-size: $kendo-list-lg-header-font-size, header-line-height: $kendo-list-lg-header-line-height, item-padding-x: $kendo-list-lg-item-padding-x, item-padding-y: $kendo-list-lg-item-padding-y, item-font-size: $kendo-list-lg-item-font-size, item-line-height: $kendo-list-lg-item-line-height, item-group-label-padding-x: $kendo-list-item-group-label-lg-padding-x, item-group-label-padding-y: $kendo-list-item-group-label-lg-padding-y, item-group-label-font-size: $kendo-list-item-group-label-lg-font-size, group-item-padding-x: $kendo-list-lg-group-item-padding-x, group-item-padding-y: $kendo-list-lg-group-item-padding-y, group-item-font-size: $kendo-list-lg-group-item-font-size, group-item-line-height: $kendo-list-lg-group-item-line-height ) )	(sm: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-1\.5, 0.375rem), header-font-size: var(--kendo-font-size, inherit), header-line-height: var(--kendo-line-height, normal), item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-1\.5, 0.375rem), item-font-size: var(--kendo-font-size, inherit), item-line-height: var(--kendo-line-height, normal), item-group-label-padding-x: var(--kendo-spacing-0\.5, 0.125rem), item-group-label-padding-y: var(--kendo-spacing-0\.5, 0.125rem), item-group-label-font-size: var(--kendo-font-size-xs, inherit), group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-1\.5, 0.375rem), group-item-font-size: var(--kendo-font-size, inherit), group-item-line-height: var(--kendo-line-height, normal)), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-2, 0.5rem), header-font-size: var(--kendo-font-size, inherit), header-line-height: var(--kendo-line-height, normal), item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-2, 0.5rem), item-font-size: var(--kendo-font-size, inherit), item-line-height: var(--kendo-line-height, normal), item-group-label-padding-x: var(--kendo-spacing-1, 0.25rem), item-group-label-padding-y: var(--kendo-spacing-1, 0.25rem), item-group-label-font-size: var(--kendo-font-size-xs, inherit), group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-2, 0.5rem), group-item-font-size: var(--kendo-font-size, inherit), group-item-line-height: var(--kendo-line-height, normal)), lg: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-2\.5, 0.625rem), header-font-size: var(--kendo-font-size, inherit), header-line-height: var(--kendo-line-height, normal), item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-2\.5, 0.625rem), item-font-size: var(--kendo-font-size, inherit), item-line-height: var(--kendo-line-height, normal), item-group-label-padding-x: var(--kendo-spacing-1\.5, 0.375rem), item-group-label-padding-y: var(--kendo-spacing-1\.5, 0.375rem), item-group-label-font-size: var(--kendo-font-size-xs, inherit), group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-2\.5, 0.625rem), group-item-font-size: var(--kendo-font-size, inherit), group-item-line-height: var(--kendo-line-height, normal)))
Description The map with the sizes of the List.
$kendo-list-bg	String	`var( --kendo-component-bg, transparent )`	`var(--kendo-component-bg, transparent)`
Description The background color of the List component.
$kendo-list-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the List component.
$kendo-list-border	String	`var( --kendo-component-border, inherit )`	`var(--kendo-component-border, inherit)`
Description The border color of the List component.
$kendo-list-header-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the List header.
$kendo-list-header-text	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The text color of the List header.
$kendo-list-header-border	String	`inherit`	`inherit`
Description The border color of the List header.
$kendo-list-header-shadow	String	`$kendo-box-shadow-depth-3`	`var(--kendo-elevation-3, none)`
Description The box shadow of the List header.
$kendo-list-item-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the List items.
$kendo-list-item-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the List items.
$kendo-list-item-hover-bg	String	`if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))`	`var(--kendo-color-base-hover, #f3f2f1)`
Description The background color of the hovered List items.
$kendo-list-item-hover-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the hovered List items.
$kendo-list-item-focus-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the focused List items.
$kendo-list-item-focus-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the focused List items.
$kendo-list-item-focus-shadow	List	`inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))`	`inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c)`
Description The box shadow of the focused List items.
$kendo-list-item-selected-bg	String	`if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-40 ))`	`var(--kendo-color-base-active, #edebe9)`
Description The background color of the selected List items.
$kendo-list-item-selected-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the selected List items.
$kendo-list-item-selected-hover-bg	String	`if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-50 ))`	`var(--kendo-color-base-active, #edebe9)`
Description The background color of the selected hovered List items.
$kendo-list-item-selected-hover-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the selected hovered List items.
$kendo-list-item-disabled-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the disabled List items.
$kendo-list-item-disabled-text	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)`
Description The text color of the disabled List items.
$kendo-list-group-item-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the List group items.
$kendo-list-group-item-text	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The text color of the List group items.
$kendo-list-group-item-border	String	`inherit`	`inherit`
Description The border color of the List group items.
$kendo-list-group-item-shadow	String	`none`	`none`
Description The base shadow of the List group items.
$kendo-list-no-data-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the 'No Data' text.
$kendo-list-option-label-text	String	`$kendo-subtle-text`	`var(--kendo-color-subtle, #605e5c)`
Description The color of the 'Option Label' text.
$kendo-list-option-label-disabled-text	String	`$kendo-disabled-text`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)`
Description The color of the disabled 'Option Label' text.

Listbox

Name	Type	Default value	Computed value
$kendo-listbox-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing between the ListBox elements.
$kendo-listbox-button-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing between the ListBox buttons.
$kendo-listbox-width	Number	`10em`	`10em`
Description WThe width of the ListBox.
$kendo-listbox-height	Number	`200px`	`200px`
Description The height of the ListBox.
$kendo-listbox-border-width	Number	`1px`	`1px`
Description The width of the border around the ListBox.
$kendo-listbox-font-family	String	`var( --kendo-font-family, normal )`	`var(--kendo-font-family, normal)`
Description The font family of the ListBox.
$kendo-listbox-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the ListBox.
$kendo-listbox-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the ListBox.
$kendo-listbox-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the ListBox.
$kendo-listbox-bg	String	`var( --kendo-component-bg, transparent )`	`var(--kendo-component-bg, transparent)`
Description The background color of the ListBox.
$kendo-listbox-border	String	`var( --kendo-component-border, inherit )`	`var(--kendo-component-border, inherit)`
Description The border color of the ListBox.
$kendo-listbox-drop-hint-width	Number	`1px`	`1px`
Description The width of the ListBox drop hint.
$kendo-listbox-drop-hint-border-color	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the ListBox drop hint.

Listgroup

Name	Type	Default value	Computed value
$kendo-listgroup-border-width	Number	`1px`	`1px`
Description Border width of the listgroup.
$kendo-listgroup-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description Border radius of the listgroup.
$kendo-listgroup-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description Font size of the listgroup.
$kendo-listgroup-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description Line height of the listgroup.
$kendo-listgroup-bg	String	`var( --kendo-component-bg, transparent )`	`var(--kendo-component-bg, transparent)`
Description Background color of the listgroup component.
$kendo-listgroup-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description Text color of the listgroup component.
$kendo-listgroup-border	String	`var( --kendo-component-border, inherit )`	`var(--kendo-component-border, inherit)`
Description Border color of the listgroup component.
$kendo-listgroup-item-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Horizontal padding of the listgroup items.
$kendo-listgroup-item-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Vertical padding of the listgroup items.
$kendo-listgroup-item-border-width	Number	`1px`	`1px`
Description Border width of the listgroup item.

Listview

Name	Type	Default value	Computed value
$kendo-listview-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the ListView.
$kendo-listview-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the ListView.
$kendo-listview-border-width	Number	`1px`	`1px`
Description The width of the border around bordered ListView.
$kendo-listview-header-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the ListView header.
$kendo-listview-header-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the ListView header.
$kendo-listview-footer-padding-x	String	`$kendo-listview-header-padding-x`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the ListView footer.
$kendo-listview-footer-padding-y	String	`$kendo-listview-header-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the ListView footer.
$kendo-listview-item-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the ListView items.
$kendo-listview-item-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the ListView items.
$kendo-listview-font-family	String	`var( --kendo-font-family, initial )`	`var(--kendo-font-family, initial)`
Description The font family of the ListView.
$kendo-listview-font-size	String	`var( --kendo-font-size, initial )`	`var(--kendo-font-size, initial)`
Description The font size of the ListView.
$kendo-listview-line-height	String	`var( --kendo-line-height, initial )`	`var(--kendo-line-height, initial)`
Description The line height of the ListView.
$kendo-listview-grid-gap	String	`k-spacing(.0)`	`var(--kendo-spacing-0, 0px)`
Description The gap between items of ListView with grid layout.
$kendo-listview-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the ListView.
$kendo-listview-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the ListView.
$kendo-listview-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the ListView.
$kendo-listview-header-text	String	`initial`	`initial`
Description The text color of the ListView header.
$kendo-listview-header-bg	String	`initial`	`initial`
Description The background color of the ListView header.
$kendo-listview-header-border	String	`$kendo-listview-border`	`var(--kendo-component-border, initial)`
Description The border color of the ListView header.
$kendo-listview-footer-text	String	`initial`	`initial`
Description The text color of the ListView footer.
$kendo-listview-footer-bg	String	`initial`	`initial`
Description The background color of the ListView footer.
$kendo-listview-item-selected-text	String	`initial`	`initial`
Description The text color of the selected ListView items.
$kendo-listview-item-selected-bg	String	`if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-20 ))`	`var(--kendo-color-base-active, #edebe9)`
Description The background color of the selected ListView items.
$kendo-listview-item-focus-text	String	`initial`	`initial`
Description The text color of the focused ListView items.
$kendo-listview-item-focus-bg	String	`initial`	`initial`
Description The background color of the focused ListView items.
$kendo-listview-item-focus-shadow	String	`var( --kendo-list-item-focus-shadow, $kendo-list-item-focus-shadow )`	`var(--kendo-list-item-focus-shadow, inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c))`
Description The box shadow of the focused ListView items.

Loader

Name	Type	Default value	Computed value
$kendo-loader-segment-border-radius	Number	`50%`	`50%`
Description The border radius of the Loader segment.
$kendo-loader-sm-segment-size	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The size of the small Loader segment.
$kendo-loader-md-segment-size	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The size of the medium Loader segment.
$kendo-loader-lg-segment-size	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The size of the large Loader segment.
$kendo-loader-sm-padding-x	Calculation	`calc( #{$kendo-loader-sm-segment-size} / 2 )`	`calc(var(--kendo-spacing-1, 0.25rem) / 2)`
Description The horizontal padding of the small Loader.
$kendo-loader-md-padding-x	Calculation	`calc( #{$kendo-loader-md-segment-size} / 2 )`	`calc(var(--kendo-spacing-2, 0.5rem) / 2)`
Description The horizontal padding of the medium Loader.
$kendo-loader-lg-padding-x	Calculation	`calc( #{$kendo-loader-lg-segment-size} / 2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description The horizontal padding of the large Loader.
$kendo-loader-sm-padding-y	Calculation	`calc( #{$kendo-loader-sm-segment-size} / 2 )`	`calc(var(--kendo-spacing-1, 0.25rem) / 2)`
Description The vertical padding of the small Loader.
$kendo-loader-md-padding-y	Calculation	`calc( #{$kendo-loader-md-segment-size} / 2 )`	`calc(var(--kendo-spacing-2, 0.5rem) / 2)`
Description The vertical padding of the medium Loader.
$kendo-loader-lg-padding-y	Calculation	`calc( #{$kendo-loader-lg-segment-size} /2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description The vertical padding of the large Loader.
$kendo-loader-equilateral-height	Number	`.8660`	`0.866`
Description The equilateral height of the Loader.
$kendo-loader-sm-spinner-3-width	Calculation	`calc( #{$kendo-loader-sm-segment-size} * 4 )`	`calc(var(--kendo-spacing-1, 0.25rem) * 4)`
Description The width of the small spinner-3 Loader.
$kendo-loader-md-spinner-3-width	Calculation	`calc( #{$kendo-loader-md-segment-size} * 4 )`	`calc(var(--kendo-spacing-2, 0.5rem) * 4)`
Description The width of the medium spinner-3 Loader.
$kendo-loader-lg-spinner-3-width	Calculation	`calc( #{$kendo-loader-lg-segment-size} * 4 )`	`calc(var(--kendo-spacing-4, 1rem) * 4)`
Description The width of the large spinner-3 Loader.
$kendo-loader-sm-spinner-3-height	Calculation	`calc( #{$kendo-loader-sm-spinner-3-width} * #{$kendo-loader-equilateral-height} )`	`calc(calc(var(--kendo-spacing-1, 0.25rem) * 4) * 0.866)`
Description The height of the small spinner-3 Loader.
$kendo-loader-md-spinner-3-height	Calculation	`calc( #{$kendo-loader-md-spinner-3-width} * #{$kendo-loader-equilateral-height} )`	`calc(calc(var(--kendo-spacing-2, 0.5rem) * 4) * 0.866)`
Description The height of the medium spinner-3 Loader.
$kendo-loader-lg-spinner-3-height	Calculation	`calc( #{$kendo-loader-lg-spinner-3-width} * #{$kendo-loader-equilateral-height} )`	`calc(calc(var(--kendo-spacing-4, 1rem) * 4) * 0.866)`
Description The height of the large spinner-3 Loader.
$kendo-loader-sm-spinner-4-width	Calculation	`calc( #{$kendo-loader-sm-segment-size} * 4 )`	`calc(var(--kendo-spacing-1, 0.25rem) * 4)`
Description The width of the small spinner-4 Loader.
$kendo-loader-md-spinner-4-width	Calculation	`calc( #{$kendo-loader-md-segment-size} * 4 )`	`calc(var(--kendo-spacing-2, 0.5rem) * 4)`
Description The width of the medium spinner-4 Loader.
$kendo-loader-lg-spinner-4-width	Calculation	`calc( #{$kendo-loader-lg-segment-size} * 4 )`	`calc(var(--kendo-spacing-4, 1rem) * 4)`
Description The width of the large spinner-4 Loader.
$kendo-loader-sm-spinner-4-height	Calculation	`$kendo-loader-sm-spinner-4-width`	`calc(var(--kendo-spacing-1, 0.25rem) * 4)`
Description The height of the small spinner-4 Loader.
$kendo-loader-md-spinner-4-height	Calculation	`$kendo-loader-md-spinner-4-width`	`calc(var(--kendo-spacing-2, 0.5rem) * 4)`
Description The height of the medium spinner-4 Loader.
$kendo-loader-lg-spinner-4-height	Calculation	`$kendo-loader-lg-spinner-4-width`	`calc(var(--kendo-spacing-4, 1rem) * 4)`
Description The height of the large spinner-4 Loader.
$kendo-loader-container-panel-border-width	Number	`1px`	`1px`
Description The border width of the container panel.
$kendo-loader-container-panel-border-style	String	`solid`	`solid`
Description The border style of the container panel.
$kendo-loader-container-panel-border-color	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the container panel.
$kendo-loader-container-panel-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the container panel.
$kendo-loader-container-panel-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the container panel.
$kendo-loader-sm-container-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the small Loader container.
$kendo-loader-md-container-padding-x	String	`k-spacing(5)`	`var(--kendo-spacing-5, 1.25rem)`
Description The horizontal padding of the medium Loader container.
$kendo-loader-lg-container-padding-x	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The horizontal padding of the large Loader container.
$kendo-loader-sm-container-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the small Loader container.
$kendo-loader-md-container-padding-y	String	`k-spacing(5)`	`var(--kendo-spacing-5, 1.25rem)`
Description The vertical padding of the medium Loader container.
$kendo-loader-lg-container-padding-y	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The vertical padding of the large Loader container.
$kendo-loader-sm-container-gap	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The gap of the small Loader container.
$kendo-loader-md-container-gap	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The gap of the medium Loader container.
$kendo-loader-lg-container-gap	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The gap of the large Loader container.
$kendo-loader-sm-container-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the small Loader container.
$kendo-loader-md-container-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the medium Loader container.
$kendo-loader-lg-container-font-size	String	`var( --kendo-font-size-lg, inherit )`	`var(--kendo-font-size-lg, inherit)`
Description The font size of the large Loader container.
$kendo-loader-brand-colors	Map	`( primary: primary, secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, error: error, success: success, warning: warning, info: info )`	`(primary: primary, secondary: secondary, tertiary: tertiary, error: error, success: success, warning: warning, info: info)`
Description The theme variations for the Loader.
$kendo-loader-theme-colors	Map	`()`	(primary: (bg: var(--kendo-color-primary, #0078d4), text: null, border: null), secondary: (bg: var(--kendo-color-secondary, #979593), text: null, border: null), tertiary: (bg: var(--kendo-color-tertiary, #2b88d8), text: null, border: null), error: (bg: var(--kendo-color-error, #c2666b), text: null, border: null), success: (bg: var(--kendo-color-success, #55a554), text: null, border: null), warning: (bg: var(--kendo-color-warning, #ffc80a), text: null, border: null), info: (bg: var(--kendo-color-info, #0a7eff), text: null, border: null), dark: (bg: var(--kendo-color-dark, #323130), text: null, border: null), light: (bg: var(--kendo-color-light, #d2d0ce), text: null, border: null))
Description The theme colors map for the Loader variations.

Map

Name	Type	Default value	Computed value
$kendo-map-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description Font size of the map.
$kendo-map-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description Line height of the map.
$kendo-map-font-family	String	`var( --kendo-font-family, normal )`	`var(--kendo-font-family, normal)`
Description Font family of the map.
$kendo-map-bg	String	`var( --kendo-component-bg, transparent )`	`var(--kendo-component-bg, transparent)`
Description Background color of the map.
$kendo-map-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description Text color of the map.
$kendo-map-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))`	`var(--kendo-color-border, #8a8886)`
Description Border color of the map.
$kendo-map-border-width	Number	`0px`	`0px`
Description Border width of the map.
$kendo-map-height	Number	`600px`	`600px`
Description Height of the map.
$kendo-map-navigator-margin-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description Map navigator horizontal margin.
$kendo-map-navigator-margin-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description Map navigator vertical margin.
$kendo-map-navigator-padding	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description Map navigator padding.
$kendo-map-navigator-width	Calculation	`calc( var( --kendo-icon-size) * 3 + calc( #{$kendo-map-navigator-padding} * 2) )`	`calc(var(--kendo-icon-size) * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)`
Description Map navigator width.
$kendo-map-navigator-height	Calculation	`$kendo-map-navigator-width`	`calc(var(--kendo-icon-size) * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)`
Description Map navigator height.
$kendo-map-navigator-border-width	Number	`1px`	`1px`
Description Map navigator border width.
$kendo-map-navigator-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description Map navigator background color.
$kendo-map-navigator-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description Map navigator text color.
$kendo-map-navigator-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))`	`var(--kendo-color-border, #8a8886)`
Description Map navigator border color.
$kendo-map-zoom-control-margin	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description Map zoom control margin.
$kendo-map-zoom-control-button-padding-x	String	`$kendo-button-md-padding-y`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description Map zoom control horizontal padding.
$kendo-map-zoom-control-button-padding-y	String	`$kendo-map-zoom-control-button-padding-x`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description Map zoom control vertical padding.
$kendo-map-attribution-padding-x	String	`$kendo-padding-sm-x`	`var(--kendo-spacing-1, 0.25rem)`
Description Map attribution horizontal padding.
$kendo-map-attribution-padding-y	String	`$kendo-padding-sm-y`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description Map attribution vertical padding.
$kendo-map-attribution-font-size	Calculation	`calc( #{$kendo-map-font-size} * .75 )`	`calc(var(--kendo-font-size, inherit) * 0.75)`
Description Map attribution font size.
$kendo-map-attribution-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description Map attribution background color.
$kendo-map-marker-fill	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description Map marker fill color.

Mediaplayer

Name	Type	Default value	Computed value
$kendo-media-player-border-width	Number	`1px`	`1px`
Description Border width of the mediaplayer.
$kendo-media-player-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description Font family of the mediaplayer.
$kendo-media-player-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description Font size of the mediaplayer.
$kendo-media-player-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description Line height of the mediaplayer.
$kendo-media-player-bg	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description Background color of the mediaplayer.
$kendo-media-player-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description Text color of the mediaplayer.
$kendo-media-player-border	String	`var( --kendo-component-border, inherit )`	`var(--kendo-component-border, inherit)`
Description Border color of the mediaplayer.
$kendo-media-player-overlay-bg	String	`if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-base-emphasis, #605e5c)`
Description Mediaplayer overlay background color.
$kendo-media-player-quality-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))`	`var(--kendo-color-border, #8a8886)`
Description Mediaplayer quality button border color.
$kendo-media-player-title-font-size	String	`var( --kendo-font-size-xl, inherit )`	`var(--kendo-font-size-xl, inherit)`
Description Media player title font size.
$kendo-media-player-titlebar-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Mediaplayer titlebar horizontal padding.
$kendo-media-player-titlebar-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Mediaplayer titlebar vertical padding.
$kendo-media-player-titlebar-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 40%, transparent), rgba( $kendo-color-black, .4 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 40%, transparent)`
Description Mediaplayer titlebar background color.
$kendo-media-player-titlebar-text	String	`$kendo-media-player-bg`	`var(--kendo-component-bg, inherit)`
Description Mediaplayer titlebar text color.

Name	Type	Default value	Computed value
$kendo-menu-border-width	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description Width of the menu border.
$kendo-menu-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`

$kendo-menu-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`

$kendo-menu-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description Line heights used along with $kendo-font-size.
$kendo-menu-item-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Padding of menu root items.
$kendo-menu-item-spacing	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description Spacing between menu root items.
$kendo-menu-item-icon-spacing	String	`var( --kendo-icon-spacing, .5rem )`	`var(--kendo-icon-spacing, 0.5rem)`
Description Spacing between menu root items text and icons.
$kendo-menu-separator-margin	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description Spacing between menu separator and items.
$kendo-menu-separator-width	Number	`1px`	`1px`
Description Separator width
$kendo-menu-item-focus-outline-offset	Calculation	`calc( #{k-spacing(0.5)} * -1 )`	`calc(var(--kendo-spacing-0\.5, 0.125rem) * -1)`
Description The base outline of focused menu item.
$kendo-menu-text	String	`var( --kendo-body-text, inherit )`	`var(--kendo-body-text, inherit)`
Description The text color of the menu.
$kendo-menu-bg	Color	`transparent`	`transparent`
Description The background color of the menu.
$kendo-menu-border	String	`initial`	`initial`
Description The border color of the menu.
$kendo-menu-shadow	String	`none`	`none`
Description The shadow of the menu.
$kendo-menu-item-text	String	`$kendo-menu-text`	`var(--kendo-body-text, inherit)`
Description The text color of menu items.
$kendo-menu-item-bg	Color	`transparent`	`transparent`
Description The background color of menu items.
$kendo-menu-item-hover-text	String	`var( --kendo-hover-text, inherit )`	`var(--kendo-hover-text, inherit)`
Description The text color of hover menu items.
$kendo-menu-item-hover-bg	String	`var( --kendo-hover-bg, initial )`	`var(--kendo-hover-bg, initial)`
Description The background color of hover menu items.
$kendo-menu-item-focus-text	String	`$kendo-menu-item-text`	`var(--kendo-body-text, inherit)`
Description The text color of focused menu items.
$kendo-menu-item-focus-bg	Color	`$kendo-menu-item-bg`	`transparent`
Description The background color of focused menu items.
$kendo-menu-item-focus-outline	String	`var( --kendo-focus-outline, none )`	`var(--kendo-focus-outline, none)`
Description The outline of focused menu items.
$kendo-menu-item-expanded-text	String	`$kendo-menu-item-hover-text`	`var(--kendo-hover-text, inherit)`
Description The text color of expanded menu items.
$kendo-menu-item-expanded-bg	String	`var( --kendo-selected-bg, initial )`	`var(--kendo-selected-bg, initial)`
Description The background color of expanded menu items.
$kendo-menu-item-disabled-text	String	`var( --kendo-disabled-text, initial )`	`var(--kendo-disabled-text, initial)`
Description The text color of disabled menu items.
$kendo-menu-item-disabled-bg	Color	`$kendo-menu-item-bg`	`transparent`
Description The background color of disabled menu items.
$kendo-menu-popup-padding-x	String	`$kendo-popup-padding-x`	`var(--kendo-spacing-0, 0px)`
Description Horizontal padding of the menu popup.
$kendo-menu-popup-padding-y	String	`$kendo-popup-padding-y`	`var(--kendo-spacing-0, 0px)`
Description Vertical padding of the menu popup.
$kendo-menu-popup-border-width	Number	`$kendo-popup-border-width`	`0`
Description Width of the border around the menu popup.
$kendo-menu-popup-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description Font sizes of the menu popup.
$kendo-menu-popup-line-height	String	`var( --kendo-line-height, 30px )`	`var(--kendo-line-height, 30px)`
Description Line heights used along with $kendo-font-size.
$kendo-menu-popup-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background of the menu popup.
$kendo-menu-popup-border	String	`initial`	`initial`
Description The border color of the menu popup.
$kendo-menu-popup-shadow	String	`var( --kendo-box-shadow-depth-6, none )`	`var(--kendo-box-shadow-depth-6, none)`
Description The shadow of the menu popup.
$kendo-menu-popup-item-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Horizontal padding of the menu item in popup.
$kendo-menu-popup-sm-item-padding-y	String	`$kendo-list-sm-item-padding-y`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description Vertical padding of the menu item in popup.
$kendo-menu-popup-sm-item-padding-end	Calculation	`calc( calc( #{$kendo-menu-popup-sm-item-padding-x} * 2 ) + var( --kendo-icon-size, 1rem ) )`	`calc(var(--kendo-spacing-2, 0.5rem) * 2 + var(--kendo-icon-size, 1rem))`
Description The end padding of the menu item in popup.
$kendo-menu-popup-sm-item-icon-margin-start	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The start margin of the menu item expand icon.
$kendo-menu-popup-sm-item-icon-margin-end	Calculation	`calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-sm-item-padding-x}) )`	`calc(-1 * (var(--kendo-icon-size, 1rem) + var(--kendo-spacing-2, 0.5rem)))`
Description The end margin of the menu item expand icon.
$kendo-menu-popup-focus-outline-offset	Calculation	`$kendo-menu-item-focus-outline-offset`	`calc(var(--kendo-spacing-0\.5, 0.125rem) * -1)`
Description The base shadow of focused menu item in popup.
$kendo-menu-popup-item-spacing	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The spacing between the menu items in popup.
$kendo-menu-sizes	Map	( sm: ( group-font-size: $kendo-menu-popup-sm-font-size, group-line-height: $kendo-menu-popup-sm-line-height, link-padding-x: $kendo-menu-popup-sm-item-padding-x, link-padding-y: $kendo-menu-popup-sm-item-padding-y, link-padding-inline-end: $kendo-menu-popup-sm-item-padding-end, arrow-margin-inline-start: $kendo-menu-popup-sm-item-icon-margin-start, arrow-margin-inline-end: $kendo-menu-popup-sm-item-icon-margin-end, ), md: ( group-font-size: $kendo-menu-popup-md-font-size, group-line-height: $kendo-menu-popup-md-line-height, link-padding-x: $kendo-menu-popup-md-item-padding-x, link-padding-y: $kendo-menu-popup-md-item-padding-y, link-padding-inline-end: $kendo-menu-popup-md-item-padding-end, arrow-margin-inline-start: $kendo-menu-popup-item-icon-md-margin-start, arrow-margin-inline-end: $kendo-menu-popup-item-icon-md-margin-end, ), lg: ( group-font-size: $kendo-menu-popup-lg-font-size, group-line-height: $kendo-menu-popup-lg-line-height, link-padding-x: $kendo-menu-popup-lg-item-padding-x, link-padding-y: $kendo-menu-popup-lg-item-padding-y, link-padding-inline-end: $kendo-menu-popup-lg-item-padding-end, arrow-margin-inline-start: $kendo-menu-popup-lg-item-icon-margin-start, arrow-margin-inline-end: $kendo-menu-popup-lg-item-icon-margin-end ) )	(sm: (group-font-size: var(--kendo-font-size, inherit), group-line-height: var(--kendo-line-height, 30px), link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-1\.5, 0.375rem), link-padding-inline-end: calc(var(--kendo-spacing-2, 0.5rem) * 2 + var(--kendo-icon-size, 1rem)), arrow-margin-inline-start: var(--kendo-spacing-0, 0px), arrow-margin-inline-end: calc(-1 * (var(--kendo-icon-size, 1rem) + var(--kendo-spacing-2, 0.5rem)))), md: (group-font-size: var(--kendo-font-size, inherit), group-line-height: var(--kendo-line-height, 30px), link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-2, 0.5rem), link-padding-inline-end: calc(var(--kendo-spacing-2, 0.5rem) * 2 + var(--kendo-icon-size, 1rem)), arrow-margin-inline-start: var(--kendo-spacing-0, 0px), arrow-margin-inline-end: calc(-1 * (var(--kendo-icon-size, 1rem) + var(--kendo-spacing-2, 0.5rem)))), lg: (group-font-size: var(--kendo-font-size-lg, inherit), group-line-height: var(--kendo-line-height, 30px), link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-2\.5, 0.625rem), link-padding-inline-end: calc(var(--kendo-spacing-2, 0.5rem) * 2 + var(--kendo-icon-size, 1rem)), arrow-margin-inline-start: var(--kendo-spacing-0, 0px), arrow-margin-inline-end: calc(-1 * (var(--kendo-icon-size, 1rem) + var(--kendo-spacing-2, 0.5rem)))))
Description Sizes map for the menu.
$kendo-menu-popup-item-text	String	`$kendo-list-item-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the menu item in popup.
$kendo-menu-popup-item-bg	String	`$kendo-list-item-bg`	`var(--kendo-color-app-surface, #ffffff)`
Description The background of the menu item in popup.
$kendo-menu-popup-item-hover-text	String	`$kendo-list-item-hover-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of hovered menu item in popup.
$kendo-menu-popup-item-hover-bg	String	`$kendo-list-item-hover-bg`	`var(--kendo-color-base-hover, #f3f2f1)`
Description The background of hovered menu item in popup.
$kendo-menu-popup-item-focus-text	String	`$kendo-menu-item-text`	`var(--kendo-body-text, inherit)`
Description The text color of focused menu items.
$kendo-menu-popup-item-focus-bg	Color	`$kendo-menu-item-bg`	`transparent`
Description The background color of focused menu items.
$kendo-menu-popup-item-focus-outline	String	`if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))`	`var(--kendo-color-base-emphasis, #605e5c)`
Description The outline of focused menu items.
$kendo-menu-popup-item-expanded-text	String	`$kendo-list-item-selected-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of expanded menu item in popup.
$kendo-menu-popup-item-expanded-bg	String	`$kendo-list-item-selected-bg`	`var(--kendo-color-base-active, #edebe9)`
Description The background of expanded menu item in popup.
$kendo-menu-popup-item-disabled-text	String	`$kendo-list-item-disabled-text`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)`
Description The text color of disabled menu item in popup.
$kendo-menu-popup-item-disabled-bg	String	`$kendo-list-item-disabled-bg`	`var(--kendo-color-app-surface, #ffffff)`
Description The background of disabled menu item in popup.
$kendo-menu-scroll-button-bg	String	`var( --kendo-component-bg, $kendo-component-bg )`	`var(--kendo-component-bg, var(--kendo-color-surface-alt, #ffffff))`
Description The background color of scroll menu buttons.
$kendo-menu-scroll-button-border	String	`var( --kendo-component-border, $kendo-component-border )`	`var(--kendo-component-border, color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent))`
Description The border color of scroll menu buttons.
$kendo-menu-scroll-button-hover-bg	Null	`null`	`null`
Description The background color of hover scroll menu buttons.
$kendo-menu-scroll-button-hover-border	Null	`null`	`null`
Description The border color of scroll hover menu buttons.
$kendo-menu-icon-color	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The color of menu items icon.

Messagebox

Name	Type	Default value	Computed value
$kendo-message-box-margin	List	`0 0 k-spacing(3) 0`	`0 0 var(--kendo-spacing-3, 0.75rem) 0`
Description Margin around the message box.
$kendo-message-box-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description Horizontal padding of the message box.
$kendo-message-box-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Vertical padding of the message box.
$kendo-message-box-border-width	Number	`0`	`0`
Description Border width of the message box.
$kendo-message-box-border-style	String	`solid`	`solid`
Description Border style of the message box.
$kendo-message-box-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description Font family of the message box.
$kendo-message-box-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description Font size of the message box.
$kendo-message-box-line-height	String	`var( --kendo-line-height-sm, normal )`	`var(--kendo-line-height-sm, normal)`
Description Line height of the message box.
$kendo-message-box-link-font-style	String	`normal`	`normal`
Description Font style of the message box links.
$kendo-message-box-link-decoration	String	`underline`	`underline`
Description Text decoration of the message box links.
$kendo-message-box-link-text	String	`var( --kendo-link-text, initial )`	`var(--kendo-link-text, initial)`
Description Text color of the message box links.
$kendo-message-box-link-hover-text	String	`var( --kendo-link-hover-text, initial )`	`var(--kendo-link-hover-text, initial)`
Description Hover text color of the message box links.

Notification

Name	Type	Default value	Computed value
$kendo-notification-group-gap	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The row-gap between the elements in the Notification group.
$kendo-notification-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the Notification.
$kendo-notification-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Notification.
$kendo-notification-border-width	Number	`1px`	`1px`

$kendo-notification-border-radius	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The border radius of the Notification.
$kendo-notification-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Notification.
$kendo-notification-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the Notification.
$kendo-notification-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Notification.
$kendo-notification-bg	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description The background color of the Notification.
$kendo-notification-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the Notification.
$kendo-notification-border	String	`var( --kendo-component-border, inherit )`	`var(--kendo-component-border, inherit)`
Description The border color of the Notification.
$kendo-notification-box-shadow	String	`none`	`none`
Description The box shadow of the Notification.
$kendo-notification-icon-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal spacing of the Notification icon.
$kendo-notification-close-icon-spacing	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal spacing of the Notification close icon.
$kendo-notification-icon-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The color of the Notification icon.
$kendo-notification-brand-colors	Map	`( primary: primary, error: error, warning: warning, success: success, info: info, secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, )`	`(primary: primary, error: error, warning: warning, success: success, info: info, secondary: secondary, tertiary: tertiary)`
Description The theme variations for the Notification.
$kendo-notification-theme-colors	Map	`()`	(primary: (bg: var(--kendo-color-primary-subtle, #deecf9), text: var(--kendo-color-primary-on-subtle, #001c30), border: var(--kendo-color-primary-subtle, #deecf9)), error: (bg: var(--kendo-color-error-subtle, #fde7e9), text: var(--kendo-color-error-on-subtle, #420f12), border: var(--kendo-color-error-subtle, #fde7e9)), warning: (bg: var(--kendo-color-warning-subtle, #fff4ce), text: var(--kendo-color-warning-on-subtle, #323130), border: var(--kendo-color-warning-subtle, #fff4ce)), success: (bg: var(--kendo-color-success-subtle, #dff6dd), text: var(--kendo-color-success-on-subtle, #063206), border: var(--kendo-color-success-subtle, #dff6dd)), info: (bg: var(--kendo-color-info-subtle, #cee5ff), text: var(--kendo-color-info-on-subtle, #032040), border: var(--kendo-color-info-subtle, #cee5ff)), secondary: (bg: var(--kendo-color-secondary-subtle, #faf9f8), text: var(--kendo-color-secondary-on-subtle, #323130), border: var(--kendo-color-secondary-subtle, #faf9f8)), tertiary: (bg: var(--kendo-color-tertiary-subtle, #deecf9), text: var(--kendo-color-tertiary-on-subtle, #174974), border: var(--kendo-color-tertiary-subtle, #deecf9)), dark: (bg: var(--kendo-color-dark, #323130), text: var(--kendo-color-on-dark, #ffffff), border: var(--kendo-color-dark, #323130)), light: (bg: var(--kendo-color-light, #d2d0ce), text: var(--kendo-color-on-light, #323130), border: var(--kendo-color-light, #d2d0ce)))
Description The theme colors map for the Notification variations.

Orgchart

Name	Type	Default value	Computed value
$kendo-orgchart-spacer	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The spacing index of the OrgChart.
$kendo-orgchart-padding-y	String	`$kendo-orgchart-spacer`	`var(--kendo-spacing-6, 1.5rem)`
Description The vertical padding of the OrgChart.
$kendo-orgchart-padding-x	String	`$kendo-orgchart-padding-y`	`var(--kendo-spacing-6, 1.5rem)`
Description The horizontal padding of the OrgChart.
$kendo-orgchart-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the OrgChart.
$kendo-orgchart-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the OrgChart.
$kendo-orgchart-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the OrgChart.
$kendo-orgchart-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the OrgChart.
$kendo-orgchart-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the OrgChart.
$kendo-orgchart-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the OrgChart.
$kendo-orgchart-node-spacing	String	`$kendo-orgchart-spacer`	`var(--kendo-spacing-6, 1.5rem)`
Description The spacing of the OrgChart node.
$kendo-orgchart-group-spacing	String	`$kendo-orgchart-spacer`	`var(--kendo-spacing-6, 1.5rem)`
Description The spacing of the OrgChart group.
$kendo-orgchart-node-container-spacing	String	`$kendo-orgchart-spacer`	`var(--kendo-spacing-6, 1.5rem)`
Description The spacing of the OrgChart node container.
$kendo-orgchart-node-group-padding-y	String	`$kendo-orgchart-spacer`	`var(--kendo-spacing-6, 1.5rem)`
Description The vertical padding of the OrgChart node group.
$kendo-orgchart-node-group-padding-x	String	`$kendo-orgchart-node-group-padding-y`	`var(--kendo-spacing-6, 1.5rem)`
Description The horizontal padding of the OrgChart node group.
$kendo-orgchart-node-group-border-width	Number	`1px`	`1px`
Description The border width of the OrgChart node group.
$kendo-orgchart-node-group-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the OrgChart node group.
$kendo-orgchart-node-group-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the OrgChart node group.
$kendo-orgchart-node-group-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the OrgChart node group.
$kendo-orgchart-node-group-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))`	`color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)`
Description The border color of the OrgChart node group.
$kendo-orgchart-node-group-focus-border	String	`$kendo-card-focus-border`	`var(--kendo-component-border, initial)`
Description The border color of the focused OrgChart node group.
$kendo-orgchart-node-group-focus-shadow	String	`$kendo-card-focus-shadow`	`var(--kendo-box-shadow-depth-3, none)`
Description The shadow of the focused OrgChart node group.
$kendo-orgchart-node-group-title-margin-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical margin of the OrgChart node group title.
$kendo-orgchart-node-group-title-font-size	String	`var( --kendo-font-size-xl, inherit )`	`var(--kendo-font-size-xl, inherit)`
Description The font size of the OrgChart node group title.
$kendo-orgchart-node-group-title-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the OrgChart node group title.
$kendo-orgchart-node-group-subtitle-margin-y	Calculation	`calc( $kendo-orgchart-spacer - k-spacing(1) )`	`calc(var(--kendo-spacing-6, 1.5rem) - var(--kendo-spacing-1, 0.25rem))`
Description The vertical margin of the OrgChart node group subtitle.
$kendo-orgchart-node-group-subtitle-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the OrgChart node group subtitle.
$kendo-orgchart-node-group-subtitle-text	String	`var( --kendo-subtle-text, inherit )`	`var(--kendo-subtle-text, inherit)`
Description The line height of the OrgChart node group subtitle.
$kendo-orgchart-card-width	Number	`300px`	`300px`
Description The width of the OrgChart Card.
$kendo-orgchart-card-border-width	Number	`$kendo-card-border-width`	`0px`
Description The border width of the OrgChart Card.
$kendo-orgchart-card-shadow	String	`$kendo-card-shadow`	`var(--kendo-box-shadow-depth-1, none)`
Description The shadow of the OrgChart Card.
$kendo-orgchart-card-focus-shadow	String	`$kendo-card-focus-shadow`	`var(--kendo-box-shadow-depth-3, none)`
Description The shadow of the focused OrgChart Card.
$kendo-orgchart-card-title-margin-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical margin of the OrgChart Card title.
$kendo-orgchart-card-title-font-size	String	`$kendo-card-title-font-size`	`var(--kendo-font-size-lg, inherit)`
Description The font size of the OrgChart Card title.
$kendo-orgchart-card-title-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the OrgChart Card title.
$kendo-orgchart-card-subtitle-margin-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical margin of the OrgChart Card subtitle.
$kendo-orgchart-card-subtitle-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the OrgChart Card subtitle.
$kendo-orgchart-card-subtitle-line-height	String	`var( --kendo-line-height, inherit )`	`var(--kendo-line-height, inherit)`
Description The line height of the OrgChart Card subtitle.
$kendo-orgchart-card-body-padding-y	Calculation	`calc( #{$kendo-orgchart-spacer} - k-spacing(2) )`	`calc(var(--kendo-spacing-6, 1.5rem) - var(--kendo-spacing-2, 0.5rem))`
Description The vertical padding of the OrgChart Card body.
$kendo-orgchart-card-body-padding-x	Calculation	`$kendo-orgchart-card-body-padding-y`	`calc(var(--kendo-spacing-6, 1.5rem) - var(--kendo-spacing-2, 0.5rem))`
Description The horizontal padding of the OrgChart Card body.
$kendo-orgchart-card-body-border-width	List	`2px 0 0`	`2px 0 0`
Description The top border width of the OrgChart Card body.
$kendo-orgchart-card-body-border-color	Color	`transparent`	`transparent`
Description The border color of the OrgChart Card body.
$kendo-orgchart-card-body-vbox-margin-x	Calculation	`calc( #{$kendo-orgchart-spacer} - k-spacing(2) )`	`calc(var(--kendo-spacing-6, 1.5rem) - var(--kendo-spacing-2, 0.5rem))`
Description The horizontal margin of the OrgChart Card body title wrap.
$kendo-orgchart-card-body-vbox-min-height	Number	`$kendo-card-avatar-size`	`3rem`
Description The min height of the OrgChart Card body title wrap.
$kendo-orgchart-line-size	Number	`1px`	`1px`
Description The size of the OrgChart connecting line.
$kendo-orgchart-line-text	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))`	`color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)`
Description The fill color of the OrgChart connecting line.
$kendo-orgchart-line-v-height	Number	`25px`	`25px`
Description The height of the OrgChart connecting line.

Overlay

Name	Type	Default value	Computed value
$kendo-overlay-opacity	Number	`.4`	`0.4`
Description Opacity of the overlay.
$kendo-overlay-dark	Color	`$kendo-color-black`	`#000000`
Description Background color of the dark overlay.
$kendo-overlay-light	Color	`$kendo-color-white`	`#ffffff`
Description Background color of the light overlay.

Name	Type	Default value	Computed value
$kendo-pager-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Pager.
$kendo-pager-sm-padding-x	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The horizontal padding of the small Pager.
$kendo-pager-md-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the medium Pager.
$kendo-pager-lg-padding-x	String	`k-spacing(2.5)`	`var(--kendo-spacing-2\.5, 0.625rem)`
Description The horizontal padding of the large Pager.
$kendo-pager-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Pager.
$kendo-pager-sm-padding-y	String	`$kendo-pager-sm-padding-x`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the small Pager.
$kendo-pager-md-padding-y	String	`$kendo-pager-md-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the medium Pager.
$kendo-pager-lg-padding-y	String	`$kendo-pager-lg-padding-x`	`var(--kendo-spacing-2\.5, 0.625rem)`
Description The vertical padding of the large Pager.
$kendo-pager-border-width	Number	`1px`	`1px`
Description The border width of the Pager.
$kendo-pager-font-family	String	`var( --kendo-font-family, normal )`	`var(--kendo-font-family, normal)`
Description The font family of the Pager.
$kendo-pager-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Pager.
$kendo-pager-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Pager.
$kendo-pager-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the Pager.
$kendo-pager-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the Pager.
$kendo-pager-border	String	`var( --kendo-component-border, inherit )`	`var(--kendo-component-border, inherit)`
Description The border color of the Pager.
$kendo-pager-focus-bg	String	`var( --kendo-pager-bg, #{$kendo-pager-bg})`	`var(--kendo-pager-bg, var(--kendo-color-surface, #faf9f8))`
Description The background color of the focused Pager.
$kendo-pager-focus-text	String	`var( --kendo-pager-text, #{$kendo-pager-text})`	`var(--kendo-pager-text, var(--kendo-component-text, inherit))`
Description The text color of the focused Pager.
$kendo-pager-focus-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-border, #8a8886)`
Description The border color of the focused Pager.
$kendo-pager-item-border-radius	Number	`0`	`0`
Description The border radius of the Pager items.
$kendo-pager-item-spacing	Null	`null`	`null`
Description The spacing around the Pager items.
$kendo-pager-sm-item-group-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing between the item groups of the small Pager.
$kendo-pager-md-item-group-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing between the item groups of the medium Pager.
$kendo-pager-lg-item-group-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing between the item groups of the large Pager.
$kendo-pager-sizes-label-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the Pagers' sizes label.
$kendo-pager-info-label-text	String	`if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-subtle, #605e5c)`
Description The text color of the Pagers' info label.
$kendo-pager-input-width	Number	`5em`	`5em`
Description The width of the Inputs in the Pager.
$kendo-pager-dropdown-width	Number	`5em`	`5em`
Description The width of the DropDowns in the Pager.
$kendo-pager-sizes	Map	`( sm: ( padding-x: $kendo-pager-sm-padding-x, padding-y: $kendo-pager-sm-padding-y, item-group-spacing: $kendo-pager-sm-item-group-spacing ), md: ( padding-x: $kendo-pager-md-padding-x, padding-y: $kendo-pager-md-padding-y, item-group-spacing: $kendo-pager-md-item-group-spacing ), lg: ( padding-x: $kendo-pager-lg-padding-x, padding-y: $kendo-pager-lg-padding-y, item-group-spacing: $kendo-pager-lg-item-group-spacing ) )`	`(sm: (padding-x: var(--kendo-spacing-1\.5, 0.375rem), padding-y: var(--kendo-spacing-1\.5, 0.375rem), item-group-spacing: var(--kendo-spacing-2, 0.5rem)), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-2, 0.5rem), item-group-spacing: var(--kendo-spacing-2, 0.5rem)), lg: (padding-x: var(--kendo-spacing-2\.5, 0.625rem), padding-y: var(--kendo-spacing-2\.5, 0.625rem), item-group-spacing: var(--kendo-spacing-2, 0.5rem)))`
Description The sizes map of the Pager.

Panelbar

Name	Type	Default value	Computed value
$kendo-panelbar-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal padding of the PanelBar.
$kendo-panelbar-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical padding of the PanelBar.
$kendo-panelbar-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the PanelBar.
$kendo-panelbar-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the PanelBar.
$kendo-panelbar-line-height	String	`var( --kendo-line-height, inherit )`	`var(--kendo-line-height, inherit)`
Description The line height of the PanelBar.
$kendo-panelbar-border-width	Number	`1px`	`1px`
Description The width of the border around the PanelBar.
$kendo-panelbar-border-style	String	`solid`	`solid`
Description The border style around the the PanelBar.
$kendo-panelbar-item-border-width	Number	`0`	`0`
Description The width of the border around the PanelBar items.
$kendo-panelbar-item-border-style	String	`solid`	`solid`
Description The style of the border around the PanelBar items.
$kendo-panelbar-icon-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing around the PanelBar items icon.
$kendo-panelbar-header-padding-x-start	Calculation	`calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) )`	`calc(var(--kendo-panelbar-icon-spacing, var(--kendo-spacing-2, 0.5rem)) * 2 + var(--kendo-icon-size, 1rem))`
Description The horizontal start padding of the PanelBar header.
$kendo-panelbar-header-padding-x-end	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal end padding of the PanelBar header.
$kendo-panelbar-header-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the PanelBar header.
$kendo-panelbar-item-padding-x-start	Calculation	`calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) )`	`calc(var(--kendo-panelbar-icon-spacing, var(--kendo-spacing-2, 0.5rem)) * 2 + var(--kendo-icon-size, 1rem))`
Description The horizontal padding of the PanelBar items.
$kendo-panelbar-item-padding-x-end	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal end padding of the PanelBar items.
$kendo-panelbar-item-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the PanelBar items.
$kendo-panelbar-item-level-count	Number	`4`	`4`
Description The maximum nesting of the PanelBar items.
$kendo-panelbar-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the PanelBar.
$kendo-panelbar-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the PanelBar.
$kendo-panelbar-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the PanelBar.
$kendo-panelbar-header-bg	String	`var( --kendo-panelbar-bg, #{$kendo-panelbar-bg} )`	`var(--kendo-panelbar-bg, var(--kendo-component-bg, initial))`
Description The background color of the PanelBar header.
$kendo-panelbar-header-text	String	`var( --kendo-panelbar-text, #{$kendo-panelbar-text} )`	`var(--kendo-panelbar-text, var(--kendo-component-text, initial))`
Description The text color of the PanelBar header.
$kendo-panelbar-header-border	String	`inherit`	`inherit`
Description The border color of the PanelBar header.
$kendo-panelbar-header-hover-bg	String	`var( --kendo-hover-bg, inherit )`	`var(--kendo-hover-bg, inherit)`
Description The background color of the hovered PanelBar header.
$kendo-panelbar-header-hover-text	String	`if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))`	`var(--kendo-color-primary-hover, #106ebe)`
Description The text color of the hovered PanelBar header.
$kendo-panelbar-header-hover-border	String	`inherit`	`inherit`
Description The border color of the hovered PanelBar header.
$kendo-panelbar-header-focus-bg	String	`inherit`	`inherit`
Description The background color of the focused PanelBar header.
$kendo-panelbar-header-focus-text	String	`inherit`	`inherit`
Description The text color of the focused PanelBar header.
$kendo-panelbar-header-focus-border	String	`inherit`	`inherit`
Description The border color of the focused PanelBar header.
$kendo-panelbar-header-focus-shadow	List	`$kendo-list-item-focus-shadow`	`inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c)`
Description The shadow of the focused PanelBar header.
$kendo-panelbar-header-hover-focus-bg	String	`$kendo-panelbar-header-hover-bg`	`var(--kendo-hover-bg, inherit)`
Description The background color of the focused and hovered PanelBar header.
$kendo-panelbar-header-hover-focus-text	String	`$kendo-panelbar-header-hover-text`	`var(--kendo-color-primary-hover, #106ebe)`
Description The text color of the focused and hovered PanelBar header.
$kendo-panelbar-header-hover-focus-border	Null	`null`	`null`
Description The border color of the focused and hovered PanelBar header.
$kendo-panelbar-header-selected-bg	String	`var( --kendo-selected-bg, inherit )`	`var(--kendo-selected-bg, inherit)`
Description The background color of the selected PanelBar header.
$kendo-panelbar-header-selected-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the selected PanelBar header.
$kendo-panelbar-header-selected-border	String	`inherit`	`inherit`
Description The border color of the selected PanelBar header.
$kendo-panelbar-selected-marker	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The color of the marker of the selected PanelBar header.
$kendo-panelbar-header-selected-hover-bg	String	`$kendo-panelbar-header-selected-bg`	`var(--kendo-selected-bg, inherit)`
Description The background color of the selected and hovered PanelBar header.
$kendo-panelbar-header-selected-hover-text	String	`$kendo-panelbar-header-hover-text`	`var(--kendo-color-primary-hover, #106ebe)`
Description The text color of the selected and hovered PanelBar header.
$kendo-panelbar-header-selected-hover-border	String	`inherit`	`inherit`
Description The border color of the selected and hovered PanelBar header.
$kendo-panelbar-header-selected-focus-bg	String	`$kendo-panelbar-header-selected-bg`	`var(--kendo-selected-bg, inherit)`
Description The background color of the selected and focused PanelBar header.
$kendo-panelbar-header-selected-focus-text	String	`$kendo-panelbar-header-selected-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the selected and focused PanelBar header.
$kendo-panelbar-header-selected-focus-border	String	`inherit`	`inherit`
Description The border color of the selected and focused PanelBar header.
$kendo-panelbar-header-selected-hover-focus-bg	String	`$kendo-panelbar-header-selected-hover-bg`	`var(--kendo-selected-bg, inherit)`
Description The background color of the selected, hovered and focused PanelBar header.
$kendo-panelbar-header-selected-hover-focus-text	String	`$kendo-panelbar-header-selected-hover-text`	`var(--kendo-color-primary-hover, #106ebe)`
Description The text color of the selected, hovered and focused PanelBar header.
$kendo-panelbar-header-selected-hover-focus-border	String	`inherit`	`inherit`
Description The border color of the selected, hovered and focused PanelBar header.
$kendo-panelbar-header-expanded-bg	String	`inherit`	`inherit`
Description The background color of the expanded PanelBar header.
$kendo-panelbar-header-expanded-text	String	`inherit`	`inherit`
Description The text color of the expanded PanelBar header.
$kendo-panelbar-header-expanded-border	String	`inherit`	`inherit`
Description The border color of the expanded PanelBar header.
$kendo-panelbar-item-hover-bg	String	`var( --kendo-hover-bg, inherit )`	`var(--kendo-hover-bg, inherit)`
Description The background color of the hovered PanelBar items.
$kendo-panelbar-item-hover-text	String	`if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))`	`var(--kendo-color-primary-hover, #106ebe)`
Description The text color of the hovered PanelBar items.
$kendo-panelbar-item-hover-border	String	`inherit`	`inherit`
Description The border color of the hovered PanelBar items.
$kendo-panelbar-item-focus-bg	String	`inherit`	`inherit`
Description The background color of the focused PanelBar items.
$kendo-panelbar-item-focus-text	String	`inherit`	`inherit`
Description The text color of the focused PanelBar items.
$kendo-panelbar-item-focus-border	String	`inherit`	`inherit`
Description The border color of the focused PanelBar items.
$kendo-panelbar-item-focus-shadow	List	`$kendo-list-item-focus-shadow`	`inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c)`
Description The box shadow of the focused PanelBar items.
$kendo-panelbar-item-hover-focus-bg	String	`$kendo-panelbar-item-hover-bg`	`var(--kendo-hover-bg, inherit)`
Description The background color of the focused and hovered PanelBar items.
$kendo-panelbar-item-hover-focus-text	String	`$kendo-panelbar-item-hover-text`	`var(--kendo-color-primary-hover, #106ebe)`
Description The text color of the focused and hovered PanelBar items.
$kendo-panelbar-item-hover-focus-border	String	`inherit`	`inherit`
Description The border color of the focused and hovered PanelBar items.
$kendo-panelbar-item-selected-bg	String	`var( --kendo-selected-bg, inherit )`	`var(--kendo-selected-bg, inherit)`
Description The background color of the selected PanelBar items.
$kendo-panelbar-item-selected-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the selected PanelBar items.
$kendo-panelbar-item-selected-border	String	`inherit`	`inherit`
Description The border color of the selected PanelBar items.
$kendo-panelbar-item-selected-hover-bg	String	`$kendo-panelbar-item-selected-bg`	`var(--kendo-selected-bg, inherit)`
Description The background color of the selected and hovered PanelBar items.
$kendo-panelbar-item-selected-hover-text	String	`$kendo-panelbar-item-hover-text`	`var(--kendo-color-primary-hover, #106ebe)`
Description The text color of the selected and hovered PanelBar items.
$kendo-panelbar-item-selected-hover-border	String	`inherit`	`inherit`
Description The border color of the selected and hovered PanelBar items.
$kendo-panelbar-item-selected-focus-bg	String	`$kendo-panelbar-item-selected-bg`	`var(--kendo-selected-bg, inherit)`
Description The background color of the selected and focused PanelBar items.
$kendo-panelbar-item-selected-focus-text	String	`$kendo-panelbar-item-selected-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the selected and focused PanelBar items.
$kendo-panelbar-item-selected-focus-border	String	`inherit`	`inherit`
Description The border color of the selected and focused PanelBar items.
$kendo-panelbar-item-selected-hover-focus-bg	String	`$kendo-panelbar-item-selected-hover-bg`	`var(--kendo-selected-bg, inherit)`
Description The background color of the selected, hovered and focused PanelBar items.
$kendo-panelbar-item-selected-hover-focus-text	String	`$kendo-panelbar-item-selected-hover-text`	`var(--kendo-color-primary-hover, #106ebe)`
Description The text color of the selected, hovered and focused PanelBar items.
$kendo-panelbar-item-selected-hover-focus-border	String	`inherit`	`inherit`
Description The border color of the selected, hovered and focused PanelBar items.

Pdf-viewer

Name	Type	Default value	Computed value
$kendo-pdf-viewer-border-width	Number	`1px`	`1px`
Description The border width of the PDFViewer.
$kendo-pdf-viewer-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the PDFViewer.
$kendo-pdf-viewer-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the PDFViewer.
$kendo-pdf-viewer-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the PDFViewer.
$kendo-pdf-viewer-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the PDFViewer.
$kendo-pdf-viewer-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the PDFViewer.
$kendo-pdf-viewer-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the PDFViewer.
$kendo-pdf-viewer-canvas-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the PDFViewer canvas.
$kendo-pdf-viewer-canvas-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description Text color of the PDF viewer canvas.
$kendo-pdf-viewer-canvas-border	String	`var( --kendo-component-border, inherit )`	`var(--kendo-component-border, inherit)`
Description The border color of the PDFViewer canvas.
$kendo-pdf-viewer-page-spacing	String	`k-spacing(7.5)`	`var(--kendo-spacing-7\.5, 1.875rem)`
Description The spacing of the PDFViewer page.
$kendo-pdf-viewer-page-bg	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description The background color of the PDFViewer page.
$kendo-pdf-viewer-page-text	String	`var( --kendo-component-text, inherit )!default`	`var(--kendo-component-text, inherit)`
Description The text color of the PDFViewer page.
$kendo-pdf-viewer-page-border	String	`var( --kendo-component-border, inherit )`	`var(--kendo-component-border, inherit)`
Description The border color of the PDFViewer page.
$kendo-pdf-viewer-page-shadow	String	`var( --kendo-box-shadow-depth-3, none )`	`var(--kendo-box-shadow-depth-3, none)`
Description The shadow of the PDFViewer page.
$kendo-pdf-viewer-search-panel-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-padding-y	String	`$kendo-pdf-viewer-search-panel-padding-x`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-border-width	Number	`1px`	`1px`
Description The border width of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-bg	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description The background color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-border	String	`var( --kendo-component-border, inherit )!default`	`var(--kendo-component-border, inherit)`
Description The border color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-shadow	String	`none`	`none`
Description The shadow of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-matches-spacing	String	`var( --kendo-icon-spacing, .5rem )`	`var(--kendo-icon-spacing, 0.5rem)`
Description The spacing of the matches container in the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-margin-y	Calculation	`calc( ( #{$kendo-button-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-panel-padding-y} ) ) * -1 )`	`calc((calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 1px * 2) + 2 * 1px + 2 * var(--kendo-spacing-3, 0.75rem)) * -1)`
Description The vertical margin of the PDFViewer search panel.
$kendo-pdf-viewer-selection-line-height	String	`var( --kendo-line-height-sm, normal )`	`var(--kendo-line-height-sm, normal)`
Description The line height of the PDFViewer selection.
$kendo-pdf-viewer-search-highlight-bg	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The background color of the PDFViewer highlight.
$kendo-pdf-viewer-search-highlight-mark-bg	Color	`yellow`	`yellow`
Description The background color of the PDFViewer highlight mark.
$kendo-pdf-viewer-icon-text	String	`$kendo-dropzone-icon-text`	`var(--kendo-color-subtle, #605e5c)`
Description The text color of the PDFViewer icon.

Pivotgrid

Name	Type	Default value	Computed value
$kendo-pivotgrid-spacer	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description Spacer of the PivotGrid.
$kendo-pivotgrid-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description Horizontal padding of the PivotGrid.
$kendo-pivotgrid-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description Vertical of the PivotGrid.
$kendo-pivotgrid-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description Font family of the PivotGrid.
$kendo-pivotgrid-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description Font size of the PivotGrid.
$kendo-pivotgrid-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description Line height of the PivotGrid.
$kendo-pivotgrid-border-width	Number	`1px`	`1px`
Description Border width of the PivotGrid.
$kendo-pivotgrid-icon-spacing	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description Icon spacing of the PivotGrid.
$kendo-pivotgrid-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description Background color of the PivotGrid.
$kendo-pivotgrid-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description Text color of the PivotGrid.
$kendo-pivotgrid-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description Border color of the PivotGrid.
$kendo-pivotgrid-alt-border	String	`$kendo-pivotgrid-border`	`var(--kendo-component-border, initial)`
Description Alt border color of the PivotGrid.
$kendo-pivotgrid-row-header-width	Number	`300px`	`300px`
Description Default width of the PivotGrid row header.
$kendo-pivotgrid-column-header-height	Number	`75px`	`75px`
Description Default height of the PivotGrid column header.
$kendo-pivotgrid-cell-padding-x	String	`$kendo-table-cell-padding-x`	`var(--kendo-spacing-3, 0.75rem)`
Description Horizontal padding of the PivotGrid cell.
$kendo-pivotgrid-cell-padding-y	String	`$kendo-table-cell-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
Description Vertical padding of the PivotGrid cell.
$kendo-pivotgrid-cell-border-width	Number	`1px`	`1px`
Description Border width of the PivotGrid cell.
$kendo-pivotgrid-headers-bg	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description Background color of the PivotGrid header.
$kendo-pivotgrid-headers-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description Text color of the PivotGrid header.
$kendo-pivotgrid-headers-border	String	`var( --kendo-component-border, inherit )`	`var(--kendo-component-border, inherit)`
Description Border color of the PivotGrid header.
$kendo-pivotgrid-total-bg	String	`if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 ))`	`var(--kendo-color-base-subtle, #edebe9)`
Description Background color of the PivotGrid total cells.
$kendo-pivotgrid-total-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description Text color of the PivotGrid total cells.
$kendo-pivotgrid-total-border	String	`var( --kendo-component-border, inherit )`	`var(--kendo-component-border, inherit)`
Description Border color of the PivotGrid total cells.
$kendo-pivotgrid-hover-bg	String	`var( --kendo-hover-bg, inherit )`	`var(--kendo-hover-bg, inherit)`
Description Hover background color of the PivotGrid.
$kendo-pivotgrid-hover-text	String	`inherit`	`inherit`
Description Hover text color of the PivotGrid.
$kendo-pivotgrid-hover-border	String	`inherit`	`inherit`
Description Hover border color of the PivotGrid.
$kendo-pivotgrid-selected-bg	String	`var( --kendo-selected-bg, inherit )`	`var(--kendo-selected-bg, inherit)`
Description Selected background color of the PivotGrid.
$kendo-pivotgrid-selected-text	String	`inherit`	`inherit`
Description Selected text color of the PivotGrid.
$kendo-pivotgrid-selected-border	String	`inherit`	`inherit`
Description Selected border color of the PivotGrid.
$kendo-pivotgrid-focus-shadow	List	`$kendo-list-item-focus-shadow`	`inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c)`
Description Focus shadow of the PivotGrid.
$kendo-pivotgrid-configurator-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description Horizontal padding of the PivotGrid configurator.
$kendo-pivotgrid-configurator-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description Vertical padding of the PivotGrid configurator.
$kendo-pivotgrid-configurator-border-width	Number	`1px`	`1px`
Description Border width of the PivotGrid configurator.
$kendo-pivotgrid-configurator-header-padding-x	String	`$kendo-pivotgrid-spacer`	`var(--kendo-spacing-3, 0.75rem)`
Description Horizontal padding of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-padding-y	String	`$kendo-pivotgrid-configurator-header-padding-x`	`var(--kendo-spacing-3, 0.75rem)`
Description Vertical padding of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-font-size	Calculation	`calc( var( --kendo-font-size-xl, 2rem ) * .9 )`	`calc(var(--kendo-font-size-xl, 2rem) * 0.9)`
Description Font size of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-font-weight	String	`var( --kendo-font-weight-bold, bold )`	`var(--kendo-font-weight-bold, bold)`
Description Font weight of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-content-padding-x	String	`$kendo-pivotgrid-spacer`	`var(--kendo-spacing-3, 0.75rem)`
Description Horizontal padding of the PivotGrid configurator content.
$kendo-pivotgrid-configurator-content-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description Vertical padding of the PivotGrid configurator content.
$kendo-pivotgrid-configurator-fields-margin-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description Horizontal margin of the PivotGrid configurator fields.
$kendo-pivotgrid-configurator-fields-margin-y	Calculation	`calc( #{$kendo-pivotgrid-spacer} / 2 )`	`calc(var(--kendo-spacing-3, 0.75rem) / 2)`
Description Vertical margin of the PivotGrid configurator fields.
$kendo-pivotgrid-configurator-fields-gap	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Spacing of the PivotGrid configurator fields.
$kendo-pivotgrid-configurator-vertical-width	Number	`320px`	`320px`
Description Default width of the PivotGrid vertical configurator.
$kendo-pivotgrid-configurator-horizontal-height	Number	`420px`	`420px`
Description Default height of the PivotGrid horizontal configurator.
$kendo-pivotgrid-configurator-bg	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description Background color of the PivotGrid configurator.
$kendo-pivotgrid-configurator-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description Text color of the PivotGrid configurator.
$kendo-pivotgrid-configurator-border	String	`var( --kendo-component-border, inherit )!default`	`var(--kendo-component-border, inherit)`
Description Border color of the PivotGrid configurator.
$kendo-pivotgrid-configurator-header-bg	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description Background color of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description Text color of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-border	String	`inherit`	`inherit`
Description Border color of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-button-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description Horizontal padding of the PivotGrid configurator button.
$kendo-pivotgrid-configurator-button-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description Vertical padding of the PivotGrid configurator button.
$kendo-pivotgrid-configurator-button-border-width	Number	`1px`	`1px`
Description Border width of the PivotGrid configurator button.
$kendo-pivotgrid-configurator-button-size	Calculation	`calc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) )`	`calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)`
Description Size of the PivotGrid configurator button.
$kendo-pivotgrid-configurator-button-icon-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Icon spacing of the PivotGrid configurator button.
$kendo-pivotgrid-calculated-field-padding-x	String	`$kendo-pivotgrid-spacer`	`var(--kendo-spacing-3, 0.75rem)`
Description Horizontal padding of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-padding-y	String	`$kendo-pivotgrid-spacer`	`var(--kendo-spacing-3, 0.75rem)`
Description Vertical padding of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-border-width	Number	`1px`	`1px`
Description Border width of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description Border radius of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-gap	String	`$kendo-pivotgrid-spacer`	`var(--kendo-spacing-3, 0.75rem)`
Description Spacing of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-bg	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description Background color of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description Text color of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-border	String	`var( --kendo-component-border, inherit )`	`var(--kendo-component-border, inherit)`
Description Border color of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-header-bg	String	`inherit`	`inherit`
Description Background color of the PivotGrid calculated field header.
$kendo-pivotgrid-calculated-field-header-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description Text color of the PivotGrid calculated field header.
$kendo-pivotgrid-calculated-field-header-border	String	`inherit`	`inherit`
Description Border color of the PivotGrid calculated field header.
$kendo-pivotgrid-treeview-padding-x	Calculation	`calc( #{$kendo-pivotgrid-spacer} / 2 )`	`calc(var(--kendo-spacing-3, 0.75rem) / 2)`
Description Horizontal padding of the PivotGrid treeview.
$kendo-pivotgrid-treeview-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description Vertical padding of the PivotGrid treeview.

Name	Type	Default value	Computed value
$kendo-popover-border-width	Number	`$kendo-dialog-border-width`	`0`
Description The width of the border around the Popover.
$kendo-popover-border-style	String	`solid`	`solid`
Description The style of the border around the Popover.
$kendo-popover-border-radius	String	`$kendo-window-border-radius`	`var(--kendo-border-radius-md, 0.25rem)`
Description The radius of the border around the Popover.
$kendo-popover-font-family	String	`$kendo-window-font-family`	`var(--kendo-font-family, inherit)`
Description The font family of the Popover.
$kendo-popover-font-size	String	`$kendo-window-font-size`	`var(--kendo-font-size, inherit)`
Description The font size of the Popover.
$kendo-popover-line-height	String	`$kendo-window-line-height`	`var(--kendo-line-height, normal)`
Description The line height of the Popover.
$kendo-popover-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Popover.
$kendo-popover-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Popover.
$kendo-popover-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the Popover.
$kendo-popover-shadow	String	`var( --kendo-box-shadow-depth-6, none )`	`var(--kendo-box-shadow-depth-6, none)`
Description The box shadow of the Popover.
$kendo-popover-header-padding-x	String	`$kendo-dialog-titlebar-padding-x`	`var(--kendo-spacing-6, 1.5rem)`
Description The horizontal padding of the Popover header.
$kendo-popover-header-padding-y	String	`$kendo-dialog-titlebar-padding-y`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the Popover header.
$kendo-popover-header-border-width	Number	`$kendo-dialog-titlebar-border-width`	`0`
Description The border width of the Popover header.
$kendo-popover-header-border-style	String	`$kendo-popover-border-style`	`solid`
Description The border style of the Popover header.
$kendo-popover-header-text	String	`$kendo-dialog-titlebar-text`	`var(--kendo-component-text, initial)`
Description The text color of the Popover header.
$kendo-popover-header-bg	String	`$kendo-dialog-titlebar-bg`	`var(--kendo-component-bg, initial)`
Description The background color of the Popover header.
$kendo-popover-header-border	String	`$kendo-dialog-titlebar-border`	`var(--kendo-component-border, initial)`
Description The border color of the Popover header.
$kendo-popover-body-padding-x	String	`$kendo-window-inner-padding-x`	`var(--kendo-spacing-6, 1.5rem)`
Description The horizontal padding of the Popover body.
$kendo-popover-body-padding-y	String	`$kendo-window-inner-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the Popover body.
$kendo-popover-actions-border-width	Number	`0`	`0`
Description The border width of the Popover actions.
$kendo-popover-actions-padding-x	String	`$kendo-popover-body-padding-x`	`var(--kendo-spacing-6, 1.5rem)`
Description The horizontal padding of the Popover actions.
$kendo-popover-actions-padding-y	String	`$kendo-popover-body-padding-y`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the Popover actions.
$kendo-popover-actions-gap	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The spacing between the Popover actions.
$kendo-popover-callout-width	String	`k-spacing(5)`	`var(--kendo-spacing-5, 1.25rem)`
Description The width of the Popover callout.
$kendo-popover-callout-height	String	`$kendo-popover-callout-width`	`var(--kendo-spacing-5, 1.25rem)`
Description The height of the Popover callout.
$kendo-popover-callout-border-width	Number	`$kendo-popover-border-width`	`0`
Description The border width of the Popover callout.
$kendo-popover-callout-border-style	String	`$kendo-popover-border-style`	`solid`
Description The border style of the Popover callout.

Name	Type	Default value	Computed value
$kendo-popup-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description Horizontal padding of the popup.
$kendo-popup-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description Vertical padding of the popup.
$kendo-popup-border-width	Number	`0`	`0`
Description Width of the border around the popup.
$kendo-popup-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description Border radius of the popup.
$kendo-popup-font-size	String	`var( --kendo-font-size, inherit)`	`var(--kendo-font-size, inherit)`
Description Font size of the popup.
$kendo-popup-line-height	String	`var( --kendo-line-height, normal)`	`var(--kendo-line-height, normal)`
Description Line height of the popup.
$kendo-popup-content-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Horizontal padding of the content inside the popup.
$kendo-popup-content-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Vertical padding of the content inside the popup.
$kendo-popup-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description Background color of the popup.
$kendo-popup-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description Text color of the popup.
$kendo-popup-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description Border color of the popup.
$kendo-popup-shadow	String	`var( --kendo-box-shadow-depth-4, none )`	`var(--kendo-box-shadow-depth-4, none)`
Description Box shadow around the popup.

Progressbar

Name	Type	Default value	Computed value
$kendo-progressbar-height	Number	`4px`	`4px`
Description The height of the ProgressBar.
$kendo-progressbar-horizontal-width	Number	`100%`	`100%`
Description The horizontal width of the ProgressBar.
$kendo-progressbar-animation-timing	List	`1s linear infinite`	`1s linear infinite`
Description The animation timing of the ProgressBar.
$kendo-progressbar-border-width	Number	`0px`	`0px`
Description The width of the border around the ProgressBar.
$kendo-progressbar-border-radius	String	`var( --kendo-border-radius-sm, initial )`	`var(--kendo-border-radius-sm, initial)`
Description The border radius of the ProgressBar.
$kendo-progressbar-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the ProgressBar.
$kendo-progressbar-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the ProgressBar.
$kendo-progressbar-line-height	String	`var( --kendo-line-height, inherit )`	`var(--kendo-line-height, inherit)`
Description The line height of the ProgressBar.
$kendo-progressbar-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal padding of the ProgressBar.
$kendo-progressbar-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical padding of the ProgressBar.
$kendo-progressbar-bg	String	`if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 ))`	`var(--kendo-color-base-subtle, #edebe9)`
Description The background color of the ProgressBar.
$kendo-progressbar-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the ProgressBar.
$kendo-progressbar-border	String	`$kendo-progressbar-bg`	`var(--kendo-color-base-subtle, #edebe9)`
Description The border color of the ProgressBar.
$kendo-progressbar-gradient	Null	`null`	`null`
Description The background gradient of the ProgressBar.
$kendo-progressbar-value-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The progress background color of the ProgressBar.
$kendo-progressbar-value-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The progress text color of the ProgressBar.
$kendo-progressbar-value-border	String	`$kendo-progressbar-value-bg`	`var(--kendo-color-primary, #0078d4)`
Description The progress border color of the ProgressBar.
$kendo-progressbar-value-gradient	Null	`null`	`null`
Description The progress background gradient of the ProgressBar.
$kendo-progressbar-offset-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The progress status offset of the ProgressBar.
$kendo-progressbar-vertical-status-offset	Calculation	`calc( (#{$kendo-progressbar-font-size} * #{$kendo-progressbar-line-height} + #{$kendo-progressbar-offset-y}) * -1)`	`calc((var(--kendo-font-size-sm, inherit) * var(--kendo-line-height, inherit) + var(--kendo-spacing-2, 0.5rem)) * -1)`
Description The progress status offset of the vertical ProgressBar.
$kendo-progressbar-disabled-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent)`
Description The background color of the disabled ProgressBar.
$kendo-progressbar-disabled-text	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)`
Description The text color of the disabled ProgressBar.
$kendo-progressbar-disabled-border	String	`$kendo-progressbar-disabled-bg`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent)`
Description The border color of the disabled ProgressBar.
$kendo-progressbar-value-disabled-bg	String	`if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-30 ))`	`var(--kendo-color-primary-subtle, #deecf9)`
Description The progress background color of the disabled ProgressBar.
$kendo-progressbar-indeterminate-bg	String	`if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 ))`	`var(--kendo-color-base-subtle, #edebe9)`
Description The background color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-text	String	`$kendo-progressbar-text`	`var(--kendo-component-text, initial)`
Description The text color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-border	String	`if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 ))`	`var(--kendo-color-base-subtle, #edebe9)`
Description The border color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-gradient-horizontal	String	`linear-gradient(270deg, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 15%, if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) 50%, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 85%)`	`linear-gradient(270deg, var(--kendo-color-base-subtle, #edebe9) 15%, var(--kendo-color-primary, #0078d4) 50%, var(--kendo-color-base-subtle, #edebe9) 85%)`
Description The background gradient of the horizontal indeterminate ProgressBar.
$kendo-progressbar-indeterminate-gradient-vertical	String	`linear-gradient(180deg, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 15%, if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) 50%, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 85%)`	`linear-gradient(180deg, var(--kendo-color-base-subtle, #edebe9) 15%, var(--kendo-color-primary, #0078d4) 50%, var(--kendo-color-base-subtle, #edebe9) 85%)`
Description The background gradient of the vertical indeterminate ProgressBar.
$kendo-progressbar-indeterminate-animation-horizontal	List	`3s ease 0s infinite running progressbar-indeterminate-animation-horizontal`	`3s ease 0s infinite running progressbar-indeterminate-animation-horizontal`
Description The gradient size of the horizontal indeterminate ProgressBar.
$kendo-progressbar-indeterminate-animation-vertical	List	`3s ease 0s infinite running progressbar-indeterminate-animation-vertical`	`3s ease 0s infinite running progressbar-indeterminate-animation-vertical`
Description The gradient size of the vertical indeterminate ProgressBar.
$kendo-progressbar-chunk-border	String	`var( --kendo-body-bg, initial )`	`var(--kendo-body-bg, initial)`
Description The border color of the chunk ProgressBar.
$kendo-circular-progressbar-arc-stroke	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The arc stroke color of the circular ProgressBar.
$kendo-circular-progressbar-scale-stroke	String	`$kendo-progressbar-bg`	`var(--kendo-color-base-subtle, #edebe9)`
Description The scale stroke background color of the circular ProgressBar.

Prompt

Name	Type	Default value	Computed value
$kendo-prompt-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Prompt.
$kendo-prompt-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Prompt.
$kendo-prompt-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the Prompt.
$kendo-prompt-header-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Prompt header.
$kendo-prompt-header-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Prompt header.
$kendo-prompt-header-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the Prompt header.
$kendo-prompt-content-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the Prompt content.
$kendo-prompt-content-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the Prompt content.
$kendo-prompt-content-spacing	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The spacing between the items of the Prompt content.
$kendo-prompt-content-text	String	`k-get-theme-color-var( neutral-190 )`	`var(--kendo-neutral-190, inherit)`
Description The text color of the Prompt content.
$kendo-prompt-content-bg	String	`k-get-theme-color-var( neutral-10 )`	`var(--kendo-neutral-10, inherit)`
Description The background color of the Prompt content.
$kendo-prompt-content-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The text border of the Prompt content.
$kendo-prompt-expander-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing between the items of the Prompt content expander.
$kendo-prompt-suggestion-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Prompt suggestion container.
$kendo-prompt-suggestion-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Prompt suggestion container.
$kendo-prompt-suggestion-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the Prompt suggestion container.
$kendo-prompt-suggestion-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Prompt suggestion container.
$kendo-prompt-suggestion-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Prompt suggestion container.
$kendo-prompt-suggestion-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the Prompt suggestion container.
$kendo-prompt-suggestion-shadow	String	`k-elevation(1)`	`var(--kendo-elevation-1, 0 0.3px 0.9px rgba(0, 0, 0, 0.1), 0 1.6px 3.6px rgba(0, 0, 0, 0.13))`
Description The elevation of the Prompt suggestion container.

Radii

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

Radio

Name	Type	Default value	Computed value
$kendo-radio-border-radius	Number	`50%`	`50%`
Description The border radius of the RadioButton.
$kendo-radio-border-width	Number	`1px`	`1px`
Description The border width of the RadioButton.
$kendo-radio-sizes	Map	`( sm: ( size: k-spacing(4), glyph-size: k-spacing(3.5), indicator-size: k-spacing(2), ripple-size: 300% ), md: ( size: k-spacing(5), glyph-size: k-spacing(4.5), indicator-size: k-spacing(2.5), ripple-size: 300% ), lg: ( size: k-spacing(6), glyph-size: k-spacing(5.5), indicator-size: k-spacing(3), ripple-size: 300% ) )`	`(sm: (size: var(--kendo-spacing-4, 1rem), glyph-size: var(--kendo-spacing-3\.5, 0.875rem), indicator-size: var(--kendo-spacing-2, 0.5rem), ripple-size: 300%), md: (size: var(--kendo-spacing-5, 1.25rem), glyph-size: var(--kendo-spacing-4\.5, 1.125rem), indicator-size: var(--kendo-spacing-2\.5, 0.625rem), ripple-size: 300%), lg: (size: var(--kendo-spacing-6, 1.5rem), glyph-size: var(--kendo-spacing-5\.5, 1.375rem), indicator-size: var(--kendo-spacing-3, 0.75rem), ripple-size: 300%))`
Description The map with the different RadioButton sizes.
$kendo-radio-bg	String	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the RadioButton.
$kendo-radio-text	Color	`transparent`	`transparent`
Description The color of the RadioButton.
$kendo-radio-border	String	`if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-border-alt, #323130)`
Description The border color of the RadioButton.
$kendo-radio-hover-bg	String	`$kendo-radio-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the hovered RadioButton.
$kendo-radio-hover-text	String	`if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color( neutral, 130 ))`	`var(--kendo-color-subtle, #605e5c)`
Description The color of the hovered RadioButton.
$kendo-radio-hover-border	String	`$kendo-radio-border`	`var(--kendo-color-border-alt, #323130)`
Description The border color of the hovered RadioButton.
$kendo-radio-checked-bg	String	`$kendo-radio-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the checked RadioButton.
$kendo-radio-checked-text	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The color of the checked RadioButton.
$kendo-radio-checked-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the checked RadioButton.
$kendo-radio-hover-checked-bg	String	`$kendo-radio-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the checked and hovered RadioButton.
$kendo-radio-hover-checked-text	String	`if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))`	`var(--kendo-color-primary-hover, #106ebe)`
Description The color of the checked and hovered RadioButton.
$kendo-radio-hover-checked-border	String	`if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))`	`var(--kendo-color-primary-hover, #106ebe)`
Description The border color of the checked and hovered RadioButton.
$kendo-radio-focus-border	Null	`null`	`null`
Description The border color of the focused RadioButton.
$kendo-radio-focus-shadow	Null	`null`	`null`
Description The box shadow of the focused RadioButton.
$kendo-radio-focus-outline	List	`1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))`	`1px solid var(--kendo-color-base-emphasis, #605e5c)`
Description The outline of the focused RadioButton.
$kendo-radio-focus-outline-offset	Number	`2px`	`2px`
Description The outline offset of the focused RadioButton.
$kendo-radio-disabled-bg	String	`$kendo-radio-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the disabled RadioButton.
$kendo-radio-disabled-text	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)`
Description The color of the disabled RadioButton.
$kendo-radio-disabled-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)`
Description The border color of the disabled RadioButton.
$kendo-radio-disabled-checked-bg	String	`$kendo-radio-disabled-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the disabled and checked RadioButton.
$kendo-radio-disabled-checked-text	String	`$kendo-radio-disabled-text`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)`
Description The color of the disabled and checked RadioButton.
$kendo-radio-disabled-checked-border	String	`$kendo-radio-disabled-border`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)`
Description The border color of the disabled and checked RadioButton.
$kendo-radio-invalid-bg	String	`$kendo-radio-bg`	`var(--kendo-color-surface-alt, #ffffff)`
Description The background color of the invalid RadioButton.
$kendo-radio-invalid-text	String	`$kendo-invalid-text`	`var(--kendo-color-error-on-surface, #a4262c)`
Description The color of the invalid RadioButton.
$kendo-radio-invalid-border	String	`$kendo-invalid-border`	`var(--kendo-color-error-emphasis, #a4262c)`
Description The border color of the invalid RadioButton.
$kendo-radio-indicator-type	String	`pseudo`	`pseudo`
Description The type of the RadioButton indicator.
$kendo-radio-indicator-border-radius	Number	`50%`	`50%`
Description The border radius of the RadioButton indicator.
$kendo-radio-glyph-font-family	List	`"WebComponentsIcons", monospace`	`"WebComponentsIcons", monospace`
Description The glyph font family of the RadioButton indicator.
$kendo-radio-checked-glyph	String	`"\e308"`	`"\e308"`
Description The glyph of the RadioButton indicator.
$kendo-radio-checked-image	String	`escape-svg( url("data:image/svg+xml,") )`	`url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='var%28--kendo-color-primary, %230078d4%29'/%3e%3c/svg%3e")`
Description The image of the checked RadioButton indicator.
$kendo-radio-disabled-checked-image	Null	`null`	`null`
Description The image of the disabled and checked RadioButton indicator.
$kendo-radio-label-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal margin of the RadioButton inside of a label.
$kendo-radio-list-spacing	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal list item margin of the RadioButton.
$kendo-radio-list-item-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal list item padding of the RadioButton.
$kendo-radio-list-item-padding-y	String	`$kendo-list-md-item-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical list item padding of the RadioButton.
$kendo-radio-list-item-gap	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The gap between the list items of the RadioButton.
$kendo-radio-ripple-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the RadioButton ripple.
$kendo-radio-ripple-opacity	Number	`.25`	`0.25`
Description The opacity of the RadioButton ripple.

Rating

Name	Type	Default value	Computed value
$kendo-rating-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Rating.
$kendo-rating-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the Rating.
$kendo-rating-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Rating.
$kendo-rating-spacing	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The content spacing of the Rating.
$kendo-rating-item-padding-x	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The horizontal padding of the Rating item.
$kendo-rating-item-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Rating item.
$kendo-rating-item-text	String	`if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-subtle, #605e5c)`
Description The text color of the Rating item.
$kendo-rating-item-hover-text	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The text color of the hovered Rating item.
$kendo-rating-item-focus-text	String	`$kendo-rating-item-text`	`var(--kendo-color-subtle, #605e5c)`
Description The text color of the focused Rating item.
$kendo-rating-item-focus-outline-width	Number	`1px`	`1px`
Description The outline width of the focused Rating item.
$kendo-rating-item-focus-outline-style	String	`solid`	`solid`
Description The outline style of the focused Rating item.
$kendo-rating-item-focus-outline	String	`currentColor`	`currentColor`
Description The outline color of the focused Rating item.
$kendo-rating-item-selected-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the selected Rating item.
$kendo-rating-item-selected-hover-text	String	`if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))`	`var(--kendo-color-primary-active, #005a9e)`
Description The text color of the selected and hovered Rating item.

Scheduler

Name	Type	Default value	Computed value
$kendo-scheduler-border-width	Number	`1px`	`1px`
Description The width of the border around the Scheduler.
$kendo-scheduler-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Scheduler.
$kendo-scheduler-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Scheduler.
$kendo-scheduler-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Scheduler.
$kendo-scheduler-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Scheduler.
$kendo-scheduler-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Scheduler.
$kendo-scheduler-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the Scheduler.
$kendo-scheduler-selected-bg	String	`if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-20 ))`	`var(--kendo-color-primary-subtle, #deecf9)`
Description The background color of the selected row in Scheduler.
$kendo-scheduler-selected-text	String	`$kendo-scheduler-text`	`var(--kendo-component-text, initial)`
Description The text color of the selected row in Scheduler.
$kendo-scheduler-selected-border	String	`$kendo-scheduler-border`	`var(--kendo-component-border, initial)`
Description The border color of the selected row in Scheduler.
$kendo-scheduler-toolbar-bg	String	`var( --kendo-toolbar-bg, $kendo-toolbar-bg )`	`var(--kendo-toolbar-bg, var(--kendo-color-surface, #faf9f8))`
Description The background color of the Scheduler ToolBar.
$kendo-scheduler-toolbar-text	String	`var( --kendo-toolbar-text, $kendo-toolbar-text )`	`var(--kendo-toolbar-text, var(--kendo-component-text, inherit))`
Description The text color of the Scheduler ToolBar.
$kendo-scheduler-toolbar-border	String	`var( --kendo-toolbar-border, $kendo-toolbar-border )`	`var(--kendo-toolbar-border, var(--kendo-component-border, initial))`
Description The border color of the Scheduler ToolBar.
$kendo-scheduler-toolbar-gradient	Null	`null`	`null`
Description The gradient of the Scheduler ToolBar.
$kendo-scheduler-footer-bg	String	`var( --kendo-toolbar-bg, $kendo-toolbar-bg )`	`var(--kendo-toolbar-bg, var(--kendo-color-surface, #faf9f8))`
Description The background color of the Scheduler footer.
$kendo-scheduler-footer-text	String	`var( --kendo-toolbar-text, $kendo-toolbar-text )`	`var(--kendo-toolbar-text, var(--kendo-component-text, inherit))`
Description The text color of the Scheduler footer.
$kendo-scheduler-footer-border	String	`var( --kendo-toolbar-border, $kendo-toolbar-border )`	`var(--kendo-toolbar-border, var(--kendo-component-border, initial))`
Description The border color of the Scheduler footer.
$kendo-scheduler-footer-gradient	Null	`null`	`null`
Description The gradient of the Scheduler footer.
$kendo-scheduler-event-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the Scheduler event.
$kendo-scheduler-event-line-height	String	`$kendo-scheduler-line-height`	`var(--kendo-line-height, normal)`
Description The line height of the Scheduler event.
$kendo-scheduler-event-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Scheduler event.
$kendo-scheduler-event-padding-y	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical padding of the Scheduler event.
$kendo-scheduler-event-min-height	Calculation	`calc( #{$kendo-scheduler-line-height} + 2 * #{$kendo-scheduler-event-padding-y} )`	`calc(var(--kendo-line-height, normal) + 2 * var(--kendo-spacing-0\.5, 0.125rem))`
Description The minimum height of the Scheduler event.
$kendo-scheduler-event-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the Scheduler event.
$kendo-scheduler-event-text	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The text color of the Scheduler event.
$kendo-scheduler-event-border	String	`$kendo-scheduler-event-bg`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the Scheduler event.
$kendo-scheduler-event-gradient	Null	`null`	`null`
Description The gradient of the Scheduler event.
$kendo-scheduler-event-shadow	Null	`null`	`null`
Description The shadow of the Scheduler event.
$kendo-scheduler-event-hover-bg	String	`var( --kendo-hover-bg, inherit )`	`var(--kendo-hover-bg, inherit)`
Description The background color of the hovered Scheduler event.
$kendo-scheduler-event-hover-text	String	`var( --kendo-hover-text, inherit )`	`var(--kendo-hover-text, inherit)`
Description The text color of the hovered Scheduler event.
$kendo-scheduler-event-hover-border	String	`var( --kendo-hover-border, inherit )`	`var(--kendo-hover-border, inherit)`
Description The border color of the hovered Scheduler event.
$kendo-scheduler-event-hover-gradient	Null	`null`	`null`
Description The gradient of the hovered Scheduler event.
$kendo-scheduler-event-hover-shadow	Null	`null`	`null`
Description The shadow of the hovered Scheduler event.
$kendo-scheduler-event-selected-bg	String	`if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))`	`var(--kendo-color-primary-active, #005a9e)`
Description The background color of the selected Scheduler event.
$kendo-scheduler-event-selected-text	String	`$kendo-scheduler-event-text`	`var(--kendo-color-app-surface, #ffffff)`
Description The text color of the selected Scheduler event.
$kendo-scheduler-event-selected-border	String	`$kendo-scheduler-event-bg`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the selected Scheduler event.
$kendo-scheduler-event-selected-gradient	Null	`null`	`null`
Description The gradient of the selected Scheduler event.
$kendo-scheduler-event-selected-shadow	String	`none`	`none`
Description The shadow of the selected Scheduler event.
$kendo-scheduler-event-ongoing-shadow	List	`inset 0px 0px 0px 1px #ff0000`	`inset 0px 0px 0px 1px #ff0000`
Description The shadow of the ongoing Scheduler event.
$kendo-scheduler-cell-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Scheduler cell.
$kendo-scheduler-cell-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Scheduler cell.
$kendo-scheduler-cell-height	Calculation	`$kendo-line-height-em`	`calc(1.4285714286 * 1em)`
Description The height of the Scheduler cell.
$kendo-scheduler-datecolumn-width	Number	`12em`	`12em`
Description The width of the Scheduler date column.
$kendo-scheduler-timecolumn-width	Number	`11em`	`11em`
Description The width of the Scheduler time column.
$kendo-scheduler-nonwork-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the non-working hours in the Scheduler.
$kendo-scheduler-nonwork-text	Null	`null`	`null`
Description The text color of the non-working hours in the Scheduler.
$kendo-scheduler-weekend-bg	Null	`null`	`null`
Description The background color of the weekends in the Scheduler.
$kendo-scheduler-weekend-text	Null	`null`	`null`
Description The text color of the weekends in the Scheduler.
$kendo-scheduler-othermonth-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the preceding/subsequent month cells in the Calendar.
$kendo-scheduler-othermonth-text	Null	`null`	`null`
Description The text color of the preceding/subsequent month cells in the Calendar.
$kendo-scheduler-yearview-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the year view in the Scheduler.
$kendo-scheduler-yearview-padding-y	String	`$kendo-scheduler-yearview-padding-x`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the year view in the Scheduler.
$kendo-scheduler-yearview-calendar-gap	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The spacing between the calendars of the year view in the Scheduler.
$kendo-scheduler-yearview-indicator-size	Number	`3px`	`3px`
Description The days with events indicator size of the year view in the Scheduler.
$kendo-scheduler-yearview-indicator-calc-offset-top	Calculation	`calc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2) )`	`calc(28px - var(--kendo-spacing-1\.5, 0.375rem) * 2)`
Description The top position of the days with events indicator of the year view in the Scheduler.
$kendo-scheduler-yearview-indicator-calc-offset-left	Calculation	`calc( 50% - (#{$kendo-scheduler-yearview-indicator-size} / 2) )`	`calc(50% - 3px / 2)`
Description The left position of the days with events indicator of the year view in the Scheduler.
$kendo-scheduler-yearview-indicator-border-radius	Number	`50%`	`50%`
Description The border radius of the days with events indicator of the year view in the Scheduler.
$kendo-scheduler-yearview-indicator-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the days with events indicator of the year view in the Scheduler.
$kendo-scheduler-yearview-indicator-selected-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the selected days with events indicator of the year view in the Scheduler.
$kendo-scheduler-tooltip-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Scheduler Tooltip.
$kendo-scheduler-tooltip-padding-y	String	`$kendo-scheduler-tooltip-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Scheduler Tooltip.
$kendo-scheduler-tooltip-border-width	Number	`0`	`0`
Description The width of the border of the Scheduler Tooltip.
$kendo-scheduler-tooltip-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the Scheduler Tooltip.
$kendo-scheduler-tooltip-text	String	`if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-subtle, #605e5c)`
Description The text color of the Scheduler Tooltip.
$kendo-scheduler-tooltip-border	Null	`null`	`null`
Description The border color of the Scheduler Tooltip.
$kendo-scheduler-tooltip-shadow	String	`k-elevation(5)`	`var(--kendo-elevation-5, 0 1.8px 5.4px rgba(0, 0, 0, 0.1), 0 9.6px 21.6px rgba(0, 0, 0, 0.13))`
Description The shadow of the Scheduler Tooltip.
$kendo-scheduler-tooltip-title-margin-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical margin of the Scheduler Tooltip title.
$kendo-scheduler-tooltip-month-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the month inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-day-font-size	Calculation	`calc( var( --kendo-font-size-sm, .75rem ) * 2 )`	`calc(var(--kendo-font-size-sm, 0.75rem) * 2)`
Description The font size of the day inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-events-max-height	Number	`250px`	`250px`
Description The max height of the events inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-events-gap	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing between the events inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-event-padding-x	String	`$kendo-scheduler-event-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the events inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-event-padding-y	String	`$kendo-scheduler-event-padding-y`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical padding of the events inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-event-border-radius	String	`$kendo-scheduler-event-border-radius`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the events inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-event-gap	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The spacing between the events items inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-callout-color	String	`$kendo-scheduler-tooltip-bg`	`var(--kendo-color-app-surface, #ffffff)`
Description The color of the Scheduler Tooltip callout.
$kendo-scheduler-resize-handle-width	Number	`2em`	`2em`
Description The width of the Scheduler resize handle.
$kendo-scheduler-more-btn-height	Number	`13px`	`13px`
Description The height of the Scheduler more events button.
$kendo-scheduler-marquee-color	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The color of the Scheduler marquee.

Scrollview

Name	Type	Default value	Computed value
$kendo-scrollview-border-width	Number	`0px`	`0px`
Description The width of the border around the ScrollView.
$kendo-scrollview-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the ScrollView.
$kendo-scrollview-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the ScrollView.
$kendo-scrollview-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the ScrollView.
$kendo-scrollview-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the ScrollView.
$kendo-scrollview-bg	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description The background color of the ScrollView.
$kendo-scrollview-border	String	`var( --kendo-component-border, inherit )`	`var(--kendo-component-border, inherit)`
Description The border color of the ScrollView.
$kendo-scrollview-pagebutton-size	Number	`10px`	`10px`
Description The size of the ScrollView page button.
$kendo-scrollview-pagebutton-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the ScrollView page button.
$kendo-scrollview-pagebutton-border	String	`$kendo-scrollview-pagebutton-bg`	`var(--kendo-color-app-surface, #ffffff)`
Description The border color of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The primary background color of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-border	String	`$kendo-scrollview-pagebutton-primary-bg`	`var(--kendo-color-primary, #0078d4)`
Description The primary border color of the ScrollView page button.
$kendo-scrollview-pagebutton-hover-shadow	List	`0 0 0 1px if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-30 ))`	`0 0 0 1px var(--kendo-color-base, #ffffff)`
Description The hover box shadow of the ScrollView page button.
$kendo-scrollview-pagebutton-focus-shadow	List	`0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))`	`0 0 0 1px var(--kendo-color-base-emphasis, #605e5c)`
Description The focus box shadow of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-hover-shadow	List	`0 0 0 2px if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-30 ))`	`0 0 0 2px var(--kendo-color-base, #ffffff)`
Description The primary hover box shadow of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-focus-shadow	List	`0 0 0 2px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))`	`0 0 0 2px var(--kendo-color-base-emphasis, #605e5c)`
Description The primary focus box shadow of the ScrollView page button.
$kendo-scrollview-pager-offset	Number	`0px`	`0px`
Description The offset of the ScrollView pager.
$kendo-scrollview-pager-item-spacing	String	`k-spacing(5)`	`var(--kendo-spacing-5, 1.25rem)`
Description The spacing between the ScrollView pager items.
$kendo-scrollview-pager-item-border-width	Number	`0px`	`0px`
Description The border width of the ScrollView pager items.
$kendo-scrollview-pager-height	Calculation	`calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + calc( #{$kendo-scrollview-pager-item-spacing} * 2 ) )`	`calc(10px + 0px + var(--kendo-spacing-5, 1.25rem) * 2)`
Description The height of the ScrollView pager.
$kendo-scrollview-navigation-color	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The color of the ScrollView navigation arrows.
$kendo-scrollview-navigation-arrow-shadow	String	`var( --kendo-box-shadow-depth-3, none )`	`var(--kendo-box-shadow-depth-3, none)`
Description The box shadow of the ScrollView navigation arrows.
$kendo-scrollview-navigation-bg	Color	`transparent`	`transparent`
Description The background color of the ScrollView navigation.
$kendo-scrollview-navigation-focus-shadow	List	`0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))`	`0 0 0 1px var(--kendo-color-base-emphasis, #605e5c)`
Description The focus box shadow of the ScrollView navigation arrows.
$kendo-scrollview-navigation-arrow-hover-shadow	String	`var( --kendo-box-shadow-depth-4, none )`	`var(--kendo-box-shadow-depth-4, none)`
Description The hover box shadow of the ScrollView navigation arrows.
$kendo-scrollview-pager-light-bg	Color	`rgba( $kendo-color-white, .4 )`	`rgba(255, 255, 255, 0.4)`
Description The background color of the ScrollView pager in light mode.
$kendo-scrollview-pager-dark-bg	Color	`rgba( $kendo-color-black, .4 )`	`rgba(0, 0, 0, 0.4)`
Description The background color of the ScrollView pager in dark mode.
$kendo-scrollview-transition-duration	Number	`.3s`	`0.3s`
Description The duration of the ScrollView transition.
$kendo-scrollview-transition-timing-function	String	`ease-in-out`	`ease-in-out`
Description The timing function of the ScrollView transition.

Name	Type	Default value	Computed value
$kendo-searchbox-icon-color	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description Color of the searchbox icon.

Signature

Name	Type	Default value	Computed value
$kendo-signature-width	Number	`250px`	`250px`
Description The default width of the signature component.
$kendo-signature-height	Number	`84px`	`84px`
Description The default height of the signature component.
$kendo-signature-maximized-width	Number	`750px`	`750px`
Description The default width of the maximized signature component.
$kendo-signature-maximized-height	Number	`252px`	`252px`
Description The default height of the maximized signature component.
$kendo-signature-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal paddings of the signature component.
$kendo-signature-padding-y	String	`$kendo-signature-padding-x`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical paddings of the signature component.
$kendo-signature-disabled-opacity	Number	`.3`	`0.3`
Description The opacity of the disabled signature component.
$kendo-signature-line-width	Number	`1px`	`1px`
Description The bottom-border width of the row line of the signature component.
$kendo-signature-line-style	String	`dashed`	`dashed`
Description The border style of the row line of the signature component.
$kendo-signature-line-color	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( info ) 40%, transparent), rgba( k-get-theme-color( info, 100 ), .4 ))`	`color-mix(in srgb, var(--kendo-color-info, #0a7eff) 40%, transparent)`
Description The color of the row line of the signature component.
$kendo-signature-line-disabled-color	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)`
Description The color of the row line of the disabled signature component.
$kendo-signature-line-size	Calculation	`calc( 100% - 2 * #{$kendo-signature-padding-x} )`	`calc(100% - 2 * var(--kendo-spacing-1, 0.25rem))`
Description The width of the row line of the signature component.
$kendo-signature-line-bottom-offset	Number	`33%`	`33%`
Description The bottom offset of the row line of the signature component.
$kendo-signature-sizes	Map	`( sm: ( padding-x: $kendo-signature-sm-padding-x, padding-y: $kendo-signature-sm-padding-y, line-size: $kendo-signature-sm-line-size ), md: ( padding-x: $kendo-signature-md-padding-x, padding-y: $kendo-signature-md-padding-y, line-size: $kendo-signature-md-line-size ), lg: ( padding-x: $kendo-signature-lg-padding-x, padding-y: $kendo-signature-lg-padding-y, line-size: $kendo-signature-lg-line-size ) )`	`(sm: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-0\.5, 0.125rem), line-size: calc(100% - 2 * var(--kendo-spacing-1, 0.25rem))), md: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), line-size: calc(100% - 2 * var(--kendo-spacing-1, 0.25rem))), lg: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1\.5, 0.375rem), line-size: calc(100% - 2 * var(--kendo-spacing-1, 0.25rem))))`
Description The sizes map of the signature component.
$kendo-signature-actions-gap	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The gap between individual action items of the signature component
$kendo-signature-maximized-line-width	Number	`3px`	`3px`
Description The bottom-border width of the row line of the maximized signature component.
$kendo-signature-lg-min-height	Number	`110px`	`110px`
Description The min-height of the large size signature component.

Skeleton

Name	Type	Default value	Computed value
$kendo-skeleton-text-transform	String	`scale( 1, .6 )`	`scale(1, 0.6)`
Description The transform scale of the Skeleton text.
$kendo-skeleton-text-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the Skeleton text.
$kendo-skeleton-rect-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the rectangular Skeleton.
$kendo-skeleton-circle-border-radius	Number	`9999px`	`9999px`
Description The border radius of the circular Skeleton.
$kendo-skeleton-item-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 23%, transparent)`
Description The background color of the Skeleton item.
$kendo-skeleton-wave-bg	String	`if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-20 ))`	`var(--kendo-color-base, #ffffff)`
Description The background color of the Skeleton wave animation.

Slider

Name	Type	Default value	Computed value
$kendo-slider-size	Number	`200px`	`200px`
Description The default size of the Slider.
$kendo-slider-alt-size	Number	`26px`	`26px`
Description The default size of the Slider's track wrap.
$kendo-slider-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing of the Slider.
$kendo-slider-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Slider.
$kendo-slider-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the Slider.
$kendo-slider-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Slider.
$kendo-slider-text	String	`inherit`	`inherit`
Description The text color of the Slider.
$kendo-slider-track-size	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The size of the Slider track.
$kendo-slider-track-border-radius	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The border radius of the Slider track.
$kendo-slider-track-bg	String	`if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-60 ))`	`var(--kendo-color-base-emphasis, #605e5c)`
Description The background color of the Slider track.
$kendo-slider-track-border	String	`inherit`	`inherit`
Description The border color of the Slider track.
$kendo-slider-track-hover-bg	String	`if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-60 ))`	`var(--kendo-color-base-emphasis, #605e5c)`
Description The background color of the hovered Slider track.
$kendo-slider-track-hover-border	String	`inherit`	`inherit`
Description The border color of the hovered Slider track.
$kendo-slider-track-focus-bg	String	`if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-60 ))`	`var(--kendo-color-base-emphasis, #605e5c)`
Description The background color of the focused Slider track.
$kendo-slider-track-focus-border	String	`inherit`	`inherit`
Description The border color of the focused Slider track.
$kendo-slider-selection-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the Slider's track selection.
$kendo-slider-thumb-size	Number	`16px`	`16px`
Description The default size of the Slider thumb.
$kendo-slider-thumb-border-width	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The default border width of the Slider thumb.
$kendo-slider-thumb-border-radius	Number	`999em`	`999em`
Description The border radius of the Slider thumb.
$kendo-slider-thumb-active-scale	Null	`null`	`null`
Description The transition scale of the active Slider thumb.
$kendo-slider-thumb-active-size	Null	`null`	`null`
Description The size of the active Slider thumb.
$kendo-slider-thumb-bg	String	`var( --kendo-component-bg, transparent )`	`var(--kendo-component-bg, transparent)`
Description The background color of the Slider thumb.
$kendo-slider-thumb-text	String	`inherit`	`inherit`
Description The text color of the Slider thumb.
$kendo-slider-thumb-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the Slider thumb.
$kendo-slider-thumb-gradient	Color	`transparent`	`transparent`
Description The gradient of the Slider thumb.
$kendo-slider-thumb-hover-bg	String	`$kendo-slider-thumb-bg`	`var(--kendo-component-bg, transparent)`
Description The background color of the hovered Slider thumb.
$kendo-slider-thumb-hover-text	String	`inherit`	`inherit`
Description The text color of the hovered Slider thumb.
$kendo-slider-thumb-hover-border	String	`if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 ))`	`var(--kendo-color-primary-hover, #106ebe)`
Description The border color of the hovered Slider thumb.
$kendo-slider-thumb-hover-gradient	Color	`transparent`	`transparent`
Description The gradient of the hovered Slider thumb.
$kendo-slider-thumb-active-bg	String	`$kendo-slider-thumb-hover-bg`	`var(--kendo-component-bg, transparent)`
Description The background color of the active Slider thumb.
$kendo-slider-thumb-active-text	String	`inherit`	`inherit`
Description The text color of the active Slider thumb.
$kendo-slider-thumb-active-border	String	`if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-130 ))`	`var(--kendo-color-primary-active, #005a9e)`
Description The border color of the active Slider thumb.
$kendo-slider-thumb-active-gradient	Color	`transparent`	`transparent`
Description The gradient of the active Slider thumb.
$kendo-slider-thumb-focus-bg	String	`$kendo-slider-thumb-hover-bg`	`var(--kendo-component-bg, transparent)`
Description The background color of the focused Slider thumb.
$kendo-slider-thumb-focus-text	String	`inherit`	`inherit`
Description The text color of the focused Slider thumb.
$kendo-slider-thumb-focus-border	String	`$kendo-slider-thumb-active-border`	`var(--kendo-color-primary-active, #005a9e)`
Description The border color of the focused Slider thumb.
$kendo-slider-thumb-focus-gradient	Color	`transparent`	`transparent`
Description The gradient of the focused Slider thumb.
$kendo-slider-disabled-text	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), k-get-theme-color-var( neutral-130 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 70%, transparent)`
Description The text color of the disabled Slider.
$kendo-slider-track-disabled-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent)`
Description The background color of the disabled Slider track.
$kendo-slider-selection-disabled-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)`
Description The background color of the disabled Slider's track selection.
$kendo-slider-thumb-disabled-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)`
Description The background color of the disabled Slider thumb.
$kendo-slider-transition-speed	Number	`.3s`	`0.3s`
Description The transition speed of the Slider.
$kendo-slider-transition-function	String	`ease-out`	`ease-out`
Description The transition function of the Slider.
$kendo-slider-thumb-transition-speed	Number	`.4s`	`0.4s`
Description The transition speed of the Slider thumb.
$kendo-slider-thumb-transition-function	String	`cubic-bezier(.25, .8, .25, 1)`	`cubic-bezier(0.25, 0.8, 0.25, 1)`
Description The transition function of the Slider thumb.

Spacing

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

Split-button

Name	Type	Default value	Computed value
$kendo-split-button-sm-arrow-padding-y	String	`$kendo-button-sm-padding-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-y	String	`$kendo-button-md-padding-y`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-y	String	`$kendo-button-lg-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the large arrow Button.
$kendo-split-button-sm-arrow-padding-x	String	`$kendo-split-button-sm-arrow-padding-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-x	String	`$kendo-split-button-md-arrow-padding-y`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The horizontal padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-x	String	`$kendo-split-button-lg-arrow-padding-y`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the large arrow Button.
$kendo-split-button-arrow-delimiter-size	Calculation	`calc( #{$kendo-button-inner-calc-size} / 2 )`	`calc(calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2) / 2)`
Description The height of the SplitButton arrow delimiter.
$kendo-split-button-arrow-delimiter-line-size	Number	`1px`	`1px`
Description The width of the SplitButton arrow delimiter.
$kendo-split-button-arrow-delimiter-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)`
Description The background color of the SplitButton arrow delimiter.
$kendo-split-button-sizes	Map	`( sm: $kendo-split-button-sm-arrow-padding-y, md: $kendo-split-button-md-arrow-padding-y, lg: $kendo-split-button-lg-arrow-padding-y )`	`(sm: var(--kendo-spacing-1, 0.25rem), md: var(--kendo-spacing-1\.5, 0.375rem), lg: var(--kendo-spacing-2, 0.5rem))`
Description The sizes map for the SplitButton.

Splitter

Name	Type	Default value	Computed value
$kendo-splitter-border-width	Number	`1px`	`1px`
Description The width of the border around the Splitter.
$kendo-splitter-font-size	String	`var( --kendo-font-size, initial )`	`var(--kendo-font-size, initial)`
Description The font size of the Splitter.
$kendo-splitter-line-height	String	`var( --kendo-line-height, initial )`	`var(--kendo-line-height, initial)`
Description The line height of the Splitter.
$kendo-splitter-font-family	String	`var( --kendo-font-family, initial )`	`var(--kendo-font-family, initial)`
Description The font family of the Splitter.
$kendo-splitter-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Splitter.
$kendo-splitter-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Splitter.
$kendo-splitter-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the Splitter.
$kendo-splitter-splitbar-size	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The size of the Splitter split bar.
$kendo-splitter-drag-handle-length	String	`k-spacing(5)`	`var(--kendo-spacing-5, 1.25rem)`
Description The length of the Splitter drag handle.
$kendo-splitter-drag-handle-thickness	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The thickness of the Splitter drag handle.
$kendo-splitter-drag-icon-margin	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The margin of the Splitter drag handle icon.
$kendo-splitter-collapse-icon-padding-x	Null	`null`	`null`
Description The horizontal padding of the collapse icon in the Splitter.
$kendo-splitter-collapse-icon-padding-y	String	`k-spacing(.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The vertical padding of the collapse icon in the Splitter.
$kendo-splitbar-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the Splitter split bar.
$kendo-splitbar-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Splitter split bar.
$kendo-splitbar-hover-bg	String	`if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))`	`var(--kendo-color-base-hover, #f3f2f1)`
Description The hover background color of the Splitter split bar.
$kendo-splitbar-hover-text	String	`$kendo-splitbar-text`	`var(--kendo-component-text, initial)`
Description The hover text color of the Splitter split bar.
$kendo-splitbar-selected-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The selected background color of the Splitter split bar.
$kendo-splitbar-selected-text	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description The selected text color of the Splitter split bar.
$kendo-splitter-splitbar-static-size	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The size of the Splitter static split bar.

Spreadsheet

Name	Type	Default value	Computed value
$kendo-spreadsheet-border-width	Number	`1px`	`1px`
Description The width of the border around the Spreadsheet.
$kendo-spreadsheet-font-family	String	`var( --kendo-font-family, initial )`	`var(--kendo-font-family, initial)`
Description The font family of the Spreadsheet.
$kendo-spreadsheet-font-size	String	`var( --kendo-font-size, initial )`	`var(--kendo-font-size, initial)`
Description The font size of the Spreadsheet.
$kendo-spreadsheet-line-height	String	`var( --kendo-line-height, initial )`	`var(--kendo-line-height, initial)`
Description The line height of the Spreadsheet.
$kendo-spreadsheet-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Spreadsheet.
$kendo-spreadsheet-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Spreadsheet.
$kendo-spreadsheet-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the Spreadsheet.
$kendo-spreadsheet-primary-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The primary border color of the Spreadsheet.
$kendo-spreadsheet-primary-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The primary background color of the Spreadsheet.
$kendo-spreadsheet-header-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the Spreadsheet header.
$kendo-spreadsheet-header-text	String	`$kendo-table-header-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the Spreadsheet header.
$kendo-spreadsheet-header-border	String	`$kendo-table-header-border`	`var(--kendo-component-border, initial)`
Description The border color of the Spreadsheet header.
$kendo-spreadsheet-table-header-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the Spreadsheet table headers.
$kendo-spreadsheet-table-header-text	String	`$kendo-spreadsheet-header-text`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the Spreadsheet table headers.
$kendo-spreadsheet-table-header-border	String	`$kendo-spreadsheet-header-border`	`var(--kendo-component-border, initial)`
Description The border color of the Spreadsheet table headers.
$kendo-spreadsheet-selected-text	String	`if($kendo-enable-color-system, k-color( primary-on-subtle ), k-get-theme-color-var( primary-160 ))`	`var(--kendo-color-primary-on-subtle, #001c30)`
Description The text color of the selected Spreadsheet.
$kendo-spreadsheet-selected-bg	String	`if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-30 ))`	`var(--kendo-color-primary-subtle-active, #abd1ef)`
Description The background color of the selected Spreadsheet.
$kendo-spreadsheet-selected-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the selected Spreadsheet.
$kendo-spreadsheet-popup-menu-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the Spreadsheet popup Menu.
$kendo-spreadsheet-popup-menu-padding-y	String	`$kendo-spreadsheet-popup-menu-padding-x`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the Spreadsheet popup Menu.
$kendo-spreadsheet-action-bar-border-width	Number	`1px`	`1px`
Description The border width of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-font-size	String	`$kendo-spreadsheet-font-size`	`var(--kendo-font-size, initial)`
Description The font size of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-font-family	List	`Arial, Verdana, sans-serif`	`Arial, Verdana, sans-serif`
Description The font family of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacings of the Spreadsheet action bar.
$kendo-spreadsheet-formula-bar-gap	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The gap of the Spreadsheet formula bar.
$kendo-spreadsheet-formula-input-padding-x	String	`var( --kendo-input-md-padding-x, #{$kendo-input-md-padding-x} )`	`var(--kendo-input-md-padding-x, var(--kendo-spacing-2, 0.5rem))`
Description The horizontal padding of the Spreadsheet formula input.
$kendo-spreadsheet-formula-input-padding-y	String	`var( --kendo-input-md-padding-y, #{$kendo-input-md-padding-y} )`	`var(--kendo-input-md-padding-y, var(--kendo-spacing-1\.5, 0.375rem))`
Description The vertical padding of the Spreadsheet formula input.
$kendo-spreadsheet-formula-input-line-height	String	`var( --kendo-input-md-line-height, #{$kendo-input-md-line-height} )`	`var(--kendo-input-md-line-height, var(--kendo-line-height, normal))`
Description The line height of the Spreadsheet formula input.
$kendo-spreadsheet-view-font-family	List	`Arial, Verdana, sans-serif`	`Arial, Verdana, sans-serif`
Description The font family of the Spreadsheet view.
$kendo-spreadsheet-view-font-size	String	`$kendo-spreadsheet-font-size`	`var(--kendo-font-size, initial)`
Description The font size of the Spreadsheet view.
$kendo-spreadsheet-selection-bg	Color	`transparent`	`transparent`
Description The background color of the Spreadsheet selection.
$kendo-spreadsheet-selection-text	Null	`null`	`null`
Description The text color of the Spreadsheet selection.
$kendo-spreadsheet-selection-border	String	`$kendo-spreadsheet-primary-border`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the Spreadsheet selection.
$kendo-spreadsheet-selection-shadow	String	`none`	`none`
Description The shadow of the Spreadsheet selection.
$kendo-spreadsheet-single-selection-bg	String	`$kendo-spreadsheet-selected-border`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the Spreadsheet single selection.
$kendo-spreadsheet-single-selection-text	Null	`null`	`null`
Description The text color of the Spreadsheet single selection.
$kendo-spreadsheet-single-selection-border	String	`$kendo-spreadsheet-border`	`var(--kendo-component-border, initial)`
Description The border color of the Spreadsheet single selection.
$kendo-spreadsheet-partial-selection-bg	String	`color-mix(in srgb, $kendo-spreadsheet-selected-bg 75%, transparent)`	`color-mix(in srgb, var(--kendo-color-primary-subtle-active, #abd1ef) 75%, transparent)`
Description The background color of the Spreadsheet partial selection.
$kendo-spreadsheet-active-cell-bg	String	`$kendo-spreadsheet-bg`	`var(--kendo-component-bg, initial)`
Description The background color of the Spreadsheet active cell.
$kendo-spreadsheet-active-cell-shadow	List	`inset 0 0 0 1px $kendo-spreadsheet-selected-bg`	`inset 0 0 0 1px var(--kendo-color-primary-subtle-active, #abd1ef)`
Description The shadow of the Spreadsheet active cell.
$kendo-spreadsheet-auto-fill-bg	String	`color-mix(in srgb, $kendo-spreadsheet-selected-bg 75%, transparent)`	`color-mix(in srgb, var(--kendo-color-primary-subtle-active, #abd1ef) 75%, transparent)`
Description The background color of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-text	Null	`null`	`null`
Description The text color of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-border	String	`$kendo-spreadsheet-selected-bg`	`var(--kendo-color-primary-subtle-active, #abd1ef)`
Description The border color of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-shadow	List	`inset 0 0 0 1px $kendo-spreadsheet-selected-bg`	`inset 0 0 0 1px var(--kendo-color-primary-subtle-active, #abd1ef)`
Description The shadow of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-punch-bg	String	`color-mix(in srgb, $kendo-spreadsheet-bg 50%, transparent)`	`color-mix(in srgb, var(--kendo-component-bg, initial) 50%, transparent)`
Description The background color of the Spreadsheet auto fill punch.
$kendo-spreadsheet-cell-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the Spreadsheet cell.
$kendo-spreadsheet-cell-padding-x	String	`$kendo-spreadsheet-cell-padding-y`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the Spreadsheet cell.
$kendo-spreadsheet-cell-editor-line-height	String	`var( --kendo-spreadsheet-line-height, $kendo-spreadsheet-line-height )`	`var(--kendo-spreadsheet-line-height, var(--kendo-line-height, initial))`
Description The line height of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical padding of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-bg	String	`$kendo-spreadsheet-bg`	`var(--kendo-component-bg, initial)`
Description The background color of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-text	String	`$kendo-spreadsheet-text`	`var(--kendo-component-text, initial)`
Description The text color of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-border	Null	`null`	`null`
Description The border color of the Spreadsheet cell editor.
$kendo-spreadsheet-resize-handle-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the Spreadsheet resize handle.
$kendo-spreadsheet-cell-comment-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the Spreadsheet cell comment indicator.
$kendo-spreadsheet-cell-dirty-border	String	`if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-100 ))`	`var(--kendo-color-error, #c2666b)`
Description The border color of the Spreadsheet cell dirty indicator.
$kendo-spreadsheet-sheets-bar-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Spreadsheet sheets bar.
$kendo-spreadsheet-sheets-bar-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Spreadsheet sheets bar.
$kendo-spreadsheet-sheets-bar-border-width	Number	`1px`	`1px`
Description The border width of the Spreadsheet sheets bar.
$kendo-spreadsheet-sheets-remove-inline-start	Calculation	`calc( #{k-spacing(2)} * -1 )`	`calc(var(--kendo-spacing-2, 0.5rem) * -1)`
Description The horizontal margin of the Spreadsheet sheets remove.
$kendo-spreadsheet-sheets-remove-inline-end	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical margin of the Spreadsheet sheets remove.
$kendo-filter-menu-padding-left	Calculation	`calc( var( --kendo-icon-size, 1rem ) + 2 * var( --kendo-padding-y, #{$kendo-padding-md-y} ) )`	`calc(var(--kendo-icon-size, 1rem) + 2 * var(--kendo-padding-y, var(--kendo-spacing-1, 0.25rem)))`
Description The left padding of the Spreadsheet sheets menu.
$kendo-spreadsheet-filter-button-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the Spreadsheet filter Button.
$kendo-spreadsheet-filter-button-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background color of the Spreadsheet filter Button.
$kendo-spreadsheet-filter-button-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))`	`var(--kendo-color-border, #8a8886)`
Description The border color of the Spreadsheet filter Button.
$kendo-spreadsheet-filter-button-hover-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the hovered Spreadsheet filter Button.
$kendo-spreadsheet-filter-button-hover-bg	String	`if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))`	`var(--kendo-color-base-hover, #f3f2f1)`
Description The background color of the hovered Spreadsheet filter Button.
$kendo-spreadsheet-filter-button-hover-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))`	`var(--kendo-color-border, #8a8886)`
Description The border color of the hovered Spreadsheet filter Button.
$kendo-spreadsheet-filter-button-active-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the active Spreadsheet filter Button.
$kendo-spreadsheet-filter-button-active-bg	String	`f($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 ))`	`f(true, var(--kendo-color-base-active, #edebe9), var(--kendo-neutral-30, inherit))`
Description The background color of the active Spreadsheet filter Button.
$kendo-spreadsheet-filter-button-active-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))`	`var(--kendo-color-border, #8a8886)`
Description The border color of the active Spreadsheet filter Button.
$kendo-spreadsheet-filter-menu-icon-color	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The color of the Spreadsheet Menu icon.
$kendo-spreadsheet-error-border	String	`if($kendo-enable-color-system, k-color( error-on-subtle ), k-get-theme-color-var( error-190 ))`	`var(--kendo-color-error-on-subtle, #420f12)`
Description The border color of the Spreadsheet error.
$kendo-spreadsheet-insert-image-dialog-border-style	String	`dashed`	`dashed`
Description The border style of the Spreadsheet image Dialog.
$kendo-spreadsheet-insert-image-dialog-border-width	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The border width of the Spreadsheet image Dialog.
$kendo-spreadsheet-insert-image-dialog-text-margin-bottom	String	`k-spacing(7.5)`	`var(--kendo-spacing-7\.5, 1.875rem)`
Description The bottom margin of the Spreadsheet image Dialog.
$kendo-spreadsheet-insert-image-dialog-preview-width	Number	`355px`	`355px`
Description The width of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-height	Number	`230px`	`230px`
Description The height of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-img	String	`"image-fluent.png"`	`"image-fluent.png"`
Description The image of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-border-radius	String	`var( --kendo-border-radius-md, initial )`	`var(--kendo-border-radius-md, initial)`
Description The border radius of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow	List	`inset 0 0 0 2000px rgba(0, 0, 0, .5)`	`inset 0 0 0 2000px rgba(0, 0, 0, 0.5)`
Description The shadow of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius	String	`var( --kendo-border-radius-md, initial )`	`var(--kendo-border-radius-md, initial)`
Description The border radius of the Spreadsheet image Dialog preview overlay.
$kendo-spreadsheet-insert-image-dialog-overlay-hover-text	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The text color of the hovered Spreadsheet image Dialog preview.
$kendo-spreadsheet-drawing-handle-width	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The width of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-height	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The height of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-style	String	`solid`	`solid`
Description The border style of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-width	Number	`1px`	`1px`
Description The border width of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-color	String	`var( --kendo-selected-bg, initial )`	`var(--kendo-selected-bg, initial)`
Description The border color of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-outline-color	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The outline color of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-radius	String	`var( --kendo-border-radius-lg, initial )`	`var(--kendo-border-radius-lg, initial)`
Description The border radius of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-outline-style	String	`solid`	`solid`
Description The outline style of the Spreadsheet drawing.
$kendo-spreadsheet-drawing-outline-width	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The outline width of the Spreadsheet drawing.
$kendo-spreadsheet-drawing-anchor-bg	String	`$kendo-spreadsheet-selected-bg`	`var(--kendo-color-primary-subtle-active, #abd1ef)`
Description The background color of the Spreadsheet drawing anchor.
$kendo-spreadsheet-dropzone-spacing-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical spacing of the Spreadsheet DropZone.
$kendo-spreadsheet-insert-image-dialog-img	String	url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcwAAAGQCAYAAAAjl1AKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphMGVmMzZmZi04YmI1LTRlN2YtOTcwMS04OTU5ZTg1N2ZhY2MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDNDOTBDNUQ2OUJGMTFFOTkwMzY4RTI3NjZBQTdENkMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDNDOTBDNUM2OUJGMTFFOTkwMzY4RTI3NjZBQTdENkMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpjMmZmZjM0Mi05NjEyLTQwM2YtYWZhYS01MTE1ZjQ2NThmMWMiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphYjlhMmUwMy1kNmIwLTY3NGMtODc4ZS0yMjUzMjdkNDI5OTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz68UHLbAAAgpElEQVR42uzd2ZNc9dnY8TOL9gU0IAkjgwpkI8QOQmI1FS+FHW9VLt/7wpWb900qKV+lTL3vTZzElSvnJilfvM4fkQunfEOw2LUgiUUsNhiMAFsjtIzQrpmJnhOdoaent+np5SyfT1XXiJ4R0hz19Lef31l6ZHZ2NgEAWhu1CQBAMAFAMAFAMAFAMAFAMAFAMAFAMAEAwQQAwQQAwQQAwQQAwQQAwQQAwQQAMuP9/gNGRkZsZQAGop/v8WzCBIA8TJj9GFr9swGUYyAUTHEEoLvn+NxGdLwgG1BEAaoxYY7kNZ55C+bIEu4DoFixHGkT0JE8RTMvwWwXxRHBBKhMQGcbPN8PPZx5COZIh6EcEU+AQgex2fRYH8tm4RxqNIcdzGbxa/dROAGKOT3WhnCk5nOzTX5PbqI5zGB2Estmv24XTwDyO2HOtohi/f25ieawgtkqlvW/HukgnqIJULxY1v96tsV0OvRo5mkfZn0YR5tEs920CUB+o9kokvW3mQ6iWYkJc6RNLOtvo7/85S/X/eIXv/jntWvX/mjZsmVfGRsbG3eNWoCClvOq6enpy1f9/Ysvvvjfv/nNb/7zr3/96zM1oRxN2u/THHhAR/p5odr0D1gYtvpg1kdztObj6N///vf/NDEx8e/Gx8eXeZgBlM+VK1cunzhx4n9u3rz5n65Fc6Zm0my0dFs/tdbGuG9/z2FefL1ROOdi+ZOf/GTl1NTU/920adMvxBKgvOI5/upz/X+I5/x47q8bnEaSnByvMugJs1EkRxoEcyw23Lp16x72UAKojjNnzuxfv379N6/+crrBlDnbbsos44TZ7Mo+aTSPHTv2X8USoHriuT8a0GS6HOqUOewl2QW3OMBnYmLiHz1sAKopGhAtSFqfJTH4aA1pSbbRUmx6m5yc/O833njjv/GQAaiu48eP/6+NGzf+++TLg4AaLc0mSQWWZJuN1iNr1qz5vocKQLVdbcG/TnJ2cZpBBrPV1Xnmps1ly5Zt8lABqLarLdiYNL9YTbOmlCaY9fFsdHm8kbgogYcKQLVda0HTVpR9wuwonq7gA0CD418qtSTbzdQJQIW7macujOZgYwBA7psxmrONIKAA5LIN42XaIFeuXEmmpqaSixcvJjMzMx5qAMOYxEZHkxUrViTr16+P68T2shGVe3uvvohYTk5OCiXAkMXz8Pnz59PhZePGjb2IZj5eCJTlHygmS7EEyFc447m5NJNzWb6ReCUDQL5cuHBBMPP4SgaAfOn39coFEwBypjQH/bhCEAAmTAAQTAAQTAAQTAAQTABAMAFAMAFAMAFAMAFAMAFAMAFAMAFAMAEAwQQAwQQAwQQAwQSAAhkvyzcyMjLiXxMAEyYACCYACCYACCYACCYAIJgAIJgAIJgAIJgAIJgAIJgAIJgAIJgAgGACwBJ5ey8AMGECgGACgGACgGACgGACgGACgGACAIIJAIIJAIIJAIIJAIIJAKXg4usAYMIEAMEEAMEEAMEEAMEEAMEEAMEEAAQTAAQTAAQTAAQTAAQTAErBxdcBwIQJAIIJAAMzbhMA9cbGxpLx8fH0Fr8eHR1NP8auj+wWZmdn527T09PJzMxM+vHKlSvpLX4NggmUKpDLly9Pb8uWLUsD2YnaeMb/o14E9PLly8mlS5fSm4AimEDhRBRXrlyZ3mKSrHXmzJnk5MmTyalTp5IvvvgivV28eDG9RfQigukTyLUpdMWKFWls165dm96uv/76ZMOGDcn69evTz8UtxNR54cKF9BYxBcEEcivCtmrVqrmIZYGcnJxMPv300+Rvf/tbGsZMLLc2ky29nj9/Pv3vY8eOzft8/Bk33XRTsmXLlmTTpk3JunXr5qIaf0b8vpg8oQhGWv0w9OQP+PJ0j5Gaj9lttOYW6zljV/8+J7v5c+p/UIFkQbzWrFkzb5r88MMPk7/85S9pKOt18tzQ6msafe7mm29Otm3bltx2223zonv27Nl5kaZc4sVSl/3YcPXD9LXbTM1ttuaW1HxM+tk0wYSSi32SMdHFx5BNku++++7c0mqvItlpROPvsmPHjrnJM8TfJZZ+6/9OCKZgCib0VeyjjFDGPsrw+eefpxPlO++80/NpsptpM3PXXXelE+eNN96Y/nfs34xw2scpmIIpmNB3sfwa+wuzo13/9Kc/JXv37h1oJFt9vtH9jz32WLJ9+/b01xHL2K9qmVYwBVMwoW8/bxHKbKr8+OOPkwMHDqT7CPMwTbb7XEzEu3fvTrZu3To3bUY4+/08hWAKJlRInAcZp3HE/sE49ePgwYPpfsphT5OLnTRD7N/ctWtX+j3FPs2pqSnncArm0IPptBIogYjkddddly7BxkE9L7/8cseT2bCmyVb3HzlyJDl69Gjy1FNPpU+2cU7n6dOnHRDEUJVmwownCaiiOK8yJsv4WfvrX/+avPTSS+mpGkWZJlt9LibMiGYcFBRfE5Om8zaLZ+PGjaWYMF18HQosDu7JYvn+++8ne/bsaRnL7Lqv3Xy+9rqx3Xyu099Te398L88++2zy3nvvpd9jduUgGAZLslDgyTIO8ImQ/PnPf05eeeWVQk+Tre6PFwLxMY6ije85fm3SZNBMmFDEV7rj43OTZbNYFm2abHf/888/nx7ElE2a9de/BcEE5v/Qjo6mB/hky7D1sew2hJ3+3l4GdLH3x6SZLc9mBzmBYAILZNNVhOKjjz5Kj4btVQjzNE22uv+5555LPvjgg3kvHGAQxsv0RAJlFxdPj1NI4jJ3EctBnxLS632Tnd7fKJqxLTZv3pxe7CAupQcmTCCVvS1XiGXYZuckLnVizNM02ey++N4jmnExg7iqkSNnEUwgFSsoMUmF2Id34sSJjqPWj8/18/5O4xlvbp3tv41p0yoTggmkQYh9dnFt2FdffbWjqbCbyXCQU2Mn02S7qL7xxhvp+3nGtoltBIIJFRanT2QXU9+3b1/HU+FiJr28TpOdRPXFF19MP8Y2cqoJggkVVrsUGwe3DOKUkF6dKtLLabLZ/XHN3LfeemvetgLBhIqJg1liaoqjYltdnGBQ50cOI4jtvjZ+/cc//jF9x6LYVg4AQjChgrKjYuO8w35Nk0sJaK+j2s3XZuJNsmu3GQgmVEScRhITU0xOb7/9du5PCRnENNnqaw8dOpR89tln6TaLbQeCCRWRHejzySef5PpydYOcJuuXYuvvi7c3q912IJhQ9h/M0dH0ij7hnXfeyd00OYggtvvaRvcdPnx4bjp3nVl6zaXxIIfiwJV4TMf1YrO3scr75ery8LWxreIdTeJtwGLKPH/+vAcTJkwoezBDHOxjmmy/FFt7fwSzdhuCCRPK+ip2dDQ9cGVqaiqdMAc5NRZpmmx2X2yzuGze9ddfn27LmZkZDypMmFBG2RGecXTsoKfGok2TzX7/p59+Om9bgmBCCWUH+xw9ejT3R7q2+38sNZ7d/v4PP/xw3raEXrAkCzkNZjYl1YahmaUudy72/n4spfby98dF6gUTwYQSGxsbS4+Ojf2XFy9e7Hv4ihrEdvfF0bHZfszYpvG+mSCYULJghtOnTw88fGWL5+TkZBrMOIBKMOkF+zAhh8GM6ag+BHm++Hke92MeP3583jYFEyaU6RXstavTxIRpmlza12bb0BV/EMw6rvRDKX4gr70BcuzDbDRFDTuIRYpnbMNswvT8gGBCyWRP7OfOnRPEJX5ttg3FEsGEEgfzwoULhb/izrDjmV1HVjARTChxMOsv5yaei//aK1euCCaCCWUPZrzrhiAu/Z1LBBPBhJJbygE/4tn6qkggmFCSUMZEFJd0u3z5cqGClLe/a3bhdfFEMKHEwYxTIbIlxbIEbdDnlGYXLBBMBBNKGsxsOsqO8ixj/AYRz5UrVwomggllD+bq1asXXB4vD0Ea9u9fzP8jtqFg0kuuGQU5kl0kfP369fNiMKjrr/bjWrG9vNbsYq6Zm21DF17HhFnHoeOUQXb+5XXXXVf5pdil/j9iG2bb1PMDggklnTA3bNhQyCAO+mtb3b9x48Z5L0JAMKGEwYz3cazaOZK9jmcWzOyKPyCYUCIxDcWTfiwnxlGecU3ZPMQv79Nk/f2rVq1KJiYm0vtNmPSKg34gZ+KCBWHLli2FPDCn26/t9v/R6P9z6623ztuWIJhQQtkSYvak30lMlhq0QQSxl0fAtro/brfddtu8bQm9YEkWcjphfuUrX6nc1Xl6df9Xv/pVEyYmTCi72OcWB//Efsxt27a1nMSKuhTbr/tDTJc33HBDug3tv0QwoeSy68h+/etfL/xS7CDvj9s999wzbxtCr1iShZwGM470jAkzrivbi/fHHPTyar+XYht9LrbV3XffLZiYMKEqYikx2/9233335XqaHNaU2ehzDz/8cPoxtp3lWASTwjt+/LiN0IGLFy+mH7du3drz+PU6fIPYN9ns/trP3X777fO2HfSSa8ky8Fg+//zzyZNPPpls2rTJBmkhTomIA1fiaNkHHnggOXjw4IJINApHs6AM6msHcX+jz+3evTu55ZZb0m0W285zAiZMCh3LPXv2pO/zGNE8duyYjdJGdqWfOPin22kyr0fALnaKbfe5u+66a942A8Gk8LHMntREs73YFxcT00033ZR885vfzEUQlxq9pQS02ee+973vJTfffHO6rZx7iWBSmljWTk+i2d65c+fSj/fee2+ybt26wl6urpcBrf1cvO/lQw89NG9bgWBSyFhGFOtjKZqdi6kpO0XiqaeeGug02cvL1fXi9zT6fU8//XT6MbaRN4tGMCl0LNu96s+iOTk5aaM1ES84IhJf+9rXkm9961uluMBAN9Nk/ed37dqVbN++Pb2/2YsyEExKEcvaaMayrWgmTYORbcs4LzN7r8eiXK6uV9NkrXiT7XjxUPuCAgSTQsYynsTi0P5Ob3HunEmzuTiYJTu/8Dvf+U4yPj5eqWmy9vPxvf/4xz9OP8ZSrKv6IJgUOpbdsDzbfvtkR81+97vfXXTI8nKBgW4/l30+YhnvSBLbwlIsgkkhY/nCCy8s+QlMNJuLYJw9ezb9eMcdd8xFMy9TZi8/1+zPi1ju2LFj3raAQRjp94Ot5mobIzUfs9tozW0sblf/Pie7+XNOnz7tX3OIIm69iGWtlStXuiJQE2NjY8maNWvSn6833ngj+cMf/tAwNs0i1Iv7h/G5H/7wh+lVj7JYOiq2GOKt6rrsx4arH6av3WZqbrM1t6TmY19fQJkwyWUss0kz/r9OOVkoQhEHAcWTQ5yfWTtplmmarPWDH/xgLpbxvYslgyaYLEm2DBtxW8wBPos5EEg0G4vrpWZHh0Y042o3ebtcXSch7OTzP/rRj5IHH3xw7vSR+N5BMClULGNfY7+v3SmazcWRs9mkGW+cnB05mofL1S31SNjsaNif/vSnyf333z83Wbr0HcNiHya5jmWtFStW2KfZRO0+zU8++ST5/e9/n5w8eXIuPq2mt8Xcv5TPLfbzExMT6QuAeAcS+yyLrSz7MAWTrmLZj32WncgOBMpO3OdLo6OjyerVq9N4Rliee+65ZP/+/T0J3lJC2M3vjSv4fPvb306WLVs2t7/WG0ILpmAKpliKZk9/3mL7LF++PP3v9957L3n22WfTn488T5O1T6xxbdg777wz/e+4IEGsYjh1RDAFUzALGcs8vN9gtjwrmo3FZLZq1aq5n7948+n6U0+GMU22+prvf//7yc6dO+e+Jl6U2V8pmIIpmGIpmgOfNj/99NPk7bffTvbu3ZuLaTLzyCOPJHfffXeyZcsWU6VgCqZgFtvnn38+9GVY0exeHGka4Yx9m+Ho0aPJBx98kOzbty+NU7+WZFt9Tfy77d69O9m2bVt6UE+IfZURSqeMCKZg9jmYU1NTHpV9nCzzfL3OiMETTzzh6NkOwhmhysIZ3n333eTNN99MPw5imox9k3H6S1zaLhOhjFOHhLK84k2+BVMwxVI0CxnO2McZt9pVhI8//jh5//33k48++mjBv3m302TsR926dWv6Pp633nprcsMNN8x9LvZPxk0oBVMwBbPwsXzxxRcL9U4QlmcX/7OZhbN26swCGheKiNupU6fSW5zakV1lJ3s7rez3xwuWOA/0+uuvT2/xb7B58+Z5gcymySyU9lEKpmAKpljmYNIUzcWJczhj8oxwxsean9slieeXCGyEMj46l1IwBVMwSyMmi4hlTBNFJZq9CWjEMz5mt+z6vrU/19nzR3YpuwhidotICiSCKZiljmUZ3pA3lmdFEwSzpy8k/VNStliGOOoyvh9vQg0IJmLZQTRfeukl0QQEE7FsJ06EF01AMFlyLCMm/Xrz57zcskkzjv4FEEy6imVZJ8t62T5N0QS6VZqjZM+cOeNfcxGxLPMybCtxysnjjz/u6FkYoHXr1nXbD0fJIpbDYp8mYMI0YXYcyzy9RdewxHmaJk0wYZowaRjL7AAfnHICCCYtYlnVZdhW0Xz55ZdFExBMxLKdmLgjmo6eBdqxD7PETpw4IZYdyvZp3njjjTYG9Jh9mIhlibi4AVCZCfOLL77wr3mNA3yWNmk+9thjjp6FHlq7dq0JE7Es46TpQCBAMCsQy3iyF0vRZPg8fgSTnMfSPsveRfOVV17xpEdXYl/4888/nxw7dszGKBH7ME2WtJDt03T0LIuJ5Z49e9IXr3Ht4m984xvJpk2bKr1N7MMkF+JoWLHs76TpPE26iWWIn0uTZnkIplgimvQhlhnRFExyEkv7LEWTfMQyotjszdjj8fPCCy+IZsHZh2myZBFin+ajjz5qnyYLYtnJi9fYp/nkk09Wbp9mWfZhliaYZ8+ercQDzwE++YmmixsQR1F3GsvaaFbtQKA1a9aUIpiWZAsWyzjVQSyHyykn1May2TJss1s8fuzTLCbBLFgs7bMUTfIVy24fP6JZPJZkC8A+y/yyT7OasYwDeHrx4rUq+zQtySKWzE2ajp4Vy27Ez7WjZ4tDMMUS0WQIsRTN4rEkm+NYOsCnWGJ59pFHHrE8W0K151n2SyzPPvHEE6VcnrUki1iyYNJ89dVXTZpi2fWk+eKLL5o0c0wwxRLRZMixFE3BRCxFk0LHMvYtDvrnUTTzqzT7MM+dO1fof4g4zzKeZMWyPOzTLK5+HeCzGGU65WT16tXd9sM+TMTSpEneY7nYK/j0+haPH5NmvgjmkMUyrFiWO5p79+4VzQLGMg8sz+aLJVmxZABieXb37t2WZ3Ms22eZx8tPFv2UE0uyiCUmTbE0aVaIYIolA4zmvn37RFMsRVMwEUs6edITzfzFctgH+DgQqBjswxxwLGNZTizJ9mnecMMNNsYQYxnxKeJb5mX7NIvyJub2YSKWdC3bpxmnFDF4sd0jlkWZLJtNmt6P1YRZugnz5MmT6TJsPMih1vLly02aQ4plGd6MPSbNxx9/PPeTZlkmzNIEM68PfpMl7cTy7K5du5xyMgBFXoZtF808n3KyatWqUgTTkqxYMmSOnhXLpYjnl5deesny7ACYMPscS8uwdMrybP9jWeYXr7FSkdcDgUyYiCU9denSJQcC9SmWMYGVfaUnnm9Mmv0lmH2IZSyviSXdRjMeP6LZ21iWbRm2Gcuz/WVJVizJoViejQOBLM+KZTfydvRsWZZkBVMsEc3SqT3Psqpin2ZeomkfJnPiPMv9+/eLJT0Vy7PxuLI8K5bdiOejl19+2fKsCTM/E2bE0mRJvyfNhx9+2KQpll2J5dnHHntsqJOmJVnBFEsGGs1Ynp2YmLAxWsSyCkfDdiNbnh3WxTEsyVacWDJI2fJs7CtHLBcrO+XExTFMmKlB/qDEk5Z9lgxr0rQ8O19VzrPshWEtz8afa8KsILEkD5OmA4HEstvBwoFAJsyB/MBYhiUvYp/Uzp07Kz1pWoZd2uNnkJOmCbNixJI8icfhgQMHKjtpiuXSHz8mTRNm32JpGZY8in2aVZs0xbK3k9+jjz7a90nThFmhyVIsyavYpxmTZlWOno1YxmQklr0R2/GVV15x9KwJUyyp1qQZR8+W+TxNseyfbJ9mv87TLMuEKZgtYhmv3MWSIkUzlmfLGE2xLHY0LcmWmFhSRGVdnhXLwcgOBLI8K5hiiWgWUHwfsY9NLAcXTfs0W0y8lmS/dOrUqXSfZTzpQJHF8uxDDz1U6OXZiKXJcjhieTaOnu3V8qwl2ZKJWMYrc7GkLJPmwYMHCztpiqVJM48EsyaWlmEp25NeEaMplqKZV6VZku02drHP8rXXXhNLSqtIy7NxgE88SQ/r/W1ZKLu4wVKWZ2OJt8t+OK0kL8EUS6oinrAefPDBXEczi6XJMp+Pn6VEsyzBrOySrFhSJXlfnhXL/D9+LM9WdMKMfZZiSRXF8mzeJs3s1BHLsOWdNC3JFjSYYoknvRXJAw88kItoOs+ymI+fRx55ZFHRFMwCBjOLpVNHMGkuH3o0xbI60bQPs2AilrEPRyzh/5+neejQoXRf/rBi+eqrr4plQcWAEv9+VdunWYlgZrG0DAvDj2YWS/ssix/NvXv3VupNzEu/JCuW0Fq2T3PDhg0mS7p6/MTybKs3MbcPswDBPH36tH2W0IFsn2Y/oxmTrH2W1YymYOY8mBFLkyXkI5oRS5Nl+aO5e/fuhtF00E/ORJizm1jC4tXu06z9eVrqTSyroXafZv1joDSdKcuEmS27OhoW8jNp2mdZ3Umz9pSTeEyVYcIsVTAjlvEK2WQJw49mxDImDrGsZjR37do1F03BzFkwjx07lsbSZAm9sWzZsq6jKZbURrMswSzNPkyxhN66fPlycvjw4UWfpymWhFjp27dvX6nO0yxNMMUS+vNztZhoiiX10YzHQ1mMl+UbKdORWJDHSfP+++9vuTwbUY2JIp4k/TxSxmFm1D8n0Gk0m02acb/JkrITTKDjaL7++uvp0ehiiWACtBDLa0eOHEmmp6fFksqxDxPoWJxqct999yVjY2NzsbTPEhMmQF0sd+7cmaxdu3beAT4gmADXxInnEct169bNxdIyLFVjSRZoO1k+9NBDaSzjPEuxRDABWsQyJsv9+/fbZ0llWZIFOoqlyRITZkl4xQu9j2XtAT5iiWACtImlZViwJAu0iGW2zxKwJAtkTwbj4wtiaRkWShhMYGmT5YMPPpjGMq4V62hYWMiSLIjlvFi6gg+UfML0Shi6eAIYH284WQIlDiaw+MnygQcesAwLJkygVSzvv//+BVfwAUyYQIPJUixBMIEOYnngwIH0TaGt0ECFgukHHtrHMpZha2NpsoTOOa0ExBKo0oQJtI9lHA372muvWYaFKgfTDz80+AEfH58XS5MlCCbQYLK877775k4dMVnC0tiHCRWJpckSTJgpr5rh2g/1+LhYgmACnUyW2dGwBw8eFEsQTKCTWFp9AcGcx5MClf5BvrYMa7KE/nHQD4glUKUJE6oolmHvvffeufMsDx065NQRMGECrWJpsgQTZke8oqZSP7jj42IJggm0myzvueeeebG0DAuCacKEusmyUSwBwQRqYhnLsGvWrJl3gA8wGA76gYLG0j5LMGECNbJ9llksDx8+bJ8lCGb3PHlQ1smyPpYmSxgOS7JQgFiePn1aLMGECdSLZdi777577mhYy7AgmD3jiYQyTZb1sTRZgmACdbG0zxIEE2ghW4Z1NCwIZl95UqHok2WjWAL54ShZyFksX3/9dbEEwQSaxTJOHYlY2mcJOf15tQkgH7G0zxIEcyA8yVC0WN51110LYgkIJtAklrEMe/nyZS/6IOfsw4Qhx9JkCSbMgfLqnKLEcvXq1WIJggl0Ess33njDMiwUjCVZGEIsTZZgwhwar9TJayx37NghlmDCBDqN5ZtvvimWYMI0YUJ9LO+8884FsfQ4BRMmUDdZxqkjU1NTyVtvvWWyBBMm0CiWJksQzNzyhEQeYtloGRYoB0uy0IdYWoYFwQQ6iKW36ALBBMQSqvnzXpZvxD5MhhHL7du3L1iG9VgEE2aujY2N+ddkKLGMU0eOHDlinyWU/Lm5NBPm+vXrk5MnT3p0MvBYmiyhuYmJCcHMm1tuuSU5c+ZMMj097RFKX18tN4ol0PjF5W233Vaa72dkdna2v3/Al6+6R2o+ZrfRmlvM7WNX/z5dj4kXLlxIjh49mj6RCSf9+OG/4447xBI6eGEZk2XEMn5eltCPDVc/TF+7zdTcZmtuSc3HpJ9Ny0MwR67FMn49vpRgAlAe14J55Vokp6+FcWjBzMtBPwu+aQAqL1dtGM3JxgCAXDdjNGcbQkAByGUXRvO2Qaanp0UToOJmZmZyF85hBbPRN5/ed+UqDxWAart8+fKVVq0oezAb7bydrdsAsxcuXJj0UAGotnPnzk0mLY6GTYZwQFBelmTnfn3mzJnfe6gAVNupU6f+T5NADk2eTitJb7/97W//+eoo7qoDABV16dKl6d/97nf/1GDCHKpBXrgg/c8GHxdc9efEiRP/bcOGDf/Wwwagej744IP/sW3btv+YdHZ1n3kRK8uVfmpDWR/LBVf+OX/+/HMrV67c6aEDUB3Hjh07sHnz5n+VNL+yT/3EObBgDnpJttnRTvW3mZ/97GdPX7hw4S0PH4BqmJycPPLzn//86RaRnG3TlP4OgAOeMJtNmUndhDm3RHvixIn/snr16n9YsWLFMg8ngPK5Ohxd/uyzz357++23P5MsXIKdSRaeUdE0mGW/luxsk4kzvdjuxMTEM7/61a9uPXr06L9MTU19dunSpSv9jjwA/RMXJbh48eKVkydPfvbhhx/+yzPPPHPr1Vj+MvnyXUnaLr0OwzAmzEZTZu202ektafARgHxqdLDOYm5JJwHtZ9PGc7IRRxpsiFaRHGkRXgDyGctGwUzaBDI371gyPsSNN9Immo3imYglQKmimXQQyaEe7JOHCbNVNEeabKDa++sjKZoA+Y9lJ/HMXSyHHczFTpr1X18fTkcCAZQnnLmKZR6C2SyaSdJ+iTYXGxCAvsUzN7HMSzAbRbCTcAJQnmC2imIuGjCew4030mZDCShAeaOZu1DmMZiNNtBI3jcgAAONqGAuYsM5GhZAHAWzbBsYgHIYtQkAQDABoCf6viTrnUUAMGECgGACAIIJAIIJAIIJAIIJAIIJAIIJAIIJAIIJAAgmAAgmAAgmAAgmAAgmAAgmAAgmACCYACCYACCYACCYACCYAFB0/0+AAQDHHxQEMMRIrwAAAABJRU5ErkJggg==")	url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcwAAAGQCAYAAAAjl1AKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphMGVmMzZmZi04YmI1LTRlN2YtOTcwMS04OTU5ZTg1N2ZhY2MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDNDOTBDNUQ2OUJGMTFFOTkwMzY4RTI3NjZBQTdENkMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDNDOTBDNUM2OUJGMTFFOTkwMzY4RTI3NjZBQTdENkMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpjMmZmZjM0Mi05NjEyLTQwM2YtYWZhYS01MTE1ZjQ2NThmMWMiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphYjlhMmUwMy1kNmIwLTY3NGMtODc4ZS0yMjUzMjdkNDI5OTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz68UHLbAAAgpElEQVR42uzd2ZNc9dnY8TOL9gU0IAkjgwpkI8QOQmI1FS+FHW9VLt/7wpWb900qKV+lTL3vTZzElSvnJilfvM4fkQunfEOw2LUgiUUsNhiMAFsjtIzQrpmJnhOdoaent+np5SyfT1XXiJ4R0hz19Lef31l6ZHZ2NgEAWhu1CQBAMAFAMAFAMAFAMAFAMAFAMAFAMAEAwQQAwQQAwQQAwQQAwQQAwQQAwQQAMuP9/gNGRkZsZQAGop/v8WzCBIA8TJj9GFr9swGUYyAUTHEEoLvn+NxGdLwgG1BEAaoxYY7kNZ55C+bIEu4DoFixHGkT0JE8RTMvwWwXxRHBBKhMQGcbPN8PPZx5COZIh6EcEU+AQgex2fRYH8tm4RxqNIcdzGbxa/dROAGKOT3WhnCk5nOzTX5PbqI5zGB2Estmv24XTwDyO2HOtohi/f25ieawgtkqlvW/HukgnqIJULxY1v96tsV0OvRo5mkfZn0YR5tEs920CUB+o9kokvW3mQ6iWYkJc6RNLOtvo7/85S/X/eIXv/jntWvX/mjZsmVfGRsbG3eNWoCClvOq6enpy1f9/Ysvvvjfv/nNb/7zr3/96zM1oRxN2u/THHhAR/p5odr0D1gYtvpg1kdztObj6N///vf/NDEx8e/Gx8eXeZgBlM+VK1cunzhx4n9u3rz5n65Fc6Zm0my0dFs/tdbGuG9/z2FefL1ROOdi+ZOf/GTl1NTU/920adMvxBKgvOI5/upz/X+I5/x47q8bnEaSnByvMugJs1EkRxoEcyw23Lp16x72UAKojjNnzuxfv379N6/+crrBlDnbbsos44TZ7Mo+aTSPHTv2X8USoHriuT8a0GS6HOqUOewl2QW3OMBnYmLiHz1sAKopGhAtSFqfJTH4aA1pSbbRUmx6m5yc/O833njjv/GQAaiu48eP/6+NGzf+++TLg4AaLc0mSQWWZJuN1iNr1qz5vocKQLVdbcG/TnJ2cZpBBrPV1Xnmps1ly5Zt8lABqLarLdiYNL9YTbOmlCaY9fFsdHm8kbgogYcKQLVda0HTVpR9wuwonq7gA0CD418qtSTbzdQJQIW7macujOZgYwBA7psxmrONIKAA5LIN42XaIFeuXEmmpqaSixcvJjMzMx5qAMOYxEZHkxUrViTr16+P68T2shGVe3uvvohYTk5OCiXAkMXz8Pnz59PhZePGjb2IZj5eCJTlHygmS7EEyFc447m5NJNzWb6ReCUDQL5cuHBBMPP4SgaAfOn39coFEwBypjQH/bhCEAAmTAAQTAAQTAAQTAAQTABAMAFAMAFAMAFAMAFAMAFAMAFAMAFAMAEAwQQAwQQAwQQAwQSAAhkvyzcyMjLiXxMAEyYACCYACCYACCYACCYAIJgAIJgAIJgAIJgAIJgAIJgAIJgAIJgAgGACwBJ5ey8AMGECgGACgGACgGACgGACgGACgGACAIIJAIIJAIIJAIIJAIIJAKXg4usAYMIEAMEEAMEEAMEEAMEEAMEEAMEEAAQTAAQTAAQTAAQTAAQTAErBxdcBwIQJAIIJAAMzbhMA9cbGxpLx8fH0Fr8eHR1NP8auj+wWZmdn527T09PJzMxM+vHKlSvpLX4NggmUKpDLly9Pb8uWLUsD2YnaeMb/o14E9PLly8mlS5fSm4AimEDhRBRXrlyZ3mKSrHXmzJnk5MmTyalTp5IvvvgivV28eDG9RfQigukTyLUpdMWKFWls165dm96uv/76ZMOGDcn69evTz8UtxNR54cKF9BYxBcEEcivCtmrVqrmIZYGcnJxMPv300+Rvf/tbGsZMLLc2ky29nj9/Pv3vY8eOzft8/Bk33XRTsmXLlmTTpk3JunXr5qIaf0b8vpg8oQhGWv0w9OQP+PJ0j5Gaj9lttOYW6zljV/8+J7v5c+p/UIFkQbzWrFkzb5r88MMPk7/85S9pKOt18tzQ6msafe7mm29Otm3bltx2223zonv27Nl5kaZc4sVSl/3YcPXD9LXbTM1ttuaW1HxM+tk0wYSSi32SMdHFx5BNku++++7c0mqvItlpROPvsmPHjrnJM8TfJZZ+6/9OCKZgCib0VeyjjFDGPsrw+eefpxPlO++80/NpsptpM3PXXXelE+eNN96Y/nfs34xw2scpmIIpmNB3sfwa+wuzo13/9Kc/JXv37h1oJFt9vtH9jz32WLJ9+/b01xHL2K9qmVYwBVMwoW8/bxHKbKr8+OOPkwMHDqT7CPMwTbb7XEzEu3fvTrZu3To3bUY4+/08hWAKJlRInAcZp3HE/sE49ePgwYPpfsphT5OLnTRD7N/ctWtX+j3FPs2pqSnncArm0IPptBIogYjkddddly7BxkE9L7/8cseT2bCmyVb3HzlyJDl69Gjy1FNPpU+2cU7n6dOnHRDEUJVmwownCaiiOK8yJsv4WfvrX/+avPTSS+mpGkWZJlt9LibMiGYcFBRfE5Om8zaLZ+PGjaWYMF18HQosDu7JYvn+++8ne/bsaRnL7Lqv3Xy+9rqx3Xyu099Te398L88++2zy3nvvpd9jduUgGAZLslDgyTIO8ImQ/PnPf05eeeWVQk+Tre6PFwLxMY6ije85fm3SZNBMmFDEV7rj43OTZbNYFm2abHf/888/nx7ElE2a9de/BcEE5v/Qjo6mB/hky7D1sew2hJ3+3l4GdLH3x6SZLc9mBzmBYAILZNNVhOKjjz5Kj4btVQjzNE22uv+5555LPvjgg3kvHGAQxsv0RAJlFxdPj1NI4jJ3EctBnxLS632Tnd7fKJqxLTZv3pxe7CAupQcmTCCVvS1XiGXYZuckLnVizNM02ey++N4jmnExg7iqkSNnEUwgFSsoMUmF2Id34sSJjqPWj8/18/5O4xlvbp3tv41p0yoTggmkQYh9dnFt2FdffbWjqbCbyXCQU2Mn02S7qL7xxhvp+3nGtoltBIIJFRanT2QXU9+3b1/HU+FiJr28TpOdRPXFF19MP8Y2cqoJggkVVrsUGwe3DOKUkF6dKtLLabLZ/XHN3LfeemvetgLBhIqJg1liaoqjYltdnGBQ50cOI4jtvjZ+/cc//jF9x6LYVg4AQjChgrKjYuO8w35Nk0sJaK+j2s3XZuJNsmu3GQgmVEScRhITU0xOb7/9du5PCRnENNnqaw8dOpR89tln6TaLbQeCCRWRHejzySef5PpydYOcJuuXYuvvi7c3q912IJhQ9h/M0dH0ij7hnXfeyd00OYggtvvaRvcdPnx4bjp3nVl6zaXxIIfiwJV4TMf1YrO3scr75ery8LWxreIdTeJtwGLKPH/+vAcTJkwoezBDHOxjmmy/FFt7fwSzdhuCCRPK+ip2dDQ9cGVqaiqdMAc5NRZpmmx2X2yzuGze9ddfn27LmZkZDypMmFBG2RGecXTsoKfGok2TzX7/p59+Om9bgmBCCWUH+xw9ejT3R7q2+38sNZ7d/v4PP/xw3raEXrAkCzkNZjYl1YahmaUudy72/n4spfby98dF6gUTwYQSGxsbS4+Ojf2XFy9e7Hv4ihrEdvfF0bHZfszYpvG+mSCYULJghtOnTw88fGWL5+TkZBrMOIBKMOkF+zAhh8GM6ag+BHm++Hke92MeP3583jYFEyaU6RXstavTxIRpmlza12bb0BV/EMw6rvRDKX4gr70BcuzDbDRFDTuIRYpnbMNswvT8gGBCyWRP7OfOnRPEJX5ttg3FEsGEEgfzwoULhb/izrDjmV1HVjARTChxMOsv5yaei//aK1euCCaCCWUPZrzrhiAu/Z1LBBPBhJJbygE/4tn6qkggmFCSUMZEFJd0u3z5cqGClLe/a3bhdfFEMKHEwYxTIbIlxbIEbdDnlGYXLBBMBBNKGsxsOsqO8ixj/AYRz5UrVwomggllD+bq1asXXB4vD0Ea9u9fzP8jtqFg0kuuGQU5kl0kfP369fNiMKjrr/bjWrG9vNbsYq6Zm21DF17HhFnHoeOUQXb+5XXXXVf5pdil/j9iG2bb1PMDggklnTA3bNhQyCAO+mtb3b9x48Z5L0JAMKGEwYz3cazaOZK9jmcWzOyKPyCYUCIxDcWTfiwnxlGecU3ZPMQv79Nk/f2rVq1KJiYm0vtNmPSKg34gZ+KCBWHLli2FPDCn26/t9v/R6P9z6623ztuWIJhQQtkSYvak30lMlhq0QQSxl0fAtro/brfddtu8bQm9YEkWcjphfuUrX6nc1Xl6df9Xv/pVEyYmTCi72OcWB//Efsxt27a1nMSKuhTbr/tDTJc33HBDug3tv0QwoeSy68h+/etfL/xS7CDvj9s999wzbxtCr1iShZwGM470jAkzrivbi/fHHPTyar+XYht9LrbV3XffLZiYMKEqYikx2/9233335XqaHNaU2ehzDz/8cPoxtp3lWASTwjt+/LiN0IGLFy+mH7du3drz+PU6fIPYN9ns/trP3X777fO2HfSSa8ky8Fg+//zzyZNPPpls2rTJBmkhTomIA1fiaNkHHnggOXjw4IJINApHs6AM6msHcX+jz+3evTu55ZZb0m0W285zAiZMCh3LPXv2pO/zGNE8duyYjdJGdqWfOPin22kyr0fALnaKbfe5u+66a942A8Gk8LHMntREs73YFxcT00033ZR885vfzEUQlxq9pQS02ee+973vJTfffHO6rZx7iWBSmljWTk+i2d65c+fSj/fee2+ybt26wl6urpcBrf1cvO/lQw89NG9bgWBSyFhGFOtjKZqdi6kpO0XiqaeeGug02cvL1fXi9zT6fU8//XT6MbaRN4tGMCl0LNu96s+iOTk5aaM1ES84IhJf+9rXkm9961uluMBAN9Nk/ed37dqVbN++Pb2/2YsyEExKEcvaaMayrWgmTYORbcs4LzN7r8eiXK6uV9NkrXiT7XjxUPuCAgSTQsYynsTi0P5Ob3HunEmzuTiYJTu/8Dvf+U4yPj5eqWmy9vPxvf/4xz9OP8ZSrKv6IJgUOpbdsDzbfvtkR81+97vfXXTI8nKBgW4/l30+YhnvSBLbwlIsgkkhY/nCCy8s+QlMNJuLYJw9ezb9eMcdd8xFMy9TZi8/1+zPi1ju2LFj3raAQRjp94Ot5mobIzUfs9tozW0sblf/Pie7+XNOnz7tX3OIIm69iGWtlStXuiJQE2NjY8maNWvSn6833ngj+cMf/tAwNs0i1Iv7h/G5H/7wh+lVj7JYOiq2GOKt6rrsx4arH6av3WZqbrM1t6TmY19fQJkwyWUss0kz/r9OOVkoQhEHAcWTQ5yfWTtplmmarPWDH/xgLpbxvYslgyaYLEm2DBtxW8wBPos5EEg0G4vrpWZHh0Y042o3ebtcXSch7OTzP/rRj5IHH3xw7vSR+N5BMClULGNfY7+v3SmazcWRs9mkGW+cnB05mofL1S31SNjsaNif/vSnyf333z83Wbr0HcNiHya5jmWtFStW2KfZRO0+zU8++ST5/e9/n5w8eXIuPq2mt8Xcv5TPLfbzExMT6QuAeAcS+yyLrSz7MAWTrmLZj32WncgOBMpO3OdLo6OjyerVq9N4Rliee+65ZP/+/T0J3lJC2M3vjSv4fPvb306WLVs2t7/WG0ILpmAKpliKZk9/3mL7LF++PP3v9957L3n22WfTn488T5O1T6xxbdg777wz/e+4IEGsYjh1RDAFUzALGcs8vN9gtjwrmo3FZLZq1aq5n7948+n6U0+GMU22+prvf//7yc6dO+e+Jl6U2V8pmIIpmGIpmgOfNj/99NPk7bffTvbu3ZuLaTLzyCOPJHfffXeyZcsWU6VgCqZgFtvnn38+9GVY0exeHGka4Yx9m+Ho0aPJBx98kOzbty+NU7+WZFt9Tfy77d69O9m2bVt6UE+IfZURSqeMCKZg9jmYU1NTHpV9nCzzfL3OiMETTzzh6NkOwhmhysIZ3n333eTNN99MPw5imox9k3H6S1zaLhOhjFOHhLK84k2+BVMwxVI0CxnO2McZt9pVhI8//jh5//33k48++mjBv3m302TsR926dWv6Pp633nprcsMNN8x9LvZPxk0oBVMwBbPwsXzxxRcL9U4QlmcX/7OZhbN26swCGheKiNupU6fSW5zakV1lJ3s7rez3xwuWOA/0+uuvT2/xb7B58+Z5gcymySyU9lEKpmAKpljmYNIUzcWJczhj8oxwxsean9slieeXCGyEMj46l1IwBVMwSyMmi4hlTBNFJZq9CWjEMz5mt+z6vrU/19nzR3YpuwhidotICiSCKZiljmUZ3pA3lmdFEwSzpy8k/VNStliGOOoyvh9vQg0IJmLZQTRfeukl0QQEE7FsJ06EF01AMFlyLCMm/Xrz57zcskkzjv4FEEy6imVZJ8t62T5N0QS6VZqjZM+cOeNfcxGxLPMybCtxysnjjz/u6FkYoHXr1nXbD0fJIpbDYp8mYMI0YXYcyzy9RdewxHmaJk0wYZowaRjL7AAfnHICCCYtYlnVZdhW0Xz55ZdFExBMxLKdmLgjmo6eBdqxD7PETpw4IZYdyvZp3njjjTYG9Jh9mIhlibi4AVCZCfOLL77wr3mNA3yWNmk+9thjjp6FHlq7dq0JE7Es46TpQCBAMCsQy3iyF0vRZPg8fgSTnMfSPsveRfOVV17xpEdXYl/4888/nxw7dszGKBH7ME2WtJDt03T0LIuJ5Z49e9IXr3Ht4m984xvJpk2bKr1N7MMkF+JoWLHs76TpPE26iWWIn0uTZnkIplgimvQhlhnRFExyEkv7LEWTfMQyotjszdjj8fPCCy+IZsHZh2myZBFin+ajjz5qnyYLYtnJi9fYp/nkk09Wbp9mWfZhliaYZ8+ercQDzwE++YmmixsQR1F3GsvaaFbtQKA1a9aUIpiWZAsWyzjVQSyHyykn1May2TJss1s8fuzTLCbBLFgs7bMUTfIVy24fP6JZPJZkC8A+y/yyT7OasYwDeHrx4rUq+zQtySKWzE2ajp4Vy27Ez7WjZ4tDMMUS0WQIsRTN4rEkm+NYOsCnWGJ59pFHHrE8W0K151n2SyzPPvHEE6VcnrUki1iyYNJ89dVXTZpi2fWk+eKLL5o0c0wwxRLRZMixFE3BRCxFk0LHMvYtDvrnUTTzqzT7MM+dO1fof4g4zzKeZMWyPOzTLK5+HeCzGGU65WT16tXd9sM+TMTSpEneY7nYK/j0+haPH5NmvgjmkMUyrFiWO5p79+4VzQLGMg8sz+aLJVmxZABieXb37t2WZ3Ms22eZx8tPFv2UE0uyiCUmTbE0aVaIYIolA4zmvn37RFMsRVMwEUs6edITzfzFctgH+DgQqBjswxxwLGNZTizJ9mnecMMNNsYQYxnxKeJb5mX7NIvyJub2YSKWdC3bpxmnFDF4sd0jlkWZLJtNmt6P1YRZugnz5MmT6TJsPMih1vLly02aQ4plGd6MPSbNxx9/PPeTZlkmzNIEM68PfpMl7cTy7K5du5xyMgBFXoZtF808n3KyatWqUgTTkqxYMmSOnhXLpYjnl5deesny7ACYMPscS8uwdMrybP9jWeYXr7FSkdcDgUyYiCU9denSJQcC9SmWMYGVfaUnnm9Mmv0lmH2IZSyviSXdRjMeP6LZ21iWbRm2Gcuz/WVJVizJoViejQOBLM+KZTfydvRsWZZkBVMsEc3SqT3Psqpin2ZeomkfJnPiPMv9+/eLJT0Vy7PxuLI8K5bdiOejl19+2fKsCTM/E2bE0mRJvyfNhx9+2KQpll2J5dnHHntsqJOmJVnBFEsGGs1Ynp2YmLAxWsSyCkfDdiNbnh3WxTEsyVacWDJI2fJs7CtHLBcrO+XExTFMmKlB/qDEk5Z9lgxr0rQ8O19VzrPshWEtz8afa8KsILEkD5OmA4HEstvBwoFAJsyB/MBYhiUvYp/Uzp07Kz1pWoZd2uNnkJOmCbNixJI8icfhgQMHKjtpiuXSHz8mTRNm32JpGZY8in2aVZs0xbK3k9+jjz7a90nThFmhyVIsyavYpxmTZlWOno1YxmQklr0R2/GVV15x9KwJUyyp1qQZR8+W+TxNseyfbJ9mv87TLMuEKZgtYhmv3MWSIkUzlmfLGE2xLHY0LcmWmFhSRGVdnhXLwcgOBLI8K5hiiWgWUHwfsY9NLAcXTfs0W0y8lmS/dOrUqXSfZTzpQJHF8uxDDz1U6OXZiKXJcjhieTaOnu3V8qwl2ZKJWMYrc7GkLJPmwYMHCztpiqVJM48EsyaWlmEp25NeEaMplqKZV6VZku02drHP8rXXXhNLSqtIy7NxgE88SQ/r/W1ZKLu4wVKWZ2OJt8t+OK0kL8EUS6oinrAefPDBXEczi6XJMp+Pn6VEsyzBrOySrFhSJXlfnhXL/D9+LM9WdMKMfZZiSRXF8mzeJs3s1BHLsOWdNC3JFjSYYoknvRXJAw88kItoOs+ymI+fRx55ZFHRFMwCBjOLpVNHMGkuH3o0xbI60bQPs2AilrEPRyzh/5+neejQoXRf/rBi+eqrr4plQcWAEv9+VdunWYlgZrG0DAvDj2YWS/ssix/NvXv3VupNzEu/JCuW0Fq2T3PDhg0mS7p6/MTybKs3MbcPswDBPH36tH2W0IFsn2Y/oxmTrH2W1YymYOY8mBFLkyXkI5oRS5Nl+aO5e/fuhtF00E/ORJizm1jC4tXu06z9eVrqTSyroXafZv1joDSdKcuEmS27OhoW8jNp2mdZ3Umz9pSTeEyVYcIsVTAjlvEK2WQJw49mxDImDrGsZjR37do1F03BzFkwjx07lsbSZAm9sWzZsq6jKZbURrMswSzNPkyxhN66fPlycvjw4UWfpymWhFjp27dvX6nO0yxNMMUS+vNztZhoiiX10YzHQ1mMl+UbKdORWJDHSfP+++9vuTwbUY2JIp4k/TxSxmFm1D8n0Gk0m02acb/JkrITTKDjaL7++uvp0ehiiWACtBDLa0eOHEmmp6fFksqxDxPoWJxqct999yVjY2NzsbTPEhMmQF0sd+7cmaxdu3beAT4gmADXxInnEct169bNxdIyLFVjSRZoO1k+9NBDaSzjPEuxRDABWsQyJsv9+/fbZ0llWZIFOoqlyRITZkl4xQu9j2XtAT5iiWACtImlZViwJAu0iGW2zxKwJAtkTwbj4wtiaRkWShhMYGmT5YMPPpjGMq4V62hYWMiSLIjlvFi6gg+UfML0Shi6eAIYH284WQIlDiaw+MnygQcesAwLJkygVSzvv//+BVfwAUyYQIPJUixBMIEOYnngwIH0TaGt0ECFgukHHtrHMpZha2NpsoTOOa0ExBKo0oQJtI9lHA372muvWYaFKgfTDz80+AEfH58XS5MlCCbQYLK877775k4dMVnC0tiHCRWJpckSTJgpr5rh2g/1+LhYgmACnUyW2dGwBw8eFEsQTKCTWFp9AcGcx5MClf5BvrYMa7KE/nHQD4glUKUJE6oolmHvvffeufMsDx065NQRMGECrWJpsgQTZke8oqZSP7jj42IJggm0myzvueeeebG0DAuCacKEusmyUSwBwQRqYhnLsGvWrJl3gA8wGA76gYLG0j5LMGECNbJ9llksDx8+bJ8lCGb3PHlQ1smyPpYmSxgOS7JQgFiePn1aLMGECdSLZdi777577mhYy7AgmD3jiYQyTZb1sTRZgmACdbG0zxIEE2ghW4Z1NCwIZl95UqHok2WjWAL54ShZyFksX3/9dbEEwQSaxTJOHYlY2mcJOf15tQkgH7G0zxIEcyA8yVC0WN51110LYgkIJtAklrEMe/nyZS/6IOfsw4Qhx9JkCSbMgfLqnKLEcvXq1WIJggl0Ess33njDMiwUjCVZGEIsTZZgwhwar9TJayx37NghlmDCBDqN5ZtvvimWYMI0YUJ9LO+8884FsfQ4BRMmUDdZxqkjU1NTyVtvvWWyBBMm0CiWJksQzNzyhEQeYtloGRYoB0uy0IdYWoYFwQQ6iKW36ALBBMQSqvnzXpZvxD5MhhHL7du3L1iG9VgEE2aujY2N+ddkKLGMU0eOHDlinyWU/Lm5NBPm+vXrk5MnT3p0MvBYmiyhuYmJCcHMm1tuuSU5c+ZMMj097RFKX18tN4ol0PjF5W233Vaa72dkdna2v3/Al6+6R2o+ZrfRmlvM7WNX/z5dj4kXLlxIjh49mj6RCSf9+OG/4447xBI6eGEZk2XEMn5eltCPDVc/TF+7zdTcZmtuSc3HpJ9Ny0MwR67FMn49vpRgAlAe14J55Vokp6+FcWjBzMtBPwu+aQAqL1dtGM3JxgCAXDdjNGcbQkAByGUXRvO2Qaanp0UToOJmZmZyF85hBbPRN5/ed+UqDxWAart8+fKVVq0oezAb7bydrdsAsxcuXJj0UAGotnPnzk0mLY6GTYZwQFBelmTnfn3mzJnfe6gAVNupU6f+T5NADk2eTitJb7/97W//+eoo7qoDABV16dKl6d/97nf/1GDCHKpBXrgg/c8GHxdc9efEiRP/bcOGDf/Wwwagej744IP/sW3btv+YdHZ1n3kRK8uVfmpDWR/LBVf+OX/+/HMrV67c6aEDUB3Hjh07sHnz5n+VNL+yT/3EObBgDnpJttnRTvW3mZ/97GdPX7hw4S0PH4BqmJycPPLzn//86RaRnG3TlP4OgAOeMJtNmUndhDm3RHvixIn/snr16n9YsWLFMg8ngPK5Ohxd/uyzz357++23P5MsXIKdSRaeUdE0mGW/luxsk4kzvdjuxMTEM7/61a9uPXr06L9MTU19dunSpSv9jjwA/RMXJbh48eKVkydPfvbhhx/+yzPPPHPr1Vj+MvnyXUnaLr0OwzAmzEZTZu202ektafARgHxqdLDOYm5JJwHtZ9PGc7IRRxpsiFaRHGkRXgDyGctGwUzaBDI371gyPsSNN9Immo3imYglQKmimXQQyaEe7JOHCbNVNEeabKDa++sjKZoA+Y9lJ/HMXSyHHczFTpr1X18fTkcCAZQnnLmKZR6C2SyaSdJ+iTYXGxCAvsUzN7HMSzAbRbCTcAJQnmC2imIuGjCew4030mZDCShAeaOZu1DmMZiNNtBI3jcgAAONqGAuYsM5GhZAHAWzbBsYgHIYtQkAQDABoCf6viTrnUUAMGECgGACAIIJAIIJAIIJAIIJAIIJAIIJAIIJAIIJAAgmAAgmAAgmAAgmAAgmAAgmAAgmACCYACCYACCYACCYACCYAFB0/0+AAQDHHxQEMMRIrwAAAABJRU5ErkJggg==")
Description The image of the Spreadsheet insert image Dialog.

Stepper

Name	Type	Default value	Computed value
$kendo-stepper-border-width	Number	`0px`	`0px`
Description The width of the border around the Stepper.
$kendo-stepper-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`

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

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

$kendo-stepper-bg	Color	`transparent`	`transparent`
Description The background color of the Stepper.
$kendo-stepper-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Stepper.
$kendo-stepper-border	Color	`transparent`	`transparent`
Description The border color of the Stepper.
$kendo-stepper-label-margin-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal margin the Stepper label.
$kendo-stepper-label-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding the Stepper label.
$kendo-stepper-label-padding-y	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding the Stepper label.
$kendo-stepper-inline-content-padding-x	String	`k-spacing(5)`	`var(--kendo-spacing-5, 1.25rem)`
Description The horizontal padding of the Stepper content.
$kendo-stepper-inline-content-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the Stepper content.
$kendo-stepper-indicator-width	String	`k-spacing(7.5)`	`var(--kendo-spacing-7\.5, 1.875rem)`
Description The width of the Stepper indicator.
$kendo-stepper-indicator-height	String	`$kendo-stepper-indicator-width`	`var(--kendo-spacing-7\.5, 1.875rem)`
Description The height of the Stepper indicator.
$kendo-stepper-indicator-border-width	Number	`1px`	`1px`
Description The border width of the Stepper indicator.
$kendo-stepper-indicator-border-radius	Number	`50%`	`50%`
Description The border radius of the Stepper indicator.
$kendo-stepper-indicator-focus-border-width	Number	`$kendo-stepper-indicator-border-width`	`1px`
Description The border width of the focused Stepper indicator.
$kendo-stepper-indicator-focus-size	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The size of the focused Stepper indicator.
$kendo-stepper-indicator-focus-offset	Number	`3px`	`3px`
Description The offset of the Stepper's focused indicator.
$kendo-stepper-indicator-focus-calc-offset	Calculation	`calc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )`	`calc(1px + 3px)`
Description The calculated offset of the Stepper's focused indicator.
$kendo-stepper-indicator-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Stepper indicator.
$kendo-stepper-indicator-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Stepper indicator.
$kendo-stepper-indicator-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))`	`var(--kendo-color-border, #8a8886)`
Description The border color of the Stepper indicator.
$kendo-stepper-indicator-hover-bg	String	`var( --kendo-hover-bg, initial )`	`var(--kendo-hover-bg, initial)`
Description The background color of the hovered Stepper indicator.
$kendo-stepper-indicator-hover-text	String	`var( --kendo-hover-text, initial )`	`var(--kendo-hover-text, initial)`
Description The text color of the hovered Stepper indicator.
$kendo-stepper-indicator-hover-border	String	`$kendo-stepper-indicator-border`	`var(--kendo-color-border, #8a8886)`
Description The border color of the hovered Stepper indicator.
$kendo-stepper-indicator-disabled-bg	String	`var( --kendo-disabled-bg, initial )`	`var(--kendo-disabled-bg, initial)`
Description The background color of the disabled Stepper indicator.
$kendo-stepper-indicator-disabled-text	String	`var( --kendo-disabled-text, initial)`	`var(--kendo-disabled-text, initial)`
Description The text color of the disabled Stepper indicator.
$kendo-stepper-indicator-disabled-border	String	`var( --kendo-disabled-border, initial )`	`var(--kendo-disabled-border, initial)`
Description The border color of the disabled Stepper indicator.
$kendo-stepper-indicator-done-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the Stepper's done indicator.
$kendo-stepper-indicator-done-text	String	`if($kendo-enable-color-system, k-color( on-primary ), $kendo-color-white)`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the Stepper's done indicator.
$kendo-stepper-indicator-done-border	String	`$kendo-stepper-indicator-done-bg`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the Stepper's done indicator.
$kendo-stepper-indicator-done-hover-bg	String	`if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))`	`var(--kendo-color-primary-hover, #106ebe)`
Description The background color of the Stepper's hovered done indicator.
$kendo-stepper-indicator-done-hover-text	String	`$kendo-stepper-indicator-done-text`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the Stepper's hovered done indicator.
$kendo-stepper-indicator-done-hover-border	String	`$kendo-stepper-indicator-done-hover-bg`	`var(--kendo-color-primary-hover, #106ebe)`
Description The border color of the Stepper's hovered done indicator.
$kendo-stepper-indicator-done-disabled-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 22%, transparent), k-get-theme-color-var( primary-30 ))`	`color-mix(in srgb, var(--kendo-color-primary, #0078d4) 22%, transparent)`
Description The background color of the Stepper's disabled done indicator.
$kendo-stepper-indicator-done-disabled-text	String	`var( --kendo-disabled-text, initial )`	`var(--kendo-disabled-text, initial)`
Description The text color of the Stepper's disabled done indicator.
$kendo-stepper-indicator-done-disabled-border	String	`var( --kendo-disabled-border, initial )`	`var(--kendo-disabled-border, initial)`
Description The border color of the Stepper's disabled done indicator.
$kendo-stepper-indicator-current-bg	String	`if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))`	`var(--kendo-color-primary-active, #005a9e)`
Description The background color of the Stepper current indicator.
$kendo-stepper-indicator-current-text	String	`$kendo-stepper-indicator-done-text`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the Stepper current indicator.
$kendo-stepper-indicator-current-border	String	`$kendo-stepper-indicator-current-bg`	`var(--kendo-color-primary-active, #005a9e)`
Description The border color of the Stepper current indicator.
$kendo-stepper-indicator-current-hover-bg	String	`$kendo-stepper-indicator-done-hover-bg`	`var(--kendo-color-primary-hover, #106ebe)`
Description The background color of the Stepper's hovered current indicator.
$kendo-stepper-indicator-current-hover-text	String	`$kendo-stepper-indicator-done-hover-text`	`var(--kendo-color-on-primary, #ffffff)`
Description The text color of the Stepper's hovered current indicator.
$kendo-stepper-indicator-current-hover-border	String	`$kendo-stepper-indicator-done-hover-border`	`var(--kendo-color-primary-hover, #106ebe)`
Description The border color of the Stepper's hovered current indicator.
$kendo-stepper-indicator-current-disabled-bg	String	`$kendo-stepper-indicator-done-disabled-bg`	`color-mix(in srgb, var(--kendo-color-primary, #0078d4) 22%, transparent)`
Description The background color of the Stepper's disabled current indicator.
$kendo-stepper-indicator-current-disabled-text	String	`$kendo-stepper-indicator-done-disabled-text`	`var(--kendo-disabled-text, initial)`
Description The text color of the Stepper's disabled current indicator.
$kendo-stepper-indicator-current-disabled-border	String	`$kendo-stepper-indicator-done-disabled-border`	`var(--kendo-disabled-border, initial)`
Description The border color of the Stepper's disabled current indicator.
$kendo-stepper-label-text	String	`inherit`	`inherit`
Description The text color of the Stepper label.
$kendo-stepper-label-success-text	String	`if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 ))`	`var(--kendo-color-success-on-surface, #107c10)`
Description The success text color of the Stepper label.
$kendo-stepper-label-error-text	String	`if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 ))`	`var(--kendo-color-error-on-surface, #a4262c)`
Description The error text color of the Stepper label.
$kendo-stepper-label-hover-text	String	`$kendo-stepper-text`	`var(--kendo-component-text, initial)`
Description The text color of the hovered Stepper label.
$kendo-stepper-label-disabled-text	String	`var( --kendo-disabled-text, initial )`	`var(--kendo-disabled-text, initial)`
Description The text color of the disabled Stepper label.
$kendo-stepper-current-label-font-weight	String	`var( --kendo-font-weight-bold, bold )`	`var(--kendo-font-weight-bold, bold)`
Description The font weight of the disabled Stepper label.
$kendo-stepper-optional-label-text	String	`if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-subtle, #605e5c)`
Description The text color of the optional Stepper label.
$kendo-stepper-optional-label-font-size	String	`inherit`	`inherit`
Description The font size of the optional Stepper label.
$kendo-stepper-optional-label-font-style	String	`italic`	`italic`
Description The font style of the optional Stepper label.
$kendo-stepper-progressbar-size	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The size of the Stepper ProgressBar.
$kendo-stepper-content-transition-property	String	`none`	`none`
Description The property name of the Stepper transition.
$kendo-stepper-content-transition-duration	Number	`300ms`	`300ms`
Description The duration of the Stepper transition.
$kendo-stepper-content-transition-timing-function	List	`cubic-bezier(.4, 0, .2, 1) 0ms`	`cubic-bezier(0.4, 0, 0.2, 1) 0ms`
Description The timing function of the Stepper transition.

Switch

Name	Type	Default value	Computed value
$kendo-switch-font-family	String	`var( --kendo-font-family, normal )`	`var(--kendo-font-family, normal)`
Description The font family of the Switch.
$kendo-switch-track-border-width	Number	`1px`	`1px`
Description The border width of the Switch track.
$kendo-switch-thumb-border-width	Number	`0`	`0`
Description The border width of the Switch thumb.
$kendo-switch-label-text-transform	String	`uppercase`	`uppercase`
Description The text transform of the Switch label.
$kendo-switch-label-display	String	`none`	`none`
Description The display of the Switch label.
$kendo-switch-sizes	Map	`( sm: ( font-size: 10px, track-width: 36px, track-height: 16px, thumb-width: 10px, thumb-height: 10px, thumb-offset: 3px, label-offset: 4px ), md: ( font-size: 10px, track-width: 40px, track-height: 20px, thumb-width: 12px, thumb-height: 12px, thumb-offset: 4px, label-offset: 5px ), lg: ( font-size: 10px, track-width: 44px, track-height: 24px, thumb-width: 14px, thumb-height: 14px, thumb-offset: 5px, label-offset: 6px ) )`	`(sm: (font-size: 10px, track-width: 36px, track-height: 16px, thumb-width: 10px, thumb-height: 10px, thumb-offset: 3px, label-offset: 4px), md: (font-size: 10px, track-width: 40px, track-height: 20px, thumb-width: 12px, thumb-height: 12px, thumb-offset: 4px, label-offset: 5px), lg: (font-size: 10px, track-width: 44px, track-height: 24px, thumb-width: 14px, thumb-height: 14px, thumb-offset: 5px, label-offset: 6px))`
Description The map with the different Switch sizes.
$kendo-switch-focus-ring	List	`1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))`	`1px solid var(--kendo-color-base-emphasis, #605e5c)`
Description The ring around the focused Switch.
$kendo-switch-off-track-bg	String	`var( --kendo-component-bg, transparent )`	`var(--kendo-component-bg, transparent)`
Description The background of the track when the Switch is not checked.
$kendo-switch-off-track-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the track when the Switch is not checked.
$kendo-switch-off-track-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))`	`var(--kendo-color-border, #8a8886)`
Description The border color of the track when the Switch is not checked.
$kendo-switch-off-track-hover-bg	String	`var( --kendo-component-bg, transparent )`	`var(--kendo-component-bg, transparent)`
Description The background of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-border	String	`if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-border-alt, #323130)`
Description The border color of the track when the hovered Switch is not checked.
$kendo-switch-off-track-focus-bg	String	`var( --kendo-component-bg, transparent )`	`var(--kendo-component-bg, transparent)`
Description The background of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))`	`var(--kendo-color-border, #8a8886)`
Description The border color of the track when the focused Switch is not checked.
$kendo-switch-off-track-disabled-bg	String	`var( --kendo-component-bg, transparent )`	`var(--kendo-component-bg, transparent)`
Description The background of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)`
Description The border color of the track when the disabled Switch is not checked.
$kendo-switch-off-thumb-bg	String	`if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-subtle, #605e5c)`
Description The background of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-text	String	`inherit`	`inherit`
Description The text color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-border, #8a8886)`
Description The border color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-hover-bg	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The background of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-text	String	`inherit`	`inherit`
Description The text color of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-border	String	`if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-border-alt, #323130)`
Description The border color of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-disabled-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)`
Description The background of the thumb when the disabled Switch is not checked.
$kendo-switch-off-thumb-disabled-text	String	`inherit`	`inherit`
Description The text color of the thumb when the disabled Switch is not checked.
$kendo-switch-off-thumb-disabled-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)`
Description The border color of the thumb when the disabled Switch is not checked.
$kendo-switch-on-track-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background of the track when the Switch is checked.
$kendo-switch-on-track-text	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The text color of the track when the Switch is checked.
$kendo-switch-on-track-border	String	`$kendo-switch-on-track-bg`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the track when the Switch is checked.
$kendo-switch-on-track-hover-bg	String	`if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))`	`var(--kendo-color-primary-hover, #106ebe)`
Description The background of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-text	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The text color of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-border	String	`$kendo-switch-on-track-hover-bg`	`var(--kendo-color-primary-hover, #106ebe)`
Description The border color of the track when the hovered Switch is checked.
$kendo-switch-on-track-focus-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-text	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The text color of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-border	String	`$kendo-switch-on-track-focus-bg`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the track when the focused Switch is checked.
$kendo-switch-on-track-disabled-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)`
Description The background of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-text	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The text color of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-border	Color	`if($kendo-enable-color-system, transparent, $kendo-switch-on-track-disabled-bg)`	`transparent`
Description The border color of the track when the disabled Switch is checked.
$kendo-switch-on-thumb-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background of the thumb when the Switch is checked.
$kendo-switch-on-thumb-text	String	`inherit`	`inherit`
Description The text color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-border	String	`inherit`	`inherit`
Description The border color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-hover-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The background of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-text	String	`inherit`	`inherit`
Description The text color of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-border	String	`inherit`	`inherit`
Description The border color of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-disabled-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-20 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background of the thumb when the disabled Switch is checked.
$kendo-switch-on-thumb-disabled-text	String	`inherit`	`inherit`
Description The text color of the thumb when the disabled Switch is checked.
$kendo-switch-on-thumb-disabled-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent)`
Description The border color of the thumb when the disabled Switch is checked.

Table

Name	Type	Default value	Computed value
$kendo-table-border-width	Number	`1px`	`1px`
Description The width of the table border.
$kendo-table-cell-vertical-border-width	Number	`0px`	`0px`
Description The width of vertical border of table cells.
$kendo-table-cell-horizontal-border-width	Number	`1px`	`1px`
Description The width of horizontal border of table cells.
$kendo-table-cell-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the cells in the table if no size is specified.
$kendo-table-cell-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the cells in the table if no size is specified.
$kendo-table-header-font-weight	String	`var( --kendo-font-weight-bold, normal )`	`var(--kendo-font-weight-bold, normal)`
Description Font weight of the table header cells.
$kendo-table-sizes	Map	( sm: ( font-size: var( --kendo-font-size, inherit ), line-height: var( --kendo-line-height, inherit ), cell-padding-x: $kendo-table-sm-cell-padding-x, cell-padding-y: $kendo-table-sm-cell-padding-y, group-label-padding-x: $kendo-list-item-group-label-sm-padding-x, group-label-padding-y: $kendo-list-item-group-label-sm-padding-y, group-label-font-size: $kendo-list-item-group-label-sm-font-size ), md: ( font-size: var( --kendo-font-size, inherit ), line-height: var( --kendo-line-height, inherit ), cell-padding-x: $kendo-table-md-cell-padding-x, cell-padding-y: $kendo-table-md-cell-padding-y, group-label-padding-x: $kendo-list-item-group-label-md-padding-x, group-label-padding-y: $kendo-list-item-group-label-md-padding-y, group-label-font-size: $kendo-list-item-group-label-md-font-size ), lg: ( font-size: var( --kendo-font-size, inherit ), line-height: var( --kendo-line-height, inherit ), cell-padding-x: $kendo-table-lg-cell-padding-x, cell-padding-y: $kendo-table-lg-cell-padding-y, group-label-padding-x: $kendo-list-item-group-label-lg-padding-x, group-label-padding-y: $kendo-list-item-group-label-lg-padding-y, group-label-font-size: $kendo-list-item-group-label-lg-font-size ) )	(sm: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, inherit), cell-padding-x: var(--kendo-spacing-3, 0.75rem), cell-padding-y: var(--kendo-spacing-1\.5, 0.375rem), group-label-padding-x: var(--kendo-spacing-0\.5, 0.125rem), group-label-padding-y: var(--kendo-spacing-0\.5, 0.125rem), group-label-font-size: var(--kendo-font-size-xs, inherit)), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, inherit), cell-padding-x: var(--kendo-spacing-3, 0.75rem), cell-padding-y: var(--kendo-spacing-3, 0.75rem), group-label-padding-x: var(--kendo-spacing-1, 0.25rem), group-label-padding-y: var(--kendo-spacing-1, 0.25rem), group-label-font-size: var(--kendo-font-size-xs, inherit)), lg: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, inherit), cell-padding-x: var(--kendo-spacing-3, 0.75rem), cell-padding-y: var(--kendo-spacing-3\.5, 0.875rem), group-label-padding-x: var(--kendo-spacing-1\.5, 0.375rem), group-label-padding-y: var(--kendo-spacing-1\.5, 0.375rem), group-label-font-size: var(--kendo-font-size-xs, inherit)))
Description The sizes of the table.
$kendo-table-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description Background color of tables.
$kendo-table-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description Text color of tables.
$kendo-table-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description Border color of tables.
$kendo-table-header-bg	String	`$kendo-table-bg`	`var(--kendo-component-bg, initial)`
Description Background color of table headers.
$kendo-table-header-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description Text color of table headers.
$kendo-table-header-border	String	`$kendo-table-border`	`var(--kendo-component-border, initial)`
Description Border color of table headers.
$kendo-table-sticky-header-text	String	`$kendo-list-header-text`	`var(--kendo-color-primary, #0078d4)`
Description Text color of the sticky table header.
$kendo-table-sticky-header-bg	String	`$kendo-list-header-bg`	`var(--kendo-color-app-surface, #ffffff)`
Description Background color of the sticky table header.
$kendo-table-sticky-header-border	String	`$kendo-list-header-border`	`inherit`
Description Border color of the sticky table header.
$kendo-table-sticky-header-shadow	String	`$kendo-list-header-shadow`	`var(--kendo-elevation-3, none)`
Description Shadow of the sticky table header.
$kendo-table-footer-bg	String	`$kendo-table-header-bg`	`var(--kendo-component-bg, initial)`
Description Background color of table footers.
$kendo-table-footer-text	String	`$kendo-table-header-text`	`var(--kendo-color-on-app-surface, #323130)`
Description Text color of table footers.
$kendo-table-footer-border	String	`$kendo-table-header-border`	`var(--kendo-component-border, initial)`
Description Border color of table footers.
$kendo-table-group-row-bg	String	`$kendo-table-header-bg`	`var(--kendo-component-bg, initial)`
Description Background color of group rows in table.
$kendo-table-group-row-text	String	`$kendo-table-header-text`	`var(--kendo-color-on-app-surface, #323130)`
Description Text color of group rows in table.
$kendo-table-group-row-border	String	`$kendo-table-header-border`	`var(--kendo-component-border, initial)`
Description Border color of group rows in table.
$kendo-table-group-label-text	String	`$kendo-list-bg`	`var(--kendo-component-bg, transparent)`
Description Text color of group label in table.
$kendo-table-group-label-bg	String	`$kendo-list-text`	`var(--kendo-component-text, inherit)`
Description Background color of group label in table.
$kendo-table-alt-row-bg	String	`initial`	`initial`
Description Background color of alternating rows in table.
$kendo-table-alt-row-text	String	`$kendo-table-text`	`var(--kendo-component-text, initial)`
Description Text color of alternating rows in table.
$kendo-table-alt-row-border	String	`$kendo-table-border`	`var(--kendo-component-border, initial)`
Description Border color of alternating rows in table.
$kendo-table-hover-bg	String	`var( --kendo-hover-bg, inherit )`	`var(--kendo-hover-bg, inherit)`
Description Background color of hovered rows in table.
$kendo-table-hover-text	String	`var( --kendo-hover-text, inherit )`	`var(--kendo-hover-text, inherit)`
Description Text color of hovered rows in table.
$kendo-table-hover-border	String	`$kendo-table-border`	`var(--kendo-component-border, initial)`
Description Border color of hovered rows in table.
$kendo-table-focus-bg	String	`inherit`	`inherit`
Description Background color of focused rows in table.
$kendo-table-focus-text	String	`inherit`	`inherit`
Description Text color of focused rows in table.
$kendo-table-focus-border	String	`inherit`	`inherit`
Description Border color of focused rows in table.
$kendo-table-focus-shadow	List	`$kendo-list-item-focus-shadow`	`inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c)`
Description Box shadow of focused rows in table.
$kendo-table-selected-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 13%, transparent), k-get-theme-color-var( primary-20 ))`	`color-mix(in srgb, var(--kendo-color-primary, #0078d4) 13%, transparent)`
Description Background color of selected rows in table.
$kendo-table-selected-text	String	`$kendo-table-text`	`var(--kendo-component-text, initial)`
Description Text color of selected rows in table.
$kendo-table-selected-border	String	`$kendo-table-border`	`var(--kendo-component-border, initial)`
Description Border color of selected rows in table.
$kendo-table-selected-hover-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 26%, transparent), k-get-theme-color-var( primary-30 ))`	`color-mix(in srgb, var(--kendo-color-primary, #0078d4) 26%, transparent)`
Description Hover background color of selected rows in table.
$kendo-table-selected-hover-text	String	`$kendo-table-selected-text`	`var(--kendo-component-text, initial)`
Description Hover text color of selected rows in table.
$kendo-table-selected-hover-border	String	`$kendo-table-selected-border`	`var(--kendo-component-border, initial)`
Description Hover border color of selected rows in table.

Tabstrip

Name	Type	Default value	Computed value
$kendo-tabstrip-wrapper-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal padding of the TabStrip wrapper.
$kendo-tabstrip-wrapper-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical padding of the TabStrip wrapper.
$kendo-tabstrip-wrapper-border-width	Number	`0px`	`0px`
Description The border width around the TabStrip wrapper.
$kendo-tabstrip-wrapper-bg	Color	`transparent`	`transparent`
Description The background color of the TabStrip wrapper.
$kendo-tabstrip-wrapper-text	String	`initial`	`initial`
Description The text color of the TabStrip wrapper.
$kendo-tabstrip-wrapper-border	String	`initial`	`initial`
Description The border color of the TabStrip wrapper.
$kendo-tabstrip-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the TabStrip.
$kendo-tabstrip-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the TabStrip.
$kendo-tabstrip-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the TabStrip.
$kendo-tabstrip-border-width	Number	`0px`	`0px`
Description The border width around the TabStrip.
$kendo-tabstrip-bg	Color	`transparent`	`transparent`
Description The background color of the TabStrip.
$kendo-tabstrip-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the TabStrip.
$kendo-tabstrip-border	Color	`transparent`	`transparent`
Description The border color of the TabStrip.
$kendo-tabstrip-item-padding-x	String	`var( --kendo-padding-x, #{$kendo-padding-md-x} )`	`var(--kendo-padding-x, var(--kendo-spacing-2, 0.5rem))`
Description The horizontal padding of the TabStrip items.
$kendo-tabstrip-item-padding-y	Calculation	`calc( #{k-spacing(2)} + #{k-spacing(1)} )`	`calc(var(--kendo-spacing-2, 0.5rem) + var(--kendo-spacing-1, 0.25rem))`
Description The vertical padding of the TabStrip items.
$kendo-tabstrip-item-border-width	Number	`0px`	`0px`
Description The border width around the TabStrip items.
$kendo-tabstrip-item-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the TabStrip items.
$kendo-tabstrip-item-gap	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The gap between the TabStrip items.
$kendo-tabstrip-item-bg	Color	`transparent`	`transparent`
Description The background color of the TabStrip items.
$kendo-tabstrip-item-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the TabStrip items.
$kendo-tabstrip-item-border	Color	`transparent`	`transparent`
Description The border color of the TabStrip items.
$kendo-tabstrip-item-disabled-text	String	`var( --kendo-disabled-text, initial )`	`var(--kendo-disabled-text, initial)`
Description The text color of the disabled TabStrip items.
$kendo-tabstrip-item-disabled-bg	String	`none`	`none`
Description The background color of the disabled TabStrip items.
$kendo-tabstrip-item-disabled-border	String	`var( --kendo-disabled-border, initial )`	`var(--kendo-disabled-border, initial)`
Description The border color of the disabled TabStrip items.
$kendo-tabstrip-item-disabled-opacity	Null	`null`	`null`
Description The opacity of the disabled TabStrip items.
$kendo-tabstrip-item-disabled-filter	Null	`null`	`null`
Description The filter of the disabled TabStrip items.
$kendo-tabstrip-item-hover-bg	String	`var( --kendo-hover-bg, inherit )`	`var(--kendo-hover-bg, inherit)`
Description The background color of the hovered TabStrip items.
$kendo-tabstrip-item-hover-text	String	`var( --kendo-hover-text, inherit )`	`var(--kendo-hover-text, inherit)`
Description The text color of the hovered TabStrip items.
$kendo-tabstrip-item-hover-border	String	`var( --kendo-hover-bg, inherit )`	`var(--kendo-hover-bg, inherit)`
Description The border color of the hovered TabStrip items.
$kendo-tabstrip-item-selected-bg	String	`var( --kendo-component-bg, transparent )`	`var(--kendo-component-bg, transparent)`
Description The background color of the selected TabStrip items.
$kendo-tabstrip-item-selected-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the selected TabStrip items.
$kendo-tabstrip-item-selected-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the selected TabStrip items.
$kendo-tabstrip-item-selected-font-weight	String	`var( --kendo-font-weight-bold, normal )`	`var(--kendo-font-weight-bold, normal)`
Description The background gradient of the selected TabStrip items.
$kendo-tabstrip-item-focus-shadow	List	`$kendo-list-item-focus-shadow`	`inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c)`
Description The shadow of the focused TabStrip items.
$kendo-tabstrip-item-dragging-text	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The text color of the dragged TabStrip items.
$kendo-tabstrip-indicator-size	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The border width of the TabStrip indicator.
$kendo-tabstrip-indicator-color	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the TabStrip ripple.
$kendo-tabstrip-content-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the TabStrip content.
$kendo-tabstrip-content-padding-y	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the TabStrip content.
$kendo-tabstrip-content-border-width	Number	`1px`	`1px`
Description The border width around the TabStrip content.
$kendo-tabstrip-content-bg	String	`var( --kendo-component-bg, transparent )`	`var(--kendo-component-bg, transparent)`
Description The background color of the TabStrip content.
$kendo-tabstrip-content-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the TabStrip content.
$kendo-tabstrip-content-border	Color	`transparent`	`transparent`
Description The border color of the TabStrip content.
$kendo-tabstrip-content-focus-border	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The border color of the focused TabStrip content.
$kendo-tabstrip-scrollable-button-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal button padding of the scrollable TabStrip.
$kendo-tabstrip-scrollable-button-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`

Taskboard

Name	Type	Default value	Computed value
$kendo-taskboard-spacer	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The spacing index of the TaskBoard.
$kendo-taskboard-border-width	Number	`1px`	`1px`
Description The border width of the TaskBoard.
$kendo-taskboard-border-style	String	`solid`	`solid`
Description The border style of the TaskBoard.
$kendo-taskboard-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical padding of the TaskBoard.
$kendo-taskboard-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal of the TaskBoard.
$kendo-taskboard-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the TaskBoard.
$kendo-taskboard-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the TaskBoard.
$kendo-taskboard-line-height	String	`var( --kendo-line-height, inherit )`	`var(--kendo-line-height, inherit)`
Description The line height of the TaskBoard.
$kendo-taskboard-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the TaskBoard.
$kendo-taskboard-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the TaskBoard.
$kendo-taskboard-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the TaskBoard.
$kendo-taskboard-content-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical padding of the TaskBoard content.
$kendo-taskboard-content-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal padding of the TaskBoard content.
$kendo-taskboard-column-container-spacing-y	Calculation	`calc( #{$kendo-taskboard-spacer} / 2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description The vertical spacing of the TaskBoard column container.
$kendo-taskboard-column-container-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical padding of the TaskBoard column container.
$kendo-taskboard-column-container-padding-x	Calculation	`calc( #{$kendo-taskboard-spacer} / 2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description The horizontal padding of the TaskBoard column container.
$kendo-taskboard-columns-container-gap	String	`$kendo-taskboard-spacer`	`var(--kendo-spacing-4, 1rem)`
Description The spacing of the TaskBoard columns container.
$kendo-taskboard-column-width	Number	`320px`	`320px`
Description The default width of the TaskBoard column.
$kendo-taskboard-column-border-width	Number	`1px`	`1px`
Description The border width of the TaskBoard column.
$kendo-taskboard-column-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the TaskBoard column.
$kendo-taskboard-column-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the TaskBoard column.
$kendo-taskboard-column-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the TaskBoard column.
$kendo-taskboard-column-border	Color	`transparent`	`transparent`
Description The border color of the TaskBoard column.
$kendo-taskboard-column-focus-bg	String	`$kendo-taskboard-column-bg`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the focused TaskBoard column.
$kendo-taskboard-column-focus-text	String	`$kendo-taskboard-column-text`	`var(--kendo-component-text, inherit)`
Description The text color of the focused TaskBoard column.
$kendo-taskboard-column-focus-border	String	`if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-border, #8a8886)`
Description The border color of the focused TaskBoard column.
$kendo-taskboard-column-header-padding-y	Calculation	`calc( #{$kendo-taskboard-spacer} / 2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description The vertical padding of the TaskBoard column header.
$kendo-taskboard-column-header-padding-x	Calculation	`$kendo-taskboard-column-header-padding-y`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description The horizontal padding of the TaskBoard column header.
$kendo-taskboard-column-header-gap	Calculation	`calc( #{$kendo-taskboard-spacer} / 4 )`	`calc(var(--kendo-spacing-4, 1rem) / 4)`
Description The spacing of the TaskBoard column header.
$kendo-taskboard-column-header-actions-gap	Calculation	`calc( #{$kendo-taskboard-spacer} / 2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description The spacing of the TaskBoard column header actions.
$kendo-taskboard-column-header-font-weight	Number	`400`	`400`
Description The font weight of the TaskBoard column header.
$kendo-taskboard-column-header-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the TaskBoard column header.
$kendo-taskboard-column-cards-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical padding of the TaskBoard column Card wrapper.
$kendo-taskboard-column-cards-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal padding of the TaskBoard column Card wrapper.
$kendo-taskboard-column-cards-gap	Calculation	`calc( #{$kendo-taskboard-spacer} / 2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description The spacing of the TaskBoard column Card wrapper.
$kendo-taskboard-pane-width	Number	`$kendo-taskboard-column-width`	`320px`
Description The default width of the TaskBoard pane.
$kendo-taskboard-pane-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical padding of the TaskBoard pane.
$kendo-taskboard-pane-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal padding of the TaskBoard pane.
$kendo-taskboard-pane-border-width	Number	`1px`	`1px`
Description The border width of the TaskBoard pane.
$kendo-taskboard-pane-bg	String	`var( --kendo-component-bg, inherit )`	`var(--kendo-component-bg, inherit)`
Description The background color of the TaskBoard pane.
$kendo-taskboard-pane-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the TaskBoard pane.
$kendo-taskboard-pane-border	String	`var( --kendo-component-border, inherit )`	`var(--kendo-component-border, inherit)`
Description The border color of the TaskBoard pane.
$kendo-taskboard-pane-header-padding-y	String	`$kendo-taskboard-spacer`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the TaskBoard pane header.
$kendo-taskboard-pane-header-padding-x	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The horizontal padding of the TaskBoard pane header.
$kendo-taskboard-pane-header-font-size	String	`var( --kendo-font-size-xl, 1rem )`	`var(--kendo-font-size-xl, 1rem)`
Description The font size of the TaskBoard pane header.
$kendo-taskboard-pane-header-font-weight	String	`var( --kendo-font-weight-bold, bold )`	`var(--kendo-font-weight-bold, bold)`
Description The font weight of the TaskBoard pane header.
$kendo-taskboard-pane-header-text	String	`$kendo-taskboard-pane-text`	`var(--kendo-component-text, inherit)`
Description The text color of the TaskBoard pane header.
$kendo-taskboard-pane-content-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical padding of the TaskBoard pane content.
$kendo-taskboard-pane-content-padding-x	String	`$kendo-taskboard-pane-header-padding-x`	`var(--kendo-spacing-6, 1.5rem)`
Description The horizontal padding of the TaskBoard pane content.
$kendo-taskboard-pane-actions-padding-y	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The vertical padding of the TaskBoard pane actions.
$kendo-taskboard-pane-actions-padding-x	String	`$kendo-taskboard-pane-actions-padding-y`	`var(--kendo-spacing-6, 1.5rem)`
Description The horizontal padding of the TaskBoard pane actions.
$kendo-taskboard-card-padding-y	Calculation	`calc( #{$kendo-taskboard-spacer} / 2 )`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description The vertical padding of the TaskBoard Card.
$kendo-taskboard-card-padding-x	Calculation	`$kendo-taskboard-card-padding-y`	`calc(var(--kendo-spacing-4, 1rem) / 2)`
Description The horizontal padding of the TaskBoard Card.
$kendo-taskboard-card-category-border-width	Number	`4px`	`4px`
Description The border width of the TaskBoard Card category.
$kendo-taskboard-card-focus-shadow	String	`none`	`none`
Description The shadow of the focused TaskBoard Card.
$kendo-taskboard-card-selected-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border of the selected TaskBoard Card.
$kendo-taskboard-card-selected-shadow	String	`var( --kendo-box-shadow-depth-3, none )`	`var(--kendo-box-shadow-depth-3, none)`
Description The shadow of the selected TaskBoard Card.
$kendo-taskboard-card-title-font-size	String	`var( --kendo-font-size, 1rem )`	`var(--kendo-font-size, 1rem)`
Description The font size of the TaskBoard Card title.
$kendo-taskboard-card-title-font-weight	String	`var( --kendo-font-weight-bold, 600 )`	`var(--kendo-font-weight-bold, 600)`
Description The font weight of the TaskBoard Card title.
$kendo-taskboard-drag-placeholder-border-width	Number	`1px`	`1px`
Description The border width of the TaskBoard Card placeholder.
$kendo-taskboard-drag-placeholder-border-radius	String	`$kendo-card-border-radius`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the TaskBoard Card placeholder.
$kendo-taskboard-drag-placeholder-bg	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 23%, transparent)`
Description The background color of the TaskBoard Card placeholder.
$kendo-taskboard-drag-placeholder-border	String	`var( --kendo-component-border, inherit )`	`var(--kendo-component-border, inherit)`
Description The border color of the TaskBoard Card placeholder.

Tilelayout

Name	Type	Default value	Computed value
$kendo-tile-layout-border-width	Number	`0px`	`0px`
Description The width of the border around the TileLayout.
$kendo-tile-layout-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the TileLayout.
$kendo-tile-layout-padding-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal padding of the TileLayout.
$kendo-tile-layout-padding-y	String	`$kendo-tile-layout-padding-x`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the TileLayout
$kendo-tile-layout-hint-border-width	Number	`1px`	`1px`
Description The width of the border around the TileLayout hint.
$kendo-tile-layout-hint-border-radius	String	`var( --kendo-border-radius-lg, initial )`	`var(--kendo-border-radius-lg, initial)`
Description The radius of the border around the TileLayout hint.
$kendo-tile-layout-hint-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The color of the border around the TileLayout hint.
$kendo-tile-layout-hint-bg	Color	`rgba(255, 255, 255, .2)`	`rgba(255, 255, 255, 0.2)`
Description The background color of the TileLayout hint.

Time-selector

Name	Type	Default value	Computed value
$kendo-time-selector-border-width	Number	`1px`	`1px`
Description Width of the border around the time-selector.
$kendo-time-selector-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description Font family of the time-selector.
$kendo-time-selector-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description Font size of the time-selector.
$kendo-time-selector-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description Line height of the time-selector.
$kendo-time-selector-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description Background color of the time-selector.
$kendo-time-selector-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description Text color of the time-selector.
$kendo-time-selector-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description Border color of the time-selector.
$kendo-time-selector-header-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description Horizontal padding of the time-selector header.
$kendo-time-selector-header-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description Vertical padding color of the time-selector header.
$kendo-time-selector-header-border-width	Number	`0px`	`0px`
Description Width of the border around the time-selector header.
$kendo-time-list-separator-display	String	`none`	`none`
Description Visibility of the time-selector separator.
$kendo-time-list-width	Number	`4em`	`4em`
Description Minimum width of the time-selector columns.
$kendo-time-list-height	Number	`240px`	`240px`
Description Height of the time-selector columns.
$kendo-time-list-title-spacing	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description Spacing beneath the time selector titles.
$kendo-time-list-title-font-size	String	`var( --kendo-font-size-xs, inherit )`	`var(--kendo-font-size-xs, inherit)`
Description Font size of the time-selector titles.
$kendo-time-list-title-line-height	String	`var( --kendo-line-height-lg, inherit )`	`var(--kendo-line-height-lg, inherit)`
Description Line height of the time-selector titles.
$kendo-time-list-title-height	Calculation	`calc( #{$kendo-time-list-title-spacing} + #{$kendo-time-list-title-font-size} * #{$kendo-time-list-title-line-height} )`	`calc(var(--kendo-spacing-3, 0.75rem) + var(--kendo-font-size-xs, inherit) * var(--kendo-line-height-lg, inherit))`
Description Height of the time-selector titles.
$kendo-time-list-title-text	String	`var( --kendo-subtle-text, inherit )`	`var(--kendo-subtle-text, inherit)`
Description Text color of the time-selector titles.
$kendo-time-list-title-focus-text	String	`$kendo-time-selector-text`	`var(--kendo-component-text, initial)`
Description Text color of the focused time-selector titles.
$kendo-time-list-item-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description Horizontal padding of the time-selector list items.
$kendo-time-list-item-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description Vertical padding of the time-selector list items.
$kendo-time-list-highlight-border-width	List	`1px 0px`	`1px 0px`
Description Width of the border of the selected item in the time-selector.
$kendo-time-list-highlight-height	Calculation	`calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} + calc( #{$kendo-time-list-item-padding-y} * 2 ) )`	`calc(var(--kendo-font-size, inherit) * var(--kendo-line-height, normal) + var(--kendo-spacing-1, 0.25rem) * 2)`
Description Height of the selected item in the time-selector.
$kendo-time-list-highlight-bg	String	`$kendo-time-selector-bg`	`var(--kendo-component-bg, initial)`
Description Background color of the selected item in the time-selector.
$kendo-time-list-highlight-border	String	`$kendo-time-selector-border`	`var(--kendo-component-border, initial)`
Description Border color of the selected item in the time-selector.
$kendo-time-list-focus-bg	Color	`rgba(0, 0, 0, .04)`	`rgba(0, 0, 0, 0.04)`
Description Background color of the focused time-selector column.
$kendo-time-selector-sm-font-size	String	`$kendo-list-sm-font-size`	`var(--kendo-font-size, inherit)`
Description Font sizes of the time-selector.
$kendo-time-selector-sm-line-height	String	`$kendo-list-sm-line-height`	`var(--kendo-line-height, normal)`
Description Line heights used along with $kendo-font-size.
$kendo-time-selector-sm-list-item-padding-x	String	`$kendo-list-sm-item-padding-x`	`var(--kendo-spacing-2, 0.5rem)`
Description Horizontal padding of the time-selector items.
$kendo-time-selector-sm-list-item-padding-y	String	`$kendo-list-sm-item-padding-y`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description Vertical padding of the time-selector items.
$kendo-time-selector-sizes	Map	( sm: ( font-size: $kendo-time-selector-sm-font-size, line-height: $kendo-time-selector-sm-line-height, list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x, list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y ), md: ( font-size: $kendo-time-selector-md-font-size, line-height: $kendo-time-selector-md-line-height, list-item-padding-x: $kendo-time-selector-md-list-item-padding-x, list-item-padding-y: $kendo-time-selector-md-list-item-padding-y ), lg: ( font-size: $kendo-time-selector-lg-font-size, line-height: $kendo-time-selector-lg-line-height, list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x, list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y ) )	(sm: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), list-item-padding-x: var(--kendo-spacing-2, 0.5rem), list-item-padding-y: var(--kendo-spacing-1\.5, 0.375rem)), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), list-item-padding-x: var(--kendo-spacing-2, 0.5rem), list-item-padding-y: var(--kendo-spacing-2, 0.5rem)), lg: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), list-item-padding-x: var(--kendo-spacing-2, 0.5rem), list-item-padding-y: var(--kendo-spacing-2\.5, 0.625rem)))
Description Sizes map for the time-selector.

Timeline

Name	Type	Default value	Computed value
$kendo-timeline-spacing-x	String	`k-spacing(10)`	`var(--kendo-spacing-10, 2.5rem)`
Description The horizontal spacing of the Timeline.
$kendo-timeline-spacing-y	String	`k-spacing(10)`	`var(--kendo-spacing-10, 2.5rem)`
Description The vertical spacing of the Timeline.
$kendo-timeline-items-padding	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The padding between the Timeline's track items.
$kendo-timeline-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Timeline.
$kendo-timeline-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Timeline.
$kendo-timeline-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Timeline.
$kendo-timeline-mobile-spacing-x	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The horizontal spacing of the mobile Timeline.
$kendo-timeline-mobile-spacing-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The vertical spacing of the mobile Timeline.
$kendo-timeline-track-arrow-width	String	`k-spacing(7.5)`	`var(--kendo-spacing-7\.5, 1.875rem)`
Description The width of the Timeline track arrow.
$kendo-timeline-track-arrow-height	String	`k-spacing(7.5)`	`var(--kendo-spacing-7\.5, 1.875rem)`
Description The height of the Timeline track arrow.
$kendo-timeline-track-size	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The size of the Timeline track.
$kendo-timeline-track-wrap-padding-bottom	Calculation	`calc( #{$kendo-timeline-track-size} / 2 )`	`calc(var(--kendo-spacing-1\.5, 0.375rem) / 2)`
Description The bottom padding of the Timeline's track wrapper.
$kendo-timeline-track-border-width	Number	`1px`	`1px`
Description The border width of the Timeline track.
$kendo-timeline-track-margin-bottom	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The bottom margin of the Timeline track.
$kendo-timeline-track-bottom-calc	Calculation	`calc( ( #{ $kendo-timeline-track-arrow-height } / 2 ) + #{ $kendo-timeline-track-wrap-padding-bottom } )`	`calc(var(--kendo-spacing-7\.5, 1.875rem) / 2 + calc(var(--kendo-spacing-1\.5, 0.375rem) / 2))`
Description The bottom offset of the Timeline track.
$kendo-timeline-track-start-calc	Calculation	`calc( #{ $kendo-timeline-track-arrow-width } - 2 * #{ $kendo-timeline-track-border-width } )`	`calc(var(--kendo-spacing-7\.5, 1.875rem) - 2 * 1px)`
Description The left offset of the Timeline track.
$kendo-timeline-track-end-calc	Calculation	`calc( #{ $kendo-timeline-track-arrow-width } - 2 * #{ $kendo-timeline-track-border-width } )`	`calc(var(--kendo-spacing-7\.5, 1.875rem) - 2 * 1px)`
Description The right offset of the Timeline track.
$kendo-timeline-track-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the Timeline track.
$kendo-timeline-track-border-color	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))`	`color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)`
Description The border color of the Timeline track.
$kendo-timeline-arrow-inset-block-end	Calculation	`calc( #{ $kendo-timeline-track-size } + #{ $kendo-timeline-track-wrap-padding-bottom } + #{ $kendo-timeline-track-border-width } )`	`calc(var(--kendo-spacing-1\.5, 0.375rem) + calc(var(--kendo-spacing-1\.5, 0.375rem) / 2) + 1px)`
Description The block end inset of the Timeline arrow.
$kendo-timeline-track-arrow-disabled-bg	String	`var( --kendo-disabled-bg, initial )`	`var(--kendo-disabled-bg, initial)`
Description The background color of the disabled Timeline arrow.
$kendo-timeline-track-arrow-disabled-text	String	`var( --kendo-disabled-text, initial )`	`var(--kendo-disabled-text, initial)`
Description The text color of the disabled Timeline arrow.
$kendo-timeline-track-arrow-disabled-border	String	`var( --kendo-disabled-border, initial)`	`var(--kendo-disabled-border, initial)`
Description The border color of the disabled Timeline arrow.
$kendo-timeline-track-event-offset	String	`k-spacing(8)`	`var(--kendo-spacing-8, 2rem)`
Description The offset of the Timeline track event.
$kendo-timeline-flag-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Timeline flag.
$kendo-timeline-flag-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Timeline flag.
$kendo-timeline-flag-border-radius	String	`k-spacing(0.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The border radius of the Timeline flag.
$kendo-timeline-flag-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Timeline flag.
$kendo-timeline-flag-box-shadow	String	`var( --kendo-box-shadow-depth-2, none )`	`var(--kendo-box-shadow-depth-2, none)`
Description The box shadow of the Timeline flag.
$kendo-timeline-flag-min-width	String	`k-spacing(20)`	`var(--kendo-spacing-20, 5rem)`
Description The minimum width of the Timeline flag.
$kendo-timeline-flag-max-width	Calculation	`calc( #{ $kendo-timeline-flag-min-width } + 2 * #{ $kendo-timeline-spacing-x } )`	`calc(var(--kendo-spacing-20, 5rem) + 2 * var(--kendo-spacing-10, 2.5rem))`
Description The maximum width of the Timeline flag.
$kendo-timeline-mobile-flag-max-width	Calculation	`calc( #{ $kendo-timeline-flag-min-width } + 2 * #{ $kendo-timeline-mobile-spacing-x } )`	`calc(var(--kendo-spacing-20, 5rem) + 2 * var(--kendo-spacing-4, 1rem))`
Description The maximum width of the mobile Timeline flag.
$kendo-timeline-horizontal-flag-min-width	String	`k-spacing(15)`	`var(--kendo-spacing-15, 3.75rem)`
Description The minimum width of the horizontal Timeline flag.
$kendo-timeline-flag-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the Timeline flag.
$kendo-timeline-flag-text	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The text color of the Timeline flag.
$kendo-timeline-flag-callout-width	String	`k-spacing(2.5)`	`var(--kendo-spacing-2\.5, 0.625rem)`
Description The width of the Timeline's flag callout.
$kendo-timeline-flag-callout-height	String	`k-spacing(2.5)`	`var(--kendo-spacing-2\.5, 0.625rem)`
Description The height of the Timeline's flag callout.
$kendo-timeline-flag-offset-bottom	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The bottom offset of the Timeline flag.
$kendo-timeline-flag-margin-bottom-calc	Calculation	`calc( #{ $kendo-timeline-track-size } + 2 * #{ $kendo-timeline-track-border-width } + #{ $kendo-timeline-flag-offset-bottom } + #{ $kendo-timeline-flag-callout-height } )`	`calc(var(--kendo-spacing-1\.5, 0.375rem) + 2 * 1px + var(--kendo-spacing-1, 0.25rem) + var(--kendo-spacing-2\.5, 0.625rem))`
Description The bottom margin of the Timeline flag.
$kendo-timeline-card-header-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Timeline's Card header.
$kendo-timeline-card-header-text	String	`if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))`	`var(--kendo-color-on-app-surface, #323130)`
Description The text color of the Timeline's Card header.
$kendo-timeline-card-body-scroll-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))`	`color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)`
Description The border of the Timeline's Card body scroll.
$kendo-timeline-card-body-scroll-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Timeline's Card body scroll.
$kendo-timeline-card-scroll-thumb-hover	String	`var( --kendo-hover-border, initial )`	`var(--kendo-hover-border, initial)`
Description The color of the Timeline's hovered card scroll thumb.
$kendo-timeline-date-body-text	String	`var( --kendo-body-text, initial )`	`var(--kendo-body-text, initial)`
Description The text color of the Timeline date body.
$kendo-timeline-date-width	Calculation	`calc( #{k-spacing(12)} + #{k-spacing(0.5)} )`	`calc(var(--kendo-spacing-12, 3rem) + var(--kendo-spacing-0\.5, 0.125rem))`
Description The width of the Timeline date.
$kendo-timeline-date-margin-bottom	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The bottom margin of the Timeline date.
$kendo-timeline-vertical-padding-calc	Calculation	`calc( #{ $kendo-timeline-spacing-x } + ( #{ $kendo-timeline-flag-min-width } - #{ $kendo-timeline-track-size } ) / 2 )`	`calc(var(--kendo-spacing-10, 2.5rem) + (var(--kendo-spacing-20, 5rem) - var(--kendo-spacing-1\.5, 0.375rem)) / 2)`
Description The padding of the vertical Timeline.
$kendo-timeline-vertical-padding-with-dates-calc	Calculation	`calc( #{ $kendo-timeline-vertical-padding-calc } + #{ $kendo-timeline-date-width } )`	`calc(calc(var(--kendo-spacing-10, 2.5rem) + (var(--kendo-spacing-20, 5rem) - var(--kendo-spacing-1\.5, 0.375rem)) / 2) + calc(var(--kendo-spacing-12, 3rem) + var(--kendo-spacing-0\.5, 0.125rem)))`
Description The padding of the vertical Timeline date.
$kendo-timeline-vertical-border-radius	String	`k-border-radius(lg)`	`var(--kendo-border-radius-lg, 0.5rem)`
Description The border radius of the vertical Timeline.
$kendo-timeline-mobile-vertical-padding-calc	Calculation	`calc( #{ $kendo-timeline-mobile-spacing-x } + ( #{ $kendo-timeline-flag-min-width } - #{ $kendo-timeline-track-size } ) / 2 )`	`calc(var(--kendo-spacing-4, 1rem) + (var(--kendo-spacing-20, 5rem) - var(--kendo-spacing-1\.5, 0.375rem)) / 2)`
Description The padding of the vertical mobile Timeline.
$kendo-timeline-mobile-vertical-padding-with-dates-calc	Calculation	`calc( #{ $kendo-timeline-mobile-vertical-padding-calc } + #{ $kendo-timeline-date-width } )`	`calc(calc(var(--kendo-spacing-4, 1rem) + (var(--kendo-spacing-20, 5rem) - var(--kendo-spacing-1\.5, 0.375rem)) / 2) + calc(var(--kendo-spacing-12, 3rem) + var(--kendo-spacing-0\.5, 0.125rem)))`
Description The padding of the vertical mobile Timeline date.
$kendo-timeline-circle-width	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The width of the Timeline circle.
$kendo-timeline-circle-height	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The height of the Timeline circle.
$kendo-timeline-circle-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the Timeline circle.
$kendo-timeline-event-width	Number	`400px`	`400px`
Description The width of the Timeline event.
$kendo-timeline-event-height	Number	`600px`	`600px`
Description The height of the Timeline event.
$kendo-timeline-event-min-height-calc	Calculation	`calc( 2 * ( #{ $kendo-timeline-track-event-offset } - #{ $kendo-card-border-width } ) )`	`calc(2 * (var(--kendo-spacing-8, 2rem) - 0px))`
Description The minimum height of the Timeline event.
$kendo-timeline-icon-spacing	String	`var( --kendo-icon-spacing, .5rem )`	`var(--kendo-icon-spacing, 0.5rem)`
Description The spacing of the Timeline icons.

Name	Type	Default value	Computed value
$kendo-toolbar-sm-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the small Toolbar.
$kendo-toolbar-md-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the medium Toolbar.
$kendo-toolbar-lg-padding-x	String	`k-spacing(2.5)`	`var(--kendo-spacing-2\.5, 0.625rem)`
Description The horizontal padding of the large Toolbar.
$kendo-toolbar-sm-padding-y	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The vertical padding of the small Toolbar.
$kendo-toolbar-md-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the medium Toolbar.
$kendo-toolbar-lg-padding-y	String	`k-spacing(2.5)`	`var(--kendo-spacing-2\.5, 0.625rem)`
Description The vertical padding of the large Toolbar.
$kendo-toolbar-sm-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing between the tools of the small Toolbar.
$kendo-toolbar-md-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing between the tools of the medium Toolbar.
$kendo-toolbar-lg-spacing	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The spacing between the tools of the large Toolbar.
$kendo-toolbar-border-width	Number	`1px`	`1px`
Description The width of the border around the Toolbar.
$kendo-toolbar-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Toolbar.
$kendo-toolbar-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Toolbar.
$kendo-toolbar-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Toolbar.
$kendo-toolbar-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the Toolbar.
$kendo-toolbar-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the Toolbar.
$kendo-toolbar-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The color of the border around the Toolbar.
$kendo-toolbar-separator-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))`	`color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent)`
Description The color of the separator border of the Toolbar.
$kendo-toolbar-input-width	Number	`10em`	`10em`
Description The width of the input in the Toolbar.
$kendo-toolbar-item-focus-outline-width	Number	`1px`	`1px`
Description The border width of the focused Toolbar item.
$kendo-toolbar-item-focus-outline-style	String	`solid`	`solid`
Description The border style of the focused Toolbar item.
$kendo-toolbar-item-focus-outline-color	String	`if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-base-emphasis, #605e5c)`
Description The border color of the focused Toolbar item.
$kendo-toolbar-flat-border-width	Number	`1px`	`1px`
Description Border width of the flat Toolbar.
$kendo-toolbar-sizes	Map	`( sm: ( padding-x: $kendo-toolbar-sm-padding-x, padding-y: $kendo-toolbar-sm-padding-y, spacing: $kendo-toolbar-sm-spacing ), md: ( padding-x: $kendo-toolbar-md-padding-x, padding-y: $kendo-toolbar-md-padding-y, spacing: $kendo-toolbar-md-spacing ), lg: ( padding-x: $kendo-toolbar-lg-padding-x, padding-y: $kendo-toolbar-lg-padding-y, spacing: $kendo-toolbar-lg-spacing ) )`	`(sm: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), spacing: var(--kendo-spacing-2, 0.5rem)), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-2, 0.5rem), spacing: var(--kendo-spacing-2, 0.5rem)), lg: (padding-x: var(--kendo-spacing-2\.5, 0.625rem), padding-y: var(--kendo-spacing-2\.5, 0.625rem), spacing: var(--kendo-spacing-2, 0.5rem)))`
Description The sizes map for the Toolbar.

Name	Type	Default value	Computed value
$kendo-tooltip-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the Tooltip.
$kendo-tooltip-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Tooltip.
$kendo-tooltip-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Tooltip.
$kendo-tooltip-border-width	Number	`0px`	`0px`
Description The width of the border around the Tooltip.
$kendo-tooltip-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Tooltip.
$kendo-tooltip-font-size	String	`var( --kendo-font-size-sm, inherit )`	`var(--kendo-font-size-sm, inherit)`
Description The font size of the Tooltip.
$kendo-tooltip-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Tooltip.
$kendo-tooltip-title-font-size	Calculation	`calc( var( --kendo-font-size-sm, .75rem ) * 1.25 )`	`calc(var(--kendo-font-size-sm, 0.75rem) * 1.25)`
Description The font size of the Tooltip title.
$kendo-tooltip-title-line-height	String	`var( --kendo-line-heigh-xs, normal )`	`var(--kendo-line-heigh-xs, normal)`
Description The line height of the Tooltip title.
$kendo-tooltip-title-margin	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The margin of the Tooltip title.
$kendo-tooltip-callout-size	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The size of the Tooltip callout.
$kendo-tooltip-bg	String	`if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)`	`var(--kendo-color-app-surface, #ffffff)`
Description The default background of the Tooltip.
$kendo-tooltip-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The default text color of the Tooltip.
$kendo-tooltip-border	Color	`transparent`	`transparent`
Description The default border color of the Tooltip.
$kendo-tooltip-shadow	String	`var( --kendo-box-shadow-depth-2, none )`	`var(--kendo-box-shadow-depth-2, none)`
Description The box-shadow of the Tooltip.
$kendo-tooltip-button-text	String	`if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130, initial ))`	`var(--kendo-color-subtle, #605e5c)`
Description The text color of the Tooltip button.

Treelist

Name	Type	Default value	Computed value
$kendo-treelist-footer-row-bg	String	`$kendo-grid-hover-bg`	`var(--kendo-hover-bg, inherit)`
Description The background color of the TreeList footer row.
$kendo-treelist-footer-row-border-width	Number	`1px`	`1px`
Description The border width of the TreeList footer row.

Treeview

Name	Type	Default value	Computed value
$kendo-treeview-font-family	String	`var( --kendo-font-family, normal )`	`var(--kendo-font-family, normal)`
Description The font family of the TreeView.
$kendo-treeview-sm-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the small TreeView.
$kendo-treeview-md-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the medium TreeView.
$kendo-treeview-lg-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the large TreeView.
$kendo-treeview-sm-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the small TreeView.
$kendo-treeview-md-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the medium TreeView.
$kendo-treeview-lg-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the large TreeView.
$kendo-treeview-indent	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The indentation of child groups in the TreeView.
$kendo-treeview-sm-item-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the small TreeView items.
$kendo-treeview-md-item-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the medium TreeView items.
$kendo-treeview-lg-item-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the large TreeView items.
$kendo-treeview-sm-item-padding-y	String	`k-spacing(1.5)`	`var(--kendo-spacing-1\.5, 0.375rem)`
Description The vertical padding of the small TreeView items.
$kendo-treeview-md-item-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the medium TreeView items.
$kendo-treeview-lg-item-padding-y	String	`k-spacing(2.5)`	`var(--kendo-spacing-2\.5, 0.625rem)`
Description The vertical padding of the large TreeView items.
$kendo-treeview-item-border-width	Number	`0`	`0`
Description The border width of the TreeView items.
$kendo-treeview-item-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the TreeView items.
$kendo-treeview-filter-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the TreeViews' filter element.
$kendo-treeview-filter-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the TreeViews' filter element.
$kendo-treeview-sizes	Map	( sm: ( font-size: $kendo-treeview-sm-font-size, line-height: $kendo-treeview-sm-line-height, item-padding-x: $kendo-treeview-sm-item-padding-x, item-padding-y: $kendo-treeview-sm-item-padding-y ), md: ( font-size: $kendo-treeview-md-font-size, line-height: $kendo-treeview-md-line-height, item-padding-x: $kendo-treeview-md-item-padding-x, item-padding-y: $kendo-treeview-md-item-padding-y ), lg: ( font-size: $kendo-treeview-lg-font-size, line-height: $kendo-treeview-lg-line-height, item-padding-x: $kendo-treeview-lg-item-padding-x, item-padding-y: $kendo-treeview-lg-item-padding-y ) )	(sm: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-1\.5, 0.375rem)), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-2, 0.5rem)), lg: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-2\.5, 0.625rem)))
Description The sizes map of the TreeView.
$kendo-treeview-bg	Color	`transparent`	`transparent`
Description The background color of the TreeView.
$kendo-treeview-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the TreeView.
$kendo-treeview-border	String	`inherit`	`inherit`
Description The border color of the TreeView.
$kendo-treeview-item-bg	Color	`transparent`	`transparent`
Description The background color of the TreeView items.
$kendo-treeview-item-text	String	`var( --kendo-component-text, inherit )`	`var(--kendo-component-text, inherit)`
Description The text color of the TreeView items.
$kendo-treeview-item-border	String	`inherit`	`inherit`
Description The border color of the TreeView items.
$kendo-treeview-item-hover-bg	String	`var( --kendo-hover-bg, inherit )`	`var(--kendo-hover-bg, inherit)`
Description The background color of hovered TreeView items.
$kendo-treeview-item-hover-text	String	`var( --kendo-hover-text, inherit )`	`var(--kendo-hover-text, inherit)`
Description The text color of hovered TreeView items.
$kendo-treeview-item-hover-border	String	`inherit`	`inherit`
Description The border color of hovered TreeView items
$kendo-treeview-item-focus-bg	Color	`$kendo-treeview-item-bg`	`transparent`
Description The background color of focused TreeView items.
$kendo-treeview-item-focus-text	String	`$kendo-treeview-item-text`	`var(--kendo-component-text, inherit)`
Description The text color of focused TreeView items.
$kendo-treeview-item-focus-border	String	`$kendo-treeview-item-border`	`inherit`
Description The border color of focused TreeView items.
$kendo-treeview-item-focus-shadow	List	`inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))`	`inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c)`
Description The box shadow of focused TreeView items.
$kendo-treeview-item-selected-bg	String	`var( --kendo-selected-bg, inherit )`	`var(--kendo-selected-bg, inherit)`
Description The background color of selected TreeView items.
$kendo-treeview-item-selected-text	String	`var( --kendo-selected-text, inherit )`	`var(--kendo-selected-text, inherit)`
Description The text color of selected TreeView items.
$kendo-treeview-item-selected-border	String	`inherit`	`inherit`
Description The border color of selected TreeView items.
$kendo-treeview-item-disabled-bg	Color	`$kendo-treeview-item-bg`	`transparent`
Description The background color of disabled TreeView items.
$kendo-treeview-item-disabled-text	String	`var( --kendo-disabled-text, inherit )`	`var(--kendo-disabled-text, inherit)`
Description The text color of disabled TreeView items.
$kendo-treeview-item-disabled-border	String	`inherit`	`inherit`
Description The border color of disabled TreeView items.
$kendo-treeview-loadmore-bg	Color	`transparent`	`transparent`
Description The background color of the Load More button in the TreeView
$kendo-treeview-loadmore-text	String	`var( --kendo-link-text, initial )`	`var(--kendo-link-text, initial)`
Description The text color of the Load More button in the TreeView
$kendo-treeview-loadmore-border	String	`inherit`	`inherit`
Description The border color of the Load More button in the TreeView
$kendo-treeview-loadmore-hover-bg	Color	`transparent`	`transparent`
Description The background color of the hovered Load More button in the TreeView
$kendo-treeview-loadmore-hover-text	String	`var( --kendo-link-hover-text, initial )`	`var(--kendo-link-hover-text, initial)`
Description The text color of the hovered Load More button in the TreeView.
$kendo-treeview-loadmore-hover-border	String	`inherit`	`inherit`
Description The border color of the hovered Load More button in the TreeView.
$kendo-treeview-loadmore-focus-bg	Color	`transparent`	`transparent`
Description The background color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-text	String	`var( --kendo-link-hover-text, initial )`	`var(--kendo-link-hover-text, initial)`
Description The text color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-border	String	`inherit`	`inherit`
Description The border color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-shadow	List	`$kendo-treeview-item-focus-shadow`	`inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c)`
Description The box shadow of the focused Load More button in the TreeView.
$kendo-treeview-checkbox-wrap-padding	String	`k-spacing(.5)`	`var(--kendo-spacing-0\.5, 0.125rem)`
Description The padding of the checkbox wrapper in the TreeView.

Typography

Name	Type	Default value	Computed value
$kendo-font-size	Number	`0.875rem`	`0.875rem`
Description The base font size across all components.
$kendo-font-size-xs	Number	`0.625rem`	`0.625rem`
Description The extra extra small font size across all components.
$kendo-font-size-sm	Number	`0.75rem`	`0.75rem`
Description The small font size across all components.
$kendo-font-size-md	Number	`$kendo-font-size`	`0.875rem`
Description The medium font size across all components.
$kendo-font-size-lg	Number	`1rem`	`1rem`
Description The large font size across all components.
$kendo-font-size-xl	Number	`1.25rem`	`1.25rem`
Description The extra large font size across all components.
$kendo-line-height	Number	`math.div( 20, 14 )`	`1.4285714286`
Description The base line height across all components.
$kendo-line-height-xs	Number	`1`	`1`
Description The extra small line height across all components.
$kendo-line-height-sm	Number	`1.25`	`1.25`
Description The small line height across all components.
$kendo-line-height-md	Number	`$kendo-line-height`	`1.4285714286`
Description The medium line height across all components.
$kendo-line-height-lg	Number	`1.5`	`1.5`
Description The large line height across all components.
$kendo-line-height-em	Calculation	`calc( #{$kendo-line-height} * 1em)`	`calc(1.4285714286 * 1em)`
Description The base line height in ems across all components.
$kendo-letter-spacing	String	`normal`	`normal`
Description The base letter spacing across all components.
$kendo-font-family	List	`"Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif`	`"Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif`
Description The font family across all components.
$kendo-font-sizes	Map	`$_default-font-sizes`	`(xxs: 0.5rem, xs: 0.625rem, sm: 0.75rem, md: 0.875rem, lg: 1rem, xl: 1.25rem)`
Description The font sizes map
$kendo-line-heights	Map	`$_default-line-heights`	`(xs: 1, sm: 1.25, md: 1.4285714286, lg: 1.5)`
Description The line heights map
$kendo-h1-font-size	Number	`32px`	`32px`
Description The font size of the highest level heading.
$kendo-h2-font-size	Number	`28px`	`28px`
Description The font size of the second highest level heading.
$kendo-h3-font-size	Number	`24px`	`24px`
Description The font size of the third highest level heading.
$kendo-h4-font-size	Number	`20px`	`20px`
Description The font size of the fourth highest level heading.
$kendo-h5-font-size	Number	`18px`	`18px`
Description The font size of the fifth highest level heading.
$kendo-h6-font-size	Number	`16px`	`16px`
Description The font size of the sixth highest level heading.
$kendo-h1-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the highest level heading.
$kendo-h2-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the second highest level heading.
$kendo-h3-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the third highest level heading.
$kendo-h4-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the fourth highest level heading.
$kendo-h6-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the sixth highest level heading.
$kendo-h1-line-height	Number	`40px`	`40px`
Description The line height of the highest level heading.
$kendo-h2-line-height	Number	`36px`	`36px`
Description The line height of the second highest level heading.
$kendo-h3-line-height	Number	`32px`	`32px`
Description The line height of the third highest level heading.
$kendo-h4-line-height	Number	`28px`	`28px`
Description The line height of the fourth highest level heading.
$kendo-h5-line-height	Number	`24px`	`24px`
Description The line height of the fifth highest level heading.
$kendo-h2-font-weight	String	`var( --kendo-font-weight-semibold, normal )`	`var(--kendo-font-weight-semibold, normal)`
Description The font weight of the highest level heading.
$kendo-h1-font-weight	String	`var( --kendo-font-weight-semibold, normal )`	`var(--kendo-font-weight-semibold, normal)`
Description The font weight of the second highest level heading.
$kendo-h3-font-weight	String	`var( --kendo-font-weight-semibold, normal )`	`var(--kendo-font-weight-semibold, normal)`
Description The font weight of the third highest level heading.
$kendo-h4-font-weight	String	`var( --kendo-font-weight-semibold, normal )!default`	`var(--kendo-font-weight-semibold, normal)`
Description The font weight of the fourth highest level heading.
$kendo-h5-font-weight	String	`var( --kendo-font-weight-semibold, normal )!default`	`var(--kendo-font-weight-semibold, normal)`
Description The font weight of the fifth highest level heading.
$kendo-h6-font-weight	String	`var( --kendo-font-weight-semibold, normal )!default`	`var(--kendo-font-weight-semibold, normal)`
Description The font weight of the sixth highest level heading.
$kendo-h1-letter-spacing	String	`var( --kendo-letter-spacing, normal )`	`var(--kendo-letter-spacing, normal)`
Description The letter spacing of the highest level heading.
$kendo-h2-letter-spacing	String	`var( --kendo-letter-spacing, normal )`	`var(--kendo-letter-spacing, normal)`
Description The letter spacing of the second highest level heading.
$kendo-h3-letter-spacing	String	`var( --kendo-letter-spacing, normal )`	`var(--kendo-letter-spacing, normal)`
Description The letter spacing of the third highest level heading.
$kendo-h4-letter-spacing	String	`var( --kendo-letter-spacing, normal )`	`var(--kendo-letter-spacing, normal)`
Description The letter spacing of the fourth highest level heading.
$kendo-h5-letter-spacing	String	`var( --kendo-letter-spacing, normal )`	`var(--kendo-letter-spacing, normal)`
Description The letter spacing of the fifth highest level heading.
$kendo-h6-letter-spacing	String	`var( --kendo-letter-spacing, normal )`	`var(--kendo-letter-spacing, normal)`
Description The letter spacing of the sixth highest level heading.
$kendo-h1-margin	List	`0 0 var( --kendo-font-size, inherit )`	`0 0 var(--kendo-font-size, inherit)`
Description The margin of the highest level heading.
$kendo-h2-margin	List	`0 0 var( --kendo-font-size, inherit )`	`0 0 var(--kendo-font-size, inherit)`
Description The margin of the second highest level heading.
$kendo-h3-margin	List	`0 0 var( --kendo-font-size, inherit )`	`0 0 var(--kendo-font-size, inherit)`
Description The margin of the third highest level heading.
$kendo-h4-margin	List	`0 0 var( --kendo-font-size, inherit )`	`0 0 var(--kendo-font-size, inherit)`
Description The margin of the fourth highest level heading.
$kendo-h5-margin	List	`0 0 var( --kendo-font-size, inherit )`	`0 0 var(--kendo-font-size, inherit)`
Description The margin of the fifth highest level heading.
$kendo-h6-margin	List	`0 0 var( --kendo-font-size, inherit )`	`0 0 var(--kendo-font-size, inherit)`
Description The margin of the sixth highest level heading.
$kendo-headings	Map	( h1: ( font-size: $kendo-h1-font-size, font-family: $kendo-h1-font-family, line-height: $kendo-h1-line-height, font-weight: $kendo-h1-font-weight, letter-spacing: $kendo-h1-letter-spacing, margin: $kendo-h1-margin ), h2: ( font-size: $kendo-h2-font-size, font-family: $kendo-h2-font-family, line-height: $kendo-h2-line-height, font-weight: $kendo-h2-font-weight, letter-spacing: $kendo-h2-letter-spacing, margin: $kendo-h2-margin ), h3: ( font-size: $kendo-h3-font-size, font-family: $kendo-h3-font-family, line-height: $kendo-h3-line-height, font-weight: $kendo-h3-font-weight, letter-spacing: $kendo-h3-letter-spacing, margin: $kendo-h3-margin ), h4: ( font-size: $kendo-h4-font-size, font-family: $kendo-h4-font-family, line-height: $kendo-h4-line-height, font-weight: $kendo-h4-font-weight, letter-spacing: $kendo-h4-letter-spacing, margin: $kendo-h4-margin ), h5: ( font-size: $kendo-h5-font-size, font-family: $kendo-h5-font-family, line-height: $kendo-h5-line-height, font-weight: $kendo-h5-font-weight, letter-spacing: $kendo-h5-letter-spacing, margin: $kendo-h5-margin ), h6: ( font-size: $kendo-h6-font-size, font-family: $kendo-h6-font-family, line-height: $kendo-h6-line-height, font-weight: $kendo-h6-font-weight, letter-spacing: $kendo-h6-letter-spacing, margin: $kendo-h6-margin ) )	(h1: (font-size: 32px, font-family: var(--kendo-font-family, inherit), line-height: 40px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal), margin: 0 0 var(--kendo-font-size, inherit)), h2: (font-size: 28px, font-family: var(--kendo-font-family, inherit), line-height: 36px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal), margin: 0 0 var(--kendo-font-size, inherit)), h3: (font-size: 24px, font-family: var(--kendo-font-family, inherit), line-height: 32px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal), margin: 0 0 var(--kendo-font-size, inherit)), h4: (font-size: 20px, font-family: var(--kendo-font-family, inherit), line-height: 28px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal), margin: 0 0 var(--kendo-font-size, inherit)), h5: (font-size: 18px, font-family: var(--kendo-font-family, inherit), line-height: 24px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal), margin: 0 0 var(--kendo-font-size, inherit)), h6: (font-size: 16px, font-family: var(--kendo-font-family, inherit), line-height: 22px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal), margin: 0 0 var(--kendo-font-size, inherit)))
Description The headings Map.
$kendo-paragraph-margin	List	`0 0 var( --kendo-font-size, inherit)`	`0 0 var(--kendo-font-size, inherit)`
Description The margin of the paragraph.
$kendo-paragraph-font-size	String	`var( --kendo-font-size, inherit)`	`var(--kendo-font-size, inherit)`
Description The font size of the paragraph.
$kendo-paragraph-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the paragraph.
$kendo-paragraph-line-height	String	`var( --kendo-line-height, normal)`	`var(--kendo-line-height, normal)`
Description The line height of the paragraph.
$kendo-paragraph-font-weight	String	`var( --kendo-font-weight, normal)`	`var(--kendo-font-weight, normal)`
Description The font weight of the paragraph.
$kendo-paragraph-letter-spacing	String	`var( --kendo-letter-spacing, normal)`	`var(--kendo-letter-spacing, normal)`
Description The letter spacing of the paragraph.
$kendo-code-font-size	String	`var( --kendo-font-size, inherit)`	`var(--kendo-font-size, inherit)`
Description The font size of the code tag.
$kendo-code-font-family	List	`$kendo-font-family-monospace`	`SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace`
Description The font family of the code tag.
$kendo-code-line-height	String	`var( --kendo-line-height, normal)`	`var(--kendo-line-height, normal)`
Description The line height of the code tag.
$kendo-code-font-weight	String	`var( --kendo-font-weight, normal)`	`var(--kendo-font-weight, normal)`
Description The font weight of the code tag.
$kendo-code-letter-spacing	String	`var( --kendo-letter-spacing, normal)`	`var(--kendo-letter-spacing, normal)`
Description The letter spacing of the code tag.
$kendo-code-padding-x	String	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`
Description The horizontal padding of the code tag.
$kendo-code-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical padding of the code tag.
$kendo-pre-padding-x	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The horizontal padding of the preformatted text.
$kendo-pre-padding-y	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The vertical padding of the preformatted text.
$kendo-code-border-width	Number	`1px`	`1px`
Description The width of the border of the code tag.
$kendo-code-bg	String	`var( --kendo-component-bg, initial)`	`var(--kendo-component-bg, initial)`
Description The background color of the code tag.
$kendo-code-text	String	`var( --kendo-component-text, initial)`	`var(--kendo-component-text, initial)`
Description The text color of the code tag.
$kendo-code-border	String	`var( --kendo-component-border, initial)`	`var(--kendo-component-border, initial)`
Description The border color of the code tag.
$kendo-display1-font-size	Calculation	`calc( var( --kendo-font-size, .875rem ) * 9 )`	`calc(var(--kendo-font-size, 0.875rem) * 9)`
Description The font size of the largest display text.
$kendo-display2-font-size	Calculation	`calc( var( --kendo-font-size, .875rem ) * 6 )`	`calc(var(--kendo-font-size, 0.875rem) * 6)`
Description The font size of the second largest display text.
$kendo-display3-font-size	Number	`68px`	`68px`
Description The font size of the third largest display text.
$kendo-display4-font-size	Calculation	`calc( var( --kendo-font-size, .875rem ) * 3 )`	`calc(var(--kendo-font-size, 0.875rem) * 3)`
Description The font size of the fourth largest display text.
$kendo-display1-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the largest display text.
$kendo-display2-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the second largest display text.
$kendo-display3-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the third largest display text.
$kendo-display4-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the fourth largest display text.
$kendo-display1-line-height	Number	`118px`	`118px`
Description The line height of the largest display text.
$kendo-display2-line-height	Number	`94px`	`94px`
Description The line height of the second largest display text.
$kendo-display3-line-height	Number	`76px`	`76px`
Description The line height of the third largest display text.
$kendo-display4-line-height	Number	`52px`	`52px`
Description The line height of the fourth largest display text.
$kendo-display1-font-weight	String	`var( --kendo-font-weight-semibold, normal )`	`var(--kendo-font-weight-semibold, normal)`
Description The font weight of the largest display text.
$kendo-display2-font-weight	String	`var( --kendo-font-weight-semibold, normal )`	`var(--kendo-font-weight-semibold, normal)`
Description The font weight of the second largest display text.
$kendo-display3-font-weight	String	`var( --kendo-font-weight-semibold, normal )`	`var(--kendo-font-weight-semibold, normal)`
Description The font weight of the third largest display text.
$kendo-display4-font-weight	String	`var( --kendo-font-weight-semibold, normal )`	`var(--kendo-font-weight-semibold, normal)`
Description The font weight of the fourth largest display text.
$kendo-display1-letter-spacing	String	`var( --kendo-letter-spacing, normal )`	`var(--kendo-letter-spacing, normal)`
Description The letter spacing of the largest display text.
$kendo-display2-letter-spacing	String	`var( --kendo-letter-spacing, normal )`	`var(--kendo-letter-spacing, normal)`
Description The letter spacing of the second largest display text.
$kendo-display3-letter-spacing	String	`var( --kendo-letter-spacing, normal )`	`var(--kendo-letter-spacing, normal)`
Description The letter spacing of the third largest display text.
$kendo-display4-letter-spacing	String	`var( --kendo-letter-spacing, normal )`	`var(--kendo-letter-spacing, normal)`
Description The letter spacing of the fourth largest display text.
$kendo-display	Map	( 1: ( font-size: $kendo-display1-font-size, font-family: $kendo-display1-font-family, line-height: $kendo-display1-line-height, font-weight: $kendo-display1-font-weight, letter-spacing: $kendo-display1-letter-spacing ), 2: ( font-size: $kendo-display2-font-size, font-family: $kendo-display2-font-family, line-height: $kendo-display2-line-height, font-weight: $kendo-display2-font-weight, letter-spacing: $kendo-display2-letter-spacing ), 3: ( font-size: $kendo-display3-font-size, font-family: $kendo-display3-font-family, line-height: $kendo-display3-line-height, font-weight: $kendo-display3-font-weight, letter-spacing: $kendo-display3-letter-spacing ), 4: ( font-size: $kendo-display4-font-size, font-family: $kendo-display4-font-family, line-height: $kendo-display4-line-height, font-weight: $kendo-display4-font-weight, letter-spacing: $kendo-display4-letter-spacing ) )	(1: (font-size: calc(var(--kendo-font-size, 0.875rem) * 9), font-family: var(--kendo-font-family, inherit), line-height: 118px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal)), 2: (font-size: calc(var(--kendo-font-size, 0.875rem) * 6), font-family: var(--kendo-font-family, inherit), line-height: 94px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal)), 3: (font-size: 68px, font-family: var(--kendo-font-family, inherit), line-height: 76px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal)), 4: (font-size: calc(var(--kendo-font-size, 0.875rem) * 3), font-family: var(--kendo-font-family, inherit), line-height: 52px, font-weight: var(--kendo-font-weight-semibold, normal), letter-spacing: var(--kendo-letter-spacing, normal)))
Description The displays Map.
$kendo-font-size-xxs	Number	`0.5rem`	`0.5rem`
Description The extra extra small font size across all components.
$kendo-font-weight	Number	`400`	`400`
Description The base font weight across all components.
$kendo-font-weight-thin	Number	`100`	`100`
Description The thin font weight across all components.
$kendo-font-weight-extra-light	Number	`200`	`200`
Description The extra light font weight across all components.
$kendo-font-weight-light	Number	`300`	`300`
Description The light font weight across all components.
$kendo-font-weight-normal	Number	`$kendo-font-weight`	`400`
Description The normal font weight across all components.
$kendo-font-weight-medium	Number	`500`	`500`
Description The medium font weight across all components.
$kendo-font-weight-semibold	Number	`600`	`600`
Description The semibold font weight across all components.
$kendo-font-weight-bold	Number	`700`	`700`
Description The bold font weight across all components.
$kendo-font-weight-extra-bold	Number	`800`	`800`
Description The extra bold font weight across all components.
$kendo-font-weight-black	Number	`900`	`900`
Description The most pronounced font weight across all components.
$kendo-letter-spacing-tightest	Number	`-.15px`	`-0.15px`
Description The tightest letter spacing across all components.
$kendo-letter-spacing-tighter	Number	`-.10px`	`-0.1px`
Description Slightly looser than the tighter letter spacing across all components.
$kendo-letter-spacing-tight	Number	`-.5px`	`-0.5px`
Description Moderately tight letter spacing across all components.
$kendo-letter-spacing-normal	Number	`0px`	`0px`
Description The normal letter spacing across all components.
$kendo-letter-spacing-wide	Number	`.5px`	`0.5px`
Description Wide letter spacing across all components.
$kendo-letter-spacing-wider	Number	`.10px`	`0.1px`
Description Slightly wider than the wide letter spacing across all components.
$kendo-letter-spacing-widest	Number	`.15px`	`0.15px`
Description The widest letter spacing across all components.
$kendo-font-family-sans	List	`Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans`	`Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans`
Description The sans font family across all components.
$kendo-font-family-serif	List	`"Times New Roman", Georgia, Garamond, Palatino, Baskerville`	`"Times New Roman", Georgia, Garamond, Palatino, Baskerville`
Description The serif font family across all components.
$kendo-font-family-sans-serif	List	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description The sans-serif font family across all components.
$kendo-font-family-monospace	List	`SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace`	`SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace`
Description The monospace font family across all components.
$kendo-font-weights	Map	`k-map-merge( $_default-font-weights, $kendo-font-weights )`	`(thin: 100, extra-light: 200, light: 300, normal: 400, medium: 500, semibold: 600, bold: 700)`
Description The font weights map
$kendo-letter-spacings	Map	`k-map-merge( $_default-letter-spacings, $kendo-letter-spacings )`	`(tightest: -0.15px, tighter: -0.1px, tight: -0.5px, normal: 0px, wide: 0.5px, wider: 0.1px, widest: 0.15px)`
Description The letter spacings map
$kendo-font-families	Map	`k-map-merge( $_default-font-families, $kendo-font-families )`	`(sans: (Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans), serif: ("Times New Roman", Georgia, Garamond, Palatino, Baskerville), sans-serif: (system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), monospace: (SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace))`
Description The font families map

Upload

Name	Type	Default value	Computed value
$kendo-upload-border-width	Number	`1px`	`1px`
Description The width of the border around the Upload.
$kendo-upload-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Upload.
$kendo-upload-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Upload.
$kendo-upload-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Upload.
$kendo-upload-max-height	Number	`300px`	`300px`
Description The maximum height of the list with uploaded items.
$kendo-upload-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Upload.
$kendo-upload-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Upload.
$kendo-upload-border	String	`var( --kendo-component-border, initial )`	`var(--kendo-component-border, initial)`
Description The border color of the Upload.
$kendo-upload-dropzone-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of the Upload dropzone.
$kendo-upload-dropzone-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of the Upload dropzone.
$kendo-upload-dropzone-text	String	`if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-subtle, #605e5c)`
Description The text color of the Upload dropzone.
$kendo-upload-dropzone-bg	String	`if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))`	`var(--kendo-color-surface, #faf9f8)`
Description The background color of the Upload dropzone.
$kendo-upload-dropzone-border	String	`if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))`	`color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)`
Description The border color of the Upload dropzone.
$kendo-upload-dropzone-hover-bg	String	`var( --kendo-hover-bg, inherit )`	`var(--kendo-hover-bg, inherit)`
Description The background color of the hovered Upload dropzone.
$kendo-upload-status-text	String	`var( --kendo-subtle-text, inherit )`	`var(--kendo-subtle-text, inherit)`
Description The text color of the Upload status message.
$kendo-upload-status-text-opacity	Null	`null`	`null`
Description The opacity of the Upload status message.
$kendo-upload-item-padding-x	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The horizontal padding of an uploaded item.
$kendo-upload-item-padding-y	String	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`
Description The vertical padding of an uploaded item.
$kendo-upload-multiple-items-spacing	String	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`
Description The vertical spacing between uploaded batch items.
$kendo-upload-validation-font-size	String	`var( --kendo-font-size-xs, inherit )`	`var(--kendo-font-size-xs, inherit)`
Description The font size of the Upload validation message.
$kendo-upload-icon-spacing	String	`var( --kendo-icon-spacing, .5rem )`	`var(--kendo-icon-spacing, 0.5rem)`
Description The horizontal spacing of the Upload status icon.
$kendo-upload-icon-color	String	`var( --kendo-subtle-text, inherit )`	`var(--kendo-subtle-text, inherit)`
Description The color of the uploaded items icon.
$kendo-upload-progress-thickness	Number	`2px`	`2px`
Description The thickness of the Upload progress bar.
$kendo-upload-progress-bg	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The background color of the Upload progress bar.
$kendo-upload-success-text	String	`if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 ))`	`var(--kendo-color-success-on-surface, #107c10)`
Description The success text color of the Upload.
$kendo-upload-success-bg	String	`if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 ))`	`var(--kendo-color-success-on-surface, #107c10)`
Description The success background color of the Upload progress bar.
$kendo-upload-error-text	String	`if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 ))`	`var(--kendo-color-error-on-surface, #a4262c)`
Description The error text color of the Upload.
$kendo-upload-error-bg	String	`if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 ))`	`var(--kendo-color-error-on-surface, #a4262c)`
Description The error background color of the Upload progress bar.
$kendo-upload-focus-shadow	List	`inset 0 0 0 2px rgba(0, 0, 0, .13)`	`inset 0 0 0 2px rgba(0, 0, 0, 0.13)`
Description The shadow of the focused Upload button, actions and uploaded items.

Window

Name	Type	Default value	Computed value
$kendo-window-border-width	List	`k-spacing(1) 0 0`	`var(--kendo-spacing-1, 0.25rem) 0 0`
Description The width of the border around the Window.
$kendo-window-border-radius	String	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`
Description The border radius of the Window.
$kendo-window-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Window.
$kendo-window-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Window.
$kendo-window-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Window.
$kendo-window-titlebar-padding-x	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The horizontal padding of the Window titlebar.
$kendo-window-titlebar-padding-y	String	`k-spacing(5)`	`var(--kendo-spacing-5, 1.25rem)`
Description The vertical padding of the Window titlebar.
$kendo-window-titlebar-border-width	Number	`0`	`0`
Description The width of the border of the Window titlebar.
$kendo-window-titlebar-border-style	String	`solid`	`solid`
Description The style of the border of the Window titlebar.
$kendo-window-title-font-size	String	`var( --kendo-font-size-xl, inherit )`	`var(--kendo-font-size-xl, inherit)`
Description The font size of the title of the Window.
$kendo-window-title-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the title of the Window.
$kendo-window-title-font-weight	String	`var( --kendo-font-weight-bold, bold )`	`var(--kendo-font-weight-bold, bold)`
Description The font weight of the title of the Window.
$kendo-window-actions-gap	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The spacing between the buttons in the Window titlebar.
$kendo-window-action-opacity	Number	`1`	`1`
Description OThe opacity of the buttons in the Window titlebar.
$kendo-window-action-hover-opacity	Number	`1`	`1`
Description The opacity of the hovered buttons in the Window titlebar.
$kendo-window-inner-padding-x	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The horizontal padding of the content of the Window.
$kendo-window-inner-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the content of the Window.
$kendo-window-buttongroup-padding-x	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The horizontal padding of the Window action buttons.
$kendo-window-buttongroup-padding-y	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The vertical padding of the Window action buttons.
$kendo-window-buttongroup-border-width	Number	`0`	`0`
Description The width of the top border of the Window action buttons.
$kendo-window-buttongroup-spacing	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The spacing between the Window action buttons.
$kendo-window-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Window.
$kendo-window-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Window.
$kendo-window-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the Window.
$kendo-window-shadow	String	`var( --kendo-box-shadow-depth-8, none )`	`var(--kendo-box-shadow-depth-8, none)`
Description The box shadow of the Window.
$kendo-window-focus-shadow	String	`var( --kendo-box-shadow-depth-9, none )`	`var(--kendo-box-shadow-depth-9, none)`
Description The box shadow of the focused Window.
$kendo-window-titlebar-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Window titlebar.
$kendo-window-titlebar-text	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The text color of the Window titlebar.
$kendo-window-titlebar-border	String	`if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))`	`var(--kendo-color-primary, #0078d4)`
Description The border color of the Window titlebar.
$kendo-window-sizes	Map	`( sm: 300px, md: 800px, lg: 1200px )`	`(sm: 300px, md: 800px, lg: 1200px)`
Description The map of the width of the different Window sizes.
$kendo-window-brand-colors	Map	`( primary: primary )`	`(primary: primary)`
Description The theme variations for the Window.
$kendo-window-theme-colors	Map	`()`	`(primary: (bg: var(--kendo-color-primary, #0078d4), text: var(--kendo-color-on-primary, #ffffff), border: var(--kendo-color-primary, #0078d4)), dark: (bg: var(--kendo-color-dark, #323130), text: var(--kendo-color-on-dark, #ffffff), border: var(--kendo-color-dark, #323130)), light: (bg: var(--kendo-color-light, #d2d0ce), text: var(--kendo-color-on-light, #323130), border: var(--kendo-color-light, #d2d0ce)))`
Description The theme colors map for the Window.

Wizard

Name	Type	Default value	Computed value
$kendo-wizard-border-width	Number	`0px`	`0px`
Description The border width of the Wizard.
$kendo-wizard-padding-x	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The horizontal padding of the Wizard.
$kendo-wizard-padding-y	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The vertical padding of the Wizard.
$kendo-wizard-font-size	String	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`
Description The font size of the Wizard.
$kendo-wizard-line-height	String	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`
Description The line height of the Wizard.
$kendo-wizard-font-family	String	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`
Description The font family of the Wizard.
$kendo-wizard-steps-padding-x	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The horizontal padding of the Wizard steps.
$kendo-wizard-steps-padding-y	String	`k-spacing(3)`	`var(--kendo-spacing-3, 0.75rem)`
Description The vertical padding of the Wizard steps.
$kendo-wizard-content-padding-x	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The horizontal padding of the Wizard content.
$kendo-wizard-content-padding-y	String	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`
Description The vertical padding of the Wizard content.
$kendo-wizard-content-text	String	`var( --kendo-component-text, initial )`	`var(--kendo-component-text, initial)`
Description The text color of the Wizard content.
$kendo-wizard-content-bg	String	`var( --kendo-component-bg, initial )`	`var(--kendo-component-bg, initial)`
Description The background color of the Wizard content.
$kendo-wizard-buttons-margin-x	String	`k-spacing(7)`	`var(--kendo-spacing-7, 1.75rem)`
Description The horizontal margin of the Wizard's Button container.
$kendo-wizard-buttons-margin-y	String	`k-spacing(6)`	`var(--kendo-spacing-6, 1.5rem)`
Description The vertical margin of the Wizard Button container.
$kendo-wizard-step-focus-border	String	`if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))`	`var(--kendo-color-base-emphasis, #605e5c)`
Description The outline of the focused Wizard step.

Classnames

This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.

`.k-spacer`

This is equivalent to flex: 1 0 auto;. If every other element has a fixed size in a flex container, the spacer will take up the remaining space.

`.k-spacer-sized`

This is equivalent to flex-grow: 0;. The spacer will not take any of the remaining space in a flex container.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

Customization

In this article

Not finding the help you need?