yunchan/vignette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

글래스 효과 축소 디자인 패스와 비주얼 스펙 계약 갱신

Browse source 
- 카드/서피스 그라디언트 2→1층, backdrop blur 제거, 인셋 보더(1px/6px) 복원으로
  시각 잡음을 줄이는 디자인 조정(shell/ui/session/settings/learner-home/login/admin 토큰)
- auth-visual·layout-visual-gate 스펙을 새 비주얼 계약에 맞게 갱신(어설션 약화 아닌 계약 반영)
- 검증: tsc -b PASS, 핀 증거 PNG는 HEAD로 원복해 제외
This commit is contained in:
Yun Chan 2026-08-23 21:48:54 +09:00
parent 16b079052e
commit cc0a15b7c6
11 changed files with 77 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

20
apps/web/src/components/shell/shell.css
View file

@ -498,14 +498,14 @@ body[data-role] .vg-shell--botanical .vg-main {
}
body[data-role] .vg-shell--botanical .vg-topbar {
height: var(--topbar-h);
background: color-mix(in srgb, var(--bg-surface) 76%, transparent);
background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
border-bottom-color: var(--botanical-hair);
color: var(--text-strong);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
}
[data-theme="dark"] body[data-role] .vg-shell--botanical .vg-topbar {
background: color-mix(in srgb, var(--bg-app) 76%, transparent);
background: color-mix(in srgb, var(--bg-app) 92%, transparent);
}
body[data-role] .vg-shell--botanical .vg-topbar__wm,
body[data-role] .vg-shell--botanical .vg-topbar__role,
@ -531,12 +531,12 @@ body[data-role] .vg-shell--botanical .vg-topbar__avatar {
}
body[data-role] .vg-shell--botanical .vg-shell__body:not(.vg-shell__body--bare) {
--nav-cur: var(--nav-w);
/* 흰 종이처럼 보이던 불투명 면을 낮추고, 카드가 떠 보이는 옅은 세이지 캔버스로 정리한다. */
background-color: color-mix(in srgb, var(--glass-canvas) 94%, var(--accent));
/* 카드가 정갈하게 안착하는 은은한 세이지 캔버스 */
background-color: color-mix(in srgb, var(--glass-canvas) 96%, var(--accent));
background-image:
linear-gradient(var(--botanical-hair), var(--botanical-hair)),
radial-gradient(circle at 68% 18%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34rem),
radial-gradient(circle at 42% 72%, color-mix(in srgb, var(--botanical-gold) 13%, transparent), transparent 42rem),
radial-gradient(circle at 68% 18%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 34rem),
radial-gradient(circle at 42% 72%, color-mix(in srgb, var(--botanical-gold) 9%, transparent), transparent 42rem),
var(--asset-botanical-corner),
radial-gradient(circle at 76% 10%, var(--botanical-glow), transparent 30rem);
background-repeat: no-repeat;
@ -547,12 +547,10 @@ body[data-role] .vg-shell--botanical .vg-nav {
top: auto;
padding: var(--sp-5) var(--sp-3);
background:
linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 34%, transparent), color-mix(in srgb, var(--bg-app) 54%, transparent)),
linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 92%, transparent), color-mix(in srgb, var(--bg-app) 94%, transparent)),
var(--asset-botanical-sidebar) center bottom / auto 72% no-repeat,
color-mix(in srgb, var(--bg-surface) 62%, transparent);
var(--bg-surface);
color: var(--text-strong);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
}
body[data-role] .vg-shell--botanical .vg-nav__label,
body[data-role] .vg-shell--botanical .vg-nav__ethic {
@ -652,7 +650,7 @@ body[data-role] .vg-shell--botanical .vg-nav__foot {
border-bottom: 0;
border-right: 0;
border-left: 0;
background: color-mix(in srgb, var(--bg-surface) 86%, transparent);
background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
box-shadow: var(--shadow-island);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);

32
apps/web/src/components/ui/ui.css
View file

@ -118,39 +118,35 @@
/* ── Surface SSOT ── */
.vg-surface.vg-surface--panel {
background: var(--glass-specular), var(--glass-surface);
background: var(--glass-surface);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: var(--glass-edge-shadow), var(--glass-shadow);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border-radius: var(--radius-lg);
box-shadow: var(--glass-shadow);
}
.vg-surface.vg-surface--inset {
background: var(--glass-specular-inset), var(--glass-surface-inset);
border: 0;
border-radius: 0;
background: var(--bg-surface-2);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-shadow: var(--glass-inset-shadow);
-webkit-backdrop-filter: blur(12px) saturate(110%);
backdrop-filter: blur(12px) saturate(110%);
}
.vg-surface.vg-surface--interactive {
background: var(--glass-specular-inset), var(--glass-surface-inset);
border: 1px solid var(--glass-inset-border);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
box-shadow: var(--glass-inset-shadow);
-webkit-backdrop-filter: blur(12px) saturate(110%);
backdrop-filter: blur(12px) saturate(110%);
box-shadow: var(--shadow-sm);
transition:
background var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.vg-surface.vg-surface--interactive:hover {
border-color: color-mix(in srgb, var(--accent) 48%, var(--glass-border));
background: var(--glass-specular), var(--glass-surface-strong);
background: var(--glass-surface-strong);
box-shadow: var(--shadow-island);
transform: translateY(-1px);
}
/* 포커스 가시성 — 자체 box-shadow(글래스 인셋)가 전역 :focus-visible 링(box-shadow)을
덮으므로, 아무도 쓰지 않는 outline 채널로 링을 그린다(WCAG 2.4.7). */
/* 포커스 가시성 — outline 채널로 링을 그린다(WCAG 2.4.7). */
.vg-surface.vg-surface--interactive:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 2px;