Simplify how Seedlet child themes declare color annotations

seedlet/inc/wpcom-colors-utils.php

@@ -0,0 +1,120 @@
+<?php
+
+// Custom Colors: Seedlet
+function seedlet_define_color_annotations( $colors ) {
+	// Background Color
+	// --global--color-background
+	add_color_rule( 'bg', $colors[ 'background' ], array(
+
+		// This placeholder is needed to make the color annotations work
+		array( '.global--color-background', 'background-color' ),
+
+	), __( 'Background Color' ) );
+
+	// Foreground Color
+	// --global--color-foreground-light
+	add_color_rule( 'txt', $colors[ 'foreground' ], array(
+
+		// This placeholder is needed to make the color annotations work
+		array( '.global--color-foreground-light', 'color' ),
+
+	), __( 'Foreground Color' ) );
+
+	// Primary Color
+	// --global--color-primary
+	add_color_rule( 'link', $colors[ 'primary' ], array(
+
+		// This placeholder is needed to make the color annotations work
+		array( '.global--color-primary', 'color' ),
+
+	), __( 'Primary Color' ) );
+
+	// Secondary Color
+	// --global--color-secondary
+	add_color_rule( 'fg1', $colors[ 'secondary' ], array(
+
+		// Text-color
+		array( '.global--color-secondary', 'color' ),
+
+	), __( 'Secondary Color' ) );
+
+	// Tertiary Color
+	// --global--color-tertiary
+	add_color_rule( 'fg2', $colors[ 'tertiary' ], array(
+
+		// Text-color
+		array( '.global--color-tertiary', 'color' ),
+
+	), __( 'Tertiary Color' ) );
+}
+
+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 ) . '%)';
+}
+
+/**
+ * Custom CSS.
+ * The plugin takes the body of this function and applies it in a style tag in the document head.
+ */
+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'];
+
+	$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 );
+?>
+
+	:root,
+	#editor .editor-styles-wrapper {
+		--global--color-background: <?php echo $background; ?>;
+		--global--color-foreground: <?php echo $foreground; ?>;
+		--global--color-foreground-light: <?php echo $foreground_light; ?>;
+		--global--color-foreground-dark: <?php echo $foreground_dark; ?>;
+		--global--color-primary: <?php echo $primary; ?>;
+		--global--color-primary-hover: <?php echo $primary_hover; ?>;
+		--global--color-secondary: <?php echo $secondary; ?>;
+		--global--color-secondary-hover: <?php echo $secondary_hover; ?>;
+		--global--color-tertiary: <?php echo $tertiary; ?>;
+	}
+
+<?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' );
+// 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' );

seedlet/inc/wpcom-colors.php

@@ -1,121 +1,11 @@
 <?php
 
-/*
- * Custom Colors: Seedlet
- */
-
-// Background Color
-// --global--color-background
-add_color_rule( 'bg', '#FFFFFF', array(
-
-	// This placeholder is needed to make the color annotations work
-	array( '.global--color-background', 'background-color' ),
-
-), __( 'Background Color' ) );
-
-// Foreground Color
-// --global--color-foreground-light
-add_color_rule( 'txt', '#444444', array(
-
-	// This placeholder is needed to make the color annotations work
-	array( '.global--color-foreground-light', 'color' ),
-
-), __( 'Foreground Color' ) );
-
-// Primary Color
-// --global--color-primary
-add_color_rule( 'link', '#000000', array(
-
-	// This placeholder is needed to make the color annotations work
-	array( '.global--color-primary', 'color' ),
-
-), __( 'Primary Color' ) );
-
-// Secondary Color
-// --global--color-secondary
-add_color_rule( 'fg1', '#3C8067', array(
-
-	// Text-color
-	array( '.global--color-secondary', 'color' ),
-
-), __( 'Secondary Color' ) );
-
-// Tertiary Color
-// --global--color-tertiary
-add_color_rule( 'fg2', '#FAFBF6', array(
-
-	// Text-color
-	array( '.global--color-tertiary', 'color' ),
-
-), __( 'Tertiary Color' ) );
-
-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 ) . '%)';
-}
-
-/**
- * Custom CSS.
- * The plugin takes the body of this function and applies it in a style tag in the document head.
- */
-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'];
-
-	$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 );
-?>
-
-	:root,
-	#editor .editor-styles-wrapper {
-		--global--color-background: <?php echo $background; ?>;
-		--global--color-foreground: <?php echo $foreground; ?>;
-		--global--color-foreground-light: <?php echo $foreground_light; ?>;
-		--global--color-foreground-dark: <?php echo $foreground_dark; ?>;
-		--global--color-primary: <?php echo $primary; ?>;
-		--global--color-primary-hover: <?php echo $primary_hover; ?>;
-		--global--color-secondary: <?php echo $secondary; ?>;
-		--global--color-secondary-hover: <?php echo $secondary_hover; ?>;
-		--global--color-tertiary: <?php echo $tertiary; ?>;
-	}
-
-<?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' );
-// 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' );
+require_once 'wpcom-colors-utils.php';
+
+seedlet_define_color_annotations( [
+	'background' => '#FFFFFF',
+	'foreground' => '#444444',
+	'primary' => '#000000',
+	'secondary' => '#3C8067',
+	'tertiary' => '#FAFBF6',
+ ] );

spearhead/inc/wpcom-colors-editor.php

@@ -0,0 +1,2 @@
+<?php
+	require_once 'wpcom-colors.php';

spearhead/inc/wpcom-colors.php

@@ -1,118 +1,11 @@
 <?php
 
-/*
- * Custom Colors: Spearhead
- */
-
-// Background Color
-// --global--color-background
-add_color_rule( 'bg', '#FFFFFF', array(
-
-	// This placeholder is needed to make the color annotations work
-	array( '.global--color-background', 'background-color' ),
-
-), __( 'Background Color' ) );
-
-// Foreground Color
-// --global--color-foreground-light
-add_color_rule( 'txt', '#444444', array(
-
-	// This placeholder is needed to make the color annotations work
-	array( '.global--color-foreground-light', 'color' ),
-
-), __( 'Foreground Color' ) );
-
-// Primary Color
-// --global--color-primary
-add_color_rule( 'link', '#000000', array(
-
-	// This placeholder is needed to make the color annotations work
-	array( '.global--color-primary', 'color' ),
-
-), __( 'Primary Color' ) );
-
-// Secondary Color
-// --global--color-secondary
-add_color_rule( 'fg1', '#3C8067', array(
-
-	// Text-color
-	array( '.global--color-secondary', 'color' ),
-
-), __( 'Secondary Color' ) );
-
-// Tertiary Color
-// --global--color-tertiary
-add_color_rule( 'fg2', '#FAFBF6', array(
-
-	// Text-color
-	array( '.global--color-tertiary', 'color' ),
-
-), __( 'Tertiary Color' ) );
-
-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 ) . '%)';
-}
-
-/**
- * Custom CSS.
- * The plugin takes the body of this function and applies it in a style tag in the document head.
- */
-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'];
-
-	$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 );
-?>
-
-	:root,
-	#editor .editor-styles-wrapper {
-		--global--color-background: <?php echo $background; ?>;
-		--global--color-foreground: <?php echo $foreground; ?>;
-		--global--color-foreground-light: <?php echo $foreground_light; ?>;
-		--global--color-foreground-dark: <?php echo $foreground_dark; ?>;
-		--global--color-primary: <?php echo $primary; ?>;
-		--global--color-primary-hover: <?php echo $primary_hover; ?>;
-		--global--color-secondary: <?php echo $secondary; ?>;
-		--global--color-secondary-hover: <?php echo $secondary_hover; ?>;
-		--global--color-tertiary: <?php echo $tertiary; ?>;
-	}
-
-<?php }
-add_theme_support( 'custom_colors_extra_css', 'seedlet_custom_colors_extra_css' );
-
-// Light
-add_color_palette( array(
-	'#EFFCED',
-	'#DCEEE2',
-	'#297B27',
-	'#639182',
-	'#333333',
-), /* translators: This is the name for a color scheme */ 'Light' );
-// Medium
-add_color_palette( array(
-	'#EEF4F7',
-	'#0F2751',
-	'#0F6D89',
-	'#37374C',
-	'#E7E7F3',
-), /* translators: This is the name for a color scheme */ 'Medium' );
-// Dark
-add_color_palette( array(
-	'#2d0f2d',
-	'#bfadc1',
-	'#d2cad2',
-	'#887890',
-	'#3a1c3a',
-), /* translators: This is the name for a color scheme */ 'Dark' );
+require_once get_template_directory() . '/inc/wpcom-colors-utils.php';
+
+seedlet_define_color_annotations( [
+	'background' => '#FFFFFF',
+	'foreground' => '#333333',
+	'primary' => '#DB0042',
+	'secondary' => '#555555',
+	'tertiary' => '#FAFBF6',
+] );