Seedlet Blocks: Add Post Comments block styles

seedlet-blocks/assets/theme.css

@@ -1,40 +1,35 @@
-.wp-block-site-title a {
-	text-decoration: underline;
-	text-decoration-thickness: 2px;
-	text-decoration-color: var(--wp--custom--color--secondary);
-	text-underline-offset: 0.13em;
-	transition: background-size 0.1s ease-out;
-}
-
-.wp-block-site-title a:hover, .wp-block-site-title a:focus {
+/**
+ * Button
+ */
+/**
+ * Block Options
+ */
+.wp-block-button.wp-block-button__link,
+.wp-block-button .wp-block-button__link {
 	text-decoration: none;
-	color: var(--wp--custom--color--secondary);
-	background-size: 8px 0px;
 }
 
-/**
- * Links in navigation
- */
-.wp-block-navigation-link a :hover {
-	text-decoration: underline;
-	text-underline-offset: 0.4rem;
+.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 {
+	color: var(--wp--custom--button--color--hover-text);
+	background-color: var(--wp--custom--button--color--hover-background);
+	border-color: var(--wp--custom--button--border--hover-color);
+	border-style: var(--wp--custom--button--border--hover-style);
+	border-width: var(--wp--custom--button--border--hover-width);
+	padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
 }
 
-/**
- * Links in Content
- */
-.is-root-container a,
-.wp-block-post-content a {
-	color: var(--wp--custom--color--primary);
-	text-decoration-color: var(--wp--style--color--link);
-	text-decoration-thickness: 1px;
-	text-underline-offset: 0.2em;
+.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--hover-text);
 }
 
-.is-root-container a:focus, .is-root-container a:hover,
-.wp-block-post-content a:focus,
-.wp-block-post-content a:hover {
-	color: var(--wp--style--color--link);
+.wp-block-buttons .wp-block-button:last-child {
+	margin-bottom: 0;
 }
 
 /**
@@ -176,10 +171,121 @@
 	}
 }
 
+/**
+ * Links in navigation
+ */
+.wp-block-navigation-link a :hover {
+	text-decoration: underline;
+	text-underline-offset: 0.4rem;
+}
+
+/**
+ * Links in Content
+ */
+.is-root-container a,
+.wp-block-post-content a {
+	color: var(--wp--custom--color--primary);
+	text-decoration-color: var(--wp--style--color--link);
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.2em;
+}
+
+.is-root-container a:focus, .is-root-container a:hover,
+.wp-block-post-content a:focus,
+.wp-block-post-content a:hover {
+	color: var(--wp--style--color--link);
+}
+
+.wp-block-post-comments .reply a {
+	border-radius: var(--wp--custom--button--border--radius);
+	font-size: var(--wp--preset--font-size--tiny);
+	line-height: 1;
+	padding: 23px 25px;
+}
+
+.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 {
+	font-size: var(--wp--preset--font-size--tiny);
+	line-height: 1;
+	padding: 23px 25px;
+}
+
+.wp-block-post-comments input[type="submit"] {
+	border-radius: var(--wp--custom--button--border--radius);
+	cursor: pointer;
+	font-size: var(--wp--preset--font-size--small);
+	line-height: 1;
+	padding: 23px 25px;
+}
+
+.wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):hover, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):focus, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color).has-focus {
+	font-size: var(--wp--preset--font-size--small);
+	line-height: 1;
+	padding: 23px 25px;
+}
+
+.wp-block-post-comments #comments,
+.wp-block-post-comments #reply-title {
+	font-size: var(--wp--preset--font-size--huge);
+	font-style: italic;
+}
+
+.wp-block-post-comments .comment-meta,
+.wp-block-post-comments .comment-author {
+	font-size: var(--wp--preset--font-size--tiny);
+	margin-left: 0;
+}
+
+.wp-block-post-comments .comment-meta a,
+.wp-block-post-comments .comment-author a {
+	text-decoration: none;
+}
+
+.wp-block-post-comments input[type=checkbox] + label {
+	margin-left: 0;
+}
+
+.wp-block-post-comments .commentlist .comment {
+	padding-left: 0;
+}
+
+.wp-block-post-comments .commentlist .comment p {
+	font-size: var(--wp--preset--font-size--normal);
+	margin-bottom: var(--wp--custom--margin--vertical);
+	margin-top: var(--wp--custom--margin--vertical);
+}
+
+.wp-block-post-comments .comment .comment-author .avatar {
+	border-radius: 1.5em;
+	border: 2px solid #fff;
+	display: block;
+	float: left;
+	height: 42px;
+	margin-right: 18px;
+	width: 42px;
+}
+
+.wp-block-post-comments .comment .comment-author .fn {
+	font-size: var(--global--font-size-xs);
+}
+
 .wp-block-pullquote.is-style-solid-color {
 	padding: var(--wp--custom--margin--horizontal);
 }
 
+.wp-block-site-title a {
+	text-decoration: underline;
+	text-decoration-thickness: 2px;
+	text-decoration-color: var(--wp--custom--color--secondary);
+	text-underline-offset: 0.13em;
+	transition: background-size 0.1s ease-out;
+}
+
+.wp-block-site-title a:hover, .wp-block-site-title a:focus {
+	text-decoration: none;
+	color: var(--wp--custom--color--secondary);
+	background-size: 8px 0px;
+}
+
 /**
  * Author bio
  */

seedlet-blocks/experimental-theme.json

@@ -100,9 +100,12 @@
 			"button": {
 				"border": {
 					"color": "var(--wp--custom--button--color--text)",
+					"hoverColor": "transparent",
 					"radius": "4px",
 					"style": "solid",
-					"width": "0"
+					"hoverStyle": "solid",
+					"width": "0",
+					"hoverWidth": "0"
 				},
 				"color": {
 					"background": "var(--wp--custom--color--secondary)",

seedlet-blocks/sass/blocks/_post-comments.scss

@@ -0,0 +1,84 @@
+.wp-block-post-comments {
+	.reply {
+		a {
+			border-radius: var(--wp--custom--button--border--radius);
+			font-size: var(--wp--preset--font-size--tiny);
+			line-height: 1;
+			padding: 23px 25px;
+			
+			&:not(.has-background):not(.has-text-color) {
+				&:hover,
+				&:focus,
+				&.has-focus {
+					font-size: var(--wp--preset--font-size--tiny);
+					line-height: 1;
+					padding: 23px 25px;
+				}
+			}
+		}
+	}
+	
+	input[type="submit"] {
+		border-radius: var(--wp--custom--button--border--radius);
+		cursor: pointer;
+		font-size: var(--wp--preset--font-size--small);
+		line-height: 1;
+		padding: 23px 25px;
+		
+		&:not(.has-background):not(.has-text-color) {
+			&:hover,
+			&:focus,
+			&.has-focus {
+				font-size: var(--wp--preset--font-size--small);
+				line-height: 1;
+				padding: 23px 25px;
+			}
+		}
+	}
+	
+	#comments,
+	#reply-title {
+		font-size: var(--wp--preset--font-size--huge);
+		font-style: italic;
+	}
+	
+	.comment-meta,
+	.comment-author {
+		font-size: var(--wp--preset--font-size--tiny);
+		margin-left: 0;
+
+		a {
+			text-decoration: none;
+		}
+	}
+	
+	input[type=checkbox] + label {
+		margin-left: 0;
+	}
+	
+	.commentlist .comment {
+		padding-left: 0;
+		
+		p {
+			font-size: var(--wp--preset--font-size--normal);
+			margin-bottom: var(--wp--custom--margin--vertical);
+			margin-top: var(--wp--custom--margin--vertical);
+		}
+	}
+	
+	.comment .comment-author {
+		.avatar {
+			border-radius: 1.5em;
+			border: 2px solid #fff;
+			display: block;
+			float: left;
+			height: 42px;
+			margin-right: 18px;
+			width: 42px;
+		}
+		
+		.fn {
+			font-size: var(--global--font-size-xs);
+		}
+	}
+}

seedlet-blocks/sass/theme.scss

@@ -1,7 +1,9 @@
-@import './blocks/site-title.scss';
-@import './blocks/links.scss';
-@import './blocks/latest-posts';
-@import './blocks/pullquote';
+@import "../../blank-canvas-blocks/sass/blocks/button";
+@import 'blocks/latest-posts';
+@import 'blocks/links';
+@import 'blocks/post-comments';
+@import 'blocks/pullquote';
+@import 'blocks/site-title';
 
 /**
  * Author bio