@kalamazoo/theme/dist/cjs/utils/createTheme.js

The Atlaskit theme framework

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
/*
createTheme is used to create a set of Providers and Consumers for theming components.
- Takes a default theme function; this theme function gets a set of props, and returns tokens
   based on those props. An example of this default theme function is one that produces the standard
   appearance of the component
- Returns two things - a Provider that allow for additional themes to be applied, and a Consumer
   that can get the current theme and fetch it.
*/
function createTheme(defaultGetTokens) {
    var emptyThemeFn = function (getTokens, props) {
        return getTokens(props);
    };
    /* Internally, Theme uses React Context, with internal providers and consumers.
       The React Context passes only a function that gets props, and turns them into tokens. This
          function gets mixed as more Providers with their own themes are added. This mixed function
          is ultimately picked up by Consumers, which implement a context consumer internally to fetch
          the theme. */
    var ThemeContext = react_1.createContext(defaultGetTokens);
    // The Theme Consumer takes a function as its child - this function takes tokens, and the
    // return value is generally a set of nodes with the tokens applied appropriately.
    function Consumer(props) {
        var children = props.children, themeProps = tslib_1.__rest(props, ["children"]);
        return (react_1.default.createElement(ThemeContext.Consumer, null, function (theme) {
            var themeFn = theme || emptyThemeFn;
            // @ts-ignore See issue for more info: https://github.com/Microsoft/TypeScript/issues/10727
            // Argument of type 'Pick<ThemeProps & { children: (tokens: ThemeTokens) => ReactNode; }, Exclude<keyof ThemeProps, "children">>' is not assignable to parameter of type 'ThemeProps'.ts(2345)
            var tokens = themeFn(themeProps);
            return children(tokens);
        }));
    }
    /* The Theme Provider takes regular nodes as its child, but also takes a *theme function*
       - The theme function takes a set of props, as well as a function (getTokens) that can
          turn props into tokens.
       - The getTokens function isn't called immediately - instead the props are passed
          through a mix of parent theming functions
       Children of this provider will receive this mixed theme
    */
    function Provider(props) {
        return (react_1.default.createElement(ThemeContext.Consumer, null, function (themeFn) {
            var valueFn = props.value || emptyThemeFn;
            var mixedFn = function (themeProps) {
                return valueFn(themeFn, themeProps);
            };
            return (react_1.default.createElement(ThemeContext.Provider, { value: mixedFn }, props.children));
        }));
    }
    return { Consumer: Consumer, Provider: Provider };
}
exports.createTheme = createTheme;
//# sourceMappingURL=createTheme.js.map