@codecademy/variance 0.19.1-alpha.a809e8.0 → 1.0.0-alpha.2627a4.0

package/CHANGELOG.md

@@ -3,11 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [0.19.1-alpha.a809e8.0](https://github.com/Codecademy/gamut/compare/@codecademy/variance@0.19.0...@codecademy/variance@0.19.1-alpha.a809e8.0) (2022-01-06)
+## [1.0.0-alpha.2627a4.0](https://github.com/Codecademy/gamut/compare/@codecademy/variance@0.19.0...@codecademy/variance@1.0.0-alpha.2627a4.0) (2022-01-25)
 
-**Note:** Version bump only for package @codecademy/variance
 
+### ⚠ BREAKING CHANGES
+
+* bumped React to 17
+
+### Features
 
+* bumped React to 17 ([c074ecb](https://github.com/Codecademy/gamut/commit/c074ecbfa026ed8e37cf41e874d345574a46e5e4))
 
 
 

package/dist/core.d.ts

@@ -0,0 +1,10 @@
+import { AbstractParser, AbstractPropTransformer, Compose, CSS, Parser, Prop, PropTransformer, States, TransformerMap, Variant } from './types/config';
+export declare const variance: {
+    createParser<Config extends Record<string, AbstractPropTransformer>>(config: Config): Parser<Config>;
+    createTransform<P extends string, Config_1 extends Prop>(prop: P, config: Config_1): PropTransformer<P, Config_1>;
+    compose<Args extends AbstractParser[]>(...parsers: Args): Parser<Compose<Args>>;
+    createCss<Config_2 extends Record<string, Prop>, P_1 extends Parser<TransformerMap<Config_2>>>(config: Config_2): CSS<P_1>;
+    createVariant<Config_3 extends Record<string, Prop>, P_2 extends Parser<TransformerMap<Config_3>>>(config: Config_3): Variant<P_2>;
+    createStates<Config_4 extends Record<string, Prop>, P_3 extends Parser<TransformerMap<Config_4>>>(config: Config_4): States<P_3>;
+    create<Config_5 extends Record<string, Prop>>(config: Config_5): Parser<TransformerMap<Config_5>>;
+};

package/dist/core.js

@@ -0,0 +1,251 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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 _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+import { get, identity, isArray, isObject, isUndefined, merge } from 'lodash';
+import { createScaleLookup } from './scales/createScaleLookup';
+import { getStaticCss } from './utils/getStaticProperties';
+import { orderPropNames } from './utils/propNames';
+import { arrayParser, isMediaArray, isMediaMap, objectParser, orderBreakpoints, parseBreakpoints } from './utils/responsive';
+export var variance = {
+  // Parser to handle any set of configured props
+  createParser: function createParser(config) {
+    var propNames = orderPropNames(config);
+    var breakpoints;
+
+    var parser = function parser(props) {
+      var styles = {};
+      var theme = props.theme; // Attempt to cache the breakpoints if we have not yet or if theme has become available.
+
+      if (breakpoints === undefined || breakpoints === null && theme !== null && theme !== void 0 && theme.breakpoints) {
+        // Save the breakpoints if we can
+        breakpoints = parseBreakpoints(theme === null || theme === void 0 ? void 0 : theme.breakpoints);
+      } // Loops over all prop names on the configured config to check for configured styles
+
+
+      propNames.forEach(function (prop) {
+        var property = config[prop];
+        var value = get(props, prop);
+
+        switch (_typeof(value)) {
+          case 'string':
+          case 'number':
+          case 'function':
+            return Object.assign(styles, property.styleFn(value, prop, props));
+          // handle any props configured with the responsive notation
+
+          case 'object':
+            if (!breakpoints) {
+              return;
+            } // If it is an array the order of values is smallest to largest: [_, xs, ...]
+
+
+            if (isMediaArray(value)) {
+              return merge(styles, arrayParser(value, props, property, breakpoints.array));
+            } // Check to see if value is an object matching the responsive syntax and generate the styles.
+
+
+            if (isMediaMap(value)) {
+              return merge(styles, objectParser(value, props, property, breakpoints.map));
+            }
+
+        }
+      });
+      return breakpoints ? orderBreakpoints(styles, breakpoints.array) : styles;
+    }; // return the parser function with the resulting meta information for further composition
+
+
+    return Object.assign(parser, {
+      propNames: propNames,
+      config: config
+    });
+  },
+  // Given a single property configuration enrich the config with a transform function
+  // that traverses the properties the function is responsible for.
+  createTransform: function createTransform(prop, config) {
+    var _config$transform = config.transform,
+        transform = _config$transform === void 0 ? identity : _config$transform,
+        property = config.property,
+        _config$properties = config.properties,
+        properties = _config$properties === void 0 ? [property] : _config$properties,
+        scale = config.scale;
+    var getScaleValue = createScaleLookup(scale);
+    var alwaysTransform = scale === undefined || isArray(scale);
+    return _objectSpread(_objectSpread({}, config), {}, {
+      prop: prop,
+      styleFn: function styleFn(value, prop, props) {
+        var _scaleValue;
+
+        var styles = {};
+
+        if (isUndefined(value)) {
+          return styles;
+        }
+
+        var useTransform = false;
+        var intermediateValue;
+        var scaleValue;
+
+        switch (_typeof(value)) {
+          case 'number':
+          case 'string':
+            scaleValue = getScaleValue(value, props);
+            useTransform = scaleValue !== undefined || alwaysTransform;
+            intermediateValue = (_scaleValue = scaleValue) !== null && _scaleValue !== void 0 ? _scaleValue : value;
+            break;
+
+          case 'function':
+            if (props.theme) {
+              intermediateValue = value(props.theme);
+            }
+
+            break;
+
+          default:
+            return styles;
+        } // for each property look up the scale value from theme if passed and apply any
+        // final transforms to the value
+
+
+        properties.forEach(function (property) {
+          var styleValue = intermediateValue;
+
+          if (useTransform && !isUndefined(styleValue)) {
+            styleValue = transform(styleValue, property, props);
+          }
+
+          switch (_typeof(styleValue)) {
+            case 'number':
+            case 'string':
+              return styles[property] = styleValue;
+
+            case 'object':
+              return Object.assign(styles, styleValue);
+
+            default:
+          }
+        }); // return the resulting styles object
+
+        return styles;
+      }
+    });
+  },
+  compose: function compose() {
+    for (var _len = arguments.length, parsers = new Array(_len), _key = 0; _key < _len; _key++) {
+      parsers[_key] = arguments[_key];
+    }
+
+    return this.createParser(parsers.reduce(function (carry, parser) {
+      return _objectSpread(_objectSpread({}, carry), parser.config);
+    }, {}));
+  },
+  createCss: function createCss(config) {
+    var parser = this.create(config);
+    var filteredProps = parser.propNames;
+    return function (cssProps) {
+      var cache;
+      var allKeys = Object.keys(cssProps);
+      /** Any key of the CSSProps that is not a System Prop or a Static CSS Property is treated as a nested selector */
+
+      var selectors = allKeys.filter(function (key) {
+        return !filteredProps.includes(key) && isObject(cssProps[key]);
+      });
+      /** Static CSS Properties get extracted if they match neither syntax */
+
+      var staticCss = getStaticCss(cssProps, ['theme'].concat(_toConsumableArray(selectors), _toConsumableArray(filteredProps)));
+      return function (_ref) {
+        var theme = _ref.theme;
+        if (cache) return cache;
+        var css = parser(_objectSpread(_objectSpread({}, cssProps), {}, {
+          theme: theme
+        }));
+        selectors.forEach(function (selector) {
+          var _cssProps$selector;
+
+          var selectorConfig = (_cssProps$selector = cssProps[selector]) !== null && _cssProps$selector !== void 0 ? _cssProps$selector : {};
+          css[selector] = _objectSpread(_objectSpread({}, getStaticCss(selectorConfig, filteredProps)), parser(_objectSpread(_objectSpread({}, selectorConfig), {}, {
+            theme: theme
+          })));
+        });
+        /** Merge the static and generated css and save it to the cache */
+
+        cache = _objectSpread(_objectSpread({}, staticCss), css);
+        return cache;
+      };
+    };
+  },
+  createVariant: function createVariant(config) {
+    var css = this.createCss(config);
+    return function (_ref2) {
+      var _ref2$prop = _ref2.prop,
+          prop = _ref2$prop === void 0 ? 'variant' : _ref2$prop,
+          defaultVariant = _ref2.defaultVariant,
+          _ref2$base = _ref2.base,
+          base = _ref2$base === void 0 ? {} : _ref2$base,
+          variants = _ref2.variants;
+      var baseFn = css(base);
+      var variantFns = {};
+      Object.keys(variants).forEach(function (key) {
+        var variantKey = key;
+        var cssProps = variants[variantKey];
+        variantFns[variantKey] = css(cssProps);
+      });
+      return function (props) {
+        var _variantFns;
+
+        var _props$prop = props[prop],
+            selected = _props$prop === void 0 ? defaultVariant : _props$prop;
+        var styles = {};
+        if (!selected) return styles;
+        return merge(styles, baseFn(props), variantFns === null || variantFns === void 0 ? void 0 : (_variantFns = variantFns[selected]) === null || _variantFns === void 0 ? void 0 : _variantFns.call(variantFns, props));
+      };
+    };
+  },
+  createStates: function createStates(config) {
+    var css = this.createCss(config);
+    return function (states) {
+      var orderedStates = Object.keys(states);
+      var stateFns = {};
+      orderedStates.forEach(function (key) {
+        var stateKey = key;
+        var cssProps = states[stateKey];
+        stateFns[stateKey] = css(cssProps);
+      });
+      return function (props) {
+        var styles = {};
+        orderedStates.forEach(function (state) {
+          merge(styles, props[state] && stateFns[state](props));
+        });
+        return styles;
+      };
+    };
+  },
+  create: function create(config) {
+    var transforms = {}; // Create a transform function for each of the props
+
+    for (var prop in config) {
+      if (typeof prop === 'string') {
+        transforms[prop] = this.createTransform(prop, config[prop]);
+      }
+    } // Create a parser that handles all the props within the config
+
+
+    return this.createParser(transforms);
+  }
+};

package/dist/core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core.js","sourceRoot":"","sources":["../src/core.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAE9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAc/D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,+CAA+C;IAC/C,YAAY,CACV,MAAc;QAEd,MAAM,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;QACzC,IAAI,WAA+C,CAAC;QAEpD,MAAM,MAAM,GAAG,CAAC,KAAiB,EAAE,EAAE;YACnC,MAAM,MAAM,GAAG,EAAE,CAAC;YAClB,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;YACxB,wFAAwF;YACxF,IACE,WAAW,KAAK,SAAS;gBACzB,CAAC,WAAW,KAAK,IAAI,IAAI,KAAK,EAAE,WAAW,CAAC,EAC5C;gBACA,iCAAiC;gBACjC,WAAW,GAAG,gBAAgB,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;aACpD;YAED,oFAAoF;YACpF,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;gBACzB,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;gBAC9B,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;gBAE/B,QAAQ,OAAO,KAAK,EAAE;oBACpB,KAAK,QAAQ,CAAC;oBACd,KAAK,QAAQ,CAAC;oBACd,KAAK,UAAU;wBACb,OAAO,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;oBACrE,2DAA2D;oBAC3D,KAAK,QAAQ;wBACX,IAAI,CAAC,WAAW,EAAE;4BAChB,OAAO;yBACR;wBACD,6EAA6E;wBAC7E,IAAI,YAAY,CAAC,KAAK,CAAC,EAAE;4BACvB,OAAO,KAAK,CACV,MAAM,EACN,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC,KAAK,CAAC,CACvD,CAAC;yBACH;wBACD,6FAA6F;wBAC7F,IAAI,UAAU,CAAC,KAAK,CAAC,EAAE;4BACrB,OAAO,KAAK,CACV,MAAM,EACN,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC,GAAG,CAAC,CACtD,CAAC;yBACH;iBACJ;YACH,CAAC,CAAC,CAAC;YAEH,OAAO,WAAW,CAAC,CAAC,CAAC,gBAAgB,CAAC,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;QAC5E,CAAC,CAAC;QACF,yFAAyF;QACzF,OAAO,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC;IACtD,CAAC;IACD,oFAAoF;IACpF,iEAAiE;IACjE,eAAe,CACb,IAAO,EACP,MAAc;QAEd,MAAM,EACJ,SAAS,GAAG,QAAQ,EACpB,QAAQ,EACR,UAAU,GAAG,CAAC,QAAQ,CAAC,EACvB,KAAK,GACN,GAAG,MAAM,CAAC;QACX,MAAM,aAAa,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC/C,MAAM,eAAe,GAAG,KAAK,KAAK,SAAS,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;QAE9D,OAAO;YACL,GAAG,MAAM;YACT,IAAI;YACJ,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;gBAC9B,MAAM,MAAM,GAAc,EAAE,CAAC;gBAE7B,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE;oBACtB,OAAO,MAAM,CAAC;iBACf;gBAED,IAAI,YAAY,GAAG,KAAK,CAAC;gBACzB,IAAI,iBAA8C,CAAC;gBACnD,IAAI,UAAuC,CAAC;gBAE5C,QAAQ,OAAO,KAAK,EAAE;oBACpB,KAAK,QAAQ,CAAC;oBACd,KAAK,QAAQ;wBACX,UAAU,GAAG,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;wBACzC,YAAY,GAAG,UAAU,KAAK,SAAS,IAAI,eAAe,CAAC;wBAC3D,iBAAiB,GAAG,UAAU,IAAI,KAAK,CAAC;wBACxC,MAAM;oBACR,KAAK,UAAU;wBACb,IAAI,KAAK,CAAC,KAAK,EAAE;4BACf,iBAAiB,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAGxB,CAAC;yBACf;wBACD,MAAM;oBACR;wBACE,OAAO,MAAM,CAAC;iBACjB;gBAED,+EAA+E;gBAC/E,gCAAgC;gBAChC,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;oBAC9B,IAAI,UAAU,GAAiC,iBAAiB,CAAC;oBAEjE,IAAI,YAAY,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE;wBAC5C,UAAU,GAAG,SAAS,CAAC,UAAU,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;qBACrD;oBACD,QAAQ,OAAO,UAAU,EAAE;wBACzB,KAAK,QAAQ,CAAC;wBACd,KAAK,QAAQ;4BACX,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,UAAU,CAAC,CAAC;wBACzC,KAAK,QAAQ;4BACX,OAAO,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;wBAC3C,QAAQ;qBACT;gBACH,CAAC,CAAC,CAAC;gBACH,qCAAqC;gBACrC,OAAO,MAAM,CAAC;YAChB,CAAC;SACF,CAAC;IACJ,CAAC;IACD,OAAO,CAAgC,GAAG,OAAa;QACrD,OAAO,IAAI,CAAC,YAAY,CACtB,OAAO,CAAC,MAAM,CACZ,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EACnD,EAAE,CACc,CACnB,CAAC;IACJ,CAAC;IACD,SAAS,CAGP,MAAc;QACd,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACnC,MAAM,aAAa,GAAa,MAAM,CAAC,SAAS,CAAC;QACjD,OAAO,CAAC,QAAQ,EAAE,EAAE;YAClB,IAAI,KAAgB,CAAC;YACrB,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAEtC,iHAAiH;YACjH,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,CAC9B,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CACjE,CAAC;YAEF,uEAAuE;YACvE,MAAM,SAAS,GAAG,YAAY,CAAC,QAAQ,EAAE;gBACvC,OAAO;gBACP,GAAG,SAAS;gBACZ,GAAG,aAAa;aACjB,CAAC,CAAC;YAEH,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;gBACnB,IAAI,KAAK;oBAAE,OAAO,KAAK,CAAC;gBACxB,MAAM,GAAG,GAAG,MAAM,CAAC,EAAE,GAAG,QAAQ,EAAE,KAAK,EAAS,CAAC,CAAC;gBAClD,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;oBAC7B,MAAM,cAAc,GAAG,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;oBAChD,GAAG,CAAC,QAAQ,CAAC,GAAG;wBACd,GAAG,YAAY,CAAC,cAAc,EAAE,aAAa,CAAC;wBAC9C,GAAG,MAAM,CAAC,EAAE,GAAG,cAAc,EAAE,KAAK,EAAS,CAAC;qBAC/C,CAAC;gBACJ,CAAC,CAAC,CAAC;gBAEH,kEAAkE;gBAClE,KAAK,GAAG;oBACN,GAAG,SAAS;oBACZ,GAAG,GAAG;iBACP,CAAC;gBACF,OAAO,KAAK,CAAC;YACf,CAAC,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;IACD,aAAa,CAGX,MAAc;QACd,MAAM,GAAG,GAAW,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;QAE3C,OAAO,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,cAAc,EAAE,IAAI,GAAG,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;YAEnE,MAAM,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;YACzB,MAAM,UAAU,GAAG,EAAoD,CAAC;YAExE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBACpC,MAAM,UAAU,GAAG,GAAW,CAAC;gBAC/B,MAAM,QAAQ,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;gBACtC,UAAU,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,QAAe,CAAC,CAAC;YAChD,CAAC,CAAC,CAAC;YAEH,OAAO,CAAC,KAAK,EAAE,EAAE;gBACf,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,cAAc,EAAE,GAAG,KAAK,CAAC;gBACpD,MAAM,MAAM,GAAG,EAAE,CAAC;gBAClB,IAAI,CAAC,QAAQ;oBAAE,OAAO,MAAM,CAAC;gBAE7B,OAAO,KAAK,CACV,MAAM,EACN,MAAM,CAAC,KAAK,CAAC,EACb,UAAU,EAAE,CAAC,QAAgB,CAAC,EAAE,CAAC,KAAK,CAAC,CACxC,CAAC;YACJ,CAAC,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;IACD,YAAY,CAGV,MAAc;QACd,MAAM,GAAG,GAAW,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;QAE3C,OAAO,CAAC,MAAM,EAAE,EAAE;YAChB,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAE1C,MAAM,QAAQ,GAAG,EAAoD,CAAC;YAEtE,aAAa,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBAC5B,MAAM,QAAQ,GAAG,GAAW,CAAC;gBAC7B,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;gBAClC,QAAQ,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,QAAe,CAAC,CAAC;YAC5C,CAAC,CAAC,CAAC;YAEH,OAAO,CAAC,KAAK,EAAE,EAAE;gBACf,MAAM,MAAM,GAAG,EAAE,CAAC;gBAClB,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;oBAC9B,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;gBACxD,CAAC,CAAC,CAAC;gBAEH,OAAO,MAAM,CAAC;YAChB,CAAC,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;IACD,MAAM,CAAsC,MAAc;QACxD,MAAM,UAAU,GAAG,EAA4B,CAAC;QAEhD,oDAAoD;QACpD,KAAK,MAAM,IAAI,IAAI,MAAM,EAAE;YACzB,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;gBAC5B,UAAU,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;aAC7D;SACF;QAED,+DAA+D;QAC/D,OAAO,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACvC,CAAC;CACF,CAAC"}

package/dist/createTheme/createTheme.d.ts

@@ -0,0 +1,55 @@
+import { CSSObject } from '../types/props';
+import { AbstractTheme } from '../types/theme';
+import { LiteralPaths } from '../utils/flattenScale';
+import { KeyAsVariable } from '../utils/serializeTokens';
+import { ColorModeConfig, Merge, MergeTheme, PrivateThemeKeys } from './types';
+declare class ThemeBuilder<T extends AbstractTheme> {
+    #private;
+    constructor(baseTheme: T);
+    /**
+     *
+     * @param key A key of the current theme to transform into CSS Variables and Variable References
+     * @example .createScaleVariables('fontSize')
+     */
+    createScaleVariables<Key extends keyof Omit<T, 'breakpoints'> & string>(key: Key): ThemeBuilder<MergeTheme<T, PrivateThemeKeys, Record<Key, Record<Key, KeyAsVariable<T[Key], Key>>>>>;
+    /**
+     *
+     * @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 extends Record<string, string | number | CSSObject>, NextColors extends LiteralPaths<Colors, '-'>>(colors: Colors): ThemeBuilder<MergeTheme<T & PrivateThemeKeys, Record<'colors', KeyAsVariable<NextColors, 'color'>>>>;
+    /**
+     *
+     * @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<Modes extends string, InitialMode extends keyof Config, Colors extends keyof T['colors'], ModeColors extends ColorModeConfig<Colors>, Config extends Record<Modes, ModeColors>, ColorAliases extends {
+        [K in keyof Config]: LiteralPaths<Config[K], '-', '_'>;
+    }>(initialMode: InitialMode, modeConfig: Config): ThemeBuilder<MergeTheme<T & PrivateThemeKeys, {
+        colors: KeyAsVariable<LiteralPaths<Config[keyof Config], '-', '_'>, 'colors'> & T['colors'];
+        modes: Merge<T['modes'], ColorAliases>;
+        mode: keyof Config;
+        _getColorValue: (color: keyof T['colors']) => string;
+    }>>;
+    /**
+     *
+     * @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 extends string, Fn extends (theme: T) => Record<string | number, string | number | Record<string, string | number>>, NewScale extends LiteralPaths<ReturnType<Fn>, '-'>>(key: Key, createScale: Fn): ThemeBuilder<MergeTheme<T, Record<Key, NewScale>>>;
+    /**
+     *
+     * @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 extends keyof T, Fn extends (tokens: T[Key]) => Record<string | number, unknown>>(key: Key, updateFn: Fn): ThemeBuilder<T & Record<Key, T[Key] & ReturnType<Fn>>>;
+    /**
+     * This finalizes the theme build and returns the final theme and variables to be provided.
+     */
+    build(): T & PrivateThemeKeys;
+}
+export declare function createTheme<T extends AbstractTheme>(base: T): ThemeBuilder<T>;
+export {};

package/dist/createTheme/createTheme.js

@@ -0,0 +1,168 @@
+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 _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); return Constructor; }
+
+function _classPrivateFieldLooseBase(receiver, privateKey) { if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) { throw new TypeError("attempted to use private field on non-instance"); } return receiver; }
+
+var id = 0;
+
+function _classPrivateFieldLooseKey(name) { return "__private_" + id++ + "_" + name; }
+
+import { mapValues, merge } from 'lodash';
+import { flattenScale } from '../utils/flattenScale';
+import { serializeTokens } from '../utils/serializeTokens';
+
+var _theme = _classPrivateFieldLooseKey("theme");
+
+var ThemeBuilder = /*#__PURE__*/function () {
+  function ThemeBuilder(baseTheme) {
+    _classCallCheck(this, ThemeBuilder);
+
+    Object.defineProperty(this, _theme, {
+      writable: true,
+      value: {}
+    });
+    _classPrivateFieldLooseBase(this, _theme)[_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(_classPrivateFieldLooseBase(this, _theme)[_theme][key], key, _classPrivateFieldLooseBase(this, _theme)[_theme]),
+          variables = _serializeTokens.variables,
+          tokens = _serializeTokens.tokens;
+
+      _classPrivateFieldLooseBase(this, _theme)[_theme] = merge({}, _classPrivateFieldLooseBase(this, _theme)[_theme], (_merge = {}, _defineProperty(_merge, key, tokens), _defineProperty(_merge, "_variables", {
+        root: variables
+      }), _defineProperty(_merge, "_tokens", _defineProperty({}, key, _classPrivateFieldLooseBase(this, _theme)[_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', _classPrivateFieldLooseBase(this, _theme)[_theme]),
+          variables = _serializeTokens2.variables,
+          tokens = _serializeTokens2.tokens;
+
+      _classPrivateFieldLooseBase(this, _theme)[_theme] = merge({}, _classPrivateFieldLooseBase(this, _theme)[_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 _classPrivateFieldLoo,
+          _this = this;
+
+      var modes = mapValues(modeConfig, function (mode) {
+        return flattenScale(mode);
+      });
+
+      var _serializeTokens3 = serializeTokens(mapValues(merge({}, (_classPrivateFieldLoo = _classPrivateFieldLooseBase(this, _theme)[_theme].modes) === null || _classPrivateFieldLoo === void 0 ? void 0 : _classPrivateFieldLoo[initialMode], modes[initialMode]), function (color) {
+        return _classPrivateFieldLooseBase(_this, _theme)[_theme].colors[color];
+      }), 'color', _classPrivateFieldLooseBase(this, _theme)[_theme]),
+          colors = _serializeTokens3.tokens,
+          variables = _serializeTokens3.variables;
+
+      var getColorValue = function getColorValue(color) {
+        var _classPrivateFieldLoo2, _classPrivateFieldLoo3;
+
+        return (_classPrivateFieldLoo2 = _classPrivateFieldLooseBase(_this, _theme)[_theme]._tokens) === null || _classPrivateFieldLoo2 === void 0 ? void 0 : (_classPrivateFieldLoo3 = _classPrivateFieldLoo2.colors) === null || _classPrivateFieldLoo3 === void 0 ? void 0 : _classPrivateFieldLoo3[color];
+      };
+
+      _classPrivateFieldLooseBase(this, _theme)[_theme] = merge({}, _classPrivateFieldLooseBase(this, _theme)[_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) {
+      _classPrivateFieldLooseBase(this, _theme)[_theme] = merge({}, _classPrivateFieldLooseBase(this, _theme)[_theme], _defineProperty({}, key, flattenScale(createScale(_classPrivateFieldLooseBase(this, _theme)[_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) {
+      _classPrivateFieldLooseBase(this, _theme)[_theme] = merge({}, _classPrivateFieldLooseBase(this, _theme)[_theme], _defineProperty({}, key, updateFn(_classPrivateFieldLooseBase(this, _theme)[_theme][key])));
+      return this;
+    }
+    /**
+     * This finalizes the theme build and returns the final theme and variables to be provided.
+     */
+
+  }, {
+    key: "build",
+    value: function build() {
+      return merge({}, _classPrivateFieldLooseBase(this, _theme)[_theme], {
+        _variables: {},
+        _tokens: {}
+      });
+    }
+  }]);
+
+  return ThemeBuilder;
+}();
+
+export function createTheme(base) {
+  return new ThemeBuilder(base);
+}

package/dist/createTheme/createTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTheme.js","sourceRoot":"","sources":["../../src/createTheme/createTheme.ts"],"names":[],"mappings":"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"}

package/dist/createTheme/createTheme.test.d.ts

@@ -0,0 +1 @@
+export {};