filter / backdropFilter tokens

[mike-shtil-loop]

Hi everyone,

We're getting into Panda more and more and find it a very compelling option. However coming from Stitches, some missing functionality was discovered around semantic filter tokens.

Example of desired behavior:

// definition
theme: {
  extend: {
    tokens: {
      filters: {
        highlight: `brightness(1.05)`
      }
    }
  }
}

// then the use
<div className={css({filter: 'highlight'})} />

In Stitches, it's possible to define custom token namespaces for this purpose, however in Panda it does not seem straightforward.

Is it desirable to add filters as an official namespace? Is there another recommended userland solution? I also saw there are built-in utilities for various filter functions but those seem to focus on native values, not tokens.

I only found an old unanswered discussion - hope it's ok I'm bringing this up again. #1169

[anubra266]

@mike-shtil-loop something like this is ok
https://play.panda-css.com/LDMayVsuO2?tab=config

[mike-shtil-loop]

@anubra266 thank you for this tip - a custom utility does some of what I need, however:

1. it doesn't support themes
2. the value is interpolated directly, not using a custom CSS property token

Could Panda get a filters theme token like Stitches? I don't mind helping implement this