@shortfuse/materialdesignweb 0.7.6 → 0.8.0

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

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