-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathtokens.css
More file actions
253 lines (221 loc) · 8.92 KB
/
tokens.css
File metadata and controls
253 lines (221 loc) · 8.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
/**
* StackUp Design Tokens — Tailwind CSS v4 `@theme`
*
* 토큰 추가/변경 시 `docs/design-system.md` 도 함께 갱신.
* 컴포넌트는 토큰만 참조하고 색상·간격·타이포그래피 하드코딩 금지.
*/
@theme {
/* =========================================================
* 1. Color — Base
* ========================================================= */
--color-white: #ffffff;
--color-black: #000000;
--color-background: #e9e8e7;
/* =========================================================
* 2. Color — Sage / Neutral Scale (Main Theme)
* bg-sage-500, text-sage-800, border-sage-200 ...
* ========================================================= */
--color-sage-50: #e8e7e1;
--color-sage-100: #d4cfcb;
--color-sage-200: #c9ccc8;
--color-sage-300: #b4bdaf;
--color-sage-400: #a0a89d;
--color-sage-500: #626e5c;
--color-sage-600: #3e4739;
--color-sage-700: #2b3625;
--color-sage-800: #1f271b;
--color-sage-900: #181e15;
--color-sage-950: #141a11;
/* =========================================================
* 3. Color — Semantic Aliases
* bg-primary, text-fg, text-fg-muted, border-border ...
* ========================================================= */
--color-bg: var(--color-background);
--color-surface: var(--color-sage-50);
--color-surface-raised: var(--color-white);
--color-border: var(--color-sage-100);
--color-border-strong: var(--color-sage-200);
--color-fg: var(--color-sage-950);
--color-fg-strong: var(--color-sage-800);
/* 본문 위 보조 텍스트가 밝은 표면에서 충분히 읽히도록 한 단계씩 진하게 (WCAG AA). */
--color-fg-muted: var(--color-sage-500);
--color-fg-subtle: var(--color-sage-400);
--color-fg-disabled: var(--color-sage-200);
--color-fg-on-primary: var(--color-white);
--color-primary: var(--color-sage-500);
--color-primary-hover: var(--color-sage-600);
--color-primary-pressed: var(--color-sage-700);
/* =========================================================
* 4. Color — Status (Success / Warning / Danger / Info)
* Sage 톤과 조화되는 muted jewel tones.
* 스케일: -50 (연한 배경), -500 (기본/표면), -700 (강조/텍스트)
* 축약 별칭: bg-success / text-warning / border-danger ...
* ========================================================= */
--color-success-50: #e8efe1;
--color-success-500: #5b7c47;
--color-success-700: #3f5731;
--color-success: var(--color-success-500);
--color-warning-50: #f4e8d4;
--color-warning-500: #b88840;
--color-warning-700: #8a6529;
--color-warning: var(--color-warning-500);
--color-danger-50: #f4e0d8;
--color-danger-500: #a8503c;
--color-danger-700: #803a2a;
--color-danger: var(--color-danger-500);
--color-info-50: #dde4ea;
--color-info-500: #4d6878;
--color-info-700: #36475a;
--color-info: var(--color-info-500);
/* =========================================================
* 5. Color — Domain (Jobs / Interview Types)
* StackUp 도메인 한정. features/[domain]/ui 의 도메인 뱃지에서만 사용.
* Sage 모노크로매틱과 조화되도록 muted jewel tone 으로 통일.
* ========================================================= */
--color-job-frontend: #5e8a98; /* teal */
--color-job-backend: #7d6c93; /* plum */
--color-job-infra: #b06c70; /* rose */
--color-job-dba: #b89c5e; /* gold */
--color-type-personality: #6f9978; /* mint */
--color-type-technical: #6c8294; /* slate */
--color-type-live-coding: #a87385; /* mauve */
--color-type-integrated: #8a7896; /* violet */
/* =========================================================
* 6. Typography — Font Families
* font-heading, font-subheading, font-sans, font-mono
* ========================================================= */
--font-heading:
'Bricolage Grotesque', 'Pretendard Variable', system-ui, sans-serif;
--font-display:
'Bricolage Grotesque', 'Pretendard Variable', system-ui, sans-serif;
--font-subheading:
'Pretendard Variable', system-ui, sans-serif;
--font-sans:
'Pretendard Variable', system-ui, sans-serif;
--font-body:
'Pretendard Variable', system-ui, sans-serif;
--font-script:
'Caveat', 'Pretendard Variable', system-ui, sans-serif;
--font-mono:
'Geist Mono', ui-monospace, 'JetBrains Mono', Consolas, monospace;
/* =========================================================
* 7. Typography — Text Scale
* text-display / text-h2..h6 / text-rich / text-body / text-button / text-caption
* 각 토큰은 size + line-height + letter-spacing + font-weight 페어.
*
* 반응형: 모바일 (< lg) 에서는 *-mobile 변형을 사용.
* ex) <h1 class="text-display-mobile lg:text-display">
* ========================================================= */
/* Display (H1) — 100px 데스크탑 / 48px 모바일 */
--text-display: 100px;
--text-display--line-height: 1;
--text-display--letter-spacing: -1px;
--text-display--font-weight: 700;
--text-display-mobile: 48px;
--text-display-mobile--line-height: 1.05;
--text-display-mobile--letter-spacing: -1px;
--text-display-mobile--font-weight: 700;
/* H2 (Section) */
--text-h2: 56px;
--text-h2--line-height: 1.05;
--text-h2--letter-spacing: -0.2px;
--text-h2--font-weight: 700;
--text-h2-mobile: 42px;
--text-h2-mobile--line-height: 1.1;
--text-h2-mobile--letter-spacing: -0.2px;
--text-h2-mobile--font-weight: 700;
/* H3 (Card / Block) */
--text-h3: 38px;
--text-h3--line-height: 1.1;
--text-h3--letter-spacing: -0.2px;
--text-h3--font-weight: 700;
/* H4 */
--text-h4: 32px;
--text-h4--line-height: 1.2;
--text-h4--letter-spacing: -0.8px;
--text-h4--font-weight: 700;
/* H5 */
--text-h5: 24px;
--text-h5--line-height: 1.3;
--text-h5--letter-spacing: -0.2px;
--text-h5--font-weight: 700;
/* H6 */
--text-h6: 20px;
--text-h6--line-height: 1.4;
--text-h6--letter-spacing: -0.1px;
--text-h6--font-weight: 700;
/* Rich text (큰 본문 / 강조) */
--text-rich: 20px;
--text-rich--line-height: 1.5;
--text-rich--font-weight: 500;
/* Body 1 (기본 본문) */
--text-body: 16px;
--text-body--line-height: 1.2;
--text-body--letter-spacing: -0.01em;
--text-body--font-weight: 500;
/* Body 2 / Button (작은 본문 / 버튼) */
--text-button: 14px;
--text-button--line-height: 1.2;
--text-button--font-weight: 600;
/* Caption */
--text-caption: 12px;
--text-caption--line-height: 1.4;
--text-caption--font-weight: 400;
/* =========================================================
* 8. Radius
* ========================================================= */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-pill: 9999px;
/* =========================================================
* 9. Shadow / Elevation (sage-tint)
* shadow-sm, shadow-md, shadow-lg, shadow-focus-ring
* ========================================================= */
--shadow-sm: 0 1px 2px rgba(31, 39, 27, 0.06);
--shadow-md:
0 4px 6px -1px rgba(31, 39, 27, 0.10),
0 2px 4px -2px rgba(31, 39, 27, 0.06);
--shadow-lg:
0 10px 15px -3px rgba(31, 39, 27, 0.10),
0 4px 6px -4px rgba(31, 39, 27, 0.05);
--shadow-focus-ring: 0 0 0 3px rgba(98, 110, 92, 0.45);
/* =========================================================
* 10. Motion
* duration-fast/normal/slow, ease-standard/decelerate/accelerate
* ========================================================= */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
--ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
--duration-fast: 120ms;
--duration-normal: 200ms;
--duration-slow: 320ms;
/* =========================================================
* 11. Z-Index Scale
* `--z-*` 는 Tailwind 자동 namespace 가 아니므로 utility 미생성.
* 사용 — style={{ zIndex: 'var(--z-modal)' }} 또는 className="z-[var(--z-modal)]"
* ========================================================= */
--z-base: 0;
--z-raised: 10;
--z-dropdown: 1000;
--z-sticky: 1100;
--z-modal-backdrop: 1200;
--z-modal: 1300;
--z-popover: 1400;
--z-tooltip: 1500;
--z-toast: 1600;
/* =========================================================
* 12. Container max-widths (Tailwind v4 max-w-*)
* max-w-readable, max-w-content, max-w-app
* ========================================================= */
--container-readable: 65ch; /* 본문 / 프로즈 카드 */
--container-content: 1280px; /* TopNav 안쪽 메인 영역 */
--container-app: 1440px; /* 앱 전체 최대 폭 */
/* =========================================================
* 13. Breakpoints
* Tailwind v4 default 사용 — sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536.
* 재정의 필요 시 --breakpoint-* 로 오버라이드.
* ========================================================= */
}