Skip to content

Commit e62b4b9

Browse files
KongMezuKongMezu
authored
Merge pull request #16 from geulDa/initsetting
setting : 컬러 토큰명 변경
2 parents be34278 + f95613a commit e62b4b9

File tree

2 files changed

+80
-81
lines changed

2 files changed

+80
-81
lines changed

‎src/styles/globals.css‎

Lines changed: 37 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -7,47 +7,46 @@ html {
77
}
88

99
:root {
10-
/* 메인컬러(MAIN) */
11-
--color-main-1: #D9FAFB;
12-
--color-main-2: #B2F4F6;
13-
--color-main-3: #8CEFF2;
14-
--color-main-4: #65E9ED;
15-
--color-main-5: #22DFE5;
16-
--color-main-6: #0BCBD2;
17-
--color-main-7: #14A9AE;
18-
--color-main-8: #168A8E;
19-
--color-main-9: #107274;
20-
--color-main-10: #0A5C5E;
10+
/* 메인컬러(MAIN) → mint */
11+
--mint-50: #D9FAFB;
12+
--mint-100: #B2F4F6;
13+
--mint-200: #8CEFF2;
14+
--mint-300: #65E9ED;
15+
--mint-400: #22DFE5;
16+
--mint-500: #0BCBD2;
17+
--mint-600: #14A9AE;
18+
--mint-700: #168A8E;
19+
--mint-800: #107274;
20+
--mint-900: #0A5C5E;
2121

22-
/* 서브컬러(SECONDARY) */
23-
--color-secondary-1: #FEEFF3;
24-
--color-secondary-2: #FFD0DC;
25-
--color-secondary-3: #FAA2B8;
26-
--color-secondary-4: #FF7B9C;
27-
--color-secondary-5: #FF5B84;
28-
--color-secondary-6: #EB436D;
29-
--color-secondary-7: #CD1845;
30-
--color-secondary-8: #920C2D;
31-
--color-secondary-9: #710520;
32-
--color-secondary-10: #470214;
22+
/* 서브컬러(SECONDARY) → pink */
23+
--pink-50: #FEEFF3;
24+
--pink-100: #FFD0DC;
25+
--pink-200: #FAA2B8;
26+
--pink-300: #FF7B9C;
27+
--pink-400: #FF5B84;
28+
--pink-500: #EB436D;
29+
--pink-600: #CD1845;
30+
--pink-700: #920C2D;
31+
--pink-800: #710520;
32+
--pink-900: #470214;
3333

34-
/* 그레이 스케일(GRAY) */
35-
--color-gray-1: #FAFAFA;
36-
--color-gray-2: #F4F4F4;
37-
--color-gray-3: #E9E9E9;
38-
--color-gray-4: #D5D5D5;
39-
--color-gray-5: #BCBDBE;
40-
--color-gray-6: #A1A4AA;
41-
--color-gray-7: #8B9099;
42-
--color-gray-8: #484B51;
43-
--color-gray-9: #2E3136;
44-
--color-gray-10: #111215;
45-
46-
/* 서브 포인트 컬러(BLUE & RED) */
47-
--color-blue: #2569FF;
48-
--color-red-1: #F06B6B;
49-
--color-red-2: #EB3939;
34+
/* 그레이 스케일(GRAY) → gray */
35+
--gray-50: #FAFAFA;
36+
--gray-100: #F4F4F4;
37+
--gray-200: #E9E9E9;
38+
--gray-300: #D5D5D5;
39+
--gray-400: #BCBDBE;
40+
--gray-500: #A1A4AA;
41+
--gray-600: #8B9099;
42+
--gray-700: #484B51;
43+
--gray-800: #2E3136;
44+
--gray-900: #111215;
5045

46+
/* 서브 포인트 컬러 */
47+
--blue-400: #2569FF;
48+
--red-300: #F06B6B;
49+
--red-400: #EB3939;
5150

5251
/* 배경/전경 */
5352
--background: #ffffff;

‎tailwind.config.js‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -6,47 +6,47 @@ module.exports = {
66
/* colors */
77
colors: {
88
mint: {
9-
50: 'var(--color-main-1)',
10-
100: 'var(--color-main-2)',
11-
200: 'var(--color-main-3)',
12-
300: 'var(--color-main-4)',
13-
400: 'var(--color-main-5)',
14-
500: 'var(--color-main-6)',
15-
600: 'var(--color-main-7)',
16-
700: 'var(--color-main-8)',
17-
800: 'var(--color-main-9)',
18-
900: 'var(--color-main-10)',
9+
50: 'var(--mint-50)',
10+
100: 'var(--mint-100)',
11+
200: 'var(--mint-200)',
12+
300: 'var(--mint-300)',
13+
400: 'var(--mint-400)',
14+
500: 'var(--mint-500)',
15+
600: 'var(--mint-600)',
16+
700: 'var(--mint-700)',
17+
800: 'var(--mint-800)',
18+
900: 'var(--mint-900)',
1919
},
2020
pink: {
21-
50: 'var(--color-secondary-1)',
22-
100: 'var(--color-secondary-2)',
23-
200: 'var(--color-secondary-3)',
24-
300: 'var(--color-secondary-4)',
25-
400: 'var(--color-secondary-5)',
26-
500: 'var(--color-secondary-6)',
27-
600: 'var(--color-secondary-7)',
28-
700: 'var(--color-secondary-8)',
29-
800: 'var(--color-secondary-9)',
30-
900: 'var(--color-secondary-10)',
21+
50: 'var(--pink-50)',
22+
100: 'var(--pink-100)',
23+
200: 'var(--pink-200)',
24+
300: 'var(--pink-300)',
25+
400: 'var(--pink-400)',
26+
500: 'var(--pink-500)',
27+
600: 'var(--pink-600)',
28+
700: 'var(--pink-700)',
29+
800: 'var(--pink-800)',
30+
900: 'var(--pink-900)',
3131
},
3232
gray: {
33-
50: 'var(--color-gray-1)',
34-
100: 'var(--color-gray-2)',
35-
200: 'var(--color-gray-3)',
36-
300: 'var(--color-gray-4)',
37-
400: 'var(--color-gray-5)',
38-
500: 'var(--color-gray-6)',
39-
600: 'var(--color-gray-7)',
40-
700: 'var(--color-gray-8)',
41-
800: 'var(--color-gray-9)',
42-
900: 'var(--color-gray-10)',
33+
50: 'var(--gray-50)',
34+
100: 'var(--gray-100)',
35+
200: 'var(--gray-200)',
36+
300: 'var(--gray-300)',
37+
400: 'var(--gray-400)',
38+
500: 'var(--gray-500)',
39+
600: 'var(--gray-600)',
40+
700: 'var(--gray-700)',
41+
800: 'var(--gray-800)',
42+
900: 'var(--gray-900)',
4343
},
4444
blue: {
45-
400: 'var(--color-blue)'
45+
400: 'var(--blue-400)',
4646
},
4747
red: {
48-
300: 'var(--color-red-1)',
49-
400: 'var(--color-red-2)',
48+
300: 'var(--red-300)',
49+
400: 'var(--red-400)',
5050
},
5151
background: 'var(--background)',
5252
foreground: 'var(--foreground)',
@@ -76,16 +76,16 @@ module.exports = {
7676
/* padding, margin, gap 모두 사용 가능*/
7777
spacing: {
7878
0: '0rem',
79-
1: '0.4rem',
80-
2: '0.8rem',
81-
3: '1rem',
82-
4: '1.6rem',
83-
5: '2rem',
84-
6: '2.4rem',
85-
7: '2.8rem',
86-
8: '3.2rem',
87-
9: '3.6rem',
88-
10: '4rem',
79+
1: '0.4rem',
80+
2: '0.8rem',
81+
3: '1rem',
82+
4: '1.6rem',
83+
5: '2rem',
84+
6: '2.4rem',
85+
7: '2.8rem',
86+
8: '3.2rem',
87+
9: '3.6rem',
88+
10: '4rem',
8989
18: '7.2rem',
9090
},
9191
/* Radius*/

0 commit comments

Comments
 (0)