Build an array with CSS classes and inline styles defining the colors
which will be applied to the pages markup in the front-end when it is a descendant of navigation.

function block_core_page_list_build_css_colors( $attributes, $context ) {
	$colors = array(
		'css_classes'           => array(),
		'inline_styles'         => '',
		'overlay_css_classes'   => array(),
		'overlay_inline_styles' => '',
	);

	// Text color.
	$has_named_text_color  = array_key_exists( 'textColor', $context );
	$has_picked_text_color = array_key_exists( 'customTextColor', $context );
	$has_custom_text_color = isset( $context['style']['color']['text'] );

	// If has text color.
	if ( $has_custom_text_color || $has_picked_text_color || $has_named_text_color ) {
		// Add has-text-color class.
		$colors['css_classes'][] = 'has-text-color';
	}

	if ( $has_named_text_color ) {
		// Add the color class.
		$colors['css_classes'][] = sprintf( 'has-%s-color', _wp_to_kebab_case( $context['textColor'] ) );
	} elseif ( $has_picked_text_color ) {
		$colors['inline_styles'] .= sprintf( 'color: %s;', $context['customTextColor'] );
	} elseif ( $has_custom_text_color ) {
		// Add the custom color inline style.
		$colors['inline_styles'] .= sprintf( 'color: %s;', $context['style']['color']['text'] );
	}

	// Background color.
	$has_named_background_color  = array_key_exists( 'backgroundColor', $context );
	$has_picked_background_color = array_key_exists( 'customBackgroundColor', $context );
	$has_custom_background_color = isset( $context['style']['color']['background'] );

	// If has background color.
	if ( $has_custom_background_color || $has_picked_background_color || $has_named_background_color ) {
		// Add has-background class.
		$colors['css_classes'][] = 'has-background';
	}

	if ( $has_named_background_color ) {
		// Add the background-color class.
		$colors['css_classes'][] = sprintf( 'has-%s-background-color', _wp_to_kebab_case( $context['backgroundColor'] ) );
	} elseif ( $has_picked_background_color ) {
		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['customBackgroundColor'] );
	} elseif ( $has_custom_background_color ) {
		// Add the custom background-color inline style.
		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['style']['color']['background'] );
	}

	// Overlay text color.
	$has_named_overlay_text_color  = array_key_exists( 'overlayTextColor', $context );
	$has_picked_overlay_text_color = array_key_exists( 'customOverlayTextColor', $context );

	// If it has a text color.
	if ( $has_named_overlay_text_color || $has_picked_overlay_text_color ) {
		$colors['overlay_css_classes'][] = 'has-text-color';
	}

	// Give overlay colors priority, fall back to Navigation block colors, then global styles.
	if ( $has_named_overlay_text_color ) {
		$colors['overlay_css_classes'][] = sprintf( 'has-%s-color', _wp_to_kebab_case( $context['overlayTextColor'] ) );
	} elseif ( $has_picked_overlay_text_color ) {
		$colors['overlay_inline_styles'] .= sprintf( 'color: %s;', $context['customOverlayTextColor'] );
	}

	// Overlay background colors.
	$has_named_overlay_background_color  = array_key_exists( 'overlayBackgroundColor', $context );
	$has_picked_overlay_background_color = array_key_exists( 'customOverlayBackgroundColor', $context );

	// If has background color.
	if ( $has_named_overlay_background_color || $has_picked_overlay_background_color ) {
		$colors['overlay_css_classes'][] = 'has-background';
	}

	if ( $has_named_overlay_background_color ) {
		$colors['overlay_css_classes'][] = sprintf( 'has-%s-background-color', _wp_to_kebab_case( $context['overlayBackgroundColor'] ) );
	} elseif ( $has_picked_overlay_background_color ) {
		$colors['overlay_inline_styles'] .= sprintf( 'background-color: %s;', $context['customOverlayBackgroundColor'] );
	}

	return $colors;
}