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:
parent
a5584d0fcd
commit
daabb4fe6a
2 changed files with 31 additions and 1 deletions
|
|
@ -30,8 +30,28 @@
|
||||||
}
|
}
|
||||||
.shell-brand {
|
.shell-brand {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
/* Base colour only — Shell.tsx overrides it inline to the same
|
||||||
|
currently-active-tab accent `.shell-nav-indicator` uses (falling
|
||||||
|
back to this `--purple` before the first measurement lands, which
|
||||||
|
is also the "hives" default route's own accent, so there's no
|
||||||
|
visible mismatch at first paint). Transition lives here, same
|
||||||
|
140ms hop cadence + the same three-rule motion guard as the
|
||||||
|
indicator, so this and the indicator read as one thing changing,
|
||||||
|
not two independently-synced ones. */
|
||||||
color: var(--purple);
|
color: var(--purple);
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
|
transition: color 140ms ease;
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.shell-brand {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:root[data-motion='reduce'] .shell-brand {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
:root[data-motion='allow'] .shell-brand {
|
||||||
|
transition: color 140ms ease;
|
||||||
}
|
}
|
||||||
.shell-nav {
|
.shell-nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,8 @@
|
||||||
// through the existing base16 chromatic slots (`NAV_ITEMS`' `accent`
|
// through the existing base16 chromatic slots (`NAV_ITEMS`' `accent`
|
||||||
// field), not a continuous hue rotation — everything here still
|
// field), not a continuous hue rotation — everything here still
|
||||||
// derives from base16, same rule the rest of the palette follows.
|
// 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 { useEffect, useRef, useState } from 'preact/hooks';
|
||||||
import type { ComponentChildren } from 'preact';
|
import type { ComponentChildren } from 'preact';
|
||||||
import { Link, useLocation } from 'wouter-preact';
|
import { Link, useLocation } from 'wouter-preact';
|
||||||
|
|
@ -218,10 +220,18 @@ export function Shell({ children }: { children: ComponentChildren }) {
|
||||||
document.title = brand;
|
document.title = brand;
|
||||||
}, [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 (
|
return (
|
||||||
<div class="shell">
|
<div class="shell">
|
||||||
<header class="shell-header">
|
<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 class="shell-nav" ref={navRef}>
|
||||||
{NAV_ITEMS.map((item) => (
|
{NAV_ITEMS.map((item) => (
|
||||||
<NavLink
|
<NavLink
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue