@codecademy/variance 0.20.0 → 0.20.1-alpha.32ef98.0

package/dist/createTheme/createTheme.js

@@ -1,79 +1,41 @@
-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;
+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;
     }
     /**
      *
      * @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;
+    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;
     }
     /**
      *
@@ -81,44 +43,21 @@ var ThemeBuilder = /*#__PURE__*/function () {
      * @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;
+    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;
     }
     /**
      *
@@ -126,12 +65,11 @@ var ThemeBuilder = /*#__PURE__*/function () {
      * @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;
+    addScale(key, createScale) {
+        this.#theme = merge({}, this.#theme, {
+            [key]: flattenScale(createScale(this.#theme)),
+        });
+        return this;
     }
     /**
      *
@@ -139,30 +77,18 @@ var ThemeBuilder = /*#__PURE__*/function () {
      * @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;
+    updateScale(key, updateFn) {
+        this.#theme = merge({}, this.#theme, { [key]: updateFn(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() {
-      return merge({}, _classPrivateFieldLooseBase(this, _theme)[_theme], {
-        _variables: {},
-        _tokens: {}
-      });
+    build() {
+        return merge({}, this.#theme, { _variables: {}, _tokens: {} });
     }
-  }]);
-
-  return ThemeBuilder;
-}();
-
+}
 export function createTheme(base) {
-  return new ThemeBuilder(base);
-}
+    return new ThemeBuilder(base);
+}
+//# sourceMappingURL=createTheme.js.map

package/dist/createTheme/createTheme.test.js

@@ -1,192 +1,167 @@
-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; }
-
 import { mapValues } from 'lodash';
 import { createTheme } from './createTheme';
-describe('createTheme', function () {
-  var base = {
-    breakpoints: {
-      xs: '1',
-      sm: '2',
-      md: '3',
-      lg: '4',
-      xl: '5'
-    }
-  };
-  it('works', function () {
-    expect(createTheme(base).build()).toEqual(_objectSpread(_objectSpread({}, base), {}, {
-      _variables: {},
-      _tokens: {}
-    }));
-  });
-  it('adds a scale', function () {
-    var theme = createTheme(base).addScale('test', function () {
-      return {
-        test: 1,
-        test2: 2
-      };
-    }).build();
-    expect(theme.test).toEqual({
-      test: 1,
-      test2: 2
-    });
-  });
-  it('updates a scale', function () {
-    var builder = createTheme(base).addScale('test', function () {
-      return {
-        test: 1,
-        test2: 2
-      };
-    });
-    expect(builder.build().test).toEqual({
-      test: 1,
-      test2: 2
-    });
-    builder.updateScale('test', function () {
-      return {
-        test3: 3
-      };
-    });
-    expect(builder.build().test).toEqual({
-      test: 1,
-      test2: 2,
-      test3: 3
-    });
-  });
-  it('serializes variables', function () {
-    var theme = createTheme(base).addScale('test', function () {
-      return {
-        test: 1,
-        test2: 2
-      };
-    }).createScaleVariables('test').build();
-    expect(theme.test).toEqual({
-      test: 'var(--test-test)',
-      test2: 'var(--test-test2)'
-    });
-    expect(theme._variables.root).toEqual({
-      '--test-test': 1,
-      '--test-test2': 2
-    });
-  });
-  describe('colors', function () {
-    var staticColors = {
-      white: 'white',
-      black: 'black',
-      blue: 'blue',
-      green: 'green',
-      red: 'red'
+describe('createTheme', () => {
+    const base = {
+        breakpoints: { xs: '1', sm: '2', md: '3', lg: '4', xl: '5' },
     };
-    var cssVariableReferences = mapValues(staticColors, function (val) {
-      return "var(--color-".concat(val, ")");
-    });
-    var builder = createTheme(base);
-    it('creates color variables', function () {
-      var theme = builder.addColors(staticColors).build();
-      expect(theme.colors).toEqual(cssVariableReferences);
-    });
-    it('adds colorModes', function () {
-      var theme = builder.addColors(staticColors).addColorModes('light', {
-        light: {
-          primary: 'red'
-        },
-        dark: {
-          primary: 'blue'
-        }
-      }).build();
-      expect(theme.colors).toEqual(_objectSpread(_objectSpread({}, mapValues(staticColors, function (val) {
-        return "var(--color-".concat(val, ")");
-      })), {}, {
-        primary: 'var(--color-primary)'
-      }));
-      expect(theme._variables.mode).toEqual({
-        '--color-primary': 'var(--color-red)'
-      });
+    it('works', () => {
+        expect(createTheme(base).build()).toEqual({
+            ...base,
+            _variables: {},
+            _tokens: {},
+        });
     });
-    it('returns value checker for colors', function () {
-      var theme = builder.addColors({
-        black: '#000000',
-        white: '#FFFFFF'
-      }).addColorModes('light', {
-        light: {
-          primary: 'black'
-        },
-        dark: {
-          primary: 'white'
-        }
-      }).build();
-      expect(theme._getColorValue('white')).toEqual('#FFFFFF');
-      expect(theme._getColorValue(theme.modes.light.primary)).toEqual('#000000');
+    it('adds a scale', () => {
+        const theme = createTheme(base)
+            .addScale('test', () => ({
+            test: 1,
+            test2: 2,
+        }))
+            .build();
+        expect(theme.test).toEqual({ test: 1, test2: 2 });
     });
-    it('returns value checker for colors with deep values', function () {
-      var theme = builder.addColors({
-        black: '#000000',
-        white: '#FFFFFF',
-        gray: {
-          200: '#eeeeee',
-          300: '#666666'
-        }
-      }).addColorModes('light', {
-        light: {
-          primary: {
-            "default": 'gray-200',
-            cool: {
-              _: 'gray-300',
-              town: 'black'
-            }
-          }
-        }
-      }).build();
-      expect(theme._getColorValue('gray-300')).toEqual('#666666');
-      expect(theme._getColorValue(theme.modes.light['primary-default'])).toEqual('#eeeeee');
+    it('updates a scale', () => {
+        const builder = createTheme(base).addScale('test', () => ({
+            test: 1,
+            test2: 2,
+        }));
+        expect(builder.build().test).toEqual({ test: 1, test2: 2 });
+        builder.updateScale('test', () => ({ test3: 3 }));
+        expect(builder.build().test).toEqual({ test: 1, test2: 2, test3: 3 });
     });
-    it('merges color mode configurations when overriden', function () {
-      var theme = builder.addColors({
-        black: '#000000',
-        white: '#FFFFFF'
-      }).addColorModes('light', {
-        light: {
-          primary: {
-            _: 'black',
-            hover: 'white'
-          }
-        }
-      }).build();
-      var override = createTheme(theme).addColorModes('light', {
-        light: {
-          primary: {
-            _: 'white',
-            hover: 'black'
-          }
-        }
-      }).build();
-      expect(override.modes.light.primary).toEqual('white');
+    it('serializes variables', () => {
+        const theme = createTheme(base)
+            .addScale('test', () => ({
+            test: 1,
+            test2: 2,
+        }))
+            .createScaleVariables('test')
+            .build();
+        expect(theme.test).toEqual({
+            test: 'var(--test-test)',
+            test2: 'var(--test-test2)',
+        });
+        expect(theme._variables.root).toEqual({
+            '--test-test': 1,
+            '--test-test2': 2,
+        });
     });
-    it('returns the raw values of color mode colors on the tokens object', function () {
-      var theme = createTheme(base).addColors({
-        black: '#000000',
-        gray: {
-          300: '#666666'
-        }
-      }).addColorModes('light', {
-        light: {
-          primary: {
-            cool: {
-              _: 'gray-300',
-              town: 'black'
-            }
-          }
-        }
-      }).build();
-      expect(theme._tokens.modes).toEqual({
-        light: {
-          'primary-cool': '#666666',
-          'primary-cool-town': '#000000'
-        }
-      });
+    describe('colors', () => {
+        const staticColors = {
+            white: 'white',
+            black: 'black',
+            blue: 'blue',
+            green: 'green',
+            red: 'red',
+        };
+        const cssVariableReferences = mapValues(staticColors, (val) => `var(--color-${val})`);
+        const builder = createTheme(base);
+        it('creates color variables', () => {
+            const theme = builder.addColors(staticColors).build();
+            expect(theme.colors).toEqual(cssVariableReferences);
+        });
+        it('adds colorModes', () => {
+            const theme = builder
+                .addColors(staticColors)
+                .addColorModes('light', {
+                light: {
+                    primary: 'red',
+                },
+                dark: {
+                    primary: 'blue',
+                },
+            })
+                .build();
+            expect(theme.colors).toEqual({
+                ...mapValues(staticColors, (val) => `var(--color-${val})`),
+                primary: 'var(--color-primary)',
+            });
+            expect(theme._variables.mode).toEqual({
+                '--color-primary': 'var(--color-red)',
+            });
+        });
+        it('returns value checker for colors', () => {
+            const theme = builder
+                .addColors({
+                black: '#000000',
+                white: '#FFFFFF',
+            })
+                .addColorModes('light', {
+                light: {
+                    primary: 'black',
+                },
+                dark: {
+                    primary: 'white',
+                },
+            })
+                .build();
+            expect(theme._getColorValue('white')).toEqual('#FFFFFF');
+            expect(theme._getColorValue(theme.modes.light.primary)).toEqual('#000000');
+        });
+        it('returns value checker for colors with deep values', () => {
+            const theme = builder
+                .addColors({
+                black: '#000000',
+                white: '#FFFFFF',
+                gray: { 200: '#eeeeee', 300: '#666666' },
+            })
+                .addColorModes('light', {
+                light: {
+                    primary: {
+                        default: 'gray-200',
+                        cool: { _: 'gray-300', town: 'black' },
+                    },
+                },
+            })
+                .build();
+            expect(theme._getColorValue('gray-300')).toEqual('#666666');
+            expect(theme._getColorValue(theme.modes.light['primary-default'])).toEqual('#eeeeee');
+        });
+        it('merges color mode configurations when overriden', () => {
+            const theme = builder
+                .addColors({
+                black: '#000000',
+                white: '#FFFFFF',
+            })
+                .addColorModes('light', {
+                light: {
+                    primary: {
+                        _: 'black',
+                        hover: 'white',
+                    },
+                },
+            })
+                .build();
+            const override = createTheme(theme)
+                .addColorModes('light', {
+                light: {
+                    primary: {
+                        _: 'white',
+                        hover: 'black',
+                    },
+                },
+            })
+                .build();
+            expect(override.modes.light.primary).toEqual('white');
+        });
+        it('returns the raw values of color mode colors on the tokens object', () => {
+            const theme = createTheme(base)
+                .addColors({
+                black: '#000000',
+                gray: { 300: '#666666' },
+            })
+                .addColorModes('light', {
+                light: {
+                    primary: {
+                        cool: { _: 'gray-300', town: 'black' },
+                    },
+                },
+            })
+                .build();
+            expect(theme._tokens.modes).toEqual({
+                light: { 'primary-cool': '#666666', 'primary-cool-town': '#000000' },
+            });
+        });
     });
-  });
-});
+});
+//# sourceMappingURL=createTheme.test.js.map

package/dist/createTheme/index.js

@@ -1,3 +1,4 @@
 export * from './createTheme';
 export * from '../utils/serializeTokens';
-export * from '../utils/flattenScale';
+export * from '../utils/flattenScale';
+//# sourceMappingURL=index.js.map

package/dist/createTheme/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/index.js

@@ -2,4 +2,5 @@ export { variance } from './core';
 export * from './createTheme';
 export * from './types/props';
 export * from './transforms';
-export * from './scales/createScale';
+export * from './scales/createScale';
+//# sourceMappingURL=index.js.map

package/dist/scales/createScale.js

@@ -1,3 +1,2 @@
-export var createScale = function createScale() {
-  return [];
-};
+export const createScale = () => [];
+//# sourceMappingURL=createScale.js.map

package/dist/scales/createScaleLookup.js

@@ -1,24 +1,14 @@
 import { get, isArray, isObject, isString } from 'lodash';
-export var createScaleLookup = function createScaleLookup(scale) {
-  if (isString(scale)) {
-    return function (val, props) {
-      return get(props, ['theme', scale, val]);
-    };
-  }
-
-  if (isArray(scale)) {
-    return function (val) {
-      return val;
-    };
-  }
-
-  if (isObject(scale)) {
-    return function (val) {
-      return get(scale, val);
-    };
-  }
-
-  return function () {
-    return undefined;
-  };
-};
+export const createScaleLookup = (scale) => {
+    if (isString(scale)) {
+        return (val, props) => get(props, ['theme', scale, val]);
+    }
+    if (isArray(scale)) {
+        return (val) => val;
+    }
+    if (isObject(scale)) {
+        return (val) => get(scale, val);
+    }
+    return () => undefined;
+};
+//# sourceMappingURL=createScaleLookup.js.map

package/dist/src/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>>;
+};