Customizing Component

The following table lists the available variables for customization.

Name Type Default value Computed value
$component-bg map-get($theme, component-bg) map-get($theme, component-bg)
Description
Background color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !defualt;`.
$component-text map-get($theme, component-text) map-get($theme, component-text)
Description
Text color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$grid-text: component-text !default;`.
$component-border map-get($theme, component-border) map-get($theme, component-border)
Description
Border color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$grid-border: component-border !default;`.
$widget-bg $component-bg map-get($theme, component-bg)
Deprecated
Will be removed in v5. Use `$component-bg` variable instead.
Description
Background color of a component.
$widget-text $component-text map-get($theme, component-text)
Deprecated
Will be removed in v5. Use `$component-text` variable instead.
Description
Text color of a component.
$widget-border $component-border map-get($theme, component-border)
Deprecated
Will be removed in v5. Use `$component-border` variable instead.
Description
Border color of a component.

In this article