Map Sprinkles with styleVariants

[pweimann]

Hello everyone,

I was trying to map my sprinkles to variants. My goal is to build a box component and use the variants as component props. Is there any way how I can achieve that?

Similar to the styleVariants map function?

`
import { style, styleVariants } from '@vanilla-extract/css';

const palette = {
primary: 'blue',
secondary: 'aqua'
};

export const variant = styleVariants(
palette,
(paletteColor) => ({ background: paletteColor })
);
`

Thank you very much in advance!

Bye 👋

[nabigraphics]

I don't know if I understand this correctly, You can also use sprinkles in styleVariants by using sprinkles for the palette value and applying them as an array to the second argument of styleVariants as shown below.

styles.css.ts

const palette = {
  primary: sprinkles({ backgroundColor: 'black', color: 'white' }),
  secondary: sprinkles({ backgroundColor: 'gray500', color: 'white' }),
};

export const variant = styleVariants(palette, (styles) => [styles]);

App.tsx

import * as styles from './styles.css';

const App = () => {
  return (
    <div>
      <div className={styles.variant.primary}>Primary Style</div>
      <div className={styles.variant.secondary}>Secondary Style</div>
    </div>
  );
};

[nabigraphics]

Additionally, if you don't use styleVariants but want to use sprinkles with the Box component, you might want to check out https://github.com/wayfair/rainbow-sprinkles or https://github.com/TheMightyPenguin/dessert-box. (Maybe...?😢)

[pweimann]

Hi @nabigraphics,

Thanks for your response!

While the first version is a possibility, I was hoping to generate variants without explicitly mapping a "palette" and instead utilize all available values of the sprinkles attribute. Although the "dessert box" would work perfectly, I'm using Vue and I couldn't find a similar dependency, so I would like to implement a simple box component in Vue. However, I need to generate variants of sprinkles attributes.

Thank you for your effort.

Have a great day! :)