Club: adding button styles (#6237)

* Club: adding button styles

* Club: Fixing outline button in the editor

club/style.css

@@ -43,10 +43,66 @@ GNU General Public License for more details.
  * https://github.com/WordPress/gutenberg/issues/27075
  */
 
-.wp-block-search__button:hover,
-.wp-block-file .wp-block-file__button:hover,
-.wp-block-button__link:hover {
-	background-color: var(--wp--preset--color--secondary);
+:is(
+	.wp-block-search__button,
+	.wp-block-file .wp-block-file__button,
+	.wp-block-button__link,
+	.wp-elements-button,
+):where(:hover, :focus, :active) {
+	background-color: var(--wp--preset--color--background);
+	color: var(--wp--preset--color--foreground);
+	border: 1.5px solid var(--wp--preset--color--foreground);
+}
+
+:is(
+	.wp-block-search__button,
+	.wp-block-file .wp-block-file__button,
+	.wp-block-button__link,
+	.wp-elements-button,
+):where(:active) {
+	border-style: dotted;
+}
+
+:is(
+	.wp-block-search__button,
+	.wp-block-file .wp-block-file__button,
+	.wp-block-button__link,
+	.wp-elements-button,
+):where(:active) {
+	border-style: dotted;
+}
+
+:is(
+	.is-style-outline .wp-block-button__link,
+	.is-style-outline .wp-element-button,
+	.wp-block-post-comments-form input[type=submit],
+):is(
+	:hover,
+	:focus
+) {
+	background: var(--wp--preset--color--foreground);
+	color: var(--wp--preset--color--background);
+}
+
+:is(
+	.is-style-outline .wp-block-button__link,
+	.is-style-outline .wp-element-button,
+	.wp-block-post-comments-form input[type=submit],
+):is(
+	:active
+) {
+	background: var(--wp--preset--color--background);
+	color: var(--wp--preset--color--foreground);
+	border-style: dotted;
+}
+
+/* This is necesary to fix the outline style for the button in the editor */
+:where(.is-style-outline)
+:is(
+	.wp-block-button__link,
+	.wp-element-button
+) {
+	border: 1px solid var(--wp--preset--color--foreground);
 }
 
 /*

club/theme.json

@@ -147,8 +147,18 @@
         "blocks": {
             "core/button": {
                 "border": {
-                    "radius": "4px"
-                }
+					"radius": "999px",
+                    "width": "1.5px",
+                    "style": "solid"
+				},
+                "spacing": {
+					"padding": {
+						"top": "calc(0.05em + 2px)",
+						"bottom": "calc(0.05em + 2px)",
+						"left": "calc(1.333em + 2px)",
+						"right": "calc(1.333em + 2px)"
+					}
+				}
             },
             "core/code": {
                 "border": {
@@ -204,6 +214,19 @@
 					"lineHeight": "1.6"
 				}
 			},
+            "core/post-comments-form": {
+                "elements": {
+                    "button": {
+                        "color":{
+                            "background": "var(--wp--preset--color--background)",
+                            "text": "var(--wp--preset--color--foreground)"
+                        },
+                        "border": {
+                            "color": "var(--wp--preset--color--foreground)"
+                        }
+                    }
+                }
+            },
             "core/gallery": {
                 "spacing": {
                     "margin": {
@@ -351,8 +374,13 @@
                     "radius": "999px"
                 },
                 "spacing": {
-                    "padding": "0.5em"
-                }
+					"padding": {
+						"top": "calc(0.05em + 2px)",
+						"bottom": "calc(0.05em + 2px)",
+						"left": "calc(1.333em + 2px)",
+						"right": "calc(1.333em + 2px)"
+					}
+				}
             }
         },
         "color": {
@@ -362,10 +390,13 @@
         "elements": {
             "button": {
 				"border": {
-					"radius": "0"
+					"radius": "999px",
+                    "width": "1.5px",
+                    "color": "transparent",
+                    "style": "solid"
 				},
 				"color": {
-                    "background": "var(--wp--preset--color--primary)",
+                    "background": "var(--wp--preset--color--foreground)",
                     "text": "var(--wp--preset--color--background)"
 				},
 				"typography": {
@@ -373,12 +404,13 @@
                     "fontSize": "var(--wp--preset--font-size--medium)",
                     "fontWeight": "normal",
 					"lineHeight": "2",
-					"textDecoration": "none"
+					"textDecoration": "none",
+                    "textTransform": "uppercase"
 				},
 				"spacing": {
 					"padding": {
-						"top": "calc(0.667em + 2px)",
-						"bottom": "calc(0.667em + 2px)",
+						"top": "calc(0.05em + 2px)",
+						"bottom": "calc(0.05em + 2px)",
 						"left": "calc(1.333em + 2px)",
 						"right": "calc(1.333em + 2px)"
 					}