What problem does this address?

Currently the Navigation block implements custom controls for all aspects of color including:

• Text
• Background
• Submenu and overlay text
• Submenu and overlay background

However these are used in a non-standard way which causes confusion and holds the potential for bugs.

The key problems are:

• The controls are custom to the block and non-standard. Therefore the block will not inherit any future enhancements applied to the standardised color controls and the styling mechanics are likely to be inconsistent with other blocks.
• Most items in a Navigation are links but the control is designed for Text color. Currently the block uses the CSS cascade to implicitly set the link color on the item (via color: inherit). However this is vulnerable to being overriden by Link styles coming from ancestor blocks using global styles.
• Submenu and overlay styles are conflated meaning it is impossible to style these two aspects separately.

What is your proposed solution?

As the block has been around for some time, these problems are not trivial to solve. Some suggestions include:

• Decouple Submenu and Overlay color controls and provide these separately in order to afford great control over what are in fact two distinct pieces of block UI.
• Add Link support for the separate Submenu and Overlay Menu controls. Currently we only have Text and Background.
• Update the Navigation block controls to use standardised controls for Text, Background and Link via Block Supports. This will involve separating the Submenu and Overlay menu color controls from the other controls.