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,
   };
 

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(
+      <GlassSurface data-testid="surface">content</GlassSurface>
+    );
+    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(
+      <GlassSurface cornerLights="chrome" data-testid="surface">
+        content
+      </GlassSurface>
+    );
+    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(
+      <GlassSurface cornerLights="none" tint="mid" data-testid="surface">
+        content
+      </GlassSurface>
+    );
+    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/);
+  });
+});