@aesthetic/system - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

esm/index.js

@@ -208,2 +208,4 @@ import { deepMerge, isObject, objectLoop, hyphenate, toArray } from '@aesthetic/utils';
 
+    _defineProperty(this, "name", '');
+
     _defineProperty(this, "contrast", void 0);
@@ -220,2 +222,6 @@
     _defineProperty(this, "mixin", function (names, properties) {
+      if (properties === void 0) {
+        properties = {};
+      }
+
       return deepMerge.apply(void 0, toArray(names).map(function (name) {
@@ -261,3 +267,3 @@ return _this.extendMixin(name);
       scheme: this.scheme
-    }, options), deepMerge(this.tokens, tokens), this.design, this.mixins);
+    }, options), deepMerge(this.tokens, tokens), this.design, deepMerge(this.mixins, {}));
   };
@@ -300,2 +306,10 @@
 
+  _proto.toUtilities = function toUtilities() {
+    return {
+      mixin: this.mixin,
+      unit: this.unit,
+      var: this.var
+    };
+  };
+
   _proto.toVariables = function toVariables() {
@@ -306,6 +320,8 @@ var vars = {};
       objectLoop(data, function (value, key) {
+        var nextPath = [].concat(path, [hyphenate(key)]);
+
         if (isObject(value)) {
-          collapseTree(value, [].concat(path, [hyphenate(key)]));
+          collapseTree(value, nextPath);
         } else {
-          vars[[].concat(path, [key]).join('-')] = value;
+          vars[nextPath.join('-')] = value;
         }
@@ -387,3 +403,3 @@ });
     this.rootTextSize = parseFloat(tokens.typography.rootTextSize);
-    this.spacingUnit = tokens.spacing.type === 'vertical-rhythm' ? this.rootTextSize * this.rootLineHeight : tokens.spacing.unit;
+    this.spacingUnit = tokens.spacing.unit;
   }
@@ -410,3 +426,5 @@
 
-    _defineProperty(this, "themes", new Map());
+    _defineProperty(this, "defaultTheme", '');
+
+    _defineProperty(this, "themes", {});
   }
@@ -431,6 +449,8 @@
     var prefersLowContrast = window.matchMedia('(prefers-contrast: low)').matches;
-    var schemeCheckOrder = ['light', 'dark'];
+    var schemeCheckOrder = [];
 
     if (prefersDarkScheme) {
-      schemeCheckOrder.reverse();
+      schemeCheckOrder.push('dark');
+    } else if (prefersLightScheme) {
+      schemeCheckOrder.push('light');
     }
@@ -459,15 +479,7 @@
       return possibleTheme;
+    } else if (this.defaultTheme) {
+      return this.getTheme(this.defaultTheme);
     }
 
-    if (prefersLightScheme && this.defaultLightTheme) {
-      return this.getLightTheme();
-    } else if (prefersDarkScheme && this.defaultDarkTheme) {
-      return this.getDarkTheme();
-    }
-
-    if (this.themes.size > 0) {
-      return Array.from(this.themes.values())[0];
-    }
-
-    throw new Error('Unable to find a preferred theme as no themes have been registered.');
+    throw new Error('No themes have been registered.');
   };
@@ -482,3 +494,3 @@
 
-    var theme = this.themes.get(name);
+    var theme = this.themes[name];
 
@@ -493,3 +505,3 @@ if (theme) {
   _proto.query = function query(params) {
-    return Array.from(this.themes.values()).find(function (theme) {
+    return Object.values(this.themes).find(function (theme) {
       var conditions = [];
@@ -538,9 +550,27 @@
 
-    this.themes.set(name, theme);
+    if (theme.name) {
+      if ("production" !== process.env.NODE_ENV) {
+        throw new Error("Theme \"" + name + "\" has already been registered under \"" + theme.name + "\".");
+      }
+    } else {
+      theme.name = name;
+    }
+
+    if (!this.defaultTheme) {
+      this.defaultTheme = name;
+    }
+
+    this.themes[name] = theme;
     return this;
   };
 
+  _proto.reset = function reset() {
+    this.defaultDarkTheme = '';
+    this.defaultLightTheme = '';
+    this.themes = {};
+  };
+
   return ThemeRegistry;
 }();
 
-export { DEPTHS, Design, LAYOUT_SHADES, Theme, ThemeRegistry, mixins };
+export { DEPTHS, Design, LAYOUT_SHADES, Theme, ThemeRegistry };

lib/index.d.ts

@@ -8,6 +8,5 @@ /**
 import ThemeRegistry from './ThemeRegistry';
-import mixins from './mixins';
 export * from './constants';
 export * from './types';
-export { Design, Theme, ThemeRegistry, mixins };
+export { Design, Theme, ThemeRegistry };
 //# sourceMappingURL=index.d.ts.map

lib/index.js

@@ -212,2 +212,4 @@ 'use strict';
 
+    _defineProperty(this, "name", '');
+
     _defineProperty(this, "contrast", void 0);
@@ -224,2 +226,6 @@
     _defineProperty(this, "mixin", function (names, properties) {
+      if (properties === void 0) {
+        properties = {};
+      }
+
       return utils.deepMerge.apply(void 0, utils.toArray(names).map(function (name) {
@@ -265,3 +271,3 @@ return _this.extendMixin(name);
       scheme: this.scheme
-    }, options), utils.deepMerge(this.tokens, tokens), this.design, this.mixins);
+    }, options), utils.deepMerge(this.tokens, tokens), this.design, utils.deepMerge(this.mixins, {}));
   };
@@ -304,2 +310,10 @@
 
+  _proto.toUtilities = function toUtilities() {
+    return {
+      mixin: this.mixin,
+      unit: this.unit,
+      var: this.var
+    };
+  };
+
   _proto.toVariables = function toVariables() {
@@ -310,6 +324,8 @@ var vars = {};
       utils.objectLoop(data, function (value, key) {
+        var nextPath = [].concat(path, [utils.hyphenate(key)]);
+
         if (utils.isObject(value)) {
-          collapseTree(value, [].concat(path, [utils.hyphenate(key)]));
+          collapseTree(value, nextPath);
         } else {
-          vars[[].concat(path, [key]).join('-')] = value;
+          vars[nextPath.join('-')] = value;
         }
@@ -391,3 +407,3 @@ });
     this.rootTextSize = parseFloat(tokens.typography.rootTextSize);
-    this.spacingUnit = tokens.spacing.type === 'vertical-rhythm' ? this.rootTextSize * this.rootLineHeight : tokens.spacing.unit;
+    this.spacingUnit = tokens.spacing.unit;
   }
@@ -414,3 +430,5 @@
 
-    _defineProperty(this, "themes", new Map());
+    _defineProperty(this, "defaultTheme", '');
+
+    _defineProperty(this, "themes", {});
   }
@@ -435,6 +453,8 @@
     var prefersLowContrast = window.matchMedia('(prefers-contrast: low)').matches;
-    var schemeCheckOrder = ['light', 'dark'];
+    var schemeCheckOrder = [];
 
     if (prefersDarkScheme) {
-      schemeCheckOrder.reverse();
+      schemeCheckOrder.push('dark');
+    } else if (prefersLightScheme) {
+      schemeCheckOrder.push('light');
     }
@@ -463,15 +483,7 @@
       return possibleTheme;
+    } else if (this.defaultTheme) {
+      return this.getTheme(this.defaultTheme);
     }
 
-    if (prefersLightScheme && this.defaultLightTheme) {
-      return this.getLightTheme();
-    } else if (prefersDarkScheme && this.defaultDarkTheme) {
-      return this.getDarkTheme();
-    }
-
-    if (this.themes.size > 0) {
-      return Array.from(this.themes.values())[0];
-    }
-
-    throw new Error('Unable to find a preferred theme as no themes have been registered.');
+    throw new Error('No themes have been registered.');
   };
@@ -486,3 +498,3 @@
 
-    var theme = this.themes.get(name);
+    var theme = this.themes[name];
 
@@ -497,3 +509,3 @@ if (theme) {
   _proto.query = function query(params) {
-    return Array.from(this.themes.values()).find(function (theme) {
+    return Object.values(this.themes).find(function (theme) {
       var conditions = [];
@@ -542,6 +554,24 @@
 
-    this.themes.set(name, theme);
+    if (theme.name) {
+      if ("production" !== process.env.NODE_ENV) {
+        throw new Error("Theme \"" + name + "\" has already been registered under \"" + theme.name + "\".");
+      }
+    } else {
+      theme.name = name;
+    }
+
+    if (!this.defaultTheme) {
+      this.defaultTheme = name;
+    }
+
+    this.themes[name] = theme;
     return this;
   };
 
+  _proto.reset = function reset() {
+    this.defaultDarkTheme = '';
+    this.defaultLightTheme = '';
+    this.themes = {};
+  };
+
   return ThemeRegistry;
@@ -555,2 +585,1 @@ }();
 exports.ThemeRegistry = ThemeRegistry;
-exports.mixins = mixins;

lib/mixins/border.d.ts

 import { DeclarationBlock } from '@aesthetic/sss';
-import { BorderSize, VarFactory } from '../types';
-export declare function border(vars: VarFactory, size: BorderSize): DeclarationBlock;
+import { BorderSize, VarUtil } from '../types';
+export declare function border(vars: VarUtil, size: BorderSize): DeclarationBlock;
 //# sourceMappingURL=border.d.ts.map

lib/mixins/box.d.ts

 import { DeclarationBlock } from '@aesthetic/sss';
-import { BorderSize, VarFactory } from '../types';
-export declare function box(vars: VarFactory, size: BorderSize): DeclarationBlock;
+import { BorderSize, VarUtil } from '../types';
+export declare function box(vars: VarUtil, size: BorderSize): DeclarationBlock;
 //# sourceMappingURL=box.d.ts.map

lib/mixins/heading.d.ts

 import { DeclarationBlock } from '@aesthetic/sss';
-import { HeadingSize, VarFactory } from '../types';
-export declare function heading(vars: VarFactory, level: HeadingSize): DeclarationBlock;
+import { HeadingSize, VarUtil } from '../types';
+export declare function heading(vars: VarUtil, level: HeadingSize): DeclarationBlock;
 //# sourceMappingURL=heading.d.ts.map

lib/mixins/shadow.d.ts

 import { DeclarationBlock } from '@aesthetic/sss';
-import { ShadowSize, VarFactory } from '../types';
-export declare function shadow(vars: VarFactory, size: ShadowSize): DeclarationBlock;
+import { ShadowSize, VarUtil } from '../types';
+export declare function shadow(vars: VarUtil, size: ShadowSize): DeclarationBlock;
 //# sourceMappingURL=shadow.d.ts.map

lib/mixins/text.d.ts

 import { DeclarationBlock } from '@aesthetic/sss';
-import { TextSize, VarFactory } from '../types';
-export declare function text(vars: VarFactory, level: TextSize): DeclarationBlock;
+import { TextSize, VarUtil } from '../types';
+export declare function text(vars: VarUtil, level: TextSize): DeclarationBlock;
 //# sourceMappingURL=text.d.ts.map

lib/Theme.d.ts

 import { DeclarationBlock } from '@aesthetic/sss';
 import Design from './Design';
-import { ColorScheme, ContrastLevel, ThemeOptions, Tokens, DeepPartial, ThemeTokens, Mixins, MixinName, Variables, VarFactory, UnitFactory, MixinFactory } from './types';
+import { ColorScheme, ContrastLevel, ThemeOptions, Tokens, DeepPartial, ThemeTokens, Mixins, MixinName, Variables, VarUtil, UnitUtil, MixinUtil, Utilities } from './types';
 export default class Theme {
+    name: string;
     readonly contrast: ContrastLevel;
@@ -23,3 +24,3 @@ readonly mixins: Mixins;
      */
-    mixin: MixinFactory;
+    mixin: MixinUtil<object>;
     /**
@@ -34,2 +35,6 @@ * Overwrite a mixin with a set of custom CSS properties, and return the new mixin.
     /**
+     * Return a mapping of all theme specific utility methods.
+     */
+    toUtilities<T extends object>(): Utilities<T>;
+    /**
      * Return both design and theme tokens as a mapping of CSS variables.
@@ -41,7 +46,7 @@ */
      */
-    unit: UnitFactory;
+    unit: UnitUtil;
     /**
      * Return a CSS variable declaration with the defined name and fallbacks.
      */
-    var: VarFactory;
+    var: VarUtil;
     /**
@@ -48,0 +53,0 @@ * Create the entire mapping of all mixins.

lib/ThemeRegistry.d.ts

 import Theme from './Theme';
-import { ThemeOptions } from './types';
+import { ThemeOptions, ThemeName } from './types';
 export default class ThemeRegistry {
     protected defaultDarkTheme: string;
     protected defaultLightTheme: string;
-    protected themes: Map<string, Theme>;
+    protected defaultTheme: string;
+    protected themes: {
+        [name: string]: Theme;
+    };
     /**
@@ -23,3 +26,3 @@ * Return the default dark theme.
      */
-    getTheme(name: string): Theme;
+    getTheme(name: ThemeName): Theme;
     /**
@@ -34,3 +37,7 @@ * Query for a theme that matches the defined parameters.
     register(name: string, theme: Theme, isDefault?: boolean): this;
+    /**
+     * Reset the registry to initial state.
+     */
+    reset(): void;
 }
 //# sourceMappingURL=ThemeRegistry.d.ts.map

lib/types.d.ts

 import { DeclarationBlock } from '@aesthetic/sss';
+export declare type ThemeName = string;
 export declare type Unit = string;
@@ -392,4 +393,4 @@ export declare type Hexcode = string;
 export declare type VariableName = keyof Variables;
-export declare type VarFactory = (name: VariableName, ...fallbacks: (string | number)[]) => string;
-export declare type UnitFactory = (...sizes: number[]) => Unit;
+export declare type VarUtil = (name: VariableName, ...fallbacks: (string | number)[]) => string;
+export declare type UnitUtil = (...sizes: number[]) => Unit;
 export interface Mixins {
@@ -428,3 +429,8 @@ border: {
 export declare type MixinName = 'border-sm' | 'border-df' | 'border-lg' | 'box-sm' | 'box-df' | 'box-lg' | 'heading-l1' | 'heading-l2' | 'heading-l3' | 'heading-l4' | 'heading-l5' | 'heading-l6' | 'pattern-hidden' | 'pattern-offscreen' | 'pattern-reset-button' | 'pattern-reset-input' | 'pattern-reset-list' | 'pattern-reset-typography' | 'pattern-text-break' | 'pattern-text-truncate' | 'pattern-text-wrap' | 'shadow-xs' | 'shadow-sm' | 'shadow-df' | 'shadow-lg' | 'shadow-xl' | 'text-sm' | 'text-df' | 'text-lg';
-export declare type MixinFactory = (name: MixinName | MixinName[], properties: DeclarationBlock) => DeclarationBlock;
+export declare type MixinUtil<T extends object> = (name: MixinName | MixinName[], properties?: T) => T;
+export interface Utilities<T extends object> {
+    mixin: MixinUtil<T>;
+    unit: UnitUtil;
+    var: VarUtil;
+}
 export interface ThemeOptions {
@@ -431,0 +437,0 @@ contrast: ContrastLevel;

package.json

 {
   "name": "@aesthetic/system",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Web based building blocks for the Aesthetic design system.",
@@ -25,8 +25,8 @@ "keywords": [
   "dependencies": {
-    "@aesthetic/utils": "^0.0.2"
+    "@aesthetic/utils": "^0.0.3"
   },
   "peerDependencies": {
-    "@aesthetic/sss": "^0.0.0"
+    "@aesthetic/sss": "*"
   },
-  "gitHead": "8b6f4b81340109bdab77ca1574bc929cd9694652"
+  "gitHead": "505088db575561a047e038760ba665b30eefb4ba"
 }

No alert changes

Improved metrics

Total package byte prevSize

101744

increased by44.34%

Number of package files

35

increased by12.9%

Lines of code

3030

increased by100.4%

Worsened metrics

Number of low supply chain risk alerts

9

increased by28.57%

Dependency changes

• + Added@aesthetic/sss@0.8.2(transitive)

• + Added@aesthetic/types@0.5.1(transitive)

• + Added@aesthetic/utils@0.0.30.7.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• - Removed@aesthetic/utils@0.0.2(transitive)

• Updated@aesthetic/utils@^0.0.3