@nationaldesignstudio/react 0.0.16 → 0.0.19

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 (33) hide show
  1. package/dist/component-registry.md +181 -29
  2. package/dist/components/atoms/background/background.d.ts +135 -0
  3. package/dist/components/atoms/button/button.d.ts +64 -82
  4. package/dist/components/atoms/button/icon-button.d.ts +100 -66
  5. package/dist/components/organisms/card/card.d.ts +130 -4
  6. package/dist/components/organisms/us-gov-banner/us-gov-banner.d.ts +120 -2
  7. package/dist/components/sections/hero/hero.d.ts +166 -150
  8. package/dist/components/sections/quote-block/quote-block.d.ts +152 -0
  9. package/dist/index.d.ts +6 -2
  10. package/dist/index.js +3868 -5978
  11. package/dist/index.js.map +1 -1
  12. package/dist/lib/utils.d.ts +1 -2
  13. package/dist/tokens.css +336 -145
  14. package/package.json +2 -4
  15. package/src/components/atoms/background/background.tsx +377 -0
  16. package/src/components/atoms/background/index.ts +22 -0
  17. package/src/components/atoms/button/button.stories.tsx +81 -32
  18. package/src/components/atoms/button/button.tsx +91 -49
  19. package/src/components/atoms/button/icon-button.stories.tsx +179 -28
  20. package/src/components/atoms/button/icon-button.tsx +111 -49
  21. package/src/components/organisms/card/card.tsx +82 -24
  22. package/src/components/organisms/card/index.ts +7 -0
  23. package/src/components/organisms/us-gov-banner/index.ts +5 -1
  24. package/src/components/organisms/us-gov-banner/us-gov-banner.tsx +72 -16
  25. package/src/components/sections/hero/hero.stories.tsx +124 -1
  26. package/src/components/sections/hero/hero.test.tsx +21 -18
  27. package/src/components/sections/hero/hero.tsx +188 -301
  28. package/src/components/sections/hero/index.ts +13 -0
  29. package/src/components/sections/quote-block/index.ts +5 -0
  30. package/src/components/sections/quote-block/quote-block.tsx +216 -0
  31. package/src/index.ts +40 -0
  32. package/src/lib/utils.ts +1 -6
  33. package/src/stories/ThemeProvider.stories.tsx +5 -5
package/dist/tokens.css CHANGED
@@ -294,7 +294,12 @@
294
294
  --color-yellow-v200: color(srgb 1 1 0.3294);
295
295
  --color-yellow-v300: color(srgb 0.9882 0.9216 0.3059);
296
296
  --color-yellow-v400: color(srgb 0.9765 0.8431 0.2863);
297
+ --font-cormorant: Cormorant, serif;
298
+ --font-gloock: Gloock, serif;
297
299
  --font-pp-neue-montreal: "PP Neue Montreal";
300
+ --font-sans: "PP Neue Montreal";
301
+ --font-serif-alt: Cormorant, serif;
302
+ --font-serif: Gloock, serif;
298
303
  --font-weight-medium: 500;
299
304
  --font-weight-regular: 400;
300
305
  --font-weight-semibold: 600;
@@ -601,6 +606,18 @@
601
606
  --spatial-grid-small-columns: 4;
602
607
  --spatial-grid-small-gutter: 12px;
603
608
  --spatial-grid-small-margin: 24px;
609
+ --spatial-layout-medium-large-span: 8;
610
+ --spatial-layout-medium-large-start: 3;
611
+ --spatial-layout-medium-medium-span: 10;
612
+ --spatial-layout-medium-medium-start: 2;
613
+ --spatial-layout-narrow-large-span: 8;
614
+ --spatial-layout-narrow-large-start: 3;
615
+ --spatial-layout-narrow-medium-span: 8;
616
+ --spatial-layout-narrow-medium-start: 3;
617
+ --spatial-layout-wide-large-span: 10;
618
+ --spatial-layout-wide-large-start: 2;
619
+ --spatial-layout-wide-medium-span: 12;
620
+ --spatial-layout-wide-medium-start: 1;
604
621
  --spatial-section-large-gap: 64px;
605
622
  --spatial-section-large-padding: 128px;
606
623
  --spatial-section-medium-gap: 56px;
@@ -957,7 +974,12 @@
957
974
  --color-yellow-v200: var(--color-yellow-v200);
958
975
  --color-yellow-v300: var(--color-yellow-v300);
959
976
  --color-yellow-v400: var(--color-yellow-v400);
977
+ --font-cormorant: var(--font-cormorant);
978
+ --font-gloock: var(--font-gloock);
960
979
  --font-pp-neue-montreal: var(--font-pp-neue-montreal);
980
+ --font-sans: var(--font-sans);
981
+ --font-serif-alt: var(--font-serif-alt);
982
+ --font-serif: var(--font-serif);
961
983
  --font-weight-medium: var(--font-weight-medium);
962
984
  --font-weight-regular: var(--font-weight-regular);
963
985
  --font-weight-semibold: var(--font-weight-semibold);
@@ -995,6 +1017,9 @@
995
1017
  --leading-88: var(--leading-88);
996
1018
  --leading-96: var(--leading-96);
997
1019
  --leading-9: var(--leading-9);
1020
+ --max-width-desktop: 1440px;
1021
+ --max-width-mobile: 320px;
1022
+ --max-width-tablet: 768px;
998
1023
  --radius-0: var(--radius-0);
999
1024
  --radius-10: var(--radius-10);
1000
1025
  --radius-12: var(--radius-12);
@@ -1264,6 +1289,18 @@
1264
1289
  --spatial-grid-small-columns: var(--spatial-grid-small-columns);
1265
1290
  --spatial-grid-small-gutter: var(--spatial-grid-small-gutter);
1266
1291
  --spatial-grid-small-margin: var(--spatial-grid-small-margin);
1292
+ --spatial-layout-medium-large-span: var(--spatial-layout-medium-large-span);
1293
+ --spatial-layout-medium-large-start: var(--spatial-layout-medium-large-start);
1294
+ --spatial-layout-medium-medium-span: var(--spatial-layout-medium-medium-span);
1295
+ --spatial-layout-medium-medium-start: var(--spatial-layout-medium-medium-start);
1296
+ --spatial-layout-narrow-large-span: var(--spatial-layout-narrow-large-span);
1297
+ --spatial-layout-narrow-large-start: var(--spatial-layout-narrow-large-start);
1298
+ --spatial-layout-narrow-medium-span: var(--spatial-layout-narrow-medium-span);
1299
+ --spatial-layout-narrow-medium-start: var(--spatial-layout-narrow-medium-start);
1300
+ --spatial-layout-wide-large-span: var(--spatial-layout-wide-large-span);
1301
+ --spatial-layout-wide-large-start: var(--spatial-layout-wide-large-start);
1302
+ --spatial-layout-wide-medium-span: var(--spatial-layout-wide-medium-span);
1303
+ --spatial-layout-wide-medium-start: var(--spatial-layout-wide-medium-start);
1267
1304
  --spatial-section-large-gap: var(--spatial-section-large-gap);
1268
1305
  --spatial-section-large-padding: var(--spatial-section-large-padding);
1269
1306
  --spatial-section-medium-gap: var(--spatial-section-medium-gap);
@@ -1411,26 +1448,26 @@
1411
1448
 
1412
1449
  :root {
1413
1450
  /* Semantic Color Tokens */
1414
- --color-accent-brand-soft: color(srgb 0.9686 0.8078 0.749);
1415
- --color-accent-brand: color(srgb 0.9216 0.3098 0.1529);
1416
- --color-bg-muted: color(srgb 1 1 1);
1417
- --color-bg-page: color(srgb 0.9804 0.9804 0.9804);
1418
- --color-bg-section: color(srgb 0.9608 0.9608 0.9608);
1419
- --color-border-divider: color(srgb 0 0 0 / 0.1);
1420
- --color-border-focus: color(srgb 0.9216 0.3098 0.1529);
1421
- --color-border-strong: color(srgb 0 0 0 / 0.2);
1422
- --color-border-subtle: color(srgb 0 0 0 / 0.1);
1423
- --color-button-primary-bg-hover: color(srgb 0.4588 0.4588 0.4588);
1424
- --color-button-primary-bg: color(srgb 0.0784 0.0784 0.0784);
1451
+ --color-accent-brand-soft: color(srgb 0.7686 0.6588 0.4392);
1452
+ --color-accent-brand: color(srgb 0.651 0.5451 0.3686);
1453
+ --color-bg-muted: color(srgb 0.9961 0.9922 0.9765);
1454
+ --color-bg-page: color(srgb 0.9961 0.9922 0.9765);
1455
+ --color-bg-section: color(srgb 0.9608 0.9569 0.9373);
1456
+ --color-border-divider: color(srgb 0.149 0.1569 0.2941 / 0.1);
1457
+ --color-border-focus: color(srgb 0.651 0.5451 0.3686);
1458
+ --color-border-strong: color(srgb 0.149 0.1569 0.2941 / 0.2);
1459
+ --color-border-subtle: color(srgb 0.149 0.1569 0.2941 / 0.1);
1460
+ --color-button-primary-bg-hover: color(srgb 0.149 0.1569 0.2941);
1461
+ --color-button-primary-bg: color(srgb 0.0667 0.0745 0.149);
1425
1462
  --color-button-secondary-bg-hover: color(srgb 1 1 1);
1426
1463
  --color-button-secondary-bg: color(srgb 1 1 1);
1427
- --color-card-background: color(srgb 1 1 1);
1428
- --color-text-inverted: color(srgb 0.9608 0.9608 0.9608);
1464
+ --color-card-background: color(srgb 0.5412 0.4353 0.2588);
1465
+ --color-text-inverted: color(srgb 0.9961 0.9922 0.9765);
1429
1466
  --color-text-link-hover: color(srgb 0.3804 0.3804 0.3804);
1430
1467
  --color-text-link: color(srgb 0.0784 0.0784 0.0784);
1431
- --color-text-muted: color(srgb 0.4588 0.4588 0.4588);
1432
- --color-text-primary: color(srgb 0.0784 0.0784 0.0784);
1433
- --color-text-secondary: color(srgb 0.2588 0.2588 0.2588);
1468
+ --color-text-muted: color(srgb 0.651 0.5451 0.3686);
1469
+ --color-text-primary: color(srgb 0.0667 0.0745 0.149);
1470
+ --color-text-secondary: color(srgb 0.0667 0.0745 0.149);
1434
1471
  --radius-surface-button: var(--radius-6);
1435
1472
  --radius-surface-card: var(--radius-4);
1436
1473
  --surface-button-stroke: 1px;
@@ -1466,7 +1503,103 @@
1466
1503
  }
1467
1504
 
1468
1505
 
1469
- @utility typography-typography-large-body-large {
1506
+ @utility typography-bop-body-large {
1507
+ font-family: var(--font-cormorant);
1508
+ font-size: 28px;
1509
+ font-weight: var(--font-weight-medium);
1510
+ line-height: 1.4;
1511
+ letter-spacing: 0;
1512
+ }
1513
+
1514
+ @utility typography-bop-body-medium {
1515
+ font-family: var(--font-cormorant);
1516
+ font-size: 18px;
1517
+ font-weight: var(--font-weight-regular);
1518
+ line-height: 1.5;
1519
+ letter-spacing: 0;
1520
+ }
1521
+
1522
+ @utility typography-bop-body-small {
1523
+ font-family: var(--font-cormorant);
1524
+ font-size: 16px;
1525
+ font-weight: var(--font-weight-regular);
1526
+ line-height: 1.5;
1527
+ letter-spacing: 0;
1528
+ }
1529
+
1530
+ @utility typography-bop-display-hero {
1531
+ font-family: var(--font-gloock);
1532
+ font-size: 12.5vw;
1533
+ font-weight: var(--font-weight-regular);
1534
+ line-height: 1.1;
1535
+ letter-spacing: -0.03em;
1536
+ }
1537
+
1538
+ @utility typography-bop-display-large {
1539
+ font-family: var(--font-gloock);
1540
+ font-size: 8vw;
1541
+ font-weight: var(--font-weight-regular);
1542
+ line-height: 1.1;
1543
+ letter-spacing: -0.025em;
1544
+ }
1545
+
1546
+ @utility typography-bop-display-medium {
1547
+ font-family: var(--font-gloock);
1548
+ font-size: 5vw;
1549
+ font-weight: var(--font-weight-regular);
1550
+ line-height: 1.2;
1551
+ letter-spacing: -0.02em;
1552
+ }
1553
+
1554
+ @utility typography-bop-headline-large {
1555
+ font-family: var(--font-cormorant);
1556
+ font-size: 48px;
1557
+ font-weight: var(--font-weight-medium);
1558
+ line-height: 1.2;
1559
+ letter-spacing: -1px;
1560
+ }
1561
+
1562
+ @utility typography-bop-headline-medium {
1563
+ font-family: var(--font-cormorant);
1564
+ font-size: 32px;
1565
+ font-weight: var(--font-weight-medium);
1566
+ line-height: 0.95;
1567
+ letter-spacing: -1px;
1568
+ }
1569
+
1570
+ @utility typography-bop-headline-small {
1571
+ font-family: var(--font-cormorant);
1572
+ font-size: 24px;
1573
+ font-weight: var(--font-weight-medium);
1574
+ line-height: 1.2;
1575
+ letter-spacing: -0.5px;
1576
+ }
1577
+
1578
+ @utility typography-bop-ui-button {
1579
+ font-family: var(--font-pp-neue-montreal);
1580
+ font-size: 16px;
1581
+ font-weight: var(--font-weight-medium);
1582
+ line-height: 1;
1583
+ letter-spacing: 0.5px;
1584
+ }
1585
+
1586
+ @utility typography-bop-ui-caption {
1587
+ font-family: var(--font-pp-neue-montreal);
1588
+ font-size: 14px;
1589
+ font-weight: var(--font-weight-regular);
1590
+ line-height: 1.4;
1591
+ letter-spacing: 0;
1592
+ }
1593
+
1594
+ @utility typography-bop-ui-nav {
1595
+ font-family: var(--font-pp-neue-montreal);
1596
+ font-size: 13px;
1597
+ font-weight: var(--font-weight-medium);
1598
+ line-height: 0.95;
1599
+ letter-spacing: 0;
1600
+ }
1601
+
1602
+ @utility typography-large-body-large {
1470
1603
  font-family: var(--font-pp-neue-montreal);
1471
1604
  font-size: var(--text-21);
1472
1605
  font-weight: var(--font-weight-regular);
@@ -1474,7 +1607,7 @@
1474
1607
  letter-spacing: var(--tracking-21);
1475
1608
  }
1476
1609
 
1477
- @utility typography-typography-large-body-medium {
1610
+ @utility typography-large-body-medium {
1478
1611
  font-family: var(--font-pp-neue-montreal);
1479
1612
  font-size: var(--text-18);
1480
1613
  font-weight: var(--font-weight-regular);
@@ -1482,7 +1615,7 @@
1482
1615
  letter-spacing: var(--tracking-18);
1483
1616
  }
1484
1617
 
1485
- @utility typography-typography-large-body-small {
1618
+ @utility typography-large-body-small {
1486
1619
  font-family: var(--font-pp-neue-montreal);
1487
1620
  font-size: var(--text-16);
1488
1621
  font-weight: var(--font-weight-regular);
@@ -1490,7 +1623,7 @@
1490
1623
  letter-spacing: var(--tracking-16);
1491
1624
  }
1492
1625
 
1493
- @utility typography-typography-large-button-large {
1626
+ @utility typography-large-button-large {
1494
1627
  font-family: var(--font-pp-neue-montreal);
1495
1628
  font-size: var(--text-18);
1496
1629
  font-weight: var(--font-weight-medium);
@@ -1498,7 +1631,7 @@
1498
1631
  letter-spacing: var(--tracking-button);
1499
1632
  }
1500
1633
 
1501
- @utility typography-typography-large-button-medium {
1634
+ @utility typography-large-button-medium {
1502
1635
  font-family: var(--font-pp-neue-montreal);
1503
1636
  font-size: var(--text-16);
1504
1637
  font-weight: var(--font-weight-medium);
@@ -1506,7 +1639,7 @@
1506
1639
  letter-spacing: var(--tracking-button);
1507
1640
  }
1508
1641
 
1509
- @utility typography-typography-large-button-small {
1642
+ @utility typography-large-button-small {
1510
1643
  font-family: var(--font-pp-neue-montreal);
1511
1644
  font-size: var(--text-14);
1512
1645
  font-weight: var(--font-weight-medium);
@@ -1514,7 +1647,7 @@
1514
1647
  letter-spacing: var(--tracking-button);
1515
1648
  }
1516
1649
 
1517
- @utility typography-typography-large-button-xl {
1650
+ @utility typography-large-button-xl {
1518
1651
  font-family: var(--font-pp-neue-montreal);
1519
1652
  font-size: var(--text-24);
1520
1653
  font-weight: var(--font-weight-medium);
@@ -1522,7 +1655,7 @@
1522
1655
  letter-spacing: var(--tracking-button);
1523
1656
  }
1524
1657
 
1525
- @utility typography-typography-large-caption-large {
1658
+ @utility typography-large-caption-large {
1526
1659
  font-family: var(--font-pp-neue-montreal);
1527
1660
  font-size: var(--text-14);
1528
1661
  font-weight: var(--font-weight-regular);
@@ -1530,7 +1663,7 @@
1530
1663
  letter-spacing: var(--tracking-14);
1531
1664
  }
1532
1665
 
1533
- @utility typography-typography-large-caption-small {
1666
+ @utility typography-large-caption-small {
1534
1667
  font-family: var(--font-pp-neue-montreal);
1535
1668
  font-size: var(--text-12);
1536
1669
  font-weight: var(--font-weight-regular);
@@ -1538,7 +1671,7 @@
1538
1671
  letter-spacing: var(--tracking-12);
1539
1672
  }
1540
1673
 
1541
- @utility typography-typography-large-display-hero {
1674
+ @utility typography-large-display-hero {
1542
1675
  font-family: var(--font-pp-neue-montreal);
1543
1676
  font-size: var(--text-280);
1544
1677
  font-weight: var(--font-weight-medium);
@@ -1546,7 +1679,7 @@
1546
1679
  letter-spacing: var(--tracking-280);
1547
1680
  }
1548
1681
 
1549
- @utility typography-typography-large-display-hero-regular {
1682
+ @utility typography-large-display-hero-regular {
1550
1683
  font-family: var(--font-pp-neue-montreal);
1551
1684
  font-size: var(--text-280);
1552
1685
  font-weight: var(--font-weight-regular);
@@ -1554,7 +1687,7 @@
1554
1687
  letter-spacing: var(--tracking-280);
1555
1688
  }
1556
1689
 
1557
- @utility typography-typography-large-display-hero-semibold {
1690
+ @utility typography-large-display-hero-semibold {
1558
1691
  font-family: var(--font-pp-neue-montreal);
1559
1692
  font-size: var(--text-280);
1560
1693
  font-weight: var(--font-weight-semibold);
@@ -1562,7 +1695,7 @@
1562
1695
  letter-spacing: var(--tracking-280);
1563
1696
  }
1564
1697
 
1565
- @utility typography-typography-large-display-large {
1698
+ @utility typography-large-display-large {
1566
1699
  font-family: var(--font-pp-neue-montreal);
1567
1700
  font-size: var(--text-192);
1568
1701
  font-weight: var(--font-weight-medium);
@@ -1570,7 +1703,7 @@
1570
1703
  letter-spacing: var(--tracking-192);
1571
1704
  }
1572
1705
 
1573
- @utility typography-typography-large-display-medium {
1706
+ @utility typography-large-display-medium {
1574
1707
  font-family: var(--font-pp-neue-montreal);
1575
1708
  font-size: var(--text-168);
1576
1709
  font-weight: var(--font-weight-medium);
@@ -1578,7 +1711,7 @@
1578
1711
  letter-spacing: var(--tracking-168);
1579
1712
  }
1580
1713
 
1581
- @utility typography-typography-large-display-small {
1714
+ @utility typography-large-display-small {
1582
1715
  font-family: var(--font-pp-neue-montreal);
1583
1716
  font-size: var(--text-148);
1584
1717
  font-weight: var(--font-weight-medium);
@@ -1586,7 +1719,7 @@
1586
1719
  letter-spacing: var(--tracking-148);
1587
1720
  }
1588
1721
 
1589
- @utility typography-typography-large-display-xl {
1722
+ @utility typography-large-display-xl {
1590
1723
  font-family: var(--font-pp-neue-montreal);
1591
1724
  font-size: var(--text-224);
1592
1725
  font-weight: var(--font-weight-medium);
@@ -1594,7 +1727,7 @@
1594
1727
  letter-spacing: var(--tracking-224);
1595
1728
  }
1596
1729
 
1597
- @utility typography-typography-large-display-xl-regular {
1730
+ @utility typography-large-display-xl-regular {
1598
1731
  font-family: var(--font-pp-neue-montreal);
1599
1732
  font-size: var(--text-224);
1600
1733
  font-weight: var(--font-weight-regular);
@@ -1602,7 +1735,7 @@
1602
1735
  letter-spacing: var(--tracking-224);
1603
1736
  }
1604
1737
 
1605
- @utility typography-typography-large-display-xl-semibold {
1738
+ @utility typography-large-display-xl-semibold {
1606
1739
  font-family: var(--font-pp-neue-montreal);
1607
1740
  font-size: var(--text-224);
1608
1741
  font-weight: var(--font-weight-semibold);
@@ -1610,7 +1743,7 @@
1610
1743
  letter-spacing: var(--tracking-224);
1611
1744
  }
1612
1745
 
1613
- @utility typography-typography-large-headline-large {
1746
+ @utility typography-large-headline-large {
1614
1747
  font-family: var(--font-pp-neue-montreal);
1615
1748
  font-size: var(--text-96);
1616
1749
  font-weight: var(--font-weight-medium);
@@ -1618,7 +1751,7 @@
1618
1751
  letter-spacing: var(--tracking-96);
1619
1752
  }
1620
1753
 
1621
- @utility typography-typography-large-headline-large-regular {
1754
+ @utility typography-large-headline-large-regular {
1622
1755
  font-family: var(--font-pp-neue-montreal);
1623
1756
  font-size: var(--text-96);
1624
1757
  font-weight: var(--font-weight-regular);
@@ -1626,7 +1759,7 @@
1626
1759
  letter-spacing: var(--tracking-96);
1627
1760
  }
1628
1761
 
1629
- @utility typography-typography-large-headline-large-semibold {
1762
+ @utility typography-large-headline-large-semibold {
1630
1763
  font-family: var(--font-pp-neue-montreal);
1631
1764
  font-size: var(--text-96);
1632
1765
  font-weight: var(--font-weight-semibold);
@@ -1634,7 +1767,7 @@
1634
1767
  letter-spacing: var(--tracking-96);
1635
1768
  }
1636
1769
 
1637
- @utility typography-typography-large-headline-medium {
1770
+ @utility typography-large-headline-medium {
1638
1771
  font-family: var(--font-pp-neue-montreal);
1639
1772
  font-size: var(--text-72);
1640
1773
  font-weight: var(--font-weight-medium);
@@ -1642,7 +1775,7 @@
1642
1775
  letter-spacing: var(--tracking-72);
1643
1776
  }
1644
1777
 
1645
- @utility typography-typography-large-headline-medium-regular {
1778
+ @utility typography-large-headline-medium-regular {
1646
1779
  font-family: var(--font-pp-neue-montreal);
1647
1780
  font-size: var(--text-72);
1648
1781
  font-weight: var(--font-weight-regular);
@@ -1650,7 +1783,7 @@
1650
1783
  letter-spacing: var(--tracking-72);
1651
1784
  }
1652
1785
 
1653
- @utility typography-typography-large-headline-medium-semibold {
1786
+ @utility typography-large-headline-medium-semibold {
1654
1787
  font-family: var(--font-pp-neue-montreal);
1655
1788
  font-size: var(--text-72);
1656
1789
  font-weight: var(--font-weight-semibold);
@@ -1658,7 +1791,7 @@
1658
1791
  letter-spacing: var(--tracking-72);
1659
1792
  }
1660
1793
 
1661
- @utility typography-typography-large-headline-small {
1794
+ @utility typography-large-headline-small {
1662
1795
  font-family: var(--font-pp-neue-montreal);
1663
1796
  font-size: var(--text-56);
1664
1797
  font-weight: var(--font-weight-medium);
@@ -1666,7 +1799,7 @@
1666
1799
  letter-spacing: var(--tracking-56);
1667
1800
  }
1668
1801
 
1669
- @utility typography-typography-large-headline-xl {
1802
+ @utility typography-large-headline-xl {
1670
1803
  font-family: var(--font-pp-neue-montreal);
1671
1804
  font-size: var(--text-112);
1672
1805
  font-weight: var(--font-weight-medium);
@@ -1674,7 +1807,7 @@
1674
1807
  letter-spacing: var(--tracking-112);
1675
1808
  }
1676
1809
 
1677
- @utility typography-typography-large-headline-xl-regular {
1810
+ @utility typography-large-headline-xl-regular {
1678
1811
  font-family: var(--font-pp-neue-montreal);
1679
1812
  font-size: var(--text-112);
1680
1813
  font-weight: var(--font-weight-regular);
@@ -1682,7 +1815,7 @@
1682
1815
  letter-spacing: var(--tracking-112);
1683
1816
  }
1684
1817
 
1685
- @utility typography-typography-large-headline-xl-semibold {
1818
+ @utility typography-large-headline-xl-semibold {
1686
1819
  font-family: var(--font-pp-neue-montreal);
1687
1820
  font-size: var(--text-112);
1688
1821
  font-weight: var(--font-weight-semibold);
@@ -1690,7 +1823,7 @@
1690
1823
  letter-spacing: var(--tracking-112);
1691
1824
  }
1692
1825
 
1693
- @utility typography-typography-large-label-large {
1826
+ @utility typography-large-label-large {
1694
1827
  font-family: var(--font-pp-neue-montreal);
1695
1828
  font-size: var(--text-16);
1696
1829
  font-weight: var(--font-weight-medium);
@@ -1698,7 +1831,7 @@
1698
1831
  letter-spacing: var(--tracking-16);
1699
1832
  }
1700
1833
 
1701
- @utility typography-typography-large-label-medium {
1834
+ @utility typography-large-label-medium {
1702
1835
  font-family: var(--font-pp-neue-montreal);
1703
1836
  font-size: var(--text-14);
1704
1837
  font-weight: var(--font-weight-medium);
@@ -1706,7 +1839,7 @@
1706
1839
  letter-spacing: var(--tracking-14);
1707
1840
  }
1708
1841
 
1709
- @utility typography-typography-large-label-small {
1842
+ @utility typography-large-label-small {
1710
1843
  font-family: var(--font-pp-neue-montreal);
1711
1844
  font-size: var(--text-12);
1712
1845
  font-weight: var(--font-weight-medium);
@@ -1714,7 +1847,7 @@
1714
1847
  letter-spacing: var(--tracking-12);
1715
1848
  }
1716
1849
 
1717
- @utility typography-typography-large-link-large {
1850
+ @utility typography-large-link-large {
1718
1851
  font-family: var(--font-pp-neue-montreal);
1719
1852
  font-size: var(--text-18);
1720
1853
  font-weight: var(--font-weight-medium);
@@ -1722,7 +1855,7 @@
1722
1855
  letter-spacing: var(--tracking-18);
1723
1856
  }
1724
1857
 
1725
- @utility typography-typography-large-link-medium {
1858
+ @utility typography-large-link-medium {
1726
1859
  font-family: var(--font-pp-neue-montreal);
1727
1860
  font-size: var(--text-16);
1728
1861
  font-weight: var(--font-weight-medium);
@@ -1730,7 +1863,7 @@
1730
1863
  letter-spacing: var(--tracking-16);
1731
1864
  }
1732
1865
 
1733
- @utility typography-typography-large-link-small {
1866
+ @utility typography-large-link-small {
1734
1867
  font-family: var(--font-pp-neue-montreal);
1735
1868
  font-size: var(--text-14);
1736
1869
  font-weight: var(--font-weight-medium);
@@ -1738,7 +1871,7 @@
1738
1871
  letter-spacing: var(--tracking-14);
1739
1872
  }
1740
1873
 
1741
- @utility typography-typography-large-subheading-large {
1874
+ @utility typography-large-subheading-large {
1742
1875
  font-family: var(--font-pp-neue-montreal);
1743
1876
  font-size: var(--text-42);
1744
1877
  font-weight: var(--font-weight-medium);
@@ -1746,7 +1879,7 @@
1746
1879
  letter-spacing: var(--tracking-42);
1747
1880
  }
1748
1881
 
1749
- @utility typography-typography-large-subheading-large-semibold {
1882
+ @utility typography-large-subheading-large-semibold {
1750
1883
  font-family: var(--font-pp-neue-montreal);
1751
1884
  font-size: var(--text-42);
1752
1885
  font-weight: var(--font-weight-semibold);
@@ -1754,7 +1887,7 @@
1754
1887
  letter-spacing: var(--tracking-42);
1755
1888
  }
1756
1889
 
1757
- @utility typography-typography-large-subheading-medium {
1890
+ @utility typography-large-subheading-medium {
1758
1891
  font-family: var(--font-pp-neue-montreal);
1759
1892
  font-size: var(--text-32);
1760
1893
  font-weight: var(--font-weight-medium);
@@ -1762,7 +1895,7 @@
1762
1895
  letter-spacing: var(--tracking-32);
1763
1896
  }
1764
1897
 
1765
- @utility typography-typography-large-subheading-medium-semibold {
1898
+ @utility typography-large-subheading-medium-semibold {
1766
1899
  font-family: var(--font-pp-neue-montreal);
1767
1900
  font-size: var(--text-32);
1768
1901
  font-weight: var(--font-weight-semibold);
@@ -1770,7 +1903,7 @@
1770
1903
  letter-spacing: var(--tracking-32);
1771
1904
  }
1772
1905
 
1773
- @utility typography-typography-large-subheading-small {
1906
+ @utility typography-large-subheading-small {
1774
1907
  font-family: var(--font-pp-neue-montreal);
1775
1908
  font-size: var(--text-24);
1776
1909
  font-weight: var(--font-weight-medium);
@@ -1778,7 +1911,7 @@
1778
1911
  letter-spacing: var(--tracking-24);
1779
1912
  }
1780
1913
 
1781
- @utility typography-typography-large-subheading-small-semibold {
1914
+ @utility typography-large-subheading-small-semibold {
1782
1915
  font-family: var(--font-pp-neue-montreal);
1783
1916
  font-size: var(--text-24);
1784
1917
  font-weight: var(--font-weight-semibold);
@@ -1786,7 +1919,7 @@
1786
1919
  letter-spacing: var(--tracking-24);
1787
1920
  }
1788
1921
 
1789
- @utility typography-typography-large-subheading-xs {
1922
+ @utility typography-large-subheading-xs {
1790
1923
  font-family: var(--font-pp-neue-montreal);
1791
1924
  font-size: var(--text-18);
1792
1925
  font-weight: var(--font-weight-medium);
@@ -1794,7 +1927,7 @@
1794
1927
  letter-spacing: var(--tracking-18);
1795
1928
  }
1796
1929
 
1797
- @utility typography-typography-large-subheading-xs-semibold {
1930
+ @utility typography-large-subheading-xs-semibold {
1798
1931
  font-family: var(--font-pp-neue-montreal);
1799
1932
  font-size: var(--text-18);
1800
1933
  font-weight: var(--font-weight-semibold);
@@ -1802,7 +1935,7 @@
1802
1935
  letter-spacing: var(--tracking-18);
1803
1936
  }
1804
1937
 
1805
- @utility typography-typography-large-subheading-xss {
1938
+ @utility typography-large-subheading-xss {
1806
1939
  font-family: var(--font-pp-neue-montreal);
1807
1940
  font-size: var(--text-16);
1808
1941
  font-weight: var(--font-weight-medium);
@@ -1810,7 +1943,7 @@
1810
1943
  letter-spacing: var(--tracking-16);
1811
1944
  }
1812
1945
 
1813
- @utility typography-typography-large-subheading-xss-semibold {
1946
+ @utility typography-large-subheading-xss-semibold {
1814
1947
  font-family: var(--font-pp-neue-montreal);
1815
1948
  font-size: var(--text-16);
1816
1949
  font-weight: var(--font-weight-semibold);
@@ -1818,7 +1951,7 @@
1818
1951
  letter-spacing: var(--tracking-16);
1819
1952
  }
1820
1953
 
1821
- @utility typography-typography-medium-body-large {
1954
+ @utility typography-medium-body-large {
1822
1955
  font-family: var(--font-pp-neue-montreal);
1823
1956
  font-size: var(--text-18);
1824
1957
  font-weight: var(--font-weight-regular);
@@ -1826,7 +1959,7 @@
1826
1959
  letter-spacing: var(--tracking-18);
1827
1960
  }
1828
1961
 
1829
- @utility typography-typography-medium-body-medium {
1962
+ @utility typography-medium-body-medium {
1830
1963
  font-family: var(--font-pp-neue-montreal);
1831
1964
  font-size: var(--text-16);
1832
1965
  font-weight: var(--font-weight-regular);
@@ -1834,7 +1967,7 @@
1834
1967
  letter-spacing: var(--tracking-16);
1835
1968
  }
1836
1969
 
1837
- @utility typography-typography-medium-body-small {
1970
+ @utility typography-medium-body-small {
1838
1971
  font-family: var(--font-pp-neue-montreal);
1839
1972
  font-size: var(--text-14);
1840
1973
  font-weight: var(--font-weight-regular);
@@ -1842,7 +1975,7 @@
1842
1975
  letter-spacing: var(--tracking-14);
1843
1976
  }
1844
1977
 
1845
- @utility typography-typography-medium-button-large {
1978
+ @utility typography-medium-button-large {
1846
1979
  font-family: var(--font-pp-neue-montreal);
1847
1980
  font-size: var(--text-18);
1848
1981
  font-weight: var(--font-weight-medium);
@@ -1850,7 +1983,7 @@
1850
1983
  letter-spacing: var(--tracking-button);
1851
1984
  }
1852
1985
 
1853
- @utility typography-typography-medium-button-medium {
1986
+ @utility typography-medium-button-medium {
1854
1987
  font-family: var(--font-pp-neue-montreal);
1855
1988
  font-size: var(--text-16);
1856
1989
  font-weight: var(--font-weight-medium);
@@ -1858,7 +1991,7 @@
1858
1991
  letter-spacing: var(--tracking-button);
1859
1992
  }
1860
1993
 
1861
- @utility typography-typography-medium-button-small {
1994
+ @utility typography-medium-button-small {
1862
1995
  font-family: var(--font-pp-neue-montreal);
1863
1996
  font-size: var(--text-14);
1864
1997
  font-weight: var(--font-weight-medium);
@@ -1866,7 +1999,7 @@
1866
1999
  letter-spacing: var(--tracking-button);
1867
2000
  }
1868
2001
 
1869
- @utility typography-typography-medium-caption-large {
2002
+ @utility typography-medium-caption-large {
1870
2003
  font-family: var(--font-pp-neue-montreal);
1871
2004
  font-size: var(--text-14);
1872
2005
  font-weight: var(--font-weight-regular);
@@ -1874,7 +2007,7 @@
1874
2007
  letter-spacing: var(--tracking-14);
1875
2008
  }
1876
2009
 
1877
- @utility typography-typography-medium-caption-small {
2010
+ @utility typography-medium-caption-small {
1878
2011
  font-family: var(--font-pp-neue-montreal);
1879
2012
  font-size: var(--text-12);
1880
2013
  font-weight: var(--font-weight-regular);
@@ -1882,7 +2015,7 @@
1882
2015
  letter-spacing: var(--tracking-12);
1883
2016
  }
1884
2017
 
1885
- @utility typography-typography-medium-display-hero {
2018
+ @utility typography-medium-display-hero {
1886
2019
  font-family: var(--font-pp-neue-montreal);
1887
2020
  font-size: var(--text-192);
1888
2021
  font-weight: var(--font-weight-medium);
@@ -1890,7 +2023,7 @@
1890
2023
  letter-spacing: var(--tracking-192);
1891
2024
  }
1892
2025
 
1893
- @utility typography-typography-medium-display-hero-regular {
2026
+ @utility typography-medium-display-hero-regular {
1894
2027
  font-family: var(--font-pp-neue-montreal);
1895
2028
  font-size: var(--text-192);
1896
2029
  font-weight: var(--font-weight-regular);
@@ -1898,7 +2031,7 @@
1898
2031
  letter-spacing: var(--tracking-192);
1899
2032
  }
1900
2033
 
1901
- @utility typography-typography-medium-display-hero-semibold {
2034
+ @utility typography-medium-display-hero-semibold {
1902
2035
  font-family: var(--font-pp-neue-montreal);
1903
2036
  font-size: var(--text-192);
1904
2037
  font-weight: var(--font-weight-semibold);
@@ -1906,7 +2039,7 @@
1906
2039
  letter-spacing: var(--tracking-192);
1907
2040
  }
1908
2041
 
1909
- @utility typography-typography-medium-display-large {
2042
+ @utility typography-medium-display-large {
1910
2043
  font-family: var(--font-pp-neue-montreal);
1911
2044
  font-size: var(--text-148);
1912
2045
  font-weight: var(--font-weight-medium);
@@ -1914,7 +2047,7 @@
1914
2047
  letter-spacing: var(--tracking-148);
1915
2048
  }
1916
2049
 
1917
- @utility typography-typography-medium-display-medium {
2050
+ @utility typography-medium-display-medium {
1918
2051
  font-family: var(--font-pp-neue-montreal);
1919
2052
  font-size: var(--text-128);
1920
2053
  font-weight: var(--font-weight-medium);
@@ -1922,7 +2055,7 @@
1922
2055
  letter-spacing: var(--tracking-128);
1923
2056
  }
1924
2057
 
1925
- @utility typography-typography-medium-display-small {
2058
+ @utility typography-medium-display-small {
1926
2059
  font-family: var(--font-pp-neue-montreal);
1927
2060
  font-size: var(--text-112);
1928
2061
  font-weight: var(--font-weight-medium);
@@ -1930,7 +2063,7 @@
1930
2063
  letter-spacing: var(--tracking-112);
1931
2064
  }
1932
2065
 
1933
- @utility typography-typography-medium-display-xl {
2066
+ @utility typography-medium-display-xl {
1934
2067
  font-family: var(--font-pp-neue-montreal);
1935
2068
  font-size: var(--text-168);
1936
2069
  font-weight: var(--font-weight-medium);
@@ -1938,7 +2071,7 @@
1938
2071
  letter-spacing: var(--tracking-168);
1939
2072
  }
1940
2073
 
1941
- @utility typography-typography-medium-display-xl-regular {
2074
+ @utility typography-medium-display-xl-regular {
1942
2075
  font-family: var(--font-pp-neue-montreal);
1943
2076
  font-size: var(--text-168);
1944
2077
  font-weight: var(--font-weight-regular);
@@ -1946,7 +2079,7 @@
1946
2079
  letter-spacing: var(--tracking-168);
1947
2080
  }
1948
2081
 
1949
- @utility typography-typography-medium-display-xl-semibold {
2082
+ @utility typography-medium-display-xl-semibold {
1950
2083
  font-family: var(--font-pp-neue-montreal);
1951
2084
  font-size: var(--text-168);
1952
2085
  font-weight: var(--font-weight-semibold);
@@ -1954,7 +2087,7 @@
1954
2087
  letter-spacing: var(--tracking-168);
1955
2088
  }
1956
2089
 
1957
- @utility typography-typography-medium-headline-large {
2090
+ @utility typography-medium-headline-large {
1958
2091
  font-family: var(--font-pp-neue-montreal);
1959
2092
  font-size: var(--text-72);
1960
2093
  font-weight: var(--font-weight-medium);
@@ -1962,7 +2095,7 @@
1962
2095
  letter-spacing: var(--tracking-72);
1963
2096
  }
1964
2097
 
1965
- @utility typography-typography-medium-headline-large-regular {
2098
+ @utility typography-medium-headline-large-regular {
1966
2099
  font-family: var(--font-pp-neue-montreal);
1967
2100
  font-size: var(--text-72);
1968
2101
  font-weight: var(--font-weight-regular);
@@ -1970,7 +2103,7 @@
1970
2103
  letter-spacing: var(--tracking-72);
1971
2104
  }
1972
2105
 
1973
- @utility typography-typography-medium-headline-large-semibold {
2106
+ @utility typography-medium-headline-large-semibold {
1974
2107
  font-family: var(--font-pp-neue-montreal);
1975
2108
  font-size: var(--text-72);
1976
2109
  font-weight: var(--font-weight-semibold);
@@ -1978,7 +2111,7 @@
1978
2111
  letter-spacing: var(--tracking-72);
1979
2112
  }
1980
2113
 
1981
- @utility typography-typography-medium-headline-medium {
2114
+ @utility typography-medium-headline-medium {
1982
2115
  font-family: var(--font-pp-neue-montreal);
1983
2116
  font-size: var(--text-56);
1984
2117
  font-weight: var(--font-weight-medium);
@@ -1986,7 +2119,7 @@
1986
2119
  letter-spacing: var(--tracking-56);
1987
2120
  }
1988
2121
 
1989
- @utility typography-typography-medium-headline-medium-regular {
2122
+ @utility typography-medium-headline-medium-regular {
1990
2123
  font-family: var(--font-pp-neue-montreal);
1991
2124
  font-size: var(--text-56);
1992
2125
  font-weight: var(--font-weight-regular);
@@ -1994,7 +2127,7 @@
1994
2127
  letter-spacing: var(--tracking-56);
1995
2128
  }
1996
2129
 
1997
- @utility typography-typography-medium-headline-medium-semibold {
2130
+ @utility typography-medium-headline-medium-semibold {
1998
2131
  font-family: var(--font-pp-neue-montreal);
1999
2132
  font-size: var(--text-56);
2000
2133
  font-weight: var(--font-weight-semibold);
@@ -2002,7 +2135,7 @@
2002
2135
  letter-spacing: var(--tracking-56);
2003
2136
  }
2004
2137
 
2005
- @utility typography-typography-medium-headline-small {
2138
+ @utility typography-medium-headline-small {
2006
2139
  font-family: var(--font-pp-neue-montreal);
2007
2140
  font-size: var(--text-42);
2008
2141
  font-weight: var(--font-weight-medium);
@@ -2010,7 +2143,7 @@
2010
2143
  letter-spacing: var(--tracking-42);
2011
2144
  }
2012
2145
 
2013
- @utility typography-typography-medium-headline-xl {
2146
+ @utility typography-medium-headline-xl {
2014
2147
  font-family: var(--font-pp-neue-montreal);
2015
2148
  font-size: var(--text-84);
2016
2149
  font-weight: var(--font-weight-medium);
@@ -2018,7 +2151,7 @@
2018
2151
  letter-spacing: var(--tracking-84);
2019
2152
  }
2020
2153
 
2021
- @utility typography-typography-medium-headline-xl-regular {
2154
+ @utility typography-medium-headline-xl-regular {
2022
2155
  font-family: var(--font-pp-neue-montreal);
2023
2156
  font-size: var(--text-84);
2024
2157
  font-weight: var(--font-weight-regular);
@@ -2026,7 +2159,7 @@
2026
2159
  letter-spacing: var(--tracking-84);
2027
2160
  }
2028
2161
 
2029
- @utility typography-typography-medium-headline-xl-semibold {
2162
+ @utility typography-medium-headline-xl-semibold {
2030
2163
  font-family: var(--font-pp-neue-montreal);
2031
2164
  font-size: var(--text-84);
2032
2165
  font-weight: var(--font-weight-semibold);
@@ -2034,7 +2167,7 @@
2034
2167
  letter-spacing: var(--tracking-84);
2035
2168
  }
2036
2169
 
2037
- @utility typography-typography-medium-label-large {
2170
+ @utility typography-medium-label-large {
2038
2171
  font-family: var(--font-pp-neue-montreal);
2039
2172
  font-size: var(--text-16);
2040
2173
  font-weight: var(--font-weight-medium);
@@ -2042,7 +2175,7 @@
2042
2175
  letter-spacing: var(--tracking-16);
2043
2176
  }
2044
2177
 
2045
- @utility typography-typography-medium-label-medium {
2178
+ @utility typography-medium-label-medium {
2046
2179
  font-family: var(--font-pp-neue-montreal);
2047
2180
  font-size: var(--text-14);
2048
2181
  font-weight: var(--font-weight-medium);
@@ -2050,7 +2183,7 @@
2050
2183
  letter-spacing: var(--tracking-14);
2051
2184
  }
2052
2185
 
2053
- @utility typography-typography-medium-label-small {
2186
+ @utility typography-medium-label-small {
2054
2187
  font-family: var(--font-pp-neue-montreal);
2055
2188
  font-size: var(--text-12);
2056
2189
  font-weight: var(--font-weight-medium);
@@ -2058,7 +2191,7 @@
2058
2191
  letter-spacing: var(--tracking-12);
2059
2192
  }
2060
2193
 
2061
- @utility typography-typography-medium-link-large {
2194
+ @utility typography-medium-link-large {
2062
2195
  font-family: var(--font-pp-neue-montreal);
2063
2196
  font-size: var(--text-18);
2064
2197
  font-weight: var(--font-weight-medium);
@@ -2066,7 +2199,7 @@
2066
2199
  letter-spacing: var(--tracking-18);
2067
2200
  }
2068
2201
 
2069
- @utility typography-typography-medium-link-medium {
2202
+ @utility typography-medium-link-medium {
2070
2203
  font-family: var(--font-pp-neue-montreal);
2071
2204
  font-size: var(--text-16);
2072
2205
  font-weight: var(--font-weight-medium);
@@ -2074,7 +2207,7 @@
2074
2207
  letter-spacing: var(--tracking-16);
2075
2208
  }
2076
2209
 
2077
- @utility typography-typography-medium-link-small {
2210
+ @utility typography-medium-link-small {
2078
2211
  font-family: var(--font-pp-neue-montreal);
2079
2212
  font-size: var(--text-14);
2080
2213
  font-weight: var(--font-weight-medium);
@@ -2082,7 +2215,7 @@
2082
2215
  letter-spacing: var(--tracking-14);
2083
2216
  }
2084
2217
 
2085
- @utility typography-typography-medium-subheading-large {
2218
+ @utility typography-medium-subheading-large {
2086
2219
  font-family: var(--font-pp-neue-montreal);
2087
2220
  font-size: var(--text-32);
2088
2221
  font-weight: var(--font-weight-medium);
@@ -2090,7 +2223,7 @@
2090
2223
  letter-spacing: var(--tracking-32);
2091
2224
  }
2092
2225
 
2093
- @utility typography-typography-medium-subheading-large-semibold {
2226
+ @utility typography-medium-subheading-large-semibold {
2094
2227
  font-family: var(--font-pp-neue-montreal);
2095
2228
  font-size: var(--text-32);
2096
2229
  font-weight: var(--font-weight-semibold);
@@ -2098,7 +2231,7 @@
2098
2231
  letter-spacing: var(--tracking-32);
2099
2232
  }
2100
2233
 
2101
- @utility typography-typography-medium-subheading-medium {
2234
+ @utility typography-medium-subheading-medium {
2102
2235
  font-family: var(--font-pp-neue-montreal);
2103
2236
  font-size: var(--text-28);
2104
2237
  font-weight: var(--font-weight-medium);
@@ -2106,7 +2239,7 @@
2106
2239
  letter-spacing: var(--tracking-28);
2107
2240
  }
2108
2241
 
2109
- @utility typography-typography-medium-subheading-medium-semibold {
2242
+ @utility typography-medium-subheading-medium-semibold {
2110
2243
  font-family: var(--font-pp-neue-montreal);
2111
2244
  font-size: var(--text-28);
2112
2245
  font-weight: var(--font-weight-semibold);
@@ -2114,7 +2247,7 @@
2114
2247
  letter-spacing: var(--tracking-28);
2115
2248
  }
2116
2249
 
2117
- @utility typography-typography-medium-subheading-small {
2250
+ @utility typography-medium-subheading-small {
2118
2251
  font-family: var(--font-pp-neue-montreal);
2119
2252
  font-size: var(--text-21);
2120
2253
  font-weight: var(--font-weight-medium);
@@ -2122,7 +2255,7 @@
2122
2255
  letter-spacing: var(--tracking-21);
2123
2256
  }
2124
2257
 
2125
- @utility typography-typography-medium-subheading-small-semibold {
2258
+ @utility typography-medium-subheading-small-semibold {
2126
2259
  font-family: var(--font-pp-neue-montreal);
2127
2260
  font-size: var(--text-21);
2128
2261
  font-weight: var(--font-weight-semibold);
@@ -2130,7 +2263,7 @@
2130
2263
  letter-spacing: var(--tracking-21);
2131
2264
  }
2132
2265
 
2133
- @utility typography-typography-medium-subheading-xs {
2266
+ @utility typography-medium-subheading-xs {
2134
2267
  font-family: var(--font-pp-neue-montreal);
2135
2268
  font-size: var(--text-16);
2136
2269
  font-weight: var(--font-weight-semibold);
@@ -2138,7 +2271,7 @@
2138
2271
  letter-spacing: var(--tracking-16);
2139
2272
  }
2140
2273
 
2141
- @utility typography-typography-medium-subheading-xss {
2274
+ @utility typography-medium-subheading-xss {
2142
2275
  font-family: var(--font-pp-neue-montreal);
2143
2276
  font-size: var(--text-14);
2144
2277
  font-weight: var(--font-weight-semibold);
@@ -2146,7 +2279,7 @@
2146
2279
  letter-spacing: var(--tracking-14);
2147
2280
  }
2148
2281
 
2149
- @utility typography-typography-small-body-large {
2282
+ @utility typography-small-body-large {
2150
2283
  font-family: var(--font-pp-neue-montreal);
2151
2284
  font-size: var(--text-18);
2152
2285
  font-weight: var(--font-weight-regular);
@@ -2154,7 +2287,7 @@
2154
2287
  letter-spacing: var(--tracking-18);
2155
2288
  }
2156
2289
 
2157
- @utility typography-typography-small-body-medium {
2290
+ @utility typography-small-body-medium {
2158
2291
  font-family: var(--font-pp-neue-montreal);
2159
2292
  font-size: var(--text-16);
2160
2293
  font-weight: var(--font-weight-regular);
@@ -2162,7 +2295,7 @@
2162
2295
  letter-spacing: var(--tracking-16);
2163
2296
  }
2164
2297
 
2165
- @utility typography-typography-small-body-small {
2298
+ @utility typography-small-body-small {
2166
2299
  font-family: var(--font-pp-neue-montreal);
2167
2300
  font-size: var(--text-14);
2168
2301
  font-weight: var(--font-weight-regular);
@@ -2170,7 +2303,7 @@
2170
2303
  letter-spacing: var(--tracking-14);
2171
2304
  }
2172
2305
 
2173
- @utility typography-typography-small-button-large {
2306
+ @utility typography-small-button-large {
2174
2307
  font-family: var(--font-pp-neue-montreal);
2175
2308
  font-size: var(--text-16);
2176
2309
  font-weight: var(--font-weight-medium);
@@ -2178,7 +2311,7 @@
2178
2311
  letter-spacing: var(--tracking-button);
2179
2312
  }
2180
2313
 
2181
- @utility typography-typography-small-button-medium {
2314
+ @utility typography-small-button-medium {
2182
2315
  font-family: var(--font-pp-neue-montreal);
2183
2316
  font-size: var(--text-14);
2184
2317
  font-weight: var(--font-weight-medium);
@@ -2186,7 +2319,7 @@
2186
2319
  letter-spacing: var(--tracking-button);
2187
2320
  }
2188
2321
 
2189
- @utility typography-typography-small-button-small {
2322
+ @utility typography-small-button-small {
2190
2323
  font-family: var(--font-pp-neue-montreal);
2191
2324
  font-size: var(--text-12);
2192
2325
  font-weight: var(--font-weight-medium);
@@ -2194,7 +2327,7 @@
2194
2327
  letter-spacing: var(--tracking-button);
2195
2328
  }
2196
2329
 
2197
- @utility typography-typography-small-button-xl {
2330
+ @utility typography-small-button-xl {
2198
2331
  font-family: var(--font-pp-neue-montreal);
2199
2332
  font-size: var(--text-18);
2200
2333
  font-weight: var(--font-weight-medium);
@@ -2202,7 +2335,7 @@
2202
2335
  letter-spacing: var(--tracking-button);
2203
2336
  }
2204
2337
 
2205
- @utility typography-typography-small-caption-large {
2338
+ @utility typography-small-caption-large {
2206
2339
  font-family: var(--font-pp-neue-montreal);
2207
2340
  font-size: var(--text-14);
2208
2341
  font-weight: var(--font-weight-regular);
@@ -2210,7 +2343,7 @@
2210
2343
  letter-spacing: var(--tracking-14);
2211
2344
  }
2212
2345
 
2213
- @utility typography-typography-small-caption-small {
2346
+ @utility typography-small-caption-small {
2214
2347
  font-family: var(--font-pp-neue-montreal);
2215
2348
  font-size: var(--text-12);
2216
2349
  font-weight: var(--font-weight-regular);
@@ -2218,7 +2351,7 @@
2218
2351
  letter-spacing: var(--tracking-12);
2219
2352
  }
2220
2353
 
2221
- @utility typography-typography-small-display-hero {
2354
+ @utility typography-small-display-hero {
2222
2355
  font-family: var(--font-pp-neue-montreal);
2223
2356
  font-size: var(--text-88);
2224
2357
  font-weight: var(--font-weight-medium);
@@ -2226,7 +2359,7 @@
2226
2359
  letter-spacing: var(--tracking-88);
2227
2360
  }
2228
2361
 
2229
- @utility typography-typography-small-display-hero-regular {
2362
+ @utility typography-small-display-hero-regular {
2230
2363
  font-family: var(--font-pp-neue-montreal);
2231
2364
  font-size: var(--text-88);
2232
2365
  font-weight: var(--font-weight-regular);
@@ -2234,7 +2367,7 @@
2234
2367
  letter-spacing: var(--tracking-88);
2235
2368
  }
2236
2369
 
2237
- @utility typography-typography-small-display-hero-semibold {
2370
+ @utility typography-small-display-hero-semibold {
2238
2371
  font-family: var(--font-pp-neue-montreal);
2239
2372
  font-size: var(--text-88);
2240
2373
  font-weight: var(--font-weight-semibold);
@@ -2242,7 +2375,7 @@
2242
2375
  letter-spacing: var(--tracking-88);
2243
2376
  }
2244
2377
 
2245
- @utility typography-typography-small-display-large {
2378
+ @utility typography-small-display-large {
2246
2379
  font-family: var(--font-pp-neue-montreal);
2247
2380
  font-size: var(--text-64);
2248
2381
  font-weight: var(--font-weight-medium);
@@ -2250,7 +2383,7 @@
2250
2383
  letter-spacing: var(--tracking-64);
2251
2384
  }
2252
2385
 
2253
- @utility typography-typography-small-display-medium {
2386
+ @utility typography-small-display-medium {
2254
2387
  font-family: var(--font-pp-neue-montreal);
2255
2388
  font-size: var(--text-56);
2256
2389
  font-weight: var(--font-weight-medium);
@@ -2258,7 +2391,7 @@
2258
2391
  letter-spacing: var(--tracking-56);
2259
2392
  }
2260
2393
 
2261
- @utility typography-typography-small-display-small {
2394
+ @utility typography-small-display-small {
2262
2395
  font-family: var(--font-pp-neue-montreal);
2263
2396
  font-size: var(--text-48);
2264
2397
  font-weight: var(--font-weight-medium);
@@ -2266,7 +2399,7 @@
2266
2399
  letter-spacing: var(--tracking-48);
2267
2400
  }
2268
2401
 
2269
- @utility typography-typography-small-display-xl {
2402
+ @utility typography-small-display-xl {
2270
2403
  font-family: var(--font-pp-neue-montreal);
2271
2404
  font-size: var(--text-72);
2272
2405
  font-weight: var(--font-weight-medium);
@@ -2274,7 +2407,7 @@
2274
2407
  letter-spacing: var(--tracking-72);
2275
2408
  }
2276
2409
 
2277
- @utility typography-typography-small-display-xl-regular {
2410
+ @utility typography-small-display-xl-regular {
2278
2411
  font-family: var(--font-pp-neue-montreal);
2279
2412
  font-size: var(--text-72);
2280
2413
  font-weight: var(--font-weight-regular);
@@ -2282,7 +2415,7 @@
2282
2415
  letter-spacing: var(--tracking-72);
2283
2416
  }
2284
2417
 
2285
- @utility typography-typography-small-display-xl-semibold {
2418
+ @utility typography-small-display-xl-semibold {
2286
2419
  font-family: var(--font-pp-neue-montreal);
2287
2420
  font-size: var(--text-72);
2288
2421
  font-weight: var(--font-weight-semibold);
@@ -2290,7 +2423,7 @@
2290
2423
  letter-spacing: var(--tracking-72);
2291
2424
  }
2292
2425
 
2293
- @utility typography-typography-small-headline-large {
2426
+ @utility typography-small-headline-large {
2294
2427
  font-family: var(--font-pp-neue-montreal);
2295
2428
  font-size: var(--text-64);
2296
2429
  font-weight: var(--font-weight-medium);
@@ -2298,7 +2431,7 @@
2298
2431
  letter-spacing: var(--tracking-64);
2299
2432
  }
2300
2433
 
2301
- @utility typography-typography-small-headline-large-regular {
2434
+ @utility typography-small-headline-large-regular {
2302
2435
  font-family: var(--font-pp-neue-montreal);
2303
2436
  font-size: var(--text-64);
2304
2437
  font-weight: var(--font-weight-regular);
@@ -2306,7 +2439,7 @@
2306
2439
  letter-spacing: var(--tracking-64);
2307
2440
  }
2308
2441
 
2309
- @utility typography-typography-small-headline-large-semibold {
2442
+ @utility typography-small-headline-large-semibold {
2310
2443
  font-family: var(--font-pp-neue-montreal);
2311
2444
  font-size: var(--text-64);
2312
2445
  font-weight: var(--font-weight-semibold);
@@ -2314,7 +2447,7 @@
2314
2447
  letter-spacing: var(--tracking-64);
2315
2448
  }
2316
2449
 
2317
- @utility typography-typography-small-headline-medium {
2450
+ @utility typography-small-headline-medium {
2318
2451
  font-family: var(--font-pp-neue-montreal);
2319
2452
  font-size: var(--text-42);
2320
2453
  font-weight: var(--font-weight-medium);
@@ -2322,7 +2455,7 @@
2322
2455
  letter-spacing: var(--tracking-42);
2323
2456
  }
2324
2457
 
2325
- @utility typography-typography-small-headline-medium-regular {
2458
+ @utility typography-small-headline-medium-regular {
2326
2459
  font-family: var(--font-pp-neue-montreal);
2327
2460
  font-size: var(--text-42);
2328
2461
  font-weight: var(--font-weight-regular);
@@ -2330,7 +2463,7 @@
2330
2463
  letter-spacing: var(--tracking-42);
2331
2464
  }
2332
2465
 
2333
- @utility typography-typography-small-headline-medium-semibold {
2466
+ @utility typography-small-headline-medium-semibold {
2334
2467
  font-family: var(--font-pp-neue-montreal);
2335
2468
  font-size: var(--text-42);
2336
2469
  font-weight: var(--font-weight-semibold);
@@ -2338,7 +2471,7 @@
2338
2471
  letter-spacing: var(--tracking-42);
2339
2472
  }
2340
2473
 
2341
- @utility typography-typography-small-headline-small {
2474
+ @utility typography-small-headline-small {
2342
2475
  font-family: var(--font-pp-neue-montreal);
2343
2476
  font-size: var(--text-32);
2344
2477
  font-weight: var(--font-weight-medium);
@@ -2346,7 +2479,7 @@
2346
2479
  letter-spacing: var(--tracking-32);
2347
2480
  }
2348
2481
 
2349
- @utility typography-typography-small-headline-xl {
2482
+ @utility typography-small-headline-xl {
2350
2483
  font-family: var(--font-pp-neue-montreal);
2351
2484
  font-size: var(--text-72);
2352
2485
  font-weight: var(--font-weight-medium);
@@ -2354,7 +2487,7 @@
2354
2487
  letter-spacing: var(--tracking-72);
2355
2488
  }
2356
2489
 
2357
- @utility typography-typography-small-headline-xl-regular {
2490
+ @utility typography-small-headline-xl-regular {
2358
2491
  font-family: var(--font-pp-neue-montreal);
2359
2492
  font-size: var(--text-72);
2360
2493
  font-weight: var(--font-weight-regular);
@@ -2362,7 +2495,7 @@
2362
2495
  letter-spacing: var(--tracking-72);
2363
2496
  }
2364
2497
 
2365
- @utility typography-typography-small-headline-xl-semibold {
2498
+ @utility typography-small-headline-xl-semibold {
2366
2499
  font-family: var(--font-pp-neue-montreal);
2367
2500
  font-size: var(--text-72);
2368
2501
  font-weight: var(--font-weight-semibold);
@@ -2370,7 +2503,7 @@
2370
2503
  letter-spacing: var(--tracking-72);
2371
2504
  }
2372
2505
 
2373
- @utility typography-typography-small-label-large {
2506
+ @utility typography-small-label-large {
2374
2507
  font-family: var(--font-pp-neue-montreal);
2375
2508
  font-size: var(--text-14);
2376
2509
  font-weight: var(--font-weight-medium);
@@ -2378,7 +2511,7 @@
2378
2511
  letter-spacing: var(--tracking-14);
2379
2512
  }
2380
2513
 
2381
- @utility typography-typography-small-label-medium {
2514
+ @utility typography-small-label-medium {
2382
2515
  font-family: var(--font-pp-neue-montreal);
2383
2516
  font-size: var(--text-12);
2384
2517
  font-weight: var(--font-weight-medium);
@@ -2386,7 +2519,7 @@
2386
2519
  letter-spacing: var(--tracking-12);
2387
2520
  }
2388
2521
 
2389
- @utility typography-typography-small-label-small {
2522
+ @utility typography-small-label-small {
2390
2523
  font-family: var(--font-pp-neue-montreal);
2391
2524
  font-size: var(--text-11);
2392
2525
  font-weight: var(--font-weight-medium);
@@ -2394,7 +2527,7 @@
2394
2527
  letter-spacing: var(--tracking-11);
2395
2528
  }
2396
2529
 
2397
- @utility typography-typography-small-link-large {
2530
+ @utility typography-small-link-large {
2398
2531
  font-family: var(--font-pp-neue-montreal);
2399
2532
  font-size: var(--text-16);
2400
2533
  font-weight: var(--font-weight-medium);
@@ -2402,7 +2535,7 @@
2402
2535
  letter-spacing: var(--tracking-16);
2403
2536
  }
2404
2537
 
2405
- @utility typography-typography-small-link-medium {
2538
+ @utility typography-small-link-medium {
2406
2539
  font-family: var(--font-pp-neue-montreal);
2407
2540
  font-size: var(--text-14);
2408
2541
  font-weight: var(--font-weight-medium);
@@ -2410,7 +2543,7 @@
2410
2543
  letter-spacing: var(--tracking-14);
2411
2544
  }
2412
2545
 
2413
- @utility typography-typography-small-link-small {
2546
+ @utility typography-small-link-small {
2414
2547
  font-family: var(--font-pp-neue-montreal);
2415
2548
  font-size: var(--text-12);
2416
2549
  font-weight: var(--font-weight-medium);
@@ -2418,7 +2551,7 @@
2418
2551
  letter-spacing: var(--tracking-12);
2419
2552
  }
2420
2553
 
2421
- @utility typography-typography-small-subheading-large {
2554
+ @utility typography-small-subheading-large {
2422
2555
  font-family: var(--font-pp-neue-montreal);
2423
2556
  font-size: var(--text-28);
2424
2557
  font-weight: var(--font-weight-medium);
@@ -2426,7 +2559,7 @@
2426
2559
  letter-spacing: var(--tracking-28);
2427
2560
  }
2428
2561
 
2429
- @utility typography-typography-small-subheading-large-semibold {
2562
+ @utility typography-small-subheading-large-semibold {
2430
2563
  font-family: var(--font-pp-neue-montreal);
2431
2564
  font-size: var(--text-28);
2432
2565
  font-weight: var(--font-weight-semibold);
@@ -2434,7 +2567,7 @@
2434
2567
  letter-spacing: var(--tracking-28);
2435
2568
  }
2436
2569
 
2437
- @utility typography-typography-small-subheading-medium {
2570
+ @utility typography-small-subheading-medium {
2438
2571
  font-family: var(--font-pp-neue-montreal);
2439
2572
  font-size: var(--text-24);
2440
2573
  font-weight: var(--font-weight-medium);
@@ -2442,7 +2575,7 @@
2442
2575
  letter-spacing: var(--tracking-24);
2443
2576
  }
2444
2577
 
2445
- @utility typography-typography-small-subheading-medium-semibold {
2578
+ @utility typography-small-subheading-medium-semibold {
2446
2579
  font-family: var(--font-pp-neue-montreal);
2447
2580
  font-size: var(--text-24);
2448
2581
  font-weight: var(--font-weight-semibold);
@@ -2450,7 +2583,7 @@
2450
2583
  letter-spacing: var(--tracking-24);
2451
2584
  }
2452
2585
 
2453
- @utility typography-typography-small-subheading-small {
2586
+ @utility typography-small-subheading-small {
2454
2587
  font-family: var(--font-pp-neue-montreal);
2455
2588
  font-size: var(--text-18);
2456
2589
  font-weight: var(--font-weight-medium);
@@ -2458,7 +2591,7 @@
2458
2591
  letter-spacing: var(--tracking-18);
2459
2592
  }
2460
2593
 
2461
- @utility typography-typography-small-subheading-small-semibold {
2594
+ @utility typography-small-subheading-small-semibold {
2462
2595
  font-family: var(--font-pp-neue-montreal);
2463
2596
  font-size: var(--text-18);
2464
2597
  font-weight: var(--font-weight-semibold);
@@ -2466,7 +2599,7 @@
2466
2599
  letter-spacing: var(--tracking-18);
2467
2600
  }
2468
2601
 
2469
- @utility typography-typography-small-subheading-xs {
2602
+ @utility typography-small-subheading-xs {
2470
2603
  font-family: var(--font-pp-neue-montreal);
2471
2604
  font-size: var(--text-16);
2472
2605
  font-weight: var(--font-weight-medium);
@@ -2474,7 +2607,7 @@
2474
2607
  letter-spacing: var(--tracking-16);
2475
2608
  }
2476
2609
 
2477
- @utility typography-typography-small-subheading-xs-semibold {
2610
+ @utility typography-small-subheading-xs-semibold {
2478
2611
  font-family: var(--font-pp-neue-montreal);
2479
2612
  font-size: var(--text-16);
2480
2613
  font-weight: var(--font-weight-semibold);
@@ -2482,7 +2615,7 @@
2482
2615
  letter-spacing: var(--tracking-16);
2483
2616
  }
2484
2617
 
2485
- @utility typography-typography-small-subheading-xss {
2618
+ @utility typography-small-subheading-xss {
2486
2619
  font-family: var(--font-pp-neue-montreal);
2487
2620
  font-size: var(--text-14);
2488
2621
  font-weight: var(--font-weight-medium);
@@ -2490,7 +2623,7 @@
2490
2623
  letter-spacing: var(--tracking-14);
2491
2624
  }
2492
2625
 
2493
- @utility typography-typography-small-subheading-xss-semibold {
2626
+ @utility typography-small-subheading-xss-semibold {
2494
2627
  font-family: var(--font-pp-neue-montreal);
2495
2628
  font-size: var(--text-14);
2496
2629
  font-weight: var(--font-weight-semibold);
@@ -24051,6 +24184,32 @@
24051
24184
  }
24052
24185
 
24053
24186
 
24187
+ /* Font Family Utilities */
24188
+ @utility font-cormorant {
24189
+ font-family: var(--font-cormorant);
24190
+ }
24191
+
24192
+ @utility font-gloock {
24193
+ font-family: var(--font-gloock);
24194
+ }
24195
+
24196
+ @utility font-pp-neue-montreal {
24197
+ font-family: var(--font-pp-neue-montreal);
24198
+ }
24199
+
24200
+ @utility font-sans {
24201
+ font-family: var(--font-sans);
24202
+ }
24203
+
24204
+ @utility font-serif {
24205
+ font-family: var(--font-serif);
24206
+ }
24207
+
24208
+ @utility font-serif-alt {
24209
+ font-family: var(--font-serif-alt);
24210
+ }
24211
+
24212
+
24054
24213
  /* Surface Utilities */
24055
24214
  @utility rounded-surface-button {
24056
24215
  border-radius: var(--radius-surface-button);
@@ -24158,4 +24317,36 @@
24158
24317
  @utility stroke-y-surface-card {
24159
24318
  border-top-width: var(--surface-card-stroke);
24160
24319
  border-bottom-width: var(--surface-card-stroke);
24320
+ }
24321
+
24322
+
24323
+ /* Grid Content Layout Utilities */
24324
+ @utility grid-content-medium {
24325
+ grid-column: 1 / -1;
24326
+ @media (width >= 48rem) {
24327
+ grid-column: 2 / span 10;
24328
+ }
24329
+ @media (width >= 90rem) {
24330
+ grid-column: 3 / span 8;
24331
+ }
24332
+ }
24333
+
24334
+ @utility grid-content-narrow {
24335
+ grid-column: 1 / -1;
24336
+ @media (width >= 48rem) {
24337
+ grid-column: 3 / span 8;
24338
+ }
24339
+ @media (width >= 90rem) {
24340
+ grid-column: 3 / span 8;
24341
+ }
24342
+ }
24343
+
24344
+ @utility grid-content-wide {
24345
+ grid-column: 1 / -1;
24346
+ @media (width >= 48rem) {
24347
+ grid-column: 1 / span 12;
24348
+ }
24349
+ @media (width >= 90rem) {
24350
+ grid-column: 2 / span 10;
24351
+ }
24161
24352
  }