lynx-console 0.1.1 → 0.2.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.
Files changed (49) hide show
  1. package/dist/index.cjs +183 -960
  2. package/dist/index.css +1257 -461
  3. package/dist/index.css.map +1 -1
  4. package/dist/index.d.cts +79 -1
  5. package/dist/index.d.cts.map +1 -1
  6. package/dist/index.d.mts +79 -1
  7. package/dist/index.d.mts.map +1 -1
  8. package/dist/index.mjs +183 -960
  9. package/dist/index.mjs.map +1 -1
  10. package/package.json +1 -4
  11. package/src/components/BottomSheet.css +91 -0
  12. package/src/components/BottomSheet.tsx +10 -10
  13. package/src/components/ConsolePanel.css +402 -0
  14. package/src/components/ConsolePanel.tsx +62 -28
  15. package/src/components/FadeList.tsx +10 -55
  16. package/{dist/assets/src/components/FloatingButton.css.ts.vanilla-BaG0OI6p.css → src/components/FloatingButton.css} +22 -16
  17. package/src/components/FloatingButton.tsx +6 -6
  18. package/src/components/LogPanel.tsx +46 -47
  19. package/src/components/NetworkDetailSection.tsx +13 -13
  20. package/src/components/NetworkPanel.css +280 -0
  21. package/src/components/NetworkPanel.tsx +30 -50
  22. package/src/components/PerformancePanel.css +249 -0
  23. package/src/components/PerformancePanel.tsx +40 -40
  24. package/src/components/Tabs.css +78 -0
  25. package/src/components/Tabs.tsx +13 -11
  26. package/src/globals.d.ts +0 -5
  27. package/src/index.tsx +10 -6
  28. package/src/styles/global.css +8 -0
  29. package/src/styles/vars/color.ts +26 -213
  30. package/src/styles/vars/dimension.ts +5 -74
  31. package/src/styles/vars/index.css +65 -457
  32. package/src/styles/vars/index.ts +5 -9
  33. package/src/styles/vars/radius.ts +1 -11
  34. package/src/types.ts +8 -0
  35. package/dist/assets/src/components/BottomSheet.css.ts.vanilla-CulwSDhG.css +0 -83
  36. package/dist/assets/src/components/ConsolePanel.css.ts.vanilla-DWdhFBJq.css +0 -337
  37. package/dist/assets/src/components/FadeList.css.ts.vanilla-sppTKMZj.css +0 -12
  38. package/dist/assets/src/components/NetworkPanel.css.ts.vanilla-BSE4s40D.css +0 -244
  39. package/dist/assets/src/components/PerformancePanel.css.ts.vanilla-Bb3zG5G8.css +0 -216
  40. package/dist/assets/src/components/Tabs.css.ts.vanilla-DD7L2oXt.css +0 -50
  41. package/src/components/BottomSheet.css.ts +0 -93
  42. package/src/components/ConsolePanel.css.ts +0 -349
  43. package/src/components/FadeList.css.ts +0 -16
  44. package/src/components/FloatingButton.css.ts +0 -73
  45. package/src/components/NetworkPanel.css.ts +0 -277
  46. package/src/components/PerformancePanel.css.ts +0 -224
  47. package/src/components/Tabs.css.ts +0 -66
  48. package/src/styles/global.css.ts +0 -10
  49. package/src/styles/typography.ts +0 -25
@@ -1,216 +0,0 @@
1
- .PerformancePanel_container__19p8bog0 {
2
- display: flex;
3
- flex-direction: column;
4
- flex: 1;
5
- padding-top: 4px;
6
- }
7
- .PerformancePanel_header__19p8bog1 {
8
- display: flex;
9
- flex-direction: row;
10
- align-items: center;
11
- justify-content: space-between;
12
- margin-bottom: 8px;
13
- padding-bottom: 4px;
14
- border-bottom-width: 1px;
15
- border-bottom-color: var(--seed-color-stroke-neutral-subtle);
16
- border-bottom-style: solid;
17
- }
18
- .PerformancePanel_count__19p8bog2 {
19
- font-size: 0.8125rem;
20
- line-height: 1.125rem;
21
- font-weight: var(--seed-font-weight-regular);
22
- color: var(--seed-color-fg-neutral-subtle);
23
- }
24
- .PerformancePanel_clearButton__19p8bog3 {
25
- padding: 3px 6px;
26
- background-color: var(--seed-color-bg-neutral-weak);
27
- border-radius: 4px;
28
- }
29
- .PerformancePanel_clearButtonText__19p8bog4 {
30
- font-size: 0.8125rem;
31
- line-height: 1.125rem;
32
- font-weight: var(--seed-font-weight-medium);
33
- color: var(--seed-color-fg-neutral-muted);
34
- }
35
- .PerformancePanel_list__19p8bog5 {
36
- flex: 1;
37
- }
38
- .PerformancePanel_placeholder__19p8bog6 {
39
- display: flex;
40
- align-items: center;
41
- justify-content: center;
42
- height: 100%;
43
- }
44
- .PerformancePanel_placeholderText__19p8bog7 {
45
- font-size: 0.875rem;
46
- line-height: 1.1875rem;
47
- font-weight: var(--seed-font-weight-regular);
48
- color: var(--seed-color-fg-disabled);
49
- }
50
- .PerformancePanel_item__19p8bog8 {
51
- padding: 8px;
52
- border-bottom-width: 1px;
53
- border-bottom-color: var(--seed-color-stroke-neutral-weak);
54
- border-bottom-style: solid;
55
- }
56
- .PerformancePanel_itemHeader__19p8bog9 {
57
- display: flex;
58
- flex-direction: row;
59
- align-items: center;
60
- margin-bottom: 4px;
61
- gap: 8px;
62
- }
63
- .PerformancePanel_entryType__19p8boga {
64
- font-size: 0.75rem;
65
- line-height: 1rem;
66
- font-weight: var(--seed-font-weight-bold);
67
- padding: 0 6px;
68
- border-radius: 2px;
69
- color: var(--seed-color-fg-neutral);
70
- background-color: var(--seed-color-bg-neutral-weak);
71
- }
72
- .PerformancePanel_entryType_type_init__19p8bogb {
73
- color: var(--seed-color-palette-blue-600);
74
- background-color: var(--seed-color-palette-blue-100);
75
- }
76
- .PerformancePanel_entryType_type_metric__19p8bogc {
77
- color: var(--seed-color-palette-green-600);
78
- background-color: var(--seed-color-palette-green-100);
79
- }
80
- .PerformancePanel_entryType_type_pipeline__19p8bogd {
81
- color: var(--seed-color-palette-purple-600);
82
- background-color: var(--seed-color-palette-purple-100);
83
- }
84
- .PerformancePanel_entryType_type_resource__19p8boge {
85
- color: var(--seed-color-palette-yellow-600);
86
- background-color: var(--seed-color-palette-yellow-100);
87
- }
88
- .PerformancePanel_entryName__19p8bogf {
89
- font-size: 0.75rem;
90
- line-height: 1rem;
91
- font-weight: var(--seed-font-weight-medium);
92
- color: var(--seed-color-fg-neutral);
93
- }
94
- .PerformancePanel_timestamp__19p8bogg {
95
- font-size: 0.75rem;
96
- line-height: 1rem;
97
- font-weight: var(--seed-font-weight-regular);
98
- color: var(--seed-color-fg-neutral-subtle);
99
- }
100
- .PerformancePanel_fcpMetricHeader__19p8bogh {
101
- display: flex;
102
- flex-direction: row;
103
- align-items: center;
104
- gap: 8px;
105
- }
106
- .PerformancePanel_fcpHighlight__19p8bogi {
107
- font-size: 0.8125rem;
108
- line-height: 1.125rem;
109
- font-weight: var(--seed-font-weight-bold);
110
- color: var(--seed-color-palette-blue-600);
111
- background-color: var(--seed-color-palette-blue-100);
112
- padding: 4px 8px;
113
- border-radius: 4px;
114
- margin-top: 4px;
115
- }
116
- .PerformancePanel_metrics__19p8bogj {
117
- margin-top: 8px;
118
- display: flex;
119
- flex-direction: column;
120
- gap: 4px;
121
- }
122
- .PerformancePanel_metric__19p8bogk {
123
- display: flex;
124
- flex-direction: row;
125
- align-items: center;
126
- gap: 8px;
127
- padding: 4px 8px;
128
- background-color: var(--seed-color-bg-neutral-weak);
129
- border-radius: 2px;
130
- }
131
- .PerformancePanel_metricName__19p8bogl {
132
- font-size: 0.8125rem;
133
- line-height: 1.125rem;
134
- font-weight: var(--seed-font-weight-medium);
135
- color: var(--seed-color-fg-neutral-subtle);
136
- min-width: 100px;
137
- flex-shrink: 0;
138
- }
139
- .PerformancePanel_metricValue__19p8bogm {
140
- font-size: 0.8125rem;
141
- line-height: 1.125rem;
142
- font-weight: var(--seed-font-weight-bold);
143
- color: var(--seed-color-palette-green-600);
144
- flex: 1;
145
- }
146
- .PerformancePanel_detailsContainer__19p8bogn {
147
- margin-top: 12px;
148
- display: flex;
149
- flex-direction: column;
150
- gap: 12px;
151
- }
152
- .PerformancePanel_fcpSection__19p8bogo {
153
- display: flex;
154
- flex-direction: column;
155
- gap: 8px;
156
- }
157
- .PerformancePanel_fcpSectionDescription__19p8bogp {
158
- font-size: 0.8125rem;
159
- line-height: 1.125rem;
160
- font-weight: var(--seed-font-weight-regular);
161
- color: var(--seed-color-fg-neutral-subtle);
162
- margin-bottom: 4px;
163
- }
164
- .PerformancePanel_fcpMetric__19p8bogq {
165
- background-color: var(--seed-color-bg-layer-default);
166
- border-radius: 4px;
167
- display: flex;
168
- flex-direction: column;
169
- gap: 4px;
170
- }
171
- .PerformancePanel_fcpMetricName__19p8bogr {
172
- font-size: 0.75rem;
173
- line-height: 1rem;
174
- font-weight: var(--seed-font-weight-bold);
175
- color: var(--seed-color-fg-neutral);
176
- }
177
- .PerformancePanel_fcpMetricValue__19p8bogs {
178
- font-size: 0.6875rem;
179
- line-height: 0.9375rem;
180
- font-weight: var(--seed-font-weight-bold);
181
- color: var(--seed-color-palette-blue-600);
182
- }
183
- .PerformancePanel_fcpMetricDescription__19p8bogt {
184
- font-size: 0.8125rem;
185
- line-height: 1.125rem;
186
- font-weight: var(--seed-font-weight-regular);
187
- color: var(--seed-color-fg-neutral-subtle);
188
- }
189
- .PerformancePanel_fcpMetricFormula__19p8bogu {
190
- font-size: 0.875rem;
191
- line-height: 1.1875rem;
192
- font-weight: var(--seed-font-weight-regular);
193
- color: var(--seed-color-fg-disabled);
194
- font-family: monospace;
195
- }
196
- .PerformancePanel_rawEntrySection__19p8bogv {
197
- padding: 12px;
198
- background-color: var(--seed-color-bg-neutral-weak);
199
- border-radius: 4px;
200
- }
201
- .PerformancePanel_detailTitle__19p8bogw {
202
- font-size: 0.8125rem;
203
- line-height: 1.125rem;
204
- font-weight: var(--seed-font-weight-bold);
205
- color: var(--seed-color-fg-neutral);
206
- margin-bottom: 8px;
207
- }
208
- .PerformancePanel_rawEntry__19p8bogx {
209
- font-size: 0.8125rem;
210
- line-height: 1.125rem;
211
- font-weight: var(--seed-font-weight-regular);
212
- color: var(--seed-color-fg-neutral-subtle);
213
- font-family: monospace;
214
- white-space: pre-wrap;
215
- word-break: break-all;
216
- }
@@ -1,50 +0,0 @@
1
- .Tabs_tabs__ud1j9z0 {
2
- flex: 1;
3
- display: flex;
4
- flex-direction: column;
5
- }
6
- .Tabs_tabHeader__ud1j9z1 {
7
- display: flex;
8
- box-shadow: inset 0 -1px 0 0 var(--seed-color-stroke-neutral-subtle);
9
- }
10
- .Tabs_tabTriggerButton__ud1j9z2 {
11
- flex: 1;
12
- color: var(--seed-color-fg-neutral-subtle);
13
- display: flex;
14
- justify-content: center;
15
- align-items: center;
16
- padding: 12px 0 10px 0;
17
- position: relative;
18
- }
19
- .Tabs_tabTriggerButtonText__ud1j9z3 {
20
- font-size: 1rem;
21
- line-height: 1.375rem;
22
- font-weight: var(--seed-font-weight-bold);
23
- color: var(--seed-color-fg-neutral-subtle);
24
- }
25
- .Tabs_tabTriggerButtonText_active_true__ud1j9z4 {
26
- color: var(--seed-color-fg-neutral);
27
- }
28
- .Tabs_tabTriggerIndicator__ud1j9z5 {
29
- position: absolute;
30
- bottom: 0;
31
- left: 0;
32
- padding: 0 16px;
33
- width: 100%;
34
- transition: 200ms;
35
- transition-timing-function: cubic-bezier(.35, 0, .35, 1);
36
- }
37
- .Tabs_tabTriggerIndicatorLine__ud1j9z6 {
38
- background-color: var(--seed-color-fg-neutral);
39
- width: 100%;
40
- height: 2px;
41
- }
42
- .Tabs_tabContents__ud1j9z7 {
43
- flex: 1;
44
- width: 100%;
45
- }
46
- .Tabs_tabContent__ud1j9z8 {
47
- width: 100%;
48
- display: flex;
49
- flex-direction: column;
50
- }
@@ -1,93 +0,0 @@
1
- import { style } from "@vanilla-extract/css";
2
- import { typography } from "../styles/typography";
3
- import { vars } from "../styles/vars";
4
-
5
- export const overlay = style({
6
- position: "fixed",
7
- top: 0,
8
- right: 0,
9
- bottom: 0,
10
- left: 0,
11
- display: "flex",
12
- justifyContent: "center",
13
- alignItems: "flex-end",
14
- zIndex: 9999,
15
- });
16
-
17
- export const backdrop = style({
18
- position: "fixed",
19
- top: 0,
20
- right: 0,
21
- bottom: 0,
22
- left: 0,
23
- zIndex: 9998,
24
- background: vars.$color.bg.overlay,
25
- transition: `opacity ${vars.$duration.d6} cubic-bezier(0.4, 0, 0.2, 1)`,
26
- });
27
-
28
- export const content = style({
29
- position: "relative",
30
- display: "flex",
31
- flex: 1,
32
- flexDirection: "column",
33
- boxSizing: "border-box",
34
- wordBreak: "break-all",
35
- background: vars.$color.bg.layerFloating,
36
- borderTopLeftRadius: vars.$radius.r6,
37
- borderTopRightRadius: vars.$radius.r6,
38
- transition: `transform ${vars.$duration.d6} cubic-bezier(0.4, 0, 0.2, 1)`,
39
- height: "500px",
40
- overflow: "hidden",
41
- });
42
-
43
- export const handleContainer = style({
44
- position: "absolute",
45
- top: 0,
46
- left: 0,
47
- right: 0,
48
- height: "48px",
49
- display: "flex",
50
- justifyContent: "center",
51
- zIndex: 10,
52
- });
53
-
54
- export const handle = style({
55
- width: "36px",
56
- height: 4,
57
- backgroundColor: vars.$color.palette.gray400,
58
- borderRadius: "9999px",
59
- marginTop: "12px",
60
- });
61
-
62
- export const header = style({
63
- display: "flex",
64
- flexDirection: "column",
65
- gap: vars.$dimension.x2,
66
- paddingTop: vars.$dimension.x6,
67
- paddingBottom: vars.$dimension.x4,
68
- justifyContent: "flex-start",
69
- paddingLeft: vars.$dimension.spacingX.globalGutter,
70
- paddingRight: "50px",
71
- });
72
-
73
- export const title = style({
74
- ...typography("t7", "bold"),
75
- color: vars.$color.fg.neutral,
76
- });
77
-
78
- export const body = style({
79
- display: "flex",
80
- flexDirection: "column",
81
- flex: 1,
82
- padding: `0 ${vars.$dimension.x4}`,
83
- overflow: "hidden",
84
- });
85
-
86
- export const footer = style({
87
- display: "flex",
88
- flexDirection: "column",
89
- paddingLeft: vars.$dimension.spacingX.globalGutter,
90
- paddingRight: vars.$dimension.spacingX.globalGutter,
91
- paddingTop: vars.$dimension.x3,
92
- paddingBottom: vars.$dimension.x4,
93
- });
@@ -1,349 +0,0 @@
1
- import { style } from "@vanilla-extract/css";
2
- import { recipe } from "@vanilla-extract/recipes";
3
- import { typography } from "../styles/typography";
4
- import { vars } from "../styles/vars";
5
-
6
- export const container = style({
7
- display: "flex",
8
- flexDirection: "column",
9
- height: "100%",
10
- });
11
-
12
- export const placeholder = style({
13
- display: "flex",
14
- alignItems: "center",
15
- justifyContent: "center",
16
- height: "100%",
17
- });
18
-
19
- export const placeholderText = style({
20
- ...typography("t4", "regular"),
21
- color: vars.$color.fg.disabled,
22
- });
23
-
24
- export const logContainer = style({
25
- display: "flex",
26
- flexDirection: "column",
27
- flex: 1,
28
- paddingTop: 4,
29
- });
30
-
31
- export const logHeader = style({
32
- display: "flex",
33
- flexDirection: "row",
34
- alignItems: "center",
35
- justifyContent: "space-between",
36
- paddingBottom: 3,
37
- });
38
-
39
- export const filterWrapper = style({
40
- position: "relative",
41
- });
42
-
43
- export const filterButton = style({
44
- display: "flex",
45
- flexDirection: "row",
46
- alignItems: "center",
47
- padding: "3px 6px",
48
- backgroundColor: vars.$color.bg.neutralWeak,
49
- borderRadius: 4,
50
- });
51
-
52
- export const filterButtonText = style({
53
- ...typography("t3", "medium"),
54
- color: vars.$color.fg.neutralMuted,
55
- });
56
-
57
- export const filterDropdown = style({
58
- position: "absolute",
59
- top: "100%",
60
- left: 0,
61
- marginTop: 4,
62
- backgroundColor: vars.$color.bg.layerFloating,
63
- borderWidth: 1,
64
- borderColor: vars.$color.stroke.neutralSubtle,
65
- borderStyle: "solid",
66
- borderRadius: 8,
67
- padding: "4px 0",
68
- zIndex: 100,
69
- minWidth: 90,
70
- });
71
-
72
- export const filterOption = style({
73
- display: "flex",
74
- flexDirection: "row",
75
- alignItems: "center",
76
- gap: 4,
77
- padding: "8px 12px",
78
- });
79
-
80
- export const filterCheckbox = recipe({
81
- base: {
82
- ...typography("t3", "medium"),
83
- width: 16,
84
- },
85
- variants: {
86
- level: {
87
- log: { color: vars.$color.palette.green600 },
88
- info: { color: vars.$color.palette.blue600 },
89
- warn: { color: vars.$color.palette.yellow600 },
90
- error: { color: vars.$color.palette.red600 },
91
- },
92
- },
93
- });
94
-
95
- export const filterLabel = recipe({
96
- base: {
97
- ...typography("t3", "medium"),
98
- },
99
- variants: {
100
- level: {
101
- log: { color: vars.$color.palette.green600 },
102
- info: { color: vars.$color.palette.blue600 },
103
- warn: { color: vars.$color.palette.yellow600 },
104
- error: { color: vars.$color.palette.red600 },
105
- },
106
- },
107
- });
108
-
109
- export const searchWrapper = style({
110
- display: "flex",
111
- flexDirection: "row",
112
- alignItems: "center",
113
- flex: 1,
114
- marginLeft: 8,
115
- marginRight: 8,
116
- borderBottomWidth: 1,
117
- borderBottomColor: vars.$color.stroke.neutralSubtle,
118
- borderBottomStyle: "solid",
119
- gap: 8,
120
- });
121
-
122
- export const searchPrompt = style({
123
- ...typography("t6", "medium"),
124
- color: vars.$color.fg.placeholder,
125
- });
126
-
127
- export const searchInput = style({
128
- flex: 1,
129
- ...typography("t3", "regular"),
130
- color: vars.$color.fg.neutral,
131
- caretColor: vars.$color.palette.green600,
132
- });
133
-
134
- export const searchClear = style({
135
- padding: "2px 4px",
136
- });
137
-
138
- export const searchClearText = style({
139
- ...typography("t3", "medium"),
140
- color: vars.$color.fg.placeholder,
141
- });
142
-
143
- export const clearButton = style({
144
- padding: "3px 6px",
145
- backgroundColor: vars.$color.bg.neutralWeak,
146
- borderRadius: 4,
147
- });
148
-
149
- export const clearButtonText = style({
150
- ...typography("t3", "medium"),
151
- color: vars.$color.fg.neutralMuted,
152
- });
153
-
154
- export const logList = style({
155
- flex: 1,
156
- paddingTop: 0,
157
- paddingBottom: 0,
158
- });
159
-
160
- export const logItem = recipe({
161
- base: {
162
- padding: "8px",
163
- borderBottomWidth: 1,
164
- borderBottomColor: vars.$color.stroke.neutralWeak,
165
- borderBottomStyle: "solid",
166
- },
167
- variants: {
168
- level: {
169
- log: {},
170
- info: {},
171
- warn: {
172
- backgroundColor: vars.$color.palette.yellow100,
173
- },
174
- error: {
175
- backgroundColor: vars.$color.palette.red100,
176
- },
177
- },
178
- },
179
- });
180
-
181
- export const logItemHeader = style({
182
- display: "flex",
183
- flexDirection: "row",
184
- alignItems: "center",
185
- marginBottom: 4,
186
- });
187
-
188
- export const logLevel = recipe({
189
- base: {
190
- ...typography("t2", "bold"),
191
- marginRight: 8,
192
- },
193
- variants: {
194
- level: {
195
- log: {
196
- color: vars.$color.palette.green600,
197
- },
198
- info: {
199
- color: vars.$color.palette.blue600,
200
- },
201
- warn: {
202
- color: vars.$color.palette.yellow600,
203
- },
204
- error: {
205
- color: vars.$color.palette.red600,
206
- },
207
- },
208
- },
209
- });
210
-
211
- export const logTime = style({
212
- ...typography("t2", "regular"),
213
- color: vars.$color.fg.neutralSubtle,
214
- });
215
-
216
- export const toggleIndicator = style({
217
- ...typography("t2", "regular"),
218
- color: vars.$color.fg.neutralSubtle,
219
- marginLeft: 4,
220
- alignSelf: "flex-start",
221
- });
222
-
223
- export const logMessage = style({
224
- ...typography("t3", "regular"),
225
- color: vars.$color.fg.neutral,
226
- wordBreak: "break-all",
227
- });
228
-
229
- export const logArgsContainer = style({
230
- display: "flex",
231
- flexDirection: "row",
232
- flexWrap: "wrap",
233
- gap: 8,
234
- });
235
-
236
- export const logArgItem = style({
237
- ...typography("t3", "regular"),
238
- });
239
-
240
- export const argNull = style({
241
- color: vars.$color.fg.neutralSubtle,
242
- });
243
-
244
- export const argUndefined = style({
245
- color: vars.$color.fg.neutralSubtle,
246
- });
247
-
248
- export const argString = recipe({
249
- base: {
250
- ...typography("t3", "regular"),
251
- },
252
- variants: {
253
- level: {
254
- log: { color: vars.$color.fg.neutral },
255
- info: { color: vars.$color.fg.neutral },
256
- warn: { color: vars.$color.palette.yellow900 },
257
- error: { color: vars.$color.palette.red900 },
258
- },
259
- },
260
- });
261
-
262
- export const argPrimitive = recipe({
263
- base: {
264
- ...typography("t3", "regular"),
265
- },
266
- variants: {
267
- level: {
268
- log: { color: vars.$color.palette.blue600 },
269
- info: { color: vars.$color.palette.blue600 },
270
- warn: { color: vars.$color.palette.yellow900 },
271
- error: { color: vars.$color.palette.red900 },
272
- },
273
- },
274
- });
275
-
276
- export const argObject = style({
277
- display: "flex",
278
- flexDirection: "column",
279
- });
280
-
281
- export const argObjectHeader = style({
282
- display: "flex",
283
- flexDirection: "row",
284
- alignItems: "center",
285
- gap: 4,
286
- });
287
-
288
- export const argObjectPreview = style({
289
- ...typography("t3", "medium"),
290
- color: vars.$color.fg.neutral,
291
- });
292
-
293
- export const argObjectContent = style({
294
- marginTop: 4,
295
- display: "flex",
296
- flexDirection: "column",
297
- gap: 4,
298
- });
299
-
300
- export const argObjectProperty = style({
301
- display: "flex",
302
- flexDirection: "row",
303
- alignItems: "flex-start",
304
- });
305
-
306
- export const argObjectKey = style({
307
- ...typography("t3", "medium"),
308
- color: vars.$color.palette.purple600,
309
- });
310
-
311
- export const argObjectJson = style({
312
- ...typography("t3", "regular"),
313
- color: vars.$color.fg.neutral,
314
- });
315
-
316
- export const replInputRow = style({
317
- display: "flex",
318
- flexDirection: "row",
319
- alignItems: "center",
320
- gap: 8,
321
- paddingTop: 0,
322
- paddingBottom: 8,
323
- });
324
-
325
- export const replPrompt = style({
326
- ...typography("t10", "medium"),
327
- color: vars.$color.fg.placeholder,
328
- paddingBottom: 8,
329
- });
330
-
331
- export const replInput = style({
332
- flex: 1,
333
- ...typography("t5", "regular"),
334
- color: vars.$color.fg.neutral,
335
- caretColor: vars.$color.palette.green600,
336
- paddingBottom: 8,
337
- });
338
-
339
- export const replRunButton = style({
340
- padding: "4px 10px",
341
- backgroundColor: vars.$color.palette.green100,
342
- borderRadius: 4,
343
- marginBottom: 8,
344
- });
345
-
346
- export const replRunButtonText = style({
347
- ...typography("t3", "medium"),
348
- color: vars.$color.palette.green600,
349
- });
@@ -1,16 +0,0 @@
1
- import { style } from "@vanilla-extract/css";
2
- import { vars } from "../styles/vars";
3
-
4
- export const fadeTop = style({
5
- height: 20,
6
- marginBottom: -20,
7
- zIndex: 1,
8
- background: `linear-gradient(to bottom, ${vars.$color.bg.layerFloating}, #ffffff00)`,
9
- });
10
-
11
- export const fadeBottom = style({
12
- height: 20,
13
- marginTop: -20,
14
- zIndex: 1,
15
- background: `linear-gradient(to top, ${vars.$color.bg.layerFloating}, #ffffff00)`,
16
- });