@wix/design-system
Version:
@wix/design-system
97 lines (96 loc) • 3.07 kB
JavaScript
;
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 _colorsJsSt = require("../Foundation/stylable/colors-js.st.css.js");
var parseColor = _ref => {
var unparsedColor = _ref.unparsedColor,
_ref$alpha = _ref.alpha,
alpha = _ref$alpha === void 0 ? 1 : _ref$alpha;
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 _colorsJsSt.stVars.B10;
}
};
exports.mixColors = mixColors;
var getRailStyle = _ref2 => {
var gradientColor = _ref2.gradientColor,
disabled = _ref2.disabled,
direction = _ref2.direction;
if (!gradientColor) {
return undefined;
}
if (!disabled) {
return generateRailStyle({
color1: gradientColor,
color2: _colorsJsSt.stVars['D10-20'],
direction
});
}
return generateRailStyle({
color1: '#ACAFC4',
color2: _colorsJsSt.stVars['D10-10'],
direction
});
};
exports.getRailStyle = getRailStyle;
var generateRailStyle = _ref3 => {
var color1 = _ref3.color1,
color2 = _ref3.color2,
direction = _ref3.direction;
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(_colorsJsSt.stVars['D10-20'], " 0% 25%, ").concat(_colorsJsSt.stVars['D80-20'], " 0% 50%) 50% / 8px 8px")
};
};
var getThumbStyle = _ref4 => {
var gradientColor = _ref4.gradientColor,
alpha = _ref4.alpha,
disabled = _ref4.disabled;
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 = _ref5.color1,
color2 = _ref5.color2,
alpha = _ref5.alpha;
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(_colorsJsSt.stVars.D80, ", ").concat(_colorsJsSt.stVars.D80, ")")
};
};
//# sourceMappingURL=utils.js.map