I started using vanilla-extract library as foundation to design system at work. All is going well, but I have one problem - I couldn't find a good way to create polymorphic React components. I tried with React TypeScript Cheatsheet, but it didn't work for me. I was looking for a solution for a while and I was recommended (thanks Jonatan) to check out this handy little library called dessert-box. What this library is doing? It uses a concept of vanilla-extract sprinkles and connect them together with polymorphic Box component.

Let's say you have this sprinkles defined:

import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";

const colorProperties = defineProperties({
  conditions: {
    lightMode: {},
    darkMode: { "@media": "(prefers-color-scheme: dark)" },
  },
  defaultCondition: "lightMode",
  properties: {
    color: [{ brand: "#00a98f" }],
  },
});

export const sprinkles = createSprinkles(colorProperties);

Now you want to pass those as atoms to your Box component. You can do it like this:

import { createBox } from "@dessert-box/react";

import { sprinkles } from "./sprinkles.css";

export const Box = createBox({ atoms: sprinkles });

Now you can use it like this:

<Box as="button" color="brand">
  Submit
</Box>

And it is all type-safe. You can't pass different color than brand to the Box. Now you can build your own components on top of it and combine them into more complex molecules. It really helps to write as little custom CSS as possible and instead use typed props to style your components.