css invalid property value when define tokens

[tanangular]

Description

define "tokens" in panda.config (or config in playground)

export const config = defineConfig({
theme: {
tokens: {},
extend: {} ,
},
});

I found css "invalid property key".

Link to Reproduction

https://play.panda-css.com/1vH08K6zOU

Steps to reproduce

see in playground.

JS Framework

React

Panda CSS Version

0.6.0

Browser

Microsoft Edge Version 114.0.1823.67, Google Chrome 114.0.5735.198

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[segunadebayo]

Hey @tanangular,

You should keep tokens within the theme.extend keyword if you intend to extend the default theme tokens and add yours.

Adding the token directly on the theme overrides all tokens.

We'll do a better job explaining this in the docs.