Styling & Themes / Fluent Theme / Customizing Common / 
New to Kendo UI for Angular? Start a free 30-day trial

Customizing Common

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-padding-xk-spacing(2)
Description
Horizontal padding.
$kendo-padding-yk-spacing(1)
Description
Vertical padding.
$kendo-padding-sm-xk-spacing(1)
Description
Small horizontal padding.
$kendo-padding-sm-yk-spacing(0.5)
Description
Small vertical padding.
$kendo-padding-md-xk-spacing(2)
Description
Medium horizontal padding.
$kendo-padding-md-yk-spacing(1)
Description
Medium vertical padding.
$kendo-padding-lg-xk-spacing(3)
Description
Large horizontal padding.
$kendo-padding-lg-yk-spacing(1.5)
Description
Large vertical padding.
$kendo-adaptive-actionsheet-font-sizeNumber$kendo-font-size-lg1rem
Description
Font size of the adaptive action sheet.
$kendo-card-brand-colorsList( primary, error, warning, success, info )primary, error, warning, success, info
Description
Theme variations for the card.
$kendo-card-theme-colorsMap()
  • 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-colorsMap()
  • 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-1Stringvar( --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-2Stringvar( --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-3Stringvar( --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-4Stringvar( --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-5Stringvar( --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-6Stringvar( --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-7Stringvar( --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-8Stringvar( --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-9Stringvar( --kendo-elevation-8, none )var(--kendo-elevation-8, none)
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for focus window.
$kendo-dialog-brand-colorsMap( primary: primary )
  • primary: primary
Description
The theme variations for the Dialog.
$kendo-dialog-theme-colorsMap()
  • 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-colorsMap( 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-colorsMap()
  • 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-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the fifth highest level heading.
$kendo-h6-line-heightNumber22px22px
Description
The line height of the sixth highest level heading.
$kendo-disabled-bgStringnullvar(--kendo-color-base-subtle, #edebe9)
Description
The background color of disabled items.
$kendo-disabled-textStringnullcolor-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)
Description
The text color of disabled items.
$kendo-disabled-borderColornulltransparent
Description
The border color of disabled items.
$kendo-disabled-opacityNullnullnull
Description
The opacity of disabled items.
$kendo-disabled-filterNullnullnull
Description
The filter of disabled items.

Suggested Links

Previous
Customizing ColorPreview
Next
Customizing Dialog

In this article

Not finding the help you need?

Contact Support