rstillwell/deckhearth
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

refactor(design): move light response onto chip borders; cut directional drop shadows

Browse source 
Operator feedback 2026-06-04 (after PR #115's two-light-source pass):
"A lot of gradients happening, though I want the gradient in the
background to be the focus, and then the border gets a highlight,
perhaps, in a corner that's closest to the background gradients...
the borders are reflecting the color, not necessarily the drop
shadows behind the cards. In fact, you could probably reduce those
box shadows quite a bit. At least they shouldn't span the entire
edge of the card. Just a subtle bit in the corner."

PR #115's outer directional drop-shadows (`--edge-light-warm` /
`--edge-light-cool`) DID make the chips respond to the two light
sources but spanned the entire bottom-left + top-right edges, which
competed visually with the body gradient. This PR moves the
warm/cool response onto the chip's 1px BORDER, concentrated in the
two corners closest to the matching light sources, and cuts the
directional drop-shadows entirely (just rim-light-inner + a single
neutral elevation-ambient remain).

Technique: the modern gradient-border pattern.
  background:
    /* surface fill, clipped to padding-box */
    linear-gradient(surface, surface) padding-box,
    /* warm catch-light at bottom-left, border-box-clipped */
    radial-gradient(at 0% 100%, warm 0%, transparent 42%) border-box,
    /* cool catch-light at top-right, border-box-clipped */
    radial-gradient(at 100% 0%, cool 0%, transparent 42%) border-box,
    /* faint diagonal white tint for the rest of the rim */
    chip-border-base border-box;
  border: 1px solid transparent;

The transparent border is what exposes the border-box-clipped
gradient layers as the visible rim.

Token changes (styles/globals.css):
- Retired: --edge-light-warm, --edge-light-cool (both themes).
  These were complete box-shadow declarations with offsets spanning
  the full bottom-left + top-right edges of every chip.
- Added: --corner-light-warm, --corner-light-cool — plain RGBA
  colors for radial-gradient consumption.
    Light: 0.50 warm / 0.38 cool.
    Dark:  0.68 warm / 0.58 cool (bumped so catch-lights read
           against the deep substrate).
- Added: --chip-border-base — faint 135deg white tint so the rest
  of the rim isn't invisible (sensible chip edge far from either
  light source). Lower alpha on dark.

Application sites:
- styles/globals.css `.glass-panel` and `.glass-panel-strong` —
  updated to multi-layer background + transparent border. Picks
  up DailyEmberWidget, CommandPaletteModal popover, UserMenu
  dropdown, the logged-out sidebar Support/Theme tray, etc.
- components/Layout.js nav-chip inline style — same treatment.
- components/ui/TopSearchBar.js inline style — same treatment.

Shadow stacks across all four sites are now just:
  var(--rim-light-inner), var(--elevation-ambient)
(or elevation-pronounced for .glass-panel-strong). The body
gradient stays unchanged from PR #115 — it remains the dominant
gradient story per operator's "I want the gradient in the
background to be the focus" framing.

Tests:
- npm run test:run: 113/113
- npm run lint: 0 errors (1 pre-existing warning)
- npm run build: green

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Randall Stillwell 2026-06-04 12:29:24 -05:00
parent c5c31ba813
commit 16685a3522
3 changed files with 109 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
components/Layout.js
View file

@ -845,24 +845,26 @@ export default function Layout({ children, user = null, showSearch = false }) {
className="hidden md:flex md:flex-col md:gap-4 w-64"
aria-label="Sidebar"
>
{/* Nav chip. 2026-06-04 two-light-source pass: prepended the
two edge-light tokens so the nav chip's bottom-left and
top-right edges pick up warm + cool directional glows from
the matching corners of the body gradient — the chip
visually "responds" to the two light sources the operator
asked for. The chip is positioned at the top-left of the
viewport so it sits closer to the warm light source; that's
a coincidence of layout, not something the token reacts to,
but the warm glow does naturally read stronger on this chip
because the warm source is right there. */}
{/* Nav chip. 2026-06-04 corner-border pass: same gradient-
border technique as `.glass-panel` — the chip's fill is
clipped to padding-box, and three border-box-clipped
gradient layers expose the warm bottom-left + cool top-
right catch-lights through a 1px transparent border. The
warm/cool drop shadows that lived here through PR #115
are gone — the directional response is on the border
now, not extending into the body gradient. */}
<div
className="flex-1 flex flex-col md:rounded-3xl md:overflow-hidden min-h-0"
style={{
background: 'var(--glass-surface-mid)',
background:
'linear-gradient(var(--glass-surface-mid), var(--glass-surface-mid)) padding-box, ' +
'radial-gradient(at 0% 100%, var(--corner-light-warm) 0%, transparent 42%) border-box, ' +
'radial-gradient(at 100% 0%, var(--corner-light-cool) 0%, transparent 42%) border-box, ' +
'var(--chip-border-base) border-box',
border: '1px solid transparent',
backdropFilter: 'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))',
WebkitBackdropFilter: 'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))',
boxShadow:
'var(--edge-light-warm), var(--edge-light-cool), var(--rim-light-inner), var(--elevation-ambient)',
boxShadow: 'var(--rim-light-inner), var(--elevation-ambient)',
}}
>
<div className="p-4 h-full flex flex-col w-full">

23
components/ui/TopSearchBar.js
View file

@ -312,18 +312,21 @@ export default function TopSearchBar({
// content directly.
className="px-4 sm:px-6 py-3 flex items-center gap-3 sm:gap-4 md:rounded-2xl"
style={{
background: 'var(--glass-surface-mid)',
// 2026-06-04 corner-border pass: same gradient-border
// technique as .glass-panel — the chip's fill clipped to
// padding-box, with border-box-clipped warm bottom-left +
// cool top-right radial highlights exposed through a 1px
// transparent border. The directional outer drop shadows
// from PR #115 are gone — corner catch-lights only now.
background:
'linear-gradient(var(--glass-surface-mid), var(--glass-surface-mid)) padding-box, ' +
'radial-gradient(at 0% 100%, var(--corner-light-warm) 0%, transparent 42%) border-box, ' +
'radial-gradient(at 100% 0%, var(--corner-light-cool) 0%, transparent 42%) border-box, ' +
'var(--chip-border-base) border-box',
border: '1px solid transparent',
backdropFilter: 'blur(12px) saturate(180%)',
WebkitBackdropFilter: 'blur(12px) saturate(180%)',
// 2026-06-04 two-light-source pass: prepended edge-light
// tokens so the header's bottom-left and top-right edges
// pick up warm + cool directional glows. The header sits
// near the top-right of the viewport so the cool source
// reads stronger on it (the purple light is right above);
// the warm rim still appears on the bottom-left edge of the
// chip, just dimmer at this distance from the ember pool.
boxShadow:
'var(--edge-light-warm), var(--edge-light-cool), var(--rim-light-inner), var(--elevation-ambient)',
boxShadow: 'var(--rim-light-inner), var(--elevation-ambient)',
}}
>
{/* Search affordance — read-only-ish input that opens the

123
styles/globals.css
View file

@ -201,9 +201,10 @@ body {
/* Apply theme colors.
The hearth gradient: two diagonal light sources that the floating
chrome chips visually "respond" to via the --edge-light-warm /
--edge-light-cool design tokens (defined further down in :root /
[data-theme="dark"]).
chrome chips visually "respond" to via the --corner-light-warm /
--corner-light-cool design tokens (defined further down in :root /
[data-theme="dark"]; consumed as radial-gradient layers on each
chip's BORDER, not as outer drop shadows — see `.glass-panel`).
- Warm ember light source: bottom-left of the viewport.
- Cool purpley-blue light source: top-right of the viewport.
The base linear-gradient runs along the same 45deg diagonal between
@ -231,7 +232,7 @@ body {
),
/* Purpley-blue pool, top-right — secondary light source (replaces
the prior gold accent). Indigo→violet so the chip rims that
respond to this source via --edge-light-cool read as cool. */
respond to this source via --corner-light-cool read as cool. */
radial-gradient(
ellipse 85% 65% at 100% -8%,
rgba(99, 102, 241, 0.42) 0%,
@ -346,20 +347,32 @@ body {
--bg-secondary-rgb: 247, 243, 237;
--bg-tertiary-rgb: 240, 230, 214;
/* Two-light-source edge glow tokens (2026-06-04 operator request:
"let's have the corners or the edges of our sections respond as
if those two are light sources").
Each token is a complete box-shadow declaration with the offset
pointing toward the matching light source — the colored shadow
bleeds outward from the chip's bottom-left edge (warm) and top-
right edge (cool), reading as light catching on the rim.
Light theme alphas are softer; the dark theme override below
bumps them since the deeper substrate can absorb more saturation
before the effect over-reads. Compose into chip shadow stacks
ahead of rim-light-inner + elevation tokens so the directional
glow is the dominant edge cue. */
--edge-light-warm: -6px 6px 18px rgba(255, 110, 0, 0.16);
--edge-light-cool: 6px -6px 18px rgba(99, 102, 241, 0.12);
/* Corner-border light tokens (2026-06-04 refinement of the prior
two-light-source pass — operator feedback: "borders are
reflecting the color, not necessarily the drop shadows behind
the cards. In fact, you could probably reduce those box shadows
quite a bit. At least they shouldn't span the entire edge of
the card. Just a subtle bit in the corner.").
The prior `--edge-light-warm` / `--edge-light-cool` tokens were
complete box-shadow declarations with offsets that spanned the
entire bottom-left + top-right edges of every chip. They've
been retired. The replacement is a pair of plain RGBA colors
consumed by radial-gradient layers in the chip's BACKGROUND
(border-box-clipped) — see `.glass-panel` below — so the
warm/cool light response now reads as a corner-concentrated
highlight ON the chip's 1px border, not as an outer drop
shadow extending into the body gradient.
The `--chip-border-base` is a faint diagonal white tint that
paints under the corner gradients so the rest of the rim isn't
completely invisible (gives the chip a sensible edge even far
from either light source). */
--corner-light-warm: rgba(255, 110, 0, 0.50);
--corner-light-cool: rgba(99, 102, 241, 0.38);
--chip-border-base: linear-gradient(
135deg,
rgba(255, 255, 255, 0.14) 0%,
rgba(255, 255, 255, 0.04) 100%
);
}
/* Dark theme variables */
@ -387,12 +400,18 @@ body {
--input-text: var(--input-text-dark);
--input-placeholder: var(--input-placeholder-dark);
/* Dark-theme edge glows — alphas bumped since the deeper substrate
can take more saturation before reading as garish, and so the
"lit by ember + lit by purple" effect carries on dark theme (the
default for first-time visitors). See :root for full rationale. */
--edge-light-warm: -8px 8px 26px rgba(255, 110, 30, 0.34);
--edge-light-cool: 8px -8px 26px rgba(139, 92, 246, 0.28);
/* Dark-theme corner-border colors — alphas bumped so the warm
and cool catch lights read clearly against the deep substrate.
See :root for the full rationale on the corner-vs-drop-shadow
refinement. The base white border tint drops in alpha here
because the deep canvas absorbs whites more readily. */
--corner-light-warm: rgba(255, 130, 30, 0.68);
--corner-light-cool: rgba(139, 92, 246, 0.58);
--chip-border-base: linear-gradient(
135deg,
rgba(255, 255, 255, 0.10) 0%,
rgba(255, 255, 255, 0.02) 100%
);
}
/* Custom component styles - Fire-themed */
@ -752,35 +771,55 @@ body {
the unprefixed form; Lightning CSS's autoprefixer adds the prefix
per browserslist (ios_saf <18 still needs it). */
/* Glass panels — the canonical floating-chrome surface. 2026-06-04
two-light-source pass: `--edge-light-warm` (offset toward bottom-
left) and `--edge-light-cool` (offset toward top-right) lead the
shadow stack so every glass surface picks up the directional rim
glows from the matching corners of the body gradient. Order
matters — directional glows must paint OUTSIDE the structural
elevation shadow, so they sit at the top of the stack (CSS paints
the LAST listed shadow lowest visually, but for box-shadow the
list order doesn't matter for compositing — what matters is each
shadow's geometry. They're listed warm→cool→rim→elevation as a
readability convention). */
corner-border pass (refines the prior two-light-source pass):
the warm + cool light response now paints on the chip's 1px
border using the multi-layer background + transparent-border
technique:
1. linear-gradient(surface, surface) padding-box — the chip's
translucent fill, clipped to the padding box so it doesn't
cover the 1px border ring.
2. radial-gradient(at 0% 100%, warm) border-box — warm corner
catch-light, anchored at the chip's bottom-left.
3. radial-gradient(at 100% 0%, cool) border-box — cool corner
catch-light, anchored at the chip's top-right.
4. --chip-border-base border-box — faint diagonal white tint
under the corner gradients so the rest of the rim isn't
invisible (gives the chip a sensible edge far from either
light source).
The `border: 1px solid transparent` is what exposes those
border-box-clipped gradient layers as the visible rim.
Drop-shadow stack is now just rim-light-inner + elevation —
the directional warm/cool outer glows are gone per operator
feedback ("reduce those box shadows quite a bit"). */
.glass-panel {
background: var(--glass-surface-mid);
background:
linear-gradient(var(--glass-surface-mid), var(--glass-surface-mid))
padding-box,
radial-gradient(at 0% 100%, var(--corner-light-warm) 0%, transparent 42%)
border-box,
radial-gradient(at 100% 0%, var(--corner-light-cool) 0%, transparent 42%)
border-box,
var(--chip-border-base) border-box;
border: 1px solid transparent;
backdrop-filter: blur(12px) saturate(180%);
box-shadow:
var(--edge-light-warm),
var(--edge-light-cool),
var(--rim-light-inner),
var(--rim-light-outer),
var(--elevation-ambient);
}
.glass-panel-strong {
background: var(--glass-surface-high);
background:
linear-gradient(var(--glass-surface-high), var(--glass-surface-high))
padding-box,
radial-gradient(at 0% 100%, var(--corner-light-warm) 0%, transparent 42%)
border-box,
radial-gradient(at 100% 0%, var(--corner-light-cool) 0%, transparent 42%)
border-box,
var(--chip-border-base) border-box;
border: 1px solid transparent;
backdrop-filter: blur(20px) saturate(180%);
box-shadow:
var(--edge-light-warm),
var(--edge-light-cool),
var(--rim-light-inner),
var(--rim-light-outer),
var(--elevation-pronounced);
}