@xsolla/xui-core 0.161.3 → 0.162.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
@@ -1216,13 +1216,419 @@ var ltg_dark_default = {
1216
1216
  }
1217
1217
  };
1218
1218
 
1219
+ // src/tokens/blueprints.json
1220
+ var blueprints_default = {
1221
+ background: {
1222
+ primary: "#ffffff",
1223
+ secondary: "#f3f3f2",
1224
+ brand: {
1225
+ primary: "#80eaff",
1226
+ secondary: "#b2f2ff"
1227
+ },
1228
+ brandExtra: {
1229
+ primary: "#7055f6",
1230
+ secondary: "#9580ff"
1231
+ },
1232
+ inverse: "#000000",
1233
+ static: {
1234
+ dark: "#000000",
1235
+ light: "#ffffff"
1236
+ },
1237
+ success: {
1238
+ primary: "#95ff80",
1239
+ secondary: "#bfffb2"
1240
+ },
1241
+ warning: {
1242
+ primary: "#ffc380",
1243
+ secondary: "#ffdbb2"
1244
+ },
1245
+ alert: {
1246
+ primary: "#f67055",
1247
+ secondary: "#ffbfb2"
1248
+ },
1249
+ neutral: {
1250
+ primary: "#99aeb2",
1251
+ secondary: "#d7dee0"
1252
+ }
1253
+ },
1254
+ content: {
1255
+ primary: "#000000",
1256
+ secondary: "rgba(0, 0, 0, 0.75)",
1257
+ tertiary: "rgba(0, 0, 0, 0.6)",
1258
+ brand: {
1259
+ primary: "#22a8c3",
1260
+ secondary: "#31cae8"
1261
+ },
1262
+ brandExtra: {
1263
+ primary: "#301b98",
1264
+ secondary: "#3d22c3"
1265
+ },
1266
+ inverse: "#ffffff",
1267
+ static: {
1268
+ light: "#ffffff",
1269
+ dark: "#000000"
1270
+ },
1271
+ success: {
1272
+ primary: "#30981b",
1273
+ secondary: "#3dc322"
1274
+ },
1275
+ warning: {
1276
+ primary: "#c37822",
1277
+ secondary: "#f6ab55"
1278
+ },
1279
+ alert: {
1280
+ primary: "#e84f30",
1281
+ secondary: "#f67055"
1282
+ },
1283
+ neutral: {
1284
+ primary: "#34474b",
1285
+ secondary: "#607f85"
1286
+ },
1287
+ on: {
1288
+ brand: "#000000",
1289
+ brandExtra: "#000000",
1290
+ success: "#000000",
1291
+ warning: "#000000",
1292
+ alert: "#ffffff",
1293
+ neutral: "#000000"
1294
+ }
1295
+ },
1296
+ border: {
1297
+ primary: "#000000",
1298
+ secondary: "rgba(0, 0, 0, 0.1)",
1299
+ brand: "#31cae8",
1300
+ brandExtra: "#5031e8",
1301
+ inverse: "rgba(255, 255, 255, 0.15)",
1302
+ success: "#50e831",
1303
+ warning: "#e89331",
1304
+ alert: "#e84f30",
1305
+ neutral: "#7b989d"
1306
+ },
1307
+ overlay: {
1308
+ mono: "rgba(0, 0, 0, 0.05)",
1309
+ brand: "rgba(128, 234, 255, 0.3)",
1310
+ brandExtra: "rgba(149, 128, 255, 0.3)",
1311
+ success: "rgba(149, 255, 128, 0.24)",
1312
+ warning: "rgba(255, 195, 128, 0.28)",
1313
+ alert: "rgba(232, 79, 48, 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: "#ccf6ff",
1335
+ bgHover: "#e5fbff",
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: "#e5fbff",
1344
+ bgPress: "#ccf6ff",
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: "#dadbd7",
1376
+ bgHover: "#e6e7e4",
1377
+ bgPress: "#c1c2bc",
1378
+ border: "#c1c2bc",
1379
+ borderHover: "#dadbd7",
1380
+ borderPress: "rgba(255, 255, 255, 0)"
1381
+ },
1382
+ tertiary: {
1383
+ bg: "rgba(255, 255, 255, 0)",
1384
+ bgHover: "#f3f3f2",
1385
+ bgPress: "#e6e7e4",
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: "#ccf6ff",
1504
+ bgHover: "#e5fbff",
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: "#cccccc"
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: "#9bc323",
1547
+ secondaryHover: "#bae831"
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: "#dfff80",
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: "#dadbd7",
1580
+ bgSeries: "#000000",
1581
+ textSeries: "#d7dee0",
1582
+ textNumber: "#000000",
1583
+ textCompact: "rgba(0, 0, 0, 0.48)"
1584
+ },
1585
+ subentity: {
1586
+ bg: "#a8aaa2",
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: "#ccf6ff",
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
+
1219
1624
  // src/tokens/colors.ts
1220
1625
  var colors = {
1221
1626
  dark: pentagram_dark_default,
1222
1627
  light: pentagram_light_default,
1223
1628
  "pentagram-dark": pentagram_dark_default,
1224
1629
  "pentagram-light": pentagram_light_default,
1225
- "ltg-dark": ltg_dark_default
1630
+ "ltg-dark": ltg_dark_default,
1631
+ blueprints: blueprints_default
1226
1632
  };
1227
1633
 
1228
1634
  // src/tokens/spacing.ts