Branch 2.20.0 (#61)

* update info dropdown for footer link colors (#55)

* add aria-hidden to taglines not shown (#58)

* add notice to logo panel (#59)

* Issue 50 - Improve Color Palettes by using color variables instead of SCSS compilation during runtime (#54)

* remove runtime compiling of SCSS color palettes

* add variable generation to customizer js

* append updated colors to head

* add css variables to saved palette theme_mod

* fix alternative parsing of palette values

* footer link color to work like other link controls

* add footer link selectors

* change footer link color control to new name

* set color pallette to postMessage

* ensure updated color palette values are available

* fix footer color updates

* update versions for alpha

* update side branch with master changes (#51)

* Create pull_request_template.md

* Branch 2.19.1 (#47)

* set rc release version

* Separate top & bottom blog page post margins

* Revert "Separate top & bottom blog page post margins"

This reverts commit 55585fd.

* Salon theme styles (#42)

* add salon theme styles

* update styles to fix MFW rows

* Fix Blog Category links not working - Issue 37 (#43)

* fix cats not showing if uncategorized

* fix category 404s

* Separate Blog Post List Post Margin controls - Issue 38 (#41)

* Split blog page post margins into two controls

* change title of lower margin control

* Fix Submenu Padding for first menu item - Issue 39 (#40)

* issue-786 version set

* fix left padding of first-item submenus

* update version for test-zip

* revert version to rc1

* add filters (#45)

* re-add letter-spacing (#19)

* update readme

* revert letter-spacing changes

* remove RC1 from version tag

* update versions and readme

* fix translucency issues

* fix SINCEVERSION

* fix incorrect '-raw' value in css

* add comments

* add comments

* remove commented out code

* add fallback for bgtfw_footer_links

* fix footer links. again.

* phpcs fixes

* fix raised buttons and overlays

* set versions to rc1

* fixed issues due to merge conflicts

* fix repeated changes not binding

* Rc1 fixes (#62)

* add colorx-background-alpha styles

* fix menu items font color not updating right

* update versions for stable

* update readme

README.md

@@ -41,6 +41,12 @@ Crio is a WordPress SuperTheme that allows front-end designers, developers and o
 
 ## Changelog ##
 
+### 2.20.0 ###
+* Enhancement: Improve Color Palettes by using color variables instead of SCSS compilation during runtime [#50](https://github.com/BoldGrid/crio/issues/50)
+* New Feature: Add notice to Design > Footer > Colors to help users [#48](https://github.com/BoldGrid/crio/issues/48)
+* New Feature: If I add a logo but my header isn't setup to show it, show a warning [#49](https://github.com/BoldGrid/crio/issues/49)
+* Accessibility: Hidden Tagline = Empty Heading Tag = Bad for Accessibility [#52](https://github.com/BoldGrid/crio/issues/52)
+
 ### 2.19.2 ###
 * Bug Fix: If the first menu item has a dropdown there are padding issues in the dropdown [#39](https://github.com/BoldGrid/crio/issues/39)
 * Bug Fix: Cannot get even spacing between posts and header/footer on Blog Page [#38](https://github.com/BoldGrid/crio/issues/38)

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',

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "boldgrid-theme-framework",
-	"version": "2.19.2",
+	"version": "2.20.0",
 	"description": "BoldGrid Theme Framework",
 	"main": "index.js",
 	"engines": {

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

@@ -219,8 +219,8 @@ function boldgrid_prime_framework_config( $config ) {
 		$config['customizer']['controls']['bgtfw_header_color']['default'] = 'color-5';
 
 		// 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_color']['default']      = 'color-5';
+		$config['customizer']['controls']['bgtfw_footer_link_color']['default'] = get_theme_mod( 'bgtfw_footer_links', 'color-1' );
 
 		// Page title display settings, show by default.
 		$config['customizer']['controls']['bgtfw_pages_title_display']['default'] = 'show';

readme.txt

@@ -4,7 +4,7 @@ Tags: news, blog, e-commerce, sticky-post, theme-options, threaded-comments, ful
 Requires PHP: 5.6
 Requires at least: 4.8
 Tested up to: 6.2
-Stable tag: 2.19.2
+Stable tag: 2.20.0
 License: GPL-3.0-or-later
 License URI: https://www.gnu.org/licenses/gpl-3.0-standalone.html
 
@@ -14,13 +14,20 @@ Crio is a WordPress SuperTheme that allows designers, developers and other web p
 Crio is a WordPress SuperTheme that allows designers, developers and other web professionals to create without bounds or restrictions.  Crio’s advanced customization options are completely integrated with the WordPress Customizer API, providing you with a powerful, but familiar interface to customize your website. Our integration gives you granular control over many elements straight from the Customizer, and even device previews so you can see how your site looks on different devices. Crio’s unique color palette system keeps colors consistent across your site. Drag and drop colors in your palette to increase or decrease the usage of that color throughout your website. Use the advanced controls to create a custom Header, Footer, or Blog Page layout. Be Bold and stand above the rest with Crio by BoldGrid!
 
 == Upgrade Notice ==
-= 2.10.0 =
-This version includes CSS fixes for incorrect margin / padding issues. If you are using the Custom CSS as a temporary fix for these issues, this update may possibly conflict with your custom CSS.
+
+= 2.20.0 =
+This version changes the way the color palette CSS is generated. If you are using custom CSS to override color palettes, this may cause some conflicts.
 
 == Changelog ==
 
 ## Changelog ##
 
+== 2.20.0 ==
+* Enhancement: Improve Color Palettes by using color variables instead of SCSS compilation during runtime [#50](https://github.com/BoldGrid/crio/issues/50)
+* New Feature: Add notice to Design > Footer > Colors to help users [#48](https://github.com/BoldGrid/crio/issues/48)
+* New Feature: If I add a logo but my header isn't setup to show it, show a warning [#49](https://github.com/BoldGrid/crio/issues/49)
+* Accessibility: Hidden Tagline = Empty Heading Tag = Bad for Accessibility [#52](https://github.com/BoldGrid/crio/issues/52)
+
 == 2.19.2 ==
 * Bug Fix: If the first menu item has a dropdown there are padding issues in the dropdown [#39](https://github.com/BoldGrid/crio/issues/39)
 * Bug Fix: Cannot get even spacing between posts and header/footer on Blog Page [#38](https://github.com/BoldGrid/crio/issues/38)

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,117 @@ 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)`,
+			colorMatches    = elStyle.match( new RegExp( overlayValue, 'g' ) );
+
+		// If the color value is not found, try removing the spaces.
+		if ( ! colorMatches ) {
+			overlayValue = overlayValue.replace( /\s/g, '' );
+			colorMatches = elStyle.match( new RegExp( overlayValue, 'g' ) );
+		}
+
+		$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 +155,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 +174,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' ]
 			}
 		];
 	}