Seedlet hover enhancements (#2380)

* Bring back green hover color, add transition property.

* Update color annotations.

seedlet/assets/css/ie.css

@@ -1519,6 +1519,7 @@ a {
 	border-bottom: 1px solid #3C8067;
 	color: #000000;
 	text-decoration: none;
+	transition: border-color 0.1s ease-out;
 }
 
 a:hover, a:focus {
@@ -1526,7 +1527,7 @@ a:hover, a:focus {
 }
 
 a:hover {
-	color: #000000;
+	color: #3C8067;
 }
 
 a:focus {
@@ -3016,11 +3017,11 @@ dd {
 }
 
 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover {
-	color: #000000;
+	color: #3C8067;
 }
 
 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus {
-	color: #000000;
+	color: #3C8067;
 }
 
 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link__content {
@@ -3098,11 +3099,11 @@ p.has-text-color a {
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta a:hover {
-	color: #000000;
+	color: #3C8067;
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta a:active {
-	color: #000000;
+	color: #3C8067;
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__edit-link {
@@ -4098,18 +4099,21 @@ table th {
 	color: currentColor;
 	font-weight: 700;
 	text-shadow: 1px 0px #FFFFFF, -1px 0px #FFFFFF, -2px 0px #FFFFFF, 2px 0px #FFFFFF, -3px 0px #FFFFFF, 3px 0px #FFFFFF, -4px 0px #FFFFFF, 4px 0px #FFFFFF, -5px 0px #FFFFFF, 5px 0px #FFFFFF;
+	transition: background-size 0.1s ease-out;
 }
 
 .site-title a:link, .site-title a:visited, .site-title a:active {
 	color: currentColor;
 }
 
-.site-title a:hover, .site-title a:focus {
-	background-image: none;
+.site-title a:hover {
+	color: #3C8067;
+	background-size: 8px 0px;
 }
 
 .site-title a:focus {
 	color: #3C8067;
+	background-size: 8px 0px;
 }
 
 .site-title a::selection {
@@ -4215,15 +4219,15 @@ nav a {
 }
 
 .menu-button-container .button:hover {
-	color: #000000;
+	color: #3C8067;
 }
 
 .primary-navigation .button:hover {
-	color: #000000;
+	color: #3C8067;
 }
 
 .woo-navigation .button:hover {
-	color: #000000;
+	color: #3C8067;
 }
 
 .menu-button-container .button#woo-open-menu .svg-icon {
@@ -4541,11 +4545,11 @@ nav a {
 }
 
 .primary-navigation .primary-menu > .menu-item:hover > a {
-	color: #000000;
+	color: #3C8067;
 }
 
 .woo-navigation .primary-menu > .menu-item:hover > a {
-	color: #000000;
+	color: #3C8067;
 }
 
 .primary-navigation .primary-menu-container > ul > .menu-item {
@@ -4578,12 +4582,12 @@ nav a {
 }
 
 .primary-navigation .menu-item > a:hover {
-	color: #000000;
+	color: #3C8067;
 	border-color: #3C8067;
 }
 
 .woo-navigation .menu-item > a:hover {
-	color: #000000;
+	color: #3C8067;
 	border-color: #3C8067;
 }
 
@@ -4779,11 +4783,11 @@ nav a {
 }
 
 .social-navigation a:hover {
-	color: #000000;
+	color: #3C8067;
 }
 
 .social-navigation a:focus {
-	color: #000000;
+	color: #3C8067;
 }
 
 .social-navigation a:active {
@@ -4899,7 +4903,7 @@ nav a {
 }
 
 .site-footer > .footer-navigation .footer-menu .menu-item a:hover {
-	color: #000000;
+	color: #3C8067;
 	border-color: #3C8067;
 }
 
@@ -4923,7 +4927,7 @@ nav a {
 }
 
 .entry-title a:hover {
-	color: #000000;
+	color: #3C8067;
 }
 
 .entry-title a:focus {
@@ -5039,19 +5043,19 @@ nav a {
 }
 
 .entry-meta a:hover {
-	color: #000000;
+	color: #3C8067;
 }
 
 .entry-meta a:focus {
-	color: #000000;
+	color: #3C8067;
 }
 
 .entry-footer a:hover {
-	color: #000000;
+	color: #3C8067;
 }
 
 .entry-footer a:focus {
-	color: #000000;
+	color: #3C8067;
 }
 
 .entry-meta a:hover {
@@ -5168,7 +5172,7 @@ nav a {
 }
 
 .navigation a:hover {
-	color: #000000;
+	color: #3C8067;
 	border-color: #3C8067;
 }
 
@@ -5264,7 +5268,7 @@ nav a {
 }
 
 .pagination .nav-links > *a:hover {
-	color: #000000;
+	color: #3C8067;
 }
 
 .pagination .nav-links > *:last-child {
@@ -5404,11 +5408,11 @@ nav a {
 }
 
 .comment-meta .comment-metadata a:hover {
-	color: #000000;
+	color: #3C8067;
 }
 
 .comment-meta .comment-metadata a:focus {
-	color: #000000;
+	color: #3C8067;
 }
 
 .comment-meta .comment-metadata a:active {
@@ -5875,19 +5879,19 @@ img#wpstats {
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #000000;
+	color: #3C8067;
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus {
-	color: #000000;
+	color: #3C8067;
 }
 
 .wp-block-a8c-blog-posts article .entry-title a:hover {
-	color: #000000;
+	color: #3C8067;
 }
 
 .wp-block-a8c-blog-posts article .entry-title a:focus {
-	color: #000000;
+	color: #3C8067;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover,
@@ -6005,42 +6009,42 @@ img#wpstats {
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover {
-	color: #000000;
+	color: #3C8067;
 	text-decoration: none;
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active {
-	color: #000000;
+	color: #3C8067;
 	text-decoration: none;
 }
 
 .wp-block-newspack-blocks-homepage-articles article .cat-links a:hover {
-	color: #000000;
+	color: #3C8067;
 	text-decoration: none;
 }
 
 .wp-block-newspack-blocks-homepage-articles article .cat-links a:active {
-	color: #000000;
+	color: #3C8067;
 	text-decoration: none;
 }
 
 .wp-block-a8c-blog-posts article .entry-meta a:hover {
-	color: #000000;
+	color: #3C8067;
 	text-decoration: none;
 }
 
 .wp-block-a8c-blog-posts article .entry-meta a:active {
-	color: #000000;
+	color: #3C8067;
 	text-decoration: none;
 }
 
 .wp-block-a8c-blog-posts article .cat-links a:hover {
-	color: #000000;
+	color: #3C8067;
 	text-decoration: none;
 }
 
 .wp-block-a8c-blog-posts article .cat-links a:active {
-	color: #000000;
+	color: #3C8067;
 	text-decoration: none;
 }
 

seedlet/assets/css/style-editor.css

@@ -27,7 +27,7 @@
 	/* Colors */
 	--global--color-primary: #000000;
 	--global--color-secondary: #3C8067;
-	--global--color-primary-hover: var( --global--color-primary );
+	--global--color-primary-hover: var( --global--color-secondary );
 	--global--color-secondary-hover: #336D58;
 	--global--color-black: black;
 	--global--color-white: white;
@@ -224,7 +224,7 @@
 	/* Colors */
 	--global--color-primary: #000000;
 	--global--color-secondary: #3C8067;
-	--global--color-primary-hover: var( --global--color-primary );
+	--global--color-primary-hover: var( --global--color-secondary );
 	--global--color-secondary-hover: #336D58;
 	--global--color-black: black;
 	--global--color-white: white;

seedlet/assets/sass/abstracts/_config.scss

@@ -34,7 +34,7 @@ $typescale-ratio: 1.2; // Run ratio math on 1em == $typescale-base * $typescale-
 	/* Colors */
 	--global--color-primary: #000000;
 	--global--color-secondary: #3C8067;
-	--global--color-primary-hover: var( --global--color-primary );
+	--global--color-primary-hover: var( --global--color-secondary );
 	--global--color-secondary-hover: #336D58;
 	--global--color-black: black;
 	--global--color-white: white;

seedlet/assets/sass/base/_reset.scss

@@ -83,6 +83,7 @@ a {
 	border-bottom: 1px solid var(--global--color-secondary);
 	color: var( --wp--style--color--link, var(--global--color-primary) );
 	text-decoration: none;
+	transition: border-color 0.1s ease-out;
 	
 	&:hover,
 	&:focus {

seedlet/assets/sass/components/header/_header-branding.scss

@@ -35,6 +35,7 @@
 			4px 0px var(--global--color-background),
 			-5px 0px var(--global--color-background), 
 			5px 0px var(--global--color-background);
+		transition: background-size 0.1s ease-out;
 
 		&:link,
 		&:visited,
@@ -43,12 +44,9 @@
 		}
 
 		&:hover,
-		&:focus {
-			background-image: none;
-		}
-
 		&:focus {
 			color: var(--global--color-secondary);
+			background-size: 8px 0px;
 		}
 
 		&::selection {

seedlet/inc/wpcom-colors.php

@@ -286,7 +286,8 @@ add_color_rule( 'fg1', '#3C8067', array(
 			.primary-navigation .primary-menu > .menu-item:hover > a,
 			.primary-navigation > .button:hover,
 			a:focus,
-			a:hover', 'color' ),
+			a:hover,
+			.site-footer > .footer-navigation .footer-menu .menu-item a:hover', 'color' ),
 
 	// Background-color
 	array( '.a8c-posts-list__view-all,
@@ -300,6 +301,13 @@ add_color_rule( 'fg1', '#3C8067', array(
 			button[data-load-more-btn],
 			input[type="submit"]', 'background-color' ),
 
+	// Border-color
+	array( '.primary-navigation .menu-item > a:hover, 
+			.woo-navigation .menu-item > a:hover,
+			.entry-meta a:hover,
+			.entry-footer a:hover,
+			.site-footer > .footer-navigation .footer-menu .menu-item a:hover', 'border-color' ),
+
 	// Border-bottom-color
 	array( 'a', 'border-bottom-color' ),
 
@@ -311,7 +319,7 @@ add_color_rule( 'fg1', '#3C8067', array(
 	array( '.wp-block-quote.has-text-align-right', 'border-right-color' ),
 
 	// Outline-color
-	array( '*:focus', 'outline-color' ),
+	array( '.site :focus', 'outline-color' ),
 	
 	// Background-image
 	array( '.site-title a', 'Background-image' ),

seedlet/style-rtl.css

@@ -93,7 +93,7 @@ Included in theme screenshot.
 	/* Colors */
 	--global--color-primary: #000000;
 	--global--color-secondary: #3C8067;
-	--global--color-primary-hover: var( --global--color-primary );
+	--global--color-primary-hover: var( --global--color-secondary );
 	--global--color-secondary-hover: #336D58;
 	--global--color-black: black;
 	--global--color-white: white;
@@ -982,6 +982,7 @@ a {
 	border-bottom: 1px solid var(--global--color-secondary);
 	color: var(--wp--style--color--link, var(--global--color-primary));
 	text-decoration: none;
+	transition: border-color 0.1s ease-out;
 }
 
 a:hover, a:focus {
@@ -2765,6 +2766,7 @@ table th,
 	color: currentColor;
 	font-weight: var(--branding--title--font-weight);
 	text-shadow: -1px 0px var(--global--color-background), 1px 0px var(--global--color-background), 2px 0px var(--global--color-background), -2px 0px var(--global--color-background), 3px 0px var(--global--color-background), -3px 0px var(--global--color-background), 4px 0px var(--global--color-background), -4px 0px var(--global--color-background), 5px 0px var(--global--color-background), -5px 0px var(--global--color-background);
+	transition: background-size 0.1s ease-out;
 }
 
 .site-title a:link, .site-title a:visited, .site-title a:active {
@@ -2772,11 +2774,8 @@ table th,
 }
 
 .site-title a:hover, .site-title a:focus {
-	background-image: none;
-}
-
-.site-title a:focus {
 	color: var(--global--color-secondary);
+	background-size: 8px 0px;
 }
 
 .site-title a::selection {

seedlet/style.css

@@ -93,7 +93,7 @@ Included in theme screenshot.
 	/* Colors */
 	--global--color-primary: #000000;
 	--global--color-secondary: #3C8067;
-	--global--color-primary-hover: var( --global--color-primary );
+	--global--color-primary-hover: var( --global--color-secondary );
 	--global--color-secondary-hover: #336D58;
 	--global--color-black: black;
 	--global--color-white: white;
@@ -990,6 +990,7 @@ a {
 	border-bottom: 1px solid var(--global--color-secondary);
 	color: var(--wp--style--color--link, var(--global--color-primary));
 	text-decoration: none;
+	transition: border-color 0.1s ease-out;
 }
 
 a:hover, a:focus {
@@ -2790,6 +2791,7 @@ table th,
 	color: currentColor;
 	font-weight: var(--branding--title--font-weight);
 	text-shadow: 1px 0px var(--global--color-background), -1px 0px var(--global--color-background), -2px 0px var(--global--color-background), 2px 0px var(--global--color-background), -3px 0px var(--global--color-background), 3px 0px var(--global--color-background), -4px 0px var(--global--color-background), 4px 0px var(--global--color-background), -5px 0px var(--global--color-background), 5px 0px var(--global--color-background);
+	transition: background-size 0.1s ease-out;
 }
 
 .site-title a:link, .site-title a:visited, .site-title a:active {
@@ -2797,11 +2799,8 @@ table th,
 }
 
 .site-title a:hover, .site-title a:focus {
-	background-image: none;
-}
-
-.site-title a:focus {
 	color: var(--global--color-secondary);
+	background-size: 8px 0px;
 }
 
 .site-title a::selection {