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

package/dist/theme.esm.js

@@ -1588,11 +1588,23 @@ var PluginService = /*#__PURE__*/function () {
   };
   _proto.loadPlugins = function loadPlugins(appService) {
     var _this = this;
-    this.pluginConstructors.forEach(function (_ref) {
-      var plugin = _ref[0],
-        option = _ref[1];
-      _this.pluginInstances.set(plugin.name, new plugin(appService, option));
-    });
+    var plugins = new Map(this.pluginConstructors);
+    var size = 0;
+    do {
+      size = plugins.size;
+      plugins.forEach(function (_ref, key) {
+        var plugin = _ref[0],
+          option = _ref[1];
+        var deps = plugin.dependencies.filter(function (dep) {
+          return !_this.pluginInstances.has(dep.name);
+        });
+        if (deps.length === 0) {
+          _this.pluginInstances.set(plugin.name, new plugin(appService, option));
+          plugins["delete"](key);
+        }
+      });
+    } while (plugins.size != 0 && plugins.size < size);
+    if (plugins.size > 0) console.log("Some plugins couldn't be loaded due to missing dependencies: ", Array.from(plugins.keys()));
   };
   _proto.getPlugin = function getPlugin(plugin) {
     var pluginInstance = this.pluginInstances.get(plugin.name);
@@ -1632,7 +1644,7 @@ function bootstrapFromConfig(path) {
 }
 
 var PluginAbstract = function PluginAbstract() {};
-PluginAbstract.dependencies = void 0;
+PluginAbstract.dependencies = [];
 
 var state = function state(colorkeys) {
   return plugin(function (pluginArgs) {
@@ -1718,6 +1730,218 @@ var themer = function themer(colors, darkMode) {
   return require('tailwindcss-themer')(options);
 };
 
+var FontFamily;
+(function (FontFamily) {
+  FontFamily["Expressive"] = "expressive";
+  FontFamily["Neutral"] = "neutral";
+})(FontFamily || (FontFamily = {}));
+var FontPlugin = /*#__PURE__*/function (_PluginAbstract) {
+  function FontPlugin(appService, options) {
+    var _options$fontFamily$e, _options$fontFamily, _options$fontFamily$n, _options$fontFamily2;
+    var _this;
+    _this = _PluginAbstract.call(this) || this;
+    _this.appService = void 0;
+    _this.options = void 0;
+    _this.fontFamily = void 0;
+    _this.fontStyles = void 0;
+    _this.appService = appService;
+    _this.options = options;
+    _this.fontFamily = {
+      expressive: (_options$fontFamily$e = options == null || (_options$fontFamily = options.fontFamily) == null ? void 0 : _options$fontFamily.expressive) != null ? _options$fontFamily$e : ['Roboto', 'sans-serif'],
+      neutral: (_options$fontFamily$n = options == null || (_options$fontFamily2 = options.fontFamily) == null ? void 0 : _options$fontFamily2.neutral) != null ? _options$fontFamily$n : ['Roboto', 'sans-serif']
+    };
+    _this.fontStyles = {
+      display: {
+        large: {
+          fontWeight: 400,
+          fontSize: 3.5625,
+          lineHeight: 4,
+          letterSpacing: -0.015625,
+          fontFamily: FontFamily.Expressive
+        },
+        medium: {
+          fontWeight: 400,
+          fontSize: 2.8125,
+          lineHeight: 3.25,
+          fontFamily: FontFamily.Expressive
+        },
+        small: {
+          fontWeight: 400,
+          fontSize: 2.25,
+          lineHeight: 2.75,
+          fontFamily: FontFamily.Expressive
+        }
+      },
+      headline: {
+        large: {
+          fontWeight: 400,
+          fontSize: 2,
+          lineHeight: 2.5,
+          fontFamily: FontFamily.Expressive
+        },
+        medium: {
+          fontWeight: 400,
+          fontSize: 1.75,
+          lineHeight: 2.25,
+          fontFamily: FontFamily.Expressive
+        },
+        small: {
+          fontWeight: 400,
+          fontSize: 1.5,
+          lineHeight: 2,
+          fontFamily: FontFamily.Expressive
+        }
+      },
+      title: {
+        large: {
+          fontWeight: 400,
+          fontSize: 1.375,
+          lineHeight: 1.75,
+          fontFamily: FontFamily.Neutral
+        },
+        medium: {
+          fontWeight: 500,
+          fontSize: 1,
+          lineHeight: 1.5,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.009375
+        },
+        small: {
+          fontWeight: 500,
+          fontSize: 0.875,
+          lineHeight: 1.25,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.00625
+        }
+      },
+      label: {
+        large: {
+          fontWeight: 500,
+          fontSize: 0.875,
+          lineHeight: 1.25,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.00625
+        },
+        medium: {
+          fontWeight: 500,
+          fontSize: 0.75,
+          lineHeight: 1,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.03125
+        },
+        small: {
+          fontWeight: 500,
+          fontSize: 0.6875,
+          lineHeight: 1,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.03125
+        }
+      },
+      body: {
+        large: {
+          fontWeight: 400,
+          fontSize: 1,
+          lineHeight: 1.5625,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.03125
+        },
+        medium: {
+          fontWeight: 400,
+          fontSize: 0.875,
+          lineHeight: 1.25,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.015625
+        },
+        small: {
+          fontWeight: 400,
+          fontSize: 0.75,
+          lineHeight: 1,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.025
+        }
+      }
+    };
+    if (options && options.fontStyles) Object.entries(options.fontStyles).forEach(function (_ref) {
+      var key = _ref[0],
+        fontParam = _ref[1];
+      var fontRole = key;
+      Object.entries(fontParam).forEach(function (_ref2) {
+        var size = _ref2[0],
+          fontStyle = _ref2[1];
+        var fontSize = size;
+        if (fontStyle) {
+          _this.fontStyles[fontRole][fontSize] = _extends({}, _this.fontStyles[fontRole][fontSize], fontStyle);
+        }
+      });
+    });
+    return _this;
+  }
+  _inheritsLoose(FontPlugin, _PluginAbstract);
+  FontPlugin.config = function config(options) {
+    return options;
+  };
+  var _proto = FontPlugin.prototype;
+  _proto.getFonts = function getFonts() {
+    return {
+      fontStyles: this.fontStyles,
+      fontFamily: this.fontFamily
+    };
+  };
+  return FontPlugin;
+}(PluginAbstract);
+
+var font = function font(fontStyles, responsiveBreakPoints) {
+  var createUtilities = function createUtilities(_ref) {
+    var theme = _ref.theme;
+    var pixelUnit = 'rem';
+    var newUtilities = {};
+    var baseTextStyle = function baseTextStyle(sizeValue) {
+      return {
+        fontSize: sizeValue.fontSize + pixelUnit,
+        fontWeight: sizeValue.fontWeight,
+        lineHeight: sizeValue.lineHeight + pixelUnit,
+        letterSpacing: sizeValue.letterSpacing ? sizeValue.letterSpacing + pixelUnit : null,
+        fontFamily: theme('fontFamily.' + sizeValue.fontFamily)
+      };
+    };
+    var responsiveTextStyle = function responsiveTextStyle(sizeValue, breakPointName, breakPointRatio) {
+      var _ref2;
+      return _ref2 = {}, _ref2["@media (min-width: " + theme('screens.' + breakPointName, {}) + ")"] = {
+        fontSize: sizeValue.fontSize * breakPointRatio + pixelUnit,
+        lineHeight: sizeValue.lineHeight * breakPointRatio + pixelUnit
+      }, _ref2;
+    };
+    for (var _i = 0, _Object$entries = Object.entries(fontStyles); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+        roleName = _Object$entries$_i[0],
+        roleValue = _Object$entries$_i[1];
+      var _loop = function _loop() {
+        var _Object$entries2$_i = _Object$entries2[_i2],
+          sizeName = _Object$entries2$_i[0],
+          sizeValue = _Object$entries2$_i[1];
+        newUtilities['.text-' + roleName + '-' + sizeName] = _extends({}, baseTextStyle(sizeValue), Object.entries(responsiveBreakPoints).reduce(function (acc, _ref3) {
+          var breakPointName = _ref3[0],
+            breakPointRatio = _ref3[1];
+          acc = _extends({}, acc, responsiveTextStyle(sizeValue, breakPointName, breakPointRatio));
+          return acc;
+        }, {}));
+      };
+      for (var _i2 = 0, _Object$entries2 = Object.entries(roleValue); _i2 < _Object$entries2.length; _i2++) {
+        _loop();
+      }
+    }
+    return newUtilities;
+  };
+  return plugin(function (_ref4) {
+    var addUtilities = _ref4.addUtilities,
+      theme = _ref4.theme;
+    var newUtilities = createUtilities({
+      theme: theme
+    });
+    addUtilities(newUtilities);
+  });
+};
+
 var TailwindPlugin = /*#__PURE__*/function (_PluginAbstract) {
   function TailwindPlugin(appService, options) {
     var _this;
@@ -1753,18 +1977,18 @@ var TailwindPlugin = /*#__PURE__*/function (_PluginAbstract) {
         colors[newKey][isDark ? 'dark' : 'light'] = value.getHex();
       }
     }
-    console.log(colors);
+    var _this$appService$plug = this.appService.pluginService.getPlugin(FontPlugin).getFonts(),
+      fontStyles = _this$appService$plug.fontStyles,
+      fontFamily = _this$appService$plug.fontFamily;
     return {
       colors: {},
-      fontFamily: {
-        expressive: [],
-        neutral: []
-      },
-      plugins: [state(Object.keys(colors)), themer(colors, this.options.darkMode)]
+      fontFamily: fontFamily,
+      plugins: [state(Object.keys(colors)), themer(colors, this.options.darkMode), font(fontStyles, this.options.responsiveBreakPoints)]
     };
   };
   return TailwindPlugin;
 }(PluginAbstract);
+TailwindPlugin.dependencies = [FontPlugin];
 
 var createTheme = function createTheme() {
   var app = bootstrapFromConfig();