fix pseudo-state button styling in theming docs (#1635)

Author: ibrahimpg

docs/documentation/introduction/theming.mdx

@@ -44,15 +44,17 @@ function CustomButtonExample() {
           paddingY: 8,
           borderRadius: 5,
           backgroundColor: 'indianred',
-          _hover: {
-            backgroundColor: 'firebrick',
-          },
-          _active: {
-            backgroundColor: 'darkred',
-          },
-          _focus: {
-            boxShadow: '0 0 0 2px lightcoral',
-          },
+          selectors: {
+            _hover: {
+              backgroundColor: 'firebrick',
+            },
+            _active: {
+              backgroundColor: 'darkred',
+            },
+            _focus: {
+              boxShadow: '0 0 0 2px lightcoral',
+            },
+          }
         },
       },
     },
@@ -82,15 +84,17 @@ function CustomAppearancesExample() {
             paddingY: 8,
             borderRadius: 5,
             backgroundColor: 'indianred',
-            _hover: {
-              backgroundColor: 'firebrick',
-            },
-            _active: {
-              backgroundColor: 'darkred',
-            },
-            _focus: {
-              boxShadow: '0 0 0 2px lightcoral',
-            },
+            selectors: {
+              _hover: {
+                backgroundColor: 'firebrick',
+              },
+              _active: {
+                backgroundColor: 'darkred',
+              },
+              _focus: {
+                boxShadow: '0 0 0 2px lightcoral',
+              },
+            }
           },
         },
       },