@uniai-fe/uds-foundation 0.0.1

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/index.css ADDED
@@ -0,0 +1,773 @@
1
+ @charset "UTF-8";
2
+ @layer theme.init {
3
+ :root {
4
+ -webkit-tap-highlight-color: transparent;
5
+ -webkit-text-size-adjust: none;
6
+ -moz-text-size-adjust: none;
7
+ text-size-adjust: none;
8
+ overflow-wrap: break-word;
9
+ word-break: break-word;
10
+ }
11
+ *,
12
+ *::before,
13
+ *::after {
14
+ margin: 0;
15
+ padding: 0;
16
+ border: 0;
17
+ box-sizing: border-box;
18
+ }
19
+ * {
20
+ letter-spacing: -0.05em;
21
+ flex-shrink: 0;
22
+ overscroll-behavior-y: none;
23
+ }
24
+ *:focus,
25
+ *:focus-within,
26
+ *:focus-visible {
27
+ outline: none;
28
+ }
29
+ html {
30
+ width: 100%;
31
+ font-size: 10px;
32
+ font-family: var(--font-family-sans);
33
+ background-color: #fff;
34
+ touch-action: manipulation;
35
+ }
36
+ body {
37
+ width: 100%;
38
+ position: relative;
39
+ background: none;
40
+ }
41
+ h1,
42
+ h2,
43
+ h3,
44
+ h4,
45
+ h5,
46
+ h6 {
47
+ margin: 0;
48
+ padding: 0;
49
+ font-weight: 500;
50
+ line-height: 1em;
51
+ }
52
+ strong,
53
+ b {
54
+ font-weight: 700;
55
+ line-height: 1em;
56
+ }
57
+ p,
58
+ span,
59
+ i,
60
+ sup,
61
+ sub,
62
+ del,
63
+ ins,
64
+ s {
65
+ margin: 0;
66
+ padding: 0;
67
+ line-height: 1em;
68
+ word-break: keep-all;
69
+ }
70
+ i,
71
+ address,
72
+ cite,
73
+ em,
74
+ q {
75
+ font-weight: 400;
76
+ font-style: normal;
77
+ }
78
+ blockquote,
79
+ abbr,
80
+ dfn {
81
+ font-weight: 400;
82
+ }
83
+ pre,
84
+ code,
85
+ samp,
86
+ kbd,
87
+ var {
88
+ font-family: "Consolas", "Monaco", "Menlo", "DejaVu Sans Mono", SFMono-Regular, "Liberation Mono", "Courier New", monospace;
89
+ }
90
+ blockquote,
91
+ q {
92
+ quotes: none;
93
+ }
94
+ blockquote::before,
95
+ blockquote::after,
96
+ q::before,
97
+ q::after {
98
+ content: "";
99
+ }
100
+ img,
101
+ svg {
102
+ max-width: 100%;
103
+ -o-object-fit: contain;
104
+ object-fit: contain;
105
+ perspective: 1;
106
+ }
107
+ li,
108
+ dt,
109
+ dd {
110
+ list-style: none;
111
+ }
112
+ table {
113
+ width: 100%;
114
+ border-collapse: collapse;
115
+ border-spacing: 0;
116
+ table-layout: fixed;
117
+ }
118
+ label {
119
+ display: block;
120
+ }
121
+ legend,
122
+ caption {
123
+ display: none;
124
+ }
125
+ article,
126
+ aside,
127
+ footer,
128
+ header,
129
+ main,
130
+ nav,
131
+ section,
132
+ time,
133
+ audio,
134
+ canvas,
135
+ figure,
136
+ figcaption,
137
+ video,
138
+ meter,
139
+ progress,
140
+ details,
141
+ summary {
142
+ display: block;
143
+ }
144
+ figure {
145
+ position: relative;
146
+ width: -moz-fit-content;
147
+ width: fit-content;
148
+ height: -moz-fit-content;
149
+ height: fit-content;
150
+ font-size: 0;
151
+ }
152
+ a {
153
+ display: block;
154
+ color: #333;
155
+ text-decoration: none;
156
+ cursor: pointer;
157
+ }
158
+ input,
159
+ select,
160
+ button,
161
+ textarea {
162
+ display: block;
163
+ max-width: 100%;
164
+ background: transparent;
165
+ border-radius: 0;
166
+ box-shadow: none;
167
+ outline: none;
168
+ caret-color: transparent;
169
+ -webkit-appearance: none;
170
+ -moz-appearance: none;
171
+ appearance: none;
172
+ }
173
+ button {
174
+ cursor: pointer;
175
+ font-family: inherit;
176
+ -webkit-user-select: none;
177
+ -moz-user-select: none;
178
+ user-select: none;
179
+ }
180
+ textarea {
181
+ resize: none;
182
+ }
183
+ select {
184
+ -webkit-user-select: none;
185
+ -moz-user-select: none;
186
+ user-select: none;
187
+ }
188
+ select::-ms-expand {
189
+ opacity: 0;
190
+ }
191
+ input::-moz-placeholder, textarea::-moz-placeholder {
192
+ opacity: 1;
193
+ color: #959595;
194
+ }
195
+ input::placeholder,
196
+ textarea::placeholder {
197
+ opacity: 1;
198
+ color: #959595;
199
+ }
200
+ input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
201
+ color: transparent;
202
+ }
203
+ input:focus::placeholder,
204
+ textarea:focus::placeholder {
205
+ color: transparent;
206
+ }
207
+ [type=button],
208
+ [type=reset],
209
+ [type=submit] {
210
+ -webkit-appearance: button;
211
+ -moz-appearance: button;
212
+ appearance: button;
213
+ }
214
+ [type=search] {
215
+ -webkit-appearance: textfield;
216
+ -moz-appearance: textfield;
217
+ appearance: textfield;
218
+ outline-offset: -2px;
219
+ }
220
+ :-webkit-inner-spin-button,
221
+ ::-webkit-outer-spin-button {
222
+ height: auto;
223
+ }
224
+ ::-webkit-search-decoration,
225
+ ::-webkit-search-cancel-button {
226
+ -webkit-appearance: none;
227
+ appearance: none;
228
+ }
229
+ ::-webkit-file-upload-button {
230
+ -webkit-appearance: button;
231
+ appearance: button;
232
+ }
233
+ input[type=date],
234
+ input[type=number] {
235
+ -webkit-appearance: none;
236
+ -moz-appearance: none;
237
+ appearance: none;
238
+ }
239
+ input[type=date]::-webkit-inner-spin-button,
240
+ input[type=number]::-webkit-inner-spin-button {
241
+ display: none;
242
+ }
243
+ input[type=date]::-webkit-calendar-picker-indicator,
244
+ input[type=number]::-webkit-calendar-picker-indicator {
245
+ opacity: 0;
246
+ }
247
+ input[type=date]::-webkit-clear-button,
248
+ input[type=number]::-webkit-clear-button {
249
+ display: none;
250
+ }
251
+ input[type=date]::-ms-clear,
252
+ input[type=number]::-ms-clear {
253
+ display: none;
254
+ }
255
+ input[type=range]::-webkit-slider-thumb {
256
+ -webkit-appearance: none;
257
+ appearance: none;
258
+ }
259
+ input[type=checkbox] {
260
+ -webkit-appearance: checkbox;
261
+ -moz-appearance: checkbox;
262
+ appearance: checkbox;
263
+ }
264
+ button:disabled {
265
+ cursor: default;
266
+ }
267
+ progress {
268
+ -webkit-appearance: none;
269
+ -moz-appearance: none;
270
+ appearance: none;
271
+ border: 1px solid #e1e1e1;
272
+ }
273
+ progress::-webkit-progress-bar {
274
+ background-color: #fff;
275
+ }
276
+ progress::-webkit-progress-value {
277
+ background-color: grey;
278
+ }
279
+ @media (orientation: landscape) {
280
+ html.mobile-device {
281
+ font-size: 1vw;
282
+ }
283
+ }
284
+ @media (orientation: portrait) {
285
+ html.mobile-device {
286
+ font-size: 1vw;
287
+ }
288
+ }
289
+ }
290
+ @layer theme.init {
291
+ html,
292
+ body {
293
+ width: 100%;
294
+ height: 100%;
295
+ position: fixed;
296
+ top: 0;
297
+ left: 0;
298
+ overflow: auto;
299
+ z-index: 0;
300
+ }
301
+ }
302
+ @layer theme.tokens.color {
303
+ :root {
304
+ --color-common-100: #fff;
305
+ --color-common-0: #000;
306
+ --color-neutral-10: #1a1a1a;
307
+ --color-neutral-20: #333333;
308
+ --color-neutral-30: #4d4d4d;
309
+ --color-neutral-40: #666666;
310
+ --color-neutral-45: #737373;
311
+ --color-neutral-50: #808080;
312
+ --color-neutral-55: #8c8c8c;
313
+ --color-neutral-60: #999999;
314
+ --color-neutral-70: #b3b3b3;
315
+ --color-neutral-80: #cccccc;
316
+ --color-neutral-90: #e6e6e6;
317
+ --color-neutral-95: #f2f2f2;
318
+ --color-neutral-99: #fcfcfc;
319
+ --color-cool-gray-10: #18191b;
320
+ --color-cool-gray-20: #313235;
321
+ --color-cool-gray-25: #3d3f43;
322
+ --color-cool-gray-30: #494b50;
323
+ --color-cool-gray-35: #55585e;
324
+ --color-cool-gray-40: #61656b;
325
+ --color-cool-gray-45: #6d7178;
326
+ --color-cool-gray-50: #797e86;
327
+ --color-cool-gray-55: #878b92;
328
+ --color-cool-gray-60: #94989e;
329
+ --color-cool-gray-65: #a1a5aa;
330
+ --color-cool-gray-70: #afb1b6;
331
+ --color-cool-gray-75: #bcbec2;
332
+ --color-cool-gray-80: #cacbce;
333
+ --color-cool-gray-85: #d7d8db;
334
+ --color-cool-gray-90: #e4e5e7;
335
+ --color-cool-gray-95: #f2f2f3;
336
+ --color-cool-gray-99: #fcfcfd;
337
+ --color-blue-10: #001233;
338
+ --color-blue-20: #002466;
339
+ --color-blue-30: #003699;
340
+ --color-blue-40: #0047cc;
341
+ --color-blue-45: #0050e5;
342
+ --color-blue-50: #0059ff;
343
+ --color-blue-55: #1a6aff;
344
+ --color-blue-60: #337aff;
345
+ --color-blue-70: #669cff;
346
+ --color-blue-80: #99bdff;
347
+ --color-blue-90: #ccdeff;
348
+ --color-blue-95: #e5eeff;
349
+ --color-blue-99: #fafcff;
350
+ --color-purple-10: #120033;
351
+ --color-purple-20: #240066;
352
+ --color-purple-30: #360099;
353
+ --color-purple-40: #4800cc;
354
+ --color-purple-45: #5200e5;
355
+ --color-purple-50: #5b00ff;
356
+ --color-purple-55: #6c1bff;
357
+ --color-purple-60: #7b33ff;
358
+ --color-purple-70: #9c66ff;
359
+ --color-purple-80: #bd99ff;
360
+ --color-purple-90: #deccff;
361
+ --color-purple-95: #efe5ff;
362
+ --color-purple-99: #fcfaff;
363
+ --color-magenta-10: #32012e;
364
+ --color-magenta-20: #64025b;
365
+ --color-magenta-30: #950489;
366
+ --color-magenta-40: #c705b6;
367
+ --color-magenta-45: #e005cd;
368
+ --color-magenta-50: #f906e4;
369
+ --color-magenta-55: #fa1fe7;
370
+ --color-magenta-60: #fa38e9;
371
+ --color-magenta-70: #fb6aef;
372
+ --color-magenta-80: #fd9bf4;
373
+ --color-magenta-90: #fecdfa;
374
+ --color-magenta-95: #fee6fc;
375
+ --color-magenta-99: #fffafe;
376
+ --color-pink-10: #320116;
377
+ --color-pink-20: #63032b;
378
+ --color-pink-30: #950441;
379
+ --color-pink-40: #c70556;
380
+ --color-pink-45: #e00661;
381
+ --color-pink-50: #f8076c;
382
+ --color-pink-55: #f91f7a;
383
+ --color-pink-60: #fa3889;
384
+ --color-pink-70: #fb6aa7;
385
+ --color-pink-80: #fc9cc4;
386
+ --color-pink-90: #fecde2;
387
+ --color-pink-95: #fee6f0;
388
+ --color-pink-99: #fffafc;
389
+ --color-red-10: #310602;
390
+ --color-red-20: #610d05;
391
+ --color-red-30: #921307;
392
+ --color-red-40: #c21a0a;
393
+ --color-red-45: #da1d0b;
394
+ --color-red-50: #f2200d;
395
+ --color-red-55: #f43625;
396
+ --color-red-60: #f54d3d;
397
+ --color-red-70: #f7796e;
398
+ --color-red-80: #faa69e;
399
+ --color-red-90: #fcd2cf;
400
+ --color-red-95: #fde8e7;
401
+ --color-red-99: #fffafa;
402
+ --color-orange-10: #331100;
403
+ --color-orange-20: #662200;
404
+ --color-orange-30: #993300;
405
+ --color-orange-40: #cc4400;
406
+ --color-orange-45: #e54d00;
407
+ --color-orange-50: #ff5500;
408
+ --color-orange-55: #ff661a;
409
+ --color-orange-60: #ff7733;
410
+ --color-orange-70: #ff9966;
411
+ --color-orange-80: #ffbb99;
412
+ --color-orange-90: #ffddcc;
413
+ --color-orange-95: #ffeee5;
414
+ --color-orange-99: #fffcfa;
415
+ --color-yellow-10: #302903;
416
+ --color-yellow-20: #615205;
417
+ --color-yellow-30: #917a08;
418
+ --color-yellow-40: #c2a30a;
419
+ --color-yellow-45: #dab80b;
420
+ --color-yellow-50: #f2cc0d;
421
+ --color-yellow-55: #f4d125;
422
+ --color-yellow-60: #f5d63d;
423
+ --color-yellow-70: #f7e06e;
424
+ --color-yellow-80: #faeb9e;
425
+ --color-yellow-90: #fcf5cf;
426
+ --color-yellow-95: #fefae7;
427
+ --color-yellow-99: #fffefa;
428
+ --color-lime-10: #2b3300;
429
+ --color-lime-20: #556600;
430
+ --color-lime-30: #809900;
431
+ --color-lime-40: #aacc00;
432
+ --color-lime-45: #bfe500;
433
+ --color-lime-50: #d5ff00;
434
+ --color-lime-55: #d9ff1a;
435
+ --color-lime-60: #ddff33;
436
+ --color-lime-70: #e6ff66;
437
+ --color-lime-80: #eeff99;
438
+ --color-lime-90: #f7ffcc;
439
+ --color-lime-95: #fbffe5;
440
+ --color-lime-99: #fefffa;
441
+ --color-green-10: #062d13;
442
+ --color-green-20: #0d5926;
443
+ --color-green-30: #138639;
444
+ --color-green-40: #1ab24d;
445
+ --color-green-45: #1dc956;
446
+ --color-green-50: #20df60;
447
+ --color-green-55: #36e270;
448
+ --color-green-60: #4de580;
449
+ --color-green-70: #79ec9f;
450
+ --color-green-80: #a6f2bf;
451
+ --color-green-90: #d2f9df;
452
+ --color-green-95: #e9fcef;
453
+ --color-green-99: #fbfefc;
454
+ --color-bright-green-10: #213003;
455
+ --color-bright-green-20: #426105;
456
+ --color-bright-green-30: #639108;
457
+ --color-bright-green-40: #84c10b;
458
+ --color-bright-green-45: #95da0c;
459
+ --color-bright-green-50: #a5f20d;
460
+ --color-bright-green-55: #aef325;
461
+ --color-bright-green-60: #b7f43e;
462
+ --color-bright-green-70: #c9f76e;
463
+ --color-bright-green-80: #dbfa9e;
464
+ --color-bright-green-90: #edfccf;
465
+ --color-bright-green-95: #f6fee7;
466
+ --color-bright-green-99: #fdfffa;
467
+ --color-teal-10: #062d20;
468
+ --color-teal-20: #0d5940;
469
+ --color-teal-30: #13865f;
470
+ --color-teal-40: #1ab27f;
471
+ --color-teal-45: #1dc98f;
472
+ --color-teal-50: #20df9f;
473
+ --color-teal-55: #36e2a9;
474
+ --color-teal-60: #4de5b2;
475
+ --color-teal-70: #79ecc5;
476
+ --color-teal-80: #a6f2d9;
477
+ --color-teal-90: #d2f9ec;
478
+ --color-teal-95: #e9fcf5;
479
+ --color-teal-99: #fbfefd;
480
+ --color-cyan-10: #002f33;
481
+ --color-cyan-20: #005e66;
482
+ --color-cyan-30: #008c99;
483
+ --color-cyan-40: #00bbcc;
484
+ --color-cyan-45: #00d2e5;
485
+ --color-cyan-50: #00eaff;
486
+ --color-cyan-55: #1aecff;
487
+ --color-cyan-60: #33eeff;
488
+ --color-cyan-70: #66f2ff;
489
+ --color-cyan-80: #99f7ff;
490
+ --color-cyan-90: #ccfbff;
491
+ --color-cyan-95: #e5fdff;
492
+ --color-cyan-99: #faffff;
493
+ }
494
+ }
495
+ @layer theme.tokens.color {
496
+ :root,
497
+ .theme-light {
498
+ --color-primary-default: var(--color-blue-55);
499
+ --color-primary-strong: var(--color-blue-45);
500
+ --color-primary-heavy: var(--color-blue-30);
501
+ --color-secondary-default: var(--color-blue-95);
502
+ --color-secondary-strong: var(--color-blue-90);
503
+ --color-secondary-heavy: var(--color-blue-80);
504
+ --color-tertiary-default: var(--color-cool-gray-95);
505
+ --color-tertiary-strong: var(--color-cool-gray-90);
506
+ --color-tertiary-heavy: var(--color-cool-gray-80);
507
+ }
508
+ }
509
+ @layer theme.tokens.color {
510
+ :root,
511
+ .theme-light {
512
+ --color-label-strong: var(--color-cool-gray-10);
513
+ --color-label-standard: var(--color-cool-gray-20);
514
+ --color-label-neutral: var(--color-cool-gray-50);
515
+ --color-label-alternative: var(--color-cool-gray-70);
516
+ --color-label-assistive: var(--color-cool-gray-80);
517
+ --color-label-disabled: var(--color-cool-gray-80);
518
+ }
519
+ }
520
+ @layer theme.tokens.color {
521
+ :root,
522
+ .theme-light {
523
+ --color-border-standard-cool-gray: var(--color-cool-gray-90);
524
+ --color-border-standard-blue: var(--color-blue-90);
525
+ --color-border-standard-strong: var(--color-cool-gray-75);
526
+ --color-border-standard-heavy: var(--color-cool-gray-20);
527
+ --color-border-standard-alternative: var(--color-cool-gray-80);
528
+ --color-border-standard-assistive: var(--color-cool-gray-90);
529
+ }
530
+ }
531
+ @layer theme.tokens.color {
532
+ :root,
533
+ .theme-light {
534
+ --color-bg-standard-cool-gray: var(--color-cool-gray-99);
535
+ --color-bg-alternative-cool-gray: var(--color-cool-gray-95);
536
+ --color-bg-standard-neutral: var(--color-neutral-99);
537
+ --color-bg-alternative-neutral: var(--color-neutral-95);
538
+ }
539
+ }
540
+ @layer theme.tokens.color {
541
+ :root,
542
+ .theme-light {
543
+ --color-bg-surface-static-white: var(--color-common-100);
544
+ --color-bg-surface-static-cool-gray: var(--color-cool-gray-99);
545
+ --color-bg-surface-static-blue: var(--color-blue-95);
546
+ --color-bg-surface-neutral: var(--color-neutral-95);
547
+ --color-bg-surface-standard: var(--color-cool-gray-95);
548
+ --color-bg-surface-strong: var(--color-neutral-80);
549
+ --color-bg-surface-heavy: var(--color-cool-gray-20);
550
+ }
551
+ }
552
+ @layer theme.tokens.color {
553
+ :root,
554
+ .theme-light {
555
+ --color-interaction-static: var(--color-common-100);
556
+ --color-interaction-disabled: var(--color-cool-gray-95);
557
+ }
558
+ }
559
+ @layer theme.tokens.color {
560
+ :root,
561
+ .theme-light {
562
+ --color-danger: var(--color-red-40);
563
+ --color-error: var(--color-red-45);
564
+ --color-warning: var(--color-yellow-50);
565
+ --color-success: var(--color-green-40);
566
+ --color-information: var(--color-blue-60);
567
+ --color-new: var(--color-red-50);
568
+ }
569
+ }
570
+ @layer theme.tokens.spacing {
571
+ :root {
572
+ --spacing-padding-1: 2px;
573
+ --spacing-padding-2: 4px;
574
+ --spacing-padding-3: 6px;
575
+ --spacing-padding-4: 8px;
576
+ --spacing-padding-5: 12px;
577
+ --spacing-padding-6: 16px;
578
+ --spacing-padding-7: 20px;
579
+ --spacing-padding-8: 24px;
580
+ --spacing-padding-9: 28px;
581
+ --spacing-padding-10: 32px;
582
+ --spacing-padding-11: 40px;
583
+ }
584
+ }
585
+ @layer theme.tokens.spacing {
586
+ :root {
587
+ --spacing-gap-1: 2px;
588
+ --spacing-gap-2: 4px;
589
+ --spacing-gap-3: 6px;
590
+ --spacing-gap-4: 8px;
591
+ --spacing-gap-5: 12px;
592
+ --spacing-gap-6: 16px;
593
+ --spacing-gap-7: 20px;
594
+ --spacing-gap-8: 24px;
595
+ --spacing-gap-9: 28px;
596
+ --spacing-gap-10: 32px;
597
+ --spacing-gap-11: 36px;
598
+ --spacing-gap-12: 40px;
599
+ --spacing-gap-13: 48px;
600
+ --spacing-gap-14: 64px;
601
+ --spacing-gap-15: 80px;
602
+ }
603
+ }
604
+ @layer theme.tokens.layout {
605
+ :root {
606
+ --theme-breakpoint-xsmall-start: 0px;
607
+ --theme-breakpoint-small-start: 768px;
608
+ --theme-breakpoint-medium-start: 992px;
609
+ --theme-breakpoint-large-start: 1200px;
610
+ }
611
+ }
612
+ @layer theme.tokens.layout {
613
+ :root {
614
+ --theme-size-xxsmall: 4px;
615
+ --theme-size-xsmall-1: 8px;
616
+ --theme-size-xsmall-2: 12px;
617
+ --theme-size-xsmall-3: 16px;
618
+ --theme-size-small-1: 20px;
619
+ --theme-size-small-2: 24px;
620
+ --theme-size-small-3: 32px;
621
+ --theme-size-medium-1: 40px;
622
+ --theme-size-medium-2: 48px;
623
+ --theme-size-medium-3: 56px;
624
+ --theme-size-medium-4: 64px;
625
+ --theme-size-large-1: 72px;
626
+ --theme-size-large-2: 80px;
627
+ --theme-size-xlarge-1: 96px;
628
+ --theme-size-xlarge-2: 120px;
629
+ }
630
+ }
631
+ @layer theme.tokens.layout {
632
+ :root {
633
+ --theme-radius-4x4: 1px;
634
+ --theme-radius-8x8: 2px;
635
+ --theme-radius-12x12: 2px;
636
+ --theme-radius-16x16: 2px;
637
+ --theme-radius-20x20: 4px;
638
+ --theme-radius-24x24: 4px;
639
+ --theme-radius-32x32: 4px;
640
+ --theme-radius-40x40: 6px;
641
+ --theme-radius-48x48: 6px;
642
+ --theme-radius-56x56: 8px;
643
+ --theme-radius-64x64: 10px;
644
+ --theme-radius-72x72: 12px;
645
+ --theme-radius-80x80: 16px;
646
+ --theme-radius-96x96: 16px;
647
+ --theme-radius-120x120: 16px;
648
+ --theme-radius-xxsmall: 1px;
649
+ --theme-radius-xsmall: 2px;
650
+ --theme-radius-small: 4px;
651
+ --theme-radius-medium-1: 6px;
652
+ --theme-radius-medium-2: 6px;
653
+ --theme-radius-medium-3: 8px;
654
+ --theme-radius-medium-4: 10px;
655
+ --theme-radius-large-1: 12px;
656
+ --theme-radius-large-2: 16px;
657
+ --theme-radius-xlarge: 16px;
658
+ }
659
+ }
660
+ @layer theme.tokens.typography {
661
+ :root {
662
+ --font-family-pretendard:
663
+ "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable",
664
+ "Pretendard", "Noto Sans KR", "-apple-system", "BlinkMacSystemFont",
665
+ "Apple SD Gothic Neo", "Segoe UI", "Roboto", "Helvetica",
666
+ "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji",
667
+ "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum",
668
+ "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
669
+ --font-family-inter:
670
+ "InterVariable", "Inter", "-apple-system", "BlinkMacSystemFont",
671
+ "Segoe UI", "Roboto", "Helvetica", "Helvetica Neue", "Apple Color Emoji",
672
+ "Segoe UI Emoji", "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움",
673
+ "dotum", "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
674
+ --font-family-system:
675
+ "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica",
676
+ "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji",
677
+ "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum",
678
+ "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
679
+ --font-family-sans: var(--font-family-pretendard);
680
+ }
681
+ }
682
+ @layer theme.tokens.typography {
683
+ :root {
684
+ --font-display-large-size: 60px;
685
+ --font-display-large-line-height: 1.4em;
686
+ --font-display-large-letter-spacing: -0.2px;
687
+ --font-display-large-weight: 700;
688
+ --font-display-medium-size: 44px;
689
+ --font-display-medium-line-height: 1.4em;
690
+ --font-display-medium-letter-spacing: -0.2px;
691
+ --font-display-medium-weight: 700;
692
+ --font-display-small-size: 36px;
693
+ --font-display-small-line-height: 1.4em;
694
+ --font-display-small-letter-spacing: -0.2px;
695
+ --font-display-small-weight: 600;
696
+ }
697
+ }
698
+ @layer theme.tokens.typography {
699
+ :root {
700
+ --font-heading-xlarge-size: 40px;
701
+ --font-heading-xlarge-line-height: 1.4em;
702
+ --font-heading-xlarge-letter-spacing: -0.2px;
703
+ --font-heading-xlarge-weight: 600;
704
+ --font-heading-large-size: 32px;
705
+ --font-heading-large-line-height: 1.4em;
706
+ --font-heading-large-letter-spacing: -0.2px;
707
+ --font-heading-large-weight: 600;
708
+ --font-heading-medium-size: 24px;
709
+ --font-heading-medium-line-height: 1.4em;
710
+ --font-heading-medium-letter-spacing: 0px;
711
+ --font-heading-medium-weight: 600;
712
+ --font-heading-small-size: 19px;
713
+ --font-heading-small-line-height: 1.4em;
714
+ --font-heading-small-letter-spacing: 0px;
715
+ --font-heading-small-weight: 600;
716
+ --font-heading-xsmall-size: 17px;
717
+ --font-heading-xsmall-line-height: 1.5em;
718
+ --font-heading-xsmall-letter-spacing: 0px;
719
+ --font-heading-xsmall-weight: 600;
720
+ --font-heading-xxsmall-size: 15px;
721
+ --font-heading-xxsmall-line-height: 1.5em;
722
+ --font-heading-xxsmall-letter-spacing: 0px;
723
+ --font-heading-xxsmall-weight: 600;
724
+ }
725
+ }
726
+ @layer theme.tokens.typography {
727
+ :root {
728
+ --font-body-large-size: 19px;
729
+ --font-body-large-line-height: 1.5em;
730
+ --font-body-large-letter-spacing: 0px;
731
+ --font-body-large-weight: 600;
732
+ --font-body-medium-size: 17px;
733
+ --font-body-medium-line-height: 1.5em;
734
+ --font-body-medium-letter-spacing: 0px;
735
+ --font-body-medium-weight: 500;
736
+ --font-body-small-size: 15px;
737
+ --font-body-small-line-height: 1.5em;
738
+ --font-body-small-letter-spacing: 0px;
739
+ --font-body-small-weight: 400;
740
+ --font-body-xsmall-size: 13px;
741
+ --font-body-xsmall-line-height: 1.5em;
742
+ --font-body-xsmall-letter-spacing: 0px;
743
+ --font-body-xsmall-weight: 400;
744
+ }
745
+ }
746
+ @layer theme.tokens.typography {
747
+ :root {
748
+ --font-label-large-size: 16px;
749
+ --font-label-large-line-height: 1.5em;
750
+ --font-label-large-letter-spacing: 0px;
751
+ --font-label-large-weight: 400;
752
+ --font-label-medium-size: 14px;
753
+ --font-label-medium-line-height: 1.5em;
754
+ --font-label-medium-letter-spacing: 0px;
755
+ --font-label-medium-weight: 400;
756
+ --font-label-small-size: 13px;
757
+ --font-label-small-line-height: 1.5em;
758
+ --font-label-small-letter-spacing: 0px;
759
+ --font-label-small-weight: 500;
760
+ }
761
+ }
762
+ @layer theme.tokens.typography {
763
+ :root {
764
+ --font-caption-large-size: 12px;
765
+ --font-caption-large-line-height: 1.5em;
766
+ --font-caption-large-letter-spacing: 0px;
767
+ --font-caption-large-weight: 600;
768
+ --font-caption-medium-size: 11px;
769
+ --font-caption-medium-line-height: 1.5em;
770
+ --font-caption-medium-letter-spacing: 0px;
771
+ --font-caption-medium-weight: 500;
772
+ }
773
+ }