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