@udixio/theme 2.0.0 → 2.1.1

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-C8LnOoqg.cjs");
-const font_plugin = require("./font.plugin-BZ-TTeTo.cjs");
-const loadFromPath = require("./load-from-path-DZ35yiXK.cjs");
+const loader = require("./loader-DuLiOKuW.cjs");
+const font_plugin = require("./font.plugin-Czq_-M7T.cjs");
+const loadFromPath = require("./load-from-path-Bvj18-eg.cjs");
 let unpluginInstance = null;
 const createUnpluginTheme = async () => {
   if (unpluginInstance) {
@@ -169,6 +169,7 @@ exports.PluginModule = loader.PluginModule;
 exports.Variant = loader.Variant;
 exports.Variants = loader.Variants;
 exports.bootstrap = loader.bootstrap;
+exports.capitalizeFirstLetter = loader.capitalizeFirstLetter;
 exports.defaultColors = loader.defaultColors;
 exports.expressiveVariant = loader.expressiveVariant;
 exports.getInitialToneFromBackground = loader.getInitialToneFromBackground;

package/dist/node.js

@@ -1,7 +1,7 @@
-import { A, a, b, f, i, C, j, k, d, e, n, m, p, D, P, q, r, u, s, V, y, c, l, E, g, v, w, h, o, F, z, t, x, B } from "./loader-BS_Esfwg.js";
-import { F as F2, b as b2, P as P2, a as a2, d as d2 } from "./font.plugin-DZtMajJV.js";
-import { l as loadFromPath } from "./load-from-path-Dobe0beV.js";
-import { r as r2 } from "./load-from-path-Dobe0beV.js";
+import { A, a, b, h, i, C, j, k, e, f, o, n, q, D, P, r, s, v, u, V, z, c, d, m, F, g, w, x, l, p, G, B, t, y, E } from "./loader-Dy9GSe3X.js";
+import { F as F2, b as b2, P as P2, a as a2, d as d2 } from "./font.plugin-B2IbI3Qs.js";
+import { l as loadFromPath } from "./load-from-path-CjLV8qqN.js";
+import { r as r2 } from "./load-from-path-CjLV8qqN.js";
 let unpluginInstance = null;
 const createUnpluginTheme = async () => {
   if (unpluginInstance) {
@@ -128,47 +128,48 @@ export {
   A as API,
   a as AppContainer,
   b as AppModule,
-  f as Color,
+  h as Color,
   i as ColorAlias,
   C as ColorApi,
   j as ColorFromHex,
   k as ColorFromPalette,
-  d as ColorManager,
-  e as ColorModule,
-  n as Context,
-  m as ContextModule,
-  p as ContrastCurve,
+  e as ColorManager,
+  f as ColorModule,
+  o as Context,
+  n as ContextModule,
+  q as ContrastCurve,
   D as DynamicColor,
   F2 as FontFamily,
   b2 as FontPlugin,
   P as Palette,
-  q as PaletteApi,
-  r as PaletteModule,
+  r as PaletteApi,
+  s as PaletteModule,
   P2 as PluginAbstract,
-  u as PluginApi,
+  v as PluginApi,
   a2 as PluginImplAbstract,
-  s as PluginModule,
+  u as PluginModule,
   V as Variant,
-  y as Variants,
+  z as Variants,
   c as bootstrap,
-  l as defaultColors,
+  d as capitalizeFirstLetter,
+  m as defaultColors,
   d2 as defineConfig,
   esbuildPlugin,
-  E as expressiveVariant,
+  F as expressiveVariant,
   g as getInitialToneFromBackground,
-  v as getPiecewiseHue,
-  w as getRotatedHue,
-  h as highestSurface,
+  w as getPiecewiseHue,
+  x as getRotatedHue,
+  l as highestSurface,
   loadFromPath,
-  o as loader,
-  F as neutralVariant,
+  p as loader,
+  G as neutralVariant,
   r2 as resolveConfig,
   rollupPlugin,
-  z as tonalSpotVariant,
+  B as tonalSpotVariant,
   t as toneDeltaPair,
   unpluginUdixioTheme,
-  x as variant,
-  B as vibrantVariant,
+  y as variant,
+  E as vibrantVariant,
   vitePlugin,
   webpackPlugin
 };

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;IA8B9C,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,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/variant/variant.d.ts

@@ -12,12 +12,14 @@ export interface VariantOptions {
         hue: number;
         chroma: number;
     };
+    colorsFromCustomPalette?: (key: string) => AddColorsOptions;
     colors?: AddColorsOptions;
 }
 export declare class Variant {
     private options;
     _palettes?: Record<string, Palette>;
     readonly customPalettes: VariantOptions['customPalettes'];
+    readonly colorsFromCustomPalette?: (key: string) => AddColorsOptions;
     readonly colors: AddColorsOptions;
     readonly name: string;
     private context?;

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

@@ -1 +1 @@
-{"version":3,"file":"variant.d.ts","sourceRoot":"","sources":["../../src/variant/variant.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,eAAO,MAAM,eAAe,GAC1B,aAAa,GAAG,EAChB,gBAAgB,MAAM,EAAE,EACxB,MAAM,MAAM,EAAE,KACb,MASF,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,aAAa,GAAG,EAChB,gBAAgB,MAAM,EAAE,EACxB,WAAW,MAAM,EAAE,KAClB,MAMF,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,cAAc,EAAE,CACd,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,GAAG,KACP;QACH,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAED,qBAAa,OAAO;IAON,OAAO,CAAC,OAAO;IANpB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC3C,SAAgB,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IACjE,SAAgB,MAAM,EAAE,gBAAgB,CAAC;IACzC,SAAgB,IAAI,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,OAAO,CAAC,CAAU;gBAEN,OAAO,EAAE,cAAc;IAM3C,IAAI,QAAQ,4BAKX;IAED,IAAI,CAAC,OAAO,EAAE,OAAO;CAWtB;AAED,eAAO,MAAM,OAAO,GAAI,MAAM,cAAc,YAAsB,CAAC"}
+{"version":3,"file":"variant.d.ts","sourceRoot":"","sources":["../../src/variant/variant.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,eAAO,MAAM,eAAe,GAC1B,aAAa,GAAG,EAChB,gBAAgB,MAAM,EAAE,EACxB,MAAM,MAAM,EAAE,KACb,MASF,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,aAAa,GAAG,EAChB,gBAAgB,MAAM,EAAE,EACxB,WAAW,MAAM,EAAE,KAClB,MAMF,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,cAAc,EAAE,CACd,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,GAAG,KACP;QACH,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,uBAAuB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,gBAAgB,CAAC;IAC5D,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAED,qBAAa,OAAO;IAQN,OAAO,CAAC,OAAO;IAPpB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC3C,SAAgB,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IACjE,SAAgB,uBAAuB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,gBAAgB,CAAC;IAC5E,SAAgB,MAAM,EAAE,gBAAgB,CAAC;IACzC,SAAgB,IAAI,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,OAAO,CAAC,CAAU;gBAEN,OAAO,EAAE,cAAc;IAO3C,IAAI,QAAQ,4BAKX;IAED,IAAI,CAAC,OAAO,EAAE,OAAO;CAWtB;AAED,eAAO,MAAM,OAAO,GAAI,MAAM,cAAc,YAAsB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"expressive.variant.d.ts","sourceRoot":"","sources":["../../../src/variant/variants/expressive.variant.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,iBAAiB,sBA8D5B,CAAC"}
+{"version":3,"file":"expressive.variant.d.ts","sourceRoot":"","sources":["../../../src/variant/variants/expressive.variant.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,iBAAiB,sBA+D5B,CAAC"}

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

@@ -7,6 +7,6 @@ export declare const Variants: {
     Neutral: import('..').Variant;
     TonalSpot: import('..').Variant;
     Vibrant: import('..').Variant;
-    Fidelity: import('..').Variant;
+    Udixio: import('..').Variant;
 };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"neutral.variant.d.ts","sourceRoot":"","sources":["../../../src/variant/variants/neutral.variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2C,OAAO,EAAE,MAAM,YAAY,CAAC;AAI9E,eAAO,MAAM,cAAc,EAAE,OAwC3B,CAAC"}
+{"version":3,"file":"neutral.variant.d.ts","sourceRoot":"","sources":["../../../src/variant/variants/neutral.variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2C,OAAO,EAAE,MAAM,YAAY,CAAC;AAK9E,eAAO,MAAM,cAAc,EAAE,OAyC3B,CAAC"}

package/dist/variant/variants/tonal-spot.variant.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tonal-spot.variant.d.ts","sourceRoot":"","sources":["../../../src/variant/variants/tonal-spot.variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2C,OAAO,EAAE,MAAM,YAAY,CAAC;AAG9E,eAAO,MAAM,gBAAgB,EAAE,OA+B7B,CAAC"}
+{"version":3,"file":"tonal-spot.variant.d.ts","sourceRoot":"","sources":["../../../src/variant/variants/tonal-spot.variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2C,OAAO,EAAE,MAAM,YAAY,CAAC;AAI9E,eAAO,MAAM,gBAAgB,EAAE,OAgC7B,CAAC"}

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

@@ -0,0 +1,3 @@
+import { Variant } from '../variant';
+export declare const udixioVariant: Variant;
+//# sourceMappingURL=udixio.variant.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"udixio.variant.d.ts","sourceRoot":"","sources":["../../../src/variant/variants/udixio.variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2C,OAAO,EAAE,MAAM,YAAY,CAAC;AAuD9E,eAAO,MAAM,aAAa,EAAE,OAsxB1B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"vibrant.variant.d.ts","sourceRoot":"","sources":["../../../src/variant/variants/vibrant.variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2C,OAAO,EAAE,MAAM,YAAY,CAAC;AAgB9E,eAAO,MAAM,cAAc,EAAE,OAsD3B,CAAC"}
+{"version":3,"file":"vibrant.variant.d.ts","sourceRoot":"","sources":["../../../src/variant/variants/vibrant.variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2C,OAAO,EAAE,MAAM,YAAY,CAAC;AAiB9E,eAAO,MAAM,cAAc,EAAE,OAuD3B,CAAC"}

package/package.json

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

package/src/app.module.ts

@@ -3,5 +3,5 @@ import { API } from './API';
 import { Module } from './app.container';
 
 export const AppModule: Module = {
-  api: asClass(API).singleton(),
+  api: asClass(API).scoped(),
 };

package/src/color/color.api.ts

@@ -1,10 +1,12 @@
 import { Color, ColorOptions } from './color';
-import { ColorManager, highestSurface } from './color.manager';
+import { ColorManager } from './color.manager';
 import { DynamicColorKey, getCurve, tMaxC, tMinC } from './color.utils';
 import { API } from '../API';
 import { toneDeltaPair } from '../material-color-utilities';
+import { Context } from 'src/context';
+import { highestSurface } from './default-color';
 
-function capitalizeFirstLetter(string: string) {
+export function capitalizeFirstLetter(string: string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
@@ -14,10 +16,25 @@ export type AddColorsOptions =
 
 export class ColorApi {
   private readonly colorManager: ColorManager;
+  private readonly context: Context;
   public api?: API;
 
-  constructor({ colorManager }: { colorManager: ColorManager }) {
+  constructor({
+    colorManager,
+    context,
+  }: {
+    colorManager: ColorManager;
+    context: Context;
+  }) {
+    this.context = context;
     this.colorManager = colorManager;
+
+    this.context.onUpdate((changed) => {
+      if (changed.includes('variant')) {
+        this.colorManager.clear();
+        this.addColors(this.context.variant.colors);
+      }
+    });
   }
 
   getAll() {
@@ -57,6 +74,10 @@ export class ColorApi {
   }
 
   addFromCustomPalette(key: string): void {
+    if (this.context.variant.colorsFromCustomPalette) {
+      return this.addColors(this.context.variant.colorsFromCustomPalette(key));
+    }
+
     const colorKey = key as DynamicColorKey;
     const colorDimKey = (colorKey + 'Dim') as DynamicColorKey;
     const ColorKey = capitalizeFirstLetter(key);

package/src/color/color.manager.ts

@@ -5,24 +5,8 @@ import {
   ColorFromPalette,
   ColorOptions,
 } from './color';
-import { ColorApi } from './color.api';
 import { Context } from '../context';
 
-export const highestSurface = (
-  context: Context,
-  colorService: ColorManager | ColorApi,
-): Color => {
-  if (colorService instanceof ColorApi) {
-    return context.isDark
-      ? colorService.get('surfaceBright')
-      : colorService.get('surfaceDim');
-  } else {
-    return context.isDark
-      ? colorService.get('surfaceBright')
-      : colorService.get('surfaceDim');
-  }
-};
-
 export class ColorManager {
   private colorMap = new Map<string, Color>();
   private readonly context: Context;
@@ -57,6 +41,10 @@ export class ColorManager {
     return this.colorMap.delete(key);
   }
 
+  public clear() {
+    this.colorMap.clear();
+  }
+
   public get(key: string): Color {
     const colorEntity = this.colorMap.get(key);
     if (colorEntity) {

package/src/color/color.module.ts

@@ -4,6 +4,6 @@ import { asClass } from 'awilix';
 import { Module } from '../app.container';
 
 export const ColorModule: Module = {
-  colorManager: asClass(ColorManager).singleton(),
-  colorApi: asClass(ColorApi).singleton(),
+  colorManager: asClass(ColorManager).scoped(),
+  colorApi: asClass(ColorApi).scoped(),
 };

package/src/color/color.ts

@@ -35,6 +35,10 @@ export function getInitialToneFromBackground(background?: Color): number {
 }
 
 export abstract class Color {
+  static maxChroma(hue: number, tone = 50): number {
+    return Hct.from(hue, 200, tone).chroma;
+  }
+
   abstract getHct(): Hct;
 
   protected constructor(public readonly name: string) {}

package/src/color/default-color.ts

@@ -1,20 +1,25 @@
 import { toneDeltaPair } from '../material-color-utilities';
-import { highestSurface } from './color.manager';
-import { AddColorsOptions } from './color.api';
+import { ColorManager } from './color.manager';
+import { AddColorsOptions, ColorApi } from './color.api';
 import { Hct } from '../material-color-utilities/htc';
-import { ColorFromPalette, getInitialToneFromBackground } from './color';
+import { Color, getInitialToneFromBackground } from './color';
 
-import {
-  calculateToneAdjustmentPercentage,
-  DynamicColorKey,
-  getCurve,
-  tMaxC,
-  tMinC,
-} from './color.utils';
-import { Contrast } from '@material/material-color-utilities';
+import { DynamicColorKey, getCurve, tMaxC, tMinC } from './color.utils';
+import { Context } from '../context';
 
-const inverseTone = (tone: number) => {
-  return 100 - tone;
+export const highestSurface = (
+  context: Context,
+  colorService: ColorManager | ColorApi,
+): Color => {
+  if (colorService instanceof ColorApi) {
+    return context.isDark
+      ? colorService.get('surfaceBright')
+      : colorService.get('surfaceDim');
+  } else {
+    return context.isDark
+      ? colorService.get('surfaceBright')
+      : colorService.get('surfaceDim');
+  }
 };
 
 export const defaultColors: AddColorsOptions = ({
@@ -36,9 +41,6 @@ export const defaultColors: AddColorsOptions = ({
         if (c.isDark) {
           return 4;
         } else {
-          if (c.variant.name == 'fidelity') {
-            return 100;
-          }
           if (Hct.isYellow(palettes.get('neutral').hue)) {
             return 99;
           } else if (c.variant.name === 'vibrant') {
@@ -357,8 +359,6 @@ export const defaultColors: AddColorsOptions = ({
                 ? 88
                 : 98,
           );
-        } else if (c.variant.name == 'fidelity') {
-          return c.sourceColor.tone;
         } else {
           return tMaxC(
             palettes.get('primary'),
@@ -371,31 +371,14 @@ export const defaultColors: AddColorsOptions = ({
       background: () => highestSurface(c, colors),
       contrastCurve: () => getCurve(4.5),
       adjustTone: () =>
-        c.variant.name == 'fidelity'
-          ? () => {
-              const surfaceTone = colors.get('surface').getTone();
-              const primaryTone = (colors.get('primary') as ColorFromPalette)
-                .options.tone;
-              let selfTone = primaryTone;
-              if (Contrast.ratioOfTones(surfaceTone, selfTone) < 3) {
-                const ratio = calculateToneAdjustmentPercentage(
-                  surfaceTone,
-                  selfTone,
-                  3,
-                );
-                const inverseT = inverseTone(primaryTone);
-                selfTone = selfTone + (inverseT - selfTone) * ratio;
-              }
-              return selfTone;
-            }
-          : toneDeltaPair(
-              colors.get('primaryContainer'),
-              colors.get('primary'),
-              5,
-              'relative_lighter',
-              true,
-              'farther',
-            ),
+        toneDeltaPair(
+          colors.get('primaryContainer'),
+          colors.get('primary'),
+          5,
+          'relative_lighter',
+          true,
+          'farther',
+        ),
     },
     primaryDim: {
       palette: () => palettes.get('primary'),
@@ -444,34 +427,17 @@ export const defaultColors: AddColorsOptions = ({
                 Hct.isCyan(palettes.get('primary').hue) ? 88 : 90,
               );
         }
-        if (c.variant.name == 'fidelity') {
-          return c.isDark
-            ? tMinC(palettes.get('primary'), 35, 93)
-            : tMaxC(palettes.get('primary'), 0, 90);
-        } else {
-          // VIBRANT
-          return c.isDark
-            ? tMinC(palettes.get('primary'), 66, 93)
-            : tMaxC(
-                palettes.get('primary'),
-                66,
-                Hct.isCyan(palettes.get('primary').hue) ? 88 : 93,
-              );
-        }
+        // VIBRANT
+        return c.isDark
+          ? tMinC(palettes.get('primary'), 66, 93)
+          : tMaxC(
+              palettes.get('primary'),
+              66,
+              Hct.isCyan(palettes.get('primary').hue) ? 88 : 93,
+            );
       },
       isBackground: true,
       background: () => highestSurface(c, colors),
-      adjustTone: () =>
-        c.variant.name == 'fidelity'
-          ? toneDeltaPair(
-              colors.get('primary'),
-              colors.get('primaryContainer'),
-              15,
-              'relative_darker',
-              true,
-              'farther',
-            )
-          : undefined,
       contrastCurve: () => (c.contrastLevel > 0 ? getCurve(1.5) : undefined),
     },
     onPrimaryContainer: {

package/src/context/context.module.ts

@@ -3,5 +3,5 @@ import { Module } from '../app.container';
 import { Context } from './context';
 
 export const ContextModule: Module = {
-  context: asClass(Context).singleton(),
+  context: asClass(Context).scoped(),
 };

package/src/loader/loader.ts

@@ -1,4 +1,3 @@
-import { defaultColors } from '../color';
 import { bootstrap } from '../bootstrap';
 import { ConfigInterface } from '../config';
 import { Variants } from '../variant/variants';
@@ -23,9 +22,6 @@ export const loader = async (config: ConfigInterface, load = true) => {
       sourceColor,
       variant: variant,
     });
-
-    api.colors.addColors(defaultColors);
-
     if (palettes) {
       api.palettes.add(palettes);
     }

package/src/palette/palette.module.ts

@@ -4,6 +4,6 @@ import { PaletteManager } from './palette.manager';
 import { PaletteApi } from './palette.api';
 
 export const PaletteModule: Module = {
-  paletteApi: asClass(PaletteApi).singleton(),
-  paletteManager: asClass(PaletteManager).singleton(),
+  paletteApi: asClass(PaletteApi).scoped(),
+  paletteManager: asClass(PaletteManager).scoped(),
 };

package/src/palette/palette.ts

@@ -49,8 +49,7 @@ export class Palette {
 
     if (
       result &&
-      this.hueCache !== result.hue &&
-      this.chromaCache !== result.chroma
+      (this.hueCache !== result.hue || this.chromaCache !== result.chroma)
     ) {
       this.clearCache();
       this.hueCache = result.hue;

package/src/plugin/plugin.module.ts

@@ -3,5 +3,5 @@ import { Module } from '../app.container';
 import { PluginApi } from './plugin.api';
 
 export const PluginModule: Module = {
-  pluginApi: asClass(PluginApi).singleton(),
+  pluginApi: asClass(PluginApi).scoped(),
 };

package/src/variant/variant.ts

@@ -42,12 +42,14 @@ export interface VariantOptions {
     hue: number;
     chroma: number;
   };
+  colorsFromCustomPalette?: (key: string) => AddColorsOptions;
   colors?: AddColorsOptions;
 }
 
 export class Variant {
   public _palettes?: Record<string, Palette>;
   public readonly customPalettes: VariantOptions['customPalettes'];
+  public readonly colorsFromCustomPalette?: (key: string) => AddColorsOptions;
   public readonly colors: AddColorsOptions;
   public readonly name: string;
   private context?: Context;
@@ -56,6 +58,7 @@ export class Variant {
     this.customPalettes = options.customPalettes;
     this.colors = options.colors || {};
     this.name = options.name;
+    this.colorsFromCustomPalette = options.colorsFromCustomPalette;
   }
 
   get palettes() {

package/src/variant/variants/expressive.variant.ts

@@ -1,6 +1,7 @@
 import { getPiecewiseHue, getRotatedHue, variant } from '../variant';
 import { TonalPalette } from '@material/material-color-utilities';
 import { Hct } from '../../material-color-utilities/htc';
+import { defaultColors } from '../../color';
 
 const getExpressiveNeutralHue = (sourceColor: Hct): number => {
   const hue = getRotatedHue(
@@ -80,4 +81,5 @@ export const expressiveVariant = variant({
       ),
       isDark ? 16 : 24,
     ),
+  colors: defaultColors,
 });

package/src/variant/variants/index.ts

@@ -2,7 +2,7 @@ import { expressiveVariant } from './expressive.variant';
 import { neutralVariant } from './neutral.variant';
 import { tonalSpotVariant } from './tonal-spot.variant';
 import { vibrantVariant } from './vibrant.variant';
-import { fidelityVariant } from './fidelity.variant';
+import { udixioVariant } from './udixio.variant';
 
 export * from './tonal-spot.variant';
 export * from './vibrant.variant';
@@ -14,5 +14,5 @@ export const Variants = {
   Neutral: neutralVariant,
   TonalSpot: tonalSpotVariant,
   Vibrant: vibrantVariant,
-  Fidelity: fidelityVariant,
+  Udixio: udixioVariant,
 };

package/src/variant/variants/neutral.variant.ts

@@ -1,6 +1,7 @@
 import { getPiecewiseHue, getRotatedHue, variant, Variant } from '../variant';
 import { TonalPalette } from '@material/material-color-utilities';
 import { Hct } from '../../material-color-utilities/htc';
+import { defaultColors } from '../../color';
 
 export const neutralVariant: Variant = variant({
   name: 'neutral',
@@ -42,4 +43,5 @@ export const neutralVariant: Variant = variant({
       colorHct.hue,
       Hct.isBlue(colorHct.hue) ? 6 : 4,
     ),
+  colors: defaultColors,
 });

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

@@ -1,5 +1,6 @@
 import { getPiecewiseHue, getRotatedHue, variant, Variant } from '../variant';
 import { TonalPalette } from '@material/material-color-utilities';
+import { defaultColors } from '../../color';
 
 export const tonalSpotVariant: Variant = variant({
   name: 'tonalSpot',
@@ -32,4 +33,5 @@ export const tonalSpotVariant: Variant = variant({
   },
   customPalettes: (_, colorHct) =>
     TonalPalette.fromHueAndChroma(colorHct.hue, 16),
+  colors: defaultColors,
 });