add defineHS()L, remove defineColorAlpha()
This commit is contained in:
parent
370921f23e
commit
30f18de039
33
mixins.js
33
mixins.js
|
@ -1,31 +1,28 @@
|
|||
// 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);
|
||||
// untested TODO - test
|
||||
function defineHSL(mixin, name, hue, sat, light) {
|
||||
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;
|
||||
obj[name] = name;
|
||||
// need to ensure hue is a 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;
|
||||
// saturation and lightness components
|
||||
function defineHex(mixin, name, hex) {
|
||||
const [hue, sat, light] = toHSL(hex);
|
||||
return defineHSL(name, hue, sat, light)
|
||||
}
|
||||
|
||||
const postcssMixins = {
|
||||
defineColor,
|
||||
defineColorAlpha,
|
||||
defineHSL,
|
||||
defineHex,
|
||||
};
|
||||
|
||||
module.exports = postcssMixins;
|
Reference in New Issue