From 78a178bfdf9eebca40c092fe06e923e1683bac7c Mon Sep 17 00:00:00 2001 From: Yun Chan Date: Wed, 22 Jul 2026 00:51:30 +0900 Subject: [PATCH] =?UTF-8?q?feat(theme):=20glass.specular=20=ED=86=A0?= =?UTF-8?q?=ED=81=B0=20=EC=B6=94=EA=B0=80=20(=EC=BB=A4=EC=84=9C=20?= =?UTF-8?q?=EC=B6=94=EC=A2=85=20=EB=B9=9B=20=EB=B0=98=EC=82=AC=EC=9A=A9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit RadTheme.glass에 specular(rgba) 토큰 추가 — 6개 테마 전부 톤 파생. TiltCard 스페큘러 하이라이트 색 SSOT (색은 토큰, 그라디언트 geometry는 컴포넌트가 소유해 커서가 하이라이트를 이동). Co-Authored-By: Claude --- packages/ui/src/theme.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts index 3adf5b6..6b18bad 100644 --- a/packages/ui/src/theme.ts +++ b/packages/ui/src/theme.ts @@ -80,6 +80,8 @@ interface RawTheme { borderGradient: string /** backdrop-filter blur 반경 */ blur: string + /** 커서 추종 반사 하이라이트 색 (rgba) — 컴포넌트가 그라디언트 geometry 생성 */ + specular: string } /** v2: 그라디언트 */ gradient: { @@ -137,6 +139,7 @@ const RAW: Record = { sheen: 'radial-gradient(ellipse 70% 55% at 18% -8%, rgba(59,130,246,0.14) 0%, transparent 55%), linear-gradient(180deg, rgba(148,180,255,0.05) 0%, rgba(148,180,255,0) 40%)', borderGradient: 'linear-gradient(135deg, rgba(125,180,255,0.55) 0%, rgba(148,180,255,0.14) 32%, rgba(148,180,255,0.06) 58%, rgba(59,130,246,0.22) 100%)', blur: '24px', + specular: 'rgba(180,205,255,0.22)', }, gradient: { accent: 'linear-gradient(135deg, #1d4ed8 0%, #3b82f6 55%, #60a5fa 100%)', @@ -177,6 +180,7 @@ const RAW: Record = { sheen: 'radial-gradient(ellipse 70% 55% at 18% -8%, rgba(37,99,235,0.08) 0%, transparent 55%), linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 42%)', borderGradient: 'linear-gradient(135deg, rgba(37,99,235,0.45) 0%, rgba(30,58,138,0.14) 32%, rgba(30,58,138,0.08) 58%, rgba(37,99,235,0.18) 100%)', blur: '24px', + specular: 'rgba(255,255,255,0.50)', }, gradient: { accent: 'linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #3b82f6 100%)', @@ -217,6 +221,7 @@ const RAW: Record = { sheen: 'radial-gradient(ellipse 70% 55% at 18% -8%, rgba(136,192,208,0.14) 0%, transparent 55%), linear-gradient(180deg, rgba(216,222,233,0.05) 0%, rgba(216,222,233,0) 40%)', borderGradient: 'linear-gradient(135deg, rgba(160,205,220,0.55) 0%, rgba(216,222,233,0.14) 32%, rgba(216,222,233,0.06) 58%, rgba(136,192,208,0.22) 100%)', blur: '24px', + specular: 'rgba(200,225,235,0.22)', }, gradient: { accent: 'linear-gradient(135deg, #5e81ac 0%, #81a1c1 55%, #88c0d0 100%)', @@ -257,6 +262,7 @@ const RAW: Record = { sheen: 'radial-gradient(ellipse 70% 55% at 18% -8%, rgba(181,137,0,0.14) 0%, transparent 55%), linear-gradient(180deg, rgba(131,148,150,0.05) 0%, rgba(131,148,150,0) 40%)', borderGradient: 'linear-gradient(135deg, rgba(212,160,23,0.55) 0%, rgba(131,148,150,0.14) 32%, rgba(131,148,150,0.06) 58%, rgba(181,137,0,0.22) 100%)', blur: '24px', + specular: 'rgba(238,232,213,0.22)', }, gradient: { accent: 'linear-gradient(135deg, #8a6800 0%, #b58900 55%, #d4a017 100%)', @@ -297,6 +303,7 @@ const RAW: Record = { sheen: 'radial-gradient(ellipse 70% 55% at 18% -8%, rgba(203,166,247,0.14) 0%, transparent 55%), linear-gradient(180deg, rgba(205,214,244,0.05) 0%, rgba(205,214,244,0) 40%)', borderGradient: 'linear-gradient(135deg, rgba(215,185,255,0.55) 0%, rgba(205,214,244,0.14) 32%, rgba(205,214,244,0.06) 58%, rgba(203,166,247,0.22) 100%)', blur: '24px', + specular: 'rgba(205,214,244,0.22)', }, gradient: { accent: 'linear-gradient(135deg, #a67fd4 0%, #cba6f7 55%, #f5c2e7 100%)', @@ -337,6 +344,7 @@ const RAW: Record = { sheen: 'radial-gradient(ellipse 70% 55% at 18% -8%, rgba(189,147,249,0.14) 0%, transparent 55%), linear-gradient(180deg, rgba(248,248,242,0.05) 0%, rgba(248,248,242,0) 40%)', borderGradient: 'linear-gradient(135deg, rgba(205,170,255,0.55) 0%, rgba(248,248,242,0.14) 32%, rgba(248,248,242,0.06) 58%, rgba(189,147,249,0.22) 100%)', blur: '24px', + specular: 'rgba(248,248,242,0.22)', }, gradient: { accent: 'linear-gradient(135deg, #9a70e0 0%, #bd93f9 55%, #ff79c6 100%)', @@ -390,6 +398,7 @@ export const d3roPalette = { sheen: 'var(--d3-glass-sheen)', borderGradient: 'var(--d3-glass-borderGradient)', blur: 'var(--d3-glass-blur)', + specular: 'var(--d3-glass-specular)', }, /** v2: 그라디언트 토큰 */ gradient: { @@ -578,6 +587,7 @@ function buildCssVars(key: ThemeKey): Record { '--d3-glass-sheen': r.glass.sheen, '--d3-glass-borderGradient': r.glass.borderGradient, '--d3-glass-blur': r.glass.blur, + '--d3-glass-specular': r.glass.specular, '--d3-gradient-accent': r.gradient.accent, '--d3-gradient-logo': r.gradient.logo, '--d3-gradient-bar': r.gradient.bar,