feat(GlassSurface): add cornerLights prop (subtle | chrome | none) (Brief 1) #123

Merged

varutasu merged 1 commit from brief-1-glass-surface-corner-lights into main

2026-06-04 16:30:32 -04:00

varutasu commented

2026-06-04 15:17:04 -04:00

(Migrated from github.com)

Summary

Brief 1 of unify-glass-panel-surfaces — the highest-leverage brief in the convoy. Adds a cornerLights prop to the <GlassSurface> primitive so corner catch-lights compose into every downstream consumer (<Modal>, <StatCard>, landing feature cards) by default. No per-consumer migration needed.

API

<GlassSurface
  cornerLights="subtle"   // default — matches .glass-panel-strong (PR #118 subtle tier)
  // cornerLights="chrome" // full-intensity tokens (matches Layout sidebar nav-chip)
  // cornerLights="none"   // escape hatch — no transparent border, no radials
/>

The other props (tint, blur, rim, elevation, as, style, className) and the ...style LAST-wins merge order are unchanged.

Composition recipe

/* When cornerLights !== 'none': */
background:
  linear-gradient(<fill>, <fill>) padding-box,
  radial-gradient(at 0% 100%, <warm-token> 0%, transparent 42%) border-box,
  radial-gradient(at 100% 0%, <cool-token> 0%, transparent 42%) border-box,
  var(--chip-border-base) border-box;
border: 1px solid transparent;

Verbatim mirror of styles/globals.css's .glass-panel-strong block post-PR #118.

For cornerLights='none', the composed style is identical to today's primitive output (single-layer background: var(--glass-surface-{tint}), no border declaration).

Files changed

components/ui/GlassSurface.js — adds the prop, the CORNER_LIGHT_TOKENS map, and the composeBackground() helper.
test/components/ui-primitives.test.js — 3 new assertions, one per cornerLights value.

Net diff: +78 / -1.

Acceptance criteria

cornerLights prop accepts 'subtle' | 'chrome' | 'none'; unknown values fall back to 'subtle' (defensive ?? fallback mirrors the existing RIM_SHADOWS[rim] ?? [] pattern).
Default is 'subtle' — composes --corner-light-warm-subtle / --corner-light-cool-subtle and adds border: 1px solid transparent.
'chrome' composes the full-intensity --corner-light-warm / --corner-light-cool (NOT the -subtle variants).
'none' emits today's single-layer background with NO border declaration — preserves the box-model exactly.
tint / blur / rim / elevation / as / style / className behave exactly as before.
3 new test assertions cover all three cornerLights values.
npm run lint passes (1 pre-existing unrelated warning).
npm run test:run: 116/116 tests pass (was 113; +3 GlassSurface assertions).
No consumer migrations in this PR. (<Modal>, <StatCard>, pages/index.js feature cards UNTOUCHED.)

Ripple effect (intentional)

<Modal>, <StatCard>, and the landing feature cards delegate to <GlassSurface>. Defaulting to 'subtle' means each renders with corner catch-lights without any per-consumer edit. The Vercel preview's Screenshot diff job will fire and show the expected differences.

Visual-diff baseline refresh required after this merges — queue on Linux per AGENTS.md § Testing before Brief 3 + Brief 4 dispatch. Tracked in PR #119's plan.

Test plan

Open any modal in the preview deployment (e.g. delete confirmation on /my-cards). Verify corner catch-lights are visible on the modal panel.
Visit /dashboard. Verify the 4 StatCards each render with corner catch-lights.
Visit / (landing). Verify feature cards have corner catch-lights.
Verify all three above in BOTH light and dark theme.
Confirm <CardItem> grid mode is untouched (it does NOT use <GlassSurface> — verified during architect boot-the-brief).

Convoy: .convoys/unify-glass-panel-surfaces.md
Brief: .convoys/unify-glass-panel-surfaces/brief-1-upgrade-glass-surface-primitive.md
Architect plan: PR #119 (merged)
Token tier source: PR #118 (merged) — defines --corner-light-*-subtle tokens.
Recipe source: styles/globals.css .glass-panel-strong block — verbatim mirror.

Made with Cursor

## Summary Brief 1 of `unify-glass-panel-surfaces` — the highest-leverage brief in the convoy. Adds a `cornerLights` prop to the `<GlassSurface>` primitive so corner catch-lights compose into every downstream consumer (`<Modal>`, `<StatCard>`, landing feature cards) by default. No per-consumer migration needed. ## API ```jsx <GlassSurface cornerLights="subtle" // default — matches .glass-panel-strong (PR #118 subtle tier) // cornerLights="chrome" // full-intensity tokens (matches Layout sidebar nav-chip) // cornerLights="none" // escape hatch — no transparent border, no radials /> ``` The other props (`tint`, `blur`, `rim`, `elevation`, `as`, `style`, `className`) and the `...style` LAST-wins merge order are unchanged. ## Composition recipe ```css /* When cornerLights !== 'none': */ background: linear-gradient(<fill>, <fill>) padding-box, radial-gradient(at 0% 100%, <warm-token> 0%, transparent 42%) border-box, radial-gradient(at 100% 0%, <cool-token> 0%, transparent 42%) border-box, var(--chip-border-base) border-box; border: 1px solid transparent; ``` Verbatim mirror of `styles/globals.css`'s `.glass-panel-strong` block post-PR #118. For `cornerLights='none'`, the composed style is identical to today's primitive output (single-layer `background: var(--glass-surface-{tint})`, no border declaration). ## Files changed - `components/ui/GlassSurface.js` — adds the prop, the `CORNER_LIGHT_TOKENS` map, and the `composeBackground()` helper. - `test/components/ui-primitives.test.js` — 3 new assertions, one per `cornerLights` value. Net diff: **+78 / -1**. ## Acceptance criteria - [x] `cornerLights` prop accepts `'subtle' | 'chrome' | 'none'`; unknown values fall back to `'subtle'` (defensive `??` fallback mirrors the existing `RIM_SHADOWS[rim] ?? []` pattern). - [x] Default is `'subtle'` — composes `--corner-light-warm-subtle` / `--corner-light-cool-subtle` and adds `border: 1px solid transparent`. - [x] `'chrome'` composes the full-intensity `--corner-light-warm` / `--corner-light-cool` (NOT the `-subtle` variants). - [x] `'none'` emits today's single-layer background with NO border declaration — preserves the box-model exactly. - [x] `tint` / `blur` / `rim` / `elevation` / `as` / `style` / `className` behave exactly as before. - [x] 3 new test assertions cover all three `cornerLights` values. - [x] `npm run lint` passes (1 pre-existing unrelated warning). - [x] `npm run test:run`: **116/116 tests pass** (was 113; +3 GlassSurface assertions). - [x] No consumer migrations in this PR. (`<Modal>`, `<StatCard>`, `pages/index.js` feature cards UNTOUCHED.) ## Ripple effect (intentional) `<Modal>`, `<StatCard>`, and the landing feature cards delegate to `<GlassSurface>`. Defaulting to `'subtle'` means each renders with corner catch-lights without any per-consumer edit. The Vercel preview's `Screenshot diff` job will fire and show the expected differences. **Visual-diff baseline refresh required after this merges** — queue on Linux per AGENTS.md § Testing before Brief 3 + Brief 4 dispatch. Tracked in PR #119's plan. ## Test plan - [ ] Open any modal in the preview deployment (e.g. delete confirmation on `/my-cards`). Verify corner catch-lights are visible on the modal panel. - [ ] Visit `/dashboard`. Verify the 4 StatCards each render with corner catch-lights. - [ ] Visit `/` (landing). Verify feature cards have corner catch-lights. - [ ] Verify all three above in BOTH light and dark theme. - [ ] Confirm `<CardItem>` grid mode is untouched (it does NOT use `<GlassSurface>` — verified during architect boot-the-brief). ## Related - Convoy: `.convoys/unify-glass-panel-surfaces.md` - Brief: `.convoys/unify-glass-panel-surfaces/brief-1-upgrade-glass-surface-primitive.md` - Architect plan: PR #119 (merged) - Token tier source: PR #118 (merged) — defines `--corner-light-*-subtle` tokens. - Recipe source: `styles/globals.css` `.glass-panel-strong` block — verbatim mirror. Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-04 15:17:09 -04:00

(Migrated from github.com)

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tcg-vault	Ready	Preview, Comment	Jun 4, 2026 7:17pm

[vc]: #f4kaSTT8aT5hfEJsdhK3tMrJcUCy5Oh0G3n6ysWhqE8=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0Y2ctdmF1bHQtZ2l0LWJyaWVmLTEtZ2xhc3MtMzM5YjE4LXJhbmRhbGwtc3RpbGx3ZWxscy1wcm9qZWN0cy52ZXJjZWwuYXBwIn0sImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMvdGNnLXZhdWx0LzZ3QXFnNldLTkE3cnRvYkRpRm5kdVZYY2hBUFMiLCJwcmV2aWV3VXJsIjoidGNnLXZhdWx0LWdpdC1icmllZi0xLWdsYXNzLTMzOWIxOC1yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCJ9XSwicmVxdWVzdFJldmlld1VybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS92ZXJjZWwtYWdlbnQvcmVxdWVzdC1yZXZpZXc/b3duZXI9dmFydXRhc3UmcmVwbz10Y2ctdmF1bHQmcHI9MTIzIn0= The latest updates on your projects. Learn more about [Vercel for GitHub](https://vercel.link/github-learn-more). | Project | Deployment | Actions | Updated (UTC) | | :--- | :----- | :------ | :------ | | [tcg-vault](https://vercel.com/randall-stillwells-projects/tcg-vault) | ![Ready](https://vercel.com/static/status/ready.svg) [Ready](https://vercel.com/randall-stillwells-projects/tcg-vault/6wAqg6WKNA7rtobDiFnduVXchAPS) | [Preview](https://tcg-vault-git-brief-1-glass-339b18-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-brief-1-glass-339b18-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 7:17pm | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=123" rel="noreferrer"><picture><source media="(prefers-color-scheme: dark)" srcset="https://agents-vade-review.vercel.sh/request-review-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://agents-vade-review.vercel.sh/request-review-light.svg"><img src="https://agents-vade-review.vercel.sh/request-review-light.svg" alt="Request Review"></picture></a>

github-actions[bot] commented

2026-06-04 15:17:16 -04:00

(Migrated from github.com)

Pipeline Health

Build + CI gates

Gate	Status
Vercel build (Preview)	✅ pass
CI: Lint	✅ pass
CI: Schema map fresh	❌ skipped
Preview smoke	✅ pass
Visual diff	✅ pass

Build runs on Vercel; this CI runs lint and schema-map drift only (no duplicate build).

Role reports

Role	Status
Reviewer report	⏳ pending
A11y audit	⏳ pending
Design system audit	⏳ pending

See individual comments above for details. This rollup updates automatically.

## Pipeline Health ### Build + CI gates | Gate | Status | | --- | --- | | Vercel build (Preview) | ✅ pass | | CI: Lint | ✅ pass | | CI: Schema map fresh | ❌ skipped | | Preview smoke | ✅ pass | | Visual diff | ✅ pass | _Build runs on Vercel; this CI runs lint and schema-map drift only (no duplicate build)._ ### Role reports | Role | Status | | --- | --- | | Reviewer report | ⏳ pending | | A11y audit | ⏳ pending | | Design system audit | ⏳ pending | See individual comments above for details. This rollup updates automatically.

github-actions[bot] commented

2026-06-04 15:18:27 -04:00

(Migrated from github.com)

Visual Diff

Screenshots and diffs uploaded as artifacts: view run

If intentional changes: update snapshots locally with npx playwright test --project=visual --update-snapshots and commit.

## Visual Diff Screenshots and diffs uploaded as artifacts: [view run](https://github.com/varutasu/tcg-vault/actions/runs/26973961925) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.