@animus-ui/theming 0.1.1-beta.11 → 0.1.1-beta.15

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.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
+
+
+
+
+
 ## [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

package/dist/index.js

@@ -0,0 +1,372 @@
+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,12 +1,12 @@
 {
   "name": "@animus-ui/theming",
-  "version": "0.1.1-beta.11",
+  "version": "0.1.1-beta.15",
   "description": "Theming Utilities",
   "author": "Aaron Robb <airrobb@gmail.com>",
   "homepage": "https://github.com/codecaaron/animus#readme",
   "license": "MIT",
-  "module": "./dist/index.esm.js",
-  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.js",
+  "main": "./dist/index.js",
   "types": "dist/index.d.ts",
   "publishConfig": {
     "access": "public"
@@ -25,7 +25,7 @@
     "url": "https://github.com/codecaaron/animus/issues"
   },
   "dependencies": {
-    "@animus-ui/core": "^0.1.1-beta.11"
+    "@animus-ui/core": "^0.1.1-beta.15"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.0.0",
@@ -33,5 +33,5 @@
     "lodash": "*",
     "typescript": ">=4.3.5"
   },
-  "gitHead": "f7da19f1966aad7154c064b29e5f23f74a3e0aee"
+  "gitHead": "8563b18650d797788e8e766ff4f1c090e98fb9ea"
 }

package/dist/index.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("lodash");function t(s,r){return Object.keys(s).reduce(((o,h)=>{const i=r?`${r}${"_"===h?"":`-${h}`}`:h,a=s[h];return e.isObject(a)?{...o,...t(a,i)}:{...o,[i]:s[h]}}),{})}const s=(t,s,r)=>{const o={},h={};return Object.keys(t).forEach((i=>{const a=`--${s}-${i}`;o[i]=`var(${a})`,e.merge(h,((t,s,r)=>{if(e.isObject(t)){const{_:e,base:o,...h}=t,i={[s]:e??o};if(r){const{breakpoints:e}=r;Object.keys(e).forEach((t=>{i[e[t]]={[s]:h[t]}}))}return i}return{[s]:t}})(t[i],a,r))})),{tokens:o,variables:h}};class r{#e={};constructor(e){this.#e=e}createScaleVariables(t){const{variables:r,tokens:o}=s(this.#e[t],t,this.#e);return this.#e=e.merge({},this.#e,{[t]:o,_variables:{root:r},_tokens:{[t]:this.#e[t]}}),this}addColors(r){const o=t(r),{variables:h,tokens:i}=s(o,"color",this.#e);return this.#e=e.merge({},this.#e,{colors:i,_variables:{root:h},_tokens:{colors:o}}),this}addColorModes(r,o){const h=e.mapValues(o,(e=>t(e))),{tokens:i,variables:a}=s(e.mapValues(e.merge({},this.#e.modes?.[r],h[r]),(e=>this.#e.colors[e])),"color",this.#e),m=e=>this.#e._tokens?.colors?.[e];return this.#e=e.merge({},this.#e,{colors:i,modes:h,mode:r,_getColorValue:m,_variables:{mode:a},_tokens:{modes:e.mapValues(h,(t=>e.mapValues(t,m)))}}),this}addScale(s,r){return this.#e=e.merge({},this.#e,{[s]:t(r(this.#e))}),this}updateScale(t,s){return this.#e=e.merge({},this.#e,{[t]:s(this.#e[t])}),this}build(){const{variables:t}=s(e.mapValues(this.#e.breakpoints,(e=>`${e}px`)),"breakpoint",this.#e);return e.merge({},this.#e,{_variables:{breakpoints:t},_tokens:{}})}}exports.ThemeBuilder=r,exports.createTheme=function(e){return new r(e)},exports.flattenScale=t,exports.serializeTokens=s;

package/dist/index.esm.js

@@ -1 +0,0 @@
-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};