32 lines
930 B
JavaScript
32 lines
930 B
JavaScript
|
// eslint-disable-next-line import/no-extraneous-dependencies
|
||
|
|
const toHSL = require('hex-to-hsl');
|
||
|
|
|
||
|
|
// defines a custom property with identifier name, along with individual hue,
|
||
|
|
// saturation and lightness components
|
||
|
|
function defineColor(mixin, name, hex) {
|
||
|
|
const [hue, sat, light] = toHSL(hex);
|
||
|
|
const obj = {};
|
||
|
|
obj[name] = hex;
|
||
|
|
// need to convert hue to string otherwise postcss (is it postcss?) appends
|
||
|
|
// 'px' to the property's value.
|
||
|
|
obj[`${name}-h`] = hue.toString();
|
||
|
|
obj[`${name}-s`] = `${sat}%`;
|
||
|
|
obj[`${name}-l`] = `${light}%`;
|
||
|
|
return obj;
|
||
|
|
}
|
||
|
|
|
||
|
|
// defines a custom property with identifier name, along with individual hue,
|
||
|
|
// saturation, lightness and alpha components
|
||
|
|
function defineColorAlpha(mixin, name, hex, alpha) {
|
||
|
|
const obj = defineColor(mixin, name, hex);
|
||
|
|
obj[`${name}-a`] = alpha;
|
||
|
|
return obj;
|
||
|
|
}
|
||
|
|
|
||
|
|
const postcssMixins = {
|
||
|
|
defineColor,
|
||
|
|
defineColorAlpha,
|
||
|
|
};
|
||
|
|
|
||
|
|
module.exports = postcssMixins;
|