Customizing Common

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$border-radius2px2px
Description
Border radius for all components.
$base-bg#fafafa#fafafa
Description
The background of the components' chrome area.
$base-text$body-text
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-gradientrgba( black, 0 ), rgba( black, .02 )rgba( black, 0 ), rgba( black, .02 )
Description
The gradient background of the components' chrome area.
$hovered-bgtry-shade( $base-bg, .5 )try-shade( $base-bg, .5 )
Description
The background of hovered items.
$hovered-text$base-text
Description
The text color of hovered items.
$hovered-border$base-borderrgba( black, .08 )
Description
The border color of hovered items.
$hovered-gradient$base-gradientrgba( black, 0 ), rgba( black, .02 )
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-border$base-borderrgba( black, .08 )
Description
The border color of selected items.
$selected-gradient$base-gradientrgba( black, 0 ), rgba( black, .02 )
Description
The gradient background of selected items.

In this article

Not finding the help you need?