import * as React from 'react';
import { ColorRamp } from '../components/ColorRamp';
import { teamsDarkTheme, teamsHighContrastTheme, teamsLightTheme } from '@fluentui/react-theme';
export default {
    title: 'Fluent UI Theme/Global/Colors',
};
// FIXME: hardcoded theme
var theme = {
    light: teamsLightTheme,
    dark: teamsDarkTheme,
    highContrast: teamsHighContrastTheme,
};
export var GlobalColors = function () {
    return (React.createElement("div", { style: { display: 'flex' } },
        React.createElement("div", null,
            React.createElement("h3", null, "Grey"),
            React.createElement(ColorRamp, { ramp: theme.light.global.palette.grey })),
        React.createElement("div", null,
            React.createElement("h3", null, "Brand"),
            React.createElement(ColorRamp, { ramp: theme.light.global.palette.brand })),
        React.createElement("div", null,
            React.createElement("h3", null, "Contrast"),
            React.createElement(ColorRamp, { ramp: {
                    hyperlink: theme.light.global.color.hyperlink,
                    disabled: theme.light.global.color.disabled,
                    selected: theme.light.global.color.selected,
                } })),
        React.createElement("div", null,
            React.createElement("h3", null, "Aliases"),
            React.createElement(ColorRamp, { ramp: {
                    black: theme.light.global.color.black,
                    white: theme.light.global.color.white,
                } }))));
};
//# sourceMappingURL=GlobalColor.stories.js.map