@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.
462 lines (461 loc) • 16.4 kB
JavaScript
var N = Object.defineProperty;
var B = (C, e, c) => e in C ? N(C, e, { enumerable: !0, configurable: !0, writable: !0, value: c }) : C[e] = c;
var g = (C, e, c) => B(C, typeof e != "symbol" ? e + "" : e, c);
import { C as x, H as T } from "../../color-S7JZ1G0L.js";
import { c as s } from "../../index-Beb8qoyd.js";
import p from "../contrast/contrast.js";
var k = 256, R = [], H = 256, F;
for (; k--; ) R[k] = (k + 256).toString(16).substring(1);
function O(C) {
var e = 0, c = 11;
if (!F || k + c > H * 2)
for (F = "", k = 0; e < H; e++)
F += R[Math.random() * 256 | 0];
return F.substring(k, k++ + c);
}
const U = (/* @__PURE__ */ new Date()).toISOString(), V = {
id: O(),
dates: {
createdAt: U,
updatedAt: U,
publishedAt: "",
openedAt: ""
},
publicationStatus: {
isPublished: !1,
isShared: !1
},
creatorIdentity: {
creatorFullName: "",
creatorAvatar: "",
creatorId: ""
}
}, G = (C, e, c) => {
const t = C / 255, S = e / 255, n = c / 255, o = 1 - Math.max(t, S, n);
return o === 1 ? [0, 0, 0, 1] : [
(1 - t - o) / (1 - o),
(1 - S - o) / (1 - o),
(1 - n - o) / (1 - o),
o
];
};
class Y {
constructor({
base: e,
themes: c,
meta: t
}) {
g(this, "base");
g(this, "themes");
g(this, "meta");
g(this, "paletteData");
g(this, "makePaletteData", () => (this.themes.forEach((e) => {
const c = {
id: e.id,
name: e.name,
description: e.description,
colors: [],
textColorsTheme: e.textColorsTheme,
type: e.type
};
this.base.colors.forEach((t) => {
const S = Object.entries(e.scale).reverse().map((a) => {
if (t.alpha.isEnabled) {
const r = new x({
render: "RGB",
sourceColor: [
t.rgb.r * 255,
t.rgb.g * 255,
t.rgb.b * 255
],
alpha: parseFloat((a[1] / 100).toFixed(2)),
hueShifting: t.hue.shift !== void 0 ? t.hue.shift : 0,
chromaShifting: t.chroma.shift !== void 0 ? t.chroma.shift : 100,
algorithmVersion: this.base.algorithmVersion,
visionSimulationMode: e.visionSimulationMode
}), h = new x({
render: "RGB",
sourceColor: s(t.alpha.backgroundColor).rgb(),
algorithmVersion: this.base.algorithmVersion,
visionSimulationMode: e.visionSimulationMode
});
switch (this.base.colorSpace) {
case "LCH":
return this.base.areSourceColorsLocked ? [
a,
r.setColorWithAlpha(),
h.setColorWithAlpha()
] : [
a,
r.lcha(),
h.lcha()
];
case "OKLCH":
return this.base.areSourceColorsLocked ? [
a,
r.setColorWithAlpha(),
h.setColorWithAlpha()
] : [
a,
r.oklcha(),
h.oklcha()
];
case "LAB":
return this.base.areSourceColorsLocked ? [
a,
r.setColorWithAlpha(),
h.setColorWithAlpha()
] : [
a,
r.laba(),
h.laba()
];
case "OKLAB":
return this.base.areSourceColorsLocked ? [
a,
r.setColorWithAlpha(),
h.setColorWithAlpha()
] : [
a,
r.oklaba(),
h.oklaba()
];
case "HSL":
return this.base.areSourceColorsLocked ? [
a,
r.setColorWithAlpha(),
h.setColorWithAlpha()
] : [
a,
r.hsla(),
h.hsla()
];
case "HSLUV":
return this.base.areSourceColorsLocked ? [
a,
r.setColorWithAlpha(),
h.setColorWithAlpha()
] : [
a,
r.hsluva(),
h.hsluva()
];
case "HSV":
return this.base.areSourceColorsLocked ? [
a,
r.setColorWithAlpha(),
h.setColorWithAlpha()
] : [
a,
r.hsva(),
h.hsva()
];
case "CMYK":
return this.base.areSourceColorsLocked ? [
a,
r.setColorWithAlpha(),
h.setColorWithAlpha()
] : [
a,
r.cmyka(),
h.cmyka()
];
default:
return [a, [0, 0, 0], [255, 255, 255]];
}
} else {
const r = new x({
render: "RGB",
sourceColor: [
t.rgb.r * 255,
t.rgb.g * 255,
t.rgb.b * 255
],
lightness: a[1],
hueShifting: t.hue.shift !== void 0 ? t.hue.shift : 0,
chromaShifting: t.chroma.shift !== void 0 ? t.chroma.shift : 100,
algorithmVersion: this.base.algorithmVersion,
visionSimulationMode: e.visionSimulationMode
});
switch (this.base.colorSpace) {
case "LCH":
return [a, r.lch()];
case "OKLCH":
return [a, r.oklch()];
case "LAB":
return [a, r.lab()];
case "OKLAB":
return [a, r.oklab()];
case "HSL":
return [a, r.hsl()];
case "HSLUV":
return [a, r.hsluv()];
case "HSV":
return [a, r.hsv()];
case "CMYK":
return [a, r.cmyk()];
default:
return [a, [0, 0, 0]];
}
}
}), n = {
id: t.id,
name: t.name,
description: t.description,
shades: [],
type: "color"
}, o = [
t.rgb.r * 255,
t.rgb.g * 255,
t.rgb.b * 255
], d = new T();
d.rgb_r = t.rgb.r, d.rgb_g = t.rgb.g, d.rgb_b = t.rgb.b, d.rgbToHsluv();
const m = new p({
backgroundColor: o,
textColor: e.paletteBackground
}), l = e.textColorsTheme ? (() => {
const a = new p({
backgroundColor: o,
textColor: e.textColorsTheme.lightColor
}), r = new p({
backgroundColor: o,
textColor: e.textColorsTheme.darkColor
});
return {
wcag: {
light: {
ratio: parseFloat(
a.getWCAGContrast().toFixed(2)
),
score: a.getWCAGScore()
},
dark: {
ratio: parseFloat(
r.getWCAGContrast().toFixed(2)
),
score: r.getWCAGScore()
}
},
apca: {
light: {
lc: parseFloat(a.getAPCAContrast().toFixed(2)),
recommendedUsage: a.getRecommendedUsage()
},
dark: {
lc: parseFloat(r.getAPCAContrast().toFixed(2)),
recommendedUsage: r.getRecommendedUsage()
}
}
};
})() : void 0;
n.shades.push({
name: "source",
description: "Source color",
hex: s(o).hex(),
rgb: o,
gl: s(o).gl(),
lch: s(o).lch(),
oklch: s(o).oklch(),
lab: s(o).lab(),
oklab: s(o).oklab(),
hsl: s(o).hsl(),
hsluv: [
d.hsluv_h,
d.hsluv_s,
d.hsluv_l
],
hsv: s(o).hsv(),
cmyk: G(...o),
contrast: {
wcag: {
ratio: m.getWCAGContrast(),
score: m.getWCAGScore()
},
apca: {
lc: m.getAPCAContrast(),
recommendedUsage: m.getRecommendedUsage()
}
},
textContrast: l,
type: "source color"
});
const v = S.map(
(a) => s.distance(
s(o).hex(),
s(a[1]).hex(),
"rgb"
)
), i = v.indexOf(Math.min(...v));
S.forEach((a, r) => {
const h = s.distance(
s(o).hex(),
s(a[1]).hex(),
"rgb"
), P = Object.keys(e.scale).find((A) => A === a[0][0]) ?? "0", b = new T(), W = new x({
render: "RGB",
sourceColor: s(o).rgb(),
visionSimulationMode: e.visionSimulationMode
}).setColor(), u = new x({
render: "HEX",
sourceColor: s(o).rgb(),
visionSimulationMode: e.visionSimulationMode
}).setColor(), w = t.alpha.isEnabled && t.alpha.backgroundColor ? new x({
visionSimulationMode: e.visionSimulationMode
}).mixColorsRgb(
[
...a[1],
parseFloat(
(a[0][1] / 100).toFixed(2)
)
],
[...a[2], 1]
) : void 0;
r === i && this.base.areSourceColorsLocked && !t.alpha.isEnabled ? (b.rgb_r = Number(W[0]) / 255, b.rgb_g = Number(W[1]) / 255, b.rgb_b = Number(W[2]) / 255) : (b.rgb_r = Number(a[1][0]) / 255, b.rgb_g = Number(a[1][1]) / 255, b.rgb_b = Number(a[1][2]) / 255), b.rgbToHsluv();
const E = new p({
backgroundColor: t.alpha.isEnabled ? w : a[1],
textColor: e.paletteBackground
}), _ = E.getWCAGContrast(), y = E.getWCAGScore(), D = E.getAPCAContrast(), M = E.getRecommendedUsage(), I = e.textColorsTheme ? (() => {
const A = t.alpha.isEnabled ? w : a[1], L = new p({
backgroundColor: A,
textColor: e.textColorsTheme.lightColor
}), f = new p({
backgroundColor: A,
textColor: e.textColorsTheme.darkColor
});
return {
wcag: {
light: {
ratio: parseFloat(
L.getWCAGContrast().toFixed(2)
),
score: L.getWCAGScore()
},
dark: {
ratio: parseFloat(
f.getWCAGContrast().toFixed(2)
),
score: f.getWCAGScore()
}
},
apca: {
light: {
lc: parseFloat(
L.getAPCAContrast().toFixed(2)
),
recommendedUsage: L.getRecommendedUsage()
},
dark: {
lc: parseFloat(f.getAPCAContrast().toFixed(2)),
recommendedUsage: f.getRecommendedUsage()
}
}
};
})() : void 0;
n.shades.push({
name: P,
description: `Shade/Tint color with ${typeof a[0][1] == "number" ? a[0][1].toFixed(1) : a[0][1]}% of ${t.alpha.isEnabled ? "opacity" : "lightness"} — WCAG ${_.toFixed(2)}:1 (${y}) · APCA Lc ${D.toFixed(1)} (${M.replace(/_/g, " ").toLowerCase()})`,
hex: r === i && this.base.areSourceColorsLocked && !t.alpha.isEnabled ? s(u).hex() : s(a[1]).hex(),
rgb: r === i && this.base.areSourceColorsLocked && !t.alpha.isEnabled ? s(u).rgb() : s(a[1]).rgb(),
gl: r === i && this.base.areSourceColorsLocked && !t.alpha.isEnabled ? s(u).gl() : s(a[1]).gl(),
lch: r === i && this.base.areSourceColorsLocked && !t.alpha.isEnabled ? s(u).lch() : s(a[1]).lch(),
oklch: r === i && this.base.areSourceColorsLocked && !t.alpha.isEnabled ? s(u).oklch() : s(a[1]).oklch(),
lab: r === i && this.base.areSourceColorsLocked && !t.alpha.isEnabled ? s(u).lab() : s(a[1]).lab(),
oklab: r === i && this.base.areSourceColorsLocked && !t.alpha.isEnabled ? s(u).oklab() : s(a[1]).oklab(),
hsl: r === i && this.base.areSourceColorsLocked && !t.alpha.isEnabled ? s(u).hsl() : s(a[1]).hsl(),
hsluv: [b.hsluv_h, b.hsluv_s, b.hsluv_l],
hsv: (r === i && this.base.areSourceColorsLocked && !t.alpha.isEnabled ? s(u) : s(a[1])).hsv(),
cmyk: (() => {
const [A, L, f] = (r === i && this.base.areSourceColorsLocked && !t.alpha.isEnabled ? s(u) : s(a[1])).rgb();
return G(A, L, f);
})(),
alpha: t.alpha.isEnabled ? parseFloat((a[0][1] / 100).toFixed(2)) : void 0,
backgroundColor: t.alpha.isEnabled && t.alpha.backgroundColor ? s(a[2]).rgb() : void 0,
mixedColor: w,
contrast: {
wcag: {
ratio: _,
score: y
},
apca: {
lc: D,
recommendedUsage: M
}
},
textContrast: I,
isClosestToRef: h < 4 && !this.base.areSourceColorsLocked,
isSourceColorLocked: r === i && this.base.areSourceColorsLocked && !t.alpha.isEnabled,
isTransparent: t.alpha.isEnabled,
type: "color shade/tint"
});
}), c.colors.push(n);
}), this.paletteData.themes.push(c);
}), this.paletteData));
g(this, "makeLibraryData", (e, c) => {
const t = this.makePaletteData();
return t.themes.flatMap(
(n) => n.colors.flatMap(
(o) => o.shades.flatMap((d) => {
const m = `${n.id}:${o.id}:${d.name}`, l = c == null ? void 0 : c.find(
(v) => v.id === m
);
return {
id: m,
paletteName: t.name,
themeName: n.name,
colorName: o.name,
shadeName: d.name,
...(e == null ? void 0 : e.includes("alpha")) && { alpha: d.alpha ?? 1 },
...(e == null ? void 0 : e.includes("hex")) && { hex: d.hex },
...(e == null ? void 0 : e.includes("gl")) && { gl: d.gl },
...(e == null ? void 0 : e.includes("description")) && {
description: o.description
},
...(e == null ? void 0 : e.includes("collection_id")) && {
collectionId: l == null ? void 0 : l.collectionId
},
...(e == null ? void 0 : e.includes("mode_id")) && {
modeId: l == null ? void 0 : l.modeId
},
...(e == null ? void 0 : e.includes("variable_id")) && {
variableId: l == null ? void 0 : l.variableId
},
...(e == null ? void 0 : e.includes("style_id")) && {
styleId: l == null ? void 0 : l.styleId
},
...(e == null ? void 0 : e.includes("catalog_id")) && {
catalogId: l == null ? void 0 : l.catalogId
},
...(e == null ? void 0 : e.includes("theme_id")) && {
themeId: l == null ? void 0 : l.themeId
},
...(e == null ? void 0 : e.includes("set_id")) && {
setId: l == null ? void 0 : l.setId
},
...(e == null ? void 0 : e.includes("token_id")) && {
tokenId: l == null ? void 0 : l.tokenId
}
};
})
)
);
});
g(this, "makePaletteFullData", () => ({
base: this.base,
themes: this.themes,
libraryData: this.makeLibraryData(),
meta: this.meta,
version: "2025.06",
type: "UI_COLOR_PALETTE"
}));
this.base = e, this.themes = c, this.meta = t ?? V, this.paletteData = {
name: e.name ?? "UI Color Palette",
description: e.description,
themes: [],
type: "palette"
};
}
}
export {
Y as default
};
//# sourceMappingURL=data.js.map