@udixio/theme 1.0.0-beta.8 → 1.0.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/theme",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-beta.9",
   "license": "MIT",
   "author": "vigreux-joël",
   "main": "dist/index.js",
@@ -85,6 +85,7 @@
     "source-map-support": "^0.5.20",
     "supertest": "^6.1.3",
     "tailwindcss": "^3.4.7",
+    "tailwindcss-themer": "^4.0.0",
     "ts-jest": "28.0.8",
     "ts-loader": "^9.2.3",
     "ts-node": "^10.0.0",

package/src/config/config.interface.ts

@@ -1,7 +1,6 @@
 import { VariantEntity } from '../theme';
 import { AddColorsOptions } from '../color';
-import { PluginAbstract } from '../plugin/plugin.abstract';
-import { AppService } from '../app.service';
+import { PluginConstructor } from '../plugin/plugin.service';
 
 export interface ConfigInterface {
   sourceColor: string;
@@ -11,5 +10,5 @@ export interface ConfigInterface {
   colors?: AddColorsOptions | AddColorsOptions[];
   useDefaultColors?: boolean;
   palettes?: Record<string, string>;
-  plugins?: (new (appService: AppService) => PluginAbstract)[];
+  plugins?: (PluginConstructor | [PluginConstructor, object])[];
 }

package/src/config/config.service.ts

@@ -54,7 +54,13 @@ export class ConfigService {
       colorService.addColors(colors);
     }
     if (plugins) {
-      plugins.forEach((plugin) => pluginService.addPlugin(plugin));
+      plugins.forEach((plugin) => {
+        if (Array.isArray(plugin)) {
+          pluginService.addPlugin(plugin[0], plugin[1]);
+        } else {
+          pluginService.addPlugin(plugin, {});
+        }
+      });
       pluginService.loadPlugins(this.appService);
     }
   }

package/src/plugin/plugin.abstract.ts

@@ -3,5 +3,6 @@ import { AppService } from '../app.service';
 export abstract class PluginAbstract {
   static dependencies: (new () => PluginAbstract)[];
 
-  protected constructor(protected appService: AppService) {}
+  protected abstract appService: AppService;
+  protected abstract options: object;
 }

package/src/plugin/plugin.service.ts

@@ -1,26 +1,30 @@
 import { PluginAbstract } from './plugin.abstract';
 import { AppService } from '../app.service';
 
+export type PluginConstructor = new (
+  appService: AppService,
+  options: any
+) => PluginAbstract;
+
 export class PluginService {
   private pluginInstances = new Map<string, PluginAbstract>();
-  private pluginConstructors = new Map<
-    string,
-    new (appService: AppService) => PluginAbstract
-  >();
+  private pluginConstructors = new Map<string, [PluginConstructor, object]>();
 
-  public addPlugin(plugin: new (appService: AppService) => PluginAbstract) {
-    this.pluginConstructors.set(plugin.name, plugin);
+  public addPlugin(plugin: PluginConstructor, config: object) {
+    this.pluginConstructors.set(plugin.name, [plugin, config]);
   }
 
   public loadPlugins(appService: AppService) {
-    this.pluginConstructors.forEach((plugin) => {
-      this.pluginInstances.set(plugin.name, new plugin(appService));
+    this.pluginConstructors.forEach(([plugin, option]) => {
+      this.pluginInstances.set(plugin.name, new plugin(appService, option));
     });
   }
 
   public getPlugin<T extends PluginAbstract>(
-    plugin: new (appService: AppService) => T
-  ): T | undefined {
-    return this.pluginInstances.get(plugin.name) as T;
+    plugin: new (appService: AppService, options: any) => T
+  ): T {
+    const pluginInstance = this.pluginInstances.get(plugin.name);
+    if (!pluginInstance) throw new Error(`Plugin ${plugin.name} not found`);
+    return pluginInstance as T;
   }
 }

package/src/plugins/tailwind/Tailwind.plugin.ts

@@ -0,0 +1,53 @@
+import { PluginAbstract } from '../../plugin/plugin.abstract';
+import { AppService } from '../../app.service';
+import { Theme } from './main';
+import { state } from './plugins-tailwind/state';
+import { themer } from './plugins-tailwind/themer';
+
+interface TailwindPluginOptions {
+  darkMode: 'class' | 'media';
+}
+
+export class TailwindPlugin extends PluginAbstract {
+  constructor(
+    protected appService: AppService,
+    protected options: TailwindPluginOptions
+  ) {
+    super();
+  }
+  static config(options: TailwindPluginOptions): TailwindPluginOptions {
+    return options;
+  }
+  getTheme(): Theme {
+    const colors: Record<
+      string,
+      {
+        light: string;
+        dark: string;
+      }
+    > = {};
+
+    for (const isDark of [false, true]) {
+      this.appService.themeService.update({ isDark: isDark });
+      for (const [key, value] of this.appService.colorService
+        .getColors()
+        .entries()) {
+        const newKey = key
+          .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2')
+          .toLowerCase();
+        colors[newKey] ??= { light: '', dark: '' };
+        colors[newKey][isDark ? 'dark' : 'light'] = value.getHex();
+      }
+    }
+    console.log(colors);
+
+    return {
+      colors: {},
+      fontFamily: { expressive: [], neutral: [] },
+      plugins: [
+        state(Object.keys(colors)),
+        themer(colors, this.options.darkMode),
+      ],
+    };
+  }
+}

package/src/plugins/tailwind/main.ts

@@ -0,0 +1,18 @@
+import { PluginsConfig } from 'tailwindcss/types/config';
+import { bootstrapFromConfig } from '../../main';
+import { TailwindPlugin } from './Tailwind.plugin';
+
+export type Theme = {
+  colors: Record<string, string>;
+  fontFamily: { expressive: string[]; neutral: string[] };
+  plugins: Partial<PluginsConfig>;
+};
+
+export const createTheme = async (): Promise<Theme> => {
+  const app = await bootstrapFromConfig();
+  const plugin = app.pluginService.getPlugin(TailwindPlugin);
+  if (!plugin) {
+    throw new Error('Tailwind plugin not found');
+  }
+  return plugin.getTheme();
+};

package/src/plugins/tailwind/plugins-tailwind/state.ts

@@ -0,0 +1,88 @@
+// from tailwindcss src/util/flattenColors
+import plugin from 'tailwindcss/plugin';
+import { PluginAPI } from 'tailwindcss/types/config';
+
+type State = {
+  statePrefix: string;
+  disabledStyles: {
+    textOpacity: number;
+    backgroundOpacity: number;
+  };
+  transition: {
+    duration: number;
+  };
+};
+
+type Components = Record<string, Record<string, {}>>;
+
+export const state = (colorkeys: string[]) =>
+  plugin((pluginArgs: PluginAPI) => {
+    addAllNewComponents(
+      pluginArgs,
+      {
+        statePrefix: 'state',
+        disabledStyles: {
+          textOpacity: 0.38,
+          backgroundOpacity: 0.12,
+        },
+        transition: {
+          duration: 150,
+        },
+      },
+      colorkeys
+    );
+  }, {});
+
+const addAllNewComponents = (
+  { addComponents }: PluginAPI,
+  { statePrefix, disabledStyles, transition }: State,
+  colorKeys: string[]
+) => {
+  const newComponents: Components = {};
+
+  for (const isGroup of [false, true]) {
+    const group = isGroup ? 'group-' : '';
+    for (const colorName of colorKeys) {
+      const className = `.${group}${statePrefix}-${colorName}`;
+      newComponents[className] = {
+        [`@apply ${group}hover:bg-${colorName}/[0.08]`]: {},
+        [`@apply ${group}active:bg-${colorName}/[0.12]`]: {},
+        [`@apply ${group}focus-visible:bg-${colorName}/[0.12]`]: {},
+      };
+      if (transition) {
+        newComponents[className][`@apply transition-colors`] = {};
+        newComponents[className][`@apply duration-${transition.duration}`] = {};
+      }
+      if (disabledStyles) {
+        newComponents[className][
+          `@apply ${group}disabled:text-on-surface/[${disabledStyles.textOpacity}]`
+        ] = {};
+        newComponents[className][
+          `@apply ${group}disabled:bg-on-surface/[${disabledStyles.backgroundOpacity}]`
+        ] = {};
+      }
+    }
+  }
+  for (const colorName of colorKeys) {
+    for (const stateName of ['hover', 'active', 'focus', 'disabled']) {
+      const className = `.${stateName}-${statePrefix}-${colorName}`;
+      if (stateName === 'active' || stateName === 'focus') {
+        newComponents[className] = {
+          [`@apply bg-${colorName}/[0.12]`]: {},
+        };
+      } else if (stateName === 'hover') {
+        newComponents[className] = {
+          [`@apply bg-${colorName}/[0.08]`]: {},
+        };
+      } else if (stateName === 'disabled') {
+        newComponents[className] = {
+          [`@apply text-on-surface/[${disabledStyles.textOpacity}]`]: {},
+        };
+        newComponents[className] = {
+          [`@apply bg-on-surface/[${disabledStyles.backgroundOpacity}]`]: {},
+        };
+      }
+    }
+  }
+  addComponents(newComponents);
+};

package/src/plugins/tailwind/plugins-tailwind/themer.ts

@@ -0,0 +1,53 @@
+export const themer = (
+  colors: Record<
+    string,
+    {
+      light: string;
+      dark: string;
+    }
+  >,
+  darkMode: 'class' | 'media'
+) => {
+  const options: {
+    defaultTheme: {
+      extend: {
+        colors: Record<string, string>;
+      };
+    };
+    themes: [
+      {
+        name: 'darkTheme';
+        selectors?: ['.dark-mode', '[data-theme="dark"]'];
+        mediaQuery?: '@media (prefers-color-scheme: dark)';
+        extend: {
+          colors: Record<string, string>;
+        };
+      }
+    ];
+  } = {
+    defaultTheme: {
+      extend: {
+        colors: {},
+      },
+    },
+    themes: [
+      {
+        name: 'darkTheme',
+        extend: {
+          colors: {},
+        },
+      },
+    ],
+  };
+
+  Object.entries(colors).forEach(([key, value]) => {
+    options.defaultTheme.extend.colors[key] = value.light;
+    options.themes[0].extend.colors[key] = value.dark;
+  });
+  options.themes[0].selectors =
+    darkMode === 'class' ? ['.dark-mode', '[data-theme="dark"]'] : undefined;
+  options.themes[0].mediaQuery =
+    darkMode === 'media' ? '@media (prefers-color-scheme: dark)' : undefined;
+
+  return require('tailwindcss-themer')(options);
+};