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

package/dist/theme.esm.js

@@ -1865,7 +1865,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: {
@@ -1879,14 +1897,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);
 };
 
@@ -1988,7 +2035,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;