New to Kendo UI for Angular? Start a free 30-day trial

Customizing Common

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$border-radius$border-radius$border-radius
Description
Border radius for all components.
$base-bg$gray-100
Description
The background of the components' chrome area.
$base-text$body-text
Description
The text color of the components' chrome area.
$base-bordertry-shade( $base-bg, 1 )try-shade( $base-bg, 1 )
Description
The border color of the components' chrome area.
$base-gradientnullnull
Description
The gradient background of the components' chrome area.
$hovered-bg$gray-200
Description
The background of hovered items.
$hovered-text$base-text
Description
The text color of hovered items.
$hovered-bordertry-shade( $hovered-bg, 1 )try-shade( $hovered-bg, 1 )
Description
The border color of hovered items.
$hovered-gradientnullnull
Description
The gradient background of hovered items.
$selected-bg$primary$primary
Description
The background of selected items.
$selected-textcontrast-wcag( $selected-bg )contrast-wcag( $selected-bg )
Description
The text color of selected items.
$selected-bordertry-shade( $selected-bg, 1 )try-shade( $selected-bg, 1 )
Description
The border color of selected items.
$selected-gradientnullnull
Description
The gradient background of selected items.

In this article

Not finding the help you need?