Skip to content

Commit 46bde5f

Browse files
DaleSeoDaleSeo
committed
add typograph tokens
1 parent 1d80f8c commit 46bde5f

File tree

7 files changed

+188
-71
lines changed

7 files changed

+188
-71
lines changed

‎.storybook/preview.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const preview: Preview = {
1111
},
1212
},
1313
docs: {
14-
toc: true, // 👈 Enables the table of contents
14+
toc: true,
1515
},
1616
},
1717
tags: ["autodocs"],

‎panda.config.ts

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
import { defineConfig } from "@pandacss/dev";
22
import { globalCss } from "./src/styles/globalCss";
3+
import {
4+
textStyles,
5+
fonts,
6+
fontWeights,
7+
fontSizes,
8+
letterSpacings,
9+
lineHeights,
10+
} from "./src/tokens/typography";
311

412
export default defineConfig({
513
// Whether to use css reset
@@ -20,17 +28,13 @@ export default defineConfig({
2028
// Useful for theme customization
2129
theme: {
2230
extend: {
31+
textStyles,
2332
tokens: {
24-
fonts: {
25-
sans: { value: "var(--font-spoqa), Noto Sans KR, sans-serif" },
26-
},
27-
fontWeights: {
28-
thin: { value: "100" },
29-
light: { value: "300" },
30-
normal: { value: "400" },
31-
medium: { value: "500" },
32-
bold: { value: "700" },
33-
},
33+
fonts,
34+
fontWeights,
35+
fontSizes,
36+
letterSpacings,
37+
lineHeights,
3438
},
3539
},
3640
},

‎src/components/Button/Button.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import { css } from "../../../styled-system/css";
22

33
export interface ButtonProps {
4+
/** 버튼 텍스트 */
45
children: React.ReactNode;
56
type?: "button" | "submit";
67
onClick?: () => void;
78
}
89

10+
/**
11+
* 버튼 컴포넌트입니다.
12+
*/
913
export const Button = ({
1014
children,
1115
type = "button",

‎src/styles/Typography.mdx

Lines changed: 0 additions & 59 deletions
This file was deleted.

‎src/styles/globalCss.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { defineGlobalStyles } from "@pandacss/dev";
22

33
export const globalCss = defineGlobalStyles({
44
":root": {
5-
"--global-font-body": "var(--fonts-sans)",
5+
"--global-font-body": "var (--fonts-sans)",
66
},
77
h1: {
88
fontSize: "var(--font-sizes-4xl)", // 2.25rem

‎src/tokens/typography.mdx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Typeset } from "@storybook/blocks";
2+
import { fonts, fontWeights, fontSizes } from "./typography.ts";
3+
4+
# Typography
5+
6+
> 달레 UI는 [스포카 한 산스 네오(Spoqa Han Sans Neo)](https://spoqa.github.io/spoqa-han-sans/) 웹폰트를 사용하고 있습니다.
7+
8+
## 글꼴 크기
9+
10+
<p>
11+
{Object.entries(fontSizes)
12+
.map(([name, { value }]) => `${name}(${value})`)
13+
.join(", ")}
14+
</p>
15+
16+
<Typeset
17+
fontSizes={Object.values(fontSizes).map(({ value }) => value)}
18+
fontWeight={fontWeights.normal.value}
19+
sampleText="달레 UI 디자인 System"
20+
fontFamily={fonts.sans.value}
21+
/>
22+
23+
## 글꼴 굵기
24+
25+
{Object.entries(fontWeights).map(([name, {value}]) => (
26+
27+
<>
28+
<h3>
29+
{name}({value})
30+
</h3>
31+
<Typeset
32+
fontSizes={[fontSizes.md.value]}
33+
fontWeight={value}
34+
sampleText="달레 UI 디자인 System"
35+
fontFamily={fonts.sans.value}
36+
/>
37+
</>
38+
))}

‎src/tokens/typography.ts

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import type { TextStyles, Tokens } from "@pandacss/types";
2+
3+
export const textStyles: TextStyles = {
4+
xs: {
5+
value: {
6+
fontSize: "0.75rem",
7+
lineHeight: "1rem",
8+
},
9+
},
10+
sm: {
11+
value: {
12+
fontSize: "0.875rem",
13+
lineHeight: "1.25rem",
14+
},
15+
},
16+
md: {
17+
value: {
18+
fontSize: "1rem",
19+
lineHeight: "1.5rem",
20+
},
21+
},
22+
lg: {
23+
value: {
24+
fontSize: "1.125rem",
25+
lineHeight: "1.75rem",
26+
},
27+
},
28+
xl: {
29+
value: {
30+
fontSize: "1.25rem",
31+
lineHeight: "1.75rem",
32+
},
33+
},
34+
"2xl": {
35+
value: {
36+
fontSize: "1.5rem",
37+
lineHeight: "2rem",
38+
},
39+
},
40+
"3xl": {
41+
value: {
42+
fontSize: "1.875rem",
43+
lineHeight: "2.25rem",
44+
},
45+
},
46+
"4xl": {
47+
value: {
48+
fontSize: "2.25rem",
49+
lineHeight: "2.5rem",
50+
},
51+
},
52+
"5xl": {
53+
value: {
54+
fontSize: "3rem",
55+
lineHeight: "1",
56+
},
57+
},
58+
"6xl": {
59+
value: {
60+
fontSize: "3.75rem",
61+
lineHeight: "1",
62+
},
63+
},
64+
"7xl": {
65+
value: {
66+
fontSize: "4.5rem",
67+
lineHeight: "1",
68+
},
69+
},
70+
"8xl": {
71+
value: {
72+
fontSize: "6rem",
73+
lineHeight: "1",
74+
},
75+
},
76+
"9xl": {
77+
value: {
78+
fontSize: "8rem",
79+
lineHeight: "1",
80+
},
81+
},
82+
};
83+
84+
export const fonts: Tokens["fonts"] = {
85+
sans: { value: '"Spoqa Han Sans Neo", "Noto Sans KR", sans-serif' },
86+
// TODO customize serif and mono font styles when needed
87+
};
88+
89+
export const fontWeights: Tokens["fontWeights"] = {
90+
thin: { value: "100" },
91+
light: { value: "300" },
92+
normal: { value: "400" },
93+
medium: { value: "500" },
94+
bold: { value: "700" },
95+
};
96+
97+
export const fontSizes: Tokens["fontSizes"] = {
98+
"2xs": { value: "0.5rem" },
99+
xs: { value: "0.75rem" },
100+
sm: { value: "0.875rem" },
101+
md: { value: "1rem" },
102+
lg: { value: "1.125rem" },
103+
xl: { value: "1.25rem" },
104+
"2xl": { value: "1.5rem" },
105+
"3xl": { value: "1.875rem" },
106+
"4xl": { value: "2.25rem" },
107+
"5xl": { value: "3rem" },
108+
"6xl": { value: "3.75rem" },
109+
"7xl": { value: "4.5rem" },
110+
"8xl": { value: "6rem" },
111+
"9xl": { value: "8rem" },
112+
};
113+
114+
export const letterSpacings: Tokens["letterSpacings"] = {
115+
tighter: { value: "-0.05em" },
116+
tight: { value: "-0.025em" },
117+
normal: { value: "0em" },
118+
wide: { value: "0.025em" },
119+
wider: { value: "0.05em" },
120+
widest: { value: "0.1em" },
121+
};
122+
123+
export const lineHeights: Tokens["lineHeights"] = {
124+
none: { value: "1" },
125+
tight: { value: "1.25" },
126+
snug: { value: "1.375" },
127+
normal: { value: "1.5" },
128+
relaxed: { value: "1.625" },
129+
loose: { value: "2" },
130+
};

0 commit comments

Comments
 (0)