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