refactor(nexus): apply Task 1 code-quality fixes to IconRail (phase 8)

Addresses two Important findings from the Task 1 code-quality review:

1. Swap literal #faff69 hex for the text-primary / bg-primary token
   (4 sites). The --primary CSS variable is already wired to volt via
   MIGRATION-PLAN.md phases 1-3, and 50+ existing files use the token.
   The original Task 1 commit landed on literal hex as a self-
   documenting placeholder; moving to the token aligns with the rest
   of the codebase and makes theme swaps a single-file change.

2. Add focus-visible styles to the Nexus mark link and each
   DestinationLink. Previously the component relied on browser-default
   outline, which on pure-black canvas + volt icons is both off-palette
   and visually weak. Now uses a volt ring with background offset for
   clear keyboard focus indication.

No behavior change. All 7 IconRail tests still pass.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nexus Dev 2026-04-11 11:01:17 +00:00
parent efbd1e451e
commit 9c1525a0f9

View file

@ -90,7 +90,7 @@ export function IconRail({ companyPrefix }: IconRailProps) {
<Link
to={companyPrefix ? `/${companyPrefix}/assistant` : "/"}
aria-label="Nexus home"
className="mb-4 flex h-8 w-8 items-center justify-center rounded-[4px] text-[#faff69]"
className="mb-4 flex h-8 w-8 items-center justify-center rounded-[4px] text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
>
<NexusMark className="h-5 w-5" />
</Link>
@ -140,7 +140,8 @@ function DestinationLink({
className={cn(
"flex h-10 w-10 items-center justify-center rounded-[4px]",
"transition-colors duration-100 ease-out",
active ? "text-[#faff69]" : "text-muted-foreground hover:text-[#faff69]",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
active ? "text-primary" : "text-muted-foreground hover:text-primary",
)}
>
<Icon className="h-5 w-5" strokeWidth={1.5} />
@ -149,7 +150,7 @@ function DestinationLink({
{active && (
<span
aria-hidden="true"
className="absolute right-0 top-1/2 h-5 w-[2px] -translate-y-1/2 bg-[#faff69]"
className="absolute right-0 top-1/2 h-5 w-[2px] -translate-y-1/2 bg-primary"
/>
)}
</li>