@udixio/theme 1.3.1 → 2.0.0

package/src/palette/palette.ts

@@ -0,0 +1,207 @@
+import { Context } from '../context';
+import { Hct } from '../material-color-utilities/htc';
+
+export type PaletteCallback = (context: Context) => {
+  hue: number;
+  chroma: number;
+};
+
+export class Palette {
+  private readonly cache = new Map<number, number>();
+  private hueCache: number | null = null;
+  private chromaCache: number | null = null;
+
+  private dependencies: (keyof Context)[] | null = null;
+
+  constructor(
+    public name: string,
+    public callback: PaletteCallback,
+    public context: Context,
+  ) {
+    this.update([]);
+  }
+
+  static fromVariant(name: string, color: Hct, ctx: Context): Palette {
+    const callback: PaletteCallback = (context) => {
+      return context.variant.customPalettes(context, color);
+    };
+    return new Palette(name, callback, ctx);
+  }
+
+  update(change: Partial<keyof Context>[]): void {
+    let result: {
+      hue: number;
+      chroma: number;
+    } | null = null;
+
+    if (this.dependencies == null) {
+      const trackDependencies = Context.trackDependencies(this.context, (ctx) =>
+        this.callback(ctx),
+      );
+      this.dependencies = trackDependencies.dependencies;
+      result = trackDependencies.result;
+    } else if (
+      change.length > 0 &&
+      change.some((c) => this.dependencies?.includes(c))
+    ) {
+      result = this.callback(this.context);
+    }
+
+    if (
+      result &&
+      this.hueCache !== result.hue &&
+      this.chromaCache !== result.chroma
+    ) {
+      this.clearCache();
+      this.hueCache = result.hue;
+      this.chromaCache = result.chroma;
+    }
+  }
+
+  private clearCache() {
+    this.cache.clear();
+    this.hueCache = null;
+    this.chromaCache = null;
+  }
+
+  /**
+   * @param tone HCT tone, measured from 0 to 100.
+   * @return ARGB representation of a color with that tone.
+   */
+  tone(tone: number): number {
+    const hue = this.hueCache;
+    const chroma = this.chromaCache;
+
+    if (hue == null || chroma == null)
+      throw new Error('Palette must be updated before using tone');
+
+    let argb = this.cache.get(tone);
+    if (argb === undefined) {
+      if (tone == 99 && Hct.isYellow(hue)) {
+        argb = this.averageArgb(this.tone(98), this.tone(100));
+      } else {
+        argb = Hct.from(hue, chroma, tone).toInt();
+      }
+      this.cache.set(tone, argb);
+    }
+    return argb;
+  }
+
+  /**
+   * @param tone HCT tone.
+   * @return HCT representation of a color with that tone.
+   */
+  getHct(tone: number): Hct {
+    return Hct.fromInt(this.tone(tone));
+  }
+
+  get hue(): number {
+    const hue = this.hueCache;
+    if (hue == null) {
+      throw new Error(`Palette ${this.name} must be updated before using hue`);
+    }
+    return hue;
+  }
+  get chroma(): number {
+    const chroma = this.chromaCache;
+    if (chroma == null) {
+      throw new Error(`Palette ${this.name} must be updated before using hue`);
+    }
+    return chroma;
+  }
+
+  private averageArgb(argb1: number, argb2: number): number {
+    const red1 = (argb1 >>> 16) & 0xff;
+    const green1 = (argb1 >>> 8) & 0xff;
+    const blue1 = argb1 & 0xff;
+    const red2 = (argb2 >>> 16) & 0xff;
+    const green2 = (argb2 >>> 8) & 0xff;
+    const blue2 = argb2 & 0xff;
+    const red = Math.round((red1 + red2) / 2);
+    const green = Math.round((green1 + green2) / 2);
+    const blue = Math.round((blue1 + blue2) / 2);
+    return (
+      ((255 << 24) |
+        ((red & 255) << 16) |
+        ((green & 255) << 8) |
+        (blue & 255)) >>>
+      0
+    );
+  }
+}
+
+// /**
+//  * Key color is a color that represents the hue and chroma of a tonal palette
+//  */
+// class KeyColor {
+//   // Cache that maps tone to max chroma to avoid duplicated HCT calculation.
+//   private readonly chromaCache = new Map<number, number>();
+//   private readonly maxChromaValue = 200.0;
+//
+//   constructor(
+//     readonly hue: number,
+//     readonly requestedChroma: number,
+//   ) {}
+//
+//   /**
+//    * Creates a key color from a [hue] and a [chroma].
+//    * The key color is the first tone, starting from T50, matching the given hue
+//    * and chroma.
+//    *
+//    * @return Key color [Hct]
+//    */
+//   create(): Hct {
+//     // Pivot around T50 because T50 has the most chroma available, on
+//     // average. Thus it is most likely to have a direct answer.
+//     const pivotTone = 50;
+//     const toneStepSize = 1;
+//     // Epsilon to accept values slightly higher than the requested chroma.
+//     const epsilon = 0.01;
+//
+//     // Binary search to find the tone that can provide a chroma that is closest
+//     // to the requested chroma.
+//     let lowerTone = 0;
+//     let upperTone = 100;
+//     while (lowerTone < upperTone) {
+//       const midTone = Math.floor((lowerTone + upperTone) / 2);
+//       const isAscending =
+//         this.maxChroma(midTone) < this.maxChroma(midTone + toneStepSize);
+//       const sufficientChroma =
+//         this.maxChroma(midTone) >= this.requestedChroma - epsilon;
+//
+//       if (sufficientChroma) {
+//         // Either range [lowerTone, midTone] or [midTone, upperTone] has
+//         // the answer, so search in the range that is closer the pivot tone.
+//         if (Math.abs(lowerTone - pivotTone) < Math.abs(upperTone - pivotTone)) {
+//           upperTone = midTone;
+//         } else {
+//           if (lowerTone === midTone) {
+//             return Hct.from(this.hue, this.requestedChroma, lowerTone);
+//           }
+//           lowerTone = midTone;
+//         }
+//       } else {
+//         // As there is no sufficient chroma in the midTone, follow the direction
+//         // to the chroma peak.
+//         if (isAscending) {
+//           lowerTone = midTone + toneStepSize;
+//         } else {
+//           // Keep midTone for potential chroma peak.
+//           upperTone = midTone;
+//         }
+//       }
+//     }
+//
+//     return Hct.from(this.hue, this.requestedChroma, lowerTone);
+//   }
+//
+//   // Find the maximum chroma for a given tone
+//   private maxChroma(tone: number): number {
+//     if (this.chromaCache.has(tone)) {
+//       return this.chromaCache.get(tone)!;
+//     }
+//     const chroma = Hct.from(this.hue, this.maxChromaValue, tone).chroma;
+//     this.chromaCache.set(tone, chroma);
+//     return chroma;
+//   }
+// }

package/src/plugins/font/font.plugin.ts

@@ -13,7 +13,7 @@ export type FontStyle = {
 };
 export type FontRole = 'display' | 'headline' | 'title' | 'label' | 'body';
 export type FontSize = 'large' | 'medium' | 'small';
-interface FontPluginOptions {
+export interface FontPluginOptions {
   fontFamily?: {
     expressive?: string[];
     neutral?: string[];

package/src/variant/index.ts

@@ -0,0 +1,2 @@
+export * from './variant';
+export * from './variants';

package/src/variant/variant.ts

@@ -0,0 +1,81 @@
+import { sanitizeDegreesDouble } from '@material/material-color-utilities';
+import { Hct } from '../material-color-utilities/htc';
+import { Palette } from '../palette/palette';
+import { AddColorsOptions } from '../color';
+import { Context } from '../context';
+import { AddPaletteOptions } from '../palette/palette.api';
+
+export const getPiecewiseHue = (
+  sourceColor: Hct,
+  hueBreakpoints: number[],
+  hues: number[],
+): number => {
+  const size = Math.min(hueBreakpoints.length - 1, hues.length);
+  const sourceHue = sourceColor.hue;
+  for (let i = 0; i < size; i++) {
+    if (sourceHue >= hueBreakpoints[i] && sourceHue < hueBreakpoints[i + 1]) {
+      return sanitizeDegreesDouble(hues[i]);
+    }
+  }
+  return sourceHue;
+};
+
+export const getRotatedHue = (
+  sourceColor: Hct,
+  hueBreakpoints: number[],
+  rotations: number[],
+): number => {
+  let rotation = getPiecewiseHue(sourceColor, hueBreakpoints, rotations);
+  if (Math.min(hueBreakpoints.length - 1, rotations.length) <= 0) {
+    rotation = 0;
+  }
+  return sanitizeDegreesDouble(sourceColor.hue + rotation);
+};
+
+export interface VariantOptions {
+  name: string;
+  palettes: AddPaletteOptions;
+  customPalettes: (
+    args: Context,
+    color: Hct,
+  ) => {
+    hue: number;
+    chroma: number;
+  };
+  colors?: AddColorsOptions;
+}
+
+export class Variant {
+  public _palettes?: Record<string, Palette>;
+  public readonly customPalettes: VariantOptions['customPalettes'];
+  public readonly colors: AddColorsOptions;
+  public readonly name: string;
+  private context?: Context;
+
+  constructor(private options: VariantOptions) {
+    this.customPalettes = options.customPalettes;
+    this.colors = options.colors || {};
+    this.name = options.name;
+  }
+
+  get palettes() {
+    if (!this._palettes) {
+      throw new Error('Variant not initialized');
+    }
+    return this._palettes;
+  }
+
+  init(context: Context) {
+    if (this.context) return;
+    this.context = context;
+    this._palettes = Object.entries(this.options.palettes).reduce(
+      (acc, [key, callback]) => ({
+        ...acc,
+        [key]: new Palette(key, callback, context),
+      }),
+      {},
+    );
+  }
+}
+
+export const variant = (args: VariantOptions) => new Variant(args);

package/src/{theme → variant}/variants/expressive.variant.ts

@@ -1,55 +1,57 @@
-import { getPiecewiseHue, getRotatedHue, Variant } from '../variant';
+import { getPiecewiseHue, getRotatedHue, variant } from '../variant';
 import { TonalPalette } from '@material/material-color-utilities';
 import { Hct } from '../../material-color-utilities/htc';
 
-const getExpressiveNeutralHue = (sourceColorHct: Hct): number => {
+const getExpressiveNeutralHue = (sourceColor: Hct): number => {
   const hue = getRotatedHue(
-    sourceColorHct,
+    sourceColor,
     [0, 71, 124, 253, 278, 300, 360],
     [10, 0, 10, 0, 10, 0],
   );
   return hue;
 };
 const getExpressiveNeutralChroma = (
-  sourceColorHct: Hct,
+  sourceColor: Hct,
   isDark: boolean,
 ): number => {
-  const neutralHue = getExpressiveNeutralHue(sourceColorHct);
+  const neutralHue = getExpressiveNeutralHue(sourceColor);
   return isDark ? (Hct.isYellow(neutralHue) ? 6 : 14) : 18;
 };
 
-export const expressiveVariant: Variant = {
+export const expressiveVariant = variant({
   name: 'expressive',
   palettes: {
-    primary: ({ sourceColorHct, isDark }) =>
-      TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 36 : 48),
-    secondary: ({ sourceColorHct, isDark }) =>
-      TonalPalette.fromHueAndChroma(
-        getRotatedHue(
-          sourceColorHct,
-          [0, 105, 140, 204, 253, 278, 300, 333, 360],
-          [-160, 155, -100, 96, -96, -156, -165, -160],
-        ),
-        isDark ? 16 : 24,
+    primary: ({ sourceColor, isDark }) => ({
+      hue: sourceColor.hue,
+      chroma: isDark ? 36 : 48,
+    }),
+    secondary: ({ sourceColor, isDark }) => ({
+      hue: getRotatedHue(
+        sourceColor,
+        [0, 105, 140, 204, 253, 278, 300, 333, 360],
+        [-160, 155, -100, 96, -96, -156, -165, -160],
       ),
-    tertiary: ({ sourceColorHct }) =>
+
+      chroma: isDark ? 16 : 24,
+    }),
+    tertiary: ({ sourceColor }) =>
       TonalPalette.fromHueAndChroma(
         getRotatedHue(
-          sourceColorHct,
+          sourceColor,
           [0, 105, 140, 204, 253, 278, 300, 333, 360],
           [-165, 160, -105, 101, -101, -160, -170, -165],
         ),
         48,
       ),
-    neutral: ({ sourceColorHct, isDark }) =>
+    neutral: ({ sourceColor, isDark }) =>
       TonalPalette.fromHueAndChroma(
-        getExpressiveNeutralHue(sourceColorHct),
-        getExpressiveNeutralChroma(sourceColorHct, isDark),
+        getExpressiveNeutralHue(sourceColor),
+        getExpressiveNeutralChroma(sourceColor, isDark),
       ),
-    neutralVariant: ({ sourceColorHct, isDark }) => {
-      const expressiveNeutralHue = getExpressiveNeutralHue(sourceColorHct);
+    neutralVariant: ({ sourceColor, isDark }) => {
+      const expressiveNeutralHue = getExpressiveNeutralHue(sourceColor);
       const expressiveNeutralChroma = getExpressiveNeutralChroma(
-        sourceColorHct,
+        sourceColor,
         isDark,
       );
       return TonalPalette.fromHueAndChroma(
@@ -60,22 +62,22 @@ export const expressiveVariant: Variant = {
             : 2.3),
       );
     },
-    error: ({ sourceColorHct }) => {
+    error: ({ sourceColor }) => {
       const errorHue = getPiecewiseHue(
-        sourceColorHct,
+        sourceColor,
         [0, 3, 13, 23, 33, 43, 153, 273, 360],
         [12, 22, 32, 12, 22, 32, 22, 12],
       );
       return TonalPalette.fromHueAndChroma(errorHue, 64);
     },
   },
-  customPalettes: ({ colorHct, isDark }) =>
+  customPalettes: ({ isDark }, color) =>
     TonalPalette.fromHueAndChroma(
       getRotatedHue(
-        colorHct,
+        color,
         [0, 105, 140, 204, 253, 278, 300, 333, 360],
         [-160, 155, -100, 96, -96, -156, -165, -160],
       ),
       isDark ? 16 : 24,
     ),
-};
+});

package/src/variant/variants/fidelity.variant.ts

@@ -0,0 +1,46 @@
+import { getPiecewiseHue, getRotatedHue, variant, Variant } from '../variant';
+
+export const fidelityVariant: Variant = variant({
+  name: 'fidelity',
+  palettes: {
+    primary: ({ sourceColor }) => ({
+      hue: sourceColor.hue,
+      chroma: sourceColor.chroma,
+    }),
+    secondary: ({ sourceColor }) => ({
+      hue: sourceColor.hue,
+      chroma: sourceColor.chroma / 1.4,
+    }),
+    tertiary: ({ sourceColor }) => ({
+      hue: getRotatedHue(
+        sourceColor,
+        [0, 20, 71, 161, 333, 360],
+        [-40, 48, -32, 40, -32],
+      ),
+      chroma: sourceColor.chroma,
+    }),
+    neutral: ({ sourceColor }) => ({
+      hue: sourceColor.hue,
+      chroma: 5,
+    }),
+    neutralVariant: ({ sourceColor }) => ({
+      hue: sourceColor.hue,
+      chroma: 5 * 1.7,
+    }),
+    error: ({ sourceColor }) => {
+      const errorHue = getPiecewiseHue(
+        sourceColor,
+        [0, 3, 13, 23, 33, 43, 153, 273, 360],
+        [12, 22, 32, 12, 22, 32, 22, 12],
+      );
+      return {
+        hue: errorHue,
+        chroma: 60,
+      };
+    },
+  },
+  customPalettes: ({ sourceColor }, colorHct) => ({
+    hue: colorHct.hue,
+    chroma: sourceColor.chroma,
+  }),
+});

package/src/{theme → variant}/variants/neutral.variant.ts

@@ -1,45 +1,45 @@
-import { getPiecewiseHue, getRotatedHue, Variant } from '../variant';
+import { getPiecewiseHue, getRotatedHue, variant, Variant } from '../variant';
 import { TonalPalette } from '@material/material-color-utilities';
 import { Hct } from '../../material-color-utilities/htc';
 
-export const neutralVariant: Variant = {
+export const neutralVariant: Variant = variant({
   name: 'neutral',
   palettes: {
-    primary: ({ sourceColorHct }) =>
+    primary: ({ sourceColor }) =>
       TonalPalette.fromHueAndChroma(
-        sourceColorHct.hue,
-        Hct.isBlue(sourceColorHct.hue) ? 12 : 8,
+        sourceColor.hue,
+        Hct.isBlue(sourceColor.hue) ? 12 : 8,
       ),
-    secondary: ({ sourceColorHct }) =>
+    secondary: ({ sourceColor }) =>
       TonalPalette.fromHueAndChroma(
-        sourceColorHct.hue,
-        Hct.isBlue(sourceColorHct.hue) ? 6 : 4,
+        sourceColor.hue,
+        Hct.isBlue(sourceColor.hue) ? 6 : 4,
       ),
-    tertiary: ({ sourceColorHct }) =>
+    tertiary: ({ sourceColor }) =>
       TonalPalette.fromHueAndChroma(
         getRotatedHue(
-          sourceColorHct,
+          sourceColor,
           [0, 38, 105, 161, 204, 278, 333, 360],
           [-32, 26, 10, -39, 24, -15, -32],
         ),
         20,
       ),
-    neutral: ({ sourceColorHct }) =>
-      TonalPalette.fromHueAndChroma(sourceColorHct.hue, 1.4),
-    neutralVariant: ({ sourceColorHct }) =>
-      TonalPalette.fromHueAndChroma(sourceColorHct.hue, 1.4 * 2.2),
-    error: ({ sourceColorHct }) => {
+    neutral: ({ sourceColor }) =>
+      TonalPalette.fromHueAndChroma(sourceColor.hue, 1.4),
+    neutralVariant: ({ sourceColor }) =>
+      TonalPalette.fromHueAndChroma(sourceColor.hue, 1.4 * 2.2),
+    error: ({ sourceColor }) => {
       const errorHue = getPiecewiseHue(
-        sourceColorHct,
+        sourceColor,
         [0, 3, 13, 23, 33, 43, 153, 273, 360],
         [12, 22, 32, 12, 22, 32, 22, 12],
       );
       return TonalPalette.fromHueAndChroma(errorHue, 50);
     },
   },
-  customPalettes: ({ colorHct }) =>
+  customPalettes: (_, colorHct) =>
     TonalPalette.fromHueAndChroma(
       colorHct.hue,
       Hct.isBlue(colorHct.hue) ? 6 : 4,
     ),
-};
+});

package/src/variant/variants/tonal-spot.variant.ts

@@ -0,0 +1,35 @@
+import { getPiecewiseHue, getRotatedHue, variant, Variant } from '../variant';
+import { TonalPalette } from '@material/material-color-utilities';
+
+export const tonalSpotVariant: Variant = variant({
+  name: 'tonalSpot',
+  palettes: {
+    primary: ({ sourceColor, isDark }) =>
+      TonalPalette.fromHueAndChroma(sourceColor.hue, isDark ? 26 : 32),
+    secondary: ({ sourceColor }) =>
+      TonalPalette.fromHueAndChroma(sourceColor.hue, 16),
+    tertiary: ({ sourceColor }) =>
+      TonalPalette.fromHueAndChroma(
+        getRotatedHue(
+          sourceColor,
+          [0, 20, 71, 161, 333, 360],
+          [-40, 48, -32, 40, -32],
+        ),
+        28,
+      ),
+    neutral: ({ sourceColor }) =>
+      TonalPalette.fromHueAndChroma(sourceColor.hue, 5),
+    neutralVariant: ({ sourceColor }) =>
+      TonalPalette.fromHueAndChroma(sourceColor.hue, 5 * 1.7),
+    error: ({ sourceColor }) => {
+      const errorHue = getPiecewiseHue(
+        sourceColor,
+        [0, 3, 13, 23, 33, 43, 153, 273, 360],
+        [12, 22, 32, 12, 22, 32, 22, 12],
+      );
+      return TonalPalette.fromHueAndChroma(errorHue, 60);
+    },
+  },
+  customPalettes: (_, colorHct) =>
+    TonalPalette.fromHueAndChroma(colorHct.hue, 16),
+});

package/src/{theme → variant}/variants/vibrant.variant.ts

@@ -1,66 +1,65 @@
-import { getPiecewiseHue, getRotatedHue, Variant } from '../variant';
+import { getPiecewiseHue, getRotatedHue, variant, Variant } from '../variant';
 import { TonalPalette } from '@material/material-color-utilities';
 import { Hct } from '../../material-color-utilities/htc';
 
-const getVibrantNeutralHue = (sourceColorHct: Hct): number => {
+const getVibrantNeutralHue = (sourceColor: Hct): number => {
   return getRotatedHue(
-    sourceColorHct,
+    sourceColor,
     [0, 38, 105, 140, 333, 360],
     [-14, 10, -14, 10, -14],
   );
 };
 
-const getVibrantNeutralChroma = (sourceColorHct: Hct): number => {
-  const neutralHue = getVibrantNeutralHue(sourceColorHct);
+const getVibrantNeutralChroma = (sourceColor: Hct): number => {
   return 28;
 };
 
-export const vibrantVariant: Variant = {
+export const vibrantVariant: Variant = variant({
   name: 'vibrant',
   palettes: {
-    primary: ({ sourceColorHct }) =>
-      TonalPalette.fromHueAndChroma(sourceColorHct.hue, 74),
-    secondary: ({ sourceColorHct }) =>
+    primary: ({ sourceColor }) =>
+      TonalPalette.fromHueAndChroma(sourceColor.hue, 74),
+    secondary: ({ sourceColor }) =>
       TonalPalette.fromHueAndChroma(
         getRotatedHue(
-          sourceColorHct,
+          sourceColor,
           [0, 38, 105, 140, 333, 360],
           [-14, 10, -14, 10, -14],
         ),
         56,
       ),
-    tertiary: ({ sourceColorHct }) =>
+    tertiary: ({ sourceColor }) =>
       TonalPalette.fromHueAndChroma(
         getRotatedHue(
-          sourceColorHct,
+          sourceColor,
           [0, 38, 71, 105, 140, 161, 253, 333, 360],
           [-72, 35, 24, -24, 62, 50, 62, -72],
         ),
         56,
       ),
-    neutral: ({ sourceColorHct }) =>
+    neutral: ({ sourceColor }) =>
       TonalPalette.fromHueAndChroma(
-        getVibrantNeutralHue(sourceColorHct),
-        getVibrantNeutralChroma(sourceColorHct),
+        getVibrantNeutralHue(sourceColor),
+        getVibrantNeutralChroma(sourceColor),
       ),
-    neutralVariant: ({ sourceColorHct }) => {
-      const vibrantNeutralHue = getVibrantNeutralHue(sourceColorHct);
-      const vibrantNeutralChroma = getVibrantNeutralChroma(sourceColorHct);
+    neutralVariant: ({ sourceColor }) => {
+      const vibrantNeutralHue = getVibrantNeutralHue(sourceColor);
+      const vibrantNeutralChroma = getVibrantNeutralChroma(sourceColor);
       return TonalPalette.fromHueAndChroma(
         vibrantNeutralHue,
         vibrantNeutralChroma * 1.29,
       );
     },
-    error: ({ sourceColorHct }) => {
+    error: ({ sourceColor }) => {
       const errorHue = getPiecewiseHue(
-        sourceColorHct,
+        sourceColor,
         [0, 3, 13, 23, 33, 43, 153, 273, 360],
         [12, 22, 32, 12, 22, 32, 22, 12],
       );
       return TonalPalette.fromHueAndChroma(errorHue, 80);
     },
   },
-  customPalettes: ({ colorHct }) =>
+  customPalettes: (_, colorHct) =>
     TonalPalette.fromHueAndChroma(
       getRotatedHue(
         colorHct,
@@ -69,4 +68,4 @@ export const vibrantVariant: Variant = {
       ),
       56,
     ),
-};
+});

package/dist/color/configurable-color.d.ts

@@ -1,31 +0,0 @@
-import { SchemeManager } from '../theme';
-import { DynamicColor, FromPaletteOptions } from '../material-color-utilities';
-import { ColorManager } from './color.manager';
-export type ColorOptions = ((FromPaletteOptions & {
-    alias?: string;
-}) | (Partial<FromPaletteOptions> & {
-    alias: string;
-    palette?: never;
-})) & {
-    name: string;
-};
-export declare class ConfigurableColor {
-    private option;
-    private schemeService;
-    private colorService;
-    private dynamicColor;
-    constructor(option: ColorOptions, schemeService: SchemeManager, colorService: ColorManager);
-    update(args: Partial<ColorOptions & {
-        name: string;
-    }>): void;
-    getHex(): string;
-    getArgb(): number;
-    getRgb(): {
-        r: number;
-        g: number;
-        b: number;
-    };
-    getName(): string;
-    getMaterialColor(): DynamicColor;
-}
-//# sourceMappingURL=configurable-color.d.ts.map