This repository has been archived on 2021-02-17. You can view files and clone it, but cannot push or open issues or pull requests.
postcss/mixins.js

32 lines
933 B
JavaScript
Raw Normal View History

2021-01-05 10:52:05 +00:00
// 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.
2021-01-05 11:39:25 +00:00
obj[`${name}__h`] = hue.toString();
obj[`${name}__s`] = `${sat}%`;
obj[`${name}__l`] = `${light}%`;
2021-01-05 10:52:05 +00:00
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;