Sprinkles: how to use responsiveArray?

[graup]

The documentation does not have an example for this, but I thought I could use this like this:

const colorStyles = createAtomicStyles({
  conditions: {
    lightMode: {},
    darkMode: { '@media': '(prefers-color-scheme: dark)' }
  },
  defaultCondition: 'lightMode',
  responsiveArray: ['lightMode', 'darkMode'],
  properties: {
    color: {
      primary: ['red', 'blue']
    },
  }
});

But the array values get compiled into the same css class. What's an example for the use of responsiveArray?

[markdalgleish]

Judging by your example, I think there's a bit of confusion about how Sprinkles works. Sprinkles generates an atomic class for each combination of key/value and condition. You can't generate responsive combinations up front—by design, since this is an atomic framework.

So, your example should be configured like this:

const colorStyles = createAtomicStyles({
  conditions: {
    lightMode: {},
    darkMode: { '@media': '(prefers-color-scheme: dark)' }
  },
  defaultCondition: 'lightMode',
  responsiveArray: ['lightMode', 'darkMode'],
  properties: {
    color: ['red', 'blue', 'green', 'orange', 'purple'],
  }
});

Note that the primary key was removed. I've also added more color values to make it clear that it's not a responsive array.

With this config, I can now write dark mode styles in two different ways:

// Object syntax
const className = atoms({ color: { lightMode: 'red', darkMode: 'blue' } })

// Responsive array syntax
const className = atoms({ color: ['red', 'blue'] })

Personally, I wouldn't recommend using responsive array syntax in this case. I think it's unclear what it means when reading the code.

Going back to your original example, if you wanted to configure a named responsive value like primary, I'd do it like this:

const primaryColor = { lightMode: 'red', darkMode: 'blue' };

const className = atoms({ color: primaryColor });

[graup]

Thanks for the explanation! Yes, seems I hadn't fully grasped the atomic nature of Sprinkles. It means we shouldn't set or compose values in the stylesheet, but at the call site. So to use responsive values without thinking about them, we can define variables like you said.