From bf34b21e123c12a3eeccdd08a46c878fea904523 Mon Sep 17 00:00:00 2001 From: Dale Seo Date: Tue, 17 Dec 2024 23:21:20 -0500 Subject: [PATCH 1/3] custom fonts, global typography style --- panda.config.ts | 59 +++++++++++++++++++++++++++++++++++++++++++++++-- src/index.css | 1 + 2 files changed, 58 insertions(+), 2 deletions(-) diff --git a/panda.config.ts b/panda.config.ts index bd79f98..96b59f0 100644 --- a/panda.config.ts +++ b/panda.config.ts @@ -1,4 +1,40 @@ -import { defineConfig } from "@pandacss/dev"; +import { defineConfig, defineGlobalStyles } from "@pandacss/dev"; + +const globalCss = defineGlobalStyles({ + ":root": { + "--global-font-body": "var(--fonts-sans)", + }, + h1: { + fontSize: "var(--font-sizes-4xl)", + lineHeight: "var(--line-heights-loose)", + fontWeight: "var(--font-weights-bold)", + }, + h2: { + fontSize: "var(--font-sizes-3xl)", + lineHeight: "var(--line-heights-relaxed)", + fontWeight: "var(--font-weights-medium)", + }, + h3: { + fontSize: "var(--font-sizes-2xl)", + lineHeight: "var(--line-heights-relaxed)", + fontWeight: "var(--font-weights-medium)", + }, + h4: { + fontSize: "var(--font-sizes-xl)", + lineHeight: "var(--line-heights-relaxed)", + fontWeight: "var(--font-weights-medium)", + }, + h5: { + fontSize: "var(--font-sizes-lg)", + lineHeight: "var(--line-heights-relaxed)", + fontWeight: "var(--font-weights-medium)", + }, + p: { + fontSize: "var(--font-sizes-md)", + lineHeight: "var(--line-heights-normal)", + fontWeight: "var(--font-weights-normal)", + }, +}); export default defineConfig({ // Whether to use css reset @@ -10,9 +46,28 @@ export default defineConfig({ // Files to exclude exclude: [], + globalCss, + + globalVars: { + "--font-spoqa": "Spoqa Han Sans Neo", + }, + // Useful for theme customization theme: { - extend: {}, + extend: { + tokens: { + fonts: { + sans: { value: "var(--font-spoqa), Noto Sans KR, sans-serif" }, + }, + fontWeights: { + thin: { value: "100" }, + light: { value: "300" }, + normal: { value: "400" }, + medium: { value: "500" }, + bold: { value: "700" }, + }, + }, + }, }, // The output directory for your css system 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); From 1d80f8c8b91ee769d31cecc5aee6a0992f4207d7 Mon Sep 17 00:00:00 2001 From: Dale Seo Date: Wed, 18 Dec 2024 20:32:11 -0500 Subject: [PATCH 2/3] document typography --- .storybook/preview.ts | 4 ++ panda.config.ts | 39 +--------------- src/components/Button/Button.stories.ts | 1 - src/styles/Typography.mdx | 59 +++++++++++++++++++++++++ src/styles/globalCss.ts | 42 ++++++++++++++++++ 5 files changed, 107 insertions(+), 38 deletions(-) create mode 100644 src/styles/Typography.mdx create mode 100644 src/styles/globalCss.ts diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 374c9f4..be5ff0d 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -10,7 +10,11 @@ const preview: Preview = { date: /Date$/i, }, }, + docs: { + toc: true, // ๐Ÿ‘ˆ Enables the table of contents + }, }, + tags: ["autodocs"], }; export default preview; diff --git a/panda.config.ts b/panda.config.ts index 96b59f0..70f7c91 100644 --- a/panda.config.ts +++ b/panda.config.ts @@ -1,40 +1,5 @@ -import { defineConfig, defineGlobalStyles } from "@pandacss/dev"; - -const globalCss = defineGlobalStyles({ - ":root": { - "--global-font-body": "var(--fonts-sans)", - }, - h1: { - fontSize: "var(--font-sizes-4xl)", - lineHeight: "var(--line-heights-loose)", - fontWeight: "var(--font-weights-bold)", - }, - h2: { - fontSize: "var(--font-sizes-3xl)", - lineHeight: "var(--line-heights-relaxed)", - fontWeight: "var(--font-weights-medium)", - }, - h3: { - fontSize: "var(--font-sizes-2xl)", - lineHeight: "var(--line-heights-relaxed)", - fontWeight: "var(--font-weights-medium)", - }, - h4: { - fontSize: "var(--font-sizes-xl)", - lineHeight: "var(--line-heights-relaxed)", - fontWeight: "var(--font-weights-medium)", - }, - h5: { - fontSize: "var(--font-sizes-lg)", - lineHeight: "var(--line-heights-relaxed)", - fontWeight: "var(--font-weights-medium)", - }, - p: { - fontSize: "var(--font-sizes-md)", - lineHeight: "var(--line-heights-normal)", - fontWeight: "var(--font-weights-normal)", - }, -}); +import { defineConfig } from "@pandacss/dev"; +import { globalCss } from "./src/styles/globalCss"; export default defineConfig({ // Whether to use css reset 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/styles/Typography.mdx b/src/styles/Typography.mdx new file mode 100644 index 0000000..38f5b25 --- /dev/null +++ b/src/styles/Typography.mdx @@ -0,0 +1,59 @@ +import { Typeset } from "@storybook/blocks"; + +# Typography + +## ๊ณ ๋”•์ฒด (sans-serif) + +**Font:** Spoqa Han Sans Neo + +**Weights:** 100(thin), 300(light), 400(normal), 500(medium), 700(bold) + + + +## ๋ช…์กฐ์ฒด (serif) + +**Font:** Georgia + +**Weights:** 100(thin), 300(light), 400(normal), 500(medium), 700(bold) + + diff --git a/src/styles/globalCss.ts b/src/styles/globalCss.ts new file mode 100644 index 0000000..03aeeaf --- /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 + }, +}); From 46bde5f4941f4a0f095cb9bb7e083a37d514fabf Mon Sep 17 00:00:00 2001 From: Dale Seo Date: Sun, 22 Dec 2024 17:11:01 -0500 Subject: [PATCH 3/3] add typograph tokens --- .storybook/preview.ts | 2 +- panda.config.ts | 24 +++--- src/components/Button/Button.tsx | 4 + src/styles/Typography.mdx | 59 -------------- src/styles/globalCss.ts | 2 +- src/tokens/typography.mdx | 38 +++++++++ src/tokens/typography.ts | 130 +++++++++++++++++++++++++++++++ 7 files changed, 188 insertions(+), 71 deletions(-) delete mode 100644 src/styles/Typography.mdx create mode 100644 src/tokens/typography.mdx create mode 100644 src/tokens/typography.ts diff --git a/.storybook/preview.ts b/.storybook/preview.ts index be5ff0d..1cdef2a 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -11,7 +11,7 @@ const preview: Preview = { }, }, docs: { - toc: true, // ๐Ÿ‘ˆ Enables the table of contents + toc: true, }, }, tags: ["autodocs"], diff --git a/panda.config.ts b/panda.config.ts index 70f7c91..482c458 100644 --- a/panda.config.ts +++ b/panda.config.ts @@ -1,5 +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 @@ -20,17 +28,13 @@ export default defineConfig({ // Useful for theme customization theme: { extend: { + textStyles, tokens: { - fonts: { - sans: { value: "var(--font-spoqa), Noto Sans KR, sans-serif" }, - }, - fontWeights: { - thin: { value: "100" }, - light: { value: "300" }, - normal: { value: "400" }, - medium: { value: "500" }, - bold: { value: "700" }, - }, + fonts, + fontWeights, + fontSizes, + letterSpacings, + lineHeights, }, }, }, 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/styles/Typography.mdx b/src/styles/Typography.mdx deleted file mode 100644 index 38f5b25..0000000 --- a/src/styles/Typography.mdx +++ /dev/null @@ -1,59 +0,0 @@ -import { Typeset } from "@storybook/blocks"; - -# Typography - -## ๊ณ ๋”•์ฒด (sans-serif) - -**Font:** Spoqa Han Sans Neo - -**Weights:** 100(thin), 300(light), 400(normal), 500(medium), 700(bold) - - - -## ๋ช…์กฐ์ฒด (serif) - -**Font:** Georgia - -**Weights:** 100(thin), 300(light), 400(normal), 500(medium), 700(bold) - - diff --git a/src/styles/globalCss.ts b/src/styles/globalCss.ts index 03aeeaf..892d9de 100644 --- a/src/styles/globalCss.ts +++ b/src/styles/globalCss.ts @@ -2,7 +2,7 @@ import { defineGlobalStyles } from "@pandacss/dev"; export const globalCss = defineGlobalStyles({ ":root": { - "--global-font-body": "var(--fonts-sans)", + "--global-font-body": "var (--fonts-sans)", }, h1: { fontSize: "var(--font-sizes-4xl)", // 2.25rem 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" }, +};