Refactor links in BCB to use underline instead of border-bottom. (#3478)

* Refactored link elements to use underline instead of border-bottom
* Refactored away not selectors from link styles.
Co-authored-by: Jeff Ong <jeff.ong@automattic.com>
Co-authored-by: Ben Dwyer <ben@scruffian.com>

blank-canvas-blocks/assets/ponyfill.css

@@ -168,29 +168,26 @@ body {
  * Elements
  * - Styles for basic HTML elemants
  */
-a:not(.wp-block-button__link) {
+a {
 	cursor: pointer;
-	color: var(--wp--style--color--link, var(--wp--custom--color--foreground));
+	text-underline-offset: 2px;
 	text-decoration: none;
-	border-bottom: 1px solid transparent;
 }
 
-a:not(.wp-block-button__link):hover, a:not(.wp-block-button__link):focus {
-	border-bottom-color: currentColor;
+a:hover, a:focus {
+	text-decoration: underline;
 }
 
-.entry-content a:not(.wp-block-button__link) {
-	border-bottom: 1px solid currentColor;
-	text-decoration: none;
+.block-editor-block-list__layout a,
+.wp-block-post-content a {
+	text-decoration: underline;
 	transition: border-color 0.1s ease-out;
 }
 
-.entry-content a:not(.wp-block-button__link):hover, .entry-content a:not(.wp-block-button__link):focus {
-	border-bottom-color: transparent;
-}
-
-.entry-content a:not(.wp-block-button__link):active {
-	color: var(--wp--style--color--link, var(--wp--custom--color--primary));
+.block-editor-block-list__layout a:hover, .block-editor-block-list__layout a:focus,
+.wp-block-post-content a:hover,
+.wp-block-post-content a:focus {
+	text-decoration: none;
 }
 
 input[type="text"],
@@ -273,6 +270,7 @@ h1, h2, h3, h4, h5, h6 {
 	font-size: var(--wp--custom--button--font-size);
 	line-height: var(--wp--custom--button--line-height);
 	border-radius: var(--wp--custom--button--border-radius);
+	text-decoration: none;
 }
 
 .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,

blank-canvas-blocks/experimental-theme.json

@@ -235,7 +235,7 @@
 			"color": {
 				"background": "var(--wp--custom--color--background)",
 				"text": "var(--wp--custom--color--foreground)",
-				"link": "var(--wp--custom--color--link)"
+				"link": "var(--wp--custom--color--secondary)"
 			},
 			"typography": {
 				"fontSize": "var(--wp--preset--font-size--normal)",

blank-canvas-blocks/sass/blocks/_button.scss

@@ -1,13 +1,13 @@
 /**
  * Button
  */
-
 @mixin button-main-styles {
 	font-weight: var(--wp--custom--button--font-weight);
 	font-family: var(--wp--custom--button--font-family);
 	font-size: var(--wp--custom--button--font-size);
 	line-height: var(--wp--custom--button--line-height);
 	border-radius: var(--wp--custom--button--border-radius);
+	text-decoration: none; // Needed because link styles inside .entry-content add a text decoration
 }
 
 @mixin button-hover-styles {
@@ -32,5 +32,3 @@
 	}
 
 }
-
-

blank-canvas-blocks/sass/elements/_links.scss

@@ -1,30 +1,22 @@
-// All Links styles
-
-a:not(.wp-block-button__link) {
+// Default link styles
+a {
 	cursor: pointer;
-	color: var( --wp--style--color--link, var(--wp--custom--color--foreground) );
+	text-underline-offset: 2px;
 	text-decoration: none;
-	border-bottom: 1px solid transparent;
 
 	&:hover,
 	&:focus {
-		border-bottom-color: currentColor;
+		text-decoration: underline;
 	}
 }
 
-// Links that are in the content
-.entry-content a:not(.wp-block-button__link) {
-	border-bottom: 1px solid currentColor;
-	text-decoration: none;
-	transition: border-color 0.1s ease-out;
+// Links that appear in the main content area
+.block-editor-block-list__layout a, // Needed for the post area
+.wp-block-post-content a {
+	text-decoration: underline;
 
 	&:hover,
 	&:focus {
-		border-bottom-color: transparent;
+		text-decoration: none;
 	}
-
-	&:active {
-		color: var( --wp--style--color--link, var(--wp--custom--color--primary) );
-	}
-
 }