define colorline functions in the theme

seedlet/inc/wpcom-colors-utils.php

@@ -4,57 +4,119 @@
 function seedlet_define_color_annotations( $colors ) {
 	// Background Color
 	// --global--color-background
-	add_color_rule( 'bg', $colors[ 'background' ], array(
+	add_color_rule(
+		'bg',
+		$colors['background'],
+		array(
 
-		// This placeholder is needed to make the color annotations work
-		array( '.global--color-background', 'background-color' ),
+			// This placeholder is needed to make the color annotations work
+			array( '.global--color-background', 'background-color' ),
 
-	), __( 'Background Color' ) );
+		),
+		__( 'Background Color' )
+	);
 
 	// Foreground Color
 	// --global--color-foreground-light
-	add_color_rule( 'txt', $colors[ 'foreground' ], array(
+	add_color_rule(
+		'txt',
+		$colors['foreground'],
+		array(
 
-		// This placeholder is needed to make the color annotations work
-		array( '.global--color-foreground-light', 'color' ),
+			// This placeholder is needed to make the color annotations work
+			array( '.global--color-foreground-light', 'color' ),
 
-	), __( 'Foreground Color' ) );
+		),
+		__( 'Foreground Color' )
+	);
 
 	// Primary Color
 	// --global--color-primary
-	add_color_rule( 'link', $colors[ 'primary' ], array(
+	add_color_rule(
+		'link',
+		$colors['primary'],
+		array(
 
-		// This placeholder is needed to make the color annotations work
-		array( '.global--color-primary', 'color' ),
+			// This placeholder is needed to make the color annotations work
+			array( '.global--color-primary', 'color' ),
 
-	), __( 'Primary Color' ) );
+		),
+		__( 'Primary Color' )
+	);
 
 	// Secondary Color
 	// --global--color-secondary
-	add_color_rule( 'fg1', $colors[ 'secondary' ], array(
+	add_color_rule(
+		'fg1',
+		$colors['secondary'],
+		array(
 
-		// Text-color
-		array( '.global--color-secondary', 'color' ),
+			// Text-color
+			array( '.global--color-secondary', 'color' ),
 
-	), __( 'Secondary Color' ) );
+		),
+		__( 'Secondary Color' )
+	);
 
 	// Tertiary Color
 	// --global--color-tertiary
-	add_color_rule( 'fg2', $colors[ 'tertiary' ], array(
+	add_color_rule(
+		'fg2',
+		$colors['tertiary'],
+		array(
 
-		// Text-color
-		array( '.global--color-tertiary', 'color' ),
+			// Text-color
+			array( '.global--color-tertiary', 'color' ),
 
-	), __( 'Tertiary Color' ) );
+		),
+		__( 'Tertiary Color' )
+	);
+}
+
+// These functions are borrowed from the colorline lib
+function hex_to_rgb( $hex ) {
+	return sscanf( $hex, '%02X%02X%02X' );
+}
+
+// RGB values: 0-255
+// LUM values: 0-1
+function rgb_to_lum( $rgb ) {
+	list( $r, $g, $b ) = $rgb;
+	return sqrt( 0.241 * $r * $r + 0.691 * $g * $g + 0.068 * $b * $b ) / 255;
+}
+
+// RGB values:    0-255, 0-255, 0-255
+// HSV values:    0-360, 0-100, 0-100, 0-100
+function rgb_to_hsvl( $rgb ) {
+	$l                 = rgb_to_lum( $rgb );
+	list( $r, $g, $b ) = $rgb;
+	$r                 = $r / 255;
+	$g                 = $g / 255;
+	$b                 = $b / 255;
+	$max_rgb           = max( $r, $g, $b );
+	$min_rgb           = min( $r, $g, $b );
+	$chroma            = $max_rgb - $min_rgb;
+	$v                 = 100 * $max_rgb;
+	if ( 0 === $chroma ) {
+		return array( 0, 0, $v, $l );
+	}
+	$s = 100 * ( $chroma / $max_rgb );
+	if ( $r === $min_rgb ) {
+		$h = 3 - ( ( $g - $b ) / $chroma );
+	} elseif ( $b === $min_rgb ) {
+		$h = 1 - ( ( $r - $g ) / $chroma );
+	} else { // $g === $min_rgb
+		$h = 5 - ( ( $b - $r ) / $chroma );
+	}
+	$h = 60 * $h;
+	return array( $h, $s, $v, $l );
 }
 
 function change_color_luminescence( $hex, $amount ) {
-	require_lib( 'colorline' );
-	$colorline = new colorline();
 	$hex_without_hash = substr( $hex, 1, strlen( $hex ) );
-	$rgb = $colorline::hex_to_rgb( $hex_without_hash );
-	$hsvl = $colorline::rgb_to_hsvl( $rgb );
-	return 'hsl( ' . $hsvl[ 0 ] . ',' . $hsvl[ 1 ] . '%,' . ( $hsvl[ 2 ] + $amount ) . '%)';
+	$rgb              = hex_to_rgb( $hex_without_hash );
+	$hsvl             = rgb_to_hsvl( $rgb );
+	return 'hsl( ' . $hsvl[0] . ',' . $hsvl[1] . '%,' . ( $hsvl[2] + $amount ) . '%)';
 }
 
 /**
@@ -63,17 +125,17 @@ function change_color_luminescence( $hex, $amount ) {
  */
 function seedlet_custom_colors_extra_css() {
 	$colors_array = get_theme_mod( 'colors_manager' );
-	$background = $colors_array['colors']['bg'];
-	$foreground = $colors_array['colors']['txt'];
-	$primary = $colors_array['colors']['link'];
-	$secondary = $colors_array['colors']['fg1'];
-	$tertiary  = $colors_array['colors']['fg2'];
+	$background   = $colors_array['colors']['bg'];
+	$foreground   = $colors_array['colors']['txt'];
+	$primary      = $colors_array['colors']['link'];
+	$secondary    = $colors_array['colors']['fg1'];
+	$tertiary     = $colors_array['colors']['fg2'];
 
 	$foreground_light = change_color_luminescence( $foreground, 10 );
-	$foreground_dark = change_color_luminescence( $foreground, -10 );
-	$primary_hover = change_color_luminescence( $primary, 10 );
-	$secondary_hover = change_color_luminescence( $secondary, 10 );
-?>
+	$foreground_dark  = change_color_luminescence( $foreground, -10 );
+	$primary_hover    = change_color_luminescence( $primary, 10 );
+	$secondary_hover  = change_color_luminescence( $secondary, 10 );
+	?>
 
 	:root,
 	#editor .editor-styles-wrapper {
@@ -88,33 +150,43 @@ function seedlet_custom_colors_extra_css() {
 		--global--color-tertiary: <?php echo $tertiary; ?>;
 	}
 
-<?php }
+	<?php
+}
 add_theme_support( 'custom_colors_extra_css', 'seedlet_custom_colors_extra_css' );
 
 /**
  * Featured Varia/Seedlet Palettes
  */
 // Light
-add_color_palette( array(
-	'#FFFFFF',
-	'#1D1E1E',
-	'#C8133E',
-	'#4E2F4B',
-	'#F9F9F9',
-), /* translators: This is the name for a color scheme */ 'Light' );
+add_color_palette(
+	array(
+		'#FFFFFF',
+		'#1D1E1E',
+		'#C8133E',
+		'#4E2F4B',
+		'#F9F9F9',
+	), /* translators: This is the name for a color scheme */
+	'Light'
+);
 // Medium
-add_color_palette( array(
-	'#EEF4F7',
-	'#242527',
-	'#35845D',
-	'#233252',
-	'#F9F9F9',
-), /* translators: This is the name for a color scheme */ 'Medium' );
+add_color_palette(
+	array(
+		'#EEF4F7',
+		'#242527',
+		'#35845D',
+		'#233252',
+		'#F9F9F9',
+	), /* translators: This is the name for a color scheme */
+	'Medium'
+);
 // Dark
-add_color_palette( array(
-	'#1F2527',
-	'#FFFFFF',
-	'#9FD3E8',
-	'#FBE6AA',
-	'#364043',
-), /* translators: This is the name for a color scheme */ 'Dark' );
+add_color_palette(
+	array(
+		'#1F2527',
+		'#FFFFFF',
+		'#9FD3E8',
+		'#FBE6AA',
+		'#364043',
+	), /* translators: This is the name for a color scheme */
+	'Dark'
+);

seedlet/inc/wpcom-customize-preview.js

@@ -37,7 +37,9 @@ function hexToHSL( hex ) {
 
 function changeColorLuminescence( hex, amount ) {
 	var hsl = hexToHSL( hex );
-	return 'hsl( ' + hsl.h + ',' + hsl.s * 100 + '%,' + ( hsl.l * 100  + amount ) + '%)';
+	console.log( hex );
+	console.log( hsl );
+	return 'hsl( ' + hsl.h * 360 + ',' + hsl.s * 100 + '%,' + ( hsl.l * 100  + amount ) + '%)';
 }
 
 
@@ -68,6 +70,8 @@ function changeColorLuminescence( hex, amount ) {
 			var foregroundDark = changeColorLuminescence( foreground, -10 );
 			var primaryHover = changeColorLuminescence( primary, 10 );
 			var secondaryHover = changeColorLuminescence( secondary, 10 );
+			console.log( primary );
+			console.log( primaryHover );
 			const extraCSS = ':root {' +
 					'--global--color-background: ' + background + ';' +
 					'--global--color-foreground: ' + foreground + ';' +