2017-07-29 16:58:13 +00:00
---
title: Colors
layout: documentation
doc-tab: overview
doc-subtab: colors
colors:
2017-10-17 09:28:59 +00:00
- white
- black
- light
- dark
- primary
- link
- info
- success
- warning
- danger
2017-07-29 16:58:13 +00:00
---
{% include subnav-overview.html %}
< section class = "section" >
< div class = "container" >
< h1 class = "title" > Colors< / h1 >
2017-08-10 11:24:51 +00:00
< h2 class = "subtitle" > The < strong > colors< / strong > that < strong > style< / strong > most Bulma elements and components< / h2 >
2017-07-29 16:58:13 +00:00
< hr >
< 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 >
< table class = "table" >
< thead >
< tr >
< th > Color< / th >
< th > Variable< / th >
< th > Value< / th >
2017-10-09 22:30:58 +00:00
< th > Computed value< / th >
2017-10-10 08:59:44 +00:00
< th > Invert value< / th >
2017-10-09 22:30:58 +00:00
< th > Computed invert value< / th >
2017-07-29 16:58:13 +00:00
< / tr >
< / thead >
< tbody >
{% for color in page.colors %}
2017-10-17 09:28:59 +00:00
{% assign derivedColor = site.data.colors.derived | where: "id", color | first %}
{% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %}
2017-07-29 16:58:13 +00:00
< tr >
< td >
2017-10-09 22:30:58 +00:00
< strong > {{ derivedColor.id | capitalize }}< / strong >
2017-07-29 16:58:13 +00:00
< / td >
< td >
2017-10-09 22:30:58 +00:00
< code > ${{ derivedColor.id }}< / code >
2017-07-29 16:58:13 +00:00
< / td >
< td >
2017-10-09 22:30:58 +00:00
< code > ${{ initialColor.id }}< / code >
2017-07-29 16:58:13 +00:00
< / td >
< td >
2017-10-09 22:30:58 +00:00
{% include elements/color-square.html value=initialColor.value %}
2017-07-29 16:58:13 +00:00
< / td >
2017-10-09 22:30:58 +00:00
{% if derivedColor.invertValue %}
< td >
< code > {{ derivedColor.invertValue }}< / code >
< / td >
< td >
{% include elements/color-square.html value=derivedColor.invertValue %}
< / td >
{% elsif derivedColor.invertId %}
2017-10-17 09:28:59 +00:00
{% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %}
2017-10-09 22:30:58 +00:00
< td >
< code > ${{ derivedColor.invertId }}< / code >
< / td >
< td >
{% include elements/color-square.html value=invertColor.value %}
< / td >
{% endif %}
2017-07-29 16:58:13 +00:00
< / tr >
{% endfor %}
< / tbody >
< / table >
< / div >
2017-08-14 11:44:24 +00:00
< / section >