Customizing Common

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$border-radius2px2px
Description
Border radius for all components.
$base-bgmap-get( $theme, base-bg )map-get( $theme, base-bg )
Description
The background of the components' chrome area.
$base-textmap-get($theme, component-text)map-get($theme, component-text)
Description
The text color of the components' chrome area.
$base-borderrgba( if($theme-type == dark, white, black), .08 )rgba( if($theme-type == dark, white, black), .08 )
Description
The border of the components' chrome area.
$base-gradientnullnull
Description
The gradient background of the components' chrome area.
$hovered-bgmap-get( $theme, hover-bg )map-get( $theme, hover-bg )
Description
The background of hovered items.
$hovered-text$base-textmap-get($theme, component-text)
Description
The text color of hovered items.
$hovered-borderrgba( if($theme-type == dark, white, black), .15 )rgba( if($theme-type == dark, white, black), .15 )
Description
The border color of hovered items.
$hovered-gradientnullnull
Description
The gradient background of hovered items.
$selected-bg$secondarymaterial-color( $secondary-palette, default )
Description
The background of selected items.
$selected-text$secondary-contrastmaterial-color( $secondary-palette, default-contrast )
Description
The text color of selected items.
$selected-borderrgba( if($theme-type == dark, white, black), .1 )rgba( if($theme-type == dark, white, black), .1 )
Description
The border color of selected items.
$selected-gradientnullnull
Description
The gradient background of selected items.

In this article

Not finding the help you need?