Pixel: add button styles (#6498)

* Add button states.

* Add default border color.

* Make shadow override Gutenberg default styles.

Co-authored-by: Madhu Dollu <madhusudhan.dollu@gmail.com>

* Make shadow override Gutenberg default styles.

Co-authored-by: Madhu Dollu <madhusudhan.dollu@gmail.com>

Co-authored-by: Madhu Dollu <madhusudhan.dollu@gmail.com>

pixel/theme.json

@@ -56,7 +56,8 @@
             "gap": {
                 "horizontal": "min(30px, 5vw)",
                 "vertical": "min(30px, 5vw)"
-            }
+            },
+            "shadow": "5px 5px 0px -2px var(--wp--preset--color--background), 5px 5px var(--wp--preset--color--foreground)"
         },
         "layout": {
             "contentSize": "620px",
@@ -176,11 +177,6 @@
     },
     "styles": {
         "blocks": {
-            "core/button": {
-                "border": {
-                    "radius": "4px"
-                }
-            },
             "core/code": {
                 "border": {
                     "color": "#CCCCCC",
@@ -343,26 +339,47 @@
         },
         "elements": {
             "button": {
-                "border": {
-                    "radius": "0"
+				"border": {
+                    "color": "var(--wp--preset--color--primary)",
+					"radius": "0",
+                    "style": "solid",
+                    "width": "2px"
                 },
                 "color": {
-                    "background": "var(--wp--preset--color--primary)",
-                    "text": "var(--wp--preset--color--background)"
+                    "background": "var(--wp--preset--color--background)",
+                    "text": "var(--wp--preset--color--primary)"
                 },
                 "typography": {
-                    "fontSize": "var(--wp--preset--font-size--medium)",
-                    "fontWeight": "normal",
-                    "lineHeight": "2",
+                    "fontSize": "var(--wp--preset--font-size--small)",
                     "textDecoration": "none"
                 },
+                "shadow": "var(--wp--custom--shadow) !important",
                 "spacing": {
                     "padding": {
-                        "top": "calc(0.667em + 2px)",
-                        "bottom": "calc(0.667em + 2px)",
-                        "left": "calc(1.333em + 2px)",
-                        "right": "calc(1.333em + 2px)"
+                        "top": "calc(0.75em - 2px)",
+                        "bottom": "calc(0.75em - 2px)",
+                        "left": "calc(1.5em - 2px)",
+                        "right": "calc(1.5em - 2px)"
                     }
+                },
+                ":hover": {
+                    "color": {
+                        "background": "var(--wp--preset--color--primary)",
+                        "text": "var(--wp--preset--color--background)"
+                    },
+                    "border": {
+                        "color": "var(--wp--preset--color--primary)"
+                    }
+                },
+                ":active": {
+                    "color": {
+                        "background": "var(--wp--preset--color--background)",
+                        "text": "var(--wp--preset--color--primary)"
+                    },
+                    "border": {
+                        "color": "var(--wp--preset--color--primary)"
+                    },
+                    "shadow": "2px 2px !important"
                 }
             },
             "heading": {