mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
126 lines
3.1 KiB
HTML
126 lines
3.1 KiB
HTML
---
|
|
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
|
|
---
|
|
|
|
<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>
|
|
|
|
<div class="table-container">
|
|
<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>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<div class="table-container">
|
|
<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>
|
|
</div>
|