@udixio/theme 1.0.0-beta.22 → 1.0.0-beta.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/theme",
-  "version": "1.0.0-beta.22",
+  "version": "1.0.0-beta.24",
   "license": "MIT",
   "author": "vigreux-joël",
   "exports": {

package/src/config/config.interface.ts

@@ -1,10 +1,10 @@
-import { VariantEntity } from '../theme';
 import { AddColorsOptions } from '../color';
-import { PluginConstructor } from '../plugin/plugin.service';
+import { VariantEntity } from '../theme';
+import { PluginConstructor } from '../plugin';
 
 export interface ConfigInterface {
   sourceColor: string;
-  contrastLevel?: 0;
+  contrastLevel?: number;
   isDark?: boolean;
   variant?: VariantEntity;
   colors?: AddColorsOptions | AddColorsOptions[];

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

@@ -1,5 +1,5 @@
-import { PluginAbstract } from '../../plugin';
 import { AppService } from '../../app.service';
+import { PluginAbstract } from '../../plugin';
 
 export enum FontFamily {
   Expressive = 'expressive',

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

@@ -1,13 +1,57 @@
-export const themer = (
+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],
+    mediaQuery: '@media (prefers-color-scheme: dark)',
+    extend: {
+      colors: colors,
+    },
+  };
+  return theme;
+}
+
+export const themer = (args: {
   colors: Record<
     string,
     {
       light: string;
       dark: string;
     }
-  >,
-  darkMode: 'class' | 'media'
-) => {
+  >;
+  darkMode: 'class' | 'media';
+  subThemes?: Record<string, string>;
+  appService: AppService;
+}) => {
+  const { themeService, colorService } = args.appService;
   const options: {
     defaultTheme: {
       extend: {
@@ -16,13 +60,14 @@ export const themer = (
     };
     themes: [
       {
-        name: 'darkTheme';
+        name: string;
         selectors?: ['.dark-mode', '[data-theme="dark"]'];
         mediaQuery?: '@media (prefers-color-scheme: dark)';
         extend: {
           colors: Record<string, string>;
         };
-      }
+      },
+      ...SubTheme[]
     ];
   } = {
     defaultTheme: {
@@ -40,14 +85,42 @@ export const themer = (
     ],
   };
 
-  Object.entries(colors).forEach(([key, value]) => {
+  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 =
-    darkMode === 'class' ? ['.dark-mode', '[data-theme="dark"]'] : undefined;
+    args.darkMode === 'class'
+      ? ['.dark-mode', '[data-theme="dark"]']
+      : undefined;
   options.themes[0].mediaQuery =
-    darkMode === 'media' ? '@media (prefers-color-scheme: dark)' : undefined;
+    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

@@ -1,14 +1,14 @@
-import { PluginAbstract } from '../../plugin/plugin.abstract';
+import { PluginAbstract } from '../../plugin';
 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 { state, themer } from './plugins-tailwind';
+import { FontPlugin } from '../font';
 import { font } from './plugins-tailwind/font';
 
 interface TailwindPluginOptions {
   darkMode?: 'class' | 'media';
   responsiveBreakPoints?: Record<string, number>;
+  subThemes?: Record<string, string>;
 }
 
 export class TailwindPlugin extends PluginAbstract {
@@ -56,8 +56,13 @@ export class TailwindPlugin extends PluginAbstract {
       fontFamily: fontFamily,
       plugins: [
         state(Object.keys(colors)),
-        themer(colors, this.options.darkMode!),
         font(fontStyles, this.options.responsiveBreakPoints!),
+        themer({
+          colors,
+          darkMode: this.options.darkMode!,
+          subThemes: this.options.subThemes,
+          appService: this.appService,
+        }),
       ],
     };
   }