New to Kendo UI for Angular? Start a free 30-day trial
Customizing Common
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-padding-x | k-spacing(2) | ||
Description
Horizontal padding. | |||
| $kendo-padding-y | k-spacing(1) | ||
Description
Vertical padding. | |||
| $kendo-padding-sm-x | k-spacing(1) | ||
Description
Small horizontal padding. | |||
| $kendo-padding-sm-y | k-spacing(0.5) | ||
Description
Small vertical padding. | |||
| $kendo-padding-md-x | k-spacing(2) | ||
Description
Medium horizontal padding. | |||
| $kendo-padding-md-y | k-spacing(1) | ||
Description
Medium vertical padding. | |||
| $kendo-padding-lg-x | k-spacing(3) | ||
Description
Large horizontal padding. | |||
| $kendo-padding-lg-y | k-spacing(1.5) | ||
Description
Large vertical padding. | |||
| $kendo-adaptive-actionsheet-font-size | Number | $kendo-font-size-lg | 1rem |
Description
Font size of the adaptive action sheet. | |||
| $kendo-card-brand-colors | List | ( primary, error, warning, success, info ) | primary, error, warning, success, info |
Description
Theme variations for the card. | |||
| $kendo-card-theme-colors | Map | () | (primary: (bg: var(--kendo-color-primary-subtle, #deecf9), text: var(--kendo-color-primary-on-subtle, #001c30), border: var(--kendo-color-primary-subtle, #deecf9)), error: (bg: var(--kendo-color-error-subtle, #fde7e9), text: var(--kendo-color-error-on-subtle, #420f12), border: var(--kendo-color-error-subtle, #fde7e9)), warning: (bg: var(--kendo-color-warning-subtle, #fff4ce), text: var(--kendo-color-warning-on-subtle, #323130), border: var(--kendo-color-warning-subtle, #fff4ce)), success: (bg: var(--kendo-color-success-subtle, #dff6dd), text: var(--kendo-color-success-on-subtle, #063206), border: var(--kendo-color-success-subtle, #dff6dd)), info: (bg: var(--kendo-color-info-subtle, #cee5ff), text: var(--kendo-color-info-on-subtle, #032040), border: var(--kendo-color-info-subtle, #cee5ff))) |
Description
Theme colors map for the card variations. | |||
| $kendo-chip-theme-colors | Map | () | (solid: (base: (bg: var(--kendo-color-base-subtle, #edebe9), text: var(--kendo-color-base-on-subtle, #323130), border: var(--kendo-color-base-subtle, #edebe9), hover-bg: var(--kendo-color-base-subtle-hover, #e1dfdd), hover-text: var(--kendo-color-base-on-subtle, #323130), hover-border: var(--kendo-color-base-subtle-hover, #e1dfdd), focus-bg: var(--kendo-color-base-subtle, #edebe9), focus-text: var(--kendo-color-base-on-subtle, #323130), focus-border: var(--kendo-color-base-on-subtle, #323130), focus-hover-bg: var(--kendo-color-base-subtle, #edebe9), focus-hover-text: var(--kendo-color-base-on-subtle, #323130), focus-hover-border: var(--kendo-color-base-on-subtle, #323130), selected-bg: var(--kendo-color-primary, #0078d4), selected-text: var(--kendo-color-on-primary, #ffffff), selected-border: var(--kendo-color-primary, #0078d4), selected-hover-bg: var(--kendo-color-primary, #0078d4), selected-hover-text: var(--kendo-color-on-primary, #ffffff), selected-hover-border: var(--kendo-color-primary, #0078d4), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), error: (bg: var(--kendo-color-error-subtle, #fde7e9), text: var(--kendo-color-error-on-subtle, #420f12), border: var(--kendo-color-error-subtle, #fde7e9), hover-bg: var(--kendo-color-error-subtle-hover, #f3d2d4), hover-text: var(--kendo-color-error-on-subtle, #420f12), hover-border: var(--kendo-color-error-subtle-hover, #f3d2d4), focus-bg: var(--kendo-color-error-subtle, #fde7e9), focus-text: var(--kendo-color-error-on-subtle, #420f12), focus-border: var(--kendo-color-error-on-subtle, #420f12), focus-hover-bg: var(--kendo-color-error-subtle, #fde7e9), focus-hover-text: var(--kendo-color-error-on-subtle, #420f12), focus-hover-border: var(--kendo-color-error-on-subtle, #420f12), selected-bg: var(--kendo-color-error-subtle-active, #e9bcbf), selected-text: var(--kendo-color-error-on-subtle, #420f12), selected-border: var(--kendo-color-error-subtle-active, #e9bcbf), selected-hover-bg: var(--kendo-color-error-subtle-hover, #f3d2d4), selected-hover-text: var(--kendo-color-error-on-subtle, #420f12), selected-hover-border: var(--kendo-color-error-subtle-hover, #f3d2d4), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), success: (bg: var(--kendo-color-success-subtle, #dff6dd), text: var(--kendo-color-success-on-subtle, #063206), border: var(--kendo-color-success-subtle, #dff6dd), hover-bg: var(--kendo-color-success-subtle-hover, #c8e8c6), hover-text: var(--kendo-color-success-on-subtle, #063206), hover-border: var(--kendo-color-success-subtle-hover, #c8e8c6), focus-bg: var(--kendo-color-success-subtle, #dff6dd), focus-text: var(--kendo-color-success-on-subtle, #063206), focus-border: var(--kendo-color-success-on-subtle, #063206), focus-hover-bg: var(--kendo-color-success-subtle, #dff6dd), focus-hover-text: var(--kendo-color-success-on-subtle, #063206), focus-hover-border: var(--kendo-color-success-on-subtle, #063206), selected-bg: var(--kendo-color-success-subtle-active, #b1dbaf), selected-text: var(--kendo-color-success-on-subtle, #063206), selected-border: var(--kendo-color-success-subtle-active, #b1dbaf), selected-hover-bg: var(--kendo-color-success-subtle-hover, #c8e8c6), selected-hover-text: var(--kendo-color-success-on-subtle, #063206), selected-hover-border: var(--kendo-color-success-subtle-hover, #c8e8c6), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), info: (bg: var(--kendo-color-info-subtle, #cee5ff), text: var(--kendo-color-info-on-subtle, #032040), border: var(--kendo-color-info-subtle, #cee5ff), hover-bg: var(--kendo-color-info-subtle-hover, #add4ff), hover-text: var(--kendo-color-info-on-subtle, #032040), hover-border: var(--kendo-color-info-subtle-hover, #add4ff), focus-bg: var(--kendo-color-info-subtle, #cee5ff), focus-text: var(--kendo-color-info-on-subtle, #032040), focus-border: var(--kendo-color-info-on-subtle, #032040), focus-hover-bg: var(--kendo-color-info-subtle, #cee5ff), focus-hover-text: var(--kendo-color-info-on-subtle, #032040), focus-hover-border: var(--kendo-color-info-on-subtle, #032040), selected-bg: var(--kendo-color-info-subtle-active, #8dc3ff), selected-text: var(--kendo-color-info-on-subtle, #032040), selected-border: var(--kendo-color-info-subtle-active, #8dc3ff), selected-hover-bg: var(--kendo-color-info-subtle-hover, #add4ff), selected-hover-text: var(--kendo-color-info-on-subtle, #032040), selected-hover-border: var(--kendo-color-info-subtle-hover, #add4ff), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), warning: (bg: var(--kendo-color-warning-subtle, #fff4ce), text: var(--kendo-color-warning-on-subtle, #323130), border: var(--kendo-color-warning-subtle, #fff4ce), hover-bg: var(--kendo-color-warning-subtle-hover, #ffedad), hover-text: var(--kendo-color-warning-on-subtle, #323130), hover-border: var(--kendo-color-warning-subtle-hover, #ffedad), focus-bg: var(--kendo-color-warning-subtle, #fff4ce), focus-text: var(--kendo-color-warning-on-subtle, #323130), focus-border: var(--kendo-color-warning-on-subtle, #323130), focus-hover-bg: var(--kendo-color-warning-subtle, #fff4ce), focus-hover-text: var(--kendo-color-warning-on-subtle, #323130), focus-hover-border: var(--kendo-color-warning-on-subtle, #323130), selected-bg: var(--kendo-color-warning-subtle-active, #ffe58d), selected-text: var(--kendo-color-warning-on-subtle, #323130), selected-border: var(--kendo-color-warning-subtle-active, #ffe58d), selected-hover-bg: var(--kendo-color-warning-subtle-hover, #ffedad), selected-hover-text: var(--kendo-color-warning-on-subtle, #323130), selected-hover-border: var(--kendo-color-warning-subtle-hover, #ffedad), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent)), outline: (base: (bg: transparent, text: var(--kendo-color-base-on-surface, #323130), border: currentColor, hover-bg: var(--kendo-color-base-on-surface, #323130), hover-text: var(--kendo-color-app-surface, #ffffff), hover-border: var(--kendo-color-base-on-surface, #323130), focus-bg: transparent, focus-text: var(--kendo-color-base-on-surface, #323130), focus-border: currentColor, focus-outline: inherit, focus-hover-bg: var(--kendo-color-base-on-surface, #323130), focus-hover-text: var(--kendo-color-app-surface, #ffffff), focus-hover-border: var(--kendo-color-base-on-surface, #323130), focus-hover-outline: inherit, selected-bg: var(--kendo-color-base-on-surface, #323130), selected-text: var(--kendo-color-app-surface, #ffffff), selected-border: var(--kendo-color-base-on-surface, #323130), selected-hover-bg: var(--kendo-color-base-subtle, #edebe9), selected-hover-text: var(--kendo-color-base-on-surface, #323130), selected-hover-border: var(--kendo-color-base-on-subtle, #323130), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)), error: (bg: transparent, text: var(--kendo-color-error-on-surface, #a4262c), border: currentColor, hover-bg: var(--kendo-color-error-on-surface, #a4262c), hover-text: var(--kendo-color-app-surface, #ffffff), hover-border: var(--kendo-color-error-on-surface, #a4262c), focus-bg: transparent, focus-text: var(--kendo-color-error-on-surface, #a4262c), focus-border: var(--kendo-color-error-on-surface, #a4262c), focus-outline: inherit, focus-hover-bg: var(--kendo-color-error-on-surface, #a4262c), focus-hover-text: var(--kendo-color-app-surface, #ffffff), focus-hover-border: var(--kendo-color-error-on-surface, #a4262c), focus-hover-outline: inherit, selected-bg: var(--kendo-color-error-on-surface, #a4262c), selected-text: var(--kendo-color-app-surface, #ffffff), selected-border: var(--kendo-color-error-on-surface, #a4262c), selected-hover-bg: var(--kendo-color-error-on-surface, #a4262c), selected-hover-text: var(--kendo-color-app-surface, #ffffff), selected-hover-border: var(--kendo-color-error-on-surface, #a4262c), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)), success: (bg: transparent, text: var(--kendo-color-success-on-surface, #107c10), border: currentColor, hover-bg: var(--kendo-color-success-on-surface, #107c10), hover-text: var(--kendo-color-app-surface, #ffffff), hover-border: var(--kendo-color-success-on-surface, #107c10), focus-bg: transparent, focus-text: var(--kendo-color-success-on-surface, #107c10), focus-border: var(--kendo-color-success-on-surface, #107c10), focus-outline: inherit, focus-hover-bg: var(--kendo-color-success-on-surface, #107c10), focus-hover-text: var(--kendo-color-app-surface, #ffffff), focus-hover-border: var(--kendo-color-success-on-surface, #107c10), focus-hover-outline: inherit, selected-bg: var(--kendo-color-success-on-surface, #107c10), selected-text: var(--kendo-color-app-surface, #ffffff), selected-border: var(--kendo-color-success-on-surface, #107c10), selected-hover-bg: var(--kendo-color-success-on-surface, #107c10), selected-hover-text: var(--kendo-color-app-surface, #ffffff), selected-hover-border: var(--kendo-color-success-on-surface, #107c10), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)), info: (bg: transparent, text: var(--kendo-color-info-on-surface, #096edf), border: currentColor, hover-bg: var(--kendo-color-info-on-surface, #096edf), hover-text: var(--kendo-color-app-surface, #ffffff), hover-border: var(--kendo-color-info-on-surface, #096edf), focus-bg: transparent, focus-text: var(--kendo-color-info-on-surface, #096edf), focus-border: var(--kendo-color-info-on-surface, #096edf), focus-outline: inherit, focus-hover-bg: var(--kendo-color-info-on-surface, #096edf), focus-hover-text: var(--kendo-color-app-surface, #ffffff), focus-hover-border: var(--kendo-color-info-on-surface, #096edf), focus-hover-outline: inherit, selected-bg: var(--kendo-color-info-on-surface, #096edf), selected-text: var(--kendo-color-app-surface, #ffffff), selected-border: var(--kendo-color-info-on-surface, #096edf), selected-hover-bg: var(--kendo-color-info-on-surface, #096edf), selected-hover-text: var(--kendo-color-app-surface, #ffffff), selected-hover-border: var(--kendo-color-info-on-surface, #096edf), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)), warning: (bg: transparent, text: var(--kendo-color-warning-on-surface, #7a6000), border: currentColor, hover-bg: var(--kendo-color-warning-on-surface, #7a6000), hover-text: var(--kendo-color-app-surface, #ffffff), hover-border: var(--kendo-color-warning-on-surface, #7a6000), focus-bg: transparent, focus-text: var(--kendo-color-warning-on-surface, #7a6000), focus-border: var(--kendo-color-warning-on-surface, #7a6000), focus-outline: inherit, focus-hover-bg: var(--kendo-color-warning-on-surface, #7a6000), focus-hover-text: var(--kendo-color-app-surface, #ffffff), focus-hover-border: var(--kendo-color-warning-on-surface, #7a6000), focus-hover-outline: inherit, selected-bg: var(--kendo-color-warning-on-surface, #7a6000), selected-text: var(--kendo-color-app-surface, #ffffff), selected-border: var(--kendo-color-warning-on-surface, #7a6000), selected-hover-bg: var(--kendo-color-warning-on-surface, #7a6000), selected-hover-text: var(--kendo-color-app-surface, #ffffff), selected-hover-border: var(--kendo-color-warning-on-surface, #7a6000), disabled-bg: initial, disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)))) |
Description
The theme colors map for the Chip. | |||
| $kendo-box-shadow-depth-1 | String | var( --kendo-elevation-1, none ) | var(--kendo-elevation-1, none) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for cards and grid item thumbnails. Equivalent to fluent depth 4. | |||
| $kendo-box-shadow-depth-2 | String | var( --kendo-elevation-2, none ) | var(--kendo-elevation-2, none) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for color gradient drag handle. Equivalent to fluent depth 8. | |||
| $kendo-box-shadow-depth-3 | String | var( --kendo-elevation-3, none ) | var(--kendo-elevation-3, none) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for focus card. | |||
| $kendo-box-shadow-depth-4 | String | var( --kendo-elevation-4, none ) | var(--kendo-elevation-4, none) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for panels. Equivalent to fluent depth 16. | |||
| $kendo-box-shadow-depth-5 | String | var( --kendo-elevation-5, none ) | var(--kendo-elevation-5, none) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for floating action button. | |||
| $kendo-box-shadow-depth-6 | String | var( --kendo-elevation-6, none ) | var(--kendo-elevation-6, none) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for pop up. | |||
| $kendo-box-shadow-depth-7 | String | var( --kendo-elevation-7, none ) | var(--kendo-elevation-7, none) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for action sheet. | |||
| $kendo-box-shadow-depth-8 | String | var( --kendo-elevation-8, none ) | var(--kendo-elevation-8, none) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for dialogs and window. Equivalent to fluent depth 64. | |||
| $kendo-box-shadow-depth-9 | String | var( --kendo-elevation-8, none ) | var(--kendo-elevation-8, none) |
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for focus window. | |||
| $kendo-dialog-brand-colors | Map | (
primary: primary
) | (primary: primary) |
Description
The theme variations for the Dialog. | |||
| $kendo-dialog-theme-colors | Map | () | (primary: (bg: var(--kendo-color-primary, #0078d4), text: var(--kendo-color-on-primary, #ffffff), border: var(--kendo-color-primary, #0078d4)), dark: (bg: var(--kendo-color-dark, #323130), text: var(--kendo-color-on-dark, #ffffff), border: var(--kendo-color-dark, #323130)), light: (bg: var(--kendo-color-light, #d2d0ce), text: var(--kendo-color-on-light, #323130), border: var(--kendo-color-light, #d2d0ce))) |
Description
The theme colors map for the Dialog. | |||
| $kendo-tooltip-brand-colors | Map | (
secondary: if($kendo-enable-color-system, secondary, neutral),
tertiary: tertiary,
success: success,
warning: warning,
error: error,
info: info
) | (secondary: secondary, tertiary: tertiary, success: success, warning: warning, error: error, info: info) |
Description
Theme variations for the tooltip. | |||
| $kendo-tooltip-theme-colors | Map | () | (primary: (bg: var(--kendo-color-primary, #0078d4), text: var(--kendo-color-on-primary, #ffffff), border: var(--kendo-color-primary, #0078d4)), secondary: (bg: var(--kendo-color-secondary-subtle, #faf9f8), text: var(--kendo-color-secondary-on-subtle, #323130), border: var(--kendo-color-secondary-subtle, #faf9f8)), tertiary: (bg: var(--kendo-color-tertiary-subtle, #deecf9), text: var(--kendo-color-tertiary-on-subtle, #174974), border: var(--kendo-color-tertiary-subtle, #deecf9)), success: (bg: var(--kendo-color-success-subtle, #dff6dd), text: var(--kendo-color-success-on-subtle, #063206), border: var(--kendo-color-success-subtle, #dff6dd)), warning: (bg: var(--kendo-color-warning-subtle, #fff4ce), text: var(--kendo-color-warning-on-subtle, #323130), border: var(--kendo-color-warning-subtle, #fff4ce)), error: (bg: var(--kendo-color-error-subtle, #fde7e9), text: var(--kendo-color-error-on-subtle, #420f12), border: var(--kendo-color-error-subtle, #fde7e9)), info: (bg: var(--kendo-color-info-subtle, #cee5ff), text: var(--kendo-color-info-on-subtle, #032040), border: var(--kendo-color-info-subtle, #cee5ff)), dark: (bg: var(--kendo-color-dark, #323130), text: var(--kendo-color-on-dark, #ffffff), border: var(--kendo-color-dark, #323130)), light: (bg: var(--kendo-color-light, #d2d0ce), text: var(--kendo-color-on-light, #323130), border: var(--kendo-color-light, #d2d0ce))) |
Description
Theme colors map for the tooltip variations. | |||
| $kendo-h5-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the fifth highest level heading. | |||
| $kendo-h6-line-height | Number | 22px | 22px |
Description
The line height of the sixth highest level heading. | |||
