@udixio/theme 1.1.0 → 1.3.0

package/src/color/default-color.ts

@@ -1,4 +1,4 @@
-import { ToneDeltaPair } from '../material-color-utilities';
+import { toneDeltaPair } from '../material-color-utilities';
 import { DynamicColor } from '../material-color-utilities/dynamic_color';
 import { highestSurface } from './color.manager';
 import { AddColorsOptions, ColorApi } from './color.api';
@@ -6,6 +6,11 @@ import { Hct } from '../material-color-utilities/htc';
 import { ColorOptions } from './configurable-color';
 import { Scheme } from '../theme';
 import { DynamicColorKey, getCurve, tMaxC, tMinC } from './color.utils';
+import { Contrast } from '@material/material-color-utilities';
+
+const inverseTone = (tone: number) => {
+  return 100 - tone;
+};
 
 export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
   const getColor = (key: DynamicColorKey) => {
@@ -26,6 +31,9 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
         if (s.isDark) {
           return 4;
         } else {
+          if (s.variant == 'fidelity') {
+            return 100;
+          }
           if (Hct.isYellow(s.getPalette('neutral').hue)) {
             return 99;
           } else if (s.variant === 'vibrant') {
@@ -347,6 +355,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
                 ? 88
                 : 98,
           );
+        } else if (s.variant == 'fidelity') {
+          return s.sourceColorHct.tone;
         } else {
           return tMaxC(
             s.getPalette('primary'),
@@ -358,15 +368,34 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       isBackground: true,
       background: (s) => highestSurface(s, colorService),
       contrastCurve: (s) => getCurve(4.5),
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
-          colorService.getColor('primaryContainer').getMaterialColor(),
-          colorService.getColor('primary').getMaterialColor(),
-          5,
-          'relative_lighter',
-          true,
-          'farther',
-        ),
+      adjustTone: (s) =>
+        s.variant == 'fidelity'
+          ? () => {
+              const surfaceTone = colorService
+                .getColor('surface')
+                .getMaterialColor()
+                .tone(s);
+              const primaryTone = colorService
+                .getColor('primary')
+                .getMaterialColor()
+                .tone(s);
+              let selfTone = primaryTone;
+              if (Contrast.ratioOfTones(surfaceTone, selfTone) < 3) {
+                const result = inverseTone(primaryTone);
+                if (Contrast.ratioOfTones(surfaceTone, result) >= 3) {
+                  selfTone = result;
+                }
+              }
+              return selfTone;
+            }
+          : toneDeltaPair(
+              colorService.getColor('primaryContainer').getMaterialColor(),
+              colorService.getColor('primary').getMaterialColor(),
+              5,
+              'relative_lighter',
+              true,
+              'farther',
+            ),
     },
     primaryDim: {
       palette: (s) => s.getPalette('primary'),
@@ -382,8 +411,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       isBackground: true,
       background: (s) => getColor('surfaceContainerHigh'),
       contrastCurve: (s) => getCurve(4.5),
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           colorService.getColor('primaryDim').getMaterialColor(),
           colorService.getColor('primary').getMaterialColor(),
           5,
@@ -414,6 +443,15 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
                 78,
                 Hct.isCyan(s.getPalette('primary').hue) ? 88 : 90,
               );
+        }
+        if (s.variant == 'fidelity') {
+          return s.isDark
+            ? tMaxC(s.getPalette('primary'), 30, 93)
+            : tMaxC(
+                s.getPalette('primary'),
+                78,
+                Hct.isCyan(s.getPalette('primary').hue) ? 88 : 90,
+              );
         } else {
           // VIBRANT
           return s.isDark
@@ -427,7 +465,17 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       },
       isBackground: true,
       background: (s) => highestSurface(s, colorService),
-      toneDeltaPair: (s) => undefined,
+      adjustTone: (s) =>
+        s.variant == 'fidelity'
+          ? toneDeltaPair(
+              colorService.getColor('primary').getMaterialColor(),
+              colorService.getColor('primaryContainer').getMaterialColor(),
+              15,
+              'relative_darker',
+              true,
+              'farther',
+            )
+          : undefined,
       contrastCurve: (s) => (s.contrastLevel > 0 ? getCurve(1.5) : undefined),
     },
     onPrimaryContainer: {
@@ -457,8 +505,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       tone: (s) =>
         colorService.getColor('primaryFixed').getMaterialColor().getTone(s),
       isBackground: true,
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           getColor('primaryFixedDim'),
           getColor('primaryFixed'),
           5,
@@ -509,8 +557,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       isBackground: true,
       background: (s) => highestSurface(s, colorService),
       contrastCurve: (s) => getCurve(4.5),
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           getColor('secondaryContainer'),
           getColor('secondary'),
           5,
@@ -531,8 +579,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       isBackground: true,
       background: (s) => getColor('surfaceContainerHigh'),
       contrastCurve: (s) => getCurve(4.5),
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           getColor('secondaryDim'),
           getColor('secondary'),
           5,
@@ -561,7 +609,7 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       },
       isBackground: true,
       background: (s) => highestSurface(s, colorService),
-      toneDeltaPair: (s) => undefined,
+      adjustTone: (s) => undefined,
       contrastCurve: (s) => (s.contrastLevel > 0 ? getCurve(1.5) : undefined),
     },
     onSecondaryContainer: {
@@ -589,8 +637,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       palette: (s) => s.getPalette('secondary'),
       tone: (s) => getColor('secondaryFixed').getTone(s),
       isBackground: true,
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           getColor('secondaryFixedDim'),
           getColor('secondaryFixed'),
           5,
@@ -634,8 +682,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       isBackground: true,
       background: (s) => highestSurface(s, colorService),
       contrastCurve: (s) => getCurve(4.5),
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           getColor('tertiaryContainer'),
           getColor('tertiary'),
           5,
@@ -656,8 +704,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       isBackground: true,
       background: (s) => getColor('surfaceContainerHigh'),
       contrastCurve: (s) => getCurve(4.5),
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           getColor('tertiaryDim'),
           getColor('tertiary'),
           5,
@@ -695,7 +743,7 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       },
       isBackground: true,
       background: (s) => highestSurface(s, colorService),
-      toneDeltaPair: (s) => undefined,
+      adjustTone: (s) => undefined,
       contrastCurve: (s) => (s.contrastLevel > 0 ? getCurve(1.5) : undefined),
     },
     onTertiaryContainer: {
@@ -723,8 +771,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       palette: (s) => s.getPalette('tertiary'),
       tone: (s) => getColor('tertiaryFixed').getTone(s),
       isBackground: true,
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           getColor('tertiaryFixedDim'),
           getColor('tertiaryFixed'),
           5,
@@ -760,8 +808,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       isBackground: true,
       background: (s) => highestSurface(s, colorService),
       contrastCurve: (s) => getCurve(4.5),
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           colorService.getColor('errorContainer').getMaterialColor(),
           colorService.getColor('error').getMaterialColor(),
           5,
@@ -776,8 +824,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       isBackground: true,
       background: (s) => getColor('surfaceContainerHigh'),
       contrastCurve: (s) => getCurve(4.5),
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           getColor('errorDim'),
           getColor('error'),
           5,
@@ -800,7 +848,7 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       },
       isBackground: true,
       background: (s) => highestSurface(s, colorService),
-      toneDeltaPair: (s) => undefined,
+      adjustTone: (s) => undefined,
       contrastCurve: (s) => (s.contrastLevel > 0 ? getCurve(1.5) : undefined),
     },
     onErrorContainer: {

package/src/config/index.node.ts

@@ -0,0 +1 @@
+export * from './resolver-config';

package/src/{adapter → config}/index.ts

@@ -1,3 +1,2 @@
 export * from './config.interface';
-export * from './adapter.abstract';
 export * from './define-config';

package/src/config/resolver-config.ts

@@ -0,0 +1,49 @@
+import { ConfigInterface } from './index';
+import * as fs from 'node:fs';
+
+export interface ResolvedConfigResult {
+  config: ConfigInterface;
+  filePath: string; // absolute path of the loaded config file
+}
+
+/**
+ * Resolve and load theme.config.{ts,js,mjs,cjs} using JITI, independent of any bundler.
+ * @param configPath base path without extension or full path with/without extension
+ */
+export async function resolveConfig(
+  configPath = './theme.config',
+): Promise<ResolvedConfigResult> {
+  const { createJiti } = await import('jiti');
+  const { resolve } = await import('pathe');
+
+  const jiti = createJiti(import.meta.url, {
+    debug: process.env.NODE_ENV === 'development',
+    fsCache: true,
+    interopDefault: true,
+  });
+
+  // If user passed a path with extension, try it as-is first
+  const tryPaths: string[] = [];
+  const resolvedInput = resolve(configPath);
+
+  const extMatch = /\.(ts|js|mjs|cjs)$/.exec(resolvedInput);
+  if (extMatch) {
+    tryPaths.push(resolvedInput);
+  } else {
+    for (const ext of ['.ts', '.js', '.mjs', '.cjs']) {
+      tryPaths.push(resolvedInput + ext);
+    }
+  }
+
+  for (const file of tryPaths) {
+    if (fs.existsSync(file)) {
+      const cfg = (await jiti.import(file, {
+        default: true,
+      })) as ConfigInterface;
+
+      return { config: cfg, filePath: file };
+    }
+  }
+
+  throw new Error(`Configuration file not found for ${''}{.ts,.js,.mjs,.cjs}`);
+}

package/src/index.browser.ts

@@ -0,0 +1 @@
+export * from "./index"

package/src/index.node.ts

@@ -0,0 +1,3 @@
+export * from './index';
+export * from './loader/index.node';
+export * from './config/index.node';

package/src/index.ts

@@ -2,10 +2,10 @@ export * from './app.container';
 export * from './app.module';
 export * from './API';
 export * from './color';
-export * from './adapter';
-export * from './adapters';
+export * from './loader';
 export * from './bootstrap';
 export * from './material-color-utilities';
 export * from './plugin';
 export * from './plugins';
 export * from './theme';
+export * from './config';

package/src/loader/index.node.ts

@@ -0,0 +1,2 @@
+export * from './unplugin';
+export * from './load-from-path';

package/src/loader/index.ts

@@ -0,0 +1 @@
+export * from './loader';

package/src/loader/load-from-path.ts

@@ -0,0 +1,9 @@
+import { loader } from './loader';
+import { resolveConfig } from '../config/resolver-config';
+
+export const loadFromPath = async (configPath = './theme.config') => {
+  const { config, filePath } = await resolveConfig(configPath);
+  const api = await loader(config);
+
+  return { filePath, api: api };
+};

package/src/{adapter/adapter.abstract.ts → loader/loader.ts}

@@ -1,28 +1,22 @@
-import { ConfigInterface } from './config.interface';
 import { tonalSpotVariant } from '../theme';
 import { defaultColors } from '../color';
 import { bootstrap } from '../bootstrap';
-import { API } from '../API';
 import { registerModule } from '../app.container';
 import { asValue } from 'awilix';
+import { ConfigInterface } from '../config';
 
-export abstract class AdapterAbstract {
-  public api: API;
+const initializeApi = () => {
+  const api = bootstrap();
+  registerModule({
+    adapter: asValue(this),
+  });
+  return api;
+};
 
-  protected constructor() {
-    this.api = bootstrap();
-    registerModule({
-      adapter: asValue(this),
-    });
-  }
-
-  abstract getConfig(): Promise<ConfigInterface>;
+export const loader = async (config: ConfigInterface) => {
+  const api = initializeApi();
 
-  public async init(): Promise<void> {
-    const config = await this.getConfig();
-    if (config == null) {
-      return;
-    }
+  const init = () => {
     const {
       sourceColor,
       contrastLevel = 0,
@@ -33,7 +27,7 @@ export abstract class AdapterAbstract {
       useDefaultColors = true,
       plugins,
     } = config;
-    this.api.themes.create({
+    api.themes.create({
       contrastLevel: contrastLevel,
       isDark: isDark,
       sourceColorHex: sourceColor,
@@ -41,24 +35,25 @@ export abstract class AdapterAbstract {
     });
     if (palettes) {
       Object.entries(palettes).forEach(([key, value]) =>
-        this.api.themes.addCustomPalette(key, value),
+        api.themes.addCustomPalette(key, value),
       );
     }
     if (useDefaultColors) {
-      this.api.colors.addColors(defaultColors);
+      api.colors.addColors(defaultColors);
     }
     if (colors) {
-      this.api.colors.addColors(colors);
+      api.colors.addColors(colors);
     }
     if (plugins) {
       plugins.forEach((plugin) => {
-        this.api.plugins.addPlugin(plugin);
+        api.plugins.addPlugin(plugin);
       });
-      this.api.plugins.initPlugins(this.api);
+      api.plugins.initPlugins(api);
     }
-  }
+  };
+
+  init();
+  await api.load();
 
-  public load() {
-    this.api.plugins.loadPlugins();
-  }
-}
+  return api;
+};

package/src/loader/unplugin.ts

@@ -0,0 +1,158 @@
+import { loadFromPath } from './load-from-path';
+
+export interface UdixioThemeOptions {
+  configPath?: string;
+  verbose?: boolean;
+}
+
+// Instance lazy-loadée
+let unpluginInstance: any = null;
+
+const createUnpluginTheme = async () => {
+  if (unpluginInstance) {
+    return unpluginInstance;
+  }
+
+  const { createUnplugin } = await import('unplugin');
+
+  unpluginInstance = createUnplugin<UdixioThemeOptions>((options = {}) => {
+    const { configPath = './theme.config', verbose = false } = options;
+
+    let resolvedConfigPath: string;
+
+    // Skip pendant la génération du graph NX
+    if (global.NX_GRAPH_CREATION) {
+      return {
+        name: 'udixio-theme',
+      };
+    }
+
+    const loadTheme = async (): Promise<void> => {
+      try {
+        if (verbose) {
+          console.log(`🎨 Loading theme from: ${configPath}`);
+        }
+        const result = await loadFromPath(configPath);
+        if (!resolvedConfigPath && result?.filePath) {
+          resolvedConfigPath = result.filePath;
+        }
+        if (verbose) {
+          console.log(`✅ Theme loaded successfully!`);
+        }
+      } catch (error) {
+        console.error(`❌ Theme loading failed:`, error);
+        throw error;
+      }
+    };
+
+    return {
+      name: 'udixio-theme',
+
+      // Hook appelé au début du build (tous les bundlers)
+      buildStart: async () => {
+        await loadTheme();
+      },
+
+      // Hook appelé pendant la génération (Rollup/Vite)
+      generateBundle: async () => {
+        await loadTheme();
+      },
+
+      // Support spécifique Vite pour HMR
+      vite: {
+        handleHotUpdate: async ({ server, file, modules }) => {
+          if (!resolvedConfigPath) {
+            const result = await loadFromPath(configPath);
+            resolvedConfigPath = result?.filePath || '';
+          }
+
+          if (resolvedConfigPath === file) {
+            if (verbose) {
+              console.log(`🔄 Theme config changed: ${file}`);
+            }
+            await loadTheme();
+            server.ws.send({ type: 'full-reload', path: '*' });
+            return modules;
+          }
+          return;
+        },
+      },
+
+      // Support spécifique Webpack pour HMR
+      webpack: (compiler) => {
+        if (compiler.options.mode === 'development') {
+          compiler.hooks.watchRun.tapAsync(
+            'udixio-theme',
+            async (compilation, callback) => {
+              const changedFiles = compilation.modifiedFiles || new Set();
+
+              if (!resolvedConfigPath) {
+                const result = await loadFromPath(configPath);
+                resolvedConfigPath = result?.filePath || '';
+              }
+
+              if (changedFiles.has(resolvedConfigPath)) {
+                if (verbose) {
+                  console.log(`🔄 Theme config changed: ${resolvedConfigPath}`);
+                }
+                await loadTheme();
+              }
+              callback();
+            },
+          );
+        }
+      },
+
+      // Support spécifique Rollup
+      rollup: {
+        watchChange: async (id) => {
+          if (!resolvedConfigPath) {
+            const result = await loadFromPath(configPath);
+            resolvedConfigPath = result?.filePath || '';
+          }
+
+          if (resolvedConfigPath === id) {
+            if (verbose) {
+              console.log(`🔄 Theme config changed: ${id}`);
+            }
+            await loadTheme();
+          }
+        },
+      },
+    };
+  });
+
+  return unpluginInstance;
+};
+
+// Exports avec lazy loading
+export const vitePlugin = async (options?: UdixioThemeOptions) => {
+  const plugin = await createUnpluginTheme();
+  return plugin.vite(options);
+};
+
+export const webpackPlugin = async (options?: UdixioThemeOptions) => {
+  const plugin = await createUnpluginTheme();
+  return plugin.webpack(options);
+};
+
+export const rollupPlugin = async (options?: UdixioThemeOptions) => {
+  const plugin = await createUnpluginTheme();
+  return plugin.rollup(options);
+};
+
+export const esbuildPlugin = async (options?: UdixioThemeOptions) => {
+  const plugin = await createUnpluginTheme();
+  return plugin.esbuild(options);
+};
+
+// Export principal avec lazy loading
+export const unpluginUdixioTheme = {
+  vite: vitePlugin,
+  webpack: webpackPlugin,
+  rollup: rollupPlugin,
+  esbuild: esbuildPlugin,
+};
+
+// Export par défaut
+export default unpluginUdixioTheme;