define(["require", "exports", "react", "@fluentui/react-button", "@fluentui/react-icons", "@fluentui/react-theme-provider", "@fluentui/theme", "office-ui-fabric-react"], function (require, exports, React, react_button_1, react_icons_1, react_theme_provider_1, theme_1, office_ui_fabric_react_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var paletteAccent = 'var(--palette-accent)';
    var paletteSoftest = 'var(--palette-softest)';
    var paletteStrongest = 'var(--palette-strongest)';
    var getThemes = function (accent) {
        var lightTheme = theme_1.mergeThemes({
            tokens: {
                palette: {
                    accent: accent,
                    softest: 'white',
                    strongest: 'black',
                },
                body: {
                    background: 'white',
                    contentColor: 'black',
                },
                accent: {
                    background: paletteAccent,
                    contentColor: paletteSoftest,
                    hovered: {
                        background: paletteAccent,
                        contentColor: paletteSoftest,
                    },
                    pressed: {
                        background: paletteAccent,
                        contentColor: paletteSoftest,
                    },
                },
                button: {
                    background: '#ddd',
                },
            },
            stylesheets: [],
        });
        var darkTheme = theme_1.mergeThemes(lightTheme, {
            tokens: {
                palette: {
                    softest: 'black',
                    strongest: 'white',
                },
                body: {
                    background: '#333',
                    contentColor: paletteStrongest,
                },
                button: {
                    background: 'transparent',
                    contentColor: paletteStrongest,
                    hovered: {
                        background: '#555',
                        contentColor: paletteStrongest,
                    },
                },
                accent: {
                    background: 'blue',
                    contentColor: paletteStrongest,
                    hovered: {
                        background: '#555',
                        contentColor: paletteStrongest,
                    },
                },
            },
        });
        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" }, "Accent 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