https://colorjs.io/assets/js/colors.js

1import Color from "../../src/index.js";
2
3let root = document.documentElement;
4let root_cs = getComputedStyle(root);
5let colors = {
6	red: new Color(root_cs.getPropertyValue("--color-red")),
7	green: new Color(root_cs.getPropertyValue("--color-green")),
8	blue: new Color(root_cs.getPropertyValue("--color-blue")),
9};
10let supportsP3 = window.CSS && CSS.supports("color", "color(display-p3 0 1 0)");
11let interpolationOptions = { steps: 5, space: "lch", outputSpace: supportsP3 ? "p3" : "hsl" };
12
13if (!Color.DEBUGGING) {
14	let redGreen = colors.red.range(colors.green, interpolationOptions);
15	let greenBlue = colors.green.range(colors.blue, interpolationOptions);
16	let blueRed = colors.blue.range(colors.red, interpolationOptions);
17
18	let vars = {
19		"gradient-steps": [
20			...Color.steps(redGreen, interpolationOptions),
21			...Color.steps(greenBlue, interpolationOptions),
22			...Color.steps(blueRed, interpolationOptions),
23		],
24		"color-red-light": colors.red.clone().set({ "lch.l": 80 }),
25		"color-green-light": colors.green.clone().set({ "lch.l": 80 }),
26		"color-blue-light": colors.blue.clone().set({ "lch.l": 80 }),
27
28		"color-red-lighter": colors.red.clone().set({ "lch.l": 94 }),
29		"color-green-lighter": colors.green.clone().set({ "lch.l": 95 }),
30		"color-blue-lighter": colors.blue.clone().set({ "lch.l": 94 }),
31
32		"color-red-green": redGreen(0.5),
33		"color-green-blue": greenBlue(0.5),
34		"color-blue-red": blueRed(0.5),
35
36		"color-red-green-light": redGreen(0.5).set({ "lch.l": 94 }),
37		"color-green-blue-light": greenBlue(0.5).set({ "lch.l": 94 }),
38		"color-blue-red-light": blueRed(0.5).set({ "lch.l": 94 }),
39	};
40
41	window.vars = vars;
42
43	document.head.insertAdjacentHTML(
44		"beforeend",
45		`<style>
46			:root {
47				${Object.entries(vars)
48					.map(pair => `--${pair[0]}: ${pair[1]}`)
49					.join(";")};
50			}
51		</style>`,
52	);
53}