@udixio/theme 1.0.0-beta.9 → 1.0.0

package/src/adapters/node.adapter.ts

@@ -0,0 +1,49 @@
+import { AdapterAbstract, ConfigInterface } from '../adapter';
+
+export class NodeAdapter extends AdapterAbstract {
+  constructor(public configPath = './theme.config') {
+    super();
+  }
+
+  async getConfig() {
+    if (
+      typeof process !== 'undefined' &&
+      process.release &&
+      process.release.name === 'node'
+    ) {
+      const path = (await import('path')).default;
+      const fs = (await import('fs')).default;
+
+      const base = path.resolve(this.configPath);
+      const extensions = ['.js', '.ts', '.mjs', '.cjs'];
+      let configImport = null;
+
+      for (const ext of extensions) {
+        const path = base + ext;
+        if (fs.existsSync(path)) {
+          configImport = (await import(path)).default;
+          break;
+        }
+      }
+
+      if (!configImport) {
+        throw new Error(
+          `Configuration file not found, looked for: ${base} with extensions: ${extensions.join(', ')}`,
+        );
+      }
+
+      let config: unknown;
+      if ('default' in configImport) {
+        config = configImport.default;
+      } else {
+        config = configImport;
+      }
+
+      return config as ConfigInterface;
+    } else {
+      throw new Error(
+        'You must provide configuration object when using this library in a browser.',
+      );
+    }
+  }
+}

package/src/adapters/vite.adapter.ts

@@ -0,0 +1,79 @@
+import { loadConfigFromFile, Plugin } from 'vite';
+import { AdapterAbstract, ConfigInterface } from '../adapter';
+import * as path from 'node:path';
+import * as fs from 'node:fs';
+
+export const udixioVite = async (
+  configPath = './theme.config',
+): Promise<Plugin | undefined> => {
+  // @ts-expect-error - NX_GRAPH_CREATION is a global variable set by Nx
+  if (global.NX_GRAPH_CREATION) {
+    return;
+  }
+
+  class ViteAdapter extends AdapterAbstract {
+    public configExtension?: string;
+
+    constructor(public configPath: string) {
+      super();
+    }
+
+    getConfigPath() {
+      if (!this.configExtension) {
+        throw new Error('config extension not found');
+      }
+      return path.resolve(this.configPath + this.configExtension);
+    }
+
+    async getConfig() {
+      const resolvedPath = path.resolve(this.configPath);
+
+      const result = await loadConfigFromFile(
+        { command: 'serve', mode: 'development' }, // ou 'build'
+        resolvedPath,
+      );
+      if (!result?.config) {
+        throw new Error('config not found');
+      }
+      if (!this.configExtension) {
+        this.configExtension = path.extname(result.dependencies[0]);
+      }
+      return result.config as unknown as ConfigInterface;
+    }
+  }
+
+  const adapter = new ViteAdapter(configPath);
+
+  await adapter.init();
+
+  configPath = adapter.getConfigPath();
+  return {
+    name: 'vite:udixio-theme',
+    async buildStart() {
+      if (fs.existsSync(configPath)) {
+        this.addWatchFile(configPath);
+      }
+      adapter.load();
+    },
+
+    async generateBundle() {
+      adapter.load();
+    },
+
+    // Handles Hot Module Replacement in dev server
+    async handleHotUpdate({ server, file, modules }) {
+      // Vérifie si le fichier modifié correspond au chemin du fichier de config
+      if (configPath === file) {
+        const adapter = new ViteAdapter(configPath);
+        await adapter.init();
+        adapter.load();
+
+        server.ws.send({ type: 'full-reload', path: '*' });
+
+        return modules;
+      }
+
+      return;
+    },
+  };
+};

package/src/app.container.ts

@@ -1,46 +1,22 @@
-import {
-  AwilixContainer,
-  BuildResolver,
-  createContainer,
-  DisposableResolver,
-  InjectionMode,
-} from 'awilix';
-import { ColorModule } from './color/color.module';
-import { ThemeModule } from './theme/theme.module';
+import { createContainer, InjectionMode, Resolver } from 'awilix';
+import { ColorModule } from './color';
+import { ThemeModule } from './theme';
 import { AppModule } from './app.module';
-import { ConfigModule } from './config/config.module';
-import { PluginModule } from './plugin/plugin.module';
+import { PluginModule } from './plugin';
 
-export type Module = Record<
-  string,
-  BuildResolver<any> & DisposableResolver<any>
->;
+export type Module = Record<string, Resolver<any>>;
 
-export function importContainer(
-  container: AwilixContainer,
-  services: Module[]
-) {
-  services.forEach((service) => {
-    Object.entries(service).forEach(([name, serviceClass]) => {
-      container.register(name, serviceClass);
+export function registerModule(...modules: Module[]) {
+  modules.forEach((module) => {
+    Object.entries(module).forEach(([name, moduleClass]) => {
+      AppContainer.register(name, moduleClass);
     });
   });
-  return container;
+  return AppContainer;
 }
 
-const AppContainer = createContainer({
+export const AppContainer = createContainer({
   injectionMode: InjectionMode.PROXY,
 });
 
-importContainer(AppContainer, [
-  ConfigModule,
-  AppModule,
-  PluginModule,
-  ColorModule,
-  ThemeModule,
-]);
-
-// AppContainer.register(ColorModule.cradle);
-// AppContainer.register(ThemeModule.cradle);
-
-export default AppContainer;
+registerModule(AppModule, PluginModule, ColorModule, ThemeModule);

package/src/app.module.ts

@@ -1,7 +1,7 @@
 import { asClass } from 'awilix';
-import { AppService } from './app.service';
+import { API } from './API';
 import { Module } from './app.container';
 
 export const AppModule: Module = {
-  appService: asClass(AppService).singleton(),
+  api: asClass(API).singleton(),
 };

package/src/bootstrap.ts

@@ -0,0 +1,6 @@
+import { AppContainer } from './app.container';
+import { API } from './API';
+
+export function bootstrap(): API {
+  return AppContainer.resolve<API>('api');
+}

package/src/color/color.api.ts

@@ -0,0 +1,75 @@
+import { ColorOptions, ConfigurableColor } from './configurable-color';
+import { ColorManager } from './color.manager';
+import { DynamicColorKey } from './color.utils';
+
+export type AddColors = {
+  colors?: Record<
+    DynamicColorKey | string,
+    | (Partial<ColorOptions> & { alias?: never })
+    | { alias: string; palette?: never; tone?: never }
+  >;
+  fromPalettes?: string[] | string;
+};
+
+export type AddColorsOptions =
+  | AddColors
+  | ((colorService: ColorApi) => AddColors);
+
+export class ColorApi {
+  private readonly colorManager: ColorManager;
+
+  constructor({ colorManager }: { colorManager: ColorManager }) {
+    this.colorManager = colorManager;
+  }
+
+  getColors() {
+    return this.colorManager.getAll();
+  }
+
+  addColor(
+    key: string,
+    color:
+      | (Partial<ColorOptions> & { alias?: never })
+      | { alias: string; palette?: never; tone?: never },
+  ): ConfigurableColor {
+    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]),
+        );
+      }
+    });
+  }
+
+  getColor(key: DynamicColorKey | string): ConfigurableColor {
+    return this.colorManager.get(key);
+  }
+
+  removeColor(key: string): boolean {
+    return this.colorManager.remove(key);
+  }
+
+  updateColor(
+    key: string,
+    newColor:
+      | (Partial<ColorOptions> & { alias?: never })
+      | { alias: string; palette?: never; tone?: never },
+  ): ConfigurableColor {
+    return this.colorManager.createOrUpdate(key, newColor);
+  }
+}

package/src/color/color.manager.ts

@@ -0,0 +1,213 @@
+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 { ColorApi } from './color.api';
+
+function capitalizeFirstLetter(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export const highestSurface = (
+  s: Scheme,
+  colorService: ColorManager | ColorApi,
+): DynamicColor => {
+  if (colorService instanceof ColorApi) {
+    return s.isDark
+      ? colorService.getColor('surfaceBright').getMaterialColor()
+      : colorService.getColor('surfaceDim').getMaterialColor();
+  } else {
+    return s.isDark
+      ? colorService.get('surfaceBright').getMaterialColor()
+      : colorService.get('surfaceDim').getMaterialColor();
+  }
+};
+
+export class ColorManager {
+  private colorMap = new Map<string, ConfigurableColor>();
+  private readonly schemeManager: SchemeManager;
+
+  constructor({ schemeManager }: { schemeManager: SchemeManager }) {
+    this.schemeManager = schemeManager;
+  }
+
+  createOrUpdate(
+    key: string,
+    args:
+      | (Partial<ColorOptions> & { alias?: never })
+      | { alias: string; palette?: never; tone?: never },
+  ): ConfigurableColor {
+    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}`);
+      }
+    } else {
+      colorEntity.update({ ...args, name: key });
+      this.colorMap.set(key, colorEntity);
+    }
+    return colorEntity;
+  }
+
+  public remove(key: string) {
+    return this.colorMap.delete(key);
+  }
+
+  public get(key: string): ConfigurableColor {
+    const colorEntity = this.colorMap.get(key);
+    if (colorEntity) {
+      return colorEntity;
+    } else {
+      throw new Error(`Color ${key} does not exist`);
+    }
+  }
+
+  public getAll(): ReadonlyMap<string, ConfigurableColor> {
+    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;
+    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),
+      toneDeltaPair: (s) =>
+        new 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),
+      toneDeltaPair: (s) =>
+        new 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),
+      toneDeltaPair: (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,
+      toneDeltaPair: (s) =>
+        new 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),
+    });
+  }
+}

package/src/color/color.module.ts

@@ -1,9 +1,9 @@
-import { ColorService } from './services/color.service';
-import { ColorManagerService } from './services/color-manager.service';
+import { ColorApi } from './color.api';
+import { ColorManager } from './color.manager';
 import { asClass } from 'awilix';
 import { Module } from '../app.container';
 
 export const ColorModule: Module = {
-  colorManagerService: asClass(ColorManagerService).singleton(),
-  colorService: asClass(ColorService).singleton(),
+  colorManager: asClass(ColorManager).singleton(),
+  colorApi: asClass(ColorApi).singleton(),
 };

package/src/color/color.utils.ts

@@ -0,0 +1,126 @@
+import { clampDouble, TonalPalette } from '@material/material-color-utilities';
+import { Hct } from '../material-color-utilities/htc';
+import { ContrastCurve } from '../material-color-utilities/contrastCurve';
+
+export type DynamicColorKey =
+  | 'background'
+  | 'onBackground'
+  | 'surface'
+  | 'surfaceDim'
+  | 'surfaceBright'
+  | 'surfaceContainerLowest'
+  | 'surfaceContainerLow'
+  | 'surfaceContainer'
+  | 'surfaceContainerHigh'
+  | 'surfaceContainerHighest'
+  | 'onSurface'
+  | 'surfaceVariant'
+  | 'onSurfaceVariant'
+  | 'inverseSurface'
+  | 'inverseOnSurface'
+  | 'outline'
+  | 'outlineVariant'
+  | 'surfaceTint'
+  | 'primary'
+  | 'primaryDim'
+  | 'onPrimary'
+  | 'primaryContainer'
+  | 'onPrimaryContainer'
+  | 'inversePrimary'
+  | 'secondary'
+  | 'secondaryDim'
+  | 'onSecondary'
+  | 'secondaryContainer'
+  | 'onSecondaryContainer'
+  | 'tertiary'
+  | 'tertiaryDim'
+  | 'onTertiary'
+  | 'tertiaryContainer'
+  | 'onTertiaryContainer'
+  | 'error'
+  | 'errorDim'
+  | 'onError'
+  | 'errorContainer'
+  | 'onErrorContainer'
+  | 'primaryFixed'
+  | 'primaryFixedDim'
+  | 'onPrimaryFixed'
+  | 'onPrimaryFixedVariant'
+  | 'secondaryFixed'
+  | 'secondaryFixedDim'
+  | 'onSecondaryFixed'
+  | 'onSecondaryFixedVariant'
+  | 'tertiaryFixed'
+  | 'tertiaryFixedDim'
+  | 'onTertiaryFixed'
+  | 'onTertiaryFixedVariant';
+
+export function getCurve(defaultContrast: number): ContrastCurve {
+  if (defaultContrast === 1.5) {
+    return new ContrastCurve(1.5, 1.5, 3, 4.5);
+  } else if (defaultContrast === 3) {
+    return new ContrastCurve(3, 3, 4.5, 7);
+  } else if (defaultContrast === 4.5) {
+    return new ContrastCurve(4.5, 4.5, 7, 11);
+  } else if (defaultContrast === 6) {
+    return new ContrastCurve(6, 6, 7, 11);
+  } else if (defaultContrast === 7) {
+    return new ContrastCurve(7, 7, 11, 21);
+  } else if (defaultContrast === 9) {
+    return new ContrastCurve(9, 9, 11, 21);
+  } else if (defaultContrast === 11) {
+    return new ContrastCurve(11, 11, 21, 21);
+  } else if (defaultContrast === 21) {
+    return new ContrastCurve(21, 21, 21, 21);
+  } else {
+    // Shouldn't happen.
+    return new ContrastCurve(defaultContrast, defaultContrast, 7, 21);
+  }
+}
+
+export function tMaxC(
+  palette: TonalPalette,
+  lowerBound = 0,
+  upperBound = 100,
+  chromaMultiplier = 1,
+): number {
+  const answer = findBestToneForChroma(
+    palette.hue,
+    palette.chroma * chromaMultiplier,
+    100,
+    true,
+  );
+  return clampDouble(lowerBound, upperBound, answer);
+}
+
+export function tMinC(
+  palette: TonalPalette,
+  lowerBound = 0,
+  upperBound = 100,
+): number {
+  const answer = findBestToneForChroma(palette.hue, palette.chroma, 0, false);
+  return clampDouble(lowerBound, upperBound, answer);
+}
+
+export function findBestToneForChroma(
+  hue: number,
+  chroma: number,
+  tone: number,
+  byDecreasingTone: boolean,
+): number {
+  let answer = tone;
+  let bestCandidate = Hct.from(hue, chroma, answer);
+  while (bestCandidate.chroma < chroma) {
+    if (tone < 0 || tone > 100) {
+      break;
+    }
+    tone += byDecreasingTone ? -1.0 : 1.0;
+    const newCandidate = Hct.from(hue, chroma, tone);
+    if (bestCandidate.chroma < newCandidate.chroma) {
+      bestCandidate = newCandidate;
+      answer = tone;
+    }
+  }
+
+  return answer;
+}