New to Kendo UI for Vue? 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-adaptive-actionsheet-font-size | $kendo-font-size-lg | ||
Description
Font size of the adaptive action sheet. | |||
| $kendo-card-brand-colors | ( primary, error, warning, success, info ) | ||
Description
Theme variations for the card. | |||
| $kendo-card-theme-colors | () | ||
Description
Theme colors map for the card variations. | |||
| $kendo-chip-theme-colors | () | ||
Description
The theme colors map for the Chip. | |||
| $kendo-font-size | 14px | ||
Description
Base font size across all components. | |||
| $kendo-font-family | "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif | ||
Description
Font family across all components. | |||
| $kendo-line-height | math.div( 20, 14 ) | ||
Description
Line height used along with $kendo-font-size. | |||
| $kendo-font-weight | 400 | ||
Description
Font weight. | |||
| $kendo-box-shadow-depth-1 | 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 | 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 | var( --kendo-elevation-3, none ) | ||
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for focus card. | |||
| $kendo-box-shadow-depth-4 | 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 | var( --kendo-elevation-5, none ) | ||
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for floating action button. | |||
| $kendo-box-shadow-depth-6 | var( --kendo-elevation-6, none ) | ||
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for pop up. | |||
| $kendo-box-shadow-depth-7 | var( --kendo-elevation-7, none ) | ||
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for action sheet. | |||
| $kendo-box-shadow-depth-8 | 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 | var( --kendo-elevation-8, none ) | ||
Deprecated Use the `$kendo-elevation` map instead. Description
Shadow for focus window. | |||
| $kendo-dialog-brand-colors | (
primary: primary
) | ||
Description
The theme variations for the Dialog. | |||
| $kendo-dialog-theme-colors | () | ||
Description
The theme colors map for the Dialog. | |||
| $kendo-tooltip-brand-colors | (
secondary: if($kendo-enable-color-system, secondary, neutral),
tertiary: tertiary,
success: success,
warning: warning,
error: error,
info: info
) | ||
Description
Theme variations for the tooltip. | |||
| $kendo-tooltip-theme-colors | () | ||
Description
Theme colors map for the tooltip variations. | |||
