color-elements 0.0.2 → 0.0.4

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

@@ -1,143 +0,0 @@
-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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,9 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,14 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

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

package/src/color-gamut/README.md

@@ -1,75 +0,0 @@
-<script src="color-gamut.js" type="module"></script>
-# &lt;color-gamut>
-
-Gamut indicator. Used internally by `<color-swatch>`
-
-## Usage
-
-Static (only read once):
-```html
-<color-gamut>red</color-gamut>
-```
-
-Produces <color-gamut>red</color-gamut>
-
-Dynamic:
-```js
-colorGamutElement.color = colorValue;
-```
-
-## Demo
-<style>
-	#params {
-		background: linear-gradient(to right, var(--start-color), var(--end-color)) no-repeat top / 100% 1em;
-		padding-top: 1.5em;
-	}
-
-	#colors_container_h {
-		display: flex;
-		height: 1em;
-		margin-bottom: 1em;
-
-		color-gamut {
-			flex: 1;
-			border-radius: 0;
-
-			&::part(label) {
-				display: none;
-			}
-		}
-	}
-</style>
-<form id=params>
-<code>oklch(<input type=number id=l value=50>% <input type=number id=min_c value=30>&ndash;<input type=number id=max_c value=40>% <input type=number id=h value=50>)</code>
-<p><label>Chroma increments: <input type=number id=c_step value="0.2" min="0">%</label>
-</form>
-
-<script type=module>
-params.addEventListener("input", e => {
-	let c_range = {min: Number(min_c.value), max: Number(max_c.value)};
-	let step = Number(c_step.value);
-	let colors = [];
-	let start = `oklch(${l.value}% ${c_range.min.toLocaleString("en")}% ${h.value})`;
-	let end = `oklch(${l.value}% ${c_range.max.toLocaleString("en")}% ${h.value})`;
-
-	params.style.setProperty("--start-color", start);
-	params.style.setProperty("--end-color", end);
-
-	for (let c = c_range.min; c<= c_range.max; c+=step) {
-		colors.push(`oklch(${l.value}% ${c.toLocaleString("en")}% ${h.value})`);
-	}
-
-	let html = colors.map(color => `
-		<color-gamut title="${color}">${color}</color-gamut>`).join("\n");
-	colors_container_h.innerHTML = html;
-	colors_container.innerHTML = html;
-});
-params.dispatchEvent(new Event("input"));
-</script>
-
-No label:
-
-<div id=colors_container_h></div>
-
-Default display:
-<div id=colors_container></div>

package/src/color-gamut/color-gamut.css

@@ -1,32 +0,0 @@
-:host {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	border-radius: .2em;
-	color: white;
-	background: var(--gamut-color, var(--color-neutral-60, hsl(220 10% 60%)));
-	font-weight: bold;
-	padding-inline: .4em;
-	line-height: 1.4;
-}
-
-:host([level="0"]) {
-	--gamut-color: var(--color-green, yellowgreen);
-}
-
-:host([level="1"]) {
-	color: black;
-	--gamut-color: var(--color-yellow, gold);
-}
-
-:host([level="2"]) {
-	--gamut-color: var(--color-orange, orange);
-}
-
-:host([level="3"]) {
-	--gamut-color: var(--color-red, red);
-}
-
-:host([gamut="none"]) {
-	--gamut-color: var(--color-red-dark, #b00);
-}