Customizing Common

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-border-radiusNumber

map-get( $spacing, 1 )

4px

Description
Border radius for all components.
$base-bgColor

#fafafa

#fafafa

Description
The background of the components' chrome area.
$base-textColor

$body-text

#424242

Description
The text color of the components' chrome area.
$base-borderColor

rgba( black, .08 )

rgba(0, 0, 0, 0.08)

Description
The border color of the components' chrome area.
$base-gradientList

rgba( black, 0 ), rgba( black, .02 )

rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)

Description
The gradient background of the components' chrome area.
$hovered-bgColor

try-shade( $base-bg, .5 )

#f0f0f0

Description
The background of hovered items.
$hovered-textColor

$base-text

#424242

Description
The text color of hovered items.
$hovered-borderColor

$base-border

rgba(0, 0, 0, 0.08)

Description
The border color of hovered items.
$hovered-gradientList

$base-gradient

rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)

Description
The gradient background of hovered items.
$selected-bgColor

$primary

#ff6358

Description
The background of selected items.
$selected-textColor

contrast-wcag( $selected-bg )

white

Description
The text color of selected items.
$selected-borderColor

$base-border

rgba(0, 0, 0, 0.08)

Description
The border color of selected items.
$selected-gradientList

$base-gradient

rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)

Description
The gradient background of selected items.

In this article

Not finding the help you need?