Merge pull request #2546 from Automattic/fix/2533

Spearhead: Fix link color and hover states

spearhead/assets/sass/_text.scss

@@ -1,7 +1,13 @@
-a {
+.has-link-color a, a {
     border-bottom: none;
+    transition: all 0.1s ease;
+
+    &:hover {
+        color: var( --global--color-primary-hover );
+        border-bottom: 1px solid var( --global--color-primary-hover );
+    }
 }
 
 .entry-content a {
     font-weight: 500;
-}
+}

spearhead/style-rtl.css

@@ -109,8 +109,14 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	width: fit-content;
 }
 
-a {
+.has-link-color a, a {
 	border-bottom: none;
+	transition: all 0.1s ease;
+}
+
+.has-link-color a:hover, a:hover {
+	color: var(--global--color-primary-hover);
+	border-bottom: 1px solid var(--global--color-primary-hover);
 }
 
 .entry-content a {

spearhead/style.css

@@ -109,8 +109,14 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	width: fit-content;
 }
 
-a {
+.has-link-color a, a {
 	border-bottom: none;
+	transition: all 0.1s ease;
+}
+
+.has-link-color a:hover, a:hover {
+	color: var(--global--color-primary-hover);
+	border-bottom: 1px solid var(--global--color-primary-hover);
 }
 
 .entry-content a {

spearhead/variables.css

@@ -76,7 +76,7 @@
 @media ( prefers-color-scheme: dark ) {
 	:root {
 		--global--color-primary: #DB0042;
-		--global--color-primary-hover: #DB0042;
+		--global--color-primary-hover: #ffffff;
 		--global--color-secondary: #c0c0c0;
 		--global--color-secondary-hover: #cccccc;
 		--global--color-foreground: #f0f0f0;