Customisable hover and active styling for navigation menu links

[ConorWebb96]

Description

This PR adds support for configuring navigation link hover and active styles from the app’s Navigation settings panel. It introduces global navigation-level controls for link-state text/background colours and applies them to navigation links.

Addresses

• Customisable hover and active styling for navigation menu links #18172

Screenshots

Launchcontrol

This PR makes it easier for people to style menu links in app navigation.

Before, link hover/active styles were mostly fixed and hard to customise. Now, in the Navigation settings, you can pick:

• hover text colour
• hover background colour
• active text colour
• active background colour

Cleaned up the settings UI by putting these into a separate “Link states” section so it feels less crowded.

[cubic-dev-ai]

1 issue found across 4 files

Confidence score: 3/5

• There is a concrete user-facing risk in packages/client/src/components/app/NavItem.svelte: active top-nav sublinks may fall back to --navTextColor, which can reduce contrast on the light dropdown menu and hurt readability/accessibility.
• Given the issue’s medium severity (6/10) and high confidence (9/10), this sits in a moderate-risk zone rather than a merge-blocking one.
• Pay close attention to packages/client/src/components/app/NavItem.svelte - align the top-nav active sublink fallback with the normal theme link color to avoid contrast regressions.

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/client/src/components/app/NavItem.svelte">

<violation number="1" location="packages/client/src/components/app/NavItem.svelte:202">
P2: Top-nav active sublinks fallback to `--navTextColor`, which can break contrast against the light dropdown menu; keep the top-nav fallback aligned with the normal theme link color.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review, or fix all with cubic.}