zeplin-extension-style-kit/values/color.js

Models and utilities to generate CSS-like style code in Zeplin extensions.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extensionModel = require("@zeplin/extension-model");

var _gradient = _interopRequireDefault(require("./gradient"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

var MAX_RGB_VALUE = 255;
var MAX_PERCENT = 100;
var MAX_ANGLE = 360;
var HEX_BASE = 16;
var alphaFormatter = new Intl.NumberFormat("en-US", {
  useGrouping: false,
  maximumFractionDigits: 2
});

function toHex(num) {
  var hexNum = Math.trunc(num + num / MAX_RGB_VALUE);
  hexNum = Math.max(0, Math.min(hexNum, MAX_RGB_VALUE));
  return (hexNum < HEX_BASE ? "0" : "") + hexNum.toString(HEX_BASE);
}

function toHexString(color) {
  var hexCode = color.hexBase();

  if (color.a < 1) {
    hexCode += toHex(color.a * MAX_RGB_VALUE);
  }

  return "#".concat(hexCode);
}

function toRGBAString(color) {
  var rgb = "".concat(Math.round(color.r), ", ").concat(Math.round(color.g), ", ").concat(Math.round(color.b));
  return color.a < 1 ? "rgba(".concat(rgb, ", ").concat(alphaFormatter.format(color.a), ")") : "rgb(".concat(rgb, ")");
}

function toHSLString(color) {
  var hslColor = color.toHSL();
  var hsl = "".concat(Math.round(hslColor.h * MAX_ANGLE), ", ").concat(Math.round(hslColor.s * MAX_PERCENT), "%, ").concat(Math.round(hslColor.l * MAX_PERCENT), "%");
  return color.a < 1 ? "hsla(".concat(hsl, ", ").concat(alphaFormatter.format(color.a), ")") : "hsl(".concat(hsl, ")");
}

function getColorStringByFormat(color, colorFormat) {
  if (!("r" in color && "g" in color && "b" in color && "a" in color)) {
    return "";
  }

  switch (colorFormat) {
    case "hex":
      return toHexString(color);

    case "rgb":
      return toRGBAString(color);

    case "hsl":
      return toHSLString(color);

    default:
      return color.a < 1 ? toRGBAString(color) : toHexString(color);
  }
}

var Color = /*#__PURE__*/function () {
  function Color(colorObject) {
    _classCallCheck(this, Color);

    this.object = colorObject;
  }

  _createClass(Color, [{
    key: "valueOf",
    value: function valueOf() {
      var _this$object = this.object,
          r = _this$object.r,
          g = _this$object.g,
          b = _this$object.b,
          a = _this$object.a;
      return "color::r:".concat(r, ":g:").concat(g, ":b:").concat(b, ":a:").concat(a);
    }
  }, {
    key: "equals",
    value: function equals(other) {
      return this.object.equals(other.object);
    }
  }, {
    key: "toGradient",
    value: function toGradient() {
      var _this$object2 = this.object,
          r = _this$object2.r,
          g = _this$object2.g,
          b = _this$object2.b,
          a = _this$object2.a;
      return _gradient.default.fromRGBA({
        r,
        g,
        b,
        a
      });
    }
  }, {
    key: "toStyleValue",
    value: function toStyleValue(_ref, variables) {
      var colorFormat = _ref.colorFormat;
      var value = this.valueOf();

      if (variables && value in variables) {
        return variables[value];
      }

      return getColorStringByFormat(this.object, colorFormat);
    }
  }], [{
    key: "fromRGBA",
    value: function fromRGBA(_ref2) {
      var r = _ref2.r,
          g = _ref2.g,
          b = _ref2.b,
          _ref2$a = _ref2.a,
          a = _ref2$a === void 0 ? 1 : _ref2$a;
      return new Color(new _extensionModel.Color({
        r,
        g,
        b,
        a
      }));
    }
  }]);

  return Color;
}();

var _default = Color;
exports.default = _default;