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. |