@uniai-fe/uds-primitives 0.0.8 → 0.0.9

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/dist/styles.css +32 -72
  2. package/package.json +1 -1
  3. package/src/components/button/styles/button.scss +69 -77
package/dist/styles.css CHANGED
@@ -1267,15 +1267,24 @@
1267
1267
  background-color: transparent;
1268
1268
  color: var(--theme-button-color-neutral-base, var(--color-neutral-20));
1269
1269
  box-shadow: none;
1270
- font-family: var(--theme-button-font-body-medium-family, var(--font-body-medium-family, "Pretendard"));
1271
- font-size: var(--theme-button-font-body-medium-size, var(--font-body-medium-size, 16px));
1272
- font-weight: var(--theme-button-font-weight, 400); /* 버튼 텍스트는 스케일과 무관하게 weight 400 유지 */
1273
- line-height: var(--theme-button-font-body-medium-line-height, var(--font-body-medium-line-height, 24px));
1274
- letter-spacing: var(--theme-button-font-body-medium-letter-spacing, var(--font-body-medium-letter-spacing, 0px));
1275
1270
  filter: none;
1276
1271
  cursor: pointer;
1277
1272
  }
1278
-
1273
+ .button span {
1274
+ font-family: var(--font-caption-medium-family, var(--theme-button-font-body-medium-family, var(--font-body-medium-family, "Pretendard")));
1275
+ font-size: var(--font-caption-medium-size, var(--theme-button-font-body-medium-size, var(--font-body-medium-size, 16px)));
1276
+ font-weight: var(--font-caption-medium-weight, var(--theme-button-font-weight, 400));
1277
+ line-height: var(--font-caption-medium-line-height, var(--theme-button-font-body-medium-line-height, var(--font-body-medium-line-height, 24px)));
1278
+ letter-spacing: var(--font-caption-medium-letter-spacing, var(--theme-button-font-body-medium-letter-spacing, var(--font-body-medium-letter-spacing, 0px)));
1279
+ }
1280
+ .button .button-icon,
1281
+ .button .button-label,
1282
+ .button .button-left,
1283
+ .button .button-right {
1284
+ display: inline-flex;
1285
+ align-items: center;
1286
+ justify-content: center;
1287
+ }
1279
1288
  .button.button-block {
1280
1289
  width: 100%;
1281
1290
  }
@@ -1285,15 +1294,6 @@
1285
1294
  cursor: progress;
1286
1295
  }
1287
1296
 
1288
- .button-icon,
1289
- .button-label,
1290
- .button-left,
1291
- .button-right {
1292
- display: inline-flex;
1293
- align-items: center;
1294
- justify-content: center;
1295
- }
1296
-
1297
1297
  .button.button-fill-solid.button-priority-primary {
1298
1298
  background-color: var(--theme-button-color-primary-default, var(--color-primary-default));
1299
1299
  border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
@@ -1412,96 +1412,56 @@
1412
1412
  padding-inline: var(--theme-button-padding-6, var(--spacing-padding-6, 24px));
1413
1413
  gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px));
1414
1414
  padding-block: var(--theme-button-padding-2, var(--spacing-padding-2, 4px));
1415
- font-size: var(--theme-button-font-label-medium-size, var(--font-label-medium-size, 14px));
1416
- font-weight: var(--theme-button-font-label-medium-weight, var(--font-label-medium-weight, 400));
1417
- line-height: var(--theme-button-font-label-medium-line-height, var(--font-label-medium-line-height, 1.5em));
1418
- letter-spacing: var(--theme-button-font-label-medium-letter-spacing, var(--font-label-medium-letter-spacing, 0px));
1419
1415
  min-height: var(--theme-button-size-small-3, var(--theme-size-small-3, 32px));
1420
1416
  border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
1421
1417
  }
1422
-
1423
- .button.button-size-medium {
1424
- padding-inline: var(--theme-button-padding-7, var(--spacing-padding-7, 20px));
1425
- gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px));
1426
- padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
1427
- font-size: var(--theme-button-font-label-large-size, var(--font-label-large-size, 16px));
1428
- font-weight: var(--theme-button-font-label-large-weight, var(--font-label-large-weight, 400));
1429
- line-height: var(--theme-button-font-label-large-line-height, var(--font-label-large-line-height, 1.5em));
1430
- letter-spacing: var(--theme-button-font-label-large-letter-spacing, var(--font-label-large-letter-spacing, 0px));
1431
- min-height: var(--theme-button-size-medium-1, var(--theme-size-medium-1, 40px));
1432
- border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
1433
- }
1434
-
1435
- .button.button-size-large {
1436
- padding-inline: var(--theme-button-padding-9, var(--spacing-padding-9, 28px));
1437
- gap: var(--theme-button-gap-3, var(--spacing-gap-3, 12px));
1438
- padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
1439
- font-size: var(--theme-button-font-body-medium-size, var(--font-body-medium-size, 17px));
1440
- font-weight: var(--theme-button-font-body-medium-weight, var(--font-body-medium-weight, 500));
1441
- line-height: var(--theme-button-font-body-medium-line-height, var(--font-body-medium-line-height, 1.5em));
1442
- letter-spacing: var(--theme-button-font-body-medium-letter-spacing, var(--font-body-medium-letter-spacing, 0px));
1443
- min-height: var(--theme-button-size-medium-2, var(--theme-size-medium-2, 48px));
1444
- border-radius: var(--theme-button-radius-large-1, var(--theme-radius-large-1, 12px));
1445
- }
1446
-
1447
- .button.button-size-xlarge {
1448
- padding-inline: var(--theme-button-padding-9, var(--spacing-padding-9, 28px));
1449
- gap: var(--theme-button-gap-3, var(--spacing-gap-3, 12px));
1450
- padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
1451
- font-size: var(--theme-button-font-body-large-size, var(--font-body-large-size, 19px));
1452
- font-weight: var(--theme-button-font-body-large-weight, var(--font-body-large-weight, 600));
1453
- line-height: var(--theme-button-font-body-large-line-height, var(--font-body-large-line-height, 1.5em));
1454
- letter-spacing: var(--theme-button-font-body-large-letter-spacing, var(--font-body-large-letter-spacing, 0px));
1455
- min-height: var(--theme-button-size-medium-3, var(--theme-size-medium-3, 56px));
1456
- border-radius: var(--theme-button-radius-large-2, var(--theme-radius-large-2, 16px));
1457
- }
1458
-
1459
- .button.button-size-small {
1460
- padding-inline: var(--theme-button-padding-6, var(--spacing-padding-6, 24px));
1461
- gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px));
1462
- padding-block: var(--theme-button-padding-2, var(--spacing-padding-2, 4px));
1418
+ .button.button-size-small span {
1463
1419
  font-size: var(--theme-button-font-label-medium-size, var(--font-label-medium-size, 14px));
1464
- font-weight: var(--theme-button-font-label-medium-weight, var(--font-label-medium-weight, 400));
1420
+ font-weight: var(--theme-button-font-weight, 400);
1465
1421
  line-height: var(--theme-button-font-label-medium-line-height, var(--font-label-medium-line-height, 1.5em));
1466
1422
  letter-spacing: var(--theme-button-font-label-medium-letter-spacing, var(--font-label-medium-letter-spacing, 0px));
1467
- min-height: var(--theme-button-size-small-3, var(--theme-size-small-3, 32px));
1468
- border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
1469
1423
  }
1470
1424
 
1471
1425
  .button.button-size-medium {
1472
1426
  padding-inline: var(--theme-button-padding-7, var(--spacing-padding-7, 20px));
1473
1427
  gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px));
1474
1428
  padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
1429
+ min-height: var(--theme-button-size-medium-1, var(--theme-size-medium-1, 40px));
1430
+ border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
1431
+ }
1432
+ .button.button-size-medium span {
1475
1433
  font-size: var(--theme-button-font-label-large-size, var(--font-label-large-size, 16px));
1476
- font-weight: var(--theme-button-font-label-large-weight, var(--font-label-large-weight, 400));
1434
+ font-weight: var(--theme-button-font-weight, 400);
1477
1435
  line-height: var(--theme-button-font-label-large-line-height, var(--font-label-large-line-height, 1.5em));
1478
1436
  letter-spacing: var(--theme-button-font-label-large-letter-spacing, var(--font-label-large-letter-spacing, 0px));
1479
- min-height: var(--theme-button-size-medium-1, var(--theme-size-medium-1, 40px));
1480
- border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
1481
1437
  }
1482
1438
 
1483
1439
  .button.button-size-large {
1484
1440
  padding-inline: var(--theme-button-padding-9, var(--spacing-padding-9, 28px));
1485
1441
  gap: var(--theme-button-gap-3, var(--spacing-gap-3, 12px));
1486
1442
  padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
1443
+ min-height: var(--theme-button-size-medium-2, var(--theme-size-medium-2, 48px));
1444
+ border-radius: var(--theme-button-radius-large-1, var(--theme-radius-large-1, 12px));
1445
+ }
1446
+ .button.button-size-large span {
1487
1447
  font-size: var(--theme-button-font-body-medium-size, var(--font-body-medium-size, 17px));
1488
- font-weight: var(--theme-button-font-body-medium-weight, var(--font-body-medium-weight, 500));
1448
+ font-weight: var(--theme-button-font-weight, 400);
1489
1449
  line-height: var(--theme-button-font-body-medium-line-height, var(--font-body-medium-line-height, 1.5em));
1490
1450
  letter-spacing: var(--theme-button-font-body-medium-letter-spacing, var(--font-body-medium-letter-spacing, 0px));
1491
- min-height: var(--theme-button-size-medium-2, var(--theme-size-medium-2, 48px));
1492
- border-radius: var(--theme-button-radius-large-1, var(--theme-radius-large-1, 12px));
1493
1451
  }
1494
1452
 
1495
1453
  .button.button-size-xlarge {
1496
1454
  padding-inline: var(--theme-button-padding-9, var(--spacing-padding-9, 28px));
1497
1455
  gap: var(--theme-button-gap-3, var(--spacing-gap-3, 12px));
1498
1456
  padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
1457
+ min-height: var(--theme-button-size-medium-3, var(--theme-size-medium-3, 56px));
1458
+ border-radius: var(--theme-button-radius-large-2, var(--theme-radius-large-2, 16px));
1459
+ }
1460
+ .button.button-size-xlarge span {
1499
1461
  font-size: var(--theme-button-font-body-large-size, var(--font-body-large-size, 19px));
1500
- font-weight: var(--theme-button-font-body-large-weight, var(--font-body-large-weight, 600));
1462
+ font-weight: var(--theme-button-font-weight, 400);
1501
1463
  line-height: var(--theme-button-font-body-large-line-height, var(--font-body-large-line-height, 1.5em));
1502
1464
  letter-spacing: var(--theme-button-font-body-large-letter-spacing, var(--font-body-large-letter-spacing, 0px));
1503
- min-height: var(--theme-button-size-medium-3, var(--theme-size-medium-3, 56px));
1504
- border-radius: var(--theme-button-radius-large-2, var(--theme-radius-large-2, 16px));
1505
1465
  }
1506
1466
 
1507
1467
  .button.button-fill-outlined {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniai-fe/uds-primitives",
3
- "version": "0.0.8",
3
+ "version": "0.0.9",
4
4
  "description": "UNIAI Design System; Primitives Components Package",
5
5
  "type": "module",
6
6
  "private": false,
package/src/components/button/styles/button.scss CHANGED
@@ -282,32 +282,56 @@ $button-priorities: (
282
282
  background-color: transparent;
283
283
  color: var(--theme-button-color-neutral-base, var(--color-neutral-20));
284
284
  box-shadow: none;
285
- font-family: var(
286
- --theme-button-font-body-medium-family,
287
- var(--font-body-medium-family, "Pretendard")
288
- );
289
- font-size: var(
290
- --theme-button-font-body-medium-size,
291
- var(--font-body-medium-size, 16px)
292
- );
293
- font-weight: var(
294
- --theme-button-font-weight,
295
- 400
296
- ); /* 버튼 텍스트는 스케일과 무관하게 weight 400 유지 */
297
- line-height: var(
298
- --theme-button-font-body-medium-line-height,
299
- var(--font-body-medium-line-height, 24px)
300
- );
301
- letter-spacing: var(
302
- --theme-button-font-body-medium-letter-spacing,
303
- var(--font-body-medium-letter-spacing, 0px)
304
- );
305
285
  filter: none;
306
286
  cursor: pointer;
307
- }
308
287
 
309
- .button.button-block {
310
- width: 100%;
288
+ span {
289
+ font-family: var(
290
+ --font-caption-medium-family,
291
+ var(
292
+ --theme-button-font-body-medium-family,
293
+ var(--font-body-medium-family, "Pretendard")
294
+ )
295
+ );
296
+ font-size: var(
297
+ --font-caption-medium-size,
298
+ var(
299
+ --theme-button-font-body-medium-size,
300
+ var(--font-body-medium-size, 16px)
301
+ )
302
+ );
303
+ font-weight: var(
304
+ --font-caption-medium-weight,
305
+ var(--theme-button-font-weight, 400)
306
+ );
307
+ line-height: var(
308
+ --font-caption-medium-line-height,
309
+ var(
310
+ --theme-button-font-body-medium-line-height,
311
+ var(--font-body-medium-line-height, 24px)
312
+ )
313
+ );
314
+ letter-spacing: var(
315
+ --font-caption-medium-letter-spacing,
316
+ var(
317
+ --theme-button-font-body-medium-letter-spacing,
318
+ var(--font-body-medium-letter-spacing, 0px)
319
+ )
320
+ );
321
+ }
322
+
323
+ .button-icon,
324
+ .button-label,
325
+ .button-left,
326
+ .button-right {
327
+ display: inline-flex;
328
+ align-items: center;
329
+ justify-content: center;
330
+ }
331
+
332
+ &.button-block {
333
+ width: 100%;
334
+ }
311
335
  }
312
336
 
313
337
  .button[aria-busy="true"] {
@@ -315,15 +339,6 @@ $button-priorities: (
315
339
  cursor: progress;
316
340
  }
317
341
 
318
- .button-icon,
319
- .button-label,
320
- .button-left,
321
- .button-right {
322
- display: inline-flex;
323
- align-items: center;
324
- justify-content: center;
325
- }
326
-
327
342
  @each $priority, $tokens in $button-priorities {
328
343
  @include button-state-selector("solid", $priority) {
329
344
  background-color: priority-token($priority, solid-bg);
@@ -401,19 +416,16 @@ $button-size-map: (
401
416
  ),
402
417
  padding-block: var(--theme-button-padding-2, var(--spacing-padding-2, 4px)),
403
418
  gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px)),
404
- font-size: var(
419
+ text-font-size: var(
405
420
  --theme-button-font-label-medium-size,
406
421
  var(--font-label-medium-size, 14px)
407
422
  ),
408
- font-weight: var(
409
- --theme-button-font-label-medium-weight,
410
- var(--font-label-medium-weight, 400)
411
- ),
412
- line-height: var(
423
+ text-font-weight: var(--theme-button-font-weight, 400),
424
+ text-line-height: var(
413
425
  --theme-button-font-label-medium-line-height,
414
426
  var(--font-label-medium-line-height, 1.5em)
415
427
  ),
416
- letter-spacing: var(
428
+ text-letter-spacing: var(
417
429
  --theme-button-font-label-medium-letter-spacing,
418
430
  var(--font-label-medium-letter-spacing, 0px)
419
431
  ),
@@ -433,19 +445,16 @@ $button-size-map: (
433
445
  ),
434
446
  gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px)),
435
447
  padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px)),
436
- font-size: var(
448
+ text-font-size: var(
437
449
  --theme-button-font-label-large-size,
438
450
  var(--font-label-large-size, 16px)
439
451
  ),
440
- font-weight: var(
441
- --theme-button-font-label-large-weight,
442
- var(--font-label-large-weight, 400)
443
- ),
444
- line-height: var(
452
+ text-font-weight: var(--theme-button-font-weight, 400),
453
+ text-line-height: var(
445
454
  --theme-button-font-label-large-line-height,
446
455
  var(--font-label-large-line-height, 1.5em)
447
456
  ),
448
- letter-spacing: var(
457
+ text-letter-spacing: var(
449
458
  --theme-button-font-label-large-letter-spacing,
450
459
  var(--font-label-large-letter-spacing, 0px)
451
460
  ),
@@ -465,19 +474,16 @@ $button-size-map: (
465
474
  ),
466
475
  gap: var(--theme-button-gap-3, var(--spacing-gap-3, 12px)),
467
476
  padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px)),
468
- font-size: var(
477
+ text-font-size: var(
469
478
  --theme-button-font-body-medium-size,
470
479
  var(--font-body-medium-size, 17px)
471
480
  ),
472
- font-weight: var(
473
- --theme-button-font-body-medium-weight,
474
- var(--font-body-medium-weight, 500)
475
- ),
476
- line-height: var(
481
+ text-font-weight: var(--theme-button-font-weight, 400),
482
+ text-line-height: var(
477
483
  --theme-button-font-body-medium-line-height,
478
484
  var(--font-body-medium-line-height, 1.5em)
479
485
  ),
480
- letter-spacing: var(
486
+ text-letter-spacing: var(
481
487
  --theme-button-font-body-medium-letter-spacing,
482
488
  var(--font-body-medium-letter-spacing, 0px)
483
489
  ),
@@ -497,19 +503,16 @@ $button-size-map: (
497
503
  ),
498
504
  gap: var(--theme-button-gap-3, var(--spacing-gap-3, 12px)),
499
505
  padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px)),
500
- font-size: var(
506
+ text-font-size: var(
501
507
  --theme-button-font-body-large-size,
502
508
  var(--font-body-large-size, 19px)
503
509
  ),
504
- font-weight: var(
505
- --theme-button-font-body-large-weight,
506
- var(--font-body-large-weight, 600)
507
- ),
508
- line-height: var(
510
+ text-font-weight: var(--theme-button-font-weight, 400),
511
+ text-line-height: var(
509
512
  --theme-button-font-body-large-line-height,
510
513
  var(--font-body-large-line-height, 1.5em)
511
514
  ),
512
- letter-spacing: var(
515
+ text-letter-spacing: var(
513
516
  --theme-button-font-body-large-letter-spacing,
514
517
  var(--font-body-large-letter-spacing, 0px)
515
518
  ),
@@ -529,26 +532,15 @@ $button-size-map: (
529
532
  padding-inline: map.get($tokens, padding-inline);
530
533
  gap: map.get($tokens, gap);
531
534
  padding-block: map.get($tokens, padding-block);
532
- font-size: map.get($tokens, font-size);
533
- font-weight: map.get($tokens, font-weight);
534
- line-height: map.get($tokens, line-height);
535
- letter-spacing: map.get($tokens, letter-spacing);
536
535
  min-height: map.get($tokens, min-height);
537
536
  border-radius: map.get($tokens, radius);
538
- }
539
- }
540
537
 
541
- @each $size, $tokens in $button-size-map {
542
- .button.button-size-#{$size} {
543
- padding-inline: map.get($tokens, padding-inline);
544
- gap: map.get($tokens, gap);
545
- padding-block: map.get($tokens, padding-block);
546
- font-size: map.get($tokens, font-size);
547
- font-weight: map.get($tokens, font-weight);
548
- line-height: map.get($tokens, line-height);
549
- letter-spacing: map.get($tokens, letter-spacing);
550
- min-height: map.get($tokens, min-height);
551
- border-radius: map.get($tokens, radius);
538
+ span {
539
+ font-size: map.get($tokens, text-font-size);
540
+ font-weight: map.get($tokens, text-font-weight);
541
+ line-height: map.get($tokens, text-line-height);
542
+ letter-spacing: map.get($tokens, text-letter-spacing);
543
+ }
552
544
  }
553
545
  }
554
546