diff --git a/frontend/.storybook/chkDecorator.tsx b/frontend/.storybook/chkDecorator.tsx
index 16f2fbf72..771215099 100644
--- a/frontend/.storybook/chkDecorator.tsx
+++ b/frontend/.storybook/chkDecorator.tsx
@@ -1,9 +1,11 @@
import "normalize.css";
import React from "react";
+import styled from "styled-components";
import { BrowserRouter } from "react-router-dom";
import { makeDecorator } from "@storybook/addons";
import GlobalStyle from "../src/constants/styles/global";
+import { ChkThemeProvider } from "../src/theme/ChkThemeProvider";
export const chkDecorator = makeDecorator({
name: "withSomething",
@@ -11,11 +13,21 @@ export const chkDecorator = makeDecorator({
wrapper: (storyFn, context) => {
return (
- <>
- {storyFn(context)}
+
+ {storyFn(context)}
-
+
);
}
});
+
+const Spacer = styled.div`
+ margin: 1rem;
+ > * {
+ margin-right: 1rem;
+ }
+ p {
+ margin-bottom: 0.5rem;
+ }
+`;
diff --git a/frontend/src/components/App/index.tsx b/frontend/src/components/App/index.tsx
index f05e113ff..e56d924dc 100644
--- a/frontend/src/components/App/index.tsx
+++ b/frontend/src/components/App/index.tsx
@@ -8,6 +8,7 @@ import Main from "@/layouts/Main";
import Footer from "@/layouts/Footer";
import { isDevelopment } from "@/utils";
import { CHK } from "@/constants/url";
+import { ChkThemeProvider } from "@/theme/ChkThemeProvider";
export default () => (
(
new RootStore(isDevelopment() ? CHK.BACK_END.DEV : CHK.BACK_END.PROD)
}
>
-
-
-
+
+
+
+
+
);
diff --git a/frontend/src/components/atoms/AboutBottom/index.tsx b/frontend/src/components/atoms/AboutBottom/index.tsx
index 92096c915..b679e8f50 100644
--- a/frontend/src/components/atoms/AboutBottom/index.tsx
+++ b/frontend/src/components/atoms/AboutBottom/index.tsx
@@ -1,8 +1,9 @@
import React from "react";
import styled from "styled-components";
+import { Link } from "react-router-dom";
-import { color, device } from "@/constants/styles";
-import ChkButtonBase from "@/components/atoms/Buttons/ChkButtonBase";
+import { device } from "@/constants/styles";
+import { OrangeButton } from "@/components/atoms/Buttons/Button";
import img from "./bg.jpg";
@@ -15,7 +16,14 @@ export default () => (
インキュベーションワークが始まった2015年頃から、呉高専の学生は縦のつながりと横のつながりが広がっていきました。しかし、まだ多くの学生は同じクラス、部活動の友だちなどのコミュニティで完結してしまっています。私たちはこれまで多様な人とつながったことで、将来の選択肢が増えていきました。後輩たちにも同じようにもっとたくさんの人とつながりを作って、多くの経験をしてほしいという想いから、この活動を開始しました。
-
+
+ contact
+
@@ -51,12 +59,12 @@ const ContentStyle = styled.div`
`;
const TitleStyle = styled.h2`
- color: ${color.ORANGE};
+ color: ${({ theme }) => theme.color.orange};
text-align: center;
`;
const ParagraphStyle = styled.p`
- color: ${color.WHITE};
+ color: ${({ theme }) => theme.color.white};
line-height: 1.42em;
`;
@@ -64,5 +72,3 @@ const ButtonWrapper = styled.div`
margin: 80px auto 0;
width: 40%;
`;
-
-const ButtonStyle = styled(ChkButtonBase)``;
diff --git a/frontend/src/components/atoms/Buttons/Base.tsx b/frontend/src/components/atoms/Buttons/Base.tsx
new file mode 100644
index 000000000..9e007c672
--- /dev/null
+++ b/frontend/src/components/atoms/Buttons/Base.tsx
@@ -0,0 +1,80 @@
+import { ComponentPropsWithRef } from "react";
+import styled, { css } from "styled-components";
+import { Link } from "react-router-dom";
+
+export type ButtonSize = "large" | "medium" | "small" | "xSmall";
+
+export type ButtonSizes = {
+ [size in ButtonSize]: {
+ size: number;
+ fontSize: number;
+ }
+};
+
+export const buttonSizes: ButtonSizes = {
+ large: {
+ size: 44,
+ fontSize: 16
+ },
+ medium: {
+ size: 36,
+ fontSize: 14
+ },
+ small: {
+ size: 32,
+ fontSize: 14
+ },
+ xSmall: {
+ size: 28,
+ fontSize: 12
+ }
+};
+
+export const buttonSizeStyle = (buttonSize: ButtonSize = "medium") => {
+ const { size, fontSize } = buttonSizes[buttonSize];
+ return css`
+ height: ${size}px;
+ line-height: ${size}px;
+ font-size: ${fontSize}px;
+ `;
+};
+
+export type ButtonProps = {
+ size?: ButtonSize;
+ disabled?: boolean;
+ inverse?: boolean;
+ minWidth?: number;
+ maxWidth?: number;
+} & Partial> &
+ Partial> &
+ Partial>;
+
+export const BaseButton = styled.button`
+ display: block;
+ text-align: center;
+ cursor: pointer;
+ outline: none;
+ border: none;
+ font-weight: 600;
+ margin: 0;
+ width: 100%;
+ background-color: transparent;
+
+ border-radius: ${({ theme }) => theme.utils.unitPx(3)};
+ padding-left: ${({ theme }) => theme.utils.unitPx(2)};
+ padding-right: ${({ theme }) => theme.utils.unitPx(2)};
+
+ transition: 200ms all;
+
+ ${({ minWidth }) => minWidth && `min-width: ${minWidth}px;`}
+ ${({ maxWidth }) => maxWidth && `max-width: ${maxWidth}px;`}
+ ${({ size }) => buttonSizeStyle(size)};
+
+ &:disabled {
+ cursor: default;
+ pointer-events: none;
+ color: rgba(0, 0, 0, 0.24);
+ background-color: rgba(0, 0, 0, 0.06);
+ box-shadow: none;
+ }
+`;
diff --git a/frontend/src/components/atoms/Buttons/Button.tsx b/frontend/src/components/atoms/Buttons/Button.tsx
new file mode 100644
index 000000000..d1812582c
--- /dev/null
+++ b/frontend/src/components/atoms/Buttons/Button.tsx
@@ -0,0 +1,32 @@
+import styled, { css } from "styled-components";
+import { BaseButton } from "./Base";
+
+export const Button = styled(BaseButton)`
+ color: rgba(0, 0, 0, 0.56);
+ background-color: ${({ theme }) => theme.color.white};
+ box-shadow: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px,
+ rgba(0, 0, 0, 0.1) 0px 0px 0px 1px;
+`;
+
+export const ShadowButton = styled(BaseButton)`
+ box-shadow: 4px 3px 10px 0px ${({ theme }) => theme.color.shadow};
+`;
+
+export const OrangeButton = styled(BaseButton)`
+ color: ${({ theme }) => theme.color.white};
+ background-color: ${({ theme }) => theme.color.orange};
+ width: 200px;
+`;
+
+export const BlueButton = styled(BaseButton)`
+ ${({ inverse }) =>
+ inverse
+ ? css`
+ color: ${({ theme }) => theme.color.blue};
+ border: 1px solid ${({ theme }) => theme.color.blue};
+ `
+ : css`
+ color: ${({ theme }) => theme.color.white};
+ background-color: ${({ theme }) => theme.color.blue};
+ `}
+`;
diff --git a/frontend/src/components/atoms/Buttons/ChkButtonBase.tsx b/frontend/src/components/atoms/Buttons/ChkButtonBase.tsx
deleted file mode 100644
index 337411180..000000000
--- a/frontend/src/components/atoms/Buttons/ChkButtonBase.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import styled, { css } from "styled-components";
-
-import { color } from "@/constants/styles";
-
-interface IPropsCss {
- textcolor?: string;
- bgcolor?: string;
- border?: string;
-}
-
-interface IPropsChkButtonBase extends IPropsCss {
- to?: string;
- text: string | React.ReactNode;
- name?: string;
- onClick?: (e: any) => any;
-}
-
-const ChkButtonBase = (props: IPropsChkButtonBase) => {
- const {
- to,
- text,
- name,
- textcolor,
- bgcolor,
- border,
- onClick,
- ...otherProps
- } = props;
-
- if (to) {
- if (to.startsWith("http")) {
- return (
-
- {text}
-
- );
- } else {
- return (
-
- {text}
-
- );
- }
- } else {
- return (
-
- {text}
-
- );
- }
-};
-
-const ButtonStyle = css`
- display: block;
- width: 100%;
- margin: 0;
- padding: 10px;
- outline: none;
- box-shadow: 4px 3px 10px 0px ${color.SHADOW};
- border-radius: 20px;
- text-align: center;
- color: ${props => (props.textcolor ? color[props.textcolor] : color.WHITE)};
- border: ${props =>
- props.border ? `2px solid ${color[props.border]}` : "none"};
- background-color: ${props =>
- props.bgcolor ? color[props.bgcolor] : color.ORANGE};
-`;
-
-const ButtonTag = styled.button`
- ${ButtonStyle}
-`;
-
-const LinkTag = styled(Link)`
- ${ButtonStyle}
-`;
-
-const ATag = styled.a`
- ${ButtonStyle}
-`;
-
-export default ChkButtonBase;
diff --git a/frontend/src/components/atoms/Buttons/MoreButton.tsx b/frontend/src/components/atoms/Buttons/MoreButton.tsx
index eb25546e9..946d11119 100644
--- a/frontend/src/components/atoms/Buttons/MoreButton.tsx
+++ b/frontend/src/components/atoms/Buttons/MoreButton.tsx
@@ -1,25 +1,66 @@
-import React from "react";
-import styled from "styled-components";
+import React, { FC, useMemo } from "react";
+import { Link } from "react-router-dom";
+import { ButtonProps } from "./Base";
+import { OrangeButton } from "./Button";
-import ChkButtonBase from "@/components/atoms/Buttons/ChkButtonBase";
-
-interface IProps {
- to: string;
+interface Props extends ButtonProps {
+ as: "Button" | "InternalLink" | "ExternalLink";
+ href?: string;
}
+export const MoreButton: FC = ({ as, href, ...props }) => {
+ switch (as) {
+ case "Button":
+ href && console.warn("This 'MoreButton' pretends to be button tag");
-const MoreButton = (props: IProps) => {
- const { to } = props;
+ return useMemo(
+ () => (
+
+ more
+
+ ),
+ []
+ );
- return (
-
-
-
- );
-};
+ case "InternalLink":
+ return useMemo(
+ () => (
+
+ more
+
+ ),
+ [href]
+ );
-const MoreButtonWrapper = styled.div`
- margin: 0 auto;
- width: 150px;
-`;
+ case "ExternalLink":
+ return useMemo(
+ () => (
+
+ more
+
+ ),
+ [href]
+ );
-export default MoreButton;
+ default:
+ return null;
+ }
+};
diff --git a/frontend/src/components/atoms/Buttons/MoreButtonText.tsx b/frontend/src/components/atoms/Buttons/MoreButtonText.tsx
deleted file mode 100644
index 6bd8f13e9..000000000
--- a/frontend/src/components/atoms/Buttons/MoreButtonText.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { FC } from "react";
-import styled from "styled-components";
-
-import ChkButtonBase from "@/components/atoms/Buttons/ChkButtonBase";
-
-interface Props {
- onClick?: (e: any) => void;
-}
-
-export const MoreButtonText: FC = ({ onClick }) => {
- return (
-
-
-
- );
-};
-
-const MoreButtonWrapper = styled.div`
- margin: 0 auto;
- width: 150px;
-`;
diff --git a/frontend/src/components/atoms/FeaturedPersonality/PersonalityListButton.tsx b/frontend/src/components/atoms/FeaturedPersonality/PersonalityListButton.tsx
deleted file mode 100644
index 8bc369115..000000000
--- a/frontend/src/components/atoms/FeaturedPersonality/PersonalityListButton.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-import ChkButtonBase from "@/components/atoms/Buttons/ChkButtonBase";
-
-export default () => (
-
-
-
-);
-
-const Wrapper = styled.div`
- margin: 0 auto;
- width: 210px;
-`;
diff --git a/frontend/src/components/atoms/FeaturedPersonality/PersonalityListenToRadioButton.tsx b/frontend/src/components/atoms/FeaturedPersonality/PersonalityListenToRadioButton.tsx
deleted file mode 100644
index 13f263ec9..000000000
--- a/frontend/src/components/atoms/FeaturedPersonality/PersonalityListenToRadioButton.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-import ChkButtonBase from "@/components/atoms/Buttons/ChkButtonBase";
-
-export default () => (
-
-
-
-);
-
-const Wrapper = styled.div`
- margin: 0 auto;
- height: 35px;
- width: 60%;
-`;
diff --git a/frontend/src/components/atoms/FeaturedPersonality/PersonalityProfileDescription.tsx b/frontend/src/components/atoms/FeaturedPersonality/PersonalityProfileDescription.tsx
index 511b10492..3a67daba8 100644
--- a/frontend/src/components/atoms/FeaturedPersonality/PersonalityProfileDescription.tsx
+++ b/frontend/src/components/atoms/FeaturedPersonality/PersonalityProfileDescription.tsx
@@ -1,9 +1,10 @@
import React from "react";
import styled from "styled-components";
+import { Link } from "react-router-dom";
import { color } from "@/constants/styles";
import { IPersonality } from "@/api/PersonalityApi";
-import PersonalityListenToRadioButton from "@/components/atoms/FeaturedPersonality/PersonalityListenToRadioButton";
+import { BlueButton } from "@/components/atoms/Buttons/Button";
export const PersonalityProfileDescription = ({
name,
@@ -20,7 +21,9 @@ export const PersonalityProfileDescription = ({
{organization}
{position}
-
+
+ listen to radio
+
);
diff --git a/frontend/src/components/atoms/RadioSearcher/TagButton.tsx b/frontend/src/components/atoms/RadioSearcher/TagButton.tsx
index 3e2350820..51cf9a9c7 100644
--- a/frontend/src/components/atoms/RadioSearcher/TagButton.tsx
+++ b/frontend/src/components/atoms/RadioSearcher/TagButton.tsx
@@ -1,21 +1,12 @@
-import React from "react";
-import styled from "styled-components";
+import React, { FC } from "react";
+import { BlueButton } from "@/components/atoms/Buttons/Button";
-import ChkButtonBase from "@/components/atoms/Buttons/ChkButtonBase";
-
-interface IProps {
+interface Props {
name: string;
- text: string;
}
-export default ({ name, text }: IProps) => (
-
+export const TagButton: FC = ({ name }) => (
+
+ {name}
+
);
-
-const RadioSearchTagButton = styled(ChkButtonBase)``;
diff --git a/frontend/src/components/molecules/Blogs/BlogWrapper.tsx b/frontend/src/components/molecules/Blogs/BlogWrapper.tsx
index 149bceecc..3583be41e 100644
--- a/frontend/src/components/molecules/Blogs/BlogWrapper.tsx
+++ b/frontend/src/components/molecules/Blogs/BlogWrapper.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
import { color } from "@/constants/styles";
-import MoreButton from "@/components/atoms/Buttons/MoreButton";
+import { MoreButton } from "@/components/atoms/Buttons/MoreButton";
import FeaturedBlog from "@/components/atoms/Blog/FeaturedBlog";
export default () => (
@@ -35,7 +35,7 @@ export default () => (
to="/blog"
/>
-
+
);
diff --git a/frontend/src/components/molecules/Contact/Form.tsx b/frontend/src/components/molecules/Contact/Form.tsx
index c92a95644..1a274a595 100644
--- a/frontend/src/components/molecules/Contact/Form.tsx
+++ b/frontend/src/components/molecules/Contact/Form.tsx
@@ -5,7 +5,7 @@ import { observer } from "mobx-react-lite";
import ContactStore from "@/stores/ContactStore";
import { validateEmail } from "@/utils/validation";
-import ChkButtonBase from "@/components/atoms/Buttons/ChkButtonBase";
+import { OrangeButton } from "@/components/atoms/Buttons/Button";
import TextInput from "@/components/atoms/Forms/TextInput";
import Select from "@/components/atoms/Forms/Select";
import CheckBox from "@/components/atoms/Forms/CheckBox";
@@ -172,12 +172,14 @@ export default observer((props: IProp) => {
-
+ disabled={!sendable}
+ style={{ margin: "0 auto" }}
+ maxWidth={300}
+ >
+ 送信
+
) : (
@@ -194,13 +196,6 @@ const InlineHalfWrapper = styled.div`
display: inline-block;
`;
-const ContactFormButton = styled(ChkButtonBase)`
- width: 40%;
- margin: 0 auto;
- cursor: ${(props: { sendable: boolean }) =>
- props.sendable ? "pointer" : "default"};
-`;
-
const AlertBar = styled.div`
width: 100%;
margin: 10px auto;
diff --git a/frontend/src/components/molecules/Personalities/PersonalitiesSlider.tsx b/frontend/src/components/molecules/Personalities/PersonalitiesSlider.tsx
index 009f76940..15bdd913e 100644
--- a/frontend/src/components/molecules/Personalities/PersonalitiesSlider.tsx
+++ b/frontend/src/components/molecules/Personalities/PersonalitiesSlider.tsx
@@ -1,12 +1,13 @@
import React from "react";
import styled from "styled-components";
+import { Link } from "react-router-dom";
import { color } from "@/constants/styles";
import { ChkSlider } from "@/components/atoms/Slider";
import { IPersonality } from "@/api/PersonalityApi";
-import FeaturedPersonalityButton from "@/components/atoms/FeaturedPersonality/PersonalityListButton";
+import { BlueButton } from "@/components/atoms/Buttons/Button";
import { PersonalityCard } from "./Card";
interface IProps {
@@ -25,7 +26,14 @@ export const PersonalitiesSlider = ({ personalities }: IProps) => {
))}
-
+
+ personality list
+
);
};
diff --git a/frontend/src/components/molecules/PopularRadio/PopularRadioWrapper.tsx b/frontend/src/components/molecules/PopularRadio/PopularRadioWrapper.tsx
index bef862b5e..c843815f1 100644
--- a/frontend/src/components/molecules/PopularRadio/PopularRadioWrapper.tsx
+++ b/frontend/src/components/molecules/PopularRadio/PopularRadioWrapper.tsx
@@ -2,7 +2,7 @@ import React from "react";
import styled from "styled-components";
import { color, heading } from "@/constants/styles";
-import MoreButton from "@/components/atoms/Buttons/MoreButton";
+import { MoreButton } from "@/components/atoms/Buttons/MoreButton";
import { RadioMiniCard } from "@/components/atoms/PopularRadio/RadioMiniCard";
import { IRadio } from "@/api/RadioApi";
import { Link } from "react-router-dom";
@@ -24,7 +24,7 @@ export const PopularRadiosWrapper = ({ radios }: Props) => (
))}
-
+
);
diff --git a/frontend/src/components/molecules/RadioSearcher/index.tsx b/frontend/src/components/molecules/RadioSearcher/index.tsx
index 288456b06..2b8c62216 100644
--- a/frontend/src/components/molecules/RadioSearcher/index.tsx
+++ b/frontend/src/components/molecules/RadioSearcher/index.tsx
@@ -1,10 +1,11 @@
import React from "react";
import styled from "styled-components";
-import { color, heading } from "@/constants/styles";
-import ChkButtonBase from "@/components/atoms/Buttons/ChkButtonBase";
-import TagButton from "@/components/atoms/RadioSearcher/TagButton";
+import { heading } from "@/constants/styles";
+
+import { TagButton } from "@/components/atoms/RadioSearcher/TagButton";
import RadioSearchInput from "@/components/atoms/RadioSearcher/RadioSearchInput";
+import { BlueButton } from "@/components/atoms/Buttons/Button";
export default () => (
@@ -14,18 +15,22 @@ export default () => (
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+ Search
+
);
@@ -33,25 +38,17 @@ export default () => (
const Wrapper = styled.div`
width: 100%;
height: 400px;
- color: ${color.WHITE};
+ color: ${({ theme }) => theme.color.white};
padding: 0 20px;
- background-color: #fff;
+ background-color: ${({ theme }) => theme.color.white};
`;
const RadioSearcherTitle = styled.div`
${heading}
- color: ${color.BLUE};
+ color: ${({ theme }) => theme.color.blue};
`;
const RadioSearchTagButtonWrapper = styled.div`
display: flex;
margin-bottom: 10px;
`;
-
-const RadioSearchButtonWrapper = styled.div`
- margin-top: 20px;
- margin: 0 auto;
- width: 50%;
-`;
-
-const RadioSearchButton = styled(ChkButtonBase)``;
diff --git a/frontend/src/pages/Index.tsx b/frontend/src/pages/Index.tsx
index 7c3cc77ac..237ef8e70 100644
--- a/frontend/src/pages/Index.tsx
+++ b/frontend/src/pages/Index.tsx
@@ -11,7 +11,7 @@ import AboutBottom from "@/components/atoms/AboutBottom";
import AboutSidebar from "@/components/atoms/Features/AboutSidebar";
import WeeklyComic from "@/components/atoms/WeeklyComic";
import TweetStream from "@/components/atoms/Features/TweetStream";
-import MoreButton from "@/components/atoms/Buttons/MoreButton";
+import { MoreButton } from "@/components/atoms/Buttons/MoreButton";
import { PersonalitiesSlider } from "@/components/molecules/Personalities/PersonalitiesSlider";
import { PopularRadiosWrapper } from "@/components/molecules/PopularRadio/PopularRadioWrapper";
@@ -58,7 +58,7 @@ export default observer((props: IProps) => {
-
+
diff --git a/frontend/src/pages/RadioHistory.tsx b/frontend/src/pages/RadioHistory.tsx
index 057aa182c..562e843cd 100644
--- a/frontend/src/pages/RadioHistory.tsx
+++ b/frontend/src/pages/RadioHistory.tsx
@@ -15,7 +15,7 @@ import BlogWrapper from "@/components/molecules/Blogs/BlogWrapper";
import RootStore from "@/stores/RootStore";
import { IRadio } from "@/api/RadioApi";
-import { MoreButtonText } from "@/components/atoms/Buttons/MoreButtonText";
+import { MoreButton } from "@/components/atoms/Buttons/MoreButton";
interface IProps {
rootStore?: RootStore;
@@ -68,7 +68,9 @@ export default observer((props: IProps) => {
- {isStillHaveRadios && }
+ {isStillHaveRadios && (
+
+ )}
diff --git a/frontend/src/theme/ChkThemeProvider.tsx b/frontend/src/theme/ChkThemeProvider.tsx
new file mode 100644
index 000000000..d54ff5fa9
--- /dev/null
+++ b/frontend/src/theme/ChkThemeProvider.tsx
@@ -0,0 +1,15 @@
+import React, { FC } from "react";
+import { ThemeProvider as StyledThemeProvider } from "styled-components";
+import { themes, ThemeName } from "./theme";
+
+interface Props {
+ themeName: ThemeName;
+}
+
+export const ChkThemeProvider: FC = ({ themeName, children }) => {
+ return (
+
+ <>{children}
+
+ );
+};
diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts
new file mode 100644
index 000000000..9a427dcc8
--- /dev/null
+++ b/frontend/src/theme/theme.ts
@@ -0,0 +1,69 @@
+export type ThemeName = "chk";
+
+// export interface Theme {
+// color: {
+// brand: {
+// darkPrimary: string;
+// lightPrimary: string;
+// primary: string;
+// };
+// text: {
+// primary: string;
+// secondary: string;
+// };
+// accent: string;
+// divider: string;
+// };
+// }
+
+export interface Theme {
+ name: string;
+ color: {
+ orange: string;
+ vividOrange: string;
+ blue: string;
+ skyBlue: string;
+ black: string;
+ gray: string;
+ shadow: string;
+ white: string;
+ placeholder: string;
+ aqua: string;
+ darkAqua: string;
+ error: string;
+ disabled: string;
+ };
+ utils: {
+ unit: (amount: number) => number;
+ unitPx: (amount: number) => string;
+ };
+}
+
+const UNIT = 8; // px
+const unit = (amount: number) => UNIT * amount;
+const chkTheme: Theme = {
+ name: "chk",
+ color: {
+ orange: "#ECB73F",
+ vividOrange: "#E59134",
+ blue: "#00AFEC",
+ skyBlue: "#A8E1E3",
+ black: "#565A62",
+ gray: "#7f8287",
+ shadow: "#14141433",
+ white: "#ffffff",
+ placeholder: "#b0bec5",
+ aqua: "#b3dfe2",
+ darkAqua: "#50AAB7",
+ error: "#ff4b42",
+ disabled: "rgba(0, 0, 0, 0.06)"
+ },
+ utils: {
+ unit,
+ unitPx: (amount: number) => `${unit(amount)}px`
+ }
+};
+
+export const themes = {
+ chk: chkTheme
+};
diff --git a/frontend/src/typings/styled-components.d.ts b/frontend/src/typings/styled-components.d.ts
new file mode 100644
index 000000000..e21917072
--- /dev/null
+++ b/frontend/src/typings/styled-components.d.ts
@@ -0,0 +1,5 @@
+import { Theme } from "@/theme/theme";
+
+declare module "styled-components" {
+ interface DefaultTheme extends Theme {}
+}
diff --git a/frontend/stories/Buttons.stories.tsx b/frontend/stories/Buttons.stories.tsx
new file mode 100644
index 000000000..745267c14
--- /dev/null
+++ b/frontend/stories/Buttons.stories.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import styled from "styled-components";
+import {
+ buttonSizes,
+ ButtonSize as ButtonSizeType
+} from "@/components/atoms/Buttons/Base";
+import {
+ Button,
+ BlueButton as StyledBlueButton
+} from "@/components/atoms/Buttons/Button";
+
+export default {
+ title: "Buttons"
+};
+
+export const NormalButton = () => (
+
+
+
+
+ Disabled
+
+
+