Fix mergeColorMaps

docs/bulma-docs.sass

@@ -10,6 +10,8 @@ $amazon: #ffd863
 $bleeding-green: #ABF47C
 $bleeding-red: #CA1F26
 
+// $custom-colors: ("test": $bootstrap, "alt": ($bleeding-red, "jfoeij"), "debug": (pink, black))
+
 @import "../bulma"
 @import "./_sass/highlight"
 @import "./_sass/override"
@@ -31,3 +33,5 @@ $bleeding-red: #CA1F26
 @import "./_sass/sponsors"
 @import "./_sass/book"
 @import "./_sass/native"
+
+@debug $colors

docs/documentation/overview/colors.html

@@ -14,6 +14,15 @@ colors:
 - success
 - warning
 - danger
+shades:
+- black-bis
+- black-ter
+- grey-darker
+- grey-dark
+- grey-light
+- grey-lighter
+- white-ter
+- white-bis
 ---
 
 {% include subnav/subnav-overview.html %}
@@ -82,5 +91,37 @@ colors:
         {% endfor %}
       </tbody>
     </table>
+
+    <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>
+
+    <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>
 </section>