color-elements 0.0.1

package/lib/colorjs.io/package.json

@@ -0,0 +1,113 @@
+{
+	"name": "colorjs.io",
+	"version": "0.5.0",
+	"description": "Let’s get serious about color",
+	"files": [
+		"dist/",
+		"src/",
+		"types/src/",
+		"types/index.d.ts",
+		"types/index.d.cts"
+	],
+	"exports": {
+		".": {
+			"import": {
+				"types": "./types/index.d.ts",
+				"default": "./dist/color.js"
+			},
+			"require": {
+				"types": "./types/index.d.cts",
+				"default": "./dist/color.cjs"
+			}
+		},
+		"./fn": {
+			"import": {
+				"types": "./types/src/index-fn.d.ts",
+				"default": "./src/index-fn.js"
+			},
+			"require": {
+				"types": "./types/src/index-fn.d.cts",
+				"default": "./dist/color-fn.cjs"
+			}
+		},
+		"./dist/*": "./dist/*"
+	},
+	"typesVersions": {
+		"*": {
+			"fn": [
+				"./types/src/index-fn.d.ts"
+			]
+		}
+	},
+	"type": "module",
+	"main": "./dist/color.cjs",
+	"module": "./dist/color.js",
+	"types": "./types",
+	"directories": {
+		"test": "tests"
+	},
+	"scripts": {
+		"test": "npx htest ./test",
+		"dtslint": "dtslint --expectOnly types",
+		"eslint": "eslint . --ext .js --ext .ts --ext .cjs",
+		"lint": "run-s build:space-accessors \"eslint -- --fix\" dtslint",
+		"lint:ci": "run-s build:space-accessors \"eslint -- --max-warnings 0\" dtslint",
+		"build:css": "npx postcss \"**/*.postcss\" --base . --dir . --ext .css --config postcss.config.cjs",
+		"build:html": "npx @11ty/eleventy --config=.eleventy.cjs",
+		"build:js": "rollup -c",
+		"build:js:legacy": "rollup -c rollup.legacy.config.js",
+		"build:space-accessors": "node ./scripts/generate-space-accessor-types.js",
+		"build": "run-s build:html build:css build:js build:js:legacy build:space-accessors",
+		"watch:css": "npx postcss \"**/*.postcss\" --base . --dir . --ext .css --config postcss.config.cjs --watch",
+		"watch:html": "npx @11ty/eleventy --config=.eleventy.cjs --watch",
+		"watch:js": "rollup -c --watch",
+		"watch": "run-p watch:*",
+		"prepack": "npm run build",
+		"release": "release-it"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/LeaVerou/color.js.git"
+	},
+	"keywords": [
+		"color"
+	],
+	"contributors": [
+		"Lea Verou",
+		"Chris Lilley"
+	],
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/LeaVerou/color.js/issues"
+	},
+	"homepage": "https://colorjs.io",
+	"devDependencies": {
+		"@11ty/eleventy": "^2.0",
+		"@babel/core": "^7.24.0",
+		"@babel/preset-env": "^7.24.0",
+		"@definitelytyped/dtslint": "0.0.182",
+		"@rollup/plugin-babel": "^6.0.4",
+		"@rollup/plugin-commonjs": "^25.0.7",
+		"@rollup/plugin-node-resolve": "^15.2.3",
+		"@rollup/plugin-terser": "^0.4.4",
+		"@stylistic/eslint-plugin": "latest",
+		"@typescript-eslint/eslint-plugin": "latest",
+		"@typescript-eslint/parser": "latest",
+		"acorn": "latest",
+		"core-js": "^3.36.0",
+		"eslint": "latest",
+		"htest.dev": "^0.0.9",
+		"mathjs": "^12.4.0",
+		"npm-run-all": "^4.1.5",
+		"postcss": "latest",
+		"postcss-cli": "latest",
+		"postcss-nesting": "latest",
+		"release-it": "^17.1.1",
+		"rollup": "^4.12.0",
+		"typescript": "^5.3.3"
+	},
+	"sideEffects": [
+		"./src/index.js",
+		"./src/spaces/index.js"
+	]
+}

package/lib/colorjs.io/src/CATs.js

@@ -0,0 +1,131 @@
+import hooks from "./hooks.js";
+import {multiplyMatrices} from "./util.js";
+import {WHITES} from "./adapt.js";
+
+export const CATs = {};
+
+hooks.add("chromatic-adaptation-start", env => {
+	if (env.options.method) {
+		env.M = adapt(env.W1, env.W2, env.options.method);
+	}
+});
+
+hooks.add("chromatic-adaptation-end", env => {
+	if (!env.M) {
+		env.M = adapt(env.W1, env.W2, env.options.method);
+	}
+});
+
+export function defineCAT ({id, toCone_M, fromCone_M}) {
+	// Use id, toCone_M, fromCone_M like variables
+	CATs[id] = arguments[0];
+}
+
+export function adapt (W1, W2, id = "Bradford") {
+	// adapt from a source whitepoint or illuminant W1
+	// to a destination whitepoint or illuminant W2,
+	// using the given chromatic adaptation transform (CAT)
+	// debugger;
+	let method = CATs[id];
+
+	let [ρs, γs, βs] = multiplyMatrices(method.toCone_M, W1);
+	let [ρd, γd, βd] = multiplyMatrices(method.toCone_M, W2);
+
+	// all practical illuminants have non-zero XYZ so no division by zero can occur below
+	let scale = [
+		[ρd / ρs,  0,        0      ],
+		[0,        γd / γs,  0      ],
+		[0,        0,        βd / βs],
+	];
+	// console.log({scale});
+
+	let scaled_cone_M = multiplyMatrices(scale, method.toCone_M);
+	let adapt_M	= multiplyMatrices(method.fromCone_M, scaled_cone_M);
+	// console.log({scaled_cone_M, adapt_M});
+	return adapt_M;
+}
+
+defineCAT({
+	id: "von Kries",
+	toCone_M: [
+		[  0.4002400,  0.7076000, -0.0808100 ],
+		[ -0.2263000,  1.1653200,  0.0457000 ],
+		[  0.0000000,  0.0000000,  0.9182200 ],
+	],
+	fromCone_M: [
+		[ 1.8599363874558397, -1.1293816185800916,   0.21989740959619328     ],
+		[ 0.3611914362417676,  0.6388124632850422,  -0.000006370596838649899 ],
+		[ 0,                   0,                    1.0890636230968613      ],
+	],
+});
+
+defineCAT({
+	id: "Bradford",
+	// Convert an array of XYZ values in the range 0.0 - 1.0
+	// to cone fundamentals
+	toCone_M: [
+		[  0.8951000,  0.2664000, -0.1614000 ],
+		[ -0.7502000,  1.7135000,  0.0367000 ],
+		[  0.0389000, -0.0685000,  1.0296000 ],
+	],
+	// and back
+	fromCone_M: [
+		[  0.9869929054667121, -0.14705425642099013, 0.15996265166373122  ],
+		[  0.4323052697233945,  0.5183602715367774,  0.049291228212855594 ],
+		[ -0.00852866457517732, 0.04004282165408486, 0.96848669578755     ],
+	],
+});
+
+defineCAT({
+	id: "CAT02",
+	// with complete chromatic adaptation to W2, so D = 1.0
+	toCone_M: [
+		[  0.7328000,  0.4296000, -0.1624000 ],
+		[ -0.7036000,  1.6975000,  0.0061000 ],
+		[  0.0030000,  0.0136000,  0.9834000 ],
+	],
+	fromCone_M: [
+		[  1.0961238208355142,   -0.27886900021828726, 0.18274517938277307 ],
+		[  0.4543690419753592,    0.4735331543074117,  0.07209780371722911 ],
+		[ -0.009627608738429355, -0.00569803121611342, 1.0153256399545427  ],
+	],
+});
+
+defineCAT({
+	id: "CAT16",
+	toCone_M: [
+		[  0.401288,  0.650173, -0.051461 ],
+		[ -0.250268,  1.204414,  0.045854 ],
+		[ -0.002079,  0.048952,  0.953127 ],
+	],
+	// the extra precision is needed to avoid roundtripping errors
+	fromCone_M: [
+		[  1.862067855087233,   -1.0112546305316845,  0.14918677544445172  ],
+		[  0.3875265432361372,   0.6214474419314753, -0.008973985167612521 ],
+		[ -0.01584149884933386, -0.03412293802851557, 1.0499644368778496   ],
+	],
+});
+
+Object.assign(WHITES, {
+	// whitepoint values from ASTM E308-01 with 10nm spacing, 1931 2 degree observer
+	// all normalized to Y (luminance) = 1.00000
+	// Illuminant A is a tungsten electric light, giving a very warm, orange light.
+	A:   [1.09850, 1.00000, 0.35585],
+
+	// Illuminant C was an early approximation to daylight: illuminant A with a blue filter.
+	C:   [0.98074, 1.000000, 1.18232],
+
+	// The daylight series of illuminants simulate natural daylight.
+	// The color temperature (in degrees Kelvin/100) ranges from
+	// cool, overcast daylight (D50) to bright, direct sunlight (D65).
+	D55: [0.95682, 1.00000, 0.92149],
+	D75: [0.94972, 1.00000, 1.22638],
+
+	// Equal-energy illuminant, used in two-stage CAT16
+	E:   [1.00000, 1.00000, 1.00000],
+
+	// The F series of illuminants represent fluorescent lights
+	F2:  [0.99186, 1.00000, 0.67393],
+	F7:  [0.95041, 1.00000, 1.08747],
+	F11: [1.00962, 1.00000, 0.64350],
+});

package/lib/colorjs.io/src/adapt.js

@@ -0,0 +1,62 @@
+import hooks from "./hooks.js";
+import {multiplyMatrices} from "./util.js";
+
+export const WHITES = {
+	// for compatibility, the four-digit chromaticity-derived ones everyone else uses
+	D50: [0.3457 / 0.3585, 1.00000, (1.0 - 0.3457 - 0.3585) / 0.3585],
+	D65: [0.3127 / 0.3290, 1.00000, (1.0 - 0.3127 - 0.3290) / 0.3290],
+};
+
+export function getWhite (name) {
+	if (Array.isArray(name)) {
+		return name;
+	}
+
+	return WHITES[name];
+}
+
+// Adapt XYZ from white point W1 to W2
+export default function adapt (W1, W2, XYZ, options = {}) {
+	W1 = getWhite(W1);
+	W2 = getWhite(W2);
+
+	if (!W1 || !W2) {
+		throw new TypeError(`Missing white point to convert ${!W1 ? "from" : ""}${!W1 && !W2 ? "/" : ""}${!W2 ? "to" : ""}`);
+	}
+
+	if (W1 === W2) {
+		// Same whitepoints, no conversion needed
+		return XYZ;
+	}
+
+	let env = {W1, W2, XYZ, options};
+
+	hooks.run("chromatic-adaptation-start", env);
+
+	if (!env.M) {
+		if (env.W1 === WHITES.D65 && env.W2 === WHITES.D50) {
+			env.M = [
+				[ 1.0479297925449969, 0.022946870601609652, -0.05019226628920524 ],
+				[ 0.02962780877005599, 0.9904344267538799, -0.017073799063418826 ],
+				[ -0.009243040646204504, 0.015055191490298152, 0.7518742814281371 ],
+			];
+		}
+		else if (env.W1 === WHITES.D50 && env.W2 === WHITES.D65) {
+
+			env.M = [
+				[ 0.955473421488075, -0.02309845494876471, 0.06325924320057072 ],
+				[ -0.0283697093338637, 1.0099953980813041, 0.021041441191917323 ],
+				[ 0.012314014864481998, -0.020507649298898964, 1.330365926242124 ],
+			];
+		}
+	}
+
+	hooks.run("chromatic-adaptation-end", env);
+
+	if (env.M) {
+		return multiplyMatrices(env.M, env.XYZ);
+	}
+	else {
+		throw new TypeError("Only Bradford CAT with white points D50 and D65 supported for now.");
+	}
+}

package/lib/colorjs.io/src/angles.js

@@ -0,0 +1,44 @@
+export function constrain (angle) {
+	return ((angle % 360) + 360) % 360;
+}
+
+export function adjust (arc, angles) {
+	if (arc === "raw") {
+		return angles;
+	}
+
+	let [a1, a2] = angles.map(constrain);
+
+	let angleDiff = a2 - a1;
+
+	if (arc === "increasing") {
+		if (angleDiff < 0) {
+			a2 += 360;
+		}
+	}
+	else if (arc === "decreasing") {
+		if (angleDiff > 0) {
+			a1 += 360;
+		}
+	}
+	else if (arc === "longer") {
+		if (-180 < angleDiff && angleDiff < 180) {
+			if (angleDiff > 0) {
+				a1 += 360;
+			}
+			else {
+				a2 += 360;
+			}
+		}
+	}
+	else if (arc === "shorter") {
+		if (angleDiff > 180) {
+			a1 += 360;
+		}
+		else if (angleDiff < -180) {
+			a2 += 360;
+		}
+	}
+
+	return [a1, a2];
+}

package/lib/colorjs.io/src/chromaticity.js

@@ -0,0 +1,33 @@
+import xyz_d65 from "./spaces/xyz-d65.js";
+import getAll from "./getAll.js";
+
+// Chromaticity coordinates
+export function uv (color) {
+	// Assumes getAll() calls getColor() on color
+	let [X, Y, Z] = getAll(color, xyz_d65);
+	let denom = X + 15 * Y + 3 * Z;
+	return [4 * X / denom, 9 * Y / denom];
+}
+
+export function xy (color) {
+	// Assumes getAll() calls getColor() on color
+	let [X, Y, Z] = getAll(color, xyz_d65);
+	let  sum = X + Y + Z;
+	return [X / sum, Y / sum];
+}
+
+export function register (Color) {
+	// no setters, as lightness information is lost
+	// when converting color to chromaticity
+	Object.defineProperty(Color.prototype, "uv", {
+		get () {
+			return uv(this);
+		},
+	});
+
+	Object.defineProperty(Color.prototype, "xy", {
+		get () {
+			return xy(this);
+		},
+	});
+}

package/lib/colorjs.io/src/clone.js

@@ -0,0 +1,7 @@
+export default function clone (color) {
+	return {
+		space: color.space,
+		coords: color.coords.slice(),
+		alpha: color.alpha,
+	};
+}

package/lib/colorjs.io/src/color.js

@@ -0,0 +1,201 @@
+import * as util from "./util.js";
+import hooks from "./hooks.js";
+import defaults from "./defaults.js";
+import ColorSpace from "./space.js";
+import {WHITES} from "./adapt.js";
+import {
+	getColor,
+	parse,
+	to,
+	serialize,
+	inGamut,
+	toGamut,
+	distance,
+	equals,
+	get,
+	getAll,
+	set,
+	setAll,
+	display,
+} from "./index-fn.js";
+
+
+import "./spaces/xyz-d50.js";
+import "./spaces/srgb.js";
+
+/**
+ * Class that represents a color
+ */
+export default class Color {
+	/**
+	 * Creates an instance of Color.
+	 * Signatures:
+	 * - `new Color(stringToParse)`
+	 * - `new Color(otherColor)`
+	 * - `new Color({space, coords, alpha})`
+	 * - `new Color(space, coords, alpha)`
+	 * - `new Color(spaceId, coords, alpha)`
+	 */
+	constructor (...args) {
+		let color;
+
+		if (args.length === 1) {
+			color = getColor(args[0]);
+		}
+
+		let space, coords, alpha;
+
+		if (color) {
+			space = color.space || color.spaceId;
+			coords = color.coords;
+			alpha = color.alpha;
+		}
+		else {
+			// default signature new Color(ColorSpace, array [, alpha])
+			[space, coords, alpha] = args;
+		}
+
+		Object.defineProperty(this, "space", {
+			value: ColorSpace.get(space),
+			writable: false,
+			enumerable: true,
+			configurable: true, // see note in https://262.ecma-international.org/8.0/#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver
+		});
+
+		this.coords = coords ? coords.slice() : [0, 0, 0];
+
+		// Clamp alpha to [0, 1]
+		this.alpha = alpha > 1 || alpha === undefined ? 1 : (alpha < 0 ? 0 : alpha);
+
+		// Convert "NaN" to NaN
+		for (let i = 0; i < this.coords.length; i++) {
+			if (this.coords[i] === "NaN") {
+				this.coords[i] = NaN;
+			}
+		}
+
+		// Define getters and setters for each coordinate
+		for (let id in this.space.coords) {
+			Object.defineProperty(this, id, {
+				get: () => this.get(id),
+				set: value => this.set(id, value),
+			});
+		}
+	}
+
+	get spaceId () {
+		return this.space.id;
+	}
+
+	clone () {
+		return new Color(this.space, this.coords, this.alpha);
+	}
+
+	toJSON () {
+		return {
+			spaceId: this.spaceId,
+			coords: this.coords,
+			alpha: this.alpha,
+		};
+	}
+
+	display (...args) {
+		let ret = display(this, ...args);
+
+		// Convert color object to Color instance
+		ret.color = new Color(ret.color);
+
+		return ret;
+	}
+
+	/**
+	 * Get a color from the argument passed
+	 * Basically gets us the same result as new Color(color) but doesn't clone an existing color object
+	 */
+	static get (color, ...args) {
+		if (color instanceof Color) {
+			return color;
+		}
+
+		return new Color(color, ...args);
+	}
+
+	static defineFunction (name, code, o = code) {
+		let {instance = true, returns} = o;
+
+		let func = function (...args) {
+			let ret = code(...args);
+
+			if (returns === "color") {
+				ret = Color.get(ret);
+			}
+			else if (returns === "function<color>") {
+				let f = ret;
+				ret = function (...args) {
+					let ret = f(...args);
+					return Color.get(ret);
+				};
+				// Copy any function metadata
+				Object.assign(ret, f);
+			}
+			else if (returns === "array<color>") {
+				ret = ret.map(c => Color.get(c));
+			}
+
+			return ret;
+		};
+
+		if (!(name in Color)) {
+			Color[name] = func;
+		}
+
+		if (instance) {
+			Color.prototype[name] = function (...args) {
+				return func(this, ...args);
+			};
+		}
+	}
+
+	static defineFunctions (o) {
+		for (let name in o) {
+			Color.defineFunction(name, o[name], o[name]);
+		}
+	}
+
+	static extend (exports) {
+		if (exports.register) {
+			exports.register(Color);
+		}
+		else {
+			// No register method, just add the module's functions
+			for (let name in exports) {
+				Color.defineFunction(name, exports[name]);
+			}
+		}
+	}
+}
+
+Color.defineFunctions({
+	get,
+	getAll,
+	set,
+	setAll,
+	to,
+	equals,
+	inGamut,
+	toGamut,
+	distance,
+	toString: serialize,
+});
+
+Object.assign(Color, {
+	util,
+	hooks,
+	WHITES,
+	Space: ColorSpace,
+	spaces: ColorSpace.registry,
+	parse,
+
+	// Global defaults one may want to configure
+	defaults,
+});

package/lib/colorjs.io/src/contrast/APCA.js

@@ -0,0 +1,102 @@
+// APCA 0.0.98G
+// https://github.com/Myndex/apca-w3
+// see also https://github.com/w3c/silver/issues/643
+
+import getColor from "../getColor.js";
+import to from "../to.js";
+
+// exponents
+const normBG = 0.56;
+const normTXT = 0.57;
+const revTXT = 0.62;
+const revBG = 0.65;
+
+// clamps
+const blkThrs = 0.022;
+const blkClmp = 1.414;
+const loClip = 0.1;
+const deltaYmin = 0.0005;
+
+// scalers
+// see https://github.com/w3c/silver/issues/645
+const scaleBoW = 1.14;
+const loBoWoffset = 0.027;
+const scaleWoB = 1.14;
+const loWoBoffset = 0.027;
+
+function fclamp (Y) {
+	if (Y >= blkThrs) {
+		return Y;
+	}
+	return Y + (blkThrs - Y) ** blkClmp;
+}
+
+function linearize (val) {
+	let sign = val < 0 ? -1 : 1;
+	let abs = Math.abs(val);
+	return sign * Math.pow(abs, 2.4);
+}
+
+// Not symmetric, requires a foreground (text) color, and a background color
+export default function contrastAPCA (background, foreground) {
+	foreground = getColor(foreground);
+	background = getColor(background);
+
+	let S;
+	let C;
+	let Sapc;
+
+	// Myndex as-published, assumes sRGB inputs
+	let R, G, B;
+
+	foreground = to(foreground, "srgb");
+	// Should these be clamped to in-gamut values?
+
+	// Calculates "screen luminance" with non-standard simple gamma EOTF
+	// weights should be from CSS Color 4, not the ones here which are via Myndex and copied from Lindbloom
+	[R, G, B] = foreground.coords;
+	let lumTxt = linearize(R) * 0.2126729 + linearize(G) * 0.7151522 + linearize(B) * 0.0721750;
+
+	background = to(background, "srgb");
+	[R, G, B] = background.coords;
+	let lumBg = linearize(R) * 0.2126729 + linearize(G) * 0.7151522 + linearize(B) * 0.0721750;
+
+	// toe clamping of very dark values to account for flare
+	let Ytxt = fclamp(lumTxt);
+	let Ybg = fclamp(lumBg);
+
+	// are we "Black on White" (dark on light), or light on dark?
+	let BoW = Ybg > Ytxt;
+
+	// why is this a delta, when Y is not perceptually uniform?
+	// Answer: it is a noise gate, see
+	// https://github.com/LeaVerou/color.js/issues/208
+	if (Math.abs(Ybg - Ytxt) < deltaYmin) {
+		C = 0;
+	}
+	else {
+		if (BoW) {
+			// dark text on light background
+			S = Ybg ** normBG - Ytxt ** normTXT;
+			C = S * scaleBoW;
+		}
+		else {
+			// light text on dark background
+			S = Ybg ** revBG - Ytxt ** revTXT;
+			C = S * scaleWoB;
+		}
+	}
+	if (Math.abs(C) < loClip) {
+		Sapc = 0;
+	}
+	else if (C > 0) {
+		// not clear whether Woffset is loBoWoffset or loWoBoffset
+		// but they have the same value
+		Sapc = C - loBoWoffset;
+	}
+	else {
+		Sapc = C + loBoWoffset;
+	}
+
+	return Sapc * 100;
+}