chore: export type

Author: harry-whorlow

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

@@ -1,19 +1,19 @@
 import { createContext, createEffect, createSignal, useContext } from 'solid-js'
 import type { Accessor, JSX } from 'solid-js'
 
-export type ThemeType = 'light' | 'dark'
+export type TanStackDevtoolsTheme = 'light' | 'dark'
 
 type ThemeContextValue = {
-  theme: Accessor<ThemeType>
-  setTheme: (theme: ThemeType) => void
+  theme: Accessor<TanStackDevtoolsTheme>
+  setTheme: (theme: TanStackDevtoolsTheme) => void
 }
 const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
 
 export const ThemeContextProvider = (props: {
   children: JSX.Element
-  theme: ThemeType
+  theme: TanStackDevtoolsTheme
 }) => {
-  const [theme, setTheme] = createSignal<ThemeType>(props.theme)
+  const [theme, setTheme] = createSignal<TanStackDevtoolsTheme>(props.theme)
   createEffect(() => {
     setTheme(props.theme)
   })

packages/devtools-ui/src/index.ts

@@ -14,7 +14,7 @@ export {
 } from './components/section'
 export { Header, HeaderLogo } from './components/header'
 export { useTheme, ThemeContextProvider } from './components/theme'
-export type { ThemeType } from './components/theme'
+export type { TanStackDevtoolsTheme } from './components/theme'
 export {
   CheckCircleIcon,
   ChevronDownIcon,

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

@@ -2,8 +2,9 @@ import * as goober from 'goober'
 import { createEffect, createSignal } from 'solid-js'
 import { useTheme } from '../components/theme'
 import { tokens } from './tokens'
+
+import type { TanStackDevtoolsTheme } from '../components/theme'
 import type { ButtonVariant } from '../components/button'
-import type { ThemeType } from '../components/theme'
 
 const buttonVariantColors: Record<
   ButtonVariant,
@@ -118,7 +119,7 @@ const buttonVariantColors: Record<
   },
 }
 export const css = goober.css
-const stylesFactory = (theme: ThemeType = 'dark') => {
+const stylesFactory = (theme: TanStackDevtoolsTheme) => {
   const { colors, font, size, border } = tokens
   const { fontFamily } = font
 

packages/devtools/src/context/devtools-context.tsx

@@ -11,9 +11,10 @@ import {
 import { initialState } from './devtools-store'
 import type { DevtoolsStore } from './devtools-store'
 import type { JSX, Setter } from 'solid-js'
+import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
 
 export interface TanStackDevtoolsPluginProps {
-  theme: DevtoolsStore['settings']['theme']
+  theme: TanStackDevtoolsTheme
   devtoolsOpen: boolean
 }
 export interface TanStackDevtoolsPlugin {

packages/devtools/src/context/devtools-store.ts

@@ -1,5 +1,6 @@
 import type { TabName } from '../tabs'
 import type { TanStackDevtoolsPlugin } from './devtools-context'
+import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
 
 type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift' | 'CtrlOrMeta'
 type KeyboardKey = ModifierKey | (string & {})
@@ -21,7 +22,7 @@ type TriggerPosition =
   | 'middle-right'
 
 type TriggerProps = {
-  theme: 'light' | 'dark'
+  theme: TanStackDevtoolsTheme
 }
 
 export type DevtoolsStore = {
@@ -71,7 +72,7 @@ export type DevtoolsStore = {
      * The theme of the dev tools
      * @default "dark"
      */
-    theme: 'light' | 'dark'
+    theme: TanStackDevtoolsTheme
 
     /**
      * Whether the trigger should be completely hidden or not (you can still open with the hotkey)