@aesthetic/system - npm Package Compare versions

Comparing version 0.8.1 to 0.8.2

dts/constants.d.ts

@@ -1,5 +0,13 @@
-import { ColorShade, ElevationType, PaletteType } from './types';
+import { BorderSize, BreakpointSize, ColorShade, CommonSize, ElevationType, HeadingLevel, HeadingSize, PaletteType, ShadowSize, SpacingSize, TextSize } from './types';
+export declare const BORDER_SIZES: BorderSize[];
+export declare const BREAKPOINT_SIZES: BreakpointSize[];
 export declare const DEPTHS: Record<ElevationType, number>;
+export declare const SIZES: CommonSize[];
+export declare const HEADING_LEVELS: HeadingLevel[];
+export declare const HEADING_SIZES: HeadingSize[];
+export declare const PALETTE_TYPES: PaletteType[];
 export declare const SHADE_RANGES: ColorShade[];
-export declare const PALETTE_TYPES: PaletteType[];
+export declare const SHADOW_SIZES: ShadowSize[];
+export declare const SPACING_SIZES: SpacingSize[];
+export declare const TEXT_SIZES: TextSize[];
 //# sourceMappingURL=constants.d.ts.map

dts/types.d.ts

@@ -7,2 +7,3 @@ import { ColorScheme, ContrastLevel, Unit } from '@aesthetic/types';
 export declare type HeadingSize = 'l1' | 'l2' | 'l3' | 'l4' | 'l5' | 'l6';
+export declare type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export declare type ElevationType = 'content' | 'dialog' | 'menu' | 'modal' | 'navigation' | 'overlay' | 'sheet' | 'toast' | 'tooltip';
@@ -9,0 +10,0 @@ export declare type PaletteType = 'brand' | 'danger' | 'muted' | 'negative' | 'neutral' | 'positive' | 'primary' | 'secondary' | 'tertiary' | 'warning';

esm/index.js

@@ -1,337 +0,7 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-// Generated with Packemon: https://packemon.dev
+// Bundled with Packemon: https://packemon.dev
 // Platform: browser, Support: stable, Format: esm
-import { objectLoop, deepMerge, hyphenate, isObject } from '@aesthetic/utils';
-var DEPTHS = {
-  content: 100,
-  // xs
-  navigation: 1000,
-  // sm
-  sheet: 1100,
-  // lg
-  overlay: 1200,
-  // lg
-  modal: 1300,
-  // xl
-  toast: 1400,
-  // md
-  dialog: 1500,
-  // md
-  menu: 1600,
-  // md
-  tooltip: 1700 // sm
+import { T as Theme } from './bundle-dbc791d5.js';
+export { B as BORDER_SIZES, a as BREAKPOINT_SIZES, b as DEPTHS, D as Design, H as HEADING_LEVELS, c as HEADING_SIZES, P as PALETTE_TYPES, d as SHADE_RANGES, e as SHADOW_SIZES, S as SIZES, f as SPACING_SIZES, g as TEXT_SIZES, T as Theme, m as mixin } from './bundle-dbc791d5.js';
+import '@aesthetic/utils';
 
-};
-var SHADE_RANGES = ['00', '10', '20', '30', '40', '50', '60', '70', '80', '90'];
-var PALETTE_TYPES = ['brand', 'primary', 'secondary', 'tertiary', 'neutral', 'muted', 'danger', 'warning', 'negative', 'positive'];
-
-function hideOffscreen() {
-  return {
-    clipPath: 'rect(1px, 1px, 1px, 1px)',
-    height: 1,
-    left: '-5vw',
-    overflow: 'hidden',
-    position: 'fixed',
-    width: 1
-  };
-}
-
-function hideVisually() {
-  return {
-    '@selectors': {
-      ':not(:focus):not(:active)': {
-        border: 0,
-        clip: 'rect(0, 0, 0, 0)',
-        clipPath: 'inset(50%)',
-        height: 1,
-        margin: 0,
-        overflow: 'hidden',
-        padding: 0,
-        position: 'absolute',
-        whiteSpace: 'nowrap',
-        width: 1
-      }
-    }
-  };
-}
-
-function resetButton() {
-  return {
-    appearance: 'none',
-    backgroundColor: 'transparent',
-    border: 0,
-    cursor: 'pointer',
-    display: 'inline-flex',
-    fontSize: 'inherit',
-    margin: 0,
-    padding: 0,
-    textDecoration: 'none',
-    userSelect: 'auto',
-    verticalAlign: 'middle'
-  };
-}
-
-function resetInput() {
-  return {
-    appearance: 'none',
-    backgroundColor: 'transparent',
-    margin: 0,
-    padding: 0,
-    width: '100%',
-    '@selectors': {
-      '::-moz-focus-outer': {
-        border: 0
-      }
-    }
-  };
-}
-
-function resetList() {
-  return {
-    listStyle: 'none',
-    margin: 0,
-    padding: 0
-  };
-}
-
-function resetMedia() {
-  return {
-    display: 'block',
-    verticalAlign: 'middle'
-  };
-}
-
-function resetTypography() {
-  return {
-    fontFamily: 'inherit',
-    fontSize: 'inherit',
-    fontWeight: 'normal',
-    wordWrap: 'break-word'
-  };
-}
-
-function root(css) {
-  var declaration = {
-    backgroundColor: css.var('palette-neutral-color-00'),
-    color: css.var('palette-neutral-text'),
-    fontFamily: css.var('typography-font-text'),
-    fontSize: css.var('typography-root-text-size'),
-    lineHeight: css.var('typography-root-line-height'),
-    textRendering: 'optimizeLegibility',
-    textSizeAdjust: '100%',
-    margin: 0,
-    padding: 0,
-    '-webkit-font-smoothing': 'antialiased',
-    '-moz-osx-font-smoothing': 'grayscale',
-    '@media': {}
-  }; // Fluid typography!
-
-  objectLoop(css.tokens.breakpoint, function (bp, size) {
-    declaration['@media'][bp.query] = {
-      fontSize: css.var("breakpoint-" + size + "-root-text-size"),
-      lineHeight: css.var("breakpoint-" + size + "-root-line-height")
-    };
-  });
-  return declaration;
-}
-
-function textBreak() {
-  return {
-    overflowWrap: 'break-word',
-    wordWrap: 'break-word',
-    wordBreak: 'break-word'
-  };
-}
-
-function textTruncate() {
-  return {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  };
-}
-
-function textWrap() {
-  return {
-    overflowWrap: 'normal',
-    wordWrap: 'normal',
-    wordBreak: 'normal'
-  };
-} // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-
-var MIXIN_MAP = {
-  'hide-offscreen': hideOffscreen,
-  'hide-visually': hideVisually,
-  'reset-button': resetButton,
-  'reset-input': resetInput,
-  'reset-list': resetList,
-  'reset-media': resetMedia,
-  'reset-typography': resetTypography,
-  root: root,
-  'text-break': textBreak,
-  'text-truncate': textTruncate,
-  'text-wrap': textWrap
-};
-var mixins = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  hideOffscreen: hideOffscreen,
-  hideVisually: hideVisually,
-  resetButton: resetButton,
-  resetInput: resetInput,
-  resetList: resetList,
-  resetMedia: resetMedia,
-  resetTypography: resetTypography,
-  root: root,
-  textBreak: textBreak,
-  textTruncate: textTruncate,
-  textWrap: textWrap,
-  MIXIN_MAP: MIXIN_MAP
-});
-/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any */
-
-var Theme = /*#__PURE__*/function () {
-  function Theme(options, tokens, design) {
-    var _this = this;
-
-    this.name = '';
-    this.contrast = void 0;
-    this.scheme = void 0;
-    this.tokens = void 0;
-    this.cssVariables = void 0;
-    this.design = void 0;
-
-    this.mixin = function (name, rule) {
-      var properties = {};
-      var mixin = MIXIN_MAP[name];
-
-      if (mixin) {
-        Object.assign(properties, mixin(_this));
-      } else if (process.env.NODE_ENV !== "production") {
-        throw new Error("Unknown mixin \"" + name + "\".");
-      }
-
-      if (rule) {
-        return deepMerge(properties, rule);
-      }
-
-      return properties;
-    };
-
-    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(' ');
-    };
-
-    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 = _extends({}, design.tokens, tokens);
-  }
-  /**
-   * Extend and instantiate a new theme instance with customized tokens.
-   */
-
-
-  var _proto = Theme.prototype;
-
-  _proto.extend = function extend(tokens, options) {
-    if (options === void 0) {
-      options = {};
-    }
-
-    return new Theme(_extends({
-      contrast: this.contrast,
-      scheme: this.scheme
-    }, options), deepMerge(this.tokens, tokens), this.design);
-  }
-  /**
-   * Return both design and theme tokens as a mapping of CSS variables.
-   */
-  ;
-
-  _proto.toVariables = function toVariables() {
-    if (this.cssVariables) {
-      return this.cssVariables;
-    }
-
-    var vars = {};
-
-    var collapseTree = function collapseTree(data, path) {
-      objectLoop(data, function (value, key) {
-        var nextPath = [].concat(path, [hyphenate(key)]);
-
-        if (isObject(value)) {
-          collapseTree(value, nextPath);
-        } else {
-          vars["--" + nextPath.join('-')] = value;
-        }
-      });
-    };
-
-    collapseTree(this.tokens, []);
-    this.cssVariables = vars;
-    return this.cssVariables;
-  }
-  /**
-   * Return merged CSS properties from the defined mixin, all template overrides,
-   * and the provided additional CSS properties.
-   */
-  ;
-
-  return Theme;
-}();
-
-var Design = /*#__PURE__*/function () {
-  function Design(name, tokens) {
-    this.name = void 0;
-    this.rootLineHeight = void 0;
-    this.rootTextSize = void 0;
-    this.spacingUnit = void 0;
-    this.tokens = void 0;
-    this.name = name;
-    this.tokens = _extends({}, tokens, {
-      depth: DEPTHS
-    });
-    this.rootLineHeight = tokens.typography.rootLineHeight;
-    this.rootTextSize = Number.parseFloat(tokens.typography.rootTextSize); // Pre-compiled for the chosen type, no need to calculate manually
-
-    this.spacingUnit = tokens.spacing.unit;
-  }
-  /**
-   * Create a new theme with the defined theme tokens, while inheriting the shared design tokens.
-   */
-
-
-  var _proto2 = Design.prototype;
-
-  _proto2.createTheme = function createTheme(options, tokens) {
-    return new Theme(options, tokens, this);
-  }
-  /**
-   * Extend and instantiate a new design instance with customized design tokens.
-   */
-  ;
-
-  _proto2.extend = function extend(name, tokens) {
-    return new Design(name, deepMerge(this.tokens, tokens));
-  };
-
-  return Design;
-}();
-
 var ThemeRegistry = /*#__PURE__*/function () {
@@ -349,5 +19,5 @@ function ThemeRegistry() {
 
-  var _proto3 = ThemeRegistry.prototype;
+  var _proto = ThemeRegistry.prototype;
 
-  _proto3.getDarkTheme = function getDarkTheme() {
+  _proto.getDarkTheme = function getDarkTheme() {
     return this.getTheme(this.darkTheme);
@@ -360,3 +30,3 @@ }
 
-  _proto3.getLightTheme = function getLightTheme() {
+  _proto.getLightTheme = function getLightTheme() {
     return this.getTheme(this.lightTheme);
@@ -370,4 +40,4 @@ }
 
-  _proto3.getPreferredTheme = function getPreferredTheme(_temp) {
-    var _this2 = this;
+  _proto.getPreferredTheme = function getPreferredTheme(_temp) {
+    var _this = this;
 
@@ -402,3 +72,3 @@ var _ref = _temp === void 0 ? {} : _temp,
       return contrastCheckOrder.some(function (contrast) {
-        possibleTheme = _this2.query({
+        possibleTheme = _this.query({
           contrast: contrast,
@@ -424,3 +94,3 @@ scheme: scheme
 
-  _proto3.getTheme = function getTheme(name) {
+  _proto.getTheme = function getTheme(name) {
     if (process.env.NODE_ENV !== "production") {
@@ -447,3 +117,3 @@ if (!name) {
 
-  _proto3.query = function query(params) {
+  _proto.query = function query(params) {
     return Object.values(this.themes).find(function (theme) {
@@ -471,3 +141,3 @@ var conditions = [];
 
-  _proto3.register = function register(name, theme, isDefault) {
+  _proto.register = function register(name, theme, isDefault) {
     if (isDefault === void 0) {
@@ -512,3 +182,3 @@ isDefault = false;
 
-  _proto3.reset = function reset() {
+  _proto.reset = function reset() {
     this.darkTheme = '';
@@ -522,9 +192,4 @@ this.lightTheme = '';
 }();
-/**
- * @copyright   2020, Miles Johnson
- * @license     https://opensource.org/licenses/MIT
- */
 
-
-export { DEPTHS, Design, PALETTE_TYPES, SHADE_RANGES, Theme, ThemeRegistry, mixins as mixin };
+export { ThemeRegistry };
 //# sourceMappingURL=index.js.map

esm/test.js

@@ -1,4 +0,5 @@
-// Generated with Packemon: https://packemon.dev
+// Bundled with Packemon: https://packemon.dev
 // Platform: browser, Support: stable, Format: esm
-import { Design } from './index.js';
+import { D as Design } from './bundle-dbc791d5.js';
+import '@aesthetic/utils';
 var design = new Design('test-design', {
@@ -5,0 +6,0 @@ border: {

lib/index.js

@@ -1,7 +0,5 @@
-// Generated with Packemon: https://packemon.dev
+// Bundled with Packemon: https://packemon.dev
 // Platform: browser, Support: stable, Format: lib
 'use strict';
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 Object.defineProperty(exports, '__esModule', {
@@ -11,335 +9,6 @@ value: true
 
-var utils = require('@aesthetic/utils');
+var Design = require('./bundle-0c2acb8a.js');
 
-var DEPTHS = {
-  content: 100,
-  // xs
-  navigation: 1000,
-  // sm
-  sheet: 1100,
-  // lg
-  overlay: 1200,
-  // lg
-  modal: 1300,
-  // xl
-  toast: 1400,
-  // md
-  dialog: 1500,
-  // md
-  menu: 1600,
-  // md
-  tooltip: 1700 // sm
+require('@aesthetic/utils');
 
-};
-var SHADE_RANGES = ['00', '10', '20', '30', '40', '50', '60', '70', '80', '90'];
-var PALETTE_TYPES = ['brand', 'primary', 'secondary', 'tertiary', 'neutral', 'muted', 'danger', 'warning', 'negative', 'positive'];
-
-function hideOffscreen() {
-  return {
-    clipPath: 'rect(1px, 1px, 1px, 1px)',
-    height: 1,
-    left: '-5vw',
-    overflow: 'hidden',
-    position: 'fixed',
-    width: 1
-  };
-}
-
-function hideVisually() {
-  return {
-    '@selectors': {
-      ':not(:focus):not(:active)': {
-        border: 0,
-        clip: 'rect(0, 0, 0, 0)',
-        clipPath: 'inset(50%)',
-        height: 1,
-        margin: 0,
-        overflow: 'hidden',
-        padding: 0,
-        position: 'absolute',
-        whiteSpace: 'nowrap',
-        width: 1
-      }
-    }
-  };
-}
-
-function resetButton() {
-  return {
-    appearance: 'none',
-    backgroundColor: 'transparent',
-    border: 0,
-    cursor: 'pointer',
-    display: 'inline-flex',
-    fontSize: 'inherit',
-    margin: 0,
-    padding: 0,
-    textDecoration: 'none',
-    userSelect: 'auto',
-    verticalAlign: 'middle'
-  };
-}
-
-function resetInput() {
-  return {
-    appearance: 'none',
-    backgroundColor: 'transparent',
-    margin: 0,
-    padding: 0,
-    width: '100%',
-    '@selectors': {
-      '::-moz-focus-outer': {
-        border: 0
-      }
-    }
-  };
-}
-
-function resetList() {
-  return {
-    listStyle: 'none',
-    margin: 0,
-    padding: 0
-  };
-}
-
-function resetMedia() {
-  return {
-    display: 'block',
-    verticalAlign: 'middle'
-  };
-}
-
-function resetTypography() {
-  return {
-    fontFamily: 'inherit',
-    fontSize: 'inherit',
-    fontWeight: 'normal',
-    wordWrap: 'break-word'
-  };
-}
-
-function root(css) {
-  var declaration = {
-    backgroundColor: css.var('palette-neutral-color-00'),
-    color: css.var('palette-neutral-text'),
-    fontFamily: css.var('typography-font-text'),
-    fontSize: css.var('typography-root-text-size'),
-    lineHeight: css.var('typography-root-line-height'),
-    textRendering: 'optimizeLegibility',
-    textSizeAdjust: '100%',
-    margin: 0,
-    padding: 0,
-    '-webkit-font-smoothing': 'antialiased',
-    '-moz-osx-font-smoothing': 'grayscale',
-    '@media': {}
-  }; // Fluid typography!
-
-  utils.objectLoop(css.tokens.breakpoint, function (bp, size) {
-    declaration['@media'][bp.query] = {
-      fontSize: css.var("breakpoint-" + size + "-root-text-size"),
-      lineHeight: css.var("breakpoint-" + size + "-root-line-height")
-    };
-  });
-  return declaration;
-}
-
-function textBreak() {
-  return {
-    overflowWrap: 'break-word',
-    wordWrap: 'break-word',
-    wordBreak: 'break-word'
-  };
-}
-
-function textTruncate() {
-  return {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  };
-}
-
-function textWrap() {
-  return {
-    overflowWrap: 'normal',
-    wordWrap: 'normal',
-    wordBreak: 'normal'
-  };
-} // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-
-var MIXIN_MAP = {
-  'hide-offscreen': hideOffscreen,
-  'hide-visually': hideVisually,
-  'reset-button': resetButton,
-  'reset-input': resetInput,
-  'reset-list': resetList,
-  'reset-media': resetMedia,
-  'reset-typography': resetTypography,
-  root: root,
-  'text-break': textBreak,
-  'text-truncate': textTruncate,
-  'text-wrap': textWrap
-};
-var mixins = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  hideOffscreen: hideOffscreen,
-  hideVisually: hideVisually,
-  resetButton: resetButton,
-  resetInput: resetInput,
-  resetList: resetList,
-  resetMedia: resetMedia,
-  resetTypography: resetTypography,
-  root: root,
-  textBreak: textBreak,
-  textTruncate: textTruncate,
-  textWrap: textWrap,
-  MIXIN_MAP: MIXIN_MAP
-});
-/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any */
-
-var Theme = /*#__PURE__*/function () {
-  function Theme(options, tokens, design) {
-    var _this = this;
-
-    this.name = '';
-    this.contrast = void 0;
-    this.scheme = void 0;
-    this.tokens = void 0;
-    this.cssVariables = void 0;
-    this.design = void 0;
-
-    this.mixin = function (name, rule) {
-      var properties = {};
-      var mixin = MIXIN_MAP[name];
-
-      if (mixin) {
-        Object.assign(properties, mixin(_this));
-      } else if (process.env.NODE_ENV !== "production") {
-        throw new Error("Unknown mixin \"" + name + "\".");
-      }
-
-      if (rule) {
-        return utils.deepMerge(properties, rule);
-      }
-
-      return properties;
-    };
-
-    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(' ');
-    };
-
-    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 = _extends({}, design.tokens, tokens);
-  }
-  /**
-   * Extend and instantiate a new theme instance with customized tokens.
-   */
-
-
-  var _proto = Theme.prototype;
-
-  _proto.extend = function extend(tokens, options) {
-    if (options === void 0) {
-      options = {};
-    }
-
-    return new Theme(_extends({
-      contrast: this.contrast,
-      scheme: this.scheme
-    }, options), utils.deepMerge(this.tokens, tokens), this.design);
-  }
-  /**
-   * Return both design and theme tokens as a mapping of CSS variables.
-   */
-  ;
-
-  _proto.toVariables = function toVariables() {
-    if (this.cssVariables) {
-      return this.cssVariables;
-    }
-
-    var vars = {};
-
-    var collapseTree = function collapseTree(data, path) {
-      utils.objectLoop(data, function (value, key) {
-        var nextPath = [].concat(path, [utils.hyphenate(key)]);
-
-        if (utils.isObject(value)) {
-          collapseTree(value, nextPath);
-        } else {
-          vars["--" + nextPath.join('-')] = value;
-        }
-      });
-    };
-
-    collapseTree(this.tokens, []);
-    this.cssVariables = vars;
-    return this.cssVariables;
-  }
-  /**
-   * Return merged CSS properties from the defined mixin, all template overrides,
-   * and the provided additional CSS properties.
-   */
-  ;
-
-  return Theme;
-}();
-
-var Design = /*#__PURE__*/function () {
-  function Design(name, tokens) {
-    this.name = void 0;
-    this.rootLineHeight = void 0;
-    this.rootTextSize = void 0;
-    this.spacingUnit = void 0;
-    this.tokens = void 0;
-    this.name = name;
-    this.tokens = _extends({}, tokens, {
-      depth: DEPTHS
-    });
-    this.rootLineHeight = tokens.typography.rootLineHeight;
-    this.rootTextSize = Number.parseFloat(tokens.typography.rootTextSize); // Pre-compiled for the chosen type, no need to calculate manually
-
-    this.spacingUnit = tokens.spacing.unit;
-  }
-  /**
-   * Create a new theme with the defined theme tokens, while inheriting the shared design tokens.
-   */
-
-
-  var _proto2 = Design.prototype;
-
-  _proto2.createTheme = function createTheme(options, tokens) {
-    return new Theme(options, tokens, this);
-  }
-  /**
-   * Extend and instantiate a new design instance with customized design tokens.
-   */
-  ;
-
-  _proto2.extend = function extend(name, tokens) {
-    return new Design(name, utils.deepMerge(this.tokens, tokens));
-  };
-
-  return Design;
-}();
-
 var ThemeRegistry = /*#__PURE__*/function () {
@@ -357,5 +26,5 @@ function ThemeRegistry() {
 
-  var _proto3 = ThemeRegistry.prototype;
+  var _proto = ThemeRegistry.prototype;
 
-  _proto3.getDarkTheme = function getDarkTheme() {
+  _proto.getDarkTheme = function getDarkTheme() {
     return this.getTheme(this.darkTheme);
@@ -368,3 +37,3 @@ }
 
-  _proto3.getLightTheme = function getLightTheme() {
+  _proto.getLightTheme = function getLightTheme() {
     return this.getTheme(this.lightTheme);
@@ -378,4 +47,4 @@ }
 
-  _proto3.getPreferredTheme = function getPreferredTheme(_temp) {
-    var _this2 = this;
+  _proto.getPreferredTheme = function getPreferredTheme(_temp) {
+    var _this = this;
 
@@ -410,3 +79,3 @@ var _ref = _temp === void 0 ? {} : _temp,
       return contrastCheckOrder.some(function (contrast) {
-        possibleTheme = _this2.query({
+        possibleTheme = _this.query({
           contrast: contrast,
@@ -432,3 +101,3 @@ scheme: scheme
 
-  _proto3.getTheme = function getTheme(name) {
+  _proto.getTheme = function getTheme(name) {
     if (process.env.NODE_ENV !== "production") {
@@ -455,3 +124,3 @@ if (!name) {
 
-  _proto3.query = function query(params) {
+  _proto.query = function query(params) {
     return Object.values(this.themes).find(function (theme) {
@@ -479,3 +148,3 @@ var conditions = [];
 
-  _proto3.register = function register(name, theme, isDefault) {
+  _proto.register = function register(name, theme, isDefault) {
     if (isDefault === void 0) {
@@ -486,3 +155,3 @@ isDefault = false;
     if (process.env.NODE_ENV !== "production") {
-      if (!(theme instanceof Theme)) {
+      if (!(theme instanceof Design.Theme)) {
         throw new TypeError('Only a `Theme` object can be registered.');
@@ -521,3 +190,3 @@ }
 
-  _proto3.reset = function reset() {
+  _proto.reset = function reset() {
     this.darkTheme = '';
@@ -531,15 +200,18 @@ this.lightTheme = '';
 }();
-/**
- * @copyright   2020, Miles Johnson
- * @license     https://opensource.org/licenses/MIT
- */
 
-
-exports.DEPTHS = DEPTHS;
-exports.Design = Design;
-exports.PALETTE_TYPES = PALETTE_TYPES;
-exports.SHADE_RANGES = SHADE_RANGES;
-exports.Theme = Theme;
+exports.BORDER_SIZES = Design.BORDER_SIZES;
+exports.BREAKPOINT_SIZES = Design.BREAKPOINT_SIZES;
+exports.DEPTHS = Design.DEPTHS;
+exports.Design = Design.Design;
+exports.HEADING_LEVELS = Design.HEADING_LEVELS;
+exports.HEADING_SIZES = Design.HEADING_SIZES;
+exports.PALETTE_TYPES = Design.PALETTE_TYPES;
+exports.SHADE_RANGES = Design.SHADE_RANGES;
+exports.SHADOW_SIZES = Design.SHADOW_SIZES;
+exports.SIZES = Design.SIZES;
+exports.SPACING_SIZES = Design.SPACING_SIZES;
+exports.TEXT_SIZES = Design.TEXT_SIZES;
+exports.Theme = Design.Theme;
+exports.mixin = Design.mixins;
 exports.ThemeRegistry = ThemeRegistry;
-exports.mixin = mixins;
 //# sourceMappingURL=index.js.map

lib/test.js

@@ -1,2 +0,2 @@
-// Generated with Packemon: https://packemon.dev
+// Bundled with Packemon: https://packemon.dev
 // Platform: browser, Support: stable, Format: lib
@@ -9,5 +9,7 @@ 'use strict';
 
-var index_ts = require('./index.js');
+var Design = require('./bundle-0c2acb8a.js');
 
-var design = new index_ts.Design('test-design', {
+require('@aesthetic/utils');
+
+var design = new Design.Design('test-design', {
   border: {
@@ -14,0 +16,0 @@ sm: {

package.json

 {
   "name": "@aesthetic/system",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "Web based building blocks for the Aesthetic design system.",
@@ -48,3 +48,3 @@ "keywords": [
   },
-  "gitHead": "2eaa33fd8ca72a6fd657d9b1375c7caa2f346af4"
+  "gitHead": "cd88884ecc9851dec6458bcdf6a0c4e4a1712e60"
 }

src/constants.ts

@@ -1,3 +0,19 @@
-import { ColorShade, ElevationType, PaletteType } from './types';
+import {
+  BorderSize,
+  BreakpointSize,
+  ColorShade,
+  CommonSize,
+  ElevationType,
+  HeadingLevel,
+  HeadingSize,
+  PaletteType,
+  ShadowSize,
+  SpacingSize,
+  TextSize,
+} from './types';
 
+export const BORDER_SIZES: BorderSize[] = ['sm', 'df', 'lg'];
+
+export const BREAKPOINT_SIZES: BreakpointSize[] = ['xs', 'sm', 'md', 'lg', 'xl'];
+
 export const DEPTHS: Record<ElevationType, number> = {
@@ -15,2 +31,21 @@ content: 100, // xs
 
+export const SIZES: CommonSize[] = ['sm', 'df', 'lg'];
+
+export const HEADING_LEVELS: HeadingLevel[] = [1, 2, 3, 4, 5, 6];
+
+export const HEADING_SIZES: HeadingSize[] = ['l1', 'l2', 'l3', 'l4', 'l5', 'l6'];
+
+export const PALETTE_TYPES: PaletteType[] = [
+  'brand',
+  'primary',
+  'secondary',
+  'tertiary',
+  'neutral',
+  'muted',
+  'danger',
+  'warning',
+  'negative',
+  'positive',
+];
+
 export const SHADE_RANGES: ColorShade[] = [
@@ -29,13 +64,6 @@ '00',
 
-export const PALETTE_TYPES: PaletteType[] = [
-  'brand',
-  'primary',
-  'secondary',
-  'tertiary',
-  'neutral',
-  'muted',
-  'danger',
-  'warning',
-  'negative',
-  'positive',
-];
+export const SHADOW_SIZES: ShadowSize[] = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+export const SPACING_SIZES: SpacingSize[] = ['xs', 'sm', 'df', 'lg', 'xl'];
+
+export const TEXT_SIZES: TextSize[] = ['sm', 'df', 'lg'];

src/types.ts

@@ -13,2 +13,4 @@ import { ColorScheme, ContrastLevel, Unit } from '@aesthetic/types';
 
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
 export type ElevationType =
@@ -15,0 +17,0 @@ | 'content'

No alert changes

Improved metrics

Total package byte prevSize

183376

increased by2.9%

Number of package files

33

increased by13.79%

Lines of code

4506

increased by1.69%

No dependency changes