Skip to content

Commit e2a3ebd

Browse files
ardeoraardeora
authored
fix(query-devtools): Inherit font size from parent instead of root (#6246)
This change allows setting a custom font size for the query devtools. The value is inherited from it's parent container
1 parent 23f19fa commit e2a3ebd

File tree

3 files changed

+126
-90
lines changed

3 files changed

+126
-90
lines changed

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

Lines changed: 50 additions & 14 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()}>
@@ -444,6 +463,7 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
444463
setupQueryCacheSubscription()
445464
setupMutationCacheSubscription()
446465

466+
let containerRef!: HTMLDivElement
447467
const theme = useTheme()
448468
const styles = createMemo(() => {
449469
return theme() === 'dark' ? darkStyles : lightStyles
@@ -553,6 +573,13 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
553573
props.setLocalStore('position', pos)
554574
}
555575

576+
// Sets the Font Size variable on portal menu elements since they will be outside
577+
// the main panel container
578+
const setComputedVariables = (el: HTMLDivElement) => {
579+
const computedStyle = getComputedStyle(containerRef)
580+
const variable = computedStyle.getPropertyValue('--tsqd-font-size')
581+
el.style.setProperty('--tsqd-font-size', variable)
582+
}
556583
return (
557584
<>
558585
<div
@@ -568,6 +595,7 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
568595
`,
569596
'tsqd-queries-container',
570597
)}
598+
ref={containerRef}
571599
>
572600
<div class={cx(styles().row, 'tsqd-header')}>
573601
<div class={styles().logoAndToggleContainer}>
@@ -796,7 +824,9 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
796824
>
797825
<Settings />
798826
</DropdownMenu.Trigger>
799-
<DropdownMenu.Portal>
827+
<DropdownMenu.Portal
828+
ref={(el) => setComputedVariables(el as HTMLDivElement)}
829+
>
800830
<DropdownMenu.Content
801831
class={cx(styles().settingsMenu, 'tsqd-settings-menu')}
802832
>
@@ -819,7 +849,9 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
819849
<span>Position</span>
820850
<ChevronDown />
821851
</DropdownMenu.SubTrigger>
822-
<DropdownMenu.Portal>
852+
<DropdownMenu.Portal
853+
ref={(el) => setComputedVariables(el as HTMLDivElement)}
854+
>
823855
<DropdownMenu.SubContent
824856
class={cx(
825857
styles().settingsMenu,
@@ -896,7 +928,9 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
896928
<span>Theme</span>
897929
<ChevronDown />
898930
</DropdownMenu.SubTrigger>
899-
<DropdownMenu.Portal>
931+
<DropdownMenu.Portal
932+
ref={(el) => setComputedVariables(el as HTMLDivElement)}
933+
>
900934
<DropdownMenu.SubContent
901935
class={cx(
902936
styles().settingsMenu,
@@ -1800,7 +1834,7 @@ const QueryDetails = () => {
18001834
</div>
18011835
<div
18021836
style={{
1803-
padding: '0.5rem',
1837+
padding: tokens.size[2],
18041838
}}
18051839
class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"
18061840
>
@@ -1817,7 +1851,7 @@ const QueryDetails = () => {
18171851
</div>
18181852
<div
18191853
style={{
1820-
padding: '0.5rem',
1854+
padding: tokens.size[2],
18211855
}}
18221856
class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
18231857
>
@@ -1935,7 +1969,7 @@ const MutationDetails = () => {
19351969
</div>
19361970
<div
19371971
style={{
1938-
padding: '0.5rem',
1972+
padding: tokens.size[2],
19391973
}}
19401974
class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
19411975
>
@@ -1950,7 +1984,7 @@ const MutationDetails = () => {
19501984
</div>
19511985
<div
19521986
style={{
1953-
padding: '0.5rem',
1987+
padding: tokens.size[2],
19541988
}}
19551989
class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
19561990
>
@@ -1965,7 +1999,7 @@ const MutationDetails = () => {
19651999
</div>
19662000
<div
19672001
style={{
1968-
padding: '0.5rem',
2002+
padding: tokens.size[2],
19692003
}}
19702004
class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
19712005
>
@@ -1980,7 +2014,7 @@ const MutationDetails = () => {
19802014
</div>
19812015
<div
19822016
style={{
1983-
padding: '0.5rem',
2017+
padding: tokens.size[2],
19842018
}}
19852019
class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
19862020
>
@@ -2195,15 +2229,15 @@ const stylesFactory = (theme: 'light' | 'dark') => {
21952229
right: 0;
21962230
left: 0;
21972231
max-height: 90%;
2198-
min-height: 3.5rem;
2232+
min-height: ${size[14]};
21992233
border-bottom: ${t(colors.gray[400], colors.darkGray[300])} 1px solid;
22002234
`,
22012235
'panel-position-bottom': css`
22022236
bottom: 0;
22032237
right: 0;
22042238
left: 0;
22052239
max-height: 90%;
2206-
min-height: 3.5rem;
2240+
min-height: ${size[14]};
22072241
border-top: ${t(colors.gray[400], colors.darkGray[300])} 1px solid;
22082242
`,
22092243
'panel-position-right': css`
@@ -2535,6 +2569,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
25352569
outline: 2px solid ${colors.blue[800]};
25362570
}
25372571
& svg {
2572+
width: ${tokens.size[3]};
2573+
height: ${tokens.size[3]};
25382574
color: ${t(colors.gray[500], colors.gray[400])};
25392575
}
25402576
}
@@ -2620,8 +2656,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
26202656
border-radius: ${tokens.border.radius.sm};
26212657
background-color: ${t(colors.gray[100], colors.darkGray[400])};
26222658
border: 1px solid ${t(colors.gray[300], colors.darkGray[200])};
2623-
width: 1.625rem;
2624-
height: 1.625rem;
2659+
width: ${tokens.size[6.5]};
2660+
height: ${tokens.size[6.5]};
26252661
justify-content: center;
26262662
display: flex;
26272663
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)