Add colors page

docs/_includes/color/black-bis.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 7%);"></span>
-hsl(0, 0%, 7%)
+<code>hsl(0, 0%, 7%)</code>

docs/_includes/color/black-ter.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 14%);"></span>
-hsl(0, 0%, 14%)
+<code>hsl(0, 0%, 14%)</code>

docs/_includes/color/black.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 4%);"></span>
-hsl(0, 0%, 4%)
+<code>hsl(0, 0%, 4%)</code>

docs/_includes/color/blue.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(217, 71%,  53%);"></span>
-hsl(217, 71%,  53%)
+<code>hsl(217, 71%,  53%)</code>

docs/_includes/color/green.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(141, 71%,  48%);"></span>
-hsl(141, 71%,  48%)
+<code>hsl(141, 71%,  48%)</code>

docs/_includes/color/grey-dark.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 29%);"></span>
-hsl(0, 0%, 29%)
+<code>hsl(0, 0%, 29%)</code>

docs/_includes/color/grey-darker.html

@@ -1,2 +1,2 @@
 <span class="color" style="background:  hsl(0, 0%, 21%);"></span>
- hsl(0, 0%, 21%)
+<code>hsl(0, 0%, 21%)</code>

docs/_includes/color/grey-light.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 71%);"></span>
-hsl(0, 0%, 71%)
+<code>hsl(0, 0%, 71%)</code>

docs/_includes/color/grey-lighter.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 86%);"></span>
-hsl(0, 0%, 86%)
+<code>hsl(0, 0%, 86%)</code>

docs/_includes/color/grey.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 48%);"></span>
-hsl(0, 0%, 48%)
+<code>hsl(0, 0%, 48%)</code>

docs/_includes/color/orange.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(14,  100%, 53%);"></span>
-hsl(14,  100%, 53%)
+<code>hsl(14,  100%, 53%)</code>

docs/_includes/color/purple.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(271, 100%, 71%);"></span>
-hsl(271, 100%, 71%)
+<code>hsl(271, 100%, 71%)</code>

docs/_includes/color/red.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(348, 100%, 61%);"></span>
-hsl(348, 100%, 61%)
+<code>hsl(348, 100%, 61%)</code>

docs/_includes/color/turquoise.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(171, 100%, 41%);"></span>
-hsl(171, 100%, 41%)
+<code>hsl(171, 100%, 41%)</code>

docs/_includes/color/white-bis.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 98%);"></span>
-hsl(0, 0%, 98%)
+<code>hsl(0, 0%, 98%)</code>

docs/_includes/color/white-ter.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 96%);"></span>
-hsl(0, 0%, 96%)
+<code>hsl(0, 0%, 96%)</code>

docs/_includes/color/white.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 100%);"></span>
-hsl(0, 0%, 100%)
+<code>hsl(0, 0%, 100%)</code>

docs/_includes/color/yellow.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(48,  100%, 67%);"></span>
-hsl(48,  100%, 67%)
+<code>hsl(48,  100%, 67%)</code>

docs/_includes/navbar.html

@@ -63,7 +63,9 @@
           <hr class="navbar-divider">
           <div class="navbar-item">
             <div>
-              <p class="has-text-info is-size-6-desktop"><strong>{{ site.version }}</strong></p>
+              <p class="is-size-6-desktop">
+                <strong class="has-text-info">{{ site.version }}</strong>
+              </p>
               {{#unless site.deprecated}}
                 <small>
                   <a class="view-all-versions" href="/versions">View all versions</a>

docs/_includes/subnav-overview.html

@@ -16,12 +16,15 @@
       <a class="navbar-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/responsiveness/">
         Responsiveness
       </a>
-      <a class="navbar-item is-tab {% if page.doc-subtab == 'functions' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/functions/">
-        Functions
-      </a>
       <a class="navbar-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/variables/">
         Variables
       </a>
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'colors' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/colors/">
+        Colors
+      </a>
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'functions' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/functions/">
+        Functions
+      </a>
       <a class="navbar-item is-tab {% if page.doc-subtab == 'mixins' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/mixins/">
         Mixins
       </a>

docs/_layouts/documentation.html

@@ -65,7 +65,7 @@ route: documentation
 
 <section class="section">
   <div class="container">
-    <p class="has-text-centered has-text-grey-light">
+    <p class="has-text-grey-light">
       This page is <strong class="has-text-grey">open source</strong>.
       Noticed a typo?
       Or something unclear?

docs/documentation/overview/colors.html

@@ -0,0 +1,181 @@
+---
+title: Colors
+layout: documentation
+doc-tab: overview
+doc-subtab: colors
+initial_colors:
+- name: "$black"
+  value: hsl(0, 0%, 4%)
+- name: "$black-bis"
+  value: hsl(0, 0%, 7%)
+- name: "$black-ter"
+  value: hsl(0, 0%, 14%)
+- name: "$grey-darker"
+  value: hsl(0, 0%, 21%)
+- name: "$grey-dark"
+  value: hsl(0, 0%, 29%)
+- name: "$grey"
+  value: hsl(0, 0%, 48%)
+- name: "$grey-light"
+  value: hsl(0, 0%, 71%)
+- name: "$grey-lighter"
+  value: hsl(0, 0%, 86%)
+- name: "$white-ter"
+  value: hsl(0, 0%, 96%)
+- name: "$white-bis"
+  value: hsl(0, 0%, 98%)
+- name: "$white"
+  value: hsl(0, 0%, 100%)
+- name: "$orange"
+  value: hsl(14, 100%, 53%)
+- name: "$yellow"
+  value: hsl(48, 100%, 67%)
+- name: "$green"
+  value: hsl(141, 71%, 48%)
+- name: "$turquoise"
+  value: hsl(171, 100%, 41%)
+- name: "$blue"
+  value: hsl(217, 71%, 53%)
+- name: "$purple"
+  value: hsl(271, 100%, 71%)
+- name: "$red"
+  value: hsl(348, 100%, 61%)
+colors:
+- id: "white"
+  variable: "$white"
+  value: "$white"
+  value_hex: white
+  invert: "$black"
+  invert_hex: black
+- id: "black"
+  variable: "$black"
+  value: "$black"
+  value_hex: black
+  invert: "$white"
+  invert_hex: white
+- id: "light"
+  variable: "$light"
+  value: "$white-ter"
+  value_hex: white-ter
+  invert: "$light-invert"
+  invert_hex: black
+- id: "dark"
+  variable: "$dark"
+  value: "$grey-darker"
+  value_hex: grey-darker
+  invert: "$dark-invert"
+  invert_hex: white
+- id: "primary"
+  variable: "$primary"
+  value: "$turquoise"
+  value_hex: turquoise
+  invert: "$primary-invert"
+  invert_hex: white
+- id: "info"
+  variable: "$info"
+  value: "$blue"
+  value_hex: blue
+  invert: "$info-invert"
+  invert_hex: white
+- id: "success"
+  variable: "$success"
+  value: "$green"
+  value_hex: green
+  invert: "$success-invert"
+  invert_hex: white
+- id: "warning"
+  variable: "$warning"
+  value: "$yellow"
+  value_hex: yellow
+  invert: "$warning-invert"
+  invert_hex: black
+- id: "danger"
+  variable: "$danger"
+  value: "$red"
+  value_hex: red
+  invert: "$danger-invert"
+  invert_hex: white
+shades:
+- id: "black-bis"
+  value: "$black-bis"
+- id: "black-ter"
+  value: "$black-ter"
+- id: "grey-darker"
+  value: "$grey-darker"
+- id: "grey-dark"
+  value: "$grey-dark"
+- id: "grey"
+  value: "$grey"
+- id: "grey-light"
+  value: "$grey-light"
+- id: "grey-lighter"
+  value: "$grey-lighter"
+- id: "white-ter"
+  value: "$white-ter"
+- id: "white-bis"
+  value: "$white-bis"
+---
+
+{% 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> all 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>Actual value</th>
+          <th>Invert variable</th>
+          <th>Actual invert value</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for color in page.colors %}
+          {% assign includePath = color.value_hex | prepend: "color/" | append: ".html" %}
+          <tr>
+            <td>
+              <strong>{{ color.id | capitalize }}</strong>
+            </td>
+            <td>
+              <code>{{ color.variable }}</code>
+            </td>
+            <td>
+              <code>{{ color.value }}</code>
+            </td>
+            <td>
+              {% include {{ includePath }} %}
+            </td>
+            <td>
+              <code>{{ color.invert }}</code>
+            </td>
+            <td>
+              {% if color.invert_hex == "black" %}
+                <span class="color" style="background: rgba(0, 0, 0, 0.7);"></span>
+                <code>rgba(0, 0, 0, 0.7)</code>
+              {% else %}
+                <span class="color" style="background: #fff;"></span>
+                <code>#fff</code>
+              {% endif %}
+            </td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</section>

docs/documentation/overview/responsiveness.html

@@ -35,9 +35,9 @@ doc-subtab: responsiveness
       <ul>
         <li><code>mobile</code>: up to <code>768px</code></li>
         <li><code>tablet</code>: from <code>769px</code></li>
-        <li><code>desktop</code>: from <code>1000px</code></li>
-        <li><code>widescreen</code>: from <code>1192px</code></li>
-        <li><span class="tag is-success">New!</span> <code>fullhd</code>: from <code>1384px</code></li>
+        <li><code>desktop</code>: from <code>1008px</code></li>
+        <li><code>widescreen</code>: from <code>1200px</code></li>
+        <li><span class="tag is-success">New!</span> <code>fullhd</code>: from <code>1392px</code></li>
       </ul>
       <p>Bulma uses 9 responsive mixins:</p>
       <ul>
@@ -51,32 +51,32 @@ doc-subtab: responsiveness
         </li>
         <li>
           <code>=tablet-only</code><br>
-          from <code>769px</code> and until <code>999px</code>
+          from <code>769px</code> and until <code>1007px</code>
         </li>
         <li>
           <code>=touch</code><br>
-          until <code>999px</code>
+          until <code>1007px</code>
         </li>
         <li>
           <code>=desktop</code><br>
-          from <code>1000px</code>
+          from <code>1008px</code>
         </li>
         <li>
           <code>=desktop-only</code><br>
-          from <code>1000px</code> and until <code>1191px</code>
+          from <code>1008px</code> and until <code>1199px</code>
         </li>
         <li>
           <code>=widescreen</code><br>
-          from <code>1192px</code>
+          from <code>1200px</code>
         </li>
         <li>
           <code>=widescreen-only</code><br>
-          from <code>1192px</code> and until <code>1383px</code>
+          from <code>1200px</code> and until <code>1391px</code>
         </li>
         <li>
           <span class="tag is-success">New!</span>
           <code>=fullhd</code><br>
-          from <code>1384px</code>
+          from <code>1392px</code>
         </li>
       </ul>
     </div>
@@ -90,19 +90,19 @@ doc-subtab: responsiveness
           </th>
           <th style="width: 20%;">
             Tablet<br>
-            Between <code>769px</code> and <code>999px</code>
+            Between <code>769px</code> and <code>1007px</code>
           </th>
           <th style="width: 20%;">
             Desktop<br>
-            Between <code>1000px</code> and <code>1191px</code>
+            Between <code>1008px</code> and <code>1199px</code>
           </th>
           <th style="width: 20%;">
             Widescreen<br>
-            Between <code>1192px</code> and <code>1383px</code>
+            Between <code>1200px</code> and <code>1391px</code>
           </th>
           <th style="width: 20%;">
             FullHD<br>
-            <code>1384px</code> and above
+            <code>1392px</code> and above
           </th>
         </tr>
       </thead>

docs/documentation/overview/variables.html

@@ -3,6 +3,195 @@ title: Variables
 layout: documentation
 doc-tab: overview
 doc-subtab: variables
+initial_colors:
+- name: $black
+  value: hsl(0, 0%, 4%)
+- name: $black-bis
+  value: hsl(0, 0%, 7%)
+- name: $black-ter
+  value: hsl(0, 0%, 14%)
+- name: $grey-darker
+  value: hsl(0, 0%, 21%)
+- name: $grey-dark
+  value: hsl(0, 0%, 29%)
+- name: $grey
+  value: hsl(0, 0%, 48%)
+- name: $grey-light
+  value: hsl(0, 0%, 71%)
+- name: $grey-lighter
+  value: hsl(0, 0%, 86%)
+- name: $white-ter
+  value: hsl(0, 0%, 96%)
+- name: $white-bis
+  value: hsl(0, 0%, 98%)
+- name: $white
+  value: hsl(0, 0%, 100%)
+- name: $orange
+  value: hsl(14, 100%, 53%)
+- name: $yellow
+  value: hsl(48, 100%, 67%)
+- name: $green
+  value: hsl(141, 71%, 48%)
+- name: $turquoise
+  value: hsl(171, 100%, 41%)
+- name: $blue
+  value: hsl(217, 71%, 53%)
+- name: $purple
+  value: hsl(271, 100%, 71%)
+- name: $red
+  value: hsl(348, 100%, 61%)
+initial_variables:
+- name: $family-sans-serif
+  value: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
+- name: $family-monospace
+  value: monospace
+- name: $render-mode
+  value: optimizeLegibility
+- name: $size-1
+  value: 3rem
+- name: $size-2
+  value: 2.5rem
+- name: $size-3
+  value: 2rem
+- name: $size-4
+  value: 1.5rem
+- name: $size-5
+  value: 1.25rem
+- name: $size-6
+  value: 1rem
+- name: $size-7
+  value: 0.75rem
+- name: $weight-light
+  value: 300
+- name: $weight-normal
+  value: 400
+- name: $weight-medium
+  value: 500
+- name: $weight-semibold
+  value: 600
+- name: $weight-bold
+  value: 700
+- name: $gap
+  value: 24px
+- name: $tablet
+  value: 769px
+- name: $desktop
+  value: 960px + (2 * $gap)
+- name: $widescreen
+  value: 1152px + (2 * $gap)
+- name: $fullhd
+  value: 1344px + (2 * $gap)
+- name: $easing
+  value: ease-out
+- name: $radius-small
+  value: 2px
+- name: $radius
+  value: 3px
+- name: $radius-large
+  value: 5px
+- name: $speed
+  value: 86ms
+derived_variables:
+- name: $primary
+  value: $turquoise
+- name: $info
+  value: $blue
+- name: $success
+  value: $green
+- name: $warning
+  value: $yellow
+- name: $danger
+  value: $red
+- name: $light
+  value: $white-ter
+- name: $dark
+  value: $grey-darker
+- name: $orange-invert
+  value: findColorInvert($orange)
+- name: $yellow-invert
+  value: findColorInvert($yellow)
+- name: $green-invert
+  value: findColorInvert($green)
+- name: $turquoise-invert
+  value: findColorInvert($turquoise)
+- name: $blue-invert
+  value: findColorInvert($blue)
+- name: $purple-invert
+  value: findColorInvert($purple)
+- name: $red-invert
+  value: findColorInvert($red)
+- name: $primary-invert
+  value: $turquoise-invert
+- name: $info-invert
+  value: $blue-invert
+- name: $success-invert
+  value: $green-invert
+- name: $warning-invert
+  value: $yellow-invert
+- name: $danger-invert
+  value: $red-invert
+- name: $light-invert
+  value: $dark
+- name: $dark-invert
+  value: $light
+- name: $background
+  value: $white-ter
+- name: $border
+  value: $grey-lighter
+- name: $border-hover
+  value: $grey-light
+- name: $text
+  value: $grey-dark
+- name: $text-invert
+  value: findColorInvert($text)
+- name: $text-light
+  value: $grey
+- name: $text-strong
+  value: $grey-darker
+- name: $code
+  value: $red
+- name: $code-background
+  value: $background
+- name: $pre
+  value: $text
+- name: $pre-background
+  value: $background
+- name: $link
+  value: $primary
+- name: $link-invert
+  value: $primary-invert
+- name: $link-visited
+  value: $purple
+- name: $link-hover
+  value: $grey-darker
+- name: $link-hover-border
+  value: $grey-light
+- name: $link-focus
+  value: $grey-darker
+- name: $link-focus-border
+  value: $primary
+- name: $link-active
+  value: $grey-darker
+- name: $link-active-border
+  value: $grey-dark
+- name: $family-primary
+  value: $family-sans-serif
+- name: $family-code
+  value: $family-monospace
+- name: $size-small
+  value: $size-7
+- name: $size-normal
+  value: $size-6
+- name: $size-medium
+  value: $size-5
+- name: $size-large
+  value: $size-4
+- name: $colors
+  value: '("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert))'
+- name: $shades
+  value: '("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis)'
+- name: $sizes
+  value: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6
 ---
 
 {% include subnav-overview.html %}
@@ -15,486 +204,102 @@ doc-subtab: variables
     <hr>
 
     <div class="content">
-      <p>Bulma has 1 variable file divided into <strong>4</strong> sections:</p>
-      <ul>
+      <p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p>
+      <ol>
         <li>
-          <strong>Initial variables</strong>: where you define variables by <strong>direct value</strong>, like:
+          <strong>Initial variables</strong>: where you define variables by <strong>literal value</strong>, like:
           <ul>
             <li><strong>colors</strong>: <code>$blue: hsl(217, 71%,  53%)</code></li>
             <li><strong>font sizes</strong>: <code>$size-1: 3rem</code></li>
+            <li><strong>dimensions</strong>: <code>$gap: 24px</code></li>
             <li><strong>other values</strong>: <code>$easing: ease-out</code> or <code>$radius-large: 5px</code></li>
           </ul>
         </li>
         <li>
-          <strong>Primary colors</strong> derived from the initial variables:
+          <strong>Derived variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
           <ul>
-            <li><code>$primary: $turquoise</code></li>
-            <li><code>$info: $blue</code></li>
-            <li><code>$success: $green</code></li>
-            <li><code>$warning: $yellow</code></li>
-            <li><code>$danger: $red</code></li>
-            <li><code>$dark: $grey-darker</code></li>
-            <li><code>$text: $grey-dark</code></li>
-          </ul>
-        </li>
-        <li>
-          <strong>Generated variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
-          <ul>
-            <li><code>$body-background: $white</code>: the main background color</li>
+            <li>
+              <strong>Primary colors</strong> derived from the initial variables:
+              <ul>
+                <li><code>$primary: $turquoise</code></li>
+                <li><code>$info: $blue</code></li>
+                <li><code>$success: $green</code></li>
+                <li><code>$warning: $yellow</code></li>
+                <li><code>$danger: $red</code></li>
+                <li><code>$dark: $grey-darker</code></li>
+                <li><code>$text: $grey-dark</code></li>
+              </ul>
+            </li>
+            <li><code>$background: $white-ter</code>: a general background color</li>
             <li><code>$link: $primary</code>: the links use the primary color</li>
             <li><code>$family-primary: $family-sans-serif</code>: the primary font family is the sans-serif one</li>
+            <li>
+              <strong>Lists and maps</strong> which are collections so already defined variables:
+              <ul>
+                <li><code>$colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))</code></li>
+                <li><code>$shades: ("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis)</code></li>
+                <li><code>$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6</code></li>
+              </ul>
+            </li>
           </ul>
         </li>
-        <li>
-          <strong>Lists and maps</strong> which are collections so already defined variables:
-          <ul>
-            <li><code>$colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))</code></li>
-            <li><code>$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6</code></li>
-          </ul>
-        </li>
-      </ul>
+      </ol>
       <p>
         To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
       </p>
     </div>
 
-    <hr>
+    {% include heading.html name="Initial variables" %}
 
-    <table class="table is-bordered is-striped">
-      <tr><th colspan="2">1. Initial variables</th></tr>
+    <div class="content">
+      <p>
+        These are variables with a <strong>literal</strong> value.
+      </p>
+    </div>
 
-      <tr><th colspan="2">Colors</th></tr>
-      <tr>
-        <td><code>$black</code></td>
-        <td>
-          <span class="color" style="background: hsl(0, 0%, 4%);"></span>
-          hsl(0, 0%, 4%)
-        </td>
-      </tr>
-      <tr>
-        <td><code>$black-bis</code></td>
-        <td>
-          <span class="color" style="background: hsl(0, 0%, 7%);"></span>
-          hsl(0, 0%, 7%)
-        </td>
-      </tr>
-      <tr>
-        <td><code>$black-ter</code></td>
-        <td>
-          <span class="color" style="background: hsl(0, 0%, 14%);"></span>
-          hsl(0, 0%, 14%)
-        </td>
-      </tr>
-      <tr>
-        <td><code>$grey-darker</code></td>
-        <td>
-          <span class="color" style="background:  hsl(0, 0%, 21%);"></span>
-           hsl(0, 0%, 21%)
+    <table class="table is-bordered is-striped">
+      {% for color in page.initial_colors %}
+        <tr>
+          <td>
+            <code style="white-space: nowrap;">{{ color.name }}</code>
+          </td>
+          <td>
+            <span class="color" style="background: {{ color.value }};"></span>
+            <code>{{ color.value }}</code>
           </td>
         </tr>
-      <tr>
-        <td><code>$grey-dark</code></td>
-        <td>
-          <span class="color" style="background: hsl(0, 0%, 29%);"></span>
-          hsl(0, 0%, 29%)
-        </td>
-      </tr>
-      <tr>
-        <td><code>$grey</code></td>
-        <td>
-          <span class="color" style="background: hsl(0, 0%, 48%);"></span>
-          hsl(0, 0%, 48%)
-        </td>
-      </tr>
-      <tr>
-        <td><code>$grey-light</code></td>
-        <td>
-          <span class="color" style="background: hsl(0, 0%, 71%);"></span>
-          hsl(0, 0%, 71%)
-        </td>
-      </tr>
-      <tr>
-        <td><code>$grey-lighter</code></td>
-        <td>
-          <span class="color" style="background: hsl(0, 0%, 86%);"></span>
-          hsl(0, 0%, 86%)
-        </td>
-      </tr>
-      <tr>
-        <td><code>$white-ter</code></td>
-        <td>
-          <span class="color" style="background: hsl(0, 0%, 96%);"></span>
-          hsl(0, 0%, 96%)
-        </td>
-      </tr>
-      <tr>
-        <td><code>$white-bis</code></td>
-        <td>
-          <span class="color" style="background: hsl(0, 0%, 98%);"></span>
-          hsl(0, 0%, 98%)
-        </td>
-      </tr>
-      <tr>
-        <td><code>$white</code></td>
-        <td>
-          <span class="color" style="background: hsl(0, 0%, 100%);"></span>
-          hsl(0, 0%, 100%)
-        </td>
-      </tr>
-      <tr>
-        <td><code>$orange</code></td>
-        <td>
-          <span class="color" style="background: hsl(14,  100%, 53%);"></span>
-          hsl(14,  100%, 53%)
-        </td>
-      </tr>
-      <tr>
-        <td><code>$yellow</code></td>
-        <td>
-          <span class="color" style="background: hsl(48,  100%, 67%);"></span>
-          hsl(48,  100%, 67%)
-        </td>
-      </tr>
-      <tr>
-        <td><code>$green</code></td>
-        <td>
-          <span class="color" style="background: hsl(141, 71%,  48%);"></span>
-          hsl(141, 71%,  48%)
-        </td>
-      </tr>
-      <tr>
-        <td><code>$turquoise</code></td>
-        <td>
-          <span class="color" style="background: hsl(171, 100%, 41%);"></span>
-          hsl(171, 100%, 41%)
-        </td>
-      </tr>
-      <tr>
-        <td><code>$blue</code></td>
-        <td>
-          <span class="color" style="background: hsl(217, 71%,  53%);"></span>
-          hsl(217, 71%,  53%)
-        </td>
-      </tr>
-      <tr>
-        <td><code>$purple</code></td>
-        <td>
-          <span class="color" style="background: hsl(271, 100%, 71%);"></span>
-          hsl(271, 100%, 71%)
-        </td>
-      </tr>
-      <tr>
-        <td><code>$red</code></td>
-        <td>
-          <span class="color" style="background: hsl(348, 100%, 61%);"></span>
-          hsl(348, 100%, 61%)
-        </td>
-      </tr>
-
-      <tr><th colspan="2">Typography</th></tr>
-      <tr>
-        <td><code>$family-sans-serif</code></td>
-        <td>-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",<br>"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",<br>"Helvetica Neue", "Helvetica", "Arial", sans-serif</td>
-      </tr>
-      <tr>
-        <td><code>$family-monospace</code></td>
-        <td>monospace</td>
-      </tr>
-      <tr>
-        <td><code>$size-1</code></td>
-        <td>3rem</td>
-      </tr>
-      <tr>
-        <td><code>$size-2</code></td>
-        <td>2.5rem</td>
-      </tr>
-      <tr>
-        <td><code>$size-3</code></td>
-        <td>2rem</td>
-      </tr>
-      <tr>
-        <td><code>$size-4</code></td>
-        <td>1.5rem</td>
-      </tr>
-      <tr>
-        <td><code>$size-5</code></td>
-        <td>1.25rem</td>
-      </tr>
-      <tr>
-        <td><code>$size-6</code></td>
-        <td>1rem</td>
-      </tr>
-      <tr>
-        <td><code>$size-7</code></td>
-        <td>0.75rem</td>
-      </tr>
-      <tr>
-        <td><code>$weight-light</code></td>
-        <td>300</td>
-      </tr>
-      <tr>
-        <td><code>$weight-normal</code></td>
-        <td>400</td>
-      </tr>
-      <tr>
-        <td><code>$weight-semibold</code></td>
-        <td>500</td>
-      </tr>
-      <tr>
-        <td><code>$weight-bold</code></td>
-        <td>700</td>
-      </tr>
-
-      <tr><th colspan="2">Body</th></tr>
-      <tr>
-        <td><code>$body-background</code></td>
-        <td><code>$white</code></td>
-      </tr>
-      <tr>
-        <td><code>$body-size</code></td>
-        <td><code>16px</code></td>
-      </tr>
-
-      <tr><th colspan="5">Breakpoints</th></tr>
-      <tr>
-        <td><code>$gap</code></td>
-        <td>24px</td>
-      </tr>
-      <tr>
-        <td><code>$tablet</code></td>
-        <td>769px</td>
-      </tr>
-      <tr>
-        <td><code>$desktop</code></td>
-        <td>1008px (960px + 2 * <code>$gap</code>)</td>
-      </tr>
-      <tr>
-        <td><code>$widescreen</code></td>
-        <td>1200px (1152px+ 2 * <code>$gap</code>)</td>
-      </tr>
-      <tr>
-        <td><code>$fullhd</code></td>
-        <td>1392px (1344px+ 2 * <code>$gap</code>)</td>
-      </tr>
-
-      <tr><th colspan="2">Miscellaneous</th></tr>
-      <tr>
-        <td><code>$easing</code></td>
-        <td>ease-out</td>
-      </tr>
-      <tr>
-        <td><code>$radius</code></td>
-        <td>3px</td>
-      </tr>
-      <tr>
-        <td><code>$speed</code></td>
-        <td>86ms</td>
-      </tr>
-
-      <tr><th colspan="2">2. Primary colors</th></tr>
-      <tr>
-        <td><code>$primary</code></td>
-        <td><code>$turquoise</code></td>
-      </tr>
-      <tr>
-        <td><code>$info</code></td>
-        <td><code>$blue</code></td>
-      </tr>
-      <tr>
-        <td><code>$success</code></td>
-        <td><code>$green</code></td>
-      </tr>
-      <tr>
-        <td><code>$warning</code></td>
-        <td><code>$yellow</code></td>
-      </tr>
-      <tr>
-        <td><code>$danger</code></td>
-        <td><code>$red</code></td>
-      </tr>
-      <tr>
-        <td><code>$light</code></td>
-        <td><code>$white-ter</code></td>
-      </tr>
-      <tr>
-        <td><code>$dark</code></td>
-        <td><code>$grey-darker</code></td>
-      </tr>
-
-      <tr><th colspan="2">3. Generated variables</th></tr>
-
-      <tr><th colspan="2">Invert colors</th></tr>
-      <tr>
-        <td><code>$primary-invert</code></td>
-        <td><code>findColorInvert($primary)</code></td>
-      </tr>
-      <tr>
-        <td><code>$info-invert</code></td>
-        <td><code>findColorInvert($info)</code></td>
-      </tr>
-      <tr>
-        <td><code>$success-invert</code></td>
-        <td><code>findColorInvert($success)</code></td>
-      </tr>
-      <tr>
-        <td><code>$warning-invert</code></td>
-        <td><code>findColorInvert($warning)</code></td>
-      </tr>
-      <tr>
-        <td><code>$danger-invert</code></td>
-        <td><code>findColorInvert($danger)</code></td>
-      </tr>
-      <tr>
-        <td><code>$light-invert</code></td>
-        <td><code>$dark</code></td>
-      </tr>
-      <tr>
-        <td><code>$dark-invert</code></td>
-        <td><code>$light</code></td>
-      </tr>
-
-      <tr><th colspan="2">General colors</th></tr>
-      <tr>
-        <td><code>$body-background</code></td>
-        <td><code>$grey-lighter</code></td>
-      </tr>
-      <tr>
-        <td><code>$background</code></td>
-        <td><code>$grey-lighter</code></td>
-      </tr>
-      <tr>
-        <td><code>$border</code></td>
-        <td><code>$grey-light</code></td>
-      </tr>
-      <tr>
-        <td><code>$border-hover</code></td>
-        <td><code>$grey</code></td>
-      </tr>
-
-      <tr><th colspan="2">Text colors</th></tr>
-      <tr>
-        <td><code>$text</code></td>
-        <td><code>$grey-dark</code></td>
-      </tr>
-      <tr>
-        <td><code>$text-invert</code></td>
-        <td><code>findColorInvert($text)</code></td>
-      </tr>
-      <tr>
-        <td><code>$text-light</code></td>
-        <td><code>$grey</code></td>
-      </tr>
-      <tr>
-        <td><code>$text-strong</code></td>
-        <td><code>$grey-darker</code></td>
-      </tr>
-
-      <tr><th colspan="2">Code colors</th></tr>
-      <tr>
-        <td><code>$code</code></td>
-        <td><code>$red</code></td>
-      </tr>
-      <tr>
-        <td><code>$code-background</code></td>
-        <td><code>$background</code></td>
-      </tr>
-      <tr>
-        <td><code>$pre</code></td>
-        <td><code>$text</code></td>
-      </tr>
-      <tr>
-        <td><code>$pre-background</code></td>
-        <td><code>$background</code></td>
-      </tr>
-
-      <tr><th colspan="2">Link colors</th></tr>
-      <tr>
-        <td><code>$link</code></td>
-        <td><code>$primary</code></td>
-      </tr>
-      <tr>
-        <td><code>$link-invert</code></td>
-        <td><code>$primary-invert</code></td>
-      </tr>
-      <tr>
-        <td><code>$link-visited</code></td>
-        <td><code>$purple</code></td>
-      </tr>
-      <tr>
-        <td><code>$link-hover</code></td>
-        <td><code>$grey-darker</code></td>
-      </tr>
-      <tr>
-        <td><code>$link-hover-border</code></td>
-        <td><code>$grey-darker</code></td>
-      </tr>
-      <tr>
-        <td><code>$link-focus</code></td>
-        <td><code>$grey-darker</code></td>
-      </tr>
-      <tr>
-        <td><code>$link-focus-border</code></td>
-        <td><code>$primary</code></td>
-      </tr>
-      <tr>
-        <td><code>$link-active</code></td>
-        <td><code>$grey-darker</code></td>
-      </tr>
-      <tr>
-        <td><code>$link-active-border</code></td>
-        <td><code>$grey-dark</code></td>
-      </tr>
+      {% endfor %}
+      {% for variable in page.initial_variables %}
+        <tr>
+          <td>
+            <code style="white-space: nowrap;">{{ variable.name }}</code>
+          </td>
+          <td>
+            <code>{{ variable.value }}</code>
+          </td>
+        </tr>
+      {% endfor %}
+    </table>
 
-      <tr><th colspan="2">Typography</th></tr>
-      <tr>
-        <td><code>$family-primary</code></td>
-        <td><code>$family-sans-serif</code></td>
-      </tr>
-      <tr>
-        <td><code>$family-code</code></td>
-        <td><code>$family-monospace</code></td>
-      </tr>
-      <tr>
-        <td><code>$size-small</code></td>
-        <td><code>$size-7</code></td>
-      </tr>
-      <tr>
-        <td><code>$size-normal</code></td>
-        <td><code>$size-6</code></td>
-      </tr>
-      <tr>
-        <td><code>$size-medium</code></td>
-        <td><code>$size-5</code></td>
-      </tr>
-      <tr>
-        <td><code>$size-large</code></td>
-        <td><code>$size-4</code></td>
-      </tr>
+    {% include heading.html name="Derived variables" %}
 
-      <tr><th colspan="2">4. Lists and maps</th></tr>
-      <tr>
-        <td><code>$colors</code>
-        <td>
-          <pre>
-(
-  white: ($white, $black),
-  black: ($black, $white),
-  light: ($light, $light-invert),
-  dark: ($dark, $dark-invert),
-  primary: ($primary, $primary-invert),
-  info: ($info, $info-invert),
-  success: ($success, $success-invert),
-  warning: ($warning, $warning-invert),
-  danger: ($danger, $danger-invert)
-)
-          </pre>
-        </td>
-      </tr>
+    <div class="content">
+      <p>
+        These are variables with a value that <strong>references</strong> another variable.
+      </p>
+    </div>
 
-      <tr>
-        <td><code>$sizes</code></td>
-        <td><code>$size-1 $size-2 $size-3 $size-4 $size-5 $size-6</code></td>
-      </tr>
+    <table class="table is-bordered is-striped">
+      {% for variable in page.derived_variables %}
+        <tr>
+          <td>
+            <code style="white-space: nowrap;">{{ variable.name }}</code>
+          </td>
+          <td>
+            <code>{{ variable.value }}</code>
+          </td>
+        </tr>
+      {% endfor %}
     </table>
   </div>
 </section>