@animus-ui/theming 0.1.1-beta.10 → 0.1.1-beta.14

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.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
+
+
+
+
+
+## [0.1.1-beta.11](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.10...@animus-ui/theming@0.1.1-beta.11) (2022-01-24)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+
+
+
+
 ## [0.1.1-beta.10](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.9...@animus-ui/theming@0.1.1-beta.10) (2022-01-23)
 
 **Note:** Version bump only for package @animus-ui/theming

package/dist/index.js

@@ -1 +1,372 @@
-import{isObject as e,merge as t,mapValues as s}from"lodash";function o(t,s){return Object.keys(t).reduce(((r,h)=>{const i=s?`${s}${"_"===h?"":`-${h}`}`:h,n=t[h];return e(n)?{...r,...o(n,i)}:{...r,[i]:t[h]}}),{})}const r=(s,o,r)=>{const h={},i={};return Object.keys(s).forEach((n=>{const a=`--${o}-${n}`;h[n]=`var(${a})`,t(i,((t,s,o)=>{if(e(t)){const{_:e,base:r,...h}=t,i={[s]:e??r};if(o){const{breakpoints:e}=o;Object.keys(e).forEach((t=>{i[e[t]]={[s]:h[t]}}))}return i}return{[s]:t}})(s[n],a,r))})),{tokens:h,variables:i}};class h{#e={};constructor(e){this.#e=e}createScaleVariables(e){const{variables:s,tokens:o}=r(this.#e[e],e,this.#e);return this.#e=t({},this.#e,{[e]:o,_variables:{root:s},_tokens:{[e]:this.#e[e]}}),this}addColors(e){const s=o(e),{variables:h,tokens:i}=r(s,"color",this.#e);return this.#e=t({},this.#e,{colors:i,_variables:{root:h},_tokens:{colors:s}}),this}addColorModes(e,h){const i=s(h,(e=>o(e))),{tokens:n,variables:a}=r(s(t({},this.#e.modes?.[e],i[e]),(e=>this.#e.colors[e])),"color",this.#e),c=e=>this.#e._tokens?.colors?.[e];return this.#e=t({},this.#e,{colors:n,modes:i,mode:e,_getColorValue:c,_variables:{mode:a},_tokens:{modes:s(i,(e=>s(e,c)))}}),this}addScale(e,s){return this.#e=t({},this.#e,{[e]:o(s(this.#e))}),this}updateScale(e,s){return this.#e=t({},this.#e,{[e]:s(this.#e[e])}),this}build(){const{variables:e}=r(s(this.#e.breakpoints,(e=>`${e}px`)),"breakpoint",this.#e);return t({},this.#e,{_variables:{breakpoints:e},_tokens:{}})}}function i(e){return new h(e)}export{h as ThemeBuilder,i as createTheme,o as flattenScale,r as serializeTokens};
+import { isObject, merge, mapValues } from 'lodash';
+
+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);
+};
+
+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' })
+     */
+
+  }, {
+    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' } } })
+     */
+
+  }, {
+    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' }))
+     */
+
+  }, {
+    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` }))
+     */
+
+  }, {
+    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.
+     */
+
+  }, {
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@animus-ui/theming",
-  "version": "0.1.1-beta.10",
+  "version": "0.1.1-beta.14",
   "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.10"
+    "@animus-ui/core": "^0.1.1-beta.14"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.0.0",
@@ -33,5 +33,5 @@
     "lodash": "*",
     "typescript": ">=4.3.5"
   },
-  "gitHead": "d37bd7d8051a063c9f1c937d285b79c08a0dc9b9"
+  "gitHead": "6d0ba2d6dc45b67a021688ed707af757b7118b32"
 }