@codecademy/variance 0.19.1-alpha.a809e8.0 → 0.20.1-alpha.cdc086.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 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)
+### [0.20.1-alpha.cdc086.0](https://github.com/Codecademy/gamut/compare/@codecademy/variance@0.20.0...@codecademy/variance@0.20.1-alpha.cdc086.0) (2022-01-31)
 
 **Note:** Version bump only for package @codecademy/variance
 
@@ -11,6 +11,19 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+## [0.20.0](https://github.com/Codecademy/gamut/compare/@codecademy/variance@0.19.0...@codecademy/variance@0.20.0) (2022-01-25)
+
+
+### ⚠ BREAKING CHANGES
+
+* bumped React to 17
+
+### Features
+
+* bumped React to 17 ([c074ecb](https://github.com/Codecademy/gamut/commit/c074ecbfa026ed8e37cf41e874d345574a46e5e4))
+
+
+
 ## 0.19.0 (2021-10-26)
 
 

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,189 @@
+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 const variance = {
+    // Parser to handle any set of configured props
+    createParser(config) {
+        const propNames = orderPropNames(config);
+        let breakpoints;
+        const parser = (props) => {
+            const styles = {};
+            const { theme } = props;
+            // Attempt to cache the breakpoints if we have not yet or if theme has become available.
+            if (breakpoints === undefined ||
+                (breakpoints === null && theme?.breakpoints)) {
+                // Save the breakpoints if we can
+                breakpoints = parseBreakpoints(theme?.breakpoints);
+            }
+            // Loops over all prop names on the configured config to check for configured styles
+            propNames.forEach((prop) => {
+                const property = config[prop];
+                const 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, config });
+    },
+    // Given a single property configuration enrich the config with a transform function
+    // that traverses the properties the function is responsible for.
+    createTransform(prop, config) {
+        const { transform = identity, property, properties = [property], scale, } = config;
+        const getScaleValue = createScaleLookup(scale);
+        const alwaysTransform = scale === undefined || isArray(scale);
+        return {
+            ...config,
+            prop,
+            styleFn: (value, prop, props) => {
+                const styles = {};
+                if (isUndefined(value)) {
+                    return styles;
+                }
+                let useTransform = false;
+                let intermediateValue;
+                let scaleValue;
+                switch (typeof value) {
+                    case 'number':
+                    case 'string':
+                        scaleValue = getScaleValue(value, props);
+                        useTransform = scaleValue !== undefined || alwaysTransform;
+                        intermediateValue = 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((property) => {
+                    let 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(...parsers) {
+        return this.createParser(parsers.reduce((carry, parser) => ({ ...carry, ...parser.config }), {}));
+    },
+    createCss(config) {
+        const parser = this.create(config);
+        const filteredProps = parser.propNames;
+        return (cssProps) => {
+            let cache;
+            const 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 */
+            const selectors = allKeys.filter((key) => !filteredProps.includes(key) && isObject(cssProps[key]));
+            /** Static CSS Properties get extracted if they match neither syntax */
+            const staticCss = getStaticCss(cssProps, [
+                'theme',
+                ...selectors,
+                ...filteredProps,
+            ]);
+            return ({ theme }) => {
+                if (cache)
+                    return cache;
+                const css = parser({ ...cssProps, theme });
+                selectors.forEach((selector) => {
+                    const selectorConfig = cssProps[selector] ?? {};
+                    css[selector] = {
+                        ...getStaticCss(selectorConfig, filteredProps),
+                        ...parser({ ...selectorConfig, theme }),
+                    };
+                });
+                /** Merge the static and generated css and save it to the cache */
+                cache = {
+                    ...staticCss,
+                    ...css,
+                };
+                return cache;
+            };
+        };
+    },
+    createVariant(config) {
+        const css = this.createCss(config);
+        return ({ prop = 'variant', defaultVariant, base = {}, variants }) => {
+            const baseFn = css(base);
+            const variantFns = {};
+            Object.keys(variants).forEach((key) => {
+                const variantKey = key;
+                const cssProps = variants[variantKey];
+                variantFns[variantKey] = css(cssProps);
+            });
+            return (props) => {
+                const { [prop]: selected = defaultVariant } = props;
+                const styles = {};
+                if (!selected)
+                    return styles;
+                return merge(styles, baseFn(props), variantFns?.[selected]?.(props));
+            };
+        };
+    },
+    createStates(config) {
+        const css = this.createCss(config);
+        return (states) => {
+            const orderedStates = Object.keys(states);
+            const stateFns = {};
+            orderedStates.forEach((key) => {
+                const stateKey = key;
+                const cssProps = states[stateKey];
+                stateFns[stateKey] = css(cssProps);
+            });
+            return (props) => {
+                const styles = {};
+                orderedStates.forEach((state) => {
+                    merge(styles, props[state] && stateFns[state](props));
+                });
+                return styles;
+            };
+        };
+    },
+    create(config) {
+        const transforms = {};
+        // Create a transform function for each of the props
+        for (const 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);
+    },
+};
+//# sourceMappingURL=core.js.map

package/dist/core.js.map

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

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,94 @@
+import { mapValues, merge } from 'lodash';
+import { flattenScale } from '../utils/flattenScale';
+import { serializeTokens } from '../utils/serializeTokens';
+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' })
+     */
+    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;
+    }
+    /**
+     *
+     * @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;
+    }
+    /**
+     *
+     * @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;
+    }
+    /**
+     *
+     * @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;
+    }
+    /**
+     * This finalizes the theme build and returns the final theme and variables to be provided.
+     */
+    build() {
+        return merge({}, this.#theme, { _variables: {}, _tokens: {} });
+    }
+}
+export function createTheme(base) {
+    return new ThemeBuilder(base);
+}
+//# sourceMappingURL=createTheme.js.map

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 {};

package/dist/createTheme/createTheme.test.js

@@ -0,0 +1,167 @@
+import { mapValues } from 'lodash';
+import { createTheme } from './createTheme';
+describe('createTheme', () => {
+    const base = {
+        breakpoints: { xs: '1', sm: '2', md: '3', lg: '4', xl: '5' },
+    };
+    it('works', () => {
+        expect(createTheme(base).build()).toEqual({
+            ...base,
+            _variables: {},
+            _tokens: {},
+        });
+    });
+    it('adds a scale', () => {
+        const theme = createTheme(base)
+            .addScale('test', () => ({
+            test: 1,
+            test2: 2,
+        }))
+            .build();
+        expect(theme.test).toEqual({ test: 1, test2: 2 });
+    });
+    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('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,
+        });
+    });
+    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/createTheme.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTheme.test.js","sourceRoot":"","sources":["../../src/createTheme/createTheme.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,MAAM,IAAI,GAAG;QACX,WAAW,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE;KAC7D,CAAC;IACF,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE;QACf,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC;YACxC,GAAG,IAAI;YACP,UAAU,EAAE,EAAE;YACd,OAAO,EAAE,EAAE;SACZ,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,cAAc,EAAE,GAAG,EAAE;QACtB,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC;aAC5B,QAAQ,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;YACvB,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;SACT,CAAC,CAAC;aACF,KAAK,EAAE,CAAC;QAEX,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iBAAiB,EAAE,GAAG,EAAE;QACzB,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;YACxD,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;SACT,CAAC,CAAC,CAAC;QAEJ,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;QAE5D,OAAO,CAAC,WAAW,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAElD,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IACxE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAC9B,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC;aAC5B,QAAQ,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;YACvB,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;SACT,CAAC,CAAC;aACF,oBAAoB,CAAC,MAAM,CAAC;aAC5B,KAAK,EAAE,CAAC;QAEX,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC;YACzB,IAAI,EAAE,kBAAkB;YACxB,KAAK,EAAE,mBAAmB;SAC3B,CAAC,CAAC;QACH,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC;YACpC,aAAa,EAAE,CAAC;YAChB,cAAc,EAAE,CAAC;SAClB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;QACtB,MAAM,YAAY,GAAG;YACnB,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,OAAO;YACd,GAAG,EAAE,KAAK;SACX,CAAC;QACF,MAAM,qBAAqB,GAAG,SAAS,CACrC,YAAY,EACZ,CAAC,GAAG,EAAE,EAAE,CAAC,eAAe,GAAG,GAAG,CAC/B,CAAC;QACF,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;QAClC,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;YACjC,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,KAAK,EAAE,CAAC;YAEtD,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;QACtD,CAAC,CAAC,CAAC;QACH,EAAE,CAAC,iBAAiB,EAAE,GAAG,EAAE;YACzB,MAAM,KAAK,GAAG,OAAO;iBAClB,SAAS,CAAC,YAAY,CAAC;iBACvB,aAAa,CAAC,OAAO,EAAE;gBACtB,KAAK,EAAE;oBACL,OAAO,EAAE,KAAK;iBACf;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,MAAM;iBAChB;aACF,CAAC;iBACD,KAAK,EAAE,CAAC;YAEX,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC;gBAC3B,GAAG,SAAS,CAAC,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,eAAe,GAAG,GAAG,CAAC;gBAC1D,OAAO,EAAE,sBAAsB;aAChC,CAAC,CAAC;YAEH,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC;gBACpC,iBAAiB,EAAE,kBAAkB;aACtC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,kCAAkC,EAAE,GAAG,EAAE;YAC1C,MAAM,KAAK,GAAG,OAAO;iBAClB,SAAS,CAAC;gBACT,KAAK,EAAE,SAAS;gBAChB,KAAK,EAAE,SAAS;aACjB,CAAC;iBACD,aAAa,CAAC,OAAO,EAAE;gBACtB,KAAK,EAAE;oBACL,OAAO,EAAE,OAAO;iBACjB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,OAAO;iBACjB;aACF,CAAC;iBACD,KAAK,EAAE,CAAC;YAEX,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YACzD,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAC7D,SAAS,CACV,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,EAAE,CAAC,mDAAmD,EAAE,GAAG,EAAE;YAC3D,MAAM,KAAK,GAAG,OAAO;iBAClB,SAAS,CAAC;gBACT,KAAK,EAAE,SAAS;gBAChB,KAAK,EAAE,SAAS;gBAChB,IAAI,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE;aACzC,CAAC;iBACD,aAAa,CAAC,OAAO,EAAE;gBACtB,KAAK,EAAE;oBACL,OAAO,EAAE;wBACP,OAAO,EAAE,UAAU;wBACnB,IAAI,EAAE,EAAE,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE;qBACvC;iBACF;aACF,CAAC;iBACD,KAAK,EAAE,CAAC;YAEX,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YAC5D,MAAM,CACJ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAC3D,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,iDAAiD,EAAE,GAAG,EAAE;YACzD,MAAM,KAAK,GAAG,OAAO;iBAClB,SAAS,CAAC;gBACT,KAAK,EAAE,SAAS;gBAChB,KAAK,EAAE,SAAS;aACjB,CAAC;iBACD,aAAa,CAAC,OAAO,EAAE;gBACtB,KAAK,EAAE;oBACL,OAAO,EAAE;wBACP,CAAC,EAAE,OAAO;wBACV,KAAK,EAAE,OAAO;qBACf;iBACF;aACF,CAAC;iBACD,KAAK,EAAE,CAAC;YAEX,MAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,CAAC;iBAChC,aAAa,CAAC,OAAO,EAAE;gBACtB,KAAK,EAAE;oBACL,OAAO,EAAE;wBACP,CAAC,EAAE,OAAO;wBACV,KAAK,EAAE,OAAO;qBACf;iBACF;aACF,CAAC;iBACD,KAAK,EAAE,CAAC;YAEX,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,kEAAkE,EAAE,GAAG,EAAE;YAC1E,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC;iBAC5B,SAAS,CAAC;gBACT,KAAK,EAAE,SAAS;gBAChB,IAAI,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE;aACzB,CAAC;iBACD,aAAa,CAAC,OAAO,EAAE;gBACtB,KAAK,EAAE;oBACL,OAAO,EAAE;wBACP,IAAI,EAAE,EAAE,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE;qBACvC;iBACF;aACF,CAAC;iBACD,KAAK,EAAE,CAAC;YAEX,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;gBAClC,KAAK,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,mBAAmB,EAAE,SAAS,EAAE;aACrE,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/createTheme/index.d.ts

@@ -0,0 +1,3 @@
+export * from './createTheme';
+export * from '../utils/serializeTokens';
+export * from '../utils/flattenScale';

package/dist/createTheme/index.js

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

package/dist/createTheme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/createTheme/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC"}

package/dist/createTheme/types.d.ts

@@ -0,0 +1,42 @@
+import { CSSObject } from '../types/props';
+import { AbstractTheme } from '../types/theme';
+/**
+ * This is a custom generic that ensures the safety of adding additional values to a theme object without accidentally wiping out
+ * required keys like `breakpoints`.  It works by creating a new mapped type and merging the values of the union of Base & Next:
+ * 1. If the key exists on both Base and Next return the intersection of both values
+ * 2. If the key exists on next use the value on next.
+ * 3. If the key exists on base but nothing else use the value on base.
+ *
+ * The resulting type is then rejoined with keys that cannot be mutated (breakpoints) as the next version of Theme
+ */
+export declare type MergeTheme<Base extends AbstractTheme, Next, Unmergable = Record<'breakpoints', Base['breakpoints']>> = Unmergable & Merge<Base, Next>;
+/** This merges at 2 levels of depth */
+export declare type Merge<A, B> = {
+    [K in keyof (A & B)]: K extends keyof B ? K extends keyof A ? AssignValueIfUnmergable<A[K], B[K]> : B[K] : K extends keyof A ? A[K] : never;
+};
+/** Extract mergable objects */
+export declare type Mergable<T> = Exclude<T, ((...args: any) => any) | string | boolean | symbol | number | any[]>;
+/** Return B if either A or B is unmergable */
+export declare type AssignValueIfUnmergable<A, B> = Mergable<A> extends never ? B : Mergable<B> extends never ? B : Assign<A, B>;
+/** Prefer all values from B */
+export declare type Assign<A, B> = {
+    [K in keyof A | keyof B]: K extends keyof B ? B[K] : K extends keyof A ? A[K] : never;
+};
+/** These are keys that are consistent for all theme builds - they are loosely typed as they are not meant to be accessed directly */
+export declare type PrivateThemeKeys = {
+    _variables: Record<string, CSSObject>;
+    _tokens: Record<string | number, any>;
+};
+/** This allows 3 layers of color aliases to be constructed when adding colorModes
+ * @example
+ * {
+ *   button: {
+ *     bg: {
+ *       hover: 'someAlias'
+ *     }
+ *   }
+ * }
+ *
+ * `button-bg-hover`
+ * */
+export declare type ColorModeConfig<Colors> = Record<string, Colors | Record<string, Colors> | Record<string, Colors | Record<string, Colors>>>;

package/dist/createTheme/types.js

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

package/dist/createTheme/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/createTheme/types.ts"],"names":[],"mappings":""}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { variance } from './core';
+export * from './createTheme';
+export * from './types/props';
+export * from './transforms';
+export * from './scales/createScale';