import { FluentProvider } from '@fluentui/react-provider';
import { teamsLightTheme, teamsDarkTheme, webLightTheme } from '@fluentui/react-theme';
import * as React from 'react';
var containerStyles = {
    border: "5px solid var(--neutralColorTokens-neutralStroke1)",
    backgroundColor: 'var(--neutralColorTokens-neutralBackground1)',
    color: 'var(--neutralColorTokens-brandForeground1)',
    margin: '5px',
    padding: '5px',
};
export var Direction = function () { return (React.createElement(React.Fragment, null,
    React.createElement("p", null, "This example shows usage of \"dir\" attribute to change text direction."),
    React.createElement(FluentProvider, { theme: teamsLightTheme },
        React.createElement("div", { style: containerStyles }, "Hello World!")),
    React.createElement(FluentProvider, { dir: "rtl", theme: teamsLightTheme },
        React.createElement("div", { style: containerStyles }, "\u0645\u0631\u062D\u0628\u0627 \u0628\u0627\u0644\u0639\u0627\u0644\u0645!")))); };
export var DifferentThemes = function () { return (React.createElement(React.Fragment, null,
    React.createElement("p", null, "This example shows usage of different themes with the same tokens set."),
    React.createElement("h2", null, "Teams Light Theme"),
    React.createElement(FluentProvider, { theme: teamsLightTheme },
        React.createElement("div", { style: containerStyles }, "Hello World!")),
    React.createElement("h2", null, "Teams Dark Theme"),
    React.createElement(FluentProvider, { theme: teamsDarkTheme },
        React.createElement("div", { style: containerStyles }, "Hello World!")),
    React.createElement("h2", null, "Web Light Theme"),
    React.createElement(FluentProvider, { theme: webLightTheme },
        React.createElement("div", { style: containerStyles }, "Hello World!")))); };
export var ThemesMerge = function () { return (React.createElement(React.Fragment, null,
    React.createElement("p", null, "This example shows theme composition and partial overrides of tokens."),
    React.createElement(FluentProvider, { theme: teamsLightTheme },
        React.createElement(FluentProvider, { theme: {
                alias: {
                    color: {
                        neutral: {
                            neutralBackground1: 'salmon',
                            brandForeground1: 'white',
                        },
                    },
                },
            } },
            React.createElement("div", { style: containerStyles }, "Hello World!"))))); };
//# sourceMappingURL=FluentProvider.stories.js.map