@udixio/theme 1.0.0-beta.3 → 1.0.0-beta.30

package/src/config/config.service.ts

@@ -0,0 +1,101 @@
+import { ConfigInterface } from './config.interface';
+
+import { resolve } from 'node:path';
+import { defaultColors } from '../color';
+import { VariantModel } from '../theme';
+import { AppService } from '../app.service';
+import { existsSync } from 'node:fs';
+
+export function defineConfig(configObject: ConfigInterface): ConfigInterface {
+  if (!configObject || typeof configObject !== 'object') {
+    throw new Error('The configuration is missing or not an object');
+  }
+  if (!('sourceColor' in configObject)) {
+    throw new Error('Invalid configuration');
+  }
+  return configObject as ConfigInterface;
+}
+
+export class ConfigService {
+  configPath = './theme.config';
+
+  private appService: AppService;
+
+  constructor({ appService }: { appService: AppService }) {
+    this.appService = appService;
+  }
+
+  public loadConfig(config?: ConfigInterface): void {
+    const { themeService, colorService, pluginService } = this.appService;
+    const {
+      sourceColor,
+      contrastLevel = 0,
+      isDark = false,
+      variant = VariantModel.tonalSpot,
+      palettes,
+      colors,
+      useDefaultColors = true,
+      plugins,
+    } = config ?? this.getConfig();
+    themeService.create({
+      contrastLevel: contrastLevel,
+      isDark: isDark,
+      sourceColorHex: sourceColor,
+      variant: variant,
+    });
+    if (palettes) {
+      Object.entries(palettes).forEach(([key, value]) =>
+        themeService.addCustomPalette(key, value)
+      );
+    }
+    if (useDefaultColors) {
+      colorService.addColors(defaultColors);
+    }
+    if (colors) {
+      colorService.addColors(colors);
+    }
+    if (plugins) {
+      plugins.forEach((plugin) => {
+        pluginService.addPlugin(plugin);
+      });
+      pluginService.loadPlugins(this.appService);
+    }
+  }
+
+  private getConfig(): ConfigInterface {
+    if (
+      typeof process !== 'undefined' &&
+      process.release &&
+      process.release.name === 'node'
+    ) {
+      const base = resolve(this.configPath);
+      const extensions = ['.js', '.ts', '.jms', '.jcs'];
+      let configImport = null;
+
+      for (const ext of extensions) {
+        const path = base + ext;
+        if (existsSync(path)) {
+          configImport = require(path);
+          break;
+        }
+      }
+
+      if (!configImport) {
+        throw new Error('Configuration file not found');
+      }
+
+      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/config/index.ts

@@ -0,0 +1,3 @@
+export * from './config.interface';
+export * from './config.module';
+export * from './config.service';

package/src/index.ts

@@ -1 +1,12 @@
+export { default as AppContainer } from './app.container';
+export * from './app.container';
+export * from './app.module';
+export * from './app.service';
+export * from './color';
+export * from './config';
 export * from './main';
+export * from './material-color-utilities';
+export * from './plugin';
+export * from './plugins/font';
+export * from './plugins/tailwind';
+export * from './theme';

package/src/main.ts

@@ -1,11 +1,17 @@
-import { NestFactory } from '@nestjs/core';
-import { AppModule } from './app.module';
+import AppContainer from './app.container';
 import { AppService } from './app.service';
+import { ConfigInterface, ConfigService } from './config';
 
-export async function main(): Promise<[AppService, () => Promise<void>]> {
-  const app = await NestFactory.create(AppModule);
-  const appService = app.get(AppService);
+export function bootstrap(): AppService {
+  return AppContainer.resolve<AppService>('appService');
+}
 
-  const close = () => app.close();
-  return [appService, close];
+export function bootstrapFromConfig(args?: {
+  path?: string;
+  config?: ConfigInterface;
+}): AppService {
+  const configService = AppContainer.resolve<ConfigService>('configService');
+  if (args?.path) configService.configPath = args.path;
+  configService.loadConfig(args?.config);
+  return AppContainer.resolve<AppService>('appService');
 }

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

@@ -1,2 +1,3 @@
 export * from './contrastCurve';
+export * from './dynamic_color';
 export * from './toneDeltaPair';

package/src/plugin/index.ts

@@ -0,0 +1,3 @@
+export * from './pluginAbstract';
+export * from './plugin.module';
+export * from './plugin.service';

package/src/plugin/plugin.module.ts

@@ -0,0 +1,7 @@
+import { asClass } from 'awilix';
+import { Module } from '../app.container';
+import { PluginService } from './plugin.service';
+
+export const PluginModule: Module = {
+  pluginService: asClass(PluginService).singleton(),
+};

package/src/plugin/plugin.service.ts

@@ -0,0 +1,42 @@
+import { PluginAbstract } from './pluginAbstract';
+import { AppService } from '../app.service';
+
+export class PluginService {
+  private plugins = new Map<string, PluginAbstract<any, any>>();
+
+  public addPlugin(plugin: PluginAbstract<any, any>) {
+    this.plugins.set(plugin.name, plugin);
+  }
+
+  public loadPlugins(appService: AppService) {
+    const plugins = new Map(this.plugins);
+
+    let size = 0;
+    do {
+      size = plugins.size;
+      plugins.forEach((plugin, key) => {
+        const deps = plugin.dependencies.filter(
+          (dep) => !this.plugins.has(new dep().name)
+        );
+        if (deps.length === 0) {
+          this.plugins.set(plugin.name, plugin.init(appService));
+          plugins.delete(key);
+        }
+      });
+    } while (plugins.size != 0 && plugins.size < size);
+
+    if (plugins.size > 0)
+      throw new Error(
+        "Some plugins couldn't be loaded due to missing dependencies: " +
+          Array.from(plugins.keys())
+      );
+  }
+
+  public getPlugin<T extends PluginAbstract<any, any>>(
+    plugin: new (...args: any) => T
+  ): T {
+    const pluginInstance = this.plugins.get(new plugin().name);
+    if (!pluginInstance) throw new Error(`Plugin ${plugin.name} not found`);
+    return pluginInstance as T;
+  }
+}

package/src/plugin/pluginAbstract.ts

@@ -0,0 +1,44 @@
+import { AppService } from '../app.service';
+
+export type PluginConstructor<Plugin extends PluginImplAbstract<any>> = new (
+  ...args: any
+) => Plugin;
+
+export abstract class PluginAbstract<
+  Plugin extends PluginImplAbstract<Options>,
+  Options extends object
+> {
+  public abstract readonly dependencies: (new (...args: any) => PluginAbstract<
+    any,
+    any
+  >)[];
+  public abstract readonly name: string;
+  public options: Options;
+  public abstract readonly pluginClass: PluginConstructor<Plugin>;
+  protected pluginInstance: Plugin | undefined;
+
+  constructor(options: Options) {
+    this.options = options;
+  }
+
+  public init(appService: AppService) {
+    this.pluginInstance = new this.pluginClass(appService, this.options);
+    this.pluginInstance.onInit();
+    return this;
+  }
+
+  public getInstance(): Plugin {
+    if (!this.pluginInstance) {
+      throw new Error(`Plugin ${this.name} is not initialized`);
+    }
+    return this.pluginInstance;
+  }
+}
+
+export abstract class PluginImplAbstract<Options extends object> {
+  constructor(protected appService: AppService, protected options: Options) {
+    this.onInit();
+  }
+
+  abstract onInit(): void;
+}

package/src/plugins/font/font.plugin.ts

@@ -0,0 +1,203 @@
+import { PluginAbstract, PluginImplAbstract } from '../../plugin';
+
+export enum FontFamily {
+  Expressive = 'expressive',
+  Neutral = 'neutral',
+}
+export type FontStyle = {
+  fontSize: number;
+  lineHeight: number;
+  fontWeight: number;
+  letterSpacing?: number;
+  fontFamily: FontFamily;
+};
+export type FontRole = 'display' | 'headline' | 'title' | 'label' | 'body';
+export type FontSize = 'large' | 'medium' | 'small';
+interface FontPluginOptions {
+  fontFamily?: {
+    expressive?: string[];
+    neutral?: string[];
+  };
+  fontStyles?: Partial<Record<FontRole, Record<FontSize, Partial<FontStyle>>>>;
+}
+
+export class FontPlugin extends PluginAbstract<
+  FontPluginImpl,
+  FontPluginOptions
+> {
+  dependencies = [];
+  name = 'font';
+  pluginClass = FontPluginImpl;
+}
+
+class FontPluginImpl extends PluginImplAbstract<FontPluginOptions> {
+  private _fontFamily: { expressive: string[]; neutral: string[] } | undefined;
+
+  get fontFamily(): { expressive: string[]; neutral: string[] } {
+    if (!this._fontFamily) throw new Error('Font family not initialized');
+    return this._fontFamily;
+  }
+
+  set fontFamily(
+    value: { expressive: string[]; neutral: string[] } | undefined
+  ) {
+    this._fontFamily = value;
+  }
+
+  private _fontStyles:
+    | Record<FontRole, Record<FontSize, FontStyle>>
+    | undefined;
+
+  get fontStyles(): Record<FontRole, Record<FontSize, FontStyle>> {
+    if (!this._fontStyles) throw new Error('Font styles not initialized');
+    return this._fontStyles;
+  }
+
+  set fontStyles(
+    value: Record<FontRole, Record<FontSize, FontStyle>> | undefined
+  ) {
+    this._fontStyles = value;
+  }
+
+  getFonts() {
+    return {
+      fontStyles: this.fontStyles,
+      fontFamily: this.fontFamily,
+    };
+  }
+
+  onInit(): void {
+    this.fontFamily = {
+      expressive: this.options?.fontFamily?.expressive ?? [
+        'Roboto',
+        'sans-serif',
+      ],
+      neutral: this.options?.fontFamily?.neutral ?? ['Roboto', 'sans-serif'],
+    };
+    this.fontStyles = {
+      display: {
+        large: {
+          fontWeight: 400,
+          fontSize: 3.5625,
+          lineHeight: 4,
+          letterSpacing: -0.015625,
+          fontFamily: FontFamily.Expressive,
+        },
+        medium: {
+          fontWeight: 400,
+          fontSize: 2.8125,
+          lineHeight: 3.25,
+          fontFamily: FontFamily.Expressive,
+        },
+        small: {
+          fontWeight: 400,
+          fontSize: 2.25,
+          lineHeight: 2.75,
+          fontFamily: FontFamily.Expressive,
+        },
+      },
+      headline: {
+        large: {
+          fontWeight: 400,
+          fontSize: 2,
+          lineHeight: 2.5,
+          fontFamily: FontFamily.Expressive,
+        },
+        medium: {
+          fontWeight: 400,
+          fontSize: 1.75,
+          lineHeight: 2.25,
+          fontFamily: FontFamily.Expressive,
+        },
+        small: {
+          fontWeight: 400,
+          fontSize: 1.5,
+          lineHeight: 2,
+          fontFamily: FontFamily.Expressive,
+        },
+      },
+      title: {
+        large: {
+          fontWeight: 400,
+          fontSize: 1.375,
+          lineHeight: 1.75,
+          fontFamily: FontFamily.Neutral,
+        },
+        medium: {
+          fontWeight: 500,
+          fontSize: 1,
+          lineHeight: 1.5,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.009375,
+        },
+        small: {
+          fontWeight: 500,
+          fontSize: 0.875,
+          lineHeight: 1.25,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.00625,
+        },
+      },
+      label: {
+        large: {
+          fontWeight: 500,
+          fontSize: 0.875,
+          lineHeight: 1.25,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.00625,
+        },
+        medium: {
+          fontWeight: 500,
+          fontSize: 0.75,
+          lineHeight: 1,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.03125,
+        },
+        small: {
+          fontWeight: 500,
+          fontSize: 0.6875,
+          lineHeight: 1,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.03125,
+        },
+      },
+      body: {
+        large: {
+          fontWeight: 400,
+          fontSize: 1,
+          lineHeight: 1.5625,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.03125,
+        },
+        medium: {
+          fontWeight: 400,
+          fontSize: 0.875,
+          lineHeight: 1.25,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.015625,
+        },
+        small: {
+          fontWeight: 400,
+          fontSize: 0.75,
+          lineHeight: 1,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.025,
+        },
+      },
+    };
+
+    if (this.options && this.options.fontStyles)
+      Object.entries(this.options.fontStyles).forEach(([key, fontParam]) => {
+        const fontRole: FontRole = key as FontRole;
+        Object.entries(fontParam).forEach(([size, fontStyle]) => {
+          const fontSize: FontSize = size as FontSize;
+          if (fontStyle) {
+            this.fontStyles[fontRole][fontSize] = {
+              ...this.fontStyles[fontRole][fontSize],
+              ...fontStyle,
+            };
+          }
+        });
+      });
+  }
+}

package/src/plugins/font/index.ts

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

package/src/plugins/tailwind/index.ts

@@ -0,0 +1,3 @@
+export * from './main';
+export * from './plugins-tailwind';
+export * from './tailwind.plugin';

package/src/plugins/tailwind/main.ts

@@ -0,0 +1,16 @@
+import { PluginsConfig } from 'tailwindcss/types/config';
+import { bootstrapFromConfig } from '../../main';
+import { AppService } from '../../app.service';
+import { TailwindPlugin } from './tailwind.plugin';
+
+export type Theme = {
+  colors: Record<string, string>;
+  fontFamily: { expressive: string[]; neutral: string[] };
+  plugins: Partial<PluginsConfig>;
+};
+
+export const createTheme = (): Theme & { appService: AppService } => {
+  const app = bootstrapFromConfig();
+  const plugin = app.pluginService.getPlugin(TailwindPlugin).getInstance();
+  return { ...plugin.getTheme(), appService: app };
+};

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

@@ -0,0 +1,69 @@
+import plugin from 'tailwindcss/plugin';
+import { CSSRuleObject, PluginAPI } from 'tailwindcss/types/config';
+import { FontRole, FontSize, FontStyle } from '../../font/font.plugin';
+
+export const font = (
+  fontStyles: Record<FontRole, Record<FontSize, FontStyle>>,
+  responsiveBreakPoints: Record<string, number>
+) => {
+  const createUtilities = ({
+    theme,
+  }: Pick<PluginAPI, 'theme'>): CSSRuleObject => {
+    const pixelUnit = 'rem';
+    const newUtilities: any = {};
+
+    const baseTextStyle = (sizeValue: FontStyle) => ({
+      fontSize: sizeValue.fontSize + pixelUnit,
+      fontWeight: sizeValue.fontWeight as unknown as CSSRuleObject,
+      lineHeight: sizeValue.lineHeight + pixelUnit,
+      letterSpacing: sizeValue.letterSpacing
+        ? sizeValue.letterSpacing + pixelUnit
+        : null,
+      fontFamily: theme('fontFamily.' + sizeValue.fontFamily),
+    });
+
+    const responsiveTextStyle = (
+      sizeValue: FontStyle,
+      breakPointName: string,
+      breakPointRatio: number
+    ) => ({
+      [`@media (min-width: ${theme('screens.' + breakPointName, {})})`]: {
+        fontSize: sizeValue.fontSize * breakPointRatio + pixelUnit,
+        lineHeight: sizeValue.lineHeight * breakPointRatio + pixelUnit,
+      },
+    });
+
+    for (const [roleName, roleValue] of Object.entries(fontStyles)) {
+      for (const [sizeName, sizeValue] of Object.entries(roleValue)) {
+        newUtilities['.text-' + roleName + '-' + sizeName] = {
+          ...baseTextStyle(sizeValue),
+          ...Object.entries(responsiveBreakPoints).reduce(
+            (acc, [breakPointName, breakPointRatio]) => {
+              acc = {
+                ...acc,
+                ...responsiveTextStyle(
+                  sizeValue,
+                  breakPointName,
+                  breakPointRatio
+                ),
+              };
+              return acc;
+            },
+            {}
+          ),
+        };
+      }
+    }
+
+    return newUtilities as CSSRuleObject;
+  };
+  return plugin(
+    ({
+      addUtilities,
+      theme,
+    }: Pick<PluginAPI, 'theme'> & Pick<PluginAPI, 'addUtilities'>) => {
+      const newUtilities = createUtilities({ theme });
+      addUtilities(newUtilities);
+    }
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from './state';
+export * from './themer';

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);
+};