createTheme, createGlobalTheme: Add support for assigning themes to a layer

[askoufis]

Original discussion.

This is currently possible in VE using existing APIs (example), however it's not exactly ergonomic, nor is it obvious that this is possible, so first-class support would be nice.

Sprinkles supports layers via an @layer property, so I implemented the same thing for createTheme and createGlobalTheme.

EXAMPLE USAGE:

// themes.css.ts
import { createTheme, createGlobalTheme, layer } from '@vanilla-extract/css';

export const themeLayer = layer();

export const [themeA, vars] = createTheme({
  '@layer': themeLayer,
  color: {
    brand: 'blue'
  },
  font: {
    body: 'arial'
  }
});

export const vars2 = createGlobalTheme(':root', {
  '@layer': themeLayer,
  space: {
    small: '10px',
    large: '20px',
  }
});

[changeset-bot]

🦋 Changeset detected

Latest commit: 0326d21

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@vanilla-extract/css	Minor
@vanilla-extract/integration	Patch
@vanilla-extract/rollup-plugin	Patch
@vanilla-extract/esbuild-plugin	Patch
@vanilla-extract/jest-transform	Patch
@vanilla-extract/parcel-transformer	Patch
@vanilla-extract/vite-plugin	Patch
@vanilla-extract/webpack-plugin	Patch
@vanilla-extract/next-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[mattcompiles]

Nice one bud 🍻 🧁 🎄