Issue 741 (#761)

* set widget link hover to match body link hover

* fix linting issues

* fix link preview

Author: jamesros161

src/assets/js/customizer/typography/link-preview.js

@@ -122,6 +122,22 @@ export class LinkPreview {
 				footerLinkColorHover  = parseInt( footerLinkColorHover, 10 ) / 100,
 				footerShiftedColorVal = colorLib.Color( footerLinkColor ).lightenByAmount( footerLinkColorHover ).toCSS();
 
+				let colorPaletteOption = JSON.parse( api( 'boldgrid_color_palette' )() );
+
+				let paletteColors  = colorPaletteOption.state.palettes['palette-primary'].colors;
+				let paletteNeutral = colorPaletteOption.state.palettes['palette-primary']['neutral-color'];
+
+				[ 1, 2, 3, 4, 5, 'neutral' ].map( sidebarColorClass => {
+					var sidebarColor      = 'neutral' === sidebarColorClass ? paletteNeutral : paletteColors[ sidebarColorClass - 1 ],
+						sidebarColorHover = api( 'bgtfw_body_link_color_hover' )() || 0,
+						sidebarAriColor;
+
+						sidebarColorHover = parseInt( sidebarColorHover, 10 ) / 100;
+						sidebarAriColor   = colorLib.Color( sidebarColor ).lightenByAmount( sidebarColorHover ).toCSS();
+
+						css += `.sidebar.color-${sidebarColorClass}-link-color a:not( .btn ):hover, .sidebar.color-${sidebarColorClass}-link-color a:not( .btn ):focus { color: ${sidebarAriColor} !important; }`;
+				} );
+
 				css += `
 				#colophon .bgtfw-footer.footer-content > a:not( .btn ),
 				#colophon .bgtfw-footer.footer-content *:not( .menu-item ) > a:not( .btn ) {

src/assets/scss/custom-color/color-classes.scss

@@ -105,19 +105,13 @@ $names: background background-color;
 				a:not( .btn ) {
 					color: #{nth($colors, $each)};
 				}
-				a:not( .btn ):hover, a:not( .btn ):focus, a:not( .btn ):active, a:not( .btn ).highlighted {
-					color: hover( nth($colors, $color), nth($colors, $each) );
-				}
 			}
 		}
 		@if variable-exists( palette-primary-neutral-color ) {
 			&.color-neutral-link-color {
 				a:not( .btn ) {
 					color: $palette-primary-neutral-color;
 				}
-				a:not( .btn ):hover, a:not( .btn ):focus, a:not( .btn ):active, a:not( .btn ).highlighted {
-					color: hover( nth($colors, $color), $palette-primary-neutral-color );
-				}
 			}
 			&.color-neutral-sub-link-color.sm {
 				ul {
@@ -159,9 +153,6 @@ $names: background background-color;
 						a:not( .btn ) {
 							color: #{nth($colors, $each)};
 						}
-						a:not( .btn ):hover, a:not( .btn ):focus, a:not( .btn ):active, a:not( .btn ).highlighted {
-							color: hover( nth($colors, $color), nth($colors, $each) );
-						}
 					}
 				}
 				&.sm {
@@ -249,8 +240,10 @@ $names: background background-color;
 					a {
 						color: #{nth($colors, $each)};
 					}
-					a:hover, a:focus, a:active, a.highlighted {
-						color: hover( $palette-primary-neutral-color, nth($colors, $each) );
+					&:not( .sidebar ) {
+						a:hover, a:focus, a:active, a.highlighted {
+							color: hover( $palette-primary-neutral-color, nth($colors, $each) );
+						}
 					}
 				}
 				&.color-#{$each}-sub-link-color.sm {

src/includes/class-boldgrid-framework-links.php

@@ -168,6 +168,17 @@ public function get_styles( $prefix ) {
 					$footer_lightness   = max( $footer_lightness, 0 );
 					$footer_color_hover = $footer_ari_color->getNew( 'lightness', $footer_lightness )->toCSS( 'hsla' );
 
+					foreach ( array( '1', '2', '3', '4', '5', 'neutral' ) as $sidebar_color_class ) {
+						$sidebar_color_value = BoldGrid::color_from_class( $sidebar_color_class );
+						$sidebar_color_hover = get_theme_mod( 'bgtfw_body_link_color_hover' ) ? get_theme_mod( 'bgtfw_body_link_color_hover' ) : 0;
+						$sidebar_ari_color   = ariColor::newColor( $sidebar_color_value );
+						$sidebar_lightness   = min( $sidebar_ari_color->lightness + $sidebar_color_hover, 100 );
+						$sidebar_lightness   = max( $sidebar_lightness, 0 );
+						$sidebar_color_hover = $sidebar_ari_color->getNew( 'lightness', $sidebar_lightness )->toCSS( 'hsla' );
+
+						$css .= ".sidebar.color-${sidebar_color_class}-link-color a:not( .btn ):hover, .sidebar.color-${sidebar_color_class}-link-color a:not( .btn ):focus { color: ${sidebar_color_hover} !important; }";
+					}
+
 					$css .= "#colophon .bgtfw-footer.footer-content *:not( .menu-item ) > a:not( .btn ) { text-decoration: ${decoration};}";
 					$css .= "#colophon .bgtfw-footer.footer-content *:not( .menu-item ) > a:not( .btn ):hover, .bgtfw-footer.footer-content *:not( .menu-item ) > a:not( .btn ):focus {color: ${footer_color_hover};text-decoration: ${decoration_hover};}";
 				}