feat(ui): 전체 화면을 편집(editorial) 디자인으로 통일
대시보드의 editorial 정체성을 공용 디자인 토큰으로 끌어올려 전 페이지에 전파. - variables.css: 종이 캔버스 + 잉크 텍스트 + 버밀리언(#ff4d23) 단색 액센트, Bricolage Grotesque(헤딩, 라틴) + Hanken Grotesk(본문) + JetBrains Mono, 샤프한 모서리(radius 축소). 라이트 기본 + 다크. 기존 변수 별칭 유지로 각 페이지가 자동 적응. - style.css: 헤딩 디스플레이 페이스, primary 버튼 단색 버밀리언, 배지 각짐 등 편집풍 마무리 터치. 한글은 디스플레이/모노 폰트에 없으므로 시스템 폰트로 자연 폴백. 수집함·칸반 라이트/다크 Playwright 검증. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
c0ade287c2
commit
e0d92792b1
@ -444,3 +444,20 @@ tbody tr:hover { background: var(--hover); }
|
||||
.help-item .hi-t { font-weight: 600; font-size: 0.9rem; margin-bottom: 3px; }
|
||||
.help-item .hi-d { font-size: 0.82rem; color: var(--text-2); line-height: 1.6; }
|
||||
.help-item .hi-d b { color: var(--text); font-weight: 600; }
|
||||
|
||||
/* ===== Editorial identity touches (global) ===== */
|
||||
/* 헤딩은 디스플레이 페이스(라틴), 한글은 시스템 폴백 */
|
||||
.page-header h1 { font-weight: 800; letter-spacing: -.02em; }
|
||||
/* 사이드바 섹션 라벨 — 트래킹 강조 */
|
||||
.nav-section { font-weight: 700; letter-spacing: .12em; }
|
||||
/* 카드/패널 — 편집풍(평평, 보더 중심) */
|
||||
.card { box-shadow: var(--shadow); }
|
||||
/* primary 버튼 — 단색 버밀리언(그림자 절제) */
|
||||
.btn-primary { box-shadow: none; }
|
||||
.btn-primary:hover { filter: brightness(1.03); box-shadow: none; }
|
||||
/* 배지/칩 — 살짝 각지게 */
|
||||
.badge { border-radius: var(--r-sm); }
|
||||
/* 활성 nav — 굵게 */
|
||||
.nav-item.active { font-weight: 700; }
|
||||
/* 숫자/지표가 또렷하게 */
|
||||
:root { --font-tnum: var(--font-sans); }
|
||||
|
||||
@ -1,50 +1,52 @@
|
||||
/* ===========================================================================
|
||||
Design tokens — Refined SaaS, LIGHT default + DARK via [data-theme="dark"].
|
||||
Old variable names are aliased to theme tokens so existing markup adapts.
|
||||
Design tokens — Editorial (almanac) identity. LIGHT default + DARK.
|
||||
Bricolage Grotesque (display) + Hanken Grotesk (body) + JetBrains Mono.
|
||||
Paper canvas · ink text · vermilion signal. Old var names aliased so existing
|
||||
markup adapts automatically.
|
||||
=========================================================================== */
|
||||
:root {
|
||||
/* Surfaces (light) */
|
||||
--bg: #f6f7f9;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #f1f3f6;
|
||||
--inset: #eef0f3;
|
||||
--border: #e6e8ec;
|
||||
--border-strong: #d9dce1;
|
||||
/* Surfaces (light — warm paper) */
|
||||
--bg: #f1ede3;
|
||||
--surface: #fbfaf6;
|
||||
--surface-2: #ece7da;
|
||||
--inset: #e7e1d2;
|
||||
--border: #dcd6c7;
|
||||
--border-strong: #b9b19b;
|
||||
|
||||
/* Text (light) */
|
||||
--text: #15181d;
|
||||
--text-2: #5a626d;
|
||||
--text-3: #9aa1ad;
|
||||
/* Text (ink) */
|
||||
--text: #17160f;
|
||||
--text-2: #6f6a5c;
|
||||
--text-3: #a8a293;
|
||||
|
||||
/* On-surface translucent (hover/active) */
|
||||
--hover: rgba(16, 24, 40, .045);
|
||||
--hover-strong: rgba(16, 24, 40, .07);
|
||||
--hover: rgba(23, 22, 15, .045);
|
||||
--hover-strong: rgba(23, 22, 15, .07);
|
||||
|
||||
/* Elevation */
|
||||
--shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .05);
|
||||
--shadow-lg: 0 10px 30px rgba(16, 24, 40, .10);
|
||||
--side-bg: #ffffff;
|
||||
/* Elevation (editorial = mostly borders; shadows subtle) */
|
||||
--shadow: 0 1px 2px rgba(23, 22, 15, .05);
|
||||
--shadow-lg: 0 14px 40px rgba(23, 22, 15, .14);
|
||||
--side-bg: #fbfaf6;
|
||||
|
||||
/* Accent + status (shared across themes) */
|
||||
--accent: #4f7cff;
|
||||
--accent-2: #7c5cff;
|
||||
--accent-soft: rgba(79, 124, 255, .10);
|
||||
--primary: #4f7cff;
|
||||
--primary-gradient: linear-gradient(135deg, #4f7cff 0%, #7c5cff 100%);
|
||||
--primary-glow: rgba(79, 124, 255, .35);
|
||||
--success: #10b981;
|
||||
--danger: #f43f5e;
|
||||
--warning: #f59e0b;
|
||||
--green: #10b981;
|
||||
--amber: #f59e0b;
|
||||
--red: #f43f5e;
|
||||
--purple: #8b5cf6;
|
||||
--sky: #0ea5e9;
|
||||
--primary-rgb: 79, 124, 255;
|
||||
--success-rgb: 16, 185, 129;
|
||||
--danger-rgb: 244, 63, 94;
|
||||
/* Accent + status — vermilion signal */
|
||||
--accent: #ff4d23;
|
||||
--accent-2: #ff4d23;
|
||||
--accent-soft: rgba(255, 77, 35, .12);
|
||||
--primary: #ff4d23;
|
||||
--primary-gradient: linear-gradient(135deg, #ff5a36 0%, #ff4d23 100%);
|
||||
--primary-glow: rgba(255, 77, 35, .35);
|
||||
--success: #1f7a3a;
|
||||
--danger: #d6422a;
|
||||
--warning: #c47a12;
|
||||
--green: #1f7a3a;
|
||||
--amber: #c47a12;
|
||||
--red: #d6422a;
|
||||
--purple: #7a5cff;
|
||||
--sky: #1f6f9c;
|
||||
--primary-rgb: 255, 77, 35;
|
||||
--success-rgb: 31, 122, 58;
|
||||
--danger-rgb: 214, 66, 42;
|
||||
|
||||
/* === Back-compat aliases (old names → theme tokens) === */
|
||||
/* === Back-compat aliases (old names → editorial tokens) === */
|
||||
--bg-primary: var(--bg);
|
||||
--bg-glass: var(--surface);
|
||||
--glass-border: var(--border);
|
||||
@ -55,50 +57,55 @@
|
||||
--bg-hover: var(--surface-2);
|
||||
--backdrop-blur: 0px;
|
||||
|
||||
/* Radius / spacing / font */
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 14px;
|
||||
/* Radius (editorial = sharper) / spacing / fonts */
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-full: 9999px;
|
||||
--r: 12px;
|
||||
--r-sm: 9px;
|
||||
--r: 8px;
|
||||
--r-sm: 5px;
|
||||
--space-1: .25rem;
|
||||
--space-2: .5rem;
|
||||
--space-3: .75rem;
|
||||
--space-4: 1rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
--font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
--font-display: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
|
||||
/* ===== Dark theme overrides ===== */
|
||||
/* ===== Dark theme overrides (editorial dark) ===== */
|
||||
:root[data-theme="dark"] {
|
||||
--bg: #0a0b0e;
|
||||
--surface: #131519;
|
||||
--surface-2: #191c22;
|
||||
--inset: #0e1014;
|
||||
--border: rgba(255, 255, 255, .08);
|
||||
--border-strong: rgba(255, 255, 255, .13);
|
||||
--bg: #100f0c;
|
||||
--surface: #191712;
|
||||
--surface-2: #211e17;
|
||||
--inset: #1a1812;
|
||||
--border: #2b281f;
|
||||
--border-strong: #3a362a;
|
||||
|
||||
--text: #e8eaef;
|
||||
--text-2: #9aa1ad;
|
||||
--text-3: #6b7280;
|
||||
--text: #eceae2;
|
||||
--text-2: #a39d8d;
|
||||
--text-3: #6b6657;
|
||||
|
||||
--hover: rgba(255, 255, 255, .05);
|
||||
--hover-strong: rgba(255, 255, 255, .09);
|
||||
|
||||
--shadow: 0 1px 2px rgba(0, 0, 0, .3);
|
||||
--shadow-lg: 0 12px 30px rgba(0, 0, 0, .45);
|
||||
--side-bg: linear-gradient(180deg, #0c0e12, #0a0b0e);
|
||||
--accent-soft: rgba(79, 124, 255, .16);
|
||||
--shadow: 0 1px 2px rgba(0, 0, 0, .4);
|
||||
--shadow-lg: 0 16px 44px rgba(0, 0, 0, .55);
|
||||
--side-bg: #161410;
|
||||
--accent-soft: rgba(255, 77, 35, .18);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-sans);
|
||||
font-feature-settings: "tnum" 1, "cv01" 1;
|
||||
font-feature-settings: "tnum" 1;
|
||||
margin: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
min-height: 100vh;
|
||||
transition: background-color .2s ease, color .2s ease;
|
||||
}
|
||||
|
||||
/* Display headings + mono labels use the editorial faces app-wide */
|
||||
h1, h2, h3, .page-header h1 { font-family: var(--font-display); letter-spacing: -.01em; }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user