fix(studio): can't render semantic color tokens without base definition

[Asuka109]

📝 Description

Render semantic color tokens without base definition. Make panda studio compatible with park ui.

⛳️ Current behavior

I am trying to use Panda CSS with Park UI together in my application. I want to use Panda Studio to review my custom tokens, but it doesn't work well. I got an error:

TypeError: Cannot read properties of undefined (reading 'value')
    at /Users/asuka109/repositories/me/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected]__@ty_kcjawng6haun6eqorqsybctqwy/node_modules/@pandacss/studio/src/components/colors.tsx:31:34
    at Array.map (<anonymous>)
    at renderSemanticTokens (/Users/asuka109/repositories/me/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected]__@ty_kcjawng6haun6eqorqsybctqwy/node_modules/@pandacss/studio/src/components/colors.tsx:23:27)
    at Colors (/Users/asuka109/repositories/me/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected]__@ty_kcjawng6haun6eqorqsybctqwy/node_modules/@pandacss/studio/src/components/colors.tsx:66:76)
    at renderWithHooks (/Users/asuka109/repositories/me/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)
    at renderIndeterminateComponent (/Users/asuka109/repositories/me/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:5797:15)
    at renderElement (/Users/asuka109/repositories/me/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6012:7)
    at renderNodeDestructiveImpl (/Users/asuka109/repositories/me/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11)
    at renderNodeDestructive (/Users/asuka109/repositories/me/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6142:14)
    at retryTask (/Users/asuka109/repositories/me/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server.node.development.js:6594:5)

I try to breakpoint and got a token with content below:

{
      "_light": { "value": "var(--colors-gray-1)", "isReference": false },
      "_dark": { "value": "var(--colors-gray-1)", "isReference": false },
      "extensions": {
        "condition": "_dark",
        "category": "colors",
        "conditions": { "_light": "var(--colors-gray-1)", "_dark": "var(--colors-gray-1)" },
        "prop": "bg.canvas",
        "var": "--colors-bg-canvas",
        "varRef": "var(--colors-bg-canvas)",
        "colorPalette": "bg",
        "colorPaletteRoots": [["bg"]],
        "colorPaletteTokenKeys": [["canvas"]]
      }
    }

So it seems panda studio doesn't consider the case of a preset missing a base definition.

panda/packages/studio/src/components/colors.tsx

Line 28 in 93dc9f5

value={colors.base.value}

🚀 New behavior

It should work fine even if the token doesn't have a base definition.

💣 Is this a breaking change

No.

📝 Additional Information

There is no reproduction but you can checkout f4f65718f373fdcef30b96910079c49b41f52e76 and run pnpm vitest studio to trigger the error.

[changeset-bot]

🦋 Changeset detected

Latest commit: a245db8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 19 packages

Name	Type
@pandacss/studio	Patch
@pandacss/astro-plugin-studio	Patch
@pandacss/dev	Patch
@pandacss/config	Patch
@pandacss/core	Patch
@pandacss/extractor	Patch
@pandacss/generator	Patch
@pandacss/is-valid-prop	Patch
@pandacss/logger	Patch
@pandacss/node	Patch
@pandacss/parser	Patch
@pandacss/postcss	Patch
@pandacss/preset-atlaskit	Patch
@pandacss/preset-base	Patch
@pandacss/preset-open-props	Patch
@pandacss/preset-panda	Patch
@pandacss/shared	Patch
@pandacss/token-dictionary	Patch
@pandacss/types	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
panda-docs	✅ Ready (Inspect)	Visit Preview	Dec 22, 2024 4:42pm
panda-playground	✅ Ready (Inspect)	Visit Preview	Dec 22, 2024 4:42pm
panda-studio	✅ Ready (Inspect)	Visit Preview	Dec 22, 2024 4:42pm