3248468a33
Brief 1 of unify-glass-panel-surfaces convoy. Adds a `cornerLights`
prop to the <GlassSurface> primitive so corner catch-lights compose
into every consumer (<Modal>, <StatCard>, 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(<fill>, <fill>) padding-box,
radial-gradient(at 0% 100%, <warm> 0%, transparent 42%) border-box,
radial-gradient(at 100% 0%, <cool> 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):
<Modal>, <StatCard>, and the landing-page feature cards all
delegate to <GlassSurface>. 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 <cursoragent@cursor.com>
78 lines
2.1 KiB
JavaScript
78 lines
2.1 KiB
JavaScript
import { forwardRef } from 'react';
|
|
|
|
const RIM_SHADOWS = {
|
|
none: [],
|
|
subtle: ['var(--rim-light-inner)', 'var(--rim-light-outer)'],
|
|
pronounced: ['var(--rim-light-inner)', 'var(--rim-light-outer)'],
|
|
'ember-subtle': ['var(--rim-light-inner)', 'var(--ember-rim-subtle)'],
|
|
'ember-pronounced': ['var(--rim-light-inner)', 'var(--ember-rim-pronounced)'],
|
|
};
|
|
|
|
const ELEVATION_SHADOWS = {
|
|
flat: [],
|
|
ambient: ['var(--elevation-ambient)'],
|
|
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',
|
|
tint = 'mid',
|
|
rim = 'subtle',
|
|
elevation = 'flat',
|
|
blur = 'mid',
|
|
cornerLights = 'subtle',
|
|
className,
|
|
style,
|
|
children,
|
|
...rest
|
|
},
|
|
ref
|
|
) {
|
|
const shadowParts = [
|
|
...(RIM_SHADOWS[rim] ?? []),
|
|
...(ELEVATION_SHADOWS[elevation] ?? []),
|
|
];
|
|
const composedStyle = {
|
|
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,
|
|
};
|
|
|
|
return (
|
|
<As ref={ref} className={className} style={composedStyle} {...rest}>
|
|
{children}
|
|
</As>
|
|
);
|
|
});
|
|
|
|
export default GlassSurface;
|