wix-style-react/dist/src/Slider/utils.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.parseColor = exports.mixColors = exports.getThumbStyle = exports.getRailStyle = void 0;
var _color = _interopRequireDefault(require("color"));
var _colorsSt = require("../Foundation/stylable/colors.st.css");
var parseColor = _ref => {
  var {
    unparsedColor,
    alpha = 1
  } = _ref;
  try {
    var rgbColor = (0, _color.default)(unparsedColor);
    return "rgba(".concat(rgbColor.red(), ", ").concat(rgbColor.green(), ",").concat(rgbColor.blue(), ", ").concat(alpha, ")");
  } catch (_unused) {
    return "rgba(17, 109, 255, ".concat(alpha, ")");
  }
};
exports.parseColor = parseColor;
var mixColors = (color1, color2) => {
  try {
    return (0, _color.default)(color1).mix((0, _color.default)(color2)).hex();
  } catch (_unused2) {
    return _colorsSt.stVars.B10;
  }
};
exports.mixColors = mixColors;
var getRailStyle = _ref2 => {
  var {
    gradientColor,
    disabled,
    direction
  } = _ref2;
  if (!gradientColor) {
    return undefined;
  }
  if (!disabled) {
    return generateRailStyle({
      color1: gradientColor,
      color2: _colorsSt.stVars['D10-20'],
      direction
    });
  }
  return generateRailStyle({
    color1: '#ACAFC4',
    color2: _colorsSt.stVars['D10-10'],
    direction
  });
};
exports.getRailStyle = getRailStyle;
var generateRailStyle = _ref3 => {
  var {
    color1,
    color2,
    direction
  } = _ref3;
  return {
    'box-shadow': "inset 0 0 0 1px ".concat(color2),
    background: "linear-gradient(".concat(direction === 'vertical' ? 'to top' : 'to right', ", transparent 0%, ").concat(parseColor({
      unparsedColor: color1
    }), " 100%),repeating-conic-gradient(").concat(_colorsSt.stVars['D10-20'], " 0% 25%, ").concat(_colorsSt.stVars['D80-20'], " 0% 50%) 50% / 8px 8px")
  };
};
var getThumbStyle = _ref4 => {
  var {
    gradientColor,
    alpha,
    disabled
  } = _ref4;
  if (!gradientColor) {
    return undefined;
  }
  if (!disabled) {
    return generateThumbStyle({
      color1: gradientColor,
      color2: 'rgba(0, 6, 36, 0.20)',
      alpha
    });
  }
  return generateThumbStyle({
    color1: '#ACAFC4',
    color2: 'rgba(0, 6, 36, 0.10)',
    alpha
  });
};
exports.getThumbStyle = getThumbStyle;
var generateThumbStyle = _ref5 => {
  var {
    color1,
    color2,
    alpha
  } = _ref5;
  var mixedColor = mixColors(color1, color2);
  return {
    outline: "1px solid ".concat(mixedColor),
    background: "\n        linear-gradient(to top, ".concat(parseColor({
      unparsedColor: color1,
      alpha
    }), ", ").concat(parseColor({
      unparsedColor: color1,
      alpha
    }), "), linear-gradient(to top, ").concat(_colorsSt.stVars.D80, ", ").concat(_colorsSt.stVars.D80, ")")
  };
};
//# sourceMappingURL=utils.js.map