@tanstack/devtools-ui 0.4.0 → 0.4.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.
- package/dist/esm/components/tree.js +184 -140
- package/dist/esm/components/tree.js.map +1 -1
- package/dist/esm/styles/tokens.js +0 -4
- package/dist/esm/styles/tokens.js.map +1 -1
- package/dist/esm/styles/use-styles.js +59 -63
- package/dist/esm/styles/use-styles.js.map +1 -1
- package/package.json +1 -1
- package/src/components/tree.tsx +78 -91
- package/src/styles/use-styles.ts +59 -63
package/src/components/tree.tsx
CHANGED
|
@@ -36,94 +36,87 @@ function JsonValue(props: {
|
|
|
36
36
|
collapsePaths?: Array<string>
|
|
37
37
|
path: string
|
|
38
38
|
}) {
|
|
39
|
-
const {
|
|
40
|
-
value,
|
|
41
|
-
keyName,
|
|
42
|
-
isRoot = false,
|
|
43
|
-
isLastKey,
|
|
44
|
-
copyable,
|
|
45
|
-
defaultExpansionDepth,
|
|
46
|
-
depth,
|
|
47
|
-
collapsePaths,
|
|
48
|
-
path,
|
|
49
|
-
} = props
|
|
50
39
|
const styles = useStyles()
|
|
51
40
|
|
|
52
41
|
return (
|
|
53
|
-
<span class={styles().tree.valueContainer(isRoot)}>
|
|
54
|
-
{keyName &&
|
|
55
|
-
|
|
56
|
-
|
|
42
|
+
<span class={styles().tree.valueContainer(props.isRoot ?? false)}>
|
|
43
|
+
{props.keyName &&
|
|
44
|
+
typeof props.value !== 'object' &&
|
|
45
|
+
!Array.isArray(props.value) && (
|
|
46
|
+
<span class={styles().tree.valueKey}>
|
|
47
|
+
"{props.keyName}":{' '}
|
|
48
|
+
</span>
|
|
49
|
+
)}
|
|
57
50
|
{(() => {
|
|
58
|
-
if (typeof value === 'string') {
|
|
51
|
+
if (typeof props.value === 'string') {
|
|
59
52
|
return (
|
|
60
|
-
<span class={styles().tree.valueString}
|
|
53
|
+
<span class={styles().tree.valueString}>
|
|
54
|
+
"{props.value}"
|
|
55
|
+
</span>
|
|
61
56
|
)
|
|
62
57
|
}
|
|
63
|
-
if (typeof value === 'number') {
|
|
64
|
-
return <span class={styles().tree.valueNumber}>{value}</span>
|
|
58
|
+
if (typeof props.value === 'number') {
|
|
59
|
+
return <span class={styles().tree.valueNumber}>{props.value}</span>
|
|
65
60
|
}
|
|
66
|
-
if (typeof value === 'boolean') {
|
|
67
|
-
return
|
|
61
|
+
if (typeof props.value === 'boolean') {
|
|
62
|
+
return (
|
|
63
|
+
<span class={styles().tree.valueBoolean}>
|
|
64
|
+
{String(props.value)}
|
|
65
|
+
</span>
|
|
66
|
+
)
|
|
68
67
|
}
|
|
69
|
-
if (value === null) {
|
|
68
|
+
if (props.value === null) {
|
|
70
69
|
return <span class={styles().tree.valueNull}>null</span>
|
|
71
70
|
}
|
|
72
|
-
if (value === undefined) {
|
|
71
|
+
if (props.value === undefined) {
|
|
73
72
|
return <span class={styles().tree.valueNull}>undefined</span>
|
|
74
73
|
}
|
|
75
|
-
if (typeof value === 'function') {
|
|
74
|
+
if (typeof props.value === 'function') {
|
|
76
75
|
return (
|
|
77
|
-
<span class={styles().tree.valueFunction}>
|
|
76
|
+
<span class={styles().tree.valueFunction}>
|
|
77
|
+
{String(props.value)}
|
|
78
|
+
</span>
|
|
78
79
|
)
|
|
79
80
|
}
|
|
80
|
-
if (Array.isArray(value)) {
|
|
81
|
+
if (Array.isArray(props.value)) {
|
|
81
82
|
return (
|
|
82
83
|
<ArrayValue
|
|
83
|
-
defaultExpansionDepth={defaultExpansionDepth}
|
|
84
|
-
depth={depth}
|
|
85
|
-
copyable={copyable}
|
|
86
|
-
keyName={keyName}
|
|
87
|
-
value={value}
|
|
88
|
-
collapsePaths={collapsePaths}
|
|
89
|
-
path={path}
|
|
84
|
+
defaultExpansionDepth={props.defaultExpansionDepth}
|
|
85
|
+
depth={props.depth}
|
|
86
|
+
copyable={props.copyable}
|
|
87
|
+
keyName={props.keyName}
|
|
88
|
+
value={props.value}
|
|
89
|
+
collapsePaths={props.collapsePaths}
|
|
90
|
+
path={props.path}
|
|
90
91
|
/>
|
|
91
92
|
)
|
|
92
93
|
}
|
|
93
|
-
if (typeof value === 'object') {
|
|
94
|
+
if (typeof props.value === 'object') {
|
|
94
95
|
return (
|
|
95
96
|
<ObjectValue
|
|
96
|
-
defaultExpansionDepth={defaultExpansionDepth}
|
|
97
|
-
depth={depth}
|
|
98
|
-
copyable={copyable}
|
|
99
|
-
keyName={keyName}
|
|
100
|
-
value={value}
|
|
101
|
-
collapsePaths={collapsePaths}
|
|
102
|
-
path={path}
|
|
97
|
+
defaultExpansionDepth={props.defaultExpansionDepth}
|
|
98
|
+
depth={props.depth}
|
|
99
|
+
copyable={props.copyable}
|
|
100
|
+
keyName={props.keyName}
|
|
101
|
+
value={props.value}
|
|
102
|
+
collapsePaths={props.collapsePaths}
|
|
103
|
+
path={props.path}
|
|
103
104
|
/>
|
|
104
105
|
)
|
|
105
106
|
}
|
|
106
107
|
return <span />
|
|
107
108
|
})()}
|
|
108
|
-
{copyable && (
|
|
109
|
+
{props.copyable && (
|
|
109
110
|
<div class={clsx(styles().tree.actions, 'actions')}>
|
|
110
|
-
<CopyButton value={value} />
|
|
111
|
+
<CopyButton value={props.value} />
|
|
111
112
|
</div>
|
|
112
113
|
)}
|
|
113
|
-
{isLastKey || isRoot ? '' : <span>,</span>}
|
|
114
|
+
{props.isLastKey || props.isRoot ? '' : <span>,</span>}
|
|
114
115
|
</span>
|
|
115
116
|
)
|
|
116
117
|
}
|
|
117
118
|
|
|
118
|
-
const ArrayValue = ({
|
|
119
|
-
value,
|
|
120
|
-
keyName,
|
|
121
|
-
copyable,
|
|
122
|
-
defaultExpansionDepth,
|
|
123
|
-
depth,
|
|
124
|
-
collapsePaths,
|
|
125
|
-
path,
|
|
126
|
-
}: {
|
|
119
|
+
const ArrayValue = (props: {
|
|
127
120
|
value: Array<any>
|
|
128
121
|
copyable?: boolean
|
|
129
122
|
keyName?: string
|
|
@@ -135,15 +128,16 @@ const ArrayValue = ({
|
|
|
135
128
|
const styles = useStyles()
|
|
136
129
|
|
|
137
130
|
const [expanded, setExpanded] = createSignal(
|
|
138
|
-
depth <= defaultExpansionDepth &&
|
|
131
|
+
props.depth <= props.defaultExpansionDepth &&
|
|
132
|
+
!props.collapsePaths?.includes(props.path),
|
|
139
133
|
)
|
|
140
134
|
|
|
141
|
-
if (value.length === 0) {
|
|
135
|
+
if (props.value.length === 0) {
|
|
142
136
|
return (
|
|
143
137
|
<span class={styles().tree.expanderContainer}>
|
|
144
|
-
{keyName && (
|
|
138
|
+
{props.keyName && (
|
|
145
139
|
<span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
|
|
146
|
-
"{keyName}":{' '}
|
|
140
|
+
"{props.keyName}":{' '}
|
|
147
141
|
</span>
|
|
148
142
|
)}
|
|
149
143
|
|
|
@@ -158,7 +152,7 @@ const ArrayValue = ({
|
|
|
158
152
|
expanded={expanded()}
|
|
159
153
|
/>
|
|
160
154
|
|
|
161
|
-
{keyName && (
|
|
155
|
+
{props.keyName && (
|
|
162
156
|
<span
|
|
163
157
|
onclick={(e) => {
|
|
164
158
|
e.stopPropagation()
|
|
@@ -167,27 +161,27 @@ const ArrayValue = ({
|
|
|
167
161
|
}}
|
|
168
162
|
class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
|
|
169
163
|
>
|
|
170
|
-
"{keyName}":{' '}
|
|
171
|
-
<span class={styles().tree.info}>{value.length} items</span>
|
|
164
|
+
"{props.keyName}":{' '}
|
|
165
|
+
<span class={styles().tree.info}>{props.value.length} items</span>
|
|
172
166
|
</span>
|
|
173
167
|
)}
|
|
174
168
|
|
|
175
169
|
<span class={styles().tree.valueBraces}>[</span>
|
|
176
170
|
|
|
177
171
|
<Show when={expanded()}>
|
|
178
|
-
<span class={styles().tree.expandedLine(Boolean(keyName))}>
|
|
179
|
-
<For each={value}>
|
|
172
|
+
<span class={styles().tree.expandedLine(Boolean(props.keyName))}>
|
|
173
|
+
<For each={props.value}>
|
|
180
174
|
{(item, i) => {
|
|
181
|
-
const isLastKey = i() === value.length - 1
|
|
175
|
+
const isLastKey = i() === props.value.length - 1
|
|
182
176
|
return (
|
|
183
177
|
<JsonValue
|
|
184
|
-
copyable={copyable}
|
|
178
|
+
copyable={props.copyable}
|
|
185
179
|
value={item}
|
|
186
180
|
isLastKey={isLastKey}
|
|
187
|
-
defaultExpansionDepth={defaultExpansionDepth}
|
|
188
|
-
depth={depth + 1}
|
|
189
|
-
collapsePaths={collapsePaths}
|
|
190
|
-
path={path ? `${path}[${i()}]` : `[${i()}]`}
|
|
181
|
+
defaultExpansionDepth={props.defaultExpansionDepth}
|
|
182
|
+
depth={props.depth + 1}
|
|
183
|
+
collapsePaths={props.collapsePaths}
|
|
184
|
+
path={props.path ? `${props.path}[${i()}]` : `[${i()}]`}
|
|
191
185
|
/>
|
|
192
186
|
)
|
|
193
187
|
}}
|
|
@@ -212,15 +206,7 @@ const ArrayValue = ({
|
|
|
212
206
|
)
|
|
213
207
|
}
|
|
214
208
|
|
|
215
|
-
const ObjectValue = ({
|
|
216
|
-
value,
|
|
217
|
-
keyName,
|
|
218
|
-
copyable,
|
|
219
|
-
defaultExpansionDepth,
|
|
220
|
-
depth,
|
|
221
|
-
collapsePaths,
|
|
222
|
-
path,
|
|
223
|
-
}: {
|
|
209
|
+
const ObjectValue = (props: {
|
|
224
210
|
value: Record<string, any>
|
|
225
211
|
keyName?: string
|
|
226
212
|
copyable?: boolean
|
|
@@ -232,18 +218,19 @@ const ObjectValue = ({
|
|
|
232
218
|
const styles = useStyles()
|
|
233
219
|
|
|
234
220
|
const [expanded, setExpanded] = createSignal(
|
|
235
|
-
depth <= defaultExpansionDepth &&
|
|
221
|
+
props.depth <= props.defaultExpansionDepth &&
|
|
222
|
+
!props.collapsePaths?.includes(props.path),
|
|
236
223
|
)
|
|
237
224
|
|
|
238
|
-
const keys = Object.keys(value)
|
|
225
|
+
const keys = Object.keys(props.value)
|
|
239
226
|
const lastKeyName = keys[keys.length - 1]
|
|
240
227
|
|
|
241
228
|
if (keys.length === 0) {
|
|
242
229
|
return (
|
|
243
230
|
<span class={styles().tree.expanderContainer}>
|
|
244
|
-
{keyName && (
|
|
231
|
+
{props.keyName && (
|
|
245
232
|
<span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
|
|
246
|
-
"{keyName}":{' '}
|
|
233
|
+
"{props.keyName}":{' '}
|
|
247
234
|
</span>
|
|
248
235
|
)}
|
|
249
236
|
|
|
@@ -254,14 +241,14 @@ const ObjectValue = ({
|
|
|
254
241
|
|
|
255
242
|
return (
|
|
256
243
|
<span class={styles().tree.expanderContainer}>
|
|
257
|
-
{keyName && (
|
|
244
|
+
{props.keyName && (
|
|
258
245
|
<Expander
|
|
259
246
|
onClick={() => setExpanded(!expanded())}
|
|
260
247
|
expanded={expanded()}
|
|
261
248
|
/>
|
|
262
249
|
)}
|
|
263
250
|
|
|
264
|
-
{keyName && (
|
|
251
|
+
{props.keyName && (
|
|
265
252
|
<span
|
|
266
253
|
onClick={(e) => {
|
|
267
254
|
e.stopPropagation()
|
|
@@ -270,7 +257,7 @@ const ObjectValue = ({
|
|
|
270
257
|
}}
|
|
271
258
|
class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
|
|
272
259
|
>
|
|
273
|
-
"{keyName}":{' '}
|
|
260
|
+
"{props.keyName}":{' '}
|
|
274
261
|
<span class={styles().tree.info}>{keys.length} items</span>
|
|
275
262
|
</span>
|
|
276
263
|
)}
|
|
@@ -278,19 +265,19 @@ const ObjectValue = ({
|
|
|
278
265
|
<span class={styles().tree.valueBraces}>{'{'}</span>
|
|
279
266
|
|
|
280
267
|
<Show when={expanded()}>
|
|
281
|
-
<span class={styles().tree.expandedLine(Boolean(keyName))}>
|
|
268
|
+
<span class={styles().tree.expandedLine(Boolean(props.keyName))}>
|
|
282
269
|
<For each={keys}>
|
|
283
270
|
{(k) => (
|
|
284
271
|
<>
|
|
285
272
|
<JsonValue
|
|
286
|
-
value={value[k]}
|
|
273
|
+
value={props.value[k]}
|
|
287
274
|
keyName={k}
|
|
288
275
|
isLastKey={lastKeyName === k}
|
|
289
|
-
copyable={copyable}
|
|
290
|
-
defaultExpansionDepth={defaultExpansionDepth}
|
|
291
|
-
depth={depth + 1}
|
|
292
|
-
collapsePaths={collapsePaths}
|
|
293
|
-
path={`${path}${path ? '.' : ''}${k}`}
|
|
276
|
+
copyable={props.copyable}
|
|
277
|
+
defaultExpansionDepth={props.defaultExpansionDepth}
|
|
278
|
+
depth={props.depth + 1}
|
|
279
|
+
collapsePaths={props.collapsePaths}
|
|
280
|
+
path={`${props.path}${props.path ? '.' : ''}${k}`}
|
|
294
281
|
/>
|
|
295
282
|
</>
|
|
296
283
|
)}
|
package/src/styles/use-styles.ts
CHANGED
|
@@ -10,18 +10,18 @@ const buttonVariantColors: Record<
|
|
|
10
10
|
{ bg: string; hover: string; active: string; text: string; border: string }
|
|
11
11
|
> = {
|
|
12
12
|
primary: {
|
|
13
|
-
bg: tokens.colors.
|
|
14
|
-
hover: tokens.colors.
|
|
15
|
-
active: tokens.colors.
|
|
13
|
+
bg: tokens.colors.gray[900],
|
|
14
|
+
hover: tokens.colors.gray[800],
|
|
15
|
+
active: tokens.colors.gray[700],
|
|
16
16
|
text: '#fff',
|
|
17
|
-
border: tokens.colors.
|
|
17
|
+
border: tokens.colors.gray[900],
|
|
18
18
|
},
|
|
19
19
|
secondary: {
|
|
20
|
-
bg: tokens.colors.gray[
|
|
21
|
-
hover: tokens.colors.gray[
|
|
22
|
-
active: tokens.colors.gray[
|
|
23
|
-
text: tokens.colors.gray[
|
|
24
|
-
border: tokens.colors.gray[
|
|
20
|
+
bg: tokens.colors.gray[100],
|
|
21
|
+
hover: tokens.colors.gray[200],
|
|
22
|
+
active: tokens.colors.gray[300],
|
|
23
|
+
text: tokens.colors.gray[900],
|
|
24
|
+
border: tokens.colors.gray[300],
|
|
25
25
|
},
|
|
26
26
|
info: {
|
|
27
27
|
bg: tokens.colors.blue[500],
|
|
@@ -54,7 +54,7 @@ const buttonVariantColors: Record<
|
|
|
54
54
|
}
|
|
55
55
|
export const css = goober.css
|
|
56
56
|
const stylesFactory = (theme: Theme = 'dark') => {
|
|
57
|
-
const { colors, font, size,
|
|
57
|
+
const { colors, font, size, border } = tokens
|
|
58
58
|
const { fontFamily } = font
|
|
59
59
|
|
|
60
60
|
const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
|
|
@@ -104,13 +104,13 @@ const stylesFactory = (theme: Theme = 'dark') => {
|
|
|
104
104
|
select: css`
|
|
105
105
|
appearance: none;
|
|
106
106
|
width: 100%;
|
|
107
|
-
padding: 0.
|
|
108
|
-
border-radius: 0.
|
|
107
|
+
padding: 0.5rem 3rem 0.5rem 0.75rem;
|
|
108
|
+
border-radius: 0.375rem;
|
|
109
109
|
background-color: ${t(colors.gray[50], colors.darkGray[800])};
|
|
110
110
|
color: ${t(colors.gray[900], colors.gray[100])};
|
|
111
|
-
border: 1px solid ${t(colors.gray[
|
|
111
|
+
border: 1px solid ${t(colors.gray[200], colors.gray[800])};
|
|
112
112
|
font-size: 0.875rem;
|
|
113
|
-
transition: all 0.
|
|
113
|
+
transition: all 0.15s ease;
|
|
114
114
|
cursor: pointer;
|
|
115
115
|
|
|
116
116
|
/* Custom arrow */
|
|
@@ -120,13 +120,13 @@ const stylesFactory = (theme: Theme = 'dark') => {
|
|
|
120
120
|
background-size: 1.25rem;
|
|
121
121
|
|
|
122
122
|
&:hover {
|
|
123
|
-
border-color: ${t(colors.gray[
|
|
123
|
+
border-color: ${t(colors.gray[300], colors.gray[700])};
|
|
124
124
|
}
|
|
125
125
|
|
|
126
126
|
&:focus {
|
|
127
127
|
outline: none;
|
|
128
|
-
border-color: ${colors.
|
|
129
|
-
box-shadow: 0 0 0 3px ${colors.
|
|
128
|
+
border-color: ${colors.gray[400]};
|
|
129
|
+
box-shadow: 0 0 0 3px ${t(colors.gray[200], colors.gray[800])};
|
|
130
130
|
}
|
|
131
131
|
`,
|
|
132
132
|
inputWrapper: css`
|
|
@@ -156,28 +156,27 @@ const stylesFactory = (theme: Theme = 'dark') => {
|
|
|
156
156
|
appearance: none;
|
|
157
157
|
box-sizing: border-box;
|
|
158
158
|
width: 100%;
|
|
159
|
-
padding: 0.75rem;
|
|
160
|
-
border-radius: 0.
|
|
159
|
+
padding: 0.5rem 0.75rem;
|
|
160
|
+
border-radius: 0.375rem;
|
|
161
161
|
background-color: ${t(colors.gray[50], colors.darkGray[800])};
|
|
162
162
|
color: ${t(colors.gray[900], colors.gray[100])};
|
|
163
|
-
border: 1px solid ${t(colors.gray[
|
|
163
|
+
border: 1px solid ${t(colors.gray[200], colors.gray[800])};
|
|
164
164
|
font-size: 0.875rem;
|
|
165
165
|
font-family: ${fontFamily.mono};
|
|
166
|
-
transition: all 0.
|
|
166
|
+
transition: all 0.15s ease;
|
|
167
167
|
|
|
168
168
|
&::placeholder {
|
|
169
169
|
color: ${t(colors.gray[400], colors.gray[500])};
|
|
170
170
|
}
|
|
171
171
|
|
|
172
172
|
&:hover {
|
|
173
|
-
border-color: ${t(colors.gray[
|
|
173
|
+
border-color: ${t(colors.gray[300], colors.gray[700])};
|
|
174
174
|
}
|
|
175
175
|
|
|
176
176
|
&:focus {
|
|
177
177
|
outline: none;
|
|
178
|
-
border-color: ${t(colors.
|
|
179
|
-
box-shadow: 0 0 0 3px
|
|
180
|
-
${t(colors.purple[100] + alpha[20], colors.purple[400] + alpha[20])};
|
|
178
|
+
border-color: ${t(colors.gray[400], colors.gray[600])};
|
|
179
|
+
box-shadow: 0 0 0 3px ${t(colors.gray[200], colors.gray[800])};
|
|
181
180
|
}
|
|
182
181
|
`,
|
|
183
182
|
checkboxWrapper: css`
|
|
@@ -186,12 +185,12 @@ const stylesFactory = (theme: Theme = 'dark') => {
|
|
|
186
185
|
gap: 0.75rem;
|
|
187
186
|
cursor: pointer;
|
|
188
187
|
user-select: none;
|
|
189
|
-
padding: 0.
|
|
190
|
-
border-radius: 0.
|
|
191
|
-
transition: background-color 0.
|
|
188
|
+
padding: 0.375rem;
|
|
189
|
+
border-radius: 0.375rem;
|
|
190
|
+
transition: background-color 0.15s ease;
|
|
192
191
|
|
|
193
192
|
&:hover {
|
|
194
|
-
background-color: ${t(colors.gray[
|
|
193
|
+
background-color: ${t(colors.gray[50], colors.darkGray[900])};
|
|
195
194
|
}
|
|
196
195
|
`,
|
|
197
196
|
checkboxContainer: css`
|
|
@@ -208,28 +207,28 @@ const stylesFactory = (theme: Theme = 'dark') => {
|
|
|
208
207
|
width: 1.25rem;
|
|
209
208
|
height: 1.25rem;
|
|
210
209
|
border: 2px solid ${t(colors.gray[300], colors.gray[700])};
|
|
211
|
-
border-radius: 0.
|
|
210
|
+
border-radius: 0.25rem;
|
|
212
211
|
background-color: ${t(colors.gray[50], colors.darkGray[800])};
|
|
213
212
|
display: grid;
|
|
214
213
|
place-items: center;
|
|
215
|
-
transition: all 0.
|
|
214
|
+
transition: all 0.15s ease;
|
|
216
215
|
flex-shrink: 0;
|
|
217
216
|
margin-top: 0.125rem;
|
|
218
217
|
|
|
219
218
|
&:hover {
|
|
220
|
-
border-color: ${t(colors.
|
|
219
|
+
border-color: ${t(colors.gray[400], colors.gray[600])};
|
|
221
220
|
}
|
|
222
221
|
|
|
223
222
|
&:checked {
|
|
224
|
-
background-color: ${t(colors.
|
|
225
|
-
border-color: ${t(colors.
|
|
223
|
+
background-color: ${t(colors.gray[900], colors.gray[100])};
|
|
224
|
+
border-color: ${t(colors.gray[900], colors.gray[100])};
|
|
226
225
|
}
|
|
227
226
|
|
|
228
227
|
&:checked::after {
|
|
229
228
|
content: '';
|
|
230
229
|
width: 0.4rem;
|
|
231
230
|
height: 0.6rem;
|
|
232
|
-
border: solid ${t('#fff', colors.gray[
|
|
231
|
+
border: solid ${t('#fff', colors.gray[900])};
|
|
233
232
|
border-width: 0 2px 2px 0;
|
|
234
233
|
transform: rotate(45deg);
|
|
235
234
|
margin-top: -3px;
|
|
@@ -256,14 +255,14 @@ const stylesFactory = (theme: Theme = 'dark') => {
|
|
|
256
255
|
font-family: ${tokens.font.fontFamily.sans};
|
|
257
256
|
font-size: 0.8rem;
|
|
258
257
|
font-weight: 500;
|
|
259
|
-
border-radius: 0.
|
|
260
|
-
padding: 0.
|
|
258
|
+
border-radius: 0.375rem;
|
|
259
|
+
padding: 0.375rem 0.75rem;
|
|
261
260
|
cursor: pointer;
|
|
262
261
|
transition:
|
|
263
|
-
background 0.
|
|
264
|
-
color 0.
|
|
265
|
-
border 0.
|
|
266
|
-
box-shadow 0.
|
|
262
|
+
background 0.15s,
|
|
263
|
+
color 0.15s,
|
|
264
|
+
border 0.15s,
|
|
265
|
+
box-shadow 0.15s;
|
|
267
266
|
outline: none;
|
|
268
267
|
border-width: 1px;
|
|
269
268
|
border-style: solid;
|
|
@@ -276,10 +275,10 @@ const stylesFactory = (theme: Theme = 'dark') => {
|
|
|
276
275
|
color: ${t(v.bg, v.bg)};
|
|
277
276
|
border-color: transparent;
|
|
278
277
|
&:hover {
|
|
279
|
-
background: ${t(colors.
|
|
278
|
+
background: ${t(colors.gray[100], colors.darkGray[800])};
|
|
280
279
|
}
|
|
281
280
|
&:active {
|
|
282
|
-
background: ${t(colors.
|
|
281
|
+
background: ${t(colors.gray[200], colors.darkGray[700])};
|
|
283
282
|
}
|
|
284
283
|
`
|
|
285
284
|
}
|
|
@@ -289,11 +288,11 @@ const stylesFactory = (theme: Theme = 'dark') => {
|
|
|
289
288
|
color: ${t(v.bg, v.bg)};
|
|
290
289
|
border-color: ${t(v.bg, v.bg)};
|
|
291
290
|
&:hover {
|
|
292
|
-
background: ${t(colors.
|
|
291
|
+
background: ${t(colors.gray[50], colors.darkGray[800])};
|
|
293
292
|
border-color: ${t(v.hover, v.hover)};
|
|
294
293
|
}
|
|
295
294
|
&:active {
|
|
296
|
-
background: ${t(colors.
|
|
295
|
+
background: ${t(colors.gray[100], colors.darkGray[700])};
|
|
297
296
|
border-color: ${t(v.active, v.active)};
|
|
298
297
|
}
|
|
299
298
|
`
|
|
@@ -536,48 +535,45 @@ const stylesFactory = (theme: Theme = 'dark') => {
|
|
|
536
535
|
},
|
|
537
536
|
section: {
|
|
538
537
|
main: css`
|
|
539
|
-
margin-bottom:
|
|
540
|
-
padding:
|
|
538
|
+
margin-bottom: 1.5rem;
|
|
539
|
+
padding: 1rem;
|
|
541
540
|
background-color: ${t(colors.gray[50], colors.darkGray[800])};
|
|
542
|
-
border: 1px solid ${t(colors.gray[
|
|
543
|
-
border-radius: 0.
|
|
544
|
-
box-shadow:
|
|
545
|
-
'0 1px 3px rgba(0,0,0,0.06)',
|
|
546
|
-
'0 1px 3px rgba(0,0,0,0.18)',
|
|
547
|
-
)};
|
|
541
|
+
border: 1px solid ${t(colors.gray[200], colors.gray[800])};
|
|
542
|
+
border-radius: 0.5rem;
|
|
543
|
+
box-shadow: none;
|
|
548
544
|
`,
|
|
549
545
|
title: css`
|
|
550
|
-
font-size:
|
|
546
|
+
font-size: 1rem;
|
|
551
547
|
font-weight: 600;
|
|
552
548
|
color: ${t(colors.gray[900], colors.gray[100])};
|
|
553
|
-
margin: 0 0
|
|
549
|
+
margin: 0 0 0.75rem 0;
|
|
554
550
|
padding-bottom: 0.5rem;
|
|
555
|
-
border-bottom: 1px solid ${t(colors.gray[
|
|
551
|
+
border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};
|
|
556
552
|
display: flex;
|
|
557
553
|
align-items: center;
|
|
558
554
|
gap: 0.5rem;
|
|
559
555
|
text-align: left;
|
|
560
556
|
`,
|
|
561
557
|
icon: css`
|
|
562
|
-
height:
|
|
563
|
-
width:
|
|
558
|
+
height: 18px;
|
|
559
|
+
width: 18px;
|
|
564
560
|
& > svg {
|
|
565
561
|
height: 100%;
|
|
566
562
|
width: 100%;
|
|
567
563
|
}
|
|
568
|
-
color: ${t(colors.
|
|
564
|
+
color: ${t(colors.gray[700], colors.gray[400])};
|
|
569
565
|
`,
|
|
570
566
|
description: css`
|
|
571
567
|
color: ${t(colors.gray[500], colors.gray[400])};
|
|
572
|
-
font-size: 0.
|
|
573
|
-
margin: 0 0
|
|
574
|
-
line-height: 1.
|
|
568
|
+
font-size: 0.8rem;
|
|
569
|
+
margin: 0 0 1rem 0;
|
|
570
|
+
line-height: 1.4;
|
|
575
571
|
text-align: left;
|
|
576
572
|
`,
|
|
577
573
|
},
|
|
578
574
|
mainPanel: {
|
|
579
575
|
panel: (withPadding: boolean) => css`
|
|
580
|
-
padding: ${withPadding ? tokens.size[
|
|
576
|
+
padding: ${withPadding ? tokens.size[3] : 0};
|
|
581
577
|
background: ${t(colors.gray[50], colors.darkGray[700])};
|
|
582
578
|
overflow-y: auto;
|
|
583
579
|
height: 100%;
|