Expose class names and vars

[aspirisen]

Problem Statement

Hello, rainbow sprinkles usually used to define system styles, for example controlling width/height, paddings, margins etc. It could serve as a single source for such properties. However, there is no way do get class names and vars from rainbow sprinkles and reuse them.

Proposed Solution

Expose class names and vars, something like that:

import { assignVars } from '@vanilla-extract/css'
import { recipe } from '@vanilla-extract/recipes'
import { defineProperties, createRainbowSprinkles } from 'rainbow-sprinkles'

const vars = {
    space: {
        none: '0',
        small: '4px',
        medium: '8px',
        large: '16px',
    },
}

const responsiveProperties = defineProperties({
    dynamicProperties: {
        width: vars.space,
        height: vars.space,
    },
})

export const rainbowSprinkles = createRainbowSprinkles(responsiveProperties)

export const icon = recipe({
    base: [rainbowSprinkles.classNames.width],
    variants: {
        size: {
            small: {
                vars: assignVars(rainbowSprinkles.vars, { width: '$small', height: '$small' }),
            },
            superBig: {
                vars: assignVars(rainbowSprinkles.vars, { width: '30px', height: '30px' }),
            },
        },
    },
})

This is a rough implementation idea, probably you will need to have access to static properties as well