Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e1858b277a | ||
|
|
fefeaecbbf |
2 changed files with 36 additions and 1 deletions
|
|
@ -98,11 +98,13 @@ function NavLink({
|
||||||
href,
|
href,
|
||||||
label,
|
label,
|
||||||
active,
|
active,
|
||||||
|
accent,
|
||||||
textRef,
|
textRef,
|
||||||
}: {
|
}: {
|
||||||
href: string;
|
href: string;
|
||||||
label: string;
|
label: string;
|
||||||
active: boolean;
|
active: boolean;
|
||||||
|
accent: string;
|
||||||
textRef: (el: HTMLSpanElement | null) => void;
|
textRef: (el: HTMLSpanElement | null) => void;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
|
|
@ -115,6 +117,17 @@ function NavLink({
|
||||||
<span
|
<span
|
||||||
ref={textRef}
|
ref={textRef}
|
||||||
class={"shell-nav-link-text" + (active ? " shell-nav-link-active" : "")}
|
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}
|
{label}
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -267,7 +280,18 @@ export function Shell({ children }: { children: ComponentChildren }) {
|
||||||
return (
|
return (
|
||||||
<div class="shell">
|
<div class="shell">
|
||||||
<header class="shell-header">
|
<header class="shell-header">
|
||||||
<span class="shell-brand" style={{ color: navAccent }}>
|
<span
|
||||||
|
class="shell-brand"
|
||||||
|
// Same glow recipe as the active nav tab / panel titles, riding
|
||||||
|
// `navAccent` — the same value `color` already uses here — so
|
||||||
|
// the brand's glow tracks the identical hop sequence as its own
|
||||||
|
// text colour instead of introducing a second, disagreeing
|
||||||
|
// accent source.
|
||||||
|
style={{
|
||||||
|
color: navAccent,
|
||||||
|
textShadow: `0 0 8px color-mix(in srgb, ${navAccent} 45%, transparent)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
{brand}
|
{brand}
|
||||||
</span>
|
</span>
|
||||||
<nav class="shell-nav" ref={navRef}>
|
<nav class="shell-nav" ref={navRef}>
|
||||||
|
|
@ -277,6 +301,7 @@ export function Shell({ children }: { children: ComponentChildren }) {
|
||||||
href={item.href}
|
href={item.href}
|
||||||
label={item.label}
|
label={item.label}
|
||||||
active={item.href === location}
|
active={item.href === location}
|
||||||
|
accent={item.accent}
|
||||||
textRef={(el) => {
|
textRef={(el) => {
|
||||||
textRefs.current[item.href] = el;
|
textRefs.current[item.href] = el;
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,16 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
font-weight: 600;
|
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 {
|
.ui-panel-icon {
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue