@tanstack/query-devtools 5.1.0 → 5.4.2

package/src/Devtools.tsx

@@ -161,8 +161,9 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
     )
   })
 
+  let transitionsContainerRef!: HTMLDivElement
   createEffect(() => {
-    const root = document.querySelector('.tsqd-parent-container') as HTMLElement
+    const root = transitionsContainerRef.parentElement as HTMLElement
     const height = props.localStore.height || DEFAULT_HEIGHT
     const width = props.localStore.width || DEFAULT_WIDTH
     const panelPosition = position()
@@ -176,6 +177,23 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
     )
   })
 
+  // Calculates the inherited font size of the parent and sets it as a CSS variable
+  // All the design tokens are calculated based on this variable
+  onMount(() => {
+    // This is to make sure that the font size is updated when the stylesheet is updated
+    // and the user focuses back on the window
+    const onFocus = () => {
+      const root = transitionsContainerRef.parentElement as HTMLElement
+      const fontSize = getComputedStyle(root).fontSize
+      root.style.setProperty('--tsqd-font-size', fontSize)
+    }
+    onFocus()
+    window.addEventListener('focus', onFocus)
+    onCleanup(() => {
+      window.removeEventListener('focus', onFocus)
+    })
+  })
+
   return (
     <div
       // styles for animating the panel in and out
@@ -209,6 +227,7 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
         `,
         'tsqd-transitions-container',
       )}
+      ref={transitionsContainerRef}
     >
       <TransitionGroup name="tsqd-panel-transition">
         <Show when={isOpen()}>
@@ -444,6 +463,7 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
   setupQueryCacheSubscription()
   setupMutationCacheSubscription()
 
+  let containerRef!: HTMLDivElement
   const theme = useTheme()
   const styles = createMemo(() => {
     return theme() === 'dark' ? darkStyles : lightStyles
@@ -553,6 +573,13 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
     props.setLocalStore('position', pos)
   }
 
+  // Sets the Font Size variable on portal menu elements since they will be outside
+  // the main panel container
+  const setComputedVariables = (el: HTMLDivElement) => {
+    const computedStyle = getComputedStyle(containerRef)
+    const variable = computedStyle.getPropertyValue('--tsqd-font-size')
+    el.style.setProperty('--tsqd-font-size', variable)
+  }
   return (
     <>
       <div
@@ -568,6 +595,7 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
             `,
           'tsqd-queries-container',
         )}
+        ref={containerRef}
       >
         <div class={cx(styles().row, 'tsqd-header')}>
           <div class={styles().logoAndToggleContainer}>
@@ -796,7 +824,9 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
               >
                 <Settings />
               </DropdownMenu.Trigger>
-              <DropdownMenu.Portal>
+              <DropdownMenu.Portal
+                ref={(el) => setComputedVariables(el as HTMLDivElement)}
+              >
                 <DropdownMenu.Content
                   class={cx(styles().settingsMenu, 'tsqd-settings-menu')}
                 >
@@ -819,7 +849,9 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
                       <span>Position</span>
                       <ChevronDown />
                     </DropdownMenu.SubTrigger>
-                    <DropdownMenu.Portal>
+                    <DropdownMenu.Portal
+                      ref={(el) => setComputedVariables(el as HTMLDivElement)}
+                    >
                       <DropdownMenu.SubContent
                         class={cx(
                           styles().settingsMenu,
@@ -896,7 +928,9 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
                       <span>Theme</span>
                       <ChevronDown />
                     </DropdownMenu.SubTrigger>
-                    <DropdownMenu.Portal>
+                    <DropdownMenu.Portal
+                      ref={(el) => setComputedVariables(el as HTMLDivElement)}
+                    >
                       <DropdownMenu.SubContent
                         class={cx(
                           styles().settingsMenu,
@@ -1800,7 +1834,7 @@ const QueryDetails = () => {
         </div>
         <div
           style={{
-            padding: '0.5rem',
+            padding: tokens.size[2],
           }}
           class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"
         >
@@ -1817,7 +1851,7 @@ const QueryDetails = () => {
         </div>
         <div
           style={{
-            padding: '0.5rem',
+            padding: tokens.size[2],
           }}
           class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
         >
@@ -1935,7 +1969,7 @@ const MutationDetails = () => {
         </div>
         <div
           style={{
-            padding: '0.5rem',
+            padding: tokens.size[2],
           }}
           class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
         >
@@ -1950,7 +1984,7 @@ const MutationDetails = () => {
         </div>
         <div
           style={{
-            padding: '0.5rem',
+            padding: tokens.size[2],
           }}
           class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
         >
@@ -1965,7 +1999,7 @@ const MutationDetails = () => {
         </div>
         <div
           style={{
-            padding: '0.5rem',
+            padding: tokens.size[2],
           }}
           class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
         >
@@ -1980,7 +2014,7 @@ const MutationDetails = () => {
         </div>
         <div
           style={{
-            padding: '0.5rem',
+            padding: tokens.size[2],
           }}
           class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
         >
@@ -2195,7 +2229,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       right: 0;
       left: 0;
       max-height: 90%;
-      min-height: 3.5rem;
+      min-height: ${size[14]};
       border-bottom: ${t(colors.gray[400], colors.darkGray[300])} 1px solid;
     `,
     'panel-position-bottom': css`
@@ -2203,7 +2237,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       right: 0;
       left: 0;
       max-height: 90%;
-      min-height: 3.5rem;
+      min-height: ${size[14]};
       border-top: ${t(colors.gray[400], colors.darkGray[300])} 1px solid;
     `,
     'panel-position-right': css`
@@ -2535,6 +2569,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
           outline: 2px solid ${colors.blue[800]};
         }
         & svg {
+          width: ${tokens.size[3]};
+          height: ${tokens.size[3]};
           color: ${t(colors.gray[500], colors.gray[400])};
         }
       }
@@ -2620,8 +2656,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       border-radius: ${tokens.border.radius.sm};
       background-color: ${t(colors.gray[100], colors.darkGray[400])};
       border: 1px solid ${t(colors.gray[300], colors.darkGray[200])};
-      width: 1.625rem;
-      height: 1.625rem;
+      width: ${tokens.size[6.5]};
+      height: ${tokens.size[6.5]};
       justify-content: center;
       display: flex;
       align-items: center;

package/src/Explorer.tsx

@@ -517,8 +517,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
     expanderButtonContainer: css`
       display: flex;
       align-items: center;
-      line-height: 1.125rem;
-      min-height: 1.125rem;
+      line-height: ${size[4]};
+      min-height: ${size[4]};
       gap: ${size[2]};
     `,
     expanderButton: css`
@@ -526,7 +526,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       color: inherit;
       font: inherit;
       outline: inherit;
-      height: 1rem;
+      height: ${size[5]};
       background: transparent;
       border: none;
       padding: 0;
@@ -568,8 +568,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       display: inline-flex;
       gap: ${size[2]};
       width: 100%;
-      margin-bottom: ${size[0.5]};
-      line-height: 1.125rem;
+      margin: ${size[0.25]} 0px;
+      line-height: ${size[4.5]};
       align-items: center;
     `,
     editableInput: css`

package/src/theme.ts

@@ -189,35 +189,35 @@ export const tokens = {
   },
   font: {
     size: {
-      '2xs': '0.625rem',
-      xs: '0.75rem',
-      sm: '0.875rem',
-      md: '1rem',
-      lg: '1.125rem',
-      xl: '1.25rem',
-      '2xl': '1.5rem',
-      '3xl': '1.875rem',
-      '4xl': '2.25rem',
-      '5xl': '3rem',
-      '6xl': '3.75rem',
-      '7xl': '4.5rem',
-      '8xl': '6rem',
-      '9xl': '8rem',
+      '2xs': 'calc(var(--tsqd-font-size) * 0.625)',
+      xs: 'calc(var(--tsqd-font-size) * 0.75)',
+      sm: 'calc(var(--tsqd-font-size) * 0.875)',
+      md: 'var(--tsqd-font-size)',
+      lg: 'calc(var(--tsqd-font-size) * 1.125)',
+      xl: 'calc(var(--tsqd-font-size) * 1.25)',
+      '2xl': 'calc(var(--tsqd-font-size) * 1.5)',
+      '3xl': 'calc(var(--tsqd-font-size) * 1.875)',
+      '4xl': 'calc(var(--tsqd-font-size) * 2.25)',
+      '5xl': 'calc(var(--tsqd-font-size) * 3)',
+      '6xl': 'calc(var(--tsqd-font-size) * 3.75)',
+      '7xl': 'calc(var(--tsqd-font-size) * 4.5)',
+      '8xl': 'calc(var(--tsqd-font-size) * 6)',
+      '9xl': 'calc(var(--tsqd-font-size) * 8)',
     },
     lineHeight: {
-      xs: '1rem',
-      sm: '1.25rem',
-      md: '1.5rem',
-      lg: '1.75rem',
-      xl: '1.75rem',
-      '2xl': '2rem',
-      '3xl': '2.25rem',
-      '4xl': '2.5rem',
-      '5xl': '1',
-      '6xl': '1',
-      '7xl': '1',
-      '8xl': '1',
-      '9xl': '1',
+      xs: 'calc(var(--tsqd-font-size) * 1)',
+      sm: 'calc(var(--tsqd-font-size) * 1.25)',
+      md: 'calc(var(--tsqd-font-size) * 1.5)',
+      lg: 'calc(var(--tsqd-font-size) * 1.75)',
+      xl: 'calc(var(--tsqd-font-size) * 2)',
+      '2xl': 'calc(var(--tsqd-font-size) * 2.25)',
+      '3xl': 'calc(var(--tsqd-font-size) * 2.5)',
+      '4xl': 'calc(var(--tsqd-font-size) * 2.75)',
+      '5xl': 'calc(var(--tsqd-font-size) * 3)',
+      '6xl': 'calc(var(--tsqd-font-size) * 3.25)',
+      '7xl': 'calc(var(--tsqd-font-size) * 3.5)',
+      '8xl': 'calc(var(--tsqd-font-size) * 3.75)',
+      '9xl': 'calc(var(--tsqd-font-size) * 4)',
     },
     weight: {
       thin: '100',
@@ -242,55 +242,55 @@ export const tokens = {
   border: {
     radius: {
       none: '0px',
-      xs: '0.125rem',
-      sm: '0.25rem',
-      md: '0.375rem',
-      lg: '0.5rem',
-      xl: '0.75rem',
-      '2xl': '1rem',
-      '3xl': '1.5rem',
+      xs: 'calc(var(--tsqd-font-size) * 0.125)',
+      sm: 'calc(var(--tsqd-font-size) * 0.25)',
+      md: 'calc(var(--tsqd-font-size) * 0.375)',
+      lg: 'calc(var(--tsqd-font-size) * 0.5)',
+      xl: 'calc(var(--tsqd-font-size) * 0.75)',
+      '2xl': 'calc(var(--tsqd-font-size) * 1)',
+      '3xl': 'calc(var(--tsqd-font-size) * 1.5)',
       full: '9999px',
     },
   },
   size: {
     0: '0px',
-    0.25: '0.0625rem',
-    0.5: '0.125rem',
-    1: '0.25rem',
-    1.5: '0.375rem',
-    2: '0.5rem',
-    2.5: '0.625rem',
-    3: '0.75rem',
-    3.5: '0.875rem',
-    4: '1rem',
-    4.5: '1.125rem',
-    5: '1.25rem',
-    5.5: '1.375rem',
-    6: '1.5rem',
-    6.5: '1.625rem',
-    7: '1.75rem',
-    8: '2rem',
-    9: '2.25rem',
-    10: '2.5rem',
-    11: '2.75rem',
-    12: '3rem',
-    14: '3.5rem',
-    16: '4rem',
-    20: '5rem',
-    24: '6rem',
-    28: '7rem',
-    32: '8rem',
-    36: '9rem',
-    40: '10rem',
-    44: '11rem',
-    48: '12rem',
-    52: '13rem',
-    56: '14rem',
-    60: '15rem',
-    64: '16rem',
-    72: '18rem',
-    80: '20rem',
-    96: '24rem',
+    0.25: 'calc(var(--tsqd-font-size) * 0.0625)',
+    0.5: 'calc(var(--tsqd-font-size) * 0.125)',
+    1: 'calc(var(--tsqd-font-size) * 0.25)',
+    1.5: 'calc(var(--tsqd-font-size) * 0.375)',
+    2: 'calc(var(--tsqd-font-size) * 0.5)',
+    2.5: 'calc(var(--tsqd-font-size) * 0.625)',
+    3: 'calc(var(--tsqd-font-size) * 0.75)',
+    3.5: 'calc(var(--tsqd-font-size) * 0.875)',
+    4: 'calc(var(--tsqd-font-size) * 1)',
+    4.5: 'calc(var(--tsqd-font-size) * 1.125)',
+    5: 'calc(var(--tsqd-font-size) * 1.25)',
+    5.5: 'calc(var(--tsqd-font-size) * 1.375)',
+    6: 'calc(var(--tsqd-font-size) * 1.5)',
+    6.5: 'calc(var(--tsqd-font-size) * 1.625)',
+    7: 'calc(var(--tsqd-font-size) * 1.75)',
+    8: 'calc(var(--tsqd-font-size) * 2)',
+    9: 'calc(var(--tsqd-font-size) * 2.25)',
+    10: 'calc(var(--tsqd-font-size) * 2.5)',
+    11: 'calc(var(--tsqd-font-size) * 2.75)',
+    12: 'calc(var(--tsqd-font-size) * 3)',
+    14: 'calc(var(--tsqd-font-size) * 3.5)',
+    16: 'calc(var(--tsqd-font-size) * 4)',
+    20: 'calc(var(--tsqd-font-size) * 5)',
+    24: 'calc(var(--tsqd-font-size) * 6)',
+    28: 'calc(var(--tsqd-font-size) * 7)',
+    32: 'calc(var(--tsqd-font-size) * 8)',
+    36: 'calc(var(--tsqd-font-size) * 9)',
+    40: 'calc(var(--tsqd-font-size) * 10)',
+    44: 'calc(var(--tsqd-font-size) * 11)',
+    48: 'calc(var(--tsqd-font-size) * 12)',
+    52: 'calc(var(--tsqd-font-size) * 13)',
+    56: 'calc(var(--tsqd-font-size) * 14)',
+    60: 'calc(var(--tsqd-font-size) * 15)',
+    64: 'calc(var(--tsqd-font-size) * 16)',
+    72: 'calc(var(--tsqd-font-size) * 18)',
+    80: 'calc(var(--tsqd-font-size) * 20)',
+    96: 'calc(var(--tsqd-font-size) * 24)',
   },
   shadow: Shadow,
   zIndices: {