@udixio/theme 1.0.0-beta.10

package/src/plugin/plugin.abstract.ts

@@ -0,0 +1,8 @@
+import { AppService } from '../app.service';
+
+export abstract class PluginAbstract {
+  static dependencies: (new () => PluginAbstract)[];
+
+  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,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, [PluginConstructor, object]>();
+
+  public addPlugin(plugin: PluginConstructor, config: object) {
+    this.pluginConstructors.set(plugin.name, [plugin, config]);
+  }
+
+  public loadPlugins(appService: AppService) {
+    this.pluginConstructors.forEach(([plugin, option]) => {
+      this.pluginInstances.set(plugin.name, new plugin(appService, option));
+    });
+  }
+
+  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/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/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,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/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/theme/entities/index.ts

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

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

@@ -0,0 +1,44 @@
+import { Hct, TonalPalette } from '@material/material-color-utilities';
+
+export interface SchemeOptions {
+  sourceColorArgb: number;
+  contrastLevel: number;
+  isDark: boolean;
+  palettes: Map<string, TonalPalette>;
+}
+
+export class SchemeEntity {
+  constructor(private options: SchemeOptions) {}
+
+  get contrastLevel() {
+    if (!this.options) {
+      throw new Error('Scheme options is not set');
+    }
+    return this.options.contrastLevel;
+  }
+
+  get isDark() {
+    if (!this.options) {
+      throw new Error('Scheme options is not set');
+    }
+    return this.options.isDark;
+  }
+
+  get sourceColorHct() {
+    if (!this.options) {
+      throw new Error('Scheme options is not set');
+    }
+    return Hct.fromInt(this.options.sourceColorArgb);
+  }
+
+  getPalette(key: string): TonalPalette {
+    if (!this.options) {
+      throw new Error('Scheme options is not set');
+    }
+    const palette = this.options.palettes.get(key);
+    if (!palette) {
+      throw new Error(`Palette ${key} not found`);
+    }
+    return palette;
+  }
+}

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

@@ -0,0 +1,39 @@
+import {
+  Hct,
+  sanitizeDegreesDouble,
+  TonalPalette,
+} from '@material/material-color-utilities';
+
+export const getRotatedHue = (
+  sourceColor: Hct,
+  hues: number[],
+  rotations: number[]
+): number => {
+  const sourceHue = sourceColor.hue;
+  if (hues.length !== rotations.length) {
+    throw new Error(
+      `mismatch between hue length ${hues.length} & rotations ${rotations.length}`
+    );
+  }
+  if (rotations.length === 1) {
+    return sanitizeDegreesDouble(sourceColor.hue + rotations[0]);
+  }
+  const size = hues.length;
+  for (let i = 0; i <= size - 2; i++) {
+    const thisHue = hues[i];
+    const nextHue = hues[i + 1];
+    if (thisHue < sourceHue && sourceHue < nextHue) {
+      return sanitizeDegreesDouble(sourceHue + rotations[i]);
+    }
+  }
+  // If this statement executes, something is wrong, there should have been a
+  // rotation found using the arrays.
+  return sourceHue;
+};
+
+export class VariantEntity {
+  constructor(
+    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

@@ -0,0 +1,63 @@
+import {
+  sanitizeDegreesDouble,
+  TonalPalette,
+} from '@material/material-color-utilities';
+import { getRotatedHue, VariantEntity } from '../entities/variant.entity';
+
+export class VariantModel {
+  static tonalSpot: VariantEntity = {
+    palettes: {
+      primary: (sourceColorHct) =>
+        TonalPalette.fromHueAndChroma(sourceColorHct.hue, 36.0),
+      secondary: (sourceColorHct) =>
+        TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16.0),
+      tertiary: (sourceColorHct) =>
+        TonalPalette.fromHueAndChroma(
+          sanitizeDegreesDouble(sourceColorHct.hue + 60.0),
+          24.0
+        ),
+      neutral: (sourceColorHct) =>
+        TonalPalette.fromHueAndChroma(sourceColorHct.hue, 6.0),
+      neutralVariant: (sourceColorHct) =>
+        TonalPalette.fromHueAndChroma(sourceColorHct.hue, 8.0),
+    },
+    customPalettes: (colorHct) =>
+      TonalPalette.fromHueAndChroma(colorHct.hue, 16),
+  };
+  static vibrant: VariantEntity = {
+    palettes: {
+      primary: (sourceColorHct) =>
+        TonalPalette.fromHueAndChroma(sourceColorHct.hue, 200.0),
+      secondary: (sourceColorHct) =>
+        TonalPalette.fromHueAndChroma(
+          getRotatedHue(sourceColorHct, this.hues, this.secondaryRotations),
+          24.0
+        ),
+      tertiary: (sourceColorHct) =>
+        TonalPalette.fromHueAndChroma(
+          getRotatedHue(sourceColorHct, this.hues, this.tertiaryRotations),
+          32.0
+        ),
+      neutral: (sourceColorHct) =>
+        TonalPalette.fromHueAndChroma(sourceColorHct.hue, 6.0),
+      neutralVariant: (sourceColorHct) =>
+        TonalPalette.fromHueAndChroma(sourceColorHct.hue, 8.0),
+    },
+    customPalettes: (colorHct) =>
+      TonalPalette.fromHueAndChroma(
+        getRotatedHue(colorHct, this.hues, this.secondaryRotations),
+        24.0
+      ),
+  };
+
+  private static readonly hues = [
+    0.0, 41.0, 61.0, 101.0, 131.0, 181.0, 251.0, 301.0, 360.0,
+  ];
+
+  private static readonly secondaryRotations = [
+    18.0, 15.0, 10.0, 12.0, 15.0, 18.0, 15.0, 12.0, 12.0,
+  ];
+  private static readonly tertiaryRotations = [
+    35.0, 30.0, 20.0, 25.0, 30.0, 35.0, 30.0, 25.0, 25.0,
+  ];
+}

package/src/theme/services/index.ts

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

package/src/theme/services/scheme.service.ts

@@ -0,0 +1,80 @@
+import { SchemeEntity, SchemeOptions } from '../entities/scheme.entity';
+import {
+  argbFromHex,
+  Hct,
+  TonalPalette,
+} from '@material/material-color-utilities';
+
+export type SchemeServiceOptions = Omit<
+  SchemeOptions,
+  'palettes' | 'sourceColorArgb'
+> & {
+  sourcesColorHex: Record<string, string> & { primary?: string };
+  palettes: Record<
+    string,
+    {
+      sourceColorkey?: string;
+      tonalPalette: (sourceColorHct: Hct) => TonalPalette;
+    }
+  >;
+};
+
+export class SchemeService {
+  private schemeEntity?: SchemeEntity;
+  private options?: SchemeServiceOptions;
+
+  createOrUpdate(options: Partial<SchemeServiceOptions>) {
+    this.options = {
+      ...this.options,
+      ...options,
+      sourcesColorHex: {
+        ...this.options?.sourcesColorHex,
+        ...options.sourcesColorHex,
+      },
+      palettes: {
+        ...this.options?.palettes,
+        ...options.palettes,
+      },
+    } as SchemeServiceOptions;
+    const palettes = new Map<string, TonalPalette>();
+
+    if (!this.options.sourcesColorHex.primary) {
+      throw new Error('Primary source color is not set');
+    }
+
+    const sourceColorArgb = argbFromHex(this.options.sourcesColorHex.primary);
+    const sourceColorHct: Hct = Hct.fromInt(sourceColorArgb);
+
+    if (!this.options.palettes) {
+      return;
+    }
+    for (const [
+      key,
+      { sourceColorkey, tonalPalette: paletteFunction },
+    ] of Object.entries(this.options.palettes)) {
+      let palette: TonalPalette;
+      if (!sourceColorkey) {
+        palette = paletteFunction(sourceColorHct);
+      } else {
+        const sourceColorArgb = argbFromHex(
+          this.options.sourcesColorHex[sourceColorkey]
+        );
+        const sourceColorHct: Hct = Hct.fromInt(sourceColorArgb);
+        palette = paletteFunction(sourceColorHct);
+      }
+      palettes.set(key, palette);
+    }
+    this.schemeEntity = new SchemeEntity({
+      ...this.options,
+      palettes: palettes,
+      sourceColorArgb: sourceColorArgb,
+    });
+  }
+
+  get(): SchemeEntity {
+    if (!this.schemeEntity) {
+      throw new Error('Scheme is not created');
+    }
+    return this.schemeEntity;
+  }
+}

package/src/theme/services/theme.service.ts

@@ -0,0 +1,74 @@
+import { DynamicColor } from '@material/material-color-utilities';
+import { SchemeService, SchemeServiceOptions } from './scheme.service';
+import { VariantService } from './variant.service';
+import { VariantEntity } from '../entities/variant.entity';
+
+type ThemeOptions = Omit<
+  SchemeServiceOptions,
+  'palettes' | 'sourcesColorHex'
+> & { sourceColorHex: string };
+
+const colorPaletteKeyColor = DynamicColor.fromPalette({
+  name: 'primary_palette_key_color',
+  palette: (s) => s.primaryPalette,
+  tone: (s) => s.primaryPalette.keyColor.tone,
+});
+
+export class ThemeService {
+  private readonly schemeService: SchemeService;
+  private readonly variantService: VariantService;
+  constructor({
+    schemeService,
+    variantService,
+  }: {
+    schemeService: SchemeService;
+    variantService: VariantService;
+  }) {
+    this.schemeService = schemeService;
+    this.variantService = variantService;
+
+    // this.addPalette({key: "primary", addDefaultColors: true})
+    // this.addPalette({key: "secondary", addDefaultColors: true})
+    // this.addPalette({key: "tertiary", addDefaultColors: true})
+    // this.addPalette({key: "error", palette: TonalPalette.fromHueAndChroma(25.0, 84.0)})
+    // this.addPalette({key: "neutral"})
+    // this.addPalette({key: "neutralVariant"})
+  }
+  // addPalette({key, palette, addDefaultColors}: {key: string; palette: TonalPalette; addDefaultColors: boolean}) {
+  //   this.themeOptions.palettes.set(key, palette);
+  //   if (addDefaultColors){
+  //     this.colorService.addPalette(key)
+  //   }
+  // }
+
+  // create(args: ThemeOptions): SchemeService {
+  //   return new SchemeService(args, this.colorService)
+  // }
+  //
+  // update(options: Partial<ThemeOptions>): SchemeService {
+  //   Object.assign(this.themeOptions, options);
+  //   return this.theme();
+  // }
+
+  create(options: ThemeOptions & { variant: VariantEntity }) {
+    this.schemeService.createOrUpdate({
+      ...options,
+      sourcesColorHex: { primary: options.sourceColorHex },
+    });
+    this.variantService.set(options.variant);
+  }
+
+  update(options: Partial<ThemeOptions> & { variant?: VariantEntity }) {
+    const themeOptions: Partial<SchemeServiceOptions> = { ...options };
+    if (options.sourceColorHex)
+      themeOptions.sourcesColorHex = { primary: options.sourceColorHex };
+    this.schemeService.createOrUpdate(themeOptions);
+    if (options.variant) this.variantService.set(options.variant);
+  }
+  addCustomPalette(key: string, colorHex: string) {
+    this.variantService.addCustomPalette(key, colorHex);
+  }
+  // theme(): SchemeService {
+  //   return new SchemeService(this.themeOptions, this.colorService)
+  // }
+}

package/src/theme/services/variant.service.ts

@@ -0,0 +1,52 @@
+import { SchemeService } from './scheme.service';
+import { VariantEntity } from '../entities/variant.entity';
+import { Hct, TonalPalette } from '@material/material-color-utilities';
+
+export class VariantService {
+  public customPalettes: Record<string, string> = {};
+  private variantEntity?: VariantEntity;
+
+  private readonly schemeService: SchemeService;
+  constructor({ schemeService }: { schemeService: SchemeService }) {
+    this.schemeService = schemeService;
+  }
+
+  addCustomPalette(key: string, colorHex: string) {
+    this.customPalettes[key] = colorHex;
+    this.update();
+  }
+
+  set(variantEntity: VariantEntity) {
+    this.variantEntity = variantEntity;
+    if (!variantEntity.palettes.error) {
+      variantEntity.palettes.error = () =>
+        TonalPalette.fromHueAndChroma(25.0, 84.0);
+    }
+    this.update();
+  }
+  private update() {
+    if (!this.variantEntity) return;
+    const palettes: Record<
+      string,
+      {
+        sourceColorkey?: string;
+        tonalPalette: (sourceColorHct: Hct) => TonalPalette;
+      }
+    > = {};
+    Object.keys(this.variantEntity.palettes).forEach((key) => {
+      palettes[key] = { tonalPalette: this.variantEntity!.palettes[key] };
+    });
+    if (this.variantEntity.customPalettes) {
+      Object.keys(this.customPalettes).forEach((key) => {
+        palettes[key] = {
+          sourceColorkey: key,
+          tonalPalette: this.variantEntity!.customPalettes!,
+        };
+      });
+    }
+    this.schemeService.createOrUpdate({
+      sourcesColorHex: this.customPalettes,
+      palettes: palettes,
+    });
+  }
+}

package/src/theme/theme.module.ts

@@ -0,0 +1,9 @@
+import { SchemeService, ThemeService, VariantService } from './services';
+import { asClass } from 'awilix';
+import { Module } from '../app.container';
+
+export const ThemeModule: Module = {
+  schemeService: asClass(SchemeService).singleton(),
+  variantService: asClass(VariantService).singleton(),
+  themeService: asClass(ThemeService).singleton(),
+};