Add: Default Variants

Author: Jeong-jj

text/002-css-rules.md

@@ -638,7 +638,7 @@ button([
 
 ## 6. Compound Variants
 
-[Stitche's `Compound Variants`](https://stitches.dev/docs/variants#compound-variants) is an effective way to set up additional css by leveraging the combination of variations you have already set up.
+[Stitches's `Compound Variants`](https://stitches.dev/docs/variants#compound-variants) is an effective way to set up additional css by leveraging the combination of variations you have already set up.
 
 However, the method of writing the conditions seems quite inconvenient.  
 So we want to improve the UX in this area.
@@ -647,7 +647,7 @@ So we want to improve the UX in this area.
 
 ```typescript
 const button = rules({
-  // base style
+  // base styles
 
   variants: {
     color: {
@@ -679,7 +679,7 @@ But if the conditions become complicated, it will be inconvenient to fill out.
 
 ```typescript
 const button = rules({
-  // base style
+  // base styles
 
   variants: {
     color: {
@@ -703,7 +703,7 @@ const button = rules({
 });
 ```
 
-The method we present will provide a more comfortable way to write the conditions.
+The method we present will provide a more comfortable way to write the conditions.  
 This feature checks existing variants and provides automatic completion.
 
 **Compiled:**
@@ -731,10 +731,30 @@ button({
 
 ## 7. Default Variants
 
+The way of [Stitches's Default Variants](https://stitches.dev/docs/variants#default-variants) is already good to use, so we keep this method in ours.
+
 **Code:**
 
 ```typescript
+const button = rules({
+  // base styles
 
+  variants: {
+    color: {
+      brand: {
+        color: "#FFFFA0",
+        backgroundColor: "blueviolet",
+      },
+      accent: {
+        color: "#FFE4B5",
+        backgroundColor: "slateblue",
+      },
+    },
+  },
+  defaultVariants: {
+    color: "brand",
+  },
+});
 ```
 
 ## 8. Composition