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

// 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"; 

// 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: ... }
 }
 },
})

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