radialGradient.js 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = radialGradient;
  4. var _constructGradientValue = _interopRequireDefault(require("../internalHelpers/_constructGradientValue"));
  5. var _errors = _interopRequireDefault(require("../internalHelpers/_errors"));
  6. var _templateObject;
  7. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
  8. function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
  9. /**
  10. * CSS for declaring a radial gradient, including a fallback background-color. The fallback is either the first color-stop or an explicitly passed fallback color.
  11. *
  12. * @example
  13. * // Styles as object usage
  14. * const styles = {
  15. * ...radialGradient({
  16. * colorStops: ['#00FFFF 0%', 'rgba(0, 0, 255, 0) 50%', '#0000FF 95%'],
  17. * extent: 'farthest-corner at 45px 45px',
  18. * position: 'center',
  19. * shape: 'ellipse',
  20. * })
  21. * }
  22. *
  23. * // styled-components usage
  24. * const div = styled.div`
  25. * ${radialGradient({
  26. * colorStops: ['#00FFFF 0%', 'rgba(0, 0, 255, 0) 50%', '#0000FF 95%'],
  27. * extent: 'farthest-corner at 45px 45px',
  28. * position: 'center',
  29. * shape: 'ellipse',
  30. * })}
  31. *`
  32. *
  33. * // CSS as JS Output
  34. *
  35. * div: {
  36. * 'backgroundColor': '#00FFFF',
  37. * 'backgroundImage': 'radial-gradient(center ellipse farthest-corner at 45px 45px, #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%)',
  38. * }
  39. */
  40. function radialGradient(_ref) {
  41. var colorStops = _ref.colorStops,
  42. _ref$extent = _ref.extent,
  43. extent = _ref$extent === void 0 ? '' : _ref$extent,
  44. fallback = _ref.fallback,
  45. _ref$position = _ref.position,
  46. position = _ref$position === void 0 ? '' : _ref$position,
  47. _ref$shape = _ref.shape,
  48. shape = _ref$shape === void 0 ? '' : _ref$shape;
  49. if (!colorStops || colorStops.length < 2) {
  50. throw new _errors["default"](57);
  51. }
  52. return {
  53. backgroundColor: fallback || colorStops[0].split(' ')[0],
  54. backgroundImage: (0, _constructGradientValue["default"])(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["radial-gradient(", "", "", "", ")"])), position, shape, extent, colorStops.join(', '))
  55. };
  56. }
  57. module.exports = exports.default;