Customizing Colorpalette

Variables

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-color-palette-font-family	String	`$kendo-font-family`	`inherit`
Description The font family of the ColorPalette.
$kendo-color-palette-font-size	Number	`$kendo-font-size-md`	`14px`
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-width	Number	`k-map-get( $kendo-spacing, 6 )`	`24px`
Description The width of the ColorPalette tile.
$kendo-color-palette-tile-height	Number	`$kendo-color-palette-tile-width`	`24px`
Description The height of the ColorPalette tile.
$kendo-color-palette-tile-focus-shadow	List	`0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 )`	`0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.5)`
Description The shadow of the ColorPalette focused tile.
$kendo-color-palette-tile-hover-shadow	List	`0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 )`	`0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.8)`
Description The shadow of the ColorPalette hovered tile.
$kendo-color-palette-tile-selected-shadow	List	`0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 )`	`0 1px 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px white`
Description The shadow of the ColorPalette selected tile.