import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__ from "@chakra-ui/react";
import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_icons__ from "@chakra-ui/icons";
const meta = {
    title: 'Theme/Colors',
    component: __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box,
    parameters: {
        design: {
            type: 'figma',
            url: 'https://www.figma.com/file/bJcVrZNilxa06jYuVCGWYd/Redpanda-Design-System-2023?type=design&node-id=3%3A4600&mode=design&t=tBiDQLpDwZmQqOWV-1'
        }
    }
};
/* ESM default export */ const Colors_stories_rslib_entry_ = meta;
const ColorBox = ({ color, name })=>{
    const { onCopy, hasCopied } = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.useClipboard)(color);
    name = name || color;
    return /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Flex, {
        alignItems: 'center',
        gap: "3"
    }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
        bg: color,
        boxSize: "3rem",
        borderRadius: 'md'
    }), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, {
        as: "b",
        textTransform: 'capitalize'
    }, name), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.chakra.span, null, color), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Button, {
        size: "xs",
        variant: 'link',
        onClick: onCopy
    }, hasCopied ? 'Copied!' : 'Copy'))));
};
const Default = {
    render: (args)=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, {
            mb: "4"
        }, "Out of the box, Chakra provides a default color palette that we automatically inherit. For a list of available colors and their respective color tokens (ie:", ' ', /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, {
            as: "code"
        }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Mark, {
            bg: "yellow.200"
        }, "blue.500")), "), refer to the Chakra", ' ', /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Link, {
            href: "https://chakra-ui.com/docs/styled-system/theme#colors",
            isExternal: true
        }, "Colors page ", /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_icons__.ExternalLinkIcon, {
            mx: "2px"
        }))), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, {
            mb: "4"
        }, "The Redpanda UI Library offers additional colors that coincide with the Redpanda Design System:"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Heading, {
            as: "h2",
            mb: "4"
        }, "Brand"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Grid, {
            gap: 2,
            templateColumns: 'repeat( auto-fit, minmax(25%, 1fr) )'
        }, /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.50",
            name: "brand 50"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.100",
            name: "brand 100"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.200",
            name: "brand 200"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.300",
            name: "brand 300"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.400",
            name: "brand 400"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.500",
            name: "brand 500"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.600",
            name: "brand 600"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.700",
            name: "brand 700"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.800",
            name: "brand 800"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "brand.900",
            name: "brand 900"
        })), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Divider, {
            my: "8"
        }), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Heading, {
            as: "h2",
            mb: "4"
        }, "Dark Blue"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Grid, {
            gap: 2,
            templateColumns: 'repeat( auto-fit, minmax(25%, 1fr) )'
        }, /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.50"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.100"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.200"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.300"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.400"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.500"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.600"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.700"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.800"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "darkblue.900"
        })), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Divider, {
            my: "8"
        }), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Heading, {
            as: "h2",
            mb: "4"
        }, "Gray vs. Grey"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, null, "We support both variations of the spelling of Gray (or Grey):"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Grid, {
            mt: "4",
            gap: 2,
            templateColumns: 'repeat( auto-fit, minmax(25%, 1fr) )'
        }, /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.50"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.100"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.200"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.300"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.400"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.500"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.600"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.700"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.800"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "gray.900"
        })), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Divider, {
            my: "6"
        }), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Grid, {
            gap: 2,
            templateColumns: 'repeat( auto-fit, minmax(25%, 1fr) )'
        }, /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.50"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.100"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.200"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.300"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.400"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.500"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.600"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.700"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.800"
        }), /*#__PURE__*/ React.createElement(ColorBox, {
            color: "grey.900"
        })))
};
export { Default, Colors_stories_rslib_entry_ as default };
