Use a darkened primary color for the menu

shawburn/sass/_global-variables.scss

@@ -3,6 +3,7 @@
 	/* Colors */
 	--wp--preset--color--primary: #0C80A1;
 	--wp--preset--color--primary-hover: #085a72; // darken(#0C80A1, 10%);
+	--wp--preset--color--primary-dark: #085a72; // darken(#0C80A1, 10%);
 	--wp--preset--color--secondary: #D4401C;
 	--wp--preset--color--secondary-hover: #a73216; // darken(#D4401C, 10%);
 	--wp--preset--color--foreground: #444444;

shawburn/sass/_site-navigation.scss

@@ -1,5 +1,5 @@
 $color_primary_default: #{map-deep-get($config-global, "color", "primary", "default")};
-$color_primary_hover: #{map-deep-get($config-global, "color", "primary", "hover")};
+$color_primary_hover: #{map-deep-get($config-global, "color", "primary", "dark")};
 
 /**
  * Main Menu

shawburn/style-editor.css

@@ -127,6 +127,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
 	/* Colors */
 	--wp--preset--color--primary: #0C80A1;
 	--wp--preset--color--primary-hover: #085a72;
+	--wp--preset--color--primary-dark: #085a72;
 	--wp--preset--color--secondary: #D4401C;
 	--wp--preset--color--secondary-hover: #a73216;
 	--wp--preset--color--foreground: #444444;
@@ -1764,7 +1765,7 @@ pre.wp-block-verse {
 .fse-template-part .main-navigation ul > li.focus > a,
 #site-navigation.main-navigation ul > li.current-menu-item > a,
 .fse-template-part .main-navigation ul > li.current-menu-item > a {
-	background-color: var(--wp--preset--color--primary-hover);
+	background-color: var(--wp--preset--color--primary-dark);
 }
 
 #site-navigation.main-navigation ul, .fse-template-part .main-navigation ul {
@@ -1797,7 +1798,7 @@ pre.wp-block-verse {
 		padding: 0;
 	}
 	#site-navigation.main-navigation ul.main-menu > li:after, .fse-template-part .main-navigation ul.main-menu > li:after {
-		color: var(--wp--preset--color--primary-hover);
+		color: var(--wp--preset--color--primary-dark);
 		content: "\2022";
 		display: inline;
 		font-size: 0.83333rem;

shawburn/style-rtl.css

@@ -148,6 +148,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
 	/* Colors */
 	--wp--preset--color--primary: #0C80A1;
 	--wp--preset--color--primary-hover: #085a72;
+	--wp--preset--color--primary-dark: #085a72;
 	--wp--preset--color--secondary: #D4401C;
 	--wp--preset--color--secondary-hover: #a73216;
 	--wp--preset--color--foreground: #444444;
@@ -4445,7 +4446,7 @@ table th,
 .fse-template-part .main-navigation ul > li.focus > a,
 #site-navigation.main-navigation ul > li.current-menu-item > a,
 .fse-template-part .main-navigation ul > li.current-menu-item > a {
-	background-color: var(--wp--preset--color--primary-hover);
+	background-color: var(--wp--preset--color--primary-dark);
 }
 
 #site-navigation.main-navigation ul, .fse-template-part .main-navigation ul {
@@ -4478,7 +4479,7 @@ table th,
 		padding: 0;
 	}
 	#site-navigation.main-navigation ul.main-menu > li:after, .fse-template-part .main-navigation ul.main-menu > li:after {
-		color: var(--wp--preset--color--primary-hover);
+		color: var(--wp--preset--color--primary-dark);
 		content: "\2022";
 		display: inline;
 		font-size: 0.83333rem;

shawburn/style.css

@@ -148,6 +148,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
 	/* Colors */
 	--wp--preset--color--primary: #0C80A1;
 	--wp--preset--color--primary-hover: #085a72;
+	--wp--preset--color--primary-dark: #085a72;
 	--wp--preset--color--secondary: #D4401C;
 	--wp--preset--color--secondary-hover: #a73216;
 	--wp--preset--color--foreground: #444444;
@@ -4474,7 +4475,7 @@ table th,
 .fse-template-part .main-navigation ul > li.focus > a,
 #site-navigation.main-navigation ul > li.current-menu-item > a,
 .fse-template-part .main-navigation ul > li.current-menu-item > a {
-	background-color: var(--wp--preset--color--primary-hover);
+	background-color: var(--wp--preset--color--primary-dark);
 }
 
 #site-navigation.main-navigation ul, .fse-template-part .main-navigation ul {
@@ -4507,7 +4508,7 @@ table th,
 		padding: 0;
 	}
 	#site-navigation.main-navigation ul.main-menu > li:after, .fse-template-part .main-navigation ul.main-menu > li:after {
-		color: var(--wp--preset--color--primary-hover);
+		color: var(--wp--preset--color--primary-dark);
 		content: "\2022";
 		display: inline;
 		font-size: 0.83333rem;

varia/functions.php

@@ -157,7 +157,7 @@ if ( ! function_exists( 'varia_setup' ) ) :
 		 *
 		 * - if the customizer color is empty, use the default
 		 */
-		$colors_array   = get_theme_mod( 'colors_manager' ); // color annotations array()
+		$colors_array   = false;//get_theme_mod( 'colors_manager' ); // color annotations array()
 		$default_colors = varia_default_colors();
 		$primary        = ! empty( $colors_array ) ? $colors_array['colors']['link'] : $default_colors['primary']; // $config-global--color-primary-default;
 		$secondary      = ! empty( $colors_array ) ? $colors_array['colors']['fg1'] : $default_colors['secondary'];  // $config-global--color-secondary-default;

varia/inc/wpcom-colors-css-variables.php

@@ -109,6 +109,7 @@ function varia_custom_colors_extra_css() {
 	if ( isset( $colors_array['colors']['link'] ) ) {
 		$primary       = $colors_array['colors']['link'];
 		$primary_hover = change_color_luminescence( $primary, 10 );
+		$primary_dark  = change_color_luminescence( $primary, -10 );
 	}
 
 	if ( isset( $colors_array['colors']['fg1'] ) ) {
@@ -143,7 +144,7 @@ function varia_custom_colors_extra_css() {
 			?>
 			--wp--preset--color--primary: <?php echo $primary; ?>;
 			--wp--preset--color--primary-hover: <?php echo $primary_hover; ?>;
-
+			--wp--preset--color--primary-dark: <?php echo $primary_dark; ?>;
 			<?php
 		}
 		if ( isset( $colors_array['colors']['fg1'] ) ) {
@@ -170,14 +171,14 @@ add_theme_support( 'custom_colors_extra_css', 'varia_custom_colors_extra_css' );
 $has_tertiary_color = false;
 
 if ( function_exists( 'varia_default_colors' ) ) {
-	$default_colors =  varia_default_colors();
+	$default_colors = varia_default_colors();
 	varia_define_color_annotations( $default_colors );
-	if( $default_colors['tertiary'] ) {
+	if ( $default_colors['tertiary'] ) {
 		$has_tertiary_color = true;
 	}
 }
 
-$light = array(
+$light  = array(
 	'#FFFFFF',
 	'#1D1E1E',
 	'#C8133E',
@@ -189,29 +190,29 @@ $medium = array(
 	'#35845D',
 	'#233252',
 );
-$dark = array(
+$dark   = array(
 	'#1F2527',
 	'#FFFFFF',
 	'#9FD3E8',
 	'#FBE6AA',
 );
-if($has_tertiary_color) {
-	$light[] = '#F9F9F9';
+if ( $has_tertiary_color ) {
+	$light[]  = '#F9F9F9';
 	$medium[] = '#F9F9F9';
-	$dark[] = '#364043';
+	$dark[]   = '#364043';
 }
 add_color_palette(
-	$light, 
+	$light,
 	/* translators: This is the name for a color scheme */
 	'Light'
 );
 add_color_palette(
-	$medium, 
+	$medium,
 	/* translators: This is the name for a color scheme */
 	'Medium'
 );
 add_color_palette(
-	$dark, 
+	$dark,
 	/* translators: This is the name for a color scheme */
 	'Dark'
 );

varia/sass/abstracts/_color-variables.scss

@@ -5,6 +5,7 @@ $color-variables: (
 		"primary": (
 			"default": var(--wp--preset--color--primary),
 			"hover": var(--wp--preset--color--primary-hover),
+			"dark": var(--wp--preset--color--primary-dark),
 		),
 		"secondary": (
 			"default": var(--wp--preset--color--secondary),
@@ -36,4 +37,4 @@ $color-variables: (
 		"white": var(--wp--preset--color--white),
 	)
 
-);
+);