Make it possible to customize submenus in Blockbase (#4985)

blockbase/assets/ponyfill.css

@@ -451,8 +451,12 @@ ol {
 }
 
 .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
-	background-color: var(--wp--custom--color--background);
-	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
+	background-color: var(--wp--custom--navigation--submenu--color--background);
+	border: var(--wp--custom--navigation--submenu--border--width) var(--wp--custom--navigation--submenu--border--style) var(--wp--custom--navigation--submenu--border--color);
+}
+
+.wp-block-navigation .has-child .wp-block-navigation__submenu-container a {
+	color: var(--wp--custom--navigation--submenu--color--text);
 }
 
 .wp-block-navigation.is-responsive:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {

blockbase/sass/blocks/_navigation.scss

@@ -2,8 +2,12 @@
 .wp-block-navigation {
 	// See https://github.com/WordPress/gutenberg/issues/34648
 	.has-child .wp-block-navigation__submenu-container {
-		background-color: var(--wp--custom--color--background);
-		border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
+		background-color: var(--wp--custom--navigation--submenu--color--background);
+		border: var(--wp--custom--navigation--submenu--border--width) var(--wp--custom--navigation--submenu--border--style) var(--wp--custom--navigation--submenu--border--color);
+
+		a {
+			color: var(--wp--custom--navigation--submenu--color--text);
+		}
 	}
 	&.is-responsive {
 		&:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {

blockbase/theme.json

@@ -241,6 +241,20 @@
 				"horizontal": "min(30px, 5vw)",
 				"vertical": "min(30px, 5vw)"
 			},
+			"navigation": {
+				"submenu": {
+					"border": {
+						"color": "var(--wp--preset--color--primary)",
+						"radius": "var(--wp--custom--form--border--radius)",
+						"style": "var(--wp--custom--form--border--style)",
+						"width": "var(--wp--custom--form--border--width)"
+					},
+					"color": {
+						"background": "var(--wp--custom--color--background)",
+						"text": "var(--wp--preset--color--foreground)"
+					}
+				}
+			},
 			"paragraph": {
 				"dropcap": {
 					"margin": ".1em .1em 0 0",