From 032b86b2323ab53089ef35c96b5807ad6bf28d9d Mon Sep 17 00:00:00 2001 From: Randall Stillwell Date: Thu, 4 Jun 2026 14:16:36 -0500 Subject: [PATCH] feat(GlassSurface): add cornerLights prop (subtle | chrome | none) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Brief 1 of unify-glass-panel-surfaces convoy. Adds a `cornerLights` prop to the primitive so corner catch-lights compose into every consumer (, , landing feature cards) by default — no per-consumer migration needed. API: cornerLights: 'subtle' (default) | 'chrome' | 'none' 'subtle' → 4-layer background using --corner-light-warm-subtle / --corner-light-cool-subtle (matches .glass-panel-strong post-PR #118; appropriate for most data surfaces). 'chrome' → same recipe with the full-intensity --corner-light-warm / --corner-light-cool tokens (matches the Layout sidebar nav-chip and TopSearchBar header treatments). 'none' → today's pre-Brief-1 behavior. Single-layer background: var(--glass-surface-{tint}); no transparent border, no corner radials. Escape hatch for GPU-budget-constrained tiles that legitimately must skip the gradient-border treatment. Composition recipe (verbatim mirror of styles/globals.css's .glass-panel-strong block post-PR #118): linear-gradient(, ) padding-box, radial-gradient(at 0% 100%, 0%, transparent 42%) border-box, radial-gradient(at 100% 0%, 0%, transparent 42%) border-box, var(--chip-border-base) border-box Paired with `border: 1px solid transparent` so the border-box gradients render through the border. For cornerLights='none', the border declaration is omitted entirely — preserves today's box-model exactly. Other props (`tint`, `blur`, `rim`, `elevation`, `as`, `style`, `className`) and the `...style` LAST-wins merge order are unchanged. Test additions (test/components/ui-primitives.test.js, +49 lines): - cornerLights='subtle' (default): asserts --corner-light-*-subtle tokens, padding-box/border-box layers, --chip-border-base, and `border: 1px solid transparent` all present in the rendered inline style attribute. - cornerLights='chrome': asserts the full-intensity tokens (NOT the -subtle variants); same border declaration. - cornerLights='none': asserts single-layer `background: var(--glass-surface-mid)`, no corner-light tokens, no padding-box, no --chip-border-base, no border declaration. Verification: - npm run lint passes (1 pre-existing unrelated warning). - npm run test:run: 116/116 tests pass (was 113; +3 GlassSurface assertions). Ripple effect (intentional, per architect plan): , , and the landing-page feature cards all delegate to . Defaulting to cornerLights='subtle' means each of them now renders with corner catch-lights without any per-consumer edit. The visual-diff baseline refresh is the expected side effect; queue on Linux per AGENTS.md § Testing before Brief 3 + Brief 4 dispatch. Acceptance criteria from .convoys/unify-glass-panel-surfaces/brief-1-upgrade-glass-surface-primitive.md all met. No consumer migrations in this PR. Co-authored-by: Cursor --- components/ui/GlassSurface.js | 30 +++++++++++++++- test/components/ui-primitives.test.js | 49 +++++++++++++++++++++++++++ 2 files changed, 78 insertions(+), 1 deletion(-) diff --git a/components/ui/GlassSurface.js b/components/ui/GlassSurface.js index 5029b32..ebd39be 100644 --- a/components/ui/GlassSurface.js +++ b/components/ui/GlassSurface.js @@ -14,6 +14,32 @@ const ELEVATION_SHADOWS = { pronounced: ['var(--elevation-pronounced)'], }; +const CORNER_LIGHT_TOKENS = { + subtle: { + warm: 'var(--corner-light-warm-subtle)', + cool: 'var(--corner-light-cool-subtle)', + }, + chrome: { + warm: 'var(--corner-light-warm)', + cool: 'var(--corner-light-cool)', + }, +}; + +function composeBackground(tint, cornerLights) { + const fill = `var(--glass-surface-${tint})`; + if (cornerLights === 'none') { + return fill; + } + const tokens = + CORNER_LIGHT_TOKENS[cornerLights] ?? CORNER_LIGHT_TOKENS.subtle; + return [ + `linear-gradient(${fill}, ${fill}) padding-box`, + `radial-gradient(at 0% 100%, ${tokens.warm} 0%, transparent 42%) border-box`, + `radial-gradient(at 100% 0%, ${tokens.cool} 0%, transparent 42%) border-box`, + 'var(--chip-border-base) border-box', + ].join(', '); +} + const GlassSurface = forwardRef(function GlassSurface( { as: As = 'div', @@ -21,6 +47,7 @@ const GlassSurface = forwardRef(function GlassSurface( rim = 'subtle', elevation = 'flat', blur = 'mid', + cornerLights = 'subtle', className, style, children, @@ -33,10 +60,11 @@ const GlassSurface = forwardRef(function GlassSurface( ...(ELEVATION_SHADOWS[elevation] ?? []), ]; const composedStyle = { - background: `var(--glass-surface-${tint})`, + background: composeBackground(tint, cornerLights), backdropFilter: `blur(var(--glass-blur-${blur})) saturate(var(--glass-saturate))`, WebkitBackdropFilter: `blur(var(--glass-blur-${blur})) saturate(var(--glass-saturate))`, boxShadow: shadowParts.length > 0 ? shadowParts.join(', ') : undefined, + ...(cornerLights !== 'none' ? { border: '1px solid transparent' } : {}), ...style, }; diff --git a/test/components/ui-primitives.test.js b/test/components/ui-primitives.test.js index 9e34914..b7f2681 100644 --- a/test/components/ui-primitives.test.js +++ b/test/components/ui-primitives.test.js @@ -2,6 +2,7 @@ import { describe, it, expect, vi, afterEach } from 'vitest'; import { render, screen, fireEvent, cleanup } from '@testing-library/react'; import { Button, Input, SearchBar } from '../../components/ui'; +import GlassSurface from '../../components/ui/GlassSurface'; describe('Button', () => { afterEach(() => cleanup()); @@ -116,3 +117,51 @@ describe('SearchBar', () => { expect(screen.queryByRole('button', { name: /clear/i })).toBeNull(); }); }); + +describe('GlassSurface — cornerLights prop', () => { + afterEach(() => cleanup()); + + it("defaults to cornerLights='subtle' — uses --corner-light-*-subtle tokens and adds a transparent border", () => { + const { container } = render( + content + ); + const el = container.querySelector('[data-testid="surface"]'); + const styleAttr = el.getAttribute('style') ?? ''; + expect(styleAttr).toContain('--corner-light-warm-subtle'); + expect(styleAttr).toContain('--corner-light-cool-subtle'); + expect(styleAttr).toContain('--chip-border-base'); + expect(styleAttr).toContain('padding-box'); + expect(styleAttr).toContain('border-box'); + expect(styleAttr).toMatch(/border:\s*1px solid transparent/); + }); + + it("cornerLights='chrome' uses the full-intensity --corner-light-* tokens (not the -subtle variants)", () => { + const { container } = render( + + content + + ); + const el = container.querySelector('[data-testid="surface"]'); + const styleAttr = el.getAttribute('style') ?? ''; + expect(styleAttr).toContain('--corner-light-warm)'); + expect(styleAttr).toContain('--corner-light-cool)'); + expect(styleAttr).not.toContain('--corner-light-warm-subtle'); + expect(styleAttr).not.toContain('--corner-light-cool-subtle'); + expect(styleAttr).toMatch(/border:\s*1px solid transparent/); + }); + + it("cornerLights='none' emits a single-layer background and no border declaration", () => { + const { container } = render( + + content + + ); + const el = container.querySelector('[data-testid="surface"]'); + const styleAttr = el.getAttribute('style') ?? ''; + expect(styleAttr).toContain('background: var(--glass-surface-mid)'); + expect(styleAttr).not.toContain('--corner-light'); + expect(styleAttr).not.toContain('padding-box'); + expect(styleAttr).not.toContain('--chip-border-base'); + expect(styleAttr).not.toMatch(/border:\s*1px solid/); + }); +}); -- 2.45.2