import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { ThemeProvider, useTheme } from "styled-components";
import equilibriumTheme from "../theme/equilibrium.theme";
import genshiroTheme from "../theme/genshiro.theme";
import T from "../typography";
const Wrapper = styled.div `
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
`;
const Row = styled.div `
  display: flex;
  margin-bottom: 60px;
`;
const Color = styled.div `
  height: 64px;
  width: 128px;
  border: 1px solid #00244533;
  border-radius: 4px;
  margin-right: 12px;
  position: relative;

  ::before {
    position: absolute;
    bottom: -20px;
  }

  ::after {
    position: absolute;
    opacity: 0.7;
    bottom: -40px;
  }
`;
const Primary960 = styled(Color) `
  background: ${({ theme }) => theme.new?.colors?.primary960};

  ::before {
    content: "primary960";
  }

  ::after {
    content: "${({ theme }) => theme.new?.colors?.primary960}";
  }
`;
const Primary950 = styled(Color) `
  background: ${({ theme }) => theme.new?.colors?.primary950};

  ::before {
    content: "primary950";
  }

  ::after {
    content: "${({ theme }) => theme.new?.colors?.primary950}";
  }
`;
const Primary900 = styled(Color) `
  background: ${({ theme }) => theme.new?.colors?.primary900};

  ::before {
    content: "primary900";
  }

  ::after {
    content: "${({ theme }) => theme.new?.colors?.primary900}";
  }
`;
const Primary700 = styled(Color) `
  background: ${({ theme }) => theme.new?.colors?.primary700};

  ::before {
    content: "primary700";
  }

  ::after {
    content: "${({ theme }) => theme.new?.colors?.primary700}";
  }
`;
const Primary400 = styled(Color) `
  background: ${({ theme }) => theme.new?.colors?.primary400};

  ::before {
    content: "primary400";
  }

  ::after {
    content: "${({ theme }) => theme.new?.colors?.primary400}";
  }
`;
const Primary300 = styled(Color) `
  background: ${({ theme }) => theme.new?.colors?.primary300};

  ::before {
    content: "primary300";
  }

  ::after {
    content: "${({ theme }) => theme.new?.colors?.primary300}";
  }
`;
const Primary200 = styled(Color) `
  background: ${({ theme }) => theme.new?.colors?.primary200};

  ::before {
    content: "primary200";
  }

  ::after {
    content: "${({ theme }) => theme.new?.colors?.primary200}";
  }
`;
const Primary110 = styled(Color) `
  background: ${({ theme }) => theme.new?.colors?.primary110};

  ::before {
    content: "primary110";
  }

  ::after {
    content: "${({ theme }) => theme.new?.colors?.primary110}";
  }
`;
const Primary100 = styled(Color) `
  background: ${({ theme }) => theme.new?.colors?.primary100};

  ::before {
    content: "primary100";
  }

  ::after {
    content: "${({ theme }) => theme.new?.colors?.primary100}";
  }
`;
const Primary090 = styled(Color) `
  background: ${({ theme }) => theme.new?.colors?.primary090};

  ::before {
    content: "primary090";
  }

  ::after {
    content: "${({ theme }) => theme.new?.colors?.primary090}";
  }
`;
const Black900 = styled(Color) `
  background: ${({ theme }) => theme.new?.colors?.black900};

  ::before {
    content: "black900";
  }

  ::after {
    content: "${({ theme }) => theme.new?.colors?.black900}";
  }
`;
const Black200 = styled(Color) `
  background: ${({ theme }) => theme.new?.colors?.black200};

  ::before {
    content: "black200";
  }

  ::after {
    content: "${({ theme }) => theme.new?.colors?.black200}";
  }
`;
const Black100 = styled(Color) `
  background: ${({ theme }) => theme.new?.colors?.black100};

  ::before {
    content: "black100";
  }

  ::after {
    content: "${({ theme }) => theme.new?.colors?.black100}";
  }
`;
const Red900 = styled(Color) `
  background: ${({ theme }) => theme.new?.colors?.red900};

  ::before {
    content: "red900";
  }

  ::after {
    content: "${({ theme }) => theme.new?.colors?.red900}";
  }
`;
const Red800 = styled(Color) `
  background: ${({ theme }) => theme.new?.colors?.red800};

  ::before {
    content: "red800";
  }

  ::after {
    content: "${({ theme }) => theme.new?.colors?.red800}";
  }
`;
const Green900 = styled(Color) `
  background: ${({ theme }) => theme.new?.colors?.green900};

  ::before {
    content: "green900";
  }

  ::after {
    content: "${({ theme }) => theme.new?.colors?.green900}";
  }
`;
const White900 = styled(Color) `
  background: ${({ theme }) => theme.new?.colors?.white900};

  ::before {
    content: "white900";
  }

  ::after {
    content: "${({ theme }) => theme.new?.colors?.white900}";
  }
`;
const BackgroungColor = ({ name }) => {
    const theme = useTheme();
    if (!theme.new || !theme.new.colors || !theme.new.colors[name]) {
        console.error("Invalid color name");
        return null;
    }
    const StyledColor = styled(Color) `
    background: ${({ theme }) => theme.new?.colors?.[name]};

    ::before {
      content: "${name}";
    }

    ::after {
      content: "${({ theme }) => theme.new?.colors?.[name]}";
    }
  `;
    return _jsx(StyledColor, {});
};
export default {
    title: "New/Colors",
};
export const Equilibrium = () => {
    return (_jsx(ThemeProvider, { theme: equilibriumTheme, children: _jsxs(Wrapper, { children: [_jsx(T.H1, { children: "Primary" }), _jsxs(Row, { children: [_jsx(Primary960, {}), _jsx(Primary950, {}), _jsx(Primary900, {}), _jsx(Primary700, {}), _jsx(Primary300, {}), _jsx(Primary200, {}), _jsx(Primary100, {})] }), _jsx(T.H1, { children: "Black" }), _jsxs(Row, { children: [_jsx(Black900, {}), _jsx(Black200, {}), _jsx(Black100, {})] }), _jsx(T.H1, { children: "Red" }), _jsxs(Row, { children: [_jsx(Red900, {}), _jsx(Red800, {})] }), _jsx(T.H1, { children: "Green" }), _jsx(Row, { children: _jsx(Green900, {}) }), _jsx(T.H1, { children: "White" }), _jsx(Row, { children: _jsx(White900, {}) })] }) }));
};
export const Genshiro = () => {
    return (_jsx(ThemeProvider, { theme: genshiroTheme, children: _jsxs(Wrapper, { children: [_jsx(T.H1, { children: "Primary" }), _jsxs(Row, { children: [_jsx(Primary950, {}), _jsx(Primary900, {}), _jsx(Primary400, {}), _jsx(Primary300, {}), _jsx(Primary200, {}), _jsx(Primary110, {}), _jsx(Primary100, {}), _jsx(Primary090, {})] }), _jsx(T.H1, { children: "Black" }), _jsxs(Row, { children: [_jsx(Black900, {}), _jsx(Black100, {})] }), _jsx(T.H1, { children: "Red" }), _jsxs(Row, { children: [_jsx(Red900, {}), _jsx(Red800, {})] }), _jsx(T.H1, { children: "Green" }), _jsx(Row, { children: _jsx(Green900, {}) }), _jsx(T.H1, { children: "White" }), _jsx(Row, { children: _jsx(White900, {}) }), _jsx(T.H1, { children: "Backgrounds" }), _jsxs(Row, { children: [_jsx(BackgroungColor, { name: "lightBg" }), _jsx(BackgroungColor, { name: "darkBg" }), _jsx(BackgroungColor, { name: "pageBg" })] })] }) }));
};
//# sourceMappingURL=colors.stories.js.map