@shortfuse/materialdesignweb 0.7.6 → 0.9.0

package/types/utils/material-color/utils/math.d.ts

@@ -0,0 +1,94 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Utility methods for mathematical operations.
+ */
+/**
+ * The signum function.
+ * @param {number} num
+ * @return {1|-1|0} 1 if num > 0, -1 if num < 0, and 0 if num = 0
+ */
+export function signum(num: number): 1 | -1 | 0;
+/**
+ * The linear interpolation function.
+ * @param {number} start
+ * @param {number} stop
+ * @param {number} amount
+ * @return {number} start if amount = 0 and stop if amount = 1
+ */
+export function lerp(start: number, stop: number, amount: number): number;
+/**
+ * Clamps an integer between two integers.
+ * @param {number} min
+ * @param {number} max
+ * @param {number} input
+ * @return {number} input when min <= input <= max, and either min or max
+ * otherwise.
+ */
+export function clampInt(min: number, max: number, input: number): number;
+/**
+ * Clamps an integer between two floating-point numbers.
+ * @param {number} min
+ * @param {number} max
+ * @param {number} input
+ * @return {number} input when min <= input <= max, and either min or max
+ * otherwise.
+ */
+export function clampDouble(min: number, max: number, input: number): number;
+/**
+ * Sanitizes a degree measure as an integer.
+ * @param {number} degrees
+ * @return {number} a degree measure between 0 (inclusive) and 360
+ * (exclusive).
+ */
+export function sanitizeDegreesInt(degrees: number): number;
+/**
+ * Sanitizes a degree measure as a floating-point number.
+ * @param {number} degrees
+ * @return {number} a degree measure between 0.0 (inclusive) and 360.0
+ * (exclusive).
+ */
+export function sanitizeDegreesDouble(degrees: number): number;
+/**
+ * Sign of direction change needed to travel from one angle to
+ * another.
+ *
+ * For angles that are 180 degrees apart from each other, both
+ * directions have the same travel distance, so either direction is
+ * shortest. The value 1.0 is returned in this case.
+ * @param {number} from The angle travel starts from, in degrees.
+ * @param {number} to The angle travel ends at, in degrees.
+ * @return {number} -1 if decreasing from leads to the shortest travel
+ * distance, 1 if increasing from leads to the shortest travel
+ * distance.
+ */
+export function rotationDirection(from: number, to: number): number;
+/**
+ * Distance of two points on a circle, represented using degrees.
+ * @param {number} a
+ * @param {number} b
+ * @return {number}
+ */
+export function differenceDegrees(a: number, b: number): number;
+/**
+ * Multiplies a 1x3 row vector with a 3x3 matrix.
+ * @param {number[]} row
+ * @param {number[][]} matrix
+ * @return {number[]}
+ */
+export function matrixMultiply(row: number[], matrix: number[][]): number[];
+//# sourceMappingURL=math.d.ts.map

package/types/utils/material-color/utils/math.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"math.d.ts","sourceRoot":"","sources":["../../../../utils/material-color/utils/math.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAIH;;GAEG;AAEH;;;;GAIG;AACH,4BAHW,MAAM,GACL,CAAC,GAAC,CAAC,CAAC,GAAC,CAAC,CAUjB;AAED;;;;;;GAMG;AACH,4BALW,MAAM,QACN,MAAM,UACN,MAAM,GACL,MAAM,CAIjB;AAED;;;;;;;GAOG;AACH,8BANW,MAAM,OACN,MAAM,SACN,MAAM,GACL,MAAM,CAWjB;AAED;;;;;;;GAOG;AACH,iCANW,MAAM,OACN,MAAM,SACN,MAAM,GACL,MAAM,CAWjB;AAED;;;;;GAKG;AACH,4CAJW,MAAM,GACL,MAAM,CASjB;AAED;;;;;GAKG;AACH,+CAJW,MAAM,GACL,MAAM,CASjB;AAED;;;;;;;;;;;;GAYG;AACH,wCANW,MAAM,MACN,MAAM,GACL,MAAM,CAOjB;AAED;;;;;GAKG;AACH,qCAJW,MAAM,KACN,MAAM,GACL,MAAM,CAIjB;AAED;;;;;GAKG;AACH,oCAJW,MAAM,EAAE,UACR,MAAM,EAAE,EAAE,GACT,MAAM,EAAE,CAOnB"}

package/types/utils/pixelmatch.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @param {Uint8Array|Uint8ClampedArray} img1
+ * @param {Uint8Array|Uint8ClampedArray} img2
+ * @param {Uint8Array|Uint8ClampedArray} output
+ * @param {number} width
+ * @param {number} height
+ * @param {typeof DEFAULT_OPTIONS} [options]
+ * @return {number}
+ */
+export function pixelmatch(img1: Uint8Array | Uint8ClampedArray, img2: Uint8Array | Uint8ClampedArray, output: Uint8Array | Uint8ClampedArray, width: number, height: number, options?: typeof DEFAULT_OPTIONS): number;
+type DEFAULT_OPTIONS = Object;
+declare namespace DEFAULT_OPTIONS {
+    let threshold: number;
+    let includeAA: boolean;
+    let alpha: number;
+    let aaColor: number[];
+    let diffColor: number[];
+    let diffColorAlt: Array<number>;
+    let diffMask: boolean;
+}
+export {};
+//# sourceMappingURL=pixelmatch.d.ts.map

package/types/utils/pixelmatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixelmatch.d.ts","sourceRoot":"","sources":["../../utils/pixelmatch.js"],"names":[],"mappings":"AA2RA;;;;;;;;GAQG;AACH,iCARW,UAAU,GAAC,iBAAiB,QAC5B,UAAU,GAAC,iBAAiB,UAC5B,UAAU,GAAC,iBAAiB,SAC5B,MAAM,UACN,MAAM,YACN,OAAO,eAAe,GACrB,MAAM,CAqEjB;uBAtVU,MAAM;;;;;;;sBAcL,KAAK,CAAC,MAAM,CAAC"}

package/types/utils/popup.d.ts

@@ -0,0 +1,106 @@
+/**
+ * @typedef {Object} DOMRectLike
+ * @prop {number} left
+ * @prop {number} right
+ * @prop {number} top
+ * @prop {number} bottom
+ * @prop {number} width
+ * @prop {number} height
+ */
+/**
+ * @typedef {Object} CanAnchorPopUpOptions
+ * @prop {Element|DOMRectLike} [anchor]
+ * @prop {number|'left'|'center'|'right'} [clientX]
+ * @prop {number|'top'|'center'|'bottom'} [clientY]
+ * @prop {number} [pageX]
+ * @prop {number} [pageY]
+ * @prop {Element|{width:number, height:number}} [popup]
+ * @prop {number} [width]
+ * @prop {number} [height]
+ * @prop {number} [offsetX] Offset from anchor
+ * @prop {number} [offsetY] Offset from anchor
+ * @prop {number} [margin] Margin from page
+ * @prop {'left'|'center'|'right'} [directionX='right']
+ * @prop {'up'|'center'|'down'} [directionY='down']
+ * @prop {boolean} [force=false]
+ */
+/** @param {CanAnchorPopUpOptions} options */
+export function canAnchorPopup(options: CanAnchorPopUpOptions): {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    visibility: number;
+    styles: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+        maxWidth: string;
+        maxHeight: string;
+        transformOrigin: string;
+    };
+    anchor?: Element | DOMRectLike;
+    clientX?: number | "left" | "center" | "right";
+    clientY?: number | "top" | "center" | "bottom";
+    pageX?: number;
+    pageY?: number;
+    popup?: Element | {
+        width: number;
+        height: number;
+    };
+    width?: number;
+    height?: number;
+    /**
+     * Offset from anchor
+     */
+    offsetX?: number;
+    /**
+     * Offset from anchor
+     */
+    offsetY?: number;
+    /**
+     * Margin from page
+     */
+    margin?: number;
+    directionX?: "left" | "center" | "right";
+    directionY?: "up" | "center" | "down";
+    force?: boolean;
+};
+export type DOMRectLike = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    width: number;
+    height: number;
+};
+export type CanAnchorPopUpOptions = {
+    anchor?: Element | DOMRectLike;
+    clientX?: number | "left" | "center" | "right";
+    clientY?: number | "top" | "center" | "bottom";
+    pageX?: number;
+    pageY?: number;
+    popup?: Element | {
+        width: number;
+        height: number;
+    };
+    width?: number;
+    height?: number;
+    /**
+     * Offset from anchor
+     */
+    offsetX?: number;
+    /**
+     * Offset from anchor
+     */
+    offsetY?: number;
+    /**
+     * Margin from page
+     */
+    margin?: number;
+    directionX?: "left" | "center" | "right";
+    directionY?: "up" | "center" | "down";
+    force?: boolean;
+};
+//# sourceMappingURL=popup.d.ts.map

package/types/utils/popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../utils/popup.js"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;;;;;;;;;;;;;;;GAgBG;AAEH,6CAA6C;AAC7C,wCADY,qBAAqB;;;;;;;;;;;;;;;aAhBvB,OAAO,GAAC,WAAW;cACnB,MAAM,GAAC,MAAM,GAAC,QAAQ,GAAC,OAAO;cAC9B,MAAM,GAAC,KAAK,GAAC,QAAQ,GAAC,QAAQ;YAC9B,MAAM;YACN,MAAM;YACN,OAAO,GAAC;QAAC,KAAK,EAAC,MAAM,CAAC;QAAC,MAAM,EAAC,MAAM,CAAA;KAAC;YACrC,MAAM;aACN,MAAM;;;;cACN,MAAM;;;;cACN,MAAM;;;;aACN,MAAM;iBACN,MAAM,GAAC,QAAQ,GAAC,OAAO;iBACvB,IAAI,GAAC,QAAQ,GAAC,MAAM;YACpB,OAAO;EA4LhB;;UAnNS,MAAM;WACN,MAAM;SACN,MAAM;YACN,MAAM;WACN,MAAM;YACN,MAAM;;;aAKN,OAAO,GAAC,WAAW;cACnB,MAAM,GAAC,MAAM,GAAC,QAAQ,GAAC,OAAO;cAC9B,MAAM,GAAC,KAAK,GAAC,QAAQ,GAAC,QAAQ;YAC9B,MAAM;YACN,MAAM;YACN,OAAO,GAAC;QAAC,KAAK,EAAC,MAAM,CAAC;QAAC,MAAM,EAAC,MAAM,CAAA;KAAC;YACrC,MAAM;aACN,MAAM;;;;cACN,MAAM;;;;cACN,MAAM;;;;aACN,MAAM;iBACN,MAAM,GAAC,QAAQ,GAAC,OAAO;iBACvB,IAAI,GAAC,QAAQ,GAAC,MAAM;YACpB,OAAO"}

package/types/utils/searchParams.d.ts

@@ -0,0 +1,3 @@
+/** @return {URLSearchParams} */
+export function getCurrentSearchParams(): URLSearchParams;
+//# sourceMappingURL=searchParams.d.ts.map

package/types/utils/searchParams.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchParams.d.ts","sourceRoot":"","sources":["../../utils/searchParams.js"],"names":[],"mappings":"AAGA,gCAAgC;AAChC,0CADa,eAAe,CAe3B"}

package/types/utils/svg.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Uses UTF-8 charset instead of base64 for better compression
+ * @param {string} svg
+ * @return {string}
+ */
+export function svgToCSSURL(svg: string): string;
+//# sourceMappingURL=svg.d.ts.map

package/types/utils/svg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg.d.ts","sourceRoot":"","sources":["../../utils/svg.js"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,iCAHW,MAAM,GACL,MAAM,CAQjB"}

package/utils/{hct → material-color}/blend.js

@@ -15,16 +15,14 @@
  * limitations under the License.
  */
 
-// libmonet is designed to have a consistent API across platforms
-// and modular components that can be moved around easily. Using a class as a
-// namespace facilitates this.
-//
-// tslint:disable:class-as-namespace
+import Cam16 from './hct/Cam16.js';
+import Hct from './hct/Hct.js';
+import * as colorUtils from './utils/color.js';
+import * as mathUtils from './utils/math.js';
 
-import Cam16 from './Cam16.js';
-import Hct from './Hct.js';
-import * as colorUtils from './colorUtils.js';
-import * as mathUtils from './mathUtils.js';
+/**
+ * Functions for blending in HCT and CAM16.
+ */
 
 /**
  * Blend the design color's HCT hue towards the key color's HCT
@@ -43,7 +41,7 @@ export function harmonize(designColor, sourceColor) {
   const rotationDegrees = Math.min(differenceDegrees * 0.5, 15);
   const outputHue = mathUtils.sanitizeDegreesDouble(
     fromHct.hue
-        + rotationDegrees * mathUtils.rotationDirection(fromHct.hue, toHct.hue),
+      + rotationDegrees * mathUtils.rotationDirection(fromHct.hue, toHct.hue),
   );
   return Hct.from(outputHue, fromHct.chroma, fromHct.tone).toInt();
 }

package/utils/{hct → material-color/hct}/Cam16.js

@@ -15,9 +15,10 @@
  * limitations under the License.
  */
 
+import * as utils from '../utils/color.js';
+import * as math from '../utils/math.js';
+
 import ViewingConditions from './ViewingConditions.js';
-import * as utils from './colorUtils.js';
-import * as math from './mathUtils.js';
 
 /**
  * CAM16, a color appearance model. Colors are not just defined by their hex
@@ -37,62 +38,6 @@ import * as math from './mathUtils.js';
  * hue 203, chroma 3, lightness 100)
  */
 export default class Cam16 {
-  /**
-   * All of the CAM16 dimensions can be calculated from 3 of the dimensions, in
-   * the following combinations:
-   *      -  {j or q} and {c, m, or s} and hue
-   *      - jstar, astar, bstar
-   * Prefer using a static method that constructs from 3 of those dimensions.
-   * This constructor is intended for those methods to use to return all
-   * possible dimensions.
-   * @param {number} hue
-   * @param {number} chroma informally, colorfulness / color intensity. like saturation
-   *     in HSL, except perceptually accurate.
-   * @param {number} j lightness
-   * @param {number} q brightness; ratio of lightness to white point's lightness
-   * @param {number} m colorfulness
-   * @param {number} s saturation; ratio of chroma to white point's chroma
-   * @param {number} jstar CAM16-UCS J coordinate
-   * @param {number} astar CAM16-UCS a coordinate
-   * @param {number} bstar CAM16-UCS b coordinate
-   */
-  constructor(hue, chroma, j, q, m, s, jstar, astar, bstar) {
-    /** @readonly */
-    this.hue = hue;
-    /** @readonly */
-    this.chroma = chroma;
-    /** @readonly */
-    this.j = j;
-    /** @readonly */
-    this.q = q;
-    /** @readonly */
-    this.m = m;
-    /** @readonly */
-    this.s = s;
-    /** @readonly */
-    this.jstar = jstar;
-    /** @readonly */
-    this.astar = astar;
-    /** @readonly */
-    this.bstar = bstar;
-  }
-
-  /**
-   * CAM16 instances also have coordinates in the CAM16-UCS space, called J*,
-   * a*, b*, or jstar, astar, bstar in code. CAM16-UCS is included in the CAM16
-   * specification, and is used to measure distances between colors.
-   * @param {Cam16} other
-   * @return {number}
-   */
-  distance(other) {
-    const dJ = this.jstar - other.jstar;
-    const dA = this.astar - other.astar;
-    const dB = this.bstar - other.bstar;
-    const dEPrime = Math.sqrt(dJ * dJ + dA * dA + dB * dB);
-    const dE = 1.41 * dEPrime ** 0.63;
-    return dE;
-  }
-
   /**
    * @param {number} argb ARGB representation of a color.
    * @return {Cam16} CAM16 color, assuming the color was viewed in default viewing
@@ -148,19 +93,19 @@ export default class Cam16 {
 
     const ac = p2 * viewingConditions.nbb;
     const j = 100
-         * (ac / viewingConditions.aw) ** (viewingConditions.c * viewingConditions.z);
+        * (ac / viewingConditions.aw) ** (viewingConditions.c * viewingConditions.z);
     const q = (4 / viewingConditions.c) * Math.sqrt(j / 100)
-         * (viewingConditions.aw + 4) * viewingConditions.fLRoot;
+        * (viewingConditions.aw + 4) * viewingConditions.fLRoot;
     const huePrime = hue < 20.14 ? hue + 360 : hue;
     const eHue = 0.25 * (Math.cos((huePrime * Math.PI) / 180 + 2) + 3.8);
     const p1 = (50_000 / 13) * eHue * viewingConditions.nc * viewingConditions.ncb;
     const t = (p1 * Math.sqrt(a * a + b * b)) / (u + 0.305);
     const alpha = t ** 0.9
-         * (1.64 - 0.29 ** viewingConditions.n) ** 0.73;
+        * (1.64 - 0.29 ** viewingConditions.n) ** 0.73;
     const c = alpha * Math.sqrt(j / 100);
     const m = c * viewingConditions.fLRoot;
     const s = 50
-         * Math.sqrt((alpha * viewingConditions.c) / (viewingConditions.aw + 4));
+        * Math.sqrt((alpha * viewingConditions.c) / (viewingConditions.aw + 4));
     const jstar = ((1 + 100 * 0.007) * j) / (1 + 0.007 * j);
     const mstar = (1 / 0.0228) * Math.log(1 + 0.0228 * m);
     const astar = mstar * Math.cos(hueRadians);
@@ -188,11 +133,11 @@ export default class Cam16 {
    */
   static fromJchInViewingConditions(j, c, h, viewingConditions) {
     const q = (4 / viewingConditions.c) * Math.sqrt(j / 100)
-         * (viewingConditions.aw + 4) * viewingConditions.fLRoot;
+        * (viewingConditions.aw + 4) * viewingConditions.fLRoot;
     const m = c * viewingConditions.fLRoot;
     const alpha = c / Math.sqrt(j / 100);
     const s = 50
-         * Math.sqrt((alpha * viewingConditions.c) / (viewingConditions.aw + 4));
+        * Math.sqrt((alpha * viewingConditions.c) / (viewingConditions.aw + 4));
     const hueRadians = (h * Math.PI) / 180;
     const jstar = ((1 + 100 * 0.007) * j) / (1 + 0.007 * j);
     const mstar = (1 / 0.0228) * Math.log(1 + 0.0228 * m);
@@ -236,6 +181,137 @@ export default class Cam16 {
     return Cam16.fromJchInViewingConditions(j, c, h, viewingConditions);
   }
 
+  /**
+   * Given color expressed in XYZ and viewed in [viewingConditions], convert to
+   * CAM16.
+   * @param {number} x
+   * @param {number} y
+   * @param {number} z
+   * @param {ViewingConditions} viewingConditions
+   * @return {Cam16}
+   */
+  static fromXyzInViewingConditions(x, y, z, viewingConditions) {
+    // Transform XYZ to 'cone'/'rgb' responses
+
+    const rC = 0.401_288 * x + 0.650_173 * y - 0.051_461 * z;
+    const gC = -0.250_268 * x + 1.204_414 * y + 0.045_854 * z;
+    const bC = -0.002_079 * x + 0.048_952 * y + 0.953_127 * z;
+
+    // Discount illuminant
+    const rD = viewingConditions.rgbD[0] * rC;
+    const gD = viewingConditions.rgbD[1] * gC;
+    const bD = viewingConditions.rgbD[2] * bC;
+
+    // chromatic adaptation
+    const rAF = ((viewingConditions.fl * Math.abs(rD)) / 100) ** 0.42;
+    const gAF = ((viewingConditions.fl * Math.abs(gD)) / 100) ** 0.42;
+    const bAF = ((viewingConditions.fl * Math.abs(bD)) / 100) ** 0.42;
+    const rA = (math.signum(rD) * 400 * rAF) / (rAF + 27.13);
+    const gA = (math.signum(gD) * 400 * gAF) / (gAF + 27.13);
+    const bA = (math.signum(bD) * 400 * bAF) / (bAF + 27.13);
+
+    // redness-greenness
+    const a = (11 * rA + -12 * gA + bA) / 11;
+    // yellowness-blueness
+    const b = (rA + gA - 2 * bA) / 9;
+
+    // auxiliary components
+    const u = (20 * rA + 20 * gA + 21 * bA) / 20;
+    const p2 = (40 * rA + 20 * gA + bA) / 20;
+
+    // hue
+    const atan2 = Math.atan2(b, a);
+    const atanDegrees = (atan2 * 180) / Math.PI;
+    const hue = atanDegrees < 0 ? atanDegrees + 360
+      : (atanDegrees >= 360 ? atanDegrees - 360
+        : atanDegrees);
+    const hueRadians = (hue * Math.PI) / 180;
+
+    // achromatic response to color
+    const ac = p2 * viewingConditions.nbb;
+
+    // CAM16 lightness and brightness
+    const J = 100
+        * (ac / viewingConditions.aw) ** (viewingConditions.c * viewingConditions.z);
+    const Q = (4 / viewingConditions.c) * Math.sqrt(J / 100)
+        * (viewingConditions.aw + 4) * (viewingConditions.fLRoot);
+
+    const huePrime = (hue < 20.14) ? hue + 360 : hue;
+    const eHue = (1 / 4) * (Math.cos((huePrime * Math.PI) / 180 + 2) + 3.8);
+    const p1 = (50_000 / 13) * eHue * viewingConditions.nc * viewingConditions.ncb;
+    const t = (p1 * Math.sqrt(a * a + b * b)) / (u + 0.305);
+    const alpha = t ** 0.9
+        * (1.64 - 0.29 ** viewingConditions.n) ** 0.73;
+    // CAM16 chroma, colorfulness, chroma
+    const C = alpha * Math.sqrt(J / 100);
+    const M = C * viewingConditions.fLRoot;
+    const s = 50
+        * Math.sqrt((alpha * viewingConditions.c) / (viewingConditions.aw + 4));
+
+    // CAM16-UCS components
+    const jstar = ((1 + 100 * 0.007) * J) / (1 + 0.007 * J);
+    const mstar = Math.log(1 + 0.0228 * M) / 0.0228;
+    const astar = mstar * Math.cos(hueRadians);
+    const bstar = mstar * Math.sin(hueRadians);
+    return new Cam16(hue, C, J, Q, M, s, jstar, astar, bstar);
+  }
+
+  /**
+   * All of the CAM16 dimensions can be calculated from 3 of the dimensions, in
+   * the following combinations:
+   *      -  {j or q} and {c, m, or s} and hue
+   *      - jstar, astar, bstar
+   * Prefer using a static method that constructs from 3 of those dimensions.
+   * This constructor is intended for those methods to use to return all
+   * possible dimensions.
+   * @param {number} hue
+   * @param {number} chroma informally, colorfulness / color intensity. like saturation
+   *     in HSL, except perceptually accurate.
+   * @param {number} j lightness
+   * @param {number} q brightness; ratio of lightness to white point's lightness
+   * @param {number} m colorfulness
+   * @param {number} s saturation; ratio of chroma to white point's chroma
+   * @param {number} jstar CAM16-UCS J coordinate
+   * @param {number} astar CAM16-UCS a coordinate
+   * @param {number} bstar CAM16-UCS b coordinate
+   */
+  constructor(hue, chroma, j, q, m, s, jstar, astar, bstar) {
+    /** @readonly */
+    this.hue = hue;
+    /** @readonly */
+    this.chroma = chroma;
+    /** @readonly */
+    this.j = j;
+    /** @readonly */
+    this.q = q;
+    /** @readonly */
+    this.m = m;
+    /** @readonly */
+    this.s = s;
+    /** @readonly */
+    this.jstar = jstar;
+    /** @readonly */
+    this.astar = astar;
+    /** @readonly */
+    this.bstar = bstar;
+  }
+
+  /**
+   * CAM16 instances also have coordinates in the CAM16-UCS space, called J*,
+   * a*, b*, or jstar, astar, bstar in code. CAM16-UCS is included in the CAM16
+   * specification, and is used to measure distances between colors.
+   * @param {Cam16} other
+   * @return {number}
+   */
+  distance(other) {
+    const dJ = this.jstar - other.jstar;
+    const dA = this.astar - other.astar;
+    const dB = this.bstar - other.bstar;
+    const dEPrime = Math.sqrt(dJ * dJ + dA * dA + dB * dB);
+    const dE = 1.41 * dEPrime ** 0.63;
+    return dE;
+  }
+
   /**
    *  @return {number} ARGB representation of color, assuming the color was viewed in
    *     default viewing conditions, which are near-identical to the default
@@ -260,7 +336,7 @@ export default class Cam16 {
 
     const eHue = 0.25 * (Math.cos(hRad + 2) + 3.8);
     const ac = viewingConditions.aw
-         * (this.j / 100) ** (1 / viewingConditions.c / viewingConditions.z);
+        * (this.j / 100) ** (1 / viewingConditions.c / viewingConditions.z);
     const p1 = eHue * (50_000 / 13) * viewingConditions.nc * viewingConditions.ncb;
     const p2 = ac / viewingConditions.nbb;
 
@@ -268,7 +344,7 @@ export default class Cam16 {
     const hCos = Math.cos(hRad);
 
     const gamma = (23 * (p2 + 0.305) * t)
-         / (23 * p1 + 11 * t * hCos + 108 * t * hSin);
+        / (23 * p1 + 11 * t * hCos + 108 * t * hSin);
     const a = gamma * hCos;
     const b = gamma * hSin;
     const rA = (460 * p2 + 451 * a + 288 * b) / 1403;
@@ -277,13 +353,13 @@ export default class Cam16 {
 
     const rCBase = Math.max(0, (27.13 * Math.abs(rA)) / (400 - Math.abs(rA)));
     const rC = math.signum(rA) * (100 / viewingConditions.fl)
-         * rCBase ** (1 / 0.42);
+        * rCBase ** (1 / 0.42);
     const gCBase = Math.max(0, (27.13 * Math.abs(gA)) / (400 - Math.abs(gA)));
     const gC = math.signum(gA) * (100 / viewingConditions.fl)
-         * gCBase ** (1 / 0.42);
+        * gCBase ** (1 / 0.42);
     const bCBase = Math.max(0, (27.13 * Math.abs(bA)) / (400 - Math.abs(bA)));
     const bC = math.signum(bA) * (100 / viewingConditions.fl)
-         * bCBase ** (1 / 0.42);
+        * bCBase ** (1 / 0.42);
     const rF = rC / viewingConditions.rgbD[0];
     const gF = gC / viewingConditions.rgbD[1];
     const bF = bC / viewingConditions.rgbD[2];
@@ -295,4 +371,55 @@ export default class Cam16 {
     const argb = utils.argbFromXyz(x, y, z);
     return argb;
   }
+
+  /**
+   * XYZ representation of CAM16 seen in [viewingConditions].
+   * @param {ViewingConditions} viewingConditions
+   * @return {number[]}
+   */
+  xyzInViewingConditions(viewingConditions) {
+    const alpha = (this.chroma === 0 || this.j === 0)
+      ? 0
+      : this.chroma / Math.sqrt(this.j / 100);
+
+    const t = (alpha / (1.64 - 0.29 ** viewingConditions.n) ** 0.73) ** (1 / 0.9);
+    const hRad = (this.hue * Math.PI) / 180;
+
+    const eHue = 0.25 * (Math.cos(hRad + 2) + 3.8);
+    const ac = viewingConditions.aw
+        * (this.j / 100) ** (1 / viewingConditions.c / viewingConditions.z);
+    const p1 = eHue * (50_000 / 13) * viewingConditions.nc * viewingConditions.ncb;
+
+    const p2 = (ac / viewingConditions.nbb);
+
+    const hSin = Math.sin(hRad);
+    const hCos = Math.cos(hRad);
+
+    const gamma = (23 * (p2 + 0.305) * t)
+        / (23 * p1 + 11 * t * hCos + 108 * t * hSin);
+    const a = gamma * hCos;
+    const b = gamma * hSin;
+    const rA = (460 * p2 + 451 * a + 288 * b) / 1403;
+    const gA = (460 * p2 - 891 * a - 261 * b) / 1403;
+    const bA = (460 * p2 - 220 * a - 6300 * b) / 1403;
+
+    const rCBase = Math.max(0, (27.13 * Math.abs(rA)) / (400 - Math.abs(rA)));
+    const rC = math.signum(rA) * (100 / viewingConditions.fl)
+        * rCBase ** (1 / 0.42);
+    const gCBase = Math.max(0, (27.13 * Math.abs(gA)) / (400 - Math.abs(gA)));
+    const gC = math.signum(gA) * (100 / viewingConditions.fl)
+        * gCBase ** (1 / 0.42);
+    const bCBase = Math.max(0, (27.13 * Math.abs(bA)) / (400 - Math.abs(bA)));
+    const bC = math.signum(bA) * (100 / viewingConditions.fl)
+        * bCBase ** (1 / 0.42);
+    const rF = rC / viewingConditions.rgbD[0];
+    const gF = gC / viewingConditions.rgbD[1];
+    const bF = bC / viewingConditions.rgbD[2];
+
+    const x = 1.862_067_86 * rF - 1.011_254_63 * gF + 0.149_186_77 * bF;
+    const y = 0.387_526_54 * rF + 0.621_447_44 * gF - 0.008_973_98 * bF;
+    const z = -0.015_841_5 * rF - 0.034_122_94 * gF + 1.049_964_44 * bF;
+
+    return [x, y, z];
+  }
 }