@udixio/theme 1.0.0-beta.2 → 1.0.0-beta.20

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,14 @@
-import { NestFactory } from '@nestjs/core';
-import { AppModule } from './app.module';
+import AppContainer from './app.container';
 import { AppService } from './app.service';
+import { 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(path?: string): AppService {
+  const configService = AppContainer.resolve<ConfigService>('configService');
+  if (path) configService.configPath = path;
+  configService.loadConfig();
+  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 './plugin.abstract';
+export * from './plugin.module';
+export * from './plugin.service';

package/src/plugin/plugin.abstract.ts

@@ -0,0 +1,9 @@
+import { AppService } from '../app.service';
+import { PluginConstructor } from './plugin.service';
+
+export abstract class PluginAbstract {
+  static dependencies: PluginConstructor[] = [];
+
+  protected abstract appService: AppService;
+  protected abstract options: object;
+}

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,48 @@
+import { PluginAbstract } from './plugin.abstract';
+import { AppService } from '../app.service';
+
+export type PluginConstructor = (new (
+  appService: AppService,
+  options: any
+) => PluginAbstract) & { dependencies: PluginConstructor[] };
+
+export class PluginService {
+  private pluginInstances = new Map<string, PluginAbstract>();
+  private pluginConstructors = new Map<string, [PluginConstructor, object]>();
+
+  public addPlugin(plugin: PluginConstructor, config: object) {
+    this.pluginConstructors.set(plugin.name, [plugin, config]);
+  }
+
+  public loadPlugins(appService: AppService) {
+    const plugins = new Map(this.pluginConstructors);
+
+    let size = 0;
+    do {
+      size = plugins.size;
+      plugins.forEach(([plugin, option], key) => {
+        const deps = plugin.dependencies.filter(
+          (dep) => !this.pluginInstances.has(dep.name)
+        );
+        if (deps.length === 0) {
+          this.pluginInstances.set(plugin.name, new plugin(appService, option));
+          plugins.delete(key);
+        }
+      });
+    } while (plugins.size != 0 && plugins.size < size);
+
+    if (plugins.size > 0)
+      console.log(
+        "Some plugins couldn't be loaded due to missing dependencies: ",
+        Array.from(plugins.keys())
+      );
+  }
+
+  public getPlugin<T extends PluginAbstract>(
+    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/font/font.plugin.ts

@@ -0,0 +1,172 @@
+import { PluginAbstract } from '../../plugin';
+import { AppService } from '../../app.service';
+
+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 {
+  private readonly fontFamily: { expressive: string[]; neutral: string[] };
+  private readonly fontStyles: Record<FontRole, Record<FontSize, FontStyle>>;
+
+  constructor(
+    protected appService: AppService,
+    protected options: FontPluginOptions
+  ) {
+    super();
+    this.fontFamily = {
+      expressive: options?.fontFamily?.expressive ?? ['Roboto', 'sans-serif'],
+      neutral: 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 (options && options.fontStyles)
+      Object.entries(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,
+            };
+          }
+        });
+      });
+  }
+  static config(options: FontPluginOptions): FontPluginOptions {
+    return options;
+  }
+  getFonts() {
+    return {
+      fontStyles: this.fontStyles,
+      fontFamily: this.fontFamily,
+    };
+  }
+}

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,19 @@
+import { PluginsConfig } from 'tailwindcss/types/config';
+import { bootstrapFromConfig } from '../../main';
+import { TailwindPlugin } from './tailwind.plugin';
+import { AppService } from '../../app.service';
+
+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);
+  if (!plugin) {
+    throw new Error('Tailwind plugin not found');
+  }
+  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);
+};

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

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

@@ -0,0 +1,64 @@
+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';
+import { FontPlugin } from '../font/font.plugin';
+import { font } from './plugins-tailwind/font';
+
+interface TailwindPluginOptions {
+  darkMode?: 'class' | 'media';
+  responsiveBreakPoints?: Record<string, number>;
+}
+
+export class TailwindPlugin extends PluginAbstract {
+  static dependencies = [FontPlugin];
+  constructor(
+    protected appService: AppService,
+    protected options: TailwindPluginOptions
+  ) {
+    options.darkMode ??= 'class';
+    options.responsiveBreakPoints ??= {
+      lg: 1.125,
+    };
+    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();
+      }
+    }
+
+    const { fontStyles, fontFamily } = this.appService.pluginService
+      .getPlugin(FontPlugin)
+      .getFonts();
+    return {
+      colors: {},
+      fontFamily: fontFamily,
+      plugins: [
+        state(Object.keys(colors)),
+        themer(colors, this.options.darkMode!),
+        font(fontStyles, this.options.responsiveBreakPoints!),
+      ],
+    };
+  }
+}

package/src/theme/entities/index.ts

@@ -0,0 +1,2 @@
+export * from './scheme.entity';
+export * from './variant.entity';

package/src/theme/entities/variant.entity.ts

@@ -33,6 +33,7 @@ export const getRotatedHue = (
 
 export class VariantEntity {
   constructor(
-    public palettes: Record<string, (sourceColorHct: Hct) => TonalPalette> = {}
+    public palettes: Record<string, (sourceColorHct: Hct) => TonalPalette> = {},
+    public customPalettes?: (colorHct: Hct) => TonalPalette
   ) {}
 }

package/src/theme/index.ts

@@ -0,0 +1,4 @@
+export * from './entities';
+export * from './models';
+export * from './services';
+export * from './theme.module';

package/src/theme/models/index.ts

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

package/src/theme/models/variant.model.ts

@@ -21,6 +21,8 @@ export class VariantModel {
       neutralVariant: (sourceColorHct) =>
         TonalPalette.fromHueAndChroma(sourceColorHct.hue, 8.0),
     },
+    customPalettes: (colorHct) =>
+      TonalPalette.fromHueAndChroma(colorHct.hue, 16),
   };
   static vibrant: VariantEntity = {
     palettes: {
@@ -41,6 +43,11 @@ export class VariantModel {
       neutralVariant: (sourceColorHct) =>
         TonalPalette.fromHueAndChroma(sourceColorHct.hue, 8.0),
     },
+    customPalettes: (colorHct) =>
+      TonalPalette.fromHueAndChroma(
+        getRotatedHue(colorHct, this.hues, this.secondaryRotations),
+        24.0
+      ),
   };
 
   private static readonly hues = [

package/src/theme/services/index.ts

@@ -0,0 +1,3 @@
+export * from './scheme.service';
+export * from './theme.service';
+export * from './variant.service';