import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from "styled-components";
import { color } from "../../constants";
export default {
    title: "Base/Colors",
};
const Wrapper = styled.div `
  height: 100vh;
  width: 100%;
  background: #e5e5e5;
  display: flex;
`;
const Color = styled.div(({ color }) => `
  height: 108px;
  width: 108px;
  margin: 15px;
  color: #e5e5e5;
  background: ${color};
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`);
const TextWrapper = styled.div `
  font-family: Medium;
  font-size: 8px;
  color: ${color.gray};
  * {
    margin: 15px;
  }
`;
export const colors = () => (_jsxs(Wrapper, { children: [_jsxs(Color, { color: color.backgroundBig, children: [_jsx("div", { children: "backgroundBig" }), _jsx("div", { children: color.backgroundBig })] }), _jsxs(Color, { color: color.background, children: [_jsx("div", { children: "background" }), _jsx("div", { children: color.background })] }), _jsxs(Color, { color: color.backgroundGray, children: [_jsx("div", { children: "backgroundGray" }), _jsx("div", { children: color.backgroundGray })] }), _jsxs(Color, { color: color.gray, children: [_jsx("div", { children: "gray" }), _jsx("div", { children: color.gray })] }), _jsxs(Color, { color: color.darkBlue, children: [_jsx("div", { children: "darkBlue" }), _jsx("div", { children: color.darkBlue })] }), _jsxs(Color, { color: color.fonts, children: [_jsx("div", { children: "fonts" }), _jsx("div", { children: color.fonts })] }), _jsxs(Color, { color: color.blueHover, children: [_jsx("div", { children: "blueHover" }), _jsx("div", { children: color.blue })] }), _jsxs(Color, { color: color.blue, children: [_jsx("div", { children: "blue" }), _jsx("div", { children: color.blue })] })] }));
//# sourceMappingURL=index.stories.js.map