How can dropShadows be defined as a TokenCategory?

[k35o]

Hi I want to use the filter property in panda-css.

According to the documentation, if I set filter to 'auto', the filter will be 'var(--blur, ) var(--brightness, ) var(--contrast, ) var(--grayscale, ) var(--hue- rotate, ) var(--invert, ) var(--saturate, ) var(--sepia, ) var(--drop-shadow, )'.
var(--drop-shadow, ) is set to the value given to dropShadow, and the value to be given is written to make use of dropShadows in the Token Category.

Prop	CSS Property	Token Category
filter	filter	none
blur	--blur	blurs
brightness	--brightness	none
contrast	--contrast	none
grayscale	--grayscale	none
hueRotate	--hue-rotate	none
invert	--invert	none
saturate	--saturate	none
sepia	--sepia	none
dropShadow	--drop-shadow	dropShadows

However, the dropShadows does not appear except here.
If I want to use dropShadows as a token, how should I describe the configuration file?

[anubra266]

@k35o This is how you'd use it. Seems we need to update the types for the config though.
https://play.panda-css.com/IdIUCE-bGR

[anubra266]

Yes you can @k35o

[anubra266]

@k35o I think instead of accepting only strings we should accept an object just like shadow.

Then see this for transform reference:

panda/packages/token-dictionary/src/transform.ts

Line 14 in adb2484

export const transformShadow: TokenTransformer = {

This is the only difference to keep in mind:

[k35o]

dropShadows can be added to Tokens and accept array and object like shadow.
#2678

[k35o]

@anubra266
#2681 seems to have been Closed, what is your policy on this?

[anubra266]

@k35o I’d recommend that you add the drop shadow tokens to your utilities for now.
In our end, we’ll remove dropShadows from the preset.