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

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

@@ -0,0 +1,137 @@
+import { AppService } from '../../../app.service';
+
+type SubTheme = {
+  name: string;
+  selectors?: string[];
+  mediaQuery?: '@media (prefers-color-scheme: dark)';
+  extend: {
+    colors: Record<string, string>;
+  };
+};
+
+function createSubTheme({
+  name,
+  darkMode,
+  isDarkTheme,
+  colors,
+}: {
+  name: string;
+  isDarkTheme: boolean;
+  darkMode: 'class' | 'media';
+  colors: Record<string, string>;
+}): SubTheme {
+  const theme: SubTheme = {
+    name: isDarkTheme ? name + 'Dark' : name,
+    selectors:
+      isDarkTheme && darkMode === 'class'
+        ? [
+            '.dark-mode .theme-' + name,
+            '.dark-mode.theme-' + name,
+            '[data-theme="dark"] .theme-' + name,
+            '[data-theme="dark"].theme-' + name,
+          ]
+        : [
+            '.theme-' + name,
+            `.theme-${name} .light-mode`,
+            `.theme-${name} [data-theme="light"]`,
+            `.light-mode .theme-${name}`,
+            `.light-mode.theme-${name}`,
+            `[data-theme="light"] .theme-${name}`,
+            `[data-theme="light"].theme-${name}`,
+          ],
+    mediaQuery:
+      isDarkTheme && darkMode === 'media'
+        ? '@media (prefers-color-scheme: dark)'
+        : undefined,
+    extend: {
+      colors: colors,
+    },
+  };
+  return theme;
+}
+
+export const themer = (args: {
+  colors: Record<
+    string,
+    {
+      light: string;
+      dark: string;
+    }
+  >;
+  darkMode: 'class' | 'media';
+  subThemes?: Record<string, string>;
+  appService: AppService;
+}) => {
+  const { themeService, colorService } = args.appService;
+  const options: {
+    defaultTheme: {
+      extend: {
+        colors: Record<string, string>;
+      };
+    };
+    themes: [
+      {
+        name: string;
+        selectors?: ['.dark-mode', '[data-theme="dark"]'];
+        mediaQuery?: '@media (prefers-color-scheme: dark)';
+        extend: {
+          colors: Record<string, string>;
+        };
+      },
+      ...SubTheme[]
+    ];
+  } = {
+    defaultTheme: {
+      extend: {
+        colors: {},
+      },
+    },
+    themes: [
+      {
+        name: 'darkTheme',
+        extend: {
+          colors: {},
+        },
+      },
+    ],
+  };
+
+  Object.entries(args.colors).forEach(([key, value]) => {
+    options.defaultTheme.extend.colors[key] = value.light;
+    options.themes[0].extend.colors[key] = value.dark;
+  });
+  options.themes[0].selectors =
+    args.darkMode === 'class'
+      ? ['.dark-mode', '[data-theme="dark"]']
+      : undefined;
+  options.themes[0].mediaQuery =
+    args.darkMode === 'media'
+      ? '@media (prefers-color-scheme: dark)'
+      : undefined;
+
+  if (args.subThemes) {
+    Object.entries(args.subThemes).forEach(([key, value]) => {
+      themeService.update({ sourceColorHex: value });
+      for (const isDarkTheme of [true, false]) {
+        const colors: Record<string, string> = {};
+        themeService.update({ isDark: isDarkTheme });
+        for (const [key, value] of colorService.getColors().entries()) {
+          const newKey = key
+            .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2')
+            .toLowerCase();
+          colors[newKey] = value.getHex();
+        }
+        options.themes.push(
+          createSubTheme({
+            name: key,
+            isDarkTheme: isDarkTheme,
+            darkMode: args.darkMode,
+            colors: colors,
+          })
+        );
+      }
+    });
+  }
+
+  return require('tailwindcss-themer')(options);
+};

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

@@ -0,0 +1,72 @@
+import { PluginAbstract, PluginImplAbstract } from '../../plugin';
+import { Theme } from './main';
+import { state, themer } from './plugins-tailwind';
+
+import { font } from './plugins-tailwind/font';
+import { FontPlugin } from '../font';
+
+interface TailwindPluginOptions {
+  darkMode?: 'class' | 'media';
+  responsiveBreakPoints?: Record<string, number>;
+  subThemes?: Record<string, string>;
+}
+
+export class TailwindPlugin extends PluginAbstract<
+  TailwindImplPlugin,
+  TailwindPluginOptions
+> {
+  public dependencies = [FontPlugin];
+  public name = 'tailwind';
+  pluginClass = TailwindImplPlugin;
+}
+
+class TailwindImplPlugin extends PluginImplAbstract<TailwindPluginOptions> {
+  onInit() {
+    this.options.darkMode ??= 'class';
+    this.options.responsiveBreakPoints ??= {
+      lg: 1.125,
+    };
+  }
+
+  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)
+      .getInstance()
+      .getFonts();
+    return {
+      colors: {},
+      fontFamily: fontFamily,
+      plugins: [
+        state(Object.keys(colors)),
+        font(fontStyles, this.options.responsiveBreakPoints!),
+        themer({
+          colors,
+          darkMode: this.options.darkMode!,
+          subThemes: this.options.subThemes,
+          appService: this.appService,
+        }),
+      ],
+    };
+  }
+}

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';

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

@@ -1,39 +1,67 @@
-import { Injectable } from '@nestjs/common';
 import { SchemeEntity, SchemeOptions } from '../entities/scheme.entity';
 import {
   argbFromHex,
   Hct,
   TonalPalette,
 } from '@material/material-color-utilities';
-import mergeDeep from 'merge-deep';
 
 export type SchemeServiceOptions = Omit<
   SchemeOptions,
   'palettes' | 'sourceColorArgb'
 > & {
-  sourceColorHex: string;
-  palettes: Record<string, (sourceColorHct: Hct) => TonalPalette>;
+  sourcesColorHex: Record<string, string> & { primary?: string };
+  palettes: Record<
+    string,
+    {
+      sourceColorkey?: string;
+      tonalPalette: (sourceColorHct: Hct) => TonalPalette;
+    }
+  >;
 };
 
-@Injectable()
 export class SchemeService {
   private schemeEntity?: SchemeEntity;
   private options?: SchemeServiceOptions;
 
   createOrUpdate(options: Partial<SchemeServiceOptions>) {
-    this.options = mergeDeep(options, this.options);
+    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>();
 
-    const sourceColorArgb = argbFromHex(this.options.sourceColorHex);
+    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, paletteFunction] of Object.entries(
-      this.options.palettes
-    )) {
-      const palette: TonalPalette = paletteFunction(sourceColorHct);
+    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({

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

@@ -1,10 +1,12 @@
 import { DynamicColor } from '@material/material-color-utilities';
-import { Injectable } from '@nestjs/common';
 import { SchemeService, SchemeServiceOptions } from './scheme.service';
 import { VariantService } from './variant.service';
 import { VariantEntity } from '../entities/variant.entity';
 
-type ThemeOptions = Omit<SchemeServiceOptions, 'palettes'>;
+type ThemeOptions = Omit<
+  SchemeServiceOptions,
+  'palettes' | 'sourcesColorHex'
+> & { sourceColorHex: string };
 
 const colorPaletteKeyColor = DynamicColor.fromPalette({
   name: 'primary_palette_key_color',
@@ -12,12 +14,19 @@ const colorPaletteKeyColor = DynamicColor.fromPalette({
   tone: (s) => s.primaryPalette.keyColor.tone,
 });
 
-@Injectable()
 export class ThemeService {
-  constructor(
-    private schemeService: SchemeService,
-    private variantService: VariantService
-  ) {
+  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})
@@ -41,16 +50,23 @@ export class ThemeService {
   //   return this.theme();
   // }
 
-  create(options: ThemeOptions) {
-    this.schemeService.createOrUpdate(options);
+  create(options: ThemeOptions & { variant: VariantEntity }) {
+    this.schemeService.createOrUpdate({
+      ...options,
+      sourcesColorHex: { primary: options.sourceColorHex },
+    });
+    this.variantService.set(options.variant);
   }
 
-  addVariant(variant: VariantEntity) {
-    this.variantService.set(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);
   }
-
-  update(options: Partial<ThemeOptions>) {
-    this.schemeService.createOrUpdate(options);
+  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

@@ -1,17 +1,52 @@
 import { SchemeService } from './scheme.service';
 import { VariantEntity } from '../entities/variant.entity';
-import { Injectable } from '@nestjs/common';
-import { TonalPalette } from '@material/material-color-utilities';
+import { Hct, TonalPalette } from '@material/material-color-utilities';
 
-@Injectable()
 export class VariantService {
-  constructor(private schemeService: SchemeService) {}
+  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.schemeService.createOrUpdate(variantEntity);
+    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

@@ -1,10 +1,9 @@
-import { Module } from '@nestjs/common';
-import { SchemeService } from './services/scheme.service';
-import { ThemeService } from './services/theme.service';
-import { VariantService } from './services/variant.service';
+import { SchemeService, ThemeService, VariantService } from './services';
+import { asClass } from 'awilix';
+import { Module } from '../app.container';
 
-@Module({
-  providers: [SchemeService, ThemeService, VariantService],
-  exports: [ThemeService, SchemeService],
-})
-export class ThemeModule {}
+export const ThemeModule: Module = {
+  schemeService: asClass(SchemeService).singleton(),
+  variantService: asClass(VariantService).singleton(),
+  themeService: asClass(ThemeService).singleton(),
+};

package/dist/color/color-manager.service.d.ts

@@ -1,15 +0,0 @@
-import { DynamicColor } from '../material-color-utilities/dynamic_color';
-import { SchemeEntity } from '../theme/entities/scheme.entity';
-import { ColorEntity, ColorOptions } from './entities/color.entity';
-import { SchemeService } from '../theme/services/scheme.service';
-export declare const highestSurface: (s: SchemeEntity, colorManagerService: ColorManagerService) => DynamicColor;
-export declare class ColorManagerService {
-    private schemeService;
-    private colorMap;
-    constructor(schemeService: SchemeService);
-    createOrUpdate(key: string, args: Partial<ColorOptions>): ColorEntity;
-    remove(key: string): boolean;
-    get(key: string): ColorEntity;
-    getAll(): ReadonlyMap<string, ColorEntity>;
-    addFromPalette(key: string): void;
-}

package/dist/color/color.service.d.ts

@@ -1,14 +0,0 @@
-import { ColorManagerService } from './color-manager.service';
-import { ColorInterface } from './color.interface';
-import { ColorEntity, ColorOptions } from './entities/color.entity';
-export declare class ColorService implements ColorInterface {
-    private colorManagerService;
-    constructor(colorManagerService: ColorManagerService);
-    getAllColors(): ReadonlyMap<string, ColorEntity>;
-    addBaseColors(): void;
-    addColor(key: string, color: ColorOptions): ColorEntity;
-    addColors(colors: Record<string, ColorOptions>): ColorEntity[];
-    getColor(key: string): ColorEntity;
-    removeColor(key: string): boolean;
-    updateColor(key: string, newColor: Partial<ColorOptions>): ColorEntity;
-}

package/src/color/color.service.ts

@@ -1,58 +0,0 @@
-import { Injectable } from '@nestjs/common';
-import { ColorManagerService } from './color-manager.service';
-import { ColorInterface } from './color.interface';
-import { ColorEntity, ColorOptions } from './entities/color.entity';
-import { defaultColors, DynamicColorKey } from './models/default-color.model';
-
-@Injectable()
-export class ColorService implements ColorInterface {
-  constructor(private colorManagerService: ColorManagerService) {}
-
-  getAllColors() {
-    return this.colorManagerService.getAll();
-  }
-
-  // getColors() {
-  //   const colors: Record<string, string> = {};
-  //
-  //   for (const [key, value] of this.colorManagerService.getAll()) {
-  //     colors[key] = hexFromArgb(value.getArgb(this.schemeService.get()));
-  //   }
-  //
-  //   return colors;
-  // }
-
-  addBaseColors() {
-    this.colorManagerService.addFromPalette('primary');
-    this.colorManagerService.addFromPalette('secondary');
-    this.colorManagerService.addFromPalette('tertiary');
-
-    const colors = defaultColors(this.colorManagerService);
-    Object.keys(colors).map((key) => {
-      const color: Partial<ColorOptions> | undefined =
-        colors[key as DynamicColorKey];
-      if (!color) return;
-      return this.colorManagerService.createOrUpdate(key, color);
-    });
-  }
-
-  addColor(key: string, color: ColorOptions): ColorEntity {
-    return this.colorManagerService.createOrUpdate(key, color);
-  }
-
-  addColors(colors: Record<string, ColorOptions>): ColorEntity[] {
-    return Object.keys(colors).map((key) => this.addColor(key, colors[key]));
-  }
-
-  getColor(key: string): ColorEntity {
-    return this.colorManagerService.get(key);
-  }
-
-  removeColor(key: string): boolean {
-    return this.colorManagerService.remove(key);
-  }
-
-  updateColor(key: string, newColor: Partial<ColorOptions>): ColorEntity {
-    return this.colorManagerService.createOrUpdate(key, newColor);
-  }
-}