@udixio/theme 1.3.0 → 2.0.0

package/dist/{loader-Bc0bstAD.js → loader-BS_Esfwg.js}

@@ -1,47 +1,27 @@
 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);
-import { asClass, createContainer, InjectionMode, asValue } from "awilix";
-import { lerp, argbFromLstar, sanitizeDegreesDouble, yFromLstar, argbFromLinrgb, Cam16, signum, matrixMultiply, ViewingConditions, lstarFromArgb, lstarFromY, Contrast, clampDouble, hexFromArgb, argbFromHex, DynamicColor as DynamicColor$1, TonalPalette } from "@material/material-color-utilities";
-class ColorApi {
-  constructor({ colorManager }) {
-    __publicField(this, "colorManager");
-    this.colorManager = colorManager;
-  }
-  getColors() {
-    return this.colorManager.getAll();
-  }
-  addColor(key, color) {
-    return this.colorManager.createOrUpdate(key, color);
-  }
-  addColors(args) {
-    if (!Array.isArray(args)) args = [args];
-    args.forEach((args2) => {
-      if (typeof args2 === "function") {
-        args2 = args2(this);
-      }
-      if (args2.fromPalettes) {
-        if (!Array.isArray(args2.fromPalettes))
-          args2.fromPalettes = [args2.fromPalettes];
-        args2.fromPalettes.map((paletteKey) => {
-          this.colorManager.addFromPalette(paletteKey);
-        });
-      }
-      if (args2.colors) {
-        Object.keys(args2.colors).map(
-          (key) => this.addColor(key, args2.colors[key])
-        );
-      }
-    });
-  }
-  getColor(key) {
-    return this.colorManager.get(key);
-  }
-  removeColor(key) {
-    return this.colorManager.remove(key);
+import { lerp, argbFromLstar, sanitizeDegreesDouble, yFromLstar, argbFromLinrgb, Cam16, signum, matrixMultiply, ViewingConditions, lstarFromArgb, lstarFromY, Contrast, clampDouble, DynamicColor as DynamicColor$1, argbFromHex, hexFromArgb, TonalPalette } from "@material/material-color-utilities";
+import { asClass, createContainer, InjectionMode } from "awilix";
+class API {
+  constructor({
+    colorApi,
+    pluginApi,
+    context,
+    paletteApi
+  }) {
+    __publicField(this, "colors");
+    __publicField(this, "plugins");
+    __publicField(this, "context");
+    __publicField(this, "palettes");
+    colorApi.api = this;
+    this.context = context;
+    this.plugins = pluginApi;
+    this.colors = colorApi;
+    this.palettes = paletteApi;
   }
-  updateColor(key, newColor) {
-    return this.colorManager.createOrUpdate(key, newColor);
+  async load() {
+    return this.plugins.loadPlugins();
   }
 }
 /**
@@ -933,7 +913,6 @@ class DynamicColor {
    *     constructed.
    */
   constructor(name, palette, tone, isBackground, chromaMultiplier, background, secondBackground, contrastCurve, adjustTone) {
-    __publicField(this, "hctCache", /* @__PURE__ */ new Map());
     this.name = name;
     this.palette = palette;
     this.tone = tone;
@@ -969,7 +948,7 @@ class DynamicColor {
     return new DynamicColor(
       args.name ?? "",
       args.palette,
-      args.tone ?? DynamicColor.getInitialToneFromBackground(args.background),
+      args.tone ?? (() => DynamicColor.getInitialToneFromBackground(args.background)),
       args.isBackground ?? false,
       args.chromaMultiplier,
       args.background,
@@ -978,12 +957,14 @@ class DynamicColor {
       args.adjustTone
     );
   }
-  static getInitialToneFromBackground(background) {
-    if (background === void 0) {
-      return (s) => 50;
-    }
-    return (s) => background(s) ? background(s).getTone(s) : 50;
-  }
+  // static getInitialToneFromBackground(
+  //   background?: () => Color | undefined,
+  // ): number {
+  //   if (background === undefined) {
+  //     return 50;
+  //   }
+  //   return (background() ? background()!.getTone() : 50);
+  // }
   /**
    * Given a background tone, finds a foreground tone, while ensuring they reach
    * a contrast ratio that is as close to [ratio] as possible.
@@ -1053,13 +1034,6 @@ class DynamicColor {
       adjustTone: this.adjustTone
     });
   }
-  /**
-   * Clears the cache of HCT values for this color. For testing or debugging
-   * purposes.
-   */
-  clearCache() {
-    this.hctCache.clear();
-  }
   /**
    * Returns a ARGB integer (i.e. a hex code).
    *
@@ -1196,20 +1170,20 @@ class ToneDeltaPair {
     this.constraint = constraint;
     this.constraint = constraint ?? "exact";
   }
-  adjustedTone({
-    scheme,
-    dynamicColor
-  }) {
+  adjustedTone({ context: ctx, color }) {
     const roleA = this.roleA;
     const roleB = this.roleB;
     const polarity = this.polarity;
     const constraint = this.constraint;
-    const absoluteDelta = polarity === "darker" || polarity === "relative_lighter" && scheme.isDark || polarity === "relative_darker" && !scheme.isDark ? -this.delta : this.delta;
-    const amRoleA = dynamicColor.name === roleA.name;
+    const absoluteDelta = polarity === "darker" || polarity === "relative_lighter" && ctx.isDark || polarity === "relative_darker" && !ctx.isDark ? -this.delta : this.delta;
+    const amRoleA = color.name === roleA.name;
     const selfRole = amRoleA ? roleA : roleB;
     const refRole = amRoleA ? roleB : roleA;
-    let selfTone = selfRole.tone(scheme);
-    const refTone = refRole.getTone(scheme);
+    if (!(selfRole instanceof ColorFromPalette)) {
+      throw new Error("selfRole is not a ColorFromPalette");
+    }
+    let selfTone = selfRole.options.tone;
+    const refTone = refRole.getTone();
     const relativeDelta = absoluteDelta * (amRoleA ? 1 : -1);
     if (constraint === "exact") {
       selfTone = clampDouble(0, 100, refTone + relativeDelta);
@@ -1234,20 +1208,22 @@ class ToneDeltaPair {
         selfTone = clampDouble(0, refTone + relativeDelta, selfTone);
       }
     }
-    if (dynamicColor.background && dynamicColor.contrastCurve) {
-      const background = dynamicColor.background(scheme);
-      const contrastCurve = dynamicColor.contrastCurve(scheme);
-      if (background && contrastCurve) {
-        const bgTone = background.getTone(scheme);
-        const selfContrast = contrastCurve.get(scheme.contrastLevel);
-        selfTone = Contrast.ratioOfTones(bgTone, selfTone) >= selfContrast && scheme.contrastLevel >= 0 ? selfTone : DynamicColor.foregroundTone(bgTone, selfContrast);
+    if (color instanceof ColorFromPalette) {
+      if (color.options.background && color.options.contrastCurve) {
+        const background = color.options.background;
+        const contrastCurve = color.options.contrastCurve;
+        if (background && contrastCurve) {
+          const bgTone = background.getTone();
+          const selfContrast = contrastCurve.get(ctx.contrastLevel);
+          selfTone = Contrast.ratioOfTones(bgTone, selfTone) >= selfContrast && ctx.contrastLevel >= 0 ? selfTone : DynamicColor$1.foregroundTone(bgTone, selfContrast);
+        }
       }
-    }
-    if (dynamicColor.isBackground && !dynamicColor.name.endsWith("_fixed_dim")) {
-      if (selfTone >= 57) {
-        selfTone = clampDouble(65, 100, selfTone);
-      } else {
-        selfTone = clampDouble(0, 49, selfTone);
+      if (color.options.isBackground && !color.name.endsWith("_fixed_dim")) {
+        if (selfTone >= 57) {
+          selfTone = clampDouble(65, 100, selfTone);
+        } else {
+          selfTone = clampDouble(0, 49, selfTone);
+        }
       }
     }
     return selfTone;
@@ -1263,43 +1239,211 @@ function argbToRgb(argb) {
     b: argb & 255
   };
 }
-class ConfigurableColor {
-  constructor(option, schemeService, colorService) {
-    __publicField(this, "dynamicColor", null);
-    this.option = option;
-    this.schemeService = schemeService;
-    this.colorService = colorService;
+function getInitialToneFromBackground(background) {
+  if (background === void 0) {
+    return 50;
   }
-  update(args) {
-    this.dynamicColor = null;
-    this.option = { ...this.option, ...args };
+  return background.getTone();
+}
+class Color {
+  constructor(name) {
+    this.name = name;
   }
   getHex() {
     return hexFromArgb(this.getArgb());
   }
   getArgb() {
-    return this.getMaterialColor().getArgb(this.schemeService.get());
+    return this.getHct().toInt();
   }
   getRgb() {
     return argbToRgb(this.getArgb());
   }
-  getName() {
-    return this.option.name.replace(/([A-Z])/g, "_$1").toLowerCase();
+  getTone() {
+    return this.getHct().tone;
+  }
+}
+class ColorAlias extends Color {
+  constructor(name, as, colorService) {
+    super(name);
+    this.as = as;
+    this.colorService = colorService;
+  }
+  getHct() {
+    return this.colorService.get(this.as).getHct();
+  }
+  color() {
+    return this.colorService.get(this.as);
+  }
+}
+class ColorFromHex extends Color {
+  constructor(name, _hex) {
+    super(name);
+    this._hex = _hex;
+    this._hex = _hex;
+  }
+  getHct() {
+    return Hct.fromInt(argbFromHex(this.getHex()));
+  }
+  getHex() {
+    return this._hex;
+  }
+  setHex(hex) {
+    this._hex = hex;
+  }
+}
+class ColorFromPalette extends Color {
+  constructor(name, _options, context) {
+    super(name);
+    this._options = _options;
+    this.context = context;
+    this.validateOption();
+  }
+  get options() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+    const options = {
+      ...this._options,
+      palette: this._options.palette(),
+      tone: (_b = (_a = this._options).tone) == null ? void 0 : _b.call(_a),
+      chromaMultiplier: (_d = (_c = this._options).chromaMultiplier) == null ? void 0 : _d.call(_c),
+      background: (_f = (_e = this._options).background) == null ? void 0 : _f.call(_e),
+      secondBackground: (_h = (_g = this._options).secondBackground) == null ? void 0 : _h.call(_g),
+      contrastCurve: (_j = (_i = this._options).contrastCurve) == null ? void 0 : _j.call(_i),
+      adjustTone: (_l = (_k = this._options).adjustTone) == null ? void 0 : _l.call(_k)
+    };
+    return {
+      ...options,
+      chromaMultiplier: options.chromaMultiplier ?? 1,
+      tone: options.tone ?? getInitialToneFromBackground(options.background)
+    };
+  }
+  update(args) {
+    this._options = { ...this._options, ...args };
+    this.validateOption();
+  }
+  validateOption() {
+    const option = this._options;
+    if ("palette" in option) {
+      if (!option.background && option.secondBackground) {
+        throw new Error(
+          `Color ${this.name} has secondBackground defined, but background is not defined.`
+        );
+      }
+      if (!option.background && option.contrastCurve) {
+        throw new Error(
+          `Color ${this.name} has contrastCurve defined, but background is not defined.`
+        );
+      }
+      if (option.background && !option.contrastCurve) {
+        throw new Error(
+          `Color ${this.name} has background defined, but contrastCurve is not defined.`
+        );
+      }
+    }
+  }
+  getHct() {
+    const option = this.options;
+    const palette = option.palette;
+    const tone = this.getTone();
+    const hue = palette.hue;
+    const chroma = palette.chroma * option.chromaMultiplier;
+    return Hct.from(hue, chroma, tone);
+  }
+  getTone() {
+    const context = this.context;
+    const options = this.options;
+    const adjustTone = options.adjustTone;
+    if (adjustTone) {
+      return adjustTone({ context, color: this });
+    } else {
+      let answer = options.tone;
+      if (!options.background || !options.contrastCurve) {
+        return answer;
+      }
+      const bgTone = options.background.getTone();
+      const desiredRatio = options.contrastCurve.get(context.contrastLevel);
+      answer = Contrast.ratioOfTones(bgTone, answer) >= desiredRatio && context.contrastLevel >= 0 ? answer : DynamicColor.foregroundTone(bgTone, desiredRatio);
+      if (options.isBackground && !this.name.endsWith("_fixed_dim")) {
+        if (answer >= 57) {
+          answer = clampDouble(65, 100, answer);
+        } else {
+          answer = clampDouble(0, 49, answer);
+        }
+      }
+      if (!options.secondBackground) {
+        return answer;
+      }
+      const [bg1, bg2] = [options.background, options.secondBackground];
+      const [bgTone1, bgTone2] = [bg1.getTone(), bg2.getTone()];
+      const [upper, lower] = [
+        Math.max(bgTone1, bgTone2),
+        Math.min(bgTone1, bgTone2)
+      ];
+      if (Contrast.ratioOfTones(upper, answer) >= desiredRatio && Contrast.ratioOfTones(lower, answer) >= desiredRatio) {
+        return answer;
+      }
+      const lightOption = Contrast.lighter(upper, desiredRatio);
+      const darkOption = Contrast.darker(lower, desiredRatio);
+      const availables = [];
+      if (lightOption !== -1) availables.push(lightOption);
+      if (darkOption !== -1) availables.push(darkOption);
+      const prefersLight = DynamicColor.tonePrefersLightForeground(bgTone1) || DynamicColor.tonePrefersLightForeground(bgTone2);
+      if (prefersLight) {
+        return lightOption < 0 ? 100 : lightOption;
+      }
+      if (availables.length === 1) {
+        return availables[0];
+      }
+      return darkOption < 0 ? 0 : darkOption;
+    }
+  }
+}
+const highestSurface = (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;
   }
-  getMaterialColor() {
-    if ("alias" in this.option) {
-      if (!this.option.alias) {
-        throw new Error("Alias option must be defined");
+  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}`);
       }
-      return this.colorService.get(this.option.alias).getMaterialColor();
     }
-    if (!this.dynamicColor) {
-      this.dynamicColor = DynamicColor.fromPalette({
-        ...this.option,
-        name: this.getName()
-      });
+    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`);
     }
-    return this.dynamicColor;
+  }
+  getAll() {
+    return this.colorMap;
   }
 }
 function getCurve(defaultContrast) {
@@ -1352,64 +1496,62 @@ function findBestToneForChroma(hue, chroma, tone, byDecreasingTone) {
   }
   return answer;
 }
+function calculateToneAdjustmentPercentage(toneA, toneB, desiredRatio) {
+  const currentRatio = Contrast.ratioOfTones(toneA, toneB);
+  if (currentRatio >= desiredRatio) {
+    return 0;
+  }
+  const lighterTone = Contrast.lighter(toneA, desiredRatio);
+  const darkerTone = Contrast.darker(toneA, desiredRatio);
+  if (lighterTone !== -1 && toneB < lighterTone) {
+    const percentageToAdjust = (toneB - lighterTone) / (toneA - lighterTone);
+    return clampDouble(0, 1, percentageToAdjust);
+  }
+  if (darkerTone !== -1 && toneB > darkerTone) {
+    const percentageToAdjust = (toneB - darkerTone) / (toneA - darkerTone);
+    return clampDouble(0, 1, percentageToAdjust);
+  }
+  return 0;
+}
 function capitalizeFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
-const highestSurface = (s, colorService) => {
-  if (colorService instanceof ColorApi) {
-    return s.isDark ? colorService.getColor("surfaceBright").getMaterialColor() : colorService.getColor("surfaceDim").getMaterialColor();
-  } else {
-    return s.isDark ? colorService.get("surfaceBright").getMaterialColor() : colorService.get("surfaceDim").getMaterialColor();
+class ColorApi {
+  constructor({ colorManager }) {
+    __publicField(this, "colorManager");
+    __publicField(this, "api");
+    this.colorManager = colorManager;
   }
-};
-class ColorManager {
-  constructor({ schemeManager }) {
-    __publicField(this, "colorMap", /* @__PURE__ */ new Map());
-    __publicField(this, "schemeManager");
-    this.schemeManager = schemeManager;
+  getAll() {
+    return this.colorManager.getAll();
   }
-  createOrUpdate(key, args) {
-    let colorEntity = this.colorMap.get(key);
-    if (!colorEntity) {
-      const { palette, alias } = args;
-      if (palette) {
-        colorEntity = new ConfigurableColor(
-          { ...args, palette, name: key },
-          this.schemeManager,
-          this
-        );
-        this.colorMap.set(key, colorEntity);
-      } else if (alias) {
-        colorEntity = new ConfigurableColor(
-          { ...args, alias, name: key },
-          this.schemeManager,
-          this
-        );
-        this.colorMap.set(key, colorEntity);
-      } else {
-        throw new Error(`Palette ${palette} does not exist from ${key}`);
-      }
-    } else {
-      colorEntity.update({ ...args, name: key });
-      this.colorMap.set(key, colorEntity);
-    }
-    return colorEntity;
+  addColor(key, color) {
+    return this.colorManager.createOrUpdate(key, color);
   }
-  remove(key) {
-    return this.colorMap.delete(key);
+  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) {
-    const colorEntity = this.colorMap.get(key);
-    if (colorEntity) {
-      return colorEntity;
-    } else {
-      throw new Error(`Color ${key} does not exist`);
-    }
+    return this.colorManager.get(key);
   }
-  getAll() {
-    return this.colorMap;
+  remove(key) {
+    return this.colorManager.remove(key);
+  }
+  update(key, newColor) {
+    return this.colorManager.createOrUpdate(key, newColor);
   }
-  addFromPalette(key) {
+  addFromCustomPalette(key) {
     const colorKey = key;
     const colorDimKey = colorKey + "Dim";
     const ColorKey = capitalizeFirstLetter(key);
@@ -1420,380 +1562,147 @@ class ColorManager {
     const colorFixedDimKey = colorKey + "FixedDim";
     const onColorFixedKey = "on" + ColorKey + "Fixed";
     const onColorFixedVariantKey = "on" + ColorKey + "FixedVariant";
-    this.createOrUpdate(colorKey, {
-      palette: (s) => s.getPalette(colorKey),
-      tone: (s) => {
-        if (s.variant === "neutral") {
-          return s.isDark ? tMinC(s.getPalette(colorKey), 0, 98) : tMaxC(s.getPalette(colorKey));
-        } else if (s.variant === "vibrant") {
-          return tMaxC(s.getPalette(colorKey), 0, s.isDark ? 90 : 98);
-        } else {
-          return s.isDark ? 80 : tMaxC(s.getPalette(colorKey));
-        }
+    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"
+        )
       },
-      isBackground: true,
-      background: (s) => highestSurface(s, this),
-      contrastCurve: (s) => getCurve(4.5),
-      adjustTone: (s) => toneDeltaPair(
-        this.get(colorContainerKey).getMaterialColor(),
-        this.get(colorKey).getMaterialColor(),
-        5,
-        "relative_lighter",
-        true,
-        "farther"
-      )
-    });
-    this.createOrUpdate(colorDimKey, {
-      palette: (s) => s.getPalette(colorKey),
-      tone: (s) => {
-        if (s.variant === "neutral") {
-          return 85;
-        } else {
-          return tMaxC(s.getPalette(colorKey), 0, 90);
-        }
+      [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"
+        )
       },
-      isBackground: true,
-      background: (s) => this.get("surfaceContainerHigh").getMaterialColor(),
-      contrastCurve: (s) => getCurve(4.5),
-      adjustTone: (s) => toneDeltaPair(
-        this.get(colorDimKey).getMaterialColor(),
-        this.get(colorKey).getMaterialColor(),
-        5,
-        "darker",
-        true,
-        "farther"
-      )
-    });
-    this.createOrUpdate(onColorKey, {
-      palette: (s) => s.getPalette(colorKey),
-      background: (s) => this.get(colorKey).getMaterialColor(),
-      contrastCurve: (s) => getCurve(6)
-    });
-    this.createOrUpdate(colorContainerKey, {
-      palette: (s) => s.getPalette(colorKey),
-      tone: (s) => {
-        if (s.variant === "vibrant") {
-          return s.isDark ? tMinC(s.getPalette(colorKey), 30, 40) : tMaxC(s.getPalette(colorKey), 84, 90);
-        } else if (s.variant === "expressive") {
-          return s.isDark ? 15 : tMaxC(s.getPalette(colorKey), 90, 95);
-        } else {
-          return s.isDark ? 25 : 90;
-        }
+      [onColorKey]: {
+        palette: () => palettes.get(colorKey),
+        background: () => this.get(colorKey),
+        contrastCurve: () => getCurve(6)
       },
-      isBackground: true,
-      background: (s) => highestSurface(s, this),
-      adjustTone: (s) => void 0,
-      contrastCurve: (s) => s.contrastLevel > 0 ? getCurve(1.5) : void 0
-    });
-    this.createOrUpdate(onColorContainerKey, {
-      palette: (s) => s.getPalette(colorKey),
-      background: (s) => this.get(colorContainerKey).getMaterialColor(),
-      contrastCurve: (s) => getCurve(6)
-    });
-    this.createOrUpdate(colorFixedKey, {
-      palette: (s) => s.getPalette(colorKey),
-      tone: (s) => {
-        const tempS = Object.assign({}, s, { isDark: false, contrastLevel: 0 });
-        return this.get(colorContainerKey).getMaterialColor().getTone(tempS);
+      [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
       },
-      isBackground: true,
-      background: (s) => highestSurface(s, this),
-      contrastCurve: (s) => s.contrastLevel > 0 ? getCurve(1.5) : void 0
-    });
-    this.createOrUpdate(colorFixedDimKey, {
-      palette: (s) => s.getPalette(colorKey),
-      tone: (s) => this.get(colorFixedKey).getMaterialColor().getTone(s),
-      isBackground: true,
-      adjustTone: (s) => toneDeltaPair(
-        this.get(colorFixedDimKey).getMaterialColor(),
-        this.get(colorFixedKey).getMaterialColor(),
-        5,
-        "darker",
-        true,
-        "exact"
-      )
-    });
-    this.createOrUpdate(onColorFixedKey, {
-      palette: (s) => s.getPalette(colorKey),
-      background: (s) => this.get(colorFixedDimKey).getMaterialColor(),
-      contrastCurve: (s) => getCurve(7)
-    });
-    this.createOrUpdate(onColorFixedVariantKey, {
-      palette: (s) => s.getPalette(colorKey),
-      background: (s) => this.get(colorFixedDimKey).getMaterialColor(),
-      contrastCurve: (s) => getCurve(4.5)
+      [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: asClass(ColorManager).singleton(),
   colorApi: asClass(ColorApi).singleton()
 };
-class Scheme {
-  constructor(options) {
-    this.options = options;
-  }
-  get variant() {
-    return this.options.variant.name;
-  }
-  get contrastLevel() {
-    if (!this.options) {
-      throw new Error("Scheme options is not set");
-    }
-    return this.options.contrastLevel;
-  }
-  get isDark() {
-    if (!this.options) {
-      throw new Error("Scheme options is not set");
-    }
-    return this.options.isDark;
-  }
-  get sourceColorHct() {
-    if (!this.options) {
-      throw new Error("Scheme options is not set");
-    }
-    return Hct.fromInt(this.options.sourceColorArgb);
-  }
-  getPalette(key) {
-    if (!this.options) {
-      throw new Error("Scheme options is not set");
-    }
-    const palette = this.options.palettes.get(key);
-    if (!palette) {
-      throw new Error(`Palette ${key} not found`);
-    }
-    return palette;
-  }
-}
-class SchemeManager {
-  constructor() {
-    __publicField(this, "schemeEntity");
-    __publicField(this, "options");
-  }
-  createOrUpdate(options) {
-    var _a, _b;
-    this.options = {
-      ...this.options,
-      ...options,
-      sourcesColorHex: {
-        ...(_a = this.options) == null ? void 0 : _a.sourcesColorHex,
-        ...options.sourcesColorHex
-      },
-      palettes: {
-        ...(_b = this.options) == null ? void 0 : _b.palettes,
-        ...options.palettes
-      }
-    };
-    const palettes = /* @__PURE__ */ new Map();
-    if (!this.options.sourcesColorHex.primary) {
-      throw new Error("Primary source color is not set");
-    }
-    const sourceColorArgb = argbFromHex(this.options.sourcesColorHex.primary);
-    const sourceColorHct = Hct.fromInt(sourceColorArgb);
-    if (!this.options.palettes) {
-      return;
-    }
-    for (const [
-      key,
-      { sourceColorkey, tonalPalette: paletteFunction }
-    ] of Object.entries(this.options.palettes)) {
-      let palette;
-      if (typeof sourceColorkey != "string") {
-        palette = paletteFunction({
-          sourceColorHct,
-          isDark: options.isDark ?? false
-        });
-      } else {
-        const sourceColorArgb2 = argbFromHex(
-          this.options.sourcesColorHex[sourceColorkey]
-        );
-        const colorHct = Hct.fromInt(sourceColorArgb2);
-        palette = paletteFunction({
-          sourceColorHct,
-          colorHct,
-          isDark: options.isDark ?? false
-        });
-      }
-      palettes.set(key, palette);
-    }
-    this.schemeEntity = new Scheme({
-      ...this.options,
-      palettes,
-      sourceColorArgb
-    });
-  }
-  get() {
-    if (!this.schemeEntity) {
-      throw new Error("Scheme is not created");
-    }
-    return this.schemeEntity;
-  }
-}
-class VariantManager {
-  constructor({ schemeManager }) {
-    __publicField(this, "customPalettes", {});
-    __publicField(this, "variantEntity");
-    __publicField(this, "schemeManager");
-    this.schemeManager = schemeManager;
-  }
-  addCustomPalette(key, colorHex) {
-    this.customPalettes[key] = colorHex;
-    this.update();
-  }
-  set(variantEntity) {
-    this.variantEntity = variantEntity;
-    this.update();
-  }
-  update() {
-    if (!this.variantEntity) return;
-    const palettes = {};
-    Object.keys(this.variantEntity.palettes).forEach((key) => {
-      palettes[key] = { tonalPalette: this.variantEntity.palettes[key] };
-    });
-    const customPalettes = this.variantEntity.customPalettes;
-    if (customPalettes) {
-      Object.keys(this.customPalettes).forEach((key) => {
-        palettes[key] = {
-          sourceColorkey: key,
-          tonalPalette: customPalettes
-        };
-      });
-    }
-    this.schemeManager.createOrUpdate({
-      sourcesColorHex: this.customPalettes,
-      palettes
-    });
-  }
-}
-DynamicColor$1.fromPalette({
-  name: "primary_palette_key_color",
-  palette: (s) => s.primaryPalette,
-  tone: (s) => s.primaryPalette.keyColor.tone
-});
-class ThemeApi {
-  constructor({
-    schemeManager,
-    variantManager
-  }) {
-    __publicField(this, "schemeManager");
-    __publicField(this, "variantManager");
-    this.schemeManager = schemeManager;
-    this.variantManager = variantManager;
-  }
-  // addPalette({key, palette, addDefaultColors}: {key: string; palette: TonalPalette; addDefaultColors: boolean}) {
-  //   this.themeOptions.palettes.set(key, palette);
-  //   if (addDefaultColors){
-  //     this.colorService.addPalette(key)
-  //   }
-  // }
-  // create(args: ThemeOptions): SchemeService {
-  //   return new SchemeService(args, this.colorService)
-  // }
-  //
-  // update(options: Partial<ThemeOptions>): SchemeService {
-  //   Object.assign(this.themeOptions, options);
-  //   return this.theme();
-  // }
-  create(options) {
-    this.schemeManager.createOrUpdate({
-      ...options,
-      sourcesColorHex: { primary: options.sourceColorHex }
-    });
-    this.variantManager.set(options.variant);
-  }
-  update(options) {
-    const themeOptions = { ...options };
-    if (options.sourceColorHex)
-      themeOptions.sourcesColorHex = { primary: options.sourceColorHex };
-    this.schemeManager.createOrUpdate(themeOptions);
-    if (options.variant) this.variantManager.set(options.variant);
-  }
-  addCustomPalette(key, colorHex) {
-    this.variantManager.addCustomPalette(key, colorHex);
-  }
-  // theme(): SchemeService {
-  //   return new SchemeService(this.themeOptions, this.colorService)
-  // }
-}
-const ThemeModule = {
-  schemeManager: asClass(SchemeManager).singleton(),
-  variantManager: asClass(VariantManager).singleton(),
-  themeApi: asClass(ThemeApi).singleton()
-};
-const getPiecewiseHue = (sourceColorHct, hueBreakpoints, hues) => {
-  const size = Math.min(hueBreakpoints.length - 1, hues.length);
-  const sourceHue = sourceColorHct.hue;
-  for (let i = 0; i < size; i++) {
-    if (sourceHue >= hueBreakpoints[i] && sourceHue < hueBreakpoints[i + 1]) {
-      return sanitizeDegreesDouble(hues[i]);
-    }
-  }
-  return sourceHue;
-};
-const getRotatedHue = (sourceColorHct, hueBreakpoints, rotations) => {
-  let rotation = getPiecewiseHue(sourceColorHct, hueBreakpoints, rotations);
-  if (Math.min(hueBreakpoints.length - 1, rotations.length) <= 0) {
-    rotation = 0;
-  }
-  return sanitizeDegreesDouble(sourceColorHct.hue + rotation);
-};
-class Variant {
-  constructor(palettes = {}, name, customPalettes, colors) {
-    this.palettes = palettes;
-    this.name = name;
-    this.customPalettes = customPalettes;
-    this.colors = colors;
-  }
-}
-const tonalSpotVariant = {
-  name: "tonalSpot",
-  palettes: {
-    primary: ({ sourceColorHct, isDark }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 26 : 32),
-    secondary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16),
-    tertiary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(
-      getRotatedHue(
-        sourceColorHct,
-        [0, 20, 71, 161, 333, 360],
-        [-40, 48, -32, 40, -32]
-      ),
-      28
-    ),
-    neutral: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5),
-    neutralVariant: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5 * 1.7),
-    error: ({ sourceColorHct }) => {
-      const errorHue = getPiecewiseHue(
-        sourceColorHct,
-        [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)
-};
 const inverseTone = (tone) => {
   return 100 - tone;
 };
-const defaultColors = (colorService) => {
+const defaultColors = ({
+  colors,
+  context: c,
+  palettes
+}) => {
   const getColor = (key) => {
-    return colorService.getColor(key).getMaterialColor();
+    return colors.get(key);
   };
-  const colors = {
+  return {
     ////////////////////////////////////////////////////////////////
     // Surfaces [S]                                               //
     ////////////////////////////////////////////////////////////////
     surface: {
-      palette: (s) => s.getPalette("neutral"),
-      tone: (s) => {
-        if (s.isDark) {
+      palette: () => palettes.get("neutral"),
+      tone: () => {
+        if (c.isDark) {
           return 4;
         } else {
-          if (s.variant == "fidelity") {
+          if (c.variant.name == "fidelity") {
             return 100;
           }
-          if (Hct.isYellow(s.getPalette("neutral").hue)) {
+          if (Hct.isYellow(palettes.get("neutral").hue)) {
             return 99;
-          } else if (s.variant === "vibrant") {
+          } else if (c.variant.name === "vibrant") {
             return 97;
           } else {
             return 98;
@@ -1803,14 +1712,14 @@ const defaultColors = (colorService) => {
       isBackground: true
     },
     surfaceDim: {
-      palette: (s) => s.getPalette("neutral"),
-      tone: (s) => {
-        if (s.isDark) {
+      palette: () => palettes.get("neutral"),
+      tone: () => {
+        if (c.isDark) {
           return 4;
         } else {
-          if (Hct.isYellow(s.getPalette("neutral").hue)) {
+          if (Hct.isYellow(palettes.get("neutral").hue)) {
             return 90;
-          } else if (s.variant === "vibrant") {
+          } else if (c.variant.name === "vibrant") {
             return 85;
           } else {
             return 87;
@@ -1818,15 +1727,15 @@ const defaultColors = (colorService) => {
         }
       },
       isBackground: true,
-      chromaMultiplier: (s) => {
-        if (!s.isDark) {
-          if (s.variant === "neutral") {
+      chromaMultiplier: () => {
+        if (!c.isDark) {
+          if (c.variant.name === "neutral") {
             return 2.5;
-          } else if (s.variant === "tonalSpot") {
+          } else if (c.variant.name === "tonalSpot") {
             return 1.7;
-          } else if (s.variant === "expressive") {
-            return Hct.isYellow(s.getPalette("neutral").hue) ? 2.7 : 1.75;
-          } else if (s.variant === "vibrant") {
+          } 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;
           }
         }
@@ -1834,14 +1743,14 @@ const defaultColors = (colorService) => {
       }
     },
     surfaceBright: {
-      palette: (s) => s.getPalette("neutral"),
-      tone: (s) => {
-        if (s.isDark) {
+      palette: () => palettes.get("neutral"),
+      tone: () => {
+        if (c.isDark) {
           return 18;
         } else {
-          if (Hct.isYellow(s.getPalette("neutral").hue)) {
+          if (Hct.isYellow(palettes.get("neutral").hue)) {
             return 99;
-          } else if (s.variant === "vibrant") {
+          } else if (c.variant.name === "vibrant") {
             return 97;
           } else {
             return 98;
@@ -1849,15 +1758,15 @@ const defaultColors = (colorService) => {
         }
       },
       isBackground: true,
-      chromaMultiplier: (s) => {
-        if (s.isDark) {
-          if (s.variant === "neutral") {
+      chromaMultiplier: () => {
+        if (c.isDark) {
+          if (c.variant.name === "neutral") {
             return 2.5;
-          } else if (s.variant === "tonalSpot") {
+          } else if (c.variant.name === "tonalSpot") {
             return 1.7;
-          } else if (s.variant === "expressive") {
-            return Hct.isYellow(s.getPalette("neutral").hue) ? 2.7 : 1.75;
-          } else if (s.variant === "vibrant") {
+          } 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;
           }
         }
@@ -1865,19 +1774,19 @@ const defaultColors = (colorService) => {
       }
     },
     surfaceContainerLowest: {
-      palette: (s) => s.getPalette("neutral"),
-      tone: (s) => s.isDark ? 0 : 100,
+      palette: () => palettes.get("neutral"),
+      tone: () => c.isDark ? 0 : 100,
       isBackground: true
     },
     surfaceContainerLow: {
-      palette: (s) => s.getPalette("neutral"),
-      tone: (s) => {
-        if (s.isDark) {
+      palette: () => palettes.get("neutral"),
+      tone: () => {
+        if (c.isDark) {
           return 6;
         } else {
-          if (Hct.isYellow(s.getPalette("neutral").hue)) {
+          if (Hct.isYellow(palettes.get("neutral").hue)) {
             return 98;
-          } else if (s.variant === "vibrant") {
+          } else if (c.variant.name === "vibrant") {
             return 95;
           } else {
             return 96;
@@ -1885,28 +1794,28 @@ const defaultColors = (colorService) => {
         }
       },
       isBackground: true,
-      chromaMultiplier: (s) => {
-        if (s.variant === "neutral") {
+      chromaMultiplier: () => {
+        if (c.variant.name === "neutral") {
           return 1.3;
-        } else if (s.variant === "tonalSpot") {
+        } else if (c.variant.name === "tonalSpot") {
           return 1.25;
-        } else if (s.variant === "expressive") {
-          return Hct.isYellow(s.getPalette("neutral").hue) ? 1.3 : 1.15;
-        } else if (s.variant === "vibrant") {
+        } else if (c.variant.name === "expressive") {
+          return Hct.isYellow(palettes.get("neutral").hue) ? 1.3 : 1.15;
+        } else if (c.variant.name === "vibrant") {
           return 1.08;
         }
         return 1;
       }
     },
     surfaceContainer: {
-      palette: (s) => s.getPalette("neutral"),
-      tone: (s) => {
-        if (s.isDark) {
+      palette: () => palettes.get("neutral"),
+      tone: () => {
+        if (c.isDark) {
           return 9;
         } else {
-          if (Hct.isYellow(s.getPalette("neutral").hue)) {
+          if (Hct.isYellow(palettes.get("neutral").hue)) {
             return 96;
-          } else if (s.variant === "vibrant") {
+          } else if (c.variant.name === "vibrant") {
             return 92;
           } else {
             return 94;
@@ -1914,28 +1823,28 @@ const defaultColors = (colorService) => {
         }
       },
       isBackground: true,
-      chromaMultiplier: (s) => {
-        if (s.variant === "neutral") {
+      chromaMultiplier: () => {
+        if (c.variant.name === "neutral") {
           return 1.6;
-        } else if (s.variant === "tonalSpot") {
+        } else if (c.variant.name === "tonalSpot") {
           return 1.4;
-        } else if (s.variant === "expressive") {
-          return Hct.isYellow(s.getPalette("neutral").hue) ? 1.6 : 1.3;
-        } else if (s.variant === "vibrant") {
+        } else if (c.variant.name === "expressive") {
+          return Hct.isYellow(palettes.get("neutral").hue) ? 1.6 : 1.3;
+        } else if (c.variant.name === "vibrant") {
           return 1.15;
         }
         return 1;
       }
     },
     surfaceContainerHigh: {
-      palette: (s) => s.getPalette("neutral"),
-      tone: (s) => {
-        if (s.isDark) {
+      palette: () => palettes.get("neutral"),
+      tone: () => {
+        if (c.isDark) {
           return 12;
         } else {
-          if (Hct.isYellow(s.getPalette("neutral").hue)) {
+          if (Hct.isYellow(palettes.get("neutral").hue)) {
             return 94;
-          } else if (s.variant === "vibrant") {
+          } else if (c.variant.name === "vibrant") {
             return 90;
           } else {
             return 92;
@@ -1943,28 +1852,28 @@ const defaultColors = (colorService) => {
         }
       },
       isBackground: true,
-      chromaMultiplier: (s) => {
-        if (s.variant === "neutral") {
+      chromaMultiplier: () => {
+        if (c.variant.name === "neutral") {
           return 1.9;
-        } else if (s.variant === "tonalSpot") {
+        } else if (c.variant.name === "tonalSpot") {
           return 1.5;
-        } else if (s.variant === "expressive") {
-          return Hct.isYellow(s.getPalette("neutral").hue) ? 1.95 : 1.45;
-        } else if (s.variant === "vibrant") {
+        } else if (c.variant.name === "expressive") {
+          return Hct.isYellow(palettes.get("neutral").hue) ? 1.95 : 1.45;
+        } else if (c.variant.name === "vibrant") {
           return 1.22;
         }
         return 1;
       }
     },
     surfaceContainerHighest: {
-      palette: (s) => s.getPalette("neutral"),
-      tone: (s) => {
-        if (s.isDark) {
+      palette: () => palettes.get("neutral"),
+      tone: () => {
+        if (c.isDark) {
           return 15;
         } else {
-          if (Hct.isYellow(s.getPalette("neutral").hue)) {
+          if (Hct.isYellow(palettes.get("neutral").hue)) {
             return 92;
-          } else if (s.variant === "vibrant") {
+          } else if (c.variant.name === "vibrant") {
             return 88;
           } else {
             return 90;
@@ -1972,14 +1881,14 @@ const defaultColors = (colorService) => {
         }
       },
       isBackground: true,
-      chromaMultiplier: (s) => {
-        if (s.variant === "neutral") {
+      chromaMultiplier: () => {
+        if (c.variant.name === "neutral") {
           return 2.2;
-        } else if (s.variant === "tonalSpot") {
+        } else if (c.variant.name === "tonalSpot") {
           return 1.7;
-        } else if (s.variant === "expressive") {
-          return Hct.isYellow(s.getPalette("neutral").hue) ? 2.3 : 1.6;
-        } else if (s.variant === "vibrant") {
+        } else if (c.variant.name === "expressive") {
+          return Hct.isYellow(palettes.get("neutral").hue) ? 2.3 : 1.6;
+        } else if (c.variant.name === "vibrant") {
           return 1.29;
         } else {
           return 1;
@@ -1987,132 +1896,133 @@ const defaultColors = (colorService) => {
       }
     },
     onSurface: {
-      palette: (s) => s.getPalette("neutral"),
-      tone: (s) => {
-        if (s.variant === "vibrant") {
-          return tMaxC(s.getPalette("neutral"), 0, 100, 1.1);
+      palette: () => palettes.get("neutral"),
+      tone: () => {
+        if (c.variant.name === "vibrant") {
+          return tMaxC(palettes.get("neutral"), 0, 100, 1.1);
         } else {
-          return DynamicColor.getInitialToneFromBackground(
-            (s2) => highestSurface(s2, colorService)
-          )(s);
+          return getInitialToneFromBackground(highestSurface(c, colors));
         }
       },
-      chromaMultiplier: (s) => {
-        if (s.variant === "neutral") {
+      chromaMultiplier: () => {
+        if (c.variant.name === "neutral") {
           return 2.2;
-        } else if (s.variant === "tonalSpot") {
+        } else if (c.variant.name === "tonalSpot") {
           return 1.7;
-        } else if (s.variant === "expressive") {
-          return Hct.isYellow(s.getPalette("neutral").hue) ? s.isDark ? 3 : 2.3 : 1.6;
+        } else if (c.variant.name === "expressive") {
+          return Hct.isYellow(palettes.get("neutral").hue) ? c.isDark ? 3 : 2.3 : 1.6;
         }
         return 1;
       },
-      background: (s) => highestSurface(s, colorService),
-      contrastCurve: (s) => s.isDark ? getCurve(11) : getCurve(9)
+      background: () => highestSurface(c, colors),
+      contrastCurve: () => c.isDark ? getCurve(11) : getCurve(9)
     },
     onSurfaceVariant: {
-      palette: (s) => s.getPalette("neutralVariant"),
-      chromaMultiplier: (s) => {
-        if (s.variant === "neutral") {
+      palette: () => palettes.get("neutralVariant"),
+      chromaMultiplier: () => {
+        if (c.variant.name === "neutral") {
           return 2.2;
-        } else if (s.variant === "tonalSpot") {
+        } else if (c.variant.name === "tonalSpot") {
           return 1.7;
-        } else if (s.variant === "expressive") {
-          return Hct.isYellow(s.getPalette("neutral").hue) ? s.isDark ? 3 : 2.3 : 1.6;
+        } else if (c.variant.name === "expressive") {
+          return Hct.isYellow(palettes.get("neutral").hue) ? c.isDark ? 3 : 2.3 : 1.6;
         }
         return 1;
       },
-      background: (s) => highestSurface(s, colorService),
-      contrastCurve: (s) => s.isDark ? getCurve(6) : getCurve(4.5)
+      background: () => highestSurface(c, colors),
+      contrastCurve: () => c.isDark ? getCurve(6) : getCurve(4.5)
     },
     outline: {
-      palette: (s) => s.getPalette("neutralVariant"),
-      chromaMultiplier: (s) => {
-        if (s.variant === "neutral") {
+      palette: () => palettes.get("neutralVariant"),
+      chromaMultiplier: () => {
+        if (c.variant.name === "neutral") {
           return 2.2;
-        } else if (s.variant === "tonalSpot") {
+        } else if (c.variant.name === "tonalSpot") {
           return 1.7;
-        } else if (s.variant === "expressive") {
-          return Hct.isYellow(s.getPalette("neutral").hue) ? s.isDark ? 3 : 2.3 : 1.6;
+        } else if (c.variant.name === "expressive") {
+          return Hct.isYellow(palettes.get("neutral").hue) ? c.isDark ? 3 : 2.3 : 1.6;
         }
         return 1;
       },
-      background: (s) => highestSurface(s, colorService),
-      contrastCurve: (s) => getCurve(3)
+      background: () => highestSurface(c, colors),
+      contrastCurve: () => getCurve(3)
     },
     outlineVariant: {
-      palette: (s) => s.getPalette("neutralVariant"),
-      chromaMultiplier: (s) => {
-        if (s.variant === "neutral") {
+      palette: () => palettes.get("neutralVariant"),
+      chromaMultiplier: () => {
+        if (c.variant.name === "neutral") {
           return 2.2;
-        } else if (s.variant === "tonalSpot") {
+        } else if (c.variant.name === "tonalSpot") {
           return 1.7;
-        } else if (s.variant === "expressive") {
-          return Hct.isYellow(s.getPalette("neutral").hue) ? s.isDark ? 3 : 2.3 : 1.6;
+        } else if (c.variant.name === "expressive") {
+          return Hct.isYellow(palettes.get("neutral").hue) ? c.isDark ? 3 : 2.3 : 1.6;
         }
         return 1;
       },
-      background: (s) => highestSurface(s, colorService),
-      contrastCurve: (s) => getCurve(1.5)
+      background: () => highestSurface(c, colors),
+      contrastCurve: () => getCurve(1.5)
     },
     inverseSurface: {
-      palette: (s) => s.getPalette("neutral"),
-      tone: (s) => s.isDark ? 98 : 4,
+      palette: () => palettes.get("neutral"),
+      tone: () => c.isDark ? 98 : 4,
       isBackground: true
     },
     inverseOnSurface: {
-      palette: (s) => s.getPalette("neutral"),
-      tone: (s) => s.isDark ? 20 : 95,
-      background: (s) => colorService.getColor("inverseSurface").getMaterialColor(),
-      contrastCurve: (s) => getCurve(7)
+      palette: () => palettes.get("neutral"),
+      tone: () => c.isDark ? 20 : 95,
+      background: () => colors.get("inverseSurface"),
+      contrastCurve: () => getCurve(7)
     },
     ////////////////////////////////////////////////////////////////
     // Primaries [P]                                              //
     ////////////////////////////////////////////////////////////////
     primary: {
-      palette: (s) => s.getPalette("primary"),
-      tone: (s) => {
-        if (s.variant === "neutral") {
-          return s.isDark ? 80 : 40;
-        } else if (s.variant === "tonalSpot") {
-          if (s.isDark) {
+      palette: () => palettes.get("primary"),
+      tone: () => {
+        if (c.variant.name === "neutral") {
+          return c.isDark ? 80 : 40;
+        } else if (c.variant.name === "tonalSpot") {
+          if (c.isDark) {
             return 80;
           } else {
-            return tMaxC(s.getPalette("primary"));
+            return tMaxC(palettes.get("primary"));
           }
-        } else if (s.variant === "expressive") {
+        } else if (c.variant.name === "expressive") {
           return tMaxC(
-            s.getPalette("primary"),
+            palettes.get("primary"),
             0,
-            Hct.isYellow(s.getPalette("primary").hue) ? 25 : Hct.isCyan(s.getPalette("primary").hue) ? 88 : 98
+            Hct.isYellow(palettes.get("primary").hue) ? 25 : Hct.isCyan(palettes.get("primary").hue) ? 88 : 98
           );
-        } else if (s.variant == "fidelity") {
-          return s.sourceColorHct.tone;
+        } else if (c.variant.name == "fidelity") {
+          return c.sourceColor.tone;
         } else {
           return tMaxC(
-            s.getPalette("primary"),
+            palettes.get("primary"),
             0,
-            Hct.isCyan(s.getPalette("primary").hue) ? 88 : 98
+            Hct.isCyan(palettes.get("primary").hue) ? 88 : 98
           );
         }
       },
       isBackground: true,
-      background: (s) => highestSurface(s, colorService),
-      contrastCurve: (s) => getCurve(4.5),
-      adjustTone: (s) => s.variant == "fidelity" ? () => {
-        const surfaceTone = colorService.getColor("surface").getMaterialColor().tone(s);
-        const primaryTone = colorService.getColor("primary").getMaterialColor().tone(s);
+      background: () => highestSurface(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 (Contrast.ratioOfTones(surfaceTone, selfTone) < 3) {
-          const result = inverseTone(primaryTone);
-          if (Contrast.ratioOfTones(surfaceTone, result) >= 3) {
-            selfTone = result;
-          }
+          const ratio = calculateToneAdjustmentPercentage(
+            surfaceTone,
+            selfTone,
+            3
+          );
+          const inverseT = inverseTone(primaryTone);
+          selfTone = selfTone + (inverseT - selfTone) * ratio;
         }
         return selfTone;
       } : toneDeltaPair(
-        colorService.getColor("primaryContainer").getMaterialColor(),
-        colorService.getColor("primary").getMaterialColor(),
+        colors.get("primaryContainer"),
+        colors.get("primary"),
         5,
         "relative_lighter",
         true,
@@ -2120,22 +2030,22 @@ const defaultColors = (colorService) => {
       )
     },
     primaryDim: {
-      palette: (s) => s.getPalette("primary"),
-      tone: (s) => {
-        if (s.variant === "neutral") {
+      palette: () => palettes.get("primary"),
+      tone: () => {
+        if (c.variant.name === "neutral") {
           return 85;
-        } else if (s.variant === "tonalSpot") {
-          return tMaxC(s.getPalette("primary"), 0, 90);
+        } else if (c.variant.name === "tonalSpot") {
+          return tMaxC(palettes.get("primary"), 0, 90);
         } else {
-          return tMaxC(s.getPalette("primary"));
+          return tMaxC(palettes.get("primary"));
         }
       },
       isBackground: true,
-      background: (s) => getColor("surfaceContainerHigh"),
-      contrastCurve: (s) => getCurve(4.5),
-      adjustTone: (s) => toneDeltaPair(
-        colorService.getColor("primaryDim").getMaterialColor(),
-        colorService.getColor("primary").getMaterialColor(),
+      background: () => getColor("surfaceContainerHigh"),
+      contrastCurve: () => getCurve(4.5),
+      adjustTone: () => toneDeltaPair(
+        colors.get("primaryDim"),
+        colors.get("primary"),
         5,
         "darker",
         true,
@@ -2143,74 +2053,74 @@ const defaultColors = (colorService) => {
       )
     },
     onPrimary: {
-      palette: (s) => s.getPalette("primary"),
-      background: (s) => colorService.getColor("primary").getMaterialColor(),
-      contrastCurve: (s) => getCurve(6)
+      palette: () => palettes.get("primary"),
+      background: () => colors.get("primary"),
+      contrastCurve: () => getCurve(6)
     },
     primaryContainer: {
-      palette: (s) => s.getPalette("primary"),
-      tone: (s) => {
-        if (s.variant === "neutral") {
-          return s.isDark ? 30 : 90;
-        } else if (s.variant === "tonalSpot") {
-          return s.isDark ? tMinC(s.getPalette("primary"), 35, 93) : tMaxC(s.getPalette("primary"), 0, 90);
-        } else if (s.variant === "expressive") {
-          return s.isDark ? tMaxC(s.getPalette("primary"), 30, 93) : tMaxC(
-            s.getPalette("primary"),
+      palette: () => palettes.get("primary"),
+      tone: () => {
+        if (c.variant.name === "neutral") {
+          return c.isDark ? 30 : 90;
+        } else if (c.variant.name === "tonalSpot") {
+          return c.isDark ? tMinC(palettes.get("primary"), 35, 93) : tMaxC(palettes.get("primary"), 0, 90);
+        } else if (c.variant.name === "expressive") {
+          return c.isDark ? tMaxC(palettes.get("primary"), 30, 93) : tMaxC(
+            palettes.get("primary"),
             78,
-            Hct.isCyan(s.getPalette("primary").hue) ? 88 : 90
+            Hct.isCyan(palettes.get("primary").hue) ? 88 : 90
           );
         }
-        if (s.variant == "fidelity") {
-          return s.isDark ? tMaxC(s.getPalette("primary"), 30, 93) : tMaxC(
-            s.getPalette("primary"),
-            78,
-            Hct.isCyan(s.getPalette("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 s.isDark ? tMinC(s.getPalette("primary"), 66, 93) : tMaxC(
-            s.getPalette("primary"),
+          return c.isDark ? tMinC(palettes.get("primary"), 66, 93) : tMaxC(
+            palettes.get("primary"),
             66,
-            Hct.isCyan(s.getPalette("primary").hue) ? 88 : 93
+            Hct.isCyan(palettes.get("primary").hue) ? 88 : 93
           );
         }
       },
       isBackground: true,
-      background: (s) => highestSurface(s, colorService),
-      adjustTone: (s) => s.variant == "fidelity" ? toneDeltaPair(
-        colorService.getColor("primary").getMaterialColor(),
-        colorService.getColor("primaryContainer").getMaterialColor(),
+      background: () => highestSurface(c, colors),
+      adjustTone: () => c.variant.name == "fidelity" ? toneDeltaPair(
+        colors.get("primary"),
+        colors.get("primaryContainer"),
         15,
         "relative_darker",
         true,
         "farther"
       ) : void 0,
-      contrastCurve: (s) => s.contrastLevel > 0 ? getCurve(1.5) : void 0
+      contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
     },
     onPrimaryContainer: {
-      palette: (s) => s.getPalette("primary"),
-      background: (s) => colorService.getColor("primaryContainer").getMaterialColor(),
-      contrastCurve: (s) => getCurve(6)
+      palette: () => palettes.get("primary"),
+      background: () => colors.get("primaryContainer"),
+      contrastCurve: () => getCurve(6)
     },
     primaryFixed: {
-      palette: (s) => s.getPalette("primary"),
-      tone: (s) => {
-        const tempS = new Scheme({
-          ...s.options,
-          isDark: false,
-          contrastLevel: 0
-        });
-        return getColor("primaryContainer").getTone(tempS);
+      palette: () => palettes.get("primary"),
+      tone: () => {
+        return c.temp(
+          {
+            isDark: false,
+            contrastLevel: 0
+          },
+          () => {
+            const color = getColor("primaryContainer");
+            return color.getTone();
+          }
+        );
       },
       isBackground: true,
-      background: (s) => highestSurface(s, colorService),
-      contrastCurve: (s) => s.contrastLevel > 0 ? getCurve(1.5) : void 0
+      background: () => highestSurface(c, colors),
+      contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
     },
     primaryFixedDim: {
-      palette: (s) => s.getPalette("primary"),
-      tone: (s) => colorService.getColor("primaryFixed").getMaterialColor().getTone(s),
+      palette: () => palettes.get("primary"),
+      tone: () => colors.get("primaryFixed").getTone(),
       isBackground: true,
-      adjustTone: (s) => toneDeltaPair(
+      adjustTone: () => toneDeltaPair(
         getColor("primaryFixedDim"),
         getColor("primaryFixed"),
         5,
@@ -2220,39 +2130,39 @@ const defaultColors = (colorService) => {
       )
     },
     onPrimaryFixed: {
-      palette: (s) => s.getPalette("primary"),
-      background: (s) => colorService.getColor("primaryFixedDim").getMaterialColor(),
-      contrastCurve: (s) => getCurve(7)
+      palette: () => palettes.get("primary"),
+      background: () => colors.get("primaryFixedDim"),
+      contrastCurve: () => getCurve(7)
     },
     onPrimaryFixedVariant: {
-      palette: (s) => s.getPalette("primary"),
-      background: (s) => colorService.getColor("primaryFixedDim").getMaterialColor(),
-      contrastCurve: (s) => getCurve(4.5)
+      palette: () => palettes.get("primary"),
+      background: () => colors.get("primaryFixedDim"),
+      contrastCurve: () => getCurve(4.5)
     },
     inversePrimary: {
-      palette: (s) => s.getPalette("primary"),
-      tone: (s) => tMaxC(s.getPalette("primary")),
-      background: (s) => colorService.getColor("inverseSurface").getMaterialColor(),
-      contrastCurve: (s) => getCurve(6)
+      palette: () => palettes.get("primary"),
+      tone: () => tMaxC(palettes.get("primary")),
+      background: () => colors.get("inverseSurface"),
+      contrastCurve: () => getCurve(6)
     },
     ////////////////////////////////////////////////////////////////
     // Secondaries [Q]                                            //
     ////////////////////////////////////////////////////////////////
     secondary: {
-      palette: (s) => s.getPalette("secondary"),
-      tone: (s) => {
-        if (s.variant === "neutral") {
-          return s.isDark ? tMinC(s.getPalette("secondary"), 0, 98) : tMaxC(s.getPalette("secondary"));
-        } else if (s.variant === "vibrant") {
-          return tMaxC(s.getPalette("secondary"), 0, s.isDark ? 90 : 98);
+      palette: () => palettes.get("secondary"),
+      tone: () => {
+        if (c.variant.name === "neutral") {
+          return c.isDark ? tMinC(palettes.get("secondary"), 0, 98) : tMaxC(palettes.get("secondary"));
+        } else if (c.variant.name === "vibrant") {
+          return tMaxC(palettes.get("secondary"), 0, c.isDark ? 90 : 98);
         } else {
-          return s.isDark ? 80 : tMaxC(s.getPalette("secondary"));
+          return c.isDark ? 80 : tMaxC(palettes.get("secondary"));
         }
       },
       isBackground: true,
-      background: (s) => highestSurface(s, colorService),
-      contrastCurve: (s) => getCurve(4.5),
-      adjustTone: (s) => toneDeltaPair(
+      background: () => highestSurface(c, colors),
+      contrastCurve: () => getCurve(4.5),
+      adjustTone: () => toneDeltaPair(
         getColor("secondaryContainer"),
         getColor("secondary"),
         5,
@@ -2262,18 +2172,18 @@ const defaultColors = (colorService) => {
       )
     },
     secondaryDim: {
-      palette: (s) => s.getPalette("secondary"),
-      tone: (s) => {
-        if (s.variant === "neutral") {
+      palette: () => palettes.get("secondary"),
+      tone: () => {
+        if (c.variant.name === "neutral") {
           return 85;
         } else {
-          return tMaxC(s.getPalette("secondary"), 0, 90);
+          return tMaxC(palettes.get("secondary"), 0, 90);
         }
       },
       isBackground: true,
-      background: (s) => getColor("surfaceContainerHigh"),
-      contrastCurve: (s) => getCurve(4.5),
-      adjustTone: (s) => toneDeltaPair(
+      background: () => getColor("surfaceContainerHigh"),
+      contrastCurve: () => getCurve(4.5),
+      adjustTone: () => toneDeltaPair(
         getColor("secondaryDim"),
         getColor("secondary"),
         5,
@@ -2283,50 +2193,54 @@ const defaultColors = (colorService) => {
       )
     },
     onSecondary: {
-      palette: (s) => s.getPalette("secondary"),
-      background: (s) => getColor("secondary"),
-      contrastCurve: (s) => getCurve(6)
+      palette: () => palettes.get("secondary"),
+      background: () => getColor("secondary"),
+      contrastCurve: () => getCurve(6)
     },
     secondaryContainer: {
-      palette: (s) => s.getPalette("secondary"),
-      tone: (s) => {
-        if (s.variant === "vibrant") {
-          return s.isDark ? tMinC(s.getPalette("secondary"), 30, 40) : tMaxC(s.getPalette("secondary"), 84, 90);
-        } else if (s.variant === "expressive") {
-          return s.isDark ? 15 : tMaxC(s.getPalette("secondary"), 90, 95);
+      palette: () => palettes.get("secondary"),
+      tone: () => {
+        if (c.variant.name === "vibrant") {
+          return c.isDark ? tMinC(palettes.get("secondary"), 30, 40) : tMaxC(palettes.get("secondary"), 84, 90);
+        } else if (c.variant.name === "expressive") {
+          return c.isDark ? 15 : tMaxC(palettes.get("secondary"), 90, 95);
         } else {
-          return s.isDark ? 25 : 90;
+          return c.isDark ? 25 : 90;
         }
       },
       isBackground: true,
-      background: (s) => highestSurface(s, colorService),
-      adjustTone: (s) => void 0,
-      contrastCurve: (s) => s.contrastLevel > 0 ? getCurve(1.5) : void 0
+      background: () => highestSurface(c, colors),
+      adjustTone: () => void 0,
+      contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
     },
     onSecondaryContainer: {
-      palette: (s) => s.getPalette("secondary"),
-      background: (s) => getColor("secondaryContainer"),
-      contrastCurve: (s) => getCurve(6)
+      palette: () => palettes.get("secondary"),
+      background: () => getColor("secondaryContainer"),
+      contrastCurve: () => getCurve(6)
     },
     secondaryFixed: {
-      palette: (s) => s.getPalette("secondary"),
-      tone: (s) => {
-        const tempS = new Scheme({
-          ...s.options,
-          isDark: false,
-          contrastLevel: 0
-        });
-        return getColor("secondaryContainer").getTone(tempS);
+      palette: () => palettes.get("secondary"),
+      tone: () => {
+        return c.temp(
+          {
+            isDark: false,
+            contrastLevel: 0
+          },
+          () => {
+            const color = getColor("secondaryContainer");
+            return color.getTone();
+          }
+        );
       },
       isBackground: true,
-      background: (s) => highestSurface(s, colorService),
-      contrastCurve: (s) => s.contrastLevel > 0 ? getCurve(1.5) : void 0
+      background: () => highestSurface(c, colors),
+      contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
     },
     secondaryFixedDim: {
-      palette: (s) => s.getPalette("secondary"),
-      tone: (s) => getColor("secondaryFixed").getTone(s),
+      palette: () => palettes.get("secondary"),
+      tone: () => getColor("secondaryFixed").getTone(),
       isBackground: true,
-      adjustTone: (s) => toneDeltaPair(
+      adjustTone: () => toneDeltaPair(
         getColor("secondaryFixedDim"),
         getColor("secondaryFixed"),
         5,
@@ -2336,35 +2250,35 @@ const defaultColors = (colorService) => {
       )
     },
     onSecondaryFixed: {
-      palette: (s) => s.getPalette("secondary"),
-      background: (s) => getColor("secondaryFixedDim"),
-      contrastCurve: (s) => getCurve(7)
+      palette: () => palettes.get("secondary"),
+      background: () => getColor("secondaryFixedDim"),
+      contrastCurve: () => getCurve(7)
     },
     onSecondaryFixedVariant: {
-      palette: (s) => s.getPalette("secondary"),
-      background: (s) => getColor("secondaryFixedDim"),
-      contrastCurve: (s) => getCurve(4.5)
+      palette: () => palettes.get("secondary"),
+      background: () => getColor("secondaryFixedDim"),
+      contrastCurve: () => getCurve(4.5)
     },
     ////////////////////////////////////////////////////////////////
     // Tertiaries [T]                                             //
     ////////////////////////////////////////////////////////////////
     tertiary: {
-      palette: (s) => s.getPalette("tertiary"),
-      tone: (s) => {
-        if (s.variant === "expressive" || s.variant === "vibrant") {
+      palette: () => palettes.get("tertiary"),
+      tone: () => {
+        if (c.variant.name === "expressive" || c.variant.name === "vibrant") {
           return tMaxC(
-            s.getPalette("tertiary"),
+            palettes.get("tertiary"),
             0,
-            Hct.isCyan(s.getPalette("tertiary").hue) ? 88 : s.isDark ? 98 : 100
+            Hct.isCyan(palettes.get("tertiary").hue) ? 88 : c.isDark ? 98 : 100
           );
         } else {
-          return s.isDark ? tMaxC(s.getPalette("tertiary"), 0, 98) : tMaxC(s.getPalette("tertiary"));
+          return c.isDark ? tMaxC(palettes.get("tertiary"), 0, 98) : tMaxC(palettes.get("tertiary"));
         }
       },
       isBackground: true,
-      background: (s) => highestSurface(s, colorService),
-      contrastCurve: (s) => getCurve(4.5),
-      adjustTone: (s) => toneDeltaPair(
+      background: () => highestSurface(c, colors),
+      contrastCurve: () => getCurve(4.5),
+      adjustTone: () => toneDeltaPair(
         getColor("tertiaryContainer"),
         getColor("tertiary"),
         5,
@@ -2374,18 +2288,18 @@ const defaultColors = (colorService) => {
       )
     },
     tertiaryDim: {
-      palette: (s) => s.getPalette("tertiary"),
-      tone: (s) => {
-        if (s.variant === "tonalSpot") {
-          return tMaxC(s.getPalette("tertiary"), 0, 90);
+      palette: () => palettes.get("tertiary"),
+      tone: () => {
+        if (c.variant.name === "tonalSpot") {
+          return tMaxC(palettes.get("tertiary"), 0, 90);
         } else {
-          return tMaxC(s.getPalette("tertiary"));
+          return tMaxC(palettes.get("tertiary"));
         }
       },
       isBackground: true,
-      background: (s) => getColor("surfaceContainerHigh"),
-      contrastCurve: (s) => getCurve(4.5),
-      adjustTone: (s) => toneDeltaPair(
+      background: () => getColor("surfaceContainerHigh"),
+      contrastCurve: () => getCurve(4.5),
+      adjustTone: () => toneDeltaPair(
         getColor("tertiaryDim"),
         getColor("tertiary"),
         5,
@@ -2395,56 +2309,60 @@ const defaultColors = (colorService) => {
       )
     },
     onTertiary: {
-      palette: (s) => s.getPalette("tertiary"),
-      background: (s) => getColor("tertiary"),
-      contrastCurve: (s) => getCurve(6)
+      palette: () => palettes.get("tertiary"),
+      background: () => getColor("tertiary"),
+      contrastCurve: () => getCurve(6)
     },
     tertiaryContainer: {
-      palette: (s) => s.getPalette("tertiary"),
-      tone: (s) => {
-        if (s.variant === "neutral") {
-          return s.isDark ? tMaxC(s.getPalette("tertiary"), 0, 93) : tMaxC(s.getPalette("tertiary"), 0, 96);
-        } else if (s.variant === "tonalSpot") {
-          return tMaxC(s.getPalette("tertiary"), 0, s.isDark ? 93 : 100);
-        } else if (s.variant === "expressive") {
+      palette: () => palettes.get("tertiary"),
+      tone: () => {
+        if (c.variant.name === "neutral") {
+          return c.isDark ? tMaxC(palettes.get("tertiary"), 0, 93) : tMaxC(palettes.get("tertiary"), 0, 96);
+        } else if (c.variant.name === "tonalSpot") {
+          return tMaxC(palettes.get("tertiary"), 0, c.isDark ? 93 : 100);
+        } else if (c.variant.name === "expressive") {
           return tMaxC(
-            s.getPalette("tertiary"),
+            palettes.get("tertiary"),
             75,
-            Hct.isCyan(s.getPalette("tertiary").hue) ? 88 : s.isDark ? 93 : 100
+            Hct.isCyan(palettes.get("tertiary").hue) ? 88 : c.isDark ? 93 : 100
           );
         } else {
-          return s.isDark ? tMaxC(s.getPalette("tertiary"), 0, 93) : tMaxC(s.getPalette("tertiary"), 72, 100);
+          return c.isDark ? tMaxC(palettes.get("tertiary"), 0, 93) : tMaxC(palettes.get("tertiary"), 72, 100);
         }
       },
       isBackground: true,
-      background: (s) => highestSurface(s, colorService),
-      adjustTone: (s) => void 0,
-      contrastCurve: (s) => s.contrastLevel > 0 ? getCurve(1.5) : void 0
+      background: () => highestSurface(c, colors),
+      adjustTone: () => void 0,
+      contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
     },
     onTertiaryContainer: {
-      palette: (s) => s.getPalette("tertiary"),
-      background: (s) => getColor("tertiaryContainer"),
-      contrastCurve: (s) => getCurve(6)
+      palette: () => palettes.get("tertiary"),
+      background: () => getColor("tertiaryContainer"),
+      contrastCurve: () => getCurve(6)
     },
     tertiaryFixed: {
-      palette: (s) => s.getPalette("tertiary"),
-      tone: (s) => {
-        const tempS = new Scheme({
-          ...s.options,
-          isDark: false,
-          contrastLevel: 0
-        });
-        return getColor("tertiaryContainer").getTone(tempS);
+      palette: () => palettes.get("tertiary"),
+      tone: () => {
+        return c.temp(
+          {
+            isDark: false,
+            contrastLevel: 0
+          },
+          () => {
+            const color = getColor("tertiaryContainer");
+            return color.getTone();
+          }
+        );
       },
       isBackground: true,
-      background: (s) => highestSurface(s, colorService),
-      contrastCurve: (s) => s.contrastLevel > 0 ? getCurve(1.5) : void 0
+      background: () => highestSurface(c, colors),
+      contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
     },
     tertiaryFixedDim: {
-      palette: (s) => s.getPalette("tertiary"),
-      tone: (s) => getColor("tertiaryFixed").getTone(s),
+      palette: () => palettes.get("tertiary"),
+      tone: () => getColor("tertiaryFixed").getTone(),
       isBackground: true,
-      adjustTone: (s) => toneDeltaPair(
+      adjustTone: () => toneDeltaPair(
         getColor("tertiaryFixedDim"),
         getColor("tertiaryFixed"),
         5,
@@ -2454,29 +2372,29 @@ const defaultColors = (colorService) => {
       )
     },
     onTertiaryFixed: {
-      palette: (s) => s.getPalette("tertiary"),
-      background: (s) => getColor("tertiaryFixedDim"),
-      contrastCurve: (s) => getCurve(7)
+      palette: () => palettes.get("tertiary"),
+      background: () => getColor("tertiaryFixedDim"),
+      contrastCurve: () => getCurve(7)
     },
     onTertiaryFixedVariant: {
-      palette: (s) => s.getPalette("tertiary"),
-      background: (s) => getColor("tertiaryFixedDim"),
-      contrastCurve: (s) => getCurve(4.5)
+      palette: () => palettes.get("tertiary"),
+      background: () => getColor("tertiaryFixedDim"),
+      contrastCurve: () => getCurve(4.5)
     },
     ////////////////////////////////////////////////////////////////
     // Errors [E]                                                 //
     ////////////////////////////////////////////////////////////////
     error: {
-      palette: (s) => s.getPalette("error"),
-      tone: (s) => {
-        return s.isDark ? tMinC(s.getPalette("error"), 0, 98) : tMaxC(s.getPalette("error"));
+      palette: () => palettes.get("error"),
+      tone: () => {
+        return c.isDark ? tMinC(palettes.get("error"), 0, 98) : tMaxC(palettes.get("error"));
       },
       isBackground: true,
-      background: (s) => highestSurface(s, colorService),
-      contrastCurve: (s) => getCurve(4.5),
-      adjustTone: (s) => toneDeltaPair(
-        colorService.getColor("errorContainer").getMaterialColor(),
-        colorService.getColor("error").getMaterialColor(),
+      background: () => highestSurface(c, colors),
+      contrastCurve: () => getCurve(4.5),
+      adjustTone: () => toneDeltaPair(
+        colors.get("errorContainer"),
+        colors.get("error"),
         5,
         "relative_lighter",
         true,
@@ -2484,12 +2402,12 @@ const defaultColors = (colorService) => {
       )
     },
     errorDim: {
-      palette: (s) => s.getPalette("error"),
-      tone: (s) => tMinC(s.getPalette("error")),
+      palette: () => palettes.get("error"),
+      tone: () => tMinC(palettes.get("error")),
       isBackground: true,
-      background: (s) => getColor("surfaceContainerHigh"),
-      contrastCurve: (s) => getCurve(4.5),
-      adjustTone: (s) => toneDeltaPair(
+      background: () => getColor("surfaceContainerHigh"),
+      contrastCurve: () => getCurve(4.5),
+      adjustTone: () => toneDeltaPair(
         getColor("errorDim"),
         getColor("error"),
         5,
@@ -2499,24 +2417,24 @@ const defaultColors = (colorService) => {
       )
     },
     onError: {
-      palette: (s) => s.getPalette("error"),
-      background: (s) => colorService.getColor("error").getMaterialColor(),
-      contrastCurve: (s) => getCurve(6)
+      palette: () => palettes.get("error"),
+      background: () => colors.get("error"),
+      contrastCurve: () => getCurve(6)
     },
     errorContainer: {
-      palette: (s) => s.getPalette("error"),
-      tone: (s) => {
-        return s.isDark ? tMinC(s.getPalette("error"), 30, 93) : tMaxC(s.getPalette("error"), 0, 90);
+      palette: () => palettes.get("error"),
+      tone: () => {
+        return c.isDark ? tMinC(palettes.get("error"), 30, 93) : tMaxC(palettes.get("error"), 0, 90);
       },
       isBackground: true,
-      background: (s) => highestSurface(s, colorService),
-      adjustTone: (s) => void 0,
-      contrastCurve: (s) => s.contrastLevel > 0 ? getCurve(1.5) : void 0
+      background: () => highestSurface(c, colors),
+      adjustTone: () => void 0,
+      contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
     },
     onErrorContainer: {
-      palette: (s) => s.getPalette("error"),
-      background: (s) => colorService.getColor("errorContainer").getMaterialColor(),
-      contrastCurve: (s) => getCurve(4.5)
+      palette: () => palettes.get("error"),
+      background: () => colors.get("errorContainer"),
+      contrastCurve: () => getCurve(4.5)
     },
     /////////////////////////////////////////////////////////////////
     // Remapped Colors                                             //
@@ -2534,27 +2452,7 @@ const defaultColors = (colorService) => {
       alias: "onSurface"
     }
   };
-  return {
-    colors
-  };
 };
-class API {
-  constructor({
-    colorApi,
-    themeApi,
-    pluginApi
-  }) {
-    __publicField(this, "colors");
-    __publicField(this, "themes");
-    __publicField(this, "plugins");
-    this.plugins = pluginApi;
-    this.colors = colorApi;
-    this.themes = themeApi;
-  }
-  async load() {
-    return this.plugins.loadPlugins();
-  }
-}
 const AppModule = {
   api: asClass(API).singleton()
 };
@@ -2601,54 +2499,650 @@ class PluginApi {
 const PluginModule = {
   pluginApi: asClass(PluginApi).singleton()
 };
-function registerModule(...modules) {
-  modules.forEach((module) => {
-    Object.entries(module).forEach(([name, moduleClass]) => {
-      AppContainer.register(name, moduleClass);
+class Context {
+  constructor() {
+    __publicField(this, "_options");
+    __publicField(this, "_temOptions", null);
+    __publicField(this, "updateCallbacks", []);
+    this.onUpdate((changed) => {
+      if (changed.includes("variant")) {
+        this.variant.init(this);
+      }
     });
-  });
-  return AppContainer;
+  }
+  /**
+   * Runs the provided callback with a proxied Context and records which Context
+   * properties (getters) were accessed during its execution.
+   *
+   * This helps determine dependencies of the callback on the Context.
+   *
+   * Example usage:
+   * const { result, dependencies } = Context.trackDependencies(ctx, (c) => cb(c));
+   */
+  static trackDependencies(context, callback) {
+    const dependencies = /* @__PURE__ */ new Set();
+    const isGetterOnContext = (prop) => {
+      if (typeof prop !== "string") return false;
+      const desc = Object.getOwnPropertyDescriptor(Context.prototype, prop);
+      return !!desc && typeof desc.get === "function";
+    };
+    const proxy = new Proxy(context, {
+      get(target, prop, receiver) {
+        if (isGetterOnContext(prop)) {
+          dependencies.add(prop);
+        }
+        return Reflect.get(target, prop, receiver);
+      }
+    });
+    const result = callback(proxy);
+    return { result, dependencies: Array.from(dependencies) };
+  }
+  set(options) {
+    if (this._options) {
+      console.error(this._options);
+      throw new Error("Options already set");
+    }
+    if (typeof options.sourceColor === "string") {
+      options.sourceColor = Hct.fromInt(argbFromHex(options.sourceColor));
+    }
+    const changed = [];
+    for (const key of Object.keys(options)) {
+      changed.push(key);
+    }
+    this._options = options;
+    if (changed.length > 0) {
+      this.updateCallbacks.forEach((callback) => callback(changed));
+    }
+  }
+  update(args) {
+    const options = this._options;
+    if (!options) {
+      throw new Error("Options not found");
+    }
+    if (typeof args.sourceColor === "string") {
+      args.sourceColor = Hct.fromInt(argbFromHex(args.sourceColor));
+    }
+    const changed = [];
+    for (const key of Object.keys(args)) {
+      if (args[key] !== options[key]) {
+        changed.push(key);
+      }
+    }
+    this._options = {
+      ...options,
+      ...args
+    };
+    if (changed.length > 0) {
+      this.updateCallbacks.forEach((callback) => callback(changed));
+    }
+  }
+  getOptions() {
+    let options;
+    if (this._temOptions) {
+      options = this._temOptions;
+    } else {
+      options = this._options;
+    }
+    if (!options) {
+      throw new Error("Options not found");
+    }
+    return options;
+  }
+  set darkMode(isDark) {
+    this.update({ isDark });
+  }
+  get isDark() {
+    return this.getOptions().isDark;
+  }
+  set contrastLevel(contrastLevel) {
+    this.update({ contrastLevel });
+  }
+  get contrastLevel() {
+    return this.getOptions().contrastLevel;
+  }
+  set sourceColor(sourceColor) {
+    this.update({ sourceColor });
+  }
+  get sourceColor() {
+    let sourceColor = this.getOptions().sourceColor;
+    if (typeof sourceColor === "string") {
+      sourceColor = Hct.fromInt(argbFromHex(sourceColor));
+    }
+    return sourceColor;
+  }
+  set variant(variant2) {
+    this.update({ variant: variant2 });
+  }
+  get variant() {
+    return this.getOptions().variant;
+  }
+  temp(args, callback) {
+    const previousOptions = this.getOptions();
+    this._temOptions = {
+      ...previousOptions,
+      ...args
+    };
+    const result = callback();
+    this._temOptions = null;
+    return result;
+  }
+  onUpdate(callback) {
+    this.updateCallbacks.push(callback);
+  }
 }
-const AppContainer = createContainer({
-  injectionMode: InjectionMode.PROXY
-});
-registerModule(AppModule, PluginModule, ColorModule, ThemeModule);
-function bootstrap() {
-  return AppContainer.resolve("api");
+const ContextModule = {
+  context: asClass(Context).singleton()
+};
+class Palette {
+  constructor(name, callback, context) {
+    __publicField(this, "cache", /* @__PURE__ */ new Map());
+    __publicField(this, "hueCache", null);
+    __publicField(this, "chromaCache", null);
+    __publicField(this, "dependencies", null);
+    this.name = name;
+    this.callback = callback;
+    this.context = context;
+    this.update([]);
+  }
+  static fromVariant(name, color, ctx) {
+    const callback = (context) => {
+      return context.variant.customPalettes(context, color);
+    };
+    return new Palette(name, callback, ctx);
+  }
+  update(change) {
+    let result = 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) => {
+      var _a;
+      return (_a = this.dependencies) == null ? void 0 : _a.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;
+    }
+  }
+  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) {
+    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 === void 0) {
+      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) {
+    return Hct.fromInt(this.tone(tone));
+  }
+  get hue() {
+    const hue = this.hueCache;
+    if (hue == null) {
+      throw new Error(`Palette ${this.name} must be updated before using hue`);
+    }
+    return hue;
+  }
+  get chroma() {
+    const chroma = this.chromaCache;
+    if (chroma == null) {
+      throw new Error(`Palette ${this.name} must be updated before using hue`);
+    }
+    return chroma;
+  }
+  averageArgb(argb1, argb2) {
+    const red1 = argb1 >>> 16 & 255;
+    const green1 = argb1 >>> 8 & 255;
+    const blue1 = argb1 & 255;
+    const red2 = argb2 >>> 16 & 255;
+    const green2 = argb2 >>> 8 & 255;
+    const blue2 = argb2 & 255;
+    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;
+  }
 }
-const initializeApi = () => {
-  const api = bootstrap();
-  registerModule({
-    adapter: asValue(void 0)
+class PaletteApi {
+  constructor({ paletteManager }) {
+    __publicField(this, "paletteManager");
+    this.paletteManager = paletteManager;
+  }
+  add(args) {
+    Object.entries(args).forEach(([key, callback]) => {
+      if (typeof callback === "string") {
+        this.paletteManager.addCustomPalette(
+          key,
+          Hct.fromInt(argbFromHex(callback))
+        );
+      } else {
+        this.paletteManager.add(key, callback);
+      }
+    });
+  }
+  get(key) {
+    return this.paletteManager.get(key);
+  }
+  getAll() {
+    return this.paletteManager.palettes;
+  }
+}
+class PaletteManager {
+  constructor(args) {
+    __publicField(this, "_palettes", {});
+    __publicField(this, "context");
+    __publicField(this, "colorApi");
+    this.colorApi = args.colorApi;
+    this.context = args.context;
+    this.context.onUpdate(
+      (changed) => Object.entries(this.palettes).forEach(([key, value]) => {
+        value.update(changed);
+      })
+    );
+  }
+  get palettes() {
+    return {
+      ...this.context.variant.palettes,
+      ...this._palettes
+    };
+  }
+  addCustomPalette(key, color) {
+    const palette = Palette.fromVariant(key, color, this.context);
+    this.add(key, palette);
+    this.colorApi.addFromCustomPalette(key);
+  }
+  add(key, palette) {
+    if (this._palettes["key"]) {
+      throw new Error(`Palette with key ${key} already exists`);
+    }
+    if (!(palette instanceof Palette))
+      palette = new Palette(key, palette, this.context);
+    this.set(key, palette);
+  }
+  get(key) {
+    const palette = this.palettes[key];
+    if (!palette) {
+      throw new Error(`Palette ${key} not found`);
+    }
+    return palette;
+  }
+  set(key, palette) {
+    this._palettes[key] = palette;
+  }
+  update(key, args) {
+    if (!this.palettes["key"]) {
+      throw new Error(`Palette with key ${key} not found`);
+    }
+    if (!(args instanceof Palette)) {
+      args = new Palette(key, args, this.context);
+    }
+    this.set(key, args);
+  }
+}
+const PaletteModule = {
+  paletteApi: asClass(PaletteApi).singleton(),
+  paletteManager: asClass(PaletteManager).singleton()
+};
+const AppContainer = () => {
+  function registerModule(...modules) {
+    modules.forEach((module) => {
+      Object.entries(module).forEach(([name, moduleClass]) => {
+        container.register(name, moduleClass);
+      });
+    });
+    return AppContainer;
+  }
+  const container = createContainer({
+    injectionMode: InjectionMode.PROXY
   });
-  return api;
+  registerModule(
+    AppModule,
+    PluginModule,
+    ColorModule,
+    PaletteModule,
+    ContextModule
+  );
+  return container;
+};
+function bootstrap() {
+  return AppContainer().resolve("api");
+}
+const getPiecewiseHue = (sourceColor, hueBreakpoints, hues) => {
+  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;
 };
-const loader = async (config) => {
-  const api = initializeApi();
+const getRotatedHue = (sourceColor, hueBreakpoints, rotations) => {
+  let rotation = getPiecewiseHue(sourceColor, hueBreakpoints, rotations);
+  if (Math.min(hueBreakpoints.length - 1, rotations.length) <= 0) {
+    rotation = 0;
+  }
+  return sanitizeDegreesDouble(sourceColor.hue + rotation);
+};
+class Variant {
+  constructor(options) {
+    __publicField(this, "_palettes");
+    __publicField(this, "customPalettes");
+    __publicField(this, "colors");
+    __publicField(this, "name");
+    __publicField(this, "context");
+    this.options = options;
+    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) {
+    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)
+      }),
+      {}
+    );
+  }
+}
+const variant = (args) => new Variant(args);
+const getExpressiveNeutralHue = (sourceColor) => {
+  const hue = getRotatedHue(
+    sourceColor,
+    [0, 71, 124, 253, 278, 300, 360],
+    [10, 0, 10, 0, 10, 0]
+  );
+  return hue;
+};
+const getExpressiveNeutralChroma = (sourceColor, isDark) => {
+  const neutralHue = getExpressiveNeutralHue(sourceColor);
+  return isDark ? Hct.isYellow(neutralHue) ? 6 : 14 : 18;
+};
+const expressiveVariant = variant({
+  name: "expressive",
+  palettes: {
+    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]
+      ),
+      chroma: isDark ? 16 : 24
+    }),
+    tertiary: ({ sourceColor }) => TonalPalette.fromHueAndChroma(
+      getRotatedHue(
+        sourceColor,
+        [0, 105, 140, 204, 253, 278, 300, 333, 360],
+        [-165, 160, -105, 101, -101, -160, -170, -165]
+      ),
+      48
+    ),
+    neutral: ({ sourceColor, isDark }) => TonalPalette.fromHueAndChroma(
+      getExpressiveNeutralHue(sourceColor),
+      getExpressiveNeutralChroma(sourceColor, isDark)
+    ),
+    neutralVariant: ({ sourceColor, isDark }) => {
+      const expressiveNeutralHue = getExpressiveNeutralHue(sourceColor);
+      const expressiveNeutralChroma = getExpressiveNeutralChroma(
+        sourceColor,
+        isDark
+      );
+      return TonalPalette.fromHueAndChroma(
+        expressiveNeutralHue,
+        expressiveNeutralChroma * (expressiveNeutralHue >= 105 && expressiveNeutralHue < 125 ? 1.6 : 2.3)
+      );
+    },
+    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, 64);
+    }
+  },
+  customPalettes: ({ isDark }, color) => TonalPalette.fromHueAndChroma(
+    getRotatedHue(
+      color,
+      [0, 105, 140, 204, 253, 278, 300, 333, 360],
+      [-160, 155, -100, 96, -96, -156, -165, -160]
+    ),
+    isDark ? 16 : 24
+  )
+});
+const neutralVariant = variant({
+  name: "neutral",
+  palettes: {
+    primary: ({ sourceColor }) => TonalPalette.fromHueAndChroma(
+      sourceColor.hue,
+      Hct.isBlue(sourceColor.hue) ? 12 : 8
+    ),
+    secondary: ({ sourceColor }) => TonalPalette.fromHueAndChroma(
+      sourceColor.hue,
+      Hct.isBlue(sourceColor.hue) ? 6 : 4
+    ),
+    tertiary: ({ sourceColor }) => TonalPalette.fromHueAndChroma(
+      getRotatedHue(
+        sourceColor,
+        [0, 38, 105, 161, 204, 278, 333, 360],
+        [-32, 26, 10, -39, 24, -15, -32]
+      ),
+      20
+    ),
+    neutral: ({ sourceColor }) => TonalPalette.fromHueAndChroma(sourceColor.hue, 1.4),
+    neutralVariant: ({ sourceColor }) => TonalPalette.fromHueAndChroma(sourceColor.hue, 1.4 * 2.2),
+    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, 50);
+    }
+  },
+  customPalettes: (_, colorHct) => TonalPalette.fromHueAndChroma(
+    colorHct.hue,
+    Hct.isBlue(colorHct.hue) ? 6 : 4
+  )
+});
+const tonalSpotVariant = 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)
+});
+const getVibrantNeutralHue = (sourceColor) => {
+  return getRotatedHue(
+    sourceColor,
+    [0, 38, 105, 140, 333, 360],
+    [-14, 10, -14, 10, -14]
+  );
+};
+const getVibrantNeutralChroma = (sourceColor) => {
+  return 28;
+};
+const vibrantVariant = variant({
+  name: "vibrant",
+  palettes: {
+    primary: ({ sourceColor }) => TonalPalette.fromHueAndChroma(sourceColor.hue, 74),
+    secondary: ({ sourceColor }) => TonalPalette.fromHueAndChroma(
+      getRotatedHue(
+        sourceColor,
+        [0, 38, 105, 140, 333, 360],
+        [-14, 10, -14, 10, -14]
+      ),
+      56
+    ),
+    tertiary: ({ sourceColor }) => TonalPalette.fromHueAndChroma(
+      getRotatedHue(
+        sourceColor,
+        [0, 38, 71, 105, 140, 161, 253, 333, 360],
+        [-72, 35, 24, -24, 62, 50, 62, -72]
+      ),
+      56
+    ),
+    neutral: ({ sourceColor }) => TonalPalette.fromHueAndChroma(
+      getVibrantNeutralHue(sourceColor),
+      getVibrantNeutralChroma()
+    ),
+    neutralVariant: ({ sourceColor }) => {
+      const vibrantNeutralHue = getVibrantNeutralHue(sourceColor);
+      const vibrantNeutralChroma = getVibrantNeutralChroma();
+      return TonalPalette.fromHueAndChroma(
+        vibrantNeutralHue,
+        vibrantNeutralChroma * 1.29
+      );
+    },
+    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, 80);
+    }
+  },
+  customPalettes: (_, colorHct) => TonalPalette.fromHueAndChroma(
+    getRotatedHue(
+      colorHct,
+      [0, 38, 105, 140, 333, 360],
+      [-14, 10, -14, 10, -14]
+    ),
+    56
+  )
+});
+const fidelityVariant = 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
+  })
+});
+const Variants = {
+  Expressive: expressiveVariant,
+  Neutral: neutralVariant,
+  TonalSpot: tonalSpotVariant,
+  Vibrant: vibrantVariant,
+  Fidelity: fidelityVariant
+};
+const loader = async (config, load = true) => {
+  const api = bootstrap();
   const init = () => {
     const {
       sourceColor,
       contrastLevel = 0,
       isDark = false,
-      variant = tonalSpotVariant,
+      variant: variant2 = Variants.TonalSpot,
       palettes,
       colors,
-      useDefaultColors = true,
       plugins
     } = config;
-    api.themes.create({
+    api.context.set({
       contrastLevel,
       isDark,
-      sourceColorHex: sourceColor,
-      variant
+      sourceColor,
+      variant: variant2
     });
+    api.colors.addColors(defaultColors);
     if (palettes) {
-      Object.entries(palettes).forEach(
-        ([key, value]) => api.themes.addCustomPalette(key, value)
-      );
-    }
-    if (useDefaultColors) {
-      api.colors.addColors(defaultColors);
+      api.palettes.add(palettes);
     }
     if (colors) {
       api.colors.addColors(colors);
@@ -2661,35 +3155,44 @@ const loader = async (config) => {
     }
   };
   init();
-  await api.load();
+  if (load) {
+    await api.load();
+  }
   return api;
 };
 export {
-  AppContainer as A,
+  API as A,
+  vibrantVariant as B,
   ColorApi as C,
   DynamicColor as D,
-  Hct as H,
-  PluginModule as P,
-  SchemeManager as S,
-  ThemeModule as T,
+  expressiveVariant as E,
+  neutralVariant as F,
+  Palette as P,
   Variant as V,
-  AppModule as a,
-  API as b,
-  ColorManager as c,
-  ColorModule as d,
-  ConfigurableColor as e,
-  defaultColors as f,
-  bootstrap as g,
+  AppContainer as a,
+  AppModule as b,
+  bootstrap as c,
+  ColorManager as d,
+  ColorModule as e,
+  Color as f,
+  getInitialToneFromBackground as g,
   highestSurface as h,
-  ContrastCurve as i,
-  PluginApi as j,
-  tonalSpotVariant as k,
-  loader as l,
-  Scheme as m,
-  ThemeApi as n,
-  getPiecewiseHue as o,
-  getRotatedHue as p,
-  VariantManager as q,
-  registerModule as r,
-  toneDeltaPair as t
+  ColorAlias as i,
+  ColorFromHex as j,
+  ColorFromPalette as k,
+  defaultColors as l,
+  ContextModule as m,
+  Context as n,
+  loader as o,
+  ContrastCurve as p,
+  PaletteApi as q,
+  PaletteModule as r,
+  PluginModule as s,
+  toneDeltaPair as t,
+  PluginApi as u,
+  getPiecewiseHue as v,
+  getRotatedHue as w,
+  variant as x,
+  Variants as y,
+  tonalSpotVariant as z
 };