Customizing Color-preview

Variables

The following table lists the available variables for customization.

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