@udixio/theme 1.3.1 → 2.1.0

package/src/color/index.ts

@@ -1,5 +1,5 @@
 export * from './color.api';
 export * from './color.manager';
 export * from './color.module';
-export * from './configurable-color';
+export * from './color';
 export * from './default-color';

package/src/config/config.interface.ts

@@ -1,14 +1,15 @@
 import { AddColorsOptions } from '../color';
-import { Variant } from '../theme';
+
 import { PluginAbstract } from '../plugin';
+import { Variant } from '../variant/variant';
+import { PaletteCallback } from '../palette/palette';
 
 export interface ConfigInterface {
   sourceColor: string;
   contrastLevel?: number;
   isDark?: boolean;
   variant?: Variant;
-  colors?: AddColorsOptions | AddColorsOptions[];
-  useDefaultColors?: boolean;
-  palettes?: Record<string, string>;
+  colors?: AddColorsOptions;
+  palettes?: Record<string, PaletteCallback | string>;
   plugins?: PluginAbstract<any, any>[];
 }

package/src/context/context.module.ts

@@ -0,0 +1,7 @@
+import { asClass } from 'awilix';
+import { Module } from '../app.container';
+import { Context } from './context';
+
+export const ContextModule: Module = {
+  context: asClass(Context).singleton(),
+};

package/src/context/context.ts

@@ -0,0 +1,169 @@
+import { argbFromHex } from '@material/material-color-utilities';
+import { Hct } from '../material-color-utilities/htc';
+import { Variant } from '../variant/variant';
+
+export interface ContextOptions {
+  sourceColor: string | Hct;
+  contrastLevel: number;
+  isDark: boolean;
+  variant: Variant;
+}
+
+export class Context {
+  private _options?: ContextOptions;
+  private _temOptions: ContextOptions | null = null;
+  private readonly updateCallbacks: Array<
+    (changed: (keyof Context)[]) => void
+  > = [];
+
+  constructor() {
+    this.onUpdate((changed) => {
+      if (changed.includes('variant')) {
+        this.variant.init(this);
+      }
+    });
+  }
+
+  /**
+   * 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<T>(
+    context: Context,
+    callback: (ctx: Context) => T,
+  ): { result: T; dependencies: (keyof Context)[] } {
+    const dependencies = new Set<keyof Context>();
+
+    const isGetterOnContext = (prop: PropertyKey): boolean => {
+      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 as keyof Context);
+        }
+        return Reflect.get(target, prop, receiver);
+      },
+    });
+
+    const result = callback(proxy as unknown as Context);
+    return { result, dependencies: Array.from(dependencies) };
+  }
+
+  set(options: ContextOptions) {
+    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: (keyof Context)[] = [];
+    for (const key of Object.keys(options) as (keyof ContextOptions)[]) {
+      changed.push(key);
+    }
+
+    this._options = options;
+
+    if (changed.length > 0) {
+      this.updateCallbacks.forEach((callback) => callback(changed));
+    }
+  }
+
+  public update(args: Partial<ContextOptions>) {
+    const options = this._options;
+    if (!options) {
+      throw new Error('Options not found');
+    }
+    if (typeof args.sourceColor === 'string') {
+      args.sourceColor = Hct.fromInt(argbFromHex(args.sourceColor));
+    }
+
+    // compute changed keys
+    const changed: (keyof Context)[] = [];
+    for (const key of Object.keys(args) as (keyof ContextOptions)[]) {
+      if ((args as any)[key] !== (options as any)[key]) {
+        changed.push(key);
+      }
+    }
+
+    this._options = {
+      ...options,
+      ...args,
+    };
+
+    // notify listeners with changed keys (if any)
+    if (changed.length > 0) {
+      this.updateCallbacks.forEach((callback) => callback(changed));
+    }
+  }
+
+  private getOptions(): ContextOptions {
+    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: boolean) {
+    this.update({ isDark });
+  }
+  get isDark() {
+    return this.getOptions().isDark;
+  }
+
+  set contrastLevel(contrastLevel: number) {
+    this.update({ contrastLevel });
+  }
+  get contrastLevel() {
+    return this.getOptions().contrastLevel;
+  }
+
+  set sourceColor(sourceColor: string) {
+    this.update({ sourceColor });
+  }
+  get sourceColor(): Hct {
+    let sourceColor = this.getOptions().sourceColor;
+    if (typeof sourceColor === 'string') {
+      sourceColor = Hct.fromInt(argbFromHex(sourceColor));
+    }
+    return sourceColor;
+  }
+
+  set variant(variant: Variant) {
+    this.update({ variant });
+  }
+  get variant() {
+    return this.getOptions().variant;
+  }
+
+  temp<T>(args: Partial<ContextOptions>, callback: () => T): T {
+    const previousOptions = this.getOptions();
+    this._temOptions = {
+      ...previousOptions,
+      ...args,
+    };
+    const result = callback();
+    this._temOptions = null;
+    return result;
+  }
+
+  onUpdate(callback: (changed: (keyof Context)[]) => void): void {
+    this.updateCallbacks.push(callback);
+  }
+}

package/src/context/index.ts

@@ -0,0 +1,2 @@
+export * from './context.module';
+export * from './context';

package/src/index.ts

@@ -1,11 +1,13 @@
+export * from './API';
 export * from './app.container';
 export * from './app.module';
-export * from './API';
+export * from './bootstrap';
 export * from './color';
+export * from './config';
+export * from './context';
 export * from './loader';
-export * from './bootstrap';
 export * from './material-color-utilities';
+export * from './palette';
 export * from './plugin';
 export * from './plugins';
-export * from './theme';
-export * from './config';
+export * from './variant';

package/src/loader/loader.ts

@@ -1,45 +1,29 @@
-import { tonalSpotVariant } from '../theme';
-import { defaultColors } from '../color';
 import { bootstrap } from '../bootstrap';
-import { registerModule } from '../app.container';
-import { asValue } from 'awilix';
 import { ConfigInterface } from '../config';
+import { Variants } from '../variant/variants';
 
-const initializeApi = () => {
+export const loader = async (config: ConfigInterface, load = true) => {
   const api = bootstrap();
-  registerModule({
-    adapter: asValue(this),
-  });
-  return api;
-};
-
-export const loader = async (config: ConfigInterface) => {
-  const api = initializeApi();
 
   const init = () => {
     const {
       sourceColor,
       contrastLevel = 0,
       isDark = false,
-      variant = tonalSpotVariant,
+      variant = Variants.TonalSpot,
       palettes,
       colors,
-      useDefaultColors = true,
       plugins,
     } = config;
-    api.themes.create({
+
+    api.context.set({
       contrastLevel: contrastLevel,
       isDark: isDark,
-      sourceColorHex: sourceColor,
+      sourceColor,
       variant: variant,
     });
     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);
@@ -53,7 +37,10 @@ export const loader = async (config: ConfigInterface) => {
   };
 
   init();
-  await api.load();
+
+  if (load) {
+    await api.load();
+  }
 
   return api;
 };

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

@@ -50,22 +50,22 @@ import { Hct } from './htc';
  *     constructed. When not provided or resolved as undefined, the tone is
  *     calculated based on other constraints.
  */
-export interface FromPaletteOptions {
-  name?: string;
-  palette: (scheme: Scheme) => TonalPalette;
-  tone?: (scheme: Scheme) => number;
-  chromaMultiplier?: (scheme: Scheme) => number;
-  isBackground?: boolean;
-  background?: (scheme: Scheme) => DynamicColor | undefined;
-  secondBackground?: (scheme: Scheme) => DynamicColor | undefined;
-  contrastCurve?: (scheme: Scheme) => ContrastCurve | undefined;
-  adjustTone?: (scheme: Scheme) => AdjustTone | undefined;
-}
+// export interface FromPaletteOptions {
+//   name?: string;
+//   palette: (scheme: Scheme) => TonalPalette;
+//   tone?: (scheme: Scheme) => number;
+//   chromaMultiplier?: (scheme: Scheme) => number;
+//   isBackground?: boolean;
+//   background?: (scheme: Scheme) => DynamicColor | undefined;
+//   secondBackground?: (scheme: Scheme) => DynamicColor | undefined;
+//   contrastCurve?: (scheme: Scheme) => ContrastCurve | undefined;
+//   adjustTone?: (scheme: Scheme) => AdjustTone | undefined;
+// }
 
-export type AdjustTone = (args: {
-  scheme: Scheme;
-  dynamicColor: DynamicColor;
-}) => number;
+// export type AdjustTone = (args: {
+//   scheme: Scheme;
+//   dynamicColor: DynamicColor;
+// }) => number;
 
 /**
  * A color that adjusts itself based on UI state provided by DynamicScheme.
@@ -79,8 +79,6 @@ export type AdjustTone = (args: {
  * DynamicColor.
  */
 export class DynamicColor {
-  private readonly hctCache = new Map<Scheme, Hct>();
-
   /**
    * The base constructor for DynamicColor.
    *
@@ -155,7 +153,8 @@ export 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,
@@ -165,14 +164,14 @@ export class DynamicColor {
     );
   }
 
-  static getInitialToneFromBackground(
-    background?: (scheme: Scheme) => DynamicColor | undefined,
-  ): (scheme: Scheme) => number {
-    if (background === undefined) {
-      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
@@ -270,14 +269,6 @@ export class DynamicColor {
     });
   }
 
-  /**
-   * 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).
    *

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

@@ -15,9 +15,14 @@
  * limitations under the License.
  */
 
-import { AdjustTone, DynamicColor } from './dynamic_color';
-import { clampDouble, Contrast } from '@material/material-color-utilities';
-import { Scheme } from '../theme';
+import {
+  clampDouble,
+  Contrast,
+  DynamicColor,
+} from '@material/material-color-utilities';
+
+import { AdjustTone, Color, ColorFromPalette } from '../color';
+import { Context } from 'src/context';
 
 /**
  * Describes the different in tone between colors.
@@ -72,8 +77,8 @@ class ToneDeltaPair {
    * one role has two backgrounds.
    */
   constructor(
-    readonly roleA: DynamicColor,
-    readonly roleB: DynamicColor,
+    readonly roleA: Color,
+    readonly roleB: Color,
     readonly delta: number,
     readonly polarity: TonePolarity,
     readonly stayTogether: boolean,
@@ -82,29 +87,28 @@ class ToneDeltaPair {
     this.constraint = constraint ?? 'exact';
   }
 
-  adjustedTone({
-    scheme,
-    dynamicColor,
-  }: {
-    scheme: Scheme;
-    dynamicColor: DynamicColor;
-  }) {
+  adjustedTone({ context: ctx, color }: { context: Context; color: 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)
+      (polarity === 'relative_lighter' && ctx.isDark) ||
+      (polarity === 'relative_darker' && !ctx.isDark)
         ? -this.delta
         : this.delta;
 
-    const amRoleA = dynamicColor.name === roleA.name;
+    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') {
@@ -131,32 +135,31 @@ class ToneDeltaPair {
       }
     }
 
-    if (dynamicColor.background && dynamicColor.contrastCurve) {
-      const background = dynamicColor.background(scheme);
-      const contrastCurve = dynamicColor.contrastCurve(scheme);
-      if (background && contrastCurve) {
-        // Adjust the tones for contrast, if background and contrast curve
-        // are defined.
-        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) {
+          // Adjust the tones for contrast, if background and contrast curve
+          // are defined.
+          const bgTone = background.getTone();
+          const selfContrast = contrastCurve.get(ctx.contrastLevel);
+          selfTone =
+            Contrast.ratioOfTones(bgTone, selfTone) >= selfContrast &&
+            ctx.contrastLevel >= 0
+              ? selfTone
+              : DynamicColor.foregroundTone(bgTone, selfContrast);
+        }
       }
-    }
 
-    // This can avoid the awkward tones for background colors including the
-    // access fixed colors. Accent fixed dim colors should not be adjusted.
-    if (
-      dynamicColor.isBackground &&
-      !dynamicColor.name.endsWith('_fixed_dim')
-    ) {
-      if (selfTone >= 57) {
-        selfTone = clampDouble(65, 100, selfTone);
-      } else {
-        selfTone = clampDouble(0, 49, selfTone);
+      // This can avoid the awkward tones for background colors including the
+      // access fixed colors. Accent fixed dim colors should not be adjusted.
+      if (color.options.isBackground && !color.name.endsWith('_fixed_dim')) {
+        if (selfTone >= 57) {
+          selfTone = clampDouble(65, 100, selfTone);
+        } else {
+          selfTone = clampDouble(0, 49, selfTone);
+        }
       }
     }
 

package/src/palette/index.ts

@@ -0,0 +1,3 @@
+export * from './palette';
+export * from './palette.api';
+export * from './palette.module';

package/src/palette/palette.api.ts

@@ -0,0 +1,43 @@
+import { PaletteManager } from './palette.manager';
+import { Palette, PaletteCallback } from './palette';
+import { Hct } from '../material-color-utilities/htc';
+import { argbFromHex } from '@material/material-color-utilities';
+
+export type AddPaletteOptions = Record<string, PaletteCallback>;
+
+export class PaletteApi {
+  private readonly paletteManager: PaletteManager;
+  constructor({ paletteManager }: { paletteManager: PaletteManager }) {
+    this.paletteManager = paletteManager;
+  }
+
+  add(args: Record<string, PaletteCallback | string>): void {
+    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:
+      | 'primary'
+      | 'secondary'
+      | 'tertiary'
+      | 'neutral'
+      | 'neutralVariant'
+      | 'error'
+      | string,
+  ): Palette {
+    return this.paletteManager.get(key);
+  }
+
+  getAll(): Readonly<Record<string, Palette>> {
+    return this.paletteManager.palettes;
+  }
+}

package/src/palette/palette.manager.ts

@@ -0,0 +1,74 @@
+import { Context } from 'src/context';
+import { Palette, PaletteCallback } from './palette';
+import { Hct } from '../material-color-utilities/htc';
+import { ColorApi } from '../color';
+
+export class PaletteManager {
+  _palettes: Record<string, Palette> = {};
+  context: Context;
+  colorApi: ColorApi;
+
+  get palettes(): Readonly<Record<string, Palette>> {
+    return {
+      ...this.context.variant.palettes,
+      ...this._palettes,
+    };
+  }
+
+  constructor(args: { context: Context; colorApi: ColorApi }) {
+    this.colorApi = args.colorApi;
+    this.context = args.context;
+
+    this.context.onUpdate((changed) =>
+      Object.entries(this.palettes).forEach(([key, value]) => {
+        value.update(changed);
+      }),
+    );
+  }
+
+  addCustomPalette(key: string, color: Hct) {
+    const palette = Palette.fromVariant(key, color, this.context);
+    this.add(key, palette);
+    this.colorApi.addFromCustomPalette(key);
+  }
+
+  add(key: string, palette: PaletteCallback | Palette): void {
+    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:
+      | 'primary'
+      | 'secondary'
+      | 'tertiary'
+      | 'neutral'
+      | 'neutralVariant'
+      | 'error'
+      | string,
+  ): Palette {
+    const palette = this.palettes[key];
+    if (!palette) {
+      throw new Error(`Palette ${key} not found`);
+    }
+    return palette;
+  }
+
+  private set(key: string, palette: Palette) {
+    this._palettes[key] = palette;
+  }
+
+  update(key: string, args: PaletteCallback | Palette): void {
+    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);
+  }
+}

package/src/palette/palette.module.ts

@@ -0,0 +1,9 @@
+import { asClass } from 'awilix';
+import { Module } from '../app.container';
+import { PaletteManager } from './palette.manager';
+import { PaletteApi } from './palette.api';
+
+export const PaletteModule: Module = {
+  paletteApi: asClass(PaletteApi).singleton(),
+  paletteManager: asClass(PaletteManager).singleton(),
+};