Add support for custom link color. (#2208)

* Add support for custom link color.

* Update seedlet/assets/sass/base/_editor.scss

Co-authored-by: Jeff Ong <jeff.ong@automattic.com>

* Use --global--color--primary as a fallback rule.

* Update seedlet/assets/sass/abstracts/_config.scss

Co-authored-by: Jeff Ong <jeff.ong@automattic.com>

* Remove extra code comment.

* Enforce the custom link color even on blocks that have a color background.

Co-authored-by: Jeff Ong <jeff.ong@automattic.com>

seedlet/assets/css/ie.css

@@ -1886,9 +1886,17 @@ a:focus {
 }
 
 a:active {
+	color: undefined;
+}
+
+p.has-background.has-link-color:not(.has-background-background-color) a {
 	color: #000000;
 }
 
+.has-link-color a {
+	border-bottom: 1px solid #000000;
+}
+
 *:focus {
 	outline-width: 1px;
 	outline-style: dotted;

seedlet/assets/css/style-editor.css

@@ -109,7 +109,7 @@ body {
 
 a {
 	border-bottom: 1px solid var(--global--color-secondary);
-	color: var(--global--color-primary);
+	color: var(--wp--style--color--link, var(--global--color-primary));
 	text-decoration: none;
 }
 
@@ -118,7 +118,15 @@ a:hover, a:focus {
 }
 
 a:active {
-	color: var(--global--color-primary);
+	color: var(--wp--style--color--link, var(--global--color-primary));
+}
+
+p.has-background.has-link-color:not(.has-background-background-color) a {
+	color: var(--wp--style--color--link, var(--global--color-primary));
+}
+
+.has-link-color a {
+	border-bottom: 1px solid var(--wp--style--color--link);
 }
 
 button,

seedlet/assets/sass/base/_editor.scss

@@ -19,7 +19,7 @@ body {
 // Links styles
 a {
 	border-bottom: 1px solid var(--global--color-secondary);
-	color: var(--global--color-primary);
+	color: var( --wp--style--color--link, var(--global--color-primary) );
 	text-decoration: none;
 
 	&:hover,
@@ -28,7 +28,19 @@ a {
 	}
 
 	&:active {
-		color: var(--global--color-primary);
+		color: var( --wp--style--color--link, var(--global--color-primary) );
+	}
+
+	// Enforce the custom link color even if a custom background color has been set.
+	// The extra specificity here is required to override the background color styles.
+	p.has-background.has-link-color:not(.has-background-background-color) & {
+		color: var( --wp--style--color--link, var(--global--color-primary) );
+	}
+
+	// If a custom link color has been assigned,
+	// switch the color of the bottom border too. 
+	.has-link-color & {
+		border-bottom: 1px solid var(--wp--style--color--link);
 	}
 }
 

seedlet/assets/sass/base/_reset.scss

@@ -81,7 +81,7 @@ body {
 // Links styles
 a {
 	border-bottom: 1px solid var(--global--color-secondary);
-	color: var(--global--color-primary);
+	color: var( --wp--style--color--link, var(--global--color-primary) );
 	text-decoration: none;
 	
 	&:hover,
@@ -90,7 +90,19 @@ a {
 	}
 
 	&:active {
-		color: var(--global--color-primary);
+		color: var(--wp--style--color--link);
+	}
+
+	// Enforce the custom link color even if a custom background color has been set.
+	// The extra specificity here is required to override the background color styles.
+	p.has-background.has-link-color:not(.has-background-background-color) & {
+		color: var( --wp--style--color--link, var(--global--color-primary) );
+	}
+
+	// If a custom link color has been assigned,
+	// switch the color of the bottom border too. 
+	.has-link-color & {
+		border-bottom: 1px solid var( --wp--style--color--link, var(--global--color-primary) );
 	}
 }
 

seedlet/functions.php

@@ -254,6 +254,9 @@ if ( ! function_exists( 'seedlet_setup' ) ) :
 
 		// Add support for responsive embedded content.
 		add_theme_support( 'responsive-embeds' );
+
+		// Add support for experimental link color control.
+		add_theme_support( 'experimental-link-color' );
 	}
 endif;
 add_action( 'after_setup_theme', 'seedlet_setup' );

seedlet/style-rtl.css

@@ -975,7 +975,7 @@ body {
 
 a {
 	border-bottom: 1px solid var(--global--color-secondary);
-	color: var(--global--color-primary);
+	color: var(--wp--style--color--link, var(--global--color-primary));
 	text-decoration: none;
 }
 
@@ -984,7 +984,15 @@ a:hover, a:focus {
 }
 
 a:active {
-	color: var(--global--color-primary);
+	color: var(--wp--style--color--link);
+}
+
+p.has-link-color.has-background a {
+	color: var(--wp--style--color--link, var(--global--color-primary));
+}
+
+.has-link-color a {
+	border-bottom: 1px solid var(--wp--style--color--link, var(--global--color-primary));
 }
 
 *:focus {

seedlet/style.css

@@ -983,7 +983,7 @@ body {
 
 a {
 	border-bottom: 1px solid var(--global--color-secondary);
-	color: var(--global--color-primary);
+	color: var(--wp--style--color--link, var(--global--color-primary));
 	text-decoration: none;
 }
 
@@ -992,7 +992,15 @@ a:hover, a:focus {
 }
 
 a:active {
-	color: var(--global--color-primary);
+	color: var(--wp--style--color--link);
+}
+
+p.has-background.has-link-color:not(.has-background-background-color) a {
+	color: var(--wp--style--color--link, var(--global--color-primary));
+}
+
+.has-link-color a {
+	border-bottom: 1px solid var(--wp--style--color--link, var(--global--color-primary));
 }
 
 *:focus {