swarm-ui: neon glow on panel titles + the active nav tab
Ports the subtle text-shadow glow @hive/agent's and the dashboard's own headline rule already use (both independently converged on `text-shadow: 0 0 Npx color-mix(color, transparent)`), not their whole uppercase+letter-spacing headline typography -- that's those UIs' own look, swarm-ui never adopted it and this issue only asked for the glow. - Panel titles: `currentColor`-based, since a panel title has no one fixed accent (some are dynamic, e.g. an agent's own name) -- a fixed --purple glow on plain --fg text would read as a mismatched halo. - Active nav tab: each item's own `accent` (NAV_ITEMS), the same value its underline already uses, so the glow and the underline read as one accent rather than two that happen to agree.
This commit is contained in:
parent
16f86d24e7
commit
fefeaecbbf
2 changed files with 24 additions and 0 deletions
|
|
@ -98,11 +98,13 @@ function NavLink({
|
|||
href,
|
||||
label,
|
||||
active,
|
||||
accent,
|
||||
textRef,
|
||||
}: {
|
||||
href: string;
|
||||
label: string;
|
||||
active: boolean;
|
||||
accent: string;
|
||||
textRef: (el: HTMLSpanElement | null) => void;
|
||||
}) {
|
||||
return (
|
||||
|
|
@ -115,6 +117,17 @@ function NavLink({
|
|||
<span
|
||||
ref={textRef}
|
||||
class={"shell-nav-link-text" + (active ? " shell-nav-link-active" : "")}
|
||||
// Inline, not a CSS rule: the glow colour is this item's own
|
||||
// `accent` (NAV_ITEMS), a different value per nav item, the
|
||||
// same reason `.shell-nav-indicator`'s own colour is set this
|
||||
// way rather than in Shell.css.
|
||||
style={
|
||||
active
|
||||
? {
|
||||
textShadow: `0 0 8px color-mix(in srgb, ${accent} 45%, transparent)`,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
|
|
@ -277,6 +290,7 @@ export function Shell({ children }: { children: ComponentChildren }) {
|
|||
href={item.href}
|
||||
label={item.label}
|
||||
active={item.href === location}
|
||||
accent={item.accent}
|
||||
textRef={(el) => {
|
||||
textRefs.current[item.href] = el;
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,16 @@
|
|||
margin: 0;
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
/* Same subtle neon-glow recipe agent.css/dashboard's own headline
|
||||
rules use (`text-shadow: 0 0 Npx color-mix(color, transparent)`) —
|
||||
`currentColor`, not a fixed `--purple` like those two, since panel
|
||||
titles don't carry one fixed accent (some are dynamic, e.g. an
|
||||
agent's own name) and forcing one on plain `--fg` text would read
|
||||
as a stray mismatched halo rather than a glow. Deliberately not
|
||||
porting those UIs' uppercase+letter-spacing headline treatment
|
||||
alongside it — that's their own typographic language, not part of
|
||||
"the glow effect" itself. */
|
||||
text-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
|
||||
}
|
||||
.ui-panel-icon {
|
||||
font-size: 1.2em;
|
||||
|
|
|
|||
Loading…
Reference in a new issue