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-bg Computed: 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-text Computed: 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-border Computed: 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-gradient Computed: null |
Description: The gradient of the Picker components. | |||
kendo-picker-shadow | $kendo-button-shadow | null | Default: $kendo-button-shadow Computed: 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-bg Computed: 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-text Computed: null |
Description: The text color of the hovered Picker components. | |||
kendo-picker-hover-border | $kendo-button-hover-border | null | Default: $kendo-button-hover-border Computed: null |
Description: The border color of the hovered Picker components. | |||
kendo-picker-hover-gradient | $kendo-button-hover-gradient | null | Default: $kendo-button-hover-gradient Computed: null |
Description: The gradient of the hovered Picker components. | |||
kendo-picker-hover-shadow | $kendo-button-hover-shadow | null | Default: $kendo-button-hover-shadow Computed: null |
Description: The shadow of the hovered Picker components. | |||
kendo-picker-focus-bg | $kendo-button-focus-bg | null | Default: $kendo-button-focus-bg Computed: null |
Description: The background color of the focused Picker components. | |||
kendo-picker-focus-text | $kendo-button-focus-text | null | Default: $kendo-button-focus-text Computed: null |
Description: The text color of the focused Picker components. | |||
kendo-picker-focus-border | $kendo-button-focus-border | null | Default: $kendo-button-focus-border Computed: null |
Description: The border color of the focused Picker components. | |||
kendo-picker-focus-gradient | $kendo-button-focus-gradient | null | Default: $kendo-button-focus-gradient Computed: 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-shadow Computed: (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: null Computed: null |
Description: The background color of the disabled Picker components. | |||
kendo-picker-disabled-text | null | null | Default: null Computed: null |
Description: The text color of the disabled Picker components. | |||
kendo-picker-disabled-border | null | null | Default: null Computed: null |
Description: The border color of the disabled Picker components. | |||
kendo-picker-disabled-gradient | null | null | Default: null Computed: null |
Description: The gradient of the disabled Picker components. | |||
kendo-picker-disabled-shadow | null | null | Default: null Computed: null |
Description: The shadow of the disabled Picker components. | |||
kendo-picker-outline-bg | null | null | Default: null Computed: 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-text Computed: var(--kendo-color-on-base, #3d3d3d) |
Description: The text color of the outline Picker components. | |||
kendo-picker-outline-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-picker-outline-text, .5)) | color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent) | Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-picker-outline-text, .5)) 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-text Computed: var(--kendo-color-on-base, #3d3d3d) |
Description: The background color of the outline hovered Picker components. | |||
kendo-picker-outline-hover-text | if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg )) | var(--kendo-color-base, #f5f5f5) | Default: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg )) 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-bg Computed: var(--kendo-color-on-base, #3d3d3d) |
Description: The border color of the outline hovered Picker components. | |||
kendo-picker-outline-focus-bg | null | null | Default: null Computed: null |
Description: The background color of the outline focused Picker components. | |||
kendo-picker-outline-focus-text | null | null | Default: null Computed: null |
Description: The text color of the outline focused Picker components. | |||
kendo-picker-outline-focus-border | null | null | Default: null Computed: 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-shadow Computed: (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: null Computed: null |
Description: The background color of the outline hovered and focused Picker components. | |||
kendo-picker-outline-hover-focus-text | null | null | Default: null Computed: null |
Description: The text color of the outline hovered and focused Picker components. | |||
kendo-picker-outline-hover-focus-border | null | null | Default: null Computed: null |
Description: The border color of the outline hovered and focused Picker components. | |||
kendo-picker-flat-bg | null | null | Default: null Computed: 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-text Computed: 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-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: The border color of the flat Picker components. | |||
kendo-picker-flat-hover-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 4%, transparent), rgba( $kendo-button-text, .04 )) | color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 4%, transparent) | Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 4%, transparent), rgba( $kendo-button-text, .04 )) 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: null Computed: null |
Description: The text color of the flat hovered Picker components. | |||
kendo-picker-flat-hover-border | if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 )) | var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) | Default: if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 )) 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: null Computed: null |
Description: The background color of the flat focused Picker components. | |||
kendo-picker-flat-focus-text | null | null | Default: null Computed: null |
Description: The text color of the flat focused Picker components. | |||
kendo-picker-flat-focus-border | null | null | Default: null Computed: 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-shadow Computed: (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: null Computed: null |
Description: The background color of the flat hovered and focused Picker components. | |||
kendo-picker-flat-hover-focus-text | null | null | Default: null Computed: null |
Description: The text color of the flat hovered and focused Picker components. | |||
kendo-picker-flat-hover-focus-border | null | null | Default: null Computed: null |
Description: The border color of the flat hovered and focused Picker components. |