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

refactor(design): tone down card corner-light gradients to ~55% intensity #118

Merged
varutasu merged 1 commit from tone-down-card-corner-lights into main 2026-06-04 15:06:25 -04:00
Conversation 3 Commits 1 Files changed 1 +42 -7
1 changed files with 42 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit dc7b387309 - Show all commits

49
styles/globals.css
View file

@ -365,9 +365,29 @@ body {
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). */
from either light source).
Two intensity tiers (2026-06-04 refinement, operator feedback
after the original tokens went out — "reduce the vibrancy of
the border gradients on the cards"):
1. `--corner-light-{warm,cool}` (full intensity) — used by
the floating chrome chips (sidebar nav, top header) where
the catch-light SHOULD be the primary visual cue that the
element is a distinct floating surface responding to the
background light sources. Consumed via inline `boxShadow`
in `components/Layout.js` and `components/ui/TopSearchBar.js`.
2. `--corner-light-{warm,cool}-subtle` — used by `.glass-panel`
and `.glass-panel-strong` (data cards: stat cards, deck
cards, list cards, modals, dropdowns). These surfaces are
numerous and tile densely; at full intensity the catch
lights compete with the chrome and overwhelm the page.
Roughly 55% of the full-intensity alpha. */
--corner-light-warm: rgba(255, 110, 0, 0.50);
--corner-light-cool: rgba(99, 102, 241, 0.38);
--corner-light-warm-subtle: rgba(255, 110, 0, 0.28);
--corner-light-cool-subtle: rgba(99, 102, 241, 0.20);
--chip-border-base: linear-gradient(
135deg,
rgba(255, 255, 255, 0.14) 0%,
@ -404,9 +424,17 @@ body {
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. */
because the deep canvas absorbs whites more readily.
The `-subtle` variants (used by `.glass-panel*` data cards
per the operator's "reduce the vibrancy" feedback) sit at
roughly 55% of the full-intensity alpha — slightly higher
proportionally than the light theme because dark substrates
swallow chromatic content. */
--corner-light-warm: rgba(255, 130, 30, 0.68);
--corner-light-cool: rgba(139, 92, 246, 0.58);
--corner-light-warm-subtle: rgba(255, 130, 30, 0.38);
--corner-light-cool-subtle: rgba(139, 92, 246, 0.32);
--chip-border-base: linear-gradient(
135deg,
rgba(255, 255, 255, 0.10) 0%,
@ -790,14 +818,21 @@ body {
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"). */
feedback ("reduce those box shadows quite a bit").
`.glass-panel*` uses the SUBTLE corner-light variants (about 55%
of the full-intensity alpha used by the floating chrome chips in
Layout / TopSearchBar). Data cards tile densely, so at full
intensity the catch lights compete with the chrome and overwhelm
the page (2026-06-04 operator feedback: "reduce the vibrancy of
the border gradients on the cards"). */
.glass-panel {
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%)
radial-gradient(at 0% 100%, var(--corner-light-warm-subtle) 0%, transparent 42%)
border-box,
radial-gradient(at 100% 0%, var(--corner-light-cool) 0%, transparent 42%)
radial-gradient(at 100% 0%, var(--corner-light-cool-subtle) 0%, transparent 42%)
border-box,
var(--chip-border-base) border-box;
border: 1px solid transparent;
@ -811,9 +846,9 @@ body {
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%)
radial-gradient(at 0% 100%, var(--corner-light-warm-subtle) 0%, transparent 42%)
border-box,
radial-gradient(at 100% 0%, var(--corner-light-cool) 0%, transparent 42%)
radial-gradient(at 100% 0%, var(--corner-light-cool-subtle) 0%, transparent 42%)
border-box,
var(--chip-border-base) border-box;
border: 1px solid transparent;