@a_ng_d/utils-ui-color-palette
Version:
Core utilities library for UI Color Palette - a color management plugin for design tools. This library provides the foundational color manipulation, contrast calculation, and palette generation features used in the plugin.
279 lines (278 loc) • 10.7 kB
JavaScript
var v = Object.defineProperty;
var E = (g, r, h) => r in g ? v(g, r, { enumerable: !0, configurable: !0, writable: !0, value: h }) : g[r] = h;
var u = (g, r, h) => E(g, typeof r != "symbol" ? r + "" : r, h);
import { C as k, H as f } from "../../color-1CXTuV84.js";
import { c as s } from "../../index-Beb8qoyd.js";
class A {
constructor({
base: r,
themes: h,
meta: e
}) {
u(this, "base");
u(this, "themes");
u(this, "meta");
u(this, "paletteData");
u(this, "currentScale");
u(this, "makePaletteData", () => (this.themes.forEach((r) => {
const h = {
id: r.id,
name: r.name,
description: r.description,
colors: [],
type: r.type
};
this.base.colors.forEach((e) => {
const d = Object.entries(r.scale).reverse().map((a) => {
if (e.alpha.isEnabled) {
const t = new k({
render: "RGB",
sourceColor: [
e.rgb.r * 255,
e.rgb.g * 255,
e.rgb.b * 255
],
alpha: parseFloat((a[1] / 100).toFixed(2)),
hueShifting: e.hue.shift !== void 0 ? e.hue.shift : 0,
chromaShifting: e.chroma.shift !== void 0 ? e.chroma.shift : 100,
algorithmVersion: this.base.algorithmVersion,
visionSimulationMode: r.visionSimulationMode
}), l = new k({
render: "RGB",
sourceColor: s(e.alpha.backgroundColor).rgb(),
algorithmVersion: this.base.algorithmVersion,
visionSimulationMode: r.visionSimulationMode
});
switch (this.base.colorSpace) {
case "LCH":
return this.base.areSourceColorsLocked ? [
a,
t.setColorWithAlpha(),
l.setColorWithAlpha()
] : [
a,
t.lcha(),
l.lcha()
];
case "OKLCH":
return this.base.areSourceColorsLocked ? [
a,
t.setColorWithAlpha(),
l.setColorWithAlpha()
] : [
a,
t.oklcha(),
l.oklcha()
];
case "LAB":
return this.base.areSourceColorsLocked ? [
a,
t.setColorWithAlpha(),
l.setColorWithAlpha()
] : [
a,
t.laba(),
l.laba()
];
case "OKLAB":
return this.base.areSourceColorsLocked ? [
a,
t.setColorWithAlpha(),
l.setColorWithAlpha()
] : [
a,
t.oklaba(),
l.oklaba()
];
case "HSL":
return this.base.areSourceColorsLocked ? [
a,
t.setColorWithAlpha(),
l.setColorWithAlpha()
] : [
a,
t.hsla(),
l.hsla()
];
case "HSLUV":
return this.base.areSourceColorsLocked ? [
a,
t.setColorWithAlpha(),
l.setColorWithAlpha()
] : [
a,
t.hsluva(),
l.hsluva()
];
default:
return [a, [0, 0, 0], [255, 255, 255]];
}
} else {
const t = new k({
render: "RGB",
sourceColor: [
e.rgb.r * 255,
e.rgb.g * 255,
e.rgb.b * 255
],
lightness: a[1],
hueShifting: e.hue.shift !== void 0 ? e.hue.shift : 0,
chromaShifting: e.chroma.shift !== void 0 ? e.chroma.shift : 100,
algorithmVersion: this.base.algorithmVersion,
visionSimulationMode: r.visionSimulationMode
});
switch (this.base.colorSpace) {
case "LCH":
return [a, t.lch()];
case "OKLCH":
return [a, t.oklch()];
case "LAB":
return [a, t.lab()];
case "OKLAB":
return [a, t.oklab()];
case "HSL":
return [a, t.hsl()];
case "HSLUV":
return [a, t.hsluv()];
default:
return [a, [0, 0, 0]];
}
}
}), S = {
id: e.id,
name: e.name,
description: e.description,
shades: [],
type: "color"
}, i = [
e.rgb.r * 255,
e.rgb.g * 255,
e.rgb.b * 255
], o = new f();
o.rgb_r = e.rgb.r, o.rgb_g = e.rgb.g, o.rgb_b = e.rgb.b, o.rgbToHsluv(), S.shades.push({
name: "source",
description: "Source color",
hex: s(i).hex(),
rgb: i,
gl: s(i).gl(),
lch: s(i).lch(),
oklch: s(i).oklch(),
lab: s(i).lab(),
oklab: s(i).oklab(),
hsl: s(i).hsl(),
hsluv: [
o.hsluv_h,
o.hsluv_s,
o.hsluv_l
],
type: "source color"
});
const c = d.map(
(a) => s.distance(
s(i).hex(),
s(a[1]).hex(),
"rgb"
)
), b = c.indexOf(Math.min(...c));
d.forEach((a, t) => {
const l = s.distance(
s(i).hex(),
s(a[1]).hex(),
"rgb"
), C = Object.keys(this.currentScale).find(
(L) => L === a[0][0]
) ?? "0", n = new f(), p = new k({
render: "RGB",
sourceColor: s(i).rgb(),
visionSimulationMode: r.visionSimulationMode
}).setColor(), m = new k({
render: "HEX",
sourceColor: s(i).rgb(),
visionSimulationMode: r.visionSimulationMode
}).setColor();
t === b && this.base.areSourceColorsLocked && !e.alpha.isEnabled ? (n.rgb_r = Number(p[0]) / 255, n.rgb_g = Number(p[1]) / 255, n.rgb_b = Number(p[2]) / 255) : (n.rgb_r = Number(a[1][0]) / 255, n.rgb_g = Number(a[1][1]) / 255, n.rgb_b = Number(a[1][2]) / 255), n.rgbToHsluv(), S.shades.push({
name: C,
description: `Shade color with ${typeof a[0][1] == "number" ? a[0][1].toFixed(1) : a[0][1]}% of ${e.alpha.isEnabled ? "opacity" : "lightness"}`,
hex: t === b && this.base.areSourceColorsLocked && !e.alpha.isEnabled ? s(m).hex() : s(a[1]).hex(),
rgb: t === b && this.base.areSourceColorsLocked && !e.alpha.isEnabled ? s(m).rgb() : s(a[1]).rgb(),
gl: t === b && this.base.areSourceColorsLocked && !e.alpha.isEnabled ? s(m).gl() : s(a[1]).gl(),
lch: t === b && this.base.areSourceColorsLocked && !e.alpha.isEnabled ? s(m).lch() : s(a[1]).lch(),
oklch: t === b && this.base.areSourceColorsLocked && !e.alpha.isEnabled ? s(m).oklch() : s(a[1]).oklch(),
lab: t === b && this.base.areSourceColorsLocked && !e.alpha.isEnabled ? s(m).lab() : s(a[1]).lab(),
oklab: t === b && this.base.areSourceColorsLocked && !e.alpha.isEnabled ? s(m).oklab() : s(a[1]).oklab(),
hsl: t === b && this.base.areSourceColorsLocked && !e.alpha.isEnabled ? s(m).hsl() : s(a[1]).hsl(),
hsluv: [n.hsluv_h, n.hsluv_s, n.hsluv_l],
alpha: e.alpha.isEnabled ? parseFloat((a[0][1] / 100).toFixed(2)) : void 0,
backgroundColor: e.alpha.isEnabled && e.alpha.backgroundColor ? s(a[2]).rgb() : void 0,
mixedColor: e.alpha.isEnabled && e.alpha.backgroundColor ? new k({
visionSimulationMode: r.visionSimulationMode
}).mixColorsRgb(
[
...a[1],
parseFloat(
(a[0][1] / 100).toFixed(2)
)
],
[...a[2], 1]
) : void 0,
isClosestToRef: l < 4 && !this.base.areSourceColorsLocked,
isSourceColorLocked: t === b && this.base.areSourceColorsLocked && !e.alpha.isEnabled,
isTransparent: e.alpha.isEnabled,
type: "color shade"
});
}), h.colors.push(S);
}), this.paletteData.themes.push(h);
}), this.paletteData));
u(this, "makeLibraryData", (r, h) => {
const e = this.makePaletteData(), d = e.themes.filter((i) => i.type === "custom theme").length === 0 ? e.themes.filter((i) => i.type === "default theme") : e.themes.filter((i) => i.type === "custom theme");
return d.flatMap((i) => i.colors.flatMap(
(o) => o.shades.flatMap((c) => {
const b = d[0].type === "custom theme" ? `${e.name === "" ? "" : e.name + " / "}${i.name} / ${o.name}` : `${e.name === "" ? "" : e.name} / ${o.name}`, a = `${i.id}:${o.id}:${c.name}`, t = h == null ? void 0 : h.find(
(l) => l.id === a
);
return {
id: a,
name: c.name,
path: b,
hex: c.hex,
alpha: c.alpha,
...(r == null ? void 0 : r.includes("gl")) && { gl: c.gl },
...(r == null ? void 0 : r.includes("description")) && {
description: c.description
},
...(r == null ? void 0 : r.includes("collection_id")) && {
collectionId: t == null ? void 0 : t.collectionId
},
...(r == null ? void 0 : r.includes("mode_id")) && {
modeId: t == null ? void 0 : t.modeId
},
...(r == null ? void 0 : r.includes("variable_id")) && {
variableId: t == null ? void 0 : t.variableId
},
...(r == null ? void 0 : r.includes("style_id")) && {
styleId: t == null ? void 0 : t.styleId
}
};
})
));
});
u(this, "makePaletteFullData", () => ({
base: this.base,
themes: this.themes,
libraryData: this.makeLibraryData(),
meta: this.meta,
type: "UI_COLOR_PALETTE"
}));
var d;
this.base = r, this.themes = h, this.meta = e, this.paletteData = {
name: r.name ?? "UI Color Palette",
description: r.description,
themes: [],
type: "palette"
}, this.currentScale = ((d = h.find((S) => S.isEnabled)) == null ? void 0 : d.scale) ?? {};
}
}
export {
A as default
};
//# sourceMappingURL=data.js.map