Vivre: move link pseudo states to theme.json (#6150)

* add link hover and active states to theme.json

* update navigation and post link state styles in theme.json

* fix text decoration issues

* Invert the default link styles+hover state to match the design.

* Remove unneeded comments.

Co-authored-by: Jeff Ong <jonger4@gmail.com>

curator/style.css

@@ -41,6 +41,7 @@ body {
 	background: var(--wp--preset--color--foreground);
 	border-color: var(--wp--preset--color--foreground);
 	color: var(--wp--preset--color--background);
+	text-decoration: none;
 }
 .wp-block-button__link.wp-block-button__link:active {
 	color: var(--wp--preset--color--primary);
@@ -84,20 +85,12 @@ body {
 	text-decoration: underline;
 }
 
-/*
- * Search and File Block button styles.
- * Necessary until the following issues are resolved in Gutenberg:
- * https://github.com/WordPress/gutenberg/issues/36444
- * https://github.com/WordPress/gutenberg/issues/27760
- */
-
-
-
 /*
  * Search input styles
  * Needed until this is resolved in Gutenberg:
  * https://github.com/WordPress/gutenberg/issues/34198
  */
+
 .wp-block-search__input {
 	border-color: var(--wp--preset--color--foreground);
 }
@@ -106,19 +99,17 @@ body {
  * Link Styles
  */
 
-.wp-block-site-title a {
-	padding: .4rem 0;
-	text-decoration: inherit; /* Needed so the link styles will be inherited correctly from theme.json */
-	text-underline-offset: .1rem;
-}
-
 a:not(
 	.wp-block-search__button,
 	.wp-block-button__link
-):hover,
+) {
+	text-underline-offset: .1rem;
+}
 
-.wp-block-site-title a:hover {
-	text-decoration: underline;
+.wp-block-site-title a {
+	padding: .4rem 0;
+	text-decoration: inherit; /* Needed so the link styles will be inherited correctly from theme.json */
+	text-underline-offset: .1rem;
 }
 
 a:not(
@@ -129,11 +120,6 @@ a:not(
 	text-decoration-style: dotted;
 }
 
-.wp-block-site-title a:active {
-	text-decoration: none;
-	background-color: var(--wp--preset--color--tertiary);
-}
-
 /*
  * Navigation and Other Link Styles
  */
@@ -144,11 +130,6 @@ a:not(
 
 :is(
 	.wp-block-pages-list__item .wp-block-pages-list__item__link,
-	.wp-block-navigation-link__content,
-	.wp-block-navigation-item__content,
-	.wp-block-site-title a,
-	.wp-block-post-navigation-link a,
-	.wp-block-post-terms a
 ):hover {
 	text-decoration: underline;
 }
@@ -166,20 +147,12 @@ a:not(
 }
 
 :is(
-	.wp-block-pages-list__item .wp-block-pages-list__item__link,
-	.wp-block-navigation-link__content,
-	.wp-block-navigation-item__content,
-	.wp-block-site-title a,
-	.wp-block-post-navigation-link a,
-	.wp-block-post-terms a
+	.wp-block-pages-list__item .wp-block-pages-list__item__link
 ):active {
 	text-decoration: underline;
 }
 
 .wp-block-post-title a:hover {
-	color: var(--wp--preset--color--primary);
-	text-decoration-line: underline;
-	text-decoration-thickness: 0.25rem;
 	text-underline-offset: 0.25rem;
 }
 

curator/theme.json

@@ -249,6 +249,25 @@
 			"core/navigation": {
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--medium)"
+				},
+				"elements": {
+					"link": {
+						":hover": {
+							"typography": {
+								"textDecoration": "underline"
+							}
+						},
+						":focus": {
+							"typography": {
+								"textDecoration": "underline"
+							}
+						},
+						":active": {
+							"typography": {
+								"textDecoration": "underline"
+							}
+						}
+					}
 				}
 			},
 			"core/post-terms": {
@@ -262,6 +281,21 @@
 							"fontWeight":"700",
 							"lineHeight": "0.8",
 							"letterSpacing": "-0.03em"
+						},
+						":hover": {
+							"typography": {
+								"textDecoration": "underline"
+							}
+						},
+						":focus": {
+							"typography": {
+								"textDecoration": "underline"
+							}
+						},
+						":active": {
+							"typography": {
+								"textDecoration": "underline"
+							}
 						}
 					}
 				}
@@ -311,8 +345,40 @@
 						"color": {
 							"text": "var(--wp--preset--color--foreground)"
 						},
+						"typography": {
+							"textDecoration": "none 0.25rem"
+						},
+						":hover": {
+							"color": {
+								"text": "var(--wp--preset--color--primary)"
+							},
+							"typography": {
+								"textDecoration": "underline 0.25rem"
+							}
+						}
+					}
+				}
+			},
+			"core/post-navigation-link": {
+				"elements": {
+					"link": {
 						"typography": {
 							"textDecoration": "none"
+						},
+						":hover": {
+							"typography": {
+								"textDecoration": "underline"
+							}
+						},
+						":focus": {
+							"typography": {
+								"textDecoration": "underline"
+							}
+						},
+						":active": {
+							"typography": {
+								"textDecoration": "underline"
+							}
 						}
 					}
 				}
@@ -330,6 +396,11 @@
 						},
 						"color": {
 							"text": "var(--wp--preset--color--foreground)"
+						},
+						":hover": {
+							"typography": {
+								"textDecoration": "underline"
+							}
 						}
 					}
 				}
@@ -443,6 +514,19 @@
 					"link":{
 						"typography":{
 							"textDecoration": "none"
+						},
+						":hover": {
+							"typography": {
+								"textDecoration": "underline"
+							}
+						},
+						":active": {
+							"color": {
+								"background": "var(--wp--preset--color--tertiary)"
+							},
+							"typography": {
+								"textDecoration": "underline"
+							}
 						}
 					}
 				}
@@ -554,7 +638,25 @@
 					"text": "var(--wp--preset--color--primary)"
 				},
 				"typography": {
-					"textDecoration": "none"
+					"textDecoration": "underline"
+				},
+				":hover": {
+					"typography": {
+						"textDecoration": "none"
+					}
+				},
+				":active": {
+					"color": {
+						"background": "var(--wp--preset--color--tertiary)"
+					},
+					"typography": {
+						"textDecoration": "none"
+					}
+				},
+				":focus": {
+					"typography": {
+						"textDecoration": "underline"
+					}
 				}
 			}
 		},