UNPKG

2.92 kBJavaScriptView Raw
1"use strict";
2
3exports.__esModule = true;
4exports["default"] = toColorString;
5var _hsl = _interopRequireDefault(require("./hsl"));
6var _hsla = _interopRequireDefault(require("./hsla"));
7var _rgb = _interopRequireDefault(require("./rgb"));
8var _rgba = _interopRequireDefault(require("./rgba"));
9var _errors = _interopRequireDefault(require("../internalHelpers/_errors"));
10function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11var isRgb = function isRgb(color) {
12 return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined');
13};
14var isRgba = function isRgba(color) {
15 return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && typeof color.alpha === 'number';
16};
17var isHsl = function isHsl(color) {
18 return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined');
19};
20var isHsla = function isHsla(color) {
21 return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && typeof color.alpha === 'number';
22};
23
24/**
25 * Converts a RgbColor, RgbaColor, HslColor or HslaColor object to a color string.
26 * This util is useful in case you only know on runtime which color object is
27 * used. Otherwise we recommend to rely on `rgb`, `rgba`, `hsl` or `hsla`.
28 *
29 * @example
30 * // Styles as object usage
31 * const styles = {
32 * background: toColorString({ red: 255, green: 205, blue: 100 }),
33 * background: toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 }),
34 * background: toColorString({ hue: 240, saturation: 1, lightness: 0.5 }),
35 * background: toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 }),
36 * }
37 *
38 * // styled-components usage
39 * const div = styled.div`
40 * background: ${toColorString({ red: 255, green: 205, blue: 100 })};
41 * background: ${toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 })};
42 * background: ${toColorString({ hue: 240, saturation: 1, lightness: 0.5 })};
43 * background: ${toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 })};
44 * `
45 *
46 * // CSS in JS Output
47 * element {
48 * background: "#ffcd64";
49 * background: "rgba(255,205,100,0.72)";
50 * background: "#00f";
51 * background: "rgba(179,25,25,0.72)";
52 * }
53 */
54
55function toColorString(color) {
56 if (typeof color !== 'object') throw new _errors["default"](8);
57 if (isRgba(color)) return (0, _rgba["default"])(color);
58 if (isRgb(color)) return (0, _rgb["default"])(color);
59 if (isHsla(color)) return (0, _hsla["default"])(color);
60 if (isHsl(color)) return (0, _hsl["default"])(color);
61 throw new _errors["default"](8);
62}
63module.exports = exports.default;
\No newline at end of file