Token doesn't work with some JSX Style Props

[Emiliano-Bucci]

I'm using Nextjs and after generating the JSX Style components using the codegen it seems that we can't use the tokens with lots of properties.

I've defined a set of colors inside panda.config.ts, theme.extend.tokens.colors, for eg:

colors: {
   primary: { value: "#7B5800" },
}

but this can't be used, for example, to target the color property like in the following snippet:

import { Box } from "../../styled-system/jsx";

 <Box color="primary">Box</Box>

nor even work the panda defined colors

import { Box } from "../../styled-system/jsx";

<Box color="rose.50">Box</Box>

The only property I was able to use was backgroundColor

Any ideas?

[anubra266]

@Emiliano-Bucci could you create a stackblitz repo so it's easier to debug. You can start with this
https://stackblitz.com/edit/vitejs-vite-lfwyue?file=src%2FApp.tsx&terminal=dev

[Emiliano-Bucci]

It seems there was a problem after installing panda in an existing codebase. After creating a project following the docs it worked fine!