@luxonis/depthai-viewer-common 3.7.6 → 3.8.1
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/dist/components/Streams.d.ts.map +1 -1
- package/dist/components/Streams.js +0 -2
- package/dist/components/Streams.js.map +1 -1
- package/dist/components/ThemeToggle.d.ts +13 -0
- package/dist/components/ThemeToggle.d.ts.map +1 -0
- package/dist/components/ThemeToggle.js +18 -0
- package/dist/components/ThemeToggle.js.map +1 -0
- package/dist/dai-connection/connection.d.ts +1 -0
- package/dist/dai-connection/connection.d.ts.map +1 -1
- package/dist/dai-connection/connection.js +15 -2
- package/dist/dai-connection/connection.js.map +1 -1
- package/dist/index.css +413 -6
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/providers/ThemeProvider.d.ts +25 -0
- package/dist/providers/ThemeProvider.d.ts.map +1 -0
- package/dist/providers/ThemeProvider.js +55 -0
- package/dist/providers/ThemeProvider.js.map +1 -0
- package/dist/utils/local-storage.d.ts +1 -1
- package/dist/utils/local-storage.d.ts.map +1 -1
- package/dist/visualizer/components/EmptyState.js +1 -1
- package/dist/visualizer/components/EmptyState.js.map +1 -1
- package/dist/visualizer/components/Panel.d.ts.map +1 -1
- package/dist/visualizer/components/Panel.js +1 -1
- package/dist/visualizer/components/Panel.js.map +1 -1
- package/dist/visualizer/components/PanelToolbar.js +1 -1
- package/dist/visualizer/components/PanelToolbar.js.map +1 -1
- package/dist/visualizer/output.css +413 -6
- package/dist/visualizer/panels/image/ImageCanvasRenderer.d.ts.map +1 -1
- package/dist/visualizer/panels/image/ImageCanvasRenderer.js +3 -2
- package/dist/visualizer/panels/image/ImageCanvasRenderer.js.map +1 -1
- package/dist/visualizer/panels/image/webgl-image-renderer.d.ts.map +1 -1
- package/dist/visualizer/panels/image/webgl-image-renderer.js +5 -2
- package/dist/visualizer/panels/image/webgl-image-renderer.js.map +1 -1
- package/dist/visualizer/panels/pointcloud/PointCloudCanvasRenderer.d.ts.map +1 -1
- package/dist/visualizer/panels/pointcloud/PointCloudCanvasRenderer.js +2 -3
- package/dist/visualizer/panels/pointcloud/PointCloudCanvasRenderer.js.map +1 -1
- package/dist/visualizer/utils/use-theme-mode.d.ts +10 -0
- package/dist/visualizer/utils/use-theme-mode.d.ts.map +1 -1
- package/dist/visualizer/utils/use-theme-mode.js +53 -0
- package/dist/visualizer/utils/use-theme-mode.js.map +1 -1
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -14,7 +14,6 @@
|
|
|
14
14
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
|
15
15
|
"Courier New", monospace;
|
|
16
16
|
--color-slate-600: oklch(44.6% 0.043 257.281);
|
|
17
|
-
--color-gray-100: oklch(96.7% 0.003 264.542);
|
|
18
17
|
--color-gray-700: oklch(37.3% 0.034 259.733);
|
|
19
18
|
--color-black: #000;
|
|
20
19
|
--color-white: #fff;
|
|
@@ -917,9 +916,6 @@
|
|
|
917
916
|
--tw-border-style: solid;
|
|
918
917
|
border-style: solid;
|
|
919
918
|
}
|
|
920
|
-
.border-\[\#d3d3d3d9\] {
|
|
921
|
-
border-color: #d3d3d3d9;
|
|
922
|
-
}
|
|
923
919
|
.border-\[color-mix\(in_srgb\,var\(--lux-muted-foreground\)_65\%\,var\(--lux-background\)\)\] {
|
|
924
920
|
border-color: var(--lux-muted-foreground);
|
|
925
921
|
@supports (color: color-mix(in lab, red, red)) {
|
|
@@ -947,6 +943,15 @@
|
|
|
947
943
|
.border-black {
|
|
948
944
|
border-color: var(--color-black);
|
|
949
945
|
}
|
|
946
|
+
.border-border {
|
|
947
|
+
border-color: var(--lux-border);
|
|
948
|
+
}
|
|
949
|
+
.border-divider {
|
|
950
|
+
border-color: var(--lux-divider);
|
|
951
|
+
}
|
|
952
|
+
.border-input {
|
|
953
|
+
border-color: var(--lux-input);
|
|
954
|
+
}
|
|
950
955
|
.border-transparent {
|
|
951
956
|
border-color: transparent;
|
|
952
957
|
}
|
|
@@ -986,6 +991,9 @@
|
|
|
986
991
|
.bg-\[var\(--ui-color-bg\)\] {
|
|
987
992
|
background-color: var(--ui-color-bg);
|
|
988
993
|
}
|
|
994
|
+
.bg-background {
|
|
995
|
+
background-color: var(--lux-background);
|
|
996
|
+
}
|
|
989
997
|
.bg-black {
|
|
990
998
|
background-color: var(--color-black);
|
|
991
999
|
}
|
|
@@ -995,8 +1003,23 @@
|
|
|
995
1003
|
background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
|
|
996
1004
|
}
|
|
997
1005
|
}
|
|
998
|
-
.bg-
|
|
999
|
-
background-color: var(--
|
|
1006
|
+
.bg-border {
|
|
1007
|
+
background-color: var(--lux-border);
|
|
1008
|
+
}
|
|
1009
|
+
.bg-canvas {
|
|
1010
|
+
background-color: var(--lux-canvas);
|
|
1011
|
+
}
|
|
1012
|
+
.bg-card {
|
|
1013
|
+
background-color: var(--lux-card);
|
|
1014
|
+
}
|
|
1015
|
+
.bg-input {
|
|
1016
|
+
background-color: var(--lux-input);
|
|
1017
|
+
}
|
|
1018
|
+
.bg-muted {
|
|
1019
|
+
background-color: var(--lux-muted);
|
|
1020
|
+
}
|
|
1021
|
+
.bg-muted-foreground {
|
|
1022
|
+
background-color: var(--lux-muted-foreground);
|
|
1000
1023
|
}
|
|
1001
1024
|
.bg-transparent {
|
|
1002
1025
|
background-color: transparent;
|
|
@@ -1239,12 +1262,33 @@
|
|
|
1239
1262
|
.text-black {
|
|
1240
1263
|
color: var(--color-black);
|
|
1241
1264
|
}
|
|
1265
|
+
.text-border {
|
|
1266
|
+
color: var(--lux-border);
|
|
1267
|
+
}
|
|
1268
|
+
.text-foreground {
|
|
1269
|
+
color: var(--lux-foreground);
|
|
1270
|
+
}
|
|
1271
|
+
.text-foreground\/70 {
|
|
1272
|
+
color: var(--lux-foreground);
|
|
1273
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1274
|
+
color: color-mix(in oklab, var(--lux-foreground) 70%, transparent);
|
|
1275
|
+
}
|
|
1276
|
+
}
|
|
1242
1277
|
.text-gray-700 {
|
|
1243
1278
|
color: var(--color-gray-700);
|
|
1244
1279
|
}
|
|
1245
1280
|
.text-inherit {
|
|
1246
1281
|
color: inherit;
|
|
1247
1282
|
}
|
|
1283
|
+
.text-muted-foreground {
|
|
1284
|
+
color: var(--lux-muted-foreground);
|
|
1285
|
+
}
|
|
1286
|
+
.text-muted-foreground\/80 {
|
|
1287
|
+
color: var(--lux-muted-foreground);
|
|
1288
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1289
|
+
color: color-mix(in oklab, var(--lux-muted-foreground) 80%, transparent);
|
|
1290
|
+
}
|
|
1291
|
+
}
|
|
1248
1292
|
.text-slate-600 {
|
|
1249
1293
|
color: var(--color-slate-600);
|
|
1250
1294
|
}
|
|
@@ -1296,6 +1340,9 @@
|
|
|
1296
1340
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
1297
1341
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1298
1342
|
}
|
|
1343
|
+
.ring-offset-background {
|
|
1344
|
+
--tw-ring-offset-color: var(--lux-background);
|
|
1345
|
+
}
|
|
1299
1346
|
.outline {
|
|
1300
1347
|
outline-style: var(--tw-outline-style);
|
|
1301
1348
|
outline-width: 1px;
|
|
@@ -1373,6 +1420,11 @@
|
|
|
1373
1420
|
.group-hover\:opacity-100:is(:where(.group):hover *) {
|
|
1374
1421
|
opacity: 100%;
|
|
1375
1422
|
}
|
|
1423
|
+
}
|
|
1424
|
+
.placeholder\:text-muted-foreground::placeholder {
|
|
1425
|
+
color: var(--lux-muted-foreground);
|
|
1426
|
+
}
|
|
1427
|
+
@media (hover: hover) {
|
|
1376
1428
|
.hover\:border-\[var\(--ui-color-border-hover\)\]:hover {
|
|
1377
1429
|
border-color: var(--ui-color-border-hover);
|
|
1378
1430
|
}
|
|
@@ -1382,6 +1434,9 @@
|
|
|
1382
1434
|
.hover\:text-\[var\(--ui-color-text-hover\)\]:hover {
|
|
1383
1435
|
color: var(--ui-color-text-hover);
|
|
1384
1436
|
}
|
|
1437
|
+
.hover\:text-foreground:hover {
|
|
1438
|
+
color: var(--lux-foreground);
|
|
1439
|
+
}
|
|
1385
1440
|
.hover\:underline:hover {
|
|
1386
1441
|
text-decoration-line: underline;
|
|
1387
1442
|
}
|
|
@@ -1451,6 +1506,12 @@
|
|
|
1451
1506
|
.data-\[disabled\]\:opacity-50[data-disabled] {
|
|
1452
1507
|
opacity: 50%;
|
|
1453
1508
|
}
|
|
1509
|
+
.data-\[state\=active\]\:bg-background[data-state="active"] {
|
|
1510
|
+
background-color: var(--lux-background);
|
|
1511
|
+
}
|
|
1512
|
+
.data-\[state\=active\]\:text-foreground[data-state="active"] {
|
|
1513
|
+
color: var(--lux-foreground);
|
|
1514
|
+
}
|
|
1454
1515
|
.data-\[state\=active\]\:shadow-sm[data-state="active"] {
|
|
1455
1516
|
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
1456
1517
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
@@ -1466,6 +1527,9 @@
|
|
|
1466
1527
|
--tw-translate-x: 0px;
|
|
1467
1528
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
1468
1529
|
}
|
|
1530
|
+
.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
|
|
1531
|
+
background-color: var(--lux-input);
|
|
1532
|
+
}
|
|
1469
1533
|
@media (width >= 40rem) {
|
|
1470
1534
|
.sm\:max-w-\[420px\] {
|
|
1471
1535
|
max-width: 420px;
|
|
@@ -1507,6 +1571,349 @@
|
|
|
1507
1571
|
rotate: 180deg;
|
|
1508
1572
|
}
|
|
1509
1573
|
}
|
|
1574
|
+
:root {
|
|
1575
|
+
color-scheme: light;
|
|
1576
|
+
--lux-surface: #ffffff;
|
|
1577
|
+
--lux-surface-raised: #ffffff;
|
|
1578
|
+
--lux-surface-sunken: #f2f4f7;
|
|
1579
|
+
--lux-popover: #ffffff;
|
|
1580
|
+
--lux-popover-foreground: #1d2939;
|
|
1581
|
+
--lux-divider: #d3d3d3d9;
|
|
1582
|
+
--lux-overlay: #00000040;
|
|
1583
|
+
--lux-canvas: #ffffff;
|
|
1584
|
+
--lux-chart-x: #82ca9d;
|
|
1585
|
+
--lux-chart-y: #00099d;
|
|
1586
|
+
--lux-chart-z: #ff0000;
|
|
1587
|
+
--lux-chart-grid: #cccccc;
|
|
1588
|
+
--lux-chart-axis: #666666;
|
|
1589
|
+
}
|
|
1590
|
+
html.dark {
|
|
1591
|
+
color-scheme: dark;
|
|
1592
|
+
--lux-background: #0b1220;
|
|
1593
|
+
--lux-foreground: #e6e9ef;
|
|
1594
|
+
--lux-card: #111a2b;
|
|
1595
|
+
--lux-card-foreground: #e6e9ef;
|
|
1596
|
+
--lux-popover: #1a2437;
|
|
1597
|
+
--lux-popover-foreground: #e6e9ef;
|
|
1598
|
+
--lux-surface: #111a2b;
|
|
1599
|
+
--lux-surface-raised: #1a2437;
|
|
1600
|
+
--lux-surface-sunken: #080d18;
|
|
1601
|
+
--lux-divider: #2c3a50;
|
|
1602
|
+
--lux-overlay: #000000a6;
|
|
1603
|
+
--lux-canvas: #0b1220;
|
|
1604
|
+
--lux-chart-x: #82ca9d;
|
|
1605
|
+
--lux-chart-y: #7b83ff;
|
|
1606
|
+
--lux-chart-z: #ff6b6b;
|
|
1607
|
+
--lux-chart-grid: #2c3a50;
|
|
1608
|
+
--lux-chart-axis: #98a2b3;
|
|
1609
|
+
--lux-border: #2c3a50;
|
|
1610
|
+
--lux-input: #2c3a50;
|
|
1611
|
+
--lux-ring: #8da4f4;
|
|
1612
|
+
--lux-muted: #16202f;
|
|
1613
|
+
--lux-muted-foreground: #98a2b3;
|
|
1614
|
+
--lux-secondary: #1a2437;
|
|
1615
|
+
--lux-secondary-foreground: #cbd2dd;
|
|
1616
|
+
--lux-accent: #1e2450;
|
|
1617
|
+
--lux-accent-foreground: #a5b0f7;
|
|
1618
|
+
--lux-primary: #4c4ff1;
|
|
1619
|
+
--lux-primary-foreground: #ffffff;
|
|
1620
|
+
--lux-destructive: #f04438;
|
|
1621
|
+
--lux-destructive-foreground: #ffffff;
|
|
1622
|
+
--lux-success: #12b76a;
|
|
1623
|
+
--lux-success-foreground: #ffffff;
|
|
1624
|
+
--lux-warning: #dc6803;
|
|
1625
|
+
--lux-warning-foreground: #ffffff;
|
|
1626
|
+
--lux-intent-active-solid: #4c4ff1;
|
|
1627
|
+
--lux-intent-active-hover-solid: #5f62f4;
|
|
1628
|
+
--lux-intent-active-soft: #1e2450;
|
|
1629
|
+
--lux-intent-active-hover-soft: #262d61;
|
|
1630
|
+
--lux-intent-active-text: #a5b0f7;
|
|
1631
|
+
--lux-intent-active-border: #3b45a8;
|
|
1632
|
+
--lux-intent-active-on-solid: #ffffff;
|
|
1633
|
+
--lux-intent-gray-solid: #667085;
|
|
1634
|
+
--lux-intent-gray-hover-solid: #7b849a;
|
|
1635
|
+
--lux-intent-gray-soft: #1d2939;
|
|
1636
|
+
--lux-intent-gray-hover-soft: #263447;
|
|
1637
|
+
--lux-intent-gray-text: #d0d5dd;
|
|
1638
|
+
--lux-intent-gray-border: #2c3a50;
|
|
1639
|
+
--lux-intent-gray-on-solid: #ffffff;
|
|
1640
|
+
--lux-intent-success-solid: #12b76a;
|
|
1641
|
+
--lux-intent-success-hover-solid: #2ecc84;
|
|
1642
|
+
--lux-intent-success-soft: #0c2c1e;
|
|
1643
|
+
--lux-intent-success-hover-soft: #113a28;
|
|
1644
|
+
--lux-intent-success-text: #6ce9a6;
|
|
1645
|
+
--lux-intent-success-border: #1f6b45;
|
|
1646
|
+
--lux-intent-success-on-solid: #ffffff;
|
|
1647
|
+
--lux-intent-warning-solid: #dc6803;
|
|
1648
|
+
--lux-intent-warning-hover-solid: #f08316;
|
|
1649
|
+
--lux-intent-warning-soft: #2f1e05;
|
|
1650
|
+
--lux-intent-warning-hover-soft: #3d2708;
|
|
1651
|
+
--lux-intent-warning-text: #fdb022;
|
|
1652
|
+
--lux-intent-warning-border: #7c4a0a;
|
|
1653
|
+
--lux-intent-warning-on-solid: #ffffff;
|
|
1654
|
+
--lux-intent-error-solid: #f04438;
|
|
1655
|
+
--lux-intent-error-hover-solid: #f4695f;
|
|
1656
|
+
--lux-intent-error-soft: #351210;
|
|
1657
|
+
--lux-intent-error-hover-soft: #451915;
|
|
1658
|
+
--lux-intent-error-text: #fda29b;
|
|
1659
|
+
--lux-intent-error-border: #8f2d25;
|
|
1660
|
+
--lux-intent-error-on-solid: #ffffff;
|
|
1661
|
+
--lux-intent-white-solid: #1a2437;
|
|
1662
|
+
--lux-intent-white-hover-solid: #243149;
|
|
1663
|
+
--lux-intent-white-soft: #1a2437;
|
|
1664
|
+
--lux-intent-white-hover-soft: #243149;
|
|
1665
|
+
--lux-intent-white-text: #e6e9ef;
|
|
1666
|
+
--lux-intent-white-border: #2c3a50;
|
|
1667
|
+
--lux-intent-white-on-solid: #e6e9ef;
|
|
1668
|
+
--lux-component-filled-active-text: var(--lux-intent-active-on-solid);
|
|
1669
|
+
--lux-component-filled-active-background: var(--lux-intent-active-solid);
|
|
1670
|
+
--lux-component-filled-active-border: var(--lux-intent-active-solid);
|
|
1671
|
+
--lux-component-filled-active-hover-background: var(
|
|
1672
|
+
--lux-intent-active-hover-solid
|
|
1673
|
+
);
|
|
1674
|
+
--lux-component-filled-active-hover-border: var(
|
|
1675
|
+
--lux-intent-active-hover-solid
|
|
1676
|
+
);
|
|
1677
|
+
--lux-component-filled-active-hover-text: var(--lux-intent-active-on-solid);
|
|
1678
|
+
--lux-component-filled-gray-text: var(--lux-intent-gray-on-solid);
|
|
1679
|
+
--lux-component-filled-gray-background: var(--lux-intent-gray-solid);
|
|
1680
|
+
--lux-component-filled-gray-border: var(--lux-intent-gray-solid);
|
|
1681
|
+
--lux-component-filled-gray-hover-background: var(
|
|
1682
|
+
--lux-intent-gray-hover-solid
|
|
1683
|
+
);
|
|
1684
|
+
--lux-component-filled-gray-hover-border: var(--lux-intent-gray-hover-solid);
|
|
1685
|
+
--lux-component-filled-gray-hover-text: var(--lux-intent-gray-on-solid);
|
|
1686
|
+
--lux-component-filled-success-text: var(--lux-intent-success-on-solid);
|
|
1687
|
+
--lux-component-filled-success-background: var(--lux-intent-success-solid);
|
|
1688
|
+
--lux-component-filled-success-border: var(--lux-intent-success-solid);
|
|
1689
|
+
--lux-component-filled-success-hover-background: var(
|
|
1690
|
+
--lux-intent-success-hover-solid
|
|
1691
|
+
);
|
|
1692
|
+
--lux-component-filled-success-hover-border: var(
|
|
1693
|
+
--lux-intent-success-hover-solid
|
|
1694
|
+
);
|
|
1695
|
+
--lux-component-filled-success-hover-text: var(--lux-intent-success-on-solid);
|
|
1696
|
+
--lux-component-filled-warning-text: var(--lux-intent-warning-on-solid);
|
|
1697
|
+
--lux-component-filled-warning-background: var(--lux-intent-warning-solid);
|
|
1698
|
+
--lux-component-filled-warning-border: var(--lux-intent-warning-solid);
|
|
1699
|
+
--lux-component-filled-warning-hover-background: var(
|
|
1700
|
+
--lux-intent-warning-hover-solid
|
|
1701
|
+
);
|
|
1702
|
+
--lux-component-filled-warning-hover-border: var(
|
|
1703
|
+
--lux-intent-warning-hover-solid
|
|
1704
|
+
);
|
|
1705
|
+
--lux-component-filled-warning-hover-text: var(--lux-intent-warning-on-solid);
|
|
1706
|
+
--lux-component-filled-error-text: var(--lux-intent-error-on-solid);
|
|
1707
|
+
--lux-component-filled-error-background: var(--lux-intent-error-solid);
|
|
1708
|
+
--lux-component-filled-error-border: var(--lux-intent-error-solid);
|
|
1709
|
+
--lux-component-filled-error-hover-background: var(
|
|
1710
|
+
--lux-intent-error-hover-solid
|
|
1711
|
+
);
|
|
1712
|
+
--lux-component-filled-error-hover-border: var(
|
|
1713
|
+
--lux-intent-error-hover-solid
|
|
1714
|
+
);
|
|
1715
|
+
--lux-component-filled-error-hover-text: var(--lux-intent-error-on-solid);
|
|
1716
|
+
--lux-component-filled-white-text: var(--lux-intent-white-on-solid);
|
|
1717
|
+
--lux-component-filled-white-background: var(--lux-intent-white-solid);
|
|
1718
|
+
--lux-component-filled-white-border: var(--lux-intent-white-solid);
|
|
1719
|
+
--lux-component-filled-white-hover-background: var(
|
|
1720
|
+
--lux-intent-white-hover-solid
|
|
1721
|
+
);
|
|
1722
|
+
--lux-component-filled-white-hover-border: var(
|
|
1723
|
+
--lux-intent-white-hover-solid
|
|
1724
|
+
);
|
|
1725
|
+
--lux-component-filled-white-hover-text: var(--lux-intent-white-on-solid);
|
|
1726
|
+
--lux-component-light-active-text: var(--lux-intent-active-text);
|
|
1727
|
+
--lux-component-light-active-background: var(--lux-intent-active-soft);
|
|
1728
|
+
--lux-component-light-active-border: var(--lux-intent-active-soft);
|
|
1729
|
+
--lux-component-light-active-hover-background: var(
|
|
1730
|
+
--lux-intent-active-hover-soft
|
|
1731
|
+
);
|
|
1732
|
+
--lux-component-light-active-hover-border: var(
|
|
1733
|
+
--lux-intent-active-hover-soft
|
|
1734
|
+
);
|
|
1735
|
+
--lux-component-light-active-hover-text: var(--lux-intent-active-text);
|
|
1736
|
+
--lux-component-light-gray-text: var(--lux-intent-gray-text);
|
|
1737
|
+
--lux-component-light-gray-background: var(--lux-intent-gray-soft);
|
|
1738
|
+
--lux-component-light-gray-border: var(--lux-intent-gray-soft);
|
|
1739
|
+
--lux-component-light-gray-hover-background: var(
|
|
1740
|
+
--lux-intent-gray-hover-soft
|
|
1741
|
+
);
|
|
1742
|
+
--lux-component-light-gray-hover-border: var(--lux-intent-gray-hover-soft);
|
|
1743
|
+
--lux-component-light-gray-hover-text: var(--lux-intent-gray-text);
|
|
1744
|
+
--lux-component-light-success-text: var(--lux-intent-success-text);
|
|
1745
|
+
--lux-component-light-success-background: var(--lux-intent-success-soft);
|
|
1746
|
+
--lux-component-light-success-border: var(--lux-intent-success-soft);
|
|
1747
|
+
--lux-component-light-success-hover-background: var(
|
|
1748
|
+
--lux-intent-success-hover-soft
|
|
1749
|
+
);
|
|
1750
|
+
--lux-component-light-success-hover-border: var(
|
|
1751
|
+
--lux-intent-success-hover-soft
|
|
1752
|
+
);
|
|
1753
|
+
--lux-component-light-success-hover-text: var(--lux-intent-success-text);
|
|
1754
|
+
--lux-component-light-warning-text: var(--lux-intent-warning-text);
|
|
1755
|
+
--lux-component-light-warning-background: var(--lux-intent-warning-soft);
|
|
1756
|
+
--lux-component-light-warning-border: var(--lux-intent-warning-soft);
|
|
1757
|
+
--lux-component-light-warning-hover-background: var(
|
|
1758
|
+
--lux-intent-warning-hover-soft
|
|
1759
|
+
);
|
|
1760
|
+
--lux-component-light-warning-hover-border: var(
|
|
1761
|
+
--lux-intent-warning-hover-soft
|
|
1762
|
+
);
|
|
1763
|
+
--lux-component-light-warning-hover-text: var(--lux-intent-warning-text);
|
|
1764
|
+
--lux-component-light-error-text: var(--lux-intent-error-text);
|
|
1765
|
+
--lux-component-light-error-background: var(--lux-intent-error-soft);
|
|
1766
|
+
--lux-component-light-error-border: var(--lux-intent-error-soft);
|
|
1767
|
+
--lux-component-light-error-hover-background: var(
|
|
1768
|
+
--lux-intent-error-hover-soft
|
|
1769
|
+
);
|
|
1770
|
+
--lux-component-light-error-hover-border: var(--lux-intent-error-hover-soft);
|
|
1771
|
+
--lux-component-light-error-hover-text: var(--lux-intent-error-text);
|
|
1772
|
+
--lux-component-light-white-text: var(--lux-intent-white-text);
|
|
1773
|
+
--lux-component-light-white-background: var(--lux-intent-white-soft);
|
|
1774
|
+
--lux-component-light-white-border: var(--lux-intent-white-soft);
|
|
1775
|
+
--lux-component-light-white-hover-background: var(
|
|
1776
|
+
--lux-intent-white-hover-soft
|
|
1777
|
+
);
|
|
1778
|
+
--lux-component-light-white-hover-border: var(--lux-intent-white-hover-soft);
|
|
1779
|
+
--lux-component-light-white-hover-text: var(--lux-intent-white-text);
|
|
1780
|
+
--lux-component-outline-active-text: var(--lux-intent-active-text);
|
|
1781
|
+
--lux-component-outline-active-background: var(--lux-intent-active-soft);
|
|
1782
|
+
--lux-component-outline-active-border: var(--lux-intent-active-border);
|
|
1783
|
+
--lux-component-outline-active-hover-background: var(
|
|
1784
|
+
--lux-intent-active-hover-soft
|
|
1785
|
+
);
|
|
1786
|
+
--lux-component-outline-active-hover-border: var(--lux-intent-active-border);
|
|
1787
|
+
--lux-component-outline-active-hover-text: var(--lux-intent-active-text);
|
|
1788
|
+
--lux-component-outline-gray-text: var(--lux-intent-gray-text);
|
|
1789
|
+
--lux-component-outline-gray-background: var(--lux-intent-gray-soft);
|
|
1790
|
+
--lux-component-outline-gray-border: var(--lux-intent-gray-border);
|
|
1791
|
+
--lux-component-outline-gray-hover-background: var(
|
|
1792
|
+
--lux-intent-gray-hover-soft
|
|
1793
|
+
);
|
|
1794
|
+
--lux-component-outline-gray-hover-border: var(--lux-intent-gray-border);
|
|
1795
|
+
--lux-component-outline-gray-hover-text: var(--lux-intent-gray-text);
|
|
1796
|
+
--lux-component-outline-success-text: var(--lux-intent-success-text);
|
|
1797
|
+
--lux-component-outline-success-background: var(--lux-intent-success-soft);
|
|
1798
|
+
--lux-component-outline-success-border: var(--lux-intent-success-border);
|
|
1799
|
+
--lux-component-outline-success-hover-background: var(
|
|
1800
|
+
--lux-intent-success-hover-soft
|
|
1801
|
+
);
|
|
1802
|
+
--lux-component-outline-success-hover-border: var(
|
|
1803
|
+
--lux-intent-success-border
|
|
1804
|
+
);
|
|
1805
|
+
--lux-component-outline-success-hover-text: var(--lux-intent-success-text);
|
|
1806
|
+
--lux-component-outline-warning-text: var(--lux-intent-warning-text);
|
|
1807
|
+
--lux-component-outline-warning-background: var(--lux-intent-warning-soft);
|
|
1808
|
+
--lux-component-outline-warning-border: var(--lux-intent-warning-border);
|
|
1809
|
+
--lux-component-outline-warning-hover-background: var(
|
|
1810
|
+
--lux-intent-warning-hover-soft
|
|
1811
|
+
);
|
|
1812
|
+
--lux-component-outline-warning-hover-border: var(
|
|
1813
|
+
--lux-intent-warning-border
|
|
1814
|
+
);
|
|
1815
|
+
--lux-component-outline-warning-hover-text: var(--lux-intent-warning-text);
|
|
1816
|
+
--lux-component-outline-error-text: var(--lux-intent-error-text);
|
|
1817
|
+
--lux-component-outline-error-background: var(--lux-intent-error-soft);
|
|
1818
|
+
--lux-component-outline-error-border: var(--lux-intent-error-border);
|
|
1819
|
+
--lux-component-outline-error-hover-background: var(
|
|
1820
|
+
--lux-intent-error-hover-soft
|
|
1821
|
+
);
|
|
1822
|
+
--lux-component-outline-error-hover-border: var(--lux-intent-error-border);
|
|
1823
|
+
--lux-component-outline-error-hover-text: var(--lux-intent-error-text);
|
|
1824
|
+
--lux-component-outline-white-text: var(--lux-intent-white-text);
|
|
1825
|
+
--lux-component-outline-white-background: var(--lux-intent-white-soft);
|
|
1826
|
+
--lux-component-outline-white-border: var(--lux-intent-white-border);
|
|
1827
|
+
--lux-component-outline-white-hover-background: var(
|
|
1828
|
+
--lux-intent-white-hover-soft
|
|
1829
|
+
);
|
|
1830
|
+
--lux-component-outline-white-hover-border: var(--lux-intent-white-border);
|
|
1831
|
+
--lux-component-outline-white-hover-text: var(--lux-intent-white-text);
|
|
1832
|
+
--lux-component-ghost-active-text: var(--lux-intent-active-text);
|
|
1833
|
+
--lux-component-ghost-active-background: transparent;
|
|
1834
|
+
--lux-component-ghost-active-border: transparent;
|
|
1835
|
+
--lux-component-ghost-active-hover-background: var(--lux-intent-active-soft);
|
|
1836
|
+
--lux-component-ghost-active-hover-border: var(--lux-intent-active-soft);
|
|
1837
|
+
--lux-component-ghost-active-hover-text: var(--lux-intent-active-text);
|
|
1838
|
+
--lux-component-ghost-gray-text: var(--lux-intent-gray-text);
|
|
1839
|
+
--lux-component-ghost-gray-background: transparent;
|
|
1840
|
+
--lux-component-ghost-gray-border: transparent;
|
|
1841
|
+
--lux-component-ghost-gray-hover-background: var(--lux-intent-gray-soft);
|
|
1842
|
+
--lux-component-ghost-gray-hover-border: var(--lux-intent-gray-soft);
|
|
1843
|
+
--lux-component-ghost-gray-hover-text: var(--lux-intent-gray-text);
|
|
1844
|
+
--lux-component-ghost-success-text: var(--lux-intent-success-text);
|
|
1845
|
+
--lux-component-ghost-success-background: transparent;
|
|
1846
|
+
--lux-component-ghost-success-border: transparent;
|
|
1847
|
+
--lux-component-ghost-success-hover-background: var(
|
|
1848
|
+
--lux-intent-success-soft
|
|
1849
|
+
);
|
|
1850
|
+
--lux-component-ghost-success-hover-border: var(--lux-intent-success-soft);
|
|
1851
|
+
--lux-component-ghost-success-hover-text: var(--lux-intent-success-text);
|
|
1852
|
+
--lux-component-ghost-warning-text: var(--lux-intent-warning-text);
|
|
1853
|
+
--lux-component-ghost-warning-background: transparent;
|
|
1854
|
+
--lux-component-ghost-warning-border: transparent;
|
|
1855
|
+
--lux-component-ghost-warning-hover-background: var(
|
|
1856
|
+
--lux-intent-warning-soft
|
|
1857
|
+
);
|
|
1858
|
+
--lux-component-ghost-warning-hover-border: var(--lux-intent-warning-soft);
|
|
1859
|
+
--lux-component-ghost-warning-hover-text: var(--lux-intent-warning-text);
|
|
1860
|
+
--lux-component-ghost-error-text: var(--lux-intent-error-text);
|
|
1861
|
+
--lux-component-ghost-error-background: transparent;
|
|
1862
|
+
--lux-component-ghost-error-border: transparent;
|
|
1863
|
+
--lux-component-ghost-error-hover-background: var(--lux-intent-error-soft);
|
|
1864
|
+
--lux-component-ghost-error-hover-border: var(--lux-intent-error-soft);
|
|
1865
|
+
--lux-component-ghost-error-hover-text: var(--lux-intent-error-text);
|
|
1866
|
+
--lux-component-ghost-white-text: var(--lux-intent-white-text);
|
|
1867
|
+
--lux-component-ghost-white-background: transparent;
|
|
1868
|
+
--lux-component-ghost-white-border: transparent;
|
|
1869
|
+
--lux-component-ghost-white-hover-background: var(--lux-intent-white-soft);
|
|
1870
|
+
--lux-component-ghost-white-hover-border: var(--lux-intent-white-soft);
|
|
1871
|
+
--lux-component-ghost-white-hover-text: var(--lux-intent-white-text);
|
|
1872
|
+
--lux-component-link-active-text: var(--lux-intent-active-text);
|
|
1873
|
+
--lux-component-link-active-background: transparent;
|
|
1874
|
+
--lux-component-link-active-border: transparent;
|
|
1875
|
+
--lux-component-link-active-hover-background: transparent;
|
|
1876
|
+
--lux-component-link-active-hover-border: transparent;
|
|
1877
|
+
--lux-component-link-active-hover-text: var(--lux-intent-active-text);
|
|
1878
|
+
--lux-component-link-gray-text: var(--lux-intent-gray-text);
|
|
1879
|
+
--lux-component-link-gray-background: transparent;
|
|
1880
|
+
--lux-component-link-gray-border: transparent;
|
|
1881
|
+
--lux-component-link-gray-hover-background: transparent;
|
|
1882
|
+
--lux-component-link-gray-hover-border: transparent;
|
|
1883
|
+
--lux-component-link-gray-hover-text: var(--lux-intent-gray-text);
|
|
1884
|
+
--lux-component-link-success-text: var(--lux-intent-success-text);
|
|
1885
|
+
--lux-component-link-success-background: transparent;
|
|
1886
|
+
--lux-component-link-success-border: transparent;
|
|
1887
|
+
--lux-component-link-success-hover-background: transparent;
|
|
1888
|
+
--lux-component-link-success-hover-border: transparent;
|
|
1889
|
+
--lux-component-link-success-hover-text: var(--lux-intent-success-text);
|
|
1890
|
+
--lux-component-link-warning-text: var(--lux-intent-warning-text);
|
|
1891
|
+
--lux-component-link-warning-background: transparent;
|
|
1892
|
+
--lux-component-link-warning-border: transparent;
|
|
1893
|
+
--lux-component-link-warning-hover-background: transparent;
|
|
1894
|
+
--lux-component-link-warning-hover-border: transparent;
|
|
1895
|
+
--lux-component-link-warning-hover-text: var(--lux-intent-warning-text);
|
|
1896
|
+
--lux-component-link-error-text: var(--lux-intent-error-text);
|
|
1897
|
+
--lux-component-link-error-background: transparent;
|
|
1898
|
+
--lux-component-link-error-border: transparent;
|
|
1899
|
+
--lux-component-link-error-hover-background: transparent;
|
|
1900
|
+
--lux-component-link-error-hover-border: transparent;
|
|
1901
|
+
--lux-component-link-error-hover-text: var(--lux-intent-error-text);
|
|
1902
|
+
--lux-component-link-white-text: var(--lux-intent-white-text);
|
|
1903
|
+
--lux-component-link-white-background: transparent;
|
|
1904
|
+
--lux-component-link-white-border: transparent;
|
|
1905
|
+
--lux-component-link-white-hover-background: transparent;
|
|
1906
|
+
--lux-component-link-white-hover-border: transparent;
|
|
1907
|
+
--lux-component-link-white-hover-text: var(--lux-intent-white-text);
|
|
1908
|
+
}
|
|
1909
|
+
html.dark, html.dark body {
|
|
1910
|
+
background-color: var(--lux-background);
|
|
1911
|
+
color: var(--lux-foreground);
|
|
1912
|
+
}
|
|
1913
|
+
html.dark [data-radix-popper-content-wrapper] [role="menu"], html.dark [data-radix-popper-content-wrapper] [role="listbox"] {
|
|
1914
|
+
background-color: var(--lux-popover);
|
|
1915
|
+
color: var(--lux-popover-foreground);
|
|
1916
|
+
}
|
|
1510
1917
|
@property --tw-translate-x {
|
|
1511
1918
|
syntax: "*";
|
|
1512
1919
|
inherits: false;
|
package/dist/index.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ export * from './components/Pipeline.js';
|
|
|
4
4
|
export * from './components/Resizable.js';
|
|
5
5
|
export * from './components/Resizable.js';
|
|
6
6
|
export * from './components/Streams.js';
|
|
7
|
+
export * from './components/ThemeToggle.js';
|
|
7
8
|
export * from './constants/connection.js';
|
|
8
9
|
export * from './constants/streams.js';
|
|
9
10
|
export * from './constants/url.js';
|
|
@@ -16,6 +17,7 @@ export * from './hooks/useFullScreen.js';
|
|
|
16
17
|
export * from './models/device-configuration.js';
|
|
17
18
|
export * from './providers/ConnectionProvider.js';
|
|
18
19
|
export * from './providers/DataProvider.js';
|
|
20
|
+
export * from './providers/ThemeProvider.js';
|
|
19
21
|
export * from './providers/VisualizerRuntimeConfigProvider.js';
|
|
20
22
|
export * from './utils/functions.js';
|
|
21
23
|
export * from './utils/functions.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AAEnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AAEnD,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AAEzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AAEnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AAEnD,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AAEzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -4,6 +4,7 @@ export * from './components/Pipeline.js';
|
|
|
4
4
|
export * from './components/Resizable.js';
|
|
5
5
|
export * from './components/Resizable.js';
|
|
6
6
|
export * from './components/Streams.js';
|
|
7
|
+
export * from './components/ThemeToggle.js';
|
|
7
8
|
export * from './constants/connection.js';
|
|
8
9
|
export * from './constants/streams.js';
|
|
9
10
|
export * from './constants/url.js';
|
|
@@ -16,6 +17,7 @@ export * from './hooks/useFullScreen.js';
|
|
|
16
17
|
export * from './models/device-configuration.js';
|
|
17
18
|
export * from './providers/ConnectionProvider.js';
|
|
18
19
|
export * from './providers/DataProvider.js';
|
|
20
|
+
export * from './providers/ThemeProvider.js';
|
|
19
21
|
export * from './providers/VisualizerRuntimeConfigProvider.js';
|
|
20
22
|
export * from './utils/functions.js';
|
|
21
23
|
export * from './utils/functions.js';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AAEnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AAEnD,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AAEzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AAEnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AAEnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AAEnD,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AAEzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AAEnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/** What the user picked. `system` follows the OS and keeps following it. */
|
|
3
|
+
export type ThemePreference = 'light' | 'dark' | 'system';
|
|
4
|
+
/** What is actually on screen. `system` has already been resolved. */
|
|
5
|
+
export type ResolvedTheme = 'light' | 'dark';
|
|
6
|
+
export declare const THEME_PREFERENCES: ThemePreference[];
|
|
7
|
+
export declare const resolveTheme: (preference: ThemePreference) => ResolvedTheme;
|
|
8
|
+
export declare const readStoredTheme: () => ThemePreference;
|
|
9
|
+
/**
|
|
10
|
+
* Applied both from React and from the inline bootstrap script in index.html, which
|
|
11
|
+
* runs before first paint so the app never flashes the light theme on load.
|
|
12
|
+
*/
|
|
13
|
+
export declare const applyTheme: (theme: ResolvedTheme) => void;
|
|
14
|
+
export type ThemeContext = {
|
|
15
|
+
/** The user's choice, including `system`. */
|
|
16
|
+
theme: ThemePreference;
|
|
17
|
+
/** The theme currently rendered. */
|
|
18
|
+
resolvedTheme: ResolvedTheme;
|
|
19
|
+
setTheme: (theme: ThemePreference) => void;
|
|
20
|
+
/** Flips between light and dark, resolving `system` first. */
|
|
21
|
+
toggleTheme: () => void;
|
|
22
|
+
};
|
|
23
|
+
export declare const useTheme: () => ThemeContext;
|
|
24
|
+
export declare const ThemeProvider: React.FC<React.PropsWithChildren>;
|
|
25
|
+
//# sourceMappingURL=ThemeProvider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,4EAA4E;AAC5E,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE1D,sEAAsE;AACtE,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC;AAE7C,eAAO,MAAM,iBAAiB,EAAE,eAAe,EAAgC,CAAC;AAWhF,eAAO,MAAM,YAAY,GAAI,YAAY,eAAe,KAAG,aACe,CAAC;AAE3E,eAAO,MAAM,eAAe,QAAO,eAGlC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,aAAa,SAE9C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IAC1B,6CAA6C;IAC7C,KAAK,EAAE,eAAe,CAAC;IACvB,oCAAoC;IACpC,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C,8DAA8D;IAC9D,WAAW,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AASF,eAAO,MAAM,QAAQ,oBAAuC,CAAC;AAE7D,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAsC3D,CAAC"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { noop } from '../utils/functions.js';
|
|
4
|
+
import { getItemFromLocalStorage, setItemToLocalStorage } from '../utils/local-storage.js';
|
|
5
|
+
export const THEME_PREFERENCES = ['light', 'dark', 'system'];
|
|
6
|
+
const DARK_CLASS = 'dark';
|
|
7
|
+
const COLOR_SCHEME_QUERY = '(prefers-color-scheme: dark)';
|
|
8
|
+
const isThemePreference = (value) => THEME_PREFERENCES.includes(value);
|
|
9
|
+
const prefersDark = () => typeof window !== 'undefined' && window.matchMedia(COLOR_SCHEME_QUERY).matches;
|
|
10
|
+
export const resolveTheme = (preference) => preference === 'system' ? (prefersDark() ? 'dark' : 'light') : preference;
|
|
11
|
+
export const readStoredTheme = () => {
|
|
12
|
+
const stored = getItemFromLocalStorage('theme');
|
|
13
|
+
return isThemePreference(stored) ? stored : 'system';
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* Applied both from React and from the inline bootstrap script in index.html, which
|
|
17
|
+
* runs before first paint so the app never flashes the light theme on load.
|
|
18
|
+
*/
|
|
19
|
+
export const applyTheme = (theme) => {
|
|
20
|
+
document.documentElement.classList.toggle(DARK_CLASS, theme === 'dark');
|
|
21
|
+
};
|
|
22
|
+
const ThemeContext = React.createContext({
|
|
23
|
+
theme: 'system',
|
|
24
|
+
resolvedTheme: 'light',
|
|
25
|
+
setTheme: noop,
|
|
26
|
+
toggleTheme: noop,
|
|
27
|
+
});
|
|
28
|
+
export const useTheme = () => React.useContext(ThemeContext);
|
|
29
|
+
export const ThemeProvider = ({ children }) => {
|
|
30
|
+
const [theme, setThemeState] = React.useState(readStoredTheme);
|
|
31
|
+
const [systemTheme, setSystemTheme] = React.useState(() => prefersDark() ? 'dark' : 'light');
|
|
32
|
+
const resolvedTheme = theme === 'system' ? systemTheme : theme;
|
|
33
|
+
// Keep following the OS while the preference is `system`.
|
|
34
|
+
React.useEffect(() => {
|
|
35
|
+
const query = window.matchMedia(COLOR_SCHEME_QUERY);
|
|
36
|
+
const handleChange = (event) => {
|
|
37
|
+
setSystemTheme(event.matches ? 'dark' : 'light');
|
|
38
|
+
};
|
|
39
|
+
query.addEventListener('change', handleChange);
|
|
40
|
+
return () => query.removeEventListener('change', handleChange);
|
|
41
|
+
}, []);
|
|
42
|
+
React.useEffect(() => {
|
|
43
|
+
applyTheme(resolvedTheme);
|
|
44
|
+
}, [resolvedTheme]);
|
|
45
|
+
const setTheme = React.useCallback((next) => {
|
|
46
|
+
setThemeState(next);
|
|
47
|
+
setItemToLocalStorage('theme', next);
|
|
48
|
+
}, []);
|
|
49
|
+
const toggleTheme = React.useCallback(() => {
|
|
50
|
+
setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
|
|
51
|
+
}, [resolvedTheme, setTheme]);
|
|
52
|
+
const value = React.useMemo(() => ({ theme, resolvedTheme, setTheme, toggleTheme }), [theme, resolvedTheme, setTheme, toggleTheme]);
|
|
53
|
+
return _jsx(ThemeContext.Provider, { value: value, children: children });
|
|
54
|
+
};
|
|
55
|
+
//# sourceMappingURL=ThemeProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/providers/ThemeProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAQ3F,MAAM,CAAC,MAAM,iBAAiB,GAAsB,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;AAEhF,MAAM,UAAU,GAAG,MAAM,CAAC;AAC1B,MAAM,kBAAkB,GAAG,8BAA8B,CAAC;AAE1D,MAAM,iBAAiB,GAAG,CAAC,KAAc,EAA4B,EAAE,CACtE,iBAAiB,CAAC,QAAQ,CAAC,KAAwB,CAAC,CAAC;AAEtD,MAAM,WAAW,GAAG,GAAG,EAAE,CACxB,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC;AAEhF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,UAA2B,EAAiB,EAAE,CAC1E,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;AAE3E,MAAM,CAAC,MAAM,eAAe,GAAG,GAAoB,EAAE;IACpD,MAAM,MAAM,GAAG,uBAAuB,CAAkB,OAAO,CAAC,CAAC;IACjE,OAAO,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;AACtD,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAoB,EAAE,EAAE;IAClD,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC;AACzE,CAAC,CAAC;AAYF,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAAe;IACtD,KAAK,EAAE,QAAQ;IACf,aAAa,EAAE,OAAO;IACtB,QAAQ,EAAE,IAAI;IACd,WAAW,EAAE,IAAI;CACjB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;AAE7D,MAAM,CAAC,MAAM,aAAa,GAAsC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAChF,MAAM,CAAC,KAAK,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAkB,eAAe,CAAC,CAAC;IAChF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAgB,GAAG,EAAE,CACxE,WAAW,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAChC,CAAC;IAEF,MAAM,aAAa,GAAG,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC;IAE/D,0DAA0D;IAC1D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;QACpD,MAAM,YAAY,GAAG,CAAC,KAA0B,EAAE,EAAE;YACnD,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QAClD,CAAC,CAAC;QAEF,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAC/C,OAAO,GAAG,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IAChE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,UAAU,CAAC,aAAa,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,IAAqB,EAAE,EAAE;QAC5D,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,qBAAqB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,QAAQ,CAAC,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE9B,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,EACvD,CAAC,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,CAAC,CAC7C,CAAC;IAEF,OAAO,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAyB,CAAC;AAChF,CAAC,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export type LocalStorageItems = 'topicList' | 'analyticsEnabled';
|
|
1
|
+
export type LocalStorageItems = 'topicList' | 'analyticsEnabled' | 'theme';
|
|
2
2
|
export declare function getItemFromLocalStorage<T>(key: LocalStorageItems): T | null;
|
|
3
3
|
export declare function setItemToLocalStorage(key: LocalStorageItems, value: unknown): void;
|
|
4
4
|
export declare function removeItemFromLocalStorage(key: LocalStorageItems): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"local-storage.d.ts","sourceRoot":"","sources":["../../src/utils/local-storage.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"local-storage.d.ts","sourceRoot":"","sources":["../../src/utils/local-storage.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,kBAAkB,GAAG,OAAO,CAAC;AAE3E,wBAAgB,uBAAuB,CAAC,CAAC,EAAE,GAAG,EAAE,iBAAiB,GAAG,CAAC,GAAG,IAAI,CAQ3E;AAED,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,iBAAiB,EAAE,KAAK,EAAE,OAAO,QAE3E;AAED,wBAAgB,0BAA0B,CAAC,GAAG,EAAE,iBAAiB,QAEhE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
export default function EmptyState({ children, className }) {
|
|
3
|
-
return (_jsx("div", { className: `flex h-full min-h-0 w-full items-center justify-center bg-
|
|
3
|
+
return (_jsx("div", { className: `flex h-full min-h-0 w-full items-center justify-center bg-card p-6 text-center text-sm text-muted-foreground ${className ?? ""}`.trim(), children: _jsx("div", { className: "max-w-full", children: children }) }));
|
|
4
4
|
}
|
|
5
5
|
//# sourceMappingURL=EmptyState.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../src/visualizer/components/EmptyState.tsx"],"names":[],"mappings":";AAUA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAmB;IACzE,OAAO,CACL,cACE,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../src/visualizer/components/EmptyState.tsx"],"names":[],"mappings":";AAUA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAmB;IACzE,OAAO,CACL,cACE,SAAS,EAAE,gHAAgH,SAAS,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,YAEnJ,cAAK,SAAS,EAAC,YAAY,YAAE,QAAQ,GAAO,GACxC,CACP,CAAC;AACJ,CAAC"}
|