Varia: Improvements to custom colors

- Add a11y color note to customizer
- Remove image filter function.
- Improve selection colors
- Code tidying

varia/inc/customize-message-wpcom.css

@@ -0,0 +1,21 @@
+/**
+ * File customize-preview-wpcom.js.
+ *
+ * Instantly live-update customizer settings in the preview for improved user experience,
+ * targeting the updates needed to hide the page title on the homepage on WordPress.com.
+ */
+
+#customize-control-color_a11y_warning {
+	background: #FFF;
+	border: 1px solid #ccd0d4;
+	border-left: 4px solid #00a0d2;
+	box-shadow: 0 1px 1px rgba( 0, 0, 0, .04 );
+	margin: 0 0 6px 0;
+	padding: 9px 14px;
+	overflow: hidden;
+	width: auto;
+}
+
+#customize-control-color_a11y_warning .customize-control-title {
+	display: none;
+}

varia/inc/customize-message-wpcom.js

@@ -0,0 +1,22 @@
+/**
+ * File customize-preview-wpcom.js.
+ *
+ * Instantly live-update customizer settings in the preview for improved user experience,
+ * targeting the updates needed to hide the page title on the homepage on WordPress.com.
+ */
+
+( function( $ ) {
+
+    'use strict';
+
+	wp.customize.bind( 'ready', function () {
+		wp.customize.panel( 'themes', function( panel ) {
+			panel.deferred.embedded.done( function() {
+				var customMessage;
+				customMessage = $( wp.template( 'varia-custom-message' )() );
+				panel.headContainer.append( customMessage );
+			} );
+		} );
+	} );
+
+} )( jQuery );

varia/inc/customize-preview-wpcom.js

@@ -18,4 +18,5 @@
 			}
 		} );
 	} );
+
 } )( jQuery );

varia/inc/wpcom-colors.php

@@ -371,3 +371,23 @@ add_color_rule( 'fg1', '#ff0000', array(
 	array( '.has-secondary-background-color[class]', 'background-color' ),
 
 ), __( 'Secondary Color' ) );
+
+function varia_custom_colors_extra_css() {
+	// Get stored colors
+	$colors_array = get_theme_mod('colors_manager'); // color annotations array()
+	$foreground   = $colors_array['colors']['link']; // $config-global--color-primary-default;
+	$background   = $colors_array['colors']['bg'];   // $config-global--color-primary-default;
+?>
+	::selection {
+		background-color: <?php echo $foreground; ?>;
+		color: <?php echo $background; ?>;
+		mix-blend-mode: hard-light;
+	}
+	::-moz-selection {
+		background-color: <?php echo $foreground; ?>;
+		color: <?php echo $background; ?>;
+		mix-blend-mode: hard-light;
+	}
+<?php }
+add_theme_support( 'custom_colors_extra_css', 'varia_custom_colors_extra_css' );
+

varia/inc/wpcom.php

@@ -18,11 +18,11 @@ function varia_wpcom_setup() {
 	// Set theme colors for third party services.
 	if ( ! isset( $themecolors ) ) {
 		$themecolors = array(
-			'bg'     => 'ffffff', // $config-global--color-background-default;
-			'border' => 'dddddd', // $config-global--color-border-default;
-			'text'   => '444444', // $config-global--color-foreground-default;
-			'link'   => '0000ff', // $config-global--color-primary-default;
-			'url'    => '0000ff', // $config-global--color-primary-default;
+			'bg'     => 'ffffff',
+			'border' => '767676',
+			'text'   => '111111',
+			'link'   => '0073aa',
+			'url'    => '0073aa',
 		);
 	}
 }
@@ -47,6 +47,17 @@ function varia_wpcom_customize_update( $wp_customize ) {
 		'type'		  => 'checkbox',
 		'settings'	  => 'hide_front_page_title',
 	) );
+
+    $wp_customize->add_setting( 'color_a11y_warning' );
+    $wp_customize->add_control( 'color_a11y_warning', array(
+        'id'          => 'id',
+        'label'       => esc_html__( 'Color Accessibility Warning', 'varia' ),
+		'description' => esc_html__( 'In order to ensure people can read your site, try to maintain a strong contrast ratio between the colors you choose here. Learn more.', 'varia' ),
+        'section'     => 'colors_manager_tool',
+		'priority'	  => 10,
+		'type'		  => 'hidden',
+    ) );
+
 }
 add_action( 'customize_register', 'varia_wpcom_customize_update' );
 
@@ -147,3 +158,24 @@ function varia_custom_colors_extra_css() { ?>
 	}
 <?php }
 add_theme_support( 'custom_colors_extra_css', 'varia_custom_colors_extra_css' );
+
+/**
+ * Enqueue CSS and JS for customizer pane.
+ */
+function varia_enqueue_message_scripts() {
+	wp_enqueue_script( 'varia-customize-message-wpcom-script', get_template_directory_uri() . '/inc/customize-message-wpcom.js', array( 'customize-controls' ), wp_get_theme()->get( 'Version' ) );
+	wp_enqueue_style( 'varia-customize-message-wpcom-style', get_template_directory_uri() . '/inc/customize-message-wpcom.css', array(), wp_get_theme()->get( 'Version' ) );
+}
+add_action( 'customize_controls_enqueue_scripts', 'varia_enqueue_message_scripts' );
+
+/**
+ * Add message about a11y
+ */
+function varia_print_customizer_message() {
+	?>
+	<script type="text/html" id="tmpl-varia-custom-message">
+		<p class="varia-custom-message"><?php esc_html_e( 'This is a custom message being added to the WordPress Customizer.', 'varia' ) ?></p>
+	</script>
+	<?php
+}
+add_action( 'customize_controls_print_footer_scripts', 'varia_print_customizer_message' );

varia/js/customize-preview.js

@@ -46,15 +46,4 @@
 		});
 	});
 
-	// Image filter.
-	wp.customize( 'image_filter', function( value ) {
-		value.bind( function( to ) {
-			if ( to ) {
-				$( 'body' ).addClass( 'image-filters-enabled' );
-			} else {
-				$( 'body' ).removeClass( 'image-filters-enabled' );
-			}
-		} );
-	} );
-
 })( jQuery );

varia/style-rtl.css

@@ -2282,6 +2282,10 @@ hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
 	max-width: 96px;
 }
 
+hr.wp-block-separator.is-style-wide {
+	border-bottom-width: 2px;
+}
+
 hr.wp-block-separator.is-style-dots.has-background, hr.wp-block-separator.is-style-dots.has-text-color {
 	background-color: transparent !important;
 }