Skip to content

Commit 38c77d5

Browse files
authored
Merge pull request #72 from YAPP-Github/feature/PRODUCT-144
2 parents 9c81780 + 46562c9 commit 38c77d5

File tree

9 files changed

+107
-27
lines changed

9 files changed

+107
-27
lines changed

src/components/ui/Bleed/Bleed.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Meta, StoryObj } from "@storybook/react";
1+
import type { Meta, StoryObj } from "@storybook/nextjs-vite";
22

33
import { Bleed } from "./Bleed";
44

src/components/ui/BottomSheet/BottomSheet.css.ts

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,7 @@ export const title = style({
4646
display: "flex",
4747
gap: "10px",
4848
padding: "14px 20px",
49-
...typography.title2,
50-
fontWeight: 600,
49+
...typography.title2Sb,
5150
color: semantic.text.normal,
5251
});
5352

@@ -60,14 +59,12 @@ export const sheetBody = style({
6059
});
6160

6261
export const sheetBodyTitle = style({
63-
...typography.title3,
64-
fontWeight: 600,
62+
...typography.title3Sb,
6563
color: semantic.text.normal,
6664
});
6765

6866
export const sheetBodyDescription = style({
69-
...typography.body2,
70-
fontWeight: 400,
67+
...typography.body2Rg,
7168
color: semantic.text.alternative,
7269
});
7370

src/components/ui/Spacer/Spacer.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Meta, StoryObj } from "@storybook/react";
1+
import type { Meta, StoryObj } from "@storybook/nextjs-vite";
22

33
import { Stack } from "../Stack";
44
import { Text } from "../Text";

src/components/ui/Stack/Stack.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Meta, StoryObj } from "@storybook/react";
1+
import type { Meta, StoryObj } from "@storybook/nextjs-vite";
22
import { Fragment } from "react";
33

44
import { Stack } from "./Stack";

src/components/ui/Text/Text.css.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export const fontSizeVar = createVar();
44
export const lineHeightVar = createVar();
55
export const letterSpacingVar = createVar();
66
export const colorVar = createVar();
7+
export const fontWeightVar = createVar();
78

89
export const container = style({
910
color: colorVar,

src/components/ui/Text/Text.stories.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Meta, StoryObj } from "@storybook/react";
1+
import type { Meta, StoryObj } from "@storybook/nextjs-vite";
22
import { Fragment } from "react";
33

44
import { typography } from "@/styles/typography.css";
@@ -24,7 +24,7 @@ const meta: Meta<typeof Text> = {
2424
description: "미리 정의된 타이포그래피 스타일을 적용합니다.",
2525
table: {
2626
type: { summary: "keyof typeof typography" },
27-
defaultValue: { summary: "body1" },
27+
defaultValue: { summary: "body1Sb" },
2828
},
2929
},
3030
color: {
@@ -54,7 +54,7 @@ type Story = StoryObj<typeof Text>;
5454
export const Default: Story = {
5555
args: {
5656
children: "이것은 기본 텍스트입니다.",
57-
typo: "body1",
57+
typo: "body1Sb",
5858
color: "neutral.10",
5959
},
6060
};
@@ -103,13 +103,13 @@ export const Colors: Story = {
103103
export const AsHeading: Story = {
104104
render: () => (
105105
<div>
106-
<Text as='h1' typo='title1'>
106+
<Text as='h1' typo='title1Bd'>
107107
이것은 H1 태그입니다. (typo: title1)
108108
</Text>
109-
<Text as='h2' typo='title2'>
109+
<Text as='h2' typo='title2Sb'>
110110
이것은 H2 태그입니다. (typo: title2)
111111
</Text>
112-
<Text as='span' typo='body1'>
112+
<Text as='span' typo='body1Sb'>
113113
이것은 SPAN 태그입니다.
114114
</Text>
115115
</div>

src/components/ui/Text/Text.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export type TextProps<T extends ElementType> = PolymorphicComponentPropsWithRef<
7676
export const Text = <T extends ElementType = "p">({
7777
as,
7878
className,
79-
typo = "body1",
79+
typo = "body1Sb",
8080
color = "neutral.10",
8181
style: styleFromProps,
8282
ref,
@@ -90,6 +90,7 @@ export const Text = <T extends ElementType = "p">({
9090
[styles.fontSizeVar]: typography[typo]?.fontSize,
9191
[styles.lineHeightVar]: typography[typo]?.lineHeight,
9292
[styles.letterSpacingVar]: typography[typo]?.letterSpacing,
93+
[styles.fontWeightVar]: typography[typo]?.fontWeight,
9394
[styles.colorVar]: color ? resolveColor(color) : undefined,
9495
}),
9596
};

src/components/ui/TextField/TextField.css.ts

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ export const wrapper = style({
1111

1212
export const label = style({
1313
...typography.label1,
14-
fontWeight: 600,
1514
color: semantic.text.alternative,
1615
});
1716

@@ -20,8 +19,7 @@ export const input = recipe({
2019
width: "100%",
2120
height: "52px",
2221
padding: "14px 12px",
23-
...typography.body1,
24-
fontWeight: "500",
22+
...typography.body1Md,
2523
border: "1px solid transparent",
2624
borderRadius: radius[160],
2725
outline: "none",
@@ -65,8 +63,7 @@ export const input = recipe({
6563

6664
export const helperText = recipe({
6765
base: {
68-
...typography.caption1,
69-
fontWeight: "500",
66+
...typography.caption1Md,
7067
color: semantic.text.alternative,
7168
},
7269
variants: {

src/styles/typography.css.ts

Lines changed: 90 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,60 +5,144 @@ export const typography = createGlobalTheme(":root", {
55
fontSize: "40px",
66
lineHeight: "52px",
77
letterSpacing: "-0.0282em",
8+
fontWeight: "700",
89
},
910
display2: {
1011
fontSize: "36px",
1112
lineHeight: "48px",
1213
letterSpacing: "-0.027em",
14+
fontWeight: "700",
1315
},
1416
display3: {
1517
fontSize: "32px",
1618
lineHeight: "42px",
1719
letterSpacing: "-0.025em",
20+
fontWeight: "700",
1821
},
19-
title1: {
22+
title1Bd: {
2023
fontSize: "24px",
2124
lineHeight: "32px",
2225
letterSpacing: "-0.023em",
26+
fontWeight: "700",
2327
},
24-
title2: {
28+
title1Md: {
29+
fontSize: "24px",
30+
lineHeight: "32px",
31+
letterSpacing: "-0.023em",
32+
fontWeight: "500",
33+
},
34+
title1Rg: {
35+
fontSize: "24px",
36+
lineHeight: "32px",
37+
letterSpacing: "-0.023em",
38+
fontWeight: "400",
39+
},
40+
title2Sb: {
41+
fontSize: "20px",
42+
lineHeight: "28px",
43+
letterSpacing: "-0.012em",
44+
fontWeight: "600",
45+
},
46+
title2Md: {
2547
fontSize: "20px",
2648
lineHeight: "28px",
2749
letterSpacing: "-0.012em",
50+
fontWeight: "500",
51+
},
52+
title2Rg: {
53+
fontSize: "20px",
54+
lineHeight: "28px",
55+
letterSpacing: "-0.012em",
56+
fontWeight: "400",
57+
},
58+
title3Sb: {
59+
fontSize: "18px",
60+
lineHeight: "26px",
61+
letterSpacing: "-0.002em",
62+
fontWeight: "600",
63+
},
64+
title3Md: {
65+
fontSize: "18px",
66+
lineHeight: "26px",
67+
letterSpacing: "-0.002em",
68+
fontWeight: "500",
2869
},
29-
title3: {
70+
title3Rg: {
3071
fontSize: "18px",
3172
lineHeight: "26px",
3273
letterSpacing: "-0.002em",
74+
fontWeight: "400",
3375
},
34-
body1: {
76+
body1Sb: {
3577
fontSize: "16px",
3678
lineHeight: "24px",
3779
letterSpacing: "0.0057em",
80+
fontWeight: "600",
3881
},
39-
body2: {
82+
body1Md: {
83+
fontSize: "16px",
84+
lineHeight: "24px",
85+
letterSpacing: "0.0057em",
86+
fontWeight: "500",
87+
},
88+
body1Rg: {
89+
fontSize: "16px",
90+
lineHeight: "24px",
91+
letterSpacing: "0.0057em",
92+
fontWeight: "400",
93+
},
94+
body2Sb: {
95+
fontSize: "15px",
96+
lineHeight: "22px",
97+
letterSpacing: "0.0096em",
98+
fontWeight: "600",
99+
},
100+
body2Md: {
40101
fontSize: "15px",
41102
lineHeight: "22px",
42103
letterSpacing: "0.0096em",
104+
fontWeight: "500",
105+
},
106+
body2Rg: {
107+
fontSize: "15px",
108+
lineHeight: "22px",
109+
letterSpacing: "0.0096em",
110+
fontWeight: "400",
43111
},
44112
label1: {
45113
fontSize: "14px",
46114
lineHeight: "20px",
47115
letterSpacing: "0.0145em",
116+
fontWeight: "600",
48117
},
49118
label2: {
50119
fontSize: "13px",
51120
lineHeight: "18px",
52121
letterSpacing: "0.0194em",
122+
fontWeight: "600",
123+
},
124+
caption1Sb: {
125+
fontSize: "12px",
126+
lineHeight: "16px",
127+
letterSpacing: "0.0252em",
128+
fontWeight: "600",
129+
},
130+
caption1Md: {
131+
fontSize: "12px",
132+
lineHeight: "16px",
133+
letterSpacing: "0.0252em",
134+
fontWeight: "500",
53135
},
54-
caption1: {
136+
caption1Rg: {
55137
fontSize: "12px",
56138
lineHeight: "16px",
57139
letterSpacing: "0.0252em",
140+
fontWeight: "400",
58141
},
59142
caption2: {
60143
fontSize: "11px",
61144
lineHeight: "14px",
62145
letterSpacing: "0.0311em",
146+
fontWeight: "600",
63147
},
64148
});

0 commit comments

Comments
 (0)