Add customizer options for dark (hover) colours (#125)

* Add dark variants for primary/accent colours in customizer.
* Expand contrast checks to handle dark variants.

inc/actions/namespace.php

@@ -243,15 +243,8 @@ function add_color_variants( $option, $old_value, $value ) {
 	$color = Hex::fromString( $value );
 	$color = $color->toRgb();
 	$color_alpha = $color->toRgba( 0.25 );
-	$color_dark = new Rgb(
-		$color->red() * 0.9,
-		$color->green() * 0.9,
-		$color->blue() * 0.9
-	);
 	$color_alpha = (string) $color_alpha;
-	$color_dark = (string) $color_dark;
 
-	update_option( $option . '_dark', $color_dark );
 	update_option( $option . '_alpha', $color_alpha );
 }
 

inc/customizer/namespace.php

@@ -61,12 +61,24 @@ function customize_register( \WP_Customize_Manager $wp_customize ) {
 			'label' => __( 'Primary Color', 'pressbooks-aldine' ),
 			'description' => __( 'Primary color, used for links and other primary elements.', 'pressbooks-aldine' ),
 		],
+		[
+			'slug' => 'primary_dark',
+			'hex' => '#7f0c07',
+			'label' => __( 'Primary Color (Dark)', 'pressbooks-aldine' ),
+			'description' => __( 'Darkened variant of the primary color, used for primary element hover states.', 'pressbooks-aldine' ),
+		],
 		[
 			'slug' => 'accent',
 			'hex' => '#015d75',
 			'label' => __( 'Accent Color', 'pressbooks-aldine' ),
 			'description' => __( 'Accent color, used for flourishes and secondary elements.', 'pressbooks-aldine' ),
 		],
+		[
+			'slug' => 'accent_dark',
+			'hex' => '#013542',
+			'label' => __( 'Accent Color (Dark)', 'pressbooks-aldine' ),
+			'description' => __( 'Darkened variant of the accent color, used for secondary element hover states.', 'pressbooks-aldine' ),
+		],
 		[
 			'slug' => 'primary_fg',
 			'hex' => '#ffffff',
@@ -203,8 +215,12 @@ function enqueue_color_contrast_validator() {
 
 	$exports = [
 		'validate_color_contrast' => [
-			'pb_network_color_primary_fg' => [ 'pb_network_color_primary' ],
-			'pb_network_color_accent_fg' => [ 'pb_network_color_accent' ],
+			'pb_network_color_primary_fg' => [ 'pb_network_color_primary', 'pb_network_color_primary_dark' ],
+			'pb_network_color_accent_fg' => [ 'pb_network_color_accent', 'pb_network_color_accent_dark' ],
+			'pb_network_color_primary' => [ 'pb_network_color_primary_fg' ],
+			'pb_network_color_primary_dark' => [ 'pb_network_color_primary_fg' ],
+			'pb_network_color_accent' => [ 'pb_network_color_accent_fg' ],
+			'pb_network_color_accent_dark' => [ 'pb_network_color_accent_fg' ],
 		],
 	];