@vttforge/styles 0.3.3 → 0.4.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/README.md +29 -5
  3. package/base.css +58 -56
  4. package/components.css +731 -733
  5. package/index.css +22 -5
  6. package/package.json +1 -1
  7. package/styles.layer.css +13 -6
  8. package/themes/forge.css +17 -19
package/components.css CHANGED
@@ -10,737 +10,735 @@
10
10
  * classes as legacy fallbacks.
11
11
  */
12
12
 
13
- @layer vttforge.components {
14
- /* ════════ BUTTONS ════════ */
15
-
16
- .vttf-btn {
17
- display: inline-flex;
18
- align-items: center;
19
- gap: var(--vttf-space-2);
20
- padding: 10px 16px;
21
- border-radius: var(--vttf-radius-md);
22
- font-family: var(--vttf-font-body);
23
- font-weight: var(--vttf-text-weight-semibold);
24
- font-size: 14px;
25
- border: 1px solid transparent;
26
- cursor: pointer;
27
- transition:
28
- transform var(--vttf-duration-fast) var(--vttf-ease-out),
29
- box-shadow var(--vttf-duration-fast) var(--vttf-ease-out),
30
- background var(--vttf-duration-fast) var(--vttf-ease-out),
31
- border-color var(--vttf-duration-fast) var(--vttf-ease-out);
32
- }
33
-
34
- .vttf-btn:active {
35
- transform: translateY(1px);
36
- }
37
-
38
- .vttf-btn[disabled],
39
- .vttf-btn:disabled {
40
- opacity: 0.5;
41
- cursor: not-allowed;
42
- pointer-events: none;
43
- }
44
-
45
- .vttf-btn--primary {
46
- background: var(--vttf-ember);
47
- color: var(--vttf-text-inverse);
48
- box-shadow:
49
- 0 1px 0 rgb(255 255 255 / 0.2) inset,
50
- var(--vttf-shadow-sm);
51
- }
52
- .vttf-btn--primary:hover {
53
- background: var(--vttf-ember-glow);
54
- }
55
-
56
- .vttf-btn--secondary {
57
- background: var(--vttf-surface);
58
- color: var(--vttf-text);
59
- border-color: var(--vttf-border-strong);
60
- }
61
- .vttf-btn--secondary:hover {
62
- background: var(--vttf-surface-2);
63
- border-color: var(--vttf-text-faint);
64
- }
65
-
66
- .vttf-btn--ghost {
67
- background: transparent;
68
- color: var(--vttf-text-muted);
69
- }
70
- .vttf-btn--ghost:hover {
71
- color: var(--vttf-text);
72
- background: var(--vttf-surface);
73
- }
74
-
75
- .vttf-btn--danger {
76
- background: transparent;
77
- color: var(--vttf-rose);
78
- border-color: color-mix(in oklch, var(--vttf-rose) 40%, transparent);
79
- }
80
- .vttf-btn--danger:hover {
81
- background: color-mix(in oklch, var(--vttf-rose) 10%, transparent);
82
- }
83
-
84
- .vttf-btn .vttf-kbd {
85
- font-family: var(--vttf-font-mono);
86
- font-size: 11px;
87
- padding: 1px 5px;
88
- border-radius: var(--vttf-radius-sm);
89
- background: rgb(0 0 0 / 0.25);
90
- color: inherit;
91
- opacity: 0.7;
92
- }
93
-
94
- /* ════════ BADGES ════════ */
95
-
96
- .vttf-badge {
97
- display: inline-flex;
98
- align-items: center;
99
- gap: 6px;
100
- padding: 2px 8px;
101
- border-radius: var(--vttf-radius-full);
102
- font-family: var(--vttf-font-mono);
103
- font-size: 11px;
104
- font-weight: 500;
105
- border: 1px solid;
106
- line-height: 1.5;
107
- }
108
-
109
- .vttf-badge__blip {
110
- width: 6px;
111
- height: 6px;
112
- border-radius: var(--vttf-radius-full);
113
- background: currentColor;
114
- }
115
-
116
- .vttf-badge--ember {
117
- color: var(--vttf-ember);
118
- border-color: color-mix(in oklch, var(--vttf-ember) 40%, transparent);
119
- background: color-mix(in oklch, var(--vttf-ember) 8%, transparent);
120
- }
121
- .vttf-badge--steel {
122
- color: var(--vttf-steel);
123
- border-color: color-mix(in oklch, var(--vttf-steel) 40%, transparent);
124
- background: color-mix(in oklch, var(--vttf-steel) 8%, transparent);
125
- }
126
- .vttf-badge--mint {
127
- color: var(--vttf-mint);
128
- border-color: color-mix(in oklch, var(--vttf-mint) 40%, transparent);
129
- background: color-mix(in oklch, var(--vttf-mint) 8%, transparent);
130
- }
131
- .vttf-badge--gold {
132
- color: var(--vttf-gold);
133
- border-color: color-mix(in oklch, var(--vttf-gold) 40%, transparent);
134
- background: color-mix(in oklch, var(--vttf-gold) 8%, transparent);
135
- }
136
- .vttf-badge--rose {
137
- color: var(--vttf-rose);
138
- border-color: color-mix(in oklch, var(--vttf-rose) 40%, transparent);
139
- background: color-mix(in oklch, var(--vttf-rose) 8%, transparent);
140
- }
141
- .vttf-badge--violet {
142
- color: var(--vttf-violet);
143
- border-color: color-mix(in oklch, var(--vttf-violet) 40%, transparent);
144
- background: color-mix(in oklch, var(--vttf-violet) 8%, transparent);
145
- }
146
- .vttf-badge--muted {
147
- color: var(--vttf-text-muted);
148
- border-color: var(--vttf-border);
149
- background: var(--vttf-surface);
150
- }
151
-
152
- /* ════════ CODE BLOCK + SYNTAX TOKENS ════════ */
153
-
154
- .vttf-codeblock {
155
- background: var(--vttf-bg-sunken);
156
- border: 1px solid var(--vttf-border);
157
- border-radius: var(--vttf-radius-lg);
158
- overflow: hidden;
159
- font-family: var(--vttf-font-mono);
160
- }
161
-
162
- .vttf-codeblock__head {
163
- display: flex;
164
- align-items: center;
165
- gap: var(--vttf-space-3);
166
- padding: 10px 14px;
167
- border-bottom: 1px solid var(--vttf-border);
168
- background: color-mix(in oklch, var(--vttf-bg-elevated) 70%, transparent);
169
- font-size: 12px;
170
- color: var(--vttf-text-muted);
171
- }
172
-
173
- .vttf-codeblock__dots {
174
- display: flex;
175
- gap: 6px;
176
- }
177
- .vttf-codeblock__dots span {
178
- width: 10px;
179
- height: 10px;
180
- border-radius: var(--vttf-radius-full);
181
- background: var(--vttf-border-strong);
182
- }
183
-
184
- .vttf-codeblock__file {
185
- color: var(--vttf-text);
186
- background: var(--vttf-surface);
187
- padding: 4px 10px;
188
- border-radius: var(--vttf-radius-sm);
189
- border: 1px solid var(--vttf-border);
190
- }
191
-
192
- .vttf-codeblock__lang {
193
- margin-left: auto;
194
- font-size: 11px;
195
- letter-spacing: 0.08em;
196
- text-transform: uppercase;
197
- color: var(--vttf-text-faint);
198
- }
199
-
200
- .vttf-codeblock pre {
201
- margin: 0;
202
- padding: var(--vttf-space-5);
203
- font-size: 13.5px;
204
- line-height: 1.6;
205
- color: var(--vttf-text);
206
- overflow-x: auto;
207
- }
208
-
209
- .vttf-tk-com {
210
- color: var(--vttf-text-faint);
211
- font-style: italic;
212
- }
213
- .vttf-tk-kw {
214
- color: var(--vttf-violet);
215
- }
216
- .vttf-tk-fn {
217
- color: var(--vttf-ember-glow);
218
- }
219
- .vttf-tk-str {
220
- color: var(--vttf-mint);
221
- }
222
- .vttf-tk-num {
223
- color: var(--vttf-gold);
224
- }
225
- .vttf-tk-ty {
226
- color: var(--vttf-steel);
227
- }
228
- .vttf-tk-pun {
229
- color: var(--vttf-text-muted);
230
- }
231
- .vttf-tk-prop {
232
- color: var(--vttf-text);
233
- }
234
-
235
- /* ════════ FORM GRID + FIELD ════════ */
236
-
237
- .vttf-form-grid {
238
- display: grid;
239
- grid-template-columns: repeat(2, 1fr);
240
- gap: var(--vttf-space-6);
241
- }
242
-
243
- .vttf-form-field {
244
- display: flex;
245
- flex-direction: column;
246
- gap: 6px;
247
- }
248
-
249
- .vttf-form-field > label {
250
- font-family: var(--vttf-font-mono);
251
- font-size: 11px;
252
- text-transform: uppercase;
253
- letter-spacing: 0.1em;
254
- color: var(--vttf-text-faint);
255
- }
256
-
257
- .vttf-form-field .vttf-hint {
258
- font-size: 12px;
259
- color: var(--vttf-text-muted);
260
- }
261
-
262
- /* ════════ TEXT INPUTS ════════ */
263
-
264
- .vttf-input,
265
- .vttf-textarea,
266
- .vttf-select {
267
- background: var(--vttf-bg-sunken);
268
- border: 1px solid var(--vttf-border);
269
- color: var(--vttf-text);
270
- padding: 9px 12px;
271
- border-radius: var(--vttf-radius-sm);
272
- font-family: var(--vttf-font-body);
273
- font-size: 14px;
274
- width: 100%;
275
- transition:
276
- border-color var(--vttf-duration-fast) var(--vttf-ease-out),
277
- box-shadow var(--vttf-duration-fast) var(--vttf-ease-out);
278
- }
279
-
280
- .vttf-input:focus-visible,
281
- .vttf-textarea:focus-visible,
282
- .vttf-select:focus-visible {
283
- border-color: var(--vttf-ember);
284
- }
285
-
286
- .vttf-input[aria-invalid="true"],
287
- .vttf-input.is-invalid,
288
- .vttf-textarea[aria-invalid="true"],
289
- .vttf-textarea.is-invalid,
290
- .vttf-select[aria-invalid="true"],
291
- .vttf-select.is-invalid {
292
- border-color: var(--vttf-rose);
293
- box-shadow: 0 0 0 3px color-mix(in oklch, var(--vttf-rose) 18%, transparent);
294
- }
295
-
296
- .vttf-textarea {
297
- min-height: 96px;
298
- resize: vertical;
299
- font-family: var(--vttf-font-mono);
300
- font-size: 13px;
301
- }
302
-
303
- .vttf-select {
304
- appearance: none;
305
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M3 5l3 3 3-3' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
306
- background-repeat: no-repeat;
307
- background-position: right 10px center;
308
- padding-right: 32px;
309
- }
310
-
311
- /* ════════ CHECKBOXES + RADIOS ════════ */
312
-
313
- .vttf-check,
314
- .vttf-radio {
315
- display: inline-flex;
316
- align-items: center;
317
- gap: var(--vttf-space-2);
318
- cursor: pointer;
319
- font-size: 14px;
320
- }
321
-
322
- .vttf-check input,
323
- .vttf-radio input {
324
- position: absolute;
325
- opacity: 0;
326
- pointer-events: none;
327
- }
328
-
329
- .vttf-check__box,
330
- .vttf-radio__box {
331
- width: 16px;
332
- height: 16px;
333
- background: var(--vttf-bg-sunken);
334
- border: 1.5px solid var(--vttf-border-strong);
335
- display: inline-flex;
336
- align-items: center;
337
- justify-content: center;
338
- flex: 0 0 auto;
339
- transition:
340
- background var(--vttf-duration-fast) var(--vttf-ease-out),
341
- border-color var(--vttf-duration-fast) var(--vttf-ease-out);
342
- }
343
-
344
- .vttf-check__box {
345
- border-radius: var(--vttf-radius-sm);
346
- }
347
- .vttf-radio__box {
348
- border-radius: var(--vttf-radius-full);
349
- }
350
-
351
- .vttf-check input:checked + .vttf-check__box {
352
- background: var(--vttf-ember);
353
- border-color: var(--vttf-ember);
354
- }
355
- .vttf-check input:checked + .vttf-check__box::after {
356
- content: "";
357
- width: 9px;
358
- height: 5px;
359
- border-left: 2px solid var(--vttf-text-inverse);
360
- border-bottom: 2px solid var(--vttf-text-inverse);
361
- transform: rotate(-45deg) translate(1px, -1px);
362
- }
363
-
364
- .vttf-radio input:checked + .vttf-radio__box {
365
- border-color: var(--vttf-ember);
366
- }
367
- .vttf-radio input:checked + .vttf-radio__box::after {
368
- content: "";
369
- width: 8px;
370
- height: 8px;
371
- border-radius: var(--vttf-radius-full);
372
- background: var(--vttf-ember);
373
- }
374
-
375
- .vttf-check input:focus-visible + .vttf-check__box,
376
- .vttf-radio input:focus-visible + .vttf-radio__box {
377
- box-shadow: var(--vttf-focus-ring);
378
- }
379
-
380
- /* ════════ SWITCH ════════ */
381
-
382
- .vttf-switch {
383
- display: inline-flex;
384
- align-items: center;
385
- gap: var(--vttf-space-3);
386
- cursor: pointer;
387
- font-size: 14px;
388
- }
389
-
390
- .vttf-switch input {
391
- position: absolute;
392
- opacity: 0;
393
- pointer-events: none;
394
- }
395
-
396
- .vttf-switch__track {
397
- width: 36px;
398
- height: 20px;
399
- border-radius: var(--vttf-radius-full);
400
- background: var(--vttf-surface-2);
401
- border: 1px solid var(--vttf-border-strong);
402
- position: relative;
403
- transition:
404
- background var(--vttf-duration-base) var(--vttf-ease-out),
405
- border-color var(--vttf-duration-base) var(--vttf-ease-out);
406
- }
407
-
408
- .vttf-switch__track::after {
409
- content: "";
410
- position: absolute;
411
- width: 14px;
412
- height: 14px;
413
- top: 2px;
414
- left: 2px;
415
- background: var(--vttf-text-muted);
416
- border-radius: var(--vttf-radius-full);
417
- transition:
418
- transform var(--vttf-duration-base) var(--vttf-ease-out),
419
- background var(--vttf-duration-base) var(--vttf-ease-out);
420
- }
421
-
422
- .vttf-switch input:checked + .vttf-switch__track {
423
- background: var(--vttf-ember);
424
- border-color: var(--vttf-ember);
425
- }
426
-
427
- .vttf-switch input:checked + .vttf-switch__track::after {
428
- transform: translateX(16px);
429
- background: var(--vttf-text-inverse);
430
- }
431
-
432
- .vttf-switch input:focus-visible + .vttf-switch__track {
433
- box-shadow: var(--vttf-focus-ring);
434
- }
435
-
436
- /* ════════ RANGE ════════ */
437
-
438
- .vttf-range {
439
- appearance: none;
440
- -webkit-appearance: none;
441
- width: 100%;
442
- height: 4px;
443
- background: var(--vttf-surface-2);
444
- border-radius: var(--vttf-radius-full);
445
- outline: none;
446
- }
447
-
448
- .vttf-range::-webkit-slider-thumb {
449
- appearance: none;
450
- -webkit-appearance: none;
451
- width: 16px;
452
- height: 16px;
453
- border-radius: var(--vttf-radius-full);
454
- background: var(--vttf-ember);
455
- border: 2px solid var(--vttf-bg);
456
- box-shadow: var(--vttf-shadow-sm);
457
- cursor: pointer;
458
- }
459
-
460
- .vttf-range::-moz-range-thumb {
461
- width: 14px;
462
- height: 14px;
463
- border-radius: var(--vttf-radius-full);
464
- background: var(--vttf-ember);
465
- border: 2px solid var(--vttf-bg);
466
- cursor: pointer;
467
- }
468
-
469
- /* ════════ SEGMENTED CONTROL ════════ */
470
-
471
- .vttf-segment {
472
- display: inline-flex;
473
- padding: 3px;
474
- background: var(--vttf-surface);
475
- border: 1px solid var(--vttf-border);
476
- border-radius: var(--vttf-radius-md);
477
- }
478
-
479
- .vttf-segment button {
480
- border: none;
481
- background: transparent;
482
- color: var(--vttf-text-muted);
483
- font-family: var(--vttf-font-body);
484
- font-size: 13px;
485
- font-weight: 500;
486
- padding: 6px 12px;
487
- border-radius: var(--vttf-radius-sm);
488
- cursor: pointer;
489
- transition:
490
- background var(--vttf-duration-fast) var(--vttf-ease-out),
491
- color var(--vttf-duration-fast) var(--vttf-ease-out),
492
- box-shadow var(--vttf-duration-fast) var(--vttf-ease-out);
493
- }
494
-
495
- .vttf-segment button:hover {
496
- color: var(--vttf-text);
497
- }
498
-
499
- .vttf-segment button[aria-pressed="true"],
500
- .vttf-segment button[aria-selected="true"],
501
- .vttf-segment button.is-active {
502
- background: var(--vttf-bg-sunken);
503
- color: var(--vttf-text);
504
- box-shadow: var(--vttf-shadow-sm);
505
- }
506
-
507
- /* ════════ TABS ════════ */
508
-
509
- .vttf-tabs {
510
- display: flex;
511
- gap: 4px;
512
- padding: 0 var(--vttf-space-4);
513
- border-bottom: 1px solid var(--vttf-border);
514
- background: var(--vttf-bg-elevated);
515
- }
516
-
517
- .vttf-tab {
518
- padding: 10px 14px;
519
- font-family: var(--vttf-font-body);
520
- font-size: 13px;
521
- font-weight: 500;
522
- color: var(--vttf-text-muted);
523
- border-bottom: 2px solid transparent;
524
- margin-bottom: -1px;
525
- cursor: pointer;
526
- transition:
527
- color var(--vttf-duration-fast) var(--vttf-ease-out),
528
- border-color var(--vttf-duration-fast) var(--vttf-ease-out);
529
- }
530
-
531
- .vttf-tab:hover {
532
- color: var(--vttf-text);
533
- }
534
-
535
- .vttf-tab[aria-selected="true"],
536
- .vttf-tab.is-active {
537
- color: var(--vttf-text);
538
- border-bottom-color: var(--vttf-ember);
539
- }
540
-
541
- .vttf-tab__count {
542
- font-family: var(--vttf-font-mono);
543
- font-size: 10px;
544
- margin-left: 6px;
545
- color: var(--vttf-text-faint);
546
- }
547
-
548
- /* ════════ SHEET CONTAINER ════════ */
549
-
550
- .vttf-sheet {
551
- background: var(--vttf-bg-elevated);
552
- border: 1px solid var(--vttf-border);
553
- border-radius: var(--vttf-radius-lg);
554
- overflow: hidden;
555
- }
556
-
557
- .vttf-sheet__head {
558
- padding: var(--vttf-space-4);
559
- display: flex;
560
- align-items: center;
561
- gap: var(--vttf-space-4);
562
- border-bottom: 1px solid var(--vttf-border);
563
- background: var(--vttf-surface);
564
- }
565
-
566
- .vttf-sheet__title {
567
- font-family: var(--vttf-font-display);
568
- font-size: 22px;
569
- font-weight: var(--vttf-text-weight-semibold);
570
- letter-spacing: -0.02em;
571
- }
572
-
573
- .vttf-sheet__sub {
574
- font-family: var(--vttf-font-mono);
575
- font-size: 11px;
576
- color: var(--vttf-text-faint);
577
- text-transform: uppercase;
578
- letter-spacing: 0.1em;
579
- }
580
-
581
- .vttf-sheet__body {
582
- padding: var(--vttf-space-5);
583
- display: grid;
584
- gap: var(--vttf-space-3);
585
- }
586
-
587
- .vttf-portrait {
588
- width: 56px;
589
- height: 56px;
590
- border-radius: var(--vttf-radius-md);
591
- background:
592
- repeating-linear-gradient(
593
- 45deg,
594
- color-mix(in oklch, var(--vttf-ember-deep) 18%, transparent) 0 6px,
595
- color-mix(in oklch, var(--vttf-ember-deep) 8%, transparent) 6px 12px
596
- ),
597
- var(--vttf-surface-2);
598
- border: 1px dashed var(--vttf-border-strong);
599
- display: flex;
600
- align-items: center;
601
- justify-content: center;
602
- font-family: var(--vttf-font-mono);
603
- font-size: 10px;
604
- color: var(--vttf-text-faint);
605
- }
606
-
607
- .vttf-field-row {
608
- display: grid;
609
- grid-template-columns: 120px 1fr;
610
- gap: var(--vttf-space-4);
611
- align-items: center;
612
- }
613
-
614
- .vttf-field-label {
615
- font-family: var(--vttf-font-mono);
616
- font-size: 11px;
617
- text-transform: uppercase;
618
- letter-spacing: 0.08em;
619
- color: var(--vttf-text-faint);
620
- }
621
-
622
- /* ════════ STAT PILL ════════ */
623
-
624
- .vttf-stat-pill {
625
- display: inline-flex;
626
- align-items: center;
627
- gap: var(--vttf-space-2);
628
- padding: 4px 10px 4px 4px;
629
- background: var(--vttf-surface);
630
- border-radius: var(--vttf-radius-full);
631
- border: 1px solid var(--vttf-border);
632
- }
633
-
634
- .vttf-stat-pill__n {
635
- width: 28px;
636
- height: 28px;
637
- border-radius: var(--vttf-radius-full);
638
- background: var(--vttf-ember);
639
- color: var(--vttf-text-inverse);
640
- display: flex;
641
- align-items: center;
642
- justify-content: center;
643
- font-family: var(--vttf-font-mono);
644
- font-weight: var(--vttf-text-weight-bold);
645
- font-size: 13px;
646
- }
647
-
648
- .vttf-stat-pill__label {
649
- font-size: 12px;
650
- color: var(--vttf-text-muted);
651
- font-family: var(--vttf-font-mono);
652
- text-transform: uppercase;
653
- letter-spacing: 0.08em;
654
- }
655
-
656
- /* ════════ DROPZONE ════════ */
657
-
658
- .vttf-dropzone {
659
- border: 1.5px dashed var(--vttf-border-strong);
660
- border-radius: var(--vttf-radius-md);
661
- padding: var(--vttf-space-6);
662
- display: flex;
663
- flex-direction: column;
664
- align-items: center;
665
- gap: var(--vttf-space-2);
666
- color: var(--vttf-text-muted);
667
- background: color-mix(in oklch, var(--vttf-bg) 40%, transparent);
668
- transition:
669
- background var(--vttf-duration-fast) var(--vttf-ease-out),
670
- border-color var(--vttf-duration-fast) var(--vttf-ease-out);
671
- }
672
-
673
- .vttf-dropzone.is-active,
674
- .vttf-dropzone[data-drop-effect] {
675
- border-color: var(--vttf-ember);
676
- color: var(--vttf-ember);
677
- background: color-mix(in oklch, var(--vttf-ember) 6%, transparent);
678
- box-shadow: var(--vttf-glow-ember);
679
- }
680
-
681
- .vttf-dropzone__icon {
682
- font-family: var(--vttf-font-mono);
683
- font-size: 24px;
684
- }
685
-
686
- .vttf-dropzone__title {
687
- font-family: var(--vttf-font-body);
688
- font-weight: var(--vttf-text-weight-semibold);
689
- font-size: 14px;
690
- color: var(--vttf-text);
691
- }
692
-
693
- .vttf-dropzone__sub {
694
- font-family: var(--vttf-font-mono);
695
- font-size: 11px;
696
- }
697
-
698
- /* ════════ ITEM ROW ════════ */
699
-
700
- .vttf-item-row {
701
- display: grid;
702
- grid-template-columns: 24px 32px 1fr auto auto;
703
- align-items: center;
704
- gap: var(--vttf-space-3);
705
- padding: 8px 10px;
706
- border: 1px solid var(--vttf-border);
707
- border-radius: var(--vttf-radius-sm);
708
- background: var(--vttf-surface);
709
- }
710
-
711
- .vttf-item-row + .vttf-item-row {
712
- margin-top: -1px;
713
- }
714
-
715
- .vttf-item-row__grip {
716
- color: var(--vttf-text-faint);
717
- cursor: grab;
718
- font-family: var(--vttf-font-mono);
719
- font-size: 14px;
720
- }
721
-
722
- .vttf-item-row__thumb {
723
- width: 32px;
724
- height: 32px;
725
- border-radius: var(--vttf-radius-sm);
726
- background: var(--vttf-surface-2);
727
- border: 1px solid var(--vttf-border);
728
- display: flex;
729
- align-items: center;
730
- justify-content: center;
731
- font-family: var(--vttf-font-mono);
732
- font-size: 12px;
733
- color: var(--vttf-text-faint);
734
- }
735
-
736
- .vttf-item-row__name {
737
- font-size: 14px;
738
- font-weight: 500;
739
- }
740
-
741
- .vttf-item-row__meta {
742
- font-family: var(--vttf-font-mono);
743
- font-size: 11px;
744
- color: var(--vttf-text-faint);
745
- }
13
+ /* ════════ BUTTONS ════════ */
14
+
15
+ .vttf-btn {
16
+ display: inline-flex;
17
+ align-items: center;
18
+ gap: var(--vttf-space-2);
19
+ padding: 10px 16px;
20
+ border-radius: var(--vttf-radius-md);
21
+ font-family: var(--vttf-font-body);
22
+ font-weight: var(--vttf-text-weight-semibold);
23
+ font-size: 14px;
24
+ border: 1px solid transparent;
25
+ cursor: pointer;
26
+ transition:
27
+ transform var(--vttf-duration-fast) var(--vttf-ease-out),
28
+ box-shadow var(--vttf-duration-fast) var(--vttf-ease-out),
29
+ background var(--vttf-duration-fast) var(--vttf-ease-out),
30
+ border-color var(--vttf-duration-fast) var(--vttf-ease-out);
31
+ }
32
+
33
+ .vttf-btn:active {
34
+ transform: translateY(1px);
35
+ }
36
+
37
+ .vttf-btn[disabled],
38
+ .vttf-btn:disabled {
39
+ opacity: 0.5;
40
+ cursor: not-allowed;
41
+ pointer-events: none;
42
+ }
43
+
44
+ .vttf-btn--primary {
45
+ background: var(--vttf-ember);
46
+ color: var(--vttf-text-inverse);
47
+ box-shadow:
48
+ 0 1px 0 rgb(255 255 255 / 0.2) inset,
49
+ var(--vttf-shadow-sm);
50
+ }
51
+ .vttf-btn--primary:hover {
52
+ background: var(--vttf-ember-glow);
53
+ }
54
+
55
+ .vttf-btn--secondary {
56
+ background: var(--vttf-surface);
57
+ color: var(--vttf-text);
58
+ border-color: var(--vttf-border-strong);
59
+ }
60
+ .vttf-btn--secondary:hover {
61
+ background: var(--vttf-surface-2);
62
+ border-color: var(--vttf-text-faint);
63
+ }
64
+
65
+ .vttf-btn--ghost {
66
+ background: transparent;
67
+ color: var(--vttf-text-muted);
68
+ }
69
+ .vttf-btn--ghost:hover {
70
+ color: var(--vttf-text);
71
+ background: var(--vttf-surface);
72
+ }
73
+
74
+ .vttf-btn--danger {
75
+ background: transparent;
76
+ color: var(--vttf-rose);
77
+ border-color: color-mix(in oklch, var(--vttf-rose) 40%, transparent);
78
+ }
79
+ .vttf-btn--danger:hover {
80
+ background: color-mix(in oklch, var(--vttf-rose) 10%, transparent);
81
+ }
82
+
83
+ .vttf-btn .vttf-kbd {
84
+ font-family: var(--vttf-font-mono);
85
+ font-size: 11px;
86
+ padding: 1px 5px;
87
+ border-radius: var(--vttf-radius-sm);
88
+ background: rgb(0 0 0 / 0.25);
89
+ color: inherit;
90
+ opacity: 0.7;
91
+ }
92
+
93
+ /* ════════ BADGES ════════ */
94
+
95
+ .vttf-badge {
96
+ display: inline-flex;
97
+ align-items: center;
98
+ gap: 6px;
99
+ padding: 2px 8px;
100
+ border-radius: var(--vttf-radius-full);
101
+ font-family: var(--vttf-font-mono);
102
+ font-size: 11px;
103
+ font-weight: 500;
104
+ border: 1px solid;
105
+ line-height: 1.5;
106
+ }
107
+
108
+ .vttf-badge__blip {
109
+ width: 6px;
110
+ height: 6px;
111
+ border-radius: var(--vttf-radius-full);
112
+ background: currentColor;
113
+ }
114
+
115
+ .vttf-badge--ember {
116
+ color: var(--vttf-ember);
117
+ border-color: color-mix(in oklch, var(--vttf-ember) 40%, transparent);
118
+ background: color-mix(in oklch, var(--vttf-ember) 8%, transparent);
119
+ }
120
+ .vttf-badge--steel {
121
+ color: var(--vttf-steel);
122
+ border-color: color-mix(in oklch, var(--vttf-steel) 40%, transparent);
123
+ background: color-mix(in oklch, var(--vttf-steel) 8%, transparent);
124
+ }
125
+ .vttf-badge--mint {
126
+ color: var(--vttf-mint);
127
+ border-color: color-mix(in oklch, var(--vttf-mint) 40%, transparent);
128
+ background: color-mix(in oklch, var(--vttf-mint) 8%, transparent);
129
+ }
130
+ .vttf-badge--gold {
131
+ color: var(--vttf-gold);
132
+ border-color: color-mix(in oklch, var(--vttf-gold) 40%, transparent);
133
+ background: color-mix(in oklch, var(--vttf-gold) 8%, transparent);
134
+ }
135
+ .vttf-badge--rose {
136
+ color: var(--vttf-rose);
137
+ border-color: color-mix(in oklch, var(--vttf-rose) 40%, transparent);
138
+ background: color-mix(in oklch, var(--vttf-rose) 8%, transparent);
139
+ }
140
+ .vttf-badge--violet {
141
+ color: var(--vttf-violet);
142
+ border-color: color-mix(in oklch, var(--vttf-violet) 40%, transparent);
143
+ background: color-mix(in oklch, var(--vttf-violet) 8%, transparent);
144
+ }
145
+ .vttf-badge--muted {
146
+ color: var(--vttf-text-muted);
147
+ border-color: var(--vttf-border);
148
+ background: var(--vttf-surface);
149
+ }
150
+
151
+ /* ════════ CODE BLOCK + SYNTAX TOKENS ════════ */
152
+
153
+ .vttf-codeblock {
154
+ background: var(--vttf-bg-sunken);
155
+ border: 1px solid var(--vttf-border);
156
+ border-radius: var(--vttf-radius-lg);
157
+ overflow: hidden;
158
+ font-family: var(--vttf-font-mono);
159
+ }
160
+
161
+ .vttf-codeblock__head {
162
+ display: flex;
163
+ align-items: center;
164
+ gap: var(--vttf-space-3);
165
+ padding: 10px 14px;
166
+ border-bottom: 1px solid var(--vttf-border);
167
+ background: color-mix(in oklch, var(--vttf-bg-elevated) 70%, transparent);
168
+ font-size: 12px;
169
+ color: var(--vttf-text-muted);
170
+ }
171
+
172
+ .vttf-codeblock__dots {
173
+ display: flex;
174
+ gap: 6px;
175
+ }
176
+ .vttf-codeblock__dots span {
177
+ width: 10px;
178
+ height: 10px;
179
+ border-radius: var(--vttf-radius-full);
180
+ background: var(--vttf-border-strong);
181
+ }
182
+
183
+ .vttf-codeblock__file {
184
+ color: var(--vttf-text);
185
+ background: var(--vttf-surface);
186
+ padding: 4px 10px;
187
+ border-radius: var(--vttf-radius-sm);
188
+ border: 1px solid var(--vttf-border);
189
+ }
190
+
191
+ .vttf-codeblock__lang {
192
+ margin-left: auto;
193
+ font-size: 11px;
194
+ letter-spacing: 0.08em;
195
+ text-transform: uppercase;
196
+ color: var(--vttf-text-faint);
197
+ }
198
+
199
+ .vttf-codeblock pre {
200
+ margin: 0;
201
+ padding: var(--vttf-space-5);
202
+ font-size: 13.5px;
203
+ line-height: 1.6;
204
+ color: var(--vttf-text);
205
+ overflow-x: auto;
206
+ }
207
+
208
+ .vttf-tk-com {
209
+ color: var(--vttf-text-faint);
210
+ font-style: italic;
211
+ }
212
+ .vttf-tk-kw {
213
+ color: var(--vttf-violet);
214
+ }
215
+ .vttf-tk-fn {
216
+ color: var(--vttf-ember-glow);
217
+ }
218
+ .vttf-tk-str {
219
+ color: var(--vttf-mint);
220
+ }
221
+ .vttf-tk-num {
222
+ color: var(--vttf-gold);
223
+ }
224
+ .vttf-tk-ty {
225
+ color: var(--vttf-steel);
226
+ }
227
+ .vttf-tk-pun {
228
+ color: var(--vttf-text-muted);
229
+ }
230
+ .vttf-tk-prop {
231
+ color: var(--vttf-text);
232
+ }
233
+
234
+ /* ════════ FORM GRID + FIELD ════════ */
235
+
236
+ .vttf-form-grid {
237
+ display: grid;
238
+ grid-template-columns: repeat(2, 1fr);
239
+ gap: var(--vttf-space-6);
240
+ }
241
+
242
+ .vttf-form-field {
243
+ display: flex;
244
+ flex-direction: column;
245
+ gap: 6px;
246
+ }
247
+
248
+ .vttf-form-field > label {
249
+ font-family: var(--vttf-font-mono);
250
+ font-size: 11px;
251
+ text-transform: uppercase;
252
+ letter-spacing: 0.1em;
253
+ color: var(--vttf-text-faint);
254
+ }
255
+
256
+ .vttf-form-field .vttf-hint {
257
+ font-size: 12px;
258
+ color: var(--vttf-text-muted);
259
+ }
260
+
261
+ /* ════════ TEXT INPUTS ════════ */
262
+
263
+ .vttf-input,
264
+ .vttf-textarea,
265
+ .vttf-select {
266
+ background: var(--vttf-bg-sunken);
267
+ border: 1px solid var(--vttf-border);
268
+ color: var(--vttf-text);
269
+ padding: 9px 12px;
270
+ border-radius: var(--vttf-radius-sm);
271
+ font-family: var(--vttf-font-body);
272
+ font-size: 14px;
273
+ width: 100%;
274
+ transition:
275
+ border-color var(--vttf-duration-fast) var(--vttf-ease-out),
276
+ box-shadow var(--vttf-duration-fast) var(--vttf-ease-out);
277
+ }
278
+
279
+ .vttf-input:focus-visible,
280
+ .vttf-textarea:focus-visible,
281
+ .vttf-select:focus-visible {
282
+ border-color: var(--vttf-ember);
283
+ }
284
+
285
+ .vttf-input[aria-invalid="true"],
286
+ .vttf-input.is-invalid,
287
+ .vttf-textarea[aria-invalid="true"],
288
+ .vttf-textarea.is-invalid,
289
+ .vttf-select[aria-invalid="true"],
290
+ .vttf-select.is-invalid {
291
+ border-color: var(--vttf-rose);
292
+ box-shadow: 0 0 0 3px color-mix(in oklch, var(--vttf-rose) 18%, transparent);
293
+ }
294
+
295
+ .vttf-textarea {
296
+ min-height: 96px;
297
+ resize: vertical;
298
+ font-family: var(--vttf-font-mono);
299
+ font-size: 13px;
300
+ }
301
+
302
+ .vttf-select {
303
+ appearance: none;
304
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M3 5l3 3 3-3' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
305
+ background-repeat: no-repeat;
306
+ background-position: right 10px center;
307
+ padding-right: 32px;
308
+ }
309
+
310
+ /* ════════ CHECKBOXES + RADIOS ════════ */
311
+
312
+ .vttf-check,
313
+ .vttf-radio {
314
+ display: inline-flex;
315
+ align-items: center;
316
+ gap: var(--vttf-space-2);
317
+ cursor: pointer;
318
+ font-size: 14px;
319
+ }
320
+
321
+ .vttf-check input,
322
+ .vttf-radio input {
323
+ position: absolute;
324
+ opacity: 0;
325
+ pointer-events: none;
326
+ }
327
+
328
+ .vttf-check__box,
329
+ .vttf-radio__box {
330
+ width: 16px;
331
+ height: 16px;
332
+ background: var(--vttf-bg-sunken);
333
+ border: 1.5px solid var(--vttf-border-strong);
334
+ display: inline-flex;
335
+ align-items: center;
336
+ justify-content: center;
337
+ flex: 0 0 auto;
338
+ transition:
339
+ background var(--vttf-duration-fast) var(--vttf-ease-out),
340
+ border-color var(--vttf-duration-fast) var(--vttf-ease-out);
341
+ }
342
+
343
+ .vttf-check__box {
344
+ border-radius: var(--vttf-radius-sm);
345
+ }
346
+ .vttf-radio__box {
347
+ border-radius: var(--vttf-radius-full);
348
+ }
349
+
350
+ .vttf-check input:checked + .vttf-check__box {
351
+ background: var(--vttf-ember);
352
+ border-color: var(--vttf-ember);
353
+ }
354
+ .vttf-check input:checked + .vttf-check__box::after {
355
+ content: "";
356
+ width: 9px;
357
+ height: 5px;
358
+ border-left: 2px solid var(--vttf-text-inverse);
359
+ border-bottom: 2px solid var(--vttf-text-inverse);
360
+ transform: rotate(-45deg) translate(1px, -1px);
361
+ }
362
+
363
+ .vttf-radio input:checked + .vttf-radio__box {
364
+ border-color: var(--vttf-ember);
365
+ }
366
+ .vttf-radio input:checked + .vttf-radio__box::after {
367
+ content: "";
368
+ width: 8px;
369
+ height: 8px;
370
+ border-radius: var(--vttf-radius-full);
371
+ background: var(--vttf-ember);
372
+ }
373
+
374
+ .vttf-check input:focus-visible + .vttf-check__box,
375
+ .vttf-radio input:focus-visible + .vttf-radio__box {
376
+ box-shadow: var(--vttf-focus-ring);
377
+ }
378
+
379
+ /* ════════ SWITCH ════════ */
380
+
381
+ .vttf-switch {
382
+ display: inline-flex;
383
+ align-items: center;
384
+ gap: var(--vttf-space-3);
385
+ cursor: pointer;
386
+ font-size: 14px;
387
+ }
388
+
389
+ .vttf-switch input {
390
+ position: absolute;
391
+ opacity: 0;
392
+ pointer-events: none;
393
+ }
394
+
395
+ .vttf-switch__track {
396
+ width: 36px;
397
+ height: 20px;
398
+ border-radius: var(--vttf-radius-full);
399
+ background: var(--vttf-surface-2);
400
+ border: 1px solid var(--vttf-border-strong);
401
+ position: relative;
402
+ transition:
403
+ background var(--vttf-duration-base) var(--vttf-ease-out),
404
+ border-color var(--vttf-duration-base) var(--vttf-ease-out);
405
+ }
406
+
407
+ .vttf-switch__track::after {
408
+ content: "";
409
+ position: absolute;
410
+ width: 14px;
411
+ height: 14px;
412
+ top: 2px;
413
+ left: 2px;
414
+ background: var(--vttf-text-muted);
415
+ border-radius: var(--vttf-radius-full);
416
+ transition:
417
+ transform var(--vttf-duration-base) var(--vttf-ease-out),
418
+ background var(--vttf-duration-base) var(--vttf-ease-out);
419
+ }
420
+
421
+ .vttf-switch input:checked + .vttf-switch__track {
422
+ background: var(--vttf-ember);
423
+ border-color: var(--vttf-ember);
424
+ }
425
+
426
+ .vttf-switch input:checked + .vttf-switch__track::after {
427
+ transform: translateX(16px);
428
+ background: var(--vttf-text-inverse);
429
+ }
430
+
431
+ .vttf-switch input:focus-visible + .vttf-switch__track {
432
+ box-shadow: var(--vttf-focus-ring);
433
+ }
434
+
435
+ /* ════════ RANGE ════════ */
436
+
437
+ .vttf-range {
438
+ appearance: none;
439
+ -webkit-appearance: none;
440
+ width: 100%;
441
+ height: 4px;
442
+ background: var(--vttf-surface-2);
443
+ border-radius: var(--vttf-radius-full);
444
+ outline: none;
445
+ }
446
+
447
+ .vttf-range::-webkit-slider-thumb {
448
+ appearance: none;
449
+ -webkit-appearance: none;
450
+ width: 16px;
451
+ height: 16px;
452
+ border-radius: var(--vttf-radius-full);
453
+ background: var(--vttf-ember);
454
+ border: 2px solid var(--vttf-bg);
455
+ box-shadow: var(--vttf-shadow-sm);
456
+ cursor: pointer;
457
+ }
458
+
459
+ .vttf-range::-moz-range-thumb {
460
+ width: 14px;
461
+ height: 14px;
462
+ border-radius: var(--vttf-radius-full);
463
+ background: var(--vttf-ember);
464
+ border: 2px solid var(--vttf-bg);
465
+ cursor: pointer;
466
+ }
467
+
468
+ /* ════════ SEGMENTED CONTROL ════════ */
469
+
470
+ .vttf-segment {
471
+ display: inline-flex;
472
+ padding: 3px;
473
+ background: var(--vttf-surface);
474
+ border: 1px solid var(--vttf-border);
475
+ border-radius: var(--vttf-radius-md);
476
+ }
477
+
478
+ .vttf-segment button {
479
+ border: none;
480
+ background: transparent;
481
+ color: var(--vttf-text-muted);
482
+ font-family: var(--vttf-font-body);
483
+ font-size: 13px;
484
+ font-weight: 500;
485
+ padding: 6px 12px;
486
+ border-radius: var(--vttf-radius-sm);
487
+ cursor: pointer;
488
+ transition:
489
+ background var(--vttf-duration-fast) var(--vttf-ease-out),
490
+ color var(--vttf-duration-fast) var(--vttf-ease-out),
491
+ box-shadow var(--vttf-duration-fast) var(--vttf-ease-out);
492
+ }
493
+
494
+ .vttf-segment button:hover {
495
+ color: var(--vttf-text);
496
+ }
497
+
498
+ .vttf-segment button[aria-pressed="true"],
499
+ .vttf-segment button[aria-selected="true"],
500
+ .vttf-segment button.is-active {
501
+ background: var(--vttf-bg-sunken);
502
+ color: var(--vttf-text);
503
+ box-shadow: var(--vttf-shadow-sm);
504
+ }
505
+
506
+ /* ════════ TABS ════════ */
507
+
508
+ .vttf-tabs {
509
+ display: flex;
510
+ gap: 4px;
511
+ padding: 0 var(--vttf-space-4);
512
+ border-bottom: 1px solid var(--vttf-border);
513
+ background: var(--vttf-bg-elevated);
514
+ }
515
+
516
+ .vttf-tab {
517
+ padding: 10px 14px;
518
+ font-family: var(--vttf-font-body);
519
+ font-size: 13px;
520
+ font-weight: 500;
521
+ color: var(--vttf-text-muted);
522
+ border-bottom: 2px solid transparent;
523
+ margin-bottom: -1px;
524
+ cursor: pointer;
525
+ transition:
526
+ color var(--vttf-duration-fast) var(--vttf-ease-out),
527
+ border-color var(--vttf-duration-fast) var(--vttf-ease-out);
528
+ }
529
+
530
+ .vttf-tab:hover {
531
+ color: var(--vttf-text);
532
+ }
533
+
534
+ .vttf-tab[aria-selected="true"],
535
+ .vttf-tab.is-active {
536
+ color: var(--vttf-text);
537
+ border-bottom-color: var(--vttf-ember);
538
+ }
539
+
540
+ .vttf-tab__count {
541
+ font-family: var(--vttf-font-mono);
542
+ font-size: 10px;
543
+ margin-left: 6px;
544
+ color: var(--vttf-text-faint);
545
+ }
546
+
547
+ /* ════════ SHEET CONTAINER ════════ */
548
+
549
+ .vttf-sheet {
550
+ background: var(--vttf-bg-elevated);
551
+ border: 1px solid var(--vttf-border);
552
+ border-radius: var(--vttf-radius-lg);
553
+ overflow: hidden;
554
+ }
555
+
556
+ .vttf-sheet__head {
557
+ padding: var(--vttf-space-4);
558
+ display: flex;
559
+ align-items: center;
560
+ gap: var(--vttf-space-4);
561
+ border-bottom: 1px solid var(--vttf-border);
562
+ background: var(--vttf-surface);
563
+ }
564
+
565
+ .vttf-sheet__title {
566
+ font-family: var(--vttf-font-display);
567
+ font-size: 22px;
568
+ font-weight: var(--vttf-text-weight-semibold);
569
+ letter-spacing: -0.02em;
570
+ }
571
+
572
+ .vttf-sheet__sub {
573
+ font-family: var(--vttf-font-mono);
574
+ font-size: 11px;
575
+ color: var(--vttf-text-faint);
576
+ text-transform: uppercase;
577
+ letter-spacing: 0.1em;
578
+ }
579
+
580
+ .vttf-sheet__body {
581
+ padding: var(--vttf-space-5);
582
+ display: grid;
583
+ gap: var(--vttf-space-3);
584
+ }
585
+
586
+ .vttf-portrait {
587
+ width: 56px;
588
+ height: 56px;
589
+ border-radius: var(--vttf-radius-md);
590
+ background:
591
+ repeating-linear-gradient(
592
+ 45deg,
593
+ color-mix(in oklch, var(--vttf-ember-deep) 18%, transparent) 0 6px,
594
+ color-mix(in oklch, var(--vttf-ember-deep) 8%, transparent) 6px 12px
595
+ ),
596
+ var(--vttf-surface-2);
597
+ border: 1px dashed var(--vttf-border-strong);
598
+ display: flex;
599
+ align-items: center;
600
+ justify-content: center;
601
+ font-family: var(--vttf-font-mono);
602
+ font-size: 10px;
603
+ color: var(--vttf-text-faint);
604
+ }
605
+
606
+ .vttf-field-row {
607
+ display: grid;
608
+ grid-template-columns: 120px 1fr;
609
+ gap: var(--vttf-space-4);
610
+ align-items: center;
611
+ }
612
+
613
+ .vttf-field-label {
614
+ font-family: var(--vttf-font-mono);
615
+ font-size: 11px;
616
+ text-transform: uppercase;
617
+ letter-spacing: 0.08em;
618
+ color: var(--vttf-text-faint);
619
+ }
620
+
621
+ /* ════════ STAT PILL ════════ */
622
+
623
+ .vttf-stat-pill {
624
+ display: inline-flex;
625
+ align-items: center;
626
+ gap: var(--vttf-space-2);
627
+ padding: 4px 10px 4px 4px;
628
+ background: var(--vttf-surface);
629
+ border-radius: var(--vttf-radius-full);
630
+ border: 1px solid var(--vttf-border);
631
+ }
632
+
633
+ .vttf-stat-pill__n {
634
+ width: 28px;
635
+ height: 28px;
636
+ border-radius: var(--vttf-radius-full);
637
+ background: var(--vttf-ember);
638
+ color: var(--vttf-text-inverse);
639
+ display: flex;
640
+ align-items: center;
641
+ justify-content: center;
642
+ font-family: var(--vttf-font-mono);
643
+ font-weight: var(--vttf-text-weight-bold);
644
+ font-size: 13px;
645
+ }
646
+
647
+ .vttf-stat-pill__label {
648
+ font-size: 12px;
649
+ color: var(--vttf-text-muted);
650
+ font-family: var(--vttf-font-mono);
651
+ text-transform: uppercase;
652
+ letter-spacing: 0.08em;
653
+ }
654
+
655
+ /* ════════ DROPZONE ════════ */
656
+
657
+ .vttf-dropzone {
658
+ border: 1.5px dashed var(--vttf-border-strong);
659
+ border-radius: var(--vttf-radius-md);
660
+ padding: var(--vttf-space-6);
661
+ display: flex;
662
+ flex-direction: column;
663
+ align-items: center;
664
+ gap: var(--vttf-space-2);
665
+ color: var(--vttf-text-muted);
666
+ background: color-mix(in oklch, var(--vttf-bg) 40%, transparent);
667
+ transition:
668
+ background var(--vttf-duration-fast) var(--vttf-ease-out),
669
+ border-color var(--vttf-duration-fast) var(--vttf-ease-out);
670
+ }
671
+
672
+ .vttf-dropzone.is-active,
673
+ .vttf-dropzone[data-drop-effect] {
674
+ border-color: var(--vttf-ember);
675
+ color: var(--vttf-ember);
676
+ background: color-mix(in oklch, var(--vttf-ember) 6%, transparent);
677
+ box-shadow: var(--vttf-glow-ember);
678
+ }
679
+
680
+ .vttf-dropzone__icon {
681
+ font-family: var(--vttf-font-mono);
682
+ font-size: 24px;
683
+ }
684
+
685
+ .vttf-dropzone__title {
686
+ font-family: var(--vttf-font-body);
687
+ font-weight: var(--vttf-text-weight-semibold);
688
+ font-size: 14px;
689
+ color: var(--vttf-text);
690
+ }
691
+
692
+ .vttf-dropzone__sub {
693
+ font-family: var(--vttf-font-mono);
694
+ font-size: 11px;
695
+ }
696
+
697
+ /* ════════ ITEM ROW ════════ */
698
+
699
+ .vttf-item-row {
700
+ display: grid;
701
+ grid-template-columns: 24px 32px 1fr auto auto;
702
+ align-items: center;
703
+ gap: var(--vttf-space-3);
704
+ padding: 8px 10px;
705
+ border: 1px solid var(--vttf-border);
706
+ border-radius: var(--vttf-radius-sm);
707
+ background: var(--vttf-surface);
708
+ }
709
+
710
+ .vttf-item-row + .vttf-item-row {
711
+ margin-top: -1px;
712
+ }
713
+
714
+ .vttf-item-row__grip {
715
+ color: var(--vttf-text-faint);
716
+ cursor: grab;
717
+ font-family: var(--vttf-font-mono);
718
+ font-size: 14px;
719
+ }
720
+
721
+ .vttf-item-row__thumb {
722
+ width: 32px;
723
+ height: 32px;
724
+ border-radius: var(--vttf-radius-sm);
725
+ background: var(--vttf-surface-2);
726
+ border: 1px solid var(--vttf-border);
727
+ display: flex;
728
+ align-items: center;
729
+ justify-content: center;
730
+ font-family: var(--vttf-font-mono);
731
+ font-size: 12px;
732
+ color: var(--vttf-text-faint);
733
+ }
734
+
735
+ .vttf-item-row__name {
736
+ font-size: 14px;
737
+ font-weight: 500;
738
+ }
739
+
740
+ .vttf-item-row__meta {
741
+ font-family: var(--vttf-font-mono);
742
+ font-size: 11px;
743
+ color: var(--vttf-text-faint);
746
744
  }