Skip to content

Commit b2f8944

Browse files
AlemTuzlakAlemTuzlak
authored
Make UI more aligned with devtools website (#211)
1 parent 9c38280 commit b2f8944

File tree

3 files changed

+130
-116
lines changed

3 files changed

+130
-116
lines changed

‎.changeset/pretty-news-smell.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@tanstack/devtools-ui': patch
3+
'@tanstack/devtools': patch
4+
---
5+
6+
update UI appearance

‎packages/devtools-ui/src/styles/use-styles.ts‎

Lines changed: 59 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,18 @@ const buttonVariantColors: Record<
1010
{ bg: string; hover: string; active: string; text: string; border: string }
1111
> = {
1212
primary: {
13-
bg: tokens.colors.purple[500],
14-
hover: tokens.colors.purple[600],
15-
active: tokens.colors.purple[700],
13+
bg: tokens.colors.gray[900],
14+
hover: tokens.colors.gray[800],
15+
active: tokens.colors.gray[700],
1616
text: '#fff',
17-
border: tokens.colors.purple[500],
17+
border: tokens.colors.gray[900],
1818
},
1919
secondary: {
20-
bg: tokens.colors.gray[800],
21-
hover: tokens.colors.gray[700],
22-
active: tokens.colors.gray[600],
23-
text: tokens.colors.gray[100],
24-
border: tokens.colors.gray[700],
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],
2525
},
2626
info: {
2727
bg: tokens.colors.blue[500],
@@ -54,7 +54,7 @@ const buttonVariantColors: Record<
5454
}
5555
export const css = goober.css
5656
const stylesFactory = (theme: Theme = 'dark') => {
57-
const { colors, font, size, alpha, border } = tokens
57+
const { colors, font, size, border } = tokens
5858
const { fontFamily } = font
5959

6060
const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
@@ -104,13 +104,13 @@ const stylesFactory = (theme: Theme = 'dark') => {
104104
select: css`
105105
appearance: none;
106106
width: 100%;
107-
padding: 0.75rem 3rem 0.75rem 0.75rem;
108-
border-radius: 0.5rem;
107+
padding: 0.5rem 3rem 0.5rem 0.75rem;
108+
border-radius: 0.375rem;
109109
background-color: ${t(colors.gray[50], colors.darkGray[800])};
110110
color: ${t(colors.gray[900], colors.gray[100])};
111-
border: 1px solid ${t(colors.gray[300], colors.gray[700])};
111+
border: 1px solid ${t(colors.gray[200], colors.gray[800])};
112112
font-size: 0.875rem;
113-
transition: all 0.2s ease;
113+
transition: all 0.15s ease;
114114
cursor: pointer;
115115
116116
/* Custom arrow */
@@ -120,13 +120,13 @@ const stylesFactory = (theme: Theme = 'dark') => {
120120
background-size: 1.25rem;
121121
122122
&:hover {
123-
border-color: ${t(colors.gray[400], colors.gray[600])};
123+
border-color: ${t(colors.gray[300], colors.gray[700])};
124124
}
125125
126126
&:focus {
127127
outline: none;
128-
border-color: ${colors.purple[400]};
129-
box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
128+
border-color: ${colors.gray[400]};
129+
box-shadow: 0 0 0 3px ${t(colors.gray[200], colors.gray[800])};
130130
}
131131
`,
132132
inputWrapper: css`
@@ -156,28 +156,27 @@ const stylesFactory = (theme: Theme = 'dark') => {
156156
appearance: none;
157157
box-sizing: border-box;
158158
width: 100%;
159-
padding: 0.75rem;
160-
border-radius: 0.5rem;
159+
padding: 0.5rem 0.75rem;
160+
border-radius: 0.375rem;
161161
background-color: ${t(colors.gray[50], colors.darkGray[800])};
162162
color: ${t(colors.gray[900], colors.gray[100])};
163-
border: 1px solid ${t(colors.gray[300], colors.gray[700])};
163+
border: 1px solid ${t(colors.gray[200], colors.gray[800])};
164164
font-size: 0.875rem;
165165
font-family: ${fontFamily.mono};
166-
transition: all 0.2s ease;
166+
transition: all 0.15s ease;
167167
168168
&::placeholder {
169169
color: ${t(colors.gray[400], colors.gray[500])};
170170
}
171171
172172
&:hover {
173-
border-color: ${t(colors.gray[400], colors.gray[600])};
173+
border-color: ${t(colors.gray[300], colors.gray[700])};
174174
}
175175
176176
&:focus {
177177
outline: none;
178-
border-color: ${t(colors.purple[500], colors.purple[400])};
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])};
181180
}
182181
`,
183182
checkboxWrapper: css`
@@ -186,12 +185,12 @@ const stylesFactory = (theme: Theme = 'dark') => {
186185
gap: 0.75rem;
187186
cursor: pointer;
188187
user-select: none;
189-
padding: 0.5rem;
190-
border-radius: 0.5rem;
191-
transition: background-color 0.2s ease;
188+
padding: 0.375rem;
189+
border-radius: 0.375rem;
190+
transition: background-color 0.15s ease;
192191
193192
&:hover {
194-
background-color: ${t(colors.gray[100], colors.darkGray[800])};
193+
background-color: ${t(colors.gray[50], colors.darkGray[900])};
195194
}
196195
`,
197196
checkboxContainer: css`
@@ -208,28 +207,28 @@ const stylesFactory = (theme: Theme = 'dark') => {
208207
width: 1.25rem;
209208
height: 1.25rem;
210209
border: 2px solid ${t(colors.gray[300], colors.gray[700])};
211-
border-radius: 0.375rem;
210+
border-radius: 0.25rem;
212211
background-color: ${t(colors.gray[50], colors.darkGray[800])};
213212
display: grid;
214213
place-items: center;
215-
transition: all 0.2s ease;
214+
transition: all 0.15s ease;
216215
flex-shrink: 0;
217216
margin-top: 0.125rem;
218217
219218
&:hover {
220-
border-color: ${t(colors.purple[500], colors.purple[400])};
219+
border-color: ${t(colors.gray[400], colors.gray[600])};
221220
}
222221
223222
&:checked {
224-
background-color: ${t(colors.purple[500], colors.purple[700])};
225-
border-color: ${t(colors.purple[500], colors.purple[700])};
223+
background-color: ${t(colors.gray[900], colors.gray[100])};
224+
border-color: ${t(colors.gray[900], colors.gray[100])};
226225
}
227226
228227
&:checked::after {
229228
content: '';
230229
width: 0.4rem;
231230
height: 0.6rem;
232-
border: solid ${t('#fff', colors.gray[100])};
231+
border: solid ${t('#fff', colors.gray[900])};
233232
border-width: 0 2px 2px 0;
234233
transform: rotate(45deg);
235234
margin-top: -3px;
@@ -256,14 +255,14 @@ const stylesFactory = (theme: Theme = 'dark') => {
256255
font-family: ${tokens.font.fontFamily.sans};
257256
font-size: 0.8rem;
258257
font-weight: 500;
259-
border-radius: 0.2rem;
260-
padding: 0.2rem 0.6rem;
258+
border-radius: 0.375rem;
259+
padding: 0.375rem 0.75rem;
261260
cursor: pointer;
262261
transition:
263-
background 0.2s,
264-
color 0.2s,
265-
border 0.2s,
266-
box-shadow 0.2s;
262+
background 0.15s,
263+
color 0.15s,
264+
border 0.15s,
265+
box-shadow 0.15s;
267266
outline: none;
268267
border-width: 1px;
269268
border-style: solid;
@@ -276,10 +275,10 @@ const stylesFactory = (theme: Theme = 'dark') => {
276275
color: ${t(v.bg, v.bg)};
277276
border-color: transparent;
278277
&:hover {
279-
background: ${t(colors.purple[100], colors.darkGray[700])};
278+
background: ${t(colors.gray[100], colors.darkGray[800])};
280279
}
281280
&:active {
282-
background: ${t(colors.purple[200], colors.darkGray[800])};
281+
background: ${t(colors.gray[200], colors.darkGray[700])};
283282
}
284283
`
285284
}
@@ -289,11 +288,11 @@ const stylesFactory = (theme: Theme = 'dark') => {
289288
color: ${t(v.bg, v.bg)};
290289
border-color: ${t(v.bg, v.bg)};
291290
&:hover {
292-
background: ${t(colors.purple[100], colors.darkGray[700])};
291+
background: ${t(colors.gray[50], colors.darkGray[800])};
293292
border-color: ${t(v.hover, v.hover)};
294293
}
295294
&:active {
296-
background: ${t(colors.purple[200], colors.darkGray[800])};
295+
background: ${t(colors.gray[100], colors.darkGray[700])};
297296
border-color: ${t(v.active, v.active)};
298297
}
299298
`
@@ -536,48 +535,45 @@ const stylesFactory = (theme: Theme = 'dark') => {
536535
},
537536
section: {
538537
main: css`
539-
margin-bottom: 2rem;
540-
padding: 1.5rem;
538+
margin-bottom: 1.5rem;
539+
padding: 1rem;
541540
background-color: ${t(colors.gray[50], colors.darkGray[800])};
542-
border: 1px solid ${t(colors.gray[300], colors.gray[700])};
543-
border-radius: 0.75rem;
544-
box-shadow: ${t(
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;
548544
`,
549545
title: css`
550-
font-size: 1.125rem;
546+
font-size: 1rem;
551547
font-weight: 600;
552548
color: ${t(colors.gray[900], colors.gray[100])};
553-
margin: 0 0 1rem 0;
549+
margin: 0 0 0.75rem 0;
554550
padding-bottom: 0.5rem;
555-
border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};
551+
border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};
556552
display: flex;
557553
align-items: center;
558554
gap: 0.5rem;
559555
text-align: left;
560556
`,
561557
icon: css`
562-
height: 20px;
563-
width: 20px;
558+
height: 18px;
559+
width: 18px;
564560
& > svg {
565561
height: 100%;
566562
width: 100%;
567563
}
568-
color: ${t(colors.purple[500], colors.purple[400])};
564+
color: ${t(colors.gray[700], colors.gray[400])};
569565
`,
570566
description: css`
571567
color: ${t(colors.gray[500], colors.gray[400])};
572-
font-size: 0.875rem;
573-
margin: 0 0 1.5rem 0;
574-
line-height: 1.5;
568+
font-size: 0.8rem;
569+
margin: 0 0 1rem 0;
570+
line-height: 1.4;
575571
text-align: left;
576572
`,
577573
},
578574
mainPanel: {
579575
panel: (withPadding: boolean) => css`
580-
padding: ${withPadding ? tokens.size[4] : 0};
576+
padding: ${withPadding ? tokens.size[3] : 0};
581577
background: ${t(colors.gray[50], colors.darkGray[700])};
582578
overflow-y: auto;
583579
height: 100%;

0 commit comments

Comments
 (0)