chore: add hsla helper using Color model

package.json

@@ -39,6 +39,9 @@
     "url": "https://github.com/styled-components/polished/issues"
   },
   "homepage": "https://github.com/styled-components/polished#readme",
+  "dependencies": {
+    "chroma-js": "^1.2.1"
+  },
   "devDependencies": {
     "babel-cli": "^6.18.0",
     "babel-core": "^6.18.2",

src/helpers/hsla.js

@@ -0,0 +1,32 @@
+/** @module Helpers */
+
+import Color from '../models/Color'
+
+/**
+ * Creates a Color from hue, saturation, lightness and alpha values.
+ * @static
+ * @param {Number} hue - The color hue. A value between 0 and 360 degrees
+ * @param {Number} saturation - The color saturation. A value between 0 and 100 percent
+ * @param {Number} lightness - The color lightness. A value between 0 and 100 percent
+ * @param {Number} alpha - The color alpha. A value between 0.0 and 1.0
+ * @return {Models.Color} The Color that represents the given values
+ * @example
+ * // Styles as object usage
+ * PENDING...
+ *
+ * // styled-components usage
+ * PENDING...
+ *
+ * // CSS in JS Output
+ * PENDING...
+ */
+
+export function hsla(hue, saturation, lightness, alpha) {
+  return new Color({
+    space: 'hsl',
+    values: [hue, saturation, lightness],
+    alpha,
+  })
+}
+
+export default hsla

src/helpers/test/hsla.test.js

@@ -0,0 +1,18 @@
+import hsla from '../hsla'
+
+describe('hsla', function() {
+
+  it('should return a Color', function() {
+    const Color = require('../../models/Color')
+    expect(hsla(0, 0, 0, 0).constructor).toBe(Color)
+  })
+
+  it('should return a Color with the given hsla values', function() {
+    const [h, s, l, a] = hsla(3.3, 1, 0.5, 0.4).hsla()
+    expect(h).toBeCloseTo(3.3, 1)
+    expect(s).toEqual(1)
+    expect(l).toEqual(0.5)
+    expect(a).toEqual(0.4)
+  })
+
+})

src/models/Color.js

@@ -0,0 +1,35 @@
+/** @module Models */
+
+import chroma from 'chroma-js'
+
+export default class Color {
+
+  /**
+   * Class that represents a color.
+   * @constructor Color
+   * @param {Object} options - The color options
+   * @param {string} options.space - The color space (e.g. rgb, hsl, etc)
+   * @param {Array<Number>} options.values - The color space values
+   * @param {Number} options.alpha - The color alpha channel (opacity)
+   */
+  constructor(options) {
+    const args = [].concat(options.values).concat([options.space])
+    const color = chroma(...args)
+    color.alpha(options.alpha)
+
+    /**
+     * @private
+     * @property {chroma.Color} chromaColor - Internal chroma color instance
+     */
+    this.chromaColor = color
+  }
+
+  /**
+   * Returns the hue, saturation, lightness, and alpha components of the color.
+   * @return {Array} The color components
+   */
+  hsla() {
+    const hsl = this.chromaColor.hsl()
+    return hsl.concat([this.chromaColor.alpha()])
+  }
+}

src/models/test/Color.test.js

@@ -0,0 +1,20 @@
+
+import Color from '../Color'
+
+describe('Color', function() {
+
+  describe('hsla', function() {
+
+    it('should return an array of the color hsla components', function() {
+      const color = new Color({ space: 'hsl', values: [50, 1, 1], alpha: 0.5 })
+      expect(color.hsla().length).toBe(4)
+    })
+
+    it('should have NaN hue for hue-less colors', function() {
+      const color = new Color({ space: 'hsl', values: [0, 1, 1] })
+      expect(color.hsla()[0]).toEqual(NaN)
+    })
+
+  })
+
+})