Add `createVarName` for creating scoped CSS vars

[vanilla-extract-css]

Add `createVarName` for creating scoped CSS vars

[damianstasik]

@markdalgleish thank you! I think we can close this issue.

[markdalgleish]

We could potentially also provide runtime APIs for setting vanilla vars on elements.

[mattcompiles]

@duarten I think your use-case is already catered to by the createInlineTheme API?

[markdalgleish]

I'd probably model this as something like getVarName that accepts a var created by vanilla-extract.

[markdalgleish]

On that last point, thinking we could provide APIs like this:

setElementVar(el, themeVars.mode, 'dark')

assignElementVars(el, themeVars.space, {
  small: '4px',
  medium: '8px',
  large: '12px'
})

[duarten]

I think I have another use case for such an API. Consider a Responsive<Height>>, given

interface Responsive<T> { mobile: T, tablet: T, desktop: T }

type Height = 1 | 2 | 3 ... | "full"

To minimize the amount of classes generated, we could want to generate the following styles:

export const heightMobileVar = createVar();
export const heightTabletVar = createVar();
// ...
export const responsiveHeight = style({
  '@media': {
    'screen': {
      height: heightMobileVar,
    },
    'screen and (min-width: 768px)': {
      height: heightTabletVar 
    },
    // ...
  },
});

In my component, I would map from Responsive<Height> to an assignment of theme values to those height variables. Something like the following:

// Theme values
const heights = {
  1: "1px",
  2: "2px",
  // ...
  fill: "100%",
} as const;

// createVars would be a new API
const heightVars: Record<screens, string> = createVars({ ... });

// assignVars would return a CSSProperties object.
<Component style={assignVars(heightVars, mapResponsive(heightProp, asLookup(heights))) ... />

[markdalgleish]

Opened a PR for imperatively setting vars on elements at runtime: #25