@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/base/index.html CHANGED
@@ -1417,178 +1417,199 @@
1417
1417
  </tr>
1418
1418
  <tr>
1419
1419
  <td class="with-icons is-vcentered"
1420
- id="base-colorsComponentsMenuAutumnStandard500"
1421
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: standard; variant: 500; ">
1422
- colorsComponentsMenuAutumnStandard500
1423
- <a href="#base-colorsComponentsMenuAutumnStandard500"
1420
+ id="base-colorsComponentsMenuWinterChild300"
1421
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 300; ">
1422
+ colorsComponentsMenuWinterChild300
1423
+ <a href="#base-colorsComponentsMenuWinterChild300"
1424
1424
  title="permalink"
1425
1425
  class="permalink">
1426
1426
  🔗
1427
1427
  </a>
1428
1428
  </td>
1429
1429
  <td class="is-vcentered">
1430
- <pre>#00324cff</pre>
1430
+ <pre>#4d4d4dff</pre>
1431
1431
  </td>
1432
1432
  <td class="is-vcentered">
1433
1433
  <div class="table__color-preview"
1434
- style="background-color: #00324cff;">
1434
+ style="background-color: #4d4d4dff;">
1435
1435
  </div>
1436
1436
 
1437
1437
  </td>
1438
1438
  </tr>
1439
1439
  <tr>
1440
1440
  <td class="with-icons is-vcentered"
1441
- id="base-colorsComponentsMenuAutumnStandard600"
1442
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: standard; variant: 600; ">
1443
- colorsComponentsMenuAutumnStandard600
1444
- <a href="#base-colorsComponentsMenuAutumnStandard600"
1441
+ id="base-colorsComponentsMenuWinterChild400"
1442
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 400; ">
1443
+ colorsComponentsMenuWinterChild400
1444
+ <a href="#base-colorsComponentsMenuWinterChild400"
1445
1445
  title="permalink"
1446
1446
  class="permalink">
1447
1447
  🔗
1448
1448
  </a>
1449
1449
  </td>
1450
1450
  <td class="is-vcentered">
1451
- <pre>#007e45ff</pre>
1451
+ <pre>#ff00ffff</pre>
1452
1452
  </td>
1453
1453
  <td class="is-vcentered">
1454
1454
  <div class="table__color-preview"
1455
- style="background-color: #007e45ff;">
1455
+ style="background-color: #ff00ffff;">
1456
1456
  </div>
1457
1457
 
1458
1458
  </td>
1459
1459
  </tr>
1460
1460
  <tr>
1461
1461
  <td class="with-icons is-vcentered"
1462
- id="base-colorsComponentsMenuAutumnStandard700"
1463
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: standard; variant: 700; ">
1464
- colorsComponentsMenuAutumnStandard700
1465
- <a href="#base-colorsComponentsMenuAutumnStandard700"
1462
+ id="base-colorsComponentsMenuWinterChild500"
1463
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 500; ">
1464
+ colorsComponentsMenuWinterChild500
1465
+ <a href="#base-colorsComponentsMenuWinterChild500"
1466
1466
  title="permalink"
1467
1467
  class="permalink">
1468
1468
  🔗
1469
1469
  </a>
1470
1470
  </td>
1471
1471
  <td class="is-vcentered">
1472
- <pre>#19475eff</pre>
1472
+ <pre>#262626ff</pre>
1473
1473
  </td>
1474
1474
  <td class="is-vcentered">
1475
1475
  <div class="table__color-preview"
1476
- style="background-color: #19475eff;">
1476
+ style="background-color: #262626ff;">
1477
1477
  </div>
1478
1478
 
1479
1479
  </td>
1480
1480
  </tr>
1481
1481
  <tr>
1482
1482
  <td class="with-icons is-vcentered"
1483
- id="base-colorsComponentsMenuAutumnParent500"
1484
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: parent; variant: 500; ">
1485
- colorsComponentsMenuAutumnParent500
1486
- <a href="#base-colorsComponentsMenuAutumnParent500"
1483
+ id="base-colorsComponentsMenuWinterChild600"
1484
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 600; ">
1485
+ colorsComponentsMenuWinterChild600
1486
+ <a href="#base-colorsComponentsMenuWinterChild600"
1487
1487
  title="permalink"
1488
1488
  class="permalink">
1489
1489
  🔗
1490
1490
  </a>
1491
1491
  </td>
1492
1492
  <td class="is-vcentered">
1493
- <pre>#00324cff</pre>
1493
+ <pre>#007e45ff</pre>
1494
1494
  </td>
1495
1495
  <td class="is-vcentered">
1496
1496
  <div class="table__color-preview"
1497
- style="background-color: #00324cff;">
1497
+ style="background-color: #007e45ff;">
1498
1498
  </div>
1499
1499
 
1500
1500
  </td>
1501
1501
  </tr>
1502
1502
  <tr>
1503
1503
  <td class="with-icons is-vcentered"
1504
- id="base-colorsComponentsMenuAutumnParent600"
1505
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: parent; variant: 600; ">
1506
- colorsComponentsMenuAutumnParent600
1507
- <a href="#base-colorsComponentsMenuAutumnParent600"
1504
+ id="base-colorsComponentsMenuWinterChild700"
1505
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 700; ">
1506
+ colorsComponentsMenuWinterChild700
1507
+ <a href="#base-colorsComponentsMenuWinterChild700"
1508
1508
  title="permalink"
1509
1509
  class="permalink">
1510
1510
  🔗
1511
1511
  </a>
1512
1512
  </td>
1513
1513
  <td class="is-vcentered">
1514
- <pre>#007e45ff</pre>
1514
+ <pre>#262626ff</pre>
1515
1515
  </td>
1516
1516
  <td class="is-vcentered">
1517
1517
  <div class="table__color-preview"
1518
- style="background-color: #007e45ff;">
1518
+ style="background-color: #262626ff;">
1519
1519
  </div>
1520
1520
 
1521
1521
  </td>
1522
1522
  </tr>
1523
1523
  <tr>
1524
1524
  <td class="with-icons is-vcentered"
1525
- id="base-colorsComponentsMenuAutumnParent700"
1526
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: parent; variant: 700; ">
1527
- colorsComponentsMenuAutumnParent700
1528
- <a href="#base-colorsComponentsMenuAutumnParent700"
1525
+ id="base-colorsComponentsMenuWinterChild800"
1526
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 800; ">
1527
+ colorsComponentsMenuWinterChild800
1528
+ <a href="#base-colorsComponentsMenuWinterChild800"
1529
1529
  title="permalink"
1530
1530
  class="permalink">
1531
1531
  🔗
1532
1532
  </a>
1533
1533
  </td>
1534
1534
  <td class="is-vcentered">
1535
- <pre>#19475eff</pre>
1535
+ <pre>#262626ff</pre>
1536
1536
  </td>
1537
1537
  <td class="is-vcentered">
1538
1538
  <div class="table__color-preview"
1539
- style="background-color: #19475eff;">
1539
+ style="background-color: #262626ff;">
1540
1540
  </div>
1541
1541
 
1542
1542
  </td>
1543
1543
  </tr>
1544
1544
  <tr>
1545
1545
  <td class="with-icons is-vcentered"
1546
- id="base-colorsComponentsMenuAutumnChild400"
1547
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: child; variant: 400; ">
1548
- colorsComponentsMenuAutumnChild400
1549
- <a href="#base-colorsComponentsMenuAutumnChild400"
1546
+ id="base-colorsComponentsMenuWinterChildAlt300"
1547
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 300; ">
1548
+ colorsComponentsMenuWinterChildAlt300
1549
+ <a href="#base-colorsComponentsMenuWinterChildAlt300"
1550
1550
  title="permalink"
1551
1551
  class="permalink">
1552
1552
  🔗
1553
1553
  </a>
1554
1554
  </td>
1555
1555
  <td class="is-vcentered">
1556
- <pre>#19475eff</pre>
1556
+ <pre>#4d4d4dff</pre>
1557
1557
  </td>
1558
1558
  <td class="is-vcentered">
1559
1559
  <div class="table__color-preview"
1560
- style="background-color: #19475eff;">
1560
+ style="background-color: #4d4d4dff;">
1561
1561
  </div>
1562
1562
 
1563
1563
  </td>
1564
1564
  </tr>
1565
1565
  <tr>
1566
1566
  <td class="with-icons is-vcentered"
1567
- id="base-colorsComponentsMenuAutumnChild500"
1568
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: child; variant: 500; ">
1569
- colorsComponentsMenuAutumnChild500
1570
- <a href="#base-colorsComponentsMenuAutumnChild500"
1567
+ id="base-colorsComponentsMenuWinterChildAlt400"
1568
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 400; ">
1569
+ colorsComponentsMenuWinterChildAlt400
1570
+ <a href="#base-colorsComponentsMenuWinterChildAlt400"
1571
1571
  title="permalink"
1572
1572
  class="permalink">
1573
1573
  🔗
1574
1574
  </a>
1575
1575
  </td>
1576
1576
  <td class="is-vcentered">
1577
- <pre>#001926ff</pre>
1577
+ <pre>#ff00ffff</pre>
1578
1578
  </td>
1579
1579
  <td class="is-vcentered">
1580
1580
  <div class="table__color-preview"
1581
- style="background-color: #001926ff;">
1581
+ style="background-color: #ff00ffff;">
1582
1582
  </div>
1583
1583
 
1584
1584
  </td>
1585
1585
  </tr>
1586
1586
  <tr>
1587
1587
  <td class="with-icons is-vcentered"
1588
- id="base-colorsComponentsMenuAutumnChild600"
1589
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: child; variant: 600; ">
1590
- colorsComponentsMenuAutumnChild600
1591
- <a href="#base-colorsComponentsMenuAutumnChild600"
1588
+ id="base-colorsComponentsMenuWinterChildAlt500"
1589
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 500; ">
1590
+ colorsComponentsMenuWinterChildAlt500
1591
+ <a href="#base-colorsComponentsMenuWinterChildAlt500"
1592
+ title="permalink"
1593
+ class="permalink">
1594
+ 🔗
1595
+ </a>
1596
+ </td>
1597
+ <td class="is-vcentered">
1598
+ <pre>#404040ff</pre>
1599
+ </td>
1600
+ <td class="is-vcentered">
1601
+ <div class="table__color-preview"
1602
+ style="background-color: #404040ff;">
1603
+ </div>
1604
+
1605
+ </td>
1606
+ </tr>
1607
+ <tr>
1608
+ <td class="with-icons is-vcentered"
1609
+ id="base-colorsComponentsMenuWinterChildAlt600"
1610
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 600; ">
1611
+ colorsComponentsMenuWinterChildAlt600
1612
+ <a href="#base-colorsComponentsMenuWinterChildAlt600"
1592
1613
  title="permalink"
1593
1614
  class="permalink">
1594
1615
  🔗
@@ -1606,63 +1627,63 @@
1606
1627
  </tr>
1607
1628
  <tr>
1608
1629
  <td class="with-icons is-vcentered"
1609
- id="base-colorsComponentsMenuAutumnChildAlt400"
1610
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: childAlt; variant: 400; ">
1611
- colorsComponentsMenuAutumnChildAlt400
1612
- <a href="#base-colorsComponentsMenuAutumnChildAlt400"
1630
+ id="base-colorsComponentsMenuWinterChildAlt700"
1631
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 700; ">
1632
+ colorsComponentsMenuWinterChildAlt700
1633
+ <a href="#base-colorsComponentsMenuWinterChildAlt700"
1613
1634
  title="permalink"
1614
1635
  class="permalink">
1615
1636
  🔗
1616
1637
  </a>
1617
1638
  </td>
1618
1639
  <td class="is-vcentered">
1619
- <pre>#19475eff</pre>
1640
+ <pre>#404040ff</pre>
1620
1641
  </td>
1621
1642
  <td class="is-vcentered">
1622
1643
  <div class="table__color-preview"
1623
- style="background-color: #19475eff;">
1644
+ style="background-color: #404040ff;">
1624
1645
  </div>
1625
1646
 
1626
1647
  </td>
1627
1648
  </tr>
1628
1649
  <tr>
1629
1650
  <td class="with-icons is-vcentered"
1630
- id="base-colorsComponentsMenuAutumnChildAlt500"
1631
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: childAlt; variant: 500; ">
1632
- colorsComponentsMenuAutumnChildAlt500
1633
- <a href="#base-colorsComponentsMenuAutumnChildAlt500"
1651
+ id="base-colorsComponentsMenuWinterChildAlt800"
1652
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 800; ">
1653
+ colorsComponentsMenuWinterChildAlt800
1654
+ <a href="#base-colorsComponentsMenuWinterChildAlt800"
1634
1655
  title="permalink"
1635
1656
  class="permalink">
1636
1657
  🔗
1637
1658
  </a>
1638
1659
  </td>
1639
1660
  <td class="is-vcentered">
1640
- <pre>#00324cff</pre>
1661
+ <pre>#404040ff</pre>
1641
1662
  </td>
1642
1663
  <td class="is-vcentered">
1643
1664
  <div class="table__color-preview"
1644
- style="background-color: #00324cff;">
1665
+ style="background-color: #404040ff;">
1645
1666
  </div>
1646
1667
 
1647
1668
  </td>
1648
1669
  </tr>
1649
1670
  <tr>
1650
1671
  <td class="with-icons is-vcentered"
1651
- id="base-colorsComponentsMenuAutumnChildAlt600"
1652
- title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: childAlt; variant: 600; ">
1653
- colorsComponentsMenuAutumnChildAlt600
1654
- <a href="#base-colorsComponentsMenuAutumnChildAlt600"
1672
+ id="base-colorsComponentsMenuWinterStandard400"
1673
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: standard; variant: 400; ">
1674
+ colorsComponentsMenuWinterStandard400
1675
+ <a href="#base-colorsComponentsMenuWinterStandard400"
1655
1676
  title="permalink"
1656
1677
  class="permalink">
1657
1678
  🔗
1658
1679
  </a>
1659
1680
  </td>
1660
1681
  <td class="is-vcentered">
1661
- <pre>#007e45ff</pre>
1682
+ <pre>#ff00ffff</pre>
1662
1683
  </td>
1663
1684
  <td class="is-vcentered">
1664
1685
  <div class="table__color-preview"
1665
- style="background-color: #007e45ff;">
1686
+ style="background-color: #ff00ffff;">
1666
1687
  </div>
1667
1688
 
1668
1689
  </td>
@@ -1730,6 +1751,27 @@
1730
1751
 
1731
1752
  </td>
1732
1753
  </tr>
1754
+ <tr>
1755
+ <td class="with-icons is-vcentered"
1756
+ id="base-colorsComponentsMenuWinterStandard800"
1757
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: standard; variant: 800; ">
1758
+ colorsComponentsMenuWinterStandard800
1759
+ <a href="#base-colorsComponentsMenuWinterStandard800"
1760
+ title="permalink"
1761
+ class="permalink">
1762
+ 🔗
1763
+ </a>
1764
+ </td>
1765
+ <td class="is-vcentered">
1766
+ <pre>#262626ff</pre>
1767
+ </td>
1768
+ <td class="is-vcentered">
1769
+ <div class="table__color-preview"
1770
+ style="background-color: #262626ff;">
1771
+ </div>
1772
+
1773
+ </td>
1774
+ </tr>
1733
1775
  <tr>
1734
1776
  <td class="with-icons is-vcentered"
1735
1777
  id="base-colorsComponentsMenuWinterParent500"
@@ -1795,52 +1837,94 @@
1795
1837
  </tr>
1796
1838
  <tr>
1797
1839
  <td class="with-icons is-vcentered"
1798
- id="base-colorsComponentsMenuWinterChild400"
1799
- title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 400; ">
1800
- colorsComponentsMenuWinterChild400
1801
- <a href="#base-colorsComponentsMenuWinterChild400"
1840
+ id="base-colorsComponentsMenuAutumnStandard500"
1841
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: standard; variant: 500; ">
1842
+ colorsComponentsMenuAutumnStandard500
1843
+ <a href="#base-colorsComponentsMenuAutumnStandard500"
1802
1844
  title="permalink"
1803
1845
  class="permalink">
1804
1846
  🔗
1805
1847
  </a>
1806
1848
  </td>
1807
1849
  <td class="is-vcentered">
1808
- <pre>#262626ff</pre>
1850
+ <pre>#00324cff</pre>
1809
1851
  </td>
1810
1852
  <td class="is-vcentered">
1811
1853
  <div class="table__color-preview"
1812
- style="background-color: #262626ff;">
1854
+ style="background-color: #00324cff;">
1813
1855
  </div>
1814
1856
 
1815
1857
  </td>
1816
1858
  </tr>
1817
1859
  <tr>
1818
1860
  <td class="with-icons is-vcentered"
1819
- id="base-colorsComponentsMenuWinterChild500"
1820
- title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 500; ">
1821
- colorsComponentsMenuWinterChild500
1822
- <a href="#base-colorsComponentsMenuWinterChild500"
1861
+ id="base-colorsComponentsMenuAutumnStandard600"
1862
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: standard; variant: 600; ">
1863
+ colorsComponentsMenuAutumnStandard600
1864
+ <a href="#base-colorsComponentsMenuAutumnStandard600"
1823
1865
  title="permalink"
1824
1866
  class="permalink">
1825
1867
  🔗
1826
1868
  </a>
1827
1869
  </td>
1828
1870
  <td class="is-vcentered">
1829
- <pre>#000000ff</pre>
1871
+ <pre>#007e45ff</pre>
1830
1872
  </td>
1831
1873
  <td class="is-vcentered">
1832
1874
  <div class="table__color-preview"
1833
- style="background-color: #000000ff;">
1875
+ style="background-color: #007e45ff;">
1834
1876
  </div>
1835
1877
 
1836
1878
  </td>
1837
1879
  </tr>
1838
1880
  <tr>
1839
1881
  <td class="with-icons is-vcentered"
1840
- id="base-colorsComponentsMenuWinterChild600"
1841
- title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 600; ">
1842
- colorsComponentsMenuWinterChild600
1843
- <a href="#base-colorsComponentsMenuWinterChild600"
1882
+ id="base-colorsComponentsMenuAutumnStandard700"
1883
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: standard; variant: 700; ">
1884
+ colorsComponentsMenuAutumnStandard700
1885
+ <a href="#base-colorsComponentsMenuAutumnStandard700"
1886
+ title="permalink"
1887
+ class="permalink">
1888
+ 🔗
1889
+ </a>
1890
+ </td>
1891
+ <td class="is-vcentered">
1892
+ <pre>#19475eff</pre>
1893
+ </td>
1894
+ <td class="is-vcentered">
1895
+ <div class="table__color-preview"
1896
+ style="background-color: #19475eff;">
1897
+ </div>
1898
+
1899
+ </td>
1900
+ </tr>
1901
+ <tr>
1902
+ <td class="with-icons is-vcentered"
1903
+ id="base-colorsComponentsMenuAutumnParent500"
1904
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: parent; variant: 500; ">
1905
+ colorsComponentsMenuAutumnParent500
1906
+ <a href="#base-colorsComponentsMenuAutumnParent500"
1907
+ title="permalink"
1908
+ class="permalink">
1909
+ 🔗
1910
+ </a>
1911
+ </td>
1912
+ <td class="is-vcentered">
1913
+ <pre>#00324cff</pre>
1914
+ </td>
1915
+ <td class="is-vcentered">
1916
+ <div class="table__color-preview"
1917
+ style="background-color: #00324cff;">
1918
+ </div>
1919
+
1920
+ </td>
1921
+ </tr>
1922
+ <tr>
1923
+ <td class="with-icons is-vcentered"
1924
+ id="base-colorsComponentsMenuAutumnParent600"
1925
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: parent; variant: 600; ">
1926
+ colorsComponentsMenuAutumnParent600
1927
+ <a href="#base-colorsComponentsMenuAutumnParent600"
1844
1928
  title="permalink"
1845
1929
  class="permalink">
1846
1930
  🔗
@@ -1858,52 +1942,136 @@
1858
1942
  </tr>
1859
1943
  <tr>
1860
1944
  <td class="with-icons is-vcentered"
1861
- id="base-colorsComponentsMenuWinterChildAlt400"
1862
- title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 400; ">
1863
- colorsComponentsMenuWinterChildAlt400
1864
- <a href="#base-colorsComponentsMenuWinterChildAlt400"
1945
+ id="base-colorsComponentsMenuAutumnParent700"
1946
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: parent; variant: 700; ">
1947
+ colorsComponentsMenuAutumnParent700
1948
+ <a href="#base-colorsComponentsMenuAutumnParent700"
1865
1949
  title="permalink"
1866
1950
  class="permalink">
1867
1951
  🔗
1868
1952
  </a>
1869
1953
  </td>
1870
1954
  <td class="is-vcentered">
1871
- <pre>#262626ff</pre>
1955
+ <pre>#19475eff</pre>
1872
1956
  </td>
1873
1957
  <td class="is-vcentered">
1874
1958
  <div class="table__color-preview"
1875
- style="background-color: #262626ff;">
1959
+ style="background-color: #19475eff;">
1876
1960
  </div>
1877
1961
 
1878
1962
  </td>
1879
1963
  </tr>
1880
1964
  <tr>
1881
1965
  <td class="with-icons is-vcentered"
1882
- id="base-colorsComponentsMenuWinterChildAlt500"
1883
- title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 500; ">
1884
- colorsComponentsMenuWinterChildAlt500
1885
- <a href="#base-colorsComponentsMenuWinterChildAlt500"
1966
+ id="base-colorsComponentsMenuAutumnChild400"
1967
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: child; variant: 400; ">
1968
+ colorsComponentsMenuAutumnChild400
1969
+ <a href="#base-colorsComponentsMenuAutumnChild400"
1886
1970
  title="permalink"
1887
1971
  class="permalink">
1888
1972
  🔗
1889
1973
  </a>
1890
1974
  </td>
1891
1975
  <td class="is-vcentered">
1892
- <pre>#191919ff</pre>
1976
+ <pre>#19475eff</pre>
1893
1977
  </td>
1894
1978
  <td class="is-vcentered">
1895
1979
  <div class="table__color-preview"
1896
- style="background-color: #191919ff;">
1980
+ style="background-color: #19475eff;">
1897
1981
  </div>
1898
1982
 
1899
1983
  </td>
1900
1984
  </tr>
1901
1985
  <tr>
1902
1986
  <td class="with-icons is-vcentered"
1903
- id="base-colorsComponentsMenuWinterChildAlt600"
1904
- title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 600; ">
1905
- colorsComponentsMenuWinterChildAlt600
1906
- <a href="#base-colorsComponentsMenuWinterChildAlt600"
1987
+ id="base-colorsComponentsMenuAutumnChild500"
1988
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: child; variant: 500; ">
1989
+ colorsComponentsMenuAutumnChild500
1990
+ <a href="#base-colorsComponentsMenuAutumnChild500"
1991
+ title="permalink"
1992
+ class="permalink">
1993
+ 🔗
1994
+ </a>
1995
+ </td>
1996
+ <td class="is-vcentered">
1997
+ <pre>#001926ff</pre>
1998
+ </td>
1999
+ <td class="is-vcentered">
2000
+ <div class="table__color-preview"
2001
+ style="background-color: #001926ff;">
2002
+ </div>
2003
+
2004
+ </td>
2005
+ </tr>
2006
+ <tr>
2007
+ <td class="with-icons is-vcentered"
2008
+ id="base-colorsComponentsMenuAutumnChild600"
2009
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: child; variant: 600; ">
2010
+ colorsComponentsMenuAutumnChild600
2011
+ <a href="#base-colorsComponentsMenuAutumnChild600"
2012
+ title="permalink"
2013
+ class="permalink">
2014
+ 🔗
2015
+ </a>
2016
+ </td>
2017
+ <td class="is-vcentered">
2018
+ <pre>#007e45ff</pre>
2019
+ </td>
2020
+ <td class="is-vcentered">
2021
+ <div class="table__color-preview"
2022
+ style="background-color: #007e45ff;">
2023
+ </div>
2024
+
2025
+ </td>
2026
+ </tr>
2027
+ <tr>
2028
+ <td class="with-icons is-vcentered"
2029
+ id="base-colorsComponentsMenuAutumnChildAlt400"
2030
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: childAlt; variant: 400; ">
2031
+ colorsComponentsMenuAutumnChildAlt400
2032
+ <a href="#base-colorsComponentsMenuAutumnChildAlt400"
2033
+ title="permalink"
2034
+ class="permalink">
2035
+ 🔗
2036
+ </a>
2037
+ </td>
2038
+ <td class="is-vcentered">
2039
+ <pre>#19475eff</pre>
2040
+ </td>
2041
+ <td class="is-vcentered">
2042
+ <div class="table__color-preview"
2043
+ style="background-color: #19475eff;">
2044
+ </div>
2045
+
2046
+ </td>
2047
+ </tr>
2048
+ <tr>
2049
+ <td class="with-icons is-vcentered"
2050
+ id="base-colorsComponentsMenuAutumnChildAlt500"
2051
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: childAlt; variant: 500; ">
2052
+ colorsComponentsMenuAutumnChildAlt500
2053
+ <a href="#base-colorsComponentsMenuAutumnChildAlt500"
2054
+ title="permalink"
2055
+ class="permalink">
2056
+ 🔗
2057
+ </a>
2058
+ </td>
2059
+ <td class="is-vcentered">
2060
+ <pre>#00324cff</pre>
2061
+ </td>
2062
+ <td class="is-vcentered">
2063
+ <div class="table__color-preview"
2064
+ style="background-color: #00324cff;">
2065
+ </div>
2066
+
2067
+ </td>
2068
+ </tr>
2069
+ <tr>
2070
+ <td class="with-icons is-vcentered"
2071
+ id="base-colorsComponentsMenuAutumnChildAlt600"
2072
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: childAlt; variant: 600; ">
2073
+ colorsComponentsMenuAutumnChildAlt600
2074
+ <a href="#base-colorsComponentsMenuAutumnChildAlt600"
1907
2075
  title="permalink"
1908
2076
  class="permalink">
1909
2077
  🔗
@@ -6470,6 +6638,27 @@
6470
6638
 
6471
6639
  </td>
6472
6640
  </tr>
6641
+ <tr>
6642
+ <td class="with-icons is-vcentered"
6643
+ id="base-typographyCardParagraphM"
6644
+ title="theme: base; category: typography; group: card; name: paragraph; variant: m; ">
6645
+ typographyCardParagraphM
6646
+ <a href="#base-typographyCardParagraphM"
6647
+ title="permalink"
6648
+ class="permalink">
6649
+ 🔗
6650
+ </a>
6651
+ </td>
6652
+ <td class="is-vcentered">
6653
+ <pre>400 14px/150% Sage UI</pre>
6654
+ </td>
6655
+ <td class="is-vcentered">
6656
+ <div class="table__typography-preview">
6657
+ n/a
6658
+ </div>
6659
+
6660
+ </td>
6661
+ </tr>
6473
6662
  <tr>
6474
6663
  <td class="with-icons is-vcentered"
6475
6664
  id="base-typographyCardSelectTitleM"
@@ -6596,6 +6785,69 @@
6596
6785
 
6597
6786
  </td>
6598
6787
  </tr>
6788
+ <tr>
6789
+ <td class="with-icons is-vcentered"
6790
+ id="base-typographyDialogTitleXs"
6791
+ title="theme: base; category: typography; group: dialog; name: title; variant: xs; ">
6792
+ typographyDialogTitleXs
6793
+ <a href="#base-typographyDialogTitleXs"
6794
+ title="permalink"
6795
+ class="permalink">
6796
+ 🔗
6797
+ </a>
6798
+ </td>
6799
+ <td class="is-vcentered">
6800
+ <pre>700 24px/125% Sage UI</pre>
6801
+ </td>
6802
+ <td class="is-vcentered">
6803
+ <div class="table__typography-preview">
6804
+ n/a
6805
+ </div>
6806
+
6807
+ </td>
6808
+ </tr>
6809
+ <tr>
6810
+ <td class="with-icons is-vcentered"
6811
+ id="base-typographyDialogTitleS"
6812
+ title="theme: base; category: typography; group: dialog; name: title; variant: s; ">
6813
+ typographyDialogTitleS
6814
+ <a href="#base-typographyDialogTitleS"
6815
+ title="permalink"
6816
+ class="permalink">
6817
+ 🔗
6818
+ </a>
6819
+ </td>
6820
+ <td class="is-vcentered">
6821
+ <pre>700 24px/125% Sage UI</pre>
6822
+ </td>
6823
+ <td class="is-vcentered">
6824
+ <div class="table__typography-preview">
6825
+ n/a
6826
+ </div>
6827
+
6828
+ </td>
6829
+ </tr>
6830
+ <tr>
6831
+ <td class="with-icons is-vcentered"
6832
+ id="base-typographyDialogTitleMs"
6833
+ title="theme: base; category: typography; group: dialog; name: title; variant: ms; ">
6834
+ typographyDialogTitleMs
6835
+ <a href="#base-typographyDialogTitleMs"
6836
+ title="permalink"
6837
+ class="permalink">
6838
+ 🔗
6839
+ </a>
6840
+ </td>
6841
+ <td class="is-vcentered">
6842
+ <pre>700 24px/125% Sage UI</pre>
6843
+ </td>
6844
+ <td class="is-vcentered">
6845
+ <div class="table__typography-preview">
6846
+ n/a
6847
+ </div>
6848
+
6849
+ </td>
6850
+ </tr>
6599
6851
  <tr>
6600
6852
  <td class="with-icons is-vcentered"
6601
6853
  id="base-typographyDialogTitleM"
@@ -6617,6 +6869,153 @@
6617
6869
 
6618
6870
  </td>
6619
6871
  </tr>
6872
+ <tr>
6873
+ <td class="with-icons is-vcentered"
6874
+ id="base-typographyDialogTitleMl"
6875
+ title="theme: base; category: typography; group: dialog; name: title; variant: ml; ">
6876
+ typographyDialogTitleMl
6877
+ <a href="#base-typographyDialogTitleMl"
6878
+ title="permalink"
6879
+ class="permalink">
6880
+ 🔗
6881
+ </a>
6882
+ </td>
6883
+ <td class="is-vcentered">
6884
+ <pre>700 24px/125% Sage UI</pre>
6885
+ </td>
6886
+ <td class="is-vcentered">
6887
+ <div class="table__typography-preview">
6888
+ n/a
6889
+ </div>
6890
+
6891
+ </td>
6892
+ </tr>
6893
+ <tr>
6894
+ <td class="with-icons is-vcentered"
6895
+ id="base-typographyDialogTitleL"
6896
+ title="theme: base; category: typography; group: dialog; name: title; variant: l; ">
6897
+ typographyDialogTitleL
6898
+ <a href="#base-typographyDialogTitleL"
6899
+ title="permalink"
6900
+ class="permalink">
6901
+ 🔗
6902
+ </a>
6903
+ </td>
6904
+ <td class="is-vcentered">
6905
+ <pre>700 24px/125% Sage UI</pre>
6906
+ </td>
6907
+ <td class="is-vcentered">
6908
+ <div class="table__typography-preview">
6909
+ n/a
6910
+ </div>
6911
+
6912
+ </td>
6913
+ </tr>
6914
+ <tr>
6915
+ <td class="with-icons is-vcentered"
6916
+ id="base-typographyDialogTitleXl"
6917
+ title="theme: base; category: typography; group: dialog; name: title; variant: xl; ">
6918
+ typographyDialogTitleXl
6919
+ <a href="#base-typographyDialogTitleXl"
6920
+ title="permalink"
6921
+ class="permalink">
6922
+ 🔗
6923
+ </a>
6924
+ </td>
6925
+ <td class="is-vcentered">
6926
+ <pre>700 24px/125% Sage UI</pre>
6927
+ </td>
6928
+ <td class="is-vcentered">
6929
+ <div class="table__typography-preview">
6930
+ n/a
6931
+ </div>
6932
+
6933
+ </td>
6934
+ </tr>
6935
+ <tr>
6936
+ <td class="with-icons is-vcentered"
6937
+ id="base-typographyDialogTitleXxl"
6938
+ title="theme: base; category: typography; group: dialog; name: title; variant: xxl; ">
6939
+ typographyDialogTitleXxl
6940
+ <a href="#base-typographyDialogTitleXxl"
6941
+ title="permalink"
6942
+ class="permalink">
6943
+ 🔗
6944
+ </a>
6945
+ </td>
6946
+ <td class="is-vcentered">
6947
+ <pre>700 24px/125% Sage UI</pre>
6948
+ </td>
6949
+ <td class="is-vcentered">
6950
+ <div class="table__typography-preview">
6951
+ n/a
6952
+ </div>
6953
+
6954
+ </td>
6955
+ </tr>
6956
+ <tr>
6957
+ <td class="with-icons is-vcentered"
6958
+ id="base-typographyDialogParagraphXs"
6959
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: xs; ">
6960
+ typographyDialogParagraphXs
6961
+ <a href="#base-typographyDialogParagraphXs"
6962
+ title="permalink"
6963
+ class="permalink">
6964
+ 🔗
6965
+ </a>
6966
+ </td>
6967
+ <td class="is-vcentered">
6968
+ <pre>400 14px/150% Sage UI</pre>
6969
+ </td>
6970
+ <td class="is-vcentered">
6971
+ <div class="table__typography-preview">
6972
+ n/a
6973
+ </div>
6974
+
6975
+ </td>
6976
+ </tr>
6977
+ <tr>
6978
+ <td class="with-icons is-vcentered"
6979
+ id="base-typographyDialogParagraphS"
6980
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: s; ">
6981
+ typographyDialogParagraphS
6982
+ <a href="#base-typographyDialogParagraphS"
6983
+ title="permalink"
6984
+ class="permalink">
6985
+ 🔗
6986
+ </a>
6987
+ </td>
6988
+ <td class="is-vcentered">
6989
+ <pre>400 14px/150% Sage UI</pre>
6990
+ </td>
6991
+ <td class="is-vcentered">
6992
+ <div class="table__typography-preview">
6993
+ n/a
6994
+ </div>
6995
+
6996
+ </td>
6997
+ </tr>
6998
+ <tr>
6999
+ <td class="with-icons is-vcentered"
7000
+ id="base-typographyDialogParagraphMs"
7001
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: ms; ">
7002
+ typographyDialogParagraphMs
7003
+ <a href="#base-typographyDialogParagraphMs"
7004
+ title="permalink"
7005
+ class="permalink">
7006
+ 🔗
7007
+ </a>
7008
+ </td>
7009
+ <td class="is-vcentered">
7010
+ <pre>400 14px/150% Sage UI</pre>
7011
+ </td>
7012
+ <td class="is-vcentered">
7013
+ <div class="table__typography-preview">
7014
+ n/a
7015
+ </div>
7016
+
7017
+ </td>
7018
+ </tr>
6620
7019
  <tr>
6621
7020
  <td class="with-icons is-vcentered"
6622
7021
  id="base-typographyDialogParagraphM"
@@ -6638,6 +7037,90 @@
6638
7037
 
6639
7038
  </td>
6640
7039
  </tr>
7040
+ <tr>
7041
+ <td class="with-icons is-vcentered"
7042
+ id="base-typographyDialogParagraphMl"
7043
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: ml; ">
7044
+ typographyDialogParagraphMl
7045
+ <a href="#base-typographyDialogParagraphMl"
7046
+ title="permalink"
7047
+ class="permalink">
7048
+ 🔗
7049
+ </a>
7050
+ </td>
7051
+ <td class="is-vcentered">
7052
+ <pre>400 14px/150% Sage UI</pre>
7053
+ </td>
7054
+ <td class="is-vcentered">
7055
+ <div class="table__typography-preview">
7056
+ n/a
7057
+ </div>
7058
+
7059
+ </td>
7060
+ </tr>
7061
+ <tr>
7062
+ <td class="with-icons is-vcentered"
7063
+ id="base-typographyDialogParagraphL"
7064
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: l; ">
7065
+ typographyDialogParagraphL
7066
+ <a href="#base-typographyDialogParagraphL"
7067
+ title="permalink"
7068
+ class="permalink">
7069
+ 🔗
7070
+ </a>
7071
+ </td>
7072
+ <td class="is-vcentered">
7073
+ <pre>400 14px/150% Sage UI</pre>
7074
+ </td>
7075
+ <td class="is-vcentered">
7076
+ <div class="table__typography-preview">
7077
+ n/a
7078
+ </div>
7079
+
7080
+ </td>
7081
+ </tr>
7082
+ <tr>
7083
+ <td class="with-icons is-vcentered"
7084
+ id="base-typographyDialogParagraphXl"
7085
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: xl; ">
7086
+ typographyDialogParagraphXl
7087
+ <a href="#base-typographyDialogParagraphXl"
7088
+ title="permalink"
7089
+ class="permalink">
7090
+ 🔗
7091
+ </a>
7092
+ </td>
7093
+ <td class="is-vcentered">
7094
+ <pre>400 14px/150% Sage UI</pre>
7095
+ </td>
7096
+ <td class="is-vcentered">
7097
+ <div class="table__typography-preview">
7098
+ n/a
7099
+ </div>
7100
+
7101
+ </td>
7102
+ </tr>
7103
+ <tr>
7104
+ <td class="with-icons is-vcentered"
7105
+ id="base-typographyDialogParagraphXxl"
7106
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: xxl; ">
7107
+ typographyDialogParagraphXxl
7108
+ <a href="#base-typographyDialogParagraphXxl"
7109
+ title="permalink"
7110
+ class="permalink">
7111
+ 🔗
7112
+ </a>
7113
+ </td>
7114
+ <td class="is-vcentered">
7115
+ <pre>400 14px/150% Sage UI</pre>
7116
+ </td>
7117
+ <td class="is-vcentered">
7118
+ <div class="table__typography-preview">
7119
+ n/a
7120
+ </div>
7121
+
7122
+ </td>
7123
+ </tr>
6641
7124
  <tr>
6642
7125
  <td class="with-icons is-vcentered"
6643
7126
  id="base-typographyDrawerTitleM"