@udixio/theme 2.0.0 → 2.1.0

package/dist/{loader-C8LnOoqg.cjs → loader-BzsrGBu-.cjs}

@@ -2,8 +2,8 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-const materialColorUtilities = require("@material/material-color-utilities");
 const awilix = require("awilix");
+const materialColorUtilities = require("@material/material-color-utilities");
 class API {
   constructor({
     colorApi,
@@ -25,58 +25,6 @@ class API {
     return this.plugins.loadPlugins();
   }
 }
-/**
- * @license
- * Copyright 2023 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.
- */
-class ContrastCurve {
-  /**
-   * Creates a `ContrastCurve` object.
-   *
-   * @param low Value for contrast level -1.0
-   * @param normal Value for contrast level 0.0
-   * @param medium Value for contrast level 0.5
-   * @param high Value for contrast level 1.0
-   */
-  constructor(low, normal, medium, high) {
-    this.low = low;
-    this.normal = normal;
-    this.medium = medium;
-    this.high = high;
-  }
-  /**
-   * Returns the value at a given contrast level.
-   *
-   * @param contrastLevel The contrast level. 0.0 is the default (normal); -1.0
-   *     is the lowest; 1.0 is the highest.
-   * @return The value. For contrast ratios, a number between 1.0 and 21.0.
-   */
-  get(contrastLevel) {
-    if (contrastLevel <= -1) {
-      return this.low;
-    } else if (contrastLevel < 0) {
-      return materialColorUtilities.lerp(this.low, this.normal, (contrastLevel - -1) / 1);
-    } else if (contrastLevel < 0.5) {
-      return materialColorUtilities.lerp(this.normal, this.medium, (contrastLevel - 0) / 0.5);
-    } else if (contrastLevel < 1) {
-      return materialColorUtilities.lerp(this.medium, this.high, (contrastLevel - 0.5) / 0.5);
-    } else {
-      return this.high;
-    }
-  }
-}
 /**
  * @license
  * Copyright 2021 Google LLC
@@ -863,6 +811,125 @@ class Hct {
     this.argb = argb;
   }
 }
+/**
+ * @license
+ * Copyright 2023 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.
+ */
+class ContrastCurve {
+  /**
+   * Creates a `ContrastCurve` object.
+   *
+   * @param low Value for contrast level -1.0
+   * @param normal Value for contrast level 0.0
+   * @param medium Value for contrast level 0.5
+   * @param high Value for contrast level 1.0
+   */
+  constructor(low, normal, medium, high) {
+    this.low = low;
+    this.normal = normal;
+    this.medium = medium;
+    this.high = high;
+  }
+  /**
+   * Returns the value at a given contrast level.
+   *
+   * @param contrastLevel The contrast level. 0.0 is the default (normal); -1.0
+   *     is the lowest; 1.0 is the highest.
+   * @return The value. For contrast ratios, a number between 1.0 and 21.0.
+   */
+  get(contrastLevel) {
+    if (contrastLevel <= -1) {
+      return this.low;
+    } else if (contrastLevel < 0) {
+      return materialColorUtilities.lerp(this.low, this.normal, (contrastLevel - -1) / 1);
+    } else if (contrastLevel < 0.5) {
+      return materialColorUtilities.lerp(this.normal, this.medium, (contrastLevel - 0) / 0.5);
+    } else if (contrastLevel < 1) {
+      return materialColorUtilities.lerp(this.medium, this.high, (contrastLevel - 0.5) / 0.5);
+    } else {
+      return this.high;
+    }
+  }
+}
+function getCurve(defaultContrast) {
+  if (defaultContrast === 1.5) {
+    return new ContrastCurve(1.5, 1.5, 3, 4.5);
+  } else if (defaultContrast === 3) {
+    return new ContrastCurve(3, 3, 4.5, 7);
+  } else if (defaultContrast === 4.5) {
+    return new ContrastCurve(4.5, 4.5, 7, 11);
+  } else if (defaultContrast === 6) {
+    return new ContrastCurve(6, 6, 7, 11);
+  } else if (defaultContrast === 7) {
+    return new ContrastCurve(7, 7, 11, 21);
+  } else if (defaultContrast === 9) {
+    return new ContrastCurve(9, 9, 11, 21);
+  } else if (defaultContrast === 11) {
+    return new ContrastCurve(11, 11, 21, 21);
+  } else if (defaultContrast === 21) {
+    return new ContrastCurve(21, 21, 21, 21);
+  } else {
+    return new ContrastCurve(defaultContrast, defaultContrast, 7, 21);
+  }
+}
+function tMaxC(palette, lowerBound = 0, upperBound = 100, chromaMultiplier = 1) {
+  const answer = findBestToneForChroma(
+    palette.hue,
+    palette.chroma * chromaMultiplier,
+    100,
+    true
+  );
+  return materialColorUtilities.clampDouble(lowerBound, upperBound, answer);
+}
+function tMinC(palette, lowerBound = 0, upperBound = 100) {
+  const answer = findBestToneForChroma(palette.hue, palette.chroma, 0, false);
+  return materialColorUtilities.clampDouble(lowerBound, upperBound, answer);
+}
+function findBestToneForChroma(hue, chroma, tone, byDecreasingTone) {
+  let answer = tone;
+  let bestCandidate = Hct.from(hue, chroma, answer);
+  while (bestCandidate.chroma < chroma) {
+    if (tone < 0 || tone > 100) {
+      break;
+    }
+    tone += byDecreasingTone ? -1 : 1;
+    const newCandidate = Hct.from(hue, chroma, tone);
+    if (bestCandidate.chroma < newCandidate.chroma) {
+      bestCandidate = newCandidate;
+      answer = tone;
+    }
+  }
+  return answer;
+}
+function calculateToneAdjustmentPercentage(toneA, toneB, desiredRatio) {
+  const currentRatio = materialColorUtilities.Contrast.ratioOfTones(toneA, toneB);
+  if (currentRatio >= desiredRatio) {
+    return 0;
+  }
+  const lighterTone = materialColorUtilities.Contrast.lighter(toneA, desiredRatio);
+  const darkerTone = materialColorUtilities.Contrast.darker(toneA, desiredRatio);
+  if (lighterTone !== -1 && toneB < lighterTone) {
+    const percentageToAdjust = (toneB - lighterTone) / (toneA - lighterTone);
+    return materialColorUtilities.clampDouble(0, 1, percentageToAdjust);
+  }
+  if (darkerTone !== -1 && toneB > darkerTone) {
+    const percentageToAdjust = (toneB - darkerTone) / (toneA - darkerTone);
+    return materialColorUtilities.clampDouble(0, 1, percentageToAdjust);
+  }
+  return 0;
+}
 /**
  * @license
  * Copyright 2022 Google LLC
@@ -1250,6 +1317,9 @@ class Color {
   constructor(name) {
     this.name = name;
   }
+  static maxChroma(hue, tone = 50) {
+    return Hct.from(hue, 200, tone).chroma;
+  }
   getHex() {
     return materialColorUtilities.hexFromArgb(this.getArgb());
   }
@@ -1398,349 +1468,71 @@ class ColorFromPalette extends Color {
     }
   }
 }
-const highestSurface = (context, colorService) => {
+const highestSurface$1 = (context, colorService) => {
   if (colorService instanceof ColorApi) {
     return context.isDark ? colorService.get("surfaceBright") : colorService.get("surfaceDim");
   } else {
     return context.isDark ? colorService.get("surfaceBright") : colorService.get("surfaceDim");
   }
 };
-class ColorManager {
-  constructor(args) {
-    __publicField(this, "colorMap", /* @__PURE__ */ new Map());
-    __publicField(this, "context");
-    this.context = args.context;
-  }
-  createOrUpdate(key, args) {
-    let colorEntity = this.colorMap.get(key);
-    if ("alias" in args) {
-      colorEntity = new ColorAlias(key, args.alias, this);
-    } else if ("hex" in args) {
-      colorEntity = new ColorFromHex(key, args.hex);
-    } else {
-      try {
-        if (colorEntity instanceof ColorFromPalette) {
-          colorEntity.update(args);
+const defaultColors = ({
+  colors,
+  context: c,
+  palettes
+}) => {
+  const getColor = (key) => {
+    return colors.get(key);
+  };
+  return {
+    ////////////////////////////////////////////////////////////////
+    // Surfaces [S]                                               //
+    ////////////////////////////////////////////////////////////////
+    surface: {
+      palette: () => palettes.get("neutral"),
+      tone: () => {
+        if (c.isDark) {
+          return 4;
         } else {
-          colorEntity = new ColorFromPalette(key, args, this.context);
+          if (Hct.isYellow(palettes.get("neutral").hue)) {
+            return 99;
+          } else if (c.variant.name === "vibrant") {
+            return 97;
+          } else {
+            return 98;
+          }
         }
-      } catch (e) {
-        console.error(e);
-        throw new Error(`Invalid color options provided for ${key}`);
-      }
-    }
-    this.colorMap.set(key, colorEntity);
-    return colorEntity;
-  }
-  remove(key) {
-    return this.colorMap.delete(key);
-  }
-  get(key) {
-    const colorEntity = this.colorMap.get(key);
-    if (colorEntity) {
-      return colorEntity;
-    } else {
-      throw new Error(`Color ${key} does not exist`);
-    }
-  }
-  getAll() {
-    return this.colorMap;
-  }
-}
-function getCurve(defaultContrast) {
-  if (defaultContrast === 1.5) {
-    return new ContrastCurve(1.5, 1.5, 3, 4.5);
-  } else if (defaultContrast === 3) {
-    return new ContrastCurve(3, 3, 4.5, 7);
-  } else if (defaultContrast === 4.5) {
-    return new ContrastCurve(4.5, 4.5, 7, 11);
-  } else if (defaultContrast === 6) {
-    return new ContrastCurve(6, 6, 7, 11);
-  } else if (defaultContrast === 7) {
-    return new ContrastCurve(7, 7, 11, 21);
-  } else if (defaultContrast === 9) {
-    return new ContrastCurve(9, 9, 11, 21);
-  } else if (defaultContrast === 11) {
-    return new ContrastCurve(11, 11, 21, 21);
-  } else if (defaultContrast === 21) {
-    return new ContrastCurve(21, 21, 21, 21);
-  } else {
-    return new ContrastCurve(defaultContrast, defaultContrast, 7, 21);
-  }
-}
-function tMaxC(palette, lowerBound = 0, upperBound = 100, chromaMultiplier = 1) {
-  const answer = findBestToneForChroma(
-    palette.hue,
-    palette.chroma * chromaMultiplier,
-    100,
-    true
-  );
-  return materialColorUtilities.clampDouble(lowerBound, upperBound, answer);
-}
-function tMinC(palette, lowerBound = 0, upperBound = 100) {
-  const answer = findBestToneForChroma(palette.hue, palette.chroma, 0, false);
-  return materialColorUtilities.clampDouble(lowerBound, upperBound, answer);
-}
-function findBestToneForChroma(hue, chroma, tone, byDecreasingTone) {
-  let answer = tone;
-  let bestCandidate = Hct.from(hue, chroma, answer);
-  while (bestCandidate.chroma < chroma) {
-    if (tone < 0 || tone > 100) {
-      break;
-    }
-    tone += byDecreasingTone ? -1 : 1;
-    const newCandidate = Hct.from(hue, chroma, tone);
-    if (bestCandidate.chroma < newCandidate.chroma) {
-      bestCandidate = newCandidate;
-      answer = tone;
-    }
-  }
-  return answer;
-}
-function calculateToneAdjustmentPercentage(toneA, toneB, desiredRatio) {
-  const currentRatio = materialColorUtilities.Contrast.ratioOfTones(toneA, toneB);
-  if (currentRatio >= desiredRatio) {
-    return 0;
-  }
-  const lighterTone = materialColorUtilities.Contrast.lighter(toneA, desiredRatio);
-  const darkerTone = materialColorUtilities.Contrast.darker(toneA, desiredRatio);
-  if (lighterTone !== -1 && toneB < lighterTone) {
-    const percentageToAdjust = (toneB - lighterTone) / (toneA - lighterTone);
-    return materialColorUtilities.clampDouble(0, 1, percentageToAdjust);
-  }
-  if (darkerTone !== -1 && toneB > darkerTone) {
-    const percentageToAdjust = (toneB - darkerTone) / (toneA - darkerTone);
-    return materialColorUtilities.clampDouble(0, 1, percentageToAdjust);
-  }
-  return 0;
-}
-function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-class ColorApi {
-  constructor({ colorManager }) {
-    __publicField(this, "colorManager");
-    __publicField(this, "api");
-    this.colorManager = colorManager;
-  }
-  getAll() {
-    return this.colorManager.getAll();
-  }
-  addColor(key, color) {
-    return this.colorManager.createOrUpdate(key, color);
-  }
-  addColors(args) {
-    if (!this.api)
-      throw new Error(
-        "The API is not initialized. Please call bootstrap() before calling addColors()."
-      );
-    if (typeof args === "function") {
-      args = args(this.api);
-    }
-    if (args) {
-      Object.entries(args).forEach(([name, colorOption]) => {
-        this.addColor(name, colorOption);
-      });
-    }
-  }
-  get(key) {
-    return this.colorManager.get(key);
-  }
-  remove(key) {
-    return this.colorManager.remove(key);
-  }
-  update(key, newColor) {
-    return this.colorManager.createOrUpdate(key, newColor);
-  }
-  addFromCustomPalette(key) {
-    const colorKey = key;
-    const colorDimKey = colorKey + "Dim";
-    const ColorKey = capitalizeFirstLetter(key);
-    const onColorKey = "on" + ColorKey;
-    const colorContainerKey = colorKey + "Container";
-    const onColorContainerKey = "on" + ColorKey + "Container";
-    const colorFixedKey = colorKey + "Fixed";
-    const colorFixedDimKey = colorKey + "FixedDim";
-    const onColorFixedKey = "on" + ColorKey + "Fixed";
-    const onColorFixedVariantKey = "on" + ColorKey + "FixedVariant";
-    const colors = ({ palettes, colors: colors2, context: ctx }) => ({
-      [colorKey]: {
-        palette: () => palettes.get(colorKey),
-        tone: () => {
-          if (ctx.variant.name === "neutral") {
-            return ctx.isDark ? tMinC(palettes.get(colorKey), 0, 98) : tMaxC(palettes.get(colorKey));
-          } else if (ctx.variant.name === "vibrant") {
-            return tMaxC(palettes.get(colorKey), 0, ctx.isDark ? 90 : 98);
-          } else {
-            return ctx.isDark ? 80 : tMaxC(palettes.get(colorKey));
-          }
-        },
-        isBackground: true,
-        background: () => highestSurface(ctx, this),
-        contrastCurve: () => getCurve(4.5),
-        adjustTone: () => toneDeltaPair(
-          colors2.get(colorContainerKey),
-          colors2.get(colorKey),
-          5,
-          "relative_lighter",
-          true,
-          "farther"
-        )
-      },
-      [colorDimKey]: {
-        palette: () => palettes.get(colorKey),
-        tone: () => {
-          if (ctx.variant.name === "neutral") {
-            return 85;
-          } else {
-            return tMaxC(palettes.get(colorKey), 0, 90);
-          }
-        },
-        isBackground: true,
-        background: () => this.get("surfaceContainerHigh"),
-        contrastCurve: () => getCurve(4.5),
-        adjustTone: () => toneDeltaPair(
-          this.get(colorDimKey),
-          this.get(colorKey),
-          5,
-          "darker",
-          true,
-          "farther"
-        )
-      },
-      [onColorKey]: {
-        palette: () => palettes.get(colorKey),
-        background: () => this.get(colorKey),
-        contrastCurve: () => getCurve(6)
-      },
-      [colorContainerKey]: {
-        palette: () => palettes.get(colorKey),
-        tone: () => {
-          if (ctx.variant.name === "vibrant") {
-            return ctx.isDark ? tMinC(palettes.get(colorKey), 30, 40) : tMaxC(palettes.get(colorKey), 84, 90);
-          } else if (ctx.variant.name === "expressive") {
-            return ctx.isDark ? 15 : tMaxC(palettes.get(colorKey), 90, 95);
-          } else {
-            return ctx.isDark ? 25 : 90;
-          }
-        },
-        isBackground: true,
-        background: () => highestSurface(ctx, this),
-        adjustTone: () => void 0,
-        contrastCurve: () => ctx.contrastLevel > 0 ? getCurve(1.5) : void 0
-      },
-      [onColorContainerKey]: {
-        palette: () => palettes.get(colorKey),
-        background: () => this.get(colorContainerKey),
-        contrastCurve: () => getCurve(6)
-      },
-      [colorFixedKey]: {
-        palette: () => palettes.get(colorKey),
-        tone: () => {
-          return ctx.temp({ isDark: false, contrastLevel: 0 }, () => {
-            const color = this.get(colorContainerKey);
-            return color.getTone();
-          });
-        },
-        isBackground: true,
-        background: () => highestSurface(ctx, this),
-        contrastCurve: () => ctx.contrastLevel > 0 ? getCurve(1.5) : void 0
-      },
-      [colorFixedDimKey]: {
-        palette: () => palettes.get(colorKey),
-        tone: () => this.get(colorFixedKey).getTone(),
-        isBackground: true,
-        adjustTone: () => toneDeltaPair(
-          this.get(colorFixedDimKey),
-          this.get(colorFixedKey),
-          5,
-          "darker",
-          true,
-          "exact"
-        )
-      },
-      [onColorFixedKey]: {
-        palette: () => palettes.get(colorKey),
-        background: () => this.get(colorFixedDimKey),
-        contrastCurve: () => getCurve(7)
-      },
-      [onColorFixedVariantKey]: {
-        palette: () => palettes.get(colorKey),
-        background: () => this.get(colorFixedDimKey),
-        contrastCurve: () => getCurve(4.5)
-      }
-    });
-    this.addColors(colors);
-  }
-}
-const ColorModule = {
-  colorManager: awilix.asClass(ColorManager).singleton(),
-  colorApi: awilix.asClass(ColorApi).singleton()
-};
-const inverseTone = (tone) => {
-  return 100 - tone;
-};
-const defaultColors = ({
-  colors,
-  context: c,
-  palettes
-}) => {
-  const getColor = (key) => {
-    return colors.get(key);
-  };
-  return {
-    ////////////////////////////////////////////////////////////////
-    // Surfaces [S]                                               //
-    ////////////////////////////////////////////////////////////////
-    surface: {
-      palette: () => palettes.get("neutral"),
-      tone: () => {
-        if (c.isDark) {
-          return 4;
-        } else {
-          if (c.variant.name == "fidelity") {
-            return 100;
-          }
-          if (Hct.isYellow(palettes.get("neutral").hue)) {
-            return 99;
-          } else if (c.variant.name === "vibrant") {
-            return 97;
-          } else {
-            return 98;
-          }
-        }
-      },
-      isBackground: true
-    },
-    surfaceDim: {
-      palette: () => palettes.get("neutral"),
-      tone: () => {
-        if (c.isDark) {
-          return 4;
-        } else {
-          if (Hct.isYellow(palettes.get("neutral").hue)) {
-            return 90;
-          } else if (c.variant.name === "vibrant") {
-            return 85;
-          } else {
-            return 87;
-          }
-        }
-      },
-      isBackground: true,
-      chromaMultiplier: () => {
-        if (!c.isDark) {
-          if (c.variant.name === "neutral") {
-            return 2.5;
-          } else if (c.variant.name === "tonalSpot") {
-            return 1.7;
-          } else if (c.variant.name === "expressive") {
-            return Hct.isYellow(palettes.get("neutral").hue) ? 2.7 : 1.75;
-          } else if (c.variant.name === "vibrant") {
-            return 1.36;
-          }
-        }
-        return 1;
+      },
+      isBackground: true
+    },
+    surfaceDim: {
+      palette: () => palettes.get("neutral"),
+      tone: () => {
+        if (c.isDark) {
+          return 4;
+        } else {
+          if (Hct.isYellow(palettes.get("neutral").hue)) {
+            return 90;
+          } else if (c.variant.name === "vibrant") {
+            return 85;
+          } else {
+            return 87;
+          }
+        }
+      },
+      isBackground: true,
+      chromaMultiplier: () => {
+        if (!c.isDark) {
+          if (c.variant.name === "neutral") {
+            return 2.5;
+          } else if (c.variant.name === "tonalSpot") {
+            return 1.7;
+          } else if (c.variant.name === "expressive") {
+            return Hct.isYellow(palettes.get("neutral").hue) ? 2.7 : 1.75;
+          } else if (c.variant.name === "vibrant") {
+            return 1.36;
+          }
+        }
+        return 1;
       }
     },
     surfaceBright: {
@@ -1902,7 +1694,7 @@ const defaultColors = ({
         if (c.variant.name === "vibrant") {
           return tMaxC(palettes.get("neutral"), 0, 100, 1.1);
         } else {
-          return getInitialToneFromBackground(highestSurface(c, colors));
+          return getInitialToneFromBackground(highestSurface$1(c, colors));
         }
       },
       chromaMultiplier: () => {
@@ -1915,7 +1707,7 @@ const defaultColors = ({
         }
         return 1;
       },
-      background: () => highestSurface(c, colors),
+      background: () => highestSurface$1(c, colors),
       contrastCurve: () => c.isDark ? getCurve(11) : getCurve(9)
     },
     onSurfaceVariant: {
@@ -1930,7 +1722,7 @@ const defaultColors = ({
         }
         return 1;
       },
-      background: () => highestSurface(c, colors),
+      background: () => highestSurface$1(c, colors),
       contrastCurve: () => c.isDark ? getCurve(6) : getCurve(4.5)
     },
     outline: {
@@ -1945,7 +1737,7 @@ const defaultColors = ({
         }
         return 1;
       },
-      background: () => highestSurface(c, colors),
+      background: () => highestSurface$1(c, colors),
       contrastCurve: () => getCurve(3)
     },
     outlineVariant: {
@@ -1960,7 +1752,7 @@ const defaultColors = ({
         }
         return 1;
       },
-      background: () => highestSurface(c, colors),
+      background: () => highestSurface$1(c, colors),
       contrastCurve: () => getCurve(1.5)
     },
     inverseSurface: {
@@ -1994,8 +1786,6 @@ const defaultColors = ({
             0,
             Hct.isYellow(palettes.get("primary").hue) ? 25 : Hct.isCyan(palettes.get("primary").hue) ? 88 : 98
           );
-        } else if (c.variant.name == "fidelity") {
-          return c.sourceColor.tone;
         } else {
           return tMaxC(
             palettes.get("primary"),
@@ -2005,23 +1795,9 @@ const defaultColors = ({
         }
       },
       isBackground: true,
-      background: () => highestSurface(c, colors),
+      background: () => highestSurface$1(c, colors),
       contrastCurve: () => getCurve(4.5),
-      adjustTone: () => c.variant.name == "fidelity" ? () => {
-        const surfaceTone = colors.get("surface").getTone();
-        const primaryTone = colors.get("primary").options.tone;
-        let selfTone = primaryTone;
-        if (materialColorUtilities.Contrast.ratioOfTones(surfaceTone, selfTone) < 3) {
-          const ratio = calculateToneAdjustmentPercentage(
-            surfaceTone,
-            selfTone,
-            3
-          );
-          const inverseT = inverseTone(primaryTone);
-          selfTone = selfTone + (inverseT - selfTone) * ratio;
-        }
-        return selfTone;
-      } : toneDeltaPair(
+      adjustTone: () => toneDeltaPair(
         colors.get("primaryContainer"),
         colors.get("primary"),
         5,
@@ -2072,26 +1848,14 @@ const defaultColors = ({
             Hct.isCyan(palettes.get("primary").hue) ? 88 : 90
           );
         }
-        if (c.variant.name == "fidelity") {
-          return c.isDark ? tMinC(palettes.get("primary"), 35, 93) : tMaxC(palettes.get("primary"), 0, 90);
-        } else {
-          return c.isDark ? tMinC(palettes.get("primary"), 66, 93) : tMaxC(
-            palettes.get("primary"),
-            66,
-            Hct.isCyan(palettes.get("primary").hue) ? 88 : 93
-          );
-        }
+        return c.isDark ? tMinC(palettes.get("primary"), 66, 93) : tMaxC(
+          palettes.get("primary"),
+          66,
+          Hct.isCyan(palettes.get("primary").hue) ? 88 : 93
+        );
       },
       isBackground: true,
-      background: () => highestSurface(c, colors),
-      adjustTone: () => c.variant.name == "fidelity" ? toneDeltaPair(
-        colors.get("primary"),
-        colors.get("primaryContainer"),
-        15,
-        "relative_darker",
-        true,
-        "farther"
-      ) : void 0,
+      background: () => highestSurface$1(c, colors),
       contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
     },
     onPrimaryContainer: {
@@ -2114,7 +1878,7 @@ const defaultColors = ({
         );
       },
       isBackground: true,
-      background: () => highestSurface(c, colors),
+      background: () => highestSurface$1(c, colors),
       contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
     },
     primaryFixedDim: {
@@ -2161,7 +1925,7 @@ const defaultColors = ({
         }
       },
       isBackground: true,
-      background: () => highestSurface(c, colors),
+      background: () => highestSurface$1(c, colors),
       contrastCurve: () => getCurve(4.5),
       adjustTone: () => toneDeltaPair(
         getColor("secondaryContainer"),
@@ -2210,7 +1974,7 @@ const defaultColors = ({
         }
       },
       isBackground: true,
-      background: () => highestSurface(c, colors),
+      background: () => highestSurface$1(c, colors),
       adjustTone: () => void 0,
       contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
     },
@@ -2234,7 +1998,7 @@ const defaultColors = ({
         );
       },
       isBackground: true,
-      background: () => highestSurface(c, colors),
+      background: () => highestSurface$1(c, colors),
       contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
     },
     secondaryFixedDim: {
@@ -2277,7 +2041,7 @@ const defaultColors = ({
         }
       },
       isBackground: true,
-      background: () => highestSurface(c, colors),
+      background: () => highestSurface$1(c, colors),
       contrastCurve: () => getCurve(4.5),
       adjustTone: () => toneDeltaPair(
         getColor("tertiaryContainer"),
@@ -2332,7 +2096,7 @@ const defaultColors = ({
         }
       },
       isBackground: true,
-      background: () => highestSurface(c, colors),
+      background: () => highestSurface$1(c, colors),
       adjustTone: () => void 0,
       contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
     },
@@ -2356,7 +2120,7 @@ const defaultColors = ({
         );
       },
       isBackground: true,
-      background: () => highestSurface(c, colors),
+      background: () => highestSurface$1(c, colors),
       contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
     },
     tertiaryFixedDim: {
@@ -2391,7 +2155,7 @@ const defaultColors = ({
         return c.isDark ? tMinC(palettes.get("error"), 0, 98) : tMaxC(palettes.get("error"));
       },
       isBackground: true,
-      background: () => highestSurface(c, colors),
+      background: () => highestSurface$1(c, colors),
       contrastCurve: () => getCurve(4.5),
       adjustTone: () => toneDeltaPair(
         colors.get("errorContainer"),
@@ -2428,7 +2192,7 @@ const defaultColors = ({
         return c.isDark ? tMinC(palettes.get("error"), 30, 93) : tMaxC(palettes.get("error"), 0, 90);
       },
       isBackground: true,
-      background: () => highestSurface(c, colors),
+      background: () => highestSurface$1(c, colors),
       adjustTone: () => void 0,
       contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
     },
@@ -2452,7 +2216,229 @@ const defaultColors = ({
     onBackground: {
       alias: "onSurface"
     }
-  };
+  };
+};
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+class ColorApi {
+  constructor({
+    colorManager,
+    context
+  }) {
+    __publicField(this, "colorManager");
+    __publicField(this, "context");
+    __publicField(this, "api");
+    this.context = context;
+    this.colorManager = colorManager;
+    this.context.onUpdate((changed) => {
+      if (changed.includes("variant")) {
+        this.colorManager.clear();
+        this.addColors(this.context.variant.colors);
+      }
+    });
+  }
+  getAll() {
+    return this.colorManager.getAll();
+  }
+  addColor(key, color) {
+    return this.colorManager.createOrUpdate(key, color);
+  }
+  addColors(args) {
+    if (!this.api)
+      throw new Error(
+        "The API is not initialized. Please call bootstrap() before calling addColors()."
+      );
+    if (typeof args === "function") {
+      args = args(this.api);
+    }
+    if (args) {
+      Object.entries(args).forEach(([name, colorOption]) => {
+        this.addColor(name, colorOption);
+      });
+    }
+  }
+  get(key) {
+    return this.colorManager.get(key);
+  }
+  remove(key) {
+    return this.colorManager.remove(key);
+  }
+  update(key, newColor) {
+    return this.colorManager.createOrUpdate(key, newColor);
+  }
+  addFromCustomPalette(key) {
+    if (this.context.variant.colorsFromCustomPalette) {
+      return this.addColors(this.context.variant.colorsFromCustomPalette(key));
+    }
+    const colorKey = key;
+    const colorDimKey = colorKey + "Dim";
+    const ColorKey = capitalizeFirstLetter(key);
+    const onColorKey = "on" + ColorKey;
+    const colorContainerKey = colorKey + "Container";
+    const onColorContainerKey = "on" + ColorKey + "Container";
+    const colorFixedKey = colorKey + "Fixed";
+    const colorFixedDimKey = colorKey + "FixedDim";
+    const onColorFixedKey = "on" + ColorKey + "Fixed";
+    const onColorFixedVariantKey = "on" + ColorKey + "FixedVariant";
+    const colors = ({ palettes, colors: colors2, context: ctx }) => ({
+      [colorKey]: {
+        palette: () => palettes.get(colorKey),
+        tone: () => {
+          if (ctx.variant.name === "neutral") {
+            return ctx.isDark ? tMinC(palettes.get(colorKey), 0, 98) : tMaxC(palettes.get(colorKey));
+          } else if (ctx.variant.name === "vibrant") {
+            return tMaxC(palettes.get(colorKey), 0, ctx.isDark ? 90 : 98);
+          } else {
+            return ctx.isDark ? 80 : tMaxC(palettes.get(colorKey));
+          }
+        },
+        isBackground: true,
+        background: () => highestSurface$1(ctx, this),
+        contrastCurve: () => getCurve(4.5),
+        adjustTone: () => toneDeltaPair(
+          colors2.get(colorContainerKey),
+          colors2.get(colorKey),
+          5,
+          "relative_lighter",
+          true,
+          "farther"
+        )
+      },
+      [colorDimKey]: {
+        palette: () => palettes.get(colorKey),
+        tone: () => {
+          if (ctx.variant.name === "neutral") {
+            return 85;
+          } else {
+            return tMaxC(palettes.get(colorKey), 0, 90);
+          }
+        },
+        isBackground: true,
+        background: () => this.get("surfaceContainerHigh"),
+        contrastCurve: () => getCurve(4.5),
+        adjustTone: () => toneDeltaPair(
+          this.get(colorDimKey),
+          this.get(colorKey),
+          5,
+          "darker",
+          true,
+          "farther"
+        )
+      },
+      [onColorKey]: {
+        palette: () => palettes.get(colorKey),
+        background: () => this.get(colorKey),
+        contrastCurve: () => getCurve(6)
+      },
+      [colorContainerKey]: {
+        palette: () => palettes.get(colorKey),
+        tone: () => {
+          if (ctx.variant.name === "vibrant") {
+            return ctx.isDark ? tMinC(palettes.get(colorKey), 30, 40) : tMaxC(palettes.get(colorKey), 84, 90);
+          } else if (ctx.variant.name === "expressive") {
+            return ctx.isDark ? 15 : tMaxC(palettes.get(colorKey), 90, 95);
+          } else {
+            return ctx.isDark ? 25 : 90;
+          }
+        },
+        isBackground: true,
+        background: () => highestSurface$1(ctx, this),
+        adjustTone: () => void 0,
+        contrastCurve: () => ctx.contrastLevel > 0 ? getCurve(1.5) : void 0
+      },
+      [onColorContainerKey]: {
+        palette: () => palettes.get(colorKey),
+        background: () => this.get(colorContainerKey),
+        contrastCurve: () => getCurve(6)
+      },
+      [colorFixedKey]: {
+        palette: () => palettes.get(colorKey),
+        tone: () => {
+          return ctx.temp({ isDark: false, contrastLevel: 0 }, () => {
+            const color = this.get(colorContainerKey);
+            return color.getTone();
+          });
+        },
+        isBackground: true,
+        background: () => highestSurface$1(ctx, this),
+        contrastCurve: () => ctx.contrastLevel > 0 ? getCurve(1.5) : void 0
+      },
+      [colorFixedDimKey]: {
+        palette: () => palettes.get(colorKey),
+        tone: () => this.get(colorFixedKey).getTone(),
+        isBackground: true,
+        adjustTone: () => toneDeltaPair(
+          this.get(colorFixedDimKey),
+          this.get(colorFixedKey),
+          5,
+          "darker",
+          true,
+          "exact"
+        )
+      },
+      [onColorFixedKey]: {
+        palette: () => palettes.get(colorKey),
+        background: () => this.get(colorFixedDimKey),
+        contrastCurve: () => getCurve(7)
+      },
+      [onColorFixedVariantKey]: {
+        palette: () => palettes.get(colorKey),
+        background: () => this.get(colorFixedDimKey),
+        contrastCurve: () => getCurve(4.5)
+      }
+    });
+    this.addColors(colors);
+  }
+}
+class ColorManager {
+  constructor(args) {
+    __publicField(this, "colorMap", /* @__PURE__ */ new Map());
+    __publicField(this, "context");
+    this.context = args.context;
+  }
+  createOrUpdate(key, args) {
+    let colorEntity = this.colorMap.get(key);
+    if ("alias" in args) {
+      colorEntity = new ColorAlias(key, args.alias, this);
+    } else if ("hex" in args) {
+      colorEntity = new ColorFromHex(key, args.hex);
+    } else {
+      try {
+        if (colorEntity instanceof ColorFromPalette) {
+          colorEntity.update(args);
+        } else {
+          colorEntity = new ColorFromPalette(key, args, this.context);
+        }
+      } catch (e) {
+        console.error(e);
+        throw new Error(`Invalid color options provided for ${key}`);
+      }
+    }
+    this.colorMap.set(key, colorEntity);
+    return colorEntity;
+  }
+  remove(key) {
+    return this.colorMap.delete(key);
+  }
+  clear() {
+    this.colorMap.clear();
+  }
+  get(key) {
+    const colorEntity = this.colorMap.get(key);
+    if (colorEntity) {
+      return colorEntity;
+    } else {
+      throw new Error(`Color ${key} does not exist`);
+    }
+  }
+  getAll() {
+    return this.colorMap;
+  }
+}
+const ColorModule = {
+  colorManager: awilix.asClass(ColorManager).singleton(),
+  colorApi: awilix.asClass(ColorApi).singleton()
 };
 const AppModule = {
   api: awilix.asClass(API).singleton()
@@ -2666,7 +2652,7 @@ class Palette {
     })) {
       result = this.callback(this.context);
     }
-    if (result && this.hueCache !== result.hue && this.chromaCache !== result.chroma) {
+    if (result && (this.hueCache !== result.hue || this.chromaCache !== result.chroma)) {
       this.clearCache();
       this.hueCache = result.hue;
       this.chromaCache = result.chroma;
@@ -2856,6 +2842,7 @@ class Variant {
   constructor(options) {
     __publicField(this, "_palettes");
     __publicField(this, "customPalettes");
+    __publicField(this, "colorsFromCustomPalette");
     __publicField(this, "colors");
     __publicField(this, "name");
     __publicField(this, "context");
@@ -2863,6 +2850,7 @@ class Variant {
     this.customPalettes = options.customPalettes;
     this.colors = options.colors || {};
     this.name = options.name;
+    this.colorsFromCustomPalette = options.colorsFromCustomPalette;
   }
   get palettes() {
     if (!this._palettes) {
@@ -2949,7 +2937,8 @@ const expressiveVariant = variant({
       [-160, 155, -100, 96, -96, -156, -165, -160]
     ),
     isDark ? 16 : 24
-  )
+  ),
+  colors: defaultColors
 });
 const neutralVariant = variant({
   name: "neutral",
@@ -2984,7 +2973,8 @@ const neutralVariant = variant({
   customPalettes: (_, colorHct) => materialColorUtilities.TonalPalette.fromHueAndChroma(
     colorHct.hue,
     Hct.isBlue(colorHct.hue) ? 6 : 4
-  )
+  ),
+  colors: defaultColors
 });
 const tonalSpotVariant = variant({
   name: "tonalSpot",
@@ -3010,7 +3000,8 @@ const tonalSpotVariant = variant({
       return materialColorUtilities.TonalPalette.fromHueAndChroma(errorHue, 60);
     }
   },
-  customPalettes: (_, colorHct) => materialColorUtilities.TonalPalette.fromHueAndChroma(colorHct.hue, 16)
+  customPalettes: (_, colorHct) => materialColorUtilities.TonalPalette.fromHueAndChroma(colorHct.hue, 16),
+  colors: defaultColors
 });
 const getVibrantNeutralHue = (sourceColor) => {
   return getRotatedHue(
@@ -3070,10 +3061,33 @@ const vibrantVariant = variant({
       [-14, 10, -14, 10, -14]
     ),
     56
-  )
+  ),
+  colors: defaultColors
 });
-const fidelityVariant = variant({
-  name: "fidelity",
+const surfaceContainerToneDelta = 2.5;
+const inverseTone = (tone) => {
+  return 100 - tone;
+};
+const surfaceContainerTone = (layer, api) => {
+  const t = surfaceContainerToneDelta * layer * (1 + api.context.contrastLevel);
+  if (api.context.isDark) {
+    return t * 1.5;
+  } else {
+    if (Hct.isYellow(api.palettes.get("neutral").hue)) {
+      return 100 - t - surfaceContainerToneDelta;
+    }
+    return 100 - t;
+  }
+};
+const highestSurface = (context, colorService) => {
+  if (colorService instanceof ColorApi) {
+    return colorService.get("surface");
+  } else {
+    return colorService.get("surface");
+  }
+};
+const udixioVariant = variant({
+  name: "udixio",
   palettes: {
     primary: ({ sourceColor }) => ({
       hue: sourceColor.hue,
@@ -3091,14 +3105,19 @@ const fidelityVariant = variant({
       ),
       chroma: sourceColor.chroma
     }),
-    neutral: ({ sourceColor }) => ({
-      hue: sourceColor.hue,
-      chroma: 5
-    }),
-    neutralVariant: ({ sourceColor }) => ({
-      hue: sourceColor.hue,
-      chroma: 5 * 1.7
-    }),
+    neutral: ({ sourceColor }) => {
+      return {
+        hue: sourceColor.hue,
+        chroma: 5
+      };
+    },
+    neutralVariant: ({ sourceColor }) => {
+      const neutral = 5;
+      return {
+        hue: sourceColor.hue,
+        chroma: neutral * 1.7
+      };
+    },
     error: ({ sourceColor }) => {
       const errorHue = getPiecewiseHue(
         sourceColor,
@@ -3114,14 +3133,703 @@ const fidelityVariant = variant({
   customPalettes: ({ sourceColor }, colorHct) => ({
     hue: colorHct.hue,
     chroma: sourceColor.chroma
-  })
+  }),
+  colorsFromCustomPalette: (key) => {
+    const colorKey = key;
+    const ColorKey = capitalizeFirstLetter(key);
+    const onColorKey = "on" + ColorKey;
+    const colorContainerKey = colorKey + "Container";
+    const onColorContainerKey = "on" + ColorKey + "Container";
+    const colors = ({ palettes, colors: colors2, context: ctx }) => ({
+      [colorKey]: {
+        palette: () => palettes.get(colorKey),
+        tone: () => {
+          if (ctx.variant.name === "neutral") {
+            return ctx.isDark ? tMinC(palettes.get(colorKey), 0, 98) : tMaxC(palettes.get(colorKey));
+          } else if (ctx.variant.name === "vibrant") {
+            return tMaxC(palettes.get(colorKey), 0, ctx.isDark ? 90 : 98);
+          } else {
+            return ctx.isDark ? 80 : tMaxC(palettes.get(colorKey));
+          }
+        },
+        isBackground: true,
+        background: () => highestSurface(ctx, colors2),
+        contrastCurve: () => getCurve(4.5),
+        adjustTone: () => toneDeltaPair(
+          colors2.get(colorContainerKey),
+          colors2.get(colorKey),
+          5,
+          "relative_lighter",
+          true,
+          "farther"
+        )
+      },
+      // [colorDimKey]: {
+      //   palette: () => palettes.get(colorKey),
+      //   tone: () => {
+      //     if (ctx.variant.name === 'neutral') {
+      //       return 85;
+      //     } else {
+      //       return tMaxC(palettes.get(colorKey), 0, 90);
+      //     }
+      //   },
+      //   isBackground: true,
+      //   background: () => colors.get('surfaceContainerHigh'),
+      //   contrastCurve: () => getCurve(4.5),
+      //   adjustTone: () =>
+      //     toneDeltaPair(
+      //       colors.get(colorDimKey),
+      //       colors.get(colorKey),
+      //       5,
+      //       'darker',
+      //       true,
+      //       'farther',
+      //     ),
+      // },
+      [onColorKey]: {
+        palette: () => palettes.get(colorKey),
+        background: () => colors2.get(colorKey),
+        contrastCurve: () => getCurve(6)
+      },
+      [colorContainerKey]: {
+        palette: () => palettes.get(colorKey),
+        tone: () => {
+          if (ctx.variant.name === "vibrant") {
+            return ctx.isDark ? tMinC(palettes.get(colorKey), 30, 40) : tMaxC(palettes.get(colorKey), 84, 90);
+          } else if (ctx.variant.name === "expressive") {
+            return ctx.isDark ? 15 : tMaxC(palettes.get(colorKey), 90, 95);
+          } else {
+            return ctx.isDark ? 25 : 90;
+          }
+        },
+        isBackground: true,
+        background: () => highestSurface(ctx, colors2),
+        adjustTone: () => void 0,
+        contrastCurve: () => ctx.contrastLevel > 0 ? getCurve(1.5) : void 0
+      },
+      [onColorContainerKey]: {
+        palette: () => palettes.get(colorKey),
+        background: () => colors2.get(colorContainerKey),
+        contrastCurve: () => getCurve(6)
+      }
+      // [colorFixedKey]: {
+      //   palette: () => palettes.get(colorKey),
+      //   tone: () => {
+      //     return ctx.temp({ isDark: false, contrastLevel: 0 }, () => {
+      //       const color = colors.get(colorContainerKey);
+      //       return color.getTone();
+      //     });
+      //   },
+      //   isBackground: true,
+      //   background: () => highestSurface(ctx, colors),
+      //   contrastCurve: () =>
+      //     ctx.contrastLevel > 0 ? getCurve(1.5) : undefined,
+      // },
+      // [colorFixedDimKey]: {
+      //   palette: () => palettes.get(colorKey),
+      //   tone: () => colors.get(colorFixedKey).getTone(),
+      //   isBackground: true,
+      //   adjustTone: () =>
+      //     toneDeltaPair(
+      //       colors.get(colorFixedDimKey),
+      //       colors.get(colorFixedKey),
+      //       5,
+      //       'darker',
+      //       true,
+      //       'exact',
+      //     ),
+      // },
+      // [onColorFixedKey]: {
+      //   palette: () => palettes.get(colorKey),
+      //   background: () => this.get(colorFixedDimKey),
+      //   contrastCurve: () => getCurve(7),
+      // },
+      // [onColorFixedVariantKey]: {
+      //   palette: () => palettes.get(colorKey),
+      //   background: () => colors.get(colorFixedDimKey),
+      //   contrastCurve: () => getCurve(4.5),
+      // },
+    });
+    return colors;
+  },
+  colors: ({ colors, context: c, palettes }) => {
+    const getColor = (key) => {
+      return colors.get(key);
+    };
+    return {
+      ////////////////////////////////////////////////////////////////
+      // Surfaces [S]                                               //
+      ////////////////////////////////////////////////////////////////
+      surface: {
+        palette: () => palettes.get("neutral"),
+        tone: () => {
+          if (c.isDark) {
+            return 2;
+          } else {
+            return 99;
+          }
+        },
+        isBackground: true
+      },
+      // surfaceDim: {
+      //   palette: () => palettes.get('neutral'),
+      //   tone: () => {
+      //     if (c.isDark) {
+      //       return 4;
+      //     } else {
+      //       if (Hct.isYellow(palettes.get('neutral').hue)) {
+      //         return 90;
+      //       } else if (c.variant.name === 'vibrant') {
+      //         return 85;
+      //       } else {
+      //         return 87;
+      //       }
+      //     }
+      //   },
+      //   isBackground: true,
+      //   chromaMultiplier: () => {
+      //     if (!c.isDark) {
+      //       if (c.variant.name === 'neutral') {
+      //         return 2.5;
+      //       } else if (c.variant.name === 'tonalSpot') {
+      //         return 1.7;
+      //       } else if (c.variant.name === 'expressive') {
+      //         return Hct.isYellow(palettes.get('neutral').hue) ? 2.7 : 1.75;
+      //       } else if (c.variant.name === 'vibrant') {
+      //         return 1.36;
+      //       }
+      //     }
+      //     return 1;
+      //   },
+      // },
+      // surfaceBright: {
+      //   palette: () => palettes.get('neutral'),
+      //   tone: () => {
+      //     if (c.isDark) {
+      //       return 18;
+      //     } else {
+      //       if (Hct.isYellow(palettes.get('neutral').hue)) {
+      //         return 99;
+      //       } else if (c.variant.name === 'vibrant') {
+      //         return 97;
+      //       } else {
+      //         return 98;
+      //       }
+      //     }
+      //   },
+      //   isBackground: true,
+      //   chromaMultiplier: () => {
+      //     if (c.isDark) {
+      //       if (c.variant.name === 'neutral') {
+      //         return 2.5;
+      //       } else if (c.variant.name === 'tonalSpot') {
+      //         return 1.7;
+      //       } else if (c.variant.name === 'expressive') {
+      //         return Hct.isYellow(palettes.get('neutral').hue) ? 2.7 : 1.75;
+      //       } else if (c.variant.name === 'vibrant') {
+      //         return 1.36;
+      //       }
+      //     }
+      //     return 1;
+      //   },
+      // },
+      surfaceContainerLowest: {
+        palette: () => palettes.get("neutral"),
+        tone: () => surfaceContainerTone(0, { palettes, context: c }),
+        isBackground: true
+      },
+      surfaceContainerLow: {
+        palette: () => palettes.get("neutral"),
+        tone: () => surfaceContainerTone(1, { palettes, context: c }),
+        isBackground: true,
+        chromaMultiplier: () => {
+          return 1.25;
+        }
+      },
+      surfaceContainer: {
+        palette: () => palettes.get("neutral"),
+        tone: () => surfaceContainerTone(2, { palettes, context: c }),
+        isBackground: true,
+        chromaMultiplier: () => {
+          return 1.4;
+        }
+      },
+      surfaceContainerHigh: {
+        palette: () => palettes.get("neutral"),
+        tone: () => surfaceContainerTone(3, { palettes, context: c }),
+        isBackground: true,
+        chromaMultiplier: () => {
+          return 1.5;
+        }
+      },
+      surfaceContainerHighest: {
+        palette: () => palettes.get("neutral"),
+        tone: () => surfaceContainerTone(4, { palettes, context: c }),
+        isBackground: true,
+        chromaMultiplier: () => {
+          return 1.7;
+        }
+      },
+      onSurface: {
+        palette: () => palettes.get("neutral"),
+        tone: () => {
+          return getInitialToneFromBackground(highestSurface(c, colors));
+        },
+        chromaMultiplier: () => {
+          return 1.7;
+        },
+        background: () => highestSurface(c, colors),
+        contrastCurve: () => c.isDark ? getCurve(11) : getCurve(9)
+      },
+      onSurfaceVariant: {
+        palette: () => palettes.get("neutralVariant"),
+        chromaMultiplier: () => {
+          return 1.7;
+        },
+        background: () => highestSurface(c, colors),
+        contrastCurve: () => c.isDark ? getCurve(6) : getCurve(4.5)
+      },
+      outline: {
+        palette: () => palettes.get("neutralVariant"),
+        chromaMultiplier: () => {
+          return 1.7;
+        },
+        background: () => highestSurface(c, colors),
+        contrastCurve: () => getCurve(3)
+      },
+      outlineVariant: {
+        palette: () => palettes.get("neutralVariant"),
+        chromaMultiplier: () => {
+          return 1.7;
+        },
+        background: () => highestSurface(c, colors),
+        contrastCurve: () => getCurve(1.5)
+      },
+      inverseSurface: {
+        palette: () => palettes.get("neutral"),
+        tone: () => 100 - colors.get("surface").getTone(),
+        isBackground: true
+      },
+      inverseOnSurface: {
+        palette: () => palettes.get("neutral"),
+        tone: () => c.isDark ? 20 : 95,
+        background: () => colors.get("inverseSurface"),
+        contrastCurve: () => getCurve(7)
+      },
+      ////////////////////////////////////////////////////////////////
+      // Primaries [P]                                              //
+      ////////////////////////////////////////////////////////////////
+      primary: {
+        palette: () => palettes.get("primary"),
+        tone: () => {
+          return c.sourceColor.tone;
+        },
+        isBackground: true,
+        background: () => highestSurface(c, colors),
+        contrastCurve: () => getCurve(4.5),
+        adjustTone: () => () => {
+          const surfaceTone = colors.get("surface").getTone();
+          const primaryTone = colors.get("primary").options.tone;
+          let selfTone = primaryTone;
+          if (materialColorUtilities.Contrast.ratioOfTones(surfaceTone, selfTone) < 3) {
+            const ratio = calculateToneAdjustmentPercentage(
+              surfaceTone,
+              selfTone,
+              3
+            );
+            const inverseT = inverseTone(primaryTone);
+            selfTone = selfTone + (inverseT - selfTone) * ratio;
+          }
+          return selfTone;
+        }
+      },
+      // primaryDim: {
+      //   palette: () => palettes.get('primary'),
+      //   tone: () => {
+      //     if (c.variant.name === 'neutral') {
+      //       return 85;
+      //     } else if (c.variant.name === 'tonalSpot') {
+      //       return tMaxC(palettes.get('primary'), 0, 90);
+      //     } else {
+      //       return tMaxC(palettes.get('primary'));
+      //     }
+      //   },
+      //   isBackground: true,
+      //   background: () => getColor('surfaceContainerHigh'),
+      //   contrastCurve: () => getCurve(4.5),
+      //   adjustTone: () =>
+      //     toneDeltaPair(
+      //       colors.get('primaryDim'),
+      //       colors.get('primary'),
+      //       5,
+      //       'darker',
+      //       true,
+      //       'farther',
+      //     ),
+      // },
+      onPrimary: {
+        palette: () => palettes.get("primary"),
+        background: () => colors.get("primary"),
+        contrastCurve: () => getCurve(6)
+      },
+      primaryContainer: {
+        palette: () => palettes.get("primary"),
+        tone: () => {
+          return c.isDark ? tMinC(palettes.get("primary"), 35, 93) : tMaxC(palettes.get("primary"), 0, 90);
+        },
+        isBackground: true,
+        background: () => highestSurface(c, colors),
+        adjustTone: () => c.variant.name == "fidelity" ? toneDeltaPair(
+          colors.get("primary"),
+          colors.get("primaryContainer"),
+          15,
+          "relative_darker",
+          true,
+          "farther"
+        ) : void 0,
+        contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
+      },
+      onPrimaryContainer: {
+        palette: () => palettes.get("primary"),
+        background: () => colors.get("primaryContainer"),
+        contrastCurve: () => getCurve(6)
+      },
+      // primaryFixed: {
+      //   palette: () => palettes.get('primary'),
+      //   tone: () => {
+      //     return c.temp(
+      //       {
+      //         isDark: false,
+      //         contrastLevel: 0,
+      //       },
+      //       () => {
+      //         const color = getColor('primaryContainer');
+      //         return color.getTone();
+      //       },
+      //     );
+      //   },
+      //   isBackground: true,
+      //   background: () => highestSurface(c, colors),
+      //   contrastCurve: () => (c.contrastLevel > 0 ? getCurve(1.5) : undefined),
+      // },
+      // primaryFixedDim: {
+      //   palette: () => palettes.get('primary'),
+      //   tone: () => colors.get('primaryFixed').getTone(),
+      //   isBackground: true,
+      //   adjustTone: () =>
+      //     toneDeltaPair(
+      //       getColor('primaryFixedDim'),
+      //       getColor('primaryFixed'),
+      //       5,
+      //       'darker',
+      //       true,
+      //       'exact',
+      //     ),
+      // },
+      // onPrimaryFixed: {
+      //   palette: () => palettes.get('primary'),
+      //   background: () => colors.get('primaryFixedDim'),
+      //   contrastCurve: () => getCurve(7),
+      // },
+      // onPrimaryFixedVariant: {
+      //   palette: () => palettes.get('primary'),
+      //   background: () => colors.get('primaryFixedDim'),
+      //   contrastCurve: () => getCurve(4.5),
+      // },
+      inversePrimary: {
+        palette: () => palettes.get("primary"),
+        tone: () => tMaxC(palettes.get("primary")),
+        background: () => colors.get("inverseSurface"),
+        contrastCurve: () => getCurve(6)
+      },
+      ////////////////////////////////////////////////////////////////
+      // Secondaries [Q]                                            //
+      ////////////////////////////////////////////////////////////////
+      secondary: {
+        palette: () => palettes.get("secondary"),
+        tone: () => {
+          return c.isDark ? 80 : tMaxC(palettes.get("secondary"));
+        },
+        isBackground: true,
+        background: () => highestSurface(c, colors),
+        contrastCurve: () => getCurve(4.5),
+        adjustTone: () => toneDeltaPair(
+          getColor("secondaryContainer"),
+          getColor("secondary"),
+          5,
+          "relative_lighter",
+          true,
+          "farther"
+        )
+      },
+      // secondaryDim: {
+      //   palette: () => palettes.get('secondary'),
+      //   tone: () => {
+      //     if (c.variant.name === 'neutral') {
+      //       return 85;
+      //     } else {
+      //       return tMaxC(palettes.get('secondary'), 0, 90);
+      //     }
+      //   },
+      //   isBackground: true,
+      //   background: () => getColor('surfaceContainerHigh'),
+      //   contrastCurve: () => getCurve(4.5),
+      //   adjustTone: () =>
+      //     toneDeltaPair(
+      //       getColor('secondaryDim'),
+      //       getColor('secondary'),
+      //       5,
+      //       'darker',
+      //       true,
+      //       'farther',
+      //     ),
+      // },
+      onSecondary: {
+        palette: () => palettes.get("secondary"),
+        background: () => getColor("secondary"),
+        contrastCurve: () => getCurve(6)
+      },
+      secondaryContainer: {
+        palette: () => palettes.get("secondary"),
+        tone: () => {
+          return c.isDark ? 25 : 90;
+        },
+        isBackground: true,
+        background: () => highestSurface(c, colors),
+        adjustTone: () => void 0,
+        contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
+      },
+      onSecondaryContainer: {
+        palette: () => palettes.get("secondary"),
+        background: () => getColor("secondaryContainer"),
+        contrastCurve: () => getCurve(6)
+      },
+      // secondaryFixed: {
+      //   palette: () => palettes.get('secondary'),
+      //   tone: () => {
+      //     return c.temp(
+      //       {
+      //         isDark: false,
+      //         contrastLevel: 0,
+      //       },
+      //       () => {
+      //         const color = getColor('secondaryContainer');
+      //         return color.getTone();
+      //       },
+      //     );
+      //   },
+      //   isBackground: true,
+      //   background: () => highestSurface(c, colors),
+      //   contrastCurve: () => (c.contrastLevel > 0 ? getCurve(1.5) : undefined),
+      // },
+      // secondaryFixedDim: {
+      //   palette: () => palettes.get('secondary'),
+      //   tone: () => getColor('secondaryFixed').getTone(),
+      //   isBackground: true,
+      //   adjustTone: () =>
+      //     toneDeltaPair(
+      //       getColor('secondaryFixedDim'),
+      //       getColor('secondaryFixed'),
+      //       5,
+      //       'darker',
+      //       true,
+      //       'exact',
+      //     ),
+      // },
+      // onSecondaryFixed: {
+      //   palette: () => palettes.get('secondary'),
+      //   background: () => getColor('secondaryFixedDim'),
+      //   contrastCurve: () => getCurve(7),
+      // },
+      // onSecondaryFixedVariant: {
+      //   palette: () => palettes.get('secondary'),
+      //   background: () => getColor('secondaryFixedDim'),
+      //   contrastCurve: () => getCurve(4.5),
+      // },
+      ////////////////////////////////////////////////////////////////
+      // Tertiaries [T]                                             //
+      ////////////////////////////////////////////////////////////////
+      tertiary: {
+        palette: () => palettes.get("tertiary"),
+        tone: () => {
+          return c.isDark ? tMaxC(palettes.get("tertiary"), 0, 98) : tMaxC(palettes.get("tertiary"));
+        },
+        isBackground: true,
+        background: () => highestSurface(c, colors),
+        contrastCurve: () => getCurve(4.5),
+        adjustTone: () => toneDeltaPair(
+          getColor("tertiaryContainer"),
+          getColor("tertiary"),
+          5,
+          "relative_lighter",
+          true,
+          "farther"
+        )
+      },
+      // tertiaryDim: {
+      //   palette: () => palettes.get('tertiary'),
+      //   tone: () => {
+      //     if (c.variant.name === 'tonalSpot') {
+      //       return tMaxC(palettes.get('tertiary'), 0, 90);
+      //     } else {
+      //       return tMaxC(palettes.get('tertiary'));
+      //     }
+      //   },
+      //   isBackground: true,
+      //   background: () => getColor('surfaceContainerHigh'),
+      //   contrastCurve: () => getCurve(4.5),
+      //   adjustTone: () =>
+      //     toneDeltaPair(
+      //       getColor('tertiaryDim'),
+      //       getColor('tertiary'),
+      //       5,
+      //       'darker',
+      //       true,
+      //       'farther',
+      //     ),
+      // },
+      onTertiary: {
+        palette: () => palettes.get("tertiary"),
+        background: () => getColor("tertiary"),
+        contrastCurve: () => getCurve(6)
+      },
+      tertiaryContainer: {
+        palette: () => palettes.get("tertiary"),
+        tone: () => {
+          return tMaxC(palettes.get("tertiary"), 0, c.isDark ? 93 : 100);
+        },
+        isBackground: true,
+        background: () => highestSurface(c, colors),
+        adjustTone: () => void 0,
+        contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
+      },
+      onTertiaryContainer: {
+        palette: () => palettes.get("tertiary"),
+        background: () => getColor("tertiaryContainer"),
+        contrastCurve: () => getCurve(6)
+      },
+      // tertiaryFixed: {
+      //   palette: () => palettes.get('tertiary'),
+      //   tone: () => {
+      //     return c.temp(
+      //       {
+      //         isDark: false,
+      //         contrastLevel: 0,
+      //       },
+      //       () => {
+      //         const color = getColor('tertiaryContainer');
+      //         return color.getTone();
+      //       },
+      //     );
+      //   },
+      //   isBackground: true,
+      //   background: () => highestSurface(c, colors),
+      //   contrastCurve: () => (c.contrastLevel > 0 ? getCurve(1.5) : undefined),
+      // },
+      // tertiaryFixedDim: {
+      //   palette: () => palettes.get('tertiary'),
+      //   tone: () => getColor('tertiaryFixed').getTone(),
+      //   isBackground: true,
+      //   adjustTone: () =>
+      //     toneDeltaPair(
+      //       getColor('tertiaryFixedDim'),
+      //       getColor('tertiaryFixed'),
+      //       5,
+      //       'darker',
+      //       true,
+      //       'exact',
+      //     ),
+      // },
+      // onTertiaryFixed: {
+      //   palette: () => palettes.get('tertiary'),
+      //   background: () => getColor('tertiaryFixedDim'),
+      //   contrastCurve: () => getCurve(7),
+      // },
+      // onTertiaryFixedVariant: {
+      //   palette: () => palettes.get('tertiary'),
+      //   background: () => getColor('tertiaryFixedDim'),
+      //   contrastCurve: () => getCurve(4.5),
+      // },
+      ////////////////////////////////////////////////////////////////
+      // Errors [E]                                                 //
+      ////////////////////////////////////////////////////////////////
+      error: {
+        palette: () => palettes.get("error"),
+        tone: () => {
+          return c.isDark ? tMinC(palettes.get("error"), 0, 98) : tMaxC(palettes.get("error"));
+        },
+        isBackground: true,
+        background: () => highestSurface(c, colors),
+        contrastCurve: () => getCurve(4.5),
+        adjustTone: () => toneDeltaPair(
+          colors.get("errorContainer"),
+          colors.get("error"),
+          5,
+          "relative_lighter",
+          true,
+          "farther"
+        )
+      },
+      // errorDim: {
+      //   palette: () => palettes.get('error'),
+      //   tone: () => tMinC(palettes.get('error')),
+      //   isBackground: true,
+      //   background: () => getColor('surfaceContainerHigh'),
+      //   contrastCurve: () => getCurve(4.5),
+      //   adjustTone: () =>
+      //     toneDeltaPair(
+      //       getColor('errorDim'),
+      //       getColor('error'),
+      //       5,
+      //       'darker',
+      //       true,
+      //       'farther',
+      //     ),
+      // },
+      onError: {
+        palette: () => palettes.get("error"),
+        background: () => colors.get("error"),
+        contrastCurve: () => getCurve(6)
+      },
+      errorContainer: {
+        palette: () => palettes.get("error"),
+        tone: () => {
+          return c.isDark ? tMinC(palettes.get("error"), 30, 93) : tMaxC(palettes.get("error"), 0, 90);
+        },
+        isBackground: true,
+        background: () => highestSurface(c, colors),
+        adjustTone: () => void 0,
+        contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
+      },
+      onErrorContainer: {
+        palette: () => palettes.get("error"),
+        background: () => colors.get("errorContainer"),
+        contrastCurve: () => getCurve(4.5)
+      },
+      /////////////////////////////////////////////////////////////////
+      // Remapped Colors                                             //
+      /////////////////////////////////////////////////////////////////
+      surfaceVariant: {
+        alias: "surfaceContainerHighest"
+      },
+      surfaceTint: {
+        alias: "primary"
+      },
+      background: {
+        alias: "surface"
+      },
+      onBackground: {
+        alias: "onSurface"
+      }
+    };
+  }
 });
 const Variants = {
   Expressive: expressiveVariant,
   Neutral: neutralVariant,
   TonalSpot: tonalSpotVariant,
   Vibrant: vibrantVariant,
-  Fidelity: fidelityVariant
+  Udixio: udixioVariant
 };
 const loader = async (config, load = true) => {
   const api = bootstrap();
@@ -3141,7 +3849,6 @@ const loader = async (config, load = true) => {
       sourceColor,
       variant: variant2
     });
-    api.colors.addColors(defaultColors);
     if (palettes) {
       api.palettes.add(palettes);
     }
@@ -3183,12 +3890,13 @@ exports.PluginModule = PluginModule;
 exports.Variant = Variant;
 exports.Variants = Variants;
 exports.bootstrap = bootstrap;
+exports.capitalizeFirstLetter = capitalizeFirstLetter;
 exports.defaultColors = defaultColors;
 exports.expressiveVariant = expressiveVariant;
 exports.getInitialToneFromBackground = getInitialToneFromBackground;
 exports.getPiecewiseHue = getPiecewiseHue;
 exports.getRotatedHue = getRotatedHue;
-exports.highestSurface = highestSurface;
+exports.highestSurface = highestSurface$1;
 exports.loader = loader;
 exports.neutralVariant = neutralVariant;
 exports.tonalSpotVariant = tonalSpotVariant;