Rgba

.documentation.json

@@ -25,6 +25,7 @@
       "description": "Functions that help creating and modifying colors."
     },
     "rgb",
+    "rgba",
     {
       "name": "Shorthands",
       "description": "Functions that help write nicer code. They're shorter, of course, but they also make it easy to pass in multiple variables without resorting to string concatenation."

src/helpers/rgb.js

@@ -10,7 +10,7 @@ type RgbColor = {
 }
 
 /**
- * Returns a string value for the color. The returned result is the smalles possible hex notation.
+ * Returns a string value for the color. The returned result is the smallest possible hex notation.
  *
  * @example
  * // Styles as object usage

src/helpers/rgba.js

@@ -0,0 +1,53 @@
+// @flow
+
+import rgb from './rgb'
+
+type RgbaColor = {
+  red: number,
+  green: number,
+  blue: number,
+  alpha: number,
+}
+
+/**
+ * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: rgba(255, 205, 100, 180),
+ *   background: rgba({ red: 255, green: 205, blue: 100, alpha: 180 }),
+ *   background: rgba(255, 205, 100, 255),
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${rgba(255, 205, 100, 180)};
+ *   background: ${rgba({ red: 255, green: 205, blue: 100, alpha: 180 })};
+ *   background: ${rgba(255, 205, 100, 255)};
+ * `
+ *
+ * // CSS in JS Output
+ *
+ * element {
+ *   background: "rgba(255,205,100,180)";
+ *   background: "rgba(255,205,100,180)";
+ *   background: "#ffcd64";
+ * }
+ */
+function rgba(value: RgbaColor | number, green?: number, blue?: number, alpha?: number): string {
+  if (typeof value === 'number' &&
+      typeof green === 'number' &&
+      typeof blue === 'number' &&
+      typeof alpha === 'number') {
+    return alpha === 255 ? rgb(value, green, blue) : `rgba(${value},${green},${blue},${alpha})`
+  } else if (typeof value === 'object' && green === undefined && blue === undefined && alpha === undefined) {
+    return value.alpha === 255
+      ? rgb(value.red, value.green, value.blue)
+      : `rgba(${value.red},${value.green},${value.blue},${value.alpha})`
+  }
+
+  throw new Error('Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 180) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 180 }).')
+}
+
+export default rgba

src/helpers/test/__snapshots__/rgba.test.js.snap

@@ -0,0 +1,29 @@
+exports[`rgb should convert a rgba object to a rgba string 1`] = `
+Object {
+  "background": "rgba(255,205,100,180)",
+}
+`;
+
+exports[`rgb should convert a rgba object with full opacity to a hex color 1`] = `
+Object {
+  "background": "#ffcd64",
+}
+`;
+
+exports[`rgb should convert a rgba object with full opacity to a reduced hex color 1`] = `
+Object {
+  "background": "#fff",
+}
+`;
+
+exports[`rgb should convert multiple numbers to a rgba string 1`] = `
+Object {
+  "background": "rgba(255,205,100,180)",
+}
+`;
+
+exports[`rgb should convert multiple numbers with full opacity to a hex color 1`] = `
+Object {
+  "background": "#ffcd64",
+}
+`;

src/helpers/test/rgba.test.js

@@ -0,0 +1,29 @@
+// @flow
+import rgba from '../rgba'
+
+describe('rgb', () => {
+  it('should convert multiple numbers to a rgba string', () => {
+    expect({ background: rgba(255, 205, 100, 180) }).toMatchSnapshot()
+  })
+
+  it('should convert multiple numbers with full opacity to a hex color', () => {
+    expect({ background: rgba(255, 205, 100, 255) }).toMatchSnapshot()
+  })
+
+  it('should convert a rgba object to a rgba string', () => {
+    expect({ background: rgba({ red: 255, green: 205, blue: 100, alpha: 180 }) }).toMatchSnapshot()
+  })
+
+  it('should convert a rgba object with full opacity to a hex color', () => {
+    expect({ background: rgba({ red: 255, green: 205, blue: 100, alpha: 255 }) }).toMatchSnapshot()
+  })
+
+  it('should convert a rgba object with full opacity to a reduced hex color', () => {
+    expect({ background: rgba({ red: 255, green: 255, blue: 255, alpha: 255 }) }).toMatchSnapshot()
+  })
+
+  it('should throw an error if an object and multiple arguments are passed', () => {
+    expect(() => ({ background: rgba({ red: 255, green: 1, blue: 1, alpha: 180 }, 250, 100) }))
+      .toThrow('Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 180) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 180 }).')
+  })
+})

src/index.js

@@ -22,6 +22,7 @@ import wordWrap from './mixins/wordWrap'
 
 // Color
 import rgb from './helpers/rgb'
+import rgba from './helpers/rgba'
 
 // Shorthands
 import animation from './shorthands/animation'
@@ -62,6 +63,7 @@ export {
   rem,
   retinaImage,
   rgb,
+  rgba,
   selection,
   size,
   stripUnit,