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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/theme",
-  "version": "1.0.0-beta.16",
+  "version": "1.0.0-beta.18",
   "license": "MIT",
   "author": "vigreux-joël",
   "exports": {

package/src/index.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/src/plugin/plugin.abstract.ts

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

package/src/plugin/plugin.service.ts

@@ -1,10 +1,10 @@
 import { PluginAbstract } from './plugin.abstract';
 import { AppService } from '../app.service';
 
-export type PluginConstructor = new (
+export type PluginConstructor = (new (
   appService: AppService,
   options: any
-) => PluginAbstract;
+) => PluginAbstract) & { dependencies: PluginConstructor[] };
 
 export class PluginService {
   private pluginInstances = new Map<string, PluginAbstract>();
@@ -15,9 +15,27 @@ export class PluginService {
   }
 
   public loadPlugins(appService: AppService) {
-    this.pluginConstructors.forEach(([plugin, option]) => {
-      this.pluginInstances.set(plugin.name, new plugin(appService, option));
-    });
+    const plugins = new Map(this.pluginConstructors);
+
+    let size = 0;
+    do {
+      size = plugins.size;
+      plugins.forEach(([plugin, option], key) => {
+        const deps = plugin.dependencies.filter(
+          (dep) => !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())
+      );
   }
 
   public getPlugin<T extends PluginAbstract>(

package/src/plugins/font/font.plugin.ts

@@ -0,0 +1,172 @@
+import { PluginAbstract } from '../../plugin';
+import { AppService } from '../../app.service';
+
+export 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 class FontPlugin extends PluginAbstract {
+  private readonly fontFamily: { expressive: string[]; neutral: string[] };
+  private readonly fontStyles: Record<FontRole, Record<FontSize, FontStyle>>;
+
+  constructor(
+    protected appService: AppService,
+    protected options: FontPluginOptions
+  ) {
+    super();
+    this.fontFamily = {
+      expressive: options?.fontFamily?.expressive ?? ['Roboto', 'sans-serif'],
+      neutral: options?.fontFamily?.neutral ?? ['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(([key, fontParam]) => {
+        const fontRole: FontRole = key as FontRole;
+        Object.entries(fontParam).forEach(([size, fontStyle]) => {
+          const fontSize: FontSize = size as FontSize;
+          if (fontStyle) {
+            this.fontStyles[fontRole][fontSize] = {
+              ...this.fontStyles[fontRole][fontSize],
+              ...fontStyle,
+            };
+          }
+        });
+      });
+  }
+  static config(options: FontPluginOptions): FontPluginOptions {
+    return options;
+  }
+  getFonts() {
+    return {
+      fontStyles: this.fontStyles,
+      fontFamily: this.fontFamily,
+    };
+  }
+}

package/src/plugins/font/index.ts

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

package/src/plugins/tailwind/index.ts

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

package/src/plugins/tailwind/main.ts

@@ -1,6 +1,6 @@
 import { PluginsConfig } from 'tailwindcss/types/config';
 import { bootstrapFromConfig } from '../../main';
-import { TailwindPlugin } from './Tailwind.plugin';
+import { TailwindPlugin } from './tailwind.plugin';
 
 export type Theme = {
   colors: Record<string, string>;

package/src/plugins/tailwind/plugins-tailwind/font.ts

@@ -0,0 +1,69 @@
+import plugin from 'tailwindcss/plugin';
+import { CSSRuleObject, PluginAPI } from 'tailwindcss/types/config';
+import { FontRole, FontSize, FontStyle } from '../../font/font.plugin';
+
+export const font = (
+  fontStyles: Record<FontRole, Record<FontSize, FontStyle>>,
+  responsiveBreakPoints: Record<string, number>
+) => {
+  const createUtilities = ({
+    theme,
+  }: Pick<PluginAPI, 'theme'>): CSSRuleObject => {
+    const pixelUnit = 'rem';
+    const newUtilities: any = {};
+
+    const baseTextStyle = (sizeValue: FontStyle) => ({
+      fontSize: sizeValue.fontSize + pixelUnit,
+      fontWeight: sizeValue.fontWeight as unknown as CSSRuleObject,
+      lineHeight: sizeValue.lineHeight + pixelUnit,
+      letterSpacing: sizeValue.letterSpacing
+        ? sizeValue.letterSpacing + pixelUnit
+        : null,
+      fontFamily: theme('fontFamily.' + sizeValue.fontFamily),
+    });
+
+    const responsiveTextStyle = (
+      sizeValue: FontStyle,
+      breakPointName: string,
+      breakPointRatio: number
+    ) => ({
+      [`@media (min-width: ${theme('screens.' + breakPointName, {})})`]: {
+        fontSize: sizeValue.fontSize * breakPointRatio + pixelUnit,
+        lineHeight: sizeValue.lineHeight * breakPointRatio + pixelUnit,
+      },
+    });
+
+    for (const [roleName, roleValue] of Object.entries(fontStyles)) {
+      for (const [sizeName, sizeValue] of Object.entries(roleValue)) {
+        newUtilities['.text-' + roleName + '-' + sizeName] = {
+          ...baseTextStyle(sizeValue),
+          ...Object.entries(responsiveBreakPoints).reduce(
+            (acc, [breakPointName, breakPointRatio]) => {
+              acc = {
+                ...acc,
+                ...responsiveTextStyle(
+                  sizeValue,
+                  breakPointName,
+                  breakPointRatio
+                ),
+              };
+              return acc;
+            },
+            {}
+          ),
+        };
+      }
+    }
+
+    return newUtilities as CSSRuleObject;
+  };
+  return plugin(
+    ({
+      addUtilities,
+      theme,
+    }: Pick<PluginAPI, 'theme'> & Pick<PluginAPI, 'addUtilities'>) => {
+      const newUtilities = createUtilities({ theme });
+      addUtilities(newUtilities);
+    }
+  );
+};

package/src/plugins/tailwind/{Tailwind.plugin.ts → tailwind.plugin.ts}

@@ -3,12 +3,16 @@ import { AppService } from '../../app.service';
 import { Theme } from './main';
 import { state } from './plugins-tailwind/state';
 import { themer } from './plugins-tailwind/themer';
+import { FontPlugin } from '../font/font.plugin';
+import { font } from './plugins-tailwind/font';
 
 interface TailwindPluginOptions {
   darkMode: 'class' | 'media';
+  responsiveBreakPoints: Record<string, number>;
 }
 
 export class TailwindPlugin extends PluginAbstract {
+  static dependencies = [FontPlugin];
   constructor(
     protected appService: AppService,
     protected options: TailwindPluginOptions
@@ -39,14 +43,17 @@ export class TailwindPlugin extends PluginAbstract {
         colors[newKey][isDark ? 'dark' : 'light'] = value.getHex();
       }
     }
-    console.log(colors);
 
+    const { fontStyles, fontFamily } = this.appService.pluginService
+      .getPlugin(FontPlugin)
+      .getFonts();
     return {
       colors: {},
-      fontFamily: { expressive: [], neutral: [] },
+      fontFamily: fontFamily,
       plugins: [
         state(Object.keys(colors)),
         themer(colors, this.options.darkMode),
+        font(fontStyles, this.options.responsiveBreakPoints),
       ],
     };
   }