Nested / complex conditions

[bradbarrow]

Say I want a different color on desktop and mobile but furthermore (for each of those) a different color for light/dark mode (4 colors total).

How might I achieve that?

// sprinkles.css.ts

import { createAtomicStyles, createAtomsFn } from '@vanilla-extract/sprinkles';

const colors = {
  red: 'red',
  blue: 'blue',
  greren: 'green',
  yellow: 'yellow',
};

const responsiveStyles = createAtomicStyles({
  conditions: {
    mobile: {},
    tablet: { '@media': 'screen and (min-width: 768px)' },
    desktop: { '@media': 'screen and (min-width: 1024px)' }
  },
  defaultCondition: 'mobile',
  properties: {
    color: colors,
  }
});

const lightDarkStyles = createAtomicStyles({
  conditions: {
    lightMode: {},
    darkMode: { '@media': '(prefers-color-scheme: dark)' }
  },
  defaultCondition: 'lightMode',
  properties: {
    color: colors,
  }
});

export const atoms = createAtomsFn(responsiveStyles, lightDarkStyles);

// usage
import { atoms } from 'sprinkles.css';

export const wrapper = atoms({
  color: {
    // Maybe nest them?
    mobile: {
      lightMode: 'red',
      darkMode: 'yellow',
    },
    // which way?
    lightMode: {
      desktop: 'blue',
      mobile: 'green'
    }
});

Is this possible with just the above APIs or might I have to get cleve with composition?

Additional question

Also, even without wanting to target them all together, if I have color as a property of responsiveStyles and lightDarkStyles, can this ever work? Or must they always be exclusive?

[timoclsn]

I think I'm having the same question. I would also like to combine conditions in sprinkles for the same properties (in my case colors). In my use case it would be combining light / dark mode and e.g. hover:

const styles = atoms({
    background: {
         lightMode: 'white',
         darkMode: 'black',
        hover: {
            lightMode: 'red',
            darkMode: 'blue',
        }
    }
});

To achieve the same that I would do in TailwindCSS with:

<button class="bg-white dark:bg-black hover:br-red dark:hover:bg-blue">Button</button>

Is that possible at the moment – if yes, how do I set that up?

[rtkaaho]

One workaround for this is to create two themes (light and dark) and use the css vars as colors instead of the hardcoded colors. Then just include the hover, active, focus, etc. conditions

[timoclsn]

I recently learned that that you can't nest the conditions but one can have multiple queries:

const colorProperties = defineProperties({
    conditions: {
        lightMode: {},
        darkMode: { '@media': '(prefers-color-scheme: dark)' },
        lightModeHover: {
            '@media': '(prefers-color-scheme: light)',
            selector: '&:hover'
        },
        darkModeHover: {
            '@media': '(prefers-color-scheme: dark)',
            selector: '&:hover'
        }
    },
    defaultCondition: 'lightMode',
    properties: {
        color: vars.colors,
        background: vars.colors
    }
});

So you can do:

const styles = sprinkles({
    background: {
         lightMode: 'white',
         darkMode: 'black',
         lightModeHover: 'red',
         darkModeHover: 'blue'
    }
});

[QuentinRoy]

@mattcompiles, @markdalgleish, may I ask if this is the recommended way?