2017-07-29 16:58:13 +00:00
---
title: Colors
layout: documentation
doc-tab: overview
doc-subtab: colors
2018-04-09 16:32:12 +00:00
breadcrumb:
- home
- documentation
- overview
- overview-colors
2017-07-29 16:58:13 +00:00
colors:
2017-10-17 09:28:59 +00:00
- white
- black
- light
- dark
- primary
- link
- info
- success
- warning
- danger
2018-04-08 13:38:59 +00:00
shades:
- black-bis
- black-ter
- grey-darker
- grey-dark
- grey-light
- grey-lighter
- white-ter
- white-bis
2017-07-29 16:58:13 +00:00
---
2018-04-09 16:32:12 +00:00
< div class = "content" >
< p >
Most elements and components have color variations thanks to < strong > modifiers< / strong > with syntax < code > .is-$color< / code > , like < code > is-primary< / code > or < code > is-dark< / code > .
< / p >
< p >
This is thanks to the < code > $colors< / code > < strong > Sass map< / strong > , through which Bulma cycles to grab all the colors and their inverts.
< / p >
< / div >
2017-07-29 16:58:13 +00:00
2018-04-09 16:32:12 +00:00
< table class = "table" >
< thead >
< tr >
< th > Color< / th >
< th > Variable< / th >
< th > Value< / th >
< th > Computed value< / th >
< th > Invert value< / th >
< th > Computed invert value< / th >
< / tr >
< / thead >
< tbody >
{% for color in page.colors %}
{% assign derivedColor = site.data.colors.derived | where: "id", color | first %}
{% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %}
< tr >
< td >
< strong > {{ derivedColor.id | capitalize }}< / strong >
< / td >
< td >
< code > ${{ derivedColor.id }}< / code >
< / td >
< td >
< code > ${{ initialColor.id }}< / code >
< / td >
< td >
{% include elements/color-square.html value=initialColor.value %}
< / td >
{% if derivedColor.invertValue %}
< td >
< code > {{ derivedColor.invertValue }}< / code >
< / td >
< td >
{% include elements/color-square.html value=derivedColor.invertValue %}
< / td >
{% elsif derivedColor.invertId %}
{% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %}
< td >
< code > ${{ derivedColor.invertId }}< / code >
< / td >
< td >
{% include elements/color-square.html value=invertColor.value %}
< / td >
{% endif %}
< / tr >
{% endfor %}
< / tbody >
< / table >
2017-07-29 16:58:13 +00:00
2018-04-09 16:32:12 +00:00
< div class = "content" >
< p >
Bulma also provides a < code > $shades< / code > < strong > Sass map< / strong > , that only contains shades of grey between black and white.
< / p >
< / div >
2017-07-29 16:58:13 +00:00
2018-04-09 16:32:12 +00:00
< table class = "table" >
< thead >
< tr >
< th > Color< / th >
< th > Variable< / th >
< th > Value< / th >
< / tr >
< / thead >
< tbody >
{% for shade in page.shades %}
{% assign initial_shade = site.data.colors.initial | where: "id", shade | first %}
< tr >
< td >
< strong > {{ initial_shade.name | capitalize }}< / strong >
< / td >
< td >
< code > ${{ initial_shade.id }}< / code >
< / td >
< td >
{% include elements/color-square.html value=initial_shade.value %}
< / td >
< / tr >
{% endfor %}
< / tbody >
< / table >