Customizing Button
Variables
The following table lists the available variables for customization.
| 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. | |||
