Customizing Common

The following table lists the available variables for customization.

Name Type Default value Computed value
$border-radius 2px 2px
Description
Border radius for all components.
$base-bg #f6f6f6 #f6f6f6
Description
The background of the components' chrome area.
$base-text #656565 #656565
Description
The text color of the components' chrome area.
$base-border rgba( black, .08 ) rgba( black, .08 )
Description
The border color of the components' chrome area.
$base-gradient $base-bg, darken( $base-bg, 2% ) $base-bg, darken( $base-bg, 2% )
Description
The gradient background of the components' chrome area.
$hovered-bg #ededed #ededed
Description
The background of hovered items.
$hovered-text $base-text #656565
Description
The text color of hovered items.
$hovered-border rgba( black, .15 ) rgba( black, .15 )
Description
The border color of hovered items.
$hovered-gradient $hovered-bg, darken( $hovered-bg, 2% ) $hovered-bg, darken( $hovered-bg, 2% )
Description
The gradient background of hovered items.
$selected-bg $primary #ff6358
Description
The background of selected items.
$selected-text contrast-wcag( $selected-bg ) contrast-wcag( $selected-bg )
Description
The text color of selected items.
$selected-border rgba( black, .1 ) rgba( black, .1 )
Description
The border color of selected items.
$selected-gradient none none
Description
The gradient background of selected items.

In this article