Watch
0
0
Fork
You've already forked hyperhive
0

swarm-ui: brand text follows the nav accent too

The brand/logo text now rides the same accent value the nav underline
uses, including mid-sweep, so the header reads as one accent changing
rather than the underline alone — per mara's review comment.
This commit is contained in:
iris 2026-08-19 19:26:04 +02:00 • committed by mara
commit daabb4fe6a
2 changed files with 31 additions and 1 deletions

View file

@ -24,6 +24,8 @@
// through the existing base16 chromatic slots (`NAV_ITEMS`' `accent`
// field), not a continuous hue rotation — everything here still
// derives from base16, same rule the rest of the palette follows.
// `.shell-brand` rides the identical accent value (`navAccent` below),
// so the header reads as one accent changing, not the underline alone.
import { useEffect, useRef, useState } from 'preact/hooks';
import type { ComponentChildren } from 'preact';
import { Link, useLocation } from 'wouter-preact';
@ -218,10 +220,18 @@ export function Shell({ children }: { children: ComponentChildren }) {
document.title = brand;
}, [brand]);
// Same value the indicator itself is drawn with, including mid-sweep —
// the brand text rides the identical hop sequence rather than
// computing its own, so "the header's accent" reads as one thing
// changing, not two things that happen to agree at rest.
const navAccent = indicator?.accent ?? 'var(--purple)';
return (
<div class="shell">
<header class="shell-header">
<span class="shell-brand">{brand}</span>
<span class="shell-brand" style={{ color: navAccent }}>
{brand}
</span>
<nav class="shell-nav" ref={navRef}>
{NAV_ITEMS.map((item) => (
<NavLink