lynx-console 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/index.cjs +615 -112
  2. package/dist/index.css +0 -388
  3. package/dist/index.css.map +1 -1
  4. package/dist/index.d.cts.map +1 -1
  5. package/dist/index.d.mts.map +1 -1
  6. package/dist/index.mjs +616 -113
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +1 -1
  9. package/src/components/BottomSheet.css +0 -7
  10. package/src/components/BottomSheet.tsx +24 -3
  11. package/src/components/ConsolePanel.css +0 -141
  12. package/src/components/FloatingButton.css +0 -8
  13. package/src/components/FloatingButton.tsx +15 -2
  14. package/src/components/LogPanel.tsx +214 -26
  15. package/src/components/NetworkDetailSection.tsx +71 -9
  16. package/src/components/NetworkPanel.css +0 -91
  17. package/src/components/NetworkPanel.tsx +168 -20
  18. package/src/components/PerformancePanel.css +0 -60
  19. package/src/components/PerformancePanel.tsx +159 -29
  20. package/src/components/Tabs.css +0 -9
  21. package/src/components/Tabs.tsx +21 -3
  22. package/src/index.tsx +29 -22
  23. package/src/styles/ThemeContext.ts +10 -0
  24. package/src/styles/theme.ts +111 -0
  25. package/src/styles/global.css +0 -8
  26. package/src/styles/vars/color.ts +0 -41
  27. package/src/styles/vars/dimension.ts +0 -10
  28. package/src/styles/vars/index.css +0 -71
  29. package/src/styles/vars/index.ts +0 -18
  30. package/src/styles/vars/radius.ts +0 -2
package/src/styles/vars/index.css DELETED
@@ -1,71 +0,0 @@
1
- :root {
2
- --lynx-console-font-weight-regular: 400;
3
- --lynx-console-font-weight-medium: 500;
4
- --lynx-console-font-weight-bold: 700;
5
- --lynx-console-duration-d4: 200ms;
6
- --lynx-console-duration-d6: 300ms;
7
- --lynx-console-dimension-x2: 8px;
8
- --lynx-console-dimension-x3: 12px;
9
- --lynx-console-dimension-x4: 16px;
10
- --lynx-console-dimension-x6: 24px;
11
- --lynx-console-dimension-spacing-x-global-gutter: 16px;
12
- --lynx-console-radius-r6: 24px;
13
- }
14
-
15
- .data-lynx-console-color-mode__light-only {
16
- --lynx-console-color-palette-blue-100: #eff6ff;
17
- --lynx-console-color-palette-blue-600: #5e98fe;
18
- --lynx-console-color-palette-gray-100: #f7f8f9;
19
- --lynx-console-color-palette-gray-400: #dcdee3;
20
- --lynx-console-color-palette-green-100: #edfaf6;
21
- --lynx-console-color-palette-green-600: #10ab7d;
22
- --lynx-console-color-palette-purple-100: #f5f3fe;
23
- --lynx-console-color-palette-purple-600: #9f84fb;
24
- --lynx-console-color-palette-red-100: #fdf0f0;
25
- --lynx-console-color-palette-red-600: #fc6a66;
26
- --lynx-console-color-palette-red-900: #921708;
27
- --lynx-console-color-palette-static-white: #ffffff;
28
- --lynx-console-color-palette-yellow-100: #fff7de;
29
- --lynx-console-color-palette-yellow-600: #c49725;
30
- --lynx-console-color-palette-yellow-900: #4f3e1f;
31
- --lynx-console-color-fg-neutral: #1a1c20;
32
- --lynx-console-color-fg-placeholder: #b0b3ba;
33
- --lynx-console-color-fg-disabled: #d1d3d8;
34
- --lynx-console-color-fg-neutral-muted: #555d6d;
35
- --lynx-console-color-fg-neutral-subtle: #868b94;
36
- --lynx-console-color-bg-overlay: #00000074;
37
- --lynx-console-color-bg-layer-default: #ffffff;
38
- --lynx-console-color-bg-layer-floating: #ffffff;
39
- --lynx-console-color-bg-neutral-weak: #f3f4f5;
40
- --lynx-console-color-stroke-neutral-subtle: #0000000c;
41
- --lynx-console-color-stroke-neutral-weak: #dcdee3;
42
- }
43
-
44
- .data-lynx-console-color-mode__dark-only {
45
- --lynx-console-color-palette-blue-100: #202742;
46
- --lynx-console-color-palette-blue-600: #1e82eb;
47
- --lynx-console-color-palette-gray-100: #16171b;
48
- --lynx-console-color-palette-gray-400: #393d46;
49
- --lynx-console-color-palette-green-100: #202926;
50
- --lynx-console-color-palette-green-600: #1b946d;
51
- --lynx-console-color-palette-purple-100: #28213b;
52
- --lynx-console-color-palette-purple-600: #8e6bee;
53
- --lynx-console-color-palette-red-100: #322323;
54
- --lynx-console-color-palette-red-600: #f73526;
55
- --lynx-console-color-palette-red-900: #f8c5c3;
56
- --lynx-console-color-palette-static-white: #ffffff;
57
- --lynx-console-color-palette-yellow-100: #302819;
58
- --lynx-console-color-palette-yellow-600: #b6720d;
59
- --lynx-console-color-palette-yellow-900: #e5d49b;
60
- --lynx-console-color-fg-neutral: #f3f4f5;
61
- --lynx-console-color-fg-placeholder: #868b94;
62
- --lynx-console-color-fg-disabled: #5b606a;
63
- --lynx-console-color-fg-neutral-muted: #dcdee3;
64
- --lynx-console-color-fg-neutral-subtle: #b0b3ba;
65
- --lynx-console-color-bg-overlay: #00000074;
66
- --lynx-console-color-bg-layer-default: #16171b;
67
- --lynx-console-color-bg-layer-floating: #1d2025;
68
- --lynx-console-color-bg-neutral-weak: #2b2e35;
69
- --lynx-console-color-stroke-neutral-subtle: #ffffff0d;
70
- --lynx-console-color-stroke-neutral-weak: #393d46;
71
- }
package/src/styles/vars/index.ts DELETED
@@ -1,18 +0,0 @@
1
- import * as color from "./color";
2
- import * as dimension from "./dimension";
3
- import * as radius from "./radius";
4
-
5
- export const vars = {
6
- $color: color,
7
- $dimension: dimension,
8
- $radius: radius,
9
- $fontWeight: {
10
- regular: "var(--lynx-console-font-weight-regular)",
11
- medium: "var(--lynx-console-font-weight-medium)",
12
- bold: "var(--lynx-console-font-weight-bold)",
13
- },
14
- $duration: {
15
- d4: "var(--lynx-console-duration-d4)",
16
- d6: "var(--lynx-console-duration-d6)",
17
- },
18
- };
package/src/styles/vars/radius.ts DELETED
@@ -1,2 +0,0 @@
1
- // Radius
2
- export const r6 = "var(--lynx-console-radius-r6)";