combinedVariants/variantShorthand option for recipes?

[wuz]

Considering building something like this internally for our design system, but was wondering if it would be a good fit for the recipes library.

I know there is the compoundVariant field, but one thing I'd like to do is provide a "shorthand" for specific variants on a recipe, something like this:

const button = recipe({
 // ...
 // setup some variants
 variants: {
   bg: {
     blue: { background: "blue" },
     red: { background: "red" },
   },
   text: {
     white: { color: "white" },
     yellow: { color: "yellow" },
   },
 },
 variantShorthand: {
   theme: {
     error: {
       bg: "red",
       text: "white"
     },
   },
 },
});

// would allow calling something like this:
button({ theme: "error" })
// which would resolve down to the same thing as this:
button({ bg: "red", text: "white" })

I think I'm going to build this out as a small utility for the system I'm working on, but if there is interested, I'd love to add it to the recipe library.

[6mint]

I think I know what you're getting at, but it might make using the recipe variants slightly ambiguous.
Would button({ theme: "error", text: "yellow" }) be allowed (with "yellow" taking precedence) or would
using button({ theme: "error" }) exclude additional properties?
Another possibility would be to exclude only properties used by the shorthand. So in case of an additional variant like "size" (m | s) button({ theme: "error", text: "yellow" }) would be disallowed while button({ theme: "error", size: "s" }) would work.

I like the thought though — did you come up with a utility for it?

[wuz]

That's a great question. I started working on adding this as a utility, but haven't had time to finish it. I think it should be like your first example - using text: "yellow" would override any combined variant properties, but I'll see what makes the most sense as I build it out locally!