strictTokens with keywords

[ksjogo]

Description

Currently enabling strictTokens disallows the use of CSS keywords like inherit, unset, etc.
One can redefine these keywords as tokens to allow developers to use them, but that's rather suboptimal.

Problem Statement/Justification

Even in strict token mode, standard CSS keywords should be allowed.

Proposed Solution or API

Change TypeScript types to allow CSS keywords for tokens.

Alternatives

No response

Additional Information

No response

[astahmer]

please use the [xxx] arbitrary values escape-hatch for those
https://play.panda-css.com/lFXzleFNXf/EsCOwQYmlM

https://panda-css.com/docs/concepts/writing-styles#stricttokens

[Jonas-C]

Would it be possible to extend strictTokens with a possible third value, like extends? The escape-hatch is nice, but it doesn't catch typos and you lose out on autocomplete.

[astahmer]

can you show an example of what you'd like that to do ?
https://play.panda-css.com/

[Jonas-C]

https://play.panda-css.com/MTvXkaWNEx

Just this. Wouldn't it be possible to simply accept both tokens and "standard" css values?

[Jonas-C]

The alternative would be to define standard css values as tokens, but this would in turn increase the css size without any gain.

[astahmer]

text styles is not a valid CSS property, inherit wouldnt do anything in this case
do you have another example ?

https://panda-css.com/docs/theming/text-styles

[Jonas-C]

Oh, sorry! I confused textStyles with fontSize.
https://play.panda-css.com/ksns3TrYaD
This is the exact same thing, only with color.

The end result would be that color accepts ColorToken | Property.Color