Allow some certain common CSS values in strict mode, such as: auto, inherit, initial

[s97712]

Description

When strict token mode is enabled, it prohibits the use of widely utilized values such as auto, inherit, and initial. This restriction hampers the flexibility of the strict mode, as these values are essential for various design scenarios and are integral to the cascade and inheritance mechanisms of CSS.

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-lfwyue?file=src%2FApp.tsx&terminal=dev

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

JS Framework

No response

Panda CSS Version

0.41.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[segunadebayo]

Please add these css globals to the tokens you want to allow them in.

  theme: {
    extend: {
      tokens: {
        colors: {
          inherit: { value: 'inherit' },
          initial: { value: 'initial' },
          auto: { value: 'auto' },
        },
      },
    },
  },

It might feel inconvenient but puts you in better control of how you want to control the strictness