Quadrat: comment form style tweaks (#3905)

* comment form style tweaks
* inversed colors on comments buttons
* fixed font size

quadrat/assets/theme.css

@@ -282,9 +282,169 @@ ul ul {
 	}
 }
 
+/**
+ * Button
+ */
+/**
+ * Block Options
+ */
+.wp-block-button.wp-block-button__link,
+.wp-block-button .wp-block-button__link {
+	border-width: 0;
+	padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
+	padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
+	padding-left: calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
+	padding-right: calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
+	text-decoration: none;
+	opacity: 1;
+	color: var(--wp--custom--button--color--text);
+	background-color: var(--wp--custom--button--color--background);
+	border-color: var(--wp--custom--button--border--color);
+	border-radius: var(--wp--custom--button--border--radius);
+}
+
+.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 {
+	--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
+	--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
+	opacity: 1;
+	color: var(--wp--custom--button--color--text);
+	background-color: var(--wp--custom--button--color--background);
+	border-color: var(--wp--custom--button--border--color);
+}
+
+.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg {
+	fill: var(--wp--custom--button--color--text);
+}
+
+.wp-block-button.wp-block-button__link:hover, .wp-block-button.wp-block-button__link:focus, .wp-block-button.wp-block-button__link.has-focus,
+.wp-block-button .wp-block-button__link:hover,
+.wp-block-button .wp-block-button__link:focus,
+.wp-block-button .wp-block-button__link.has-focus {
+	--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
+	--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
+	--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
+	--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
+	--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
+	--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
+		--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
+	--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
+	--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
+	text-decoration: none;
+}
+
+.wp-block-button.wp-block-button__link svg,
+.wp-block-button .wp-block-button__link svg {
+	fill: var(--wp--custom--button--color--text);
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link,
+.wp-block-button.is-style-outline .wp-block-button__link {
+	--wp--custom--button--color--text: var(--wp--custom--button--border--color);
+	--wp--custom--button--color--background: transparent;
+	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);
+	opacity: 1;
+	color: var(--wp--custom--button--color--text);
+	background-color: var(--wp--custom--button--color--background);
+	border-color: var(--wp--custom--button--border--color);
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
+	--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
+	--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
+	opacity: 1;
+	color: var(--wp--custom--button--color--text);
+	background-color: var(--wp--custom--button--color--background);
+	border-color: var(--wp--custom--button--border--color);
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg {
+	fill: var(--wp--custom--button--color--text);
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link:hover, .wp-block-button.is-style-outline.wp-block-button__link:focus, .wp-block-button.is-style-outline.wp-block-button__link.has-focus,
+.wp-block-button.is-style-outline .wp-block-button__link:hover,
+.wp-block-button.is-style-outline .wp-block-button__link:focus,
+.wp-block-button.is-style-outline .wp-block-button__link.has-focus {
+	--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
+	--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
+	--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
+	--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
+	--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
+	--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
+		--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
+	--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
+	--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
+	text-decoration: none;
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link svg,
+.wp-block-button.is-style-outline .wp-block-button__link svg {
+	fill: var(--wp--custom--button--color--text);
+}
+
+.wp-block-buttons .wp-block-button:last-child {
+	margin-bottom: 0;
+}
+
+.wp-block-post-comments {
+	font-size: var(--wp--preset--font-size--normal);
+	line-height: var(--wp--custom--line-height--body);
+}
+
+.wp-block-post-comments .reply a {
+	--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
+	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--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
+	--wp--custom--button--border--color: var(--wp--custom--button--hover--color--text);
+}
+
 .wp-block-post-comments .reply a, .wp-block-post-comments .reply a:hover, .wp-block-post-comments .reply a:focus, .wp-block-post-comments .reply a:active {
-	font-size: 1em;
-	line-height: 1.2;
+	line-height: 1;
+}
+
+.wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):hover, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):focus, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color).has-focus {
+	--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
+	--wp--custom--button--color--text: var(--wp--custom--button--hover--color--background);
+	--wp--custom--button--color--background: var(--wp--custom--button--hover--color--text);
 }
 
 .wp-block-post-comments form {
@@ -299,7 +459,7 @@ ul ul {
 .wp-block-post-comments form textarea {
 	border: none;
 	background: var(--wp--custom--color--secondary);
-	font-size: 1em;
+	font-size: var(--wp--preset--font-size--normal);
 	width: 100%;
 }
 
@@ -380,6 +540,23 @@ ul ul {
 	grid-area: form-submit;
 }
 
+.wp-block-post-comments .reply {
+	margin-bottom: 30px;
+}
+
+.wp-block-post-comments .commentmetadata {
+	margin-bottom: 20px;
+}
+
+.wp-block-post-comments .commentlist {
+	margin-bottom: 60px;
+}
+
+.wp-block-post-comments .commentlist .comment p {
+	font-size: var(--wp--preset--font-size--normal);
+	line-height: var(--wp--custom--line-height--body);
+}
+
 .wp-block-post-comments .comment-body > p > a,
 .wp-block-post-comments .comment-edit-link {
 	text-decoration: underline;

quadrat/sass/blocks/_post-comments.scss

@@ -1,11 +1,31 @@
+@import "../../../blank-canvas-blocks/sass/blocks/button";
+
 .wp-block-post-comments {
+	
+	font-size: var(--wp--preset--font-size--normal);
+	line-height: var(--wp--custom--line-height--body);
+
 	.reply a {
+		--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
+		@include button-border-styles;
+		--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+		--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
+		--wp--custom--button--border--color: var(--wp--custom--button--hover--color--text);
+
 		& ,
 		&:hover,
 		&:focus,
 		&:active {
-			font-size: 1em;
-			line-height: 1.2;
+			line-height: 1;
+		}
+		&:not(.has-background):not(.has-text-color) {
+			&:hover,
+			&:focus,
+			&.has-focus {
+				--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
+				--wp--custom--button--color--text: var(--wp--custom--button--hover--color--background);
+				--wp--custom--button--color--background: var(--wp--custom--button--hover--color--text);
+			}
 		}
 	}
 
@@ -25,7 +45,7 @@
 		textarea {
 			border: none;
 			background: var(--wp--custom--color--secondary);
-			font-size: 1em;
+			font-size: var(--wp--preset--font-size--normal);
 			width: 100%;
 		}
 
@@ -94,6 +114,24 @@
 		}
 	}
 
+	.reply {
+		margin-bottom: 30px;
+	}
+
+	.commentmetadata {
+		margin-bottom: 20px;
+	}
+
+	.commentlist {
+		margin-bottom: 60px;
+		.comment {
+			p {
+				font-size: var(--wp--preset--font-size--normal);
+				line-height: var(--wp--custom--line-height--body);
+			}
+		}
+	}
+
 	// Target certain links within post comments to use the underline treatment.
 	.comment-body > p > a,
 	.comment-edit-link {