@aesthetic/system - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

esm/index.js

@@ -1,2 +0,2 @@
-import deepMerge from 'extend';
+import { deepMerge, isObject, objectLoop, hyphenate, toArray } from '@aesthetic/utils';
 
@@ -57,24 +57,19 @@ function _defineProperty(obj, key, value) {
 
-function border(_ref, size) {
-  var b = _ref.border,
-      palette = _ref.palette;
-  var _b$size = b[size],
-      width = _b$size.width,
-      radius = _b$size.radius;
+function border(vars, size) {
   return {
-    borderColor: palette.neutral.color[LAYOUT_SHADES.border],
-    borderRadius: radius,
+    borderColor: vars("palette-neutral-color-" + LAYOUT_SHADES.border),
+    borderRadius: vars("border-" + size + "-radius"),
     borderStyle: 'solid',
-    borderWidth: width,
+    borderWidth: vars("border-" + size + "-width"),
     ':focus': {
-      borderColor: palette.primary.bg.focused
+      borderColor: vars('palette-primary-bg-focused')
     },
     ':hover': {
-      borderColor: palette.primary.bg.hovered
+      borderColor: vars('palette-primary-bg-hovered')
     },
     ':active': {
-      borderColor: palette.primary.bg.selected
+      borderColor: vars('palette-primary-bg-selected')
     },
     '[disabled]': {
-      borderColor: palette.primary.bg.disabled
+      borderColor: vars('palette-primary-bg-disabled')
     }
@@ -84,5 +79,5 @@ };
 
-function box(tokens, size) {
-  return _extends({}, border(tokens, size), {
-    backgroundColor: tokens.palette.neutral.color[LAYOUT_SHADES.box]
+function box(vars, size) {
+  return _extends({}, border(vars, size), {
+    backgroundColor: vars("palette-neutral-color-" + LAYOUT_SHADES.box)
   });
@@ -169,42 +164,24 @@ }
 
-function heading(_ref, level) {
-  var h = _ref.heading,
-      typography = _ref.typography,
-      palette = _ref.palette;
-  var _h$level = h[level],
-      letterSpacing = _h$level.letterSpacing,
-      lineHeight = _h$level.lineHeight,
-      size = _h$level.size;
+function heading(vars, level) {
   return _extends({}, resetTypography(), {
-    color: palette.neutral.color[LAYOUT_SHADES.text],
-    letterSpacing: letterSpacing,
-    lineHeight: lineHeight,
-    fontFamily: typography.font.heading,
-    fontSize: size
+    color: vars("palette-neutral-color-" + LAYOUT_SHADES.text),
+    letterSpacing: vars("heading-" + level + "-letter-spacing"),
+    lineHeight: vars("heading-" + level + "-line-height"),
+    fontFamily: vars('typography-font-heading'),
+    fontSize: vars("heading-" + level + "-size")
   });
 }
 
-function shadow(tokens, size) {
-  var _tokens$shadow$size = tokens.shadow[size],
-      x = _tokens$shadow$size.x,
-      y = _tokens$shadow$size.y,
-      blur = _tokens$shadow$size.blur,
-      spread = _tokens$shadow$size.spread;
+function shadow(vars, size) {
   return {
-    boxShadow: x + " " + y + " " + blur + " " + spread + " " + tokens.palette.neutral.color[LAYOUT_SHADES.shadow]
+    boxShadow: [vars("shadow-" + size + "-x"), vars("shadow-" + size + "-y"), vars("shadow-" + size + "-blur"), vars("shadow-" + size + "-spread"), vars("palette-neutral-color-" + LAYOUT_SHADES.shadow)].join(' ')
   };
 }
 
-function text(_ref, level) {
-  var t = _ref.text,
-      typography = _ref.typography,
-      palette = _ref.palette;
-  var _t$level = t[level],
-      lineHeight = _t$level.lineHeight,
-      size = _t$level.size;
+function text(vars, level) {
   return _extends({}, resetTypography(), {
-    color: palette.neutral.color[LAYOUT_SHADES.text],
-    fontFamily: typography.font.text,
-    fontSize: size,
-    lineHeight: lineHeight
+    color: vars("palette-neutral-color-" + LAYOUT_SHADES.text),
+    fontFamily: vars('typography-font-text'),
+    fontSize: vars("text-" + level + "-size"),
+    lineHeight: vars("text-" + level + "-line-height")
   });
@@ -231,3 +208,5 @@ }
 var Theme = function () {
-  function Theme(options, tokens, parentMixins) {
+  function Theme(options, tokens, design, parentMixins) {
+    var _this = this;
+
     _defineProperty(this, "contrast", void 0);
@@ -241,4 +220,31 @@
 
+    _defineProperty(this, "design", void 0);
+
+    _defineProperty(this, "mixin", function (names, properties) {
+      return deepMerge.apply(void 0, toArray(names).map(function (name) {
+        return _this.extendMixin(name);
+      }).concat([properties]));
+    });
+
+    _defineProperty(this, "unit", function () {
+      for (var _len = arguments.length, multipliers = new Array(_len), _key = 0; _key < _len; _key++) {
+        multipliers[_key] = arguments[_key];
+      }
+
+      return multipliers.map(function (m) {
+        return (_this.design.spacingUnit * m / _this.design.rootTextSize).toFixed(2).replace('.00', '') + "rem";
+      }).join(' ');
+    });
+
+    _defineProperty(this, "var", function (name) {
+      for (var _len2 = arguments.length, fallbacks = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        fallbacks[_key2 - 1] = arguments[_key2];
+      }
+
+      return "var(" + ["--" + name].concat(fallbacks).join(', ') + ")";
+    });
+
     this.contrast = options.contrast;
     this.scheme = options.scheme;
+    this.design = design;
     this.tokens = tokens;
@@ -258,11 +264,7 @@ this.mixins = parentMixins !== null && parentMixins !== void 0 ? parentMixins : this.createMixins();
       scheme: this.scheme
-    }, options), deepMerge(true, {}, this.tokens, tokens), this.mixins);
+    }, options), deepMerge(this.tokens, tokens), this.design, this.mixins);
   };
 
-  _proto.mixin = function mixin(path, properties, overwrite) {
-    if (overwrite === void 0) {
-      overwrite = false;
-    }
-
-    var paths = path.split('.');
+  _proto.extendMixin = function extendMixin(name, properties, overwrite) {
+    var paths = name.split('-');
     var parent = this.mixins;
@@ -275,7 +277,7 @@ var target = this.mixins;
       parent = target;
-      target = target[key];
+      target = parent[key];
 
       if ("production" !== process.env.NODE_ENV) {
-        if (target === undefined || typeof target !== 'object') {
-          throw new Error("Unknown mixin \"" + path + "\".");
+        if (target === undefined || !isObject(target)) {
+          throw new Error("Unknown mixin \"" + name + "\".");
         }
@@ -287,51 +289,80 @@ }
       parent[key] = _extends({}, properties);
-    } else {
-      parent[key] = deepMerge(true, {}, target, properties);
+    } else if (properties) {
+      parent[key] = deepMerge(target, properties);
     }
 
-    return this;
+    return parent[key];
   };
 
+  _proto.overwriteMixin = function overwriteMixin(name, properties) {
+    return this.extendMixin(name, properties, true);
+  };
+
+  _proto.toTokens = function toTokens() {
+    return _extends({}, this.design.tokens, {}, this.tokens);
+  };
+
+  _proto.toVariables = function toVariables() {
+    var vars = {};
+
+    var collapseTree = function collapseTree(data, path) {
+      objectLoop(data, function (value, key) {
+        if (isObject(value)) {
+          collapseTree(value, [].concat(path, [hyphenate(key)]));
+        } else {
+          vars[[].concat(path, [key]).join('-')] = value;
+        }
+      });
+    };
+
+    collapseTree(this.toTokens(), []);
+    return vars;
+  };
+
   _proto.createMixins = function createMixins() {
     return {
       border: {
-        sm: mixins.border(this.tokens, 'sm'),
-        df: mixins.border(this.tokens, 'df'),
-        lg: mixins.border(this.tokens, 'lg')
+        sm: mixins.border(this.var, 'sm'),
+        df: mixins.border(this.var, 'df'),
+        lg: mixins.border(this.var, 'lg')
       },
       box: {
-        sm: mixins.box(this.tokens, 'sm'),
-        df: mixins.box(this.tokens, 'df'),
-        lg: mixins.box(this.tokens, 'lg')
+        sm: mixins.box(this.var, 'sm'),
+        df: mixins.box(this.var, 'df'),
+        lg: mixins.box(this.var, 'lg')
       },
       heading: {
-        l1: mixins.heading(this.tokens, 'l1'),
-        l2: mixins.heading(this.tokens, 'l2'),
-        l3: mixins.heading(this.tokens, 'l3'),
-        l4: mixins.heading(this.tokens, 'l4'),
-        l5: mixins.heading(this.tokens, 'l5'),
-        l6: mixins.heading(this.tokens, 'l6')
+        l1: mixins.heading(this.var, 'l1'),
+        l2: mixins.heading(this.var, 'l2'),
+        l3: mixins.heading(this.var, 'l3'),
+        l4: mixins.heading(this.var, 'l4'),
+        l5: mixins.heading(this.var, 'l5'),
+        l6: mixins.heading(this.var, 'l6')
       },
       pattern: {
         hidden: mixins.hidden(),
-        hiddenOffscreen: mixins.hiddenOffscreen(),
-        resetButton: mixins.resetButton(),
-        resetInput: mixins.resetInput(),
-        resetList: mixins.resetList(),
-        resetTypography: mixins.resetTypography(),
-        textBreak: mixins.textBreak(),
-        textTruncate: mixins.textTruncate(),
-        textWrap: mixins.textWrap()
+        offscreen: mixins.hiddenOffscreen(),
+        reset: {
+          button: mixins.resetButton(),
+          input: mixins.resetInput(),
+          list: mixins.resetList(),
+          typography: mixins.resetTypography()
+        },
+        text: {
+          break: mixins.textBreak(),
+          truncate: mixins.textTruncate(),
+          wrap: mixins.textWrap()
+        }
       },
       shadow: {
-        xs: mixins.shadow(this.tokens, 'xs'),
-        sm: mixins.shadow(this.tokens, 'sm'),
-        md: mixins.shadow(this.tokens, 'md'),
-        lg: mixins.shadow(this.tokens, 'lg'),
-        xl: mixins.shadow(this.tokens, 'xl')
+        xs: mixins.shadow(this.var, 'xs'),
+        sm: mixins.shadow(this.var, 'sm'),
+        md: mixins.shadow(this.var, 'md'),
+        lg: mixins.shadow(this.var, 'lg'),
+        xl: mixins.shadow(this.var, 'xl')
       },
       text: {
-        sm: mixins.text(this.tokens, 'sm'),
-        df: mixins.text(this.tokens, 'df'),
-        lg: mixins.text(this.tokens, 'lg')
+        sm: mixins.text(this.var, 'sm'),
+        df: mixins.text(this.var, 'df'),
+        lg: mixins.text(this.var, 'lg')
       }
@@ -346,4 +377,2 @@ };
   function Design(tokens) {
-    var _this = this;
-
     _defineProperty(this, "rootLineHeight", void 0);
@@ -357,15 +386,4 @@
 
-    _defineProperty(this, "unit", function () {
-      for (var _len = arguments.length, multipliers = new Array(_len), _key = 0; _key < _len; _key++) {
-        multipliers[_key] = arguments[_key];
-      }
-
-      return multipliers.map(function (m) {
-        return (_this.spacingUnit * m / _this.rootTextSize).toFixed(2).replace('.00', '') + "rem";
-      }).join(' ');
-    });
-
     this.tokens = _extends({}, tokens, {
-      depth: DEPTHS,
-      unit: this.unit
+      depth: DEPTHS
     });
@@ -380,7 +398,7 @@ this.rootLineHeight = tokens.typography.rootLineHeight;
   _proto.createTheme = function createTheme(options, tokens) {
-    return new Theme(options, _extends({}, this.tokens, {}, tokens));
+    return new Theme(options, tokens, this);
   };
 
   _proto.extend = function extend(tokens) {
-    return new Design(deepMerge(true, {}, this.tokens, tokens));
+    return new Design(deepMerge(this.tokens, tokens));
   };
@@ -387,0 +405,0 @@

lib/Design.d.ts

@@ -8,3 +8,3 @@ import Theme from './Theme';
     readonly tokens: DesignTokens;
-    constructor(tokens: Omit<DesignTokens, 'depth' | 'unit'>);
+    constructor(tokens: Omit<DesignTokens, 'depth'>);
     /**
@@ -18,7 +18,3 @@ * Create a new theme with the defined theme tokens, while inheriting the shared design tokens.
     extend(tokens: DeepPartial<DesignTokens>): Design;
-    /**
-     * Return a `rem` unit equivalent for the current spacing type and unit.
-     */
-    unit: (...multipliers: number[]) => string;
 }
 //# sourceMappingURL=Design.d.ts.map

lib/index.js

@@ -5,6 +5,4 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+var utils = require('@aesthetic/utils');
 
-var deepMerge = _interopDefault(require('extend'));
-
 function _defineProperty(obj, key, value) {
@@ -64,24 +62,19 @@ if (key in obj) {
 
-function border(_ref, size) {
-  var b = _ref.border,
-      palette = _ref.palette;
-  var _b$size = b[size],
-      width = _b$size.width,
-      radius = _b$size.radius;
+function border(vars, size) {
   return {
-    borderColor: palette.neutral.color[LAYOUT_SHADES.border],
-    borderRadius: radius,
+    borderColor: vars("palette-neutral-color-" + LAYOUT_SHADES.border),
+    borderRadius: vars("border-" + size + "-radius"),
     borderStyle: 'solid',
-    borderWidth: width,
+    borderWidth: vars("border-" + size + "-width"),
     ':focus': {
-      borderColor: palette.primary.bg.focused
+      borderColor: vars('palette-primary-bg-focused')
     },
     ':hover': {
-      borderColor: palette.primary.bg.hovered
+      borderColor: vars('palette-primary-bg-hovered')
     },
     ':active': {
-      borderColor: palette.primary.bg.selected
+      borderColor: vars('palette-primary-bg-selected')
     },
     '[disabled]': {
-      borderColor: palette.primary.bg.disabled
+      borderColor: vars('palette-primary-bg-disabled')
     }
@@ -91,5 +84,5 @@ };
 
-function box(tokens, size) {
-  return _extends({}, border(tokens, size), {
-    backgroundColor: tokens.palette.neutral.color[LAYOUT_SHADES.box]
+function box(vars, size) {
+  return _extends({}, border(vars, size), {
+    backgroundColor: vars("palette-neutral-color-" + LAYOUT_SHADES.box)
   });
@@ -176,42 +169,24 @@ }
 
-function heading(_ref, level) {
-  var h = _ref.heading,
-      typography = _ref.typography,
-      palette = _ref.palette;
-  var _h$level = h[level],
-      letterSpacing = _h$level.letterSpacing,
-      lineHeight = _h$level.lineHeight,
-      size = _h$level.size;
+function heading(vars, level) {
   return _extends({}, resetTypography(), {
-    color: palette.neutral.color[LAYOUT_SHADES.text],
-    letterSpacing: letterSpacing,
-    lineHeight: lineHeight,
-    fontFamily: typography.font.heading,
-    fontSize: size
+    color: vars("palette-neutral-color-" + LAYOUT_SHADES.text),
+    letterSpacing: vars("heading-" + level + "-letter-spacing"),
+    lineHeight: vars("heading-" + level + "-line-height"),
+    fontFamily: vars('typography-font-heading'),
+    fontSize: vars("heading-" + level + "-size")
   });
 }
 
-function shadow(tokens, size) {
-  var _tokens$shadow$size = tokens.shadow[size],
-      x = _tokens$shadow$size.x,
-      y = _tokens$shadow$size.y,
-      blur = _tokens$shadow$size.blur,
-      spread = _tokens$shadow$size.spread;
+function shadow(vars, size) {
   return {
-    boxShadow: x + " " + y + " " + blur + " " + spread + " " + tokens.palette.neutral.color[LAYOUT_SHADES.shadow]
+    boxShadow: [vars("shadow-" + size + "-x"), vars("shadow-" + size + "-y"), vars("shadow-" + size + "-blur"), vars("shadow-" + size + "-spread"), vars("palette-neutral-color-" + LAYOUT_SHADES.shadow)].join(' ')
   };
 }
 
-function text(_ref, level) {
-  var t = _ref.text,
-      typography = _ref.typography,
-      palette = _ref.palette;
-  var _t$level = t[level],
-      lineHeight = _t$level.lineHeight,
-      size = _t$level.size;
+function text(vars, level) {
   return _extends({}, resetTypography(), {
-    color: palette.neutral.color[LAYOUT_SHADES.text],
-    fontFamily: typography.font.text,
-    fontSize: size,
-    lineHeight: lineHeight
+    color: vars("palette-neutral-color-" + LAYOUT_SHADES.text),
+    fontFamily: vars('typography-font-text'),
+    fontSize: vars("text-" + level + "-size"),
+    lineHeight: vars("text-" + level + "-line-height")
   });
@@ -238,3 +213,5 @@ }
 var Theme = function () {
-  function Theme(options, tokens, parentMixins) {
+  function Theme(options, tokens, design, parentMixins) {
+    var _this = this;
+
     _defineProperty(this, "contrast", void 0);
@@ -248,4 +225,31 @@
 
+    _defineProperty(this, "design", void 0);
+
+    _defineProperty(this, "mixin", function (names, properties) {
+      return utils.deepMerge.apply(void 0, utils.toArray(names).map(function (name) {
+        return _this.extendMixin(name);
+      }).concat([properties]));
+    });
+
+    _defineProperty(this, "unit", function () {
+      for (var _len = arguments.length, multipliers = new Array(_len), _key = 0; _key < _len; _key++) {
+        multipliers[_key] = arguments[_key];
+      }
+
+      return multipliers.map(function (m) {
+        return (_this.design.spacingUnit * m / _this.design.rootTextSize).toFixed(2).replace('.00', '') + "rem";
+      }).join(' ');
+    });
+
+    _defineProperty(this, "var", function (name) {
+      for (var _len2 = arguments.length, fallbacks = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        fallbacks[_key2 - 1] = arguments[_key2];
+      }
+
+      return "var(" + ["--" + name].concat(fallbacks).join(', ') + ")";
+    });
+
     this.contrast = options.contrast;
     this.scheme = options.scheme;
+    this.design = design;
     this.tokens = tokens;
@@ -265,11 +269,7 @@ this.mixins = parentMixins !== null && parentMixins !== void 0 ? parentMixins : this.createMixins();
       scheme: this.scheme
-    }, options), deepMerge(true, {}, this.tokens, tokens), this.mixins);
+    }, options), utils.deepMerge(this.tokens, tokens), this.design, this.mixins);
   };
 
-  _proto.mixin = function mixin(path, properties, overwrite) {
-    if (overwrite === void 0) {
-      overwrite = false;
-    }
-
-    var paths = path.split('.');
+  _proto.extendMixin = function extendMixin(name, properties, overwrite) {
+    var paths = name.split('-');
     var parent = this.mixins;
@@ -282,7 +282,7 @@ var target = this.mixins;
       parent = target;
-      target = target[key];
+      target = parent[key];
 
       if ("production" !== process.env.NODE_ENV) {
-        if (target === undefined || typeof target !== 'object') {
-          throw new Error("Unknown mixin \"" + path + "\".");
+        if (target === undefined || !utils.isObject(target)) {
+          throw new Error("Unknown mixin \"" + name + "\".");
         }
@@ -294,51 +294,80 @@ }
       parent[key] = _extends({}, properties);
-    } else {
-      parent[key] = deepMerge(true, {}, target, properties);
+    } else if (properties) {
+      parent[key] = utils.deepMerge(target, properties);
     }
 
-    return this;
+    return parent[key];
   };
 
+  _proto.overwriteMixin = function overwriteMixin(name, properties) {
+    return this.extendMixin(name, properties, true);
+  };
+
+  _proto.toTokens = function toTokens() {
+    return _extends({}, this.design.tokens, {}, this.tokens);
+  };
+
+  _proto.toVariables = function toVariables() {
+    var vars = {};
+
+    var collapseTree = function collapseTree(data, path) {
+      utils.objectLoop(data, function (value, key) {
+        if (utils.isObject(value)) {
+          collapseTree(value, [].concat(path, [utils.hyphenate(key)]));
+        } else {
+          vars[[].concat(path, [key]).join('-')] = value;
+        }
+      });
+    };
+
+    collapseTree(this.toTokens(), []);
+    return vars;
+  };
+
   _proto.createMixins = function createMixins() {
     return {
       border: {
-        sm: mixins.border(this.tokens, 'sm'),
-        df: mixins.border(this.tokens, 'df'),
-        lg: mixins.border(this.tokens, 'lg')
+        sm: mixins.border(this.var, 'sm'),
+        df: mixins.border(this.var, 'df'),
+        lg: mixins.border(this.var, 'lg')
       },
       box: {
-        sm: mixins.box(this.tokens, 'sm'),
-        df: mixins.box(this.tokens, 'df'),
-        lg: mixins.box(this.tokens, 'lg')
+        sm: mixins.box(this.var, 'sm'),
+        df: mixins.box(this.var, 'df'),
+        lg: mixins.box(this.var, 'lg')
       },
       heading: {
-        l1: mixins.heading(this.tokens, 'l1'),
-        l2: mixins.heading(this.tokens, 'l2'),
-        l3: mixins.heading(this.tokens, 'l3'),
-        l4: mixins.heading(this.tokens, 'l4'),
-        l5: mixins.heading(this.tokens, 'l5'),
-        l6: mixins.heading(this.tokens, 'l6')
+        l1: mixins.heading(this.var, 'l1'),
+        l2: mixins.heading(this.var, 'l2'),
+        l3: mixins.heading(this.var, 'l3'),
+        l4: mixins.heading(this.var, 'l4'),
+        l5: mixins.heading(this.var, 'l5'),
+        l6: mixins.heading(this.var, 'l6')
       },
       pattern: {
         hidden: mixins.hidden(),
-        hiddenOffscreen: mixins.hiddenOffscreen(),
-        resetButton: mixins.resetButton(),
-        resetInput: mixins.resetInput(),
-        resetList: mixins.resetList(),
-        resetTypography: mixins.resetTypography(),
-        textBreak: mixins.textBreak(),
-        textTruncate: mixins.textTruncate(),
-        textWrap: mixins.textWrap()
+        offscreen: mixins.hiddenOffscreen(),
+        reset: {
+          button: mixins.resetButton(),
+          input: mixins.resetInput(),
+          list: mixins.resetList(),
+          typography: mixins.resetTypography()
+        },
+        text: {
+          break: mixins.textBreak(),
+          truncate: mixins.textTruncate(),
+          wrap: mixins.textWrap()
+        }
       },
       shadow: {
-        xs: mixins.shadow(this.tokens, 'xs'),
-        sm: mixins.shadow(this.tokens, 'sm'),
-        md: mixins.shadow(this.tokens, 'md'),
-        lg: mixins.shadow(this.tokens, 'lg'),
-        xl: mixins.shadow(this.tokens, 'xl')
+        xs: mixins.shadow(this.var, 'xs'),
+        sm: mixins.shadow(this.var, 'sm'),
+        md: mixins.shadow(this.var, 'md'),
+        lg: mixins.shadow(this.var, 'lg'),
+        xl: mixins.shadow(this.var, 'xl')
       },
       text: {
-        sm: mixins.text(this.tokens, 'sm'),
-        df: mixins.text(this.tokens, 'df'),
-        lg: mixins.text(this.tokens, 'lg')
+        sm: mixins.text(this.var, 'sm'),
+        df: mixins.text(this.var, 'df'),
+        lg: mixins.text(this.var, 'lg')
       }
@@ -353,4 +382,2 @@ };
   function Design(tokens) {
-    var _this = this;
-
     _defineProperty(this, "rootLineHeight", void 0);
@@ -364,15 +391,4 @@
 
-    _defineProperty(this, "unit", function () {
-      for (var _len = arguments.length, multipliers = new Array(_len), _key = 0; _key < _len; _key++) {
-        multipliers[_key] = arguments[_key];
-      }
-
-      return multipliers.map(function (m) {
-        return (_this.spacingUnit * m / _this.rootTextSize).toFixed(2).replace('.00', '') + "rem";
-      }).join(' ');
-    });
-
     this.tokens = _extends({}, tokens, {
-      depth: DEPTHS,
-      unit: this.unit
+      depth: DEPTHS
     });
@@ -387,7 +403,7 @@ this.rootLineHeight = tokens.typography.rootLineHeight;
   _proto.createTheme = function createTheme(options, tokens) {
-    return new Theme(options, _extends({}, this.tokens, {}, tokens));
+    return new Theme(options, tokens, this);
   };
 
   _proto.extend = function extend(tokens) {
-    return new Design(deepMerge(true, {}, this.tokens, tokens));
+    return new Design(utils.deepMerge(this.tokens, tokens));
   };
@@ -394,0 +410,0 @@

lib/mixins/border.d.ts

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

lib/mixins/box.d.ts

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

lib/mixins/heading.d.ts

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

lib/mixins/shadow.d.ts

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

lib/mixins/text.d.ts

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

lib/Theme.d.ts

 import { DeclarationBlock } from '@aesthetic/sss';
-import { ColorScheme, ContrastLevel, ThemeOptions, Tokens, DeepPartial, ThemeTokens, Mixins, MixinTarget } from './types';
+import Design from './Design';
+import { ColorScheme, ContrastLevel, ThemeOptions, Tokens, DeepPartial, ThemeTokens, Mixins, MixinName, Variables, VarFactory, UnitFactory, MixinFactory } from './types';
 export default class Theme {
@@ -7,4 +8,5 @@ readonly contrast: ContrastLevel;
     readonly scheme: ColorScheme;
-    readonly tokens: Tokens;
-    constructor(options: ThemeOptions, tokens: Tokens, parentMixins?: Mixins);
+    readonly tokens: ThemeTokens;
+    private design;
+    constructor(options: ThemeOptions, tokens: ThemeTokens, design: Design, parentMixins?: Mixins);
     /**
@@ -15,7 +17,35 @@ * Extend and instantiate a new theme instance with customized tokens.
     /**
-     * Merge with or overwrite a mixin with a collection of properties.
+     * Extend a mixin with additional CSS properties, and return the new mixin.
      */
-    mixin(path: MixinTarget, properties: DeclarationBlock, overwrite?: boolean): this;
+    extendMixin(name: MixinName, properties?: DeclarationBlock, overwrite?: boolean): DeclarationBlock;
+    /**
+     * Merge one or many mixins into the defined properties.
+     * Properties take the highest precendence and will override mixin declarations.
+     */
+    mixin: MixinFactory;
+    /**
+     * Overwrite a mixin with a set of custom CSS properties, and return the new mixin.
+     */
+    overwriteMixin(name: MixinName, properties: DeclarationBlock): DeclarationBlock;
+    /**
+     * Return both design and theme tokens.
+     */
+    toTokens(): Tokens;
+    /**
+     * Return both design and theme tokens as a mapping of CSS variables.
+     */
+    toVariables(): Variables;
+    /**
+     * Return a `rem` unit equivalent for the current spacing type and unit.
+     */
+    unit: UnitFactory;
+    /**
+     * Return a CSS variable declaration with the defined name and fallbacks.
+     */
+    var: VarFactory;
+    /**
+     * Create the entire mapping of all mixins.
+     */
     protected createMixins(): Mixins;
 }
 //# sourceMappingURL=Theme.d.ts.map

lib/types.d.ts

@@ -16,3 +16,2 @@ import { DeclarationBlock } from '@aesthetic/sss';
 export declare type ColorShade = '00' | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90';
-export declare type UnitFactory = (...sizes: number[]) => Unit;
 export interface BorderToken {
@@ -91,4 +90,91 @@ radius: Unit;
     };
-    unit: UnitFactory;
 }
+export interface DesignVariables {
+    'border-sm-radius': Unit;
+    'border-sm-width': Unit;
+    'border-df-radius': Unit;
+    'border-df-width': Unit;
+    'border-lg-radius': Unit;
+    'border-lg-width': Unit;
+    'breakpoint-xs-query': string;
+    'breakpoint-xs-root-line-height': number;
+    'breakpoint-xs-root-text-size': Unit;
+    'breakpoint-sm-query': string;
+    'breakpoint-sm-root-line-height': number;
+    'breakpoint-sm-root-text-size': Unit;
+    'breakpoint-md-query': string;
+    'breakpoint-md-root-line-height': number;
+    'breakpoint-md-root-text-size': Unit;
+    'breakpoint-lg-query': string;
+    'breakpoint-lg-root-line-height': number;
+    'breakpoint-lg-root-text-size': Unit;
+    'breakpoint-xl-query': string;
+    'breakpoint-xl-root-line-height': number;
+    'breakpoint-xl-root-text-size': Unit;
+    'depth-content': number;
+    'depth-dialog': number;
+    'depth-menu': number;
+    'depth-modal': number;
+    'depth-navigation': number;
+    'depth-overlay': number;
+    'depth-sheet': number;
+    'depth-toast': number;
+    'depth-tooltip': number;
+    'heading-l1-letter-spacing': Unit;
+    'heading-l1-line-height': number;
+    'heading-l1-size': Unit;
+    'heading-l2-letter-spacing': Unit;
+    'heading-l2-line-height': number;
+    'heading-l2-size': Unit;
+    'heading-l3-letter-spacing': Unit;
+    'heading-l3-line-height': number;
+    'heading-l3-size': Unit;
+    'heading-l4-letter-spacing': Unit;
+    'heading-l4-line-height': number;
+    'heading-l4-size': Unit;
+    'heading-l5-letter-spacing': Unit;
+    'heading-l5-line-height': number;
+    'heading-l5-size': Unit;
+    'heading-l6-letter-spacing': Unit;
+    'heading-l6-line-height': number;
+    'heading-l6-size': Unit;
+    'shadow-xs-blur': Unit;
+    'shadow-xs-spread': Unit;
+    'shadow-xs-x': Unit;
+    'shadow-xs-y': Unit;
+    'shadow-sm-blur': Unit;
+    'shadow-sm-spread': Unit;
+    'shadow-sm-x': Unit;
+    'shadow-sm-y': Unit;
+    'shadow-md-blur': Unit;
+    'shadow-md-spread': Unit;
+    'shadow-md-x': Unit;
+    'shadow-md-y': Unit;
+    'shadow-lg-blur': Unit;
+    'shadow-lg-spread': Unit;
+    'shadow-lg-x': Unit;
+    'shadow-lg-y': Unit;
+    'shadow-xl-blur': Unit;
+    'shadow-xl-spread': Unit;
+    'shadow-xl-x': Unit;
+    'shadow-xl-y': Unit;
+    'spacing-xs': Unit;
+    'spacing-sm': Unit;
+    'spacing-df': Unit;
+    'spacing-md': Unit;
+    'spacing-lg': Unit;
+    'spacing-xl': Unit;
+    'text-sm-line-height': number;
+    'text-sm-size': Unit;
+    'text-df-line-height': number;
+    'text-df-size': Unit;
+    'text-lg-line-height': number;
+    'text-lg-size': Unit;
+    'typography-font-heading': string;
+    'typography-font-monospace': string;
+    'typography-font-text': string;
+    'typography-font-system': string;
+    'typography-root-line-height': number;
+    'typography-root-text-size': Unit;
+}
 export interface ThemeTokens {
@@ -103,3 +189,209 @@ palette: {
 }
+export interface ThemeVariables {
+    'palette-brand-color-00': Hexcode;
+    'palette-brand-color-10': Hexcode;
+    'palette-brand-color-20': Hexcode;
+    'palette-brand-color-30': Hexcode;
+    'palette-brand-color-40': Hexcode;
+    'palette-brand-color-50': Hexcode;
+    'palette-brand-color-60': Hexcode;
+    'palette-brand-color-70': Hexcode;
+    'palette-brand-color-80': Hexcode;
+    'palette-brand-color-90': Hexcode;
+    'palette-brand-bg-base': Hexcode;
+    'palette-brand-bg-disabled': Hexcode;
+    'palette-brand-bg-focused': Hexcode;
+    'palette-brand-bg-hovered': Hexcode;
+    'palette-brand-bg-selected': Hexcode;
+    'palette-brand-fg-base': Hexcode;
+    'palette-brand-fg-disabled': Hexcode;
+    'palette-brand-fg-focused': Hexcode;
+    'palette-brand-fg-hovered': Hexcode;
+    'palette-brand-fg-selected': Hexcode;
+    'palette-primary-color-00': Hexcode;
+    'palette-primary-color-10': Hexcode;
+    'palette-primary-color-20': Hexcode;
+    'palette-primary-color-30': Hexcode;
+    'palette-primary-color-40': Hexcode;
+    'palette-primary-color-50': Hexcode;
+    'palette-primary-color-60': Hexcode;
+    'palette-primary-color-70': Hexcode;
+    'palette-primary-color-80': Hexcode;
+    'palette-primary-color-90': Hexcode;
+    'palette-primary-bg-base': Hexcode;
+    'palette-primary-bg-disabled': Hexcode;
+    'palette-primary-bg-focused': Hexcode;
+    'palette-primary-bg-hovered': Hexcode;
+    'palette-primary-bg-selected': Hexcode;
+    'palette-primary-fg-base': Hexcode;
+    'palette-primary-fg-disabled': Hexcode;
+    'palette-primary-fg-focused': Hexcode;
+    'palette-primary-fg-hovered': Hexcode;
+    'palette-primary-fg-selected': Hexcode;
+    'palette-secondary-color-00': Hexcode;
+    'palette-secondary-color-10': Hexcode;
+    'palette-secondary-color-20': Hexcode;
+    'palette-secondary-color-30': Hexcode;
+    'palette-secondary-color-40': Hexcode;
+    'palette-secondary-color-50': Hexcode;
+    'palette-secondary-color-60': Hexcode;
+    'palette-secondary-color-70': Hexcode;
+    'palette-secondary-color-80': Hexcode;
+    'palette-secondary-color-90': Hexcode;
+    'palette-secondary-bg-base': Hexcode;
+    'palette-secondary-bg-disabled': Hexcode;
+    'palette-secondary-bg-focused': Hexcode;
+    'palette-secondary-bg-hovered': Hexcode;
+    'palette-secondary-bg-selected': Hexcode;
+    'palette-secondary-fg-base': Hexcode;
+    'palette-secondary-fg-disabled': Hexcode;
+    'palette-secondary-fg-focused': Hexcode;
+    'palette-secondary-fg-hovered': Hexcode;
+    'palette-secondary-fg-selected': Hexcode;
+    'palette-tertiary-color-00': Hexcode;
+    'palette-tertiary-color-10': Hexcode;
+    'palette-tertiary-color-20': Hexcode;
+    'palette-tertiary-color-30': Hexcode;
+    'palette-tertiary-color-40': Hexcode;
+    'palette-tertiary-color-50': Hexcode;
+    'palette-tertiary-color-60': Hexcode;
+    'palette-tertiary-color-70': Hexcode;
+    'palette-tertiary-color-80': Hexcode;
+    'palette-tertiary-color-90': Hexcode;
+    'palette-tertiary-bg-base': Hexcode;
+    'palette-tertiary-bg-disabled': Hexcode;
+    'palette-tertiary-bg-focused': Hexcode;
+    'palette-tertiary-bg-hovered': Hexcode;
+    'palette-tertiary-bg-selected': Hexcode;
+    'palette-tertiary-fg-base': Hexcode;
+    'palette-tertiary-fg-disabled': Hexcode;
+    'palette-tertiary-fg-focused': Hexcode;
+    'palette-tertiary-fg-hovered': Hexcode;
+    'palette-tertiary-fg-selected': Hexcode;
+    'palette-neutral-color-00': Hexcode;
+    'palette-neutral-color-10': Hexcode;
+    'palette-neutral-color-20': Hexcode;
+    'palette-neutral-color-30': Hexcode;
+    'palette-neutral-color-40': Hexcode;
+    'palette-neutral-color-50': Hexcode;
+    'palette-neutral-color-60': Hexcode;
+    'palette-neutral-color-70': Hexcode;
+    'palette-neutral-color-80': Hexcode;
+    'palette-neutral-color-90': Hexcode;
+    'palette-neutral-bg-base': Hexcode;
+    'palette-neutral-bg-disabled': Hexcode;
+    'palette-neutral-bg-focused': Hexcode;
+    'palette-neutral-bg-hovered': Hexcode;
+    'palette-neutral-bg-selected': Hexcode;
+    'palette-neutral-fg-base': Hexcode;
+    'palette-neutral-fg-disabled': Hexcode;
+    'palette-neutral-fg-focused': Hexcode;
+    'palette-neutral-fg-hovered': Hexcode;
+    'palette-neutral-fg-selected': Hexcode;
+    'palette-muted-color-00': Hexcode;
+    'palette-muted-color-10': Hexcode;
+    'palette-muted-color-20': Hexcode;
+    'palette-muted-color-30': Hexcode;
+    'palette-muted-color-40': Hexcode;
+    'palette-muted-color-50': Hexcode;
+    'palette-muted-color-60': Hexcode;
+    'palette-muted-color-70': Hexcode;
+    'palette-muted-color-80': Hexcode;
+    'palette-muted-color-90': Hexcode;
+    'palette-muted-bg-base': Hexcode;
+    'palette-muted-bg-disabled': Hexcode;
+    'palette-muted-bg-focused': Hexcode;
+    'palette-muted-bg-hovered': Hexcode;
+    'palette-muted-bg-selected': Hexcode;
+    'palette-muted-fg-base': Hexcode;
+    'palette-muted-fg-disabled': Hexcode;
+    'palette-muted-fg-focused': Hexcode;
+    'palette-muted-fg-hovered': Hexcode;
+    'palette-muted-fg-selected': Hexcode;
+    'palette-info-color-00': Hexcode;
+    'palette-info-color-10': Hexcode;
+    'palette-info-color-20': Hexcode;
+    'palette-info-color-30': Hexcode;
+    'palette-info-color-40': Hexcode;
+    'palette-info-color-50': Hexcode;
+    'palette-info-color-60': Hexcode;
+    'palette-info-color-70': Hexcode;
+    'palette-info-color-80': Hexcode;
+    'palette-info-color-90': Hexcode;
+    'palette-info-bg-base': Hexcode;
+    'palette-info-bg-disabled': Hexcode;
+    'palette-info-bg-focused': Hexcode;
+    'palette-info-bg-hovered': Hexcode;
+    'palette-info-bg-selected': Hexcode;
+    'palette-info-fg-base': Hexcode;
+    'palette-info-fg-disabled': Hexcode;
+    'palette-info-fg-focused': Hexcode;
+    'palette-info-fg-hovered': Hexcode;
+    'palette-info-fg-selected': Hexcode;
+    'palette-warning-color-00': Hexcode;
+    'palette-warning-color-10': Hexcode;
+    'palette-warning-color-20': Hexcode;
+    'palette-warning-color-30': Hexcode;
+    'palette-warning-color-40': Hexcode;
+    'palette-warning-color-50': Hexcode;
+    'palette-warning-color-60': Hexcode;
+    'palette-warning-color-70': Hexcode;
+    'palette-warning-color-80': Hexcode;
+    'palette-warning-color-90': Hexcode;
+    'palette-warning-bg-base': Hexcode;
+    'palette-warning-bg-disabled': Hexcode;
+    'palette-warning-bg-focused': Hexcode;
+    'palette-warning-bg-hovered': Hexcode;
+    'palette-warning-bg-selected': Hexcode;
+    'palette-warning-fg-base': Hexcode;
+    'palette-warning-fg-disabled': Hexcode;
+    'palette-warning-fg-focused': Hexcode;
+    'palette-warning-fg-hovered': Hexcode;
+    'palette-warning-fg-selected': Hexcode;
+    'palette-danger-color-00': Hexcode;
+    'palette-danger-color-10': Hexcode;
+    'palette-danger-color-20': Hexcode;
+    'palette-danger-color-30': Hexcode;
+    'palette-danger-color-40': Hexcode;
+    'palette-danger-color-50': Hexcode;
+    'palette-danger-color-60': Hexcode;
+    'palette-danger-color-70': Hexcode;
+    'palette-danger-color-80': Hexcode;
+    'palette-danger-color-90': Hexcode;
+    'palette-danger-bg-base': Hexcode;
+    'palette-danger-bg-disabled': Hexcode;
+    'palette-danger-bg-focused': Hexcode;
+    'palette-danger-bg-hovered': Hexcode;
+    'palette-danger-bg-selected': Hexcode;
+    'palette-danger-fg-base': Hexcode;
+    'palette-danger-fg-disabled': Hexcode;
+    'palette-danger-fg-focused': Hexcode;
+    'palette-danger-fg-hovered': Hexcode;
+    'palette-danger-fg-selected': Hexcode;
+    'palette-success-color-00': Hexcode;
+    'palette-success-color-10': Hexcode;
+    'palette-success-color-20': Hexcode;
+    'palette-success-color-30': Hexcode;
+    'palette-success-color-40': Hexcode;
+    'palette-success-color-50': Hexcode;
+    'palette-success-color-60': Hexcode;
+    'palette-success-color-70': Hexcode;
+    'palette-success-color-80': Hexcode;
+    'palette-success-color-90': Hexcode;
+    'palette-success-bg-base': Hexcode;
+    'palette-success-bg-disabled': Hexcode;
+    'palette-success-bg-focused': Hexcode;
+    'palette-success-bg-hovered': Hexcode;
+    'palette-success-bg-selected': Hexcode;
+    'palette-success-fg-base': Hexcode;
+    'palette-success-fg-disabled': Hexcode;
+    'palette-success-fg-focused': Hexcode;
+    'palette-success-fg-hovered': Hexcode;
+    'palette-success-fg-selected': Hexcode;
+}
 export declare type Tokens = DesignTokens & ThemeTokens;
+export declare type Variables = DesignVariables & ThemeVariables;
+export declare type VariableName = keyof Variables;
+export declare type VarFactory = (name: VariableName, ...fallbacks: (string | number)[]) => string;
+export declare type UnitFactory = (...sizes: number[]) => Unit;
 export interface Mixins {
@@ -117,10 +409,14 @@ border: {
         hidden: DeclarationBlock;
-        hiddenOffscreen: DeclarationBlock;
-        resetButton: DeclarationBlock;
-        resetInput: DeclarationBlock;
-        resetList: DeclarationBlock;
-        resetTypography: DeclarationBlock;
-        textBreak: DeclarationBlock;
-        textTruncate: DeclarationBlock;
-        textWrap: DeclarationBlock;
+        offscreen: DeclarationBlock;
+        reset: {
+            button: DeclarationBlock;
+            input: DeclarationBlock;
+            list: DeclarationBlock;
+            typography: DeclarationBlock;
+        };
+        text: {
+            break: DeclarationBlock;
+            truncate: DeclarationBlock;
+            wrap: DeclarationBlock;
+        };
     };
@@ -134,3 +430,4 @@ shadow: {
 }
-export declare type MixinTarget = 'border.sm' | 'border.df' | 'border.lg' | 'box.sm' | 'box.df' | 'box.lg' | 'heading.l1' | 'heading.l2' | 'heading.l3' | 'heading.l4' | 'heading.l5' | 'heading.l6' | 'shadow.xs' | 'shadow.sm' | 'shadow.df' | 'shadow.lg' | 'shadow.xl' | 'text.sm' | 'text.df' | 'text.lg';
+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 interface ThemeOptions {
@@ -137,0 +434,0 @@ contrast: ContrastLevel;

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

70489

increased by48.04%

Lines of code

1512

increased by29.23%

Dependency changes

• + Added@aesthetic/utils@^0.0.2

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

• + Addedstring-hash@1.1.3(transitive)

• - Removedextend@^3.0.2