Brompton: Cleanup default colors, update editor color annotations.

brompton/functions.php

@@ -71,9 +71,9 @@ if ( ! function_exists( 'brompton_setup' ) ) :
 		$primary      = ! empty( $colors_array ) ? $colors_array['colors']['link'] : '#C04239'; // $config-global--color-primary-default;
 		$secondary    = ! empty( $colors_array ) ? $colors_array['colors']['fg1'] : '#FFFFFF';  // $config-global--color-secondary-default;
 		$background   = ! empty( $colors_array ) ? $colors_array['colors']['bg'] : '#E8E4DD';   // $config-global--color-background-default;
-		$foreground   = ! empty( $colors_array ) ? $colors_array['colors']['txt'] : '#505050';  // $config-global--color-foreground-default;
-		$foreground_light = ( ! empty( $colors_array ) && $colors_array['colors']['txt'] != '#505050' ) ? $colors_array['colors']['txt'] : '#666666';  // $config-global--color-foreground-light-default;
-		$foreground_dark  = ( ! empty( $colors_array ) && $colors_array['colors']['txt'] != '#505050' ) ? $colors_array['colors']['txt'] : '#474747';  // $config-global--color-foreground-dark-default;
+		$foreground   = ! empty( $colors_array ) ? $colors_array['colors']['txt'] : '#252E36';  // $config-global--color-foreground-default;
+		$foreground_light = ( ! empty( $colors_array ) && $colors_array['colors']['txt'] != '#252E36' ) ? $colors_array['colors']['txt'] : '#666666';  // $config-global--color-foreground-light-default;
+		$foreground_dark  = ( ! empty( $colors_array ) && $colors_array['colors']['txt'] != '#252E36' ) ? $colors_array['colors']['txt'] : '#474747';  // $config-global--color-foreground-dark-default;
 
 		// Editor color palette.
 		add_theme_support(

brompton/inc/wpcom-editor-colors.php

@@ -12,12 +12,6 @@ add_editor_color_rule( 'bg', '#E8E4DD', array(
 			#editor .editor-styles-wrapper .button.has-focus,
 			#editor .editor-styles-wrapper .button:focus,
 			#editor .editor-styles-wrapper .button:hover,
-			#editor .editor-styles-wrapper .has-background-color,
-			#editor .editor-styles-wrapper .has-foreground-background-color,
-			#editor .editor-styles-wrapper .has-foreground-dark-background-color,
-			#editor .editor-styles-wrapper .has-foreground-light-background-color,
-			#editor .editor-styles-wrapper .has-primary-background-color,
-			#editor .editor-styles-wrapper .has-secondary-background-color,
 			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button,
 			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button:focus,
 			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button:hover,
@@ -27,46 +21,61 @@ add_editor_color_rule( 'bg', '#E8E4DD', array(
 			#editor .editor-styles-wrapper .wp-block-button__link:focus,
 			#editor .editor-styles-wrapper .wp-block-button__link:hover,
 			#editor .editor-styles-wrapper .wp-block-cover,
+			#editor .editor-styles-wrapper .wp-block-cover.has-background-dim,
+			#editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .block-editor-block-list__block,
+			#editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover-image-text,
+			#editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover-text,
+			#editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover__inner-container,
 			#editor .editor-styles-wrapper .wp-block-cover-image,
+			#editor .editor-styles-wrapper .wp-block-cover-image.has-background-dim,
 			#editor .editor-styles-wrapper .wp-block-cover-image:not([class*="background-color"]) .block-editor-block-list__block,
 			#editor .editor-styles-wrapper .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover-image-text,
 			#editor .editor-styles-wrapper .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover-text,
 			#editor .editor-styles-wrapper .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover__inner-container,
-			#editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .block-editor-block-list__block,
-			#editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover-image-text,
-			#editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover-text,
-			#editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover__inner-container,
 			#editor .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color', 'color' ),
 
 	// Text-color
-	array( '#editor .editor-styles-wrapper', 'background-color' ),
+	array( '#editor .editor-styles-wrapper,
+			#editor .editor-styles-wrapper .has-background-background-color,
+			#editor .editor-styles-wrapper .wp-block .has-background-background-color,', 'background-color' ),
 
 	/**
 	 * Utility Classes
 	 */
 
 	// Text-color
-	array( '#editor .editor-styles-wrapper .has-primary-background-color[class],
-			#editor .editor-styles-wrapper .has-secondary-background-color[class],
-			#editor .editor-styles-wrapper .has-foreground-background-color[class],
-			#editor .editor-styles-wrapper .has-foreground-dark-background-color[class],
-			#editor .editor-styles-wrapper .has-foreground-light-background-color[class],
-			#editor .editor-styles-wrapper .has-background-color[class]', 'color' ),
+	array( '#editor .editor-styles-wrapper .has-background-color,
+			#editor .editor-styles-wrapper .has-foreground-background-color,
+			#editor .editor-styles-wrapper .has-foreground-dark-background-color,
+			#editor .editor-styles-wrapper .has-foreground-light-background-color,
+			#editor .editor-styles-wrapper .has-primary-background-color,
+			#editor .editor-styles-wrapper .has-secondary-background-color,
+			#editor .editor-styles-wrapper .wp-block .has-background-color,
+			#editor .editor-styles-wrapper .wp-block .has-foreground-background-color,
+			#editor .editor-styles-wrapper .wp-block .has-foreground-dark-background-color,
+			#editor .editor-styles-wrapper .wp-block .has-foreground-light-background-color,
+			#editor .editor-styles-wrapper .wp-block .has-primary-background-color,
+			#editor .editor-styles-wrapper .wp-block .has-secondary-background-color', 'color' ),
 
 	// Background-color
-	array( '#editor .editor-styles-wrapper .has-background-background-color[class]', 'background-color' ),
+	array( '#editor .editor-styles-wrapper .has-background-background-color,
+			#editor .editor-styles-wrapper .wp-block .has-background-background-color', 'background-color' ),
 
 	// Text-color darkened
-	array( '#editor .editor-styles-wrapper .has-background-dark-color[class]', 'color', '-1'  ),
+	array( '#editor .editor-styles-wrapper .has-background-dark-color,
+			#editor .editor-styles-wrapper .wp-block .has-background-dark-color', 'color', '-1'  ),
 
 	// Background-color darkened
-	array( '#editor .editor-styles-wrapper .has-background-dark-background-color[class]', 'background-color', '-1' ),
+	array( '#editor .editor-styles-wrapper .has-background-dark-background-color,
+			#editor .editor-styles-wrapper .wp-block .has-background-dark-background-color', 'background-color', '-1' ),
 
 	// Text-color lightened
-	array( '#editor .editor-styles-wrapper .has-background-light-color[class]', 'color', '+1'  ),
+	array( '#editor .editor-styles-wrapper .has-background-light-color,
+			#editor .editor-styles-wrapper .wp-block .has-background-light-color', 'color', '+1'  ),
 
 	// Background-color lightened
-	array( '#editor .editor-styles-wrapper .has-background-light-background-color[class]', 'background-color', '+1' ),
+	array( '#editor .editor-styles-wrapper .has-background-light-background-color,
+			#editor .editor-styles-wrapper .wp-block .has-background-light-background-color', 'background-color', '+1' ),
 
 ), __( 'Background Color' ) );
 
@@ -75,8 +84,7 @@ add_editor_color_rule( 'bg', '#E8E4DD', array(
 add_editor_color_rule( 'link', '#C04239', array(
 
 	// Text-color
-	array( '#editor .editor-styles-wrapper .has-primary-color,
-			#editor .editor-styles-wrapper .is-style-outline .wp-block-button__link.has-focus,
+	array( '#editor .editor-styles-wrapper .is-style-outline .wp-block-button__link.has-focus,
 			#editor .editor-styles-wrapper .is-style-outline .wp-block-button__link:focus,
 			#editor .editor-styles-wrapper .is-style-outline .wp-block-button__link:hover,
 			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-title a,
@@ -91,6 +99,7 @@ add_editor_color_rule( 'link', '#C04239', array(
 			#editor .editor-styles-wrapper .button:focus,
 			#editor .editor-styles-wrapper .button:hover,
 			#editor .editor-styles-wrapper .has-primary-background-color,
+			#editor .editor-styles-wrapper .wp-block .has-primary-background-color,
 			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button:focus,
 			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button:hover,
 			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .has-focus.button,
@@ -107,10 +116,12 @@ add_editor_color_rule( 'link', '#C04239', array(
 	 */
 
 	// Text-color
-	array( '#editor .editor-styles-wrapper .has-primary-color[class]', 'color' ),
+	array( '#editor .editor-styles-wrapper .has-primary-color,
+			#editor .editor-styles-wrapper .wp-block .has-primary-color', 'color' ),
 
 	// Background-color
-	array( '#editor .editor-styles-wrapper .has-primary-background-color[class]', 'background-color' ),
+	array( '#editor .editor-styles-wrapper .has-primary-background-color,
+			#editor .editor-styles-wrapper .wp-block .has-primary-background-color', 'background-color' ),
 
 ), __( 'Link Color' ) );
 
@@ -120,11 +131,12 @@ add_editor_color_rule( 'txt', '#252E36', array(
 
 	// Text-color
 	array( '#editor .editor-styles-wrapper .editor-post-title__block .editor-post-title__input,
-			#editor .editor-styles-wrapper .has-background-background-color,
-			#editor .editor-styles-wrapper .has-background-dark-background-color,
-			#editor .editor-styles-wrapper .has-background-light-background-color,
-			#editor .editor-styles-wrapper .has-foreground-color,
 			#editor .editor-styles-wrapper .is-style-outline .wp-block-button__link,
+			#editor .editor-styles-wrapper .is-style-outline .wp-block-button__link:focus,
+			#editor .editor-styles-wrapper .is-style-outline .wp-block-button__link:hover,
+			#editor .editor-styles-wrapper .wp-block-button__link.is-style-outline.has-focus,
+			#editor .editor-styles-wrapper .wp-block-button__link.is-style-outline:focus,
+			#editor .editor-styles-wrapper .wp-block-button__link.is-style-outline:hover,
 			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .cat-links a:active,
 			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .cat-links a:hover,
 			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-meta a:active,
@@ -132,43 +144,54 @@ add_editor_color_rule( 'txt', '#252E36', array(
 			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-title a:hover,
 			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .more-link:active,
 			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .more-link:hover,
-			#editor .editor-styles-wrapper .wp-block-button__link.is-style-outline,
 			#editor .editor-styles-wrapper .wp-block-pullquote,
+			#editor .editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
+			#editor .editor-styles-wrapper table.is-style-stripes tbody tr:nth-child(odd)
 			#editor .editor-styles-wrapper a:hover,
 			#editor .editor-styles-wrapper', 'color' ),
 
 	// Background-color
 	array( '#editor .editor-styles-wrapper .button,
-			#editor .editor-styles-wrapper .has-foreground-background-color,
 			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button,
 			#editor .editor-styles-wrapper .wp-block-button__link,
+			#editor .editor-styles-wrapper .wp-block-cover-image,
+			#editor .editor-styles-wrapper .wp-block-cover-image.has-background-dim,
 			#editor .editor-styles-wrapper .wp-block-cover,
-			#editor .editor-styles-wrapper .wp-block-cover-image', 'background-color' ),
+			#editor .editor-styles-wrapper .wp-block-cover.has-background-dim', 'background-color' ),
 
 	/**
 	 * Utility Classes
 	 */
 
 	// Text-color
-	array( '#editor .editor-styles-wrapper .has-background-background-color[class],
-			#editor .editor-styles-wrapper .has-background-dark-background-color[class],
-			#editor .editor-styles-wrapper .has-background-light-background-color[class],
-			#editor .editor-styles-wrapper .has-foreground-color[class]', 'color' ),
+	array( '#editor .editor-styles-wrapper .has-background-background-color,
+			#editor .editor-styles-wrapper .has-background-dark-background-color,
+			#editor .editor-styles-wrapper .has-background-light-background-color,
+			#editor .editor-styles-wrapper .has-foreground-color,
+			#editor .editor-styles-wrapper .wp-block .has-background-background-color,
+			#editor .editor-styles-wrapper .wp-block .has-background-dark-background-color,
+			#editor .editor-styles-wrapper .wp-block .has-background-light-background-color,
+			#editor .editor-styles-wrapper .wp-block .has-foreground-color', 'color' ),
 
 	// Background-color
-	array( '#editor .editor-styles-wrapper .has-foreground-background-color[class]', 'background-color' ),
+	array( '#editor .editor-styles-wrapper .has-foreground-background-color,
+			#editor .editor-styles-wrapper .wp-block .has-foreground-background-color', 'background-color' ),
 
 	// Text-color darkened
-	array( '#editor .editor-styles-wrapper .has-foreground-dark-color[class]', 'color', '-1' ),
+	array( '#editor .editor-styles-wrapper .has-foreground-dark-color,
+			#editor .editor-styles-wrapper .wp-block .has-foreground-dark-color', 'color', '-1' ),
 
 	// Background-color darkened
-	array( '#editor .editor-styles-wrapper .has-foreground-dark-background-color[class]', 'background-color', '-1' ),
+	array( '#editor .editor-styles-wrapper .has-foreground-dark-background-color,
+			#editor .editor-styles-wrapper .wp-block .has-foreground-dark-background-color', 'background-color', '-1' ),
 
 	// Text-color brightened
-	array( '#editor .editor-styles-wrapper .has-foreground-light-color[class]', 'color', '+2' ),
+	array( '#editor .editor-styles-wrapper .has-foreground-light-color,
+			#editor .editor-styles-wrapper .wp-block .has-foreground-light-color', 'color', '+2' ),
 
 	// Background-color brightened
-	array( '#editor .editor-styles-wrapper .has-foreground-light-background-color[class]', 'background-color', '+2' ),
+	array( '#editor .editor-styles-wrapper .has-foreground-light-background-color,
+			#editor .editor-styles-wrapper .wp-block .has-foreground-light-background-color', 'background-color', '+2' ),
 
 ), __( 'Text Color' ) );
 
@@ -181,9 +204,11 @@ add_editor_color_rule( 'fg1', '#FFFFFF', array(
 	 */
 
 	// Text-color
-	array( '#editor .editor-styles-wrapper .has-secondary-color[class]', 'color' ),
+	array( '#editor .editor-styles-wrapper .has-secondary-color,
+			#editor .editor-styles-wrapper .wp-block .has-secondary-color', 'color' ),
 
 	// Background-color
-	array( '#editor .editor-styles-wrapper .has-secondary-background-color[class]', 'background-color' ),
+	array( '#editor .editor-styles-wrapper .has-secondary-background-color,
+			#editor .editor-styles-wrapper .wp-block .has-secondary-background-color', 'background-color' ),
 
 ), __( 'Secondary Color' ) );