More control over configuration extension

[BorisZubchenko]

Description

I have a simple scenario:

1. I want my theme to be based on the preset-panda.
2. I want to overwrite (not extend) some tokens, i.e. colors.

{  bg: 'accent.5' } // ✅ Custom colors
{  bg: 'red.500' } // ❌ I don't want to have an access to the colors provided by Panda (Tailwind colors)

3. I want other tokens to be preserved, i.e. spacing.

---

Here's my configuration:

import { defineConfig } from '@pandacss/dev'

const pandaConfig = defineConfig({
  // ...
  theme: {
    semanticTokens: {
      colors:  {
        accent: {
          5: { value: '{colors.green.500}' }
        }
      }
    },
    tokens: { 
      colors: {
        green: {
          500: { value: { '#0f0' } }
        }
      }
    },
  },
})

export default pandaConfig

With this configuration, I can't use spacing tokens:

css({
  background: 'accent.5', // ok
  padding: '4', // outputs '4px', not '1rem'
})

Problem Statement/Justification

1. I was wondered why Park UI literally duplicated some of Panda's tokens. I think this is because they didn't have the ability to just extend from the preset-panda. It only extends preset-base, which lacks spacing tokens.
2. Tailwind allows this kind of extension. It can be harder to migrate.
3. It make the developer to duplicate "convenient" tokens from the preset-panda.

Proposed Solution or API

• To overwrite tokens, provide new ones:

{
  theme: {
    tokens: {
      colors: {
        red: {...}
      }
    }
  }
}

• To remove tokens, provide an empty object:

{
  theme: {
    tokens: {
      colors: {} // no more colors
    }
  }
}

• To extend tokens, use extend:

{
  theme: {
    extend: {} // already implemented
  }
}

Alternatives

• Duplicate tokens from the preset-panda.
• Extend, not overwrite. It creates typings mess (and I think increases the size of the output CSS file due to CSS variables).

[astahmer]

currently the solution is to just use javascript and pick/omit whatever you need, as described here

we thought of maybe making it easier with a syntax similar to the one you proposed but we're mostly waiting to see if there's enough demand before adding more features, maybe you could make it a feature request ? https://panda-css.canny.io/feature-request

[BorisZubchenko]

I thought this was a feature request :)

Anyway, I've created a feature request that links here:
https://panda-css.canny.io/feature-request/p/more-control-over-configuration-extension