From dc7b3873093332469499537ad3914b96d84ea14f Mon Sep 17 00:00:00 2001 From: Randall Stillwell Date: Thu, 4 Jun 2026 13:18:16 -0500 Subject: [PATCH] refactor(design): tone down card corner-light gradients to ~55% intensity MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Operator feedback after the design-sweep PR went out: the corner-light gradients on data cards (the `.glass-panel` / `.glass-panel-strong` class) read too vibrant once the pattern was applied broadly to deck cards, stat cards, list cards, modals, dropdowns, etc. The same intensity worked fine on the floating chrome chips (sidebar nav, top header) because there are only two of those per viewport and they SHOULD anchor the page visually as the surfaces "responding" to the background light sources. Data cards tile densely; at full intensity they compete with the chrome and the catch-lights become visual noise instead of an environmental cue. Two intensity tiers now live in `styles/globals.css`: 1. `--corner-light-{warm,cool}` (full intensity, unchanged) — used by the floating chrome chips via inline `boxShadow` in `components/Layout.js` and `components/ui/TopSearchBar.js`. 2. `--corner-light-{warm,cool}-subtle` (NEW, ~55% of full alpha) — used by `.glass-panel` and `.glass-panel-strong` for data cards. Alpha values: | Token | Light theme | Dark theme | |----------------------------------|-------------|------------| | `--corner-light-warm` | 0.50 | 0.68 | | `--corner-light-cool` | 0.38 | 0.58 | | `--corner-light-warm-subtle` | 0.28 | 0.38 | | `--corner-light-cool-subtle` | 0.20 | 0.32 | No other surfaces changed, no token names removed (so any custom inline `boxShadow` styles in other components continue to compile). The hearth body gradient + `--chip-border-base` faint white tint are untouched. Verified: build + lint + 113/113 vitest tests pass. Co-authored-by: Cursor --- styles/globals.css | 49 +++++++++++++++++++++++++++++++++++++++------- 1 file changed, 42 insertions(+), 7 deletions(-) diff --git a/styles/globals.css b/styles/globals.css index a0b3fe3..f1c8176 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -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; -- 2.45.2