Skip to content

Commit 3be7d9c

Browse files
ardeoraardeora
committed
fix(query-devtools): Inherit font size from parent instead of root
1 parent 23f19fa commit 3be7d9c

File tree

3 files changed

+108
-87
lines changed

3 files changed

+108
-87
lines changed

‎packages/query-devtools/src/Devtools.tsx‎

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -161,8 +161,9 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
161161
)
162162
})
163163

164+
let transitionsContainerRef!: HTMLDivElement
164165
createEffect(() => {
165-
const root = document.querySelector('.tsqd-parent-container') as HTMLElement
166+
const root = transitionsContainerRef.parentElement as HTMLElement
166167
const height = props.localStore.height || DEFAULT_HEIGHT
167168
const width = props.localStore.width || DEFAULT_WIDTH
168169
const panelPosition = position()
@@ -176,6 +177,23 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
176177
)
177178
})
178179

180+
// Calculates the inherited font size of the parent and sets it as a CSS variable
181+
// All the design tokens are calculated based on this variable
182+
onMount(() => {
183+
// This is to make sure that the font size is updated when the stylesheet is updated
184+
// and the user focuses back on the window
185+
const onFocus = () => {
186+
const root = transitionsContainerRef.parentElement as HTMLElement
187+
const fontSize = getComputedStyle(root).fontSize
188+
root.style.setProperty('--tsqd-font-size', fontSize)
189+
}
190+
onFocus()
191+
window.addEventListener('focus', onFocus)
192+
onCleanup(() => {
193+
window.removeEventListener('focus', onFocus)
194+
})
195+
})
196+
179197
return (
180198
<div
181199
// styles for animating the panel in and out
@@ -209,6 +227,7 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
209227
`,
210228
'tsqd-transitions-container',
211229
)}
230+
ref={transitionsContainerRef}
212231
>
213232
<TransitionGroup name="tsqd-panel-transition">
214233
<Show when={isOpen()}>
@@ -1800,7 +1819,7 @@ const QueryDetails = () => {
18001819
</div>
18011820
<div
18021821
style={{
1803-
padding: '0.5rem',
1822+
padding: tokens.size[2],
18041823
}}
18051824
class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"
18061825
>
@@ -1817,7 +1836,7 @@ const QueryDetails = () => {
18171836
</div>
18181837
<div
18191838
style={{
1820-
padding: '0.5rem',
1839+
padding: tokens.size[2],
18211840
}}
18221841
class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
18231842
>
@@ -1935,7 +1954,7 @@ const MutationDetails = () => {
19351954
</div>
19361955
<div
19371956
style={{
1938-
padding: '0.5rem',
1957+
padding: tokens.size[2],
19391958
}}
19401959
class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
19411960
>
@@ -1950,7 +1969,7 @@ const MutationDetails = () => {
19501969
</div>
19511970
<div
19521971
style={{
1953-
padding: '0.5rem',
1972+
padding: tokens.size[2],
19541973
}}
19551974
class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
19561975
>
@@ -1965,7 +1984,7 @@ const MutationDetails = () => {
19651984
</div>
19661985
<div
19671986
style={{
1968-
padding: '0.5rem',
1987+
padding: tokens.size[2],
19691988
}}
19701989
class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
19711990
>
@@ -1980,7 +1999,7 @@ const MutationDetails = () => {
19801999
</div>
19812000
<div
19822001
style={{
1983-
padding: '0.5rem',
2002+
padding: tokens.size[2],
19842003
}}
19852004
class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
19862005
>
@@ -2195,15 +2214,15 @@ const stylesFactory = (theme: 'light' | 'dark') => {
21952214
right: 0;
21962215
left: 0;
21972216
max-height: 90%;
2198-
min-height: 3.5rem;
2217+
min-height: ${size[14]};
21992218
border-bottom: ${t(colors.gray[400], colors.darkGray[300])} 1px solid;
22002219
`,
22012220
'panel-position-bottom': css`
22022221
bottom: 0;
22032222
right: 0;
22042223
left: 0;
22052224
max-height: 90%;
2206-
min-height: 3.5rem;
2225+
min-height: ${size[14]};
22072226
border-top: ${t(colors.gray[400], colors.darkGray[300])} 1px solid;
22082227
`,
22092228
'panel-position-right': css`
@@ -2535,6 +2554,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
25352554
outline: 2px solid ${colors.blue[800]};
25362555
}
25372556
& svg {
2557+
width: ${tokens.size[3]};
2558+
height: ${tokens.size[3]};
25382559
color: ${t(colors.gray[500], colors.gray[400])};
25392560
}
25402561
}
@@ -2620,8 +2641,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
26202641
border-radius: ${tokens.border.radius.sm};
26212642
background-color: ${t(colors.gray[100], colors.darkGray[400])};
26222643
border: 1px solid ${t(colors.gray[300], colors.darkGray[200])};
2623-
width: 1.625rem;
2624-
height: 1.625rem;
2644+
width: ${tokens.size[6.5]};
2645+
height: ${tokens.size[6.5]};
26252646
justify-content: center;
26262647
display: flex;
26272648
align-items: center;

‎packages/query-devtools/src/Explorer.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -517,16 +517,16 @@ const stylesFactory = (theme: 'light' | 'dark') => {
517517
expanderButtonContainer: css`
518518
display: flex;
519519
align-items: center;
520-
line-height: 1.125rem;
521-
min-height: 1.125rem;
520+
line-height: ${size[4]};
521+
min-height: ${size[4]};
522522
gap: ${size[2]};
523523
`,
524524
expanderButton: css`
525525
cursor: pointer;
526526
color: inherit;
527527
font: inherit;
528528
outline: inherit;
529-
height: 1rem;
529+
height: ${size[5]};
530530
background: transparent;
531531
border: none;
532532
padding: 0;
@@ -568,8 +568,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
568568
display: inline-flex;
569569
gap: ${size[2]};
570570
width: 100%;
571-
margin-bottom: ${size[0.5]};
572-
line-height: 1.125rem;
571+
margin: ${size[0.25]} 0px;
572+
line-height: ${size[4.5]};
573573
align-items: center;
574574
`,
575575
editableInput: css`

‎packages/query-devtools/src/theme.ts‎

Lines changed: 71 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -189,35 +189,35 @@ export const tokens = {
189189
},
190190
font: {
191191
size: {
192-
'2xs': '0.625rem',
193-
xs: '0.75rem',
194-
sm: '0.875rem',
195-
md: '1rem',
196-
lg: '1.125rem',
197-
xl: '1.25rem',
198-
'2xl': '1.5rem',
199-
'3xl': '1.875rem',
200-
'4xl': '2.25rem',
201-
'5xl': '3rem',
202-
'6xl': '3.75rem',
203-
'7xl': '4.5rem',
204-
'8xl': '6rem',
205-
'9xl': '8rem',
192+
'2xs': 'calc(var(--tsqd-font-size) * 0.625)',
193+
xs: 'calc(var(--tsqd-font-size) * 0.75)',
194+
sm: 'calc(var(--tsqd-font-size) * 0.875)',
195+
md: 'var(--tsqd-font-size)',
196+
lg: 'calc(var(--tsqd-font-size) * 1.125)',
197+
xl: 'calc(var(--tsqd-font-size) * 1.25)',
198+
'2xl': 'calc(var(--tsqd-font-size) * 1.5)',
199+
'3xl': 'calc(var(--tsqd-font-size) * 1.875)',
200+
'4xl': 'calc(var(--tsqd-font-size) * 2.25)',
201+
'5xl': 'calc(var(--tsqd-font-size) * 3)',
202+
'6xl': 'calc(var(--tsqd-font-size) * 3.75)',
203+
'7xl': 'calc(var(--tsqd-font-size) * 4.5)',
204+
'8xl': 'calc(var(--tsqd-font-size) * 6)',
205+
'9xl': 'calc(var(--tsqd-font-size) * 8)',
206206
},
207207
lineHeight: {
208-
xs: '1rem',
209-
sm: '1.25rem',
210-
md: '1.5rem',
211-
lg: '1.75rem',
212-
xl: '1.75rem',
213-
'2xl': '2rem',
214-
'3xl': '2.25rem',
215-
'4xl': '2.5rem',
216-
'5xl': '1',
217-
'6xl': '1',
218-
'7xl': '1',
219-
'8xl': '1',
220-
'9xl': '1',
208+
xs: 'calc(var(--tsqd-font-size) * 1)',
209+
sm: 'calc(var(--tsqd-font-size) * 1.25)',
210+
md: 'calc(var(--tsqd-font-size) * 1.5)',
211+
lg: 'calc(var(--tsqd-font-size) * 1.75)',
212+
xl: 'calc(var(--tsqd-font-size) * 2)',
213+
'2xl': 'calc(var(--tsqd-font-size) * 2.25)',
214+
'3xl': 'calc(var(--tsqd-font-size) * 2.5)',
215+
'4xl': 'calc(var(--tsqd-font-size) * 2.75)',
216+
'5xl': 'calc(var(--tsqd-font-size) * 3)',
217+
'6xl': 'calc(var(--tsqd-font-size) * 3.25)',
218+
'7xl': 'calc(var(--tsqd-font-size) * 3.5)',
219+
'8xl': 'calc(var(--tsqd-font-size) * 3.75)',
220+
'9xl': 'calc(var(--tsqd-font-size) * 4)',
221221
},
222222
weight: {
223223
thin: '100',
@@ -242,55 +242,55 @@ export const tokens = {
242242
border: {
243243
radius: {
244244
none: '0px',
245-
xs: '0.125rem',
246-
sm: '0.25rem',
247-
md: '0.375rem',
248-
lg: '0.5rem',
249-
xl: '0.75rem',
250-
'2xl': '1rem',
251-
'3xl': '1.5rem',
245+
xs: 'calc(var(--tsqd-font-size) * 0.125)',
246+
sm: 'calc(var(--tsqd-font-size) * 0.25)',
247+
md: 'calc(var(--tsqd-font-size) * 0.375)',
248+
lg: 'calc(var(--tsqd-font-size) * 0.5)',
249+
xl: 'calc(var(--tsqd-font-size) * 0.75)',
250+
'2xl': 'calc(var(--tsqd-font-size) * 1)',
251+
'3xl': 'calc(var(--tsqd-font-size) * 1.5)',
252252
full: '9999px',
253253
},
254254
},
255255
size: {
256256
0: '0px',
257-
0.25: '0.0625rem',
258-
0.5: '0.125rem',
259-
1: '0.25rem',
260-
1.5: '0.375rem',
261-
2: '0.5rem',
262-
2.5: '0.625rem',
263-
3: '0.75rem',
264-
3.5: '0.875rem',
265-
4: '1rem',
266-
4.5: '1.125rem',
267-
5: '1.25rem',
268-
5.5: '1.375rem',
269-
6: '1.5rem',
270-
6.5: '1.625rem',
271-
7: '1.75rem',
272-
8: '2rem',
273-
9: '2.25rem',
274-
10: '2.5rem',
275-
11: '2.75rem',
276-
12: '3rem',
277-
14: '3.5rem',
278-
16: '4rem',
279-
20: '5rem',
280-
24: '6rem',
281-
28: '7rem',
282-
32: '8rem',
283-
36: '9rem',
284-
40: '10rem',
285-
44: '11rem',
286-
48: '12rem',
287-
52: '13rem',
288-
56: '14rem',
289-
60: '15rem',
290-
64: '16rem',
291-
72: '18rem',
292-
80: '20rem',
293-
96: '24rem',
257+
0.25: 'calc(var(--tsqd-font-size) * 0.0625)',
258+
0.5: 'calc(var(--tsqd-font-size) * 0.125)',
259+
1: 'calc(var(--tsqd-font-size) * 0.25)',
260+
1.5: 'calc(var(--tsqd-font-size) * 0.375)',
261+
2: 'calc(var(--tsqd-font-size) * 0.5)',
262+
2.5: 'calc(var(--tsqd-font-size) * 0.625)',
263+
3: 'calc(var(--tsqd-font-size) * 0.75)',
264+
3.5: 'calc(var(--tsqd-font-size) * 0.875)',
265+
4: 'calc(var(--tsqd-font-size) * 1)',
266+
4.5: 'calc(var(--tsqd-font-size) * 1.125)',
267+
5: 'calc(var(--tsqd-font-size) * 1.25)',
268+
5.5: 'calc(var(--tsqd-font-size) * 1.375)',
269+
6: 'calc(var(--tsqd-font-size) * 1.5)',
270+
6.5: 'calc(var(--tsqd-font-size) * 1.625)',
271+
7: 'calc(var(--tsqd-font-size) * 1.75)',
272+
8: 'calc(var(--tsqd-font-size) * 2)',
273+
9: 'calc(var(--tsqd-font-size) * 2.25)',
274+
10: 'calc(var(--tsqd-font-size) * 2.5)',
275+
11: 'calc(var(--tsqd-font-size) * 2.75)',
276+
12: 'calc(var(--tsqd-font-size) * 3)',
277+
14: 'calc(var(--tsqd-font-size) * 3.5)',
278+
16: 'calc(var(--tsqd-font-size) * 4)',
279+
20: 'calc(var(--tsqd-font-size) * 5)',
280+
24: 'calc(var(--tsqd-font-size) * 6)',
281+
28: 'calc(var(--tsqd-font-size) * 7)',
282+
32: 'calc(var(--tsqd-font-size) * 8)',
283+
36: 'calc(var(--tsqd-font-size) * 9)',
284+
40: 'calc(var(--tsqd-font-size) * 10)',
285+
44: 'calc(var(--tsqd-font-size) * 11)',
286+
48: 'calc(var(--tsqd-font-size) * 12)',
287+
52: 'calc(var(--tsqd-font-size) * 13)',
288+
56: 'calc(var(--tsqd-font-size) * 14)',
289+
60: 'calc(var(--tsqd-font-size) * 15)',
290+
64: 'calc(var(--tsqd-font-size) * 16)',
291+
72: 'calc(var(--tsqd-font-size) * 18)',
292+
80: 'calc(var(--tsqd-font-size) * 20)',
293+
96: 'calc(var(--tsqd-font-size) * 24)',
294294
},
295295
shadow: Shadow,
296296
zIndices: {

0 commit comments

Comments
 (0)