wix-style-react
Version:
wix-style-react
76 lines • 2.29 kB
JavaScript
import color from 'color';
import { stVars } from '../Foundation/stylable/colors.st.css';
export const parseColor = ({ unparsedColor, alpha = 1, }) => {
try {
const rgbColor = color(unparsedColor);
return `rgba(${rgbColor.red()}, ${rgbColor.green()},${rgbColor.blue()}, ${alpha})`;
}
catch {
return `rgba(17, 109, 255, ${alpha})`;
}
};
export const mixColors = (color1, color2) => {
try {
return color(color1).mix(color(color2)).hex();
}
catch {
return stVars.B10;
}
};
export const getRailStyle = ({ gradientColor, disabled, direction, }) => {
if (!gradientColor) {
return undefined;
}
if (!disabled) {
return generateRailStyle({
color1: gradientColor,
color2: stVars['D10-20'],
direction,
});
}
return generateRailStyle({
color1: '#ACAFC4',
color2: stVars['D10-10'],
direction,
});
};
const generateRailStyle = ({ color1, color2, direction, }) => {
return {
'box-shadow': `inset 0 0 0 1px ${color2}`,
background: `linear-gradient(${direction === 'vertical' ? 'to top' : 'to right'}, transparent 0%, ${parseColor({
unparsedColor: color1,
})} 100%),repeating-conic-gradient(${stVars['D10-20']} 0% 25%, ${stVars['D80-20']} 0% 50%) 50% / 8px 8px`,
};
};
export const getThumbStyle = ({ gradientColor, alpha, 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,
});
};
const generateThumbStyle = ({ color1, color2, alpha, }) => {
const mixedColor = mixColors(color1, color2);
return {
outline: `1px solid ${mixedColor}`,
background: `
linear-gradient(to top, ${parseColor({
unparsedColor: color1,
alpha,
})}, ${parseColor({
unparsedColor: color1,
alpha,
})}), linear-gradient(to top, ${stVars.D80}, ${stVars.D80})`,
};
};
//# sourceMappingURL=utils.js.map