@shortfuse/materialdesignweb 0.7.6 → 0.8.0

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));
+  }
 }

package/utils/material-color/scheme/Scheme.js

@@ -0,0 +1,376 @@
+/**
+ * @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 CorePalette from '../palettes/CorePalette.js';
+
+/**
+ * Represents a Material color scheme, a mapping of color roles to colors.
+ */
+export default class Scheme {
+  /**
+   * @param {number} argb  ARGB representation of a color.
+   * @return {Scheme} Light Material color scheme, based on the color's hue.
+   */
+  static light(argb) {
+    return Scheme.lightFromCorePalette(CorePalette.of(argb));
+  }
+
+  /**
+   * @param {number} argb ARGB representation of a color.
+   * @return {Scheme} Dark Material color scheme, based on the color's hue.
+   */
+  static dark(argb) {
+    return Scheme.darkFromCorePalette(CorePalette.of(argb));
+  }
+
+  /**
+   * @param {number} argb ARGB representation of a color.
+   * @return {Scheme} Light Material content color scheme, based on the color's hue.
+   */
+  static lightContent(argb) {
+    return Scheme.lightFromCorePalette(CorePalette.contentOf(argb));
+  }
+
+  /**
+   * @param {number} argb ARGB representation of a color.
+   * @return {Scheme} Dark Material content color scheme, based on the color's hue.
+   */
+  static darkContent(argb) {
+    return Scheme.darkFromCorePalette(CorePalette.contentOf(argb));
+  }
+
+  /**
+   * Light scheme from core palette
+   * @param {CorePalette} core
+   * @return {Scheme}
+   */
+  static lightFromCorePalette(core) {
+    return new Scheme({
+      primary: core.a1.tone(40),
+      onPrimary: core.a1.tone(100),
+      primaryContainer: core.a1.tone(90),
+      onPrimaryContainer: core.a1.tone(10),
+      secondary: core.a2.tone(40),
+      onSecondary: core.a2.tone(100),
+      secondaryContainer: core.a2.tone(90),
+      onSecondaryContainer: core.a2.tone(10),
+      tertiary: core.a3.tone(40),
+      onTertiary: core.a3.tone(100),
+      tertiaryContainer: core.a3.tone(90),
+      onTertiaryContainer: core.a3.tone(10),
+      error: core.error.tone(40),
+      onError: core.error.tone(100),
+      errorContainer: core.error.tone(90),
+      onErrorContainer: core.error.tone(10),
+      background: core.n1.tone(98),
+      onBackground: core.n1.tone(10),
+      surface: core.n1.tone(98),
+      onSurface: core.n1.tone(10),
+      surfaceDim: core.n1.tone(87),
+      surfaceBright: core.n1.tone(98),
+      surfaceContainerLowest: core.n1.tone(100),
+      surfaceContainerLow: core.n1.tone(96),
+      surfaceContainer: core.n1.tone(94),
+      surfaceContainerHigh: core.n1.tone(92),
+      surfaceContainerHighest: core.n1.tone(90),
+      surfaceVariant: core.n2.tone(90),
+      onSurfaceVariant: core.n2.tone(30),
+      outline: core.n2.tone(50),
+      outlineVariant: core.n2.tone(80),
+      shadow: core.n1.tone(0),
+      scrim: core.n1.tone(0),
+      inverseSurface: core.n1.tone(20),
+      inverseOnSurface: core.n1.tone(95),
+      inversePrimary: core.a1.tone(80),
+    });
+  }
+
+  /**
+   * Dark scheme from core palette
+   * @param {CorePalette} core
+   * @return {Scheme}
+   */
+  static darkFromCorePalette(core) {
+    return new Scheme({
+      primary: core.a1.tone(80),
+      onPrimary: core.a1.tone(20),
+      primaryContainer: core.a1.tone(30),
+      onPrimaryContainer: core.a1.tone(90),
+      secondary: core.a2.tone(80),
+      onSecondary: core.a2.tone(20),
+      secondaryContainer: core.a2.tone(30),
+      onSecondaryContainer: core.a2.tone(90),
+      tertiary: core.a3.tone(80),
+      onTertiary: core.a3.tone(20),
+      tertiaryContainer: core.a3.tone(30),
+      onTertiaryContainer: core.a3.tone(90),
+      error: core.error.tone(80),
+      onError: core.error.tone(20),
+      errorContainer: core.error.tone(30),
+      onErrorContainer: core.error.tone(90), // Fix Typo
+      background: core.n1.tone(6),
+      onBackground: core.n1.tone(90),
+      surface: core.n1.tone(6),
+      onSurface: core.n1.tone(90),
+      surfaceDim: core.n1.tone(6),
+      surfaceBright: core.n1.tone(24),
+      surfaceContainerLowest: core.n1.tone(4),
+      surfaceContainerLow: core.n1.tone(10),
+      surfaceContainer: core.n1.tone(12),
+      surfaceContainerHigh: core.n1.tone(17),
+      surfaceContainerHighest: core.n1.tone(22),
+      surfaceVariant: core.n2.tone(30),
+      onSurfaceVariant: core.n2.tone(80),
+      outline: core.n2.tone(60),
+      outlineVariant: core.n2.tone(30),
+      shadow: core.n1.tone(0),
+      scrim: core.n1.tone(0),
+      inverseSurface: core.n1.tone(90),
+      inverseOnSurface: core.n1.tone(20),
+      inversePrimary: core.a1.tone(40),
+    });
+  }
+
+  /**
+   * @param {Object} props
+   * @param {number} props.primary
+   * @param {number} props.onPrimary
+   * @param {number} props.primaryContainer
+   * @param {number} props.onPrimaryContainer
+   * @param {number} props.secondary
+   * @param {number} props.onSecondary
+   * @param {number} props.secondaryContainer
+   * @param {number} props.onSecondaryContainer
+   * @param {number} props.tertiary
+   * @param {number} props.onTertiary
+   * @param {number} props.tertiaryContainer
+   * @param {number} props.onTertiaryContainer
+   * @param {number} props.error
+   * @param {number} props.onError
+   * @param {number} props.errorContainer
+   * @param {number} props.onErrorContainer
+   * @param {number} props.background
+   * @param {number} props.onBackground
+   * @param {number} props.surface
+   * @param {number} props.onSurface
+   * @param {number} props.surfaceDim
+   * @param {number} props.surfaceBright
+   * @param {number} props.surfaceContainerLowest
+   * @param {number} props.surfaceContainerLow
+   * @param {number} props.surfaceContainer
+   * @param {number} props.surfaceContainerHigh
+   * @param {number} props.surfaceContainerHighest
+   * @param {number} props.surfaceVariant
+   * @param {number} props.onSurfaceVariant
+   * @param {number} props.outline
+   * @param {number} props.outlineVariant
+   * @param {number} props.shadow
+   * @param {number} props.scrim
+   * @param {number} props.inverseSurface
+   * @param {number} props.inverseOnSurface
+   * @param {number} props.inversePrimary
+   */
+  constructor(props) {
+    this.props = props;
+  }
+
+  /** @return {number} */
+  get primary() {
+    return this.props.primary;
+  }
+
+  /** @return {number} */
+  get onPrimary() {
+    return this.props.onPrimary;
+  }
+
+  /** @return {number} */
+  get primaryContainer() {
+    return this.props.primaryContainer;
+  }
+
+  /** @return {number} */
+  get onPrimaryContainer() {
+    return this.props.onPrimaryContainer;
+  }
+
+  /** @return {number} */
+  get secondary() {
+    return this.props.secondary;
+  }
+
+  /** @return {number} */
+  get onSecondary() {
+    return this.props.onSecondary;
+  }
+
+  /** @return {number} */
+  get secondaryContainer() {
+    return this.props.secondaryContainer;
+  }
+
+  /** @return {number} */
+  get onSecondaryContainer() {
+    return this.props.onSecondaryContainer;
+  }
+
+  /** @return {number} */
+  get tertiary() {
+    return this.props.tertiary;
+  }
+
+  /** @return {number} */
+  get onTertiary() {
+    return this.props.onTertiary;
+  }
+
+  /** @return {number} */
+  get tertiaryContainer() {
+    return this.props.tertiaryContainer;
+  }
+
+  /** @return {number} */
+  get onTertiaryContainer() {
+    return this.props.onTertiaryContainer;
+  }
+
+  /** @return {number} */
+  get error() {
+    return this.props.error;
+  }
+
+  /** @return {number} */
+  get onError() {
+    return this.props.onError;
+  }
+
+  /** @return {number} */
+  get errorContainer() {
+    return this.props.errorContainer;
+  }
+
+  /** @return {number} */
+  get onErrorContainer() {
+    return this.props.onErrorContainer;
+  }
+
+  /** @return {number} */
+  get background() {
+    return this.props.background;
+  }
+
+  /** @return {number} */
+  get onBackground() {
+    return this.props.onBackground;
+  }
+
+  /** @return {number} */
+  get surface() {
+    return this.props.surface;
+  }
+
+  /** @return {number} */
+  get onSurface() {
+    return this.props.onSurface;
+  }
+
+  /** @return {number} */
+  get surfaceDim() {
+    return this.props.surfaceDim;
+  }
+
+  /** @return {number} */
+  get surfaceBright() {
+    return this.props.surfaceBright;
+  }
+
+  /** @return {number} */
+  get surfaceContainerLowest() {
+    return this.props.surfaceContainerLowest;
+  }
+
+  /** @return {number} */
+  get surfaceContainerLow() {
+    return this.props.surfaceContainerLow;
+  }
+
+  /** @return {number} */
+  get surfaceContainer() {
+    return this.props.surfaceContainer;
+  }
+
+  /** @return {number} */
+  get surfaceContainerHigh() {
+    return this.props.surfaceContainerHigh;
+  }
+
+  /** @return {number} */
+  get surfaceContainerHighest() {
+    return this.props.surfaceContainerHighest;
+  }
+
+  /** @return {number} */
+  get surfaceVariant() {
+    return this.props.surfaceVariant;
+  }
+
+  /** @return {number} */
+  get onSurfaceVariant() {
+    return this.props.onSurfaceVariant;
+  }
+
+  /** @return {number} */
+  get outline() {
+    return this.props.outline;
+  }
+
+  /** @return {number} */
+  get outlineVariant() {
+    return this.props.outlineVariant;
+  }
+
+  /** @return {number} */
+  get shadow() {
+    return this.props.shadow;
+  }
+
+  /** @return {number} */
+  get scrim() {
+    return this.props.scrim;
+  }
+
+  /** @return {number} */
+  get inverseSurface() {
+    return this.props.inverseSurface;
+  }
+
+  /** @return {number} */
+  get inverseOnSurface() {
+    return this.props.inverseOnSurface;
+  }
+
+  /** @return {number} */
+  get inversePrimary() {
+    return this.props.inversePrimary;
+  }
+
+  toJSON() {
+    return {
+      ...this.props,
+    };
+  }
+}

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

@@ -17,7 +17,7 @@
 
 // This file is automatically generated. Do not modify it.
 
-import * as mathUtils from './mathUtils.js';
+import * as mathUtils from './math.js';
 
 /**
  * Color science utilities.
@@ -236,6 +236,20 @@ export function yFromLstar(lstar) {
   return 100 * labInvf((lstar + 16) / 116);
 }
 
+/**
+ * Converts a Y value to an L* 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} y Y in XYZ
+ * @return {number} L* in L*a*b*
+ */
+export function lstarFromY(y) {
+  return labF(y / 100) * 116 - 16;
+}
+
 /**
  * Linearizes an RGB component.
  * @param {number} rgbComponent 0 <= rgb_component <= 255, represents R/G/B
@@ -274,6 +288,52 @@ export function whitePointD65() {
 }
 
 /**
+ * RGBA component
+ * @typedef Rgba
+ * @prop {number} r Red value should be between 0-255
+ * @prop {number} g Green value should be between 0-255
+ * @prop {number} b Blue value should be between 0-255
+ * @prop {number} a Alpha value should be between 0-255
+ */
+
+/**
+ * Return RGBA from a given int32 color
+ * @param {number} argb ARGB representation of a int32 color.
+ * @return {Rgba} RGBA representation of a int32 color.
+ */
+export function rgbaFromArgb(argb) {
+  const r = redFromArgb(argb);
+  const g = greenFromArgb(argb);
+  const b = blueFromArgb(argb);
+  const a = alphaFromArgb(argb);
+  return { r, g, b, a };
+}
+
+/**
+ * Return int32 color from a given RGBA component
+ * @param {Rgba} rgba RGBA representation of a int32 color.
+ * @return {number} ARGB representation of a int32 color.
+ */
+export function argbFromRgba({ r, g, b, a }) {
+  const rValue = clampComponent(r);
+  const gValue = clampComponent(g);
+  const bValue = clampComponent(b);
+  const aValue = clampComponent(a);
+  return (aValue << 24) | (rValue << 16) | (gValue << 8) | bValue;
+}
+
+/**
+ * @param {number} value
+ * @return {number}
+ */
+function clampComponent(value) {
+  if (value < 0) return 0;
+  if (value > 255) return 255;
+  return value;
+}
+
+/**
+ *
  * @param {number} t
  * @return {number}
  */