Pixl: refine the comments. (#6520)

* Refine comments styles.

* update comments block spacing and font sizes

* fix checkbox styles

Co-authored-by: madhusudhand <madhusudhan.dollu@gmail.com>

pixel/patterns/comments.php

@@ -6,56 +6,39 @@
  */
 
 ?>
-<!-- wp:comments-query-loop -->
-<div class="wp-block-comments-query-loop">
-	<!-- wp:comments-title /-->
-
-	<!-- wp:comment-template -->
-	<!-- wp:columns -->
-	<div class="wp-block-columns">
-		<!-- wp:column {"width":"40px"} -->
-		<div class="wp-block-column" style="flex-basis:40px"></div>
-		<!-- /wp:column -->
-
-		<!-- wp:column -->
-		<div class="wp-block-column">
-			<!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-			<div class="wp-block-group">
-				<!-- wp:avatar {"size":40,"style":{"border":{"radius":"20px"},"spacing":{"margin":{"top":"10px"}}}} /-->
-
-				<!-- wp:group -->
-				<div class="wp-block-group">
-					<!-- wp:comment-author-name /-->
-
-					<!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"0.5em"}},"layout":{"type":"flex"}} -->
-					<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px">
-						<!-- wp:comment-date {"format":"F j, Y \\a\\t g:i a"} /-->
-
-						<!-- wp:comment-edit-link /-->
-					</div>
-					<!-- /wp:group -->
-				</div>
-				<!-- /wp:group -->
-			</div>
-			<!-- /wp:group -->
-
-			<!-- wp:comment-content /-->
-
-			<!-- wp:comment-reply-link /-->
-		</div>
-		<!-- /wp:column -->
-	</div>
-	<!-- /wp:columns -->
-	<!-- /wp:comment-template -->
-
-	<!-- wp:comments-pagination -->
-	<!-- wp:comments-pagination-previous /-->
-
-	<!-- wp:comments-pagination-numbers /-->
-
-	<!-- wp:comments-pagination-next /-->
-	<!-- /wp:comments-pagination -->
-
-	<!-- wp:post-comments-form /-->
-</div>
-<!-- /wp:comments-query-loop -->
+
+<!-- wp:comments {"className":"wp-block-comments-query-loop "} -->
+<div class="wp-block-comments wp-block-comments-query-loop"><!-- wp:comments-title {"level":3} /-->
+
+<!-- wp:comment-template -->
+<!-- wp:group {"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|50"}}}} -->
+<div class="wp-block-group" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--50)"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"},"style":{"spacing":{"blockGap":"10px"}}} -->
+<div class="wp-block-group"><!-- wp:avatar {"size":40,"style":{"spacing":{"margin":{"top":"10px"}}}} /-->
+
+<!-- wp:group -->
+<div class="wp-block-group"><!-- wp:comment-author-name /-->
+
+<!-- wp:group {"layout":{"type":"flex"},"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"0.5em"}}} -->
+<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px"><!-- wp:comment-date {"format":"F j, Y \\a\\t g:i a"} /-->
+
+<!-- wp:comment-edit-link /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+
+<!-- wp:comment-content /-->
+
+<!-- wp:comment-reply-link /--></div>
+<!-- /wp:group -->
+<!-- /wp:comment-template -->
+
+<!-- wp:comments-pagination -->
+<!-- wp:comments-pagination-previous /-->
+
+<!-- wp:comments-pagination-numbers /-->
+
+<!-- wp:comments-pagination-next /-->
+<!-- /wp:comments-pagination -->
+
+<!-- wp:post-comments-form /--></div>
+<!-- /wp:comments -->

pixel/style.css

@@ -32,21 +32,40 @@ a:where(:not(.wp-element-button)) {
 /*
  * Form elements
  */
-:is(textarea, input:not([type="submit"],[type="checkbox"])) {
+:is(textarea, input:not([type="submit"])) {
 	color: var(--wp--preset--color--foreground);
 	background-color: var(--wp--preset--color--background);
 	border: 2px solid var(--wp--preset--color--primary) !important;
 	outline: none;
     font-size: 0.875rem;
 }
-:is(textarea, input:not([type="submit"],[type="checkbox"]))::placeholder {
+:is(textarea, input:not([type="submit"]))::placeholder {
     color: var(--wp--preset--color--foreground);
     font-weight: 300;
 }
-.wp-block-search :is(textarea, input:not([type="submit"],[type="checkbox"])) {
+.wp-block-search :is(textarea, input:not([type="submit"])) {
     box-shadow: var(--wp--custom--shadow);
     margin-right: var(--wp--preset--spacing--20);
 }
+input[type="checkbox"] {
+    appearance: none;
+    min-width: 0.75rem;
+    height: 0.75rem;
+    position: relative;
+    margin-left: 0;
+}
+input[type="checkbox"]:checked::after	{
+	background-color: var(--wp--preset--color--foreground);
+    content: "";
+    position: absolute;
+    width: 75%;
+    height: 75%;
+    top: 0;
+    left: 0;
+	bottom: 0;
+	right: 0;
+	margin: auto; 
+}
 
 /*
  * Navigation styles

pixel/theme.json

@@ -217,28 +217,19 @@
                     "fontFamily": "monospace"
                 }
             },
-            "core/comment-author-name": {
+            "core/comments": {
                 "typography": {
-                    "fontSize": "var(--wp--preset--font-size--small)"
-                }
-            },
-            "core/comment-date": {
-                "typography": {
-                    "fontSize": "var(--wp--preset--font-size--small)"
-                }
-            },
-            "core/comment-edit-link": {
-                "typography": {
-                    "fontSize": "var(--wp--preset--font-size--small)"
+                    "fontSize": "0.75rem"
                 }
             },
             "core/comment-reply-link": {
-                "color": {
-                    "text": "var(--wp--preset--color--primary)"
-                },
                 "typography": {
-                    "fontSize": "var(--wp--preset--font-size--small)",
-                    "textDecoration": "underline"
+                    "textDecoration": "none"
+                },
+                "spacing": {
+                    "margin": {
+                        "top": "0.25rem !important"
+                    }
                 }
             },
             "core/comments-title": {
@@ -247,9 +238,10 @@
                 }
             },
             "core/comment-content": {
-                "typography": {
-                    "fontSize": "1.125rem",
-                    "lineHeight": "1.6"
+                "spacing": {
+                    "margin": {
+                        "top": "0.25rem !important"
+                    }
                 }
             },
             "core/gallery": {
@@ -316,6 +308,25 @@
                     }
                 }
             },
+            "core/post-comments-form": {
+                "elements": {
+                    "button": {
+                        "spacing": {
+                            "margin": {
+                                "top": "var(--wp--preset--spacing--40)"
+                            }
+                        }
+                    },
+                    "h3": {
+                        "spacing": {
+                            "margin": {
+                                "bottom": "var(--wp--preset--spacing--60) !important",
+                                "top": "var(--wp--preset--spacing--60) !important"
+                            }
+                        }
+                    }
+                }
+            },
             "core/post-date": {
                 "color": {
                     "text": "var(--wp--preset--color--foreground)"