Customizing Common
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $border-radius | 2px | 2px | |
Description Border radius for all components. | |||
| $base-bg | map-get( $theme, base-bg ) | map-get( $theme, base-bg ) | |
Description The background of the components' chrome area. | |||
| $base-text | map-get($theme, component-text) | map-get($theme, component-text) | |
Description The text color of the components' chrome area. | |||
| $base-border | rgba( if($theme-type == dark, white, black), .08 ) | rgba( if($theme-type == dark, white, black), .08 ) | |
Description The border of the components' chrome area. | |||
| $base-gradient | null | null | |
Description The gradient background of the components' chrome area. | |||
| $hovered-bg | map-get( $theme, hover-bg ) | map-get( $theme, hover-bg ) | |
Description The background of hovered items. | |||
| $hovered-text | $base-text | map-get($theme, component-text) | |
Description The text color of hovered items. | |||
| $hovered-border | rgba( if($theme-type == dark, white, black), .15 ) | rgba( if($theme-type == dark, white, black), .15 ) | |
Description The border color of hovered items. | |||
| $hovered-gradient | null | null | |
Description The gradient background of hovered items. | |||
| $selected-bg | $secondary | material-color( $secondary-palette, default ) | |
Description The background of selected items. | |||
| $selected-text | $secondary-contrast | material-color( $secondary-palette, default-contrast ) | |
Description The text color of selected items. | |||
| $selected-border | rgba( if($theme-type == dark, white, black), .1 ) | rgba( if($theme-type == dark, white, black), .1 ) | |
Description The border color of selected items. | |||
| $selected-gradient | null | null | |
Description The gradient background of selected items. | |||
