import { __extends } from "tslib";
import * as React from 'react';
import { Button } from '@uifabric/experiments';
import { createTheme, Stack } from 'office-ui-fabric-react';
var tokens = {
    sectionStack: {
        childrenGap: 32,
    },
    buttonStack: {
        childrenGap: 8,
    },
};
var testTheme = createTheme({
    semanticColors: {
        buttonText: '#E20000',
    },
    fonts: {
        small: {
            color: 'purple',
        },
    },
});
/* eslint-disable react/jsx-no-bind */
var ButtonTokensExample = /** @class */ (function (_super) {
    __extends(ButtonTokensExample, _super);
    function ButtonTokensExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ButtonTokensExample.prototype.render = function () {
        return (React.createElement(Stack, { disableShrink: true, horizontal: true, tokens: tokens.buttonStack },
            React.createElement(Button, { primary: true, icon: "PeopleAdd", content: "Token Function: Red BG, White Text", tokens: function (props, theme) {
                    return props.primary && {
                        backgroundColor: '#E20000',
                        backgroundColorHovered: 'pink',
                        color: 'white',
                        colorHovered: '#595959',
                        iconColor: 'white',
                        iconColorHovered: '#595959',
                    };
                } }),
            React.createElement(Button, { icon: "PeopleAdd", content: "Token Function: Red Icon (via theme), Purple Text", theme: testTheme, tokens: function (props, theme) { return ({
                    color: theme.fonts.small.color,
                }); } })));
    };
    return ButtonTokensExample;
}(React.Component));
export { ButtonTokensExample };
//# sourceMappingURL=Button.Tokens.Example.js.map