@udixio/theme 2.1.18 → 2.1.20

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## 2.1.20 (2026-04-10)
+
+### 🚀 Features
+
+- **theme:** enhance theme configuration and improve plugin serialization ([789ad63](https://github.com/Udixio/UI/commit/789ad63))
+
+### ❤️ Thank You
+
+- Joël VIGREUX
+
+## 2.1.19 (2026-04-09)
+
+### 🚀 Features
+
+- **theme:** add worker-based CSS generation and theme serialization ([14af45b](https://github.com/Udixio/UI/commit/14af45b))
+- **theme:** export `htc` from material-color-utilities ([f100207](https://github.com/Udixio/UI/commit/f100207))
+- **theme:** enhance palette management with callbacks, overrides, and synchronization ([d404896](https://github.com/Udixio/UI/commit/d404896))
+
+### ❤️ Thank You
+
+- Joël VIGREUX
+
 ## 2.1.18 (2026-03-22)
 
 ### 🚀 Features

package/dist/bin.cjs

@@ -2,7 +2,7 @@
 const commander = require("commander");
 const chokidar = require("chokidar");
 const chalk = require("chalk");
-const loadFromPath = require("./load-from-path-CqNK9dVK.cjs");
+const loadFromPath = require("./load-from-path-CuBpH2Cs.cjs");
 const program = new commander.Command();
 async function runOnce(configPath) {
   try {

package/dist/bin.js

@@ -1,7 +1,7 @@
 import { Command } from "commander";
 import chokidar from "chokidar";
 import chalk from "chalk";
-import { l as loadFromPath } from "./load-from-path-CWtVz4o_.js";
+import { l as loadFromPath } from "./load-from-path-CvD4a_os.js";
 const program = new Command();
 async function runOnce(configPath) {
   try {

package/dist/browser.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const loader = require("./loader-Bwk-gC1Q.cjs");
-const font_plugin = require("./font.plugin-Dyfi_9m6.cjs");
+const loader = require("./loader-BN_VoxCd.cjs");
+const serialize = require("./serialize-DBJHQrbL.cjs");
 exports.API = loader.API;
 exports.AppContainer = loader.AppContainer;
 exports.AppModule = loader.AppModule;
@@ -16,6 +16,7 @@ exports.Context = loader.Context;
 exports.ContextModule = loader.ContextModule;
 exports.ContrastCurve = loader.ContrastCurve;
 exports.DynamicColor = loader.DynamicColor;
+exports.Hct = loader.Hct;
 exports.Palette = loader.Palette;
 exports.PaletteApi = loader.PaletteApi;
 exports.PaletteModule = loader.PaletteModule;
@@ -30,6 +31,7 @@ exports.expressiveVariant = loader.expressiveVariant;
 exports.getInitialToneFromBackground = loader.getInitialToneFromBackground;
 exports.getPiecewiseHue = loader.getPiecewiseHue;
 exports.getRotatedHue = loader.getRotatedHue;
+exports.getVariantByName = loader.getVariantByName;
 exports.highestSurface = loader.highestSurface;
 exports.loader = loader.loader;
 exports.neutralVariant = loader.neutralVariant;
@@ -37,8 +39,9 @@ exports.tonalSpotVariant = loader.tonalSpotVariant;
 exports.toneDeltaPair = loader.toneDeltaPair;
 exports.variant = loader.variant;
 exports.vibrantVariant = loader.vibrantVariant;
-exports.FontFamily = font_plugin.FontFamily;
-exports.FontPlugin = font_plugin.FontPlugin;
-exports.PluginAbstract = font_plugin.PluginAbstract;
-exports.PluginImplAbstract = font_plugin.PluginImplAbstract;
-exports.defineConfig = font_plugin.defineConfig;
+exports.FontFamily = serialize.FontFamily;
+exports.FontPlugin = serialize.FontPlugin;
+exports.PluginAbstract = serialize.PluginAbstract;
+exports.PluginImplAbstract = serialize.PluginImplAbstract;
+exports.defineConfig = serialize.defineConfig;
+exports.serializeThemeContext = serialize.serializeThemeContext;

package/dist/browser.js

@@ -1,5 +1,5 @@
-import { A, a, b, C, c, d, e, f, g, h, i, j, k, D, P, l, m, n, o, V, p, q, r, s, t, u, v, w, x, y, z, B, E, F, G } from "./loader-CXjYZgR0.js";
-import { F as F2, a as a2, P as P2, b as b2, d as d2 } from "./font.plugin-CZBx3UOh.js";
+import { A, a, b, C, c, d, e, f, g, h, i, j, k, D, H, P, l, m, n, o, V, p, q, r, s, t, u, v, w, x, y, z, B, E, F, G, I } from "./loader-J0nrh600.js";
+import { F as F2, a as a2, P as P2, b as b2, d as d2, s as s2 } from "./serialize-FzII8uv3.js";
 export {
   A as API,
   a as AppContainer,
@@ -17,6 +17,7 @@ export {
   D as DynamicColor,
   F2 as FontFamily,
   a2 as FontPlugin,
+  H as Hct,
   P as Palette,
   l as PaletteApi,
   m as PaletteModule,
@@ -34,11 +35,13 @@ export {
   u as getInitialToneFromBackground,
   v as getPiecewiseHue,
   w as getRotatedHue,
-  x as highestSurface,
-  y as loader,
-  z as neutralVariant,
-  B as tonalSpotVariant,
-  E as toneDeltaPair,
-  F as variant,
-  G as vibrantVariant
+  x as getVariantByName,
+  y as highestSurface,
+  z as loader,
+  B as neutralVariant,
+  s2 as serializeThemeContext,
+  E as tonalSpotVariant,
+  F as toneDeltaPair,
+  G as variant,
+  I as vibrantVariant
 };

package/dist/index.d.ts

@@ -11,4 +11,5 @@ export * from './palette';
 export * from './plugin';
 export * from './plugins';
 export * from './variant';
+export * from './serialize';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,4BAA4B,CAAC;AAC3C,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,4BAA4B,CAAC;AAC3C,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC"}

package/dist/{load-from-path-CqNK9dVK.cjs → load-from-path-CuBpH2Cs.cjs}

@@ -21,7 +21,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
-const loader = require("./loader-Bwk-gC1Q.cjs");
+const loader = require("./loader-BN_VoxCd.cjs");
 const fs = require("node:fs");
 var _documentCurrentScript = typeof document !== "undefined" ? document.currentScript : null;
 function _interopNamespaceDefault(e) {
@@ -44,7 +44,7 @@ const fs__namespace = /* @__PURE__ */ _interopNamespaceDefault(fs);
 async function resolveConfig(configPath = "./theme.config") {
   const { createJiti } = await import("jiti");
   const { resolve } = await import("pathe");
-  const jiti = createJiti(typeof document === "undefined" ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === "SCRIPT" && _documentCurrentScript.src || new URL("load-from-path-CqNK9dVK.cjs", document.baseURI).href, {
+  const jiti = createJiti(typeof document === "undefined" ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === "SCRIPT" && _documentCurrentScript.src || new URL("load-from-path-CuBpH2Cs.cjs", document.baseURI).href, {
     debug: process.env.NODE_ENV === "development",
     fsCache: true,
     interopDefault: true

package/dist/{load-from-path-CWtVz4o_.js → load-from-path-CvD4a_os.js}

@@ -1,4 +1,4 @@
-import { y as loader } from "./loader-CXjYZgR0.js";
+import { z as loader } from "./loader-J0nrh600.js";
 import * as fs from "node:fs";
 async function resolveConfig(configPath = "./theme.config") {
   const { createJiti } = await import("jiti");

package/dist/{loader-Bwk-gC1Q.cjs → loader-BN_VoxCd.cjs}

@@ -2663,6 +2663,14 @@ class Palette {
       this.chromaCache = result.chroma;
     }
   }
+  setCallback(callback) {
+    this.callback = callback;
+    this.dependencies = null;
+    this.cache.clear();
+    this.hueCache = null;
+    this.chromaCache = null;
+    this.update([]);
+  }
   clearCache() {
     this.cache.clear();
     this.hueCache = null;
@@ -2739,6 +2747,31 @@ class PaletteApi {
       }
     });
   }
+  override(args) {
+    Object.entries(args).forEach(([key, callback]) => {
+      if (typeof callback === "string") {
+        this.paletteManager.override(key, Hct.fromInt(materialColorUtilities.argbFromHex(callback)));
+      } else {
+        this.paletteManager.override(key, callback);
+      }
+    });
+  }
+  getSerializableState() {
+    const result = {};
+    for (const [key, palette] of Object.entries(this.paletteManager._palettes)) {
+      result[key] = { hue: palette.hue, chroma: palette.chroma };
+    }
+    return result;
+  }
+  sync(args) {
+    const incoming = new Set(Object.keys(args ?? {}));
+    Object.keys(this.paletteManager._palettes).forEach((key) => {
+      if (!incoming.has(key)) {
+        this.paletteManager.remove(key);
+      }
+    });
+    if (args) this.override(args);
+  }
   get(key) {
     return this.paletteManager.get(key);
   }
@@ -2794,13 +2827,31 @@ class PaletteManager {
     this._palettes[key] = palette;
   }
   update(key, args) {
-    if (!this.palettes["key"]) {
+    const existing = this._palettes[key];
+    if (!existing) {
       throw new Error(`Palette with key ${key} not found`);
     }
-    if (!(args instanceof Palette)) {
-      args = new Palette(key, args, this.context);
+    if (args instanceof Palette) {
+      this.set(key, args);
+    } else {
+      existing.setCallback(args);
+    }
+  }
+  remove(key) {
+    delete this._palettes[key];
+  }
+  override(key, args) {
+    const callback = args instanceof Hct ? (context) => context.variant.customPalettes(context, args) : args;
+    if (this._palettes[key]) {
+      this.update(key, callback);
+    } else {
+      const palette = new Palette(key, callback, this.context);
+      this.set(key, palette);
+      const isVariantPalette = !!this.context.variant.palettes[key];
+      if (!isVariantPalette) {
+        this.colorApi.addFromCustomPalette(key);
+      }
     }
-    this.set(key, args);
   }
 }
 const PaletteModule = {
@@ -3842,6 +3893,13 @@ const Variants = {
   Vibrant: vibrantVariant,
   Udixio: udixioVariant
 };
+function getVariantByName(name) {
+  const found = Object.values(Variants).find((v) => v.name === name);
+  if (!found) {
+    throw new Error(`Unknown variant: "${name}". Known: ${Object.values(Variants).map((v) => v.name).join(", ")}`);
+  }
+  return found;
+}
 const loader = async (config, load = true) => {
   const api = bootstrap();
   const init = () => {
@@ -3893,6 +3951,7 @@ exports.Context = Context;
 exports.ContextModule = ContextModule;
 exports.ContrastCurve = ContrastCurve;
 exports.DynamicColor = DynamicColor;
+exports.Hct = Hct;
 exports.Palette = Palette;
 exports.PaletteApi = PaletteApi;
 exports.PaletteModule = PaletteModule;
@@ -3907,6 +3966,7 @@ exports.expressiveVariant = expressiveVariant;
 exports.getInitialToneFromBackground = getInitialToneFromBackground;
 exports.getPiecewiseHue = getPiecewiseHue;
 exports.getRotatedHue = getRotatedHue;
+exports.getVariantByName = getVariantByName;
 exports.highestSurface = highestSurface$1;
 exports.loader = loader;
 exports.neutralVariant = neutralVariant;

package/dist/{loader-CXjYZgR0.js → loader-J0nrh600.js}

@@ -2662,6 +2662,14 @@ class Palette {
       this.chromaCache = result.chroma;
     }
   }
+  setCallback(callback) {
+    this.callback = callback;
+    this.dependencies = null;
+    this.cache.clear();
+    this.hueCache = null;
+    this.chromaCache = null;
+    this.update([]);
+  }
   clearCache() {
     this.cache.clear();
     this.hueCache = null;
@@ -2738,6 +2746,31 @@ class PaletteApi {
       }
     });
   }
+  override(args) {
+    Object.entries(args).forEach(([key, callback]) => {
+      if (typeof callback === "string") {
+        this.paletteManager.override(key, Hct.fromInt(argbFromHex(callback)));
+      } else {
+        this.paletteManager.override(key, callback);
+      }
+    });
+  }
+  getSerializableState() {
+    const result = {};
+    for (const [key, palette] of Object.entries(this.paletteManager._palettes)) {
+      result[key] = { hue: palette.hue, chroma: palette.chroma };
+    }
+    return result;
+  }
+  sync(args) {
+    const incoming = new Set(Object.keys(args ?? {}));
+    Object.keys(this.paletteManager._palettes).forEach((key) => {
+      if (!incoming.has(key)) {
+        this.paletteManager.remove(key);
+      }
+    });
+    if (args) this.override(args);
+  }
   get(key) {
     return this.paletteManager.get(key);
   }
@@ -2793,13 +2826,31 @@ class PaletteManager {
     this._palettes[key] = palette;
   }
   update(key, args) {
-    if (!this.palettes["key"]) {
+    const existing = this._palettes[key];
+    if (!existing) {
       throw new Error(`Palette with key ${key} not found`);
     }
-    if (!(args instanceof Palette)) {
-      args = new Palette(key, args, this.context);
+    if (args instanceof Palette) {
+      this.set(key, args);
+    } else {
+      existing.setCallback(args);
+    }
+  }
+  remove(key) {
+    delete this._palettes[key];
+  }
+  override(key, args) {
+    const callback = args instanceof Hct ? (context) => context.variant.customPalettes(context, args) : args;
+    if (this._palettes[key]) {
+      this.update(key, callback);
+    } else {
+      const palette = new Palette(key, callback, this.context);
+      this.set(key, palette);
+      const isVariantPalette = !!this.context.variant.palettes[key];
+      if (!isVariantPalette) {
+        this.colorApi.addFromCustomPalette(key);
+      }
     }
-    this.set(key, args);
   }
 }
 const PaletteModule = {
@@ -3841,6 +3892,13 @@ const Variants = {
   Vibrant: vibrantVariant,
   Udixio: udixioVariant
 };
+function getVariantByName(name) {
+  const found = Object.values(Variants).find((v) => v.name === name);
+  if (!found) {
+    throw new Error(`Unknown variant: "${name}". Known: ${Object.values(Variants).map((v) => v.name).join(", ")}`);
+  }
+  return found;
+}
 const loader = async (config, load = true) => {
   const api = bootstrap();
   const init = () => {
@@ -3880,12 +3938,14 @@ const loader = async (config, load = true) => {
 };
 export {
   API as A,
-  tonalSpotVariant as B,
+  neutralVariant as B,
   Color as C,
   DynamicColor as D,
-  toneDeltaPair as E,
-  variant as F,
-  vibrantVariant as G,
+  tonalSpotVariant as E,
+  toneDeltaPair as F,
+  variant as G,
+  Hct as H,
+  vibrantVariant as I,
   Palette as P,
   Variant as V,
   AppContainer as a,
@@ -3911,7 +3971,7 @@ export {
   getInitialToneFromBackground as u,
   getPiecewiseHue as v,
   getRotatedHue as w,
-  highestSurface$1 as x,
-  loader as y,
-  neutralVariant as z
+  getVariantByName as x,
+  highestSurface$1 as y,
+  loader as z
 };

package/dist/material-color-utilities/index.d.ts

@@ -1,4 +1,5 @@
 export * from './contrastCurve';
 export * from './dynamic_color';
 export * from './toneDeltaPair';
+export * from './htc';
 //# sourceMappingURL=index.d.ts.map

package/dist/material-color-utilities/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/material-color-utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/material-color-utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,OAAO,CAAC"}

package/dist/node.cjs

@@ -22,9 +22,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const loader = require("./loader-Bwk-gC1Q.cjs");
-const font_plugin = require("./font.plugin-Dyfi_9m6.cjs");
-const loadFromPath = require("./load-from-path-CqNK9dVK.cjs");
+const loader = require("./loader-BN_VoxCd.cjs");
+const serialize = require("./serialize-DBJHQrbL.cjs");
+const loadFromPath = require("./load-from-path-CuBpH2Cs.cjs");
 let unpluginInstance = null;
 const createUnpluginTheme = async () => {
   if (unpluginInstance) {
@@ -161,6 +161,7 @@ exports.Context = loader.Context;
 exports.ContextModule = loader.ContextModule;
 exports.ContrastCurve = loader.ContrastCurve;
 exports.DynamicColor = loader.DynamicColor;
+exports.Hct = loader.Hct;
 exports.Palette = loader.Palette;
 exports.PaletteApi = loader.PaletteApi;
 exports.PaletteModule = loader.PaletteModule;
@@ -175,6 +176,7 @@ exports.expressiveVariant = loader.expressiveVariant;
 exports.getInitialToneFromBackground = loader.getInitialToneFromBackground;
 exports.getPiecewiseHue = loader.getPiecewiseHue;
 exports.getRotatedHue = loader.getRotatedHue;
+exports.getVariantByName = loader.getVariantByName;
 exports.highestSurface = loader.highestSurface;
 exports.loader = loader.loader;
 exports.neutralVariant = loader.neutralVariant;
@@ -182,11 +184,12 @@ exports.tonalSpotVariant = loader.tonalSpotVariant;
 exports.toneDeltaPair = loader.toneDeltaPair;
 exports.variant = loader.variant;
 exports.vibrantVariant = loader.vibrantVariant;
-exports.FontFamily = font_plugin.FontFamily;
-exports.FontPlugin = font_plugin.FontPlugin;
-exports.PluginAbstract = font_plugin.PluginAbstract;
-exports.PluginImplAbstract = font_plugin.PluginImplAbstract;
-exports.defineConfig = font_plugin.defineConfig;
+exports.FontFamily = serialize.FontFamily;
+exports.FontPlugin = serialize.FontPlugin;
+exports.PluginAbstract = serialize.PluginAbstract;
+exports.PluginImplAbstract = serialize.PluginImplAbstract;
+exports.defineConfig = serialize.defineConfig;
+exports.serializeThemeContext = serialize.serializeThemeContext;
 exports.loadFromPath = loadFromPath.loadFromPath;
 exports.resolveConfig = loadFromPath.resolveConfig;
 exports.esbuildPlugin = esbuildPlugin;

package/dist/node.js

@@ -1,7 +1,7 @@
-import { A, a, b, C, c, d, e, f, g, h, i, j, k, D, P, l, m, n, o, V, p, q, r, s, t, u, v, w, x, y, z, B, E, F, G } from "./loader-CXjYZgR0.js";
-import { F as F2, a as a2, P as P2, b as b2, d as d2 } from "./font.plugin-CZBx3UOh.js";
-import { l as loadFromPath } from "./load-from-path-CWtVz4o_.js";
-import { r as r2 } from "./load-from-path-CWtVz4o_.js";
+import { A, a, b, C, c, d, e, f, g, h, i, j, k, D, H, P, l, m, n, o, V, p, q, r, s, t, u, v, w, x, y, z, B, E, F, G, I } from "./loader-J0nrh600.js";
+import { F as F2, a as a2, P as P2, b as b2, d as d2, s as s2 } from "./serialize-FzII8uv3.js";
+import { l as loadFromPath } from "./load-from-path-CvD4a_os.js";
+import { r as r2 } from "./load-from-path-CvD4a_os.js";
 let unpluginInstance = null;
 const createUnpluginTheme = async () => {
   if (unpluginInstance) {
@@ -141,6 +141,7 @@ export {
   D as DynamicColor,
   F2 as FontFamily,
   a2 as FontPlugin,
+  H as Hct,
   P as Palette,
   l as PaletteApi,
   m as PaletteModule,
@@ -159,17 +160,19 @@ export {
   u as getInitialToneFromBackground,
   v as getPiecewiseHue,
   w as getRotatedHue,
-  x as highestSurface,
+  x as getVariantByName,
+  y as highestSurface,
   loadFromPath,
-  y as loader,
-  z as neutralVariant,
+  z as loader,
+  B as neutralVariant,
   r2 as resolveConfig,
   rollupPlugin,
-  B as tonalSpotVariant,
-  E as toneDeltaPair,
+  s2 as serializeThemeContext,
+  E as tonalSpotVariant,
+  F as toneDeltaPair,
   unpluginUdixioTheme,
-  F as variant,
-  G as vibrantVariant,
+  G as variant,
+  I as vibrantVariant,
   vitePlugin,
   webpackPlugin
 };

package/dist/palette/palette.api.d.ts

@@ -7,6 +7,12 @@ export declare class PaletteApi {
         paletteManager: PaletteManager;
     });
     add(args: Record<string, PaletteCallback | string>): void;
+    override(args: Record<string, PaletteCallback | string>): void;
+    getSerializableState(): Record<string, {
+        hue: number;
+        chroma: number;
+    }>;
+    sync(args: Record<string, PaletteCallback | string> | undefined): void;
     get(key: 'primary' | 'secondary' | 'tertiary' | 'neutral' | 'neutralVariant' | 'error' | string): Palette;
     getAll(): Readonly<Record<string, Palette>>;
 }

package/dist/palette/palette.api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.api.d.ts","sourceRoot":"","sources":["../../src/palette/palette.api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAIrD,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;AAEhE,qBAAa,UAAU;IACrB,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiB;gBACpC,EAAE,cAAc,EAAE,EAAE;QAAE,cAAc,EAAE,cAAc,CAAA;KAAE;IAIlE,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,GAAG,MAAM,CAAC,GAAG,IAAI;IAazD,GAAG,CACD,GAAG,EACC,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,gBAAgB,GAChB,OAAO,GACP,MAAM,GACT,OAAO;IAIV,MAAM,IAAI,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAG5C"}
+{"version":3,"file":"palette.api.d.ts","sourceRoot":"","sources":["../../src/palette/palette.api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAIrD,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;AAEhE,qBAAa,UAAU;IACrB,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiB;gBACpC,EAAE,cAAc,EAAE,EAAE;QAAE,cAAc,EAAE,cAAc,CAAA;KAAE;IAIlE,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,GAAG,MAAM,CAAC,GAAG,IAAI;IAazD,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,GAAG,MAAM,CAAC,GAAG,IAAI;IAU9D,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAQvE,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,GAAG,MAAM,CAAC,GAAG,SAAS,GAAG,IAAI;IAUtE,GAAG,CACD,GAAG,EACC,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,gBAAgB,GAChB,OAAO,GACP,MAAM,GACT,OAAO;IAIV,MAAM,IAAI,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAG5C"}

package/dist/palette/palette.d.ts

@@ -15,6 +15,7 @@ export declare class Palette {
     constructor(name: string, callback: PaletteCallback, context: Context);
     static fromVariant(name: string, color: Hct, ctx: Context): Palette;
     update(change: Partial<keyof Context>[]): void;
+    setCallback(callback: PaletteCallback): void;
     private clearCache;
     /**
      * @param tone HCT tone, measured from 0 to 100.

package/dist/palette/palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/palette/palette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK;IAClD,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBAAa,OAAO;IAQT,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,eAAe;IACzB,OAAO,EAAE,OAAO;IATzB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAA6B;IACnD,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,WAAW,CAAuB;IAE1C,OAAO,CAAC,YAAY,CAAkC;gBAG7C,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,eAAe,EACzB,OAAO,EAAE,OAAO;IAKzB,MAAM,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,GAAG,OAAO;IAOnE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,OAAO,CAAC,EAAE,GAAG,IAAI;IA6B9C,OAAO,CAAC,UAAU;IAMlB;;;OAGG;IACH,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAmB1B;;;OAGG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG;IAIzB,IAAI,GAAG,IAAI,MAAM,CAMhB;IACD,IAAI,MAAM,IAAI,MAAM,CAMnB;IAED,OAAO,CAAC,WAAW;CAkBpB"}
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/palette/palette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK;IAClD,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBAAa,OAAO;IAQT,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,eAAe;IACzB,OAAO,EAAE,OAAO;IATzB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAA6B;IACnD,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,WAAW,CAAuB;IAE1C,OAAO,CAAC,YAAY,CAAkC;gBAG7C,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,eAAe,EACzB,OAAO,EAAE,OAAO;IAKzB,MAAM,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,GAAG,OAAO;IAOnE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,OAAO,CAAC,EAAE,GAAG,IAAI;IA6B9C,WAAW,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI;IAS5C,OAAO,CAAC,UAAU;IAMlB;;;OAGG;IACH,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAmB1B;;;OAGG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG;IAIzB,IAAI,GAAG,IAAI,MAAM,CAMhB;IACD,IAAI,MAAM,IAAI,MAAM,CAMnB;IAED,OAAO,CAAC,WAAW;CAkBpB"}

package/dist/palette/palette.manager.d.ts

@@ -16,5 +16,7 @@ export declare class PaletteManager {
     get(key: 'primary' | 'secondary' | 'tertiary' | 'neutral' | 'neutralVariant' | 'error' | string): Palette;
     private set;
     update(key: string, args: PaletteCallback | Palette): void;
+    remove(key: string): void;
+    override(key: string, args: Hct | PaletteCallback): void;
 }
 //# sourceMappingURL=palette.manager.d.ts.map

package/dist/palette/palette.manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.manager.d.ts","sourceRoot":"","sources":["../../src/palette/palette.manager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,qBAAa,cAAc;IACzB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAM;IACxC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IAEnB,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAKhD;gBAEW,IAAI,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,QAAQ,CAAA;KAAE;IAW1D,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,eAAe,GAAG,IAAI;IAWhE,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,IAAI;IAS1D,GAAG,CACD,GAAG,EACC,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,gBAAgB,GAChB,OAAO,GACP,MAAM,GACT,OAAO;IAQV,OAAO,CAAC,GAAG;IAIX,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,GAAG,OAAO,GAAG,IAAI;CAS3D"}
+{"version":3,"file":"palette.manager.d.ts","sourceRoot":"","sources":["../../src/palette/palette.manager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,qBAAa,cAAc;IACzB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAM;IACxC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IAEnB,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAKhD;gBAEW,IAAI,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,QAAQ,CAAA;KAAE;IAW1D,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,eAAe,GAAG,IAAI;IAWhE,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,IAAI;IAS1D,GAAG,CACD,GAAG,EACC,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,gBAAgB,GAChB,OAAO,GACP,MAAM,GACT,OAAO;IAQV,OAAO,CAAC,GAAG;IAIX,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,GAAG,OAAO,GAAG,IAAI;IAY1D,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAIzB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,eAAe,GAAG,IAAI;CAiBzD"}

package/dist/plugin/plugin.abstract.d.ts

@@ -7,6 +7,7 @@ export declare abstract class PluginAbstract<Plugin extends PluginImplAbstract<O
     abstract readonly pluginClass: PluginConstructor<Plugin>;
     protected pluginInstance: Plugin | undefined;
     constructor(options: Options);
+    toSerializable(): Options;
     init(api: API): this;
     getInstance(): Plugin;
 }

package/dist/plugin/plugin.abstract.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.abstract.d.ts","sourceRoot":"","sources":["../../src/plugin/plugin.abstract.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,MAAM,MAAM,iBAAiB,CAAC,MAAM,SAAS,kBAAkB,CAAC,GAAG,CAAC,IAAI,KACtE,GAAG,IAAI,EAAE,GAAG,KACT,MAAM,CAAC;AAEZ,8BAAsB,cAAc,CAClC,MAAM,SAAS,kBAAkB,CAAC,OAAO,CAAC,EAC1C,OAAO,SAAS,MAAM;IAEtB,kBAAyB,YAAY,EAAE,CAAC,KACtC,GAAG,IAAI,EAAE,GAAG,KACT,cAAc,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC;IACjC,kBAAyB,IAAI,EAAE,MAAM,CAAC;IAC/B,OAAO,EAAE,OAAO,CAAC;IACxB,kBAAyB,WAAW,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAChE,SAAS,CAAC,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;gBAEjC,OAAO,EAAE,OAAO;IAIrB,IAAI,CAAC,GAAG,EAAE,GAAG;IAMb,WAAW,IAAI,MAAM;CAM7B;AAED,8BAAsB,kBAAkB,CAAC,OAAO,SAAS,MAAM;IAE3D,SAAS,CAAC,GAAG,EAAE,GAAG;IAClB,SAAS,CAAC,OAAO,EAAE,OAAO;gBADhB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO;IAK5B,QAAQ,CAAC,MAAM,CAAC,IAAI,IAAI;IAExB,QAAQ,CAAC,MAAM,CAAC,IAAI,IAAI;CACzB"}
+{"version":3,"file":"plugin.abstract.d.ts","sourceRoot":"","sources":["../../src/plugin/plugin.abstract.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,MAAM,MAAM,iBAAiB,CAAC,MAAM,SAAS,kBAAkB,CAAC,GAAG,CAAC,IAAI,KACtE,GAAG,IAAI,EAAE,GAAG,KACT,MAAM,CAAC;AAEZ,8BAAsB,cAAc,CAClC,MAAM,SAAS,kBAAkB,CAAC,OAAO,CAAC,EAC1C,OAAO,SAAS,MAAM;IAEtB,kBAAyB,YAAY,EAAE,CAAC,KACtC,GAAG,IAAI,EAAE,GAAG,KACT,cAAc,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC;IACjC,kBAAyB,IAAI,EAAE,MAAM,CAAC;IAC/B,OAAO,EAAE,OAAO,CAAC;IACxB,kBAAyB,WAAW,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAChE,SAAS,CAAC,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;gBAEjC,OAAO,EAAE,OAAO;IAIrB,cAAc,IAAI,OAAO;IAQzB,IAAI,CAAC,GAAG,EAAE,GAAG;IAMb,WAAW,IAAI,MAAM;CAM7B;AAED,8BAAsB,kBAAkB,CAAC,OAAO,SAAS,MAAM;IAE3D,SAAS,CAAC,GAAG,EAAE,GAAG;IAClB,SAAS,CAAC,OAAO,EAAE,OAAO;gBADhB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO;IAK5B,QAAQ,CAAC,MAAM,CAAC,IAAI,IAAI;IAExB,QAAQ,CAAC,MAAM,CAAC,IAAI,IAAI;CACzB"}

package/dist/{font.plugin-Dyfi_9m6.cjs → serialize-DBJHQrbL.cjs}

@@ -2,13 +2,21 @@
 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);
-require("./loader-Bwk-gC1Q.cjs");
+require("./loader-BN_VoxCd.cjs");
 class PluginAbstract {
   constructor(options) {
     __publicField(this, "options");
     __publicField(this, "pluginInstance");
     this.options = options;
   }
+  toSerializable() {
+    return JSON.parse(
+      JSON.stringify(
+        this.options,
+        (_key, value) => typeof value === "function" ? void 0 : value
+      )
+    );
+  }
   init(api) {
     var _a, _b;
     this.pluginInstance = new this.pluginClass(api, this.options);
@@ -220,8 +228,19 @@ class FontPluginImpl extends PluginImplAbstract {
       });
   }
 }
+function serializeThemeContext(api) {
+  const sc = api.context.sourceColor;
+  return {
+    isDark: api.context.isDark,
+    contrastLevel: api.context.contrastLevel,
+    sourceColor: { hue: sc.hue, chroma: sc.chroma, tone: sc.tone },
+    variantName: api.context.variant.name,
+    palettes: api.palettes.getSerializableState()
+  };
+}
 exports.FontFamily = FontFamily;
 exports.FontPlugin = FontPlugin;
 exports.PluginAbstract = PluginAbstract;
 exports.PluginImplAbstract = PluginImplAbstract;
 exports.defineConfig = defineConfig;
+exports.serializeThemeContext = serializeThemeContext;

package/dist/{font.plugin-CZBx3UOh.js → serialize-FzII8uv3.js}

@@ -1,13 +1,21 @@
 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 "./loader-CXjYZgR0.js";
+import "./loader-J0nrh600.js";
 class PluginAbstract {
   constructor(options) {
     __publicField(this, "options");
     __publicField(this, "pluginInstance");
     this.options = options;
   }
+  toSerializable() {
+    return JSON.parse(
+      JSON.stringify(
+        this.options,
+        (_key, value) => typeof value === "function" ? void 0 : value
+      )
+    );
+  }
   init(api) {
     var _a, _b;
     this.pluginInstance = new this.pluginClass(api, this.options);
@@ -219,10 +227,21 @@ class FontPluginImpl extends PluginImplAbstract {
       });
   }
 }
+function serializeThemeContext(api) {
+  const sc = api.context.sourceColor;
+  return {
+    isDark: api.context.isDark,
+    contrastLevel: api.context.contrastLevel,
+    sourceColor: { hue: sc.hue, chroma: sc.chroma, tone: sc.tone },
+    variantName: api.context.variant.name,
+    palettes: api.palettes.getSerializableState()
+  };
+}
 export {
   FontFamily as F,
   PluginAbstract as P,
   FontPlugin as a,
   PluginImplAbstract as b,
-  defineConfig as d
+  defineConfig as d,
+  serializeThemeContext as s
 };

package/dist/serialize.d.ts

@@ -0,0 +1,17 @@
+import { API } from './API';
+export interface ThemeContextSnapshot {
+    isDark: boolean;
+    contrastLevel: number;
+    sourceColor: {
+        hue: number;
+        chroma: number;
+        tone: number;
+    };
+    variantName: string;
+    palettes: Record<string, {
+        hue: number;
+        chroma: number;
+    }>;
+}
+export declare function serializeThemeContext(api: API): ThemeContextSnapshot;
+//# sourceMappingURL=serialize.d.ts.map

package/dist/serialize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"serialize.d.ts","sourceRoot":"","sources":["../src/serialize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC3D;AAED,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,GAAG,GAAG,oBAAoB,CASpE"}

package/dist/variant/variants/index.d.ts

@@ -9,4 +9,5 @@ export declare const Variants: {
     Vibrant: import('..').Variant;
     Udixio: import('..').Variant;
 };
+export declare function getVariantByName(name: string): (typeof Variants)[keyof typeof Variants];
 //# sourceMappingURL=index.d.ts.map

package/dist/variant/variants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/variant/variants/index.ts"],"names":[],"mappings":"AAMA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAElC,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/variant/variants/index.ts"],"names":[],"mappings":"AAMA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAElC,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,OAAO,QAAQ,CAAC,CAMvF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/theme",
-  "version": "2.1.18",
+  "version": "2.1.20",
   "type": "module",
   "main": "./dist/node.js",
   "module": "./dist/node.js",

package/src/index.ts

@@ -11,3 +11,4 @@ export * from './palette';
 export * from './plugin';
 export * from './plugins';
 export * from './variant';
+export * from './serialize';

package/src/material-color-utilities/index.ts

@@ -1,3 +1,4 @@
 export * from './contrastCurve';
 export * from './dynamic_color';
 export * from './toneDeltaPair';
+export * from './htc';

package/src/palette/palette.api.ts

@@ -24,6 +24,34 @@ export class PaletteApi {
     });
   }
 
+  override(args: Record<string, PaletteCallback | string>): void {
+    Object.entries(args).forEach(([key, callback]) => {
+      if (typeof callback === 'string') {
+        this.paletteManager.override(key, Hct.fromInt(argbFromHex(callback)));
+      } else {
+        this.paletteManager.override(key, callback);
+      }
+    });
+  }
+
+  getSerializableState(): Record<string, { hue: number; chroma: number }> {
+    const result: Record<string, { hue: number; chroma: number }> = {};
+    for (const [key, palette] of Object.entries(this.paletteManager._palettes)) {
+      result[key] = { hue: palette.hue, chroma: palette.chroma };
+    }
+    return result;
+  }
+
+  sync(args: Record<string, PaletteCallback | string> | undefined): void {
+    const incoming = new Set(Object.keys(args ?? {}));
+    Object.keys(this.paletteManager._palettes).forEach((key) => {
+      if (!incoming.has(key)) {
+        this.paletteManager.remove(key);
+      }
+    });
+    if (args) this.override(args);
+  }
+
   get(
     key:
       | 'primary'

package/src/palette/palette.manager.ts

@@ -68,12 +68,36 @@ export class PaletteManager {
   }
 
   update(key: string, args: PaletteCallback | Palette): void {
-    if (!this.palettes['key']) {
+    const existing = this._palettes[key];
+    if (!existing) {
       throw new Error(`Palette with key ${key} not found`);
     }
-    if (!(args instanceof Palette)) {
-      args = new Palette(key, args, this.context);
+    if (args instanceof Palette) {
+      this.set(key, args);
+    } else {
+      existing.setCallback(args);
+    }
+  }
+
+  remove(key: string): void {
+    delete this._palettes[key];
+  }
+
+  override(key: string, args: Hct | PaletteCallback): void {
+    const callback: PaletteCallback =
+      args instanceof Hct
+        ? (context) => context.variant.customPalettes(context, args)
+        : args;
+
+    if (this._palettes[key]) {
+      this.update(key, callback);
+    } else {
+      const palette = new Palette(key, callback, this.context);
+      this.set(key, palette);
+      const isVariantPalette = !!this.context.variant.palettes[key];
+      if (!isVariantPalette) {
+        this.colorApi.addFromCustomPalette(key);
+      }
     }
-    this.set(key, args);
   }
 }

package/src/palette/palette.ts

@@ -57,6 +57,15 @@ export class Palette {
     }
   }
 
+  setCallback(callback: PaletteCallback): void {
+    this.callback = callback;
+    this.dependencies = null;
+    this.cache.clear();
+    this.hueCache = null;
+    this.chromaCache = null;
+    this.update([]);
+  }
+
   private clearCache() {
     this.cache.clear();
     this.hueCache = null;

package/src/plugin/plugin.abstract.ts

@@ -20,6 +20,14 @@ export abstract class PluginAbstract<
     this.options = options;
   }
 
+  public toSerializable(): Options {
+    return JSON.parse(
+      JSON.stringify(this.options, (_key, value) =>
+        typeof value === 'function' ? undefined : value,
+      ),
+    ) as Options;
+  }
+
   public init(api: API) {
     this.pluginInstance = new this.pluginClass(api, this.options);
     this.pluginInstance.onInit?.();

package/src/serialize.ts

@@ -0,0 +1,20 @@
+import { API } from './API';
+
+export interface ThemeContextSnapshot {
+  isDark: boolean;
+  contrastLevel: number;
+  sourceColor: { hue: number; chroma: number; tone: number };
+  variantName: string;
+  palettes: Record<string, { hue: number; chroma: number }>;
+}
+
+export function serializeThemeContext(api: API): ThemeContextSnapshot {
+  const sc = api.context.sourceColor;
+  return {
+    isDark: api.context.isDark,
+    contrastLevel: api.context.contrastLevel,
+    sourceColor: { hue: sc.hue, chroma: sc.chroma, tone: sc.tone },
+    variantName: api.context.variant.name,
+    palettes: api.palettes.getSerializableState(),
+  };
+}

package/src/variant/variants/index.ts

@@ -16,3 +16,11 @@ export const Variants = {
   Vibrant: vibrantVariant,
   Udixio: udixioVariant,
 };
+
+export function getVariantByName(name: string): (typeof Variants)[keyof typeof Variants] {
+  const found = Object.values(Variants).find((v) => v.name === name);
+  if (!found) {
+    throw new Error(`Unknown variant: "${name}". Known: ${Object.values(Variants).map((v) => v.name).join(', ')}`);
+  }
+  return found;
+}