@greaming/gds 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +4 -1
  2. package/package.json +1 -1
  3. package/theme.css +65 -57
package/README.md CHANGED
@@ -8,6 +8,7 @@ Tailwind에서 쓰는 **`theme.css`**를 자동 생성합니다.
8
8
  - `src/tokens/color.json`
9
9
  - `src/tokens/font.json`
10
10
  - `src/tokens/shape.json`
11
+ - `src/tokens/shadow.json`
11
12
  - `src/tokens/typescale.json`
12
13
 
13
14
  ## 2) `theme.css` 생성
@@ -36,7 +37,7 @@ pnpm add @greaming/gds
36
37
  ## 4) 예시 (각 요소 1회)
37
38
 
38
39
  ```tsx
39
- <button className="display-large bg-secondary text-on-secondary rounded-medium state-layer secondary-opacity-8">
40
+ <button className="display-large bg-secondary text-on-secondary rounded-medium shadow-1 state-layer secondary-opacity-8">
40
41
  GDS Button
41
42
  </button>
42
43
  ```
@@ -45,6 +46,8 @@ pnpm add @greaming/gds
45
46
  - `bg-secondary`: 컬러 토큰
46
47
  - `text-on-secondary`: 컬러 토큰
47
48
  - `rounded-medium`: 라운드 토큰
49
+ - `shadow-1`: 그림자 토큰 프라이머리
50
+ - `shadow-secondary-1`: 그림자 토큰 세컨더리
48
51
  - `state-layer`: 재사용 가능한 hover 오버레이 동작
49
52
  - `secondary-opacity-8`: 오버레이 컬러 토큰
50
53
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@greaming/gds",
3
3
  "private": false,
4
- "version": "0.0.4",
4
+ "version": "0.0.5",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
package/theme.css CHANGED
@@ -49,7 +49,7 @@
49
49
  --font-weight-regular: 400;
50
50
  --font-weight-semi-bold: 600;
51
51
  --tracking-none: 0;
52
- --tracking-small: 0.1px;
52
+ --tracking-small: 0.0063rem;
53
53
  --radius-extra-extra-large: 48px;
54
54
  --radius-extra-large: 28px;
55
55
  --radius-extra-large-increased: 32px;
@@ -60,65 +60,67 @@
60
60
  --radius-medium: 12px;
61
61
  --radius-none: 0;
62
62
  --radius-small: 8px;
63
- --text-body-large: 16px;
64
- --text-body-large--line-height: 24px;
65
- --text-body-large--letter-spacing: 0.5px;
66
- --text-body-medium: 14px;
67
- --text-body-medium--line-height: 20px;
68
- --text-body-medium--letter-spacing: 0.25px;
69
- --text-body-small: 12px;
70
- --text-body-small--line-height: 16px;
71
- --text-body-small--letter-spacing: 0.4px;
72
- --text-body-xlarge: 18px;
73
- --text-body-xlarge--line-height: 24px;
74
- --text-body-xlarge--letter-spacing: 0.65px;
75
- --text-display-large: 52px;
76
- --text-display-large--line-height: 62px;
77
- --text-display-large--letter-spacing: -0.25px;
78
- --text-display-medium: 45px;
79
- --text-display-medium--line-height: 52px;
63
+ --shadow-1: 0 0 4px 0 rgb(18 19 21 / 0.25);
64
+ --shadow-secondary-1: 0 0 4px 0 rgb(198 240 101 / 1);
65
+ --text-body-large: 1rem;
66
+ --text-body-large--line-height: 1.25rem;
67
+ --text-body-large--letter-spacing: 0;
68
+ --text-body-medium: 0.875rem;
69
+ --text-body-medium--line-height: 1.25rem;
70
+ --text-body-medium--letter-spacing: 0.0156rem;
71
+ --text-body-small: 0.75rem;
72
+ --text-body-small--line-height: 1rem;
73
+ --text-body-small--letter-spacing: 0.025rem;
74
+ --text-body-xlarge: 1.125rem;
75
+ --text-body-xlarge--line-height: 1.5rem;
76
+ --text-body-xlarge--letter-spacing: 0.0406rem;
77
+ --text-display-large: 3.25rem;
78
+ --text-display-large--line-height: 3.875rem;
79
+ --text-display-large--letter-spacing: -0.0156rem;
80
+ --text-display-medium: 2.8125rem;
81
+ --text-display-medium--line-height: 3.25rem;
80
82
  --text-display-medium--letter-spacing: 0;
81
- --text-display-small: 36px;
82
- --text-display-small--line-height: 44px;
83
+ --text-display-small: 2.25rem;
84
+ --text-display-small--line-height: 3.5rem;
83
85
  --text-display-small--letter-spacing: 0;
84
- --text-label-large: 14px;
85
- --text-label-large--line-height: 20px;
86
- --text-label-large--letter-spacing: 0.1px;
87
- --text-label-medium: 12px;
88
- --text-label-medium--line-height: 16px;
89
- --text-label-medium--letter-spacing: 0.5px;
90
- --text-label-small: 11px;
91
- --text-label-small--line-height: 16px;
92
- --text-label-small--letter-spacing: 0.5px;
93
- --text-label-xlarge: 16px;
94
- --text-label-xlarge--line-height: 24px;
95
- --text-label-xlarge--letter-spacing: 0.1px;
96
- --text-label-xxlarge: 18px;
97
- --text-label-xxlarge--line-height: 24px;
98
- --text-label-xxlarge--letter-spacing: 0.1px;
99
- --text-label-xxxlarge: 20px;
100
- --text-label-xxxlarge--line-height: 26px;
86
+ --text-label-large: 0.875rem;
87
+ --text-label-large--line-height: 1.25rem;
88
+ --text-label-large--letter-spacing: 0.0063rem;
89
+ --text-label-medium: 0.75rem;
90
+ --text-label-medium--line-height: 0.875rem;
91
+ --text-label-medium--letter-spacing: 0;
92
+ --text-label-small: 0.6875rem;
93
+ --text-label-small--line-height: 1rem;
94
+ --text-label-small--letter-spacing: 0.0313rem;
95
+ --text-label-xlarge: 1rem;
96
+ --text-label-xlarge--line-height: 1.25rem;
97
+ --text-label-xlarge--letter-spacing: 0.0063rem;
98
+ --text-label-xxlarge: 1.125rem;
99
+ --text-label-xxlarge--line-height: 1.25rem;
100
+ --text-label-xxlarge--letter-spacing: 0.0063rem;
101
+ --text-label-xxxlarge: 1.25rem;
102
+ --text-label-xxxlarge--line-height: 1.625rem;
101
103
  --text-label-xxxlarge--letter-spacing: 0;
102
- --text-main-title-large: 32px;
103
- --text-main-title-large--line-height: 40px;
104
+ --text-main-title-large: 2rem;
105
+ --text-main-title-large--line-height: 2.5rem;
104
106
  --text-main-title-large--letter-spacing: 0;
105
- --text-main-title-medium: 28px;
106
- --text-main-title-medium--line-height: 36px;
107
+ --text-main-title-medium: 1.75rem;
108
+ --text-main-title-medium--line-height: 2.25rem;
107
109
  --text-main-title-medium--letter-spacing: 0;
108
- --text-main-title-small: 24px;
109
- --text-main-title-small--line-height: 32px;
110
+ --text-main-title-small: 1.5rem;
111
+ --text-main-title-small--line-height: 1.875rem;
110
112
  --text-main-title-small--letter-spacing: 0;
111
- --text-sub-title-large: 18px;
112
- --text-sub-title-large--line-height: 26px;
113
- --text-sub-title-large--letter-spacing: 0.15px;
114
- --text-sub-title-medium: 16px;
115
- --text-sub-title-medium--line-height: 24px;
116
- --text-sub-title-medium--letter-spacing: 0.15px;
117
- --text-sub-title-small: 14px;
118
- --text-sub-title-small--line-height: 20px;
119
- --text-sub-title-small--letter-spacing: 0.1px;
120
- --text-sub-title-xlarge: 20px;
121
- --text-sub-title-xlarge--line-height: 28px;
113
+ --text-sub-title-large: 1.125rem;
114
+ --text-sub-title-large--line-height: 1.25rem;
115
+ --text-sub-title-large--letter-spacing: 0.0094rem;
116
+ --text-sub-title-medium: 1rem;
117
+ --text-sub-title-medium--line-height: 1.25rem;
118
+ --text-sub-title-medium--letter-spacing: 0;
119
+ --text-sub-title-small: 0.875rem;
120
+ --text-sub-title-small--line-height: 1.25rem;
121
+ --text-sub-title-small--letter-spacing: 0.0063rem;
122
+ --text-sub-title-xlarge: 1.25rem;
123
+ --text-sub-title-xlarge--line-height: 1.5rem;
122
124
  --text-sub-title-xlarge--letter-spacing: 0;
123
125
  }
124
126
 
@@ -211,6 +213,12 @@
211
213
  .surface-variant-opacity-16 {
212
214
  --state-layer-color: var(--color-state-layers-surface-variant-opacity-16);
213
215
  }
216
+ .shadow-1 {
217
+ box-shadow: var(--shadow-1);
218
+ }
219
+ .shadow-secondary-1 {
220
+ box-shadow: var(--shadow-secondary-1);
221
+ }
214
222
  .body-large {
215
223
  font-family: var(--font-plain);
216
224
  font-weight: var(--font-weight-regular);
@@ -304,7 +312,7 @@
304
312
  }
305
313
  .label-medium {
306
314
  font-family: var(--font-plain);
307
- font-weight: var(--font-weight-medium);
315
+ font-weight: var(--font-weight-regular);
308
316
  font-size: var(--text-label-medium);
309
317
  line-height: var(--text-label-medium--line-height);
310
318
  letter-spacing: var(--text-label-medium--letter-spacing);
@@ -332,7 +340,7 @@
332
340
  }
333
341
  .label-xlarge {
334
342
  font-family: var(--font-plain);
335
- font-weight: var(--font-weight-regular);
343
+ font-weight: var(--font-weight-medium);
336
344
  font-size: var(--text-label-xlarge);
337
345
  line-height: var(--text-label-xlarge--line-height);
338
346
  letter-spacing: var(--text-label-xlarge--letter-spacing);
@@ -465,7 +473,7 @@
465
473
  }
466
474
  .sub-title-xlarge-emphasized {
467
475
  font-family: var(--font-plain);
468
- font-weight: var(--font-weight-medium);
476
+ font-weight: var(--font-weight-semi-bold);
469
477
  font-size: var(--text-sub-title-xlarge);
470
478
  line-height: var(--text-sub-title-xlarge--line-height);
471
479
  letter-spacing: var(--text-sub-title-xlarge--letter-spacing);