Tokens for aspectRatio

[osdiab]

Description

I want to add a token for setting aspectRatio to the dimensions of our logo, can do it with custom CSS variables but would be nice to just be able to define that in a semantic token like the other types of values.

Problem Statement/Justification

Not a big deal but just seems like there's no natural place to put this kind of thing at the moment.

Proposed Solution or API

allow aspectRatio as a token key in panda config

Alternatives

No response

Additional Information

No response

[osdiab]

An alternative is to just in general have a place for grab bag variables that can be referenced elsewhere. Though to be honest it's not that big a deal for me, just seemed storing values that don't fall into the predefined categories didn't have a natural place to do so.

[brendon1555]

Can you give an example of what you want to achieve? And how it's not working in panda. I'm not sure I understand the issue you are facing.

[osdiab]

in panda.config.ts i can add tokens for the provided buckets - colors, sizes, spacing, etc. but if there is a category that isn't captured in that list, like aspectRatios, then i cant store values in the same way without typescript yelling at me.

i can add custom CSS variables by defining them by hand, but was thinking that it would be helpful if i could use the same patterns and tooling that panda provides for other common values, to stuff like the aspect-ratio property; or at least be able to register tokens that dont fall into the standard buckets for reference using the token(...) syntax.

[brendon1555]

While it won't provide css vars, you can use utilities to define custom aspectRatios.
See: https://panda-css.com/docs/customization/utilities

The preset-base preset comes with a few defined there out of the box, and you can extend it.

https://github.com/chakra-ui/panda/blob/main/packages/preset-base/src/utilities/layout.ts#L4-L15