@greaming/gds 0.0.3 → 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 +7 -1
  2. package/package.json +1 -1
  3. package/theme.css +183 -56
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,12 +46,17 @@ 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
 
51
54
  `state-layer`는 `::before` 레이어를 만들어 hover 시에만 보이게 합니다.
52
55
  오버레이 색상은 `primary-opacity-8`, `secondary-opacity-10`처럼 토큰 클래스로 지정합니다.
53
56
 
57
+ 타이포 강조 버전은 `-emphasized` 접미사를 사용합니다.
58
+ 예: `display-large-emphasized`, `label-large-emphasized`
59
+
54
60
  ## 5) 폰트 파일
55
61
 
56
62
  `theme.css`는 **폰트 이름만 정의**합니다.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@greaming/gds",
3
3
  "private": false,
4
- "version": "0.0.3",
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);
@@ -218,6 +226,13 @@
218
226
  line-height: var(--text-body-large--line-height);
219
227
  letter-spacing: var(--text-body-large--letter-spacing);
220
228
  }
229
+ .body-large-emphasized {
230
+ font-family: var(--font-plain);
231
+ font-weight: var(--font-weight-medium);
232
+ font-size: var(--text-body-large);
233
+ line-height: var(--text-body-large--line-height);
234
+ letter-spacing: var(--text-body-large--letter-spacing);
235
+ }
221
236
  .body-medium {
222
237
  font-family: var(--font-plain);
223
238
  font-weight: var(--font-weight-regular);
@@ -225,6 +240,13 @@
225
240
  line-height: var(--text-body-medium--line-height);
226
241
  letter-spacing: var(--text-body-medium--letter-spacing);
227
242
  }
243
+ .body-medium-emphasized {
244
+ font-family: var(--font-plain);
245
+ font-weight: var(--font-weight-medium);
246
+ font-size: var(--text-body-medium);
247
+ line-height: var(--text-body-medium--line-height);
248
+ letter-spacing: var(--text-body-medium--letter-spacing);
249
+ }
228
250
  .body-small {
229
251
  font-family: var(--font-plain);
230
252
  font-weight: var(--font-weight-regular);
@@ -232,6 +254,13 @@
232
254
  line-height: var(--text-body-small--line-height);
233
255
  letter-spacing: var(--text-body-small--letter-spacing);
234
256
  }
257
+ .body-small-emphasized {
258
+ font-family: var(--font-plain);
259
+ font-weight: var(--font-weight-medium);
260
+ font-size: var(--text-body-small);
261
+ line-height: var(--text-body-small--line-height);
262
+ letter-spacing: var(--text-body-small--letter-spacing);
263
+ }
235
264
  .body-xlarge {
236
265
  font-family: var(--font-plain);
237
266
  font-weight: var(--font-weight-regular);
@@ -239,6 +268,13 @@
239
268
  line-height: var(--text-body-xlarge--line-height);
240
269
  letter-spacing: var(--text-body-xlarge--letter-spacing);
241
270
  }
271
+ .body-xlarge-emphasized {
272
+ font-family: var(--font-plain);
273
+ font-weight: var(--font-weight-medium);
274
+ font-size: var(--text-body-xlarge);
275
+ line-height: var(--text-body-xlarge--line-height);
276
+ letter-spacing: var(--text-body-xlarge--letter-spacing);
277
+ }
242
278
  .display-large {
243
279
  font-family: var(--font-brand);
244
280
  font-weight: var(--font-weight-regular);
@@ -267,9 +303,23 @@
267
303
  line-height: var(--text-label-large--line-height);
268
304
  letter-spacing: var(--text-label-large--letter-spacing);
269
305
  }
306
+ .label-large-emphasized {
307
+ font-family: var(--font-plain);
308
+ font-weight: var(--font-weight-semi-bold);
309
+ font-size: var(--text-label-large);
310
+ line-height: var(--text-label-large--line-height);
311
+ letter-spacing: var(--text-label-large--letter-spacing);
312
+ }
270
313
  .label-medium {
271
314
  font-family: var(--font-plain);
272
- font-weight: var(--font-weight-medium);
315
+ font-weight: var(--font-weight-regular);
316
+ font-size: var(--text-label-medium);
317
+ line-height: var(--text-label-medium--line-height);
318
+ letter-spacing: var(--text-label-medium--letter-spacing);
319
+ }
320
+ .label-medium-emphasized {
321
+ font-family: var(--font-plain);
322
+ font-weight: var(--font-weight-semi-bold);
273
323
  font-size: var(--text-label-medium);
274
324
  line-height: var(--text-label-medium--line-height);
275
325
  letter-spacing: var(--text-label-medium--letter-spacing);
@@ -281,9 +331,23 @@
281
331
  line-height: var(--text-label-small--line-height);
282
332
  letter-spacing: var(--text-label-small--letter-spacing);
283
333
  }
334
+ .label-small-emphasized {
335
+ font-family: var(--font-plain);
336
+ font-weight: var(--font-weight-semi-bold);
337
+ font-size: var(--text-label-small);
338
+ line-height: var(--text-label-small--line-height);
339
+ letter-spacing: var(--text-label-small--letter-spacing);
340
+ }
284
341
  .label-xlarge {
285
342
  font-family: var(--font-plain);
286
- font-weight: var(--font-weight-regular);
343
+ font-weight: var(--font-weight-medium);
344
+ font-size: var(--text-label-xlarge);
345
+ line-height: var(--text-label-xlarge--line-height);
346
+ letter-spacing: var(--text-label-xlarge--letter-spacing);
347
+ }
348
+ .label-xlarge-emphasized {
349
+ font-family: var(--font-plain);
350
+ font-weight: var(--font-weight-semi-bold);
287
351
  font-size: var(--text-label-xlarge);
288
352
  line-height: var(--text-label-xlarge--line-height);
289
353
  letter-spacing: var(--text-label-xlarge--letter-spacing);
@@ -295,6 +359,13 @@
295
359
  line-height: var(--text-label-xxlarge--line-height);
296
360
  letter-spacing: var(--text-label-xxlarge--letter-spacing);
297
361
  }
362
+ .label-xxlarge-emphasized {
363
+ font-family: var(--font-plain);
364
+ font-weight: var(--font-weight-semi-bold);
365
+ font-size: var(--text-label-xxlarge);
366
+ line-height: var(--text-label-xxlarge--line-height);
367
+ letter-spacing: var(--text-label-xxlarge--letter-spacing);
368
+ }
298
369
  .label-xxxlarge {
299
370
  font-family: var(--font-plain);
300
371
  font-weight: var(--font-weight-regular);
@@ -302,6 +373,13 @@
302
373
  line-height: var(--text-label-xxxlarge--line-height);
303
374
  letter-spacing: var(--text-label-xxxlarge--letter-spacing);
304
375
  }
376
+ .label-xxxlarge-emphasized {
377
+ font-family: var(--font-plain);
378
+ font-weight: var(--font-weight-medium);
379
+ font-size: var(--text-label-xxxlarge);
380
+ line-height: var(--text-label-xxxlarge--line-height);
381
+ letter-spacing: var(--text-label-xxxlarge--letter-spacing);
382
+ }
305
383
  .main-title-large {
306
384
  font-family: var(--font-plain);
307
385
  font-weight: var(--font-weight-regular);
@@ -309,6 +387,13 @@
309
387
  line-height: var(--text-main-title-large--line-height);
310
388
  letter-spacing: var(--text-main-title-large--letter-spacing);
311
389
  }
390
+ .main-title-large-emphasized {
391
+ font-family: var(--font-plain);
392
+ font-weight: var(--font-weight-medium);
393
+ font-size: var(--text-main-title-large);
394
+ line-height: var(--text-main-title-large--line-height);
395
+ letter-spacing: var(--text-main-title-large--letter-spacing);
396
+ }
312
397
  .main-title-medium {
313
398
  font-family: var(--font-plain);
314
399
  font-weight: var(--font-weight-regular);
@@ -316,6 +401,13 @@
316
401
  line-height: var(--text-main-title-medium--line-height);
317
402
  letter-spacing: var(--text-main-title-medium--letter-spacing);
318
403
  }
404
+ .main-title-medium-emphasized {
405
+ font-family: var(--font-plain);
406
+ font-weight: var(--font-weight-semi-bold);
407
+ font-size: var(--text-main-title-medium);
408
+ line-height: var(--text-main-title-medium--line-height);
409
+ letter-spacing: var(--text-main-title-medium--letter-spacing);
410
+ }
319
411
  .main-title-small {
320
412
  font-family: var(--font-plain);
321
413
  font-weight: var(--font-weight-regular);
@@ -323,6 +415,13 @@
323
415
  line-height: var(--text-main-title-small--line-height);
324
416
  letter-spacing: var(--text-main-title-small--letter-spacing);
325
417
  }
418
+ .main-title-small-emphasized {
419
+ font-family: var(--font-plain);
420
+ font-weight: var(--font-weight-semi-bold);
421
+ font-size: var(--text-main-title-small);
422
+ line-height: var(--text-main-title-small--line-height);
423
+ letter-spacing: var(--text-main-title-small--letter-spacing);
424
+ }
326
425
  .sub-title-large {
327
426
  font-family: var(--font-plain);
328
427
  font-weight: var(--font-weight-regular);
@@ -330,6 +429,13 @@
330
429
  line-height: var(--text-sub-title-large--line-height);
331
430
  letter-spacing: var(--text-sub-title-large--letter-spacing);
332
431
  }
432
+ .sub-title-large-emphasized {
433
+ font-family: var(--font-plain);
434
+ font-weight: var(--font-weight-semi-bold);
435
+ font-size: var(--text-sub-title-large);
436
+ line-height: var(--text-sub-title-large--line-height);
437
+ letter-spacing: var(--text-sub-title-large--letter-spacing);
438
+ }
333
439
  .sub-title-medium {
334
440
  font-family: var(--font-plain);
335
441
  font-weight: var(--font-weight-medium);
@@ -337,6 +443,13 @@
337
443
  line-height: var(--text-sub-title-medium--line-height);
338
444
  letter-spacing: var(--text-sub-title-medium--letter-spacing);
339
445
  }
446
+ .sub-title-medium-emphasized {
447
+ font-family: var(--font-plain);
448
+ font-weight: var(--font-weight-semi-bold);
449
+ font-size: var(--text-sub-title-medium);
450
+ line-height: var(--text-sub-title-medium--line-height);
451
+ letter-spacing: var(--text-sub-title-medium--letter-spacing);
452
+ }
340
453
  .sub-title-small {
341
454
  font-family: var(--font-plain);
342
455
  font-weight: var(--font-weight-medium);
@@ -344,6 +457,13 @@
344
457
  line-height: var(--text-sub-title-small--line-height);
345
458
  letter-spacing: var(--text-sub-title-small--letter-spacing);
346
459
  }
460
+ .sub-title-small-emphasized {
461
+ font-family: var(--font-plain);
462
+ font-weight: var(--font-weight-semi-bold);
463
+ font-size: var(--text-sub-title-small);
464
+ line-height: var(--text-sub-title-small--line-height);
465
+ letter-spacing: var(--text-sub-title-small--letter-spacing);
466
+ }
347
467
  .sub-title-xlarge {
348
468
  font-family: var(--font-plain);
349
469
  font-weight: var(--font-weight-regular);
@@ -351,4 +471,11 @@
351
471
  line-height: var(--text-sub-title-xlarge--line-height);
352
472
  letter-spacing: var(--text-sub-title-xlarge--letter-spacing);
353
473
  }
474
+ .sub-title-xlarge-emphasized {
475
+ font-family: var(--font-plain);
476
+ font-weight: var(--font-weight-semi-bold);
477
+ font-size: var(--text-sub-title-xlarge);
478
+ line-height: var(--text-sub-title-xlarge--line-height);
479
+ letter-spacing: var(--text-sub-title-xlarge--letter-spacing);
480
+ }
354
481
  }