@sage/design-tokens 2.13.0 → 2.16.0

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 (16) hide show
  1. package/android/base.xml +36 -13
  2. package/css/base.css +36 -13
  3. package/data/tokens.json +277 -44
  4. package/docs/tokens/base/colors/index.html +270 -102
  5. package/docs/tokens/base/index.html +585 -102
  6. package/docs/tokens/base/typography/index.html +315 -0
  7. package/docs/tokens/index.html +585 -102
  8. package/ios/base.h +36 -13
  9. package/js/base/common.d.ts +35 -12
  10. package/js/base/common.js +36 -13
  11. package/js/base/es6.d.ts +35 -12
  12. package/js/base/es6.js +35 -12
  13. package/package.json +1 -1
  14. package/sage-design-tokens-2.16.0.tgz +0 -0
  15. package/scss/base.scss +36 -13
  16. package/sage-design-tokens-2.13.0.tgz +0 -0
package/docs/tokens/index.html CHANGED
@@ -1423,178 +1423,199 @@
1423
1423
  </tr>
1424
1424
  <tr>
1425
1425
  <td class="with-icons is-vcentered"
1426
- id="base-colorsComponentsMenuAutumnStandard500"
1427
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: standard; variant: 500; ">
1428
- colorsComponentsMenuAutumnStandard500
1429
- <a href="#base-colorsComponentsMenuAutumnStandard500"
1426
+ id="base-colorsComponentsMenuWinterChild300"
1427
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 300; ">
1428
+ colorsComponentsMenuWinterChild300
1429
+ <a href="#base-colorsComponentsMenuWinterChild300"
1430
1430
  title="permalink"
1431
1431
  class="permalink">
1432
1432
  🔗
1433
1433
  </a>
1434
1434
  </td>
1435
1435
  <td class="is-vcentered">
1436
- <pre>#00324cff</pre>
1436
+ <pre>#4d4d4dff</pre>
1437
1437
  </td>
1438
1438
  <td class="is-vcentered">
1439
1439
  <div class="table__color-preview"
1440
- style="background-color: #00324cff;">
1440
+ style="background-color: #4d4d4dff;">
1441
1441
  </div>
1442
1442
 
1443
1443
  </td>
1444
1444
  </tr>
1445
1445
  <tr>
1446
1446
  <td class="with-icons is-vcentered"
1447
- id="base-colorsComponentsMenuAutumnStandard600"
1448
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: standard; variant: 600; ">
1449
- colorsComponentsMenuAutumnStandard600
1450
- <a href="#base-colorsComponentsMenuAutumnStandard600"
1447
+ id="base-colorsComponentsMenuWinterChild400"
1448
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 400; ">
1449
+ colorsComponentsMenuWinterChild400
1450
+ <a href="#base-colorsComponentsMenuWinterChild400"
1451
1451
  title="permalink"
1452
1452
  class="permalink">
1453
1453
  🔗
1454
1454
  </a>
1455
1455
  </td>
1456
1456
  <td class="is-vcentered">
1457
- <pre>#007e45ff</pre>
1457
+ <pre>#ff00ffff</pre>
1458
1458
  </td>
1459
1459
  <td class="is-vcentered">
1460
1460
  <div class="table__color-preview"
1461
- style="background-color: #007e45ff;">
1461
+ style="background-color: #ff00ffff;">
1462
1462
  </div>
1463
1463
 
1464
1464
  </td>
1465
1465
  </tr>
1466
1466
  <tr>
1467
1467
  <td class="with-icons is-vcentered"
1468
- id="base-colorsComponentsMenuAutumnStandard700"
1469
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: standard; variant: 700; ">
1470
- colorsComponentsMenuAutumnStandard700
1471
- <a href="#base-colorsComponentsMenuAutumnStandard700"
1468
+ id="base-colorsComponentsMenuWinterChild500"
1469
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 500; ">
1470
+ colorsComponentsMenuWinterChild500
1471
+ <a href="#base-colorsComponentsMenuWinterChild500"
1472
1472
  title="permalink"
1473
1473
  class="permalink">
1474
1474
  🔗
1475
1475
  </a>
1476
1476
  </td>
1477
1477
  <td class="is-vcentered">
1478
- <pre>#19475eff</pre>
1478
+ <pre>#262626ff</pre>
1479
1479
  </td>
1480
1480
  <td class="is-vcentered">
1481
1481
  <div class="table__color-preview"
1482
- style="background-color: #19475eff;">
1482
+ style="background-color: #262626ff;">
1483
1483
  </div>
1484
1484
 
1485
1485
  </td>
1486
1486
  </tr>
1487
1487
  <tr>
1488
1488
  <td class="with-icons is-vcentered"
1489
- id="base-colorsComponentsMenuAutumnParent500"
1490
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: parent; variant: 500; ">
1491
- colorsComponentsMenuAutumnParent500
1492
- <a href="#base-colorsComponentsMenuAutumnParent500"
1489
+ id="base-colorsComponentsMenuWinterChild600"
1490
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 600; ">
1491
+ colorsComponentsMenuWinterChild600
1492
+ <a href="#base-colorsComponentsMenuWinterChild600"
1493
1493
  title="permalink"
1494
1494
  class="permalink">
1495
1495
  🔗
1496
1496
  </a>
1497
1497
  </td>
1498
1498
  <td class="is-vcentered">
1499
- <pre>#00324cff</pre>
1499
+ <pre>#007e45ff</pre>
1500
1500
  </td>
1501
1501
  <td class="is-vcentered">
1502
1502
  <div class="table__color-preview"
1503
- style="background-color: #00324cff;">
1503
+ style="background-color: #007e45ff;">
1504
1504
  </div>
1505
1505
 
1506
1506
  </td>
1507
1507
  </tr>
1508
1508
  <tr>
1509
1509
  <td class="with-icons is-vcentered"
1510
- id="base-colorsComponentsMenuAutumnParent600"
1511
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: parent; variant: 600; ">
1512
- colorsComponentsMenuAutumnParent600
1513
- <a href="#base-colorsComponentsMenuAutumnParent600"
1510
+ id="base-colorsComponentsMenuWinterChild700"
1511
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 700; ">
1512
+ colorsComponentsMenuWinterChild700
1513
+ <a href="#base-colorsComponentsMenuWinterChild700"
1514
1514
  title="permalink"
1515
1515
  class="permalink">
1516
1516
  🔗
1517
1517
  </a>
1518
1518
  </td>
1519
1519
  <td class="is-vcentered">
1520
- <pre>#007e45ff</pre>
1520
+ <pre>#262626ff</pre>
1521
1521
  </td>
1522
1522
  <td class="is-vcentered">
1523
1523
  <div class="table__color-preview"
1524
- style="background-color: #007e45ff;">
1524
+ style="background-color: #262626ff;">
1525
1525
  </div>
1526
1526
 
1527
1527
  </td>
1528
1528
  </tr>
1529
1529
  <tr>
1530
1530
  <td class="with-icons is-vcentered"
1531
- id="base-colorsComponentsMenuAutumnParent700"
1532
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: parent; variant: 700; ">
1533
- colorsComponentsMenuAutumnParent700
1534
- <a href="#base-colorsComponentsMenuAutumnParent700"
1531
+ id="base-colorsComponentsMenuWinterChild800"
1532
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 800; ">
1533
+ colorsComponentsMenuWinterChild800
1534
+ <a href="#base-colorsComponentsMenuWinterChild800"
1535
1535
  title="permalink"
1536
1536
  class="permalink">
1537
1537
  🔗
1538
1538
  </a>
1539
1539
  </td>
1540
1540
  <td class="is-vcentered">
1541
- <pre>#19475eff</pre>
1541
+ <pre>#262626ff</pre>
1542
1542
  </td>
1543
1543
  <td class="is-vcentered">
1544
1544
  <div class="table__color-preview"
1545
- style="background-color: #19475eff;">
1545
+ style="background-color: #262626ff;">
1546
1546
  </div>
1547
1547
 
1548
1548
  </td>
1549
1549
  </tr>
1550
1550
  <tr>
1551
1551
  <td class="with-icons is-vcentered"
1552
- id="base-colorsComponentsMenuAutumnChild400"
1553
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: child; variant: 400; ">
1554
- colorsComponentsMenuAutumnChild400
1555
- <a href="#base-colorsComponentsMenuAutumnChild400"
1552
+ id="base-colorsComponentsMenuWinterChildAlt300"
1553
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 300; ">
1554
+ colorsComponentsMenuWinterChildAlt300
1555
+ <a href="#base-colorsComponentsMenuWinterChildAlt300"
1556
1556
  title="permalink"
1557
1557
  class="permalink">
1558
1558
  🔗
1559
1559
  </a>
1560
1560
  </td>
1561
1561
  <td class="is-vcentered">
1562
- <pre>#19475eff</pre>
1562
+ <pre>#4d4d4dff</pre>
1563
1563
  </td>
1564
1564
  <td class="is-vcentered">
1565
1565
  <div class="table__color-preview"
1566
- style="background-color: #19475eff;">
1566
+ style="background-color: #4d4d4dff;">
1567
1567
  </div>
1568
1568
 
1569
1569
  </td>
1570
1570
  </tr>
1571
1571
  <tr>
1572
1572
  <td class="with-icons is-vcentered"
1573
- id="base-colorsComponentsMenuAutumnChild500"
1574
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: child; variant: 500; ">
1575
- colorsComponentsMenuAutumnChild500
1576
- <a href="#base-colorsComponentsMenuAutumnChild500"
1573
+ id="base-colorsComponentsMenuWinterChildAlt400"
1574
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 400; ">
1575
+ colorsComponentsMenuWinterChildAlt400
1576
+ <a href="#base-colorsComponentsMenuWinterChildAlt400"
1577
1577
  title="permalink"
1578
1578
  class="permalink">
1579
1579
  🔗
1580
1580
  </a>
1581
1581
  </td>
1582
1582
  <td class="is-vcentered">
1583
- <pre>#001926ff</pre>
1583
+ <pre>#ff00ffff</pre>
1584
1584
  </td>
1585
1585
  <td class="is-vcentered">
1586
1586
  <div class="table__color-preview"
1587
- style="background-color: #001926ff;">
1587
+ style="background-color: #ff00ffff;">
1588
1588
  </div>
1589
1589
 
1590
1590
  </td>
1591
1591
  </tr>
1592
1592
  <tr>
1593
1593
  <td class="with-icons is-vcentered"
1594
- id="base-colorsComponentsMenuAutumnChild600"
1595
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: child; variant: 600; ">
1596
- colorsComponentsMenuAutumnChild600
1597
- <a href="#base-colorsComponentsMenuAutumnChild600"
1594
+ id="base-colorsComponentsMenuWinterChildAlt500"
1595
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 500; ">
1596
+ colorsComponentsMenuWinterChildAlt500
1597
+ <a href="#base-colorsComponentsMenuWinterChildAlt500"
1598
+ title="permalink"
1599
+ class="permalink">
1600
+ 🔗
1601
+ </a>
1602
+ </td>
1603
+ <td class="is-vcentered">
1604
+ <pre>#404040ff</pre>
1605
+ </td>
1606
+ <td class="is-vcentered">
1607
+ <div class="table__color-preview"
1608
+ style="background-color: #404040ff;">
1609
+ </div>
1610
+
1611
+ </td>
1612
+ </tr>
1613
+ <tr>
1614
+ <td class="with-icons is-vcentered"
1615
+ id="base-colorsComponentsMenuWinterChildAlt600"
1616
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 600; ">
1617
+ colorsComponentsMenuWinterChildAlt600
1618
+ <a href="#base-colorsComponentsMenuWinterChildAlt600"
1598
1619
  title="permalink"
1599
1620
  class="permalink">
1600
1621
  🔗
@@ -1612,63 +1633,63 @@
1612
1633
  </tr>
1613
1634
  <tr>
1614
1635
  <td class="with-icons is-vcentered"
1615
- id="base-colorsComponentsMenuAutumnChildAlt400"
1616
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: childAlt; variant: 400; ">
1617
- colorsComponentsMenuAutumnChildAlt400
1618
- <a href="#base-colorsComponentsMenuAutumnChildAlt400"
1636
+ id="base-colorsComponentsMenuWinterChildAlt700"
1637
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 700; ">
1638
+ colorsComponentsMenuWinterChildAlt700
1639
+ <a href="#base-colorsComponentsMenuWinterChildAlt700"
1619
1640
  title="permalink"
1620
1641
  class="permalink">
1621
1642
  🔗
1622
1643
  </a>
1623
1644
  </td>
1624
1645
  <td class="is-vcentered">
1625
- <pre>#19475eff</pre>
1646
+ <pre>#404040ff</pre>
1626
1647
  </td>
1627
1648
  <td class="is-vcentered">
1628
1649
  <div class="table__color-preview"
1629
- style="background-color: #19475eff;">
1650
+ style="background-color: #404040ff;">
1630
1651
  </div>
1631
1652
 
1632
1653
  </td>
1633
1654
  </tr>
1634
1655
  <tr>
1635
1656
  <td class="with-icons is-vcentered"
1636
- id="base-colorsComponentsMenuAutumnChildAlt500"
1637
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: childAlt; variant: 500; ">
1638
- colorsComponentsMenuAutumnChildAlt500
1639
- <a href="#base-colorsComponentsMenuAutumnChildAlt500"
1657
+ id="base-colorsComponentsMenuWinterChildAlt800"
1658
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 800; ">
1659
+ colorsComponentsMenuWinterChildAlt800
1660
+ <a href="#base-colorsComponentsMenuWinterChildAlt800"
1640
1661
  title="permalink"
1641
1662
  class="permalink">
1642
1663
  🔗
1643
1664
  </a>
1644
1665
  </td>
1645
1666
  <td class="is-vcentered">
1646
- <pre>#00324cff</pre>
1667
+ <pre>#404040ff</pre>
1647
1668
  </td>
1648
1669
  <td class="is-vcentered">
1649
1670
  <div class="table__color-preview"
1650
- style="background-color: #00324cff;">
1671
+ style="background-color: #404040ff;">
1651
1672
  </div>
1652
1673
 
1653
1674
  </td>
1654
1675
  </tr>
1655
1676
  <tr>
1656
1677
  <td class="with-icons is-vcentered"
1657
- id="base-colorsComponentsMenuAutumnChildAlt600"
1658
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: childAlt; variant: 600; ">
1659
- colorsComponentsMenuAutumnChildAlt600
1660
- <a href="#base-colorsComponentsMenuAutumnChildAlt600"
1678
+ id="base-colorsComponentsMenuWinterStandard400"
1679
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: standard; variant: 400; ">
1680
+ colorsComponentsMenuWinterStandard400
1681
+ <a href="#base-colorsComponentsMenuWinterStandard400"
1661
1682
  title="permalink"
1662
1683
  class="permalink">
1663
1684
  🔗
1664
1685
  </a>
1665
1686
  </td>
1666
1687
  <td class="is-vcentered">
1667
- <pre>#007e45ff</pre>
1688
+ <pre>#ff00ffff</pre>
1668
1689
  </td>
1669
1690
  <td class="is-vcentered">
1670
1691
  <div class="table__color-preview"
1671
- style="background-color: #007e45ff;">
1692
+ style="background-color: #ff00ffff;">
1672
1693
  </div>
1673
1694
 
1674
1695
  </td>
@@ -1736,6 +1757,27 @@
1736
1757
 
1737
1758
  </td>
1738
1759
  </tr>
1760
+ <tr>
1761
+ <td class="with-icons is-vcentered"
1762
+ id="base-colorsComponentsMenuWinterStandard800"
1763
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: standard; variant: 800; ">
1764
+ colorsComponentsMenuWinterStandard800
1765
+ <a href="#base-colorsComponentsMenuWinterStandard800"
1766
+ title="permalink"
1767
+ class="permalink">
1768
+ 🔗
1769
+ </a>
1770
+ </td>
1771
+ <td class="is-vcentered">
1772
+ <pre>#262626ff</pre>
1773
+ </td>
1774
+ <td class="is-vcentered">
1775
+ <div class="table__color-preview"
1776
+ style="background-color: #262626ff;">
1777
+ </div>
1778
+
1779
+ </td>
1780
+ </tr>
1739
1781
  <tr>
1740
1782
  <td class="with-icons is-vcentered"
1741
1783
  id="base-colorsComponentsMenuWinterParent500"
@@ -1801,52 +1843,94 @@
1801
1843
  </tr>
1802
1844
  <tr>
1803
1845
  <td class="with-icons is-vcentered"
1804
- id="base-colorsComponentsMenuWinterChild400"
1805
- title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 400; ">
1806
- colorsComponentsMenuWinterChild400
1807
- <a href="#base-colorsComponentsMenuWinterChild400"
1846
+ id="base-colorsComponentsMenuAutumnStandard500"
1847
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: standard; variant: 500; ">
1848
+ colorsComponentsMenuAutumnStandard500
1849
+ <a href="#base-colorsComponentsMenuAutumnStandard500"
1808
1850
  title="permalink"
1809
1851
  class="permalink">
1810
1852
  🔗
1811
1853
  </a>
1812
1854
  </td>
1813
1855
  <td class="is-vcentered">
1814
- <pre>#262626ff</pre>
1856
+ <pre>#00324cff</pre>
1815
1857
  </td>
1816
1858
  <td class="is-vcentered">
1817
1859
  <div class="table__color-preview"
1818
- style="background-color: #262626ff;">
1860
+ style="background-color: #00324cff;">
1819
1861
  </div>
1820
1862
 
1821
1863
  </td>
1822
1864
  </tr>
1823
1865
  <tr>
1824
1866
  <td class="with-icons is-vcentered"
1825
- id="base-colorsComponentsMenuWinterChild500"
1826
- title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 500; ">
1827
- colorsComponentsMenuWinterChild500
1828
- <a href="#base-colorsComponentsMenuWinterChild500"
1867
+ id="base-colorsComponentsMenuAutumnStandard600"
1868
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: standard; variant: 600; ">
1869
+ colorsComponentsMenuAutumnStandard600
1870
+ <a href="#base-colorsComponentsMenuAutumnStandard600"
1829
1871
  title="permalink"
1830
1872
  class="permalink">
1831
1873
  🔗
1832
1874
  </a>
1833
1875
  </td>
1834
1876
  <td class="is-vcentered">
1835
- <pre>#000000ff</pre>
1877
+ <pre>#007e45ff</pre>
1836
1878
  </td>
1837
1879
  <td class="is-vcentered">
1838
1880
  <div class="table__color-preview"
1839
- style="background-color: #000000ff;">
1881
+ style="background-color: #007e45ff;">
1840
1882
  </div>
1841
1883
 
1842
1884
  </td>
1843
1885
  </tr>
1844
1886
  <tr>
1845
1887
  <td class="with-icons is-vcentered"
1846
- id="base-colorsComponentsMenuWinterChild600"
1847
- title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 600; ">
1848
- colorsComponentsMenuWinterChild600
1849
- <a href="#base-colorsComponentsMenuWinterChild600"
1888
+ id="base-colorsComponentsMenuAutumnStandard700"
1889
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: standard; variant: 700; ">
1890
+ colorsComponentsMenuAutumnStandard700
1891
+ <a href="#base-colorsComponentsMenuAutumnStandard700"
1892
+ title="permalink"
1893
+ class="permalink">
1894
+ 🔗
1895
+ </a>
1896
+ </td>
1897
+ <td class="is-vcentered">
1898
+ <pre>#19475eff</pre>
1899
+ </td>
1900
+ <td class="is-vcentered">
1901
+ <div class="table__color-preview"
1902
+ style="background-color: #19475eff;">
1903
+ </div>
1904
+
1905
+ </td>
1906
+ </tr>
1907
+ <tr>
1908
+ <td class="with-icons is-vcentered"
1909
+ id="base-colorsComponentsMenuAutumnParent500"
1910
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: parent; variant: 500; ">
1911
+ colorsComponentsMenuAutumnParent500
1912
+ <a href="#base-colorsComponentsMenuAutumnParent500"
1913
+ title="permalink"
1914
+ class="permalink">
1915
+ 🔗
1916
+ </a>
1917
+ </td>
1918
+ <td class="is-vcentered">
1919
+ <pre>#00324cff</pre>
1920
+ </td>
1921
+ <td class="is-vcentered">
1922
+ <div class="table__color-preview"
1923
+ style="background-color: #00324cff;">
1924
+ </div>
1925
+
1926
+ </td>
1927
+ </tr>
1928
+ <tr>
1929
+ <td class="with-icons is-vcentered"
1930
+ id="base-colorsComponentsMenuAutumnParent600"
1931
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: parent; variant: 600; ">
1932
+ colorsComponentsMenuAutumnParent600
1933
+ <a href="#base-colorsComponentsMenuAutumnParent600"
1850
1934
  title="permalink"
1851
1935
  class="permalink">
1852
1936
  🔗
@@ -1864,52 +1948,136 @@
1864
1948
  </tr>
1865
1949
  <tr>
1866
1950
  <td class="with-icons is-vcentered"
1867
- id="base-colorsComponentsMenuWinterChildAlt400"
1868
- title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 400; ">
1869
- colorsComponentsMenuWinterChildAlt400
1870
- <a href="#base-colorsComponentsMenuWinterChildAlt400"
1951
+ id="base-colorsComponentsMenuAutumnParent700"
1952
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: parent; variant: 700; ">
1953
+ colorsComponentsMenuAutumnParent700
1954
+ <a href="#base-colorsComponentsMenuAutumnParent700"
1871
1955
  title="permalink"
1872
1956
  class="permalink">
1873
1957
  🔗
1874
1958
  </a>
1875
1959
  </td>
1876
1960
  <td class="is-vcentered">
1877
- <pre>#262626ff</pre>
1961
+ <pre>#19475eff</pre>
1878
1962
  </td>
1879
1963
  <td class="is-vcentered">
1880
1964
  <div class="table__color-preview"
1881
- style="background-color: #262626ff;">
1965
+ style="background-color: #19475eff;">
1882
1966
  </div>
1883
1967
 
1884
1968
  </td>
1885
1969
  </tr>
1886
1970
  <tr>
1887
1971
  <td class="with-icons is-vcentered"
1888
- id="base-colorsComponentsMenuWinterChildAlt500"
1889
- title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 500; ">
1890
- colorsComponentsMenuWinterChildAlt500
1891
- <a href="#base-colorsComponentsMenuWinterChildAlt500"
1972
+ id="base-colorsComponentsMenuAutumnChild400"
1973
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: child; variant: 400; ">
1974
+ colorsComponentsMenuAutumnChild400
1975
+ <a href="#base-colorsComponentsMenuAutumnChild400"
1892
1976
  title="permalink"
1893
1977
  class="permalink">
1894
1978
  🔗
1895
1979
  </a>
1896
1980
  </td>
1897
1981
  <td class="is-vcentered">
1898
- <pre>#191919ff</pre>
1982
+ <pre>#19475eff</pre>
1899
1983
  </td>
1900
1984
  <td class="is-vcentered">
1901
1985
  <div class="table__color-preview"
1902
- style="background-color: #191919ff;">
1986
+ style="background-color: #19475eff;">
1903
1987
  </div>
1904
1988
 
1905
1989
  </td>
1906
1990
  </tr>
1907
1991
  <tr>
1908
1992
  <td class="with-icons is-vcentered"
1909
- id="base-colorsComponentsMenuWinterChildAlt600"
1910
- title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 600; ">
1911
- colorsComponentsMenuWinterChildAlt600
1912
- <a href="#base-colorsComponentsMenuWinterChildAlt600"
1993
+ id="base-colorsComponentsMenuAutumnChild500"
1994
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: child; variant: 500; ">
1995
+ colorsComponentsMenuAutumnChild500
1996
+ <a href="#base-colorsComponentsMenuAutumnChild500"
1997
+ title="permalink"
1998
+ class="permalink">
1999
+ 🔗
2000
+ </a>
2001
+ </td>
2002
+ <td class="is-vcentered">
2003
+ <pre>#001926ff</pre>
2004
+ </td>
2005
+ <td class="is-vcentered">
2006
+ <div class="table__color-preview"
2007
+ style="background-color: #001926ff;">
2008
+ </div>
2009
+
2010
+ </td>
2011
+ </tr>
2012
+ <tr>
2013
+ <td class="with-icons is-vcentered"
2014
+ id="base-colorsComponentsMenuAutumnChild600"
2015
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: child; variant: 600; ">
2016
+ colorsComponentsMenuAutumnChild600
2017
+ <a href="#base-colorsComponentsMenuAutumnChild600"
2018
+ title="permalink"
2019
+ class="permalink">
2020
+ 🔗
2021
+ </a>
2022
+ </td>
2023
+ <td class="is-vcentered">
2024
+ <pre>#007e45ff</pre>
2025
+ </td>
2026
+ <td class="is-vcentered">
2027
+ <div class="table__color-preview"
2028
+ style="background-color: #007e45ff;">
2029
+ </div>
2030
+
2031
+ </td>
2032
+ </tr>
2033
+ <tr>
2034
+ <td class="with-icons is-vcentered"
2035
+ id="base-colorsComponentsMenuAutumnChildAlt400"
2036
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: childAlt; variant: 400; ">
2037
+ colorsComponentsMenuAutumnChildAlt400
2038
+ <a href="#base-colorsComponentsMenuAutumnChildAlt400"
2039
+ title="permalink"
2040
+ class="permalink">
2041
+ 🔗
2042
+ </a>
2043
+ </td>
2044
+ <td class="is-vcentered">
2045
+ <pre>#19475eff</pre>
2046
+ </td>
2047
+ <td class="is-vcentered">
2048
+ <div class="table__color-preview"
2049
+ style="background-color: #19475eff;">
2050
+ </div>
2051
+
2052
+ </td>
2053
+ </tr>
2054
+ <tr>
2055
+ <td class="with-icons is-vcentered"
2056
+ id="base-colorsComponentsMenuAutumnChildAlt500"
2057
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: childAlt; variant: 500; ">
2058
+ colorsComponentsMenuAutumnChildAlt500
2059
+ <a href="#base-colorsComponentsMenuAutumnChildAlt500"
2060
+ title="permalink"
2061
+ class="permalink">
2062
+ 🔗
2063
+ </a>
2064
+ </td>
2065
+ <td class="is-vcentered">
2066
+ <pre>#00324cff</pre>
2067
+ </td>
2068
+ <td class="is-vcentered">
2069
+ <div class="table__color-preview"
2070
+ style="background-color: #00324cff;">
2071
+ </div>
2072
+
2073
+ </td>
2074
+ </tr>
2075
+ <tr>
2076
+ <td class="with-icons is-vcentered"
2077
+ id="base-colorsComponentsMenuAutumnChildAlt600"
2078
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: childAlt; variant: 600; ">
2079
+ colorsComponentsMenuAutumnChildAlt600
2080
+ <a href="#base-colorsComponentsMenuAutumnChildAlt600"
1913
2081
  title="permalink"
1914
2082
  class="permalink">
1915
2083
  🔗
@@ -6526,6 +6694,27 @@
6526
6694
 
6527
6695
  </td>
6528
6696
  </tr>
6697
+ <tr>
6698
+ <td class="with-icons is-vcentered"
6699
+ id="base-typographyCardParagraphM"
6700
+ title="theme: base; category: typography; group: card; name: paragraph; variant: m; ">
6701
+ typographyCardParagraphM
6702
+ <a href="#base-typographyCardParagraphM"
6703
+ title="permalink"
6704
+ class="permalink">
6705
+ 🔗
6706
+ </a>
6707
+ </td>
6708
+ <td class="is-vcentered">
6709
+ <pre>400 14px/150% Sage UI</pre>
6710
+ </td>
6711
+ <td class="is-vcentered">
6712
+ <div class="table__typography-preview">
6713
+ n/a
6714
+ </div>
6715
+
6716
+ </td>
6717
+ </tr>
6529
6718
  <tr>
6530
6719
  <td class="with-icons is-vcentered"
6531
6720
  id="base-typographyCardSelectTitleM"
@@ -6652,6 +6841,69 @@
6652
6841
 
6653
6842
  </td>
6654
6843
  </tr>
6844
+ <tr>
6845
+ <td class="with-icons is-vcentered"
6846
+ id="base-typographyDialogTitleXs"
6847
+ title="theme: base; category: typography; group: dialog; name: title; variant: xs; ">
6848
+ typographyDialogTitleXs
6849
+ <a href="#base-typographyDialogTitleXs"
6850
+ title="permalink"
6851
+ class="permalink">
6852
+ 🔗
6853
+ </a>
6854
+ </td>
6855
+ <td class="is-vcentered">
6856
+ <pre>700 24px/125% Sage UI</pre>
6857
+ </td>
6858
+ <td class="is-vcentered">
6859
+ <div class="table__typography-preview">
6860
+ n/a
6861
+ </div>
6862
+
6863
+ </td>
6864
+ </tr>
6865
+ <tr>
6866
+ <td class="with-icons is-vcentered"
6867
+ id="base-typographyDialogTitleS"
6868
+ title="theme: base; category: typography; group: dialog; name: title; variant: s; ">
6869
+ typographyDialogTitleS
6870
+ <a href="#base-typographyDialogTitleS"
6871
+ title="permalink"
6872
+ class="permalink">
6873
+ 🔗
6874
+ </a>
6875
+ </td>
6876
+ <td class="is-vcentered">
6877
+ <pre>700 24px/125% Sage UI</pre>
6878
+ </td>
6879
+ <td class="is-vcentered">
6880
+ <div class="table__typography-preview">
6881
+ n/a
6882
+ </div>
6883
+
6884
+ </td>
6885
+ </tr>
6886
+ <tr>
6887
+ <td class="with-icons is-vcentered"
6888
+ id="base-typographyDialogTitleMs"
6889
+ title="theme: base; category: typography; group: dialog; name: title; variant: ms; ">
6890
+ typographyDialogTitleMs
6891
+ <a href="#base-typographyDialogTitleMs"
6892
+ title="permalink"
6893
+ class="permalink">
6894
+ 🔗
6895
+ </a>
6896
+ </td>
6897
+ <td class="is-vcentered">
6898
+ <pre>700 24px/125% Sage UI</pre>
6899
+ </td>
6900
+ <td class="is-vcentered">
6901
+ <div class="table__typography-preview">
6902
+ n/a
6903
+ </div>
6904
+
6905
+ </td>
6906
+ </tr>
6655
6907
  <tr>
6656
6908
  <td class="with-icons is-vcentered"
6657
6909
  id="base-typographyDialogTitleM"
@@ -6673,6 +6925,153 @@
6673
6925
 
6674
6926
  </td>
6675
6927
  </tr>
6928
+ <tr>
6929
+ <td class="with-icons is-vcentered"
6930
+ id="base-typographyDialogTitleMl"
6931
+ title="theme: base; category: typography; group: dialog; name: title; variant: ml; ">
6932
+ typographyDialogTitleMl
6933
+ <a href="#base-typographyDialogTitleMl"
6934
+ title="permalink"
6935
+ class="permalink">
6936
+ 🔗
6937
+ </a>
6938
+ </td>
6939
+ <td class="is-vcentered">
6940
+ <pre>700 24px/125% Sage UI</pre>
6941
+ </td>
6942
+ <td class="is-vcentered">
6943
+ <div class="table__typography-preview">
6944
+ n/a
6945
+ </div>
6946
+
6947
+ </td>
6948
+ </tr>
6949
+ <tr>
6950
+ <td class="with-icons is-vcentered"
6951
+ id="base-typographyDialogTitleL"
6952
+ title="theme: base; category: typography; group: dialog; name: title; variant: l; ">
6953
+ typographyDialogTitleL
6954
+ <a href="#base-typographyDialogTitleL"
6955
+ title="permalink"
6956
+ class="permalink">
6957
+ 🔗
6958
+ </a>
6959
+ </td>
6960
+ <td class="is-vcentered">
6961
+ <pre>700 24px/125% Sage UI</pre>
6962
+ </td>
6963
+ <td class="is-vcentered">
6964
+ <div class="table__typography-preview">
6965
+ n/a
6966
+ </div>
6967
+
6968
+ </td>
6969
+ </tr>
6970
+ <tr>
6971
+ <td class="with-icons is-vcentered"
6972
+ id="base-typographyDialogTitleXl"
6973
+ title="theme: base; category: typography; group: dialog; name: title; variant: xl; ">
6974
+ typographyDialogTitleXl
6975
+ <a href="#base-typographyDialogTitleXl"
6976
+ title="permalink"
6977
+ class="permalink">
6978
+ 🔗
6979
+ </a>
6980
+ </td>
6981
+ <td class="is-vcentered">
6982
+ <pre>700 24px/125% Sage UI</pre>
6983
+ </td>
6984
+ <td class="is-vcentered">
6985
+ <div class="table__typography-preview">
6986
+ n/a
6987
+ </div>
6988
+
6989
+ </td>
6990
+ </tr>
6991
+ <tr>
6992
+ <td class="with-icons is-vcentered"
6993
+ id="base-typographyDialogTitleXxl"
6994
+ title="theme: base; category: typography; group: dialog; name: title; variant: xxl; ">
6995
+ typographyDialogTitleXxl
6996
+ <a href="#base-typographyDialogTitleXxl"
6997
+ title="permalink"
6998
+ class="permalink">
6999
+ 🔗
7000
+ </a>
7001
+ </td>
7002
+ <td class="is-vcentered">
7003
+ <pre>700 24px/125% Sage UI</pre>
7004
+ </td>
7005
+ <td class="is-vcentered">
7006
+ <div class="table__typography-preview">
7007
+ n/a
7008
+ </div>
7009
+
7010
+ </td>
7011
+ </tr>
7012
+ <tr>
7013
+ <td class="with-icons is-vcentered"
7014
+ id="base-typographyDialogParagraphXs"
7015
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: xs; ">
7016
+ typographyDialogParagraphXs
7017
+ <a href="#base-typographyDialogParagraphXs"
7018
+ title="permalink"
7019
+ class="permalink">
7020
+ 🔗
7021
+ </a>
7022
+ </td>
7023
+ <td class="is-vcentered">
7024
+ <pre>400 14px/150% Sage UI</pre>
7025
+ </td>
7026
+ <td class="is-vcentered">
7027
+ <div class="table__typography-preview">
7028
+ n/a
7029
+ </div>
7030
+
7031
+ </td>
7032
+ </tr>
7033
+ <tr>
7034
+ <td class="with-icons is-vcentered"
7035
+ id="base-typographyDialogParagraphS"
7036
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: s; ">
7037
+ typographyDialogParagraphS
7038
+ <a href="#base-typographyDialogParagraphS"
7039
+ title="permalink"
7040
+ class="permalink">
7041
+ 🔗
7042
+ </a>
7043
+ </td>
7044
+ <td class="is-vcentered">
7045
+ <pre>400 14px/150% Sage UI</pre>
7046
+ </td>
7047
+ <td class="is-vcentered">
7048
+ <div class="table__typography-preview">
7049
+ n/a
7050
+ </div>
7051
+
7052
+ </td>
7053
+ </tr>
7054
+ <tr>
7055
+ <td class="with-icons is-vcentered"
7056
+ id="base-typographyDialogParagraphMs"
7057
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: ms; ">
7058
+ typographyDialogParagraphMs
7059
+ <a href="#base-typographyDialogParagraphMs"
7060
+ title="permalink"
7061
+ class="permalink">
7062
+ 🔗
7063
+ </a>
7064
+ </td>
7065
+ <td class="is-vcentered">
7066
+ <pre>400 14px/150% Sage UI</pre>
7067
+ </td>
7068
+ <td class="is-vcentered">
7069
+ <div class="table__typography-preview">
7070
+ n/a
7071
+ </div>
7072
+
7073
+ </td>
7074
+ </tr>
6676
7075
  <tr>
6677
7076
  <td class="with-icons is-vcentered"
6678
7077
  id="base-typographyDialogParagraphM"
@@ -6694,6 +7093,90 @@
6694
7093
 
6695
7094
  </td>
6696
7095
  </tr>
7096
+ <tr>
7097
+ <td class="with-icons is-vcentered"
7098
+ id="base-typographyDialogParagraphMl"
7099
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: ml; ">
7100
+ typographyDialogParagraphMl
7101
+ <a href="#base-typographyDialogParagraphMl"
7102
+ title="permalink"
7103
+ class="permalink">
7104
+ 🔗
7105
+ </a>
7106
+ </td>
7107
+ <td class="is-vcentered">
7108
+ <pre>400 14px/150% Sage UI</pre>
7109
+ </td>
7110
+ <td class="is-vcentered">
7111
+ <div class="table__typography-preview">
7112
+ n/a
7113
+ </div>
7114
+
7115
+ </td>
7116
+ </tr>
7117
+ <tr>
7118
+ <td class="with-icons is-vcentered"
7119
+ id="base-typographyDialogParagraphL"
7120
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: l; ">
7121
+ typographyDialogParagraphL
7122
+ <a href="#base-typographyDialogParagraphL"
7123
+ title="permalink"
7124
+ class="permalink">
7125
+ 🔗
7126
+ </a>
7127
+ </td>
7128
+ <td class="is-vcentered">
7129
+ <pre>400 14px/150% Sage UI</pre>
7130
+ </td>
7131
+ <td class="is-vcentered">
7132
+ <div class="table__typography-preview">
7133
+ n/a
7134
+ </div>
7135
+
7136
+ </td>
7137
+ </tr>
7138
+ <tr>
7139
+ <td class="with-icons is-vcentered"
7140
+ id="base-typographyDialogParagraphXl"
7141
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: xl; ">
7142
+ typographyDialogParagraphXl
7143
+ <a href="#base-typographyDialogParagraphXl"
7144
+ title="permalink"
7145
+ class="permalink">
7146
+ 🔗
7147
+ </a>
7148
+ </td>
7149
+ <td class="is-vcentered">
7150
+ <pre>400 14px/150% Sage UI</pre>
7151
+ </td>
7152
+ <td class="is-vcentered">
7153
+ <div class="table__typography-preview">
7154
+ n/a
7155
+ </div>
7156
+
7157
+ </td>
7158
+ </tr>
7159
+ <tr>
7160
+ <td class="with-icons is-vcentered"
7161
+ id="base-typographyDialogParagraphXxl"
7162
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: xxl; ">
7163
+ typographyDialogParagraphXxl
7164
+ <a href="#base-typographyDialogParagraphXxl"
7165
+ title="permalink"
7166
+ class="permalink">
7167
+ 🔗
7168
+ </a>
7169
+ </td>
7170
+ <td class="is-vcentered">
7171
+ <pre>400 14px/150% Sage UI</pre>
7172
+ </td>
7173
+ <td class="is-vcentered">
7174
+ <div class="table__typography-preview">
7175
+ n/a
7176
+ </div>
7177
+
7178
+ </td>
7179
+ </tr>
6697
7180
  <tr>
6698
7181
  <td class="with-icons is-vcentered"
6699
7182
  id="base-typographyDrawerTitleM"