Skip to content

Commit 24220db

Browse files
MINJI121MINJI121
authored
Merge pull request #31 from part3-4team-Taskify/feature/GlobalStyle
[Fix] 공통 color중 text color @layer utilities로 정의
2 parents 07544db + b601b1f commit 24220db

File tree

1 file changed

+108
-27
lines changed

1 file changed

+108
-27
lines changed

‎src/styles/globals.css‎

Lines changed: 108 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -37,94 +37,175 @@
3737
}
3838
}
3939

40+
@layer utilities {
41+
.text-black2 {
42+
color: var(--color-black2);
43+
}
44+
.text-black3 {
45+
color: var(--color-black3);
46+
}
47+
.text-black4 {
48+
color: var(--color-black4);
49+
}
50+
.text-gray1 {
51+
color: var(--color-gray1);
52+
}
53+
.text-gray2 {
54+
color: var(--color-gray2);
55+
}
56+
.text-gray3 {
57+
color: var(--color-gray3);
58+
}
59+
.text-gray4 {
60+
color: var(--color-gray4);
61+
}
62+
.text-gray5 {
63+
color: var(--color-gray5);
64+
}
65+
}
66+
4067
@layer utilities {
4168
.font-32b {
42-
@apply text-[32px] leading-[42px] font-bold;
69+
font-size: 32px;
70+
line-height: 42px;
71+
font-weight: 700;
4372
}
4473
.font-32sb {
45-
@apply text-[32px] leading-[42px] font-semibold;
74+
font-size: 32px;
75+
line-height: 42px;
76+
font-weight: 600;
4677
}
4778

4879
.font-24b {
49-
@apply text-[24px] leading-[32px] font-bold;
80+
font-size: 24px;
81+
line-height: 32px;
82+
font-weight: 700;
5083
}
5184
.font-24sb {
52-
@apply text-[24px] leading-[32px] font-semibold;
85+
font-size: 24px;
86+
line-height: 32px;
87+
font-weight: 600;
5388
}
5489
.font-24m {
55-
@apply text-[24px] leading-[32px] font-medium;
90+
font-size: 24px;
91+
line-height: 32px;
92+
font-weight: 500;
5693
}
5794
.font-24r {
58-
@apply text-[24px] leading-[32px] font-normal;
95+
font-size: 24px;
96+
line-height: 32px;
97+
font-weight: 400;
5998
}
6099

61100
.font-20b {
62-
@apply text-[20px] leading-[32px] font-bold;
101+
font-size: 20px;
102+
line-height: 32px;
103+
font-weight: 700;
63104
}
64105
.font-20sb {
65-
@apply text-[20px] leading-[32px] font-semibold;
106+
font-size: 20px;
107+
line-height: 32px;
108+
font-weight: 600;
66109
}
67110
.font-20m {
68-
@apply text-[20px] leading-[32px] font-medium;
111+
font-size: 20px;
112+
line-height: 32px;
113+
font-weight: 500;
69114
}
70115
.font-20r {
71-
@apply text-[20px] leading-[32px] font-normal;
116+
font-size: 20px;
117+
line-height: 32px;
118+
font-weight: 400;
72119
}
73120

74121
.font-18b {
75-
@apply text-[18px] leading-[26px] font-bold;
122+
font-size: 18px;
123+
line-height: 26px;
124+
font-weight: 700;
76125
}
77126
.font-18sb {
78-
@apply text-[18px] leading-[26px] font-semibold;
127+
font-size: 18px;
128+
line-height: 26px;
129+
font-weight: 600;
79130
}
80131
.font-18m {
81-
@apply text-[18px] leading-[26px] font-medium;
132+
font-size: 18px;
133+
line-height: 26px;
134+
font-weight: 500;
82135
}
83136
.font-18r {
84-
@apply text-[18px] leading-[26px] font-normal;
137+
font-size: 18px;
138+
line-height: 26px;
139+
font-weight: 400;
85140
}
86141

87142
.font-16b {
88-
@apply text-[16px] leading-[26px] font-bold;
143+
font-size: 16px;
144+
line-height: 26px;
145+
font-weight: 700;
89146
}
90147
.font-16sb {
91-
@apply text-[16px] leading-[26px] font-semibold;
148+
font-size: 16px;
149+
line-height: 26px;
150+
font-weight: 600;
92151
}
93152
.font-16m {
94-
@apply text-[16px] leading-[26px] font-medium;
153+
font-size: 16px;
154+
line-height: 26px;
155+
font-weight: 500;
95156
}
96157
.font-16r {
97-
@apply text-[16px] leading-[26px] font-normal;
158+
font-size: 16px;
159+
line-height: 26px;
160+
font-weight: 400;
98161
}
99162

100163
.font-14b {
101-
@apply text-[14px] leading-[24px] font-bold;
164+
font-size: 14px;
165+
line-height: 24px;
166+
font-weight: 700;
102167
}
103168
.font-14sb {
104-
@apply text-[14px] leading-[24px] font-semibold;
169+
font-size: 14px;
170+
line-height: 24px;
171+
font-weight: 600;
105172
}
106173
.font-14m {
107-
@apply text-[14px] leading-[24px] font-medium;
174+
font-size: 14px;
175+
line-height: 24px;
176+
font-weight: 500;
108177
}
109178
.font-14r {
110-
@apply text-[14px] leading-[24px] font-normal;
179+
font-size: 14px;
180+
line-height: 24px;
181+
font-weight: 400;
111182
}
112183

113184
.font-13sb {
114-
@apply text-[13px] leading-[22px] font-semibold;
185+
font-size: 13px;
186+
line-height: 22px;
187+
font-weight: 600;
115188
}
116189
.font-13m {
117-
@apply text-[13px] leading-[22px] font-medium;
190+
font-size: 13px;
191+
line-height: 22px;
192+
font-weight: 500;
118193
}
119194

120195
.font-12sb {
121-
@apply text-[12px] leading-[20px] font-semibold;
196+
font-size: 12px;
197+
line-height: 20px;
198+
font-weight: 600;
122199
}
123200
.font-12m {
124-
@apply text-[12px] leading-[18px] font-medium;
201+
font-size: 12px;
202+
line-height: 18px;
203+
font-weight: 500;
125204
}
126205
.font-12r {
127-
@apply text-[12px] leading-[18px] font-normal;
206+
font-size: 12px;
207+
line-height: 18px;
208+
font-weight: 400;
128209
}
129210
}
130211

0 commit comments

Comments
 (0)