David deprost fix/adjust hue (#439)

* fix(hslToRgb): correct % for potential negative hue

Due to the Javascript modulo bug
(https://stackoverflow.com/questions/4467539/javascript-modulo-gives-a-negative-result-for-negative-numbers),
any negative value for hue results in a bug where the resulting color will be black. Negative hues
should cycle through to 359, so that functions like `adjustHue()` can provide consistent behavior
for all colors.

fix #437

* refactor(adjustHue): remove redundant %

Since the % operation is already performed inside `hslToRgb()` in `src/internalHelpers/_hslToRgb.js`
(which `adjustHue()` eventually calls through `toColorString()`), this % is completely redundant.

refactor #437

* style(hslToRgb): Fix typo and remove comment

* test(hslToRgb): negative hue test

Test hslToRgb's ability to handle negative hues passed in through adjustHue.

tests #437

* chore(docs): Prep for 3.3.1 release

* build(package.json): Bump version

docs/assets/polished.js

@@ -2007,10 +2007,10 @@
     if (saturation === 0) {
       // achromatic
       return convert(lightness, lightness, lightness);
-    } // formular from https://en.wikipedia.org/wiki/HSL_and_HSV
+    } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
 
 
-    var huePrime = hue % 360 / 60;
+    var huePrime = (hue % 360 + 360) % 360 / 60;
     var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
     var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
     var red = 0;
@@ -2674,8 +2674,8 @@
 
   /**
    * Changes the hue of the color. Hue is a number between 0 to 360. The first
-   * argument for adjustHue is the amount of degrees the color is rotated along
-   * the color wheel.
+   * argument for adjustHue is the amount of degrees the color is rotated around
+   * the color wheel, always producing a positive hue value.
    *
    * @example
    * // Styles as object usage
@@ -2701,7 +2701,7 @@
     if (color === 'transparent') return color;
     var hslColor = parseToHsl(color);
     return toColorString(_extends({}, hslColor, {
-      hue: (hslColor.hue + parseFloat(degree)) % 360
+      hue: hslColor.hue + parseFloat(degree)
     }));
   } // prettier-ignore
 

docs/docs/index.html

@@ -3074,8 +3074,8 @@ <h3 class='fl m0' id='adjusthue'>
 
 
   <p>Changes the hue of the color. Hue is a number between 0 to 360. The first
-argument for adjustHue is the amount of degrees the color is rotated along
-the color wheel.</p>
+argument for adjustHue is the amount of degrees the color is rotated around
+the color wheel, always producing a positive hue value.</p>
 
 
   <div class='pre p1 fill-light mt0'>adjustHue(degree: (<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>), color: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "polished",
-  "version": "3.3.0",
+  "version": "3.3.2",
   "description": "A lightweight toolset for writing styles in Javascript.",
   "license": "MIT",
   "author": "Brian Hough <[email protected]> (https://polished.js.org)",

src/color/adjustHue.js

@@ -5,8 +5,8 @@ import curry from '../internalHelpers/_curry'
 
 /**
  * Changes the hue of the color. Hue is a number between 0 to 360. The first
- * argument for adjustHue is the amount of degrees the color is rotated along
- * the color wheel.
+ * argument for adjustHue is the amount of degrees the color is rotated around
+ * the color wheel, always producing a positive hue value.
  *
  * @example
  * // Styles as object usage