@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/utils/hct/ViewingConditions.js

@@ -0,0 +1,136 @@
+/**
+ * @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.
+ */
+
+import * as utils from './colorUtils.js';
+import * as math from './mathUtils.js';
+
+/**
+ * In traditional color spaces, a color can be identified solely by the
+ * observer's measurement of the color. Color appearance models such as CAM16
+ * also use information about the environment where the color was
+ * observed, known as the viewing conditions.
+ *
+ * For example, white under the traditional assumption of a midday sun white
+ * point is accurately measured as a slightly chromatic blue by CAM16. (roughly,
+ * hue 203, chroma 3, lightness 100)
+ *
+ * This class caches intermediate values of the CAM16 conversion process that
+ * depend only on viewing conditions, enabling speed ups.
+ */
+export default class ViewingConditions {
+  /** sRGB-like viewing conditions.  */
+  static DEFAULT = ViewingConditions.make();
+
+  /**
+   * Create ViewingConditions from a simple, physically relevant, set of
+   * parameters.
+   * @param whitePoint White point, measured in the XYZ color space.
+   *     default = D65, or sunny day afternoon
+   * @param {number} adaptingLuminance The luminance of the adapting field. Informally,
+   *     how bright it is in the room where the color is viewed. Can be
+   *     calculated from lux by multiplying lux by 0.0586. default = 11.72,
+   *     or 200 lux.
+   * @param {number} backgroundLstar The lightness of the area surrounding the color.
+   *     measured by L* in L*a*b*. default = 50.0
+   * @param {number} surround A general description of the lighting surrounding the
+   *     color. 0 is pitch dark, like watching a movie in a theater. 1.0 is a
+   *     dimly light room, like watching TV at home at night. 2.0 means there
+   *     is no difference between the lighting on the color and around it.
+   *     default = 2.0
+   * @param {boolean} discountingIlluminant Whether the eye accounts for the tint of the
+   *     ambient lighting, such as knowing an apple is still red in green light.
+   *     default = false, the eye does not perform this process on
+   *       self-luminous objects like displays.
+   * @return {ViewingConditions}
+   */
+  static make(
+    whitePoint = utils.whitePointD65(),
+    adaptingLuminance = ((200 / Math.PI) * utils.yFromLstar(50)) / 100,
+    backgroundLstar = 50,
+    surround = 2,
+    discountingIlluminant = false,
+  ) {
+    const xyz = whitePoint;
+    const rW = xyz[0] * 0.401_288 + xyz[1] * 0.650_173 + xyz[2] * -0.051_461;
+    const gW = xyz[0] * -0.250_268 + xyz[1] * 1.204_414 + xyz[2] * 0.045_854;
+    const bW = xyz[0] * -0.002_079 + xyz[1] * 0.048_952 + xyz[2] * 0.953_127;
+    const f = 0.8 + surround / 10;
+    const c = f >= 0.9 ? math.lerp(0.59, 0.69, (f - 0.9) * 10)
+      : math.lerp(0.525, 0.59, (f - 0.8) * 10);
+    let d = discountingIlluminant
+      ? 1
+      : f * (1 - (1 / 3.6) * Math.exp((-adaptingLuminance - 42) / 92));
+    d = d > 1 ? 1 : (d < 0 ? 0 : d);
+    const nc = f;
+    const rgbD = [
+      d * (100 / rW) + 1 - d,
+      d * (100 / gW) + 1 - d,
+      d * (100 / bW) + 1 - d,
+    ];
+    const k = 1 / (5 * adaptingLuminance + 1);
+    const k4 = k * k * k * k;
+    const k4F = 1 - k4;
+    const fl = k4 * adaptingLuminance
+         + 0.1 * k4F * k4F * Math.cbrt(5 * adaptingLuminance);
+    const n = utils.yFromLstar(backgroundLstar) / whitePoint[1];
+    const z = 1.48 + Math.sqrt(n);
+    const nbb = 0.725 / n ** 0.2;
+    const ncb = nbb;
+    const rgbAFactors = [
+      ((fl * rgbD[0] * rW) / 100) ** 0.42,
+      ((fl * rgbD[1] * gW) / 100) ** 0.42,
+      ((fl * rgbD[2] * bW) / 100) ** 0.42,
+    ];
+    const rgbA = [
+      (400 * rgbAFactors[0]) / (rgbAFactors[0] + 27.13),
+      (400 * rgbAFactors[1]) / (rgbAFactors[1] + 27.13),
+      (400 * rgbAFactors[2]) / (rgbAFactors[2] + 27.13),
+    ];
+    const aw = (2 * rgbA[0] + rgbA[1] + 0.05 * rgbA[2]) * nbb;
+    return new ViewingConditions(n, aw, nbb, ncb, c, nc, rgbD, fl, fl ** 0.25, z);
+  }
+
+  /**
+   * Parameters are intermediate values of the CAM16 conversion process. Their
+   * names are shorthand for technical color science terminology, this class
+   * would not benefit from documenting them individually. A brief overview
+   * is available in the CAM16 specification, and a complete overview requires
+   * a color science textbook, such as Fairchild's Color Appearance Models.
+   * @param {number} n
+   * @param {number} aw
+   * @param {number} nbb
+   * @param {number} ncb
+   * @param {number} c
+   * @param {number} nc
+   * @param {number[]} rgbD
+   * @param {number} fl
+   * @param {number} fLRoot
+   * @param {number} z
+   */
+  constructor(n, aw, nbb, ncb, c, nc, rgbD, fl, fLRoot, z) {
+    this.n = n;
+    this.aw = aw;
+    this.nbb = nbb;
+    this.ncb = ncb;
+    this.c = c;
+    this.nc = nc;
+    this.rgbD = rgbD;
+    this.fl = fl;
+    this.fLRoot = fLRoot;
+    this.z = z;
+  }
+}

package/utils/hct/blend.js

@@ -0,0 +1,93 @@
+/**
+ * @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.
+ */
+
+// 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 './Cam16.js';
+import Hct from './Hct.js';
+import * as colorUtils from './colorUtils.js';
+import * as mathUtils from './mathUtils.js';
+
+/**
+ * Blend the design color's HCT hue towards the key color's HCT
+ * hue, in a way that leaves the original color recognizable and
+ * recognizably shifted towards the key color.
+ * @param {number} designColor ARGB representation of an arbitrary color.
+ * @param {number} sourceColor ARGB representation of the main theme color.
+ * @return {number} The design color with a hue shifted towards the
+ * system's color, a slightly warmer/cooler variant of the design
+ * color's hue.
+ */
+export function harmonize(designColor, sourceColor) {
+  const fromHct = Hct.fromInt(designColor);
+  const toHct = Hct.fromInt(sourceColor);
+  const differenceDegrees = mathUtils.differenceDegrees(fromHct.hue, toHct.hue);
+  const rotationDegrees = Math.min(differenceDegrees * 0.5, 15);
+  const outputHue = mathUtils.sanitizeDegreesDouble(
+    fromHct.hue
+        + rotationDegrees * mathUtils.rotationDirection(fromHct.hue, toHct.hue),
+  );
+  return Hct.from(outputHue, fromHct.chroma, fromHct.tone).toInt();
+}
+
+/**
+ * Blend in CAM16-UCS space.
+ * @param {number} from ARGB representation of color
+ * @param {number} to ARGB representation of color
+ * @param {number} amount how much blending to perform; 0.0 >= and <= 1.0
+ * @return {number} from, blended towards to. Hue, chroma, and tone will
+ * change.
+ */
+export function cam16Ucs(from, to, amount) {
+  const fromCam = Cam16.fromInt(from);
+  const toCam = Cam16.fromInt(to);
+  const fromJ = fromCam.jstar;
+  const fromA = fromCam.astar;
+  const fromB = fromCam.bstar;
+  const toJ = toCam.jstar;
+  const toA = toCam.astar;
+  const toB = toCam.bstar;
+  const jstar = fromJ + (toJ - fromJ) * amount;
+  const astar = fromA + (toA - fromA) * amount;
+  const bstar = fromB + (toB - fromB) * amount;
+  return Cam16.fromUcs(jstar, astar, bstar).toInt();
+}
+
+/**
+ * Blends hue from one color into another. The chroma and tone of
+ * the original color are maintained.
+ * @param {number} from ARGB representation of color
+ * @param {number} to ARGB representation of color
+ * @param {number} amount how much blending to perform; 0.0 >= and <= 1.0
+ * @return {number} from, with a hue blended towards to. Chroma and tone
+ * are constant.
+ */
+export function hctHue(from, to, amount) {
+  const ucs = cam16Ucs(from, to, amount);
+  const ucsCam = Cam16.fromInt(ucs);
+  const fromCam = Cam16.fromInt(from);
+  const blended = Hct.from(
+    ucsCam.hue,
+    fromCam.chroma,
+    colorUtils.lstarFromArgb(from),
+  );
+  return blended.toInt();
+}

package/utils/hct/colorUtils.js

@@ -0,0 +1,302 @@
+/**
+ * @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.
+ */
+
+// This file is automatically generated. Do not modify it.
+
+import * as mathUtils from './mathUtils.js';
+
+/**
+ * Color science utilities.
+ *
+ * Utility methods for color science constants and color space
+ * conversions that aren't HCT or CAM16.
+ */
+
+const SRGB_TO_XYZ = [
+  [0.412_338_95, 0.357_620_64, 0.180_510_42],
+  [0.2126, 0.7152, 0.0722],
+  [0.019_321_41, 0.119_163_82, 0.950_344_78],
+];
+
+const XYZ_TO_SRGB = [
+  [
+    3.241_377_479_238_868_5,
+    -1.537_665_240_285_185_1,
+    -0.498_853_668_462_680_53,
+  ],
+  [
+    -0.969_145_251_300_532_1,
+    1.875_885_345_106_787_2,
+    0.041_565_856_169_120_61,
+  ],
+  [
+    0.055_620_936_896_913_05,
+    -0.203_955_245_647_421_23,
+    1.057_179_911_122_033_5,
+  ],
+];
+
+const WHITE_POINT_D65 = [95.047, 100, 108.883];
+
+/**
+ * Converts a color from RGB components to ARGB format.
+ * @param {number} red
+ * @param {number} green
+ * @param {number} blue
+ * @return {number}
+ */
+export function argbFromRgb(red, green, blue) {
+  return (255 << 24 | (red & 255) << 16 | (green & 255) << 8 | blue & 255)
+      >>> 0;
+}
+
+/**
+ * Converts a color from linear RGB components to ARGB format.
+ * @param {number[]} linrgb
+ * @return {number}
+ */
+export function argbFromLinrgb(linrgb) {
+  const r = delinearized(linrgb[0]);
+  const g = delinearized(linrgb[1]);
+  const b = delinearized(linrgb[2]);
+  return argbFromRgb(r, g, b);
+}
+
+/**
+ * Returns the alpha component of a color in ARGB format.
+ * @param {number} argb
+ * @return {number}
+ */
+export function alphaFromArgb(argb) {
+  return argb >> 24 & 255;
+}
+
+/**
+ * Returns the red component of a color in ARGB format.
+ * @param {number} argb
+ * @return {number}
+ */
+export function redFromArgb(argb) {
+  return argb >> 16 & 255;
+}
+
+/**
+ * Returns the green component of a color in ARGB format.
+ * @param {number} argb
+ * @return {number}
+ */
+export function greenFromArgb(argb) {
+  return argb >> 8 & 255;
+}
+
+/**
+ * Returns the blue component of a color in ARGB format.
+ * @param {number} argb
+ * @return {number}
+ */
+export function blueFromArgb(argb) {
+  return argb & 255;
+}
+
+/**
+ * Returns whether a color in ARGB format is opaque.
+ * @param {number} argb
+ * @return {boolean}
+ */
+export function isOpaque(argb) {
+  return alphaFromArgb(argb) >= 255;
+}
+
+/**
+ * Converts a color from ARGB to XYZ.
+ * @param {number} x
+ * @param {number} y
+ * @param {number} z
+ * @return {number}
+ */
+export function argbFromXyz(x, y, z) {
+  const matrix = XYZ_TO_SRGB;
+  const linearR = matrix[0][0] * x + matrix[0][1] * y + matrix[0][2] * z;
+  const linearG = matrix[1][0] * x + matrix[1][1] * y + matrix[1][2] * z;
+  const linearB = matrix[2][0] * x + matrix[2][1] * y + matrix[2][2] * z;
+  const r = delinearized(linearR);
+  const g = delinearized(linearG);
+  const b = delinearized(linearB);
+  return argbFromRgb(r, g, b);
+}
+
+/**
+ * Converts a color from XYZ to ARGB.
+ * @param {number} argb
+ * @return {number[]}
+ */
+export function xyzFromArgb(argb) {
+  const r = linearized(redFromArgb(argb));
+  const g = linearized(greenFromArgb(argb));
+  const b = linearized(blueFromArgb(argb));
+  return mathUtils.matrixMultiply([r, g, b], SRGB_TO_XYZ);
+}
+
+/**
+ * Converts a color represented in Lab color space into an ARGB
+ * integer.
+ * @param {number} l
+ * @param {number} a
+ * @param {number} b
+ * @return {number}
+ */
+export function argbFromLab(l, a, b) {
+  const whitePoint = WHITE_POINT_D65;
+  const fy = (l + 16) / 116;
+  const fx = a / 500 + fy;
+  const fz = fy - b / 200;
+  const xNormalized = labInvf(fx);
+  const yNormalized = labInvf(fy);
+  const zNormalized = labInvf(fz);
+  const x = xNormalized * whitePoint[0];
+  const y = yNormalized * whitePoint[1];
+  const z = zNormalized * whitePoint[2];
+  return argbFromXyz(x, y, z);
+}
+
+/**
+ * Converts a color from ARGB representation to L*a*b*
+ * representation.
+ * @param {number} argb the ARGB representation of a color
+ * @return {number[]} a Lab object representing the color
+ */
+export function labFromArgb(argb) {
+  const linearR = linearized(redFromArgb(argb));
+  const linearG = linearized(greenFromArgb(argb));
+  const linearB = linearized(blueFromArgb(argb));
+  const matrix = SRGB_TO_XYZ;
+  const x = matrix[0][0] * linearR + matrix[0][1] * linearG + matrix[0][2] * linearB;
+  const y = matrix[1][0] * linearR + matrix[1][1] * linearG + matrix[1][2] * linearB;
+  const z = matrix[2][0] * linearR + matrix[2][1] * linearG + matrix[2][2] * linearB;
+  const whitePoint = WHITE_POINT_D65;
+  const xNormalized = x / whitePoint[0];
+  const yNormalized = y / whitePoint[1];
+  const zNormalized = z / whitePoint[2];
+  const fx = labF(xNormalized);
+  const fy = labF(yNormalized);
+  const fz = labF(zNormalized);
+  const l = 116 * fy - 16;
+  const a = 500 * (fx - fy);
+  const b = 200 * (fy - fz);
+  return [l, a, b];
+}
+
+/**
+ * Converts an L* value to an ARGB representation.
+ * @param {number} lstar L* in L*a*b*
+ * @return {number} ARGB representation of grayscale color with lightness
+ * matching L*
+ */
+export function argbFromLstar(lstar) {
+  const y = yFromLstar(lstar);
+  const component = delinearized(y);
+  return argbFromRgb(component, component, component);
+}
+
+/**
+ * Computes the L* value of a color in ARGB representation.
+ * @param {number} argb ARGB representation of a color
+ * @return {number} L*, from L*a*b*, coordinate of the color
+ */
+export function lstarFromArgb(argb) {
+  const y = xyzFromArgb(argb)[1];
+  return 116 * labF(y / 100) - 16;
+}
+
+/**
+ * Converts an L* value to a Y value.
+ *
+ * L* in L*a*b* and Y in XYZ measure the same quantity, luminance.
+ *
+ * L* measures perceptual luminance, a linear scale. Y in XYZ
+ * measures relative luminance, a logarithmic scale.
+ * @param {number} lstar L* in L*a*b*
+ * @return {number} Y in XYZ
+ */
+export function yFromLstar(lstar) {
+  return 100 * labInvf((lstar + 16) / 116);
+}
+
+/**
+ * Linearizes an RGB component.
+ * @param {number} rgbComponent 0 <= rgb_component <= 255, represents R/G/B
+ * channel
+ * @return {number} 0.0 <= output <= 100.0, color channel converted to
+ * linear RGB space
+ */
+export function linearized(rgbComponent) {
+  const normalized = rgbComponent / 255;
+  if (normalized <= 0.040_449_936) {
+    return (normalized / 12.92) * 100;
+  }
+  return ((normalized + 0.055) / 1.055) ** 2.4 * 100;
+}
+
+/**
+ * Delinearizes an RGB component.
+ * @param {number} rgbComponent 0.0 <= rgb_component <= 100.0, represents
+ * linear R/G/B channel
+ * @return {number} 0 <= output <= 255, color channel converted to regular
+ * RGB space
+ */
+export function delinearized(rgbComponent) {
+  const normalized = rgbComponent / 100;
+  let delinearized = 0;
+  delinearized = normalized <= 0.003_130_8 ? normalized * 12.92 : 1.055 * normalized ** (1 / 2.4) - 0.055;
+  return mathUtils.clampInt(0, 255, Math.round(delinearized * 255));
+}
+
+/**
+ * Returns the standard white point; white on a sunny day.
+ * @return {number[]} The white point
+ */
+export function whitePointD65() {
+  return WHITE_POINT_D65;
+}
+
+/**
+ * @param {number} t
+ * @return {number}
+ */
+function labF(t) {
+  const e = 216 / 24_389;
+  const kappa = 24_389 / 27;
+  if (t > e) {
+    return t ** (1 / 3);
+  }
+  return (kappa * t + 16) / 116;
+}
+
+/**
+ *
+ * @param {number} ft
+ * @return {number}
+ */
+function labInvf(ft) {
+  const e = 216 / 24_389;
+  const kappa = 24_389 / 27;
+  const ft3 = ft * ft * ft;
+  if (ft3 > e) {
+    return ft3;
+  }
+  return (116 * ft - 16) / kappa;
+}