mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
1523ce8527
* Replace variables.json with colors.json and update related files accordingly * Add variables data files * Update variables include template and all related files to use new variables data * Fix mobile breakpoint id typo in responsivness docs page * Fix Liquid syntax error in made-with-bulma docs page * Update bulma sass files count in modular docs page * Use breakpoints data in responsiveness helpers docs page * Use breakpoints and variables data in typography helpers docs page * Add missing page titles in docs pages front matter
87 lines
2.5 KiB
HTML
87 lines
2.5 KiB
HTML
---
|
|
title: Colors
|
|
layout: documentation
|
|
doc-tab: overview
|
|
doc-subtab: colors
|
|
colors:
|
|
- white
|
|
- black
|
|
- light
|
|
- dark
|
|
- primary
|
|
- link
|
|
- info
|
|
- success
|
|
- warning
|
|
- danger
|
|
---
|
|
|
|
{% include subnav-overview.html %}
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title">Colors</h1>
|
|
<h2 class="subtitle">The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components</h2>
|
|
|
|
<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>
|
|
<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>
|
|
</section>
|