Sass Variables
The Telerik and Kendo UI ColorPicker is a composite UI component that consists of Picker, FlatColorPicker, and a Popup component. To configure and customize the appearance of the ColorPicker, modify the Picker and FlatColorPicker Sass variables, as well as the Sass variables provided by the Popup component.
Picker Variables
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-picker-bg | $kendo-button-bg | var(--kendo-color-base, #f5f5f5) | Default: $kendo-button-bgComputed: var(--kendo-color-base, #f5f5f5) |
| Description: The background color of the Picker components. | |||
kendo-picker-text | $kendo-button-text | var(--kendo-color-on-base, #3d3d3d) | Default: $kendo-button-textComputed: var(--kendo-color-on-base, #3d3d3d) |
| Description: The text color of the Picker components. | |||
kendo-picker-border | $kendo-button-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-button-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the Picker components. | |||
kendo-picker-gradient | $kendo-button-gradient | null | Default: $kendo-button-gradientComputed: null |
| Description: The gradient of the Picker components. | |||
kendo-picker-shadow | $kendo-button-shadow | null | Default: $kendo-button-shadowComputed: null |
| Description: The shadow of the Picker components. | |||
kendo-picker-hover-bg | $kendo-button-hover-bg | var(--kendo-color-base-hover, #ebebeb) | Default: $kendo-button-hover-bgComputed: var(--kendo-color-base-hover, #ebebeb) |
| Description: The background color of the hovered Picker components. | |||
kendo-picker-hover-text | $kendo-button-hover-text | null | Default: $kendo-button-hover-textComputed: null |
| Description: The text color of the hovered Picker components. | |||
kendo-picker-hover-border | $kendo-button-hover-border | null | Default: $kendo-button-hover-borderComputed: null |
| Description: The border color of the hovered Picker components. | |||
kendo-picker-hover-gradient | $kendo-button-hover-gradient | null | Default: $kendo-button-hover-gradientComputed: null |
| Description: The gradient of the hovered Picker components. | |||
kendo-picker-hover-shadow | $kendo-button-hover-shadow | null | Default: $kendo-button-hover-shadowComputed: null |
| Description: The shadow of the hovered Picker components. | |||
kendo-picker-focus-bg | null | null | Default: nullComputed: null |
| Description: The background color of the focused Picker components. | |||
kendo-picker-focus-text | null | null | Default: nullComputed: null |
| Description: The text color of the focused Picker components. | |||
kendo-picker-focus-border | null | null | Default: nullComputed: null |
| Description: The border color of the focused Picker components. | |||
kendo-picker-focus-gradient | null | null | Default: nullComputed: null |
| Description: The gradient of the focused Picker components. | |||
kendo-picker-focus-shadow | $kendo-button-focus-shadow | (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) | Default: $kendo-button-focus-shadowComputed: (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) |
| Description: The shadow of the focused Picker components. | |||
kendo-picker-disabled-bg | null | null | Default: nullComputed: null |
| Description: The background color of the disabled Picker components. | |||
kendo-picker-disabled-text | null | null | Default: nullComputed: null |
| Description: The text color of the disabled Picker components. | |||
kendo-picker-disabled-border | null | null | Default: nullComputed: null |
| Description: The border color of the disabled Picker components. | |||
kendo-picker-disabled-gradient | null | null | Default: nullComputed: null |
| Description: The gradient of the disabled Picker components. | |||
kendo-picker-disabled-shadow | null | null | Default: nullComputed: null |
| Description: The shadow of the disabled Picker components. | |||
kendo-picker-outline-bg | null | null | Default: nullComputed: null |
| Description: The background color of the outline Picker components. | |||
kendo-picker-outline-text | $kendo-button-text | var(--kendo-color-on-base, #3d3d3d) | Default: $kendo-button-textComputed: var(--kendo-color-on-base, #3d3d3d) |
| Description: The text color of the outline Picker components. | |||
kendo-picker-outline-border | color-mix(in srgb, k-color(on-base) 50%, transparent) | color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent) | Default: color-mix(in srgb, k-color(on-base) 50%, transparent)Computed: color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent) |
| Description: The border color of the outline Picker components. | |||
kendo-picker-outline-hover-bg | $kendo-picker-outline-text | var(--kendo-color-on-base, #3d3d3d) | Default: $kendo-picker-outline-textComputed: var(--kendo-color-on-base, #3d3d3d) |
| Description: The background color of the outline hovered Picker components. | |||
kendo-picker-outline-hover-text | k-color(base) | var(--kendo-color-base, #f5f5f5) | Default: k-color(base)Computed: var(--kendo-color-base, #f5f5f5) |
| Description: The text color of the outline hovered Picker components. | |||
kendo-picker-outline-hover-border | $kendo-picker-outline-hover-bg | var(--kendo-color-on-base, #3d3d3d) | Default: $kendo-picker-outline-hover-bgComputed: var(--kendo-color-on-base, #3d3d3d) |
| Description: The border color of the outline hovered Picker components. | |||
kendo-picker-outline-focus-bg | null | null | Default: nullComputed: null |
| Description: The background color of the outline focused Picker components. | |||
kendo-picker-outline-focus-text | null | null | Default: nullComputed: null |
| Description: The text color of the outline focused Picker components. | |||
kendo-picker-outline-focus-border | null | null | Default: nullComputed: null |
| Description: The border color of the outline focused Picker components. | |||
kendo-picker-outline-focus-shadow | $kendo-picker-focus-shadow | (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) | Default: $kendo-picker-focus-shadowComputed: (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) |
| Description: The shadow of the outline focused Picker components. | |||
kendo-picker-outline-hover-focus-bg | null | null | Default: nullComputed: null |
| Description: The background color of the outline hovered and focused Picker components. | |||
kendo-picker-outline-hover-focus-text | null | null | Default: nullComputed: null |
| Description: The text color of the outline hovered and focused Picker components. | |||
kendo-picker-outline-hover-focus-border | null | null | Default: nullComputed: null |
| Description: The border color of the outline hovered and focused Picker components. | |||
kendo-picker-flat-bg | null | null | Default: nullComputed: null |
| Description: The background color of the flat Picker components. | |||
kendo-picker-flat-text | $kendo-button-text | var(--kendo-color-on-base, #3d3d3d) | Default: $kendo-button-textComputed: var(--kendo-color-on-base, #3d3d3d) |
| Description: The text color of the flat Picker components. | |||
kendo-picker-flat-border | $kendo-button-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-button-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the flat Picker components. | |||
kendo-picker-flat-hover-bg | color-mix(in srgb, k-color(on-base) 4%, transparent) | color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 4%, transparent) | Default: color-mix(in srgb, k-color(on-base) 4%, transparent)Computed: color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 4%, transparent) |
| Description: The background color of the flat hovered Picker components. | |||
kendo-picker-flat-hover-text | null | null | Default: nullComputed: null |
| Description: The text color of the flat hovered Picker components. | |||
kendo-picker-flat-hover-border | k-color(border-alt) | var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) | Default: k-color(border-alt)Computed: var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) |
| Description: The border color of the flat hovered Picker components. | |||
kendo-picker-flat-focus-bg | null | null | Default: nullComputed: null |
| Description: The background color of the flat focused Picker components. | |||
kendo-picker-flat-focus-text | null | null | Default: nullComputed: null |
| Description: The text color of the flat focused Picker components. | |||
kendo-picker-flat-focus-border | null | null | Default: nullComputed: null |
| Description: The border color of the flat focused Picker components. | |||
kendo-picker-flat-focus-shadow | $kendo-picker-focus-shadow | (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) | Default: $kendo-picker-focus-shadowComputed: (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) |
| Description: The shadow of the flat focused Picker components. | |||
kendo-picker-flat-hover-focus-bg | null | null | Default: nullComputed: null |
| Description: The background color of the flat hovered and focused Picker components. | |||
kendo-picker-flat-hover-focus-text | null | null | Default: nullComputed: null |
| Description: The text color of the flat hovered and focused Picker components. | |||
kendo-picker-flat-hover-focus-border | null | null | Default: nullComputed: null |
| Description: The border color of the flat hovered and focused Picker components. | |||
