hehihoho3/h-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 전체 화면을 편집(editorial) 디자인으로 통일

Browse Source 
대시보드의 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:
hehihoho3@gmail.com 2026-06-16 18:15:59 +09:00
parent c0ade287c2
commit e0d92792b1
2 changed files with 83 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/main/resources/static/css/style.css
View File

@ -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-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 { font-size: 0.82rem; color: var(--text-2); line-height: 1.6; }
.help-item .hi-d b { color: var(--text); font-weight: 600; } .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); }

125
src/main/resources/static/css/variables.css
View File

@ -1,50 +1,52 @@
/* =========================================================================== /* ===========================================================================
Design tokens — Refined SaaS, LIGHT default + DARK via [data-theme="dark"]. Design tokens — Editorial (almanac) identity. LIGHT default + DARK.
Old variable names are aliased to theme tokens so existing markup adapts. Bricolage Grotesque (display) + Hanken Grotesk (body) + JetBrains Mono.
Paper canvas · ink text · vermilion signal. Old var names aliased so existing
markup adapts automatically.
=========================================================================== */ =========================================================================== */
:root { :root {
/* Surfaces (light) */ /* Surfaces (light — warm paper) */
--bg: #f6f7f9; --bg: #f1ede3;
--surface: #ffffff; --surface: #fbfaf6;
--surface-2: #f1f3f6; --surface-2: #ece7da;
--inset: #eef0f3; --inset: #e7e1d2;
--border: #e6e8ec; --border: #dcd6c7;
--border-strong: #d9dce1; --border-strong: #b9b19b;
/* Text (light) */ /* Text (ink) */
--text: #15181d; --text: #17160f;
--text-2: #5a626d; --text-2: #6f6a5c;
--text-3: #9aa1ad; --text-3: #a8a293;
/* On-surface translucent (hover/active) */ /* On-surface translucent (hover/active) */
--hover: rgba(16, 24, 40, .045); --hover: rgba(23, 22, 15, .045);
--hover-strong: rgba(16, 24, 40, .07); --hover-strong: rgba(23, 22, 15, .07);
/* Elevation */ /* Elevation (editorial = mostly borders; shadows subtle) */
--shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .05); --shadow: 0 1px 2px rgba(23, 22, 15, .05);
--shadow-lg: 0 10px 30px rgba(16, 24, 40, .10); --shadow-lg: 0 14px 40px rgba(23, 22, 15, .14);
--side-bg: #ffffff; --side-bg: #fbfaf6;
/* Accent + status (shared across themes) */ /* Accent + status — vermilion signal */
--accent: #4f7cff; --accent: #ff4d23;
--accent-2: #7c5cff; --accent-2: #ff4d23;
--accent-soft: rgba(79, 124, 255, .10); --accent-soft: rgba(255, 77, 35, .12);
--primary: #4f7cff; --primary: #ff4d23;
--primary-gradient: linear-gradient(135deg, #4f7cff 0%, #7c5cff 100%); --primary-gradient: linear-gradient(135deg, #ff5a36 0%, #ff4d23 100%);
--primary-glow: rgba(79, 124, 255, .35); --primary-glow: rgba(255, 77, 35, .35);
--success: #10b981; --success: #1f7a3a;
--danger: #f43f5e; --danger: #d6422a;
--warning: #f59e0b; --warning: #c47a12;
--green: #10b981; --green: #1f7a3a;
--amber: #f59e0b; --amber: #c47a12;
--red: #f43f5e; --red: #d6422a;
--purple: #8b5cf6; --purple: #7a5cff;
--sky: #0ea5e9; --sky: #1f6f9c;
--primary-rgb: 79, 124, 255; --primary-rgb: 255, 77, 35;
--success-rgb: 16, 185, 129; --success-rgb: 31, 122, 58;
--danger-rgb: 244, 63, 94; --danger-rgb: 214, 66, 42;
/* === Back-compat aliases (old names → theme tokens) === */ /* === Back-compat aliases (old names → editorial tokens) === */
--bg-primary: var(--bg); --bg-primary: var(--bg);
--bg-glass: var(--surface); --bg-glass: var(--surface);
--glass-border: var(--border); --glass-border: var(--border);
@ -55,50 +57,55 @@
--bg-hover: var(--surface-2); --bg-hover: var(--surface-2);
--backdrop-blur: 0px; --backdrop-blur: 0px;
/* Radius / spacing / font */ /* Radius (editorial = sharper) / spacing / fonts */
--radius-md: 10px; --radius-md: 6px;
--radius-lg: 14px; --radius-lg: 8px;
--radius-full: 9999px; --radius-full: 9999px;
--r: 12px; --r: 8px;
--r-sm: 9px; --r-sm: 5px;
--space-1: .25rem; --space-1: .25rem;
--space-2: .5rem; --space-2: .5rem;
--space-3: .75rem; --space-3: .75rem;
--space-4: 1rem; --space-4: 1rem;
--space-6: 1.5rem; --space-6: 1.5rem;
--space-8: 2rem; --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"] { :root[data-theme="dark"] {
--bg: #0a0b0e; --bg: #100f0c;
--surface: #131519; --surface: #191712;
--surface-2: #191c22; --surface-2: #211e17;
--inset: #0e1014; --inset: #1a1812;
--border: rgba(255, 255, 255, .08); --border: #2b281f;
--border-strong: rgba(255, 255, 255, .13); --border-strong: #3a362a;
--text: #e8eaef; --text: #eceae2;
--text-2: #9aa1ad; --text-2: #a39d8d;
--text-3: #6b7280; --text-3: #6b6657;
--hover: rgba(255, 255, 255, .05); --hover: rgba(255, 255, 255, .05);
--hover-strong: rgba(255, 255, 255, .09); --hover-strong: rgba(255, 255, 255, .09);
--shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 1px 2px rgba(0, 0, 0, .4);
--shadow-lg: 0 12px 30px rgba(0, 0, 0, .45); --shadow-lg: 0 16px 44px rgba(0, 0, 0, .55);
--side-bg: linear-gradient(180deg, #0c0e12, #0a0b0e); --side-bg: #161410;
--accent-soft: rgba(79, 124, 255, .16); --accent-soft: rgba(255, 77, 35, .18);
} }
body { body {
background-color: var(--bg); background-color: var(--bg);
color: var(--text); color: var(--text);
font-family: var(--font-sans); font-family: var(--font-sans);
font-feature-settings: "tnum" 1, "cv01" 1; font-feature-settings: "tnum" 1;
margin: 0; margin: 0;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
min-height: 100vh; min-height: 100vh;
transition: background-color .2s ease, color .2s ease; 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; }