Recommended approach to multi-component variants?

[Sid-Turner-Ellis]

What's the recommended approach for variants that have multiple child components?

e.g.

const MultiPartComponent = () => {
  return (
    <div className={cva({variant: "primary"})}>
      <p className={cva({variant:"primary")} > some text </p>
    </div>
  )
}

I'm assuming we should just duplicate the variants in two separate cva calls but wanted to double check

[Sid-Turner-Ellis]

Chakra UI has a nice API for this: https://chakra-ui.com/docs/styled-system/component-style#usemultistyleconfig-api

[Sid-Turner-Ellis]

@airtonix The file your referencing (https://github.com/joe-bell/cva/pull/176/files#diff-3a66adbf6d37ff730542d440d83e17ca38c1e7fbb2f821cb0d27781d03f26361) was the solution to my issue of wanting variants to have variants describe styles for multiple components

[joe-bell]

Writing a bit more here, just haven't merged yet
#176

[Sid-Turner-Ellis]

Ah thanks - so you recommend setting css variables in each variant, makes sense.

Are you passing class names purely for readability or is there another motivation for this? (I have just been putting them in a single string)

[joe-bell]

so you recommend setting css variables in each variant, makes sense.

Absolutely!

Are you passing class names purely for readability or is there another motivation for this? (I have just been putting them in a single string)

Just personal preference really

[airtonix]

Ah thanks - so you recommend setting css variables in each variant, makes sense.

@Sid-Turner-Ellis where are you seeing that ?

All I see is this: https://github.com/joe-bell/cva/pull/176/files#diff-3a66adbf6d37ff730542d440d83e17ca38c1e7fbb2f821cb0d27781d03f26361

which is not css variables, but just what you initially opened the thread with.

[airtonix]

I think what you really want is PandaCSS slot recipes: https://panda-css.com/docs/concepts/slot-recipes or if you don't want css-in-js, https://www.tailwind-variants.org/docs/introduction#split-components-into-multiple-slots

[Sid-Turner-Ellis]

The location of the link has changed which might be why you're not seeing it, but the solution suggested was to create variables for the variant and then use those in the other components, unfortunately I only have a simple example, the original one was far better as it contained multiple components, maybe @joe-bell can put it in the docs or something?

const profileStatBoxVariants = cva(
  "relative p-[1.5px] rounded overflow-hidden",
  {
    variants: {
      colorScheme: {
        violet: [
          "[--profile-stat-box-color:theme(colors.brand.primary.DEFAULT)]",
        ],
        emerald: ["[--profile-stat-box-color:theme(colors.emerald.400)]"],
        white: ["[--profile-stat-box-color:theme(colors.brand.white.DEFAULT)]"],
      },
    },
    defaultVariants: {
      colorScheme: "violet",
    },
  }
);

type ProfileStatBoxProps = {
  title: string;
  stat: string | number;
  description: string;
} & VariantProps<typeof profileStatBoxVariants>;
export const ProfileStatBox = ({
  title,
  stat,
  description,
  colorScheme,
}: ProfileStatBoxProps) => {
  return (
    <div className={profileStatBoxVariants({ colorScheme })}>
      <div className="absolute inset-0 bg-gradient-to-b from-[--profile-stat-box-color] to-brand-gray" />
      <div className="h-full relative flex flex-col items-center justify-center bg-brand-navy gap-1 rounded p-2.5">
        <p className="text-center text-brand-white font-accent">{title}</p>
        <p className="text-center text-4xl text-[--profile-stat-box-color] font-accent">
          {stat}
        </p>
        <p className="text-center text-brand-gray font-accent">{description}</p>
      </div>
    </div>
  );
};