Decibel: add button styles (#6567)

Co-authored-by: Jason Crist <jcrist@pbking.com>

block-canvas/functions.php

@@ -43,7 +43,7 @@ if ( ! function_exists( 'block_canvas_styles' ) ) :
 		// Register theme stylesheet.
 		wp_register_style(
 			'block_canvas-style',
-			get_template_directory_uri() . '/style.css',
+			get_stylesheet_directory_uri() . '/style.css',
 			array(),
 			wp_get_theme()->get( 'Version' )
 		);

block-canvas/style.css

@@ -50,3 +50,13 @@ GNU General Public License for more details.
 	padding-right: var(--wp--preset--spacing--50);
 	padding-left: var(--wp--preset--spacing--50);
 }
+
+/*
+* Control the hover stylings of outline block style.
+* Unnecessary once block styles are configurable via theme.json
+*/
+.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
+	background-color: var(--wp--preset--color--secondary);
+	color: var(--wp--preset--color--background);
+	border-color: var(--wp--preset--color--secondary);
+}

decibel/functions.php

@@ -43,7 +43,7 @@ if ( ! function_exists( 'decibel_styles' ) ) :
 		// Register theme stylesheet.
 		wp_register_style(
 			'decibel-style',
-			get_template_directory_uri() . '/style.css',
+			get_stylesheet_directory_uri() . '/style.css',
 			array(),
 			wp_get_theme()->get( 'Version' )
 		);

decibel/style.css

@@ -27,4 +27,11 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
 	padding-bottom: var(--wp--custom--gap--vertical);
 	padding-right: var(--wp--custom--gap--horizontal);
 	padding-left: var(--wp--custom--gap--horizontal);
+}
+
+/*
+* Control the hover stylings of outline block style.
+*/
+.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
+	background-color: var(--wp--preset--color--primary);
 }

decibel/theme.json

@@ -150,16 +150,34 @@
 			"button": {
 				":hover": {
 					"color": {
-						"background": "var(--wp--preset--color--secondary)",
-						"text": "var(--wp--preset--color--background)"
+						"background": "var(--wp--preset--color--primary)",
+						"text": "var(--wp--preset--color--foreground)"
+					}
+				},
+				":active": {
+					"color": {
+						"background": "var(--wp--preset--color--primary)",
+						"text": "var(--wp--preset--color--foreground)"
+					}
+				},
+				":focus": {
+					"color": {
+						"background": "var(--wp--preset--color--primary)",
+						"text": "var(--wp--preset--color--foreground)"
+					},
+					"outline": {
+						"color": "var(--wp--preset--color--secondary)",
+						"width": "2px",
+						"style": "dotted",
+						"offset": "2px"
 					}
 				},
 				"border": {
 					"radius": "0"
 				},
 				"color": {
-					"background": "var(--wp--preset--color--primary)",
-					"text": "var(--wp--preset--color--foreground)"
+					"background": "var(--wp--preset--color--foreground)",
+					"text": "var(--wp--preset--color--background)"
 				},
 				"typography": {
 					"textTransform": "uppercase"