@uniai-fe/uds-primitives 0.0.8 → 0.0.10

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 (10) hide show
  1. package/dist/styles.css +76 -81
  2. package/package.json +1 -1
  3. package/src/components/button/styles/button.scss +69 -77
  4. package/src/components/divider/index.scss +1 -0
  5. package/src/components/divider/index.tsx +5 -0
  6. package/src/components/divider/markup/Divider.tsx +11 -0
  7. package/src/components/divider/markup/index.ts +1 -0
  8. package/src/components/divider/styles/divider.scss +15 -0
  9. package/src/index.scss +1 -0
  10. package/src/index.tsx +1 -0
package/dist/styles.css CHANGED
@@ -18,6 +18,7 @@
18
18
  letter-spacing: -0.05em;
19
19
  flex-shrink: 0;
20
20
  overscroll-behavior-y: none;
21
+ font-family: var(--font-family-sans, "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable", "Pretendard", "Inter", sans-serif);
21
22
  }
22
23
  *:focus,
23
24
  *:focus-within,
@@ -626,23 +627,41 @@
626
627
  --theme-radius-xlarge: 16px;
627
628
  }
628
629
  }
630
+ @layer theme.tokens.typography {
631
+ @font-face {
632
+ font-family: "Pretendard JP Variable";
633
+ src: url("./fonts/pretendard-jp/PretendardJPVariable.woff2") format("woff2");
634
+ font-weight: 100 900;
635
+ font-style: normal;
636
+ font-display: swap;
637
+ }
638
+ @font-face {
639
+ font-family: "InterVariable";
640
+ src: url("./fonts/inter/InterVariable.woff2") format("woff2");
641
+ font-weight: 100 900;
642
+ font-style: normal;
643
+ font-display: swap;
644
+ }
645
+ }
629
646
  @layer theme.tokens.typography {
630
647
  :root {
631
648
  --font-family-pretendard:
632
649
  "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable",
633
- "Pretendard", "Noto Sans KR", "-apple-system", "BlinkMacSystemFont",
634
- "Apple SD Gothic Neo", "Segoe UI", "Roboto", "Helvetica",
635
- "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji",
650
+ "Pretendard", "InterVariable", "Inter", "Noto Sans KR", "-apple-system",
651
+ "BlinkMacSystemFont", "Apple SD Gothic Neo", "Segoe UI", "Roboto",
652
+ "Helvetica Neue", "Helvetica", "Apple Color Emoji", "Segoe UI Emoji",
636
653
  "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum",
637
654
  "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
638
655
  --font-family-inter:
639
- "InterVariable", "Inter", "-apple-system", "BlinkMacSystemFont",
640
- "Segoe UI", "Roboto", "Helvetica", "Helvetica Neue", "Apple Color Emoji",
641
- "Segoe UI Emoji", "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움",
642
- "dotum", "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
656
+ "InterVariable", "Inter", "Pretendard JP Variable", "Pretendard JP",
657
+ "Pretendard Variable", "Pretendard", "-apple-system",
658
+ "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica",
659
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Malgun Gothic",
660
+ "맑은 고딕", "돋움", "dotum", "Oxygen", "Oxygen-Sans", "Ubuntu",
661
+ "Cantarell", "sans-serif";
643
662
  --font-family-system:
644
- "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica",
645
- "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji",
663
+ "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto",
664
+ "Helvetica Neue", "Helvetica", "Apple Color Emoji", "Segoe UI Emoji",
646
665
  "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum",
647
666
  "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
648
667
  --font-family-sans: var(--font-family-pretendard);
@@ -1267,15 +1286,24 @@
1267
1286
  background-color: transparent;
1268
1287
  color: var(--theme-button-color-neutral-base, var(--color-neutral-20));
1269
1288
  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
1289
  filter: none;
1276
1290
  cursor: pointer;
1277
1291
  }
1278
-
1292
+ .button span {
1293
+ font-family: var(--font-caption-medium-family, var(--theme-button-font-body-medium-family, var(--font-body-medium-family, "Pretendard")));
1294
+ font-size: var(--font-caption-medium-size, var(--theme-button-font-body-medium-size, var(--font-body-medium-size, 16px)));
1295
+ font-weight: var(--font-caption-medium-weight, var(--theme-button-font-weight, 400));
1296
+ line-height: var(--font-caption-medium-line-height, var(--theme-button-font-body-medium-line-height, var(--font-body-medium-line-height, 24px)));
1297
+ letter-spacing: var(--font-caption-medium-letter-spacing, var(--theme-button-font-body-medium-letter-spacing, var(--font-body-medium-letter-spacing, 0px)));
1298
+ }
1299
+ .button .button-icon,
1300
+ .button .button-label,
1301
+ .button .button-left,
1302
+ .button .button-right {
1303
+ display: inline-flex;
1304
+ align-items: center;
1305
+ justify-content: center;
1306
+ }
1279
1307
  .button.button-block {
1280
1308
  width: 100%;
1281
1309
  }
@@ -1285,15 +1313,6 @@
1285
1313
  cursor: progress;
1286
1314
  }
1287
1315
 
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
1316
  .button.button-fill-solid.button-priority-primary {
1298
1317
  background-color: var(--theme-button-color-primary-default, var(--color-primary-default));
1299
1318
  border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
@@ -1412,96 +1431,56 @@
1412
1431
  padding-inline: var(--theme-button-padding-6, var(--spacing-padding-6, 24px));
1413
1432
  gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px));
1414
1433
  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
1434
  min-height: var(--theme-button-size-small-3, var(--theme-size-small-3, 32px));
1420
1435
  border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
1421
1436
  }
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));
1437
+ .button.button-size-small span {
1463
1438
  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));
1439
+ font-weight: var(--theme-button-font-weight, 400);
1465
1440
  line-height: var(--theme-button-font-label-medium-line-height, var(--font-label-medium-line-height, 1.5em));
1466
1441
  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
1442
  }
1470
1443
 
1471
1444
  .button.button-size-medium {
1472
1445
  padding-inline: var(--theme-button-padding-7, var(--spacing-padding-7, 20px));
1473
1446
  gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px));
1474
1447
  padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
1448
+ min-height: var(--theme-button-size-medium-1, var(--theme-size-medium-1, 40px));
1449
+ border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
1450
+ }
1451
+ .button.button-size-medium span {
1475
1452
  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));
1453
+ font-weight: var(--theme-button-font-weight, 400);
1477
1454
  line-height: var(--theme-button-font-label-large-line-height, var(--font-label-large-line-height, 1.5em));
1478
1455
  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
1456
  }
1482
1457
 
1483
1458
  .button.button-size-large {
1484
1459
  padding-inline: var(--theme-button-padding-9, var(--spacing-padding-9, 28px));
1485
1460
  gap: var(--theme-button-gap-3, var(--spacing-gap-3, 12px));
1486
1461
  padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
1462
+ min-height: var(--theme-button-size-medium-2, var(--theme-size-medium-2, 48px));
1463
+ border-radius: var(--theme-button-radius-large-1, var(--theme-radius-large-1, 12px));
1464
+ }
1465
+ .button.button-size-large span {
1487
1466
  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));
1467
+ font-weight: var(--theme-button-font-weight, 400);
1489
1468
  line-height: var(--theme-button-font-body-medium-line-height, var(--font-body-medium-line-height, 1.5em));
1490
1469
  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
1470
  }
1494
1471
 
1495
1472
  .button.button-size-xlarge {
1496
1473
  padding-inline: var(--theme-button-padding-9, var(--spacing-padding-9, 28px));
1497
1474
  gap: var(--theme-button-gap-3, var(--spacing-gap-3, 12px));
1498
1475
  padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
1476
+ min-height: var(--theme-button-size-medium-3, var(--theme-size-medium-3, 56px));
1477
+ border-radius: var(--theme-button-radius-large-2, var(--theme-radius-large-2, 16px));
1478
+ }
1479
+ .button.button-size-xlarge span {
1499
1480
  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));
1481
+ font-weight: var(--theme-button-font-weight, 400);
1501
1482
  line-height: var(--theme-button-font-body-large-line-height, var(--font-body-large-line-height, 1.5em));
1502
1483
  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
1484
  }
1506
1485
 
1507
1486
  .button.button-fill-outlined {
@@ -3569,3 +3548,19 @@ figure.chip {
3569
3548
  }
3570
3549
 
3571
3550
  /* TODO(table): 스타일을 SOT 토큰 값으로 정의한다. */
3551
+ :root {
3552
+ --divider-width: 1px;
3553
+ --divider-height: 12px;
3554
+ --divider-color: var(--color-border-standard-cool-gray, #e4e5e7);
3555
+ --divider-margin: var(--spacing-gap-4, 8px);
3556
+ }
3557
+
3558
+ .divider {
3559
+ width: var(--divider-width);
3560
+ height: var(--divider-height);
3561
+ background-color: var(--divider-color);
3562
+ margin: 0 var(--divider-margin);
3563
+ vertical-align: middle;
3564
+ align-self: center;
3565
+ font-size: 0;
3566
+ }
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.10",
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
 
package/src/components/divider/index.scss ADDED
@@ -0,0 +1 @@
1
+ @use "./styles/divider.scss";
package/src/components/divider/index.tsx ADDED
@@ -0,0 +1,5 @@
1
+ import "./index.scss";
2
+
3
+ import { Divider } from "./markup";
4
+
5
+ export { Divider };
package/src/components/divider/markup/Divider.tsx ADDED
@@ -0,0 +1,11 @@
1
+ import clsx from "clsx";
2
+
3
+ export function Divider({
4
+ className,
5
+ direction = "vertical",
6
+ }: {
7
+ className?: string;
8
+ direction?: "horizontal" | "vertical";
9
+ }) {
10
+ return <div className={clsx("divider", direction, className)}></div>;
11
+ }
package/src/components/divider/markup/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { Divider } from "./Divider";
package/src/components/divider/styles/divider.scss ADDED
@@ -0,0 +1,15 @@
1
+ :root {
2
+ --divider-width: 1px;
3
+ --divider-height: 12px;
4
+ --divider-color: var(--color-border-standard-cool-gray, #e4e5e7);
5
+ --divider-margin: var(--spacing-gap-4, 8px);
6
+ }
7
+ .divider {
8
+ width: var(--divider-width);
9
+ height: var(--divider-height);
10
+ background-color: var(--divider-color);
11
+ margin: 0 var(--divider-margin);
12
+ vertical-align: middle;
13
+ align-self: center;
14
+ font-size: 0;
15
+ }
package/src/index.scss CHANGED
@@ -22,3 +22,4 @@
22
22
  @use "./components/spinner";
23
23
  @use "./components/tab";
24
24
  @use "./components/table";
25
+ @use "./components/divider";
package/src/index.tsx CHANGED
@@ -24,3 +24,4 @@ export * from "./components/badge";
24
24
  export * from "./components/spinner";
25
25
  export * from "./components/alternate";
26
26
  export * from "./components/segmented-control";
27
+ export * from "./components/divider";