button and link styles and settings

skatepark/assets/theme.css

@@ -42,4 +42,119 @@
 	color: var(--wp--preset--color--background);
 }
 
+.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
+	border-style: var(--wp--custom--button--border--style);
+	border-color: currentColor;
+	border-width: var(--wp--custom--button--border--width);
+	padding-top: var(--wp--custom--button--spacing--padding--top);
+	padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
+	padding-left: var(--wp--custom--button--spacing--padding--left);
+	padding-right: var(--wp--custom--button--spacing--padding--right);
+}
+
+.wp-block-file .wp-block-file__button {
+	text-transform: uppercase;
+}
+
+.wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus {
+	border-style: var(--wp--custom--button--border--style);
+	border-color: currentColor;
+	border-width: var(--wp--custom--button--border--width);
+	padding-top: var(--wp--custom--button--spacing--padding--top);
+	padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
+	padding-left: var(--wp--custom--button--spacing--padding--left);
+	padding-right: var(--wp--custom--button--spacing--padding--right);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
+.wp-block-search .wp-block-search__button {
+	text-transform: uppercase;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-focus,
+.wp-block-search .wp-block-search__button:hover,
+.wp-block-search .wp-block-search__button:focus,
+.wp-block-search .wp-block-search__button.has-focus {
+	border-style: var(--wp--custom--button--border--style);
+	border-color: currentColor;
+	border-width: var(--wp--custom--button--border--width);
+	padding-top: var(--wp--custom--button--spacing--padding--top);
+	padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
+	padding-left: var(--wp--custom--button--spacing--padding--left);
+	padding-right: var(--wp--custom--button--spacing--padding--right);
+}
+
+.wp-block-post-comments input[type="submit"], .wp-block-post-comments .reply a {
+	text-transform: uppercase;
+}
+
+.wp-block-post-comments input[type="submit"]:hover, .wp-block-post-comments input[type="submit"]:focus, .wp-block-post-comments input[type="submit"].has-focus, .wp-block-post-comments .reply a:hover, .wp-block-post-comments .reply a:focus, .wp-block-post-comments .reply a.has-focus {
+	border-style: var(--wp--custom--button--border--style);
+	border-color: currentColor;
+	border-width: var(--wp--custom--button--border--width);
+	padding-top: var(--wp--custom--button--spacing--padding--top);
+	padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
+	padding-left: var(--wp--custom--button--spacing--padding--left);
+	padding-right: var(--wp--custom--button--spacing--padding--right);
+}
+
+.wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
+.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
+.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
+.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
+	color: var(--wp--custom--button--color--background);
+	background-color: var(--wp--custom--button--color--text);
+}
+
+a {
+	text-decoration-thickness: 2px;
+	text-underline-offset: 0.25em;
+}
+
+.wp-block-post-content p a {
+	-webkit-text-decoration-line: underline;
+	        text-decoration-line: underline;
+}
+
+.wp-block-post-content p a:hover {
+	text-decoration: none;
+	background-color: var(--wp--custom--color--primary);
+	color: var(--wp--custom--color--background);
+}
+
+.wp-block-post-comments .comment-body > p > a,
+.wp-block-post-comments .comment-edit-link {
+	-webkit-text-decoration-line: underline;
+	        text-decoration-line: underline;
+}
+
+.wp-block-post-comments .comment-body > p > a:hover,
+.wp-block-post-comments .comment-edit-link:hover {
+	text-decoration: none;
+}
+
+.wp-block-site-title a,
+.wp-block-post-title a,
+.wp-block-query-pagination a,
+.post-meta a {
+	text-decoration: none;
+}
+
+.wp-block-site-title a:hover,
+.wp-block-post-title a:hover,
+.wp-block-query-pagination a:hover,
+.post-meta a:hover {
+	text-decoration: underline;
+	text-decoration-thickness: 2px;
+	text-underline-offset: 0.25em;
+}
+
+a:not(.ab-item):not(.screen-reader-shortcut):active, a:not(.ab-item):not(.screen-reader-shortcut):focus {
+	outline: 1px dotted currentColor;
+	text-decoration: none;
+}
+
 /*# sourceMappingURL=theme.css.map */

skatepark/child-theme.json

@@ -16,6 +16,36 @@
 			]
 		},
 		"custom": {
+			"button": {
+				"border": {
+					"color": "var(--wp--custom--color--primary)",
+					"radius": "0",
+					"width": "3px"
+				},
+				"color": {
+					"background": "var(--wp--custom--color--primary)",
+					"text": "var(--wp--custom--color--background)"
+				},
+				"hover": {
+					"color": {
+						"text": "var(--wp--custom--color--primary)",
+						"background": "var(--wp--custom--color--background)"
+					},
+					"border": {
+						"color": "var(--wp--custom--color--primary)"
+					}
+				},
+				"spacing": {
+					"padding": {
+						"left": "1.75em",
+						"right": "1.75em"
+					}
+				},
+				"typography": {
+					"fontSize": "16px",
+					"fontWeight": "700"
+				}
+			},
 			"body": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--red-hat-display)",
@@ -141,6 +171,20 @@
 		}
 	},
 	"styles": {
+		"blocks": {
+			"core/button": {
+				"color": {
+					"background": "var(--wp--custom--button--color--background)",
+					"text": "var(--wp--custom--button--color--text)"
+				},
+				"typography": {
+					"fontSize": "var(--wp--custom--button--typography--font-size)",
+					"fontWeight": "var(--wp--custom--button--typography--font-weight)",
+					"letterSpacing": "0.1em",
+					"textTransform": "uppercase"
+				}
+			}
+		},
 		"elements": {
 			"h1": {
 				"typography": {

skatepark/functions.php

@@ -11,6 +11,17 @@ if ( ! function_exists( 'skatepark_support' ) ) :
 			)
 		);
 
+		// Add support for core custom logo.
+		add_theme_support(
+			'custom-logo',
+			array(
+				'height'      => 35,
+				'width'       => 150,
+				'flex-width'  => true,
+				'flex-height' => true,
+			)
+		);
+
 		// This theme uses wp_nav_menu() in two locations.
 		register_nav_menus(
 			array(

skatepark/sass/blocks/_buttons.scss

@@ -0,0 +1,56 @@
+@mixin skatepark_button_hover_styles {
+	&:hover,
+	&:focus,
+	&.has-focus {
+		border-style: var(--wp--custom--button--border--style);
+		border-color: currentColor;
+		border-width: var(--wp--custom--button--border--width);
+		padding-top: var(--wp--custom--button--spacing--padding--top);
+		padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
+		padding-left: var(--wp--custom--button--spacing--padding--left);
+		padding-right: var(--wp--custom--button--spacing--padding--right);
+	}
+}
+.wp-block-button {
+ 	&.wp-block-button__link,
+ 	.wp-block-button__link {
+		&:not(.has-background):not(.has-text-color) {
+			@include skatepark_button_hover_styles;
+		}
+	}
+}
+.wp-block-file .wp-block-file__button {
+	text-transform: uppercase;
+	@include skatepark_button_hover_styles;
+}	
+
+.wp-block-search {
+	&.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
+	.wp-block-search__button {
+		text-transform: uppercase;
+		@include skatepark_button_hover_styles;
+	}
+}
+
+.wp-block-post-comments {
+	input[type="submit"], .reply a {
+		text-transform: uppercase;
+		@include skatepark_button_hover_styles;
+	}
+}
+
+//NOTE: Double-classed to raise specificity above parent theme's outline hover styles
+//as an alternative to !important.  Only needed for the editor.
+.wp-block-button.wp-block-button.is-style-outline {
+ 	&.wp-block-button__link,
+ 	.wp-block-button__link {
+		&:not(.has-background):not(.has-text-color) {
+			&:hover,
+			&:focus,
+			&.has-focus {
+				color: var(--wp--custom--button--color--background);
+				background-color: var(--wp--custom--button--color--text);
+			}
+		}
+	}
+}

skatepark/sass/elements/_links.scss

@@ -0,0 +1,43 @@
+a {
+	text-decoration-thickness: 2px;
+	text-underline-offset: 0.25em;
+}
+
+.wp-block-post-content p a {
+	text-decoration-line: underline;
+	&:hover {
+		text-decoration: none;
+		background-color: var(--wp--custom--color--primary);
+		color: var(--wp--custom--color--background);
+	}
+}
+
+.wp-block-post-comments .comment-body > p > a,
+.wp-block-post-comments .comment-edit-link {
+	text-decoration-line: underline;
+	&:hover {
+		text-decoration: none;
+	}
+}
+
+//Exceptions for the general underline rule
+.wp-block-site-title a,
+.wp-block-post-title a,
+.wp-block-query-pagination a,
+.post-meta a {
+	text-decoration: none;
+	&:hover {
+		text-decoration: underline;
+		text-decoration-thickness: 2px;
+		text-underline-offset: 0.25em;
+	}
+}
+
+// Select the focus states of all non-wpadmin and screen reader links
+a:not(.ab-item):not(.screen-reader-shortcut) {
+	&:active,
+	&:focus {
+		outline: 1px dotted currentColor;
+		text-decoration: none;
+	}
+}

skatepark/sass/theme.scss

@@ -1,3 +1,5 @@
 @import "../../blockbase/sass/base/breakpoints"; // Get the mobile-only media query and make it available to this theme's styles
 @import "../../blockbase/sass/base/mixins";
-@import "base/text";
+@import "base/text";
+@import "blocks/buttons";
+@import "elements/links";

skatepark/theme.json

@@ -57,9 +57,9 @@
 			"button": {
 				"border": {
 					"color": "var(--wp--custom--color--primary)",
-					"radius": "4px",
+					"radius": "0",
 					"style": "solid",
-					"width": "2px"
+					"width": "3px"
 				},
 				"color": {
 					"background": "var(--wp--custom--color--primary)",
@@ -67,25 +67,25 @@
 				},
 				"hover": {
 					"color": {
-						"text": "var(--wp--custom--color--background)",
-						"background": "var(--wp--custom--color--secondary)"
+						"text": "var(--wp--custom--color--primary)",
+						"background": "var(--wp--custom--color--background)"
 					},
 					"border": {
-						"color": "var(--wp--custom--color--secondary)"
+						"color": "var(--wp--custom--color--primary)"
 					}
 				},
 				"spacing": {
 					"padding": {
 						"top": "0.667em",
 						"bottom": "0.667em",
-						"left": "1.333em",
-						"right": "1.333em"
+						"left": "1.75em",
+						"right": "1.75em"
 					}
 				},
 				"typography": {
 					"fontFamily": "var(--wp--custom--body--typography--font-family)",
-					"fontSize": "var(--wp--preset--font-size--normal)",
-					"fontWeight": "normal",
+					"fontSize": "16px",
+					"fontWeight": "700",
 					"lineHeight": 2
 				}
 			},
@@ -358,7 +358,9 @@
 					"fontFamily": "var(--wp--custom--button--typography--font-family)",
 					"fontSize": "var(--wp--custom--button--typography--font-size)",
 					"fontWeight": "var(--wp--custom--button--typography--font-weight)",
-					"lineHeight": "var(--wp--custom--button--typography--line-height)"
+					"lineHeight": "var(--wp--custom--button--typography--line-height)",
+					"letterSpacing": "0.1em",
+					"textTransform": "uppercase"
 				}
 			},
 			"core/code": {