Opacity modifier typing error for strictTokens

[BorisZubchenko]

Description

When strictTokens is set to true, using opacity modifiers like red.500/40 produces a TypeScript error:

Link to Reproduction

see additional information

Steps to reproduce

1. strictTokens: true
2. css({ bg: 'red.500/40' })
3. TS2820: Type 'red.500/40' is not assignable to type PropOrCondition<'bg', ColorToken> | undefined. Did you mean 'red.500'?

JS Framework

React (TS)

Panda CSS Version

0.31.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

I can't give you a link to a reproduction because opacity modifiers don't work at all for reproductions:

Notice that the background is transparent.

[segunadebayo]

This is by design. We'll update the docs for the opacity modifier.

Opacity modifiers are considered a "design escape hatch" to prototype UIs quickly. The strict token mode enforces using only design tokens.

You could consider using bg: [red.700/40]