check luminescence on php to see if we need to invert before saving

Automattic · Oct 26, 2021 · d60b60c · d60b60c
1 parent 0542c1b
commit d60b60c
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 6 deletions.
diff --git a/blockbase/inc/customizer/wp-customize-colors.php b/blockbase/inc/customizer/wp-customize-colors.php
@@ -178,13 +178,19 @@ function handle_customize_save_after( $wp_customize ) {
 				$this->user_color_palette
 			);
 
-			if ( $this->theme_duotone_settings && ( $wp_customize->get_setting( $this->section_key . 'background' )->post_value() !== '' && $wp_customize->get_setting( $this->section_key . 'primary' )->post_value() !== '' ) ) {
-				//TODO:
-				//- background and primary may not always exist!
-				//- do we want to replace all the filters? Only one will show on the editor for the users
-				//- Preview doesn't work
+			if (  $this->theme_duotone_settings && $wp_customize->get_setting( $this->section_key . 'primary' ) !== null &&$wp_customize->get_setting( $this->section_key . 'background' ) !== null ) {
+
+				$primary = $wp_customize->get_setting( $this->section_key . 'primary' )->post_value();
+				$background = $wp_customize->get_setting( $this->section_key . 'background' )->post_value();
+
+				//we invert the colors when the background is darker than the primary color
+				if( colorLuminescence($primary) > colorLuminescence($background) ) {
+					$primary = $wp_customize->get_setting( $this->section_key . 'background' )->post_value();
+					$background = $wp_customize->get_setting( $this->section_key . 'primary' )->post_value();
+				}
+
 				$custom_duotone_filter = json_decode( '[ {
-					"colors": [ "' . $wp_customize->get_setting( $this->section_key . 'primary' )->post_value() . '", "' . $wp_customize->get_setting( $this->section_key . 'background' )->post_value() . '" ],
+					"colors": [ "' . $primary . '", "' . $background . '" ],
 					"slug": "custom-filter",
 					"name": "Custom filter"
 				} ]' );

diff --git a/blockbase/inc/customizer/wp-customize-utils.php b/blockbase/inc/customizer/wp-customize-utils.php
@@ -40,3 +40,50 @@ function get_settings_array( $array, $object ) {
 
 	return $object;
 }
+
+// These functions are borrowed from the colorline lib
+function hex_to_rgb( $hex ) {
+	return sscanf( str_replace( '#', '', $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 ( $chroma > 0 ) {
+		$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 );
+	} else {
+		return array( 0, 0, $v, $l );
+	}
+}
+
+function colorLuminescence( $hex ) {
+	$rgb = hex_to_rgb( $hex );
+	$hsvl = rgb_to_hsvl( $rgb );
+
+	return $hsvl[3];
+}