Generating style for combinations of multiple variants conditionally

[theMasix]

Description

There is a need to add conditional styling (Or combinational style generation) to PandaCSS.

Problem Statement/Justification

We're refactoring a UI Library that is built by Emotion using Panda. We're shipping src file so the consumer (App) project can eliminate and purge unused styles at build time.

Suppose we're building Button component. It has 5 colors and 3 variants (filled, outlined, text),

For outlined variants:

• We want to set border-color based on the current color of the component

For filled variants:

• We want to set background-color based on the current color of the component

Our Previous Solution

We used to have emotion so we could apply style conditionally. We had developed a GenerateBorderColor and GenerateBackgroundColor utilities and used them to set corresponding styles based on passed colors.

here is the generateButtonBackgroundColor function (Please look at the default case where we're selecting color dynamically):

const generateButtonBackgroundColor = ({
  color,
  theme,
  variant,
}: GenerateButtonBackgroundColorParams): string => {
  const { colors } = theme;
  switch (variant) {
    case 'text':
    case 'outlined':
      return 'transparent';
    case 'elevation':
      return colors.background.default;
    case 'contained':
    default:
      return colors[color].default;
  }
};

There's a need to have such function in PandaCSS as well, otherwise we need to write 15 (3 variants * 5 colors) compoundVariants styled to handle such a simple styling.

Please correct me if there is a right way to handle this requirement already.

Proposed Solution or API

Since PandaCSS API has so many differences from Emotion or Styled Component solutions, I don't have a precise or exact solution to this challenge.

think referencing the theme values is the key solution to this problem. Something like this API:

import { defineConfig } from '@pandacss/dev';

export default defineConfig({

  // ... Other Config Stuff
  
  theme: {
    extend: {
      semanticTokens: {
        colors: {
          primary: {
            value: {
              base: '{emerald.500}',
            },
          },
          secondary: {
            value: {
              base: '{indigo.500}',
            },
          },
          danger: {
            value: {
              base: '{red.500}',
            },
          },
        },
      },
    },
  },
});

And then we can create recipe like this:

export const buttonRecipe = defineRecipe({
  className: 'button',
  description: 'The styles for the Button component',
  base: {
    color: 'neutral.700',
  },
  variants: {
    color: semanticColors,
    variant: {
      filled: {
        bg: "semanticColor",
      },
      outlined: { borderColor: "semanticColor" },
      text: {},
    },
  },

  defaultVariants: {
    variant: 'filled',
  },
});

Alternatives

No response

Additional Information

No response

[astahmer]

I think you're looking for the colorPalette property https://panda-css.com/docs/guides/virtual-color

[theMasix]

@astahmer Thanks for responding.

Can we set colorPalette by a React component prop? e.g. passing a color prop as the colorPallete value?

[astahmer]

yes you can ! the colors palette values are treated just like any other color token from your panda.config theme

I'm on phone so I can't really provide an example, you should probably ask for some in the Panda discord, there's a ask-ai channel that should be pretty helpful here !