Add: Draft of RulesVariants

Author: Jeong-jj

text/002-css-rules.md

@@ -815,26 +815,93 @@ const myRule = rules([baseRule, { color: "blue", marginTop: "10px" }]);
 
 ## 9. rulesVarints
 
-Inspired by the [PandaCSS's `defineSlotRecipe()`](https://panda-css.com/docs/concepts/slot-recipes#config-slot-recipe).
+Inspired by the [PandaCSS's `defineSlotRecipe()`](https://panda-css.com/docs/concepts/slot-recipes#config-slot-recipe).  
+And at the same time, We refer to [Vanilla Extract's `styleVariants`](https://vanilla-extract.style/documentation/api/style-variants/) for code style for now. It could be change to [sub functions](https://github.com/mincho-js/mincho/issues/59).
 
 This is a combination of `rules()` and `cssVariants()`.
 
 **Code:**
 
 ```typescript
+const theme = rulesVariants({
+  title: {
+    fontWeight: "bold",
+
+    variants: {
+      color: {
+        main: { color: "#0078e5" },
+        sub: { color: "#fff7ed" }
+      },
+      size: {
+        main: { fontSize: "24px" },
+        sub: { fontSize: "18px" }
+      }
+    }
+  },
+  body: {
+    fontSize: "16px",
+
+    variants: {
+      style: {
+        banner: {
+          padding: "5px 10px",
+          border: "1px solid #ccc",
+          borderRadius: "10px"
+        },
+        contents: { padding: "10px 15px", height: "60%", overflow: "auto" }
+      }
+    },
 
+    toggles: {
+      accent: { textDecoration: "underline" }
+    }
+  }
+});
 ```
 
+It helps that we write many `rules` in once
+
 **Compiled:**
 
 ```css
-
+.[FILE_NAME]_title__[HASH] {
+  font-weight: "bold";
+}
+.[FILE_NAME]_title_size_main__[HASH] {
+  font-size: "24px";
+}
+.[FILE_NAME]_title_size_sub__[HASH] {
+  font-size: "18px";
+}
+.[FILE_NAME]_body__[HASH] {
+  font-size: "16px";
+}
+.[FILE_NAME]_body_style_banner__[HASH] {
+  padding: "5px 10px";
+  border: "1px solid #ccc";
+  border-radius: "10px";
+}
+.[FILE_NAME]_body_style_contents__[HASH] {
+  padding: "10px 15px";
+  height: "60%";
+  overflow: "auto";
+}
+.[FILE_NAME]_body_toggle_accent__[HASH] {
+  text-decoration: "underline";
+}
 ```
 
 **Usage:**
 
 ```typescript
-
+// case 1
+theme.title({
+  size: "main"
+});
+// case 2
+theme.body("accent", {
+  style: "banner"
+});
 ```
 
 ## 10. With `css()`