Add support for colorMode + change default to lrgb

Author: larsenwork

README.md

@@ -5,6 +5,7 @@
 [![Build Status][ci-img]][ci]
 [![NPM Version][npm-img]][npm]
 [![NPM Monthly Downloads][dm-img]][npm]
+[![JavaScript Style Guide][std-img]][std]
 
 ⚠️ The [syntax](#syntax) has changed substantially in `^v.2.0.0` ⚠️
 
@@ -15,7 +16,7 @@ Visual examples and online editor on [larsenwork.com/easing-gradients](https://l
 
 <br>
 
-## Examples
+## Code Examples
 
 ```css
 .cubic-bezier {
@@ -131,27 +132,12 @@ I wouldn't recommend tweaking from default values but:
 
 * `precision: 0.1` is the default and creates ~17 color stops. A higher number creates a more "low poly" gradient and banding becomes very visible when using anything above 0.2.
 * `alphaDecimals: 5` is the default. A lower number can result in banding.
-
-<br>
-
-## Demo
-
-Make sure that you have gulp cli installed and then `cd demo`, `npm install` and `gulp`.
-
-If you want to develop then `npm link` in project root and then `npm link postcss-easing-gradients`
-
-<br>
-
-## Contributions
-
-Are more than welcome. Code is linted using:
-
-[![js-standard-style][js-img]][js]
+* `colorMode: 'lrgb'` is the default color space used for interpolation and is closest to what most browsers use. Other options are `'rgb', 'hsl', 'lab' and 'lch'` as per [chromajs documentation](http://gka.github.io/chroma.js/#chroma-mix)
 
 [ci-img]:  https://img.shields.io/travis/larsenwork/postcss-easing-gradients.svg
 [ci]:      https://travis-ci.org/larsenwork/postcss-easing-gradients
-[js-img]:  https://cdn.rawgit.com/feross/standard/master/badge.svg
-[js]:      https://standardjs.com
 [npm-img]: https://img.shields.io/npm/v/postcss-easing-gradients.svg
 [npm]:     https://www.npmjs.com/package/postcss-easing-gradients
 [dm-img]:  https://img.shields.io/npm/dm/postcss-easing-gradients.svg
+[std-img]: https://img.shields.io/badge/code_style-standard-brightgreen.svg
+[std]:     https://standardjs.com

index.js

@@ -29,7 +29,7 @@ module.exports = postcss.plugin('easing-gradient', (options = {}) => {
                   try {
                     const colors = [gradientParams[i - 1], gradientParams[i + 1]]
                     const coordinates = easingCoordinates.easingCoordinates(param, options.precision)
-                    const colorStops = getColorStops(colors, coordinates, options.alphaDecimals)
+                    const colorStops = getColorStops(colors, coordinates, options.alphaDecimals, options.colorMode)
                     // Update node
                     node.type = 'word'
                     // Assume if it has 4 params it's because the first one is the direction

index.test.js

@@ -15,7 +15,7 @@ function run (input, output, opts) {
 it('create a steps gradient with direction', () => {
   return run(
     'a{ background: linear-gradient(to right, green, steps(4, skip-none), red); }',
-    'a{ background: linear-gradient(to right, hsl(120, 100%, 25.1%), hsl(120, 100%, 25.1%) 25%, hsl(60.23, 100%, 16.73%) 25%, hsl(60.23, 100%, 16.73%) 50%, hsl(15.06, 100%, 33.33%) 50%, hsl(15.06, 100%, 33.33%) 75%, hsl(0, 100%, 50%) 75%, hsl(0, 100%, 50%)); }', // eslint-disable-line max-len
+    'a{ background: linear-gradient(to right, hsl(120, 100%, 25.1%), hsl(120, 100%, 25.1%) 25%, hsl(42.59, 100%, 28.87%) 25%, hsl(42.59, 100%, 28.87%) 50%, hsl(21.3, 100%, 40.82%) 50%, hsl(21.3, 100%, 40.82%) 75%, hsl(0, 100%, 50%) 75%, hsl(0, 100%, 50%)); }', // eslint-disable-line max-len
     { }
   )
 })
@@ -29,7 +29,7 @@ it('create a cubic bezier gradient with direction', () => {
 it('create an ease gradient with direction', () => {
   return run(
     'a{ background: linear-gradient(to right, green, ease, red); }',
-    'a{ background: linear-gradient(to right, hsl(120, 100%, 25.1%), hsl(111.85, 100%, 23.5%) 7.8%, hsl(98.92, 100%, 21.34%) 13.2%, hsl(82.02, 100%, 19.05%) 17.6%, hsl(60.02, 100%, 16.71%) 21.7%, hsl(40.57, 100%, 21.3%) 25.8%, hsl(28.11, 100%, 25.86%) 30.2%, hsl(19.54, 100%, 30.32%) 35.1%, hsl(13.47, 100%, 34.55%) 40.6%, hsl(9.01, 100%, 38.49%) 46.9%, hsl(5.73, 100%, 42.01%) 54.1%, hsl(3.36, 100%, 44.98%) 62.2%, hsl(1.74, 100%, 47.28%) 71.1%, hsl(0.7, 100%, 48.86%) 80.6%, hsl(0.15, 100%, 49.74%) 90.5%, hsl(0, 100%, 50%)); }', // eslint-disable-line max-len
+    'a{ background: linear-gradient(to right, hsl(120, 100%, 25.1%), hsl(88.79, 100%, 24.28%) 7.8%, hsl(69.81, 100%, 23.14%) 13.2%, hsl(53.43, 100%, 24.55%) 17.6%, hsl(42.52, 100%, 28.9%) 21.7%, hsl(34.96, 100%, 32.64%) 25.8%, hsl(29.1, 100%, 35.96%) 30.2%, hsl(24.26, 100%, 38.94%) 35.1%, hsl(20.14, 100%, 41.56%) 40.6%, hsl(16.47, 100%, 43.87%) 46.9%, hsl(13.13, 100%, 45.83%) 54.1%, hsl(10.07, 100%, 47.42%) 62.2%, hsl(7.23, 100%, 48.62%) 71.1%, hsl(4.6, 100%, 49.43%) 80.6%, hsl(2.16, 100%, 49.87%) 90.5%, hsl(0, 100%, 50%)); }', // eslint-disable-line max-len
     { }
   )
 })
@@ -51,7 +51,13 @@ it('create a cubic-bezier gradient with .3 precision', () => {
     { precision: 0.3 }
   )
 })
-
+it('create an ease gradient with hsl colorMode', () => {
+  return run(
+    'a{ background: linear-gradient(to right, green, ease, red); }',
+    'a{ background: linear-gradient(to right, hsl(120, 100%, 25.1%), hsl(112.5, 100%, 26.67%) 7.8%, hsl(102.04, 100%, 28.82%) 13.2%, hsl(91.32, 100%, 31.18%) 17.6%, hsl(79.76, 100%, 33.33%) 21.7%, hsl(68.9, 100%, 35.69%) 25.8%, hsl(57.84, 100%, 38.04%) 30.2%, hsl(47.12, 100%, 40.2%) 35.1%, hsl(36.94, 100%, 42.35%) 40.6%, hsl(27.61, 100%, 44.31%) 46.9%, hsl(19.15, 100%, 46.08%) 54.1%, hsl(12.15, 100%, 47.45%) 62.2%, hsl(6.53, 100%, 48.63%) 71.1%, hsl(2.86, 100%, 49.41%) 80.6%, hsl(0.71, 100%, 49.8%) 90.5%, hsl(0, 100%, 50%)); }', // eslint-disable-line max-len
+    { colorMode: 'hsl' }
+  )
+})
 /**
  * Ignore incorrect/unsuported input
  */

lib/colorStops.js

@@ -4,13 +4,13 @@ const helpers = require('./helpers.js')
 /**
  * Calculate the color stops based on start+stopColor in an array and easingType
  */
-module.exports = (colors, coordinates, alphaDecimals = 5) => {
+module.exports = (colors, coordinates, alphaDecimals = 5, colorMode = 'lrgb') => {
   let colorStops = []
   colors = helpers.transparentFix(colors)
   coordinates.forEach(coordinate => {
     const ammount = coordinate.y
     const percent = coordinate.x * 100
-    let color = chroma.mix(colors[0], colors[1], ammount).css('hsl')
+    let color = chroma.mix(colors[0], colors[1], ammount, colorMode).css('hsl')
     color = helpers.roundHslAlpha(color, alphaDecimals)
     if (Number(coordinate.x) !== 0 && Number(coordinate.x) !== 1) {
       colorStops.push(`${color} ${+percent.toFixed(2)}%`)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-easing-gradients",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "PostCSS plugin to create smooth linear-gradients that approximate easing functions.",
   "scripts": {
     "test": "jest && eslint *.js"