How to apply conditional sprinkles across multiple variants, states and themes?

[thedanchez]

I just recently discovered vanilla-extract and I really like what I have seen thus far! I'm in the process of creating a component library and am working on the theme for library. For context, the theme I'm trying to implement has two axes to it:

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

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

With the above, I'm looking to do something like the following for a custom button component with multiple variants:

// imagine a button with multiple variants: primary | secondary
// and also include the aforementioned theme dimensions: colorMode and density
// I want to do styling for all the possible button states 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: ... }
    }
  },
})

I'm pretty sure I have to make use of sprinkles in some way, shape or form since it supports the conditional styling. I just don't know how to achieve the complex conditional styling for both colorMode and density in all button states like default, hover and disabled. Does anyone know how I can achieve this? Is this even possible currently?

[thedanchez]

@askoufis do you know if the above is possible using @vanilla-extract/sprinkles ?

[thedanchez]

@mattcompiles haven't considered that approach actually. Not sure I have a clear idea of it though exactly.

[mattcompiles]

@aquarazorda's example below shows something like what I mean. This is a very rough example. I'd recommend reading through all the theming docs to get an idea of what's possible.

export const [lightThemeClass, vars] = createTheme({
  color: {
    primary: 'blue',
    primaryHover: 'darkblue'
  },
})

export const darkThemeClass = createTheme(vars, {
  color: {
    primary: 'red',
    primaryHover: 'darkred'
  },
})

const colorModeProperties = defineProperties({
  properties: {
    backgroundColor: vars.color,  
  }
})

// ...

export const buttonRecipe = recipe({
  variants: {
    variant: {
      primary: [
        // Using your current primary background color from sprinkles
        sprinkles({ backgroundColor: primary }),
        {
          ':hover': {
             // Or reference from the theme vars directly
             backgroundColor: vars.primaryHover
          }
        }
     ]
  },
  defaultVariants: {
    variant: "primary",
  }
});

[thedanchez]

So if I needed to handle different density variations then that would entail having to create separate themes for those as well yes?

[mattcompiles]

Yeah you could model it that way. Themes are just groupings of CSS variables so having multiple isn't an issue.

[airtonix]

@mattcompiles in your example, what is the purpose of this:

const colorModeProperties = defineProperties({
  properties: {
    backgroundColor: vars.color,  
  }
})

nvm. it's mentioned here: https://vanilla-extract.style/documentation/packages/sprinkles/

[aquarazorda]

I've finally figured it out, I think. I'm not sure if there's a better way or not, but I've managed to swap out Light/Dark themes with this one. https://vanilla-extract.style/documentation/packages/dynamic/

Basically, I've got this const

export const themeVars = createThemeContract({
	colors: {
		hover: null,
		textPrimary: null,
		textSecondary: null,
		textTertiary: null,
		bg: null,
		bgSecondary: null,
		bgButton: null,
		borderMain: null,
	}
});

and then two consts, something like this -

const colors = {
	hover: '#555657',
	textPrimary: '#fff',
	textSecondary: '#787878',
	textTertiary: '#AAAAAA',
	bg: '#222323',
	bgSecondary: '#222323',
	bgButton: '#555657',
	borderMain: '#787878',
};

export const darkTheme = {
	colors
};

Then in root I'm changing it like this -

export const [themeMode, setThemeMode] = createSignal('dark');

export default function Root() {
	let html;
	const value = createI18nContext(languageDict, 'en');

	onMount(() => {
		createEffect(() => setElementVars(html, themeVars, themeMode() === 'dark' ? darkTheme : lightTheme));
	});

	return (
		<Html lang="en" ref={html}>

setElementVars expects an object as a third argument, that's why I'm not using createTheme on dark and light themes, it returns string and an object with var names.
I'm not sure if there's a better way.
I hope it helps.

[thedanchez]

Thanks for taking the time to look into this @aquarazorda! I really appreciate the effort.

Yeah, I was wondering if there was a way to do this at compile time instead of at runtime with the use of dynamic is the thing. Considering the sprinkles allows for declaring conditions, I would think it would be possible to allow for nesting/cascading conditions but I haven't seen any examples of it so far which makes me worried it's not possible to do so (without going the runtime route I mean). From your example I would have to do the same for density as what you're doing for colorMode which would make things look pretty hairy I think.