Add saturation adjustment for generated color palette (#491)

* Add saturation adjustment for generated color palette

* adding tests

* shorting method

Author: Inbal-Tish

src/style/__tests__/colors.spec.js

@@ -108,6 +108,16 @@ describe('style/Colors', () => {
       expect(cachedPalette).toBeDefined();
       expect(cachedPalette.length).toBe(8);
       expect(cachedPalette.includes('#3F88C5')).toBe(true);
-    })
+    });
+
+    it('should generateColorPalette', () => {
+      const palette = uut.generateColorPalette('#3F88C5');
+      expect(palette).toEqual(['#193852', '#255379', '#316EA1', '#3F88C5', '#66A0D1', '#8DB9DD', '#B5D1E9', '#DCE9F4']);
+    });
+
+    it('should generateColorPalette with adjusted saturation', () => {
+      const palette = uut.generateColorPalette('#FFE5FF');
+      expect(palette).toEqual(['#661A66', '#8F248F', '#B82EB7', '#D148D1', '#DB71DB', '#E699E6', '#F0C2F0', '#FFE5FF']);
+    });
   });
 });

src/style/colors.js

@@ -123,11 +123,34 @@ class Colors {
       tints.push(tint);
     });
 
-    const sliced = tints.slice(0, 8);
-    return sliced;
+    let sliced = tints.slice(0, 8);
+    const adjusted = adjustSaturation(sliced, color);
+    return adjusted || sliced;
   });
 }
 
+function adjustSaturation(colors, color) {
+  let array;
+  const lightnessLevel = 80;
+  const saturationLevel = 60;
+  const hsl = Color(color).hsl();
+  const lightness = Math.round(hsl.color[2]);
+
+  if (lightness > lightnessLevel) {
+    const saturation = Math.round(hsl.color[1]);
+    if (saturation > saturationLevel) {
+      array = _.map(colors, e => e !== color ? addSaturation(e, saturationLevel) : e)
+    }
+  }
+  return array;
+}
+
+function addSaturation(color, saturation) {
+  const hsl = Color(color).hsl();
+  hsl.color[1] = saturation;
+  return hsl.hex();
+}
+
 function generateColorTint(color, tintLevel) {
   const hsl = Color(color).hsl();
   hsl.color[2] = tintLevel;