@xsolla/xui-core 0.183.0 → 0.185.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.
package/index.js CHANGED
@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
30
30
  // src/index.tsx
31
31
  var index_exports = {};
32
32
  __export(index_exports, {
33
+ DISPLAY_SCALE_STEPS: () => DISPLAY_SCALE_STEPS,
33
34
  FontLoader: () => FontLoader,
34
35
  MOBILE_MAX_WIDTH: () => MOBILE_MAX_WIDTH,
35
36
  ModalIdContext: () => ModalIdContext,
@@ -72,8 +73,8 @@ __export(index_exports, {
72
73
  module.exports = __toCommonJS(index_exports);
73
74
  var import_react3 = __toESM(require("react"));
74
75
 
75
- // src/tokens/pentagram-dark.json
76
- var pentagram_dark_default = {
76
+ // src/tokens/dark.json
77
+ var dark_default = {
77
78
  background: {
78
79
  primary: "#1b2628",
79
80
  secondary: "#141d1f",
@@ -477,8 +478,8 @@ var pentagram_dark_default = {
477
478
  }
478
479
  };
479
480
 
480
- // src/tokens/pentagram-light.json
481
- var pentagram_light_default = {
481
+ // src/tokens/light.json
482
+ var light_default = {
482
483
  background: {
483
484
  primary: "#ffffff",
484
485
  secondary: "#f5f6f4",
@@ -1291,7 +1292,7 @@ var ltg_dark_default = {
1291
1292
  var blueprints_default = {
1292
1293
  background: {
1293
1294
  primary: "#ffffff",
1294
- secondary: "rgba(0, 0, 0, 0.1)",
1295
+ secondary: "#f5f6f4",
1295
1296
  brand: {
1296
1297
  primary: "#80eaff",
1297
1298
  secondary: "#b2f2ff"
@@ -1366,7 +1367,7 @@ var blueprints_default = {
1366
1367
  },
1367
1368
  border: {
1368
1369
  primary: "#000000",
1369
- secondary: "#f3f3f2",
1370
+ secondary: "rgba(0, 0, 0, 0.08)",
1370
1371
  brand: "#31cae8",
1371
1372
  brandExtra: "#5031e8",
1372
1373
  inverse: "rgba(255, 255, 255, 0.17)",
@@ -1381,47 +1382,857 @@ var blueprints_default = {
1381
1382
  brandExtra: "rgba(149, 128, 255, 0.3)",
1382
1383
  success: "rgba(149, 255, 128, 0.24)",
1383
1384
  warning: "rgba(255, 195, 128, 0.28)",
1384
- alert: "rgba(255, 149, 128, 0.24)",
1385
- neutral: "rgba(96, 127, 133, 0.24)",
1385
+ alert: "rgba(255, 149, 128, 0.24)",
1386
+ neutral: "rgba(96, 127, 133, 0.24)",
1387
+ monoHover: "rgba(0, 0, 0, 0.1)"
1388
+ },
1389
+ layer: {
1390
+ scrim: "rgba(0, 0, 0, 0.75)",
1391
+ float: "rgba(0, 0, 0, 0.5)"
1392
+ },
1393
+ control: {
1394
+ brand: {
1395
+ primary: {
1396
+ bg: "#80eaff",
1397
+ bgHover: "#b2f2ff",
1398
+ bgPress: "#55dcf6",
1399
+ bgDisable: "#cccccc",
1400
+ border: "#31cae8",
1401
+ borderHover: "#55dcf6",
1402
+ borderPress: "rgba(255, 255, 255, 0)",
1403
+ borderDisable: "rgba(255, 255, 255, 0)"
1404
+ },
1405
+ secondary: {
1406
+ bg: "#d6f8ff",
1407
+ bgHover: "#ebfcff",
1408
+ bgPress: "#b2f2ff",
1409
+ border: "#80eaff",
1410
+ borderHover: "#b2f2ff",
1411
+ borderPress: "rgba(255, 255, 255, 0)"
1412
+ },
1413
+ tertiary: {
1414
+ bg: "rgba(255, 255, 255, 0)",
1415
+ bgHover: "#ebfcff",
1416
+ bgPress: "#d6f8ff",
1417
+ border: "rgba(255, 255, 255, 0)",
1418
+ borderHover: "rgba(255, 255, 255, 0)",
1419
+ borderPress: "rgba(255, 255, 255, 0)"
1420
+ },
1421
+ text: {
1422
+ primary: "#000000",
1423
+ secondary: "#000000",
1424
+ tertiary: "#1b8398",
1425
+ disable: "#999999",
1426
+ ghost: "#22a8c3"
1427
+ },
1428
+ ghost: {
1429
+ bg: "rgba(0, 0, 0, 0)",
1430
+ bgHover: "rgba(34, 168, 195, 0.04)",
1431
+ bgPress: "rgba(34, 168, 195, 0.08)",
1432
+ border: "rgba(34, 168, 195, 0.1)",
1433
+ borderHover: "rgba(34, 168, 195, 0.16)",
1434
+ borderPress: "rgba(34, 168, 195, 0.1)"
1435
+ }
1436
+ },
1437
+ mono: {
1438
+ primary: {
1439
+ bg: "#141d1f",
1440
+ bgHover: "#233134",
1441
+ bgPress: "#000000",
1442
+ border: "rgba(255, 255, 255, 0)",
1443
+ borderHover: "rgba(255, 255, 255, 0)",
1444
+ borderPress: "rgba(255, 255, 255, 0)"
1445
+ },
1446
+ secondary: {
1447
+ bg: "#dddfd8",
1448
+ bgHover: "#ecede9",
1449
+ bgPress: "#c2c4ba",
1450
+ border: "#c2c4ba",
1451
+ borderHover: "#dddfd8",
1452
+ borderPress: "rgba(255, 255, 255, 0)"
1453
+ },
1454
+ tertiary: {
1455
+ bg: "rgba(255, 255, 255, 0)",
1456
+ bgHover: "#f5f6f4",
1457
+ bgPress: "#ecede9",
1458
+ border: "rgba(255, 255, 255, 0)",
1459
+ borderHover: "rgba(255, 255, 255, 0)",
1460
+ borderPress: "rgba(255, 255, 255, 0)"
1461
+ },
1462
+ text: {
1463
+ primary: "#ffffff",
1464
+ secondary: "#000000",
1465
+ tertiary: "#000000",
1466
+ ghost: "#000000"
1467
+ },
1468
+ ghost: {
1469
+ bg: "rgba(0, 0, 0, 0)",
1470
+ bgHover: "rgba(0, 0, 0, 0.04)",
1471
+ bgPress: "rgba(0, 0, 0, 0.08)",
1472
+ border: "rgba(0, 0, 0, 0.1)",
1473
+ borderHover: "rgba(0, 0, 0, 0.16)",
1474
+ borderPress: "rgba(0, 0, 0, 0.1)"
1475
+ }
1476
+ },
1477
+ brandExtra: {
1478
+ primary: {
1479
+ bg: "#7055f6",
1480
+ bgHover: "#5031e8",
1481
+ bgPress: "#3d22c3",
1482
+ border: "rgba(255, 255, 255, 0)",
1483
+ borderHover: "rgba(255, 255, 255, 0)",
1484
+ borderPress: "rgba(255, 255, 255, 0)"
1485
+ },
1486
+ secondary: {
1487
+ bg: "rgba(80, 49, 232, 0.4)",
1488
+ bgHover: "rgba(149, 128, 255, 0.4)",
1489
+ bgPress: "rgba(80, 49, 232, 0.4)",
1490
+ border: "rgba(255, 255, 255, 0)",
1491
+ borderHover: "rgba(255, 255, 255, 0)",
1492
+ borderPress: "rgba(255, 255, 255, 0)"
1493
+ },
1494
+ tertiary: {
1495
+ bg: "rgba(80, 49, 232, 0)",
1496
+ bgHover: "rgba(149, 128, 255, 0.07)",
1497
+ bgPress: "rgba(80, 49, 232, 0.12)",
1498
+ border: "rgba(255, 255, 255, 0)",
1499
+ borderHover: "rgba(255, 255, 255, 0)",
1500
+ borderPress: "rgba(255, 255, 255, 0)"
1501
+ },
1502
+ text: {
1503
+ primary: "#000000",
1504
+ secondary: "#000000",
1505
+ tertiary: "#301b98",
1506
+ ghost: "#79971b"
1507
+ },
1508
+ ghost: {
1509
+ bg: "rgba(0, 0, 0, 0)",
1510
+ bgHover: "rgba(121, 151, 27, 0.04)",
1511
+ bgPress: "rgba(121, 151, 27, 0.08)",
1512
+ border: "rgba(121, 151, 27, 0.1)",
1513
+ borderHover: "rgba(121, 151, 27, 0.16)",
1514
+ borderPress: "rgba(121, 151, 27, 0.1)"
1515
+ }
1516
+ },
1517
+ alert: {
1518
+ bg: "#ffbfb2",
1519
+ border: "#e84f30",
1520
+ primary: {
1521
+ bg: "#e84f30",
1522
+ bgHover: "#f67055",
1523
+ bgPress: "#c33d22",
1524
+ border: "rgba(255, 255, 255, 0)",
1525
+ borderHover: "rgba(255, 255, 255, 0)",
1526
+ borderPress: "rgba(255, 255, 255, 0)"
1527
+ },
1528
+ secondary: {
1529
+ bg: "rgba(232, 79, 48, 0.4)",
1530
+ bgHover: "rgba(246, 112, 85, 0.4)",
1531
+ bgPress: "rgba(195, 61, 34, 0.4)",
1532
+ border: "rgba(246, 112, 85, 0.32)",
1533
+ borderHover: "rgba(246, 112, 85, 0.32)",
1534
+ borderPress: "rgba(246, 112, 85, 0.32)"
1535
+ },
1536
+ tertiary: {
1537
+ bg: "rgba(255, 43, 0, 0)",
1538
+ bgHover: "rgba(255, 85, 51, 0.07)",
1539
+ bgPress: "rgba(204, 34, 0, 0.12)",
1540
+ border: "rgba(255, 255, 255, 0)",
1541
+ borderHover: "rgba(255, 255, 255, 0)",
1542
+ borderPress: "rgba(255, 255, 255, 0)"
1543
+ },
1544
+ text: {
1545
+ primary: "#ffffff",
1546
+ secondary: "#000000",
1547
+ tertiary: "#c33d22",
1548
+ ghost: "#c33d22"
1549
+ },
1550
+ ghost: {
1551
+ bg: "rgba(0, 0, 0, 0)",
1552
+ bgHover: "rgba(195, 61, 34, 0.04)",
1553
+ bgPress: "rgba(195, 61, 34, 0.08)",
1554
+ border: "rgba(195, 61, 34, 0.1)",
1555
+ borderHover: "rgba(195, 61, 34, 0.16)",
1556
+ borderPress: "rgba(195, 61, 34, 0.1)"
1557
+ }
1558
+ },
1559
+ input: {
1560
+ bg: "#ffffff",
1561
+ bgHover: "#f4f5f6",
1562
+ bgDisable: "#e8eced",
1563
+ border: "rgba(0, 0, 0, 0.1)",
1564
+ borderHover: "rgba(0, 0, 0, 0.15)",
1565
+ borderDisable: "rgba(0, 0, 0, 0)",
1566
+ text: "#000000",
1567
+ placeholder: "rgba(0, 0, 0, 0.6)",
1568
+ textDisable: "rgba(5, 5, 5, 0.36)"
1569
+ },
1570
+ focus: {
1571
+ bg: "#ffffff",
1572
+ border: "#31cae8"
1573
+ },
1574
+ check: {
1575
+ bg: "#d6f8ff",
1576
+ bgHover: "#ebfcff",
1577
+ bgDisable: "rgba(0, 0, 0, 0.25)",
1578
+ border: "#80eaff",
1579
+ borderHover: "#b2f2ff",
1580
+ borderDisable: "rgba(0, 0, 0, 0)",
1581
+ icon: "#000000"
1582
+ },
1583
+ faint: {
1584
+ bg: "rgba(0, 0, 0, 0.15)",
1585
+ bgHover: "rgba(0, 0, 0, 0.2)",
1586
+ border: "rgba(0, 0, 0, 0.1)",
1587
+ borderHover: "rgba(0, 0, 0, 0.15)"
1588
+ },
1589
+ slider: {
1590
+ bg: "#80eaff",
1591
+ bgHover: "#b2f2ff",
1592
+ bgDisable: "#c2c4ba"
1593
+ },
1594
+ switch: {
1595
+ bg: "#000000",
1596
+ bgHover: "#1b2628",
1597
+ bgDisable: "rgba(0, 0, 0, 0.25)",
1598
+ border: "rgba(0, 0, 0, 0)",
1599
+ borderHover: "rgba(0, 0, 0, 0)",
1600
+ borderDisable: "rgba(0, 0, 0, 0)"
1601
+ },
1602
+ knob: {
1603
+ bg: "#ffffff",
1604
+ bgHover: "#e8eced",
1605
+ bgActive: "#ffffff",
1606
+ bgActiveHover: "#e8eced",
1607
+ bgInactive: "#000000",
1608
+ bgInactiveHover: "#e8eced",
1609
+ bgDisable: "#000000"
1610
+ },
1611
+ text: {
1612
+ primary: "#000000",
1613
+ disable: "rgba(0, 0, 0, 0.4)"
1614
+ },
1615
+ link: {
1616
+ primary: "#22a8c3",
1617
+ primaryHover: "#31cae8",
1618
+ secondary: "#8aad1f",
1619
+ secondaryHover: "#b2e51a"
1620
+ },
1621
+ segmented: {
1622
+ bg: "rgba(0, 0, 0, 0.08)",
1623
+ bgHover: "rgba(0, 0, 0, 0.08)",
1624
+ bgActive: "#ffffff",
1625
+ border: "rgba(0, 0, 0, 0.1)",
1626
+ borderHover: "rgba(0, 0, 0, 0.1)",
1627
+ borderActive: "rgba(0, 0, 0, 0)",
1628
+ text: "#000000",
1629
+ textDisable: "rgba(0, 0, 0, 0.4)"
1630
+ },
1631
+ tagLabel: {
1632
+ product: {
1633
+ bg: "#d9ff66",
1634
+ text: "#000000",
1635
+ textCompact: "rgba(0, 0, 0, 0.48)"
1636
+ },
1637
+ rarity: {
1638
+ bg: "#141d1f",
1639
+ text: "#22a8c3"
1640
+ },
1641
+ name: {
1642
+ bg: "#ffffff",
1643
+ text: "#000000"
1644
+ },
1645
+ account: {
1646
+ bg: "#9580ff",
1647
+ text: "#000000",
1648
+ textCompact: "rgba(0, 0, 0, 0.48)"
1649
+ },
1650
+ id: {
1651
+ bg: "#dddfd8",
1652
+ bgSeries: "#000000",
1653
+ textSeries: "#d7dee0",
1654
+ textNumber: "#000000",
1655
+ textCompact: "rgba(0, 0, 0, 0.48)"
1656
+ },
1657
+ subentity: {
1658
+ bg: "#a9aca0",
1659
+ text: "#000000"
1660
+ },
1661
+ item: {
1662
+ bg: "#55dcf6",
1663
+ text: "#000000",
1664
+ textCompact: "rgba(0, 0, 0, 0.48)"
1665
+ }
1666
+ },
1667
+ toast: {
1668
+ bg: "#233134"
1669
+ },
1670
+ toggleButton: {
1671
+ bg: "rgba(0, 0, 0, 0.08)",
1672
+ bgHover: "rgba(0, 0, 0, 0.15)",
1673
+ bgActive: "#d6f8ff",
1674
+ bgDisable: "rgba(0, 0, 0, 0.2)",
1675
+ border: "rgba(0, 0, 0, 0.1)",
1676
+ borderHover: "rgba(0, 0, 0, 0.15)",
1677
+ borderActive: "#80eaff",
1678
+ borderDisable: "rgba(0, 0, 0, 0)",
1679
+ text: "#000000",
1680
+ textActive: "#000000",
1681
+ textDisable: "rgba(0, 0, 0, 0.36)"
1682
+ },
1683
+ appButton: {
1684
+ bg: "#dadbd7",
1685
+ bgHover: "#c1c2bc",
1686
+ bgPress: "#a8aaa2",
1687
+ border: "#c1c2bc",
1688
+ borderHover: "#a8aaa2",
1689
+ borderPress: "rgba(255, 255, 255, 0)",
1690
+ text: "#000000",
1691
+ textDisable: "#999999"
1692
+ }
1693
+ }
1694
+ };
1695
+
1696
+ // src/tokens/corpsite-dark.json
1697
+ var corpsite_dark_default = {
1698
+ background: {
1699
+ primary: "#141d1f",
1700
+ secondary: "#1b2628",
1701
+ brand: {
1702
+ primary: "#55dcf6",
1703
+ secondary: "#135d6c"
1704
+ },
1705
+ brandExtra: {
1706
+ primary: "#9580ff",
1707
+ secondary: "#301b98"
1708
+ },
1709
+ inverse: "#ffffff",
1710
+ static: {
1711
+ dark: "#000000",
1712
+ light: "#ffffff"
1713
+ },
1714
+ success: {
1715
+ primary: "#70f655",
1716
+ secondary: "#2f5827"
1717
+ },
1718
+ warning: {
1719
+ primary: "#f6ab55",
1720
+ secondary: "#6c4313"
1721
+ },
1722
+ alert: {
1723
+ primary: "#e8304f",
1724
+ secondary: "#58272f"
1725
+ },
1726
+ neutral: {
1727
+ primary: "#607f85",
1728
+ secondary: "#233134"
1729
+ }
1730
+ },
1731
+ content: {
1732
+ primary: "#e8eced",
1733
+ secondary: "#b7c5c8",
1734
+ tertiary: "#7b989d",
1735
+ brand: {
1736
+ primary: "#80eaff",
1737
+ secondary: "#31cae8"
1738
+ },
1739
+ brandExtra: {
1740
+ primary: "#9580ff",
1741
+ secondary: "#7055f6"
1742
+ },
1743
+ inverse: "#000000",
1744
+ static: {
1745
+ light: "#ffffff",
1746
+ dark: "#000000"
1747
+ },
1748
+ success: {
1749
+ primary: "#50e831",
1750
+ secondary: "#368f24"
1751
+ },
1752
+ warning: {
1753
+ primary: "#f6ab55",
1754
+ secondary: "#c37822"
1755
+ },
1756
+ alert: {
1757
+ primary: "#f65570",
1758
+ secondary: "#c3223d"
1759
+ },
1760
+ neutral: {
1761
+ primary: "#99aeb2",
1762
+ secondary: "#607f85"
1763
+ },
1764
+ on: {
1765
+ brand: "#000000",
1766
+ brandExtra: "#ffffff",
1767
+ success: "#000000",
1768
+ warning: "#000000",
1769
+ alert: "#ffffff",
1770
+ neutral: "#000000"
1771
+ }
1772
+ },
1773
+ border: {
1774
+ primary: "#ffffff",
1775
+ secondary: "#34474b",
1776
+ brand: "#b2f2ff",
1777
+ brandExtra: "#bfb2ff",
1778
+ inverse: "rgba(20, 29, 31, 0.15)",
1779
+ success: "#95ff80",
1780
+ warning: "#ffc380",
1781
+ alert: "#f65570",
1782
+ neutral: "#607f85"
1783
+ },
1784
+ overlay: {
1785
+ mono: "rgba(178, 242, 255, 0.06)",
1786
+ brand: "rgba(128, 234, 255, 0.2)",
1787
+ brandExtra: "rgba(149, 128, 255, 0.3)",
1788
+ success: "rgba(149, 255, 128, 0.2)",
1789
+ warning: "rgba(255, 195, 128, 0.24)",
1790
+ alert: "rgba(232, 48, 79, 0.32)",
1791
+ neutral: "rgba(123, 152, 157, 0.28)",
1792
+ monoHover: "rgba(178, 242, 255, 0.12)"
1793
+ },
1794
+ layer: {
1795
+ scrim: "rgba(0, 0, 0, 0.5)",
1796
+ float: "rgba(0, 0, 0, 0.95)"
1797
+ },
1798
+ control: {
1799
+ brand: {
1800
+ primary: {
1801
+ bg: "#80eaff",
1802
+ bgHover: "#b2f2ff",
1803
+ bgPress: "#d6f8ff",
1804
+ bgDisable: "rgba(52, 71, 75, 0.85)",
1805
+ border: "#31cae8",
1806
+ borderHover: "#55dcf6",
1807
+ borderPress: "rgba(85, 220, 246, 0)",
1808
+ borderDisable: "rgba(52, 71, 75, 0)"
1809
+ },
1810
+ secondary: {
1811
+ bg: "#135d6c",
1812
+ bgHover: "#1b8398",
1813
+ bgPress: "#22a8c3",
1814
+ border: "#1b8398",
1815
+ borderHover: "#22a8c3",
1816
+ borderPress: "rgba(34, 168, 195, 0)"
1817
+ },
1818
+ tertiary: {
1819
+ bg: "rgba(11, 56, 65, 0)",
1820
+ bgHover: "#0b3841",
1821
+ bgPress: "#135d6c",
1822
+ border: "rgba(11, 56, 65, 0)",
1823
+ borderHover: "rgba(11, 56, 65, 0)",
1824
+ borderPress: "rgba(19, 93, 108, 0)"
1825
+ },
1826
+ text: {
1827
+ primary: "#000000",
1828
+ secondary: "#80eaff",
1829
+ tertiary: "#31cae8",
1830
+ disable: "rgba(232, 236, 237, 0.2)",
1831
+ ghost: "#80eaff"
1832
+ },
1833
+ ghost: {
1834
+ bg: "rgba(255, 255, 255, 0)",
1835
+ bgHover: "rgba(128, 234, 255, 0.04)",
1836
+ bgPress: "rgba(128, 234, 255, 0.08)",
1837
+ border: "rgba(128, 234, 255, 0.16)",
1838
+ borderHover: "rgba(128, 234, 255, 0.24)",
1839
+ borderPress: "rgba(128, 234, 255, 0.16)"
1840
+ }
1841
+ },
1842
+ mono: {
1843
+ primary: {
1844
+ bg: "#f4f5f6",
1845
+ bgHover: "#e8eced",
1846
+ bgPress: "#d7dee0",
1847
+ border: "rgba(244, 245, 246, 0)",
1848
+ borderHover: "rgba(232, 236, 237, 0)",
1849
+ borderPress: "rgba(215, 222, 224, 0)"
1850
+ },
1851
+ secondary: {
1852
+ bg: "#233134",
1853
+ bgHover: "#34474b",
1854
+ bgPress: "#4a6368",
1855
+ border: "#34474b",
1856
+ borderHover: "#4a6368",
1857
+ borderPress: "rgba(74, 99, 104, 0)"
1858
+ },
1859
+ tertiary: {
1860
+ bg: "rgba(35, 49, 52, 0)",
1861
+ bgHover: "#233134",
1862
+ bgPress: "#34474b",
1863
+ border: "rgba(35, 49, 52, 0)",
1864
+ borderHover: "rgba(35, 49, 52, 0)",
1865
+ borderPress: "rgba(52, 71, 75, 0)"
1866
+ },
1867
+ text: {
1868
+ primary: "#000000",
1869
+ secondary: "#e8eced",
1870
+ tertiary: "#ffffff",
1871
+ ghost: "#ffffff"
1872
+ },
1873
+ ghost: {
1874
+ bg: "rgba(255, 255, 255, 0)",
1875
+ bgHover: "rgba(255, 255, 255, 0.04)",
1876
+ bgPress: "rgba(255, 255, 255, 0.08)",
1877
+ border: "rgba(255, 255, 255, 0.16)",
1878
+ borderHover: "rgba(255, 255, 255, 0.24)",
1879
+ borderPress: "rgba(255, 255, 255, 0.16)"
1880
+ }
1881
+ },
1882
+ brandExtra: {
1883
+ primary: {
1884
+ bg: "#7055f6",
1885
+ bgHover: "#9580ff",
1886
+ bgPress: "#bfb2ff",
1887
+ border: "#9580ff",
1888
+ borderHover: "#bfb2ff",
1889
+ borderPress: "rgba(191, 178, 255, 0)"
1890
+ },
1891
+ secondary: {
1892
+ bg: "#301b98",
1893
+ bgHover: "#3d22c3",
1894
+ bgPress: "#5031e8",
1895
+ border: "#3d22c3",
1896
+ borderHover: "#5031e8",
1897
+ borderPress: "rgba(80, 49, 232, 0)"
1898
+ },
1899
+ tertiary: {
1900
+ bg: "rgba(20, 11, 65, 0)",
1901
+ bgHover: "#140b41",
1902
+ bgPress: "#22136c",
1903
+ border: "rgba(20, 11, 65, 0)",
1904
+ borderHover: "rgba(20, 11, 65, 0)",
1905
+ borderPress: "rgba(34, 19, 108, 0)"
1906
+ },
1907
+ text: {
1908
+ primary: "#ffffff",
1909
+ secondary: "#ffffff",
1910
+ tertiary: "#9580ff",
1911
+ ghost: "#cef655"
1912
+ },
1913
+ ghost: {
1914
+ bg: "rgba(255, 255, 255, 0)",
1915
+ bgHover: "rgba(206, 246, 85, 0.04)",
1916
+ bgPress: "rgba(206, 246, 85, 0.08)",
1917
+ border: "rgba(206, 246, 85, 0.16)",
1918
+ borderHover: "rgba(206, 246, 85, 0.24)",
1919
+ borderPress: "rgba(206, 246, 85, 0.16)"
1920
+ }
1921
+ },
1922
+ alert: {
1923
+ bg: "#c3223d",
1924
+ border: "#f65570",
1925
+ primary: {
1926
+ bg: "#e8304f",
1927
+ bgHover: "#f65570",
1928
+ bgPress: "#ff8095",
1929
+ border: "#f65570",
1930
+ borderHover: "#ff8095",
1931
+ borderPress: "rgba(255, 128, 149, 0)"
1932
+ },
1933
+ secondary: {
1934
+ bg: "#8f2436",
1935
+ bgHover: "#c3223d",
1936
+ bgPress: "#e8304f",
1937
+ border: "#c3223d",
1938
+ borderHover: "#e8304f",
1939
+ borderPress: "rgba(232, 48, 79, 0)"
1940
+ },
1941
+ tertiary: {
1942
+ bg: "rgba(49, 28, 31, 0)",
1943
+ bgHover: "#311c1f",
1944
+ bgPress: "#58272f",
1945
+ border: "rgba(49, 28, 31, 0)",
1946
+ borderHover: "rgba(49, 28, 31, 0)",
1947
+ borderPress: "rgba(88, 39, 47, 0)"
1948
+ },
1949
+ text: {
1950
+ primary: "#ffffff",
1951
+ secondary: "#ffffff",
1952
+ tertiary: "#ff8095",
1953
+ ghost: "#f67055"
1954
+ },
1955
+ ghost: {
1956
+ bg: "rgba(255, 255, 255, 0)",
1957
+ bgHover: "rgba(246, 112, 85, 0.04)",
1958
+ bgPress: "rgba(246, 112, 85, 0.08)",
1959
+ border: "rgba(246, 112, 85, 0.16)",
1960
+ borderHover: "rgba(246, 112, 85, 0.24)",
1961
+ borderPress: "rgba(246, 112, 85, 0.16)"
1962
+ }
1963
+ },
1964
+ input: {
1965
+ bg: "rgba(178, 242, 255, 0.1)",
1966
+ bgHover: "rgba(178, 242, 255, 0.15)",
1967
+ bgDisable: "rgba(178, 242, 255, 0.25)",
1968
+ border: "rgba(178, 242, 255, 0.1)",
1969
+ borderHover: "rgba(178, 242, 255, 0.15)",
1970
+ borderDisable: "rgba(178, 242, 255, 0)",
1971
+ text: "#e8eced",
1972
+ placeholder: "rgba(232, 236, 237, 0.56)",
1973
+ textDisable: "rgba(232, 236, 237, 0.2)"
1974
+ },
1975
+ focus: {
1976
+ bg: "#141d1f",
1977
+ border: "#31cae8"
1978
+ },
1979
+ check: {
1980
+ bg: "rgba(128, 234, 255, 0.1)",
1981
+ bgHover: "rgba(128, 234, 255, 0.2)",
1982
+ bgDisable: "rgba(52, 71, 75, 0.85)",
1983
+ border: "#80eaff",
1984
+ borderHover: "#b2f2ff",
1985
+ borderDisable: "rgba(52, 71, 75, 0)",
1986
+ icon: "#b2f2ff"
1987
+ },
1988
+ faint: {
1989
+ bg: "#233134",
1990
+ bgHover: "#34474b",
1991
+ border: "#34474b",
1992
+ borderHover: "#4a6368"
1993
+ },
1994
+ slider: {
1995
+ bg: "#80eaff",
1996
+ bgHover: "#b2f2ff",
1997
+ bgDisable: "#34474b"
1998
+ },
1999
+ switch: {
2000
+ bg: "rgba(128, 234, 255, 0.1)",
2001
+ bgHover: "rgba(178, 242, 255, 0.2)",
2002
+ bgDisable: "rgba(52, 71, 75, 0.85)",
2003
+ border: "#80eaff",
2004
+ borderHover: "#b2f2ff",
2005
+ borderDisable: "rgba(52, 71, 75, 0)"
2006
+ },
2007
+ knob: {
2008
+ bg: "#80eaff",
2009
+ bgHover: "#b2f2ff",
2010
+ bgActive: "#80eaff",
2011
+ bgActiveHover: "#b2f2ff",
2012
+ bgInactive: "#4a6368",
2013
+ bgInactiveHover: "#607f85",
2014
+ bgDisable: "#34474b"
2015
+ },
2016
+ text: {
2017
+ primary: "#e8eced",
2018
+ disable: "rgba(232, 236, 237, 0.2)"
2019
+ },
2020
+ link: {
2021
+ primary: "#80eaff",
2022
+ primaryHover: "#1b8398",
2023
+ secondary: "#9580ff",
2024
+ secondaryHover: "#5031e8"
2025
+ },
2026
+ segmented: {
2027
+ bg: "rgba(20, 29, 31, 0)",
2028
+ bgHover: "#34474b",
2029
+ bgActive: "rgba(128, 234, 255, 0.1)",
2030
+ border: "rgba(52, 71, 75, 0)",
2031
+ borderHover: "#4a6368",
2032
+ borderActive: "#80eaff",
2033
+ text: "#e8eced",
2034
+ textDisable: "rgba(232, 236, 237, 0.2)"
2035
+ },
2036
+ tagLabel: {
2037
+ product: {
2038
+ bg: "#d9ff66",
2039
+ text: "#000000",
2040
+ textCompact: "rgba(255, 255, 255, 0.48)"
2041
+ },
2042
+ rarity: {
2043
+ bg: "#141d1f",
2044
+ text: "#22a8c3"
2045
+ },
2046
+ name: {
2047
+ bg: "#233134",
2048
+ text: "#b7c5c8"
2049
+ },
2050
+ account: {
2051
+ bg: "#9580ff",
2052
+ text: "#000000",
2053
+ textCompact: "rgba(255, 255, 255, 0.48)"
2054
+ },
2055
+ id: {
2056
+ bg: "#34474b",
2057
+ bgSeries: "#000000",
2058
+ textSeries: "#b7c5c8",
2059
+ textNumber: "#b7c5c8",
2060
+ textCompact: "rgba(255, 255, 255, 0.48)"
2061
+ },
2062
+ subentity: {
2063
+ bg: "#607f85",
2064
+ text: "#000000"
2065
+ },
2066
+ item: {
2067
+ bg: "#80eaff",
2068
+ text: "#000000",
2069
+ textCompact: "rgba(255, 255, 255, 0.48)"
2070
+ }
2071
+ },
2072
+ toast: {
2073
+ bg: "#607f85"
2074
+ },
2075
+ toggleButton: {
2076
+ bg: "#233134",
2077
+ bgHover: "#34474b",
2078
+ bgActive: "rgba(128, 234, 255, 0.1)",
2079
+ bgDisable: "rgba(52, 71, 75, 0.85)",
2080
+ border: "#34474b",
2081
+ borderHover: "#4a6368",
2082
+ borderActive: "#80eaff",
2083
+ borderDisable: "rgba(52, 71, 75, 0)",
2084
+ text: "#e8eced",
2085
+ textActive: "#e8eced",
2086
+ textDisable: "rgba(232, 236, 237, 0.2)"
2087
+ },
2088
+ appButton: {
2089
+ bg: "#34474b",
2090
+ bgHover: "#4b6368",
2091
+ bgPress: "#607f85",
2092
+ border: "#4b6368",
2093
+ borderHover: "#607f85",
2094
+ borderPress: "rgba(255, 255, 255, 0)",
2095
+ text: "#b7c5c8",
2096
+ textDisable: "rgba(232, 236, 237, 0.2)"
2097
+ }
2098
+ }
2099
+ };
2100
+
2101
+ // src/tokens/corpsite-light.json
2102
+ var corpsite_light_default = {
2103
+ background: {
2104
+ primary: "#ffffff",
2105
+ secondary: "#f5f6f4",
2106
+ brand: {
2107
+ primary: "#80eaff",
2108
+ secondary: "#b2f2ff"
2109
+ },
2110
+ brandExtra: {
2111
+ primary: "#7055f6",
2112
+ secondary: "#bfb2ff"
2113
+ },
2114
+ inverse: "#000000",
2115
+ static: {
2116
+ dark: "#000000",
2117
+ light: "#ffffff"
2118
+ },
2119
+ success: {
2120
+ primary: "#95ff80",
2121
+ secondary: "#bfffb2"
2122
+ },
2123
+ warning: {
2124
+ primary: "#ffc380",
2125
+ secondary: "#ffdbb2"
2126
+ },
2127
+ alert: {
2128
+ primary: "#f65570",
2129
+ secondary: "#ff8095"
2130
+ },
2131
+ neutral: {
2132
+ primary: "#a9aca0",
2133
+ secondary: "#ecede9"
2134
+ }
2135
+ },
2136
+ content: {
2137
+ primary: "#000000",
2138
+ secondary: "#5b5d56",
2139
+ tertiary: "#909385",
2140
+ brand: {
2141
+ primary: "#1b8398",
2142
+ secondary: "#31cae8"
2143
+ },
2144
+ brandExtra: {
2145
+ primary: "#7055f6",
2146
+ secondary: "#9580ff"
2147
+ },
2148
+ inverse: "#ffffff",
2149
+ static: {
2150
+ light: "#ffffff",
2151
+ dark: "#000000"
2152
+ },
2153
+ success: {
2154
+ primary: "#368f24",
2155
+ secondary: "#50e831"
2156
+ },
2157
+ warning: {
2158
+ primary: "#c37822",
2159
+ secondary: "#f6ab55"
2160
+ },
2161
+ alert: {
2162
+ primary: "#c3223d",
2163
+ secondary: "#f65570"
2164
+ },
2165
+ neutral: {
2166
+ primary: "#76786d",
2167
+ secondary: "#a9aca0"
2168
+ },
2169
+ on: {
2170
+ brand: "#000000",
2171
+ brandExtra: "#ffffff",
2172
+ success: "#000000",
2173
+ warning: "#000000",
2174
+ alert: "#ffffff",
2175
+ neutral: "#000000"
2176
+ }
2177
+ },
2178
+ border: {
2179
+ primary: "#000000",
2180
+ secondary: "#dddfd8",
2181
+ brand: "#31cae8",
2182
+ brandExtra: "#5031e8",
2183
+ inverse: "rgba(255, 255, 255, 0.17)",
2184
+ success: "#3dc322",
2185
+ warning: "#c37822",
2186
+ alert: "#c3223d",
2187
+ neutral: "#a9aca0"
2188
+ },
2189
+ overlay: {
2190
+ mono: "rgba(0, 0, 0, 0.05)",
2191
+ brand: "rgba(128, 234, 255, 0.3)",
2192
+ brandExtra: "rgba(149, 128, 255, 0.3)",
2193
+ success: "rgba(149, 255, 128, 0.24)",
2194
+ warning: "rgba(255, 195, 128, 0.28)",
2195
+ alert: "rgba(232, 48, 79, 0.24)",
2196
+ neutral: "rgba(169, 172, 160, 0.24)",
1386
2197
  monoHover: "rgba(0, 0, 0, 0.1)"
1387
2198
  },
1388
2199
  layer: {
1389
2200
  scrim: "rgba(0, 0, 0, 0.75)",
1390
- float: "rgba(0, 0, 0, 0.5)"
2201
+ float: "rgba(255, 255, 255, 0.95)"
1391
2202
  },
1392
2203
  control: {
1393
2204
  brand: {
1394
2205
  primary: {
1395
2206
  bg: "#80eaff",
1396
- bgHover: "#b2f2ff",
1397
- bgPress: "#55dcf6",
1398
- bgDisable: "#cccccc",
2207
+ bgHover: "#55dcf6",
2208
+ bgPress: "#31cae8",
2209
+ bgDisable: "rgba(221, 223, 216, 0.65)",
1399
2210
  border: "#31cae8",
1400
- borderHover: "#55dcf6",
1401
- borderPress: "rgba(255, 255, 255, 0)",
1402
- borderDisable: "rgba(255, 255, 255, 0)"
2211
+ borderHover: "#22a8c3",
2212
+ borderPress: "rgba(34, 168, 195, 0)",
2213
+ borderDisable: "rgba(221, 223, 216, 0)"
1403
2214
  },
1404
2215
  secondary: {
1405
2216
  bg: "#d6f8ff",
1406
- bgHover: "#ebfcff",
1407
- bgPress: "#b2f2ff",
1408
- border: "#80eaff",
1409
- borderHover: "#b2f2ff",
1410
- borderPress: "rgba(255, 255, 255, 0)"
2217
+ bgHover: "#b2f2ff",
2218
+ bgPress: "#80eaff",
2219
+ border: "#b2f2ff",
2220
+ borderHover: "#80eaff",
2221
+ borderPress: "rgba(128, 234, 255, 0)"
1411
2222
  },
1412
2223
  tertiary: {
1413
- bg: "rgba(255, 255, 255, 0)",
2224
+ bg: "rgba(235, 252, 255, 0)",
1414
2225
  bgHover: "#ebfcff",
1415
2226
  bgPress: "#d6f8ff",
1416
- border: "rgba(255, 255, 255, 0)",
1417
- borderHover: "rgba(255, 255, 255, 0)",
1418
- borderPress: "rgba(255, 255, 255, 0)"
2227
+ border: "rgba(235, 252, 255, 0)",
2228
+ borderHover: "rgba(235, 252, 255, 0)",
2229
+ borderPress: "rgba(214, 248, 255, 0)"
1419
2230
  },
1420
2231
  text: {
1421
2232
  primary: "#000000",
1422
2233
  secondary: "#000000",
1423
- tertiary: "#1b8398",
1424
- disable: "#999999",
2234
+ tertiary: "#000000",
2235
+ disable: "rgba(0, 0, 0, 0.3)",
1425
2236
  ghost: "#22a8c3"
1426
2237
  },
1427
2238
  ghost: {
@@ -1435,28 +2246,28 @@ var blueprints_default = {
1435
2246
  },
1436
2247
  mono: {
1437
2248
  primary: {
1438
- bg: "#141d1f",
1439
- bgHover: "#233134",
1440
- bgPress: "#000000",
1441
- border: "rgba(255, 255, 255, 0)",
1442
- borderHover: "rgba(255, 255, 255, 0)",
1443
- borderPress: "rgba(255, 255, 255, 0)"
2249
+ bg: "#1a1a19",
2250
+ bgHover: "#272725",
2251
+ bgPress: "#41423e",
2252
+ border: "rgba(26, 26, 25, 0)",
2253
+ borderHover: "rgba(39, 39, 37, 0)",
2254
+ borderPress: "rgba(65, 66, 62, 0)"
1444
2255
  },
1445
2256
  secondary: {
1446
- bg: "#dddfd8",
1447
- bgHover: "#ecede9",
2257
+ bg: "#ecede9",
2258
+ bgHover: "#dddfd8",
1448
2259
  bgPress: "#c2c4ba",
1449
- border: "#c2c4ba",
1450
- borderHover: "#dddfd8",
1451
- borderPress: "rgba(255, 255, 255, 0)"
2260
+ border: "#dddfd8",
2261
+ borderHover: "#c2c4ba",
2262
+ borderPress: "rgba(194, 196, 186, 0)"
1452
2263
  },
1453
2264
  tertiary: {
1454
- bg: "rgba(255, 255, 255, 0)",
1455
- bgHover: "#f5f6f4",
1456
- bgPress: "#ecede9",
1457
- border: "rgba(255, 255, 255, 0)",
1458
- borderHover: "rgba(255, 255, 255, 0)",
1459
- borderPress: "rgba(255, 255, 255, 0)"
2265
+ bg: "rgba(236, 237, 233, 0)",
2266
+ bgHover: "#ecede9",
2267
+ bgPress: "#dddfd8",
2268
+ border: "rgba(236, 237, 233, 0)",
2269
+ borderHover: "rgba(236, 237, 233, 0)",
2270
+ borderPress: "rgba(221, 223, 216, 0)"
1460
2271
  },
1461
2272
  text: {
1462
2273
  primary: "#ffffff",
@@ -1478,28 +2289,28 @@ var blueprints_default = {
1478
2289
  bg: "#7055f6",
1479
2290
  bgHover: "#5031e8",
1480
2291
  bgPress: "#3d22c3",
1481
- border: "rgba(255, 255, 255, 0)",
1482
- borderHover: "rgba(255, 255, 255, 0)",
1483
- borderPress: "rgba(255, 255, 255, 0)"
2292
+ border: "#5031e8",
2293
+ borderHover: "#3d22c3",
2294
+ borderPress: "rgba(61, 34, 195, 0)"
1484
2295
  },
1485
2296
  secondary: {
1486
- bg: "rgba(80, 49, 232, 0.4)",
1487
- bgHover: "rgba(149, 128, 255, 0.4)",
1488
- bgPress: "rgba(80, 49, 232, 0.4)",
1489
- border: "rgba(255, 255, 255, 0)",
1490
- borderHover: "rgba(255, 255, 255, 0)",
1491
- borderPress: "rgba(255, 255, 255, 0)"
2297
+ bg: "#ddd6ff",
2298
+ bgHover: "#bfb2ff",
2299
+ bgPress: "#9580ff",
2300
+ border: "#bfb2ff",
2301
+ borderHover: "#9580ff",
2302
+ borderPress: "rgba(149, 128, 255, 0)"
1492
2303
  },
1493
2304
  tertiary: {
1494
- bg: "rgba(80, 49, 232, 0)",
1495
- bgHover: "rgba(149, 128, 255, 0.07)",
1496
- bgPress: "rgba(80, 49, 232, 0.12)",
1497
- border: "rgba(255, 255, 255, 0)",
1498
- borderHover: "rgba(255, 255, 255, 0)",
1499
- borderPress: "rgba(255, 255, 255, 0)"
2305
+ bg: "rgba(238, 235, 255, 0)",
2306
+ bgHover: "#eeebff",
2307
+ bgPress: "#ddd6ff",
2308
+ border: "rgba(238, 235, 255, 0)",
2309
+ borderHover: "rgba(238, 235, 255, 0)",
2310
+ borderPress: "rgba(221, 214, 255, 0)"
1500
2311
  },
1501
2312
  text: {
1502
- primary: "#000000",
2313
+ primary: "#ffffff",
1503
2314
  secondary: "#000000",
1504
2315
  tertiary: "#301b98",
1505
2316
  ghost: "#79971b"
@@ -1514,36 +2325,36 @@ var blueprints_default = {
1514
2325
  }
1515
2326
  },
1516
2327
  alert: {
1517
- bg: "#ffbfb2",
1518
- border: "#e84f30",
2328
+ bg: "#ffb2bf",
2329
+ border: "#f65570",
1519
2330
  primary: {
1520
- bg: "#e84f30",
1521
- bgHover: "#f67055",
1522
- bgPress: "#c33d22",
1523
- border: "rgba(255, 255, 255, 0)",
1524
- borderHover: "rgba(255, 255, 255, 0)",
1525
- borderPress: "rgba(255, 255, 255, 0)"
2331
+ bg: "#e8304f",
2332
+ bgHover: "#c3223d",
2333
+ bgPress: "#8f2436",
2334
+ border: "#c3223d",
2335
+ borderHover: "#8f2436",
2336
+ borderPress: "rgba(152, 27, 48, 0)"
1526
2337
  },
1527
2338
  secondary: {
1528
- bg: "rgba(232, 79, 48, 0.4)",
1529
- bgHover: "rgba(246, 112, 85, 0.4)",
1530
- bgPress: "rgba(195, 61, 34, 0.4)",
1531
- border: "rgba(246, 112, 85, 0.32)",
1532
- borderHover: "rgba(246, 112, 85, 0.32)",
1533
- borderPress: "rgba(246, 112, 85, 0.32)"
2339
+ bg: "#ffd6dd",
2340
+ bgHover: "#ffb2bf",
2341
+ bgPress: "#ff8095",
2342
+ border: "#ffb2bf",
2343
+ borderHover: "#ff8095",
2344
+ borderPress: "rgba(255, 128, 149, 0)"
1534
2345
  },
1535
2346
  tertiary: {
1536
- bg: "rgba(255, 43, 0, 0)",
1537
- bgHover: "rgba(255, 85, 51, 0.07)",
1538
- bgPress: "rgba(204, 34, 0, 0.12)",
1539
- border: "rgba(255, 255, 255, 0)",
1540
- borderHover: "rgba(255, 255, 255, 0)",
1541
- borderPress: "rgba(255, 255, 255, 0)"
2347
+ bg: "rgba(255, 235, 238, 0)",
2348
+ bgHover: "#ffebee",
2349
+ bgPress: "#ffd6dd",
2350
+ border: "rgba(255, 214, 221, 0)",
2351
+ borderHover: "rgba(255, 214, 221, 0)",
2352
+ borderPress: "rgba(255, 214, 221, 0)"
1542
2353
  },
1543
2354
  text: {
1544
2355
  primary: "#ffffff",
1545
2356
  secondary: "#000000",
1546
- tertiary: "#c33d22",
2357
+ tertiary: "#8f2436",
1547
2358
  ghost: "#c33d22"
1548
2359
  },
1549
2360
  ghost: {
@@ -1556,76 +2367,76 @@ var blueprints_default = {
1556
2367
  }
1557
2368
  },
1558
2369
  input: {
1559
- bg: "#ffffff",
1560
- bgHover: "#f4f5f6",
1561
- bgDisable: "#e8eced",
2370
+ bg: "rgba(0, 0, 0, 0.08)",
2371
+ bgHover: "rgba(0, 0, 0, 0.15)",
2372
+ bgDisable: "rgba(0, 0, 0, 0.2)",
1562
2373
  border: "rgba(0, 0, 0, 0.1)",
1563
2374
  borderHover: "rgba(0, 0, 0, 0.15)",
1564
- borderDisable: "rgba(0, 0, 0, 0)",
2375
+ borderDisable: "rgba(221, 223, 216, 0)",
1565
2376
  text: "#000000",
1566
2377
  placeholder: "rgba(0, 0, 0, 0.6)",
1567
- textDisable: "rgba(5, 5, 5, 0.36)"
2378
+ textDisable: "rgba(0, 0, 0, 0.2)"
1568
2379
  },
1569
2380
  focus: {
1570
2381
  bg: "#ffffff",
1571
2382
  border: "#31cae8"
1572
2383
  },
1573
2384
  check: {
1574
- bg: "#d6f8ff",
1575
- bgHover: "#ebfcff",
1576
- bgDisable: "rgba(0, 0, 0, 0.25)",
2385
+ bg: "rgba(128, 234, 255, 0.15)",
2386
+ bgHover: "rgba(128, 234, 255, 0.3)",
2387
+ bgDisable: "rgba(221, 223, 216, 0.65)",
1577
2388
  border: "#80eaff",
1578
- borderHover: "#b2f2ff",
1579
- borderDisable: "rgba(0, 0, 0, 0)",
1580
- icon: "#000000"
2389
+ borderHover: "#55dcf6",
2390
+ borderDisable: "rgba(221, 223, 216, 0)",
2391
+ icon: "#31cae8"
1581
2392
  },
1582
2393
  faint: {
1583
- bg: "rgba(0, 0, 0, 0.15)",
1584
- bgHover: "rgba(0, 0, 0, 0.2)",
1585
- border: "rgba(0, 0, 0, 0.1)",
1586
- borderHover: "rgba(0, 0, 0, 0.15)"
2394
+ bg: "#ecede9",
2395
+ bgHover: "#dddfd8",
2396
+ border: "#dddfd8",
2397
+ borderHover: "#c2c4ba"
1587
2398
  },
1588
2399
  slider: {
1589
- bg: "#80eaff",
1590
- bgHover: "#b2f2ff",
1591
- bgDisable: "#c2c4ba"
2400
+ bg: "#1a1a19",
2401
+ bgHover: "#272725",
2402
+ bgDisable: "#dddfd8"
1592
2403
  },
1593
2404
  switch: {
1594
- bg: "#000000",
1595
- bgHover: "#1b2628",
1596
- bgDisable: "rgba(0, 0, 0, 0.25)",
1597
- border: "rgba(0, 0, 0, 0)",
1598
- borderHover: "rgba(0, 0, 0, 0)",
1599
- borderDisable: "rgba(0, 0, 0, 0)"
2405
+ bg: "rgba(128, 234, 255, 0.15)",
2406
+ bgHover: "rgba(128, 234, 255, 0.3)",
2407
+ bgDisable: "rgba(221, 223, 216, 0.65)",
2408
+ border: "#80eaff",
2409
+ borderHover: "#55dcf6",
2410
+ borderDisable: "rgba(221, 223, 216, 0)"
1600
2411
  },
1601
2412
  knob: {
1602
- bg: "#ffffff",
1603
- bgHover: "#e8eced",
1604
- bgActive: "#ffffff",
1605
- bgActiveHover: "#e8eced",
1606
- bgInactive: "#000000",
1607
- bgInactiveHover: "#e8eced",
1608
- bgDisable: "#000000"
2413
+ bg: "#1a1a19",
2414
+ bgHover: "#272725",
2415
+ bgActive: "#55dcf6",
2416
+ bgActiveHover: "#31cae8",
2417
+ bgInactive: "#c2c4ba",
2418
+ bgInactiveHover: "#a9aca0",
2419
+ bgDisable: "#dddfd8"
1609
2420
  },
1610
2421
  text: {
1611
2422
  primary: "#000000",
1612
- disable: "rgba(0, 0, 0, 0.4)"
2423
+ disable: "rgba(0, 0, 0, 0.2)"
1613
2424
  },
1614
2425
  link: {
1615
- primary: "#22a8c3",
1616
- primaryHover: "#31cae8",
1617
- secondary: "#8aad1f",
1618
- secondaryHover: "#b2e51a"
2426
+ primary: "#1b8398",
2427
+ primaryHover: "#55dcf6",
2428
+ secondary: "#5031e8",
2429
+ secondaryHover: "#9580ff"
1619
2430
  },
1620
2431
  segmented: {
1621
- bg: "rgba(0, 0, 0, 0.08)",
1622
- bgHover: "rgba(0, 0, 0, 0.08)",
1623
- bgActive: "#ffffff",
1624
- border: "rgba(0, 0, 0, 0.1)",
1625
- borderHover: "rgba(0, 0, 0, 0.1)",
1626
- borderActive: "rgba(0, 0, 0, 0)",
2432
+ bg: "rgba(255, 255, 255, 0.08)",
2433
+ bgHover: "#dddfd8",
2434
+ bgActive: "rgba(128, 234, 255, 0.15)",
2435
+ border: "rgba(255, 255, 255, 0.1)",
2436
+ borderHover: "#c2c4ba",
2437
+ borderActive: "#80eaff",
1627
2438
  text: "#000000",
1628
- textDisable: "rgba(0, 0, 0, 0.4)"
2439
+ textDisable: "rgba(0, 0, 0, 0.2)"
1629
2440
  },
1630
2441
  tagLabel: {
1631
2442
  product: {
@@ -1647,14 +2458,14 @@ var blueprints_default = {
1647
2458
  textCompact: "rgba(0, 0, 0, 0.48)"
1648
2459
  },
1649
2460
  id: {
1650
- bg: "#dddfd8",
2461
+ bg: "#dadbd7",
1651
2462
  bgSeries: "#000000",
1652
2463
  textSeries: "#d7dee0",
1653
2464
  textNumber: "#000000",
1654
2465
  textCompact: "rgba(0, 0, 0, 0.48)"
1655
2466
  },
1656
2467
  subentity: {
1657
- bg: "#a9aca0",
2468
+ bg: "#a8aaa2",
1658
2469
  text: "#000000"
1659
2470
  },
1660
2471
  item: {
@@ -1664,20 +2475,20 @@ var blueprints_default = {
1664
2475
  }
1665
2476
  },
1666
2477
  toast: {
1667
- bg: "#233134"
2478
+ bg: "#a9aca0"
1668
2479
  },
1669
2480
  toggleButton: {
1670
- bg: "rgba(0, 0, 0, 0.08)",
1671
- bgHover: "rgba(0, 0, 0, 0.15)",
1672
- bgActive: "#d6f8ff",
1673
- bgDisable: "rgba(0, 0, 0, 0.2)",
1674
- border: "rgba(0, 0, 0, 0.1)",
1675
- borderHover: "rgba(0, 0, 0, 0.15)",
2481
+ bg: "#ecede9",
2482
+ bgHover: "#dddfd8",
2483
+ bgActive: "rgba(128, 234, 255, 0.15)",
2484
+ bgDisable: "rgba(221, 223, 216, 0.65)",
2485
+ border: "#dddfd8",
2486
+ borderHover: "#c2c4ba",
1676
2487
  borderActive: "#80eaff",
1677
- borderDisable: "rgba(0, 0, 0, 0)",
2488
+ borderDisable: "rgba(221, 223, 216, 0)",
1678
2489
  text: "#000000",
1679
2490
  textActive: "#000000",
1680
- textDisable: "rgba(0, 0, 0, 0.36)"
2491
+ textDisable: "rgba(0, 0, 0, 0.2)"
1681
2492
  },
1682
2493
  appButton: {
1683
2494
  bg: "#dadbd7",
@@ -1694,21 +2505,29 @@ var blueprints_default = {
1694
2505
 
1695
2506
  // src/tokens/colors.ts
1696
2507
  var colors = {
1697
- dark: pentagram_dark_default,
1698
- light: pentagram_light_default,
1699
- "pentagram-dark": pentagram_dark_default,
1700
- "pentagram-light": pentagram_light_default,
2508
+ dark: dark_default,
2509
+ light: light_default,
2510
+ "pentagram-dark": dark_default,
2511
+ "pentagram-light": light_default,
1701
2512
  "ltg-dark": ltg_dark_default,
1702
- blueprints: blueprints_default
2513
+ blueprints: blueprints_default,
2514
+ "corpsite-dark": corpsite_dark_default,
2515
+ "corpsite-light": corpsite_light_default
1703
2516
  };
1704
2517
 
1705
2518
  // src/tokens/spacing.ts
1706
2519
  var spacing = {
1707
2520
  xs: 4,
2521
+ sm: 8,
2522
+ md: 16,
2523
+ lg: 24,
2524
+ xl: 32,
2525
+ /** @deprecated Use `sm` instead (same 8px). Kept for backwards compatibility. */
1708
2526
  s: 8,
2527
+ /** @deprecated Use `md` instead (same 16px). Kept for backwards compatibility. */
1709
2528
  m: 16,
1710
- l: 24,
1711
- xl: 32
2529
+ /** @deprecated Use `lg` instead (same 24px). Kept for backwards compatibility. */
2530
+ l: 24
1712
2531
  };
1713
2532
  var radius = {
1714
2533
  button: 4,
@@ -1759,7 +2578,7 @@ var shape = {
1759
2578
  input: {
1760
2579
  xl: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
1761
2580
  lg: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
1762
- md: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
2581
+ md: { borderRadius: radiusScale["75"], borderWidth: stroke["1"] },
1763
2582
  sm: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
1764
2583
  xs: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] }
1765
2584
  },
@@ -1821,12 +2640,16 @@ var shape = {
1821
2640
  xs: { borderRadius: radiusScale["50"] }
1822
2641
  },
1823
2642
  avatar: {
1824
- xl: { borderRadius: radiusScale["100"], borderWidth: stroke["2"] },
1825
- lg: { borderRadius: radiusScale["75"], borderWidth: stroke["2"] },
1826
- md: { borderRadius: radiusScale["75"], borderWidth: stroke["2"] },
1827
- sm: { borderRadius: radiusScale["50"], borderWidth: stroke["2"] },
1828
- xs: { borderRadius: radiusScale["50"], borderWidth: stroke["2"] },
1829
- xxs: { borderRadius: radiusScale["25"], borderWidth: stroke["2"] }
2643
+ xl: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
2644
+ lg: { borderRadius: radiusScale["75"], borderWidth: stroke["1"] },
2645
+ md: { borderRadius: radiusScale["75"], borderWidth: stroke["1"] },
2646
+ sm: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
2647
+ xs: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
2648
+ xxs: { borderRadius: radiusScale["25"], borderWidth: stroke["1"] }
2649
+ },
2650
+ cell: {
2651
+ borderRadius: radiusScale["100"],
2652
+ borderWidth: stroke["1"]
1830
2653
  },
1831
2654
  modal: {
1832
2655
  borderRadius: radiusScale["100"]
@@ -1858,24 +2681,33 @@ var shadow = {
1858
2681
 
1859
2682
  // src/tokens/fonts.ts
1860
2683
  var FALLBACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
2684
+ var PILAT = `"Pilat", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`;
2685
+ var PILAT_WIDE = `"Pilat Wide", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`;
2686
+ var AKTIV_GROTESK = `"Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`;
1861
2687
  var displayFontByContext = {
1862
- b2b: `"Pilat", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`,
1863
- b2c: `"Pilat Wide", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`
2688
+ b2b: PILAT,
2689
+ b2c: PILAT_WIDE,
2690
+ corpsite: PILAT
1864
2691
  };
1865
- var bodyFont = `"Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`;
2692
+ var textFontByContext = {
2693
+ b2b: AKTIV_GROTESK,
2694
+ b2c: AKTIV_GROTESK,
2695
+ corpsite: PILAT
2696
+ };
2697
+ var bodyFont = AKTIV_GROTESK;
1866
2698
  var fonts = {
1867
2699
  heading: displayFontByContext.b2b,
1868
2700
  body: bodyFont,
1869
- /** Paragraph/reading font — same families as body */
1870
- text: bodyFont,
2701
+ /** Paragraph/reading font — Figma `text` role */
2702
+ text: textFontByContext.b2b,
1871
2703
  /** @deprecated Use `heading` or `body` instead */
1872
2704
  primary: bodyFont
1873
2705
  };
1874
2706
  var getFonts = (productContext = "b2b") => ({
1875
2707
  heading: displayFontByContext[productContext],
1876
2708
  body: bodyFont,
1877
- /** Paragraph/reading font — same families as body */
1878
- text: bodyFont,
2709
+ /** Paragraph/reading font — Figma `text` role (differs from `body` for corpsite) */
2710
+ text: textFontByContext[productContext],
1879
2711
  /** @deprecated Use `heading` or `body` instead */
1880
2712
  primary: bodyFont
1881
2713
  });
@@ -1902,6 +2734,12 @@ var SCALE_STEPS = [
1902
2734
  "650",
1903
2735
  "750"
1904
2736
  ];
2737
+ var DISPLAY_SCALE_STEPS = [
2738
+ ...SCALE_STEPS,
2739
+ "800",
2740
+ "850",
2741
+ "900"
2742
+ ];
1905
2743
  var fontSize = {
1906
2744
  "75": { common: 10, mobile: 10 },
1907
2745
  "100": { common: 12, mobile: 11 },
@@ -1915,7 +2753,10 @@ var fontSize = {
1915
2753
  "450": { common: 40, mobile: 32 },
1916
2754
  "550": { common: 48, mobile: 40 },
1917
2755
  "650": { common: 56, mobile: 48 },
1918
- "750": { common: 64, mobile: 56 }
2756
+ "750": { common: 64, mobile: 56 },
2757
+ "800": { common: 72, mobile: 64 },
2758
+ "850": { common: 80, mobile: 72 },
2759
+ "900": { common: 96, mobile: 80 }
1919
2760
  };
1920
2761
  var lineHeightDisplay = {
1921
2762
  "75": { common: 10, mobile: 10 },
@@ -1930,7 +2771,10 @@ var lineHeightDisplay = {
1930
2771
  "450": { common: 40, mobile: 32 },
1931
2772
  "550": { common: 48, mobile: 40 },
1932
2773
  "650": { common: 56, mobile: 48 },
1933
- "750": { common: 64, mobile: 56 }
2774
+ "750": { common: 64, mobile: 56 },
2775
+ "800": { common: 72, mobile: 64 },
2776
+ "850": { common: 80, mobile: 72 },
2777
+ "900": { common: 96, mobile: 80 }
1934
2778
  };
1935
2779
  var lineHeightCompact = {
1936
2780
  "75": { common: 14, mobile: 13 },
@@ -2103,21 +2947,21 @@ var typographyTokens = {
2103
2947
  h3: {
2104
2948
  fontSize: fontSize["350"].common,
2105
2949
  lineHeight: `${lineHeightDisplay["350"].common}px`,
2106
- fontWeight: 400,
2950
+ fontWeight: 500,
2107
2951
  scaleStep: "350",
2108
2952
  lineHeightCategory: "display"
2109
2953
  },
2110
2954
  h4: {
2111
2955
  fontSize: fontSize["250"].common,
2112
2956
  lineHeight: `${lineHeightDisplay["250"].common}px`,
2113
- fontWeight: 400,
2957
+ fontWeight: 500,
2114
2958
  scaleStep: "250",
2115
2959
  lineHeightCategory: "display"
2116
2960
  },
2117
2961
  h5: {
2118
2962
  fontSize: fontSize["200"].common,
2119
2963
  lineHeight: `${lineHeightDisplay["200"].common}px`,
2120
- fontWeight: 600,
2964
+ fontWeight: 500,
2121
2965
  scaleStep: "200",
2122
2966
  lineHeightCategory: "display"
2123
2967
  }
@@ -2196,6 +3040,122 @@ var typographyTokens = {
2196
3040
  }
2197
3041
  }
2198
3042
  }
3043
+ },
3044
+ corpsite: {
3045
+ heading: {
3046
+ h1: {
3047
+ fontSize: fontSize["650"].common,
3048
+ lineHeight: `${lineHeightDisplay["650"].common}px`,
3049
+ fontWeight: 300,
3050
+ scaleStep: "650",
3051
+ lineHeightCategory: "display"
3052
+ },
3053
+ h2: {
3054
+ fontSize: fontSize["550"].common,
3055
+ lineHeight: `${lineHeightDisplay["550"].common}px`,
3056
+ fontWeight: 400,
3057
+ scaleStep: "550",
3058
+ lineHeightCategory: "display"
3059
+ },
3060
+ h3: {
3061
+ fontSize: fontSize["450"].common,
3062
+ lineHeight: `${lineHeightDisplay["450"].common}px`,
3063
+ fontWeight: 400,
3064
+ scaleStep: "450",
3065
+ lineHeightCategory: "display"
3066
+ },
3067
+ h4: {
3068
+ fontSize: fontSize["350"].common,
3069
+ lineHeight: `${lineHeightDisplay["350"].common}px`,
3070
+ fontWeight: 400,
3071
+ scaleStep: "350",
3072
+ lineHeightCategory: "display"
3073
+ },
3074
+ h5: {
3075
+ fontSize: fontSize["250"].common,
3076
+ lineHeight: `${lineHeightDisplay["250"].common}px`,
3077
+ fontWeight: 500,
3078
+ scaleStep: "250",
3079
+ lineHeightCategory: "display"
3080
+ }
3081
+ },
3082
+ basic: {
3083
+ // Figma splits corpsite display into display-lg (96px) / display-md (80px)
3084
+ // / display-sm (64px). The app models a single `display`; mapped to
3085
+ // display-lg (step 900) — the largest, matching Figma's primary display.
3086
+ display: {
3087
+ fontSize: fontSize["900"].common,
3088
+ lineHeight: `${lineHeightDisplay["900"].common}px`,
3089
+ fontWeight: 300,
3090
+ scaleStep: "900",
3091
+ lineHeightCategory: "display"
3092
+ },
3093
+ "body-lg": {
3094
+ fontSize: fontSize["175"].common,
3095
+ lineHeight: `${lineHeightCompact["175"].common}px`,
3096
+ fontWeight: 500,
3097
+ scaleStep: "175",
3098
+ lineHeightCategory: "compact",
3099
+ accent: { fontWeight: 600 },
3100
+ paragraph: {
3101
+ lineHeight: `${lineHeightText["175"].common}px`,
3102
+ spacing: 20,
3103
+ lineHeightScaleStep: "175"
3104
+ }
3105
+ },
3106
+ "body-md": {
3107
+ fontSize: fontSize["150"].common,
3108
+ lineHeight: `${lineHeightCompact["150"].common}px`,
3109
+ fontWeight: 500,
3110
+ scaleStep: "150",
3111
+ lineHeightCategory: "compact",
3112
+ accent: { fontWeight: 600 },
3113
+ paragraph: {
3114
+ lineHeight: `${lineHeightText["150"].common}px`,
3115
+ spacing: 16,
3116
+ lineHeightScaleStep: "150"
3117
+ }
3118
+ },
3119
+ "body-sm": {
3120
+ fontSize: fontSize["125"].common,
3121
+ lineHeight: `${lineHeightCompact["125"].common}px`,
3122
+ fontWeight: 500,
3123
+ scaleStep: "125",
3124
+ lineHeightCategory: "compact",
3125
+ accent: { fontWeight: 600 },
3126
+ paragraph: {
3127
+ lineHeight: `${lineHeightText["125"].common}px`,
3128
+ spacing: 12,
3129
+ lineHeightScaleStep: "125"
3130
+ }
3131
+ },
3132
+ "body-xs": {
3133
+ fontSize: fontSize["100"].common,
3134
+ lineHeight: `${lineHeightCompact["100"].common}px`,
3135
+ fontWeight: 400,
3136
+ scaleStep: "100",
3137
+ lineHeightCategory: "compact",
3138
+ accent: { fontWeight: 500 },
3139
+ paragraph: {
3140
+ lineHeight: `${lineHeightText["100"].common}px`,
3141
+ spacing: 8,
3142
+ lineHeightScaleStep: "100"
3143
+ }
3144
+ },
3145
+ "body-xxs": {
3146
+ fontSize: fontSize["75"].common,
3147
+ lineHeight: `${lineHeightCompact["75"].common}px`,
3148
+ fontWeight: 400,
3149
+ scaleStep: "75",
3150
+ lineHeightCategory: "compact",
3151
+ accent: { fontWeight: 500 },
3152
+ paragraph: {
3153
+ lineHeight: `${lineHeightText["75"].common}px`,
3154
+ spacing: 6,
3155
+ lineHeightScaleStep: "75"
3156
+ }
3157
+ }
3158
+ }
2199
3159
  }
2200
3160
  };
2201
3161
  var defaultProductContext = "b2b";
@@ -2468,10 +3428,10 @@ var MOBILE_MAX_WIDTH = breakpoints.desktop - 1;
2468
3428
  // src/styles/typography-css.ts
2469
3429
  function buildDeclarations(mode) {
2470
3430
  const lines = [];
2471
- for (const step of SCALE_STEPS) {
3431
+ for (const step of DISPLAY_SCALE_STEPS) {
2472
3432
  lines.push(`--xui-font-size-${step}:${fontSize[step][mode]}px`);
2473
3433
  }
2474
- for (const step of SCALE_STEPS) {
3434
+ for (const step of DISPLAY_SCALE_STEPS) {
2475
3435
  lines.push(`--xui-lh-display-${step}:${lineHeightDisplay[step][mode]}px`);
2476
3436
  }
2477
3437
  for (const step of SCALE_STEPS) {
@@ -3033,21 +3993,21 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
3033
3993
  },
3034
3994
  lg: {
3035
3995
  height: 128,
3036
- padding: spacing.l,
3996
+ padding: spacing.lg,
3037
3997
  fontSize: 18,
3038
3998
  iconSize: 28,
3039
3999
  radius: shape.input.lg.borderRadius
3040
4000
  },
3041
4001
  md: {
3042
4002
  height: 112,
3043
- padding: spacing.m,
4003
+ padding: spacing.md,
3044
4004
  fontSize: 16,
3045
4005
  iconSize: 24,
3046
4006
  radius: shape.input.md.borderRadius
3047
4007
  },
3048
4008
  sm: {
3049
4009
  height: 96,
3050
- padding: spacing.s,
4010
+ padding: spacing.sm,
3051
4011
  fontSize: 14,
3052
4012
  iconSize: 20,
3053
4013
  radius: shape.input.sm.borderRadius
@@ -3994,6 +4954,7 @@ var ModalIdContext = (0, import_react3.createContext)(null);
3994
4954
  var useModalId = () => (0, import_react3.useContext)(ModalIdContext);
3995
4955
  // Annotate the CommonJS export names for ESM import in node:
3996
4956
  0 && (module.exports = {
4957
+ DISPLAY_SCALE_STEPS,
3997
4958
  FontLoader,
3998
4959
  MOBILE_MAX_WIDTH,
3999
4960
  ModalIdContext,