diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 374c9f4..1cdef2a 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -10,7 +10,11 @@ const preview: Preview = { date: /Date$/i, }, }, + docs: { + toc: true, + }, }, + tags: ["autodocs"], }; export default preview; diff --git a/panda.config.ts b/panda.config.ts index bd79f98..482c458 100644 --- a/panda.config.ts +++ b/panda.config.ts @@ -1,4 +1,13 @@ import { defineConfig } from "@pandacss/dev"; +import { globalCss } from "./src/styles/globalCss"; +import { + textStyles, + fonts, + fontWeights, + fontSizes, + letterSpacings, + lineHeights, +} from "./src/tokens/typography"; export default defineConfig({ // Whether to use css reset @@ -10,9 +19,24 @@ export default defineConfig({ // Files to exclude exclude: [], + globalCss, + + globalVars: { + "--font-spoqa": "Spoqa Han Sans Neo", + }, + // Useful for theme customization theme: { - extend: {}, + extend: { + textStyles, + tokens: { + fonts, + fontWeights, + fontSizes, + letterSpacings, + lineHeights, + }, + }, }, // The output directory for your css system diff --git a/src/components/Button/Button.stories.ts b/src/components/Button/Button.stories.ts index 2a7c90f..8a27550 100644 --- a/src/components/Button/Button.stories.ts +++ b/src/components/Button/Button.stories.ts @@ -7,7 +7,6 @@ const meta = { parameters: { layout: "centered", }, - tags: ["autodocs"], args: { onClick: fn() }, } satisfies Meta; diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 92a7a88..a01eac2 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -1,11 +1,15 @@ import { css } from "../../../styled-system/css"; export interface ButtonProps { + /** 버튼 텍스트 */ children: React.ReactNode; type?: "button" | "submit"; onClick?: () => void; } +/** + * 버튼 컴포넌트입니다. + */ export const Button = ({ children, type = "button", diff --git a/src/index.css b/src/index.css index e27a23b..0f6cb42 100644 --- a/src/index.css +++ b/src/index.css @@ -1 +1,2 @@ @layer reset, base, tokens, recipes, utilities; +@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css); diff --git a/src/styles/globalCss.ts b/src/styles/globalCss.ts new file mode 100644 index 0000000..892d9de --- /dev/null +++ b/src/styles/globalCss.ts @@ -0,0 +1,42 @@ +import { defineGlobalStyles } from "@pandacss/dev"; + +export const globalCss = defineGlobalStyles({ + ":root": { + "--global-font-body": "var (--fonts-sans)", + }, + h1: { + fontSize: "var(--font-sizes-4xl)", // 2.25rem + lineHeight: "var(--line-heights-loose)", // 2 + fontWeight: "var(--font-weights-bold)", // 700 + }, + h2: { + fontSize: "var(--font-sizes-3xl)", // 1.875rem + lineHeight: "var(--line-heights-loose)", // 2 + fontWeight: "var(--font-weights-bold)", // 500 + }, + h3: { + fontSize: "var(--font-sizes-2xl)", // 1.5rem + lineHeight: "var(--line-heights-relaxed)", // 1.625 + fontWeight: "var(--font-weights-medium)", // 500 + }, + h4: { + fontSize: "var(--font-sizes-xl)", // 1.25rem + lineHeight: "var(--line-heights-relaxed)", // 1.625 + fontWeight: "var(--font-weights-medium)", // 500 + }, + h5: { + fontSize: "var(--font-sizes-lg)", // 1.125rem + lineHeight: "var(--line-heights-relaxed)", // 1.625 + fontWeight: "var(--font-weights-medium)", // 500 + }, + h6: { + fontSize: "var(--font-sizes-md)", // 1rem + lineHeight: "var(--line-heights-relaxed)", // 1.625 + fontWeight: "var(--font-weights-medium)", // 500 + }, + p: { + fontSize: "var(--font-sizes-md)", // 1rem + lineHeight: "var(--line-heights-relaxed)", // 1.625 + fontWeight: "var(--font-weights-normal)", // 400 + }, +}); diff --git a/src/tokens/typography.mdx b/src/tokens/typography.mdx new file mode 100644 index 0000000..8a2556c --- /dev/null +++ b/src/tokens/typography.mdx @@ -0,0 +1,38 @@ +import { Typeset } from "@storybook/blocks"; +import { fonts, fontWeights, fontSizes } from "./typography.ts"; + +# Typography + +> 달레 UI는 [스포카 한 산스 네오(Spoqa Han Sans Neo)](https://spoqa.github.io/spoqa-han-sans/) 웹폰트를 사용하고 있습니다. + +## 글꼴 크기 + +

+ {Object.entries(fontSizes) + .map(([name, { value }]) => `${name}(${value})`) + .join(", ")} +

+ + value)} + fontWeight={fontWeights.normal.value} + sampleText="달레 UI 디자인 System" + fontFamily={fonts.sans.value} +/> + +## 글꼴 굵기 + +{Object.entries(fontWeights).map(([name, {value}]) => ( + +<> +

+ {name}({value}) +

+ + +))} diff --git a/src/tokens/typography.ts b/src/tokens/typography.ts new file mode 100644 index 0000000..91c171d --- /dev/null +++ b/src/tokens/typography.ts @@ -0,0 +1,130 @@ +import type { TextStyles, Tokens } from "@pandacss/types"; + +export const textStyles: TextStyles = { + xs: { + value: { + fontSize: "0.75rem", + lineHeight: "1rem", + }, + }, + sm: { + value: { + fontSize: "0.875rem", + lineHeight: "1.25rem", + }, + }, + md: { + value: { + fontSize: "1rem", + lineHeight: "1.5rem", + }, + }, + lg: { + value: { + fontSize: "1.125rem", + lineHeight: "1.75rem", + }, + }, + xl: { + value: { + fontSize: "1.25rem", + lineHeight: "1.75rem", + }, + }, + "2xl": { + value: { + fontSize: "1.5rem", + lineHeight: "2rem", + }, + }, + "3xl": { + value: { + fontSize: "1.875rem", + lineHeight: "2.25rem", + }, + }, + "4xl": { + value: { + fontSize: "2.25rem", + lineHeight: "2.5rem", + }, + }, + "5xl": { + value: { + fontSize: "3rem", + lineHeight: "1", + }, + }, + "6xl": { + value: { + fontSize: "3.75rem", + lineHeight: "1", + }, + }, + "7xl": { + value: { + fontSize: "4.5rem", + lineHeight: "1", + }, + }, + "8xl": { + value: { + fontSize: "6rem", + lineHeight: "1", + }, + }, + "9xl": { + value: { + fontSize: "8rem", + lineHeight: "1", + }, + }, +}; + +export const fonts: Tokens["fonts"] = { + sans: { value: '"Spoqa Han Sans Neo", "Noto Sans KR", sans-serif' }, + // TODO customize serif and mono font styles when needed +}; + +export const fontWeights: Tokens["fontWeights"] = { + thin: { value: "100" }, + light: { value: "300" }, + normal: { value: "400" }, + medium: { value: "500" }, + bold: { value: "700" }, +}; + +export const fontSizes: Tokens["fontSizes"] = { + "2xs": { value: "0.5rem" }, + xs: { value: "0.75rem" }, + sm: { value: "0.875rem" }, + md: { value: "1rem" }, + lg: { value: "1.125rem" }, + xl: { value: "1.25rem" }, + "2xl": { value: "1.5rem" }, + "3xl": { value: "1.875rem" }, + "4xl": { value: "2.25rem" }, + "5xl": { value: "3rem" }, + "6xl": { value: "3.75rem" }, + "7xl": { value: "4.5rem" }, + "8xl": { value: "6rem" }, + "9xl": { value: "8rem" }, +}; + +export const letterSpacings: Tokens["letterSpacings"] = { + tighter: { value: "-0.05em" }, + tight: { value: "-0.025em" }, + normal: { value: "0em" }, + wide: { value: "0.025em" }, + wider: { value: "0.05em" }, + widest: { value: "0.1em" }, +}; + +export const lineHeights: Tokens["lineHeights"] = { + none: { value: "1" }, + tight: { value: "1.25" }, + snug: { value: "1.375" }, + normal: { value: "1.5" }, + relaxed: { value: "1.625" }, + loose: { value: "2" }, +};