@jbrowse/core 4.3.0 → 5.0.0-beta.1

package/esm/util/color-bits/core.js

@@ -0,0 +1,67 @@
+import { cast, clampByte, get, set } from './bit.js';
+export const OFFSET_R = 24;
+export const OFFSET_G = 16;
+export const OFFSET_B = 8;
+export const OFFSET_A = 0;
+/**
+ * Creates a new color from the given RGBA components.
+ * Every component should be in the [0, 255] range.
+ */
+export function newColor(r, g, b, a) {
+    return ((clampByte(r) << OFFSET_R) +
+        (clampByte(g) << OFFSET_G) +
+        (clampByte(b) << OFFSET_B) +
+        (clampByte(a) << OFFSET_A));
+}
+/**
+ * Creates a new color from a number in the canonical `0xRRGGBBAA` layout —
+ * alpha in the LOW byte, which is what `newColor` composes and what
+ * `getRed`/`getAlpha` read.
+ *
+ * A 24-bit CSS hex is therefore not one of these, and this used to say it was:
+ * `from(0x599eff)` is `0x00599eff`, so it reads R=0x00, G=0x59, B=0x9e and
+ * A=0xff — every intended channel one byte down, with the blue arriving as the
+ * alpha. Spell the alpha (`from(0x599effff)`), or use `newColor(r, g, b, a)`.
+ */
+export function from(color) {
+    return newColor(get(color, OFFSET_R), get(color, OFFSET_G), get(color, OFFSET_B), get(color, OFFSET_A));
+}
+/**
+ * Turns the color into its equivalent number representation.
+ * This is essentially a cast from int32 to uint32.
+ */
+export function toNumber(color) {
+    return cast(color);
+}
+// These read the canonical 0xRRGGBBAA layout (R in the HIGH byte). Their
+// mirror image is `abgrRed`/`abgrGreen`/`abgrBlue`/`abgrAlpha` in
+// ../colorBits.ts, which reads the ABGR u32 the GPU path packs (R in the LOW
+// byte) — calling the wrong pair silently swaps R and B. Both take a plain
+// number and cannot be told apart by the type system: a branded Color was
+// considered and rejected, because ABGR values are read back out of
+// Uint32Arrays, where indexing yields `number` and every read would need the
+// cast that defeats the brand.
+export function getRed(c) {
+    return get(c, OFFSET_R);
+}
+export function getGreen(c) {
+    return get(c, OFFSET_G);
+}
+export function getBlue(c) {
+    return get(c, OFFSET_B);
+}
+export function getAlpha(c) {
+    return get(c, OFFSET_A);
+}
+export function setRed(c, value) {
+    return set(c, OFFSET_R, value);
+}
+export function setGreen(c, value) {
+    return set(c, OFFSET_G, value);
+}
+export function setBlue(c, value) {
+    return set(c, OFFSET_B, value);
+}
+export function setAlpha(c, value) {
+    return set(c, OFFSET_A, value);
+}

package/esm/util/color-bits/format.d.ts

@@ -0,0 +1,24 @@
+import type { Color } from './core.ts';
+/** Format to a #RRGGBBAA string */
+export declare const format: typeof formatHEXA;
+/** Format to a #RRGGBBAA string */
+export declare function formatHEXA(color: Color): string;
+export declare function formatHEX(color: Color): string;
+export declare function formatRGBA(color: Color): string;
+export declare function toRGBA(color: Color): {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export declare function formatHSLA(color: Color): string;
+export declare function toHSLA(color: Color): {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+};
+/**
+ * Returns [r, g, b] as floats in 0-1 range, suitable for GPU shader uniforms.
+ */
+export declare function toGLrgb(color: Color): [number, number, number];

package/esm/util/color-bits/format.js

@@ -0,0 +1,82 @@
+import { getAlpha, getBlue, getGreen, getRed } from './core.js';
+// Return buffer, avoid allocations
+const buffer = [0, 0, 0];
+/**
+ * Map 8-bits value to its hexadecimal representation
+ * ['00', '01', '02', ..., 'fe', 'ff']
+ */
+const FORMAT_HEX = Array.from({ length: 256 }).map((_, byte) => byte.toString(16).padStart(2, '0'));
+/** Format to a #RRGGBBAA string */
+export const format = formatHEXA;
+/** Format to a #RRGGBBAA string */
+export function formatHEXA(color) {
+    return `#${FORMAT_HEX[getRed(color)]}${FORMAT_HEX[getGreen(color)]}${FORMAT_HEX[getBlue(color)]}${FORMAT_HEX[getAlpha(color)]}`;
+}
+export function formatHEX(color) {
+    return `#${FORMAT_HEX[getRed(color)]}${FORMAT_HEX[getGreen(color)]}${FORMAT_HEX[getBlue(color)]}`;
+}
+export function formatRGBA(color) {
+    return `rgba(${getRed(color)} ${getGreen(color)} ${getBlue(color)} / ${getAlpha(color) / 255})`;
+}
+export function toRGBA(color) {
+    return {
+        r: getRed(color),
+        g: getGreen(color),
+        b: getBlue(color),
+        a: getAlpha(color),
+    };
+}
+export function formatHSLA(color) {
+    rgbToHSL(getRed(color), getGreen(color), getBlue(color));
+    const h = buffer[0];
+    const s = buffer[1];
+    const l = buffer[2];
+    const a = getAlpha(color) / 255;
+    return `hsla(${h} ${s}% ${l}% / ${a})`;
+}
+export function toHSLA(color) {
+    rgbToHSL(getRed(color), getGreen(color), getBlue(color));
+    const h = buffer[0];
+    const s = buffer[1];
+    const l = buffer[2];
+    const a = getAlpha(color) / 255;
+    return { h, s, l, a };
+}
+/**
+ * Returns [r, g, b] as floats in 0-1 range, suitable for GPU shader uniforms.
+ */
+export function toGLrgb(color) {
+    return [getRed(color) / 255, getGreen(color) / 255, getBlue(color) / 255];
+}
+// Conversion functions
+// https://www.30secondsofcode.org/js/s/rgb-hex-hsl-hsb-color-format-conversion/
+function rgbToHSL(r, g, b) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    // `l` here is the max channel (HSV value) and `s` the chroma, not the HSL
+    // lightness/saturation; the real lightness is (max + min) / 2 = l - s / 2
+    const l = Math.max(r, g, b);
+    const s = l - Math.min(r, g, b);
+    const h = s
+        ? l === r
+            ? (g - b) / s
+            : l === g
+                ? 2 + (b - r) / s
+                : 4 + (r - g) / s
+        : 0;
+    // the saturation formula is picked by lightness, not by the max channel:
+    // branching on `l` understated it whenever max > 0.5 while lightness < 0.5
+    // (e.g. #0a0ac8 came out 63.3% instead of 90.5%)
+    const doubleLightness = 2 * l - s;
+    buffer[0] = 60 * h < 0 ? 60 * h + 360 : 60 * h;
+    buffer[1] =
+        100 *
+            (s
+                ? doubleLightness <= 1
+                    ? s / doubleLightness
+                    : s / (2 - doubleLightness)
+                : 0);
+    buffer[2] = (100 * doubleLightness) / 2;
+}
+// https://stackoverflow.com/a/29463581/3112706

package/esm/util/color-bits/functions.d.ts

@@ -0,0 +1,33 @@
+import type { Color } from './core.ts';
+/**
+ * Modifies color alpha channel.
+ * @param color - Color
+ * @param value - Value in the range [0, 1]
+ */
+export declare function alpha(color: Color, value: number): Color;
+/**
+ * Darkens a color.
+ * @param color - Color
+ * @param coefficient - Multiplier in the range [0, 1]
+ */
+export declare function darken(color: Color, coefficient: number): Color;
+/**
+ * Lighten a color.
+ * @param color - Color
+ * @param coefficient - Multiplier in the range [0, 1]
+ */
+export declare function lighten(color: Color, coefficient: number): Color;
+/**
+ * Blend (aka mix) two colors together.
+ * @param background The background color
+ * @param overlay The overlay color that is affected by @opacity
+ * @param opacity Opacity (alpha) for @overlay
+ * @param [gamma=1.0] Gamma correction coefficient. `1.0` to match browser behavior, `2.2` for gamma-corrected blending.
+ */
+export declare function blend(background: Color, overlay: Color, opacity: number, gamma?: number): number;
+/**
+ * The relative brightness of any point in a color space, normalized to 0 for
+ * darkest black and 1 for lightest white.
+ * @returns The relative brightness of the color in the range 0 - 1, with 3 digits precision
+ */
+export declare function getLuminance(color: Color): number;

package/esm/util/color-bits/functions.js

@@ -0,0 +1,70 @@
+import { getAlpha, getBlue, getGreen, getRed, newColor, setAlpha, } from './core.js';
+/**
+ * Modifies color alpha channel.
+ * @param color - Color
+ * @param value - Value in the range [0, 1]
+ */
+export function alpha(color, value) {
+    return setAlpha(color, Math.round(value * 255));
+}
+/**
+ * Darkens a color.
+ * @param color - Color
+ * @param coefficient - Multiplier in the range [0, 1]
+ */
+export function darken(color, coefficient) {
+    const r = getRed(color);
+    const g = getGreen(color);
+    const b = getBlue(color);
+    const a = getAlpha(color);
+    const factor = 1 - coefficient;
+    return newColor(r * factor, g * factor, b * factor, a);
+}
+/**
+ * Lighten a color.
+ * @param color - Color
+ * @param coefficient - Multiplier in the range [0, 1]
+ */
+export function lighten(color, coefficient) {
+    const r = getRed(color);
+    const g = getGreen(color);
+    const b = getBlue(color);
+    const a = getAlpha(color);
+    return newColor(r + (255 - r) * coefficient, g + (255 - g) * coefficient, b + (255 - b) * coefficient, a);
+}
+/**
+ * Blend (aka mix) two colors together.
+ * @param background The background color
+ * @param overlay The overlay color that is affected by @opacity
+ * @param opacity Opacity (alpha) for @overlay
+ * @param [gamma=1.0] Gamma correction coefficient. `1.0` to match browser behavior, `2.2` for gamma-corrected blending.
+ */
+export function blend(background, overlay, opacity, gamma = 1) {
+    const blendChannel = (b, o) => Math.round((b ** (1 / gamma) * (1 - opacity) + o ** (1 / gamma) * opacity) ** gamma);
+    const r = blendChannel(getRed(background), getRed(overlay));
+    const g = blendChannel(getGreen(background), getGreen(overlay));
+    const b = blendChannel(getBlue(background), getBlue(overlay));
+    // Alpha is interpolated too, and linearly — it is a coverage fraction, not a
+    // gamma-encoded channel, so `gamma` has no business in it. Hardcoding 255
+    // made `colord(a).mix(b)` return opaque where real colord carries the
+    // operands' alpha through, on a `mix` that is public API with a colord-shaped
+    // signature. Both operands opaque is byte-identical, which is every in-tree
+    // caller today.
+    const a = Math.round(getAlpha(background) * (1 - opacity) + getAlpha(overlay) * opacity);
+    return newColor(r, g, b, a);
+}
+/**
+ * The relative brightness of any point in a color space, normalized to 0 for
+ * darkest black and 1 for lightest white.
+ * @returns The relative brightness of the color in the range 0 - 1, with 3 digits precision
+ */
+export function getLuminance(color) {
+    const r = getRed(color) / 255;
+    const g = getGreen(color) / 255;
+    const b = getBlue(color) / 255;
+    const apply = (v) => v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+    const r1 = apply(r);
+    const g1 = apply(g);
+    const b1 = apply(b);
+    return Math.round((0.2126 * r1 + 0.7152 * g1 + 0.0722 * b1) * 1000) / 1000;
+}

package/esm/util/color-bits/index.d.ts

@@ -0,0 +1,5 @@
+export { OFFSET_A, OFFSET_B, OFFSET_G, OFFSET_R, from, getAlpha, getBlue, getGreen, getRed, newColor, setAlpha, setBlue, setGreen, setRed, toNumber, } from './core.ts';
+export type { Color } from './core.ts';
+export { parse, parseColor, parseHex } from './parse.ts';
+export { format, formatHEX, formatHEXA, formatHSLA, formatRGBA, toGLrgb, toHSLA, toRGBA, } from './format.ts';
+export { alpha, blend, darken, getLuminance, lighten } from './functions.ts';

package/esm/util/color-bits/index.js

@@ -0,0 +1,4 @@
+export { OFFSET_A, OFFSET_B, OFFSET_G, OFFSET_R, from, getAlpha, getBlue, getGreen, getRed, newColor, setAlpha, setBlue, setGreen, setRed, toNumber, } from './core.js';
+export { parse, parseColor, parseHex } from './parse.js';
+export { format, formatHEX, formatHEXA, formatHSLA, formatRGBA, toGLrgb, toHSLA, toRGBA, } from './format.js';
+export { alpha, blend, darken, getLuminance, lighten } from './functions.js';

package/esm/util/color-bits/parse.d.ts

@@ -0,0 +1,17 @@
+import type { Color } from './core.ts';
+/**
+ * Parse CSS color
+ * @param color CSS color string: #xxx, #xxxxxx, #xxxxxxxx, rgb(), rgba(), hsl(), hsla(), color()
+ */
+export declare function parse(color: string): Color;
+/**
+ * Parse hexadecimal CSS color
+ * @param color Hex color string: #xxx, #xxxx, #xxxxxx, #xxxxxxxx
+ */
+export declare function parseHex(color: string): Color;
+/**
+ * Parse CSS color
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+ * @param color CSS color string: rgb(), rgba(), hsl(), hsla(), color()
+ */
+export declare function parseColor(color: string): Color;

package/esm/util/color-bits/parse.js

@@ -0,0 +1,382 @@
+import * as convert from './convert.js';
+import { newColor } from './core.js';
+const HASH = '#'.charCodeAt(0);
+const PERCENT = '%'.charCodeAt(0);
+const G = 'g'.charCodeAt(0);
+const N = 'n'.charCodeAt(0);
+const D = 'd'.charCodeAt(0);
+const E = 'e'.charCodeAt(0);
+/**
+ * Approximative CSS colorspace string pattern, e.g. rgb(), color()
+ *
+ * **Anchored**, because the whole string has to be a colour for this to be one.
+ * Unanchored it matched a colour sitting anywhere inside anything, so
+ * `parseCssColor('foo rgb(1,2,3) bar')` answered `[1,2,3]` — and a config slot
+ * holding prose, a jexl expression that did not evaluate, or two colours by
+ * mistake read as a plausible colour instead of reaching the invalid-colour
+ * sentinel. That sentinel is a contract (`colorBits.test.ts`: a broken config
+ * reads as magenta, never as a plausible wrong colour), and it was unreachable
+ * for every such string. Surrounding whitespace is still tolerated: a slot with
+ * a trailing space is a formatting slip, not a different colour.
+ */
+const PATTERN = (() => {
+    const NAME = String.raw `(\w+)`;
+    const SEPARATOR = String.raw `[\s,\/]`;
+    const VALUE = String.raw `([^\s,\/]+)`;
+    const SEPARATOR_THEN_VALUE = `(?:${SEPARATOR}+${VALUE})`;
+    return new RegExp(String.raw `^\s*
+      ${NAME}\(
+      ${SEPARATOR}*
+      ${VALUE}
+      ${SEPARATOR_THEN_VALUE}
+      ${SEPARATOR_THEN_VALUE}
+      ${SEPARATOR_THEN_VALUE}?
+      ${SEPARATOR_THEN_VALUE}?
+      ${SEPARATOR}*
+    \)\s*$`.replaceAll(/\s/g, ''));
+})();
+/**
+ * Parse CSS color
+ * @param color CSS color string: #xxx, #xxxxxx, #xxxxxxxx, rgb(), rgba(), hsl(), hsla(), color()
+ */
+export function parse(color) {
+    return color.charCodeAt(0) === HASH ? parseHex(color) : parseColor(color);
+}
+// The four legal hex forms. Validated up front rather than trusted, because
+// hexValue() maps any character to a number: '#zzzzzz' produced a plausible dark
+// grey and '#ff' opaque black, so parseCssColor's invalid-color sentinel was
+// unreachable for anything starting with '#'. Nibbles above 0xf also overflow
+// into the neighbouring channel once packed.
+const HEX = /^#(?:[\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i;
+/**
+ * Parse hexadecimal CSS color
+ * @param color Hex color string: #xxx, #xxxx, #xxxxxx, #xxxxxxxx
+ */
+export function parseHex(color) {
+    if (!HEX.test(color)) {
+        throw new Error(`Color.parse(): invalid CSS color: "${color}"`);
+    }
+    let r = 0x00;
+    let g = 0x00;
+    let b = 0x00;
+    let a = 0xff;
+    switch (color.length) {
+        // #59f
+        case 4: {
+            r = (hexValue(color.charCodeAt(1)) << 4) + hexValue(color.charCodeAt(1));
+            g = (hexValue(color.charCodeAt(2)) << 4) + hexValue(color.charCodeAt(2));
+            b = (hexValue(color.charCodeAt(3)) << 4) + hexValue(color.charCodeAt(3));
+            break;
+        }
+        // #59fa
+        case 5: {
+            r = (hexValue(color.charCodeAt(1)) << 4) + hexValue(color.charCodeAt(1));
+            g = (hexValue(color.charCodeAt(2)) << 4) + hexValue(color.charCodeAt(2));
+            b = (hexValue(color.charCodeAt(3)) << 4) + hexValue(color.charCodeAt(3));
+            a = (hexValue(color.charCodeAt(4)) << 4) + hexValue(color.charCodeAt(4));
+            break;
+        }
+        // #5599ff
+        case 7: {
+            r = (hexValue(color.charCodeAt(1)) << 4) + hexValue(color.charCodeAt(2));
+            g = (hexValue(color.charCodeAt(3)) << 4) + hexValue(color.charCodeAt(4));
+            b = (hexValue(color.charCodeAt(5)) << 4) + hexValue(color.charCodeAt(6));
+            break;
+        }
+        // #5599ff88
+        case 9: {
+            r = (hexValue(color.charCodeAt(1)) << 4) + hexValue(color.charCodeAt(2));
+            g = (hexValue(color.charCodeAt(3)) << 4) + hexValue(color.charCodeAt(4));
+            b = (hexValue(color.charCodeAt(5)) << 4) + hexValue(color.charCodeAt(6));
+            a = (hexValue(color.charCodeAt(7)) << 4) + hexValue(color.charCodeAt(8));
+            break;
+        }
+        default: {
+            break;
+        }
+    }
+    return newColor(r, g, b, a);
+}
+// https://lemire.me/blog/2019/04/17/parsing-short-hexadecimal-strings-efficiently/
+function hexValue(c) {
+    return (c & 0xf) + 9 * (c >> 6);
+}
+/**
+ * Parse CSS color
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+ * @param color CSS color string: rgb(), rgba(), hsl(), hsla(), color()
+ */
+export function parseColor(color) {
+    const match = PATTERN.exec(color);
+    if (match === null) {
+        throw new Error(`Color.parse(): invalid CSS color: "${color}"`);
+    }
+    const fmt = match[1];
+    const p1 = match[2];
+    const p2 = match[3];
+    const p3 = match[4];
+    const p4 = match[5];
+    const p5 = match[6];
+    switch (fmt) {
+        case 'rgb':
+        case 'rgba': {
+            const r = parseColorChannel(p1);
+            const g = parseColorChannel(p2);
+            const b = parseColorChannel(p3);
+            const a = p4 ? parseAlphaChannel(p4) : 255;
+            return newColor(r, g, b, a);
+        }
+        case 'hsl':
+        case 'hsla': {
+            const h = parseAngle(p1);
+            const s = parsePercentage(p2);
+            const l = parsePercentage(p3);
+            const a = p4 ? parseAlphaChannel(p4) : 255;
+            // https://stackoverflow.com/a/9493060/3112706
+            let r;
+            let g;
+            let b;
+            if (s === 0) {
+                r = g = b = Math.round(l * 255); // achromatic
+            }
+            else {
+                const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+                const p = 2 * l - q;
+                r = Math.round(hueToRGB(p, q, h + 1 / 3) * 255);
+                g = Math.round(hueToRGB(p, q, h) * 255);
+                b = Math.round(hueToRGB(p, q, h - 1 / 3) * 255);
+            }
+            return newColor(r, g, b, a);
+        }
+        case 'hwb': {
+            const h = parseAngle(p1);
+            const w = parsePercentage(p2);
+            const bl = parsePercentage(p3);
+            const a = p4 ? parseAlphaChannel(p4) : 255;
+            /* https://drafts.csswg.org/css-color/#hwb-to-rgb */
+            const s = 1;
+            const l = 0.5;
+            // Same as HSL to RGB
+            const q = l + s - l * s;
+            const p = 2 * l - q;
+            let r = Math.round(hueToRGB(p, q, h + 1 / 3) * 255);
+            let g = Math.round(hueToRGB(p, q, h) * 255);
+            let b = Math.round(hueToRGB(p, q, h - 1 / 3) * 255);
+            // Then HWB
+            r = hwbApply(r, w, bl);
+            g = hwbApply(g, w, bl);
+            b = hwbApply(b, w, bl);
+            return newColor(r, g, b, a);
+        }
+        case 'lab': {
+            const l = parsePercentageFor(p1, 100);
+            const aa = parsePercentageFor(p2, 125);
+            const b = parsePercentageFor(p3, 125);
+            const a = p4 ? parseAlphaChannel(p4) : 255;
+            return newColorFromArray(a, convert.xyzd50ToSrgb(...convert.labToXyzd50(l, aa, b)));
+        }
+        case 'lch': {
+            const l = parsePercentageFor(p1, 100);
+            const c = parsePercentageFor(p2, 150);
+            const h = parseAngle(p3) * 360;
+            const a = p4 ? parseAlphaChannel(p4) : 255;
+            return newColorFromArray(a, convert.xyzd50ToSrgb(...convert.labToXyzd50(...convert.lchToLab(l, c, h))));
+        }
+        case 'oklab': {
+            const l = parsePercentageFor(p1, 1);
+            const aa = parsePercentageFor(p2, 0.4);
+            const b = parsePercentageFor(p3, 0.4);
+            const a = p4 ? parseAlphaChannel(p4) : 255;
+            return newColorFromArray(a, convert.xyzd50ToSrgb(...convert.xyzd65ToD50(...convert.oklabToXyzd65(l, aa, b))));
+        }
+        case 'oklch': {
+            const l = parsePercentageOrValue(p1);
+            const c = parsePercentageOrValue(p2);
+            const h = parsePercentageOrValue(p3);
+            const a = p4 ? parseAlphaChannel(p4) : 255;
+            return newColorFromArray(a, convert.xyzd50ToSrgb(...convert.oklchToXyzd50(l, c, h)));
+        }
+        case 'color': {
+            // https://drafts.csswg.org/css-color-4/#color-function
+            const colorspace = p1;
+            const c1 = parsePercentageOrValue(p2);
+            const c2 = parsePercentageOrValue(p3);
+            const c3 = parsePercentageOrValue(p4);
+            const a = p5 ? parseAlphaChannel(p5) : 255;
+            switch (colorspace) {
+                // RGB color spaces
+                case 'srgb': {
+                    return newColorFromArray(a, [c1, c2, c3]);
+                }
+                case 'srgb-linear': {
+                    return newColorFromArray(a, convert.xyzd50ToSrgb(...convert.srgbLinearToXyzd50(c1, c2, c3)));
+                }
+                case 'display-p3': {
+                    return newColorFromArray(a, convert.xyzd50ToSrgb(...convert.displayP3ToXyzd50(c1, c2, c3)));
+                }
+                case 'a98-rgb': {
+                    return newColorFromArray(a, convert.xyzd50ToSrgb(...convert.adobeRGBToXyzd50(c1, c2, c3)));
+                }
+                case 'prophoto-rgb': {
+                    return newColorFromArray(a, convert.xyzd50ToSrgb(...convert.proPhotoToXyzd50(c1, c2, c3)));
+                }
+                case 'rec2020': {
+                    return newColorFromArray(a, convert.xyzd50ToSrgb(...convert.rec2020ToXyzd50(c1, c2, c3)));
+                }
+                // XYZ color spaces
+                case 'xyz':
+                case 'xyz-d65': {
+                    return newColorFromArray(a, convert.xyzd50ToSrgb(...convert.xyzd65ToD50(c1, c2, c3)));
+                }
+                case 'xyz-d50': {
+                    return newColorFromArray(a, convert.xyzd50ToSrgb(c1, c2, c3));
+                }
+                default:
+            }
+            break;
+        }
+        default:
+    }
+    throw new Error(`Color.parse(): invalid CSS color: "${color}"`);
+}
+/**
+ * Accepts: "50%", "128"
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb#values
+ * @returns a value in the 0 to 255 range
+ */
+function parseColorChannel(channel) {
+    if (channel.charCodeAt(channel.length - 1) === PERCENT) {
+        return Math.round((Number.parseFloat(channel) / 100) * 255);
+    }
+    return Math.round(Number.parseFloat(channel));
+}
+/**
+ * Accepts: "50%", ".5", "0.5"
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/alpha-value
+ * @returns a value in the [0, 255] range
+ */
+function parseAlphaChannel(channel) {
+    return Math.round(parseAlphaValue(channel) * 255);
+}
+/**
+ * Accepts: "50%", ".5", "0.5"
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/alpha-value
+ * @returns a value in the [0, 1] range
+ */
+function parseAlphaValue(channel) {
+    if (channel.charCodeAt(0) === N) {
+        return 0;
+    }
+    if (channel.charCodeAt(channel.length - 1) === PERCENT) {
+        return Number.parseFloat(channel) / 100;
+    }
+    return Number.parseFloat(channel);
+}
+/**
+ * Accepts: "360", "360deg", "400grad", "6.28rad", "1turn", "none"
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/angle
+ * @returns a value in the 0.0 to 1.0 range
+ */
+function parseAngle(angle) {
+    let factor;
+    switch (angle.charCodeAt(angle.length - 1)) {
+        case E: {
+            // 'none'
+            return 0;
+        }
+        case D: {
+            // 'rad', 'grad'
+            factor =
+                angle.charCodeAt(Math.max(0, angle.length - 4)) === G
+                    ? 400
+                    : 2 * Math.PI; // TAU
+            break;
+        }
+        case N: {
+            // 'turn'
+            factor = 1;
+            break;
+        }
+        // case G: // 'deg', but no need to check as it's also the default
+        default: {
+            factor = 360;
+        }
+    }
+    const turns = Number.parseFloat(angle) / factor;
+    // Hue is periodic, and every caller of this is a hue. `hueToRGB` corrects its
+    // argument by at most one turn, so it reads `hsl(-720deg)` as a hue two turns
+    // below the wheel rather than as red — folding here is what makes the three
+    // hue syntaxes agree with a browser past ±1 turn.
+    return turns - Math.floor(turns);
+}
+/**
+ * Accepts: "100%", "none"
+ * @returns a value in the 0.0 to 1.0 range
+ */
+function parsePercentage(value) {
+    if (value.charCodeAt(0) === N) {
+        return 0;
+    }
+    return Number.parseFloat(value) / 100;
+}
+/**
+ * Accepts: "1.0", "100%", "none"
+ * @returns a value in the 0.0 to 1.0 range
+ */
+function parsePercentageOrValue(value) {
+    if (value.charCodeAt(0) === N) {
+        return 0;
+    }
+    if (value.charCodeAt(value.length - 1) === PERCENT) {
+        return Number.parseFloat(value) / 100;
+    }
+    return Number.parseFloat(value);
+}
+/**
+ * Accepts: "100", "100%", "none"
+ * @returns a value in the -@range to @range range
+ */
+function parsePercentageFor(value, range) {
+    if (value.charCodeAt(0) === N) {
+        return 0;
+    }
+    if (value.charCodeAt(value.length - 1) === PERCENT) {
+        return (Number.parseFloat(value) / 100) * range;
+    }
+    return Number.parseFloat(value);
+}
+// HSL functions
+function hueToRGB(p, q, t) {
+    if (t < 0) {
+        t += 1;
+    }
+    if (t > 1) {
+        t -= 1;
+    }
+    if (t < 1 / 6) {
+        return p + (q - p) * 6 * t;
+    }
+    if (t < 1 / 2) {
+        return q;
+    }
+    if (t < 2 / 3) {
+        return p + (q - p) * (2 / 3 - t) * 6;
+    }
+    return p;
+}
+// HWB functions
+function hwbApply(channel, w, b) {
+    let result = channel / 255;
+    result *= 1 - w - b;
+    result += w;
+    return Math.round(result * 255);
+}
+function clamp(value) {
+    return Math.max(0, Math.min(255, value));
+}
+function newColorFromArray(a, rgb) {
+    const r = clamp(Math.round(rgb[0] * 255));
+    const g = clamp(Math.round(rgb[1] * 255));
+    const b = clamp(Math.round(rgb[2] * 255));
+    return newColor(r, g, b, a);
+}