Customizing Common

The following table lists the available variables for customization.

Name Default value Description
$border-radius $border-radius Border radius for all components.
$base-bg try-darken( $component-bg, 3% ) The background of the components' chrome area.
$base-text $component-color The text color of the components' chrome area.
$base-border try-darken( $base-bg, 3% ) The border color of the components' chrome area.
$base-gradient null The gradient background of the components' chrome area.
$hovered-bg try-darken( $base-bg, 3% ) The background of hovered items.
$hovered-text $base-text The text color of hovered items.
$hovered-border try-darken( $base-border, 12% ) The border color of hovered items.
$hovered-gradient null The gradient background of hovered items.
$selected-bg $primary The background of selected items.
$selected-text contrast-wcag( $selected-bg ) The text color of selected items.
$selected-border try-darken( $selected-bg, 12% ) The border color of selected items.
$selected-gradient null The gradient background of selected items.

In this article