Issue 50 - Improve Color Palettes by using color variables instead of SCSS compilation during runtime

gulpfile.js

@@ -429,6 +429,18 @@ gulp.task('bootstrapCompile', function () {
   //  .pipe( notify( { message: 'SCSS compile complete', onLast: true } ) );
 });
 
+// Bootstrap Compile
+gulp.task('colorPalettesCompile', function () {
+  gulp.src(config.dist + '/assets/scss/custom-color/color-palettes.scss')
+    .pipe(sass())
+    .pipe(sass.sync().on('error', sass.logError))
+    .pipe(gulp.dest(config.prime_dest + '/css' ) )
+    .pipe(cssnano({ discardComments: { removeAll: true }, safe: true }))
+    .pipe(rename({ suffix: '.min' }))
+    .pipe(gulp.dest( config.prime_dest + '/css' ) )
+  //  .pipe( notify( { message: 'SCSS compile complete', onLast: true } ) );
+});
+
 // Watch for changes and recompile scss
 gulp.task('sass:watch', function () {
 	gulp.watch( 'src/assets/scss/**/*.scss', function () {
@@ -554,7 +566,7 @@ gulp.task( 'build', function( cb ) {
 		['jsHint', 'jscs', 'frameworkJs', 'svgs', 'tgm'],
 		['scssDeps', 'jsDeps', 'modernizr', 'fontDeps', 'phpDeps', 'frameworkFiles', 'copyScss'],
 		'images',
-		['scssCompile', 'bootstrapCompile'],
+		['scssCompile', 'bootstrapCompile', 'colorPalettesCompile' ],
 		['fontFamilyCss', 'patterns'],
 		'hovers',
 		'hoverColors',

prime/inc/boldgrid-theme-framework-config/config.php

@@ -220,7 +220,7 @@ function boldgrid_prime_framework_config( $config ) {
 
 		// Footer specific colors for background, headings, and links.
 		$config['customizer']['controls']['bgtfw_footer_color']['default'] = 'color-5';
-		$config['customizer']['controls']['bgtfw_footer_links']['default'] = 'color-1';
+		$config['customizer']['controls']['bgtfw_footer_link_color']['default'] = 'color-1';
 
 		// Page title display settings, show by default.
 		$config['customizer']['controls']['bgtfw_pages_title_display']['default'] = 'show';

src/assets/js/customizer/color-palette-generate.js

@@ -93,6 +93,138 @@ BOLDGRID.COLOR_PALETTE.Generate = BOLDGRID.COLOR_PALETTE.Generate || {};
 		'#1a1a1a'
 	];
 
+	/**
+	 * Css Variables.
+	 *
+	 * Generate CSS Variables for a color palette.
+	 *
+	 * @ since 2.20.0
+	 *
+	 * @param {object} colorPalette The Color Palette Object.
+	 *
+	 * @returns string CSS Variables string.
+	 */
+	self.cssVariables = function( colorPalette ) {
+		var css              = '',
+			formattedPalette = {};
+
+		$.each( colorPalette.colors, function( index, color ) {
+			var colorIndex = index + 1;
+
+			formattedPalette['color-' + colorIndex ] = color;
+		} );
+
+		formattedPalette['color-neutral'] = colorPalette['neutral-color'];
+
+		$.each( formattedPalette, function( variable, color ) {
+			css += `--${variable}: ${color};`;
+			css += `--${variable}-raw: ` + color.replace( 'rgb(', '' ).replace( ')', '' ) + ';';
+			css += `--${variable}-light:` + net.brehaut.Color( color ).lightenByAmount( 0.1 ).toCSS() + ';';
+			css += self.generateHoverVars( formattedPalette, variable, color );
+		} );
+
+		return css;
+	};
+
+	/**
+	 * Generates CSS Variables for hover colors.
+	 *
+	 * @since 2.20.0
+	 *
+	 * @param {object} formattedPalette Formatted colors object.
+	 * @param {string} textVariable     Text color variable.
+	 * @param {string} textColor        Text color value.
+	 *
+	 * @returns {string} CSS Variables string.
+	 */
+	self.generateHoverVars = function( formattedPalette, textVariable, textColor ) {
+		var textIndex = textVariable.replace( 'color-', '' ),
+			hoverVars = '';
+
+		$.each( formattedPalette, function( bgVariable, bgColor ) {
+			var bgIndex    = bgVariable.replace( 'color-', '' ),
+				hoverColor = self.getHoverColor(
+					net.brehaut.Color( bgColor ),
+					net.brehaut.Color( textColor )
+				);
+
+				hoverVars += `--bg-${bgIndex}-text-${textIndex}-hover: ${hoverColor};`;
+		} );
+
+		return hoverVars;
+	};
+
+	/**
+	 * Get Hover Color.
+	 *
+	 * All the logic for determining the hover color was
+	 * derived from the SCSS functions defined prior to the
+	 * 2.2.0 release in the following file:
+	 *
+	 * src/assets/scss/custom-color/color-palettes.scss
+	 *
+	 * @since 2.20.0
+	 *
+	 * @param {Color} BgColor   Background Color object.
+	 * @param {Color} TextColor Text Color object.
+	 *
+	 * @returns {string} RGB Color value.
+	 */
+	self.getHoverColor = function( BgColor, TextColor ) {
+		var textLightness = TextColor.getLightness(),
+			bgLightness   = BgColor.getLightness(),
+			hoverColor;
+
+		// White Text
+		if ( 1 === textLightness ) {
+
+			// Dark Background
+			if ( 0.9 <= bgLightness ) {
+				hoverColor = BgColor.darkenByAmount( 0.15 );
+
+			// Light Background
+			} else {
+				hoverColor = BgColor.blend( TextColor, 0.8 );
+			}
+
+		// Black Text
+		} else if ( 0 === textLightness ) {
+
+			// Dark Background
+			if ( 0.10 > bgLightness ) {
+				hoverColor = BgColor.lightenByAmount( 0.2 );
+
+			// Light Background
+			} else {
+				hoverColor = BgColor.blend( TextColor, 0.6 );
+			}
+
+		// Light Text on Dark Background.
+		} else if ( bgLightness < textLightness ) {
+
+			// Color is too light to lighten.
+			if ( 0.9 < textLightness ) {
+				hoverColor = TextColor.darkenByAmount( 0.2 );
+			} else {
+				hoverColor = TextColor.lightenByAmount( 0.2 );
+			}
+
+		// Dark Text on Light Background.
+		} else {
+
+			// Color is too dark to darken.
+			if ( 0.15 > textLightness ) {
+				hoverColor = TextColor.lightenByAmount( 0.2 );
+			} else {
+				hoverColor = TextColor.darkenByAmount( 0.2 );
+			}
+		}
+
+		hoverColor = hoverColor.toRGB();
+
+		return 'rgb(' + Math.floor( hoverColor.red * 255 ) + ',' + Math.floor( hoverColor.green * 255 ) + ',' + Math.floor( hoverColor.blue * 255 ) + ')';
+	};
+
 	/**
 	 * Get a random color
 	 * Not Used ATM

src/assets/js/customizer/color-palette-preview.js

@@ -22,6 +22,110 @@ BOLDGRID.COLOR_PALETTE.Preview = BOLDGRID.COLOR_PALETTE.Preview || {};
 		}
 	});
 
+	/**
+	 * Update CSS overlay colors.
+	 *
+	 * CSS Overlay colors are translucent background colors
+	 * added to elements using PPB. These are currently added using head inline CSS
+	 * since the PPB added this feature before we added the --color-x-raw variables.
+	 *
+	 * This method will update the inline CSS to use the --color-x-raw variables when
+	 * the palette is changed. However, in the future, we should update PPB to use
+	 * the --color-x-raw variables instead of inline CSS.
+	 *
+	 * @since 2.20.0
+	 */
+	self.updateOverlayColors = function() {
+		var $bgColorElements    = $( '[class*="-background-color"]' ),
+			$imgOverlayElements = $( '[data-bg-overlaycolor-class]' ),
+			$fwrElements        = $( '[class*="fwr-"]' ),
+			rawColorValues      = {
+				'color-1-raw': $( ':root' ).css( '--color-1-raw' ),
+				'color-2-raw': $( ':root' ).css( '--color-2-raw' ),
+				'color-3-raw': $( ':root' ).css( '--color-3-raw' ),
+				'color-4-raw': $( ':root' ).css( '--color-4-raw' ),
+				'color-5-raw': $( ':root' ).css( '--color-5-raw' ),
+				'color-neutral-raw': $( ':root' ).css( '--color-neutral-raw' ),
+			};
+
+		$bgColorElements.each( ( _, el ) => {
+			var $bgColorEl      = $( el ),
+				bgUuid          = $bgColorEl.attr( 'data-bg-uuid' ),
+				$fwrInlineStyle = $( `#${bgUuid}-inline-css` );
+
+			$fwrInlineStyle.each( ( _, el ) => {
+				self.updateBgColorOverlays( el, rawColorValues );
+			} );
+		} );
+
+		$imgOverlayElements.each( ( _, el ) => {
+			self.updateImageOverlays( el, rawColorValues );
+		} );
+
+		$fwrElements.each( ( _, el ) => {
+			var $fwr            = $( el ),
+				classList       = $fwr.attr( 'class' ),
+				fwrId           = 'fwr-' + classList.match( /fwr-?(\d+)/ )[1],
+				$fwrInlineStyle = $( `#${fwrId}-inline-css` );
+
+			$fwrInlineStyle.each( ( _, el ) => {
+				self.updateBgColorOverlays( el, rawColorValues );
+			} );
+		} );
+	};
+
+	/**
+	 * Updage Image Overlay colors.
+	 *
+	 * Elements that have a translucent color overlaying the
+	 * background image that uses a color from the palette,
+	 * has the background-image property set in the elements'
+	 * inline styles.
+	 *
+	 * @since 2.20.0
+	 *
+	 * @param {object} el             Image overlay element.
+	 * @param {object} rawColorValues Raw color values.
+	 */
+	self.updateImageOverlays = function( el, rawColorValues ) {
+		var $el             = $( el ),
+			elStyle         = $el.attr( 'style' ),
+			colorIndex      = $el.attr( 'data-bg-overlaycolor-class' ),
+			overlayValue    = rawColorValues[`color-${colorIndex}-raw`],
+			overlayVariable = `var(--color-${colorIndex}-raw)`;
+
+		$el.attr(
+			'style',
+			elStyle.replace( new RegExp( overlayValue, 'g' ), overlayVariable )
+		);
+	};
+
+
+	/**
+	 * Update BG Color Overlays.
+	 *
+	 * Elements with a translucent background color
+	 * that uses a color from the palette, and does not
+	 * have a background image, has the background properties
+	 * set in the <head> inline style element. This handles
+	 * Full Width Rows as well.
+	 *
+	 * @since 2.20.0
+	 *
+	 * @param {object} inlineStyleEl  <head> inline style element.
+	 * @param {object} rawColorValues Raw color values.
+	 */
+	self.updateBgColorOverlays = function( inlineStyleEl, rawColorValues ) {
+		var $inlineStyleEl = $( inlineStyleEl ),
+			styleString    = $inlineStyleEl.html();
+
+		_.each( rawColorValues, ( colorRawValue, colorRawVariable ) => {
+			styleString = styleString.replace( new RegExp( colorRawValue, 'g' ), `var(--${colorRawVariable})` );
+		} );
+
+		$inlineStyleEl.html( styleString );
+	};
+
 	/**
 	 * Main responsibility of this file
 	 * The to parameter, is a json string that is inside of a textarea in the parent window
@@ -44,7 +148,11 @@ BOLDGRID.COLOR_PALETTE.Preview = BOLDGRID.COLOR_PALETTE.Preview || {};
 
 		// Update styles.
 		style = document.getElementById( 'boldgrid-color-palettes-inline-css' );
-		style.innerHTML = modify.compiled_css;
+		if ( style ) {
+			style.innerHTML = ':root{' + modify.css_variables + '}';
+		} else {
+			$( 'head' ).append( '<style id="boldgrid-color-palettes-inline-css" type="text/css">:root{' + modify.css_variables + '}</style>' );
+		}
 	};
 
 	/**
@@ -59,6 +167,9 @@ BOLDGRID.COLOR_PALETTE.Preview = BOLDGRID.COLOR_PALETTE.Preview || {};
 				.val( parent.BOLDGRID.COLOR_PALETTE.Modify.compiled_css )
 				.change();
 		} );
+
+		// Update overlay colors.
+		self.updateOverlayColors();
 	} );
 
 	wp.customize( 'boldgrid_compiled_css', function( value ) {

src/assets/js/customizer/color-palette.js

@@ -1045,6 +1045,9 @@ BOLDGRID.COLOR_PALETTE.Modify = BOLDGRID.COLOR_PALETTE.Modify || {};
 	 * Change the palette settings
 	 */
 	colorPalette.update_palette_settings = function() {
+		colorPalette.css_variables       = BOLDGRID.COLOR_PALETTE.Generate.cssVariables( colorPalette.state.palettes['palette-primary'] );
+		colorPalette.state.css_variables = colorPalette.css_variables;
+
 		colorPalette.text_area_val = JSON.stringify({ 'state': colorPalette.state });
 		wp.customize( 'boldgrid_color_palette' ).set( '' ).set( colorPalette.text_area_val );
 	};

src/assets/js/customizer/color/preview.js

@@ -49,9 +49,9 @@ export class Preview  {
 				properties: [ 'color', 'color-hover' ]
 			},
 			{
-				name: 'bgtfw_footer_links',
-				selector: '.footer-content:not(.template-footer)',
-				properties: [ 'link-color' ]
+				name: 'bgtfw_footer_link_color',
+				selector: '#colophon .bgtfw-footer.footer-content:not(.template-footer) .attribution-theme-mods > .link > a:not( .btn ):hover',
+				properties: [ 'color' ]
 			}
 		];
 	}

src/assets/js/customizer/customizer.js

@@ -547,6 +547,10 @@ BOLDGRID.Customizer.Util.getInitialPalettes = function( option ) {
 			value.bind( function( to ) {
 				var palettes, colors;
 
+				if ( ! to ) {
+					to = parent.BOLDGRID.COLOR_PALETTE.Modify.text_area_val;
+				}
+
 				palettes = parent.jQuery( '.colors-wrapper' );
 				colors = BOLDGRID.Customizer.Util.getInitialPalettes( to );