@uniai-fe/uds-foundation 0.4.3 → 0.4.5
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/dist/data/color.d.ts +285 -4
- package/dist/data/layout.d.ts +50 -31
- package/dist/data/spacing.d.ts +30 -4
- package/dist/data/tokens.d.ts +497 -3
- package/dist/data/typography.d.ts +126 -3
- package/dist/helpers/index.d.ts +15 -11
- package/dist/index.css +23 -4
- package/dist/index.d.ts +1 -1
- package/dist/types/theme-tokens.d.ts +45 -56
- package/package.json +1 -1
- package/src/data/color.ts +34 -38
- package/src/data/layout.ts +8 -7
- package/src/data/spacing.ts +4 -6
- package/src/data/tokens.ts +3 -3
- package/src/data/typography.ts +1 -3
- package/src/helpers/index.ts +20 -9
- package/src/init/reset.scss +42 -1
- package/src/types/theme-tokens.ts +60 -58
package/dist/data/tokens.d.ts
CHANGED
|
@@ -1,8 +1,502 @@
|
|
|
1
|
-
import { ThemeTokens } from '../types/theme-tokens.js';
|
|
2
|
-
|
|
3
1
|
/**
|
|
4
2
|
* Foundation Data; theme token snapshot 집계 객체
|
|
5
3
|
*/
|
|
6
|
-
declare const themeTokens:
|
|
4
|
+
declare const themeTokens: {
|
|
5
|
+
color: {
|
|
6
|
+
primitive: {
|
|
7
|
+
cyan_10: string;
|
|
8
|
+
cyan_20: string;
|
|
9
|
+
cyan_30: string;
|
|
10
|
+
cyan_40: string;
|
|
11
|
+
cyan_45: string;
|
|
12
|
+
cyan_50: string;
|
|
13
|
+
cyan_55: string;
|
|
14
|
+
cyan_60: string;
|
|
15
|
+
cyan_70: string;
|
|
16
|
+
cyan_80: string;
|
|
17
|
+
cyan_90: string;
|
|
18
|
+
cyan_95: string;
|
|
19
|
+
cyan_99: string;
|
|
20
|
+
teal_10: string;
|
|
21
|
+
teal_20: string;
|
|
22
|
+
teal_30: string;
|
|
23
|
+
teal_40: string;
|
|
24
|
+
teal_45: string;
|
|
25
|
+
teal_50: string;
|
|
26
|
+
teal_55: string;
|
|
27
|
+
teal_60: string;
|
|
28
|
+
teal_70: string;
|
|
29
|
+
teal_80: string;
|
|
30
|
+
teal_90: string;
|
|
31
|
+
teal_95: string;
|
|
32
|
+
teal_99: string;
|
|
33
|
+
bright_green_10: string;
|
|
34
|
+
bright_green_20: string;
|
|
35
|
+
bright_green_30: string;
|
|
36
|
+
bright_green_40: string;
|
|
37
|
+
bright_green_45: string;
|
|
38
|
+
bright_green_50: string;
|
|
39
|
+
bright_green_55: string;
|
|
40
|
+
bright_green_60: string;
|
|
41
|
+
bright_green_70: string;
|
|
42
|
+
bright_green_80: string;
|
|
43
|
+
bright_green_90: string;
|
|
44
|
+
bright_green_95: string;
|
|
45
|
+
bright_green_99: string;
|
|
46
|
+
green_10: string;
|
|
47
|
+
green_20: string;
|
|
48
|
+
green_30: string;
|
|
49
|
+
green_40: string;
|
|
50
|
+
green_45: string;
|
|
51
|
+
green_50: string;
|
|
52
|
+
green_55: string;
|
|
53
|
+
green_60: string;
|
|
54
|
+
green_70: string;
|
|
55
|
+
green_80: string;
|
|
56
|
+
green_90: string;
|
|
57
|
+
green_95: string;
|
|
58
|
+
green_99: string;
|
|
59
|
+
lime_10: string;
|
|
60
|
+
lime_20: string;
|
|
61
|
+
lime_30: string;
|
|
62
|
+
lime_40: string;
|
|
63
|
+
lime_45: string;
|
|
64
|
+
lime_50: string;
|
|
65
|
+
lime_55: string;
|
|
66
|
+
lime_60: string;
|
|
67
|
+
lime_70: string;
|
|
68
|
+
lime_80: string;
|
|
69
|
+
lime_90: string;
|
|
70
|
+
lime_95: string;
|
|
71
|
+
lime_99: string;
|
|
72
|
+
yellow_10: string;
|
|
73
|
+
yellow_20: string;
|
|
74
|
+
yellow_30: string;
|
|
75
|
+
yellow_40: string;
|
|
76
|
+
yellow_45: string;
|
|
77
|
+
yellow_50: string;
|
|
78
|
+
yellow_55: string;
|
|
79
|
+
yellow_60: string;
|
|
80
|
+
yellow_70: string;
|
|
81
|
+
yellow_80: string;
|
|
82
|
+
yellow_90: string;
|
|
83
|
+
yellow_95: string;
|
|
84
|
+
yellow_99: string;
|
|
85
|
+
orange_10: string;
|
|
86
|
+
orange_20: string;
|
|
87
|
+
orange_30: string;
|
|
88
|
+
orange_40: string;
|
|
89
|
+
orange_45: string;
|
|
90
|
+
orange_50: string;
|
|
91
|
+
orange_55: string;
|
|
92
|
+
orange_60: string;
|
|
93
|
+
orange_70: string;
|
|
94
|
+
orange_80: string;
|
|
95
|
+
orange_90: string;
|
|
96
|
+
orange_95: string;
|
|
97
|
+
orange_99: string;
|
|
98
|
+
red_10: string;
|
|
99
|
+
red_20: string;
|
|
100
|
+
red_30: string;
|
|
101
|
+
red_40: string;
|
|
102
|
+
red_45: string;
|
|
103
|
+
red_50: string;
|
|
104
|
+
red_55: string;
|
|
105
|
+
red_60: string;
|
|
106
|
+
red_70: string;
|
|
107
|
+
red_80: string;
|
|
108
|
+
red_90: string;
|
|
109
|
+
red_95: string;
|
|
110
|
+
red_99: string;
|
|
111
|
+
pink_10: string;
|
|
112
|
+
pink_20: string;
|
|
113
|
+
pink_30: string;
|
|
114
|
+
pink_40: string;
|
|
115
|
+
pink_45: string;
|
|
116
|
+
pink_50: string;
|
|
117
|
+
pink_55: string;
|
|
118
|
+
pink_60: string;
|
|
119
|
+
pink_70: string;
|
|
120
|
+
pink_80: string;
|
|
121
|
+
pink_90: string;
|
|
122
|
+
pink_95: string;
|
|
123
|
+
pink_99: string;
|
|
124
|
+
magenta_10: string;
|
|
125
|
+
magenta_20: string;
|
|
126
|
+
magenta_30: string;
|
|
127
|
+
magenta_40: string;
|
|
128
|
+
magenta_45: string;
|
|
129
|
+
magenta_50: string;
|
|
130
|
+
magenta_55: string;
|
|
131
|
+
magenta_60: string;
|
|
132
|
+
magenta_70: string;
|
|
133
|
+
magenta_80: string;
|
|
134
|
+
magenta_90: string;
|
|
135
|
+
magenta_95: string;
|
|
136
|
+
magenta_99: string;
|
|
137
|
+
purple_10: string;
|
|
138
|
+
purple_20: string;
|
|
139
|
+
purple_30: string;
|
|
140
|
+
purple_40: string;
|
|
141
|
+
purple_45: string;
|
|
142
|
+
purple_50: string;
|
|
143
|
+
purple_55: string;
|
|
144
|
+
purple_60: string;
|
|
145
|
+
purple_70: string;
|
|
146
|
+
purple_80: string;
|
|
147
|
+
purple_90: string;
|
|
148
|
+
purple_95: string;
|
|
149
|
+
purple_99: string;
|
|
150
|
+
blue_10: string;
|
|
151
|
+
blue_20: string;
|
|
152
|
+
blue_30: string;
|
|
153
|
+
blue_40: string;
|
|
154
|
+
blue_45: string;
|
|
155
|
+
blue_50: string;
|
|
156
|
+
blue_55: string;
|
|
157
|
+
blue_60: string;
|
|
158
|
+
blue_70: string;
|
|
159
|
+
blue_80: string;
|
|
160
|
+
blue_90: string;
|
|
161
|
+
blue_95: string;
|
|
162
|
+
blue_99: string;
|
|
163
|
+
cool_gray_10: string;
|
|
164
|
+
cool_gray_20: string;
|
|
165
|
+
cool_gray_25: string;
|
|
166
|
+
cool_gray_30: string;
|
|
167
|
+
cool_gray_35: string;
|
|
168
|
+
cool_gray_40: string;
|
|
169
|
+
cool_gray_45: string;
|
|
170
|
+
cool_gray_50: string;
|
|
171
|
+
cool_gray_55: string;
|
|
172
|
+
cool_gray_60: string;
|
|
173
|
+
cool_gray_65: string;
|
|
174
|
+
cool_gray_70: string;
|
|
175
|
+
cool_gray_75: string;
|
|
176
|
+
cool_gray_80: string;
|
|
177
|
+
cool_gray_85: string;
|
|
178
|
+
cool_gray_90: string;
|
|
179
|
+
cool_gray_95: string;
|
|
180
|
+
cool_gray_99: string;
|
|
181
|
+
neutral_10: string;
|
|
182
|
+
neutral_20: string;
|
|
183
|
+
neutral_30: string;
|
|
184
|
+
neutral_40: string;
|
|
185
|
+
neutral_45: string;
|
|
186
|
+
neutral_50: string;
|
|
187
|
+
neutral_55: string;
|
|
188
|
+
neutral_60: string;
|
|
189
|
+
neutral_70: string;
|
|
190
|
+
neutral_80: string;
|
|
191
|
+
neutral_90: string;
|
|
192
|
+
neutral_95: string;
|
|
193
|
+
neutral_99: string;
|
|
194
|
+
common_99: string;
|
|
195
|
+
common_100: string;
|
|
196
|
+
common_0: string;
|
|
197
|
+
};
|
|
198
|
+
semantic: {
|
|
199
|
+
primary: {
|
|
200
|
+
default: string;
|
|
201
|
+
strong: string;
|
|
202
|
+
heavy: string;
|
|
203
|
+
};
|
|
204
|
+
secondary: {
|
|
205
|
+
default: string;
|
|
206
|
+
strong: string;
|
|
207
|
+
heavy: string;
|
|
208
|
+
};
|
|
209
|
+
tertiary: {
|
|
210
|
+
default: string;
|
|
211
|
+
strong: string;
|
|
212
|
+
heavy: string;
|
|
213
|
+
};
|
|
214
|
+
label: {
|
|
215
|
+
strong: string;
|
|
216
|
+
standard: string;
|
|
217
|
+
neutral: string;
|
|
218
|
+
alternative: string;
|
|
219
|
+
assistive: string;
|
|
220
|
+
disabled: string;
|
|
221
|
+
};
|
|
222
|
+
border: {
|
|
223
|
+
standard: {
|
|
224
|
+
cool_gray: string;
|
|
225
|
+
blue: string;
|
|
226
|
+
strong: string;
|
|
227
|
+
heavy: string;
|
|
228
|
+
alternative: string;
|
|
229
|
+
assistive: string;
|
|
230
|
+
};
|
|
231
|
+
};
|
|
232
|
+
background: {
|
|
233
|
+
standard: {
|
|
234
|
+
cool_gray: string;
|
|
235
|
+
neutral: string;
|
|
236
|
+
};
|
|
237
|
+
alternative: {
|
|
238
|
+
cool_gray: string;
|
|
239
|
+
neutral: string;
|
|
240
|
+
};
|
|
241
|
+
};
|
|
242
|
+
surface: {
|
|
243
|
+
static: {
|
|
244
|
+
white: string;
|
|
245
|
+
cool_gray: string;
|
|
246
|
+
cool_gray_darker: string;
|
|
247
|
+
neutral: string;
|
|
248
|
+
blue: string;
|
|
249
|
+
};
|
|
250
|
+
neutral: string;
|
|
251
|
+
standard: string;
|
|
252
|
+
strong: string;
|
|
253
|
+
heavy: string;
|
|
254
|
+
};
|
|
255
|
+
interaction: {
|
|
256
|
+
static: string;
|
|
257
|
+
disabled: string;
|
|
258
|
+
};
|
|
259
|
+
state: {
|
|
260
|
+
disabled: string;
|
|
261
|
+
primary_hover: string;
|
|
262
|
+
primary_pressed: string;
|
|
263
|
+
primary_selected: string;
|
|
264
|
+
secondary_hover: string;
|
|
265
|
+
secondary_pressed: string;
|
|
266
|
+
secondary_selected: string;
|
|
267
|
+
static_disabled: string;
|
|
268
|
+
};
|
|
269
|
+
icon: {
|
|
270
|
+
default: string;
|
|
271
|
+
alternative: string;
|
|
272
|
+
assistive: string;
|
|
273
|
+
disable: string;
|
|
274
|
+
disabled: string;
|
|
275
|
+
};
|
|
276
|
+
feedback: {
|
|
277
|
+
danger: string;
|
|
278
|
+
error: string;
|
|
279
|
+
warning: string;
|
|
280
|
+
success: string;
|
|
281
|
+
information: string;
|
|
282
|
+
new: string;
|
|
283
|
+
};
|
|
284
|
+
};
|
|
285
|
+
};
|
|
286
|
+
spacing: {
|
|
287
|
+
padding: {
|
|
288
|
+
padding_1: number;
|
|
289
|
+
padding_2: number;
|
|
290
|
+
padding_3: number;
|
|
291
|
+
padding_4: number;
|
|
292
|
+
padding_5: number;
|
|
293
|
+
padding_6: number;
|
|
294
|
+
padding_7: number;
|
|
295
|
+
padding_8: number;
|
|
296
|
+
padding_9: number;
|
|
297
|
+
padding_10: number;
|
|
298
|
+
padding_11: number;
|
|
299
|
+
};
|
|
300
|
+
gap: {
|
|
301
|
+
gap_1: number;
|
|
302
|
+
gap_2: number;
|
|
303
|
+
gap_3: number;
|
|
304
|
+
gap_4: number;
|
|
305
|
+
gap_5: number;
|
|
306
|
+
gap_6: number;
|
|
307
|
+
gap_7: number;
|
|
308
|
+
gap_8: number;
|
|
309
|
+
gap_9: number;
|
|
310
|
+
gap_10: number;
|
|
311
|
+
gap_11: number;
|
|
312
|
+
gap_12: number;
|
|
313
|
+
gap_13: number;
|
|
314
|
+
gap_14: number;
|
|
315
|
+
gap_15: number;
|
|
316
|
+
};
|
|
317
|
+
};
|
|
318
|
+
layout: {
|
|
319
|
+
breakpoint: {
|
|
320
|
+
xsmall: number;
|
|
321
|
+
small: number;
|
|
322
|
+
medium: number;
|
|
323
|
+
large: number;
|
|
324
|
+
};
|
|
325
|
+
size: {
|
|
326
|
+
xxsmall: number;
|
|
327
|
+
xsmall_1: number;
|
|
328
|
+
xsmall_2: number;
|
|
329
|
+
xsmall_3: number;
|
|
330
|
+
small_1: number;
|
|
331
|
+
small_2: number;
|
|
332
|
+
small_3: number;
|
|
333
|
+
medium_1: number;
|
|
334
|
+
medium_2: number;
|
|
335
|
+
medium_3: number;
|
|
336
|
+
medium_4: number;
|
|
337
|
+
large_1: number;
|
|
338
|
+
large_2: number;
|
|
339
|
+
xlarge_1: number;
|
|
340
|
+
xlarge_2: number;
|
|
341
|
+
};
|
|
342
|
+
radius: {
|
|
343
|
+
size: {
|
|
344
|
+
size_4x4: number;
|
|
345
|
+
size_8x8: number;
|
|
346
|
+
size_12x12: number;
|
|
347
|
+
size_16x16: number;
|
|
348
|
+
size_20x20: number;
|
|
349
|
+
size_24x24: number;
|
|
350
|
+
size_32x32: number;
|
|
351
|
+
size_40x40: number;
|
|
352
|
+
size_48x48: number;
|
|
353
|
+
size_56x56: number;
|
|
354
|
+
size_64x64: number;
|
|
355
|
+
size_72x72: number;
|
|
356
|
+
size_80x80: number;
|
|
357
|
+
size_96x96: number;
|
|
358
|
+
size_120x120: number;
|
|
359
|
+
};
|
|
360
|
+
level: {
|
|
361
|
+
xxsmall: number;
|
|
362
|
+
xsmall: number;
|
|
363
|
+
small: number;
|
|
364
|
+
medium_1: number;
|
|
365
|
+
medium_2: number;
|
|
366
|
+
medium_3: number;
|
|
367
|
+
medium_4: number;
|
|
368
|
+
large_1: number;
|
|
369
|
+
large_2: number;
|
|
370
|
+
xlarge: number;
|
|
371
|
+
};
|
|
372
|
+
};
|
|
373
|
+
};
|
|
374
|
+
typography: {
|
|
375
|
+
display: {
|
|
376
|
+
large: {
|
|
377
|
+
size: number;
|
|
378
|
+
line_height: string;
|
|
379
|
+
letter_spacing: number;
|
|
380
|
+
font_weight: number;
|
|
381
|
+
};
|
|
382
|
+
medium: {
|
|
383
|
+
size: number;
|
|
384
|
+
line_height: string;
|
|
385
|
+
letter_spacing: number;
|
|
386
|
+
font_weight: number;
|
|
387
|
+
};
|
|
388
|
+
small: {
|
|
389
|
+
size: number;
|
|
390
|
+
line_height: string;
|
|
391
|
+
letter_spacing: number;
|
|
392
|
+
font_weight: number;
|
|
393
|
+
};
|
|
394
|
+
};
|
|
395
|
+
heading: {
|
|
396
|
+
xlarge: {
|
|
397
|
+
size: number;
|
|
398
|
+
line_height: string;
|
|
399
|
+
letter_spacing: number;
|
|
400
|
+
font_weight: number;
|
|
401
|
+
};
|
|
402
|
+
large: {
|
|
403
|
+
size: number;
|
|
404
|
+
line_height: string;
|
|
405
|
+
letter_spacing: number;
|
|
406
|
+
font_weight: number;
|
|
407
|
+
};
|
|
408
|
+
medium: {
|
|
409
|
+
size: number;
|
|
410
|
+
line_height: string;
|
|
411
|
+
letter_spacing: number;
|
|
412
|
+
font_weight: number;
|
|
413
|
+
};
|
|
414
|
+
small: {
|
|
415
|
+
size: number;
|
|
416
|
+
line_height: string;
|
|
417
|
+
letter_spacing: number;
|
|
418
|
+
font_weight: number;
|
|
419
|
+
};
|
|
420
|
+
xsmall: {
|
|
421
|
+
size: number;
|
|
422
|
+
line_height: string;
|
|
423
|
+
letter_spacing: number;
|
|
424
|
+
font_weight: number;
|
|
425
|
+
};
|
|
426
|
+
xxsmall: {
|
|
427
|
+
size: number;
|
|
428
|
+
line_height: string;
|
|
429
|
+
letter_spacing: number;
|
|
430
|
+
font_weight: number;
|
|
431
|
+
};
|
|
432
|
+
};
|
|
433
|
+
body: {
|
|
434
|
+
large: {
|
|
435
|
+
size: number;
|
|
436
|
+
line_height: string;
|
|
437
|
+
letter_spacing: number;
|
|
438
|
+
font_weight: number;
|
|
439
|
+
};
|
|
440
|
+
medium: {
|
|
441
|
+
size: number;
|
|
442
|
+
line_height: string;
|
|
443
|
+
letter_spacing: number;
|
|
444
|
+
font_weight: number;
|
|
445
|
+
};
|
|
446
|
+
small: {
|
|
447
|
+
size: number;
|
|
448
|
+
line_height: string;
|
|
449
|
+
letter_spacing: number;
|
|
450
|
+
font_weight: number;
|
|
451
|
+
};
|
|
452
|
+
xsmall: {
|
|
453
|
+
size: number;
|
|
454
|
+
line_height: string;
|
|
455
|
+
letter_spacing: number;
|
|
456
|
+
font_weight: number;
|
|
457
|
+
};
|
|
458
|
+
xxsmall: {
|
|
459
|
+
size: number;
|
|
460
|
+
line_height: string;
|
|
461
|
+
letter_spacing: number;
|
|
462
|
+
font_weight: number;
|
|
463
|
+
};
|
|
464
|
+
};
|
|
465
|
+
label: {
|
|
466
|
+
large: {
|
|
467
|
+
size: number;
|
|
468
|
+
line_height: string;
|
|
469
|
+
letter_spacing: number;
|
|
470
|
+
font_weight: number;
|
|
471
|
+
};
|
|
472
|
+
medium: {
|
|
473
|
+
size: number;
|
|
474
|
+
line_height: string;
|
|
475
|
+
letter_spacing: number;
|
|
476
|
+
font_weight: number;
|
|
477
|
+
};
|
|
478
|
+
small: {
|
|
479
|
+
size: number;
|
|
480
|
+
line_height: string;
|
|
481
|
+
letter_spacing: number;
|
|
482
|
+
font_weight: number;
|
|
483
|
+
};
|
|
484
|
+
};
|
|
485
|
+
caption: {
|
|
486
|
+
large: {
|
|
487
|
+
size: number;
|
|
488
|
+
line_height: string;
|
|
489
|
+
letter_spacing: number;
|
|
490
|
+
font_weight: number;
|
|
491
|
+
};
|
|
492
|
+
medium: {
|
|
493
|
+
size: number;
|
|
494
|
+
line_height: string;
|
|
495
|
+
letter_spacing: number;
|
|
496
|
+
font_weight: number;
|
|
497
|
+
};
|
|
498
|
+
};
|
|
499
|
+
};
|
|
500
|
+
};
|
|
7
501
|
|
|
8
502
|
export { themeTokens };
|
|
@@ -1,8 +1,131 @@
|
|
|
1
|
-
import { ThemeTokens } from '../types/theme-tokens.js';
|
|
2
|
-
|
|
3
1
|
/**
|
|
4
2
|
* Foundation Typography Data; typography token snapshot
|
|
5
3
|
*/
|
|
6
|
-
declare const typography_tokens:
|
|
4
|
+
declare const typography_tokens: {
|
|
5
|
+
display: {
|
|
6
|
+
large: {
|
|
7
|
+
size: number;
|
|
8
|
+
line_height: string;
|
|
9
|
+
letter_spacing: number;
|
|
10
|
+
font_weight: number;
|
|
11
|
+
};
|
|
12
|
+
medium: {
|
|
13
|
+
size: number;
|
|
14
|
+
line_height: string;
|
|
15
|
+
letter_spacing: number;
|
|
16
|
+
font_weight: number;
|
|
17
|
+
};
|
|
18
|
+
small: {
|
|
19
|
+
size: number;
|
|
20
|
+
line_height: string;
|
|
21
|
+
letter_spacing: number;
|
|
22
|
+
font_weight: number;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
heading: {
|
|
26
|
+
xlarge: {
|
|
27
|
+
size: number;
|
|
28
|
+
line_height: string;
|
|
29
|
+
letter_spacing: number;
|
|
30
|
+
font_weight: number;
|
|
31
|
+
};
|
|
32
|
+
large: {
|
|
33
|
+
size: number;
|
|
34
|
+
line_height: string;
|
|
35
|
+
letter_spacing: number;
|
|
36
|
+
font_weight: number;
|
|
37
|
+
};
|
|
38
|
+
medium: {
|
|
39
|
+
size: number;
|
|
40
|
+
line_height: string;
|
|
41
|
+
letter_spacing: number;
|
|
42
|
+
font_weight: number;
|
|
43
|
+
};
|
|
44
|
+
small: {
|
|
45
|
+
size: number;
|
|
46
|
+
line_height: string;
|
|
47
|
+
letter_spacing: number;
|
|
48
|
+
font_weight: number;
|
|
49
|
+
};
|
|
50
|
+
xsmall: {
|
|
51
|
+
size: number;
|
|
52
|
+
line_height: string;
|
|
53
|
+
letter_spacing: number;
|
|
54
|
+
font_weight: number;
|
|
55
|
+
};
|
|
56
|
+
xxsmall: {
|
|
57
|
+
size: number;
|
|
58
|
+
line_height: string;
|
|
59
|
+
letter_spacing: number;
|
|
60
|
+
font_weight: number;
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
body: {
|
|
64
|
+
large: {
|
|
65
|
+
size: number;
|
|
66
|
+
line_height: string;
|
|
67
|
+
letter_spacing: number;
|
|
68
|
+
font_weight: number;
|
|
69
|
+
};
|
|
70
|
+
medium: {
|
|
71
|
+
size: number;
|
|
72
|
+
line_height: string;
|
|
73
|
+
letter_spacing: number;
|
|
74
|
+
font_weight: number;
|
|
75
|
+
};
|
|
76
|
+
small: {
|
|
77
|
+
size: number;
|
|
78
|
+
line_height: string;
|
|
79
|
+
letter_spacing: number;
|
|
80
|
+
font_weight: number;
|
|
81
|
+
};
|
|
82
|
+
xsmall: {
|
|
83
|
+
size: number;
|
|
84
|
+
line_height: string;
|
|
85
|
+
letter_spacing: number;
|
|
86
|
+
font_weight: number;
|
|
87
|
+
};
|
|
88
|
+
xxsmall: {
|
|
89
|
+
size: number;
|
|
90
|
+
line_height: string;
|
|
91
|
+
letter_spacing: number;
|
|
92
|
+
font_weight: number;
|
|
93
|
+
};
|
|
94
|
+
};
|
|
95
|
+
label: {
|
|
96
|
+
large: {
|
|
97
|
+
size: number;
|
|
98
|
+
line_height: string;
|
|
99
|
+
letter_spacing: number;
|
|
100
|
+
font_weight: number;
|
|
101
|
+
};
|
|
102
|
+
medium: {
|
|
103
|
+
size: number;
|
|
104
|
+
line_height: string;
|
|
105
|
+
letter_spacing: number;
|
|
106
|
+
font_weight: number;
|
|
107
|
+
};
|
|
108
|
+
small: {
|
|
109
|
+
size: number;
|
|
110
|
+
line_height: string;
|
|
111
|
+
letter_spacing: number;
|
|
112
|
+
font_weight: number;
|
|
113
|
+
};
|
|
114
|
+
};
|
|
115
|
+
caption: {
|
|
116
|
+
large: {
|
|
117
|
+
size: number;
|
|
118
|
+
line_height: string;
|
|
119
|
+
letter_spacing: number;
|
|
120
|
+
font_weight: number;
|
|
121
|
+
};
|
|
122
|
+
medium: {
|
|
123
|
+
size: number;
|
|
124
|
+
line_height: string;
|
|
125
|
+
letter_spacing: number;
|
|
126
|
+
font_weight: number;
|
|
127
|
+
};
|
|
128
|
+
};
|
|
129
|
+
};
|
|
7
130
|
|
|
8
131
|
export { typography_tokens };
|
package/dist/helpers/index.d.ts
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ThemeColorPrimitive, ThemeLayoutBreakpoint, ThemeLayoutRadius, ThemeLayoutSize, ThemeSpacingGap, ThemeSpacingPadding, ThemeTypography } from '../types/theme-tokens.js';
|
|
2
|
+
import '../data/color.js';
|
|
3
|
+
import '../data/layout.js';
|
|
4
|
+
import '../data/spacing.js';
|
|
5
|
+
import '../data/tokens.js';
|
|
6
|
+
import '../data/typography.js';
|
|
2
7
|
|
|
3
|
-
declare const tokens: ThemeTokens;
|
|
4
8
|
/**
|
|
5
9
|
* Foundation Helper Types; color primitive key
|
|
6
10
|
*/
|
|
7
|
-
type ThemeColorPrimitiveKey = keyof
|
|
11
|
+
type ThemeColorPrimitiveKey = keyof ThemeColorPrimitive;
|
|
8
12
|
/**
|
|
9
13
|
* Foundation Helpers; primitive color hex 조회
|
|
10
14
|
* @param {ThemeColorPrimitiveKey} key primitive color token key
|
|
@@ -24,11 +28,11 @@ declare function colorPrimitiveVar(key: ThemeColorPrimitiveKey): string;
|
|
|
24
28
|
/**
|
|
25
29
|
* Foundation Helper Types; spacing padding key
|
|
26
30
|
*/
|
|
27
|
-
type ThemeSpacingPaddingKey = keyof
|
|
31
|
+
type ThemeSpacingPaddingKey = keyof ThemeSpacingPadding;
|
|
28
32
|
/**
|
|
29
33
|
* Foundation Helper Types; spacing gap key
|
|
30
34
|
*/
|
|
31
|
-
type ThemeSpacingGapKey = keyof
|
|
35
|
+
type ThemeSpacingGapKey = keyof ThemeSpacingGap;
|
|
32
36
|
/**
|
|
33
37
|
* Foundation Helpers; spacing padding px 조회
|
|
34
38
|
* @param {ThemeSpacingPaddingKey} key spacing padding token key
|
|
@@ -64,19 +68,19 @@ declare function spacingGapVar(key: ThemeSpacingGapKey): string;
|
|
|
64
68
|
/**
|
|
65
69
|
* Foundation Helper Types; layout breakpoint key
|
|
66
70
|
*/
|
|
67
|
-
type ThemeLayoutBreakpointKey = keyof
|
|
71
|
+
type ThemeLayoutBreakpointKey = keyof ThemeLayoutBreakpoint;
|
|
68
72
|
/**
|
|
69
73
|
* Foundation Helper Types; layout size key
|
|
70
74
|
*/
|
|
71
|
-
type ThemeLayoutSizeKey = keyof
|
|
75
|
+
type ThemeLayoutSizeKey = keyof ThemeLayoutSize;
|
|
72
76
|
/**
|
|
73
77
|
* Foundation Helper Types; layout radius size key
|
|
74
78
|
*/
|
|
75
|
-
type ThemeLayoutRadiusSizeKey = keyof
|
|
79
|
+
type ThemeLayoutRadiusSizeKey = keyof ThemeLayoutRadius["size"];
|
|
76
80
|
/**
|
|
77
81
|
* Foundation Helper Types; layout radius level key
|
|
78
82
|
*/
|
|
79
|
-
type ThemeLayoutRadiusLevelKey = keyof
|
|
83
|
+
type ThemeLayoutRadiusLevelKey = keyof ThemeLayoutRadius["level"];
|
|
80
84
|
/**
|
|
81
85
|
* Foundation Helpers; layout breakpoint px 조회
|
|
82
86
|
* @param {ThemeLayoutBreakpointKey} key breakpoint token key
|
|
@@ -144,7 +148,7 @@ declare function layoutRadiusLevelVar(key: ThemeLayoutRadiusLevelKey): string;
|
|
|
144
148
|
/**
|
|
145
149
|
* Foundation Helper Types; typography category key
|
|
146
150
|
*/
|
|
147
|
-
type ThemeTypographyCategoryKey = keyof
|
|
151
|
+
type ThemeTypographyCategoryKey = keyof ThemeTypography;
|
|
148
152
|
/**
|
|
149
153
|
* Foundation Helpers; typography category variant 목록 조회
|
|
150
154
|
* @param {ThemeTypographyCategoryKey} category typography category key
|
|
@@ -152,6 +156,6 @@ type ThemeTypographyCategoryKey = keyof typeof tokens.typography;
|
|
|
152
156
|
* @example
|
|
153
157
|
* typographyVariants("body");
|
|
154
158
|
*/
|
|
155
|
-
declare function typographyVariants(category:
|
|
159
|
+
declare function typographyVariants<T extends ThemeTypographyCategoryKey>(category: T): ThemeTypography[T];
|
|
156
160
|
|
|
157
161
|
export { type ThemeColorPrimitiveKey, type ThemeLayoutBreakpointKey, type ThemeLayoutRadiusLevelKey, type ThemeLayoutRadiusSizeKey, type ThemeLayoutSizeKey, type ThemeSpacingGapKey, type ThemeSpacingPaddingKey, type ThemeTypographyCategoryKey, colorPrimitiveHex, colorPrimitiveVar, layoutBreakpointPx, layoutBreakpointVar, layoutRadiusLevelPx, layoutRadiusLevelVar, layoutRadiusSizePx, layoutRadiusSizeVar, layoutSizePx, layoutSizeVar, spacingGapPx, spacingGapVar, spacingPaddingPx, spacingPaddingVar, typographyVariants };
|