@udixio/theme 1.3.0 → 2.0.0

package/src/color/color.api.ts

@@ -1,75 +1,196 @@
-import { ColorOptions, ConfigurableColor } from './configurable-color';
-import { ColorManager } from './color.manager';
-import { DynamicColorKey } from './color.utils';
+import { Color, ColorOptions } from './color';
+import { ColorManager, highestSurface } from './color.manager';
+import { DynamicColorKey, getCurve, tMaxC, tMinC } from './color.utils';
+import { API } from '../API';
+import { toneDeltaPair } from '../material-color-utilities';
 
-export type AddColors = {
-  colors?: Record<
-    DynamicColorKey | string,
-    | (Partial<ColorOptions> & { alias?: never })
-    | { alias: string; palette?: never; tone?: never }
-  >;
-  fromPalettes?: string[] | string;
-};
+function capitalizeFirstLetter(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
 
 export type AddColorsOptions =
-  | AddColors
-  | ((colorService: ColorApi) => AddColors);
+  | ((args: API) => Record<string, ColorOptions>)
+  | Record<string, ColorOptions>;
 
 export class ColorApi {
   private readonly colorManager: ColorManager;
+  public api?: API;
 
   constructor({ colorManager }: { colorManager: ColorManager }) {
     this.colorManager = colorManager;
   }
 
-  getColors() {
+  getAll() {
     return this.colorManager.getAll();
   }
 
-  addColor(
-    key: string,
-    color:
-      | (Partial<ColorOptions> & { alias?: never })
-      | { alias: string; palette?: never; tone?: never },
-  ): ConfigurableColor {
+  addColor(key: string, color: ColorOptions): Color {
     return this.colorManager.createOrUpdate(key, color);
   }
 
-  addColors(args: AddColorsOptions | AddColorsOptions[]) {
-    if (!Array.isArray(args)) args = [args];
-    args.forEach((args) => {
-      if (typeof args === 'function') {
-        args = args(this);
-      }
-      if (args.fromPalettes) {
-        if (!Array.isArray(args.fromPalettes))
-          args.fromPalettes = [args.fromPalettes];
-        args.fromPalettes.map((paletteKey) => {
-          this.colorManager.addFromPalette(paletteKey);
-        });
-      }
-      if (args.colors) {
-        Object.keys(args.colors).map((key) =>
-          this.addColor(key, args.colors![key]),
-        );
-      }
-    });
+  addColors(args: AddColorsOptions) {
+    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);
+      });
+    }
   }
 
-  getColor(key: DynamicColorKey | string): ConfigurableColor {
+  get(key: DynamicColorKey | string): Color {
     return this.colorManager.get(key);
   }
 
-  removeColor(key: string): boolean {
+  remove(key: string): boolean {
     return this.colorManager.remove(key);
   }
 
-  updateColor(
-    key: string,
-    newColor:
-      | (Partial<ColorOptions> & { alias?: never })
-      | { alias: string; palette?: never; tone?: never },
-  ): ConfigurableColor {
+  update(key: string, newColor: ColorOptions): Color {
     return this.colorManager.createOrUpdate(key, newColor);
   }
+
+  addFromCustomPalette(key: string): void {
+    const colorKey = key as DynamicColorKey;
+    const colorDimKey = (colorKey + 'Dim') as DynamicColorKey;
+    const ColorKey = capitalizeFirstLetter(key);
+    const onColorKey = ('on' + ColorKey) as DynamicColorKey;
+    const colorContainerKey = (colorKey + 'Container') as DynamicColorKey;
+    const onColorContainerKey = ('on' +
+      ColorKey +
+      'Container') as DynamicColorKey;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    const inverseColorKey = ('inverse' + ColorKey) as DynamicColorKey;
+    const colorFixedKey = (colorKey + 'Fixed') as DynamicColorKey;
+    const colorFixedDimKey = (colorKey + 'FixedDim') as DynamicColorKey;
+    const onColorFixedKey = ('on' + ColorKey + 'Fixed') as DynamicColorKey;
+    const onColorFixedVariantKey = ('on' +
+      ColorKey +
+      'FixedVariant') as DynamicColorKey;
+    const colors: AddColorsOptions = ({ palettes, colors, 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(
+            colors.get(colorContainerKey),
+            colors.get(colorKey),
+            5,
+            'relative_lighter',
+            true,
+            'farther',
+          ),
+      },
+      [colorDimKey]: {
+        palette: () => palettes.get(colorKey),
+        tone: () => {
+          if (ctx.variant.name === 'neutral') {
+            return 85;
+          } else {
+            return tMaxC(palettes.get(colorKey), 0, 90);
+          }
+        },
+        isBackground: true,
+        background: () => this.get('surfaceContainerHigh'),
+        contrastCurve: () => getCurve(4.5),
+        adjustTone: () =>
+          toneDeltaPair(
+            this.get(colorDimKey),
+            this.get(colorKey),
+            5,
+            'darker',
+            true,
+            'farther',
+          ),
+      },
+      [onColorKey]: {
+        palette: () => palettes.get(colorKey),
+        background: () => this.get(colorKey),
+        contrastCurve: () => getCurve(6),
+      },
+      [colorContainerKey]: {
+        palette: () => palettes.get(colorKey),
+        tone: () => {
+          if (ctx.variant.name === 'vibrant') {
+            return ctx.isDark
+              ? tMinC(palettes.get(colorKey), 30, 40)
+              : tMaxC(palettes.get(colorKey), 84, 90);
+          } else if (ctx.variant.name === 'expressive') {
+            return ctx.isDark ? 15 : tMaxC(palettes.get(colorKey), 90, 95);
+          } else {
+            return ctx.isDark ? 25 : 90;
+          }
+        },
+        isBackground: true,
+        background: () => highestSurface(ctx, this),
+        adjustTone: () => undefined,
+        contrastCurve: () =>
+          ctx.contrastLevel > 0 ? getCurve(1.5) : undefined,
+      },
+      [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) : undefined,
+      },
+      [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);
+  }
 }

package/src/color/color.manager.ts

@@ -1,67 +1,55 @@
-import { DynamicColor, toneDeltaPair } from '../material-color-utilities';
-import { Scheme, SchemeManager } from '../theme';
-
-import { ColorOptions, ConfigurableColor } from './configurable-color';
-import { DynamicColorKey, getCurve, tMaxC, tMinC } from './color.utils';
+import {
+  Color,
+  ColorAlias,
+  ColorFromHex,
+  ColorFromPalette,
+  ColorOptions,
+} from './color';
 import { ColorApi } from './color.api';
-
-function capitalizeFirstLetter(string: string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
+import { Context } from '../context';
 
 export const highestSurface = (
-  s: Scheme,
+  context: Context,
   colorService: ColorManager | ColorApi,
-): DynamicColor => {
+): Color => {
   if (colorService instanceof ColorApi) {
-    return s.isDark
-      ? colorService.getColor('surfaceBright').getMaterialColor()
-      : colorService.getColor('surfaceDim').getMaterialColor();
+    return context.isDark
+      ? colorService.get('surfaceBright')
+      : colorService.get('surfaceDim');
   } else {
-    return s.isDark
-      ? colorService.get('surfaceBright').getMaterialColor()
-      : colorService.get('surfaceDim').getMaterialColor();
+    return context.isDark
+      ? colorService.get('surfaceBright')
+      : colorService.get('surfaceDim');
   }
 };
 
 export class ColorManager {
-  private colorMap = new Map<string, ConfigurableColor>();
-  private readonly schemeManager: SchemeManager;
+  private colorMap = new Map<string, Color>();
+  private readonly context: Context;
 
-  constructor({ schemeManager }: { schemeManager: SchemeManager }) {
-    this.schemeManager = schemeManager;
+  constructor(args: { context: Context }) {
+    this.context = args.context;
   }
 
-  createOrUpdate(
-    key: string,
-    args:
-      | (Partial<ColorOptions> & { alias?: never })
-      | { alias: string; palette?: never; tone?: never },
-  ): ConfigurableColor {
+  createOrUpdate(key: string, args: ColorOptions): Color {
     let colorEntity = this.colorMap.get(key);
-    if (!colorEntity) {
-      const { palette, alias } = args;
-      if (palette) {
-        colorEntity = new ConfigurableColor(
-          { ...args, palette: palette, name: key },
-          this.schemeManager,
-          this,
-        );
-        this.colorMap.set(key, colorEntity);
-      } else if (alias) {
-        colorEntity = new ConfigurableColor(
-          { ...args, alias: alias, name: key },
-          this.schemeManager,
-          this,
-        );
-        this.colorMap.set(key, colorEntity);
-      } else {
-        throw new Error(`Palette ${palette} does not exist from ${key}`);
-      }
+    if ('alias' in args) {
+      colorEntity = new ColorAlias(key, args.alias, this);
+    } else if ('hex' in args) {
+      colorEntity = new ColorFromHex(key, args.hex);
     } else {
-      colorEntity.update({ ...args, name: key });
-      this.colorMap.set(key, colorEntity);
+      try {
+        if (colorEntity instanceof ColorFromPalette) {
+          colorEntity.update(args);
+        } else {
+          colorEntity = new ColorFromPalette(key, args, this.context);
+        }
+      } catch (e) {
+        console.error(e);
+        throw new Error(`Invalid color options provided for ${key}`);
+      }
     }
+    this.colorMap.set(key, colorEntity);
     return colorEntity;
   }
 
@@ -69,7 +57,7 @@ export class ColorManager {
     return this.colorMap.delete(key);
   }
 
-  public get(key: string): ConfigurableColor {
+  public get(key: string): Color {
     const colorEntity = this.colorMap.get(key);
     if (colorEntity) {
       return colorEntity;
@@ -78,138 +66,7 @@ export class ColorManager {
     }
   }
 
-  public getAll(): ReadonlyMap<string, ConfigurableColor> {
+  public getAll(): ReadonlyMap<string, Color> {
     return this.colorMap;
   }
-
-  addFromPalette(key: string): void {
-    const colorKey = key as DynamicColorKey;
-    const colorDimKey = (colorKey + 'Dim') as DynamicColorKey;
-    const ColorKey = capitalizeFirstLetter(key);
-    const onColorKey = ('on' + ColorKey) as DynamicColorKey;
-    const colorContainerKey = (colorKey + 'Container') as DynamicColorKey;
-    const onColorContainerKey = ('on' +
-      ColorKey +
-      'Container') as DynamicColorKey;
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    const inverseColorKey = ('inverse' + ColorKey) as DynamicColorKey;
-    const colorFixedKey = (colorKey + 'Fixed') as DynamicColorKey;
-    const colorFixedDimKey = (colorKey + 'FixedDim') as DynamicColorKey;
-    const onColorFixedKey = ('on' + ColorKey + 'Fixed') as DynamicColorKey;
-    const onColorFixedVariantKey = ('on' +
-      ColorKey +
-      'FixedVariant') as DynamicColorKey;
-
-    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));
-        }
-      },
-      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);
-        }
-      },
-      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;
-        }
-      },
-      isBackground: true,
-      background: (s) => highestSurface(s, this),
-      adjustTone: (s) => undefined,
-      contrastCurve: (s) => (s.contrastLevel > 0 ? getCurve(1.5) : undefined),
-    });
-    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);
-      },
-      isBackground: true,
-      background: (s) => highestSurface(s, this),
-      contrastCurve: (s) => (s.contrastLevel > 0 ? getCurve(1.5) : undefined),
-    });
-    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),
-    });
-  }
 }