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