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

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;