Merge branch 'master' into try/seedlet/jetpack-global-styles

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

@@ -305,7 +305,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;
 }
 
@@ -314,7 +314,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

@@ -255,6 +255,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' );
+    
 		// Add support for WordPress.com Global Styles.
 		add_theme_support(
 			'jetpack-global-styles',

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 {