@viarotel-org/unocss-preset-shades
Version:
🎨 为 Unocss 生成一组逐渐由浅至深的主题色调预设,通过提供基准颜色。
56 lines (50 loc) • 1.74 kB
JavaScript
;
const Color = require('color');
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
const Color__default = /*#__PURE__*/_interopDefaultCompat(Color);
function generateShades(colorValue = "", {
shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
baseShade = 500,
returnRgb = false
} = {}) {
const baseColor = Color__default(colorValue);
const getColor = (color) => {
if (returnRgb) {
return color.round().array().join(",");
}
return color.hex();
};
const value = shades.reduce(
(obj, shadeValue) => {
if (baseShade === shadeValue) {
obj[shadeValue] = obj.DEFAULT;
} else if (shadeValue < baseShade) {
const weight = 1 - shadeValue / baseShade;
const whiten = baseColor.mix(Color__default("white"), weight);
obj[shadeValue] = getColor(whiten);
} else {
const weight = (shadeValue - baseShade) / (1e3 - baseShade);
const blacken = baseColor.mix(Color__default("black"), weight);
obj[shadeValue] = getColor(blacken);
}
return obj;
},
{
DEFAULT: getColor(baseColor)
}
);
return value;
}
function updateShades(baseColor = "") {
const shadeColors = generateShades(baseColor, { returnRgb: true });
const setProperty = (key = "", value = "") => document.documentElement.style.setProperty(key, value);
Object.entries(shadeColors).forEach(([weight, colorValue]) => {
if (weight === "DEFAULT") {
setProperty("--color-primary", colorValue);
} else {
setProperty(`--color-primary-${weight}`, colorValue);
}
});
}
exports.generateShades = generateShades;
exports.updateShades = updateShades;