chore: unify types

Author: harry-whorlow

examples/solid/devtools-ui/src/index.tsx

@@ -1,8 +1,9 @@
 import { createEffect, createSignal } from 'solid-js'
 import { render } from 'solid-js/web'
-
 import { JsonTree, ThemeContextProvider } from '@tanstack/devtools-ui'
 
+import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
+
 import './index.css'
 
 const JsonTreeDate = {
@@ -20,7 +21,7 @@ const JsonTreePath = {
 const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
 
 function App() {
-  const [theme, setTheme] = createSignal<'light' | 'dark'>(
+  const [theme, setTheme] = createSignal<TanStackDevtoolsTheme>(
     darkThemeMq.matches ? 'dark' : 'light',
   )
 

packages/devtools-a11y/src/core/styles/styles.ts

@@ -2,6 +2,7 @@ import * as goober from 'goober'
 import { useTheme } from '@tanstack/devtools-ui'
 import { createMemo } from 'solid-js'
 
+import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
 import type { RuleCategory, SeverityThreshold } from '../types/types'
 
 const SEVERITY_COLORS: Record<SeverityThreshold, string> = {
@@ -49,7 +50,7 @@ const css = goober.css
 const FONT_SCALE = 1.1
 const fontPx = (size: number) => `calc(${size}px * ${FONT_SCALE})`
 
-function createA11yPanelStyles(theme: 'light' | 'dark') {
+function createA11yPanelStyles(theme: TanStackDevtoolsTheme) {
   const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
 
   const bg = t('#f9fafb;', '#191c24')

packages/devtools-ui/src/components/icons.tsx

@@ -1,5 +1,7 @@
 // import { Show, createUniqueId } from 'solid-js'
 
+import type { TanStackDevtoolsTheme } from './theme'
+
 /* export function Search() {
   return (
     <svg
@@ -39,7 +41,7 @@ export function Trash() {
     </svg>
   )
 } */
-/* 
+/*
 export function ChevronDown() {
   return (
     <svg
@@ -466,7 +468,7 @@ export function Link() {
     </svg>
   )
 }
-/* 
+/*
 
 export function Pencil() {
   return (
@@ -696,7 +698,7 @@ export function PiP() {
   )
 }
 
-export function CopiedCopier(props: { theme: 'light' | 'dark' }) {
+export function CopiedCopier(props: { theme: TanStackDevtoolsTheme }) {
   return (
     <svg
       width="24"
@@ -735,7 +737,7 @@ export function ErrorCopier() {
     </svg>
   )
 }
-/* 
+/*
 export function List() {
   return (
     <svg
@@ -755,7 +757,7 @@ export function List() {
   )
 }
 
-export function Check(props: { checked: boolean; theme: 'light' | 'dark' }) {
+export function Check(props: { checked: boolean; theme: TanStackDevtoolsTheme }) {
   return (
     <>
       <Show when={props.checked}>
@@ -884,7 +886,7 @@ export function PauseCircle() {
     </svg>
   )
 } */
-/* 
+/*
 export function TanstackLogo() {
   const id = createUniqueId()
   return (

packages/devtools-utils/package.json

@@ -72,9 +72,6 @@
   "engines": {
     "node": ">=18"
   },
-  "dependencies": {
-    "@tanstack/devtools-ui": "workspace:^"
-  },
   "devDependencies": {
     "@tanstack/devtools": "workspace:^",
     "tsup": "^8.5.0",

packages/devtools/src/index.ts

@@ -6,3 +6,4 @@ export type {
   TanStackDevtoolsPluginProps,
   TanStackDevtoolsConfig,
 } from './context/devtools-context'
+export type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'

packages/preact-devtools/src/devtools.tsx

@@ -7,14 +7,15 @@ import type {
   TanStackDevtoolsConfig,
   TanStackDevtoolsPlugin,
   TanStackDevtoolsPluginProps,
+  TanStackDevtoolsTheme,
 } from '@tanstack/devtools'
 
 type PluginRender =
   | JSX.Element
   | ((el: HTMLElement, props: TanStackDevtoolsPluginProps) => JSX.Element)
 
 type TriggerProps = {
-  theme: 'dark' | 'light'
+  theme: TanStackDevtoolsTheme
 }
 
 type TriggerRender =

packages/react-devtools/src/devtools.tsx

@@ -7,14 +7,15 @@ import type {
   TanStackDevtoolsConfig,
   TanStackDevtoolsPlugin,
   TanStackDevtoolsPluginProps,
+  TanStackDevtoolsTheme,
 } from '@tanstack/devtools'
 
 type PluginRender =
   | JSX.Element
   | ((el: HTMLElement, props: TanStackDevtoolsPluginProps) => JSX.Element)
 
 type TriggerProps = {
-  theme: 'dark' | 'light'
+  theme: TanStackDevtoolsTheme
 }
 
 type TriggerRender =

packages/solid-devtools/src/core.tsx

@@ -13,6 +13,7 @@ import type {
   TanStackDevtoolsConfig,
   TanStackDevtoolsPlugin,
   TanStackDevtoolsPluginProps,
+  TanStackDevtoolsTheme,
 } from '@tanstack/devtools'
 
 type SolidPluginRender =
@@ -76,7 +77,7 @@ export type TanStackDevtoolsSolidPlugin = Omit<
   name: string | SolidPluginRender
 }
 interface TriggerProps {
-  theme: 'light' | 'dark'
+  theme: TanStackDevtoolsTheme
 }
 export interface TanStackDevtoolsInit {
   /**