@pandacss/studio 1.5.1 → 1.6.0

package/dist/studio.mjs

@@ -1,4 +1,4 @@
-// ../../node_modules/.pnpm/tsup@8.5.1_@swc+core@1.15.1_@swc+helpers@0.5.17__jiti@2.6.1_postcss@8.5.6_tsx@4.20.6_typescript@5.9.3_yaml@2.8.1/node_modules/tsup/assets/esm_shims.js
+// ../../node_modules/.pnpm/tsup@8.5.1_@swc+core@1.15.2_@swc+helpers@0.5.17__jiti@2.6.1_postcss@8.5.6_tsx@4.20.6_typescript@5.9.3_yaml@2.8.1/node_modules/tsup/assets/esm_shims.js
 import path from "path";
 import { fileURLToPath } from "url";
 var getFilename = () => fileURLToPath(import.meta.url);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -43,22 +43,24 @@
   "author": "Segun Adebayo <joseshegs@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "@astrojs/react": "4.3.0",
-    "astro": "5.15.6",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "vite": "7.2.2",
-    "@pandacss/config": "1.5.1",
-    "@pandacss/logger": "1.5.1",
-    "@pandacss/shared": "1.5.1",
-    "@pandacss/token-dictionary": "1.5.1",
-    "@pandacss/types": "1.5.1",
-    "@pandacss/astro-plugin-studio": "1.5.1"
+    "@astrojs/react": "4.4.2",
+    "@nanostores/react": "^1.0.0",
+    "astro": "5.16.2",
+    "nanostores": "^1.1.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "vite": "7.2.4",
+    "@pandacss/astro-plugin-studio": "1.6.0",
+    "@pandacss/config": "1.6.0",
+    "@pandacss/logger": "1.6.0",
+    "@pandacss/shared": "1.6.0",
+    "@pandacss/token-dictionary": "1.6.0",
+    "@pandacss/types": "1.6.0"
   },
   "devDependencies": {
-    "@types/react": "19.2.2",
-    "@types/react-dom": "19.2.2",
-    "@testing-library/react": "16.3.0"
+    "@testing-library/react": "16.3.0",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3"
   },
   "scripts": {
     "panda": "node ../cli/bin.js",

package/src/components/colors.tsx

@@ -61,9 +61,13 @@ export function SemanticToken(props: SemanticTokenProps) {
   )
 }
 
-export default function Colors() {
+interface ColorsProps {
+  theme?: string
+}
+
+export function Colors({ theme }: ColorsProps) {
   const { filterQuery, setFilterQuery, semanticTokens, hasResults, uncategorizedColors, categorizedColors } =
-    useColorDocs()
+    useColorDocs(theme)
 
   return (
     <TokenGroup>

package/src/components/font-family.tsx

@@ -1,16 +1,20 @@
 import * as React from 'react'
 import { Flex, HStack, Square, Stack, panda } from '../../styled-system/jsx'
-import * as context from '../lib/panda-context'
 import { EmptyState } from './empty-state'
 import { TypographyIcon } from './icons'
-
-const fonts = context.getTokens('fonts')
+import type { useThemeTokens } from '../lib/use-theme-tokens'
 
 const letters = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i))
 const symbols = Array.from({ length: 10 }, (_, i) => String.fromCharCode(48 + i))
 const specials = ['@', '#', '$', '%', '&', '!', '?', '+', '-']
 
-export const FontFamily = () => {
+type Token = ReturnType<typeof useThemeTokens>[number]
+
+interface FontFamilyProps {
+  fonts: Token[]
+}
+
+export function FontFamily({ fonts }: FontFamilyProps) {
   if (fonts.length === 0) {
     return (
       <EmptyState title="No Tokens" icon={<TypographyIcon />}>

package/src/components/radii.tsx

@@ -1,35 +1,47 @@
 import * as React from 'react'
 import { toPx } from '@pandacss/shared'
 import { Grid, panda, Stack } from '../../styled-system/jsx'
-import * as context from '../lib/panda-context'
 import { getSortedSizes } from '../lib/sizes-sort'
 import { TokenGroup } from './token-group'
+import { EmptyState } from './empty-state'
+import { SizesIcon } from './icons'
+import type { useThemeTokens } from '../lib/use-theme-tokens'
 
-const radii = context.getTokens('radii')
+type Token = ReturnType<typeof useThemeTokens>[number]
+
+interface RadiiProps {
+  radii: Token[]
+}
+
+export function Radii({ radii }: RadiiProps) {
+  if (radii.length === 0) {
+    return (
+      <EmptyState title="No Tokens" icon={<SizesIcon />}>
+        The panda config does not contain any `radii` tokens
+      </EmptyState>
+    )
+  }
 
-export default function Radii() {
   return (
     <TokenGroup>
-      {radii && (
-        <Grid display="grid" minChildWidth="10rem" gap="10">
-          {getSortedSizes([...radii.values()])
-            .sort((a, b) => parseFloat(toPx(a.value)!) - parseFloat(toPx(b.value)!))
-            .map((size, index) => (
-              <Stack direction="column" key={index}>
-                <panda.div
-                  width="80px"
-                  height="80px"
-                  background="rgba(255, 192, 203, 0.5)"
-                  style={{ borderRadius: size.value }}
-                />
-                <Stack gap="1">
-                  <b>{size.extensions.prop}</b>
-                  <panda.span opacity="0.7">{size.value}</panda.span>
-                </Stack>
+      <Grid display="grid" minChildWidth="10rem" gap="10">
+        {getSortedSizes(radii)
+          .sort((a, b) => parseFloat(toPx(a.value)!) - parseFloat(toPx(b.value)!))
+          .map((size, index) => (
+            <Stack direction="column" key={index}>
+              <panda.div
+                width="80px"
+                height="80px"
+                background="rgba(255, 192, 203, 0.5)"
+                style={{ borderRadius: size.value }}
+              />
+              <Stack gap="1">
+                <b>{size.extensions.prop}</b>
+                <panda.span opacity="0.7">{size.value}</panda.span>
               </Stack>
-            ))}
-        </Grid>
-      )}
+            </Stack>
+          ))}
+      </Grid>
     </TokenGroup>
   )
 }

package/src/components/theme-selector.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react'
+import { useStore } from '@nanostores/react'
+import { panda, Stack } from '../../styled-system/jsx'
+import { availableThemes } from '../lib/panda-context'
+import { currentThemeStore } from '../lib/theme-store'
+
+const titleCase = (str: string) => str.replace(/[-_]/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())
+
+export function ThemeSelector() {
+  const currentTheme = useStore(currentThemeStore)
+  const [isHydrated, setIsHydrated] = useState(false)
+
+  useEffect(() => {
+    setIsHydrated(true)
+  }, [])
+
+  // Only show theme selector when themes are defined in the configuration
+  if (availableThemes.length === 0) {
+    return null
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = e.target.value
+    currentThemeStore.set(value || undefined)
+  }
+
+  // Show a simple fallback until hydrated to prevent hydration mismatch
+  if (!isHydrated) {
+    return (
+      <Stack gap="2">
+        <panda.label fontWeight="bold" fontSize="small" opacity="0.7">
+          THEME
+        </panda.label>
+        <panda.select
+          px="3"
+          py="2"
+          borderRadius="md"
+          borderWidth="1"
+          borderColor="gray.200"
+          bg="white"
+          _dark={{ bg: 'gray.800', borderColor: 'gray.600' }}
+          fontSize="sm"
+          disabled
+        >
+          <option>Loading...</option>
+        </panda.select>
+      </Stack>
+    )
+  }
+
+  return (
+    <Stack gap="2">
+      <panda.label fontWeight="bold" fontSize="small" opacity="0.7">
+        THEME
+      </panda.label>
+      <panda.select
+        id="theme-selector"
+        px="3"
+        py="2"
+        borderRadius="md"
+        borderWidth="1"
+        borderColor="gray.200"
+        bg="white"
+        _dark={{ bg: 'gray.800', borderColor: 'gray.600' }}
+        fontSize="sm"
+        cursor="pointer"
+        value={currentTheme || ''}
+        onChange={handleChange}
+      >
+        <option value="">Default</option>
+        {availableThemes.map((theme) => (
+          <option key={theme} value={theme}>
+            {titleCase(theme)}
+          </option>
+        ))}
+      </panda.select>
+    </Stack>
+  )
+}

package/src/components/token-pages.tsx

@@ -0,0 +1,102 @@
+import { useStore } from '@nanostores/react'
+import type { TokenDataTypes } from '@pandacss/types'
+import React, { useEffect, useState } from 'react'
+import { css } from '../../styled-system/css'
+import { Center } from '../../styled-system/jsx'
+import { availableThemes } from '../lib/panda-context'
+import { currentThemeStore } from '../lib/theme-store'
+import { useThemeTokens } from '../lib/use-theme-tokens'
+import { Colors } from './colors'
+import { FontFamily } from './font-family'
+import FontTokens from './font-tokens'
+import { Radii } from './radii'
+import Sizes from './sizes'
+
+type TokenCategory = keyof TokenDataTypes
+
+const hasThemes = availableThemes.length > 0
+
+const loadingStyles = css({
+  width: '40px',
+  height: '40px',
+  border: '2px solid #FFF',
+  borderColor: 'yellow.400',
+  borderBottomColor: 'transparent',
+  borderRadius: '50%',
+  display: 'inline-block',
+  boxSizing: 'border-box',
+  animation: 'spin 0.6s linear infinite',
+})
+
+function Loader() {
+  return (
+    <Center height="400px">
+      <span className={loadingStyles} />
+    </Center>
+  )
+}
+
+function ThemeLoading({ children }: { children: React.ReactNode }) {
+  const [isHydrated, setIsHydrated] = useState(false)
+  useStore(currentThemeStore)
+
+  useEffect(() => {
+    setIsHydrated(true)
+  }, [])
+
+  if (!isHydrated) {
+    return <Loader />
+  }
+
+  return <>{children}</>
+}
+
+function createTokenPage<T extends TokenCategory>(
+  tokenType: T,
+  render: (tokens: ReturnType<typeof useThemeTokens>) => React.ReactNode,
+) {
+  return function TokenPage() {
+    const tokens = useThemeTokens(tokenType)
+    return hasThemes ? <ThemeLoading>{render(tokens)}</ThemeLoading> : <>{render(tokens)}</>
+  }
+}
+
+export const SizesPage = createTokenPage('sizes', (tokens) => <Sizes sizes={tokens} name="sizes" />)
+
+export const SpacingPage = createTokenPage('spacing', (tokens) => <Sizes sizes={tokens} name="spacing" />)
+
+export const FontSizesPage = createTokenPage('fontSizes', (tokens) => (
+  <FontTokens fontTokens={tokens} token="fontSize" />
+))
+
+export const FontWeightsPage = createTokenPage('fontWeights', (tokens) => (
+  <FontTokens fontTokens={tokens} token="fontWeight" />
+))
+
+export const LetterSpacingsPage = createTokenPage('letterSpacings', (tokens) => (
+  <FontTokens fontTokens={tokens} token="letterSpacing" text="The quick brown fox jumps over the lazy dog." />
+))
+
+export const LineHeightsPage = createTokenPage('lineHeights', (tokens) => (
+  <FontTokens
+    fontTokens={tokens}
+    token="lineHeight"
+    largeText
+    text="Panda design system lineHeight specifies the vertical distance between two lines of text. You can preview this visually here."
+  />
+))
+
+export const RadiiPage = createTokenPage('radii', (tokens) => <Radii radii={tokens} />)
+
+export const FontsPage = createTokenPage('fonts', (tokens) => <FontFamily fonts={tokens} />)
+
+export function ColorsPage() {
+  const theme = hasThemes ? useStore(currentThemeStore) : undefined
+  return hasThemes ? (
+    <ThemeLoading>
+      <Colors theme={theme} />
+    </ThemeLoading>
+  ) : (
+    <Colors />
+  )
+}

package/src/layouts/Sidebar.astro

@@ -3,6 +3,7 @@ import { Container, panda, Stack } from '../../styled-system/jsx'
 import '../../styled-system/styles.css'
 import SideNav from '../components/side-nav.astro'
 import ThemeToggle from '../components/theme-toggle.astro'
+import { ThemeSelector } from '../components/theme-selector'
 import { Logo } from '../icons/logo'
 
 interface Props {
@@ -20,6 +21,9 @@ const { title } = Astro.props
     <panda.div mt="4">
       <ThemeToggle />
     </panda.div>
+    <panda.div mt="4">
+      <ThemeSelector client:load />
+    </panda.div>
     <SideNav />
   </Stack>
 

package/src/lib/panda-context.ts

@@ -1,28 +1,167 @@
 import { flatten } from '@pandacss/shared'
 import { Token, TokenDictionary } from '@pandacss/token-dictionary'
 import type { TokenDataTypes } from '@pandacss/types'
-import { config } from 'virtual:panda'
+import { config, themes as configThemes } from 'virtual:panda'
+
+// Get current theme from URL params or use default
+export const getCurrentTheme = (url?: string) => {
+  // Client-side: read from window.location
+  if (typeof window !== 'undefined') {
+    const params = new URLSearchParams(window.location.search)
+    return params.get('theme') || undefined
+  }
+
+  // Server-side: read from provided URL
+  if (url) {
+    const urlObj = new URL(url)
+    const params = new URLSearchParams(urlObj.search)
+    return params.get('theme') || undefined
+  }
+
+  return undefined
+}
+
+export const availableThemes = Object.keys(configThemes || {})
+
+// Deep merge objects recursively
+const deepMerge = (target: any, source: any): any => {
+  if (!source) return target
+  if (!target) return source
+
+  const result = { ...target }
+
+  for (const key in source) {
+    if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+      result[key] = deepMerge(target[key], source[key])
+    } else {
+      result[key] = source[key]
+    }
+  }
+
+  return result
+}
+
+// Merge base theme with selected theme
+export const getActiveTheme = (themeName?: string) => {
+  const baseTheme = config.theme ?? {}
+
+  if (!themeName || !configThemes?.[themeName]) {
+    return baseTheme
+  }
+
+  const selectedTheme = configThemes[themeName]
+
+  // Deep merge theme configuration
+  return {
+    ...baseTheme,
+    tokens: deepMerge(baseTheme.tokens, selectedTheme.tokens),
+    semanticTokens: deepMerge(baseTheme.semanticTokens, selectedTheme.semanticTokens),
+    textStyles: deepMerge(baseTheme.textStyles, selectedTheme.textStyles),
+    layerStyles: deepMerge(baseTheme.layerStyles, selectedTheme.layerStyles),
+  }
+}
 
 export const theme = config.theme ?? {}
 
 export const tokens = new TokenDictionary(theme).init()
 
-export const getTokens = (category: keyof TokenDataTypes): Token[] => {
-  const map = tokens.view.categoryMap.get(category) ?? new Map()
+export const getTokens = (category: keyof TokenDataTypes, themeName?: string): Token[] => {
+  const activeTheme = getActiveTheme(themeName)
+  const themeTokens = new TokenDictionary(activeTheme).init()
+  const map = themeTokens.view.categoryMap.get(category) ?? new Map()
   return Array.from(map.values())
 }
 
+// Get token paths defined in a theme for a category
+const getThemeDefinedPaths = (themeName: string, category: keyof TokenDataTypes): Set<string> => {
+  const selectedTheme = configThemes?.[themeName]
+  if (!selectedTheme) return new Set()
+
+  const paths = new Set<string>()
+
+  // Collect paths from tokens (e.g., colors.red.500)
+  const collectPaths = (obj: any, prefix: string[] = []) => {
+    if (!obj || typeof obj !== 'object') return
+    for (const key in obj) {
+      const path = [...prefix, key]
+      if (obj[key]?.value !== undefined) {
+        paths.add(path.join('.'))
+      } else {
+        collectPaths(obj[key], path)
+      }
+    }
+  }
+
+  collectPaths(selectedTheme.tokens?.[category])
+  collectPaths(selectedTheme.semanticTokens?.[category])
+
+  return paths
+}
+
+export const getThemeRelevantTokens = (category: keyof TokenDataTypes, themeName?: string): Token[] => {
+  if (!themeName || !configThemes?.[themeName]) {
+    // No theme selected - return all base tokens
+    return getTokens(category)
+  }
+
+  const activeTheme = getActiveTheme(themeName)
+  const themeTokens = new TokenDictionary(activeTheme).init()
+
+  // Get all tokens for the category from merged theme
+  const allTokens = Array.from(themeTokens.view.categoryMap.get(category)?.values() || [])
+
+  // Get paths explicitly defined in this theme
+  const definedPaths = getThemeDefinedPaths(themeName, category)
+
+  // If theme doesn't define any tokens for this category, return empty
+  if (definedPaths.size === 0) {
+    return []
+  }
+
+  // Filter to tokens whose path matches theme-defined paths
+  // Also include semantic tokens (isConditional) that are defined in the theme
+  const themeTokensList = allTokens.filter((token) => {
+    const tokenPath = token.path.join('.')
+    return definedPaths.has(tokenPath) || token.isConditional
+  })
+
+  // Collect referenced tokens (for semantic tokens that reference base tokens)
+  const referencedNames = new Set<string>()
+  themeTokensList.forEach((token) => {
+    if (token.extensions.references) {
+      Object.keys(token.extensions.references).forEach((name) => referencedNames.add(name))
+    }
+    if (token.extensions.conditions) {
+      Object.values(token.extensions.conditions).forEach((val) => {
+        if (typeof val === 'string') {
+          themeTokens.getReferences(val).forEach((ref) => referencedNames.add(ref.name))
+        }
+      })
+    }
+  })
+
+  // Include referenced base tokens
+  const referencedTokens = allTokens.filter(
+    (token) => referencedNames.has(token.name) && !themeTokensList.includes(token),
+  )
+
+  return [...themeTokensList, ...referencedTokens]
+}
+
 type Colors = Array<{
   label: string
   value: string
 }>
 
-export const colors: Colors = getTokens('colors')
-  .filter((color) => !color.isConditional && !color.extensions.isVirtual)
-  .map((color) => ({
-    label: color.extensions.prop,
-    value: color.value,
-  }))
+export const getColors = (themeName?: string): Colors =>
+  getTokens('colors', themeName)
+    .filter((color) => !color.isConditional && !color.extensions.isVirtual)
+    .map((color) => ({
+      label: color.extensions.prop,
+      value: color.value,
+    }))
+
+export const colors: Colors = getColors()
 
 export const textStyles = flatten(theme?.textStyles ?? {})
 

package/src/lib/theme-store.ts

@@ -0,0 +1,40 @@
+import { atom } from 'nanostores'
+
+const THEME_STORAGE_KEY = 'panda-studio-theme'
+
+// Store for the current theme
+export const currentThemeStore = atom<string | undefined>(undefined)
+
+// Get theme from localStorage only (client-side only)
+const getInitialTheme = (): string | undefined => {
+  if (typeof window === 'undefined') return undefined
+
+  try {
+    const storedTheme = localStorage.getItem(THEME_STORAGE_KEY)
+    return storedTheme || undefined
+  } catch {
+    // Handle localStorage access errors
+    return undefined
+  }
+}
+
+// Initialize theme from localStorage
+if (typeof window !== 'undefined') {
+  const theme = getInitialTheme()
+  currentThemeStore.set(theme)
+}
+
+// Update localStorage when theme changes (client-side only)
+currentThemeStore.listen((value) => {
+  if (typeof window !== 'undefined') {
+    try {
+      if (value) {
+        localStorage.setItem(THEME_STORAGE_KEY, value)
+      } else {
+        localStorage.removeItem(THEME_STORAGE_KEY)
+      }
+    } catch {
+      // Handle localStorage access errors
+    }
+  }
+})

package/src/lib/url.ts

@@ -1,3 +1,9 @@
 export const getUrl = (path?: string) => {
-  return [import.meta.env.BASE_URL, path].filter(Boolean).join('')
+  const base = import.meta.env.BASE_URL || '/'
+  if (!path) return base
+
+  // Remove leading slash from path if base already ends with slash
+  const cleanPath = base.endsWith('/') && path.startsWith('/') ? path.slice(1) : path
+
+  return base + cleanPath
 }

package/src/lib/use-color-docs.ts

@@ -1,5 +1,6 @@
+import { TokenDictionary } from '@pandacss/token-dictionary'
 import type { Token, TokenExtensions } from '@pandacss/token-dictionary'
-import { useState } from 'react'
+import { useState, useMemo, useDeferredValue } from 'react'
 import * as context from './panda-context'
 
 interface Color {
@@ -67,47 +68,65 @@ const getSemanticTokens = (allTokens: Token[], filterMethod?: (token: ColorToken
     )
 }
 
-const allTokens = context.tokens.allTokens
-const colors = context.getTokens('colors')
-
-export const useColorDocs = () => {
+export const useColorDocs = (theme?: string) => {
   const [filterQuery, setFilterQuery] = useState('')
+  const deferredQuery = useDeferredValue(filterQuery)
+
+  // Memoize token data based on theme to ensure reactivity
+  const { colors, allTokens } = useMemo(() => {
+    // Get tokens based on provided theme (filtered to show only relevant tokens when theme is active)
+    const colors = context.getThemeRelevantTokens('colors', theme)
+
+    // Get all tokens for the active theme
+    const activeTheme = context.getActiveTheme(theme)
+    const themeTokens = new TokenDictionary(activeTheme).init()
+    const allTokens = themeTokens.allTokens
+
+    return { colors, allTokens }
+  }, [theme])
+
+  // Memoize processed data based on theme and filter query (deferred for performance)
+  const processedData = useMemo(() => {
+    const filterMethod = (token: ColorToken) => {
+      return [
+        ...token.path,
+        token.originalValue,
+        token.description,
+        token.value,
+        token.name,
+        token.extensions?.var,
+        token.extensions?.prop,
+        ...Object.values(token.extensions?.conditions || {}),
+      ]
+        .filter(Boolean)
+        .some((prop) => prop.includes(deferredQuery))
+    }
+
+    const colorsInCategories = groupByColorPalette(colors as ColorToken[], filterMethod)
+    const uncategorizedColors = colorsInCategories[UNCATEGORIZED_ID]
+
+    const categorizedColors = Object.entries<any[]>(colorsInCategories).filter(
+      ([category]) => category !== UNCATEGORIZED_ID,
+    )
 
-  const filterMethod = (token: ColorToken) => {
-    return [
-      ...token.path,
-      token.originalValue,
-      token.description,
-      token.value,
-      token.name,
-      token.extensions?.var,
-      token.extensions?.prop,
-      ...Object.values(token.extensions?.conditions || {}),
-    ]
-      .filter(Boolean)
-      .some((prop) => prop.includes(filterQuery))
-  }
-
-  const colorsInCategories = groupByColorPalette(colors as ColorToken[], filterMethod)
-  const uncategorizedColors = colorsInCategories[UNCATEGORIZED_ID]
-
-  const categorizedColors = Object.entries<any[]>(colorsInCategories).filter(
-    ([category]) => category !== UNCATEGORIZED_ID,
-  )
-
-  const semanticTokens = Object.entries<Record<string, any>>(getSemanticTokens(allTokens, filterMethod)) as [
-    string,
-    Record<string, ColorToken>,
-  ][]
-  const hasResults =
-    !!categorizedColors.length || !!uncategorizedColors?.length || !!Object.values(semanticTokens).length
+    const semanticTokens = Object.entries<Record<string, any>>(getSemanticTokens(allTokens, filterMethod)) as [
+      string,
+      Record<string, ColorToken>,
+    ][]
+    const hasResults =
+      !!categorizedColors.length || !!uncategorizedColors?.length || !!Object.values(semanticTokens).length
+
+    return {
+      uncategorizedColors,
+      categorizedColors,
+      semanticTokens,
+      hasResults,
+    }
+  }, [colors, allTokens, deferredQuery])
 
   return {
     filterQuery,
     setFilterQuery,
-    uncategorizedColors,
-    categorizedColors,
-    semanticTokens,
-    hasResults,
+    ...processedData,
   }
 }

package/src/lib/use-theme-tokens.ts

@@ -0,0 +1,15 @@
+import { useMemo } from 'react'
+import { useStore } from '@nanostores/react'
+import type { TokenDataTypes } from '@pandacss/types'
+import * as context from './panda-context'
+import { currentThemeStore } from './theme-store'
+
+export const useThemeTokens = (category: keyof TokenDataTypes) => {
+  const theme = useStore(currentThemeStore)
+
+  const tokens = useMemo(() => {
+    return context.getThemeRelevantTokens(category, theme)
+  }, [category, theme])
+
+  return tokens
+}

package/src/lib/virtual-panda.d.ts

@@ -2,4 +2,5 @@ declare module 'virtual:*' {
   export const config: import('@pandacss/types').UserConfig
   export const textStyles: Record<string, string>
   export const layerStyles: Record<string, string>
+  export const themes: Record<string, any>
 }

package/src/pages/colors.astro

@@ -1,11 +1,11 @@
 ---
-import Colors from '../components/colors'
+import { ColorsPage } from '../components/token-pages'
 import Layout from '../layouts/Layout.astro'
 import Sidebar from '../layouts/Sidebar.astro'
 ---
 
 <Layout>
   <Sidebar title="Colors">
-    <Colors client:load />
+    <ColorsPage client:load />
   </Sidebar>
 </Layout>

package/src/pages/font-sizes.astro

@@ -1,15 +1,12 @@
 ---
-import FontTokens from '../components/font-tokens'
 import Layout from '../layouts/Layout.astro'
 import Sidebar from '../layouts/Sidebar.astro'
-import * as context from '../lib/panda-context'
-
-const fontSizes = context.getTokens('fontSizes')
+import { FontSizesPage } from '../components/token-pages'
 ---
 
 <Layout>
   <Sidebar title="Font Sizes">
-    <FontTokens client:load fontTokens={fontSizes} token="fontSize" />
+    <FontSizesPage client:load />
   </Sidebar>
 </Layout>
 

package/src/pages/font-weights.astro

@@ -1,14 +1,11 @@
 ---
-import FontTokens from '../components/font-tokens'
+import { FontWeightsPage } from '../components/token-pages'
 import Layout from '../layouts/Layout.astro'
 import Sidebar from '../layouts/Sidebar.astro'
-import * as context from '../lib/panda-context'
-
-const fontWeights = context.getTokens('fontWeights')
 ---
 
 <Layout>
   <Sidebar title="Font Weights">
-    <FontTokens client:load fontTokens={fontWeights} token="fontWeight" />
+    <FontWeightsPage client:load />
   </Sidebar>
 </Layout>

package/src/pages/fonts.astro

@@ -1,11 +1,11 @@
 ---
 import Layout from '../layouts/Layout.astro'
 import Sidebar from '../layouts/Sidebar.astro'
-import { FontFamily } from '../components/font-family'
+import { FontsPage } from '../components/token-pages'
 ---
 
 <Layout>
-    <Sidebar title="Fonts">
-        <FontFamily />
-    </Sidebar>
+  <Sidebar title="Fonts">
+    <FontsPage client:load />
+  </Sidebar>
 </Layout>

package/src/pages/letter-spacings.astro

@@ -1,21 +1,12 @@
 ---
-import FontTokens from '../components/font-tokens'
+import { LetterSpacingsPage } from '../components/token-pages'
 import Layout from '../layouts/Layout.astro'
 import Sidebar from '../layouts/Sidebar.astro'
-
-import * as context from '../lib/panda-context'
-
-const tokens = context.getTokens('letterSpacings')
 ---
 
 <Layout>
   <Sidebar title="Letter Spacings">
-    <FontTokens
-      client:load
-      fontTokens={tokens}
-      token="letterSpacing"
-      text="The quick brown fox jumps over the lazy dog."
-    />
+    <LetterSpacingsPage client:load />
   </Sidebar>
 </Layout>
 

package/src/pages/line-heights.astro

@@ -1,20 +1,11 @@
 ---
-import FontTokens from '../components/font-tokens'
+import { LineHeightsPage } from '../components/token-pages'
 import Layout from '../layouts/Layout.astro'
 import Sidebar from '../layouts/Sidebar.astro'
-import * as context from '../lib/panda-context'
-
-const tokens = context.getTokens('lineHeights')
 ---
 
 <Layout>
   <Sidebar title="Line Heights">
-    <FontTokens
-      client:load
-      fontTokens={tokens}
-      token="lineHeight"
-      largeText
-      text={`Panda design system lineHeight specifies the vertical distance between two lines of text. You can peveiew this visually here.`}
-    />
+    <LineHeightsPage client:load />
   </Sidebar>
 </Layout>

package/src/pages/radii.astro

@@ -1,11 +1,11 @@
 ---
-import Radii from '../components/radii'
+import { RadiiPage } from '../components/token-pages'
 import Layout from '../layouts/Layout.astro'
 import Sidebar from '../layouts/Sidebar.astro'
 ---
 
 <Layout>
   <Sidebar title="Border Radius">
-    <Radii client:load />
+    <RadiiPage client:load />
   </Sidebar>
 </Layout>

package/src/pages/sizes.astro

@@ -1,14 +1,11 @@
 ---
-import Sizes from '../components/sizes'
+import { SizesPage } from '../components/token-pages'
 import Layout from '../layouts/Layout.astro'
 import Sidebar from '../layouts/Sidebar.astro'
-import * as context from '../lib/panda-context'
-
-const tokens = context.getTokens('sizes')
 ---
 
 <Layout>
   <Sidebar title="Sizes">
-    <Sizes sizes={tokens} name="sizes" client:load />
+    <SizesPage client:load />
   </Sidebar>
 </Layout>

package/src/pages/spacing.astro

@@ -1,14 +1,11 @@
 ---
-import Sizes from '../components/sizes'
+import { SpacingPage } from '../components/token-pages'
 import Layout from '../layouts/Layout.astro'
 import Sidebar from '../layouts/Sidebar.astro'
-import * as context from '../lib/panda-context'
-
-const tokens = context.getTokens('spacing')
 ---
 
 <Layout>
   <Sidebar title="Spacing">
-    <Sizes sizes={tokens} name="spacing" client:load />
+    <SpacingPage client:load />
   </Sidebar>
 </Layout>

package/styled-system/styles.css

@@ -744,6 +744,18 @@
     background: var(--colors-neutral-800);
 }
 
+  .bg_white {
+    background: var(--colors-white);
+}
+
+  .bd_2px_solid_\#FFF {
+    border: 2px solid #FFF;
+}
+
+  .anim_spin_0\.6s_linear_infinite {
+    animation: spin 0.6s linear infinite;
+}
+
   .gap_8px {
     gap: 8px;
 }
@@ -912,6 +924,14 @@
     grid-column: span 5 / span 5;
 }
 
+  .bd-w_1 {
+    border-width: 1px;
+}
+
+  .bd-c_gray\.200 {
+    border-color: var(--colors-gray-200);
+}
+
   .px_2 {
     padding-inline: var(--spacing-2);
 }
@@ -920,6 +940,14 @@
     gap: var(--spacing-12);
 }
 
+  .bd-c_yellow\.400 {
+    border-color: var(--colors-yellow-400);
+}
+
+  .bdr_50\% {
+    border-radius: 50%;
+}
+
   .ring_0 {
     outline: 0;
 }
@@ -1187,10 +1215,19 @@
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
     border-width: 0;
 }
 
-  .sr_true,.white-space_nowrap {
+  .d_inline-block {
+    display: inline-block;
+}
+
+  .bx-s_border-box {
+    box-sizing: border-box;
+}
+
+  .white-space_nowrap {
     white-space: nowrap;
 }
 
@@ -1314,6 +1351,22 @@
     margin-bottom: var(--spacing-4);
 }
 
+  .w_40px {
+    width: 40px;
+}
+
+  .h_40px {
+    height: 40px;
+}
+
+  .bd-b-c_transparent {
+    border-bottom-color: var(--colors-transparent);
+}
+
+  .h_400px {
+    height: 400px;
+}
+
   .pt_28 {
     padding-top: var(--spacing-28);
 }
@@ -1362,10 +1415,18 @@
     padding-bottom: var(--spacing-10);
 }
 
+  .dark .dark\:bg_gray\.800 {
+    background: var(--colors-gray-800);
+}
+
   .before\:bdr_sm::before {
     border-radius: var(--radii-sm);
 }
 
+  .dark .dark\:bd-c_gray\.600 {
+    border-color: var(--colors-gray-600);
+}
+
   .before\:content_\'\'::before {
     content: '';
 }