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

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/plugin/plugin.abstract.d.ts

@@ -1,6 +1,7 @@
 import { AppService } from '../app.service';
+import { PluginConstructor } from './plugin.service';
 export declare abstract class PluginAbstract {
-    static dependencies: (new () => PluginAbstract)[];
+    static dependencies: PluginConstructor[];
     protected abstract appService: AppService;
     protected abstract options: object;
 }

package/dist/plugin/plugin.service.d.ts

@@ -1,6 +1,8 @@
 import { PluginAbstract } from './plugin.abstract';
 import { AppService } from '../app.service';
-export type PluginConstructor = new (appService: AppService, options: any) => PluginAbstract;
+export type PluginConstructor = (new (appService: AppService, options: any) => PluginAbstract) & {
+    dependencies: PluginConstructor[];
+};
 export declare class PluginService {
     private pluginInstances;
     private pluginConstructors;

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

@@ -0,0 +1,38 @@
+import { PluginAbstract } from '../../plugin';
+import { AppService } from '../../app.service';
+export declare enum FontFamily {
+    Expressive = "expressive",
+    Neutral = "neutral"
+}
+export type FontStyle = {
+    fontSize: number;
+    lineHeight: number;
+    fontWeight: number;
+    letterSpacing?: number;
+    fontFamily: FontFamily;
+};
+export type FontRole = 'display' | 'headline' | 'title' | 'label' | 'body';
+export type FontSize = 'large' | 'medium' | 'small';
+interface FontPluginOptions {
+    fontFamily?: {
+        expressive?: string[];
+        neutral?: string[];
+    };
+    fontStyles?: Partial<Record<FontRole, Record<FontSize, Partial<FontStyle>>>>;
+}
+export declare class FontPlugin extends PluginAbstract {
+    protected appService: AppService;
+    protected options: FontPluginOptions;
+    private readonly fontFamily;
+    private readonly fontStyles;
+    constructor(appService: AppService, options: FontPluginOptions);
+    static config(options: FontPluginOptions): FontPluginOptions;
+    getFonts(): {
+        fontStyles: Record<FontRole, Record<FontSize, FontStyle>>;
+        fontFamily: {
+            expressive: string[];
+            neutral: string[];
+        };
+    };
+}
+export {};

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

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

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

@@ -1,3 +1,3 @@
 export * from './main';
 export * from './plugins-tailwind';
-export * from './Tailwind.plugin';
+export * from './tailwind.plugin';

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

@@ -0,0 +1,5 @@
+import { FontRole, FontSize, FontStyle } from '../../font/font.plugin';
+export declare const font: (fontStyles: Record<FontRole, Record<FontSize, FontStyle>>, responsiveBreakPoints: Record<string, number>) => {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config>;
+};

package/dist/plugins/tailwind/{Tailwind.plugin.d.ts → tailwind.plugin.d.ts}

@@ -1,12 +1,15 @@
 import { PluginAbstract } from '../../plugin/plugin.abstract';
 import { AppService } from '../../app.service';
 import { Theme } from './main';
+import { FontPlugin } from '../font/font.plugin';
 interface TailwindPluginOptions {
     darkMode: 'class' | 'media';
+    responsiveBreakPoints: Record<string, number>;
 }
 export declare class TailwindPlugin extends PluginAbstract {
     protected appService: AppService;
     protected options: TailwindPluginOptions;
+    static dependencies: (typeof FontPlugin)[];
     constructor(appService: AppService, options: TailwindPluginOptions);
     static config(options: TailwindPluginOptions): TailwindPluginOptions;
     getTheme(): Theme;

package/dist/theme.cjs.development.js

@@ -1592,11 +1592,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);
@@ -1636,7 +1648,167 @@ function bootstrapFromConfig(path) {
 }
 
 var PluginAbstract = function PluginAbstract() {};
-PluginAbstract.dependencies = void 0;
+PluginAbstract.dependencies = [];
+
+exports.FontFamily = void 0;
+(function (FontFamily) {
+  FontFamily["Expressive"] = "expressive";
+  FontFamily["Neutral"] = "neutral";
+})(exports.FontFamily || (exports.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: exports.FontFamily.Expressive
+        },
+        medium: {
+          fontWeight: 400,
+          fontSize: 2.8125,
+          lineHeight: 3.25,
+          fontFamily: exports.FontFamily.Expressive
+        },
+        small: {
+          fontWeight: 400,
+          fontSize: 2.25,
+          lineHeight: 2.75,
+          fontFamily: exports.FontFamily.Expressive
+        }
+      },
+      headline: {
+        large: {
+          fontWeight: 400,
+          fontSize: 2,
+          lineHeight: 2.5,
+          fontFamily: exports.FontFamily.Expressive
+        },
+        medium: {
+          fontWeight: 400,
+          fontSize: 1.75,
+          lineHeight: 2.25,
+          fontFamily: exports.FontFamily.Expressive
+        },
+        small: {
+          fontWeight: 400,
+          fontSize: 1.5,
+          lineHeight: 2,
+          fontFamily: exports.FontFamily.Expressive
+        }
+      },
+      title: {
+        large: {
+          fontWeight: 400,
+          fontSize: 1.375,
+          lineHeight: 1.75,
+          fontFamily: exports.FontFamily.Neutral
+        },
+        medium: {
+          fontWeight: 500,
+          fontSize: 1,
+          lineHeight: 1.5,
+          fontFamily: exports.FontFamily.Neutral,
+          letterSpacing: 0.009375
+        },
+        small: {
+          fontWeight: 500,
+          fontSize: 0.875,
+          lineHeight: 1.25,
+          fontFamily: exports.FontFamily.Neutral,
+          letterSpacing: 0.00625
+        }
+      },
+      label: {
+        large: {
+          fontWeight: 500,
+          fontSize: 0.875,
+          lineHeight: 1.25,
+          fontFamily: exports.FontFamily.Neutral,
+          letterSpacing: 0.00625
+        },
+        medium: {
+          fontWeight: 500,
+          fontSize: 0.75,
+          lineHeight: 1,
+          fontFamily: exports.FontFamily.Neutral,
+          letterSpacing: 0.03125
+        },
+        small: {
+          fontWeight: 500,
+          fontSize: 0.6875,
+          lineHeight: 1,
+          fontFamily: exports.FontFamily.Neutral,
+          letterSpacing: 0.03125
+        }
+      },
+      body: {
+        large: {
+          fontWeight: 400,
+          fontSize: 1,
+          lineHeight: 1.5625,
+          fontFamily: exports.FontFamily.Neutral,
+          letterSpacing: 0.03125
+        },
+        medium: {
+          fontWeight: 400,
+          fontSize: 0.875,
+          lineHeight: 1.25,
+          fontFamily: exports.FontFamily.Neutral,
+          letterSpacing: 0.015625
+        },
+        small: {
+          fontWeight: 400,
+          fontSize: 0.75,
+          lineHeight: 1,
+          fontFamily: exports.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 state = function state(colorkeys) {
   return plugin(function (pluginArgs) {
@@ -1722,6 +1894,58 @@ var themer = function themer(colors, darkMode) {
   return require('tailwindcss-themer')(options);
 };
 
+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;
@@ -1757,18 +1981,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();
@@ -1790,6 +2014,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;