feat(rgba): Fade color with rgba module (#168)

rgba now can accept a hex or named CSS color value and an alpha value to fade a color
styled-components · Jun 21, 2017 · c5ccb3b · c5ccb3b
1 parent 752f41b
commit c5ccb3b
Show file tree

Hide file tree

Showing 47 changed files with 8,409 additions and 552 deletions.
diff --git a/docs/assets/polished.js b/docs/assets/polished.js
@@ -1606,19 +1606,25 @@ function rgb(value, green, blue) {
 /**
  * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
  *
+ * Can also be used to fade a color by passing a hex value or named CSS color along with an alpha value.
+ *
  * @example
  * // Styles as object usage
  * const styles = {
  *   background: rgba(255, 205, 100, 0.7),
  *   background: rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 }),
  *   background: rgba(255, 205, 100, 1),
+ *   background: rgba('#ffffff', 0.4),
+ *   background: rgba('black', 0.7),
  * }
  *
  * // styled-components usage
  * const div = styled.div`
  *   background: ${rgba(255, 205, 100, 0.7)};
  *   background: ${rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 })};
  *   background: ${rgba(255, 205, 100, 1)};
+ *   background: ${rgba('#ffffff', 0.4)};
+ *   background: ${rgba('black', 0.7)};
  * `
  *
  * // CSS in JS Output
@@ -1627,13 +1633,18 @@ function rgb(value, green, blue) {
  *   background: "rgba(255,205,100,0.7)";
  *   background: "rgba(255,205,100,0.7)";
  *   background: "#ffcd64";
+ *   background: "rgba(255,255,255,0.4)";
+ *   background: "rgba(0,0,0,0.7)";
  * }
  */
-function rgba(value, green, blue, alpha) {
-  if (typeof value === 'number' && typeof green === 'number' && typeof blue === 'number' && typeof alpha === 'number') {
-    return alpha >= 1 ? rgb(value, green, blue) : 'rgba(' + value + ',' + green + ',' + blue + ',' + alpha + ')';
-  } else if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && green === undefined && blue === undefined && alpha === undefined) {
-    return value.alpha >= 1 ? rgb(value.red, value.green, value.blue) : 'rgba(' + value.red + ',' + value.green + ',' + value.blue + ',' + value.alpha + ')';
+function rgba(firstValue, secondValue, thirdValue, fourthValue) {
+  if (typeof firstValue === 'string' && typeof secondValue === 'number') {
+    var rgbValue = parseToRgb(firstValue);
+    return 'rgba(' + rgbValue.red + ',' + rgbValue.green + ',' + rgbValue.blue + ',' + secondValue + ')';
+  } else if (typeof firstValue === 'number' && typeof secondValue === 'number' && typeof thirdValue === 'number' && typeof fourthValue === 'number') {
+    return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : 'rgba(' + firstValue + ',' + secondValue + ',' + thirdValue + ',' + fourthValue + ')';
+  } else if ((typeof firstValue === 'undefined' ? 'undefined' : _typeof(firstValue)) === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
+    return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : 'rgba(' + firstValue.red + ',' + firstValue.green + ',' + firstValue.blue + ',' + firstValue.alpha + ')';
   }
 
   throw new Error('Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).');

diff --git a/docs/docs/index.html b/docs/docs/index.html
diff --git a/flow-typed/npm/babel-cli_vx.x.x.js b/flow-typed/npm/babel-cli_vx.x.x.js
@@ -0,0 +1,108 @@
+// flow-typed signature: a2d5e9d1b57396ab5ce8da3de98f46b4
+// flow-typed version: <<STUB>>/babel-cli_v^6.18.0/flow_v0.36.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'babel-cli'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'babel-cli' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'babel-cli/bin/babel-doctor' {
+  declare module.exports: any;
+}
+
+declare module 'babel-cli/bin/babel-external-helpers' {
+  declare module.exports: any;
+}
+
+declare module 'babel-cli/bin/babel-node' {
+  declare module.exports: any;
+}
+
+declare module 'babel-cli/bin/babel' {
+  declare module.exports: any;
+}
+
+declare module 'babel-cli/lib/_babel-node' {
+  declare module.exports: any;
+}
+
+declare module 'babel-cli/lib/babel-external-helpers' {
+  declare module.exports: any;
+}
+
+declare module 'babel-cli/lib/babel-node' {
+  declare module.exports: any;
+}
+
+declare module 'babel-cli/lib/babel/dir' {
+  declare module.exports: any;
+}
+
+declare module 'babel-cli/lib/babel/file' {
+  declare module.exports: any;
+}
+
+declare module 'babel-cli/lib/babel/index' {
+  declare module.exports: any;
+}
+
+declare module 'babel-cli/lib/babel/util' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'babel-cli/bin/babel-doctor.js' {
+  declare module.exports: $Exports<'babel-cli/bin/babel-doctor'>;
+}
+declare module 'babel-cli/bin/babel-external-helpers.js' {
+  declare module.exports: $Exports<'babel-cli/bin/babel-external-helpers'>;
+}
+declare module 'babel-cli/bin/babel-node.js' {
+  declare module.exports: $Exports<'babel-cli/bin/babel-node'>;
+}
+declare module 'babel-cli/bin/babel.js' {
+  declare module.exports: $Exports<'babel-cli/bin/babel'>;
+}
+declare module 'babel-cli/index' {
+  declare module.exports: $Exports<'babel-cli'>;
+}
+declare module 'babel-cli/index.js' {
+  declare module.exports: $Exports<'babel-cli'>;
+}
+declare module 'babel-cli/lib/_babel-node.js' {
+  declare module.exports: $Exports<'babel-cli/lib/_babel-node'>;
+}
+declare module 'babel-cli/lib/babel-external-helpers.js' {
+  declare module.exports: $Exports<'babel-cli/lib/babel-external-helpers'>;
+}
+declare module 'babel-cli/lib/babel-node.js' {
+  declare module.exports: $Exports<'babel-cli/lib/babel-node'>;
+}
+declare module 'babel-cli/lib/babel/dir.js' {
+  declare module.exports: $Exports<'babel-cli/lib/babel/dir'>;
+}
+declare module 'babel-cli/lib/babel/file.js' {
+  declare module.exports: $Exports<'babel-cli/lib/babel/file'>;
+}
+declare module 'babel-cli/lib/babel/index.js' {
+  declare module.exports: $Exports<'babel-cli/lib/babel/index'>;
+}
+declare module 'babel-cli/lib/babel/util.js' {
+  declare module.exports: $Exports<'babel-cli/lib/babel/util'>;
+}
diff --git a/flow-typed/npm/babel-core_vx.x.x.js b/flow-typed/npm/babel-core_vx.x.x.js
@@ -0,0 +1,227 @@
+// flow-typed signature: c7ca51ed2e38b40c504e4fcf9b975840
+// flow-typed version: <<STUB>>/babel-core_v^6.18.2/flow_v0.36.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'babel-core'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'babel-core' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'babel-core/lib/api/browser' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/api/node' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/helpers/get-possible-plugin-names' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/helpers/get-possible-preset-names' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/helpers/merge' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/helpers/normalize-ast' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/helpers/resolve-from-possible-names' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/helpers/resolve-plugin' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/helpers/resolve-preset' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/helpers/resolve' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/store' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/tools/build-external-helpers' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/transformation/file/index' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/transformation/file/logger' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/transformation/file/metadata' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/transformation/file/options/build-config-chain' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/transformation/file/options/config' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/transformation/file/options/index' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/transformation/file/options/option-manager' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/transformation/file/options/parsers' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/transformation/file/options/removed' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/transformation/internal-plugins/block-hoist' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/transformation/internal-plugins/shadow-functions' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/transformation/pipeline' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/transformation/plugin-pass' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/transformation/plugin' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/lib/util' {
+  declare module.exports: any;
+}
+
+declare module 'babel-core/register' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'babel-core/index' {
+  declare module.exports: $Exports<'babel-core'>;
+}
+declare module 'babel-core/index.js' {
+  declare module.exports: $Exports<'babel-core'>;
+}
+declare module 'babel-core/lib/api/browser.js' {
+  declare module.exports: $Exports<'babel-core/lib/api/browser'>;
+}
+declare module 'babel-core/lib/api/node.js' {
+  declare module.exports: $Exports<'babel-core/lib/api/node'>;
+}
+declare module 'babel-core/lib/helpers/get-possible-plugin-names.js' {
+  declare module.exports: $Exports<'babel-core/lib/helpers/get-possible-plugin-names'>;
+}
+declare module 'babel-core/lib/helpers/get-possible-preset-names.js' {
+  declare module.exports: $Exports<'babel-core/lib/helpers/get-possible-preset-names'>;
+}
+declare module 'babel-core/lib/helpers/merge.js' {
+  declare module.exports: $Exports<'babel-core/lib/helpers/merge'>;
+}
+declare module 'babel-core/lib/helpers/normalize-ast.js' {
+  declare module.exports: $Exports<'babel-core/lib/helpers/normalize-ast'>;
+}
+declare module 'babel-core/lib/helpers/resolve-from-possible-names.js' {
+  declare module.exports: $Exports<'babel-core/lib/helpers/resolve-from-possible-names'>;
+}
+declare module 'babel-core/lib/helpers/resolve-plugin.js' {
+  declare module.exports: $Exports<'babel-core/lib/helpers/resolve-plugin'>;
+}
+declare module 'babel-core/lib/helpers/resolve-preset.js' {
+  declare module.exports: $Exports<'babel-core/lib/helpers/resolve-preset'>;
+}
+declare module 'babel-core/lib/helpers/resolve.js' {
+  declare module.exports: $Exports<'babel-core/lib/helpers/resolve'>;
+}
+declare module 'babel-core/lib/store.js' {
+  declare module.exports: $Exports<'babel-core/lib/store'>;
+}
+declare module 'babel-core/lib/tools/build-external-helpers.js' {
+  declare module.exports: $Exports<'babel-core/lib/tools/build-external-helpers'>;
+}
+declare module 'babel-core/lib/transformation/file/index.js' {
+  declare module.exports: $Exports<'babel-core/lib/transformation/file/index'>;
+}
+declare module 'babel-core/lib/transformation/file/logger.js' {
+  declare module.exports: $Exports<'babel-core/lib/transformation/file/logger'>;
+}
+declare module 'babel-core/lib/transformation/file/metadata.js' {
+  declare module.exports: $Exports<'babel-core/lib/transformation/file/metadata'>;
+}
+declare module 'babel-core/lib/transformation/file/options/build-config-chain.js' {
+  declare module.exports: $Exports<'babel-core/lib/transformation/file/options/build-config-chain'>;
+}
+declare module 'babel-core/lib/transformation/file/options/config.js' {
+  declare module.exports: $Exports<'babel-core/lib/transformation/file/options/config'>;
+}
+declare module 'babel-core/lib/transformation/file/options/index.js' {
+  declare module.exports: $Exports<'babel-core/lib/transformation/file/options/index'>;
+}
+declare module 'babel-core/lib/transformation/file/options/option-manager.js' {
+  declare module.exports: $Exports<'babel-core/lib/transformation/file/options/option-manager'>;
+}
+declare module 'babel-core/lib/transformation/file/options/parsers.js' {
+  declare module.exports: $Exports<'babel-core/lib/transformation/file/options/parsers'>;
+}
+declare module 'babel-core/lib/transformation/file/options/removed.js' {
+  declare module.exports: $Exports<'babel-core/lib/transformation/file/options/removed'>;
+}
+declare module 'babel-core/lib/transformation/internal-plugins/block-hoist.js' {
+  declare module.exports: $Exports<'babel-core/lib/transformation/internal-plugins/block-hoist'>;
+}
+declare module 'babel-core/lib/transformation/internal-plugins/shadow-functions.js' {
+  declare module.exports: $Exports<'babel-core/lib/transformation/internal-plugins/shadow-functions'>;
+}
+declare module 'babel-core/lib/transformation/pipeline.js' {
+  declare module.exports: $Exports<'babel-core/lib/transformation/pipeline'>;
+}
+declare module 'babel-core/lib/transformation/plugin-pass.js' {
+  declare module.exports: $Exports<'babel-core/lib/transformation/plugin-pass'>;
+}
+declare module 'babel-core/lib/transformation/plugin.js' {
+  declare module.exports: $Exports<'babel-core/lib/transformation/plugin'>;
+}
+declare module 'babel-core/lib/util.js' {
+  declare module.exports: $Exports<'babel-core/lib/util'>;
+}
+declare module 'babel-core/register.js' {
+  declare module.exports: $Exports<'babel-core/register'>;
+}