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

* test(studio): add test case for park ui

* feat(studio): sort and render arbitrary semantic tokens

* feat: adjust token priority

* chore: add changeset

* chore: update lock file

Author: Asuka109

.changeset/wild-lizards-look.md

@@ -0,0 +1,5 @@
+---
+'@pandacss/studio': patch
+---
+
+fix(studio): can't render semantic color token without base definition

package.json

@@ -60,7 +60,8 @@
     "@typescript-eslint/parser": "7.0.1",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
-    "prettier": "3.2.5"
+    "prettier": "3.2.5",
+    "vite-plugin-virtual": "^0.3.0"
   },
   "lint-staged": {
     "packages/**/*.{ts,tsx}": [

packages/studio/__tests__/components/colors.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+import { render } from '@testing-library/react'
+import type { TokenExtensions } from '@pandacss/token-dictionary'
+import { SemanticToken, sortSemanticTokens } from '../../src/components/colors'
+import rawSemanticTokens from '../fixtures/semantic-tokens-park-ui.json'
+
+const semanticTokens = rawSemanticTokens as [string, TokenExtensions][]
+
+describe('sortSemanticTokens', () => {
+  it('should sort tokens', () => {
+    const tokens = ['c', '_dark', 'a', '_light', 'base', 'b']
+    const expected = ['base', '_light', '_dark', 'a', 'b', 'c']
+    expect(sortSemanticTokens(tokens)).toEqual(expected)
+  })
+})
+
+describe('SemanticToken', () => {
+  it('should render semantic tokens', () => {
+    const token = {
+      base: { value: '#fff' },
+      dark: { value: '#000' },
+      extensions: {
+        conditions: {
+          base: '#fff',
+          dark: '#000',
+        },
+      },
+    } as any
+
+    const { container } = render(<SemanticToken name="bg.default" tokens={token} />)
+
+    expect(container.textContent).toBe('base#fff dark#000 bg.default')
+  })
+
+  it('should render semantic tokens without base token', () => {
+    const { container } = render(
+      <>
+        {semanticTokens.map(([name, token]) => (
+          <SemanticToken key={name} name={name} tokens={token} />
+        ))}
+      </>,
+    )
+
+    expect(container.firstChild?.textContent).toBe('lightvar(--colors-gray-1) darkvar(--colors-gray-1) bg.canvas')
+  })
+})