Most elements and components have color variations thanks to modifiers with syntax .is-$color
, like is-primary
or is-dark
.
This is thanks to the $colors
Sass map, through which Bulma cycles to grab all the colors and their inverts.
--- title: Colors layout: documentation doc-tab: overview doc-subtab: colors breadcrumb: - home - documentation - overview - overview-colors colors: - white - black - light - dark - primary - link - info - success - warning - danger shades: - black-bis - black-ter - grey-darker - grey-dark - grey-light - grey-lighter - white-ter - white-bis ---
Most elements and components have color variations thanks to modifiers with syntax .is-$color
, like is-primary
or is-dark
.
This is thanks to the $colors
Sass map, through which Bulma cycles to grab all the colors and their inverts.
Color | Variable | Value | Computed value | Invert value | Computed invert value | ||
---|---|---|---|---|---|---|---|
{{ derivedColor.id | capitalize }} |
${{ derivedColor.id }}
|
${{ initialColor.id }}
|
{% include elements/color-square.html value=initialColor.value %} | {% if derivedColor.invertValue %}
{{ derivedColor.invertValue }}
|
{% include elements/color-square.html value=derivedColor.invertValue %} | {% elsif derivedColor.invertId %} {% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %}
${{ derivedColor.invertId }}
|
{% include elements/color-square.html value=invertColor.value %} | {% endif %}
Bulma also provides a $shades
Sass map, that only contains shades of grey between black and white.
Color | Variable | Value |
---|---|---|
{{ initial_shade.name | capitalize }} |
${{ initial_shade.id }}
|
{% include elements/color-square.html value=initial_shade.value %} |