Semantic tokens defined in defineTheme not showing in Panda Studio

[babukamms]

Description

Semantic tokens defined directly in the theme using defineTheme don’t appear in Panda Studio. They should appear and be explorable in Panda Studio, ideally in a similar structure to raw tokens or semantic tokens defined with in the panda.config.

Problem Statement/Justification

Panda Studio currently doesn’t display semantic tokens that are defined within the defineTheme configuration. It only lists raw tokens (e.g., colors, spacing, etc.), which makes it hard to explore or debug the full theme setup visually. Moreover, the semantic tokens defined through the main config are visible, but the ones defined through the theme are not.

Example

import { defineTheme } from '@pandacss/dev'

export const theme = defineTheme({
  semanticTokens: {
    colors: {
      bg: {
        surface: { value: '{colors.gray.50}' },
        solid: { value: '{colors.gray.900}' },
      },
    },
  },
})

In Panda Studio, these tokens (colors.bg.surface, colors.bg.solid) are not visible.

Motivation

This would greatly improve DX by allowing teams to:

• Validate that semantic tokens are correctly resolved.
• Use Studio as a single source of truth for both raw and semantic layers.
• Simplify onboarding for designers/developers exploring the design system.
• Would Panda Studio a more complete theme explorer.

Proposed Solution or API

• Include semantic tokens from defineTheme in the Studio UI.
• Optionally distinguish them visually from raw tokens (e.g., labeled “Semantic”).
• Possibly add a filter or toggle to view only semantic tokens.

Alternatives

No response

Additional Information

No response