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

package/dist/config/config.interface.d.ts

@@ -1,9 +1,9 @@
-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/dist/plugins/font/font.plugin.d.ts

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

package/dist/plugins/tailwind/plugins-tailwind/themer.d.ts

@@ -1,4 +1,10 @@
-export declare const themer: (colors: Record<string, {
-    light: string;
-    dark: string;
-}>, darkMode: "class" | "media") => any;
+import { AppService } from '../../../app.service';
+export declare const themer: (args: {
+    colors: Record<string, {
+        light: string;
+        dark: string;
+    }>;
+    darkMode: "class" | "media";
+    subThemes?: Record<string, string>;
+    appService: AppService;
+}) => any;

package/dist/plugins/tailwind/tailwind.plugin.d.ts

@@ -1,10 +1,11 @@
-import { PluginAbstract } from '../../plugin/plugin.abstract';
+import { PluginAbstract } from '../../plugin';
 import { AppService } from '../../app.service';
 import { Theme } from './main';
-import { FontPlugin } from '../font/font.plugin';
+import { FontPlugin } from '../font';
 interface TailwindPluginOptions {
     darkMode?: 'class' | 'media';
     responsiveBreakPoints?: Record<string, number>;
+    subThemes?: Record<string, string>;
 }
 export declare class TailwindPlugin extends PluginAbstract {
     protected appService: AppService;

package/dist/theme.cjs.development.js

@@ -1869,7 +1869,25 @@ var addAllNewComponents = function addAllNewComponents(_ref, _ref2, colorKeys) {
   addComponents(newComponents);
 };
 
-var themer = function themer(colors, darkMode) {
+function createSubTheme(_ref) {
+  var name = _ref.name,
+    darkMode = _ref.darkMode,
+    isDarkTheme = _ref.isDarkTheme,
+    colors = _ref.colors;
+  var theme = {
+    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;
+}
+var themer = function themer(args) {
+  var _args$appService = args.appService,
+    themeService = _args$appService.themeService,
+    colorService = _args$appService.colorService;
   var options = {
     defaultTheme: {
       extend: {
@@ -1883,14 +1901,43 @@ var themer = function themer(colors, darkMode) {
       }
     }]
   };
-  Object.entries(colors).forEach(function (_ref) {
-    var key = _ref[0],
-      value = _ref[1];
+  Object.entries(args.colors).forEach(function (_ref2) {
+    var key = _ref2[0],
+      value = _ref2[1];
     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;
+  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(function (_ref3) {
+      var key = _ref3[0],
+        value = _ref3[1];
+      themeService.update({
+        sourceColorHex: value
+      });
+      for (var _i = 0, _arr = [true, false]; _i < _arr.length; _i++) {
+        var isDarkTheme = _arr[_i];
+        var colors = {};
+        themeService.update({
+          isDark: isDarkTheme
+        });
+        for (var _iterator = _createForOfIteratorHelperLoose(colorService.getColors().entries()), _step; !(_step = _iterator()).done;) {
+          var _step$value = _step.value,
+            _key = _step$value[0],
+            _value = _step$value[1];
+          var 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);
 };
 
@@ -1992,7 +2039,12 @@ var TailwindPlugin = /*#__PURE__*/function (_PluginAbstract) {
     return {
       colors: {},
       fontFamily: fontFamily,
-      plugins: [state(Object.keys(colors)), themer(colors, this.options.darkMode), font(fontStyles, this.options.responsiveBreakPoints)]
+      plugins: [state(Object.keys(colors)), font(fontStyles, this.options.responsiveBreakPoints), themer({
+        colors: colors,
+        darkMode: this.options.darkMode,
+        subThemes: this.options.subThemes,
+        appService: this.appService
+      })]
     };
   };
   return TailwindPlugin;