feat(saju-ui-v2): tokens.css — 디자인 변수 + 한글 폰트 토큰 (.saju-v2 scope)
This commit is contained in:
73
src/pages/saju/_shell/tokens.css
Normal file
73
src/pages/saju/_shell/tokens.css
Normal file
@@ -0,0 +1,73 @@
|
||||
/* 호령 사주 v2 — 디자인 토큰 */
|
||||
.saju-v2 {
|
||||
/* Brand palette */
|
||||
--navy: #1F2A44;
|
||||
--navy-deep: #141B30;
|
||||
--navy-soft: #2E3B5A;
|
||||
--ivory: #F7F2E8;
|
||||
--ivory-soft: #FBF7EF;
|
||||
--ivory-warm: #F0E9D9;
|
||||
--gold: #D4AF37;
|
||||
--gold-soft: #E8C76B;
|
||||
--gold-dim: #B89530;
|
||||
--green: #4E6B5C;
|
||||
--green-soft: #6E8B7C;
|
||||
--green-bg: #E6EBE5;
|
||||
--purple: #6A4C7C;
|
||||
--purple-soft: #8B6C9C;
|
||||
--purple-bg: #ECE6F0;
|
||||
--pink: #F2C7CD;
|
||||
--pink-deep: #D89098;
|
||||
--pink-bg: #FBE8EB;
|
||||
--gray: #6B6B6B;
|
||||
--gray-soft: #9A968D;
|
||||
--gray-line: rgba(31, 42, 68, 0.10);
|
||||
--gray-line-strong: rgba(31, 42, 68, 0.18);
|
||||
|
||||
/* Element colors (오행) */
|
||||
--el-wood: #4E6B5C;
|
||||
--el-fire: #C04A4A;
|
||||
--el-earth: #A67B3F;
|
||||
--el-metal: #D4AF37;
|
||||
--el-water: #3A5A8C;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-card: 0 2px 8px rgba(31, 42, 68, 0.04), 0 8px 24px rgba(31, 42, 68, 0.06);
|
||||
--shadow-pop: 0 8px 28px rgba(31, 42, 68, 0.16);
|
||||
--shadow-dark: 0 4px 20px rgba(0, 0, 0, 0.35);
|
||||
|
||||
/* Fonts */
|
||||
--font-title: 'Nanum Myeongjo', 'Gowun Batang', serif;
|
||||
--font-body: 'Nanum Gothic', system-ui, -apple-system, sans-serif;
|
||||
|
||||
/* Layout */
|
||||
--content-max-desktop: 1200px;
|
||||
--bottom-nav-h: 72px;
|
||||
--desktop-header-h: 64px;
|
||||
|
||||
color: var(--navy);
|
||||
font-family: var(--font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.saju-v2 * { box-sizing: border-box; }
|
||||
|
||||
.saju-v2 .font-title {
|
||||
font-family: var(--font-title);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.saju-v2 button {
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.saju-v2 button:focus-visible {
|
||||
outline: 2px solid var(--gold);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* hide scrollbar utility */
|
||||
.saju-v2 .no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.saju-v2 .no-scrollbar { scrollbar-width: none; }
|
||||
Reference in New Issue
Block a user