@shortfuse/materialdesignweb 0.7.6 → 0.9.0

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

@@ -31,8 +31,10 @@
  * and a difference of 50 guarantees a contrast ratio >= 4.5.
  */
 
+import * as utils from '../utils/color.js';
+
 import Cam16 from './Cam16.js';
-import * as utils from './colorUtils.js';
+import ViewingConditions from './ViewingConditions.js';
 import * as hctSolver from './hctSolver.js';
 
 /**
@@ -50,15 +52,6 @@ export default class Hct {
    * @return HCT representation of a color in default viewing conditions.
    */
 
-  /** @type {number} */
-  internalHue;
-
-  /** @type {number} */
-  internalChroma;
-
-  /** @type {number} */
-  internalTone;
-
   /**
    * @param {number} hue
    * @param {number} chroma
@@ -77,6 +70,24 @@ export default class Hct {
     return new Hct(argb);
   }
 
+  /** @type {number} */
+  internalHue;
+
+  /** @type {number} */
+  internalChroma;
+
+  /** @type {number} */
+  internalTone;
+
+  /** @param {number} argb */
+  constructor(argb) {
+    const cam = Cam16.fromInt(argb);
+    this.internalHue = cam.hue;
+    this.internalChroma = cam.chroma;
+    this.internalTone = utils.lstarFromArgb(argb);
+    this.argb = argb;
+  }
+
   /** @return {number} */
   toInt() {
     return this.argb;
@@ -149,15 +160,6 @@ export default class Hct {
     );
   }
 
-  /** @param {number} argb */
-  constructor(argb) {
-    const cam = Cam16.fromInt(argb);
-    this.internalHue = cam.hue;
-    this.internalChroma = cam.chroma;
-    this.internalTone = utils.lstarFromArgb(argb);
-    this.argb = argb;
-  }
-
   /**
    * @private
    * @param {number} argb
@@ -169,4 +171,44 @@ export default class Hct {
     this.internalTone = utils.lstarFromArgb(argb);
     this.argb = argb;
   }
+
+  /**
+   * Translates a color into different [ViewingConditions].
+   *
+   * Colors change appearance. They look different with lights on versus off,
+   * the same color, as in hex code, on white looks different when on black.
+   * This is called color relativity, most famously explicated by Josef Albers
+   * in Interaction of Color.
+   *
+   * In color science, color appearance models can account for this and
+   * calculate the appearance of a color in different settings. HCT is based on
+   * CAM16, a color appearance model, and uses it to make these calculations.
+   *
+   * See [ViewingConditions.make] for parameters affecting color appearance.
+   * @param {ViewingConditions} vc
+   * @return {Hct}
+   */
+  inViewingConditions(vc) {
+    // 1. Use CAM16 to find XYZ coordinates of color in specified VC.
+    const cam = Cam16.fromInt(this.toInt());
+    const viewedInVc = cam.xyzInViewingConditions(vc);
+
+    // 2. Create CAM16 of those XYZ coordinates in default VC.
+    const recastInVc = Cam16.fromXyzInViewingConditions(
+      viewedInVc[0],
+      viewedInVc[1],
+      viewedInVc[2],
+      ViewingConditions.make(),
+    );
+
+    // 3. Create HCT from:
+    // - CAM16 using default VC with XYZ coordinates in specified VC.
+    // - L* converted from Y in XYZ coordinates in specified VC.
+    const recastHct = Hct.from(
+      recastInVc.hue,
+      recastInVc.chroma,
+      utils.lstarFromY(viewedInVc[1]),
+    );
+    return recastHct;
+  }
 }

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

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import * as utils from './colorUtils.js';
-import * as math from './mathUtils.js';
+import * as utils from '../utils/color.js';
+import * as math from '../utils/math.js';
 
 /**
  * In traditional color spaces, a color can be identified solely by the
@@ -85,7 +85,7 @@ export default class ViewingConditions {
     const k4 = k * k * k * k;
     const k4F = 1 - k4;
     const fl = k4 * adaptingLuminance
-         + 0.1 * k4F * k4F * Math.cbrt(5 * 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;

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

@@ -15,19 +15,11 @@
  * limitations under the License.
  */
 
+import * as colorUtils from '../utils/color.js';
+import * as mathUtils from '../utils/math.js';
+
 import Cam16 from './Cam16.js';
 import ViewingConditions from './ViewingConditions.js';
-import * as colorUtils from './colorUtils.js';
-import * as mathUtils from './mathUtils.js';
-
-/**
- * A class that solves the HCT equation.
- */
-// 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-next-line:class-as-namespace
 
 export const SCALED_DISCOUNT_FROM_LINRGB = [
   [
@@ -476,9 +468,10 @@ function findResultByJ(hueRadians, chroma, y) {
     const alpha = chroma === 0 || j === 0 ? 0 : chroma / Math.sqrt(jNormalized);
     const t = (alpha * tInnerCoeff) ** (1 / 0.9);
     const ac = viewingConditions.aw
-           * jNormalized ** (1 / viewingConditions.c / viewingConditions.z);
+      * jNormalized ** (1 / viewingConditions.c / viewingConditions.z);
     const p2 = ac / viewingConditions.nbb;
-    const gamma = 23 * (p2 + 0.305) * t / (23 * p1 + 11 * t * hCos + 108 * t * hSin);
+    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;
@@ -491,9 +484,9 @@ function findResultByJ(hueRadians, chroma, y) {
       [rCScaled, gCScaled, bCScaled],
       LINRGB_FROM_SCALED_DISCOUNT,
     );
-      // ===========================================================
-      // Operations inlined from Cam16 to avoid repeated calculation
-      // ===========================================================
+    // ===========================================================
+    // Operations inlined from Cam16 to avoid repeated calculation
+    // ===========================================================
     if (linrgb[0] < 0 || linrgb[1] < 0 || linrgb[2] < 0) {
       return 0;
     }

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

@@ -1,9 +1,9 @@
-import CorePalette from './CorePalette.js';
-import Scheme from './Scheme.js';
 import { harmonize } from './blend.js';
-import * as colorUtils from './colorUtils.js';
+import CorePalette from './palettes/CorePalette.js';
+import Scheme from './scheme/Scheme.js';
+import * as colorUtils from './utils/color.js';
 
-/** @typedef {import('./TonalPalette.js').default} TonalPalette */
+/** @typedef {import("./palettes/TonalPalette.js").default} TonalPalette */
 
 /**
  * @param {string} value
@@ -109,7 +109,13 @@ function cssVariablesFromScheme(scheme) {
       --mdw-color__on-background: ${cssVarFromArgb(scheme.onBackground)};
       --mdw-color__surface: ${cssVarFromArgb(scheme.surface)};
       --mdw-color__on-surface: ${cssVarFromArgb(scheme.onSurface)};
-      --mdw-color__surface-variant: ${cssVarFromArgb(scheme.surfaceVariant)};
+      --mdw-color__surface-dim: ${cssVarFromArgb(scheme.surfaceDim)};
+      --mdw-color__surface-bright: ${cssVarFromArgb(scheme.surfaceBright)};
+      --mdw-color__surface-container-lowest: ${cssVarFromArgb(scheme.surfaceContainerLowest)};
+      --mdw-color__surface-container-low: ${cssVarFromArgb(scheme.surfaceContainerLow)};
+      --mdw-color__surface-container: ${cssVarFromArgb(scheme.surfaceContainer)};
+      --mdw-color__surface-container-high: ${cssVarFromArgb(scheme.surfaceContainerHigh)};
+      --mdw-color__surface-container-highest: ${cssVarFromArgb(scheme.surfaceContainerHighest)};
       --mdw-color__on-surface-variant: ${cssVarFromArgb(scheme.onSurfaceVariant)};
       --mdw-color__outline: ${cssVarFromArgb(scheme.outline)};
       --mdw-color__outline-variant: ${cssVarFromArgb(scheme.outlineVariant)};
@@ -135,19 +141,6 @@ function cssVariablesFromCustom(name, tonalPalette, isDark) {
       --mdw-color__${name}-container: ${cssVarFromArgb(tonalPalette.tone(isDark ? 30 : 90))};
       --mdw-color__on-${name}-container: ${cssVarFromArgb(tonalPalette.tone(isDark ? 90 : 10))};
     }
-    .mdw-custom[color="${name}"] {
-      --mdw-bg: var(--mdw-color__${name});
-      --mdw-ink: var(--mdw-color__on-${name});
-    }
-    .mdw-custom[color="${name}-container"] {
-      --mdw-bg: var(--mdw-color__${name}-container);
-      --mdw-ink: var(--mdw-color__on-${name}-container);
-    }
-    .mdw-custom[ink="${name}"] {
-      --mdw-ink: var(--mdw-color__${name});
-    }
-    
-    
   `;
 }
 

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

@@ -15,15 +15,91 @@
  * limitations under the License.
  */
 
-import Hct from './Hct.js';
+import Hct from '../hct/Hct.js';
+
 import TonalPalette from './TonalPalette.js';
 
+/**
+ * Set of colors to generate a [CorePalette] from
+ * @typedef CorePaletteColors
+ * @prop {number} primary
+ * @prop {number} [secondary]
+ * @prop {number} [tertiary]
+ * @prop {number} [neutral]
+ * @prop {number} [neutralVariant]
+ * @prop {number} [error]
+ */
+
 /**
  * An intermediate concept between the key color for a UI theme, and a full
  * color scheme. 5 sets of tones are generated, all except one use the same hue
  * as the key color, and all vary in chroma.
  */
 export default class CorePalette {
+  /**
+   * @param {boolean} content
+   * @param {CorePaletteColors} colors
+   * @return {CorePalette}
+   */
+  static #createPaletteFromColors(content, colors) {
+    const palette = new CorePalette(colors.primary, content);
+    if (colors.secondary) {
+      const p = new CorePalette(colors.secondary, content);
+      palette.a2 = p.a1;
+    }
+    if (colors.tertiary) {
+      const p = new CorePalette(colors.tertiary, content);
+      palette.a3 = p.a1;
+    }
+    if (colors.error) {
+      const p = new CorePalette(colors.error, content);
+      palette.error = p.a1;
+    }
+    if (colors.neutral) {
+      const p = new CorePalette(colors.neutral, content);
+      palette.n1 = p.n1;
+    }
+    if (colors.neutralVariant) {
+      const p = new CorePalette(colors.neutralVariant, content);
+      palette.n2 = p.n2;
+    }
+    return palette;
+  }
+
+  /**
+   * @param {number} argb ARGB representation of a color
+   * @return {CorePalette}
+   */
+  static of(argb) {
+    return new CorePalette(argb, false);
+  }
+
+  /**
+   * @param {number} argb ARGB representation of a color
+   * @return {CorePalette}
+   */
+  static contentOf(argb) {
+    return new CorePalette(argb, true);
+  }
+
+  /**
+   * Create a [CorePalette] from a set of colors
+   * @param {CorePaletteColors} colors
+   * @return {CorePalette}
+   */
+  static fromColors(colors) {
+    return CorePalette.#createPaletteFromColors(false, colors);
+  }
+
+  /**
+   * Create a content [CorePalette] from a set of colors
+   * @param {CorePaletteColors} colors
+   * @return {CorePalette}
+   */
+  static contentFromColors(colors) {
+    return CorePalette.#createPaletteFromColors(true, colors);
+  }
+
   /** @type {TonalPalette} */
   a1;
 
@@ -42,22 +118,6 @@ export default class CorePalette {
   /** @type {TonalPalette} */
   error;
 
-  /**
-   * @param {number} argb ARGB representation of a color
-   * @return {CorePalette}
-   */
-  static of(argb) {
-    return new CorePalette(argb, false);
-  }
-
-  /**
-   * @param {number} argb ARGB representation of a color
-   * @return {CorePalette}
-   */
-  static contentOf(argb) {
-    return new CorePalette(argb, true);
-  }
-
   /**
    * @param {number} argb
    * @param {boolean} isContent
@@ -70,13 +130,13 @@ export default class CorePalette {
       this.a1 = TonalPalette.fromHueAndChroma(hue, chroma);
       this.a2 = TonalPalette.fromHueAndChroma(hue, chroma / 3);
       this.a3 = TonalPalette.fromHueAndChroma(hue + 60, chroma / 2);
-      this.n1 = TonalPalette.fromHueAndChroma(hue, Math.min(chroma / 12, 4));
+      this.n1 = TonalPalette.fromHueAndChroma(hue, Math.min(chroma / 12, 6)); // Bump from 4
       this.n2 = TonalPalette.fromHueAndChroma(hue, Math.min(chroma / 6, 8));
     } else {
       this.a1 = TonalPalette.fromHueAndChroma(hue, Math.max(48, chroma));
       this.a2 = TonalPalette.fromHueAndChroma(hue, 16);
       this.a3 = TonalPalette.fromHueAndChroma(hue + 60, 24);
-      this.n1 = TonalPalette.fromHueAndChroma(hue, 4);
+      this.n1 = TonalPalette.fromHueAndChroma(hue, 6); // Bump from 4
       this.n2 = TonalPalette.fromHueAndChroma(hue, 8);
     }
     this.error = TonalPalette.fromHueAndChroma(25, 84);

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

@@ -15,16 +15,13 @@
  * limitations under the License.
  */
 
-import Hct from './Hct.js';
+import Hct from '../hct/Hct.js';
 
 /**
  *  A convenience class for retrieving colors that are constant in hue and
  *  chroma, but vary in tone.
  */
 export default class TonalPalette {
-  /** @type {Map<number, number>} */
-  #cache = new Map();
-
   /**
    * @param {number} argb ARGB representation of a color
    * @return {TonalPalette} Tones matching that color's hue and chroma.
@@ -43,6 +40,9 @@ export default class TonalPalette {
     return new TonalPalette(hue, chroma);
   }
 
+  /** @type {Map<number, number>} */
+  #cache = new Map();
+
   /**
    * @private
    * @param {number} hue
@@ -65,4 +65,12 @@ export default class TonalPalette {
     }
     return argb;
   }
+
+  /**
+   * @param {number} tone HCT tone.
+   * @return {Hct} HCT representation of a color with that tone.
+   */
+  getHct(tone) {
+    return Hct.fromInt(this.tone(tone));
+  }
 }