Varia refactor and css variables built into hever

hever/inc/wpcom-editor-colors.php

@@ -1,2 +1,2 @@
 <?php
-require_once get_template_directory() . '/inc/wpcom-colors-css-variables.php';
+require_once get_template_directory() . '/inc/wpcom-colors-css-variables.php';

varia/inc/customize-preview-wpcom.js

@@ -5,6 +5,39 @@
  * targeting the updates needed to hide the page title on the homepage on WordPress.com.
  */
 
+// From https://gist.github.com/xenozauros/f6e185c8de2a04cdfecf
+function hexToHSL( hex ) {
+	var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec( hex );
+		r = parseInt( result[1], 16 );
+		g = parseInt( result[2], 16 );
+		b = parseInt( result[3], 16 );
+		r /= 255, g /= 255, b /= 255;
+	  var max = Math.max( r, g, b ), min = Math.min( r, g, b );
+	  var h, s, l = ( max + min ) / 2;
+	  if( max == min ){
+		h = s = 0; // achromatic
+	  } else {
+		var d = max - min;
+		s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+		switch( max ){
+		  case r: h = ( g - b ) / d + ( g < b ? 6 : 0 ); break;
+		  case g: h = ( b - r ) / d + 2; break;
+		  case b: h = ( r - g ) / d + 4; break;
+		}
+		h /= 6;
+	}
+	var HSL = new Object();
+	HSL['h'] = h;
+	HSL['s'] = s;
+	HSL['l'] = l;
+	return HSL;
+}
+
+function changeColorLuminescence( hex, amount ) {
+	var hsl = hexToHSL( hex );
+	return 'hsl( ' + hsl.h * 360 + ',' + hsl.s * 100 + '%,' + ( hsl.l * 100  + amount ) + '%)';
+}
+
 ( function( $ ) {
 
 	// Hide Front Page Title
@@ -18,4 +51,69 @@
 			}
 		} );
 	} );
+
+	// Since the plugin handles customizer preview updates via the postMessage transport,
+	// we need to manually override the "extra CSS" when a user selects a different color palette.
+	wp.customize( 'colors_manager[colors]', function( value ) {
+		value.bind( function( to ) {
+
+			var background = to.bg;
+			var foreground = to.txt;
+			var primary = to.link;
+			var secondary = to.fg1;
+			var border = to.fg2;
+
+			var cssVariables = '';
+
+			if(background !== ''){
+				var backgroundLowContrast = changeColorLuminescence( background, -10 );
+				var backgroundHighContrast = changeColorLuminescence( background, 10 );
+				cssVariables += '--wp--preset--color--background: ' + background + ';' +
+				'--wp--preset--color--background-low-contrast: ' + backgroundLowContrast + ';' +
+				'--wp--preset--color--background-high-contrast: ' + backgroundHighContrast + ';';
+			}
+
+			if(foreground !== ''){
+				var foregroundLowContrast = changeColorLuminescence( foreground, 10 );
+				var foregroundHighContrast = changeColorLuminescence( foreground, -10 );
+				cssVariables += '--wp--preset--color--foreground: ' + foreground + ';' +
+				'--wp--preset--color--foreground-low-contrast: ' + foregroundLowContrast + ';' +
+				'--wp--preset--color--foreground-high-contrast: ' + foregroundHighContrast + ';';
+			}
+
+			if(primary !== ''){
+				var primaryHover = changeColorLuminescence( primary, 10 );
+				cssVariables += '--wp--preset--color--primary: ' + primary + ';' +
+				'--wp--preset--color--primary-hover: ' + primaryHover + ';';
+			}
+
+			if(secondary !== ''){
+				var secondaryHover = changeColorLuminescence( secondary, 10 );
+				cssVariables += '--wp--preset--color--secondary: ' + secondary + ';' +
+				'--wp--preset--color--secondary-hover: ' + secondaryHover + ';';
+			}
+
+			if(border !== ''){
+				var borderLowContrast = changeColorLuminescence( border, 10 );
+				var borderHighContrast = changeColorLuminescence( border, -10 );
+				cssVariables += '--wp--preset--color--border: ' + border + ';' +
+				'--wp--preset--color--border-low-contrast: ' + borderLowContrast + ';' +
+				'--wp--preset--color--border-high-contrast: ' + borderHighContrast + ';';
+			}
+
+			const extraCSS = ':root {' + cssVariables + '}';
+
+			// Append an extra style element that overrides the previous extra CSS
+			if ( $('#custom-colors-extra-css').length ) {
+				$( '#custom-colors-extra-css' ).html( extraCSS );
+			} else {
+				$( 'head' ).append( '<style id="custom-colors-extra-css">' +  extraCSS + '</style>' );
+			}
+
+			if ( typeof cssVars !== 'undefined' ) {
+				cssVars( {} );
+			}
+		} );
+	} );
+
 } )( jQuery );

varia/inc/wpcom-colors-v2.php

@@ -0,0 +1,212 @@
+<?php
+// Custom Colors:
+function varia_define_color_annotations( $colors ) {
+	// Background Color
+	if ( isset( $colors['background'] ) ) {
+		// --wp--preset--color--background
+		add_color_rule(
+			'bg',
+			$colors['background'],
+			array(
+
+				// This placeholder is needed to make the color annotations work
+				array( '.wp--preset--color--background', 'background-color' ),
+
+			),
+			__( 'Background Color' )
+		);
+	}
+
+	// Foreground Color
+	if ( isset( $colors['foreground'] ) ) {
+		// --wp--preset--color--foreground
+		add_color_rule(
+			'txt',
+			$colors['foreground'],
+			array(
+
+				// This placeholder is needed to make the color annotations work
+				array( '.wp--preset--color--foreground', 'color' ),
+
+			),
+			__( 'Foreground Color' )
+		);
+	}
+
+	// Primary Color
+	if ( isset( $colors['primary'] ) ) {
+		// --wp--preset--color--primary
+		add_color_rule(
+			'link',
+			$colors['primary'],
+			array(
+
+				// This placeholder is needed to make the color annotations work
+				array( '.wp--preset--color--primary', 'color' ),
+
+			),
+			__( 'Primary Color' )
+		);
+	}
+
+	// Secondary Color
+	if ( isset( $colors['secondary'] ) ) {
+		// --wp--preset--color--secondary
+		add_color_rule(
+			'fg1',
+			$colors['secondary'],
+			array(
+
+				// Text-color
+				array( '.wp--preset--color--secondary', 'color' ),
+
+			),
+			__( 'Secondary Color' )
+		);
+	}
+
+	// Tertiary Color
+	if ( isset( $colors['tertiary'] ) ) {
+		// --wp--preset--color--tertiary
+		add_color_rule(
+			'fg2',
+			$colors['tertiary'],
+			array(
+
+				// Text-color
+				array( '.wp--preset--color--tertiary', 'color' ),
+
+			),
+			__( 'Tertiary Color' )
+		);
+	}
+}
+
+/**
+ * Custom CSS.
+ * The plugin takes the body of this function and applies it in a style tag in the document head.
+ */
+function varia_custom_colors_extra_css() {
+	$colors_array = get_theme_mod( 'colors_manager' );
+
+	if ( isset( $colors_array['colors']['bg'] ) ) {
+		$background               = $colors_array['colors']['bg'];
+		$background_low_contrast  = change_color_luminescence( $background, -10 );
+		$background_high_contrast = change_color_luminescence( $background, 10 );
+	}
+
+	if ( isset( $colors_array['colors']['txt'] ) ) {
+		$foreground               = $colors_array['colors']['txt'];
+		$foreground_low_contrast  = change_color_luminescence( $foreground, 10 );
+		$foreground_high_contrast = change_color_luminescence( $foreground, -10 );
+	}
+
+	if ( isset( $colors_array['colors']['link'] ) ) {
+		$primary       = $colors_array['colors']['link'];
+		$primary_hover = change_color_luminescence( $primary, 10 );
+	}
+
+	if ( isset( $colors_array['colors']['fg1'] ) ) {
+		$secondary       = $colors_array['colors']['fg1'];
+		$secondary_hover = change_color_luminescence( $secondary, 10 );
+	}
+
+	if ( isset( $colors_array['colors']['fg2'] ) ) {
+		$border               = $colors_array['colors']['fg2'];
+		$border_low_contrast  = change_color_luminescence( $border, 10 );
+		$border_high_contrast = change_color_luminescence( $border, -10 );
+	}
+
+	?>
+
+	:root,
+	#editor .editor-styles-wrapper {
+		<?php if ( isset( $colors_array['colors']['bg'] ) ) { ?>
+			--wp--preset--color--background: <?php echo $background; ?>;
+			--wp--preset--color--background-low-contrast: <?php echo $background_low_contrast; ?>;
+			--wp--preset--color--background-high-contrast: <?php echo $background_high_contrast; ?>;
+			<?php
+		}
+		if ( isset( $colors_array['colors']['txt'] ) ) {
+			?>
+			--wp--preset--color--foreground: <?php echo $foreground; ?>;
+			--wp--preset--color--foreground-low-contrast: <?php echo $foreground_low_contrast; ?>;
+			--wp--preset--color--foreground-high-contrast: <?php echo $foreground_high_contrast; ?>;
+			<?php
+		}
+		if ( isset( $colors_array['colors']['link'] ) ) {
+			?>
+			--wp--preset--color--primary: <?php echo $primary; ?>;
+			--wp--preset--color--primary-hover: <?php echo $primary_hover; ?>;
+
+			<?php
+		}
+		if ( isset( $colors_array['colors']['fg1'] ) ) {
+			?>
+			--wp--preset--color--secondary: <?php echo $secondary; ?>;
+			--wp--preset--color--secondary-hover: <?php echo $secondary_hover; ?>;
+			<?php
+		}
+		if ( isset( $colors_array['colors']['fg2'] ) ) {
+			?>
+			--wp--preset--color--border: <?php echo $border; ?>;
+			--wp--preset--color--border-low-contrast: <?php echo $border_low_contrast; ?>;
+			--wp--preset--color--border-high-contrast: <?php echo $border_high_contrast; ?>;
+		<?php } ?>
+	}
+
+	<?php
+}
+add_theme_support( 'custom_colors_extra_css', 'varia_custom_colors_extra_css' );
+
+/**
+ * Featured Palettes
+ */
+$has_tertiary_color = false;
+
+if ( function_exists( 'varia_default_colors' ) ) {
+	$default_colors =  varia_default_colors();
+	varia_define_color_annotations( $default_colors );
+	if( $default_colors['tertiary'] ) {
+		$has_tertiary_color = true;
+	}
+}
+
+$light = array(
+	'#FFFFFF',
+	'#1D1E1E',
+	'#C8133E',
+	'#4E2F4B',
+);
+$medium = array(
+	'#EEF4F7',
+	'#242527',
+	'#35845D',
+	'#233252',
+);
+$dark = array(
+	'#1F2527',
+	'#FFFFFF',
+	'#9FD3E8',
+	'#FBE6AA',
+);
+if($has_tertiary_color) {
+	$light[] = '#F9F9F9';
+	$medium[] = '#F9F9F9';
+	$dark[] = '#364043';
+}
+add_color_palette(
+	$light, 
+	/* translators: This is the name for a color scheme */
+	'Light'
+);
+add_color_palette(
+	$medium, 
+	/* translators: This is the name for a color scheme */
+	'Medium'
+);
+add_color_palette(
+	$dark, 
+	/* translators: This is the name for a color scheme */
+	'Dark'
+);