@tanstack/pacer-devtools 0.2.0 → 0.3.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 (26) hide show
  1. package/dist/esm/PacerContextProvider.js.map +1 -1
  2. package/dist/esm/components/ActionButtons.js.map +1 -1
  3. package/dist/esm/components/DetailsPanel.js.map +1 -1
  4. package/dist/esm/components/Shell.js +4 -6
  5. package/dist/esm/components/Shell.js.map +1 -1
  6. package/dist/esm/components/StateHeader.js +4 -7
  7. package/dist/esm/components/StateHeader.js.map +1 -1
  8. package/dist/esm/components/UtilList.js.map +1 -1
  9. package/dist/esm/core.d.ts +15 -5
  10. package/dist/esm/core.js +5 -38
  11. package/dist/esm/core.js.map +1 -1
  12. package/dist/esm/index.d.ts +8 -2
  13. package/dist/esm/index.js +2 -10
  14. package/dist/esm/index.js.map +1 -1
  15. package/dist/esm/production.d.ts +1 -2
  16. package/dist/esm/production.js +1 -2
  17. package/dist/esm/production.js.map +1 -1
  18. package/dist/esm/styles/tokens.js +8 -1
  19. package/dist/esm/styles/tokens.js.map +1 -1
  20. package/dist/esm/styles/use-styles.js +64 -53
  21. package/dist/esm/styles/use-styles.js.map +1 -1
  22. package/package.json +5 -4
  23. package/src/core.tsx +5 -36
  24. package/src/index.ts +2 -9
  25. package/src/production.ts +1 -3
  26. package/src/styles/use-styles.ts +64 -53
package/src/styles/use-styles.ts CHANGED
@@ -1,11 +1,13 @@
1
1
  import * as goober from 'goober'
2
- import { createSignal } from 'solid-js'
2
+ import { createEffect, createSignal } from 'solid-js'
3
+ import { useTheme } from '@tanstack/devtools-ui'
3
4
  import { tokens } from './tokens'
4
5
 
5
- const stylesFactory = () => {
6
+ const stylesFactory = (theme: 'light' | 'dark') => {
6
7
  const { colors, font, size, alpha, border } = tokens
7
8
  const { fontFamily, size: fontSize } = font
8
9
  const css = goober.css
10
+ const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
9
11
 
10
12
  return {
11
13
  mainContainer: css`
@@ -19,7 +21,7 @@ const stylesFactory = () => {
19
21
  `,
20
22
  dragHandle: css`
21
23
  width: 8px;
22
- background: ${colors.darkGray[600]};
24
+ background: ${t(colors.gray[300], colors.darkGray[600])};
23
25
  cursor: col-resize;
24
26
  position: relative;
25
27
  transition: all 0.2s ease;
@@ -29,12 +31,12 @@ const stylesFactory = () => {
29
31
  border-radius: 2px;
30
32
 
31
33
  &:hover {
32
- background: ${colors.blue[500]};
34
+ background: ${t(colors.blue[600], colors.blue[500])};
33
35
  margin: 0 ${size[1]};
34
36
  }
35
37
 
36
38
  &.dragging {
37
- background: ${colors.blue[600]};
39
+ background: ${t(colors.blue[700], colors.blue[600])};
38
40
  margin: 0 ${size[1]};
39
41
  }
40
42
 
@@ -46,20 +48,20 @@ const stylesFactory = () => {
46
48
  transform: translate(-50%, -50%);
47
49
  width: 2px;
48
50
  height: 20px;
49
- background: ${colors.darkGray[400]};
51
+ background: ${t(colors.gray[400], colors.darkGray[400])};
50
52
  border-radius: 1px;
51
53
  pointer-events: none;
52
54
  }
53
55
 
54
56
  &:hover::after,
55
57
  &.dragging::after {
56
- background: ${colors.blue[300]};
58
+ background: ${t(colors.blue[500], colors.blue[300])};
57
59
  }
58
60
  `,
59
61
  leftPanel: css`
60
- background: ${colors.darkGray[800]};
62
+ background: ${t(colors.gray[100], colors.darkGray[800])};
61
63
  border-radius: ${border.radius.lg};
62
- border: 1px solid ${colors.darkGray[700]};
64
+ border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
63
65
  display: flex;
64
66
  flex-direction: column;
65
67
  overflow: hidden;
@@ -67,9 +69,9 @@ const stylesFactory = () => {
67
69
  flex-shrink: 0;
68
70
  `,
69
71
  rightPanel: css`
70
- background: ${colors.darkGray[800]};
72
+ background: ${t(colors.gray[100], colors.darkGray[800])};
71
73
  border-radius: ${border.radius.lg};
72
- border: 1px solid ${colors.darkGray[700]};
74
+ border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
73
75
  display: flex;
74
76
  flex-direction: column;
75
77
  overflow: hidden;
@@ -79,10 +81,10 @@ const stylesFactory = () => {
79
81
  panelHeader: css`
80
82
  font-size: ${fontSize.md};
81
83
  font-weight: ${font.weight.bold};
82
- color: ${colors.blue[400]};
84
+ color: ${t(colors.blue[700], colors.blue[400])};
83
85
  padding: ${size[2]};
84
- border-bottom: 1px solid ${colors.darkGray[700]};
85
- background: ${colors.darkGray[800]};
86
+ border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
87
+ background: ${t(colors.gray[100], colors.darkGray[800])};
86
88
  flex-shrink: 0;
87
89
  `,
88
90
  utilList: css`
@@ -97,12 +99,12 @@ const stylesFactory = () => {
97
99
  utilGroupHeader: css`
98
100
  font-size: ${fontSize.xs};
99
101
  font-weight: ${font.weight.semibold};
100
- color: ${colors.gray[400]};
102
+ color: ${t(colors.gray[600], colors.gray[400])};
101
103
  text-transform: uppercase;
102
104
  letter-spacing: 0.05em;
103
105
  margin-bottom: ${size[1]};
104
106
  padding: ${size[1]} ${size[2]};
105
- background: ${colors.darkGray[700]};
107
+ background: ${t(colors.gray[200], colors.darkGray[700])};
106
108
  border-radius: ${border.radius.md};
107
109
  `,
108
110
  utilRow: css`
@@ -111,26 +113,27 @@ const stylesFactory = () => {
111
113
  align-items: center;
112
114
  padding: ${size[2]};
113
115
  margin-bottom: ${size[1]};
114
- background: ${colors.darkGray[700]};
116
+ background: ${t(colors.gray[200], colors.darkGray[700])};
115
117
  border-radius: ${border.radius.md};
116
118
  cursor: pointer;
117
119
  transition: all 0.2s ease;
118
120
  border: 1px solid transparent;
119
121
 
120
122
  &:hover {
121
- background: ${colors.darkGray[600]};
122
- border-color: ${colors.darkGray[500]};
123
+ background: ${t(colors.gray[300], colors.darkGray[600])};
124
+ border-color: ${t(colors.gray[400], colors.darkGray[500])};
123
125
  }
124
126
  `,
125
127
  utilRowSelected: css`
126
- background: ${colors.blue[900] + alpha[20]};
127
- border-color: ${colors.blue[500]};
128
- box-shadow: 0 0 0 1px ${colors.blue[500] + alpha[30]};
128
+ background: ${t(colors.blue[100], colors.blue[900] + alpha[20])};
129
+ border-color: ${t(colors.blue[600], colors.blue[500])};
130
+ box-shadow: 0 0 0 1px
131
+ ${t(colors.blue[600] + alpha[30], colors.blue[500] + alpha[30])};
129
132
  `,
130
133
  utilKey: css`
131
134
  font-family: ${fontFamily.mono};
132
135
  font-size: ${fontSize.xs};
133
- color: ${colors.gray[100]};
136
+ color: ${t(colors.gray[900], colors.gray[100])};
134
137
  flex: 1;
135
138
  overflow: hidden;
136
139
  text-overflow: ellipsis;
@@ -138,11 +141,11 @@ const stylesFactory = () => {
138
141
  `,
139
142
  utilStatus: css`
140
143
  font-size: ${fontSize.xs};
141
- color: ${colors.gray[400]};
144
+ color: ${t(colors.gray[600], colors.gray[400])};
142
145
  text-transform: uppercase;
143
146
  letter-spacing: 0.05em;
144
147
  padding: ${size[1]} ${size[1]};
145
- background: ${colors.darkGray[600]};
148
+ background: ${t(colors.gray[300], colors.darkGray[600])};
146
149
  border-radius: ${border.radius.sm};
147
150
  margin-left: ${size[1]};
148
151
  `,
@@ -155,25 +158,25 @@ const stylesFactory = () => {
155
158
  stateHeader: css`
156
159
  margin-bottom: ${size[2]};
157
160
  padding-bottom: ${size[2]};
158
- border-bottom: 1px solid ${colors.darkGray[700]};
161
+ border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
159
162
  `,
160
163
  stateTitle: css`
161
164
  font-size: ${fontSize.md};
162
165
  font-weight: ${font.weight.bold};
163
- color: ${colors.blue[400]};
166
+ color: ${t(colors.blue[700], colors.blue[400])};
164
167
  margin-bottom: ${size[1]};
165
168
  `,
166
169
  stateKey: css`
167
170
  font-family: ${fontFamily.mono};
168
171
  font-size: ${fontSize.xs};
169
- color: ${colors.gray[400]};
172
+ color: ${t(colors.gray[600], colors.gray[400])};
170
173
  word-break: break-all;
171
174
  `,
172
175
  stateContent: css`
173
- background: ${colors.darkGray[700]};
176
+ background: ${t(colors.gray[100], colors.darkGray[700])};
174
177
  border-radius: ${border.radius.md};
175
178
  padding: ${size[2]};
176
- border: 1px solid ${colors.darkGray[600]};
179
+ border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
177
180
  `,
178
181
  detailsGrid: css`
179
182
  display: grid;
@@ -182,15 +185,15 @@ const stylesFactory = () => {
182
185
  align-items: start;
183
186
  `,
184
187
  detailSection: css`
185
- background: ${colors.darkGray[700]};
186
- border: 1px solid ${colors.darkGray[600]};
188
+ background: ${t(colors.white, colors.darkGray[700])};
189
+ border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
187
190
  border-radius: ${border.radius.md};
188
191
  padding: ${size[2]};
189
192
  `,
190
193
  detailSectionHeader: css`
191
194
  font-size: ${fontSize.sm};
192
195
  font-weight: ${font.weight.bold};
193
- color: ${colors.gray[200]};
196
+ color: ${t(colors.gray[800], colors.gray[200])};
194
197
  margin-bottom: ${size[1]};
195
198
  text-transform: uppercase;
196
199
  letter-spacing: 0.04em;
@@ -206,9 +209,9 @@ const stylesFactory = () => {
206
209
  gap: ${size[1]};
207
210
  padding: ${size[1]} ${size[2]};
208
211
  border-radius: ${border.radius.md};
209
- border: 1px solid ${colors.darkGray[500]};
210
- background: ${colors.darkGray[600]};
211
- color: ${colors.gray[100]};
212
+ border: 1px solid ${t(colors.gray[300], colors.darkGray[500])};
213
+ background: ${t(colors.gray[200], colors.darkGray[600])};
214
+ color: ${t(colors.gray[900], colors.gray[100])};
212
215
  font-size: ${fontSize.xs};
213
216
  cursor: pointer;
214
217
  user-select: none;
@@ -216,15 +219,15 @@ const stylesFactory = () => {
216
219
  background 0.15s,
217
220
  border-color 0.15s;
218
221
  &:hover {
219
- background: ${colors.darkGray[500]};
220
- border-color: ${colors.darkGray[400]};
222
+ background: ${t(colors.gray[300], colors.darkGray[500])};
223
+ border-color: ${t(colors.gray[400], colors.darkGray[400])};
221
224
  }
222
225
  &:disabled {
223
226
  opacity: 0.5;
224
227
  cursor: not-allowed;
225
228
  &:hover {
226
- background: ${colors.darkGray[600]};
227
- border-color: ${colors.darkGray[500]};
229
+ background: ${t(colors.gray[200], colors.darkGray[600])};
230
+ border-color: ${t(colors.gray[300], colors.darkGray[500])};
228
231
  }
229
232
  }
230
233
  `,
@@ -272,7 +275,7 @@ const stylesFactory = () => {
272
275
  align-items: center;
273
276
  `,
274
277
  infoLabel: css`
275
- color: ${colors.gray[400]};
278
+ color: ${t(colors.gray[600], colors.gray[400])};
276
279
  font-size: ${fontSize.xs};
277
280
  text-transform: uppercase;
278
281
  letter-spacing: 0.05em;
@@ -280,7 +283,7 @@ const stylesFactory = () => {
280
283
  infoValueMono: css`
281
284
  font-family: ${fontFamily.mono};
282
285
  font-size: ${fontSize.xs};
283
- color: ${colors.gray[100]};
286
+ color: ${t(colors.gray[900], colors.gray[100])};
284
287
  word-break: break-all;
285
288
  `,
286
289
  noSelection: css`
@@ -288,7 +291,7 @@ const stylesFactory = () => {
288
291
  display: flex;
289
292
  align-items: center;
290
293
  justify-content: center;
291
- color: ${colors.gray[500]};
294
+ color: ${t(colors.gray[500], colors.gray[500])};
292
295
  font-style: italic;
293
296
  text-align: center;
294
297
  padding: ${size[4]};
@@ -300,12 +303,14 @@ const stylesFactory = () => {
300
303
  gap: ${size[4]};
301
304
  `,
302
305
  section: css`
303
- background: ${colors.darkGray[800]};
306
+ background: ${t(colors.gray[100], colors.darkGray[800])};
304
307
  border-radius: ${border.radius.lg};
305
- box-shadow: ${tokens.shadow.md(colors.black + alpha[80])};
308
+ box-shadow: ${tokens.shadow.md(
309
+ t(colors.gray[400] + alpha[80], colors.black + alpha[80]),
310
+ )};
306
311
  padding: ${size[4]};
307
312
  margin-bottom: ${size[4]};
308
- border: 1px solid ${colors.darkGray[700]};
313
+ border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
309
314
  min-width: 0;
310
315
  max-width: 33%;
311
316
  max-height: fit-content;
@@ -314,14 +319,14 @@ const stylesFactory = () => {
314
319
  font-size: ${fontSize.lg};
315
320
  font-weight: ${font.weight.bold};
316
321
  margin-bottom: ${size[2]};
317
- color: ${colors.blue[400]};
322
+ color: ${t(colors.blue[600], colors.blue[400])};
318
323
  letter-spacing: 0.01em;
319
324
  display: flex;
320
325
  align-items: center;
321
326
  gap: ${size[2]};
322
327
  `,
323
328
  sectionEmpty: css`
324
- color: ${colors.gray[500]};
329
+ color: ${t(colors.gray[500], colors.gray[500])};
325
330
  font-size: ${fontSize.sm};
326
331
  font-style: italic;
327
332
  margin: ${size[2]} 0;
@@ -330,14 +335,16 @@ const stylesFactory = () => {
330
335
  display: flex;
331
336
  flex-direction: column;
332
337
  gap: ${size[2]};
338
+ background: ${t(colors.gray[200], colors.darkGray[700])};
339
+ border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
333
340
  `,
334
341
  instanceCard: css`
335
- background: ${colors.darkGray[700]};
342
+ background: ${t(colors.gray[200], colors.darkGray[700])};
336
343
  border-radius: ${border.radius.md};
337
344
  padding: ${size[3]};
338
- border: 1px solid ${colors.darkGray[600]};
345
+ border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
339
346
  font-size: ${fontSize.sm};
340
- color: ${colors.gray[100]};
347
+ color: ${t(colors.gray[900], colors.gray[100])};
341
348
  font-family: ${fontFamily.mono};
342
349
  overflow-x: auto;
343
350
  transition:
@@ -348,6 +355,10 @@ const stylesFactory = () => {
348
355
  }
349
356
 
350
357
  export function useStyles() {
351
- const [_styles] = createSignal(stylesFactory())
352
- return _styles
358
+ const { theme } = useTheme()
359
+ const [styles, setStyles] = createSignal(stylesFactory(theme()))
360
+ createEffect(() => {
361
+ setStyles(stylesFactory(theme()))
362
+ })
363
+ return styles
353
364
  }