Merge pull request #5 from mapbox/color-limiter-option

Add a color limiter option

README.md

@@ -50,8 +50,9 @@ Returns
 
 | Option | Value | Default | Description |
 | --- | --- | --- | --- |
-| `brightness` | `Number` | `undefined` | Adjusts brightness percentage from the derived min/max range. |
-| `saturation` | `Number` | `undefined` | Adjusts saturation percentage from the derived min/max range. |
+| `brightness` | `Number` | 0 | Adjusts brightness percentage from the derived min/max range. |
+| `saturation` | `Number` | 0 | Adjusts saturation percentage from the derived min/max range. |
+| `limit` | `Array` | `[]` | Limits the higher range of hues for a given color. Options can be `red`, `orange`, `yellow`, `green`, `blue`, `purple`, or `pink`. |
 
 ### Developing
 

demo/index.html

@@ -28,7 +28,8 @@ <h1 class="txt-h4 txt-fancy block mb6">@mapbox/to-color</h1>
       ['mapbox.mapbox-streets-v8', 16, { saturation: 0.5 }],
       ['mapbox.mapbox-streets-v8', 16, { saturation: 1.5 }],
       ['mapbox.mapbox-streets-v8', 16, { brightness: 0.5 }],
-      ['mapbox.mapbox-streets-v8', 16, { brightness: 1.5 }]
+      ['mapbox.mapbox-streets-v8', 16, { brightness: 1.5 }],
+      ['mapbox.mapbox-streets-v8', 16, { brightness: 1.5, limit: ['blue'] }]
     ].forEach(swatch => {
       const seed = swatch[0];
       const count = swatch[1];
@@ -47,6 +48,7 @@ <h1 class="txt-h4 txt-fancy block mb6">@mapbox/to-color</h1>
         const { hsl } = s.getColor();
         const swatchContainerItem = document.createElement('div');
         swatchContainerItem.classList = `px12 py12 flex-child flex-child--grow h120`;
+        swatchContainerItem.style.flexBasis = 0;
         swatchContainerItem.textContent = swatchContainerItem.title = swatchContainerItem.style.backgroundColor = hsl.formatted;
         swatchContainer.appendChild(swatchContainerItem);
       };