color-elements 0.0.1

package/lib/colorjs.io/types/src/space.d.ts

@@ -0,0 +1,143 @@
+import { White } from "./adapt.js";
+import { ColorConstructor, Coords, ColorTypes } from "./color.js";
+
+export interface Format {
+	/** @default "function" */
+	type?: string | undefined;
+	/** @default "color" */
+	name?: string | undefined;
+	id?: string | undefined;
+	coords?: string[] | undefined;
+	coordGrammar?: (string & { range?: [number, number] })[] | undefined;
+	serializeCoords?:
+	| ((coords: Coords, precision: number) => [string, string, string])
+	| undefined;
+	/** Whether to adjust the coordinates to fit in the gamut */
+	toGamut?: boolean | undefined;
+	/** Whether commas should separate arguments for a format */
+	commas?: boolean | undefined;
+	/** Whether the last coordinate is the alpha coordinate */
+	lastAlpha?: boolean | undefined;
+	/** Whether the format has an alpha channel */
+	noAlpha?: boolean | undefined;
+	test?: ((str: string) => boolean) | undefined;
+	/** Function to parse a string into a color */
+	parse?: ((str: string) => ColorConstructor) | undefined;
+	/**
+	 * Serialize coordinates and an alpha channel into a string.
+	 * Must be defined for a format to support serialization
+	*/
+	serialize?: ((coords: Coords, alpha: number, opts?: Record<string, any>) => string) | undefined;
+}
+
+export interface CoordMeta {
+	name?: string | undefined;
+	type?: string | undefined;
+	range?: [number, number] | undefined;
+	refRange?: [number, number] | undefined;
+}
+
+export interface Options {
+	/** Id of this space, used in things such as conversions */
+	id: string;
+	/** The readable name of the space, used in user-facing UI */
+	name: string;
+	/** The base color space */
+	base?: string | ColorSpace | null | undefined;
+	/**
+	 * Function that converts coords in the base color space to coords in this color space.
+	 * Must perform chromatic adaptation if needed
+	*/
+	fromBase?: ((coords: Coords) => number[]) | undefined;
+	/**
+	 * Function that converts coords in this color space to coords in the base color space.
+	 * Must perform chromatic adaptation if needed
+	 */
+	toBase?: ((coords: Coords) => number[]) | undefined;
+	/**
+	 * Object mapping coord ids to coord metadata
+	 * @see {@link CoordMeta}
+	*/
+	coords?: Record<string, CoordMeta> | undefined;
+	white?: string | White | undefined;
+	/** The ID used by CSS, such as `display-p3` or `--cam16-jmh` */
+	cssId?: string | undefined;
+	referred?: string | undefined;
+	/**
+	 * Details about string formats to parse from / serialize to
+	 * @see {@link Format}
+	*/
+	formats?: Record<string, Format> | undefined;
+	gamutSpace?: "self" | string | ColorSpace | null | undefined;
+}
+
+export type Ref =
+	| string
+	| [string | ColorSpace, string]
+	| { space: string | ColorSpace; coordId: string };
+
+/** Class for color spaces. Each color space corresponds to a `ColorSpace` instance */
+export default class ColorSpace {
+	constructor (options: Options);
+
+	static DEFAULT_FORMAT: { type: "functions"; name: "color" };
+
+	/**
+	 * @throws {TypeError} If no matching color space is found
+	 */
+	static get (
+		space: ColorSpace | string,
+		...alternatives: (ColorSpace | string)[]
+	): ColorSpace;
+
+	/**
+	 * @throws {TypeError} If no space or an unknown space is provided
+	 */
+	static resolveCoord (
+		ref: Ref,
+		workingSpace?: string | ColorSpace
+	): CoordMeta & {
+		id: string;
+		index: string | number;
+		space: ColorSpace;
+	};
+
+	/**
+	 * @throws {TypeError} If a space with the provided id already exists
+	 */
+	static register (space: ColorSpace): ColorSpace;
+	static register (id: string, space: ColorSpace): ColorSpace;
+
+	static registry: Record<string, ColorSpace>;
+
+	get all (): Set<ColorSpace>;
+	/** The ID used by CSS, such as `display-p3` or `--cam16-jmh` */
+	get cssId (): string;
+	get isPolar (): boolean;
+
+	name: string;
+	id: string;
+	aliases?: string[] | undefined;
+	base: ColorSpace | null;
+	coords: Record<string, CoordMeta>;
+	fromBase?: ((coords: Coords) => number[]) | undefined;
+	toBase?: ((coords: Coords) => number[]) | undefined;
+	formats: Record<string, Format>;
+	referred?: string | undefined;
+	white: White;
+	gamutSpace: ColorSpace;
+
+	from (color: ColorTypes): Coords;
+	from (space: string | ColorSpace, coords: Coords): Coords;
+
+	getFormat (format?: string | Format): Format | null;
+
+	getMinCoords (): Coords;
+
+	inGamut (coords: Coords, options?: { epsilon?: number }): boolean;
+
+	to (color: ColorTypes): Coords;
+	to (space: string | ColorSpace, coords: Coords): Coords;
+
+	toString (): string;
+}

package/lib/colorjs.io/types/src/spaces/a98rgb-linear.d.ts

@@ -0,0 +1,3 @@
+import RGBColorSpace from "../rgbspace.js";
+declare const _default: RGBColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/a98rgb.d.ts

@@ -0,0 +1,3 @@
+import RGBColorSpace from "../rgbspace.js";
+declare const _default: RGBColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/acescc.d.ts

@@ -0,0 +1,3 @@
+import RGBColorSpace from "../rgbspace.js";
+declare const _default: RGBColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/acescg.d.ts

@@ -0,0 +1,3 @@
+import RGBColorSpace from "../rgbspace.js";
+declare const _default: RGBColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/hpluv.d.ts

@@ -0,0 +1,3 @@
+import ColorSpace from "../space.js";
+declare const _default: ColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/hsl.d.ts

@@ -0,0 +1,3 @@
+import ColorSpace from "../space.js";
+declare const _default: ColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/hsluv.d.ts

@@ -0,0 +1,3 @@
+import ColorSpace from "../space.js";
+declare const _default: ColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/hsv.d.ts

@@ -0,0 +1,3 @@
+import ColorSpace from "../space.js";
+declare const _default: ColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/hwb.d.ts

@@ -0,0 +1,3 @@
+import ColorSpace from "../space.js";
+declare const _default: ColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/ictcp.d.ts

@@ -0,0 +1,3 @@
+import ColorSpace from "../space.js";
+declare const _default: ColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/index-fn-hdr.d.ts

@@ -0,0 +1,9 @@
+export type HDRSpaces = keyof typeof import("./index-fn-hdr.js");
+
+export { default as Jzazbz } from "./jzazbz.js";
+export { default as JzCzHz } from "./jzczhz.js";
+export { default as ICTCP } from "./ictcp.js";
+export { default as REC_2100_PQ } from "./rec2100-pq.js";
+export { default as REC_2100_HLG } from "./rec2100-hlg.js";
+export { default as ACEScg } from "./acescg.js";
+export { default as ACEScc } from "./acescc.js";

package/lib/colorjs.io/types/src/spaces/index-fn.d.ts

@@ -0,0 +1,29 @@
+export type Spaces = keyof typeof import("./index-fn.js");
+
+export { default as XYZ_D65 } from "./xyz-d65.js";
+export { default as XYZ_D50 } from "./xyz-d50.js";
+export { default as XYZ_ABS_D65 } from "./xyz-abs-d65.js";
+export { default as Lab } from "./lab.js";
+export { default as Lab_D65 } from "./lab-d65.js";
+export { default as LCH } from "./lch.js";
+export { default as sRGB_Linear } from "./srgb-linear.js";
+export { default as sRGB } from "./srgb.js";
+export { default as HSL } from "./hsl.js";
+export { default as HWB } from "./hwb.js";
+export { default as HSV } from "./hsv.js";
+export { default as P3_Linear } from "./p3-linear.js";
+export { default as P3 } from "./p3.js";
+export { default as A98RGB_Linear } from "./a98rgb-linear.js";
+export { default as A98RGB } from "./a98rgb.js";
+export { default as ProPhoto_Linear } from "./prophoto-linear.js";
+export { default as ProPhoto } from "./prophoto.js";
+export { default as REC_2020_Linear } from "./rec2020-linear.js";
+export { default as REC_2020 } from "./rec2020.js";
+export { default as OKLab } from "./oklab.js";
+export { default as OKLCH } from "./oklch.js";
+export { default as Luv } from "./luv.js";
+export { default as LCHuv } from "./lchuv.js";
+export { default as HSLuv } from "./hsluv.js";
+export { default as HPLuv } from "./hpluv.js";
+
+export * from "./index-fn-hdr.js";

package/lib/colorjs.io/types/src/spaces/index.d.ts

@@ -0,0 +1,4 @@
+import * as spaces from "./index-fn.js";
+
+export { Spaces } from "./index-fn.js";
+export { spaces };

package/lib/colorjs.io/types/src/spaces/jzazbz.d.ts

@@ -0,0 +1,3 @@
+import ColorSpace from "../space.js";
+declare const _default: ColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/jzczhz.d.ts

@@ -0,0 +1,3 @@
+import ColorSpace from "../space.js";
+declare const _default: ColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/lab-d65.d.ts

@@ -0,0 +1,3 @@
+import ColorSpace from "../space.js";
+declare const _default: ColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/lab.d.ts

@@ -0,0 +1,3 @@
+import ColorSpace from "../space.js";
+declare const _default: ColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/lch.d.ts

@@ -0,0 +1,3 @@
+import ColorSpace from "../space.js";
+declare const _default: ColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/lchuv.d.ts

@@ -0,0 +1,3 @@
+import ColorSpace from "../space.js";
+declare const _default: ColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/luv.d.ts

@@ -0,0 +1,3 @@
+import ColorSpace from "../space.js";
+declare const _default: ColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/oklab.d.ts

@@ -0,0 +1,3 @@
+import ColorSpace from "../space.js";
+declare const _default: ColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/oklch.d.ts

@@ -0,0 +1,3 @@
+import ColorSpace from "../space.js";
+declare const _default: ColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/p3-linear.d.ts

@@ -0,0 +1,3 @@
+import RGBColorSpace from "../rgbspace.js";
+declare const _default: RGBColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/p3.d.ts

@@ -0,0 +1,3 @@
+import RGBColorSpace from "../rgbspace.js";
+declare const _default: RGBColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/prophoto-linear.d.ts

@@ -0,0 +1,3 @@
+import RGBColorSpace from "../rgbspace.js";
+declare const _default: RGBColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/prophoto.d.ts

@@ -0,0 +1,3 @@
+import RGBColorSpace from "../rgbspace.js";
+declare const _default: RGBColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/rec2020-linear.d.ts

@@ -0,0 +1,3 @@
+import RGBColorSpace from "../rgbspace.js";
+declare const _default: RGBColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/rec2020.d.ts

@@ -0,0 +1,3 @@
+import RGBColorSpace from "../rgbspace.js";
+declare const _default: RGBColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/rec2100-hlg.d.ts

@@ -0,0 +1,3 @@
+import RGBColorSpace from "../rgbspace.js";
+declare const _default: RGBColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/rec2100-pq.d.ts

@@ -0,0 +1,3 @@
+import RGBColorSpace from "../rgbspace.js";
+declare const _default: RGBColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/srgb-linear.d.ts

@@ -0,0 +1,3 @@
+import RGBColorSpace from "../rgbspace.js";
+declare const _default: RGBColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/srgb.d.ts

@@ -0,0 +1,3 @@
+import RGBColorSpace from "../rgbspace.js";
+declare const _default: RGBColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/xyz-abs-d65.d.ts

@@ -0,0 +1,3 @@
+import ColorSpace from "../space.js";
+declare const _default: ColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/xyz-d50.d.ts

@@ -0,0 +1,3 @@
+import ColorSpace from "../space.js";
+declare const _default: ColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/spaces/xyz-d65.d.ts

@@ -0,0 +1,3 @@
+import ColorSpace from "../space.js";
+declare const _default: ColorSpace;
+export default _default;

package/lib/colorjs.io/types/src/to.d.ts

@@ -0,0 +1,14 @@
+import { PlainColorObject, ColorTypes } from "./color.js";
+import ColorSpace from "./space.js";
+
+declare namespace to {
+	let returns: "color";
+}
+
+declare function to (
+	color: ColorTypes,
+	space: string | ColorSpace,
+	options?: { inGamut?: boolean | undefined }
+): PlainColorObject;
+
+export default to;

package/lib/colorjs.io/types/src/toGamut.d.ts

@@ -0,0 +1,45 @@
+import { ColorTypes, PlainColorObject } from "./color.js";
+import { Methods } from "./deltaE/index.js";
+import ColorSpace, { Ref } from "./space.js";
+
+export interface Options {
+	/**
+	 * 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
+	 * @default "css"
+	 */
+	method?: "css" | "clip" | (string & {}) | undefined;
+	/** The color whose space is being mapped to. Defaults to the current space */
+	space?: string | ColorSpace | undefined;
+	deltaEMethod?: Methods | undefined;
+	/** The "just noticeable difference" to target */
+	jnd?: number | undefined;
+	/**
+	 * 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
+	 */
+	blackWhiteClamp?: { channel: Ref; min: number; max: number } | undefined;
+}
+
+declare namespace toGamut {
+	let returns: "color";
+}
+
+declare function toGamut (color: ColorTypes, options?: Options | string): PlainColorObject;
+
+export default toGamut;
+
+export function toGamutCSS (
+	color: ColorTypes,
+	options?: {
+		space?: string | ColorSpace | undefined;
+	}
+): PlainColorObject;

package/lib/colorjs.io/types/src/util.d.ts

@@ -0,0 +1,58 @@
+export { default as multiplyMatrices } from "./multiply-matrices.js";
+
+/**
+ * Check if a value is a string
+ * @param str Value to check
+ */
+export function isString (str: any): str is string;
+
+/**
+ * Find the internal JavaScript `[[Class]]` of an object
+ * @param o Value to check
+ */
+export function type (o: any): string;
+
+/**
+ * Round a number to an amount of significant digits
+ * @param n The number to round
+ * @param precision The amount of significant digits
+ */
+export function toPrecision (n: number, precision: number): number;
+
+/**
+ * Parse a CSS function regardless of its name and arguments
+ * @param str String to parse
+ */
+export function parseFunction (str: string): {
+	name: string;
+	rawName: string;
+	rawArgs: string;
+	args: (string
+	| (number & {
+		type?: "<angle>" | "<number>" | "<percentage>" | undefined;
+		unit?: "deg" | undefined;
+		alpha?: true | undefined;
+	}))[];
+};
+
+/**
+ * Get the last element of an array
+ * @param arr The array
+ */
+export function last<T extends readonly any[]> (arr: T): T[number];
+
+export function interpolate (start: number, end: number, p: number): number;
+
+export function interpolateInv (
+	start: number,
+	end: number,
+	value: number
+): number;
+
+export function mapRange (
+	from: [number, number],
+	to: [number, number],
+	value: number
+): number;
+
+export function parseCoordGrammar (coordGrammars: string[]): string[];

package/lib/colorjs.io/types/src/variations.d.ts

@@ -0,0 +1,5 @@
+import { PlainColorObject, ColorTypes } from "./color.js";
+
+export function lighten (color: ColorTypes, amount?: number): PlainColorObject;
+
+export function darken (color: ColorTypes, amount?: number): PlainColorObject;

package/logo.svg

@@ -0,0 +1,159 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -625 630 615" overflow="visible" height="600">
+<desc>Based on u*,v* UCS diagram</desc>
+<style>
+#tongue {
+	fill: hsl(220, 10%, 48%);
+}
+
+.color-space polygon {
+	fill: none;
+}
+
+.color-space circle,
+.color-space polygon {
+	stroke: hsl(220, 10%, 88%);
+	stroke-width: 30px;
+}
+
+.color-space circle {
+	stroke-width: 22px;
+}
+
+#white-point {
+	fill: white;
+}
+
+</style>
+
+<path id="tongue" d="M 256.804  -16.594
+  L 256.637  -16.593
+  L 256.418  -16.266
+  L 256.085  -16.263
+  L 255.699  -15.935
+  L 255.2  -15.932
+  L 254.535  -15.927
+  L 253.704  -15.921
+  L 252.207  -16.885
+  L 249.615  -19.128
+  L 246.12  -22.623
+  L 241.063  -27.948
+  L 234.69  -35.011
+  L 226.63  -43.68
+  L 216.06  -54.946
+  L 203.34  -68.779
+  L 187.72  -87.114
+  L 168.963  -111.946
+  L 144.076  -150.984
+  L 114.692  -204.374
+  L 82.816  -270.829
+  L 52.134  -342.686
+  L 28.159  -411.679
+  L 11.891  -469.843
+  L 3.473  -513.066
+  L 1.438  -543.162
+  L 4.643  -563.843
+  L 5.859  -567.036
+  L 7.213  -569.939
+  L 8.771  -572.575
+  L 10.438  -574.905
+  L 12.285  -576.969
+  L 14.22  -578.754
+  L 16.315  -580.309
+  L 18.482  -581.618
+  L 20.756  -582.743
+  L 23.116  -583.667
+  L 25.566  -584.422
+  L 28.05  -585.009
+  L 30.633  -585.478
+  L 33.285  -585.851
+  L 36.008  -586.142
+  L 50.059  -586.754
+  L 64.335  -586.523
+  L 79.224  -585.616
+  L 95.269  -584.113
+  L 112.701  -582.069
+  L 131.858  -579.553
+  L 153.101  -576.592
+  L 176.586  -573.182
+  L 202.596  -569.364
+  L 231.17  -565.107
+  L 262.343  -560.441
+  L 295.958  -555.411
+  L 331.527  -550.115
+  L 368.06  -544.626
+  L 403.475  -539.334
+  L 437.943  -534.187
+  L 469.171  -529.561
+  L 496.768  -525.419
+  L 520.257  -521.894
+  L 539.92  -518.977
+  L 556.503  -516.489
+  L 570.88  -514.332
+  L 583.036  -512.508
+  L 592.866  -511.07
+  L 600.496  -509.926
+  L 606.437  -509.035
+  L 610.879  -508.368
+  L 613.777  -507.933
+  L 616.162  -507.576
+  L 618.025  -507.296
+  L 619.897  -507.015
+  L 621.507  -506.774
+  L 622.584  -506.612
+  L 623.123  -506.531
+  L 623.393  -506.491
+  L 623.393  -506.491
+  L 623.393  -506.491
+  L 623.393  -506.491
+  L 623.393  -506.491
+  L 623.393  -506.491
+  L 623.393  -506.491
+  L 623.393  -506.491
+  L 623.393  -506.491
+  L 623.393  -506.491
+  L 623.393  -506.491
+  L 623.393  -506.491
+  L 623.393  -506.491
+  L 623.393  -506.491
+  L 623.393  -506.491
+  L 623.393  -506.491
+  L 623.393  -506.491
+  Z"/>
+
+<!-- White point -->
+<!-- <circle r="12" cx="197.83" cy="-468.32" id="white-point" /> -->
+
+<!-- sRGB
+red 450.70423, 522.88732
+green  125, 562.5
+blue 175.4386, 157.89474
+white 197.83001, 468.31999
+
+<g class="color-space" id="srgb">
+	<polygon points="450.7, -522.887 125, -562.5 175.44, -157.89"/>
+
+	<circle r="36" cx="450.7" cy="-522.887" fill="hsl(0, 80%, 50%)" />
+	<circle r="36" cx="125" cy="-562.5" fill="hsl(90, 50%, 45%)" />
+	<circle r="36" cx="175.44" cy="-157.89" fill="hsl(210 80% 55%)" />
+</g>
+-->
+
+<!-- display-p3000
+red 496.35036, 525.54745
+green 98.60465, 577.67442
+blue 175.4386, 157.89474
+white 197.83001, 468.31999
+-->
+<g class="color-space" id="p3">
+	<polygon points="496.35, -525.54 98.6, -577.67 175.44, -157.89"/>
+
+	<circle r="36" cx="496.35" cy="-525.54" fill="hsl(0, 80%, 50%)" />
+	<circle r="36" cx="98.6" cy="-577.67" fill="hsl(90, 50%, 45%)" />
+	<circle r="36" cx="175.44" cy="-157.89" fill="hsl(210 80% 55%)" />
+</g>
+
+
+
+
+
+</svg>