polished/lib/color/rgba.js.flow

A lightweight toolset for writing styles in Javascript.

// @flow
import parseToRGB from './parseToRgb'
import rgb from './rgb'
import PolishedError from '../internalHelpers/_errors'

import type { RgbaColor } from '../types/color'

/**
 * 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
 *
 * element {
 *   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)";
 * }
 */
export default function rgba(
  firstValue: RgbaColor | number | string,
  secondValue?: number,
  thirdValue?: number,
  fourthValue?: number,
): string {
  if (typeof firstValue === 'string' && typeof secondValue === 'number') {
    const 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 === '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 PolishedError(7)
}