Vanilla-Extract documentation say about sprinkles (properties section: third paragraph) that "You can also use vanilla-extract themes to configure themed values", my goal is to use contracts I've previously defined and combine them with sprinkles to move all the styles that now are loaded in the client side to be loaded in the server side by sprinkles.

The problem is that the class names are loaded into the elements but without values, this is just the class name in the element (Next/React component) but without any css rule to it.

• Objetive: Reuse previous contract and theme files into sprinkles.
• Problem: Class name in elements without css rules
• Files: contract, sprinkles, component (Next/React component).
• How-to use theme definitions through sprinkles?

// # contract.css.ts
import { createThemeContract, createTheme } from "@vanilla-extract/css";

export const contractSprinkles = createThemeContract({
  colors: {
    brand: null,
    muted: null,
  },
});

export const themeSprinkles = createTheme(contractSprinkles, {
  colors: {
    brand: "lime",
    muted: "grey",
  },
});


// # sprinkles.css.ts
import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles";

import { contractSprinkles } from "./contracts/contract-sprinkles.css";

const colorProperties = defineProperties({
  conditions: {
    lightMode: { "@media": "(prefers-color-scheme: light)" },
    darkMode: { "@media": "(prefers-color-scheme: dark)" },
  },
  defaultCondition: false,
  properties: {
    color: contractSprinkles.colors,
  },
});

export const sprinkles = createSprinkles(colorProperties);


// # component (Next/React component)
import { sprinkles } from "./sprinkle-style.css";
function Header() {
  return (
    <h1
      className={sprinkles({
        color: {
          lightMode: "brand",
        },
      })}
    >
      Fancy Title
    </h1>
  );
}


// # browser
<h1 class="sprinkle-style_color_brand_lightMode__atpcon0">Fancy Title</h1>
// # DevTools: doesnt show any style rule nor values for brand or muted