Define component level tokens

[peterbartels]

How can I define and use component level (semantic) tokens in Panda CSS?

For example divider-thickness-small or card-background-primary?

[kiruushaaa]

Did you mean that?
playground
panda docs

[peterbartels]

I want to use a custom structure as well so not put the card in the color but rather make card the root of a token structure, and then use: {card.background.primary}

[kiruushaaa]

As far as i remember you can use bg: 'card.background.primary' without functions but in a case a property isn't complex. If it not the key I assume we should wait for help from core guys

ps. Recipes (maybe slot ones?) seem to be more convenient 🤔

[peterbartels]

Yes @kiruushaaa card.background.primary works because it's reading it from colors.

To put it differently I would be nice to define a custom schema. For example Spectrum has a component based token schema where tokens like this structure are defined: checkbox-control-size-large .

However as I can see it's not possible to add them to the current token preset schema of panda.