define(["require", "exports", "react", "@fluentui/react-button", "@fluentui/react-icons", "@fluentui/react-theme-provider", "office-ui-fabric-react"], function (require, exports, React, react_button_1, react_icons_1, react_theme_provider_1, office_ui_fabric_react_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var getThemes = function (brand) {
        var lightTheme = {
            tokens: {
                color: {
                    body: {
                        background: 'white',
                        contentColor: 'black',
                    },
                    brand: {
                        background: brand,
                        hovered: {
                            background: brand,
                        },
                        pressed: {
                            background: brand,
                        },
                    },
                },
            },
        };
        var darkTheme = {
            tokens: {
                color: {
                    body: {
                        background: '#333',
                        contentColor: 'white',
                    },
                    brand: {
                        background: brand,
                        hovered: {
                            background: '#555',
                        },
                        pressed: {
                            background: '#555',
                        },
                    },
                },
            },
        };
        return { lightTheme: lightTheme, darkTheme: darkTheme };
    };
    var ExampleBox = function (_a) {
        var title = _a.title, theme = _a.theme;
        return (React.createElement(react_theme_provider_1.ThemeProvider, { theme: theme, style: { padding: 20 } },
            React.createElement(office_ui_fabric_react_1.Stack, { tokens: {
                    childrenGap: 8,
                    maxWidth: 400,
                } },
                React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, title),
                React.createElement(react_button_1.Button, { icon: React.createElement(react_icons_1.UploadIcon, null) }, "I am a button"),
                React.createElement(react_button_1.Button, { primary: true }, "I am a primary button"))));
    };
    exports.ThemeExample = function () {
        var _a = React.useState('#f00'), color = _a[0], setColor = _a[1];
        var _b = getThemes(color), lightTheme = _b.lightTheme, darkTheme = _b.darkTheme;
        var onColorChange = React.useCallback(function (ev, newColor) { return setColor(newColor.str); }, []);
        return (React.createElement(office_ui_fabric_react_1.Stack, { gap: 16 },
            React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "brand color"),
            React.createElement(office_ui_fabric_react_1.ColorPicker, { color: color, onChange: onColorChange }),
            React.createElement(ExampleBox, { title: "Light", theme: lightTheme }),
            React.createElement(ExampleBox, { title: "Dark", theme: darkTheme })));
    };
});
//# sourceMappingURL=Converged.stories.js.map