Customizing Common

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-border-radius	Number	`map-get( $spacing, 1 )`	`4px`
Description Border radius for all components.
$base-bg	Color	`map-get( $theme, base-bg )`	`white`
Description The background of the components' chrome area.
$base-text	Color	`map-get($theme, component-text)`	`rgba(0, 0, 0, 0.87)`
Description The text color of the components' chrome area.
$base-border	Color	`rgba( if($theme-type == dark, white, black), .08 )`	`rgba(0, 0, 0, 0.08)`
Description The border of the components' chrome area.
$base-gradient	Null	`null`	`null`
Description The gradient background of the components' chrome area.
$hovered-bg	Color	`map-get( $theme, hover-bg )`	`rgba(0, 0, 0, 0.04)`
Description The background of hovered items.
$hovered-text	Color	`$base-text`	`rgba(0, 0, 0, 0.87)`
Description The text color of hovered items.
$hovered-border	Color	`rgba( if($theme-type == dark, white, black), .15 )`	`rgba(0, 0, 0, 0.15)`
Description The border color of hovered items.
$hovered-gradient	Null	`null`	`null`
Description The gradient background of hovered items.
$selected-bg	Color	`$secondary`	`#e51a5f`
Description The background of selected items.
$selected-text	Color	`$secondary-contrast`	`white`
Description The text color of selected items.
$selected-border	Color	`rgba( if($theme-type == dark, white, black), .1 )`	`rgba(0, 0, 0, 0.1)`
Description The border color of selected items.
$selected-gradient	Null	`null`	`null`
Description The gradient background of selected items.
$kendo-input-font-family	List	`$font-family`	`Roboto, "Helvetica Neue", sans-serif`
Description Font family of input components. @group input

Customizing Common

Suggested Links

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!

Getting Started

Support Resources

Community