color-elements 0.0.1 → 0.0.3

package/lib/colorjs.io/colorjs.io/src/spaces/rec2020.js

@@ -1,31 +0,0 @@
-import RGBColorSpace from "../rgbspace.js";
-import REC2020Linear from "./rec2020-linear.js";
-// import sRGB from "./srgb.js";
-
-const α = 1.09929682680944;
-const β = 0.018053968510807;
-
-export default new RGBColorSpace({
-	id: "rec2020",
-	name: "REC.2020",
-	base: REC2020Linear,
-	// Non-linear transfer function from Rec. ITU-R BT.2020-2 table 4
-	toBase (RGB) {
-		return RGB.map(function (val) {
-			if (val < β * 4.5) {
-				return val / 4.5;
-			}
-
-			return Math.pow((val + α - 1) / α, 1 / 0.45);
-		});
-	},
-	fromBase (RGB) {
-		return RGB.map(function (val) {
-			if (val >= β) {
-				return α * Math.pow(val, 0.45) - (α - 1);
-			}
-
-			return 4.5 * val;
-		});
-	},
-});

package/lib/colorjs.io/colorjs.io/src/spaces/rec2100-hlg.js

@@ -1,49 +0,0 @@
-import RGBColorSpace from "../rgbspace.js";
-import REC2020Linear from "./rec2020-linear.js";
-
-// FIXME see https://github.com/LeaVerou/color.js/issues/190
-
-const a = 0.17883277;
-const b = 0.28466892; // 1 - (4 * a)
-const c = 0.55991073; // 0.5 - a * Math.log(4 *a)
-
-const scale = 3.7743;	// Place 18% grey at HLG 0.38, so media white at 0.75
-
-export default new RGBColorSpace({
-	id: "rec2100hlg",
-	cssId: "rec2100-hlg",
-	name: "REC.2100-HLG",
-	referred: "scene",
-
-	base: REC2020Linear,
-	toBase (RGB) {
-		// given HLG encoded component in range [0, 1]
-		// return media-white relative linear-light
-		return RGB.map(function (val) {
-			// first the HLG EOTF
-			// ITU-R BT.2390-10 p.30 section
-			// 6.3 The hybrid log-gamma electro-optical transfer function (EOTF)
-			// Then scale by 3 so media white is 1.0
-			if (val <= 0.5) {
-				return (val ** 2) / 3 * scale;
-			}
-			return ((Math.exp((val - c) / a) + b) / 12) * scale;
-		});
-	},
-	fromBase (RGB) {
-		// given media-white relative linear-light
-		// where diffuse white is 1.0,
-		// return HLG encoded component in range [0, 1]
-		return RGB.map(function (val) {
-			// first scale to put linear-light media white at 1/3
-			val /= scale;
-			// now the HLG OETF
-			// ITU-R BT.2390-10 p.23
-			// 6.1 The hybrid log-gamma opto-electronic transfer function (OETF)
-			if (val <= 1 / 12) {
-				return Math.sqrt(3 * val);
-			}
-			return a * Math.log(12 * val - b) + c;
-		});
-	},
-});

package/lib/colorjs.io/colorjs.io/src/spaces/rec2100-pq.js

@@ -1,37 +0,0 @@
-import RGBColorSpace from "../rgbspace.js";
-import REC2020Linear from "./rec2020-linear.js";
-
-const Yw = 203;	// absolute luminance of media white, cd/m²
-const n = 2610 / (2 ** 14);
-const ninv = (2 ** 14) / 2610;
-const m = 2523 / (2 ** 5);
-const minv = (2 ** 5) / 2523;
-const c1 = 3424 / (2 ** 12);
-const c2 = 2413 / (2 ** 7);
-const c3 = 2392 / (2 ** 7);
-
-export default new RGBColorSpace({
-	id: "rec2100pq",
-	cssId: "rec2100-pq",
-	name: "REC.2100-PQ",
-	base: REC2020Linear,
-	toBase (RGB) {
-		// given PQ encoded component in range [0, 1]
-		// return media-white relative linear-light
-		return RGB.map(function (val) {
-			let x = ((Math.max(((val ** minv) - c1), 0) / (c2 - (c3 * (val ** minv)))) ** ninv);
-			return (x * 10000 / Yw); 	// luminance relative to diffuse white, [0, 70 or so].
-		});
-	},
-	fromBase (RGB) {
-		// given media-white relative linear-light
-		// returnPQ encoded component in range [0, 1]
-		return RGB.map(function (val) {
-			let x = Math.max(val * Yw / 10000, 0); 	// absolute luminance of peak white is 10,000 cd/m².
-			let num = (c1 + (c2 * (x ** n)));
-			let denom = (1 + (c3 * (x ** n)));
-
-			return ((num / denom)  ** m);
-		});
-	},
-});

package/lib/colorjs.io/colorjs.io/src/spaces/srgb-linear.js

@@ -1,30 +0,0 @@
-import RGBColorSpace from "../rgbspace.js";
-
-// This is the linear-light version of sRGB
-// as used for example in SVG filters
-// or in Canvas
-
-// This matrix was calculated directly from the RGB and white chromaticities
-// when rounded to 8 decimal places, it agrees completely with the official matrix
-// see https://github.com/w3c/csswg-drafts/issues/5922
-const toXYZ_M = [
-	[ 0.41239079926595934, 0.357584339383878,   0.1804807884018343  ],
-	[ 0.21263900587151027, 0.715168678767756,   0.07219231536073371 ],
-	[ 0.01933081871559182, 0.11919477979462598, 0.9505321522496607  ],
-];
-
-// This matrix is the inverse of the above;
-// again it agrees with the official definition when rounded to 8 decimal places
-export const fromXYZ_M = [
-	[  3.2409699419045226,  -1.537383177570094,   -0.4986107602930034  ],
-	[ -0.9692436362808796,   1.8759675015077202,   0.04155505740717559 ],
-	[  0.05563007969699366, -0.20397695888897652,  1.0569715142428786  ],
-];
-
-export default new RGBColorSpace({
-	id: "srgb-linear",
-	name: "Linear sRGB",
-	white: "D65",
-	toXYZ_M,
-	fromXYZ_M,
-});

package/lib/colorjs.io/colorjs.io/src/spaces/srgb.js

@@ -1,127 +0,0 @@
-import RGBColorSpace from "../rgbspace.js";
-import sRGBLinear from "./srgb-linear.js";
-import KEYWORDS from "../keywords.js";
-
-let coordGrammar = Array(3).fill("<percentage> | <number>[0, 255]");
-let coordGrammarNumber = Array(3).fill("<number>[0, 255]");
-
-export default new RGBColorSpace({
-	id: "srgb",
-	name: "sRGB",
-	base: sRGBLinear,
-	fromBase: rgb => {
-		// convert an array of linear-light sRGB values in the range 0.0-1.0
-		// to gamma corrected form
-		// https://en.wikipedia.org/wiki/SRGB
-		return rgb.map(val => {
-			let sign = val < 0 ? -1 : 1;
-			let abs = val * sign;
-
-			if (abs > 0.0031308) {
-				return sign * (1.055 * (abs ** (1 / 2.4)) - 0.055);
-			}
-
-			return 12.92 * val;
-		});
-	},
-	toBase: rgb => {
-		// convert an array of sRGB values in the range 0.0 - 1.0
-		// to linear light (un-companded) form.
-		// https://en.wikipedia.org/wiki/SRGB
-		return rgb.map(val => {
-			let sign = val < 0 ? -1 : 1;
-			let abs = val * sign;
-
-			if (abs <= 0.04045) {
-				return val / 12.92;
-			}
-
-			return sign * (((abs + 0.055) / 1.055) ** 2.4);
-		});
-	},
-	formats: {
-		"rgb": {
-			coords: coordGrammar,
-		},
-		"rgb_number": {
-			name: "rgb",
-			commas: true,
-			coords: coordGrammarNumber,
-			noAlpha: true,
-		},
-		"color": { /* use defaults */ },
-		"rgba": {
-			coords: coordGrammar,
-			commas: true,
-			lastAlpha: true,
-		},
-		"rgba_number": {
-			name: "rgba",
-			commas: true,
-			coords: coordGrammarNumber,
-		},
-		"hex": {
-			type: "custom",
-			toGamut: true,
-			test: str => /^#([a-f0-9]{3,4}){1,2}$/i.test(str),
-			parse (str) {
-				if (str.length <= 5) {
-					// #rgb or #rgba, duplicate digits
-					str = str.replace(/[a-f0-9]/gi, "$&$&");
-				}
-
-				let rgba = [];
-				str.replace(/[a-f0-9]{2}/gi, component => {
-					rgba.push(parseInt(component, 16) / 255);
-				});
-
-				return {
-					spaceId: "srgb",
-					coords: rgba.slice(0, 3),
-					alpha: rgba.slice(3)[0],
-				};
-			},
-			serialize: (coords, alpha, {
-				collapse = true, // collapse to 3-4 digit hex when possible?
-			} = {}) => {
-				if (alpha < 1) {
-					coords.push(alpha);
-				}
-
-				coords = coords.map(c => Math.round(c * 255));
-
-				let collapsible = collapse && coords.every(c => c % 17 === 0);
-
-				let hex = coords.map(c => {
-					if (collapsible) {
-						return (c / 17).toString(16);
-					}
-
-					return c.toString(16).padStart(2, "0");
-				}).join("");
-
-				return "#" + hex;
-			},
-		},
-		"keyword": {
-			type: "custom",
-			test: str => /^[a-z]+$/i.test(str),
-			parse (str) {
-				str = str.toLowerCase();
-				let ret = {spaceId: "srgb", coords: null, alpha: 1};
-
-				if (str === "transparent") {
-					ret.coords = KEYWORDS.black;
-					ret.alpha = 0;
-				}
-				else {
-					ret.coords = KEYWORDS[str];
-				}
-
-				if (ret.coords) {
-					return ret;
-				}
-			},
-		},
-	},
-});

package/lib/colorjs.io/colorjs.io/src/spaces/xyz-abs-d65.js

@@ -1,40 +0,0 @@
-import ColorSpace from "../space.js";
-import XYZ_D65 from "./xyz-d65.js";
-
-const Yw = 203;	// absolute luminance of media white
-
-export default new ColorSpace({
-// Absolute CIE XYZ, with a D65 whitepoint,
-// as used in most HDR colorspaces as a starting point.
-// SDR spaces are converted per BT.2048
-// so that diffuse, media white is 203 cd/m²
-	id: "xyz-abs-d65",
-	cssId: "--xyz-abs-d65",
-	name: "Absolute XYZ D65",
-	coords: {
-		x: {
-			refRange: [0, 9504.7],
-			name: "Xa",
-		},
-		y: {
-			refRange: [0, 10000],
-			name: "Ya",
-		},
-		z: {
-			refRange: [0, 10888.3],
-			name: "Za",
-		},
-	},
-
-	base: XYZ_D65,
-	fromBase (XYZ) {
-		// Make XYZ absolute, not relative to media white
-		// Maximum luminance in PQ is 10,000 cd/m²
-		// Relative XYZ has Y=1 for media white
-		return XYZ.map (v => Math.max(v * Yw, 0));
-	},
-	toBase (AbsXYZ) {
-		// Convert to media-white relative XYZ
-		return AbsXYZ.map(v => Math.max(v / Yw, 0));
-	},
-});

package/lib/colorjs.io/colorjs.io/src/spaces/xyz-d50.js

@@ -1,12 +0,0 @@
-import ColorSpace from "../space.js";
-import adapt from "../adapt.js";
-import XYZ_D65 from "./xyz-d65.js";
-
-export default new ColorSpace({
-	id: "xyz-d50",
-	name: "XYZ D50",
-	white: "D50",
-	base: XYZ_D65,
-	fromBase: coords => adapt(XYZ_D65.white, "D50", coords),
-	toBase: coords => adapt("D50", XYZ_D65.white, coords),
-});

package/lib/colorjs.io/colorjs.io/src/spaces/xyz-d65.js

@@ -1,18 +0,0 @@
-import ColorSpace from "../space.js";
-
-export default new ColorSpace({
-	id: "xyz-d65",
-	name: "XYZ D65",
-	coords: {
-		x: {name: "X"},
-		y: {name: "Y"},
-		z: {name: "Z"},
-	},
-	white: "D65",
-	formats: {
-		color: {
-			ids: ["xyz-d65", "xyz"],
-		},
-	},
-	aliases: ["xyz"],
-});

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

@@ -1,26 +0,0 @@
-import getColor from "./getColor.js";
-import ColorSpace from "./space.js";
-import toGamut from "./toGamut.js";
-
-/**
- * Convert to color space and return a new color
- * @param {Object|string} space - Color space object or id
- * @param {Object} options
- * @param {boolean} options.inGamut - Whether to force resulting color in gamut
- * @returns {Color}
- */
-export default function to (color, space, {inGamut} = {}) {
-	color = getColor(color);
-	space = ColorSpace.get(space);
-
-	let coords = space.from(color);
-	let ret = {space, coords, alpha: color.alpha};
-
-	if (inGamut) {
-		ret = toGamut(ret, inGamut === true ? undefined : inGamut);
-	}
-
-	return ret;
-}
-
-to.returns = "color";

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

@@ -1,310 +0,0 @@
-import * as util from "./util.js";
-import ColorSpace from "./space.js";
-import defaults from "./defaults.js";
-import deltaE2000 from "./deltaE/deltaE2000.js";
-import deltaEOK from "./deltaE/deltaEOK.js";
-import inGamut from "./inGamut.js";
-import to from "./to.js";
-import get from "./get.js";
-import oklab from "./spaces/oklab.js";
-import set from "./set.js";
-import clone from "./clone.js";
-import getColor from "./getColor.js";
-import deltaEMethods from "./deltaE/index.js";
-import {WHITES} from "./adapt.js";
-
-/**
- * Calculate the epsilon to 2 degrees smaller than the specified JND.
- * @param {Number} jnd - The target "just noticeable difference".
- * @returns {Number}
- */
-function calcEpsilon (jnd) {
-	// Calculate the epsilon to 2 degrees smaller than the specified JND.
-
-	const order = (!jnd) ? 0 : Math.floor(Math.log10(Math.abs(jnd)));
-	// Limit to an arbitrary value to ensure value is never too small and causes infinite loops.
-	return Math.max(parseFloat(`1e${order - 2}`), 1e-6);
-}
-
-const GMAPPRESET = {
-	"hct": {
-		method: "hct.c",
-		jnd: 2,
-		deltaEMethod: "hct",
-		blackWhiteClamp: {},
-	},
-	"hct-tonal": {
-		method: "hct.c",
-		jnd: 0,
-		deltaEMethod: "hct",
-		blackWhiteClamp: { channel: "hct.t", min: 0, max: 100 },
-	},
-};
-
-/**
- * Force coordinates to be in gamut of a certain color space.
- * Mutates the color it is passed.
- * @param {Object|string} options object or spaceId string
- * @param {string} options.method - How to force into gamut.
- *        If "clip", coordinates are just clipped to their reference range.
- *        If "css", coordinates are reduced according to the CSS 4 Gamut Mapping Algorithm.
- *        If in the form [colorSpaceId].[coordName], that coordinate is reduced
- *        until the color is in gamut. Please note that this may produce nonsensical
- *        results for certain coordinates (e.g. hue) or infinite loops if reducing the coordinate never brings the color in gamut.
- * @param {ColorSpace|string} options.space - The space whose gamut we want to map to
- * @param {string} options.deltaEMethod - The delta E method to use while performing gamut mapping.
- *        If no method is specified, delta E 2000 is used.
- * @param {Number} options.jnd - The "just noticeable difference" to target.
- * @param {Object} options.blackWhiteClamp - Used to configure SDR black and clamping.
- *        "channel" indicates the "space.channel" to use for determining when to clamp.
- *        "min" indicates the lower limit for black clamping and "max" indicates the upper
- *        limit for white clamping.
- */
-
-export default function toGamut (
-	color,
-	{
-		method = defaults.gamut_mapping,
-		space = undefined,
-		deltaEMethod = "",
-		jnd = 2,
-		blackWhiteClamp = {},
-	} = {},
-) {
-	color = getColor(color);
-
-	if (util.isString(arguments[1])) {
-		space = arguments[1];
-	}
-	else if (!space) {
-		space = color.space;
-	}
-
-	space = ColorSpace.get(space);
-
-	// 3 spaces:
-	// color.space: current color space
-	// space: space whose gamut we are mapping to
-	// mapSpace: space with the coord we're reducing
-
-	if (inGamut(color, space, { epsilon: 0 })) {
-		return color;
-	}
-
-	let spaceColor;
-	if (method === "css") {
-		spaceColor = toGamutCSS(color, { space });
-	}
-	else {
-		if (method !== "clip" && !inGamut(color, space)) {
-
-			if (Object.prototype.hasOwnProperty.call(GMAPPRESET, method)) {
-				({method, jnd, deltaEMethod, blackWhiteClamp} = GMAPPRESET[method]);
-			}
-
-			// Get the correct delta E method
-			let de = deltaE2000;
-			if (deltaEMethod !== "") {
-				for (let m in deltaEMethods) {
-					if ("deltae" + deltaEMethod.toLowerCase() === m.toLowerCase()) {
-						de = deltaEMethods[m];
-						break;
-					}
-				}
-			}
-
-			let clipped = toGamut(to(color, space), { method: "clip", space });
-			if (de(color, clipped) > jnd) {
-
-				// Clamp to SDR white and black if required
-				if (Object.keys(blackWhiteClamp).length === 3) {
-					let channelMeta = ColorSpace.resolveCoord(blackWhiteClamp.channel);
-					let channel = get(to(color, channelMeta.space), channelMeta.id);
-					if (util.isNone(channel)) {
-						channel = 0;
-					}
-					if (channel >= blackWhiteClamp.max) {
-						return to({ space: "xyz-d65", coords: WHITES["D65"] }, color.space);
-					}
-					else if (channel <= blackWhiteClamp.min) {
-						return to({ space: "xyz-d65", coords: [0, 0, 0] }, color.space);
-					}
-				}
-
-				// Reduce a coordinate of a certain color space until the color is in gamut
-				let coordMeta = ColorSpace.resolveCoord(method);
-				let mapSpace = coordMeta.space;
-				let coordId = coordMeta.id;
-
-				let mappedColor = to(color, mapSpace);
-				// If we were already in the mapped color space, we need to resolve undefined channels
-				mappedColor.coords.forEach((c, i) => {
-					if (util.isNone(c)) {
-						mappedColor.coords[i] = 0;
-					}
-				});
-				let bounds = coordMeta.range || coordMeta.refRange;
-				let min = bounds[0];
-				let ε = calcEpsilon(jnd);
-				let low = min;
-				let high = get(mappedColor, coordId);
-
-				while (high - low > ε) {
-					let clipped = clone(mappedColor);
-					clipped = toGamut(clipped, { space, method: "clip" });
-					let deltaE = de(mappedColor, clipped);
-
-					if (deltaE - jnd < ε) {
-						low = get(mappedColor, coordId);
-					}
-					else {
-						high = get(mappedColor, coordId);
-					}
-
-					set(mappedColor, coordId, (low + high) / 2);
-				}
-
-				spaceColor = to(mappedColor, space);
-			}
-			else {
-				spaceColor = clipped;
-			}
-		}
-		else {
-			spaceColor = to(color, space);
-		}
-
-		if (method === "clip" // Dumb coord clipping
-			// finish off smarter gamut mapping with clip to get rid of ε, see #17
-			|| !inGamut(spaceColor, space, { epsilon: 0 })
-		) {
-			let bounds = Object.values(space.coords).map(c => c.range || []);
-
-			spaceColor.coords = spaceColor.coords.map((c, i) => {
-				let [min, max] = bounds[i];
-
-				if (min !== undefined) {
-					c = Math.max(min, c);
-				}
-
-				if (max !== undefined) {
-					c = Math.min(c, max);
-				}
-
-				return c;
-			});
-		}
-	}
-
-	if (space !== color.space) {
-		spaceColor = to(spaceColor, color.space);
-	}
-
-	color.coords = spaceColor.coords;
-	return color;
-}
-
-toGamut.returns = "color";
-
-// The reference colors to be used if lightness is out of the range 0-1 in the
-// `Oklch` space. These are created in the `Oklab` space, as it is used by the
-// DeltaEOK calculation, so it is guaranteed to be imported.
-const COLORS = {
-	WHITE: { space: oklab, coords: [1, 0, 0] },
-	BLACK: { space: oklab, coords: [0, 0, 0] },
-};
-
-/**
- * Given a color `origin`, returns a new color that is in gamut using
- * the CSS Gamut Mapping Algorithm. If `space` is specified, it will be in gamut
- * in `space`, and returned in `space`. Otherwise, it will be in gamut and
- * returned in the color space of `origin`.
- * @param {Object} origin
- * @param {Object} options
- * @param {ColorSpace|string} options.space
- * @returns {Color}
- */
-export function toGamutCSS (origin, {space} = {}) {
-	const JND = 0.02;
-	const ε = 0.0001;
-
-	origin = getColor(origin);
-
-	if (!space) {
-		space = origin.space;
-	}
-
-	space = ColorSpace.get(space);
-	const oklchSpace = ColorSpace.get("oklch");
-
-	if (space.isUnbounded) {
-		return to(origin, space);
-	}
-
-	const origin_OKLCH = to(origin, oklchSpace);
-	let L = origin_OKLCH.coords[0];
-
-	// return media white or black, if lightness is out of range
-	if (L >= 1) {
-		const white = to(COLORS.WHITE, space);
-		white.alpha = origin.alpha;
-		return to(white, space);
-	}
-	if (L <= 0) {
-		const black = to(COLORS.BLACK, space);
-		black.alpha = origin.alpha;
-		return to(black, space);
-	}
-
-	if (inGamut(origin_OKLCH, space, {epsilon: 0})) {
-		return to(origin_OKLCH, space);
-	}
-
-	function clip (_color) {
-		const destColor = to(_color, space);
-		const spaceCoords = Object.values(space.coords);
-		destColor.coords = destColor.coords.map((coord, index) => {
-			if ("range" in spaceCoords[index]) {
-				const [min, max] =  spaceCoords[index].range;
-				return util.clamp(min, coord, max);
-			}
-			return coord;
-		});
-		return destColor;
-	}
-	let min = 0;
-	let max = origin_OKLCH.coords[1];
-	let min_inGamut = true;
-	let current = clone(origin_OKLCH);
-	let clipped = clip(current);
-
-	let E = deltaEOK(clipped, current);
-	if (E < JND) {
-		return clipped;
-	}
-
-	while ((max - min) > ε) {
-		const chroma = (min + max) / 2;
-		current.coords[1] = chroma;
-		if (min_inGamut && inGamut(current, space, {epsilon: 0})) {
-			min = chroma;
-		}
-		else {
-			clipped = clip(current);
-			E = deltaEOK(clipped, current);
-			if (E < JND) {
-				if ((JND - E < ε)) {
-					break;
-				}
-				else {
-					min_inGamut = false;
-					min = chroma;
-				}
-			}
-			else {
-				max = chroma;
-			}
-		}
-	}
-	return clipped;
-}