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

전 저장소 리팩터링과 SSOT 정비

Browse source
This commit is contained in:
Yun Chan 2026-07-15 21:31:30 +09:00
parent 14ecbd4e7d
commit 3dfddcac6f
173 changed files with 19679 additions and 6952 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -83,16 +83,18 @@
}
.vg-btn--primary {
background: var(--accent);
background: linear-gradient(105deg, color-mix(in srgb, var(--accent) 90%, var(--bg-surface)), var(--accent));
color: var(--text-on-accent);
border-color: color-mix(in srgb, var(--botanical-gold) 24%, var(--accent));
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-surface) 32%, transparent);
}
.vg-btn--primary:hover:not(:disabled) {
background: var(--accent-deep);
}
.vg-btn--secondary {
background: var(--bg-surface);
background: var(--surface-gradient);
color: var(--accent);
border-color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 62%, var(--botanical-hair));
}
.vg-btn--secondary:hover:not(:disabled) {
background: var(--accent-tint);
@ -107,42 +109,61 @@
}
.vg-btn--danger {
background: var(--crit-solid);
color: #fff;
color: var(--text-on-accent);
}
.vg-btn--danger:hover:not(:disabled) {
background: var(--crit-text);
}
/* ── Card / Panel §7.3 (헤어라인 + 미세 그림자, 상단 강조선 금지) ── */
.vg-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
/* ── Surface SSOT ── */
.vg-surface.vg-surface--panel {
background: var(--glass-specular), var(--glass-surface);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
padding: var(--sp-5);
box-shadow: var(--shadow-sm);
box-shadow: var(--glass-edge-shadow), var(--glass-shadow);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
}
.vg-card--flat {
.vg-surface.vg-surface--inset {
background: var(--glass-specular-inset), var(--glass-surface-inset);
border: 0;
border-radius: 0;
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);
border-radius: var(--radius);
box-shadow: var(--glass-inset-shadow);
-webkit-backdrop-filter: blur(12px) saturate(110%);
backdrop-filter: blur(12px) saturate(110%);
transition:
background var(--dur-base) var(--ease-out),
border-color var(--dur-base) 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);
}
.vg-surface.vg-surface--flat {
box-shadow: none;
}
.vg-card--tint {
.vg-surface.vg-surface--tint {
background: var(--bg-tint);
border-color: transparent;
box-shadow: none;
}
/* ── Card / Panel 크기 계약. 표면은 위 Surface만 소유한다. ── */
.vg-card {
padding: var(--sp-5);
}
.vg-panel {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--sp-6);
box-shadow: var(--shadow-sm);
}
.vg-panel--flat {
box-shadow: none;
}
.vg-panel--tint {
background: var(--bg-tint);
border-color: transparent;
box-shadow: none;
}
/* ── Badge (배경 틴트 + 텍스트, 좌측바 없음) ── */