Fix mergeColorMaps

CHANGELOG.md

@@ -4,7 +4,7 @@
 
 ### New features
 
-* 🎉 #1747 New `$custom-colors` variable for adding your own colors to Bulma's `$colors` map
+* 🎉 #1747 New `$custom-colors` and `$custom-shades` variable for adding your own colors and shades to Bulma's `$colors` and `$shades` maps respectively
 
 ### Improvements
 

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>

sass/utilities/derived-variables.sass

@@ -76,8 +76,9 @@ $size-large: $size-4 !default
 
 // Lists and maps
 $custom-colors: null !default
+$custom-shades: null !default
 
-$colors: colorMap(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
+$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
-$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) !default
+$shades: mergeColorMaps(("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), $custom-shades) !default
 
 $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default

sass/utilities/functions.sass

@@ -1,4 +1,4 @@
-@function colorMap($bulma-colors, $custom-colors)
+@function mergeColorMaps($bulma-colors, $custom-colors)
   // we return at least bulma hardcoded colors
   $merged-colors: $bulma-colors
   // we want a map as input
@@ -6,6 +6,12 @@
     @each $name, $components in $custom-colors
       // color name should be a string and colors pair a list with at least one element
       @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
+        $color-base: null
+        // only a single color is provided
+        @if type-of($components) == 'color'
+          $color-base: $components
+        // a list of colors is provided
+        @else if type-of($components) == 'list'
           $color-base: nth($components, 1)
         $color-invert: null
         // is an inverted color provided ?