Question on usage: @pandabox/define-theme

[jimmymorris]

Hello!

I just wanted to make sure I understand the usage around the defineTheme and its purpose. It's not to help define the config but add stricter typing to the theme?

I'm unsure what to do with const config = theme.build() once that's run. Do I use config in the defineConfig settings? It seems I still need to update the defineConfig function as if I'm not using pandabox at all.

Code examples below:

define-theme.ts file

import { defineTheme } from '@pandabox/define-theme';
import pandaBase from '@pandacss/preset-base';
import { externalTokenObj, externalSemanticTokenObj, externalTextStylesObj } from '@external/tokens'

const { conditions, utilities } = pandaBase;

const t = defineTheme();

export const LegacyTheme = t
  .conditions(conditions)
  .tokens(externalTokenObj)
  .semanticTokens(externalSemanticTokenObj)
  .textStyles(externalTextStylesObj)
  .utilities(utilities);

preset.ts file

import { definePreset, defineSemanticTokens, defineTextStyles, defineTokens } from '@pandacss/dev';
import pandaBase from '@pandacss/preset-base';

import { externalTokenObj, externalSemanticTokenObj, externalTextStylesObj } from '@external/tokens'

const { conditions, utilities } = pandaBase;

export const ConstellationLegacyPreset = async () => {
  return definePreset({
    conditions,
    utilities,
    theme: {
      tokens: defineTokens(externalTokenObj),
      semanticTokens: defineSemanticTokens(externalSemanticTokenObj),
      textStyles: defineTextStyles(externalTextStylesObj),
    },
  });
};

Thanks for all you for the Panda CSS community!

[astahmer]

honestly this '@pandabox/define-theme' package was mostly an experiment to see how far I could go to make the config type-safe

conclusion is that there's too many limitations (values from utility using functions can't be inferred, can't infer preset values, can't infer colorPalette..)

I'll remove it from the main README and add a note in the packages/define-theme/README

---

this approach works better to get type-safety in your config recipes