Add recipes

package.json

@@ -12,6 +12,7 @@
     "@vanilla-extract/babel-plugin": "1.1.0",
     "@vanilla-extract/css": "1.6.0",
     "@vanilla-extract/next-plugin": "1.0.0",
+    "@vanilla-extract/recipes": "0.1.0",
     "@vanilla-extract/sprinkles": "1.3.0",
     "next": "11.1.2",
     "react": "17.0.2",

pages/index.tsx

@@ -1,8 +1,10 @@
 import { NextPage } from "next";
-import * as styles from "../styles/Home.css";
+import { buttonRecipe } from "../styles/Home.css";
 
 const Home: NextPage = () => {
-  return <div className={styles.container}>Hello world</div>;
+  return (
+    <button className={buttonRecipe({ variant: "primary" })}>Hello</button>
+  );
 };
 
 export default Home;

styles/Home.css.ts

@@ -1,5 +1,12 @@
+import { recipe } from "@vanilla-extract/recipes";
 import { sprinkles } from "./sprinkles.css";
 
-export const container = sprinkles({
-  color: "primary",
+export const buttonRecipe = recipe({
+  variants: {
+    variant: {
+      primary: sprinkles({
+        backgroundColor: "primary",
+      }),
+    },
+  },
 });

styles/sprinkles.css.ts

@@ -3,7 +3,7 @@ import { theme } from "./theme.css";
 
 const properties = defineProperties({
   properties: {
-    color: theme.color,
+    backgroundColor: theme.color,
   },
 });
 

styles/theme.css.ts

@@ -2,6 +2,6 @@ import { createGlobalTheme } from "@vanilla-extract/css";
 
 export const theme = createGlobalTheme(":root", {
   color: {
-    primary: "#7a40ff",
+    primary: "cyan",
   },
 });

yarn.lock

@@ -524,6 +524,11 @@
   resolved "https://registry.yarnpkg.com/@vanilla-extract/private/-/private-1.0.1.tgz#c9479cebea7e7fbb07a1fe5b5c988a8753ef04ed"
   integrity sha512-ABrFJGSmF7a1M+eDTsIeAErPhIeRyBY3ypyLQPc4bUVEK1mvF7F2gx4fTP81pm12bkS0GhjSJtM854lcPWhB+w==
 
+"@vanilla-extract/recipes@0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@vanilla-extract/recipes/-/recipes-0.1.0.tgz#b1e169c4c4fcc75f0d5f3543df9811b1ccf5bc73"
+  integrity sha512-PX2CxRdYkXiPiIcK2uxabBLbQlo6hZIlAVNGwxdy4ZI4OCOfPm6X2hNka+nFkpxXgZMdO/E6lXn2H6eFtxZ9BA==
+
 "@vanilla-extract/sprinkles@1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@vanilla-extract/sprinkles/-/sprinkles-1.3.0.tgz#c7f50d900490df7024f227256fe73a7943e2d2da"