Ability to Override Specific Design Tokens in Panda CSS

[xalidmalik]

Description

I would like the ability to override certain design tokens in Panda CSS without extending and including the default tokens in the autocomplete.

Problem Statement/Justification

Currently, when extending the design system in Panda CSS to add custom tokens, the default tokens are also included in the autocomplete suggestions. This makes it difficult to distinguish between custom and default tokens, leading to confusion and potential errors. Being able to override specific tokens would streamline the development process and ensure the design system is more tailored to individual projects.

Proposed Solution or API

Provide an option to override specific design tokens instead of extending. This could be achieved by adding a configuration setting that allows developers to specify which tokens should be overridden. Here is an example of what the configuration might look like:

// panda.config.js
  theme: {
    // Override specific tokens
    tokens: {
        radii: {
             0: { value: '0px' },
             1: { value: '4px' },
             2: { value: '8px' },
             3: { value: '12px' },
             4: { value: '16px' },
             },
        },
    // Preserve other default tokens
  },

Alternatives

An alternative would be manually redefining all tokens, including those that don’t need changes, but this is inefficient and prone to errors. Another alternative could be using a different solution that allows for more granular token management, but this would require significant changes to the existing codebase.

Additional Information

No response

[astahmer]

this should be doable with hooks once #2372 lands