Sync customizer color settings to Gutenberg and frontend

functions.php

@@ -68,18 +68,6 @@ function twentynineteen_setup() {
 			)
 		);
 
-		// Set up the WordPress core custom background feature.
-		add_theme_support(
-			'custom-background',
-			apply_filters(
-				'twentynineteen_custom_background_args',
-				array(
-					'default-color' => 'ffffff',
-					'default-image' => '',
-				)
-			)
-		);
-
 		/**
 		 * Add support for core custom logo.
 		 *
@@ -107,6 +95,17 @@ function twentynineteen_setup() {
 		// Enqueue editor styles
 		add_editor_style( 'style-editor.css' );
 
+		// Add custom color to the editor color palette
+		add_theme_support(
+		'editor-color-palette', array(
+			array(
+				'name'  => esc_html__( 'Primary Color', 'twentynineteen' ),
+				'slug'  => 'primary',
+				'color' => twentynineteen_hsl_hex( absint(get_theme_mod( 'primary-color', '199' )), 100, 33 ), // "#ff3333", // esc_attr( 'hsl('. absint( get_theme_mod( 'primary-color', '199' ) ) .', 100, 33)' ),
+			)
+		)
+	);
+
 	}
 endif;
 add_action( 'after_setup_theme', 'twentynineteen_setup' );
@@ -152,11 +151,43 @@ function twentynineteen_scripts() {
  * Enqueue supplemental block editor styles
  */
 function twentynineteen_editor_frame_styles() {
+
+	// Include color patterns
+	require_once( get_parent_theme_file_path( '/inc/color-patterns.php' ) );
+
 	wp_enqueue_style( 'twentynineteen-editor-frame-styles', get_theme_file_uri( '/style-editor-frame.css' ), false, '1.0', 'all' );
+	wp_add_inline_style( 'twentynineteen-editor-frame-styles', twentynineteen_custom_colors_css() );
 }
-
 add_action( 'enqueue_block_editor_assets', 'twentynineteen_editor_frame_styles' );
 
+/**
+ * Display custom color CSS.
+ */
+function twentynineteen_colors_css_wrap() {
+
+	// Set defaults and grab theme mod
+	$default_primary_color = 199;
+	$primary_color         = absint( get_theme_mod( 'primary-color', $default_primary_color ) );
+
+	if ( $primary_color === $default_primary_color ) {
+		return;
+	}
+
+	// Include color patterns
+	require_once( get_parent_theme_file_path( '/inc/color-patterns.php' ) );
+
+	// Enable live color changes in customizer
+	$customize_preview_data_primary_color = '';
+	if ( is_customize_preview() ) {
+		$customize_preview_data_primary_color = 'data-primary-color="' . $primary_color . '"';
+	} ?>
+	<style type="text/css" id="custom-theme-colors" <?php echo $customize_preview_data_primary_color; ?>>
+		<?php echo twentynineteen_custom_colors_css(); ?>
+	</style>
+<?php
+}
+add_action( 'wp_head', 'twentynineteen_colors_css_wrap' );
+
 /**
  * SVG Icons class.
  */

inc/color-patterns.php

@@ -0,0 +1,193 @@
+<?php
+/**
+ * Twenty Nineteen: Color Patterns
+ *
+ * @package WordPress
+ * @subpackage TwentyNineteen
+ * @since 1.0
+ */
+
+/**
+ * Generate the CSS for the current custom color scheme.
+ */
+function twentynineteen_custom_colors_css() {
+
+	$default_primary_color       = 199;
+	$primary_color               = absint( get_theme_mod( 'primary-color', $default_primary_color ) );
+
+	/**
+	 * Filter Twenty Nineteen default saturation level.
+	 *
+	 * @since Twenty Nineteen 1.0
+	 *
+	 * @param int $saturation Color saturation level.
+	 */
+
+	$saturation = absint( apply_filters( 'twentynineteen_custom_colors_saturation', 100 ) );
+	$reduced_saturation = ( .8 * $saturation ) . '%';
+	$saturation = $saturation . '%';
+
+	$theme_css = '
+		/*
+		 * Set background for:
+		 * - featured image :before
+		 * - featured image :before
+		 * - post thumbmail :before
+		 * - post thumbmail :before
+		 * - Submenu
+		 * - Sticky Post
+		 * - buttons
+		 * - WP Block Button
+		 * - Blocks
+		 */
+		.image-filters-enabled .site-header.featured-image .site-featured-image:before,
+		.image-filters-enabled .site-header.featured-image .site-featured-image:after,
+		.image-filters-enabled .entry .post-thumbnail:before,
+		.image-filters-enabled .entry .post-thumbnail:after,
+		.main-navigation .sub-menu,
+		.sticky-post,
+		.entry-content .wp-block-button .wp-block-button__link,
+		.button, button, input[type="button"], input[type="reset"], input[type="submit"],
+		.entry-content > *[class^="wp-block-"].has-primary-background-color,
+		.entry-content > *[class^="wp-block-"] .has-primary-background-color,
+		.entry-content > *[class^="wp-block-"].is-style-solid-color .has-primary-background-color,
+		.entry-content .wp-block-file .wp-block-file__button {
+			background-color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
+		}
+
+		/*
+		 * Set Color for:
+		 * - all links
+		 * - main navigation links
+		 * - Post navigation links
+		 * - Post entry meta hover
+		 * - Post entry header more-link hover
+		 * - main navigation svg
+		 * - comment navigation
+		 * - Comment edit link hover
+		 * - Site Footer Link hover
+		 */
+		a,
+		a:visited,
+		.main-navigation ul.main-menu > li > a,
+		.post-navigation .post-title,
+		.entry .entry-meta a:hover,
+		.entry .entry-footer a:hover,
+		.entry .entry-content .more-link:hover,
+		.main-navigation .main-menu > li > a + svg,
+		.comment-navigation .nav-previous a:hover,
+		.comment-navigation .nav-next a:hover,
+		.comment .comment-metadata .comment-edit-link:hover,
+		.site-footer a:hover,
+		.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
+		.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
+		.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
+		.entry-content > *[class^="wp-block-"] .has-primary-color,
+		.entry-content > *[class^="wp-block-"].is-style-solid-color .has-primary-color {
+			color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
+		}
+
+		/*
+		 * Set left border color for:
+		 * wp block quote
+		 */
+		.entry-content .wp-block-quote:not(.is-large), .entry-content .wp-block-quote:not(.is-style-large) {
+			border-left-color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
+		}
+
+		/*
+		 * Set border color for:
+		 * :focus
+		 */
+		input[type="text"]:focus,
+		input[type="email"]:focus,
+		input[type="url"]:focus,
+		input[type="password"]:focus,
+		input[type="search"]:focus,
+		input[type="number"]:focus,
+		input[type="tel"]:focus,
+		input[type="range"]:focus,
+		input[type="date"]:focus,
+		input[type="month"]:focus,
+		input[type="week"]:focus,
+		input[type="time"]:focus,
+		input[type="datetime"]:focus,
+		input[type="datetime-local"]:focus,
+		input[type="color"]:focus,
+		textarea:focus {
+			border-color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
+		}
+
+		.gallery-item > div > a:focus {
+			box-shadow: 0 0 0 2px hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
+		}
+
+		/* Hover colors */
+		a:hover, a:active,
+		.main-navigation .main-menu > li > a:hover,
+		.main-navigation .main-menu > li > a:hover + svg,
+		.post-navigation .nav-links a:hover,
+		.comment .comment-author .fn a:hover,
+		.comment-reply-link:hover,
+		#cancel-comment-reply-link:hover {
+			color: hsl( ' . $primary_color . ', ' . $saturation . ', 23% ); /* base: #005177; */
+		}
+
+		.main-navigation .sub-menu > li > a:hover,
+		.main-navigation .sub-menu > li > a:focus,
+		.main-navigation .sub-menu > li > a:hover:after,
+		.main-navigation .sub-menu > li > a:focus:after {
+			background: hsl( ' . $primary_color . ', ' . $saturation . ', 23% ); /* base: #005177; */
+		}';
+
+	$editor_css = '
+		/*
+		 * Set colors for:
+		 * - links
+		 * - blockquote
+		 * - pullquote (solid color)
+		 * - buttons
+		 */
+		.editor-block-list__layout .editor-block-list__block a,
+		.editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
+		.editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:hover .wp-block-button__link:not(.has-text-color),
+		.editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:focus .wp-block-button__link:not(.has-text-color),
+		.editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:active .wp-block-button__link:not(.has-text-color) {
+			color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
+		}
+
+		.editor-block-list__layout .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large),
+		.editor-block-list__layout .wp-block-freeform blockquote {
+			border-left: 2px solid hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
+		}
+
+		.editor-block-list__layout .editor-block-list__block .wp-block-pullquote.is-style-solid-color:not(.has-background-color) {
+			background-color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
+		}
+
+		.editor-block-list__layout .editor-block-list__block .wp-block-file .wp-block-file__button,
+		.editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link,
+		.editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link:active,
+		.editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus,
+		.editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
+			background-color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
+		}';
+
+	$css = '';
+	if ( function_exists( 'register_block_type' ) && is_admin() ) {
+		$css .= $editor_css;
+	} else if ( ! is_admin() ) {
+		$css = $theme_css;
+	}
+
+	/**
+	 * Filters Twenty Nineteen custom colors CSS.
+	 *
+	 * @since Twenty Nineteen 1.0
+	 *
+	 * @param string $css           Base theme colors CSS.
+	 * @param int    $primary_color The user's selected color hue.
+	 * @param string $saturation    Filtered theme color saturation level.
+	 */
+	return apply_filters( 'twentynineteen_custom_colors_css', $css, $primary_color, $saturation );
+}

inc/customizer.php

@@ -34,6 +34,26 @@ function twentynineteen_customize_register( $wp_customize ) {
 		);
 	}
 
+	// Add page primary color setting and control.
+	$wp_customize->add_setting( 'primary-color',
+		array(
+			'default'           => 199,
+			'transport'         => 'postMessage',
+			'sanitize_callback' => 'absint',
+		)
+	);
+
+	$wp_customize->add_control(
+		new WP_Customize_Color_Control( $wp_customize, 'primary-color',
+			array(
+				'label'       => __( 'Primary Color' ),
+				'description' => __( 'Changes the Color of the Featured Image overlay, Buttons, Links etc.' ),
+				'section'     => 'colors',
+				'mode'        => 'hue',
+			)
+		)
+	);
+
 	$wp_customize->add_setting(
 		'image_filter',
 		array(

inc/template-functions.php

@@ -239,3 +239,85 @@ function twentynineteen_add_dropdown_icons( $output, $item, $depth, $args ) {
 	return $output;
 }
 add_filter( 'walker_nav_menu_start_el', 'twentynineteen_add_dropdown_icons', 10, 4 );
+
+/**
+ * Convert HSL to HEX colors
+ */
+function twentynineteen_hsl_hex($h, $s, $l, $to_hex = true) {
+
+	$h /= 360;
+	$s /= 100;
+	$l /= 100;
+
+	$r = $l;
+	$g = $l;
+	$b = $l;
+	$v = ($l <= 0.5) ? ($l * (1.0 + $s)) : ($l + $s - $l * $s);
+	if ($v > 0) {
+		$m;
+		$sv;
+		$sextant;
+		$fract;
+		$vsf;
+		$mid1;
+		$mid2;
+
+		$m = $l + $l - $v;
+		$sv = ($v - $m ) / $v;
+		$h *= 6.0;
+		$sextant = floor($h);
+		$fract = $h - $sextant;
+		$vsf = $v * $sv * $fract;
+		$mid1 = $m + $vsf;
+		$mid2 = $v - $vsf;
+
+		switch ($sextant) {
+			case 0:
+				$r = $v;
+				$g = $mid1;
+				$b = $m;
+				break;
+			case 1:
+				$r = $mid2;
+				$g = $v;
+				$b = $m;
+				break;
+			case 2:
+				$r = $m;
+				$g = $v;
+				$b = $mid1;
+				break;
+			case 3:
+				$r = $m;
+				$g = $mid2;
+				$b = $v;
+				break;
+			case 4:
+				$r = $mid1;
+				$g = $m;
+				$b = $v;
+				break;
+			case 5:
+				$r = $v;
+				$g = $m;
+				$b = $mid2;
+				break;
+		}
+	}
+	$r = round($r * 255, 0);
+	$g = round($g * 255, 0);
+	$b = round($b * 255, 0);
+
+	if ($to_hex) {
+
+		$r = ($r < 15)? '0' . dechex($r) : dechex($r);
+		$g = ($g < 15)? '0' . dechex($g) : dechex($g);
+		$b = ($b < 15)? '0' . dechex($b) : dechex($b);
+
+		return "#$r$g$b";
+
+	} else {
+
+		return "rgb($r, $g, $b)";
+	}
+}