asharyu-design-token 2.0.4 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.ja.md +222 -0
- package/README.ko.md +222 -0
- package/README.md +222 -135
- package/README.zh-TW.md +222 -0
- package/SKILL.md +91 -0
- package/dist/{src/color → color}/semanticValue.d.ts +1 -1
- package/dist/elevation/index.d.ts +19 -0
- package/dist/figma-variables.json +624 -0
- package/dist/font/index.d.ts +64 -0
- package/dist/index.css +106 -0
- package/dist/index.css.d.ts +2 -0
- package/dist/index.d.ts +603 -0
- package/dist/index.js +104 -4
- package/dist/radius/index.d.ts +20 -0
- package/dist/spacing/index.d.ts +24 -0
- package/dist/tokens.json +1393 -0
- package/dist/zIndex/index.d.ts +30 -0
- package/package.json +61 -42
- package/dist/src/color/index.d.ts +0 -0
- package/dist/src/color/value.d.ts +0 -21
- package/dist/src/font/index.d.ts +0 -12
- package/dist/src/index.d.ts +0 -297
- package/dist/src/prev/value.d.ts +0 -21
- /package/dist/{src/color → color}/colorValue.d.ts +0 -0
- /package/dist/{src/font → font}/value.d.ts +0 -0
- /package/dist/{src/interaction → interaction}/index.d.ts +0 -0
- /package/dist/{src/motion → motion}/index.d.ts +0 -0
- /package/dist/{src/stroke → stroke}/index.d.ts +0 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,603 @@
|
|
|
1
|
+
import { colorValue } from './color/colorValue';
|
|
2
|
+
import { semanticValue } from './color/semanticValue';
|
|
3
|
+
import { rawFontSizeRem, semanticFontSize, fontFamily, fontWeight, lineHeight, letterSpacing } from './font';
|
|
4
|
+
import { motion } from './motion';
|
|
5
|
+
import { stroke } from './stroke';
|
|
6
|
+
import { interaction } from './interaction';
|
|
7
|
+
import { spacing } from './spacing';
|
|
8
|
+
import { radius } from './radius';
|
|
9
|
+
import { elevation } from './elevation';
|
|
10
|
+
import { zIndex } from './zIndex';
|
|
11
|
+
export { colorValue, semanticValue };
|
|
12
|
+
export type { ThemeTokens, SemanticValueProps } from './color/semanticValue';
|
|
13
|
+
export { rawFontSizeRem, semanticFontSize, fontFamily, fontWeight, lineHeight, letterSpacing, };
|
|
14
|
+
export { spacing, radius, elevation, zIndex, motion, stroke, interaction };
|
|
15
|
+
declare const AsharyuDesignToken: {
|
|
16
|
+
color: Readonly<{
|
|
17
|
+
raw: {
|
|
18
|
+
yang: {
|
|
19
|
+
0: string;
|
|
20
|
+
1: string;
|
|
21
|
+
2: string;
|
|
22
|
+
3: string;
|
|
23
|
+
4: string;
|
|
24
|
+
};
|
|
25
|
+
yin: {
|
|
26
|
+
0: string;
|
|
27
|
+
1: string;
|
|
28
|
+
2: string;
|
|
29
|
+
3: string;
|
|
30
|
+
4: string;
|
|
31
|
+
};
|
|
32
|
+
wood: {
|
|
33
|
+
0: string;
|
|
34
|
+
1: string;
|
|
35
|
+
2: string;
|
|
36
|
+
3: string;
|
|
37
|
+
4: string;
|
|
38
|
+
};
|
|
39
|
+
fire: {
|
|
40
|
+
0: string;
|
|
41
|
+
1: string;
|
|
42
|
+
2: string;
|
|
43
|
+
3: string;
|
|
44
|
+
4: string;
|
|
45
|
+
};
|
|
46
|
+
earth: {
|
|
47
|
+
0: string;
|
|
48
|
+
1: string;
|
|
49
|
+
2: string;
|
|
50
|
+
3: string;
|
|
51
|
+
4: string;
|
|
52
|
+
};
|
|
53
|
+
metal: {
|
|
54
|
+
0: string;
|
|
55
|
+
1: string;
|
|
56
|
+
2: string;
|
|
57
|
+
3: string;
|
|
58
|
+
4: string;
|
|
59
|
+
};
|
|
60
|
+
water: {
|
|
61
|
+
0: string;
|
|
62
|
+
1: string;
|
|
63
|
+
2: string;
|
|
64
|
+
3: string;
|
|
65
|
+
4: string;
|
|
66
|
+
};
|
|
67
|
+
hong: {
|
|
68
|
+
0: string;
|
|
69
|
+
1: string;
|
|
70
|
+
2: string;
|
|
71
|
+
3: string;
|
|
72
|
+
4: string;
|
|
73
|
+
};
|
|
74
|
+
byeok: {
|
|
75
|
+
0: string;
|
|
76
|
+
1: string;
|
|
77
|
+
2: string;
|
|
78
|
+
3: string;
|
|
79
|
+
4: string;
|
|
80
|
+
};
|
|
81
|
+
nok: {
|
|
82
|
+
0: string;
|
|
83
|
+
1: string;
|
|
84
|
+
2: string;
|
|
85
|
+
3: string;
|
|
86
|
+
4: string;
|
|
87
|
+
};
|
|
88
|
+
yuhwang: {
|
|
89
|
+
0: string;
|
|
90
|
+
1: string;
|
|
91
|
+
2: string;
|
|
92
|
+
3: string;
|
|
93
|
+
4: string;
|
|
94
|
+
};
|
|
95
|
+
ja: {
|
|
96
|
+
0: string;
|
|
97
|
+
1: string;
|
|
98
|
+
2: string;
|
|
99
|
+
3: string;
|
|
100
|
+
4: string;
|
|
101
|
+
};
|
|
102
|
+
};
|
|
103
|
+
semantic: Readonly<{
|
|
104
|
+
light: import("./color/semanticValue").ThemeTokens;
|
|
105
|
+
dark: import("./color/semanticValue").ThemeTokens;
|
|
106
|
+
scale: {
|
|
107
|
+
readonly subtle: string;
|
|
108
|
+
readonly soft: string;
|
|
109
|
+
readonly primary: string;
|
|
110
|
+
readonly deep: string;
|
|
111
|
+
readonly sharp: string;
|
|
112
|
+
};
|
|
113
|
+
background: string;
|
|
114
|
+
text: string;
|
|
115
|
+
stroke: string;
|
|
116
|
+
action: {
|
|
117
|
+
readonly subtle: string;
|
|
118
|
+
readonly soft: string;
|
|
119
|
+
readonly primary: string;
|
|
120
|
+
readonly deep: string;
|
|
121
|
+
readonly sharp: string;
|
|
122
|
+
};
|
|
123
|
+
danger: {
|
|
124
|
+
readonly subtle: string;
|
|
125
|
+
readonly soft: string;
|
|
126
|
+
readonly primary: string;
|
|
127
|
+
readonly deep: string;
|
|
128
|
+
readonly sharp: string;
|
|
129
|
+
};
|
|
130
|
+
surface: {
|
|
131
|
+
readonly subtle: string;
|
|
132
|
+
readonly soft: string;
|
|
133
|
+
readonly primary: string;
|
|
134
|
+
readonly deep: string;
|
|
135
|
+
readonly sharp: string;
|
|
136
|
+
};
|
|
137
|
+
border: {
|
|
138
|
+
readonly subtle: string;
|
|
139
|
+
readonly soft: string;
|
|
140
|
+
readonly primary: string;
|
|
141
|
+
readonly deep: string;
|
|
142
|
+
readonly sharp: string;
|
|
143
|
+
};
|
|
144
|
+
info: {
|
|
145
|
+
readonly subtle: string;
|
|
146
|
+
readonly soft: string;
|
|
147
|
+
readonly primary: string;
|
|
148
|
+
readonly deep: string;
|
|
149
|
+
readonly sharp: string;
|
|
150
|
+
};
|
|
151
|
+
status: {
|
|
152
|
+
readonly success: {
|
|
153
|
+
readonly subtle: string;
|
|
154
|
+
readonly soft: string;
|
|
155
|
+
readonly primary: string;
|
|
156
|
+
readonly deep: string;
|
|
157
|
+
readonly sharp: string;
|
|
158
|
+
};
|
|
159
|
+
readonly alertHover: {
|
|
160
|
+
readonly subtle: string;
|
|
161
|
+
readonly soft: string;
|
|
162
|
+
readonly primary: string;
|
|
163
|
+
readonly deep: string;
|
|
164
|
+
readonly sharp: string;
|
|
165
|
+
};
|
|
166
|
+
readonly actionFocus: {
|
|
167
|
+
readonly subtle: string;
|
|
168
|
+
readonly soft: string;
|
|
169
|
+
readonly primary: string;
|
|
170
|
+
readonly deep: string;
|
|
171
|
+
readonly sharp: string;
|
|
172
|
+
};
|
|
173
|
+
readonly subSurface: {
|
|
174
|
+
readonly subtle: string;
|
|
175
|
+
readonly soft: string;
|
|
176
|
+
readonly primary: string;
|
|
177
|
+
readonly deep: string;
|
|
178
|
+
readonly sharp: string;
|
|
179
|
+
};
|
|
180
|
+
readonly infoActive: {
|
|
181
|
+
readonly subtle: string;
|
|
182
|
+
readonly soft: string;
|
|
183
|
+
readonly primary: string;
|
|
184
|
+
readonly deep: string;
|
|
185
|
+
readonly sharp: string;
|
|
186
|
+
};
|
|
187
|
+
};
|
|
188
|
+
bleed: {
|
|
189
|
+
readonly primary: string;
|
|
190
|
+
readonly soft: string;
|
|
191
|
+
};
|
|
192
|
+
}>;
|
|
193
|
+
}>;
|
|
194
|
+
font: Readonly<{
|
|
195
|
+
rawRem: Record<"$8" | "$10" | "$12" | "$14" | "$16" | "$18" | "$20" | "$22" | "$24" | "$26" | "$28" | "$30" | "$32" | "$34" | "$36" | "$38" | "$40" | "$42" | "$44" | "$46" | "$48" | "$50" | "$52" | "$54" | "$56" | "$58" | "$60" | "$62" | "$64" | "$66" | "$68", string>;
|
|
196
|
+
semantic: Record<"$h1" | "$h2" | "$h3" | "$h4" | "$h5" | "$h6" | "$subtitle1" | "$subtitle2" | "$subtitle3" | "$body1" | "$body2" | "$body3" | "$button" | "$caption" | "$overline", string>;
|
|
197
|
+
family: Readonly<{
|
|
198
|
+
serif: "'Gowun Batang', 'Noto Serif KR', serif";
|
|
199
|
+
sans: "'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', sans-serif";
|
|
200
|
+
mono: "'JetBrains Mono', 'Fira Code', Menlo, monospace";
|
|
201
|
+
}>;
|
|
202
|
+
weight: Readonly<{
|
|
203
|
+
light: "300";
|
|
204
|
+
regular: "400";
|
|
205
|
+
medium: "500";
|
|
206
|
+
semibold: "600";
|
|
207
|
+
bold: "700";
|
|
208
|
+
}>;
|
|
209
|
+
lineHeight: Readonly<{
|
|
210
|
+
tight: "1.25";
|
|
211
|
+
normal: "1.5";
|
|
212
|
+
relaxed: "1.75";
|
|
213
|
+
loose: "2.0";
|
|
214
|
+
}>;
|
|
215
|
+
letterSpacing: Readonly<{
|
|
216
|
+
tight: "-0.02em";
|
|
217
|
+
normal: "0em";
|
|
218
|
+
wide: "0.04em";
|
|
219
|
+
loose: "0.08em";
|
|
220
|
+
}>;
|
|
221
|
+
}>;
|
|
222
|
+
spacing: Readonly<{
|
|
223
|
+
compact: "0.25rem";
|
|
224
|
+
fine: "0.5rem";
|
|
225
|
+
moderate: "0.75rem";
|
|
226
|
+
base: "1rem";
|
|
227
|
+
void: "1.5rem";
|
|
228
|
+
wide: "2rem";
|
|
229
|
+
spacious: "3rem";
|
|
230
|
+
vast: "4rem";
|
|
231
|
+
}>;
|
|
232
|
+
radius: Readonly<{
|
|
233
|
+
sharp: "0px";
|
|
234
|
+
delicate: "0.25rem";
|
|
235
|
+
gentle: "0.5rem";
|
|
236
|
+
smooth: "0.75rem";
|
|
237
|
+
prominent: "1rem";
|
|
238
|
+
full: "9999px";
|
|
239
|
+
}>;
|
|
240
|
+
elevation: Readonly<{
|
|
241
|
+
none: "none";
|
|
242
|
+
damMuk: "0 1px 3px var(--asharyu-color-semantic-bleed-soft), 0 2px 8px var(--asharyu-color-semantic-bleed-primary)";
|
|
243
|
+
jungMuk: "0 4px 16px var(--asharyu-color-semantic-bleed-primary), 0 2px 4px var(--asharyu-color-semantic-bleed-soft)";
|
|
244
|
+
nongMuk: "0 12px 32px var(--asharyu-color-semantic-bleed-primary), 0 4px 12px var(--asharyu-color-semantic-bleed-soft)";
|
|
245
|
+
gukMuk: "0 20px 48px var(--asharyu-color-semantic-bleed-primary), 0 8px 16px var(--asharyu-color-semantic-bleed-soft)";
|
|
246
|
+
}>;
|
|
247
|
+
zIndex: Readonly<{
|
|
248
|
+
base: "0";
|
|
249
|
+
raised: "1";
|
|
250
|
+
docked: "10";
|
|
251
|
+
sticky: "100";
|
|
252
|
+
dropdown: "200";
|
|
253
|
+
backdrop: "500";
|
|
254
|
+
modal: "600";
|
|
255
|
+
popover: "700";
|
|
256
|
+
toast: "800";
|
|
257
|
+
tooltip: "900";
|
|
258
|
+
max: "9999";
|
|
259
|
+
}>;
|
|
260
|
+
motion: Readonly<{
|
|
261
|
+
kiUn: {
|
|
262
|
+
gentle: string;
|
|
263
|
+
sharp: string;
|
|
264
|
+
spread: string;
|
|
265
|
+
};
|
|
266
|
+
duration: {
|
|
267
|
+
decisive: string;
|
|
268
|
+
flow: string;
|
|
269
|
+
bleed: string;
|
|
270
|
+
};
|
|
271
|
+
}>;
|
|
272
|
+
stroke: Readonly<{
|
|
273
|
+
weight: {
|
|
274
|
+
sharp: string;
|
|
275
|
+
fine: string;
|
|
276
|
+
medium: string;
|
|
277
|
+
bold: string;
|
|
278
|
+
heavy: string;
|
|
279
|
+
};
|
|
280
|
+
ink: {
|
|
281
|
+
pressureLight: string;
|
|
282
|
+
pressureHeavy: string;
|
|
283
|
+
bleed: string;
|
|
284
|
+
};
|
|
285
|
+
sharp: "var(--asharyu-stroke-weight-fine) solid var(--asharyu-color-semantic-stroke)";
|
|
286
|
+
rough: "url(#ink-bleed-filter)";
|
|
287
|
+
}>;
|
|
288
|
+
interaction: Readonly<{
|
|
289
|
+
flow: {
|
|
290
|
+
sangSaeng: string;
|
|
291
|
+
};
|
|
292
|
+
feedback: {
|
|
293
|
+
sangGeukDecisive: string;
|
|
294
|
+
sangGeukSpread: string;
|
|
295
|
+
};
|
|
296
|
+
theme: {
|
|
297
|
+
bleed: string;
|
|
298
|
+
};
|
|
299
|
+
}>;
|
|
300
|
+
};
|
|
301
|
+
/**
|
|
302
|
+
* '검의 예리함'을 담아 키값을 Kebab-case로 변환합니다.
|
|
303
|
+
* $ 접두사 제거 및 Camel/PascalCase를 Kebab-case로 변환
|
|
304
|
+
*/
|
|
305
|
+
export declare const normalizeKey: (key: string) => string;
|
|
306
|
+
/**
|
|
307
|
+
* 'tokens' 객체는 Asharyu 디자인 토큰의 구조를 그대로 가지지만, 값은 CSS 변수 참조 문자열입니다.
|
|
308
|
+
* 예: tokens.color.semantic.text -> "var(--asharyu-color-semantic-text)"
|
|
309
|
+
* tokens.color.semantic.action.primary -> "var(--asharyu-color-semantic-action-primary)"
|
|
310
|
+
* tokens.spacing.void -> "var(--asharyu-spacing-void)"
|
|
311
|
+
* tokens.elevation.damMuk -> "var(--asharyu-elevation-dam-muk)"
|
|
312
|
+
*/
|
|
313
|
+
export declare const tokens: {
|
|
314
|
+
color: Readonly<{
|
|
315
|
+
raw: {
|
|
316
|
+
yang: {
|
|
317
|
+
0: string;
|
|
318
|
+
1: string;
|
|
319
|
+
2: string;
|
|
320
|
+
3: string;
|
|
321
|
+
4: string;
|
|
322
|
+
};
|
|
323
|
+
yin: {
|
|
324
|
+
0: string;
|
|
325
|
+
1: string;
|
|
326
|
+
2: string;
|
|
327
|
+
3: string;
|
|
328
|
+
4: string;
|
|
329
|
+
};
|
|
330
|
+
wood: {
|
|
331
|
+
0: string;
|
|
332
|
+
1: string;
|
|
333
|
+
2: string;
|
|
334
|
+
3: string;
|
|
335
|
+
4: string;
|
|
336
|
+
};
|
|
337
|
+
fire: {
|
|
338
|
+
0: string;
|
|
339
|
+
1: string;
|
|
340
|
+
2: string;
|
|
341
|
+
3: string;
|
|
342
|
+
4: string;
|
|
343
|
+
};
|
|
344
|
+
earth: {
|
|
345
|
+
0: string;
|
|
346
|
+
1: string;
|
|
347
|
+
2: string;
|
|
348
|
+
3: string;
|
|
349
|
+
4: string;
|
|
350
|
+
};
|
|
351
|
+
metal: {
|
|
352
|
+
0: string;
|
|
353
|
+
1: string;
|
|
354
|
+
2: string;
|
|
355
|
+
3: string;
|
|
356
|
+
4: string;
|
|
357
|
+
};
|
|
358
|
+
water: {
|
|
359
|
+
0: string;
|
|
360
|
+
1: string;
|
|
361
|
+
2: string;
|
|
362
|
+
3: string;
|
|
363
|
+
4: string;
|
|
364
|
+
};
|
|
365
|
+
hong: {
|
|
366
|
+
0: string;
|
|
367
|
+
1: string;
|
|
368
|
+
2: string;
|
|
369
|
+
3: string;
|
|
370
|
+
4: string;
|
|
371
|
+
};
|
|
372
|
+
byeok: {
|
|
373
|
+
0: string;
|
|
374
|
+
1: string;
|
|
375
|
+
2: string;
|
|
376
|
+
3: string;
|
|
377
|
+
4: string;
|
|
378
|
+
};
|
|
379
|
+
nok: {
|
|
380
|
+
0: string;
|
|
381
|
+
1: string;
|
|
382
|
+
2: string;
|
|
383
|
+
3: string;
|
|
384
|
+
4: string;
|
|
385
|
+
};
|
|
386
|
+
yuhwang: {
|
|
387
|
+
0: string;
|
|
388
|
+
1: string;
|
|
389
|
+
2: string;
|
|
390
|
+
3: string;
|
|
391
|
+
4: string;
|
|
392
|
+
};
|
|
393
|
+
ja: {
|
|
394
|
+
0: string;
|
|
395
|
+
1: string;
|
|
396
|
+
2: string;
|
|
397
|
+
3: string;
|
|
398
|
+
4: string;
|
|
399
|
+
};
|
|
400
|
+
};
|
|
401
|
+
semantic: Readonly<{
|
|
402
|
+
light: import("./color/semanticValue").ThemeTokens;
|
|
403
|
+
dark: import("./color/semanticValue").ThemeTokens;
|
|
404
|
+
scale: {
|
|
405
|
+
readonly subtle: string;
|
|
406
|
+
readonly soft: string;
|
|
407
|
+
readonly primary: string;
|
|
408
|
+
readonly deep: string;
|
|
409
|
+
readonly sharp: string;
|
|
410
|
+
};
|
|
411
|
+
background: string;
|
|
412
|
+
text: string;
|
|
413
|
+
stroke: string;
|
|
414
|
+
action: {
|
|
415
|
+
readonly subtle: string;
|
|
416
|
+
readonly soft: string;
|
|
417
|
+
readonly primary: string;
|
|
418
|
+
readonly deep: string;
|
|
419
|
+
readonly sharp: string;
|
|
420
|
+
};
|
|
421
|
+
danger: {
|
|
422
|
+
readonly subtle: string;
|
|
423
|
+
readonly soft: string;
|
|
424
|
+
readonly primary: string;
|
|
425
|
+
readonly deep: string;
|
|
426
|
+
readonly sharp: string;
|
|
427
|
+
};
|
|
428
|
+
surface: {
|
|
429
|
+
readonly subtle: string;
|
|
430
|
+
readonly soft: string;
|
|
431
|
+
readonly primary: string;
|
|
432
|
+
readonly deep: string;
|
|
433
|
+
readonly sharp: string;
|
|
434
|
+
};
|
|
435
|
+
border: {
|
|
436
|
+
readonly subtle: string;
|
|
437
|
+
readonly soft: string;
|
|
438
|
+
readonly primary: string;
|
|
439
|
+
readonly deep: string;
|
|
440
|
+
readonly sharp: string;
|
|
441
|
+
};
|
|
442
|
+
info: {
|
|
443
|
+
readonly subtle: string;
|
|
444
|
+
readonly soft: string;
|
|
445
|
+
readonly primary: string;
|
|
446
|
+
readonly deep: string;
|
|
447
|
+
readonly sharp: string;
|
|
448
|
+
};
|
|
449
|
+
status: {
|
|
450
|
+
readonly success: {
|
|
451
|
+
readonly subtle: string;
|
|
452
|
+
readonly soft: string;
|
|
453
|
+
readonly primary: string;
|
|
454
|
+
readonly deep: string;
|
|
455
|
+
readonly sharp: string;
|
|
456
|
+
};
|
|
457
|
+
readonly alertHover: {
|
|
458
|
+
readonly subtle: string;
|
|
459
|
+
readonly soft: string;
|
|
460
|
+
readonly primary: string;
|
|
461
|
+
readonly deep: string;
|
|
462
|
+
readonly sharp: string;
|
|
463
|
+
};
|
|
464
|
+
readonly actionFocus: {
|
|
465
|
+
readonly subtle: string;
|
|
466
|
+
readonly soft: string;
|
|
467
|
+
readonly primary: string;
|
|
468
|
+
readonly deep: string;
|
|
469
|
+
readonly sharp: string;
|
|
470
|
+
};
|
|
471
|
+
readonly subSurface: {
|
|
472
|
+
readonly subtle: string;
|
|
473
|
+
readonly soft: string;
|
|
474
|
+
readonly primary: string;
|
|
475
|
+
readonly deep: string;
|
|
476
|
+
readonly sharp: string;
|
|
477
|
+
};
|
|
478
|
+
readonly infoActive: {
|
|
479
|
+
readonly subtle: string;
|
|
480
|
+
readonly soft: string;
|
|
481
|
+
readonly primary: string;
|
|
482
|
+
readonly deep: string;
|
|
483
|
+
readonly sharp: string;
|
|
484
|
+
};
|
|
485
|
+
};
|
|
486
|
+
bleed: {
|
|
487
|
+
readonly primary: string;
|
|
488
|
+
readonly soft: string;
|
|
489
|
+
};
|
|
490
|
+
}>;
|
|
491
|
+
}>;
|
|
492
|
+
font: Readonly<{
|
|
493
|
+
rawRem: Record<"$8" | "$10" | "$12" | "$14" | "$16" | "$18" | "$20" | "$22" | "$24" | "$26" | "$28" | "$30" | "$32" | "$34" | "$36" | "$38" | "$40" | "$42" | "$44" | "$46" | "$48" | "$50" | "$52" | "$54" | "$56" | "$58" | "$60" | "$62" | "$64" | "$66" | "$68", string>;
|
|
494
|
+
semantic: Record<"$h1" | "$h2" | "$h3" | "$h4" | "$h5" | "$h6" | "$subtitle1" | "$subtitle2" | "$subtitle3" | "$body1" | "$body2" | "$body3" | "$button" | "$caption" | "$overline", string>;
|
|
495
|
+
family: Readonly<{
|
|
496
|
+
serif: "'Gowun Batang', 'Noto Serif KR', serif";
|
|
497
|
+
sans: "'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', sans-serif";
|
|
498
|
+
mono: "'JetBrains Mono', 'Fira Code', Menlo, monospace";
|
|
499
|
+
}>;
|
|
500
|
+
weight: Readonly<{
|
|
501
|
+
light: "300";
|
|
502
|
+
regular: "400";
|
|
503
|
+
medium: "500";
|
|
504
|
+
semibold: "600";
|
|
505
|
+
bold: "700";
|
|
506
|
+
}>;
|
|
507
|
+
lineHeight: Readonly<{
|
|
508
|
+
tight: "1.25";
|
|
509
|
+
normal: "1.5";
|
|
510
|
+
relaxed: "1.75";
|
|
511
|
+
loose: "2.0";
|
|
512
|
+
}>;
|
|
513
|
+
letterSpacing: Readonly<{
|
|
514
|
+
tight: "-0.02em";
|
|
515
|
+
normal: "0em";
|
|
516
|
+
wide: "0.04em";
|
|
517
|
+
loose: "0.08em";
|
|
518
|
+
}>;
|
|
519
|
+
}>;
|
|
520
|
+
spacing: Readonly<{
|
|
521
|
+
compact: "0.25rem";
|
|
522
|
+
fine: "0.5rem";
|
|
523
|
+
moderate: "0.75rem";
|
|
524
|
+
base: "1rem";
|
|
525
|
+
void: "1.5rem";
|
|
526
|
+
wide: "2rem";
|
|
527
|
+
spacious: "3rem";
|
|
528
|
+
vast: "4rem";
|
|
529
|
+
}>;
|
|
530
|
+
radius: Readonly<{
|
|
531
|
+
sharp: "0px";
|
|
532
|
+
delicate: "0.25rem";
|
|
533
|
+
gentle: "0.5rem";
|
|
534
|
+
smooth: "0.75rem";
|
|
535
|
+
prominent: "1rem";
|
|
536
|
+
full: "9999px";
|
|
537
|
+
}>;
|
|
538
|
+
elevation: Readonly<{
|
|
539
|
+
none: "none";
|
|
540
|
+
damMuk: "0 1px 3px var(--asharyu-color-semantic-bleed-soft), 0 2px 8px var(--asharyu-color-semantic-bleed-primary)";
|
|
541
|
+
jungMuk: "0 4px 16px var(--asharyu-color-semantic-bleed-primary), 0 2px 4px var(--asharyu-color-semantic-bleed-soft)";
|
|
542
|
+
nongMuk: "0 12px 32px var(--asharyu-color-semantic-bleed-primary), 0 4px 12px var(--asharyu-color-semantic-bleed-soft)";
|
|
543
|
+
gukMuk: "0 20px 48px var(--asharyu-color-semantic-bleed-primary), 0 8px 16px var(--asharyu-color-semantic-bleed-soft)";
|
|
544
|
+
}>;
|
|
545
|
+
zIndex: Readonly<{
|
|
546
|
+
base: "0";
|
|
547
|
+
raised: "1";
|
|
548
|
+
docked: "10";
|
|
549
|
+
sticky: "100";
|
|
550
|
+
dropdown: "200";
|
|
551
|
+
backdrop: "500";
|
|
552
|
+
modal: "600";
|
|
553
|
+
popover: "700";
|
|
554
|
+
toast: "800";
|
|
555
|
+
tooltip: "900";
|
|
556
|
+
max: "9999";
|
|
557
|
+
}>;
|
|
558
|
+
motion: Readonly<{
|
|
559
|
+
kiUn: {
|
|
560
|
+
gentle: string;
|
|
561
|
+
sharp: string;
|
|
562
|
+
spread: string;
|
|
563
|
+
};
|
|
564
|
+
duration: {
|
|
565
|
+
decisive: string;
|
|
566
|
+
flow: string;
|
|
567
|
+
bleed: string;
|
|
568
|
+
};
|
|
569
|
+
}>;
|
|
570
|
+
stroke: Readonly<{
|
|
571
|
+
weight: {
|
|
572
|
+
sharp: string;
|
|
573
|
+
fine: string;
|
|
574
|
+
medium: string;
|
|
575
|
+
bold: string;
|
|
576
|
+
heavy: string;
|
|
577
|
+
};
|
|
578
|
+
ink: {
|
|
579
|
+
pressureLight: string;
|
|
580
|
+
pressureHeavy: string;
|
|
581
|
+
bleed: string;
|
|
582
|
+
};
|
|
583
|
+
sharp: "var(--asharyu-stroke-weight-fine) solid var(--asharyu-color-semantic-stroke)";
|
|
584
|
+
rough: "url(#ink-bleed-filter)";
|
|
585
|
+
}>;
|
|
586
|
+
interaction: Readonly<{
|
|
587
|
+
flow: {
|
|
588
|
+
sangSaeng: string;
|
|
589
|
+
};
|
|
590
|
+
feedback: {
|
|
591
|
+
sangGeukDecisive: string;
|
|
592
|
+
sangGeukSpread: string;
|
|
593
|
+
};
|
|
594
|
+
theme: {
|
|
595
|
+
bleed: string;
|
|
596
|
+
};
|
|
597
|
+
}>;
|
|
598
|
+
};
|
|
599
|
+
/**
|
|
600
|
+
* 기운생동(氣韻生動)한 스타일 작성을 돕는 Tagged Template Literal입니다.
|
|
601
|
+
*/
|
|
602
|
+
export declare const css: (strings: TemplateStringsArray, ...values: any[]) => string;
|
|
603
|
+
export default AsharyuDesignToken;
|