@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.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  // src/index.tsx
2
2
  import React3, { createContext, useContext, useState, useMemo } from "react";
3
3
 
4
- // src/tokens/pentagram-dark.json
5
- var pentagram_dark_default = {
4
+ // src/tokens/dark.json
5
+ var dark_default = {
6
6
  background: {
7
7
  primary: "#1b2628",
8
8
  secondary: "#141d1f",
@@ -406,8 +406,8 @@ var pentagram_dark_default = {
406
406
  }
407
407
  };
408
408
 
409
- // src/tokens/pentagram-light.json
410
- var pentagram_light_default = {
409
+ // src/tokens/light.json
410
+ var light_default = {
411
411
  background: {
412
412
  primary: "#ffffff",
413
413
  secondary: "#f5f6f4",
@@ -1220,7 +1220,7 @@ var ltg_dark_default = {
1220
1220
  var blueprints_default = {
1221
1221
  background: {
1222
1222
  primary: "#ffffff",
1223
- secondary: "rgba(0, 0, 0, 0.1)",
1223
+ secondary: "#f5f6f4",
1224
1224
  brand: {
1225
1225
  primary: "#80eaff",
1226
1226
  secondary: "#b2f2ff"
@@ -1295,7 +1295,7 @@ var blueprints_default = {
1295
1295
  },
1296
1296
  border: {
1297
1297
  primary: "#000000",
1298
- secondary: "#f3f3f2",
1298
+ secondary: "rgba(0, 0, 0, 0.08)",
1299
1299
  brand: "#31cae8",
1300
1300
  brandExtra: "#5031e8",
1301
1301
  inverse: "rgba(255, 255, 255, 0.17)",
@@ -1310,47 +1310,857 @@ var blueprints_default = {
1310
1310
  brandExtra: "rgba(149, 128, 255, 0.3)",
1311
1311
  success: "rgba(149, 255, 128, 0.24)",
1312
1312
  warning: "rgba(255, 195, 128, 0.28)",
1313
- alert: "rgba(255, 149, 128, 0.24)",
1314
- neutral: "rgba(96, 127, 133, 0.24)",
1313
+ alert: "rgba(255, 149, 128, 0.24)",
1314
+ neutral: "rgba(96, 127, 133, 0.24)",
1315
+ monoHover: "rgba(0, 0, 0, 0.1)"
1316
+ },
1317
+ layer: {
1318
+ scrim: "rgba(0, 0, 0, 0.75)",
1319
+ float: "rgba(0, 0, 0, 0.5)"
1320
+ },
1321
+ control: {
1322
+ brand: {
1323
+ primary: {
1324
+ bg: "#80eaff",
1325
+ bgHover: "#b2f2ff",
1326
+ bgPress: "#55dcf6",
1327
+ bgDisable: "#cccccc",
1328
+ border: "#31cae8",
1329
+ borderHover: "#55dcf6",
1330
+ borderPress: "rgba(255, 255, 255, 0)",
1331
+ borderDisable: "rgba(255, 255, 255, 0)"
1332
+ },
1333
+ secondary: {
1334
+ bg: "#d6f8ff",
1335
+ bgHover: "#ebfcff",
1336
+ bgPress: "#b2f2ff",
1337
+ border: "#80eaff",
1338
+ borderHover: "#b2f2ff",
1339
+ borderPress: "rgba(255, 255, 255, 0)"
1340
+ },
1341
+ tertiary: {
1342
+ bg: "rgba(255, 255, 255, 0)",
1343
+ bgHover: "#ebfcff",
1344
+ bgPress: "#d6f8ff",
1345
+ border: "rgba(255, 255, 255, 0)",
1346
+ borderHover: "rgba(255, 255, 255, 0)",
1347
+ borderPress: "rgba(255, 255, 255, 0)"
1348
+ },
1349
+ text: {
1350
+ primary: "#000000",
1351
+ secondary: "#000000",
1352
+ tertiary: "#1b8398",
1353
+ disable: "#999999",
1354
+ ghost: "#22a8c3"
1355
+ },
1356
+ ghost: {
1357
+ bg: "rgba(0, 0, 0, 0)",
1358
+ bgHover: "rgba(34, 168, 195, 0.04)",
1359
+ bgPress: "rgba(34, 168, 195, 0.08)",
1360
+ border: "rgba(34, 168, 195, 0.1)",
1361
+ borderHover: "rgba(34, 168, 195, 0.16)",
1362
+ borderPress: "rgba(34, 168, 195, 0.1)"
1363
+ }
1364
+ },
1365
+ mono: {
1366
+ primary: {
1367
+ bg: "#141d1f",
1368
+ bgHover: "#233134",
1369
+ bgPress: "#000000",
1370
+ border: "rgba(255, 255, 255, 0)",
1371
+ borderHover: "rgba(255, 255, 255, 0)",
1372
+ borderPress: "rgba(255, 255, 255, 0)"
1373
+ },
1374
+ secondary: {
1375
+ bg: "#dddfd8",
1376
+ bgHover: "#ecede9",
1377
+ bgPress: "#c2c4ba",
1378
+ border: "#c2c4ba",
1379
+ borderHover: "#dddfd8",
1380
+ borderPress: "rgba(255, 255, 255, 0)"
1381
+ },
1382
+ tertiary: {
1383
+ bg: "rgba(255, 255, 255, 0)",
1384
+ bgHover: "#f5f6f4",
1385
+ bgPress: "#ecede9",
1386
+ border: "rgba(255, 255, 255, 0)",
1387
+ borderHover: "rgba(255, 255, 255, 0)",
1388
+ borderPress: "rgba(255, 255, 255, 0)"
1389
+ },
1390
+ text: {
1391
+ primary: "#ffffff",
1392
+ secondary: "#000000",
1393
+ tertiary: "#000000",
1394
+ ghost: "#000000"
1395
+ },
1396
+ ghost: {
1397
+ bg: "rgba(0, 0, 0, 0)",
1398
+ bgHover: "rgba(0, 0, 0, 0.04)",
1399
+ bgPress: "rgba(0, 0, 0, 0.08)",
1400
+ border: "rgba(0, 0, 0, 0.1)",
1401
+ borderHover: "rgba(0, 0, 0, 0.16)",
1402
+ borderPress: "rgba(0, 0, 0, 0.1)"
1403
+ }
1404
+ },
1405
+ brandExtra: {
1406
+ primary: {
1407
+ bg: "#7055f6",
1408
+ bgHover: "#5031e8",
1409
+ bgPress: "#3d22c3",
1410
+ border: "rgba(255, 255, 255, 0)",
1411
+ borderHover: "rgba(255, 255, 255, 0)",
1412
+ borderPress: "rgba(255, 255, 255, 0)"
1413
+ },
1414
+ secondary: {
1415
+ bg: "rgba(80, 49, 232, 0.4)",
1416
+ bgHover: "rgba(149, 128, 255, 0.4)",
1417
+ bgPress: "rgba(80, 49, 232, 0.4)",
1418
+ border: "rgba(255, 255, 255, 0)",
1419
+ borderHover: "rgba(255, 255, 255, 0)",
1420
+ borderPress: "rgba(255, 255, 255, 0)"
1421
+ },
1422
+ tertiary: {
1423
+ bg: "rgba(80, 49, 232, 0)",
1424
+ bgHover: "rgba(149, 128, 255, 0.07)",
1425
+ bgPress: "rgba(80, 49, 232, 0.12)",
1426
+ border: "rgba(255, 255, 255, 0)",
1427
+ borderHover: "rgba(255, 255, 255, 0)",
1428
+ borderPress: "rgba(255, 255, 255, 0)"
1429
+ },
1430
+ text: {
1431
+ primary: "#000000",
1432
+ secondary: "#000000",
1433
+ tertiary: "#301b98",
1434
+ ghost: "#79971b"
1435
+ },
1436
+ ghost: {
1437
+ bg: "rgba(0, 0, 0, 0)",
1438
+ bgHover: "rgba(121, 151, 27, 0.04)",
1439
+ bgPress: "rgba(121, 151, 27, 0.08)",
1440
+ border: "rgba(121, 151, 27, 0.1)",
1441
+ borderHover: "rgba(121, 151, 27, 0.16)",
1442
+ borderPress: "rgba(121, 151, 27, 0.1)"
1443
+ }
1444
+ },
1445
+ alert: {
1446
+ bg: "#ffbfb2",
1447
+ border: "#e84f30",
1448
+ primary: {
1449
+ bg: "#e84f30",
1450
+ bgHover: "#f67055",
1451
+ bgPress: "#c33d22",
1452
+ border: "rgba(255, 255, 255, 0)",
1453
+ borderHover: "rgba(255, 255, 255, 0)",
1454
+ borderPress: "rgba(255, 255, 255, 0)"
1455
+ },
1456
+ secondary: {
1457
+ bg: "rgba(232, 79, 48, 0.4)",
1458
+ bgHover: "rgba(246, 112, 85, 0.4)",
1459
+ bgPress: "rgba(195, 61, 34, 0.4)",
1460
+ border: "rgba(246, 112, 85, 0.32)",
1461
+ borderHover: "rgba(246, 112, 85, 0.32)",
1462
+ borderPress: "rgba(246, 112, 85, 0.32)"
1463
+ },
1464
+ tertiary: {
1465
+ bg: "rgba(255, 43, 0, 0)",
1466
+ bgHover: "rgba(255, 85, 51, 0.07)",
1467
+ bgPress: "rgba(204, 34, 0, 0.12)",
1468
+ border: "rgba(255, 255, 255, 0)",
1469
+ borderHover: "rgba(255, 255, 255, 0)",
1470
+ borderPress: "rgba(255, 255, 255, 0)"
1471
+ },
1472
+ text: {
1473
+ primary: "#ffffff",
1474
+ secondary: "#000000",
1475
+ tertiary: "#c33d22",
1476
+ ghost: "#c33d22"
1477
+ },
1478
+ ghost: {
1479
+ bg: "rgba(0, 0, 0, 0)",
1480
+ bgHover: "rgba(195, 61, 34, 0.04)",
1481
+ bgPress: "rgba(195, 61, 34, 0.08)",
1482
+ border: "rgba(195, 61, 34, 0.1)",
1483
+ borderHover: "rgba(195, 61, 34, 0.16)",
1484
+ borderPress: "rgba(195, 61, 34, 0.1)"
1485
+ }
1486
+ },
1487
+ input: {
1488
+ bg: "#ffffff",
1489
+ bgHover: "#f4f5f6",
1490
+ bgDisable: "#e8eced",
1491
+ border: "rgba(0, 0, 0, 0.1)",
1492
+ borderHover: "rgba(0, 0, 0, 0.15)",
1493
+ borderDisable: "rgba(0, 0, 0, 0)",
1494
+ text: "#000000",
1495
+ placeholder: "rgba(0, 0, 0, 0.6)",
1496
+ textDisable: "rgba(5, 5, 5, 0.36)"
1497
+ },
1498
+ focus: {
1499
+ bg: "#ffffff",
1500
+ border: "#31cae8"
1501
+ },
1502
+ check: {
1503
+ bg: "#d6f8ff",
1504
+ bgHover: "#ebfcff",
1505
+ bgDisable: "rgba(0, 0, 0, 0.25)",
1506
+ border: "#80eaff",
1507
+ borderHover: "#b2f2ff",
1508
+ borderDisable: "rgba(0, 0, 0, 0)",
1509
+ icon: "#000000"
1510
+ },
1511
+ faint: {
1512
+ bg: "rgba(0, 0, 0, 0.15)",
1513
+ bgHover: "rgba(0, 0, 0, 0.2)",
1514
+ border: "rgba(0, 0, 0, 0.1)",
1515
+ borderHover: "rgba(0, 0, 0, 0.15)"
1516
+ },
1517
+ slider: {
1518
+ bg: "#80eaff",
1519
+ bgHover: "#b2f2ff",
1520
+ bgDisable: "#c2c4ba"
1521
+ },
1522
+ switch: {
1523
+ bg: "#000000",
1524
+ bgHover: "#1b2628",
1525
+ bgDisable: "rgba(0, 0, 0, 0.25)",
1526
+ border: "rgba(0, 0, 0, 0)",
1527
+ borderHover: "rgba(0, 0, 0, 0)",
1528
+ borderDisable: "rgba(0, 0, 0, 0)"
1529
+ },
1530
+ knob: {
1531
+ bg: "#ffffff",
1532
+ bgHover: "#e8eced",
1533
+ bgActive: "#ffffff",
1534
+ bgActiveHover: "#e8eced",
1535
+ bgInactive: "#000000",
1536
+ bgInactiveHover: "#e8eced",
1537
+ bgDisable: "#000000"
1538
+ },
1539
+ text: {
1540
+ primary: "#000000",
1541
+ disable: "rgba(0, 0, 0, 0.4)"
1542
+ },
1543
+ link: {
1544
+ primary: "#22a8c3",
1545
+ primaryHover: "#31cae8",
1546
+ secondary: "#8aad1f",
1547
+ secondaryHover: "#b2e51a"
1548
+ },
1549
+ segmented: {
1550
+ bg: "rgba(0, 0, 0, 0.08)",
1551
+ bgHover: "rgba(0, 0, 0, 0.08)",
1552
+ bgActive: "#ffffff",
1553
+ border: "rgba(0, 0, 0, 0.1)",
1554
+ borderHover: "rgba(0, 0, 0, 0.1)",
1555
+ borderActive: "rgba(0, 0, 0, 0)",
1556
+ text: "#000000",
1557
+ textDisable: "rgba(0, 0, 0, 0.4)"
1558
+ },
1559
+ tagLabel: {
1560
+ product: {
1561
+ bg: "#d9ff66",
1562
+ text: "#000000",
1563
+ textCompact: "rgba(0, 0, 0, 0.48)"
1564
+ },
1565
+ rarity: {
1566
+ bg: "#141d1f",
1567
+ text: "#22a8c3"
1568
+ },
1569
+ name: {
1570
+ bg: "#ffffff",
1571
+ text: "#000000"
1572
+ },
1573
+ account: {
1574
+ bg: "#9580ff",
1575
+ text: "#000000",
1576
+ textCompact: "rgba(0, 0, 0, 0.48)"
1577
+ },
1578
+ id: {
1579
+ bg: "#dddfd8",
1580
+ bgSeries: "#000000",
1581
+ textSeries: "#d7dee0",
1582
+ textNumber: "#000000",
1583
+ textCompact: "rgba(0, 0, 0, 0.48)"
1584
+ },
1585
+ subentity: {
1586
+ bg: "#a9aca0",
1587
+ text: "#000000"
1588
+ },
1589
+ item: {
1590
+ bg: "#55dcf6",
1591
+ text: "#000000",
1592
+ textCompact: "rgba(0, 0, 0, 0.48)"
1593
+ }
1594
+ },
1595
+ toast: {
1596
+ bg: "#233134"
1597
+ },
1598
+ toggleButton: {
1599
+ bg: "rgba(0, 0, 0, 0.08)",
1600
+ bgHover: "rgba(0, 0, 0, 0.15)",
1601
+ bgActive: "#d6f8ff",
1602
+ bgDisable: "rgba(0, 0, 0, 0.2)",
1603
+ border: "rgba(0, 0, 0, 0.1)",
1604
+ borderHover: "rgba(0, 0, 0, 0.15)",
1605
+ borderActive: "#80eaff",
1606
+ borderDisable: "rgba(0, 0, 0, 0)",
1607
+ text: "#000000",
1608
+ textActive: "#000000",
1609
+ textDisable: "rgba(0, 0, 0, 0.36)"
1610
+ },
1611
+ appButton: {
1612
+ bg: "#dadbd7",
1613
+ bgHover: "#c1c2bc",
1614
+ bgPress: "#a8aaa2",
1615
+ border: "#c1c2bc",
1616
+ borderHover: "#a8aaa2",
1617
+ borderPress: "rgba(255, 255, 255, 0)",
1618
+ text: "#000000",
1619
+ textDisable: "#999999"
1620
+ }
1621
+ }
1622
+ };
1623
+
1624
+ // src/tokens/corpsite-dark.json
1625
+ var corpsite_dark_default = {
1626
+ background: {
1627
+ primary: "#141d1f",
1628
+ secondary: "#1b2628",
1629
+ brand: {
1630
+ primary: "#55dcf6",
1631
+ secondary: "#135d6c"
1632
+ },
1633
+ brandExtra: {
1634
+ primary: "#9580ff",
1635
+ secondary: "#301b98"
1636
+ },
1637
+ inverse: "#ffffff",
1638
+ static: {
1639
+ dark: "#000000",
1640
+ light: "#ffffff"
1641
+ },
1642
+ success: {
1643
+ primary: "#70f655",
1644
+ secondary: "#2f5827"
1645
+ },
1646
+ warning: {
1647
+ primary: "#f6ab55",
1648
+ secondary: "#6c4313"
1649
+ },
1650
+ alert: {
1651
+ primary: "#e8304f",
1652
+ secondary: "#58272f"
1653
+ },
1654
+ neutral: {
1655
+ primary: "#607f85",
1656
+ secondary: "#233134"
1657
+ }
1658
+ },
1659
+ content: {
1660
+ primary: "#e8eced",
1661
+ secondary: "#b7c5c8",
1662
+ tertiary: "#7b989d",
1663
+ brand: {
1664
+ primary: "#80eaff",
1665
+ secondary: "#31cae8"
1666
+ },
1667
+ brandExtra: {
1668
+ primary: "#9580ff",
1669
+ secondary: "#7055f6"
1670
+ },
1671
+ inverse: "#000000",
1672
+ static: {
1673
+ light: "#ffffff",
1674
+ dark: "#000000"
1675
+ },
1676
+ success: {
1677
+ primary: "#50e831",
1678
+ secondary: "#368f24"
1679
+ },
1680
+ warning: {
1681
+ primary: "#f6ab55",
1682
+ secondary: "#c37822"
1683
+ },
1684
+ alert: {
1685
+ primary: "#f65570",
1686
+ secondary: "#c3223d"
1687
+ },
1688
+ neutral: {
1689
+ primary: "#99aeb2",
1690
+ secondary: "#607f85"
1691
+ },
1692
+ on: {
1693
+ brand: "#000000",
1694
+ brandExtra: "#ffffff",
1695
+ success: "#000000",
1696
+ warning: "#000000",
1697
+ alert: "#ffffff",
1698
+ neutral: "#000000"
1699
+ }
1700
+ },
1701
+ border: {
1702
+ primary: "#ffffff",
1703
+ secondary: "#34474b",
1704
+ brand: "#b2f2ff",
1705
+ brandExtra: "#bfb2ff",
1706
+ inverse: "rgba(20, 29, 31, 0.15)",
1707
+ success: "#95ff80",
1708
+ warning: "#ffc380",
1709
+ alert: "#f65570",
1710
+ neutral: "#607f85"
1711
+ },
1712
+ overlay: {
1713
+ mono: "rgba(178, 242, 255, 0.06)",
1714
+ brand: "rgba(128, 234, 255, 0.2)",
1715
+ brandExtra: "rgba(149, 128, 255, 0.3)",
1716
+ success: "rgba(149, 255, 128, 0.2)",
1717
+ warning: "rgba(255, 195, 128, 0.24)",
1718
+ alert: "rgba(232, 48, 79, 0.32)",
1719
+ neutral: "rgba(123, 152, 157, 0.28)",
1720
+ monoHover: "rgba(178, 242, 255, 0.12)"
1721
+ },
1722
+ layer: {
1723
+ scrim: "rgba(0, 0, 0, 0.5)",
1724
+ float: "rgba(0, 0, 0, 0.95)"
1725
+ },
1726
+ control: {
1727
+ brand: {
1728
+ primary: {
1729
+ bg: "#80eaff",
1730
+ bgHover: "#b2f2ff",
1731
+ bgPress: "#d6f8ff",
1732
+ bgDisable: "rgba(52, 71, 75, 0.85)",
1733
+ border: "#31cae8",
1734
+ borderHover: "#55dcf6",
1735
+ borderPress: "rgba(85, 220, 246, 0)",
1736
+ borderDisable: "rgba(52, 71, 75, 0)"
1737
+ },
1738
+ secondary: {
1739
+ bg: "#135d6c",
1740
+ bgHover: "#1b8398",
1741
+ bgPress: "#22a8c3",
1742
+ border: "#1b8398",
1743
+ borderHover: "#22a8c3",
1744
+ borderPress: "rgba(34, 168, 195, 0)"
1745
+ },
1746
+ tertiary: {
1747
+ bg: "rgba(11, 56, 65, 0)",
1748
+ bgHover: "#0b3841",
1749
+ bgPress: "#135d6c",
1750
+ border: "rgba(11, 56, 65, 0)",
1751
+ borderHover: "rgba(11, 56, 65, 0)",
1752
+ borderPress: "rgba(19, 93, 108, 0)"
1753
+ },
1754
+ text: {
1755
+ primary: "#000000",
1756
+ secondary: "#80eaff",
1757
+ tertiary: "#31cae8",
1758
+ disable: "rgba(232, 236, 237, 0.2)",
1759
+ ghost: "#80eaff"
1760
+ },
1761
+ ghost: {
1762
+ bg: "rgba(255, 255, 255, 0)",
1763
+ bgHover: "rgba(128, 234, 255, 0.04)",
1764
+ bgPress: "rgba(128, 234, 255, 0.08)",
1765
+ border: "rgba(128, 234, 255, 0.16)",
1766
+ borderHover: "rgba(128, 234, 255, 0.24)",
1767
+ borderPress: "rgba(128, 234, 255, 0.16)"
1768
+ }
1769
+ },
1770
+ mono: {
1771
+ primary: {
1772
+ bg: "#f4f5f6",
1773
+ bgHover: "#e8eced",
1774
+ bgPress: "#d7dee0",
1775
+ border: "rgba(244, 245, 246, 0)",
1776
+ borderHover: "rgba(232, 236, 237, 0)",
1777
+ borderPress: "rgba(215, 222, 224, 0)"
1778
+ },
1779
+ secondary: {
1780
+ bg: "#233134",
1781
+ bgHover: "#34474b",
1782
+ bgPress: "#4a6368",
1783
+ border: "#34474b",
1784
+ borderHover: "#4a6368",
1785
+ borderPress: "rgba(74, 99, 104, 0)"
1786
+ },
1787
+ tertiary: {
1788
+ bg: "rgba(35, 49, 52, 0)",
1789
+ bgHover: "#233134",
1790
+ bgPress: "#34474b",
1791
+ border: "rgba(35, 49, 52, 0)",
1792
+ borderHover: "rgba(35, 49, 52, 0)",
1793
+ borderPress: "rgba(52, 71, 75, 0)"
1794
+ },
1795
+ text: {
1796
+ primary: "#000000",
1797
+ secondary: "#e8eced",
1798
+ tertiary: "#ffffff",
1799
+ ghost: "#ffffff"
1800
+ },
1801
+ ghost: {
1802
+ bg: "rgba(255, 255, 255, 0)",
1803
+ bgHover: "rgba(255, 255, 255, 0.04)",
1804
+ bgPress: "rgba(255, 255, 255, 0.08)",
1805
+ border: "rgba(255, 255, 255, 0.16)",
1806
+ borderHover: "rgba(255, 255, 255, 0.24)",
1807
+ borderPress: "rgba(255, 255, 255, 0.16)"
1808
+ }
1809
+ },
1810
+ brandExtra: {
1811
+ primary: {
1812
+ bg: "#7055f6",
1813
+ bgHover: "#9580ff",
1814
+ bgPress: "#bfb2ff",
1815
+ border: "#9580ff",
1816
+ borderHover: "#bfb2ff",
1817
+ borderPress: "rgba(191, 178, 255, 0)"
1818
+ },
1819
+ secondary: {
1820
+ bg: "#301b98",
1821
+ bgHover: "#3d22c3",
1822
+ bgPress: "#5031e8",
1823
+ border: "#3d22c3",
1824
+ borderHover: "#5031e8",
1825
+ borderPress: "rgba(80, 49, 232, 0)"
1826
+ },
1827
+ tertiary: {
1828
+ bg: "rgba(20, 11, 65, 0)",
1829
+ bgHover: "#140b41",
1830
+ bgPress: "#22136c",
1831
+ border: "rgba(20, 11, 65, 0)",
1832
+ borderHover: "rgba(20, 11, 65, 0)",
1833
+ borderPress: "rgba(34, 19, 108, 0)"
1834
+ },
1835
+ text: {
1836
+ primary: "#ffffff",
1837
+ secondary: "#ffffff",
1838
+ tertiary: "#9580ff",
1839
+ ghost: "#cef655"
1840
+ },
1841
+ ghost: {
1842
+ bg: "rgba(255, 255, 255, 0)",
1843
+ bgHover: "rgba(206, 246, 85, 0.04)",
1844
+ bgPress: "rgba(206, 246, 85, 0.08)",
1845
+ border: "rgba(206, 246, 85, 0.16)",
1846
+ borderHover: "rgba(206, 246, 85, 0.24)",
1847
+ borderPress: "rgba(206, 246, 85, 0.16)"
1848
+ }
1849
+ },
1850
+ alert: {
1851
+ bg: "#c3223d",
1852
+ border: "#f65570",
1853
+ primary: {
1854
+ bg: "#e8304f",
1855
+ bgHover: "#f65570",
1856
+ bgPress: "#ff8095",
1857
+ border: "#f65570",
1858
+ borderHover: "#ff8095",
1859
+ borderPress: "rgba(255, 128, 149, 0)"
1860
+ },
1861
+ secondary: {
1862
+ bg: "#8f2436",
1863
+ bgHover: "#c3223d",
1864
+ bgPress: "#e8304f",
1865
+ border: "#c3223d",
1866
+ borderHover: "#e8304f",
1867
+ borderPress: "rgba(232, 48, 79, 0)"
1868
+ },
1869
+ tertiary: {
1870
+ bg: "rgba(49, 28, 31, 0)",
1871
+ bgHover: "#311c1f",
1872
+ bgPress: "#58272f",
1873
+ border: "rgba(49, 28, 31, 0)",
1874
+ borderHover: "rgba(49, 28, 31, 0)",
1875
+ borderPress: "rgba(88, 39, 47, 0)"
1876
+ },
1877
+ text: {
1878
+ primary: "#ffffff",
1879
+ secondary: "#ffffff",
1880
+ tertiary: "#ff8095",
1881
+ ghost: "#f67055"
1882
+ },
1883
+ ghost: {
1884
+ bg: "rgba(255, 255, 255, 0)",
1885
+ bgHover: "rgba(246, 112, 85, 0.04)",
1886
+ bgPress: "rgba(246, 112, 85, 0.08)",
1887
+ border: "rgba(246, 112, 85, 0.16)",
1888
+ borderHover: "rgba(246, 112, 85, 0.24)",
1889
+ borderPress: "rgba(246, 112, 85, 0.16)"
1890
+ }
1891
+ },
1892
+ input: {
1893
+ bg: "rgba(178, 242, 255, 0.1)",
1894
+ bgHover: "rgba(178, 242, 255, 0.15)",
1895
+ bgDisable: "rgba(178, 242, 255, 0.25)",
1896
+ border: "rgba(178, 242, 255, 0.1)",
1897
+ borderHover: "rgba(178, 242, 255, 0.15)",
1898
+ borderDisable: "rgba(178, 242, 255, 0)",
1899
+ text: "#e8eced",
1900
+ placeholder: "rgba(232, 236, 237, 0.56)",
1901
+ textDisable: "rgba(232, 236, 237, 0.2)"
1902
+ },
1903
+ focus: {
1904
+ bg: "#141d1f",
1905
+ border: "#31cae8"
1906
+ },
1907
+ check: {
1908
+ bg: "rgba(128, 234, 255, 0.1)",
1909
+ bgHover: "rgba(128, 234, 255, 0.2)",
1910
+ bgDisable: "rgba(52, 71, 75, 0.85)",
1911
+ border: "#80eaff",
1912
+ borderHover: "#b2f2ff",
1913
+ borderDisable: "rgba(52, 71, 75, 0)",
1914
+ icon: "#b2f2ff"
1915
+ },
1916
+ faint: {
1917
+ bg: "#233134",
1918
+ bgHover: "#34474b",
1919
+ border: "#34474b",
1920
+ borderHover: "#4a6368"
1921
+ },
1922
+ slider: {
1923
+ bg: "#80eaff",
1924
+ bgHover: "#b2f2ff",
1925
+ bgDisable: "#34474b"
1926
+ },
1927
+ switch: {
1928
+ bg: "rgba(128, 234, 255, 0.1)",
1929
+ bgHover: "rgba(178, 242, 255, 0.2)",
1930
+ bgDisable: "rgba(52, 71, 75, 0.85)",
1931
+ border: "#80eaff",
1932
+ borderHover: "#b2f2ff",
1933
+ borderDisable: "rgba(52, 71, 75, 0)"
1934
+ },
1935
+ knob: {
1936
+ bg: "#80eaff",
1937
+ bgHover: "#b2f2ff",
1938
+ bgActive: "#80eaff",
1939
+ bgActiveHover: "#b2f2ff",
1940
+ bgInactive: "#4a6368",
1941
+ bgInactiveHover: "#607f85",
1942
+ bgDisable: "#34474b"
1943
+ },
1944
+ text: {
1945
+ primary: "#e8eced",
1946
+ disable: "rgba(232, 236, 237, 0.2)"
1947
+ },
1948
+ link: {
1949
+ primary: "#80eaff",
1950
+ primaryHover: "#1b8398",
1951
+ secondary: "#9580ff",
1952
+ secondaryHover: "#5031e8"
1953
+ },
1954
+ segmented: {
1955
+ bg: "rgba(20, 29, 31, 0)",
1956
+ bgHover: "#34474b",
1957
+ bgActive: "rgba(128, 234, 255, 0.1)",
1958
+ border: "rgba(52, 71, 75, 0)",
1959
+ borderHover: "#4a6368",
1960
+ borderActive: "#80eaff",
1961
+ text: "#e8eced",
1962
+ textDisable: "rgba(232, 236, 237, 0.2)"
1963
+ },
1964
+ tagLabel: {
1965
+ product: {
1966
+ bg: "#d9ff66",
1967
+ text: "#000000",
1968
+ textCompact: "rgba(255, 255, 255, 0.48)"
1969
+ },
1970
+ rarity: {
1971
+ bg: "#141d1f",
1972
+ text: "#22a8c3"
1973
+ },
1974
+ name: {
1975
+ bg: "#233134",
1976
+ text: "#b7c5c8"
1977
+ },
1978
+ account: {
1979
+ bg: "#9580ff",
1980
+ text: "#000000",
1981
+ textCompact: "rgba(255, 255, 255, 0.48)"
1982
+ },
1983
+ id: {
1984
+ bg: "#34474b",
1985
+ bgSeries: "#000000",
1986
+ textSeries: "#b7c5c8",
1987
+ textNumber: "#b7c5c8",
1988
+ textCompact: "rgba(255, 255, 255, 0.48)"
1989
+ },
1990
+ subentity: {
1991
+ bg: "#607f85",
1992
+ text: "#000000"
1993
+ },
1994
+ item: {
1995
+ bg: "#80eaff",
1996
+ text: "#000000",
1997
+ textCompact: "rgba(255, 255, 255, 0.48)"
1998
+ }
1999
+ },
2000
+ toast: {
2001
+ bg: "#607f85"
2002
+ },
2003
+ toggleButton: {
2004
+ bg: "#233134",
2005
+ bgHover: "#34474b",
2006
+ bgActive: "rgba(128, 234, 255, 0.1)",
2007
+ bgDisable: "rgba(52, 71, 75, 0.85)",
2008
+ border: "#34474b",
2009
+ borderHover: "#4a6368",
2010
+ borderActive: "#80eaff",
2011
+ borderDisable: "rgba(52, 71, 75, 0)",
2012
+ text: "#e8eced",
2013
+ textActive: "#e8eced",
2014
+ textDisable: "rgba(232, 236, 237, 0.2)"
2015
+ },
2016
+ appButton: {
2017
+ bg: "#34474b",
2018
+ bgHover: "#4b6368",
2019
+ bgPress: "#607f85",
2020
+ border: "#4b6368",
2021
+ borderHover: "#607f85",
2022
+ borderPress: "rgba(255, 255, 255, 0)",
2023
+ text: "#b7c5c8",
2024
+ textDisable: "rgba(232, 236, 237, 0.2)"
2025
+ }
2026
+ }
2027
+ };
2028
+
2029
+ // src/tokens/corpsite-light.json
2030
+ var corpsite_light_default = {
2031
+ background: {
2032
+ primary: "#ffffff",
2033
+ secondary: "#f5f6f4",
2034
+ brand: {
2035
+ primary: "#80eaff",
2036
+ secondary: "#b2f2ff"
2037
+ },
2038
+ brandExtra: {
2039
+ primary: "#7055f6",
2040
+ secondary: "#bfb2ff"
2041
+ },
2042
+ inverse: "#000000",
2043
+ static: {
2044
+ dark: "#000000",
2045
+ light: "#ffffff"
2046
+ },
2047
+ success: {
2048
+ primary: "#95ff80",
2049
+ secondary: "#bfffb2"
2050
+ },
2051
+ warning: {
2052
+ primary: "#ffc380",
2053
+ secondary: "#ffdbb2"
2054
+ },
2055
+ alert: {
2056
+ primary: "#f65570",
2057
+ secondary: "#ff8095"
2058
+ },
2059
+ neutral: {
2060
+ primary: "#a9aca0",
2061
+ secondary: "#ecede9"
2062
+ }
2063
+ },
2064
+ content: {
2065
+ primary: "#000000",
2066
+ secondary: "#5b5d56",
2067
+ tertiary: "#909385",
2068
+ brand: {
2069
+ primary: "#1b8398",
2070
+ secondary: "#31cae8"
2071
+ },
2072
+ brandExtra: {
2073
+ primary: "#7055f6",
2074
+ secondary: "#9580ff"
2075
+ },
2076
+ inverse: "#ffffff",
2077
+ static: {
2078
+ light: "#ffffff",
2079
+ dark: "#000000"
2080
+ },
2081
+ success: {
2082
+ primary: "#368f24",
2083
+ secondary: "#50e831"
2084
+ },
2085
+ warning: {
2086
+ primary: "#c37822",
2087
+ secondary: "#f6ab55"
2088
+ },
2089
+ alert: {
2090
+ primary: "#c3223d",
2091
+ secondary: "#f65570"
2092
+ },
2093
+ neutral: {
2094
+ primary: "#76786d",
2095
+ secondary: "#a9aca0"
2096
+ },
2097
+ on: {
2098
+ brand: "#000000",
2099
+ brandExtra: "#ffffff",
2100
+ success: "#000000",
2101
+ warning: "#000000",
2102
+ alert: "#ffffff",
2103
+ neutral: "#000000"
2104
+ }
2105
+ },
2106
+ border: {
2107
+ primary: "#000000",
2108
+ secondary: "#dddfd8",
2109
+ brand: "#31cae8",
2110
+ brandExtra: "#5031e8",
2111
+ inverse: "rgba(255, 255, 255, 0.17)",
2112
+ success: "#3dc322",
2113
+ warning: "#c37822",
2114
+ alert: "#c3223d",
2115
+ neutral: "#a9aca0"
2116
+ },
2117
+ overlay: {
2118
+ mono: "rgba(0, 0, 0, 0.05)",
2119
+ brand: "rgba(128, 234, 255, 0.3)",
2120
+ brandExtra: "rgba(149, 128, 255, 0.3)",
2121
+ success: "rgba(149, 255, 128, 0.24)",
2122
+ warning: "rgba(255, 195, 128, 0.28)",
2123
+ alert: "rgba(232, 48, 79, 0.24)",
2124
+ neutral: "rgba(169, 172, 160, 0.24)",
1315
2125
  monoHover: "rgba(0, 0, 0, 0.1)"
1316
2126
  },
1317
2127
  layer: {
1318
2128
  scrim: "rgba(0, 0, 0, 0.75)",
1319
- float: "rgba(0, 0, 0, 0.5)"
2129
+ float: "rgba(255, 255, 255, 0.95)"
1320
2130
  },
1321
2131
  control: {
1322
2132
  brand: {
1323
2133
  primary: {
1324
2134
  bg: "#80eaff",
1325
- bgHover: "#b2f2ff",
1326
- bgPress: "#55dcf6",
1327
- bgDisable: "#cccccc",
2135
+ bgHover: "#55dcf6",
2136
+ bgPress: "#31cae8",
2137
+ bgDisable: "rgba(221, 223, 216, 0.65)",
1328
2138
  border: "#31cae8",
1329
- borderHover: "#55dcf6",
1330
- borderPress: "rgba(255, 255, 255, 0)",
1331
- borderDisable: "rgba(255, 255, 255, 0)"
2139
+ borderHover: "#22a8c3",
2140
+ borderPress: "rgba(34, 168, 195, 0)",
2141
+ borderDisable: "rgba(221, 223, 216, 0)"
1332
2142
  },
1333
2143
  secondary: {
1334
2144
  bg: "#d6f8ff",
1335
- bgHover: "#ebfcff",
1336
- bgPress: "#b2f2ff",
1337
- border: "#80eaff",
1338
- borderHover: "#b2f2ff",
1339
- borderPress: "rgba(255, 255, 255, 0)"
2145
+ bgHover: "#b2f2ff",
2146
+ bgPress: "#80eaff",
2147
+ border: "#b2f2ff",
2148
+ borderHover: "#80eaff",
2149
+ borderPress: "rgba(128, 234, 255, 0)"
1340
2150
  },
1341
2151
  tertiary: {
1342
- bg: "rgba(255, 255, 255, 0)",
2152
+ bg: "rgba(235, 252, 255, 0)",
1343
2153
  bgHover: "#ebfcff",
1344
2154
  bgPress: "#d6f8ff",
1345
- border: "rgba(255, 255, 255, 0)",
1346
- borderHover: "rgba(255, 255, 255, 0)",
1347
- borderPress: "rgba(255, 255, 255, 0)"
2155
+ border: "rgba(235, 252, 255, 0)",
2156
+ borderHover: "rgba(235, 252, 255, 0)",
2157
+ borderPress: "rgba(214, 248, 255, 0)"
1348
2158
  },
1349
2159
  text: {
1350
2160
  primary: "#000000",
1351
2161
  secondary: "#000000",
1352
- tertiary: "#1b8398",
1353
- disable: "#999999",
2162
+ tertiary: "#000000",
2163
+ disable: "rgba(0, 0, 0, 0.3)",
1354
2164
  ghost: "#22a8c3"
1355
2165
  },
1356
2166
  ghost: {
@@ -1364,28 +2174,28 @@ var blueprints_default = {
1364
2174
  },
1365
2175
  mono: {
1366
2176
  primary: {
1367
- bg: "#141d1f",
1368
- bgHover: "#233134",
1369
- bgPress: "#000000",
1370
- border: "rgba(255, 255, 255, 0)",
1371
- borderHover: "rgba(255, 255, 255, 0)",
1372
- borderPress: "rgba(255, 255, 255, 0)"
2177
+ bg: "#1a1a19",
2178
+ bgHover: "#272725",
2179
+ bgPress: "#41423e",
2180
+ border: "rgba(26, 26, 25, 0)",
2181
+ borderHover: "rgba(39, 39, 37, 0)",
2182
+ borderPress: "rgba(65, 66, 62, 0)"
1373
2183
  },
1374
2184
  secondary: {
1375
- bg: "#dddfd8",
1376
- bgHover: "#ecede9",
2185
+ bg: "#ecede9",
2186
+ bgHover: "#dddfd8",
1377
2187
  bgPress: "#c2c4ba",
1378
- border: "#c2c4ba",
1379
- borderHover: "#dddfd8",
1380
- borderPress: "rgba(255, 255, 255, 0)"
2188
+ border: "#dddfd8",
2189
+ borderHover: "#c2c4ba",
2190
+ borderPress: "rgba(194, 196, 186, 0)"
1381
2191
  },
1382
2192
  tertiary: {
1383
- bg: "rgba(255, 255, 255, 0)",
1384
- bgHover: "#f5f6f4",
1385
- bgPress: "#ecede9",
1386
- border: "rgba(255, 255, 255, 0)",
1387
- borderHover: "rgba(255, 255, 255, 0)",
1388
- borderPress: "rgba(255, 255, 255, 0)"
2193
+ bg: "rgba(236, 237, 233, 0)",
2194
+ bgHover: "#ecede9",
2195
+ bgPress: "#dddfd8",
2196
+ border: "rgba(236, 237, 233, 0)",
2197
+ borderHover: "rgba(236, 237, 233, 0)",
2198
+ borderPress: "rgba(221, 223, 216, 0)"
1389
2199
  },
1390
2200
  text: {
1391
2201
  primary: "#ffffff",
@@ -1407,28 +2217,28 @@ var blueprints_default = {
1407
2217
  bg: "#7055f6",
1408
2218
  bgHover: "#5031e8",
1409
2219
  bgPress: "#3d22c3",
1410
- border: "rgba(255, 255, 255, 0)",
1411
- borderHover: "rgba(255, 255, 255, 0)",
1412
- borderPress: "rgba(255, 255, 255, 0)"
2220
+ border: "#5031e8",
2221
+ borderHover: "#3d22c3",
2222
+ borderPress: "rgba(61, 34, 195, 0)"
1413
2223
  },
1414
2224
  secondary: {
1415
- bg: "rgba(80, 49, 232, 0.4)",
1416
- bgHover: "rgba(149, 128, 255, 0.4)",
1417
- bgPress: "rgba(80, 49, 232, 0.4)",
1418
- border: "rgba(255, 255, 255, 0)",
1419
- borderHover: "rgba(255, 255, 255, 0)",
1420
- borderPress: "rgba(255, 255, 255, 0)"
2225
+ bg: "#ddd6ff",
2226
+ bgHover: "#bfb2ff",
2227
+ bgPress: "#9580ff",
2228
+ border: "#bfb2ff",
2229
+ borderHover: "#9580ff",
2230
+ borderPress: "rgba(149, 128, 255, 0)"
1421
2231
  },
1422
2232
  tertiary: {
1423
- bg: "rgba(80, 49, 232, 0)",
1424
- bgHover: "rgba(149, 128, 255, 0.07)",
1425
- bgPress: "rgba(80, 49, 232, 0.12)",
1426
- border: "rgba(255, 255, 255, 0)",
1427
- borderHover: "rgba(255, 255, 255, 0)",
1428
- borderPress: "rgba(255, 255, 255, 0)"
2233
+ bg: "rgba(238, 235, 255, 0)",
2234
+ bgHover: "#eeebff",
2235
+ bgPress: "#ddd6ff",
2236
+ border: "rgba(238, 235, 255, 0)",
2237
+ borderHover: "rgba(238, 235, 255, 0)",
2238
+ borderPress: "rgba(221, 214, 255, 0)"
1429
2239
  },
1430
2240
  text: {
1431
- primary: "#000000",
2241
+ primary: "#ffffff",
1432
2242
  secondary: "#000000",
1433
2243
  tertiary: "#301b98",
1434
2244
  ghost: "#79971b"
@@ -1443,36 +2253,36 @@ var blueprints_default = {
1443
2253
  }
1444
2254
  },
1445
2255
  alert: {
1446
- bg: "#ffbfb2",
1447
- border: "#e84f30",
2256
+ bg: "#ffb2bf",
2257
+ border: "#f65570",
1448
2258
  primary: {
1449
- bg: "#e84f30",
1450
- bgHover: "#f67055",
1451
- bgPress: "#c33d22",
1452
- border: "rgba(255, 255, 255, 0)",
1453
- borderHover: "rgba(255, 255, 255, 0)",
1454
- borderPress: "rgba(255, 255, 255, 0)"
2259
+ bg: "#e8304f",
2260
+ bgHover: "#c3223d",
2261
+ bgPress: "#8f2436",
2262
+ border: "#c3223d",
2263
+ borderHover: "#8f2436",
2264
+ borderPress: "rgba(152, 27, 48, 0)"
1455
2265
  },
1456
2266
  secondary: {
1457
- bg: "rgba(232, 79, 48, 0.4)",
1458
- bgHover: "rgba(246, 112, 85, 0.4)",
1459
- bgPress: "rgba(195, 61, 34, 0.4)",
1460
- border: "rgba(246, 112, 85, 0.32)",
1461
- borderHover: "rgba(246, 112, 85, 0.32)",
1462
- borderPress: "rgba(246, 112, 85, 0.32)"
2267
+ bg: "#ffd6dd",
2268
+ bgHover: "#ffb2bf",
2269
+ bgPress: "#ff8095",
2270
+ border: "#ffb2bf",
2271
+ borderHover: "#ff8095",
2272
+ borderPress: "rgba(255, 128, 149, 0)"
1463
2273
  },
1464
2274
  tertiary: {
1465
- bg: "rgba(255, 43, 0, 0)",
1466
- bgHover: "rgba(255, 85, 51, 0.07)",
1467
- bgPress: "rgba(204, 34, 0, 0.12)",
1468
- border: "rgba(255, 255, 255, 0)",
1469
- borderHover: "rgba(255, 255, 255, 0)",
1470
- borderPress: "rgba(255, 255, 255, 0)"
2275
+ bg: "rgba(255, 235, 238, 0)",
2276
+ bgHover: "#ffebee",
2277
+ bgPress: "#ffd6dd",
2278
+ border: "rgba(255, 214, 221, 0)",
2279
+ borderHover: "rgba(255, 214, 221, 0)",
2280
+ borderPress: "rgba(255, 214, 221, 0)"
1471
2281
  },
1472
2282
  text: {
1473
2283
  primary: "#ffffff",
1474
2284
  secondary: "#000000",
1475
- tertiary: "#c33d22",
2285
+ tertiary: "#8f2436",
1476
2286
  ghost: "#c33d22"
1477
2287
  },
1478
2288
  ghost: {
@@ -1485,76 +2295,76 @@ var blueprints_default = {
1485
2295
  }
1486
2296
  },
1487
2297
  input: {
1488
- bg: "#ffffff",
1489
- bgHover: "#f4f5f6",
1490
- bgDisable: "#e8eced",
2298
+ bg: "rgba(0, 0, 0, 0.08)",
2299
+ bgHover: "rgba(0, 0, 0, 0.15)",
2300
+ bgDisable: "rgba(0, 0, 0, 0.2)",
1491
2301
  border: "rgba(0, 0, 0, 0.1)",
1492
2302
  borderHover: "rgba(0, 0, 0, 0.15)",
1493
- borderDisable: "rgba(0, 0, 0, 0)",
2303
+ borderDisable: "rgba(221, 223, 216, 0)",
1494
2304
  text: "#000000",
1495
2305
  placeholder: "rgba(0, 0, 0, 0.6)",
1496
- textDisable: "rgba(5, 5, 5, 0.36)"
2306
+ textDisable: "rgba(0, 0, 0, 0.2)"
1497
2307
  },
1498
2308
  focus: {
1499
2309
  bg: "#ffffff",
1500
2310
  border: "#31cae8"
1501
2311
  },
1502
2312
  check: {
1503
- bg: "#d6f8ff",
1504
- bgHover: "#ebfcff",
1505
- bgDisable: "rgba(0, 0, 0, 0.25)",
2313
+ bg: "rgba(128, 234, 255, 0.15)",
2314
+ bgHover: "rgba(128, 234, 255, 0.3)",
2315
+ bgDisable: "rgba(221, 223, 216, 0.65)",
1506
2316
  border: "#80eaff",
1507
- borderHover: "#b2f2ff",
1508
- borderDisable: "rgba(0, 0, 0, 0)",
1509
- icon: "#000000"
2317
+ borderHover: "#55dcf6",
2318
+ borderDisable: "rgba(221, 223, 216, 0)",
2319
+ icon: "#31cae8"
1510
2320
  },
1511
2321
  faint: {
1512
- bg: "rgba(0, 0, 0, 0.15)",
1513
- bgHover: "rgba(0, 0, 0, 0.2)",
1514
- border: "rgba(0, 0, 0, 0.1)",
1515
- borderHover: "rgba(0, 0, 0, 0.15)"
2322
+ bg: "#ecede9",
2323
+ bgHover: "#dddfd8",
2324
+ border: "#dddfd8",
2325
+ borderHover: "#c2c4ba"
1516
2326
  },
1517
2327
  slider: {
1518
- bg: "#80eaff",
1519
- bgHover: "#b2f2ff",
1520
- bgDisable: "#c2c4ba"
2328
+ bg: "#1a1a19",
2329
+ bgHover: "#272725",
2330
+ bgDisable: "#dddfd8"
1521
2331
  },
1522
2332
  switch: {
1523
- bg: "#000000",
1524
- bgHover: "#1b2628",
1525
- bgDisable: "rgba(0, 0, 0, 0.25)",
1526
- border: "rgba(0, 0, 0, 0)",
1527
- borderHover: "rgba(0, 0, 0, 0)",
1528
- borderDisable: "rgba(0, 0, 0, 0)"
2333
+ bg: "rgba(128, 234, 255, 0.15)",
2334
+ bgHover: "rgba(128, 234, 255, 0.3)",
2335
+ bgDisable: "rgba(221, 223, 216, 0.65)",
2336
+ border: "#80eaff",
2337
+ borderHover: "#55dcf6",
2338
+ borderDisable: "rgba(221, 223, 216, 0)"
1529
2339
  },
1530
2340
  knob: {
1531
- bg: "#ffffff",
1532
- bgHover: "#e8eced",
1533
- bgActive: "#ffffff",
1534
- bgActiveHover: "#e8eced",
1535
- bgInactive: "#000000",
1536
- bgInactiveHover: "#e8eced",
1537
- bgDisable: "#000000"
2341
+ bg: "#1a1a19",
2342
+ bgHover: "#272725",
2343
+ bgActive: "#55dcf6",
2344
+ bgActiveHover: "#31cae8",
2345
+ bgInactive: "#c2c4ba",
2346
+ bgInactiveHover: "#a9aca0",
2347
+ bgDisable: "#dddfd8"
1538
2348
  },
1539
2349
  text: {
1540
2350
  primary: "#000000",
1541
- disable: "rgba(0, 0, 0, 0.4)"
2351
+ disable: "rgba(0, 0, 0, 0.2)"
1542
2352
  },
1543
2353
  link: {
1544
- primary: "#22a8c3",
1545
- primaryHover: "#31cae8",
1546
- secondary: "#8aad1f",
1547
- secondaryHover: "#b2e51a"
2354
+ primary: "#1b8398",
2355
+ primaryHover: "#55dcf6",
2356
+ secondary: "#5031e8",
2357
+ secondaryHover: "#9580ff"
1548
2358
  },
1549
2359
  segmented: {
1550
- bg: "rgba(0, 0, 0, 0.08)",
1551
- bgHover: "rgba(0, 0, 0, 0.08)",
1552
- bgActive: "#ffffff",
1553
- border: "rgba(0, 0, 0, 0.1)",
1554
- borderHover: "rgba(0, 0, 0, 0.1)",
1555
- borderActive: "rgba(0, 0, 0, 0)",
2360
+ bg: "rgba(255, 255, 255, 0.08)",
2361
+ bgHover: "#dddfd8",
2362
+ bgActive: "rgba(128, 234, 255, 0.15)",
2363
+ border: "rgba(255, 255, 255, 0.1)",
2364
+ borderHover: "#c2c4ba",
2365
+ borderActive: "#80eaff",
1556
2366
  text: "#000000",
1557
- textDisable: "rgba(0, 0, 0, 0.4)"
2367
+ textDisable: "rgba(0, 0, 0, 0.2)"
1558
2368
  },
1559
2369
  tagLabel: {
1560
2370
  product: {
@@ -1576,14 +2386,14 @@ var blueprints_default = {
1576
2386
  textCompact: "rgba(0, 0, 0, 0.48)"
1577
2387
  },
1578
2388
  id: {
1579
- bg: "#dddfd8",
2389
+ bg: "#dadbd7",
1580
2390
  bgSeries: "#000000",
1581
2391
  textSeries: "#d7dee0",
1582
2392
  textNumber: "#000000",
1583
2393
  textCompact: "rgba(0, 0, 0, 0.48)"
1584
2394
  },
1585
2395
  subentity: {
1586
- bg: "#a9aca0",
2396
+ bg: "#a8aaa2",
1587
2397
  text: "#000000"
1588
2398
  },
1589
2399
  item: {
@@ -1593,20 +2403,20 @@ var blueprints_default = {
1593
2403
  }
1594
2404
  },
1595
2405
  toast: {
1596
- bg: "#233134"
2406
+ bg: "#a9aca0"
1597
2407
  },
1598
2408
  toggleButton: {
1599
- bg: "rgba(0, 0, 0, 0.08)",
1600
- bgHover: "rgba(0, 0, 0, 0.15)",
1601
- bgActive: "#d6f8ff",
1602
- bgDisable: "rgba(0, 0, 0, 0.2)",
1603
- border: "rgba(0, 0, 0, 0.1)",
1604
- borderHover: "rgba(0, 0, 0, 0.15)",
2409
+ bg: "#ecede9",
2410
+ bgHover: "#dddfd8",
2411
+ bgActive: "rgba(128, 234, 255, 0.15)",
2412
+ bgDisable: "rgba(221, 223, 216, 0.65)",
2413
+ border: "#dddfd8",
2414
+ borderHover: "#c2c4ba",
1605
2415
  borderActive: "#80eaff",
1606
- borderDisable: "rgba(0, 0, 0, 0)",
2416
+ borderDisable: "rgba(221, 223, 216, 0)",
1607
2417
  text: "#000000",
1608
2418
  textActive: "#000000",
1609
- textDisable: "rgba(0, 0, 0, 0.36)"
2419
+ textDisable: "rgba(0, 0, 0, 0.2)"
1610
2420
  },
1611
2421
  appButton: {
1612
2422
  bg: "#dadbd7",
@@ -1623,21 +2433,29 @@ var blueprints_default = {
1623
2433
 
1624
2434
  // src/tokens/colors.ts
1625
2435
  var colors = {
1626
- dark: pentagram_dark_default,
1627
- light: pentagram_light_default,
1628
- "pentagram-dark": pentagram_dark_default,
1629
- "pentagram-light": pentagram_light_default,
2436
+ dark: dark_default,
2437
+ light: light_default,
2438
+ "pentagram-dark": dark_default,
2439
+ "pentagram-light": light_default,
1630
2440
  "ltg-dark": ltg_dark_default,
1631
- blueprints: blueprints_default
2441
+ blueprints: blueprints_default,
2442
+ "corpsite-dark": corpsite_dark_default,
2443
+ "corpsite-light": corpsite_light_default
1632
2444
  };
1633
2445
 
1634
2446
  // src/tokens/spacing.ts
1635
2447
  var spacing = {
1636
2448
  xs: 4,
2449
+ sm: 8,
2450
+ md: 16,
2451
+ lg: 24,
2452
+ xl: 32,
2453
+ /** @deprecated Use `sm` instead (same 8px). Kept for backwards compatibility. */
1637
2454
  s: 8,
2455
+ /** @deprecated Use `md` instead (same 16px). Kept for backwards compatibility. */
1638
2456
  m: 16,
1639
- l: 24,
1640
- xl: 32
2457
+ /** @deprecated Use `lg` instead (same 24px). Kept for backwards compatibility. */
2458
+ l: 24
1641
2459
  };
1642
2460
  var radius = {
1643
2461
  button: 4,
@@ -1688,7 +2506,7 @@ var shape = {
1688
2506
  input: {
1689
2507
  xl: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
1690
2508
  lg: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
1691
- md: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
2509
+ md: { borderRadius: radiusScale["75"], borderWidth: stroke["1"] },
1692
2510
  sm: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
1693
2511
  xs: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] }
1694
2512
  },
@@ -1750,12 +2568,16 @@ var shape = {
1750
2568
  xs: { borderRadius: radiusScale["50"] }
1751
2569
  },
1752
2570
  avatar: {
1753
- xl: { borderRadius: radiusScale["100"], borderWidth: stroke["2"] },
1754
- lg: { borderRadius: radiusScale["75"], borderWidth: stroke["2"] },
1755
- md: { borderRadius: radiusScale["75"], borderWidth: stroke["2"] },
1756
- sm: { borderRadius: radiusScale["50"], borderWidth: stroke["2"] },
1757
- xs: { borderRadius: radiusScale["50"], borderWidth: stroke["2"] },
1758
- xxs: { borderRadius: radiusScale["25"], borderWidth: stroke["2"] }
2571
+ xl: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
2572
+ lg: { borderRadius: radiusScale["75"], borderWidth: stroke["1"] },
2573
+ md: { borderRadius: radiusScale["75"], borderWidth: stroke["1"] },
2574
+ sm: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
2575
+ xs: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
2576
+ xxs: { borderRadius: radiusScale["25"], borderWidth: stroke["1"] }
2577
+ },
2578
+ cell: {
2579
+ borderRadius: radiusScale["100"],
2580
+ borderWidth: stroke["1"]
1759
2581
  },
1760
2582
  modal: {
1761
2583
  borderRadius: radiusScale["100"]
@@ -1787,24 +2609,33 @@ var shadow = {
1787
2609
 
1788
2610
  // src/tokens/fonts.ts
1789
2611
  var FALLBACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
2612
+ var PILAT = `"Pilat", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`;
2613
+ var PILAT_WIDE = `"Pilat Wide", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`;
2614
+ var AKTIV_GROTESK = `"Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`;
1790
2615
  var displayFontByContext = {
1791
- b2b: `"Pilat", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`,
1792
- b2c: `"Pilat Wide", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`
2616
+ b2b: PILAT,
2617
+ b2c: PILAT_WIDE,
2618
+ corpsite: PILAT
1793
2619
  };
1794
- var bodyFont = `"Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`;
2620
+ var textFontByContext = {
2621
+ b2b: AKTIV_GROTESK,
2622
+ b2c: AKTIV_GROTESK,
2623
+ corpsite: PILAT
2624
+ };
2625
+ var bodyFont = AKTIV_GROTESK;
1795
2626
  var fonts = {
1796
2627
  heading: displayFontByContext.b2b,
1797
2628
  body: bodyFont,
1798
- /** Paragraph/reading font — same families as body */
1799
- text: bodyFont,
2629
+ /** Paragraph/reading font — Figma `text` role */
2630
+ text: textFontByContext.b2b,
1800
2631
  /** @deprecated Use `heading` or `body` instead */
1801
2632
  primary: bodyFont
1802
2633
  };
1803
2634
  var getFonts = (productContext = "b2b") => ({
1804
2635
  heading: displayFontByContext[productContext],
1805
2636
  body: bodyFont,
1806
- /** Paragraph/reading font — same families as body */
1807
- text: bodyFont,
2637
+ /** Paragraph/reading font — Figma `text` role (differs from `body` for corpsite) */
2638
+ text: textFontByContext[productContext],
1808
2639
  /** @deprecated Use `heading` or `body` instead */
1809
2640
  primary: bodyFont
1810
2641
  });
@@ -1831,6 +2662,12 @@ var SCALE_STEPS = [
1831
2662
  "650",
1832
2663
  "750"
1833
2664
  ];
2665
+ var DISPLAY_SCALE_STEPS = [
2666
+ ...SCALE_STEPS,
2667
+ "800",
2668
+ "850",
2669
+ "900"
2670
+ ];
1834
2671
  var fontSize = {
1835
2672
  "75": { common: 10, mobile: 10 },
1836
2673
  "100": { common: 12, mobile: 11 },
@@ -1844,7 +2681,10 @@ var fontSize = {
1844
2681
  "450": { common: 40, mobile: 32 },
1845
2682
  "550": { common: 48, mobile: 40 },
1846
2683
  "650": { common: 56, mobile: 48 },
1847
- "750": { common: 64, mobile: 56 }
2684
+ "750": { common: 64, mobile: 56 },
2685
+ "800": { common: 72, mobile: 64 },
2686
+ "850": { common: 80, mobile: 72 },
2687
+ "900": { common: 96, mobile: 80 }
1848
2688
  };
1849
2689
  var lineHeightDisplay = {
1850
2690
  "75": { common: 10, mobile: 10 },
@@ -1859,7 +2699,10 @@ var lineHeightDisplay = {
1859
2699
  "450": { common: 40, mobile: 32 },
1860
2700
  "550": { common: 48, mobile: 40 },
1861
2701
  "650": { common: 56, mobile: 48 },
1862
- "750": { common: 64, mobile: 56 }
2702
+ "750": { common: 64, mobile: 56 },
2703
+ "800": { common: 72, mobile: 64 },
2704
+ "850": { common: 80, mobile: 72 },
2705
+ "900": { common: 96, mobile: 80 }
1863
2706
  };
1864
2707
  var lineHeightCompact = {
1865
2708
  "75": { common: 14, mobile: 13 },
@@ -2032,21 +2875,21 @@ var typographyTokens = {
2032
2875
  h3: {
2033
2876
  fontSize: fontSize["350"].common,
2034
2877
  lineHeight: `${lineHeightDisplay["350"].common}px`,
2035
- fontWeight: 400,
2878
+ fontWeight: 500,
2036
2879
  scaleStep: "350",
2037
2880
  lineHeightCategory: "display"
2038
2881
  },
2039
2882
  h4: {
2040
2883
  fontSize: fontSize["250"].common,
2041
2884
  lineHeight: `${lineHeightDisplay["250"].common}px`,
2042
- fontWeight: 400,
2885
+ fontWeight: 500,
2043
2886
  scaleStep: "250",
2044
2887
  lineHeightCategory: "display"
2045
2888
  },
2046
2889
  h5: {
2047
2890
  fontSize: fontSize["200"].common,
2048
2891
  lineHeight: `${lineHeightDisplay["200"].common}px`,
2049
- fontWeight: 600,
2892
+ fontWeight: 500,
2050
2893
  scaleStep: "200",
2051
2894
  lineHeightCategory: "display"
2052
2895
  }
@@ -2125,6 +2968,122 @@ var typographyTokens = {
2125
2968
  }
2126
2969
  }
2127
2970
  }
2971
+ },
2972
+ corpsite: {
2973
+ heading: {
2974
+ h1: {
2975
+ fontSize: fontSize["650"].common,
2976
+ lineHeight: `${lineHeightDisplay["650"].common}px`,
2977
+ fontWeight: 300,
2978
+ scaleStep: "650",
2979
+ lineHeightCategory: "display"
2980
+ },
2981
+ h2: {
2982
+ fontSize: fontSize["550"].common,
2983
+ lineHeight: `${lineHeightDisplay["550"].common}px`,
2984
+ fontWeight: 400,
2985
+ scaleStep: "550",
2986
+ lineHeightCategory: "display"
2987
+ },
2988
+ h3: {
2989
+ fontSize: fontSize["450"].common,
2990
+ lineHeight: `${lineHeightDisplay["450"].common}px`,
2991
+ fontWeight: 400,
2992
+ scaleStep: "450",
2993
+ lineHeightCategory: "display"
2994
+ },
2995
+ h4: {
2996
+ fontSize: fontSize["350"].common,
2997
+ lineHeight: `${lineHeightDisplay["350"].common}px`,
2998
+ fontWeight: 400,
2999
+ scaleStep: "350",
3000
+ lineHeightCategory: "display"
3001
+ },
3002
+ h5: {
3003
+ fontSize: fontSize["250"].common,
3004
+ lineHeight: `${lineHeightDisplay["250"].common}px`,
3005
+ fontWeight: 500,
3006
+ scaleStep: "250",
3007
+ lineHeightCategory: "display"
3008
+ }
3009
+ },
3010
+ basic: {
3011
+ // Figma splits corpsite display into display-lg (96px) / display-md (80px)
3012
+ // / display-sm (64px). The app models a single `display`; mapped to
3013
+ // display-lg (step 900) — the largest, matching Figma's primary display.
3014
+ display: {
3015
+ fontSize: fontSize["900"].common,
3016
+ lineHeight: `${lineHeightDisplay["900"].common}px`,
3017
+ fontWeight: 300,
3018
+ scaleStep: "900",
3019
+ lineHeightCategory: "display"
3020
+ },
3021
+ "body-lg": {
3022
+ fontSize: fontSize["175"].common,
3023
+ lineHeight: `${lineHeightCompact["175"].common}px`,
3024
+ fontWeight: 500,
3025
+ scaleStep: "175",
3026
+ lineHeightCategory: "compact",
3027
+ accent: { fontWeight: 600 },
3028
+ paragraph: {
3029
+ lineHeight: `${lineHeightText["175"].common}px`,
3030
+ spacing: 20,
3031
+ lineHeightScaleStep: "175"
3032
+ }
3033
+ },
3034
+ "body-md": {
3035
+ fontSize: fontSize["150"].common,
3036
+ lineHeight: `${lineHeightCompact["150"].common}px`,
3037
+ fontWeight: 500,
3038
+ scaleStep: "150",
3039
+ lineHeightCategory: "compact",
3040
+ accent: { fontWeight: 600 },
3041
+ paragraph: {
3042
+ lineHeight: `${lineHeightText["150"].common}px`,
3043
+ spacing: 16,
3044
+ lineHeightScaleStep: "150"
3045
+ }
3046
+ },
3047
+ "body-sm": {
3048
+ fontSize: fontSize["125"].common,
3049
+ lineHeight: `${lineHeightCompact["125"].common}px`,
3050
+ fontWeight: 500,
3051
+ scaleStep: "125",
3052
+ lineHeightCategory: "compact",
3053
+ accent: { fontWeight: 600 },
3054
+ paragraph: {
3055
+ lineHeight: `${lineHeightText["125"].common}px`,
3056
+ spacing: 12,
3057
+ lineHeightScaleStep: "125"
3058
+ }
3059
+ },
3060
+ "body-xs": {
3061
+ fontSize: fontSize["100"].common,
3062
+ lineHeight: `${lineHeightCompact["100"].common}px`,
3063
+ fontWeight: 400,
3064
+ scaleStep: "100",
3065
+ lineHeightCategory: "compact",
3066
+ accent: { fontWeight: 500 },
3067
+ paragraph: {
3068
+ lineHeight: `${lineHeightText["100"].common}px`,
3069
+ spacing: 8,
3070
+ lineHeightScaleStep: "100"
3071
+ }
3072
+ },
3073
+ "body-xxs": {
3074
+ fontSize: fontSize["75"].common,
3075
+ lineHeight: `${lineHeightCompact["75"].common}px`,
3076
+ fontWeight: 400,
3077
+ scaleStep: "75",
3078
+ lineHeightCategory: "compact",
3079
+ accent: { fontWeight: 500 },
3080
+ paragraph: {
3081
+ lineHeight: `${lineHeightText["75"].common}px`,
3082
+ spacing: 6,
3083
+ lineHeightScaleStep: "75"
3084
+ }
3085
+ }
3086
+ }
2128
3087
  }
2129
3088
  };
2130
3089
  var defaultProductContext = "b2b";
@@ -2397,10 +3356,10 @@ var MOBILE_MAX_WIDTH = breakpoints.desktop - 1;
2397
3356
  // src/styles/typography-css.ts
2398
3357
  function buildDeclarations(mode) {
2399
3358
  const lines = [];
2400
- for (const step of SCALE_STEPS) {
3359
+ for (const step of DISPLAY_SCALE_STEPS) {
2401
3360
  lines.push(`--xui-font-size-${step}:${fontSize[step][mode]}px`);
2402
3361
  }
2403
- for (const step of SCALE_STEPS) {
3362
+ for (const step of DISPLAY_SCALE_STEPS) {
2404
3363
  lines.push(`--xui-lh-display-${step}:${lineHeightDisplay[step][mode]}px`);
2405
3364
  }
2406
3365
  for (const step of SCALE_STEPS) {
@@ -2962,21 +3921,21 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
2962
3921
  },
2963
3922
  lg: {
2964
3923
  height: 128,
2965
- padding: spacing.l,
3924
+ padding: spacing.lg,
2966
3925
  fontSize: 18,
2967
3926
  iconSize: 28,
2968
3927
  radius: shape.input.lg.borderRadius
2969
3928
  },
2970
3929
  md: {
2971
3930
  height: 112,
2972
- padding: spacing.m,
3931
+ padding: spacing.md,
2973
3932
  fontSize: 16,
2974
3933
  iconSize: 24,
2975
3934
  radius: shape.input.md.borderRadius
2976
3935
  },
2977
3936
  sm: {
2978
3937
  height: 96,
2979
- padding: spacing.s,
3938
+ padding: spacing.sm,
2980
3939
  fontSize: 14,
2981
3940
  iconSize: 20,
2982
3941
  radius: shape.input.sm.borderRadius
@@ -3922,6 +4881,7 @@ var useId = hasReactUseId ? React3.useId : useIdFallback;
3922
4881
  var ModalIdContext = createContext(null);
3923
4882
  var useModalId = () => useContext(ModalIdContext);
3924
4883
  export {
4884
+ DISPLAY_SCALE_STEPS,
3925
4885
  FontLoader,
3926
4886
  MOBILE_MAX_WIDTH,
3927
4887
  ModalIdContext,