Multiple values in styled defaultVariant

[iamursky]

I’m trying to achieve variant composition as shown in the example below, but the styled function’s defaultVariant option only accepts a single value. Since the Button component can take an array of variants <Button variant={["solid", "md"]} />, I’m wondering why defaultVariant doesn’t accept an array as well.

import { makeTheme } from "dripsy";
import { Pressable, styled, Text } from "dripsy";

const theme = makeTheme({
  buttons: {
    solid: {
      color: "white",
      backgroundColor: "primary",
    },
    md: {
      fontSize: "p",
      paddingX: 16,
      paddingY: 8,
    },
  },
});

const Button = styled(Pressable, {
  themeKey: "buttons",
  defaultVariant: ["solid", "md"], // <- accept a single value only
})();

const ButtonText = styled(Text)({
  color: "inherit",
  fontFamily: "inherit",
  fontSize: "inherit",
  textDecorationLine: "inherit",
});

function UsageExample() {
  return (
    <Button>
      <ButtonText>Change privacy settings</ButtonText>
    </Button>
  );
}

[axelvalles]

Hey @iamursky & Dripsy team 👋

I recently ran into this same limitation regarding defaultVariant only accepting a single value. To solve this, I built a small library that enables multi-variant composition with full support for default variants as arrays — exactly like your variant={["solid", "md"]} example.

🔧 Library: dripsy-variants

The idea is to compose variants in layers while keeping compatibility with Dripsy’s theme system.

🧩 Internally it:

Merges multiple variant styles using the theme key

Supports array-based defaultVariants

Keeps props clean and simple

I'd love to contribute this logic or see if it could be integrated directly into Dripsy. Let me know if this is something you'd be open to discussing or reviewing.

Cheers!