kitchen-color-studio
Version:
an open-source color editor for designing color system
177 lines (175 loc) • 6.13 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/utils/generateScale.ts
var generateScale_exports = {};
__export(generateScale_exports, {
default: () => generateScale_default,
defaultConfig: () => defaultConfig
});
module.exports = __toCommonJS(generateScale_exports);
var import_bezier_easing = __toESM(require("bezier-easing"));
var import_lodash_es = require("lodash-es");
var import_colorUtils = require("./colorUtils");
var defaultConfig = {
step: {
up: 5,
down: 5
},
hue: {
segment: [100, 200],
multiply: -0.5
},
neutral: {
standard: "#888",
cStart: 15,
cTarget: 10,
cEasingUp: [0, 0, 1, 1],
cEasingDown: [0, 0, 1, 1]
},
light: {
up: {
hRotate: -10,
cTarget: 5,
tTarget: 98,
hEasing: [0, 0, 1, 1],
cEasing: [0, 0, 1, 1],
tEasing: [0, 0, 1, 1]
},
down: {
hRotate: 20,
cTarget: 50,
tTarget: 10,
hEasing: [0, 0, 1, 1],
cEasing: [0, 0, 1, 1],
tEasing: [0, 0, 1, 1]
}
},
dark: {
up: {
hRotate: 20,
cTarget: 50,
tTarget: 10,
hEasing: [0, 0, 1, 1],
cEasing: [0, 0, 1, 1],
tEasing: [0, 0, 1, 1]
},
down: {
hRotate: -10,
cTarget: 5,
tTarget: 98,
hEasing: [0, 0, 1, 1],
cEasing: [0, 0, 1, 1],
tEasing: [0, 0, 1, 1]
}
}
};
var GenerateScale = class {
constructor(config) {
this.config = defaultConfig;
this.config = (0, import_lodash_es.merge)(this.config, config);
}
gen(color, opts = {
theme: "light",
neutral: false
}) {
if (opts.neutral)
return this.genNeutral(color, opts);
const hctColor = (0, import_colorUtils.hexToHct)(color);
const hctUpList = this.genList(hctColor, "up", opts.theme === "dark").reverse();
const hctDownList = this.genList(hctColor, "down", opts.theme === "dark");
const hctList = [...hctUpList, hctColor, ...hctDownList];
return hctList.map((item) => (0, import_colorUtils.hctToHex)(item));
}
genNeutral(color, opts) {
let hctColor = (0, import_colorUtils.hexToHct)(color);
hctColor = [hctColor[0], this.config.neutral.cStart, (0, import_colorUtils.hexToHct)(this.config.neutral.standard)[2]];
if (this.config.neutral.cStart === 1) {
hctColor = (0, import_colorUtils.hexToHct)(this.config.neutral.standard);
this.config.neutral.cStart = 2;
this.config.neutral.cTarget = 2;
}
const hctUpList = this.genList(hctColor, "up", opts.theme === "dark", true).reverse();
const hctDownList = this.genList(hctColor, "down", opts.theme === "dark", true);
const hctList = [...hctUpList, hctColor, ...hctDownList];
return hctList.map((item) => (0, import_colorUtils.hctToHex)(item));
}
genList(hctColor, direction = "up", dark, neutral) {
const up = dark ? this.config.dark.up : this.config.light.up;
const down = dark ? this.config.dark.down : this.config.light.down;
const step = direction === "up" ? this.config.step.up : this.config.step.down;
const stepList = [];
const { hRotate, tTarget, hEasing, tEasing } = direction === "up" ? up : down;
let { cTarget, cEasing } = direction === "up" ? up : down;
if (neutral) {
cTarget = this.config.neutral.cTarget;
cEasing = direction === "up" ? this.config.neutral.cEasingUp : this.config.neutral.cEasingDown;
}
const hBE = (0, import_bezier_easing.default)(...hEasing);
const cBE = (0, import_bezier_easing.default)(...cEasing);
const tBE = (0, import_bezier_easing.default)(...tEasing);
const [h, c, t] = hctColor;
for (let i = 1; i <= step; i++) {
const percent = i / step;
const newH = this.hueRotate(h, hRotate * hBE(percent));
const newC = c + (cTarget - c) * cBE(percent);
const newT = t + (tTarget - t) * tBE(percent);
stepList.push([newH, newC, newT]);
}
return stepList;
}
hueRotate(h, hRotate) {
let hue = h + this.calcHueRotate(h, hRotate);
if (hue > 360)
hue = hue - 360;
if (hue < 0)
hue = hue + 360;
return hue;
}
genCalcHueVaule(Xa, Xb, max, multiply) {
const toRad = Math.PI / 180;
const a = 360 / (Xb - Xa);
const b = -1 * a * toRad * (3 * Xa + Xb) / 4;
const min = max * multiply;
const y = (max + min) / 2;
const scale = (max - min) / 2;
return (v) => {
const rad = v * toRad;
return scale * Math.sin(a * rad + b) + y;
};
}
calcHueRotate(h, hRotate) {
const { segment, multiply } = this.config.hue;
const calcHueVaule = this.genCalcHueVaule(segment[0], segment[1], hRotate, multiply);
return calcHueVaule(h);
}
};
var generateScale_default = GenerateScale;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
defaultConfig
});