More control over configuration extension

[boar-is]

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

[boar-is]

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

[boar-is]

@astahmer, as stated here, the feature request is released. However, returning to my original question, I can't figure out how to remove all the colors that @pandacss/preset-panda provides.

I have the following configuration and it generates both @pandacss/preset-panda and myPreset colors:

const myPreset = definePreset({
  theme: {
    extend: {
      semanticTokens: {
        colors: semanticColors
      },
      tokens: {
        colors: colors
      }
    }
  }
})

export default defineConfig({
  // ...
  presets: ['@pandacss/preset-panda', myPreset],
  hooks: {
    'config:resolved': ({ config, utils }) => {
      return utils.omit(config, ['theme.colors'])
    },
  },
})

I found cschroeter/park-ui#227 but the solution is pretty simple because Park UI uses the base preset and basically duplicates a lot from the @pandacss/preset-panda.

Could you please provide an example of how to keep custom colors only? I think the current solution of duplicating other tokens is inconvenient. For now, preset managing is kinda unclear.

Thanks.

[astahmer]

import { defineConfig, definePreset } from '@pandacss/dev'

const myPreset = definePreset({
  theme: {
    extend: {
      semanticTokens: {
        colors: {
          accent: {
            5: { value: '{colors.green.500}' },
          },
        },
      },
      tokens: {
        colors: {
          green: {
            500: { value: '#0f0' },
          },
        },
      },
    },
  },
})

export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{tsx,jsx}', './pages/**/*.{jsx,tsx}'],
  exclude: [],
  outdir: 'styled-system',
  jsxFramework: 'preact',
  presets: ['@pandacss/preset-panda', myPreset],
  hooks: {
    'config:resolved': ({ config, utils }) => {
      // Remove every colors
      const updated = utils.omit(config, ['theme.tokens.colors', 'theme.semanticTokens.colors'])
      updated.theme ??= {}
      updated.theme.tokens ??= {}
      updated.theme.semanticTokens ??= {}
      
      // Only add those from your custom preset
      updated.theme.tokens.colors = myPreset.theme!.extend!.tokens!.colors
      updated.theme.semanticTokens.colors = myPreset.theme!.extend!.semanticTokens!.colors
      return updated
    },
  },
})