Pixel: update link styles (#6517)

* update theme link styles * Implement italics in post content for links. * add block gap to fix post content margin * remove css styles for categories Co-authored-by: Jeff Ong <[email protected]>
Automattic · Sep 8, 2022 · 1e7f989 · 1e7f989
1 parent 479d82a
commit 1e7f989
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 29 deletions.
diff --git a/pixel/style.css b/pixel/style.css
@@ -23,19 +23,10 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
     box-shadow: var(--wp--custom--shadow);
 }
 
-/* Post title styles */
-.wp-block-post-title a {
+/* Links */
+a:where(:not(.wp-element-button)) {
 	text-underline-offset: .3em;
-	text-decoration-thickness: 2px;
-}
-
-.wp-block-post-title a:hover,
-.wp-block-post-title a:focus {
-	text-decoration-style: dotted;
-}
-
-.wp-block-post-title a:active {
-	text-decoration-style: solid;
+	/* text-decoration-thickness: 2px; */
 }
 
 /*
@@ -70,15 +61,6 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
     border-color: var(--wp--preset--color--primary);
 }
 
-/* Categories */
-.taxonomy-category > a {
-	text-decoration: none;
-}
-
-.taxonomy-category > a:hover {
-	text-decoration: underline;
-}
-
 .wp-block-pullquote cite {
 	font-size: 0.75rem;
 	font-style: normal;

diff --git a/pixel/theme.json b/pixel/theme.json
@@ -276,6 +276,44 @@
                         "left": "0.25rem !important",
                         "right": "0.25rem !important"
                     }
+                },
+                "elements": {
+                    "link": {
+                        ":active": {
+                            "typography": {
+                                "textDecoration": "underline dotted"
+                            }
+                        },
+                        ":focus": {
+                            "typography": {
+                                "textDecoration": "underline solid"
+                            }
+                        }
+                    }
+                }
+            },
+            "core/post-content": {
+                "spacing": {
+                    "blockGap": "var(--wp--custom--gap--vertical)"
+                },
+                "elements": {
+                    "link": {
+                        ":active": {
+                            "typography": {
+                                "fontStyle": "italic"
+                            }
+                        },
+                        ":focus": {
+                            "typography": {
+                                "fontStyle": "italic"
+                            }
+                        },
+                        ":hover": {
+                            "typography": {
+                                "fontStyle": "italic"
+                            }
+                        }
+                    }
                 }
             },
             "core/post-date": {
@@ -300,11 +338,6 @@
                     "link": {
                         "typography": {
                             "textDecoration": "none"
-                        },
-                        ":hover": {
-                            "typography": {
-                                "textDecoration": "underline"
-                            }
                         }
                     }
                 }
@@ -327,6 +360,38 @@
                     "fontStyle": "italic"
                 }
             },
+            "core/query-pagination": {
+				"elements": {
+					"link": {
+						"typography": {
+							"textDecoration": "none"
+						}
+					}
+				}
+			},
+			"core/query-pagination-next": {
+				"typography": {
+					"fontWeight": "500"
+				}
+			},
+            "core/query-pagination-numbers": {
+				"typography": {
+					"fontWeight": "500"
+				},
+                "elements": {
+                    "link": {
+                        "typography": {
+                            "fontWeight": "300",
+                            "textDecoration": "none"
+                        }
+                    }
+                }
+			},
+			"core/query-pagination-previous": {
+				"typography": {
+					"fontWeight": "500"
+				}
+			},
             "core/quote": {
                 "border": {
                     "color": "var(--wp--preset--color--primary)",
@@ -369,8 +434,14 @@
                     "fontFamily": "var(--wp--preset--font-family--uni-05-53)",
                     "fontSize": "0.875rem",
                     "fontWeight": "400",
-                    "textTransform": "uppercase",
-                    "textDecoration": "none"
+                    "textTransform": "uppercase"
+                },
+                "elements": {
+                    "link": {
+                        "typography": {
+                            "textDecoration": "none"
+                        }
+                    }
                 }
             }
         },
@@ -467,11 +538,26 @@
             "link": {
                 "color": {
                     "text": "var(--wp--preset--color--primary)"
+                },
+                ":hover": {
+                    "typography": {
+                        "textDecoration": "underline dotted"
+                    }
+                },
+                ":focus": {
+                    "typography": {
+                        "textDecoration": "underline dotted"
+                    }
+                },
+                ":active": {
+                    "typography": {
+                        "textDecoration": "underline solid"
+                    }
                 }
             }
         },
         "spacing": {
-            "blockGap": "30px",
+            "blockGap": "var(--wp--custom--gap--vertical)",
             "padding": {
                 "bottom": "var(--wp--custom--spacing--outer)",
                 "left": "var(--wp--custom--spacing--outer)",