Customizing Common
The following table lists the available variables for customization.
Name | Type | Default value | Computed value |
---|---|---|---|
$border-radius | $border-radius | $border-radius | |
Description Border radius for all components. | |||
$base-bg | try-darken( $component-bg, 3% ) | try-darken( $component-bg, 3% ) | |
Description The background of the components' chrome area. | |||
$base-text | $component-color | ||
Description The text color of the components' chrome area. | |||
$base-border | try-darken( $base-bg, 3% ) | try-darken( $base-bg, 3% ) | |
Description The border color of the components' chrome area. | |||
$base-gradient | null | null | |
Description The gradient background of the components' chrome area. | |||
$hovered-bg | try-darken( $base-bg, 3% ) | try-darken( $base-bg, 3% ) | |
Description The background of hovered items. | |||
$hovered-text | $base-text | ||
Description The text color of hovered items. | |||
$hovered-border | try-darken( $base-border, 12% ) | try-darken( $base-border, 12% ) | |
Description The border color of hovered items. | |||
$hovered-gradient | null | null | |
Description The gradient background of hovered items. | |||
$selected-bg | $primary | $accent | |
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 | try-darken( $selected-bg, 12% ) | try-darken( $selected-bg, 12% ) | |
Description The border color of selected items. | |||
$selected-gradient | null | null | |
Description The gradient background of selected items. |