Customizing Common

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$border-radius2px2px
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-borderrgba( 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-borderrgba( 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-textcontrast-wcag( $selected-bg )contrast-wcag( $selected-bg )
Description
The text color of selected items.
$selected-borderrgba( black, .1 )rgba( black, .1 )
Description
The border color of selected items.
$selected-gradientnonenone
Description
The gradient background of selected items.