@udixio/theme 1.0.0-beta.17 → 1.0.0-beta.19

package/dist/index.d.ts

@@ -7,5 +7,6 @@ export * from './config';
 export * from './main';
 export * from './material-color-utilities';
 export * from './plugin';
+export * from './plugins/font';
 export * from './plugins/tailwind';
 export * from './theme';

package/dist/plugins/font/index.d.ts

@@ -0,0 +1 @@
+export * from './font.plugin';

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

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

package/dist/theme.cjs.development.js

@@ -1650,95 +1650,11 @@ function bootstrapFromConfig(path) {
 var PluginAbstract = function PluginAbstract() {};
 PluginAbstract.dependencies = [];
 
-var state = function state(colorkeys) {
-  return plugin(function (pluginArgs) {
-    addAllNewComponents(pluginArgs, {
-      statePrefix: 'state',
-      disabledStyles: {
-        textOpacity: 0.38,
-        backgroundOpacity: 0.12
-      },
-      transition: {
-        duration: 150
-      }
-    }, colorkeys);
-  }, {});
-};
-var addAllNewComponents = function addAllNewComponents(_ref, _ref2, colorKeys) {
-  var addComponents = _ref.addComponents;
-  var statePrefix = _ref2.statePrefix,
-    disabledStyles = _ref2.disabledStyles,
-    transition = _ref2.transition;
-  var newComponents = {};
-  for (var _i = 0, _arr = [false, true]; _i < _arr.length; _i++) {
-    var isGroup = _arr[_i];
-    var group = isGroup ? 'group-' : '';
-    for (var _iterator = _createForOfIteratorHelperLoose(colorKeys), _step; !(_step = _iterator()).done;) {
-      var _newComponents$classN;
-      var colorName = _step.value;
-      var className = "." + group + statePrefix + "-" + colorName;
-      newComponents[className] = (_newComponents$classN = {}, _newComponents$classN["@apply " + group + "hover:bg-" + colorName + "/[0.08]"] = {}, _newComponents$classN["@apply " + group + "active:bg-" + colorName + "/[0.12]"] = {}, _newComponents$classN["@apply " + group + "focus-visible:bg-" + colorName + "/[0.12]"] = {}, _newComponents$classN);
-      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 (var _iterator2 = _createForOfIteratorHelperLoose(colorKeys), _step2; !(_step2 = _iterator2()).done;) {
-    var _colorName = _step2.value;
-    for (var _i2 = 0, _arr2 = ['hover', 'active', 'focus', 'disabled']; _i2 < _arr2.length; _i2++) {
-      var stateName = _arr2[_i2];
-      var _className = "." + stateName + "-" + statePrefix + "-" + _colorName;
-      if (stateName === 'active' || stateName === 'focus') {
-        var _newComponents$_class;
-        newComponents[_className] = (_newComponents$_class = {}, _newComponents$_class["@apply bg-" + _colorName + "/[0.12]"] = {}, _newComponents$_class);
-      } else if (stateName === 'hover') {
-        var _newComponents$_class2;
-        newComponents[_className] = (_newComponents$_class2 = {}, _newComponents$_class2["@apply bg-" + _colorName + "/[0.08]"] = {}, _newComponents$_class2);
-      } else if (stateName === 'disabled') {
-        var _newComponents$_class3, _newComponents$_class4;
-        newComponents[_className] = (_newComponents$_class3 = {}, _newComponents$_class3["@apply text-on-surface/[" + disabledStyles.textOpacity + "]"] = {}, _newComponents$_class3);
-        newComponents[_className] = (_newComponents$_class4 = {}, _newComponents$_class4["@apply bg-on-surface/[" + disabledStyles.backgroundOpacity + "]"] = {}, _newComponents$_class4);
-      }
-    }
-  }
-  addComponents(newComponents);
-};
-
-var themer = function themer(colors, darkMode) {
-  var options = {
-    defaultTheme: {
-      extend: {
-        colors: {}
-      }
-    },
-    themes: [{
-      name: 'darkTheme',
-      extend: {
-        colors: {}
-      }
-    }]
-  };
-  Object.entries(colors).forEach(function (_ref) {
-    var key = _ref[0],
-      value = _ref[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;
-  return require('tailwindcss-themer')(options);
-};
-
-var FontFamily;
+exports.FontFamily = void 0;
 (function (FontFamily) {
   FontFamily["Expressive"] = "expressive";
   FontFamily["Neutral"] = "neutral";
-})(FontFamily || (FontFamily = {}));
+})(exports.FontFamily || (exports.FontFamily = {}));
 var FontPlugin = /*#__PURE__*/function (_PluginAbstract) {
   function FontPlugin(appService, options) {
     var _options$fontFamily$e, _options$fontFamily, _options$fontFamily$n, _options$fontFamily2;
@@ -1761,19 +1677,19 @@ var FontPlugin = /*#__PURE__*/function (_PluginAbstract) {
           fontSize: 3.5625,
           lineHeight: 4,
           letterSpacing: -0.015625,
-          fontFamily: FontFamily.Expressive
+          fontFamily: exports.FontFamily.Expressive
         },
         medium: {
           fontWeight: 400,
           fontSize: 2.8125,
           lineHeight: 3.25,
-          fontFamily: FontFamily.Expressive
+          fontFamily: exports.FontFamily.Expressive
         },
         small: {
           fontWeight: 400,
           fontSize: 2.25,
           lineHeight: 2.75,
-          fontFamily: FontFamily.Expressive
+          fontFamily: exports.FontFamily.Expressive
         }
       },
       headline: {
@@ -1781,19 +1697,19 @@ var FontPlugin = /*#__PURE__*/function (_PluginAbstract) {
           fontWeight: 400,
           fontSize: 2,
           lineHeight: 2.5,
-          fontFamily: FontFamily.Expressive
+          fontFamily: exports.FontFamily.Expressive
         },
         medium: {
           fontWeight: 400,
           fontSize: 1.75,
           lineHeight: 2.25,
-          fontFamily: FontFamily.Expressive
+          fontFamily: exports.FontFamily.Expressive
         },
         small: {
           fontWeight: 400,
           fontSize: 1.5,
           lineHeight: 2,
-          fontFamily: FontFamily.Expressive
+          fontFamily: exports.FontFamily.Expressive
         }
       },
       title: {
@@ -1801,20 +1717,20 @@ var FontPlugin = /*#__PURE__*/function (_PluginAbstract) {
           fontWeight: 400,
           fontSize: 1.375,
           lineHeight: 1.75,
-          fontFamily: FontFamily.Neutral
+          fontFamily: exports.FontFamily.Neutral
         },
         medium: {
           fontWeight: 500,
           fontSize: 1,
           lineHeight: 1.5,
-          fontFamily: FontFamily.Neutral,
+          fontFamily: exports.FontFamily.Neutral,
           letterSpacing: 0.009375
         },
         small: {
           fontWeight: 500,
           fontSize: 0.875,
           lineHeight: 1.25,
-          fontFamily: FontFamily.Neutral,
+          fontFamily: exports.FontFamily.Neutral,
           letterSpacing: 0.00625
         }
       },
@@ -1823,21 +1739,21 @@ var FontPlugin = /*#__PURE__*/function (_PluginAbstract) {
           fontWeight: 500,
           fontSize: 0.875,
           lineHeight: 1.25,
-          fontFamily: FontFamily.Neutral,
+          fontFamily: exports.FontFamily.Neutral,
           letterSpacing: 0.00625
         },
         medium: {
           fontWeight: 500,
           fontSize: 0.75,
           lineHeight: 1,
-          fontFamily: FontFamily.Neutral,
+          fontFamily: exports.FontFamily.Neutral,
           letterSpacing: 0.03125
         },
         small: {
           fontWeight: 500,
           fontSize: 0.6875,
           lineHeight: 1,
-          fontFamily: FontFamily.Neutral,
+          fontFamily: exports.FontFamily.Neutral,
           letterSpacing: 0.03125
         }
       },
@@ -1846,21 +1762,21 @@ var FontPlugin = /*#__PURE__*/function (_PluginAbstract) {
           fontWeight: 400,
           fontSize: 1,
           lineHeight: 1.5625,
-          fontFamily: FontFamily.Neutral,
+          fontFamily: exports.FontFamily.Neutral,
           letterSpacing: 0.03125
         },
         medium: {
           fontWeight: 400,
           fontSize: 0.875,
           lineHeight: 1.25,
-          fontFamily: FontFamily.Neutral,
+          fontFamily: exports.FontFamily.Neutral,
           letterSpacing: 0.015625
         },
         small: {
           fontWeight: 400,
           fontSize: 0.75,
           lineHeight: 1,
-          fontFamily: FontFamily.Neutral,
+          fontFamily: exports.FontFamily.Neutral,
           letterSpacing: 0.025
         }
       }
@@ -1894,6 +1810,90 @@ var FontPlugin = /*#__PURE__*/function (_PluginAbstract) {
   return FontPlugin;
 }(PluginAbstract);
 
+var state = function state(colorkeys) {
+  return plugin(function (pluginArgs) {
+    addAllNewComponents(pluginArgs, {
+      statePrefix: 'state',
+      disabledStyles: {
+        textOpacity: 0.38,
+        backgroundOpacity: 0.12
+      },
+      transition: {
+        duration: 150
+      }
+    }, colorkeys);
+  }, {});
+};
+var addAllNewComponents = function addAllNewComponents(_ref, _ref2, colorKeys) {
+  var addComponents = _ref.addComponents;
+  var statePrefix = _ref2.statePrefix,
+    disabledStyles = _ref2.disabledStyles,
+    transition = _ref2.transition;
+  var newComponents = {};
+  for (var _i = 0, _arr = [false, true]; _i < _arr.length; _i++) {
+    var isGroup = _arr[_i];
+    var group = isGroup ? 'group-' : '';
+    for (var _iterator = _createForOfIteratorHelperLoose(colorKeys), _step; !(_step = _iterator()).done;) {
+      var _newComponents$classN;
+      var colorName = _step.value;
+      var className = "." + group + statePrefix + "-" + colorName;
+      newComponents[className] = (_newComponents$classN = {}, _newComponents$classN["@apply " + group + "hover:bg-" + colorName + "/[0.08]"] = {}, _newComponents$classN["@apply " + group + "active:bg-" + colorName + "/[0.12]"] = {}, _newComponents$classN["@apply " + group + "focus-visible:bg-" + colorName + "/[0.12]"] = {}, _newComponents$classN);
+      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 (var _iterator2 = _createForOfIteratorHelperLoose(colorKeys), _step2; !(_step2 = _iterator2()).done;) {
+    var _colorName = _step2.value;
+    for (var _i2 = 0, _arr2 = ['hover', 'active', 'focus', 'disabled']; _i2 < _arr2.length; _i2++) {
+      var stateName = _arr2[_i2];
+      var _className = "." + stateName + "-" + statePrefix + "-" + _colorName;
+      if (stateName === 'active' || stateName === 'focus') {
+        var _newComponents$_class;
+        newComponents[_className] = (_newComponents$_class = {}, _newComponents$_class["@apply bg-" + _colorName + "/[0.12]"] = {}, _newComponents$_class);
+      } else if (stateName === 'hover') {
+        var _newComponents$_class2;
+        newComponents[_className] = (_newComponents$_class2 = {}, _newComponents$_class2["@apply bg-" + _colorName + "/[0.08]"] = {}, _newComponents$_class2);
+      } else if (stateName === 'disabled') {
+        var _newComponents$_class3, _newComponents$_class4;
+        newComponents[_className] = (_newComponents$_class3 = {}, _newComponents$_class3["@apply text-on-surface/[" + disabledStyles.textOpacity + "]"] = {}, _newComponents$_class3);
+        newComponents[_className] = (_newComponents$_class4 = {}, _newComponents$_class4["@apply bg-on-surface/[" + disabledStyles.backgroundOpacity + "]"] = {}, _newComponents$_class4);
+      }
+    }
+  }
+  addComponents(newComponents);
+};
+
+var themer = function themer(colors, darkMode) {
+  var options = {
+    defaultTheme: {
+      extend: {
+        colors: {}
+      }
+    },
+    themes: [{
+      name: 'darkTheme',
+      extend: {
+        colors: {}
+      }
+    }]
+  };
+  Object.entries(colors).forEach(function (_ref) {
+    var key = _ref[0],
+      value = _ref[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;
+  return require('tailwindcss-themer')(options);
+};
+
 var font = function font(fontStyles, responsiveBreakPoints) {
   var createUtilities = function createUtilities(_ref) {
     var theme = _ref.theme;
@@ -1948,7 +1948,12 @@ var font = function font(fontStyles, responsiveBreakPoints) {
 
 var TailwindPlugin = /*#__PURE__*/function (_PluginAbstract) {
   function TailwindPlugin(appService, options) {
+    var _options$darkMode, _options$responsiveBr;
     var _this;
+    (_options$darkMode = options.darkMode) != null ? _options$darkMode : options.darkMode = 'class';
+    (_options$responsiveBr = options.responsiveBreakPoints) != null ? _options$responsiveBr : options.responsiveBreakPoints = {
+      lg: 1.125
+    };
     _this = _PluginAbstract.call(this) || this;
     _this.appService = void 0;
     _this.options = void 0;
@@ -2014,6 +2019,7 @@ exports.ConfigModule = ConfigModule;
 exports.ConfigService = ConfigService;
 exports.ContrastCurve = ContrastCurve;
 exports.DynamicColor = DynamicColor;
+exports.FontPlugin = FontPlugin;
 exports.PluginAbstract = PluginAbstract;
 exports.PluginModule = PluginModule;
 exports.PluginService = PluginService;