@animus-ui/theming 0.1.1-beta.12 → 0.1.1-beta.16

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.1-beta.16](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.15...@animus-ui/theming@0.1.1-beta.16) (2022-02-02)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+
+
+
+
+## [0.1.1-beta.15](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.14...@animus-ui/theming@0.1.1-beta.15) (2022-01-26)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+
+
+
+
+## [0.1.1-beta.14](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.13...@animus-ui/theming@0.1.1-beta.14) (2022-01-24)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+
+
+
+
+## [0.1.1-beta.13](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.12...@animus-ui/theming@0.1.1-beta.13) (2022-01-24)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+
+
+
+
 ## [0.1.1-beta.12](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.11...@animus-ui/theming@0.1.1-beta.12) (2022-01-24)
 
 **Note:** Version bump only for package @animus-ui/theming

package/dist/index.js

@@ -1,147 +1,372 @@
 import { isObject, merge, mapValues } from 'lodash';
 
-function flattenScale(object, path) {
-    return Object.keys(object).reduce((carry, key) => {
-        const nextKey = path ? `${path}${key === '_' ? '' : `-${key}`}` : key;
-        const current = object[key];
-        if (isObject(current)) {
-            return {
-                ...carry,
-                ...flattenScale(current, nextKey),
-            };
-        }
-        return {
-            ...carry,
-            [nextKey]: object[key],
-        };
-    }, {});
-}
-
-const templateBreakpoints = (value, alias, theme) => {
-    if (isObject(value)) {
-        const { _, base, ...rest } = value;
-        const css = {
-            [alias]: _ ?? base,
-        };
-        if (theme) {
-            const { breakpoints } = theme;
-            Object.keys(breakpoints).forEach((key) => {
-                css[breakpoints[key]] = {
-                    [alias]: rest[key],
-                };
-            });
-        }
-        return css;
-    }
-    return { [alias]: value };
-};
-const serializeTokens = (tokens, prefix, theme) => {
-    const tokenReferences = {};
-    const tokenVariables = {};
-    Object.keys(tokens).forEach((key) => {
-        const varName = `--${prefix}-${key}`;
-        tokenReferences[key] = `var(${varName})`;
-        merge(tokenVariables, templateBreakpoints(tokens[key], varName, theme));
-    });
-    return {
-        tokens: tokenReferences,
-        variables: tokenVariables,
-    };
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+
+  return target;
+}
+
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
+  return Constructor;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+function _classPrivateFieldGet(receiver, privateMap) {
+  var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get");
+
+  return _classApplyDescriptorGet(receiver, descriptor);
+}
+
+function _classPrivateFieldSet(receiver, privateMap, value) {
+  var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set");
+
+  _classApplyDescriptorSet(receiver, descriptor, value);
+
+  return value;
+}
+
+function _classExtractFieldDescriptor(receiver, privateMap, action) {
+  if (!privateMap.has(receiver)) {
+    throw new TypeError("attempted to " + action + " private field on non-instance");
+  }
+
+  return privateMap.get(receiver);
+}
+
+function _classApplyDescriptorGet(receiver, descriptor) {
+  if (descriptor.get) {
+    return descriptor.get.call(receiver);
+  }
+
+  return descriptor.value;
+}
+
+function _classApplyDescriptorSet(receiver, descriptor, value) {
+  if (descriptor.set) {
+    descriptor.set.call(receiver, value);
+  } else {
+    if (!descriptor.writable) {
+      throw new TypeError("attempted to set read only private field");
+    }
+
+    descriptor.value = value;
+  }
+}
+
+function _checkPrivateRedeclaration(obj, privateCollection) {
+  if (privateCollection.has(obj)) {
+    throw new TypeError("Cannot initialize the same private elements twice on an object");
+  }
+}
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) {
+  _checkPrivateRedeclaration(obj, privateMap);
+
+  privateMap.set(obj, value);
+}
+
+function flattenScale(object, path) {
+  return Object.keys(object).reduce(function (carry, key) {
+    var nextKey = path ? "".concat(path).concat(key === '_' ? '' : "-".concat(key)) : key;
+    var current = object[key];
+
+    if (isObject(current)) {
+      return _objectSpread2(_objectSpread2({}, carry), flattenScale(current, nextKey));
+    }
+
+    return _objectSpread2(_objectSpread2({}, carry), {}, _defineProperty({}, nextKey, object[key]));
+  }, {});
+}
+
+var _excluded = ["_", "base"];
+
+var templateBreakpoints = function templateBreakpoints(value, alias, theme) {
+  if (isObject(value)) {
+    var _ = value._,
+        base = value.base,
+        rest = _objectWithoutProperties(value, _excluded);
+
+    var css = _defineProperty({}, alias, _ !== null && _ !== void 0 ? _ : base);
+
+    if (theme) {
+      var breakpoints = theme.breakpoints;
+      Object.keys(breakpoints).forEach(function (key) {
+        css[breakpoints[key]] = _defineProperty({}, alias, rest[key]);
+      });
+    }
+
+    return css;
+  }
+
+  return _defineProperty({}, alias, value);
 };
 
-class ThemeBuilder {
-    #theme = {};
-    constructor(baseTheme) {
-        this.#theme = baseTheme;
-    }
-    /**
-     *
-     * @param key A key of the current theme to transform into CSS Variables and Variable References
-     * @example .createScaleVariables('fontSize')
-     */
-    createScaleVariables(key) {
-        const { variables, tokens } = serializeTokens(this.#theme[key], key, this.#theme);
-        this.#theme = merge({}, this.#theme, {
-            [key]: tokens,
-            _variables: { root: variables },
-            _tokens: {
-                [key]: this.#theme[key],
-            },
-        });
-        return this;
-    }
+var serializeTokens = function serializeTokens(tokens, prefix, theme) {
+  var tokenReferences = {};
+  var tokenVariables = {};
+  Object.keys(tokens).forEach(function (key) {
+    var varName = "--".concat(prefix, "-").concat(key);
+    tokenReferences[key] = "var(".concat(varName, ")");
+    merge(tokenVariables, templateBreakpoints(tokens[key], varName, theme));
+  });
+  return {
+    tokens: tokenReferences,
+    variables: tokenVariables
+  };
+};
+
+var _theme = /*#__PURE__*/new WeakMap();
+
+var ThemeBuilder = /*#__PURE__*/function () {
+  function ThemeBuilder(baseTheme) {
+    _classCallCheck(this, ThemeBuilder);
+
+    _classPrivateFieldInitSpec(this, _theme, {
+      writable: true,
+      value: {}
+    });
+
+    _classPrivateFieldSet(this, _theme, baseTheme);
+  }
+  /**
+   *
+   * @param key A key of the current theme to transform into CSS Variables and Variable References
+   * @example .createScaleVariables('fontSize')
+   */
+
+
+  _createClass(ThemeBuilder, [{
+    key: "createScaleVariables",
+    value: function createScaleVariables(key) {
+      var _merge;
+
+      var _serializeTokens = serializeTokens(_classPrivateFieldGet(this, _theme)[key], key, _classPrivateFieldGet(this, _theme)),
+          variables = _serializeTokens.variables,
+          tokens = _serializeTokens.tokens;
+
+      _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), (_merge = {}, _defineProperty(_merge, key, tokens), _defineProperty(_merge, "_variables", {
+        root: variables
+      }), _defineProperty(_merge, "_tokens", _defineProperty({}, key, _classPrivateFieldGet(this, _theme)[key])), _merge)));
+
+      return this;
+    }
     /**
      *
      * @param colors A map of color tokens to add to the theme. These tokens are immediately converted to CSS Variables `--color-${key}`.
      * @example .addColors({ navy: 'navy', hyper: 'purple' })
-     */
-    addColors(colors) {
-        const flatColors = flattenScale(colors);
-        const { variables, tokens } = serializeTokens(flatColors, 'color', this.#theme);
-        this.#theme = merge({}, this.#theme, {
-            colors: tokens,
-            _variables: { root: variables },
-            _tokens: { colors: flatColors },
-        });
-        return this;
-    }
+     */
+
+  }, {
+    key: "addColors",
+    value: function addColors(colors) {
+      var flatColors = flattenScale(colors);
+
+      var _serializeTokens2 = serializeTokens(flatColors, 'color', _classPrivateFieldGet(this, _theme)),
+          variables = _serializeTokens2.variables,
+          tokens = _serializeTokens2.tokens;
+
+      _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), {
+        colors: tokens,
+        _variables: {
+          root: variables
+        },
+        _tokens: {
+          colors: flatColors
+        }
+      }));
+
+      return this;
+    }
     /**
      *
      * @param initialMode A key of the object passed for modes.  This sets the default state for the theme and transforms the correct variables.
      * @param modes A map of color modes with keys of each possible mode with a value of alias to color keys.  This must be called after `addColors`
      * @example .addColorModes('light', { light: { primary: 'hyper' }, { dark: { primary: 'navy' } } })
-     */
-    addColorModes(initialMode, modeConfig) {
-        const modes = mapValues(modeConfig, (mode) => flattenScale(mode));
-        const { tokens: colors, variables } = serializeTokens(mapValues(merge({}, this.#theme.modes?.[initialMode], modes[initialMode]), (color) => this.#theme.colors[color]), 'color', this.#theme);
-        const getColorValue = (color) => this.#theme._tokens?.colors?.[color];
-        this.#theme = merge({}, this.#theme, {
-            colors,
-            modes,
-            mode: initialMode,
-            _getColorValue: getColorValue,
-            _variables: { mode: variables },
-            _tokens: {
-                modes: mapValues(modes, (mode) => mapValues(mode, getColorValue)),
-            },
-        });
-        return this;
-    }
+     */
+
+  }, {
+    key: "addColorModes",
+    value: function addColorModes(initialMode, modeConfig) {
+      var _classPrivateFieldGet2,
+          _this = this;
+
+      var modes = mapValues(modeConfig, function (mode) {
+        return flattenScale(mode);
+      });
+
+      var _serializeTokens3 = serializeTokens(mapValues(merge({}, (_classPrivateFieldGet2 = _classPrivateFieldGet(this, _theme).modes) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2[initialMode], modes[initialMode]), function (color) {
+        return _classPrivateFieldGet(_this, _theme).colors[color];
+      }), 'color', _classPrivateFieldGet(this, _theme)),
+          colors = _serializeTokens3.tokens,
+          variables = _serializeTokens3.variables;
+
+      var getColorValue = function getColorValue(color) {
+        var _classPrivateFieldGet3, _classPrivateFieldGet4;
+
+        return (_classPrivateFieldGet3 = _classPrivateFieldGet(_this, _theme)._tokens) === null || _classPrivateFieldGet3 === void 0 ? void 0 : (_classPrivateFieldGet4 = _classPrivateFieldGet3.colors) === null || _classPrivateFieldGet4 === void 0 ? void 0 : _classPrivateFieldGet4[color];
+      };
+
+      _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), {
+        colors: colors,
+        modes: modes,
+        mode: initialMode,
+        _getColorValue: getColorValue,
+        _variables: {
+          mode: variables
+        },
+        _tokens: {
+          modes: mapValues(modes, function (mode) {
+            return mapValues(mode, getColorValue);
+          })
+        }
+      }));
+
+      return this;
+    }
     /**
      *
      * @param key A new key of theme
      * @param createScale A function that accepts the current theme and returns a new object of scale values.
      * @example .addScale('fonts', () => ({ basic: 'Gotham', cool: 'Wingdings' }))
-     */
-    addScale(key, createScale) {
-        this.#theme = merge({}, this.#theme, {
-            [key]: flattenScale(createScale(this.#theme)),
-        });
-        return this;
-    }
+     */
+
+  }, {
+    key: "addScale",
+    value: function addScale(key, createScale) {
+      _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), _defineProperty({}, key, flattenScale(createScale(_classPrivateFieldGet(this, _theme))))));
+
+      return this;
+    }
     /**
      *
      * @param key A current key of theme to be updated with new or computed values
      * @param updateFn A function that accepts an argument of the current values at the specified keys an returns a map of new values to merge.
      * @example .updateScale('fonts', ({ basic }) => ({ basicFallback: `{basic}, Montserrat` }))
-     */
-    updateScale(key, updateFn) {
-        this.#theme = merge({}, this.#theme, { [key]: updateFn(this.#theme[key]) });
-        return this;
-    }
+     */
+
+  }, {
+    key: "updateScale",
+    value: function updateScale(key, updateFn) {
+      _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), _defineProperty({}, key, updateFn(_classPrivateFieldGet(this, _theme)[key]))));
+
+      return this;
+    }
     /**
      * This finalizes the theme build and returns the final theme and variables to be provided.
-     */
-    build() {
-        const { variables } = serializeTokens(mapValues(this.#theme.breakpoints, (val) => `${val}px`), 'breakpoint', this.#theme);
-        return merge({}, this.#theme, {
-            _variables: { breakpoints: variables },
-            _tokens: {},
-        });
-    }
-}
-function createTheme(base) {
-    return new ThemeBuilder(base);
+     */
+
+  }, {
+    key: "build",
+    value: function build() {
+      var _serializeTokens4 = serializeTokens(mapValues(_classPrivateFieldGet(this, _theme).breakpoints, function (val) {
+        return "".concat(val, "px");
+      }), 'breakpoint', _classPrivateFieldGet(this, _theme)),
+          variables = _serializeTokens4.variables;
+
+      return merge({}, _classPrivateFieldGet(this, _theme), {
+        _variables: {
+          breakpoints: variables
+        },
+        _tokens: {}
+      });
+    }
+  }]);
+
+  return ThemeBuilder;
+}();
+function createTheme(base) {
+  return new ThemeBuilder(base);
 }
 
 export { ThemeBuilder, createTheme, flattenScale, serializeTokens };

package/dist/utils/createTheme.d.ts

@@ -1,4 +1,4 @@
-import { CSSObject, AbstractTheme } from '@animus-ui/core';
+import { AbstractTheme, CSSObject } from '@animus-ui/core';
 import { LiteralPaths } from './flattenScale';
 import { KeyAsVariable } from './serializeTokens';
 import { ColorModeConfig, Merge, MergeTheme, PrivateThemeKeys } from './types';

package/dist/utils/serializeTokens.d.ts

@@ -1,5 +1,5 @@
-import { Theme } from '@emotion/react';
 import { CSSObject } from '@animus-ui/core';
+import { Theme } from '@emotion/react';
 /**
  * Returns an type of any object with { key: 'var(--key) }
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@animus-ui/theming",
-  "version": "0.1.1-beta.12",
+  "version": "0.1.1-beta.16",
   "description": "Theming Utilities",
   "author": "Aaron Robb <airrobb@gmail.com>",
   "homepage": "https://github.com/codecaaron/animus#readme",
@@ -25,7 +25,7 @@
     "url": "https://github.com/codecaaron/animus/issues"
   },
   "dependencies": {
-    "@animus-ui/core": "^0.1.1-beta.12"
+    "@animus-ui/core": "^0.1.1-beta.16"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.0.0",
@@ -33,5 +33,5 @@
     "lodash": "*",
     "typescript": ">=4.3.5"
   },
-  "gitHead": "5642ca93c52aec07326da5d2a466c9ce54d0e8c8"
+  "gitHead": "7359d0512fd5a905fa96149c982bd00ee8245598"
 }

package/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    // "emitDeclarationOnly": true,
+    "skipLibCheck": false,
     "outDir": "./dist"
   },
   "include": ["../../typings/*.d.ts", "./src/**/*.ts", "./src/**/*.tsx"],