How to style a component with multiple variants, themes and states.

[thedanchez]

Hello, I'm looking for a library (like macaron) that compiles down to native CSS but also allows for token exporting for my custom UI component library. The thing I'm looking to accomplish is based on the following. My UI component library's theme is based on two things:

// your typical light vs dark mode
export type ColorMode = "light" | "dark";

// the density value affects spacing, padding, margin, font-sizes, line-height, etc. across all custom components
export type Density = "narrow" | "regular" | "wide"; 

Now with those two things defined, let's imagine trying to make a custom Button component:

// imagine a button with multiple variants: primary | secondary | etc.
// and also include the aforementioned theme dimensions: colorMode and density
// I want to do styling for all the possible button states (default, hover, active, focus, etc.) like the following:

styleVariants({
  borderRadius: 4, // applies to all variants
  primary: {
    color: { light: "...", dark: "..." },
    padding: { narrow: ..., regular: ..., wide: ... },
    ":hover": {
      color: { light: "...", dark: "..." },
      padding: { narrow: ..., regular: ..., wide: ... }
    },
    ":disabled": {
      color: { light: "...", dark: "..." },
      padding: { narrow: ..., regular: ..., wide: ... }
    }
  },
  secondary: {
    color: { light: "...", dark: "..." },
    padding: { narrow: ..., regular: ..., wide: ... },
    ":hover": {
      color: { light: "...", dark: "..." },
      padding: { narrow: ..., regular: ..., wide: ... }
    },
    ":disabled": {
      color: { light: "...", dark: "..." },
      padding: { narrow: ..., regular: ..., wide: ... }
    }
  },
})

Is something like the above possible with macaron? I love the simplicity of being able to express the dynamic, theme-related values in that object structure format. Like so.

color: { light: "blue" , dark: "aqua" },
// or
padding: { narrow: 4, regular: 8, wide: 16 }

On top of all of that, I would love the ability to be able to export the tokens for said component so that consuming application developers can do tokens.button.primary.color or tokens.button.primary.padding and get the appropriate underlying value based on the active colorMode or density value.

[thedanchez]

@Mokshit06 do you know if the above is possible with the current set of macaron APIs?

[Mokshit06]

Hi, so in this API how do you expect to set the color mode or density? This exact API isn't possible with macaron but maybe something similar could be possiblw

[thedanchez]

So the colorMode and density will be provided via the Context API (i.e. from React/Solid) -- because the end-user can manually change those values in the UI for their personal user-preference settings