Merge pull request #2 from samzlab/rgb-to-hsl-refactor

fix(util): use hsluv function to get the hue/saturation values from inputColor #1

package.json

@@ -18,7 +18,7 @@
         "build": "rollup -c",
         "test": "rollup -c && jest",
         "release": "rollup -c && standard-version",
-        "publish": "git push --follow-tags origin master && npm publish"
+        "push": "git push --follow-tags origin master && npm publish"
     },
     "keywords": [
         "tailwindcss",

src/utils.js

@@ -1,38 +1,4 @@
-import { hpluvToHex, hsluvToHex } from 'hsluv';
-
-// based on https://gist.github.com/mjackson/5311256
-/**
- *
- * @param {import('../types/utils').rgbColor} param0
- */
-export function rgbToHsl([ r, g, b ]) {
-	r /= 255;
-	g /= 255;
-	b /= 255;
-
-	let max = Math.max(r, g, b), min = Math.min(r, g, b);
-	let h, s, l = (max + min) / 2;
-
-	if (max === min) {
-		h = s = 0; // achromatic
-	} else {
-		let d = max - min;
-		s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-
-		/* eslint-disable no-mixed-operators */
-		switch (max) {
-			case r: h = (g - b) / d + (g < b ? 6 : 0); break;
-			case g: h = (b - r) / d + 2; break;
-			case b: h = (r - g) / d + 4; break;
-			default: break;
-		}
-		/* eslint-enable no-mixed-operators */
-
-		h /= 6;
-	}
-
-	return [ h * 360, s * 100, l ];
-}
+import { hpluvToHex, hsluvToHex, rgbToHsluv } from 'hsluv';
 
 /**
  *
@@ -42,10 +8,10 @@ export function rgbToHsl([ r, g, b ]) {
  * @returns { import('../types/utils').generatorFunction }
  */
 export function createGenerator(rgb, hpluv = false) {
-	const [ hue, saturation ] = rgbToHsl(rgb);
+	const [ hue, saturation ] = rgbToHsluv(rgb);
 	const method = hpluv ? hpluvToHex : hsluvToHex;
 
-	return (lightness) => method([ hue, saturation, lightness ]);
+	return (lightness) => method([ hue, 100 - saturation, lightness ]);
 }
 
 /**

tests/__snapshots__/generate-colors.test.js.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Generate colors by name "red" 1`] = `
+Object {
+  "red": Object {
+    "100": "#FFDADA",
+    "200": "#FFB3B3",
+    "300": "#FF8888",
+    "400": "#FF5353",
+    "500": "#EF0000",
+    "600": "#C00000",
+    "700": "#930000",
+    "800": "#690000",
+    "900": "#410000",
+    "default": "#FF0000",
+  },
+}
+`;

tests/generate-colors.test.js

@@ -1,7 +1,11 @@
-const { generateColors } = require('../');
+const { generateColors, resolveColor } = require('../');
 
 describe('Generate colors', () => {
 
+	test('"red" should resolve to "#ff0000"', () => {
+		expect(resolveColor('red')).toEqual({ hex: 'FF0000', rgb: [ 255, 0, 0 ] });
+	});
+
 	test('color variations has default key', () => {
 		expect(generateColors({
 			red: 'red'
@@ -23,20 +27,7 @@ describe('Generate colors', () => {
 	});
 
 	test('by name "red"', () => {
-		expect(generateColors({ red: 'red' })).toEqual({
-			red: {
-				100: '#FFD9E0',
-				200: '#FFB1C0',
-				300: '#FF86A1',
-				400: '#FF4D81',
-				500: '#EA0064',
-				600: '#BC004F',
-				700: '#90003B',
-				800: '#660028',
-				900: '#3F0016',
-				default: '#FF0000'
-			}
-		});
+		expect(generateColors({ red: 'red' })).toMatchSnapshot();
 	});
 
 });