@deframe-sdk/components 0.1.10 → 0.1.12

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/dist/index.d.mts +91 -113
  2. package/dist/index.d.ts +91 -113
  3. package/dist/index.js +672 -747
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +674 -745
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +1041 -934
  8. package/package.json +4 -1
package/dist/styles.css CHANGED
@@ -9,20 +9,17 @@
9
9
  "Courier New", monospace;
10
10
  --color-red-400: oklch(70.4% 0.191 22.216);
11
11
  --color-red-500: oklch(63.7% 0.237 25.331);
12
- --color-amber-500: oklch(76.9% 0.188 70.08);
13
12
  --color-yellow-100: oklch(97.3% 0.071 103.193);
14
13
  --color-yellow-800: oklch(47.6% 0.114 61.907);
15
14
  --color-green-100: oklch(96.2% 0.044 156.743);
16
15
  --color-green-400: oklch(79.2% 0.209 151.711);
17
16
  --color-green-500: oklch(72.3% 0.219 149.579);
18
17
  --color-green-800: oklch(44.8% 0.119 151.328);
19
- --color-teal-600: oklch(60% 0.118 184.704);
20
18
  --color-blue-50: oklch(97% 0.014 254.604);
21
19
  --color-blue-100: oklch(93.2% 0.032 255.585);
22
20
  --color-blue-200: oklch(88.2% 0.059 254.128);
23
21
  --color-blue-300: oklch(80.9% 0.105 251.813);
24
22
  --color-blue-500: oklch(62.3% 0.214 259.815);
25
- --color-blue-600: oklch(54.6% 0.245 262.881);
26
23
  --color-blue-700: oklch(48.8% 0.243 264.376);
27
24
  --color-blue-900: oklch(37.9% 0.146 265.522);
28
25
  --color-purple-500: oklch(62.7% 0.265 303.9);
@@ -31,93 +28,28 @@
31
28
  --color-pink-500: oklch(65.6% 0.241 354.308);
32
29
  --color-gray-100: oklch(96.7% 0.003 264.542);
33
30
  --color-gray-200: oklch(92.8% 0.006 264.531);
34
- --color-gray-300: oklch(87.2% 0.01 258.338);
35
31
  --color-gray-400: oklch(70.7% 0.022 261.325);
36
- --color-gray-500: oklch(55.1% 0.027 264.364);
37
32
  --color-gray-600: oklch(44.6% 0.03 256.802);
38
33
  --color-gray-700: oklch(37.3% 0.034 259.733);
39
34
  --color-gray-800: oklch(27.8% 0.033 256.848);
40
35
  --color-gray-900: oklch(21% 0.034 264.665);
41
36
  --color-black: #000;
42
- --color-white: #fff;
43
37
  --spacing: 0.25rem;
38
+ --container-lg: 32rem;
44
39
  --container-2xl: 42rem;
45
40
  --container-3xl: 48rem;
46
- --text-xs: 0.75rem;
47
- --text-xs--line-height: calc(1 / 0.75);
48
- --text-sm: 0.875rem;
49
- --text-sm--line-height: calc(1.25 / 0.875);
50
- --text-base: 1rem;
51
- --text-base--line-height: calc(1.5 / 1);
52
41
  --text-lg: 1.125rem;
53
42
  --text-lg--line-height: calc(1.75 / 1.125);
54
- --text-xl: 1.25rem;
55
- --text-xl--line-height: calc(1.75 / 1.25);
56
- --text-2xl: 1.5rem;
57
- --text-2xl--line-height: calc(2 / 1.5);
58
- --text-3xl: 1.875rem;
59
- --text-3xl--line-height: calc(2.25 / 1.875);
60
- --text-5xl: 3rem;
61
- --text-5xl--line-height: 1;
62
- --text-6xl: 3.75rem;
63
- --text-6xl--line-height: 1;
64
- --font-weight-normal: 400;
65
- --font-weight-medium: 500;
66
- --font-weight-semibold: 600;
67
- --font-weight-bold: 700;
68
- --font-weight-extrabold: 800;
69
43
  --tracking-wide: 0.025em;
70
44
  --leading-normal: 1.5;
71
- --radius-md: 8px;
72
- --radius-lg: clamp(12px, 2vw, 16px);
73
- --radius-xl: clamp(16px, 2.5vw, 24px);
74
- --radius-2xl: 1rem;
75
- --radius-3xl: 1.5rem;
76
45
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
46
+ --animate-spin: spin 1s linear infinite;
77
47
  --animate-bounce: bounce 1s infinite;
78
48
  --blur-sm: 8px;
79
49
  --default-transition-duration: 150ms;
80
50
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
81
51
  --default-font-family: var(--font-sans);
82
52
  --default-mono-font-family: var(--font-mono);
83
- --color-brand-primary: var(--deframe-brand-primary, #405EFF);
84
- --color-brand-primary-dark: #405EFF;
85
- --color-brand-secondary: var(--deframe-brand-secondary, #A9ABF7);
86
- --color-brand-primary-cryptocontrol: #1FC16B;
87
- --color-bg-default: var(--deframe-bg-default, #FFFFFF);
88
- --color-bg-default-dark: #121212;
89
- --color-bg-subtle: var(--deframe-bg-subtle, #F8F9FA);
90
- --color-bg-subtle-dark: #1E1E1E;
91
- --color-bg-muted: var(--deframe-bg-muted, #E3E4E8);
92
- --color-bg-muted-dark: #2C2C2C50;
93
- --color-bg-raised: #FFFFFF;
94
- --color-bg-raised-dark: #252050;
95
- --color-text-primary: var(--deframe-text-primary, #252050);
96
- --color-text-primary-dark: #FFFFFF;
97
- --color-text-secondary: var(--deframe-text-secondary, #5C5F66);
98
- --color-text-secondary-dark: #E3E4E8;
99
- --color-text-tertiary: #898D95;
100
- --color-text-tertiary-dark: #C6C8CC;
101
- --color-text-disabled: var(--deframe-text-disabled, #C6C8CC);
102
- --color-text-disabled-dark: #898D95;
103
- --color-text-inverse: var(--deframe-text-inverse, #FFFFFF);
104
- --color-text-inverse-dark: #252050;
105
- --color-text-highlight: #2BA176;
106
- --color-border-default: #E3E4E8;
107
- --color-border-default-dark: #2C2C2C;
108
- --color-border-subtle: #F0F0F0;
109
- --color-border-subtle-dark: #1E1E1E;
110
- --color-border-strong: #C6C8CC;
111
- --color-border-strong-dark: #3A3A3A;
112
- --color-state-success: var(--deframe-state-success, #2BA176);
113
- --color-state-warning: var(--deframe-state-warning, #F6A700);
114
- --color-state-error: var(--deframe-state-error, #FF4D4F);
115
- --spacing-sm: clamp(6px, 1vw, 8px);
116
- --spacing-md: clamp(12px, 2vw, 16px);
117
- --spacing-lg: clamp(20px, 3vw, 32px);
118
- --spacing-xl: clamp(40px, 5vw, 64px);
119
- --radius-full: 9999px;
120
- --animate-fade-in: fade-in 0.3s ease-out;
121
53
  }
122
54
  }
123
55
  @layer base {
@@ -299,12 +231,18 @@
299
231
  .top-1\/2 {
300
232
  top: calc(1/2 * 100%);
301
233
  }
234
+ .top-2 {
235
+ top: calc(var(--spacing) * 2);
236
+ }
302
237
  .top-4 {
303
238
  top: calc(var(--spacing) * 4);
304
239
  }
305
240
  .top-8 {
306
241
  top: calc(var(--spacing) * 8);
307
242
  }
243
+ .-right-0\.5 {
244
+ right: calc(var(--spacing) * -0.5);
245
+ }
308
246
  .-right-1 {
309
247
  right: calc(var(--spacing) * -1);
310
248
  }
@@ -314,15 +252,24 @@
314
252
  .right-2 {
315
253
  right: calc(var(--spacing) * 2);
316
254
  }
255
+ .right-3 {
256
+ right: calc(var(--spacing) * 3);
257
+ }
317
258
  .right-4 {
318
259
  right: calc(var(--spacing) * 4);
319
260
  }
261
+ .-bottom-0\.5 {
262
+ bottom: calc(var(--spacing) * -0.5);
263
+ }
320
264
  .-bottom-1 {
321
265
  bottom: calc(var(--spacing) * -1);
322
266
  }
323
267
  .bottom-0 {
324
268
  bottom: calc(var(--spacing) * 0);
325
269
  }
270
+ .bottom-2 {
271
+ bottom: calc(var(--spacing) * 2);
272
+ }
326
273
  .bottom-4 {
327
274
  bottom: calc(var(--spacing) * 4);
328
275
  }
@@ -347,6 +294,9 @@
347
294
  .z-50 {
348
295
  z-index: 50;
349
296
  }
297
+ .z-\[1\] {
298
+ z-index: 1;
299
+ }
350
300
  .container {
351
301
  width: 100%;
352
302
  @media (width >= 40rem) {
@@ -365,8 +315,11 @@
365
315
  max-width: 96rem;
366
316
  }
367
317
  }
368
- .mx-4 {
369
- margin-inline: calc(var(--spacing) * 4);
318
+ .m-\[var\(--deframe-widget-size-gap-none\)\] {
319
+ margin: var(--deframe-widget-size-gap-none);
320
+ }
321
+ .mx-\[var\(--deframe-widget-size-gap-md\)\] {
322
+ margin-inline: var(--deframe-widget-size-gap-md);
370
323
  }
371
324
  .mx-auto {
372
325
  margin-inline: auto;
@@ -374,68 +327,92 @@
374
327
  .-my-2 {
375
328
  margin-block: calc(var(--spacing) * -2);
376
329
  }
377
- .my-1 {
378
- margin-block: calc(var(--spacing) * 1);
379
- }
380
- .mt-0 {
381
- margin-top: calc(var(--spacing) * 0);
330
+ .-my-\[var\(--deframe-widget-size-gap-sm\)\] {
331
+ margin-block: calc(var(--deframe-widget-size-gap-sm) * -1);
382
332
  }
383
- .mt-1 {
384
- margin-top: calc(var(--spacing) * 1);
333
+ .my-\[var\(--deframe-widget-size-gap-xs\)\] {
334
+ margin-block: var(--deframe-widget-size-gap-xs);
385
335
  }
386
- .mt-3 {
387
- margin-top: calc(var(--spacing) * 3);
336
+ .-mt-\[var\(--deframe-widget-size-gap-sm\)\] {
337
+ margin-top: calc(var(--deframe-widget-size-gap-sm) * -1);
388
338
  }
389
339
  .mt-4 {
390
340
  margin-top: calc(var(--spacing) * 4);
391
341
  }
392
- .mt-6 {
393
- margin-top: calc(var(--spacing) * 6);
342
+ .mt-\[-4px\] {
343
+ margin-top: -4px;
344
+ }
345
+ .mt-\[2px\] {
346
+ margin-top: 2px;
347
+ }
348
+ .mt-\[3px\] {
349
+ margin-top: 3px;
350
+ }
351
+ .mt-\[10px\] {
352
+ margin-top: 10px;
353
+ }
354
+ .mt-\[var\(--deframe-widget-size-gap-lg\)\] {
355
+ margin-top: var(--deframe-widget-size-gap-lg);
356
+ }
357
+ .mt-\[var\(--deframe-widget-size-gap-md\)\] {
358
+ margin-top: var(--deframe-widget-size-gap-md);
359
+ }
360
+ .mt-\[var\(--deframe-widget-size-gap-none\)\] {
361
+ margin-top: var(--deframe-widget-size-gap-none);
362
+ }
363
+ .mt-\[var\(--deframe-widget-size-gap-sm\)\] {
364
+ margin-top: var(--deframe-widget-size-gap-sm);
365
+ }
366
+ .mt-\[var\(--deframe-widget-size-gap-xl\)\] {
367
+ margin-top: var(--deframe-widget-size-gap-xl);
394
368
  }
395
- .mt-8 {
396
- margin-top: calc(var(--spacing) * 8);
369
+ .mt-\[var\(--deframe-widget-size-gap-xs\)\] {
370
+ margin-top: var(--deframe-widget-size-gap-xs);
397
371
  }
398
372
  .mt-auto {
399
373
  margin-top: auto;
400
374
  }
401
- .mt-md {
402
- margin-top: var(--spacing-md);
375
+ .mt-px {
376
+ margin-top: 1px;
403
377
  }
404
- .mt-sm {
405
- margin-top: var(--spacing-sm);
406
- }
407
- .mr-2 {
408
- margin-right: calc(var(--spacing) * 2);
378
+ .mr-\[var\(--deframe-widget-size-gap-sm\)\] {
379
+ margin-right: var(--deframe-widget-size-gap-sm);
409
380
  }
410
381
  .\[margin-bottom\:var\(--deframe-widget-size-gap-xs\)\] {
411
382
  margin-bottom: var(--deframe-widget-size-gap-xs);
412
383
  }
413
- .mb-1 {
414
- margin-bottom: calc(var(--spacing) * 1);
384
+ .mb-4 {
385
+ margin-bottom: calc(var(--spacing) * 4);
415
386
  }
416
- .mb-2 {
417
- margin-bottom: calc(var(--spacing) * 2);
387
+ .mb-\[6px\] {
388
+ margin-bottom: 6px;
418
389
  }
419
- .mb-3 {
420
- margin-bottom: calc(var(--spacing) * 3);
390
+ .mb-\[var\(--deframe-widget-size-gap-lg\)\] {
391
+ margin-bottom: var(--deframe-widget-size-gap-lg);
421
392
  }
422
- .mb-4 {
423
- margin-bottom: calc(var(--spacing) * 4);
393
+ .mb-\[var\(--deframe-widget-size-gap-md\)\] {
394
+ margin-bottom: var(--deframe-widget-size-gap-md);
395
+ }
396
+ .mb-\[var\(--deframe-widget-size-gap-none\)\] {
397
+ margin-bottom: var(--deframe-widget-size-gap-none);
424
398
  }
425
- .mb-6 {
426
- margin-bottom: calc(var(--spacing) * 6);
399
+ .mb-\[var\(--deframe-widget-size-gap-sm\)\] {
400
+ margin-bottom: var(--deframe-widget-size-gap-sm);
427
401
  }
428
- .mb-8 {
429
- margin-bottom: calc(var(--spacing) * 8);
402
+ .mb-\[var\(--deframe-widget-size-gap-xl\)\] {
403
+ margin-bottom: var(--deframe-widget-size-gap-xl);
404
+ }
405
+ .mb-\[var\(--deframe-widget-size-gap-xs\)\] {
406
+ margin-bottom: var(--deframe-widget-size-gap-xs);
430
407
  }
431
- .mb-10 {
432
- margin-bottom: calc(var(--spacing) * 10);
408
+ .ml-\[var\(--deframe-widget-size-gap-lg\)\] {
409
+ margin-left: var(--deframe-widget-size-gap-lg);
433
410
  }
434
- .ml-1 {
435
- margin-left: calc(var(--spacing) * 1);
411
+ .ml-\[var\(--deframe-widget-size-gap-xs\)\] {
412
+ margin-left: var(--deframe-widget-size-gap-xs);
436
413
  }
437
- .ml-6 {
438
- margin-left: calc(var(--spacing) * 6);
414
+ .box-border {
415
+ box-sizing: border-box;
439
416
  }
440
417
  .block {
441
418
  display: block;
@@ -455,15 +432,18 @@
455
432
  .inline {
456
433
  display: inline;
457
434
  }
435
+ .inline-block {
436
+ display: inline-block;
437
+ }
458
438
  .inline-flex {
459
439
  display: inline-flex;
460
440
  }
461
- .list-item {
462
- display: list-item;
463
- }
464
441
  .h-0\.5 {
465
442
  height: calc(var(--spacing) * 0.5);
466
443
  }
444
+ .h-1 {
445
+ height: calc(var(--spacing) * 1);
446
+ }
467
447
  .h-2 {
468
448
  height: calc(var(--spacing) * 2);
469
449
  }
@@ -479,9 +459,15 @@
479
459
  .h-6 {
480
460
  height: calc(var(--spacing) * 6);
481
461
  }
462
+ .h-7 {
463
+ height: calc(var(--spacing) * 7);
464
+ }
482
465
  .h-8 {
483
466
  height: calc(var(--spacing) * 8);
484
467
  }
468
+ .h-9 {
469
+ height: calc(var(--spacing) * 9);
470
+ }
485
471
  .h-10 {
486
472
  height: calc(var(--spacing) * 10);
487
473
  }
@@ -497,9 +483,18 @@
497
483
  .h-80 {
498
484
  height: calc(var(--spacing) * 80);
499
485
  }
486
+ .h-\[3px\] {
487
+ height: 3px;
488
+ }
500
489
  .h-\[4px\] {
501
490
  height: 4px;
502
491
  }
492
+ .h-\[6px\] {
493
+ height: 6px;
494
+ }
495
+ .h-\[7px\] {
496
+ height: 7px;
497
+ }
503
498
  .h-\[12px\] {
504
499
  height: 12px;
505
500
  }
@@ -536,8 +531,14 @@
536
531
  .h-\[844px\] {
537
532
  height: 844px;
538
533
  }
539
- .h-\[var\(--deframe-widget-button-height\)\] {
540
- height: var(--deframe-widget-button-height);
534
+ .h-\[var\(--deframe-widget-font-leading-lg\)\] {
535
+ height: var(--deframe-widget-font-leading-lg);
536
+ }
537
+ .h-\[var\(--deframe-widget-font-leading-md\)\] {
538
+ height: var(--deframe-widget-font-leading-md);
539
+ }
540
+ .h-\[var\(--deframe-widget-font-leading-sm\)\] {
541
+ height: var(--deframe-widget-font-leading-sm);
541
542
  }
542
543
  .h-auto {
543
544
  height: auto;
@@ -554,6 +555,12 @@
554
555
  .max-h-60 {
555
556
  max-height: calc(var(--spacing) * 60);
556
557
  }
558
+ .max-h-\[88vh\] {
559
+ max-height: 88vh;
560
+ }
561
+ .max-h-\[min\(620px\,calc\(100vh-64px\)\)\] {
562
+ max-height: min(620px, calc(100vh - 64px));
563
+ }
557
564
  .min-h-0 {
558
565
  min-height: calc(var(--spacing) * 0);
559
566
  }
@@ -587,15 +594,24 @@
587
594
  .w-6 {
588
595
  width: calc(var(--spacing) * 6);
589
596
  }
597
+ .w-7 {
598
+ width: calc(var(--spacing) * 7);
599
+ }
590
600
  .w-8 {
591
601
  width: calc(var(--spacing) * 8);
592
602
  }
603
+ .w-9 {
604
+ width: calc(var(--spacing) * 9);
605
+ }
593
606
  .w-10 {
594
607
  width: calc(var(--spacing) * 10);
595
608
  }
596
609
  .w-12 {
597
610
  width: calc(var(--spacing) * 12);
598
611
  }
612
+ .w-14 {
613
+ width: calc(var(--spacing) * 14);
614
+ }
599
615
  .w-20 {
600
616
  width: calc(var(--spacing) * 20);
601
617
  }
@@ -623,12 +639,24 @@
623
639
  .w-96 {
624
640
  width: calc(var(--spacing) * 96);
625
641
  }
642
+ .w-\[3px\] {
643
+ width: 3px;
644
+ }
645
+ .w-\[6px\] {
646
+ width: 6px;
647
+ }
648
+ .w-\[7px\] {
649
+ width: 7px;
650
+ }
626
651
  .w-\[18px\] {
627
652
  width: 18px;
628
653
  }
629
654
  .w-\[83px\] {
630
655
  width: 83px;
631
656
  }
657
+ .w-\[210px\] {
658
+ width: 210px;
659
+ }
632
660
  .w-\[300px\] {
633
661
  width: 300px;
634
662
  }
@@ -647,6 +675,12 @@
647
675
  .w-\[clamp\(18rem\,40vw\,30rem\)\] {
648
676
  width: clamp(18rem, 40vw, 30rem);
649
677
  }
678
+ .w-\[min\(680px\,calc\(100vw-32px\)\)\] {
679
+ width: min(680px, calc(100vw - 32px));
680
+ }
681
+ .w-auto {
682
+ width: auto;
683
+ }
650
684
  .w-full {
651
685
  width: 100%;
652
686
  }
@@ -662,9 +696,15 @@
662
696
  .max-w-3xl {
663
697
  max-width: var(--container-3xl);
664
698
  }
699
+ .max-w-\[200px\] {
700
+ max-width: 200px;
701
+ }
665
702
  .max-w-\[320px\] {
666
703
  max-width: 320px;
667
704
  }
705
+ .max-w-\[480px\] {
706
+ max-width: 480px;
707
+ }
668
708
  .max-w-\[620px\] {
669
709
  max-width: 620px;
670
710
  }
@@ -672,7 +712,7 @@
672
712
  max-width: 100%;
673
713
  }
674
714
  .max-w-lg {
675
- max-width: var(--spacing-lg);
715
+ max-width: var(--container-lg);
676
716
  }
677
717
  .min-w-0 {
678
718
  min-width: calc(var(--spacing) * 0);
@@ -680,6 +720,12 @@
680
720
  .min-w-\[120px\] {
681
721
  min-width: 120px;
682
722
  }
723
+ .min-w-\[160px\] {
724
+ min-width: 160px;
725
+ }
726
+ .min-w-\[180px\] {
727
+ min-width: 180px;
728
+ }
683
729
  .flex-1 {
684
730
  flex: 1;
685
731
  }
@@ -689,10 +735,17 @@
689
735
  .flex-shrink-0 {
690
736
  flex-shrink: 0;
691
737
  }
738
+ .shrink-0 {
739
+ flex-shrink: 0;
740
+ }
692
741
  .-translate-x-1\/2 {
693
742
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
694
743
  translate: var(--tw-translate-x) var(--tw-translate-y);
695
744
  }
745
+ .translate-x-1 {
746
+ --tw-translate-x: calc(var(--spacing) * 1);
747
+ translate: var(--tw-translate-x) var(--tw-translate-y);
748
+ }
696
749
  .-translate-y-1\/2 {
697
750
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
698
751
  translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -710,8 +763,11 @@
710
763
  .animate-bounce {
711
764
  animation: var(--animate-bounce);
712
765
  }
713
- .animate-fade-in {
714
- animation: var(--animate-fade-in);
766
+ .animate-spin {
767
+ animation: var(--animate-spin);
768
+ }
769
+ .cursor-default {
770
+ cursor: default;
715
771
  }
716
772
  .cursor-not-allowed {
717
773
  cursor: not-allowed;
@@ -719,6 +775,12 @@
719
775
  .cursor-pointer {
720
776
  cursor: pointer;
721
777
  }
778
+ .cursor-text {
779
+ cursor: text;
780
+ }
781
+ .resize {
782
+ resize: both;
783
+ }
722
784
  .list-none {
723
785
  list-style-type: none;
724
786
  }
@@ -728,6 +790,12 @@
728
790
  .grid-cols-3 {
729
791
  grid-template-columns: repeat(3, minmax(0, 1fr));
730
792
  }
793
+ .grid-cols-\[1fr_auto\] {
794
+ grid-template-columns: 1fr auto;
795
+ }
796
+ .grid-cols-\[1fr_auto_auto\] {
797
+ grid-template-columns: 1fr auto auto;
798
+ }
731
799
  .flex-col {
732
800
  flex-direction: column;
733
801
  }
@@ -737,6 +805,9 @@
737
805
  .flex-wrap {
738
806
  flex-wrap: wrap;
739
807
  }
808
+ .items-baseline {
809
+ align-items: baseline;
810
+ }
740
811
  .items-center {
741
812
  align-items: center;
742
813
  }
@@ -755,6 +826,9 @@
755
826
  .justify-center {
756
827
  justify-content: center;
757
828
  }
829
+ .justify-end {
830
+ justify-content: flex-end;
831
+ }
758
832
  .justify-start {
759
833
  justify-content: flex-start;
760
834
  }
@@ -767,47 +841,44 @@
767
841
  .\[gap\:var\(--deframe-widget-size-gap-xs\)\] {
768
842
  gap: var(--deframe-widget-size-gap-xs);
769
843
  }
770
- .gap-0 {
771
- gap: calc(var(--spacing) * 0);
772
- }
773
- .gap-0\.5 {
774
- gap: calc(var(--spacing) * 0.5);
844
+ .gap-\[2px\] {
845
+ gap: 2px;
775
846
  }
776
- .gap-1 {
777
- gap: calc(var(--spacing) * 1);
847
+ .gap-\[3px\] {
848
+ gap: 3px;
778
849
  }
779
- .gap-2 {
780
- gap: calc(var(--spacing) * 2);
850
+ .gap-\[4px\] {
851
+ gap: 4px;
781
852
  }
782
- .gap-2\.5 {
783
- gap: calc(var(--spacing) * 2.5);
853
+ .gap-\[5px\] {
854
+ gap: 5px;
784
855
  }
785
- .gap-3 {
786
- gap: calc(var(--spacing) * 3);
856
+ .gap-\[6px\] {
857
+ gap: 6px;
787
858
  }
788
- .gap-4 {
789
- gap: calc(var(--spacing) * 4);
859
+ .gap-\[10px\] {
860
+ gap: 10px;
790
861
  }
791
- .gap-6 {
792
- gap: calc(var(--spacing) * 6);
862
+ .gap-\[var\(--deframe-widget-size-gap-lg\)\] {
863
+ gap: var(--deframe-widget-size-gap-lg);
793
864
  }
794
- .gap-12 {
795
- gap: calc(var(--spacing) * 12);
865
+ .gap-\[var\(--deframe-widget-size-gap-md\)\] {
866
+ gap: var(--deframe-widget-size-gap-md);
796
867
  }
797
- .gap-\[2px\] {
798
- gap: 2px;
868
+ .gap-\[var\(--deframe-widget-size-gap-none\)\] {
869
+ gap: var(--deframe-widget-size-gap-none);
799
870
  }
800
871
  .gap-\[var\(--deframe-widget-size-gap-sm\)\] {
801
872
  gap: var(--deframe-widget-size-gap-sm);
802
873
  }
803
- .gap-lg {
804
- gap: var(--spacing-lg);
874
+ .gap-\[var\(--deframe-widget-size-gap-xl\)\] {
875
+ gap: var(--deframe-widget-size-gap-xl);
805
876
  }
806
- .gap-md {
807
- gap: var(--spacing-md);
877
+ .gap-\[var\(--deframe-widget-size-gap-xs\)\] {
878
+ gap: var(--deframe-widget-size-gap-xs);
808
879
  }
809
- .gap-sm {
810
- gap: var(--spacing-sm);
880
+ .gap-\[var\(--deframe-widget-size-gap-xxl\)\] {
881
+ gap: var(--deframe-widget-size-gap-xxl);
811
882
  }
812
883
  .space-y-1 {
813
884
  :where(& > :not(:last-child)) {
@@ -851,6 +922,9 @@
851
922
  margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
852
923
  }
853
924
  }
925
+ .gap-x-\[var\(--deframe-widget-size-gap-md\)\] {
926
+ column-gap: var(--deframe-widget-size-gap-md);
927
+ }
854
928
  .divide-y {
855
929
  :where(& > :not(:last-child)) {
856
930
  --tw-divide-y-reverse: 0;
@@ -860,9 +934,9 @@
860
934
  border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
861
935
  }
862
936
  }
863
- .divide-\[\#2A2A2A\] {
937
+ .divide-\[color\:var\(--deframe-widget-color-border-tertiary\)\] {
864
938
  :where(& > :not(:last-child)) {
865
- border-color: #2A2A2A;
939
+ border-color: var(--deframe-widget-color-border-tertiary);
866
940
  }
867
941
  }
868
942
  .self-start {
@@ -891,64 +965,66 @@
891
965
  .rounded {
892
966
  border-radius: 0.25rem;
893
967
  }
894
- .rounded-2xl {
895
- border-radius: var(--radius-2xl);
896
- }
897
968
  .rounded-\[18px\] {
898
969
  border-radius: 18px;
899
970
  }
900
- .rounded-\[24px\] {
901
- border-radius: 24px;
902
- }
903
971
  .rounded-\[56px\] {
904
972
  border-radius: 56px;
905
973
  }
906
974
  .rounded-\[60px\] {
907
975
  border-radius: 60px;
908
976
  }
909
- .rounded-\[var\(--deframe-widget-button-radius\)\] {
910
- border-radius: var(--deframe-widget-button-radius);
911
- }
912
- .rounded-\[var\(--deframe-widget-radius-lg\)\] {
913
- border-radius: var(--deframe-widget-radius-lg);
914
- }
915
977
  .rounded-\[var\(--deframe-widget-size-radius-full\)\] {
916
978
  border-radius: var(--deframe-widget-size-radius-full);
917
979
  }
980
+ .rounded-\[var\(--deframe-widget-size-radius-lg\)\] {
981
+ border-radius: var(--deframe-widget-size-radius-lg);
982
+ }
983
+ .rounded-\[var\(--deframe-widget-size-radius-md\)\] {
984
+ border-radius: var(--deframe-widget-size-radius-md);
985
+ }
918
986
  .rounded-\[var\(--deframe-widget-size-radius-sm\)\] {
919
987
  border-radius: var(--deframe-widget-size-radius-sm);
920
988
  }
989
+ .rounded-\[var\(--deframe-widget-size-radius-sm\)_0_0_var\(--deframe-widget-size-radius-sm\)\] {
990
+ border-radius: var(--deframe-widget-size-radius-sm) 0 0 var(--deframe-widget-size-radius-sm);
991
+ }
992
+ .rounded-\[var\(--deframe-widget-size-radius-xl\)\] {
993
+ border-radius: var(--deframe-widget-size-radius-xl);
994
+ }
921
995
  .rounded-\[var\(--deframe-widget-size-radius-xs\)\] {
922
996
  border-radius: var(--deframe-widget-size-radius-xs);
923
997
  }
924
- .rounded-full {
925
- border-radius: var(--radius-full);
926
- }
927
- .rounded-lg {
928
- border-radius: var(--radius-lg);
998
+ .rounded-\[var\(--hash-radius-item\)\] {
999
+ border-radius: var(--hash-radius-item);
929
1000
  }
930
- .rounded-md {
931
- border-radius: var(--radius-md);
1001
+ .rounded-full {
1002
+ border-radius: calc(infinity * 1px);
932
1003
  }
933
- .rounded-xl {
934
- border-radius: var(--radius-xl);
1004
+ .rounded-t-\[var\(--deframe-widget-size-radius-full\)\] {
1005
+ border-top-left-radius: var(--deframe-widget-size-radius-full);
1006
+ border-top-right-radius: var(--deframe-widget-size-radius-full);
935
1007
  }
936
- .rounded-t-\[32px\] {
937
- border-top-left-radius: 32px;
938
- border-top-right-radius: 32px;
1008
+ .rounded-t-\[var\(--deframe-widget-size-radius-lg\)\] {
1009
+ border-top-left-radius: var(--deframe-widget-size-radius-lg);
1010
+ border-top-right-radius: var(--deframe-widget-size-radius-lg);
939
1011
  }
940
- .rounded-t-full {
941
- border-top-left-radius: var(--radius-full);
942
- border-top-right-radius: var(--radius-full);
1012
+ .rounded-t-\[var\(--deframe-widget-size-radius-xl\)\] {
1013
+ border-top-left-radius: var(--deframe-widget-size-radius-xl);
1014
+ border-top-right-radius: var(--deframe-widget-size-radius-xl);
943
1015
  }
944
- .rounded-b-3xl {
945
- border-bottom-right-radius: var(--radius-3xl);
946
- border-bottom-left-radius: var(--radius-3xl);
1016
+ .rounded-b-\[var\(--deframe-widget-size-radius-xl\)\] {
1017
+ border-bottom-right-radius: var(--deframe-widget-size-radius-xl);
1018
+ border-bottom-left-radius: var(--deframe-widget-size-radius-xl);
947
1019
  }
948
1020
  .border {
949
1021
  border-style: var(--tw-border-style);
950
1022
  border-width: 1px;
951
1023
  }
1024
+ .border-\[length\:var\(--deframe-widget-size-border-sm\)\] {
1025
+ border-style: var(--tw-border-style);
1026
+ border-width: var(--deframe-widget-size-border-sm);
1027
+ }
952
1028
  .border-\[length\:var\(--deframe-widget-size-border-xs\)\] {
953
1029
  border-style: var(--tw-border-style);
954
1030
  border-width: var(--deframe-widget-size-border-xs);
@@ -957,10 +1033,18 @@
957
1033
  border-top-style: var(--tw-border-style);
958
1034
  border-top-width: 1px;
959
1035
  }
1036
+ .border-r {
1037
+ border-right-style: var(--tw-border-style);
1038
+ border-right-width: 1px;
1039
+ }
960
1040
  .border-b {
961
1041
  border-bottom-style: var(--tw-border-style);
962
1042
  border-bottom-width: 1px;
963
1043
  }
1044
+ .border-b-0 {
1045
+ border-bottom-style: var(--tw-border-style);
1046
+ border-bottom-width: 0px;
1047
+ }
964
1048
  .border-none {
965
1049
  --tw-border-style: none;
966
1050
  border-style: none;
@@ -975,20 +1059,62 @@
975
1059
  .border-\[\#3A3A3A\] {
976
1060
  border-color: #3A3A3A;
977
1061
  }
1062
+ .border-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-brand-primary\)_32\%\,transparent\)\] {
1063
+ border-color: var(--deframe-widget-color-brand-primary);
1064
+ @supports (color: color-mix(in lab, red, red)) {
1065
+ border-color: color-mix(in srgb,var(--deframe-widget-color-brand-primary) 32%,transparent);
1066
+ }
1067
+ }
1068
+ .border-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-error\)_32\%\,transparent\)\] {
1069
+ border-color: var(--deframe-widget-color-state-error);
1070
+ @supports (color: color-mix(in lab, red, red)) {
1071
+ border-color: color-mix(in srgb,var(--deframe-widget-color-state-error) 32%,transparent);
1072
+ }
1073
+ }
1074
+ .border-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-info\)_32\%\,transparent\)\] {
1075
+ border-color: var(--deframe-widget-color-state-info);
1076
+ @supports (color: color-mix(in lab, red, red)) {
1077
+ border-color: color-mix(in srgb,var(--deframe-widget-color-state-info) 32%,transparent);
1078
+ }
1079
+ }
1080
+ .border-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-success\)_32\%\,transparent\)\] {
1081
+ border-color: var(--deframe-widget-color-state-success);
1082
+ @supports (color: color-mix(in lab, red, red)) {
1083
+ border-color: color-mix(in srgb,var(--deframe-widget-color-state-success) 32%,transparent);
1084
+ }
1085
+ }
1086
+ .border-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-warning\)_32\%\,transparent\)\] {
1087
+ border-color: var(--deframe-widget-color-state-warning);
1088
+ @supports (color: color-mix(in lab, red, red)) {
1089
+ border-color: color-mix(in srgb,var(--deframe-widget-color-state-warning) 32%,transparent);
1090
+ }
1091
+ }
978
1092
  .border-\[color\:var\(--deframe-widget-color-border-primary\)\] {
979
1093
  border-color: var(--deframe-widget-color-border-primary);
980
1094
  }
1095
+ .border-\[color\:var\(--deframe-widget-color-border-primary-dark\)\] {
1096
+ border-color: var(--deframe-widget-color-border-primary-dark);
1097
+ }
981
1098
  .border-\[color\:var\(--deframe-widget-color-border-primary-disabled\)\] {
982
1099
  border-color: var(--deframe-widget-color-border-primary-disabled);
983
1100
  }
984
1101
  .border-\[color\:var\(--deframe-widget-color-border-secondary\)\] {
985
1102
  border-color: var(--deframe-widget-color-border-secondary);
986
1103
  }
1104
+ .border-\[color\:var\(--deframe-widget-color-border-secondary-dark\)\] {
1105
+ border-color: var(--deframe-widget-color-border-secondary-dark);
1106
+ }
987
1107
  .border-\[color\:var\(--deframe-widget-color-border-secondary-disabled\)\] {
988
1108
  border-color: var(--deframe-widget-color-border-secondary-disabled);
989
1109
  }
990
- .border-\[var\(--color-border-default\,\#333\)\] {
991
- border-color: var(--color-border-default,#333);
1110
+ .border-\[color\:var\(--deframe-widget-color-border-tertiary\)\] {
1111
+ border-color: var(--deframe-widget-color-border-tertiary);
1112
+ }
1113
+ .border-\[color\:var\(--deframe-widget-color-border-tertiary-dark\)\] {
1114
+ border-color: var(--deframe-widget-color-border-tertiary-dark);
1115
+ }
1116
+ .border-\[color\:var\(--deframe-widget-color-brand-primary\)\] {
1117
+ border-color: var(--deframe-widget-color-brand-primary);
992
1118
  }
993
1119
  .border-\[var\(--deframe-widget-color-border-primary\)\] {
994
1120
  border-color: var(--deframe-widget-color-border-primary);
@@ -1008,32 +1134,17 @@
1008
1134
  .border-\[var\(--deframe-widget-color-state-warning\)\] {
1009
1135
  border-color: var(--deframe-widget-color-state-warning);
1010
1136
  }
1011
- .border-bg-default {
1012
- border-color: var(--color-bg-default);
1013
- }
1014
1137
  .border-blue-300 {
1015
1138
  border-color: var(--color-blue-300);
1016
1139
  }
1017
1140
  .border-blue-500 {
1018
1141
  border-color: var(--color-blue-500);
1019
1142
  }
1020
- .border-border-default {
1021
- border-color: var(--color-border-default);
1022
- }
1023
- .border-border-subtle {
1024
- border-color: var(--color-border-subtle);
1025
- }
1026
- .border-brand-primary {
1027
- border-color: var(--color-brand-primary);
1028
- }
1029
- .border-gray-600 {
1030
- border-color: var(--color-gray-600);
1031
- }
1032
1143
  .border-gray-700 {
1033
1144
  border-color: var(--color-gray-700);
1034
1145
  }
1035
- .border-gray-800 {
1036
- border-color: var(--color-gray-800);
1146
+ .border-transparent {
1147
+ border-color: transparent;
1037
1148
  }
1038
1149
  .bg-\[\#0A0A0A\] {
1039
1150
  background-color: #0A0A0A;
@@ -1050,36 +1161,138 @@
1050
1161
  .bg-\[\#2A2A2A\] {
1051
1162
  background-color: #2A2A2A;
1052
1163
  }
1053
- .bg-\[\#121212\] {
1054
- background-color: #121212;
1055
- }
1056
1164
  .bg-\[\#ff7a45\] {
1057
1165
  background-color: #ff7a45;
1058
1166
  }
1059
- .bg-\[rgba\(43\,161\,118\,0\.12\)\] {
1060
- background-color: rgba(43,161,118,0.12);
1167
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-primary\)_88\%\,transparent\)\] {
1168
+ background-color: var(--deframe-widget-color-bg-primary);
1169
+ @supports (color: color-mix(in lab, red, red)) {
1170
+ background-color: color-mix(in srgb,var(--deframe-widget-color-bg-primary) 88%,transparent);
1171
+ }
1172
+ }
1173
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-secondary\)_72\%\,transparent\)\] {
1174
+ background-color: var(--deframe-widget-color-bg-secondary);
1175
+ @supports (color: color-mix(in lab, red, red)) {
1176
+ background-color: color-mix(in srgb,var(--deframe-widget-color-bg-secondary) 72%,transparent);
1177
+ }
1178
+ }
1179
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-tertiary\)_84\%\,transparent\)\] {
1180
+ background-color: var(--deframe-widget-color-bg-tertiary);
1181
+ @supports (color: color-mix(in lab, red, red)) {
1182
+ background-color: color-mix(in srgb,var(--deframe-widget-color-bg-tertiary) 84%,transparent);
1183
+ }
1184
+ }
1185
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-tertiary\)_92\%\,transparent\)\] {
1186
+ background-color: var(--deframe-widget-color-bg-tertiary);
1187
+ @supports (color: color-mix(in lab, red, red)) {
1188
+ background-color: color-mix(in srgb,var(--deframe-widget-color-bg-tertiary) 92%,transparent);
1189
+ }
1190
+ }
1191
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-brand-primary\)_12\%\,transparent\)\] {
1192
+ background-color: var(--deframe-widget-color-brand-primary);
1193
+ @supports (color: color-mix(in lab, red, red)) {
1194
+ background-color: color-mix(in srgb,var(--deframe-widget-color-brand-primary) 12%,transparent);
1195
+ }
1196
+ }
1197
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-brand-primary\)_18\%\,transparent\)\] {
1198
+ background-color: var(--deframe-widget-color-brand-primary);
1199
+ @supports (color: color-mix(in lab, red, red)) {
1200
+ background-color: color-mix(in srgb,var(--deframe-widget-color-brand-primary) 18%,transparent);
1201
+ }
1202
+ }
1203
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-error\)_16\%\,transparent\)\] {
1204
+ background-color: var(--deframe-widget-color-state-error);
1205
+ @supports (color: color-mix(in lab, red, red)) {
1206
+ background-color: color-mix(in srgb,var(--deframe-widget-color-state-error) 16%,transparent);
1207
+ }
1208
+ }
1209
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-error\)_20\%\,transparent\)\] {
1210
+ background-color: var(--deframe-widget-color-state-error);
1211
+ @supports (color: color-mix(in lab, red, red)) {
1212
+ background-color: color-mix(in srgb,var(--deframe-widget-color-state-error) 20%,transparent);
1213
+ }
1214
+ }
1215
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-info\)_16\%\,transparent\)\] {
1216
+ background-color: var(--deframe-widget-color-state-info);
1217
+ @supports (color: color-mix(in lab, red, red)) {
1218
+ background-color: color-mix(in srgb,var(--deframe-widget-color-state-info) 16%,transparent);
1219
+ }
1220
+ }
1221
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-success\)_12\%\,transparent\)\] {
1222
+ background-color: var(--deframe-widget-color-state-success);
1223
+ @supports (color: color-mix(in lab, red, red)) {
1224
+ background-color: color-mix(in srgb,var(--deframe-widget-color-state-success) 12%,transparent);
1225
+ }
1226
+ }
1227
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-success\)_16\%\,transparent\)\] {
1228
+ background-color: var(--deframe-widget-color-state-success);
1229
+ @supports (color: color-mix(in lab, red, red)) {
1230
+ background-color: color-mix(in srgb,var(--deframe-widget-color-state-success) 16%,transparent);
1231
+ }
1061
1232
  }
1062
- .bg-\[var\(--color-bg-muted\,\#2a2a2a\)\] {
1063
- background-color: var(--color-bg-muted,#2a2a2a);
1233
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-success\)_20\%\,transparent\)\] {
1234
+ background-color: var(--deframe-widget-color-state-success);
1235
+ @supports (color: color-mix(in lab, red, red)) {
1236
+ background-color: color-mix(in srgb,var(--deframe-widget-color-state-success) 20%,transparent);
1237
+ }
1064
1238
  }
1065
- .bg-\[var\(--color-bg-raised\,\#1f1f1f\)\] {
1066
- background-color: var(--color-bg-raised,#1f1f1f);
1239
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-warning\)_16\%\,transparent\)\] {
1240
+ background-color: var(--deframe-widget-color-state-warning);
1241
+ @supports (color: color-mix(in lab, red, red)) {
1242
+ background-color: color-mix(in srgb,var(--deframe-widget-color-state-warning) 16%,transparent);
1243
+ }
1067
1244
  }
1068
- .bg-\[var\(--color-bg-subtle\,\#1a1a1a\)\] {
1069
- background-color: var(--color-bg-subtle,#1a1a1a);
1245
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-state-warning\)_20\%\,transparent\)\] {
1246
+ background-color: var(--deframe-widget-color-state-warning);
1247
+ @supports (color: color-mix(in lab, red, red)) {
1248
+ background-color: color-mix(in srgb,var(--deframe-widget-color-state-warning) 20%,transparent);
1249
+ }
1070
1250
  }
1071
1251
  .bg-\[var\(--deframe-widget-color-bg-primary\)\] {
1072
1252
  background-color: var(--deframe-widget-color-bg-primary);
1073
1253
  }
1254
+ .bg-\[var\(--deframe-widget-color-bg-primary\)\]\/50 {
1255
+ background-color: var(--deframe-widget-color-bg-primary);
1256
+ @supports (color: color-mix(in lab, red, red)) {
1257
+ background-color: color-mix(in oklab, var(--deframe-widget-color-bg-primary) 50%, transparent);
1258
+ }
1259
+ }
1260
+ .bg-\[var\(--deframe-widget-color-bg-primary-dark\)\] {
1261
+ background-color: var(--deframe-widget-color-bg-primary-dark);
1262
+ }
1263
+ .bg-\[var\(--deframe-widget-color-bg-primary-disabled\)\] {
1264
+ background-color: var(--deframe-widget-color-bg-primary-disabled);
1265
+ }
1074
1266
  .bg-\[var\(--deframe-widget-color-bg-secondary\)\] {
1075
1267
  background-color: var(--deframe-widget-color-bg-secondary);
1076
1268
  }
1269
+ .bg-\[var\(--deframe-widget-color-bg-secondary-dark\)\] {
1270
+ background-color: var(--deframe-widget-color-bg-secondary-dark);
1271
+ }
1272
+ .bg-\[var\(--deframe-widget-color-bg-tertiary\)\] {
1273
+ background-color: var(--deframe-widget-color-bg-tertiary);
1274
+ }
1275
+ .bg-\[var\(--deframe-widget-color-bg-tertiary-dark\)\] {
1276
+ background-color: var(--deframe-widget-color-bg-tertiary-dark);
1277
+ }
1278
+ .bg-\[var\(--deframe-widget-color-border-primary\)\] {
1279
+ background-color: var(--deframe-widget-color-border-primary);
1280
+ }
1281
+ .bg-\[var\(--deframe-widget-color-border-secondary\)\] {
1282
+ background-color: var(--deframe-widget-color-border-secondary);
1283
+ }
1284
+ .bg-\[var\(--deframe-widget-color-border-secondary-dark\)\] {
1285
+ background-color: var(--deframe-widget-color-border-secondary-dark);
1286
+ }
1077
1287
  .bg-\[var\(--deframe-widget-color-brand-primary\)\] {
1078
1288
  background-color: var(--deframe-widget-color-brand-primary);
1079
1289
  }
1080
1290
  .bg-\[var\(--deframe-widget-color-brand-primary-disabled\)\] {
1081
1291
  background-color: var(--deframe-widget-color-brand-primary-disabled);
1082
1292
  }
1293
+ .bg-\[var\(--deframe-widget-color-brand-secondary\)\] {
1294
+ background-color: var(--deframe-widget-color-brand-secondary);
1295
+ }
1083
1296
  .bg-\[var\(--deframe-widget-color-state-error\)\] {
1084
1297
  background-color: var(--deframe-widget-color-state-error);
1085
1298
  }
@@ -1116,81 +1329,24 @@
1116
1329
  background-color: color-mix(in oklab, var(--deframe-widget-color-state-warning) 20%, transparent);
1117
1330
  }
1118
1331
  }
1119
- .bg-\[var\(--deframe-widget-color-surface-default\)\] {
1120
- background-color: var(--deframe-widget-color-surface-default);
1121
- }
1122
- .bg-\[var\(--deframe-widget-color-surface-muted\)\] {
1123
- background-color: var(--deframe-widget-color-surface-muted);
1124
- }
1125
- .bg-\[var\(--sheet-bg\,\#0A0A0A\)\] {
1126
- background-color: var(--sheet-bg,#0A0A0A);
1127
- }
1128
- .bg-amber-500\/20 {
1129
- background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
1130
- @supports (color: color-mix(in lab, red, red)) {
1131
- background-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
1132
- }
1133
- }
1134
- .bg-bg-default {
1135
- background-color: var(--color-bg-default);
1136
- }
1137
- .bg-bg-muted {
1138
- background-color: var(--color-bg-muted);
1139
- }
1140
- .bg-bg-raised {
1141
- background-color: var(--color-bg-raised);
1142
- }
1143
- .bg-bg-subtle {
1144
- background-color: var(--color-bg-subtle);
1145
- }
1146
- .bg-black {
1147
- background-color: var(--color-black);
1148
- }
1149
- .bg-black\/50 {
1150
- background-color: color-mix(in srgb, #000 50%, transparent);
1151
- @supports (color: color-mix(in lab, red, red)) {
1152
- background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
1153
- }
1154
- }
1155
1332
  .bg-blue-50 {
1156
1333
  background-color: var(--color-blue-50);
1157
1334
  }
1158
1335
  .bg-blue-500 {
1159
1336
  background-color: var(--color-blue-500);
1160
1337
  }
1161
- .bg-blue-600 {
1162
- background-color: var(--color-blue-600);
1163
- }
1164
1338
  .bg-blue-900 {
1165
1339
  background-color: var(--color-blue-900);
1166
1340
  }
1167
- .bg-border-default {
1168
- background-color: var(--color-border-default);
1169
- }
1170
- .bg-brand-primary {
1171
- background-color: var(--color-brand-primary);
1172
- }
1173
- .bg-brand-secondary {
1174
- background-color: var(--color-brand-secondary);
1175
- }
1176
1341
  .bg-gray-100 {
1177
1342
  background-color: var(--color-gray-100);
1178
1343
  }
1179
- .bg-gray-600 {
1180
- background-color: var(--color-gray-600);
1181
- }
1182
- .bg-gray-800 {
1183
- background-color: var(--color-gray-800);
1184
- }
1185
1344
  .bg-gray-900 {
1186
1345
  background-color: var(--color-gray-900);
1187
1346
  }
1188
1347
  .bg-green-100 {
1189
1348
  background-color: var(--color-green-100);
1190
1349
  }
1191
- .bg-green-400 {
1192
- background-color: var(--color-green-400);
1193
- }
1194
1350
  .bg-purple-500 {
1195
1351
  background-color: var(--color-purple-500);
1196
1352
  }
@@ -1200,27 +1356,9 @@
1200
1356
  .bg-red-500 {
1201
1357
  background-color: var(--color-red-500);
1202
1358
  }
1203
- .bg-red-500\/20 {
1204
- background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
1205
- @supports (color: color-mix(in lab, red, red)) {
1206
- background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
1207
- }
1208
- }
1209
- .bg-state-success {
1210
- background-color: var(--color-state-success);
1211
- }
1212
- .bg-teal-600\/20 {
1213
- background-color: color-mix(in srgb, oklch(60% 0.118 184.704) 20%, transparent);
1214
- @supports (color: color-mix(in lab, red, red)) {
1215
- background-color: color-mix(in oklab, var(--color-teal-600) 20%, transparent);
1216
- }
1217
- }
1218
1359
  .bg-transparent {
1219
1360
  background-color: transparent;
1220
1361
  }
1221
- .bg-white {
1222
- background-color: var(--color-white);
1223
- }
1224
1362
  .bg-yellow-100 {
1225
1363
  background-color: var(--color-yellow-100);
1226
1364
  }
@@ -1236,6 +1374,9 @@
1236
1374
  --tw-gradient-position: to top left in oklab;
1237
1375
  background-image: linear-gradient(var(--tw-gradient-stops));
1238
1376
  }
1377
+ .bg-none {
1378
+ background-image: none;
1379
+ }
1239
1380
  .from-\[\#0f3b2f\]\/10 {
1240
1381
  --tw-gradient-from: color-mix(in oklab, #0f3b2f 10%, transparent);
1241
1382
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1269,14 +1410,6 @@
1269
1410
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
1270
1411
  --tw-gradient-stops: var(--tw-gradient-via-stops);
1271
1412
  }
1272
- .via-white\/20 {
1273
- --tw-gradient-via: color-mix(in srgb, #fff 20%, transparent);
1274
- @supports (color: color-mix(in lab, red, red)) {
1275
- --tw-gradient-via: color-mix(in oklab, var(--color-white) 20%, transparent);
1276
- }
1277
- --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
1278
- --tw-gradient-stops: var(--tw-gradient-via-stops);
1279
- }
1280
1413
  .to-\[\#0f3b2f\]\/30 {
1281
1414
  --tw-gradient-to: color-mix(in oklab, #0f3b2f 30%, transparent);
1282
1415
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1302,182 +1435,170 @@
1302
1435
  .\!p-\[24px\] {
1303
1436
  padding: 24px !important;
1304
1437
  }
1305
- .\!p-md {
1306
- padding: var(--spacing-md) !important;
1307
- }
1308
- .p-0 {
1309
- padding: calc(var(--spacing) * 0);
1310
- }
1311
- .p-2 {
1312
- padding: calc(var(--spacing) * 2);
1313
- }
1314
- .p-3 {
1315
- padding: calc(var(--spacing) * 3);
1438
+ .p-\[3px\] {
1439
+ padding: 3px;
1316
1440
  }
1317
- .p-4 {
1318
- padding: calc(var(--spacing) * 4);
1319
- }
1320
- .p-6 {
1321
- padding: calc(var(--spacing) * 6);
1322
- }
1323
- .p-8 {
1324
- padding: calc(var(--spacing) * 8);
1325
- }
1326
- .p-\[var\(--deframe-widget-space-md\)\] {
1327
- padding: var(--deframe-widget-space-md);
1328
- }
1329
- .p-md {
1330
- padding: var(--spacing-md);
1441
+ .p-\[var\(--deframe-widget-size-gap-lg\)\] {
1442
+ padding: var(--deframe-widget-size-gap-lg);
1331
1443
  }
1332
1444
  .p-px {
1333
1445
  padding: 1px;
1334
1446
  }
1335
- .px-0 {
1336
- padding-inline: calc(var(--spacing) * 0);
1447
+ .\!px-\[var\(--deframe-widget-size-padding-x-md\)\] {
1448
+ padding-inline: var(--deframe-widget-size-padding-x-md) !important;
1337
1449
  }
1338
- .px-2 {
1339
- padding-inline: calc(var(--spacing) * 2);
1450
+ .px-\[6px\] {
1451
+ padding-inline: 6px;
1340
1452
  }
1341
- .px-3 {
1342
- padding-inline: calc(var(--spacing) * 3);
1453
+ .px-\[7px\] {
1454
+ padding-inline: 7px;
1343
1455
  }
1344
- .px-4 {
1345
- padding-inline: calc(var(--spacing) * 4);
1456
+ .px-\[10px\] {
1457
+ padding-inline: 10px;
1346
1458
  }
1347
- .px-6 {
1348
- padding-inline: calc(var(--spacing) * 6);
1349
- }
1350
- .px-\[8px\] {
1351
- padding-inline: 8px;
1459
+ .px-\[14px\] {
1460
+ padding-inline: 14px;
1352
1461
  }
1353
1462
  .px-\[28px\] {
1354
1463
  padding-inline: 28px;
1355
1464
  }
1356
- .px-\[var\(--deframe-widget-button-padding-x\)\] {
1357
- padding-inline: var(--deframe-widget-button-padding-x);
1465
+ .px-\[var\(--deframe-widget-size-padding-x-lg\)\] {
1466
+ padding-inline: var(--deframe-widget-size-padding-x-lg);
1358
1467
  }
1359
1468
  .px-\[var\(--deframe-widget-size-padding-x-md\)\] {
1360
1469
  padding-inline: var(--deframe-widget-size-padding-x-md);
1361
1470
  }
1362
- .px-\[var\(--deframe-widget-size-padding-x-xl\)\] {
1363
- padding-inline: var(--deframe-widget-size-padding-x-xl);
1364
- }
1365
- .px-md {
1366
- padding-inline: var(--spacing-md);
1471
+ .px-\[var\(--deframe-widget-size-padding-x-none\)\] {
1472
+ padding-inline: var(--deframe-widget-size-padding-x-none);
1367
1473
  }
1368
- .px-sm {
1369
- padding-inline: var(--spacing-sm);
1474
+ .px-\[var\(--deframe-widget-size-padding-x-sm\)\] {
1475
+ padding-inline: var(--deframe-widget-size-padding-x-sm);
1370
1476
  }
1371
- .py-1 {
1372
- padding-block: calc(var(--spacing) * 1);
1477
+ .px-\[var\(--deframe-widget-size-padding-x-xl\)\] {
1478
+ padding-inline: var(--deframe-widget-size-padding-x-xl);
1373
1479
  }
1374
- .py-1\.5 {
1375
- padding-block: calc(var(--spacing) * 1.5);
1480
+ .px-\[var\(--deframe-widget-size-padding-x-xs\)\] {
1481
+ padding-inline: var(--deframe-widget-size-padding-x-xs);
1376
1482
  }
1377
- .py-2 {
1378
- padding-block: calc(var(--spacing) * 2);
1483
+ .py-\[2px\] {
1484
+ padding-block: 2px;
1379
1485
  }
1380
- .py-2\.5 {
1381
- padding-block: calc(var(--spacing) * 2.5);
1486
+ .py-\[3px\] {
1487
+ padding-block: 3px;
1382
1488
  }
1383
- .py-3 {
1384
- padding-block: calc(var(--spacing) * 3);
1489
+ .py-\[5px\] {
1490
+ padding-block: 5px;
1385
1491
  }
1386
- .py-4 {
1387
- padding-block: calc(var(--spacing) * 4);
1492
+ .py-\[6px\] {
1493
+ padding-block: 6px;
1388
1494
  }
1389
- .py-8 {
1390
- padding-block: calc(var(--spacing) * 8);
1495
+ .py-\[7px\] {
1496
+ padding-block: 7px;
1391
1497
  }
1392
- .py-12 {
1393
- padding-block: calc(var(--spacing) * 12);
1498
+ .py-\[9px\] {
1499
+ padding-block: 9px;
1394
1500
  }
1395
- .py-20 {
1396
- padding-block: calc(var(--spacing) * 20);
1501
+ .py-\[10px\] {
1502
+ padding-block: 10px;
1397
1503
  }
1398
- .py-\[2px\] {
1399
- padding-block: 2px;
1504
+ .py-\[11px\] {
1505
+ padding-block: 11px;
1400
1506
  }
1401
- .py-\[6px\] {
1402
- padding-block: 6px;
1507
+ .py-\[14px\] {
1508
+ padding-block: 14px;
1403
1509
  }
1404
- .py-\[10px\] {
1405
- padding-block: 10px;
1510
+ .py-\[var\(--deframe-widget-size-padding-y-lg\)\] {
1511
+ padding-block: var(--deframe-widget-size-padding-y-lg);
1406
1512
  }
1407
1513
  .py-\[var\(--deframe-widget-size-padding-y-md\)\] {
1408
1514
  padding-block: var(--deframe-widget-size-padding-y-md);
1409
1515
  }
1516
+ .py-\[var\(--deframe-widget-size-padding-y-none\)\] {
1517
+ padding-block: var(--deframe-widget-size-padding-y-none);
1518
+ }
1410
1519
  .py-\[var\(--deframe-widget-size-padding-y-sm\)\] {
1411
1520
  padding-block: var(--deframe-widget-size-padding-y-sm);
1412
1521
  }
1413
- .py-lg {
1414
- padding-block: var(--spacing-lg);
1522
+ .py-\[var\(--deframe-widget-size-padding-y-xl\)\] {
1523
+ padding-block: var(--deframe-widget-size-padding-y-xl);
1524
+ }
1525
+ .py-\[var\(--deframe-widget-size-padding-y-xs\)\] {
1526
+ padding-block: var(--deframe-widget-size-padding-y-xs);
1415
1527
  }
1416
- .py-md {
1417
- padding-block: var(--spacing-md);
1528
+ .py-\[var\(--deframe-widget-size-padding-y-xxl\)\] {
1529
+ padding-block: var(--deframe-widget-size-padding-y-xxl);
1418
1530
  }
1419
- .pt-2 {
1420
- padding-top: calc(var(--spacing) * 2);
1531
+ .pt-\[var\(--deframe-widget-size-padding-y-lg\)\] {
1532
+ padding-top: var(--deframe-widget-size-padding-y-lg);
1421
1533
  }
1422
- .pt-6 {
1423
- padding-top: calc(var(--spacing) * 6);
1534
+ .pt-\[var\(--deframe-widget-size-padding-y-md\)\] {
1535
+ padding-top: var(--deframe-widget-size-padding-y-md);
1424
1536
  }
1425
- .pt-16 {
1426
- padding-top: calc(var(--spacing) * 16);
1537
+ .pt-\[var\(--deframe-widget-size-padding-y-none\)\] {
1538
+ padding-top: var(--deframe-widget-size-padding-y-none);
1427
1539
  }
1428
- .pt-lg {
1429
- padding-top: var(--spacing-lg);
1540
+ .pt-\[var\(--deframe-widget-size-padding-y-sm\)\] {
1541
+ padding-top: var(--deframe-widget-size-padding-y-sm);
1430
1542
  }
1431
- .pt-md {
1432
- padding-top: var(--spacing-md);
1543
+ .pt-\[var\(--deframe-widget-size-padding-y-xs\)\] {
1544
+ padding-top: var(--deframe-widget-size-padding-y-xs);
1433
1545
  }
1434
- .pt-sm {
1435
- padding-top: var(--spacing-sm);
1546
+ .pt-\[var\(--deframe-widget-size-padding-y-xxl\)\] {
1547
+ padding-top: var(--deframe-widget-size-padding-y-xxl);
1436
1548
  }
1437
- .pr-2 {
1438
- padding-right: calc(var(--spacing) * 2);
1549
+ .pr-\[10px\] {
1550
+ padding-right: 10px;
1439
1551
  }
1440
- .pr-6 {
1441
- padding-right: calc(var(--spacing) * 6);
1552
+ .pr-\[14px\] {
1553
+ padding-right: 14px;
1442
1554
  }
1443
- .pr-12 {
1444
- padding-right: calc(var(--spacing) * 12);
1555
+ .pr-\[var\(--deframe-widget-size-padding-x-md\)\] {
1556
+ padding-right: var(--deframe-widget-size-padding-x-md);
1445
1557
  }
1446
- .pr-md {
1447
- padding-right: var(--spacing-md);
1558
+ .pr-\[var\(--deframe-widget-size-padding-x-sm\)\] {
1559
+ padding-right: var(--deframe-widget-size-padding-x-sm);
1448
1560
  }
1449
- .pr-sm {
1450
- padding-right: var(--spacing-sm);
1561
+ .pr-\[var\(--deframe-widget-size-padding-x-xl\)\] {
1562
+ padding-right: var(--deframe-widget-size-padding-x-xl);
1563
+ }
1564
+ .pr-\[var\(--deframe-widget-size-padding-x-xxl\)\] {
1565
+ padding-right: var(--deframe-widget-size-padding-x-xxl);
1451
1566
  }
1452
1567
  .pb-2 {
1453
1568
  padding-bottom: calc(var(--spacing) * 2);
1454
1569
  }
1455
- .pb-3 {
1456
- padding-bottom: calc(var(--spacing) * 3);
1570
+ .pb-\[10px\] {
1571
+ padding-bottom: 10px;
1572
+ }
1573
+ .pb-\[14px\] {
1574
+ padding-bottom: 14px;
1457
1575
  }
1458
- .pb-4 {
1459
- padding-bottom: calc(var(--spacing) * 4);
1576
+ .pb-\[var\(--deframe-widget-size-padding-y-md\)\] {
1577
+ padding-bottom: var(--deframe-widget-size-padding-y-md);
1460
1578
  }
1461
- .pb-24 {
1462
- padding-bottom: calc(var(--spacing) * 24);
1579
+ .pb-\[var\(--deframe-widget-size-padding-y-sm\)\] {
1580
+ padding-bottom: var(--deframe-widget-size-padding-y-sm);
1463
1581
  }
1464
- .pb-md {
1465
- padding-bottom: var(--spacing-md);
1582
+ .pb-\[var\(--deframe-widget-size-padding-y-xs\)\] {
1583
+ padding-bottom: var(--deframe-widget-size-padding-y-xs);
1466
1584
  }
1467
- .pb-sm {
1468
- padding-bottom: var(--spacing-sm);
1585
+ .pb-\[var\(--deframe-widget-size-padding-y-xxl\)\] {
1586
+ padding-bottom: var(--deframe-widget-size-padding-y-xxl);
1469
1587
  }
1470
- .pb-xl {
1471
- padding-bottom: var(--spacing-xl);
1588
+ .pl-\[7px\] {
1589
+ padding-left: 7px;
1472
1590
  }
1473
- .pl-2 {
1474
- padding-left: calc(var(--spacing) * 2);
1591
+ .pl-\[14px\] {
1592
+ padding-left: 14px;
1475
1593
  }
1476
- .pl-4 {
1477
- padding-left: calc(var(--spacing) * 4);
1594
+ .pl-\[var\(--deframe-widget-size-padding-x-md\)\] {
1595
+ padding-left: var(--deframe-widget-size-padding-x-md);
1478
1596
  }
1479
- .pl-10 {
1480
- padding-left: calc(var(--spacing) * 10);
1597
+ .pl-\[var\(--deframe-widget-size-padding-x-sm\)\] {
1598
+ padding-left: var(--deframe-widget-size-padding-x-sm);
1599
+ }
1600
+ .pl-\[var\(--deframe-widget-size-padding-x-xl\)\] {
1601
+ padding-left: var(--deframe-widget-size-padding-x-xl);
1481
1602
  }
1482
1603
  .text-center {
1483
1604
  text-align: center;
@@ -1488,72 +1609,25 @@
1488
1609
  .text-right {
1489
1610
  text-align: right;
1490
1611
  }
1491
- .\[font-family\:var\(--deframe-widget-font-family-primary\)\] {
1492
- font-family: var(--deframe-widget-font-family-primary);
1493
- }
1494
- .font-mono {
1495
- font-family: var(--font-mono);
1612
+ .\[font-family\:inherit\] {
1613
+ font-family: inherit;
1496
1614
  }
1497
- .text-2xl {
1498
- font-size: var(--text-2xl);
1499
- line-height: var(--tw-leading, var(--text-2xl--line-height));
1615
+ .\[font-family\:var\(--deframe-widget-font-family\)\] {
1616
+ font-family: var(--deframe-widget-font-family);
1500
1617
  }
1501
- .text-3xl {
1502
- font-size: var(--text-3xl);
1503
- line-height: var(--tw-leading, var(--text-3xl--line-height));
1504
- }
1505
- .text-5xl {
1506
- font-size: var(--text-5xl);
1507
- line-height: var(--tw-leading, var(--text-5xl--line-height));
1508
- }
1509
- .text-6xl {
1510
- font-size: var(--text-6xl);
1511
- line-height: var(--tw-leading, var(--text-6xl--line-height));
1512
- }
1513
- .text-base {
1514
- font-size: var(--text-base);
1515
- line-height: var(--tw-leading, var(--text-base--line-height));
1618
+ .font-\[inherit\] {
1619
+ font-family: inherit;
1516
1620
  }
1517
1621
  .text-lg {
1518
1622
  font-size: var(--text-lg);
1519
1623
  line-height: var(--tw-leading, var(--text-lg--line-height));
1520
1624
  }
1521
- .text-sm {
1522
- font-size: var(--text-sm);
1523
- line-height: var(--tw-leading, var(--text-sm--line-height));
1524
- }
1525
- .text-xl {
1526
- font-size: var(--text-xl);
1527
- line-height: var(--tw-leading, var(--text-xl--line-height));
1528
- }
1529
- .text-xs {
1530
- font-size: var(--text-xs);
1531
- line-height: var(--tw-leading, var(--text-xs--line-height));
1532
- }
1533
1625
  .\!text-\[14px\] {
1534
1626
  font-size: 14px !important;
1535
1627
  }
1536
1628
  .\!text-\[21px\] {
1537
1629
  font-size: 21px !important;
1538
1630
  }
1539
- .\[font-size\:var\(--deframe-widget-font-size-h-large\)\] {
1540
- font-size: var(--deframe-widget-font-size-h-large);
1541
- }
1542
- .\[font-size\:var\(--deframe-widget-font-size-h1\)\] {
1543
- font-size: var(--deframe-widget-font-size-h1);
1544
- }
1545
- .\[font-size\:var\(--deframe-widget-font-size-h2\)\] {
1546
- font-size: var(--deframe-widget-font-size-h2);
1547
- }
1548
- .\[font-size\:var\(--deframe-widget-font-size-h3\)\] {
1549
- font-size: var(--deframe-widget-font-size-h3);
1550
- }
1551
- .\[font-size\:var\(--deframe-widget-font-size-h4\)\] {
1552
- font-size: var(--deframe-widget-font-size-h4);
1553
- }
1554
- .\[font-size\:var\(--deframe-widget-font-size-h5\)\] {
1555
- font-size: var(--deframe-widget-font-size-h5);
1556
- }
1557
1631
  .\[font-size\:var\(--deframe-widget-font-size-lg\)\] {
1558
1632
  font-size: var(--deframe-widget-font-size-lg);
1559
1633
  }
@@ -1563,9 +1637,6 @@
1563
1637
  .\[font-size\:var\(--deframe-widget-font-size-sm\)\] {
1564
1638
  font-size: var(--deframe-widget-font-size-sm);
1565
1639
  }
1566
- .\[font-size\:var\(--deframe-widget-font-size-text-medium\)\] {
1567
- font-size: var(--deframe-widget-font-size-text-medium);
1568
- }
1569
1640
  .\[font-size\:var\(--deframe-widget-font-size-xl\)\] {
1570
1641
  font-size: var(--deframe-widget-font-size-xl);
1571
1642
  }
@@ -1593,22 +1664,82 @@
1593
1664
  .text-\[15px\] {
1594
1665
  font-size: 15px;
1595
1666
  }
1667
+ .text-\[16px\] {
1668
+ font-size: 16px;
1669
+ }
1670
+ .text-\[17px\] {
1671
+ font-size: 17px;
1672
+ }
1673
+ .text-\[18px\] {
1674
+ font-size: 18px;
1675
+ }
1676
+ .text-\[20px\] {
1677
+ font-size: 20px;
1678
+ }
1679
+ .text-\[22px\] {
1680
+ font-size: 22px;
1681
+ }
1682
+ .text-\[28px\] {
1683
+ font-size: 28px;
1684
+ }
1685
+ .text-\[36px\] {
1686
+ font-size: 36px;
1687
+ }
1688
+ .text-\[38px\] {
1689
+ font-size: 38px;
1690
+ }
1596
1691
  .leading-4 {
1597
1692
  --tw-leading: calc(var(--spacing) * 4);
1598
1693
  line-height: calc(var(--spacing) * 4);
1599
1694
  }
1600
- .leading-5 {
1601
- --tw-leading: calc(var(--spacing) * 5);
1602
- line-height: calc(var(--spacing) * 5);
1695
+ .leading-\[1\.1\] {
1696
+ --tw-leading: 1.1;
1697
+ line-height: 1.1;
1698
+ }
1699
+ .leading-\[1\.2\] {
1700
+ --tw-leading: 1.2;
1701
+ line-height: 1.2;
1702
+ }
1703
+ .leading-\[1\.3\] {
1704
+ --tw-leading: 1.3;
1705
+ line-height: 1.3;
1706
+ }
1707
+ .leading-\[1\.4\] {
1708
+ --tw-leading: 1.4;
1709
+ line-height: 1.4;
1710
+ }
1711
+ .leading-\[1\.5\] {
1712
+ --tw-leading: 1.5;
1713
+ line-height: 1.5;
1714
+ }
1715
+ .leading-\[1\.25\] {
1716
+ --tw-leading: 1.25;
1717
+ line-height: 1.25;
1603
1718
  }
1604
1719
  .leading-\[140\%\] {
1605
1720
  --tw-leading: 140%;
1606
1721
  line-height: 140%;
1607
1722
  }
1723
+ .leading-none {
1724
+ --tw-leading: 1;
1725
+ line-height: 1;
1726
+ }
1608
1727
  .leading-normal {
1609
1728
  --tw-leading: var(--leading-normal);
1610
1729
  line-height: var(--leading-normal);
1611
1730
  }
1731
+ .\[line-height\:1\.1\] {
1732
+ line-height: 1.1;
1733
+ }
1734
+ .\[line-height\:1\.4\] {
1735
+ line-height: 1.4;
1736
+ }
1737
+ .\[line-height\:1\.15\] {
1738
+ line-height: 1.15;
1739
+ }
1740
+ .\[line-height\:1\.45\] {
1741
+ line-height: 1.45;
1742
+ }
1612
1743
  .\[line-height\:var\(--deframe-widget-font-leading-lg\)\] {
1613
1744
  line-height: var(--deframe-widget-font-leading-lg);
1614
1745
  }
@@ -1618,29 +1749,18 @@
1618
1749
  .\[line-height\:var\(--deframe-widget-font-leading-sm\)\] {
1619
1750
  line-height: var(--deframe-widget-font-leading-sm);
1620
1751
  }
1621
- .font-\[var\(--deframe-widget-font-family-primary\)\] {
1622
- --tw-font-weight: var(--deframe-widget-font-family-primary);
1623
- font-weight: var(--deframe-widget-font-family-primary);
1624
- }
1625
- .font-bold {
1626
- --tw-font-weight: var(--font-weight-bold);
1627
- font-weight: var(--font-weight-bold);
1752
+ .\[line-height\:var\(--deframe-widget-font-leading-xl\)\] {
1753
+ line-height: var(--deframe-widget-font-leading-xl);
1628
1754
  }
1629
- .font-extrabold {
1630
- --tw-font-weight: var(--font-weight-extrabold);
1631
- font-weight: var(--font-weight-extrabold);
1755
+ .\[line-height\:var\(--deframe-widget-font-leading-xs\)\] {
1756
+ line-height: var(--deframe-widget-font-leading-xs);
1632
1757
  }
1633
- .font-medium {
1634
- --tw-font-weight: var(--font-weight-medium);
1635
- font-weight: var(--font-weight-medium);
1758
+ .\[line-height\:var\(--deframe-widget-font-leading-xxl\)\] {
1759
+ line-height: var(--deframe-widget-font-leading-xxl);
1636
1760
  }
1637
- .font-normal {
1638
- --tw-font-weight: var(--font-weight-normal);
1639
- font-weight: var(--font-weight-normal);
1640
- }
1641
- .font-semibold {
1642
- --tw-font-weight: var(--font-weight-semibold);
1643
- font-weight: var(--font-weight-semibold);
1761
+ .font-\[var\(--deframe-widget-font-family\)\] {
1762
+ --tw-font-weight: var(--deframe-widget-font-family);
1763
+ font-weight: var(--deframe-widget-font-family);
1644
1764
  }
1645
1765
  .\[font-weight\:var\(--deframe-widget-font-weight-bold\)\] {
1646
1766
  font-weight: var(--deframe-widget-font-weight-bold);
@@ -1657,10 +1777,22 @@
1657
1777
  .\[font-weight\:var\(--deframe-widget-font-weight-semibold\)\] {
1658
1778
  font-weight: var(--deframe-widget-font-weight-semibold);
1659
1779
  }
1780
+ .tracking-\[0\.04em\] {
1781
+ --tw-tracking: 0.04em;
1782
+ letter-spacing: 0.04em;
1783
+ }
1784
+ .tracking-\[0\.06em\] {
1785
+ --tw-tracking: 0.06em;
1786
+ letter-spacing: 0.06em;
1787
+ }
1660
1788
  .tracking-\[0\.07em\] {
1661
1789
  --tw-tracking: 0.07em;
1662
1790
  letter-spacing: 0.07em;
1663
1791
  }
1792
+ .tracking-\[0\.08em\] {
1793
+ --tw-tracking: 0.08em;
1794
+ letter-spacing: 0.08em;
1795
+ }
1664
1796
  .tracking-wide {
1665
1797
  --tw-tracking: var(--tracking-wide);
1666
1798
  letter-spacing: var(--tracking-wide);
@@ -1671,6 +1803,9 @@
1671
1803
  .whitespace-nowrap {
1672
1804
  white-space: nowrap;
1673
1805
  }
1806
+ .text-\(--deframe-widget-color-text-secondary\) {
1807
+ color: var(--deframe-widget-color-text-secondary);
1808
+ }
1674
1809
  .text-\[\#0A0A0A\] {
1675
1810
  color: #0A0A0A;
1676
1811
  }
@@ -1680,47 +1815,62 @@
1680
1815
  .text-\[\#252050\] {
1681
1816
  color: #252050;
1682
1817
  }
1818
+ .text-\[color\:var\(--deframe-widget-color-bg-primary\)\] {
1819
+ color: var(--deframe-widget-color-bg-primary);
1820
+ }
1821
+ .text-\[color\:var\(--deframe-widget-color-brand-primary\)\] {
1822
+ color: var(--deframe-widget-color-brand-primary);
1823
+ }
1824
+ .text-\[color\:var\(--deframe-widget-color-brand-primary-disabled\)\] {
1825
+ color: var(--deframe-widget-color-brand-primary-disabled);
1826
+ }
1683
1827
  .text-\[color\:var\(--deframe-widget-color-brand-secondary\)\] {
1684
1828
  color: var(--deframe-widget-color-brand-secondary);
1685
1829
  }
1686
1830
  .text-\[color\:var\(--deframe-widget-color-brand-tertiary\)\] {
1687
1831
  color: var(--deframe-widget-color-brand-tertiary);
1688
1832
  }
1689
- .text-\[color\:var\(--deframe-widget-color-text-primary\)\] {
1690
- color: var(--deframe-widget-color-text-primary);
1833
+ .text-\[color\:var\(--deframe-widget-color-placeholder-primary\)\] {
1834
+ color: var(--deframe-widget-color-placeholder-primary);
1691
1835
  }
1692
- .text-\[color\:var\(--deframe-widget-color-text-secondary-disabled\)\] {
1693
- color: var(--deframe-widget-color-text-secondary-disabled);
1836
+ .text-\[color\:var\(--deframe-widget-color-state-error\)\] {
1837
+ color: var(--deframe-widget-color-state-error);
1694
1838
  }
1695
- .text-\[color\:var\(--deframe-widget-color-text-tertiary-disabled\)\] {
1696
- color: var(--deframe-widget-color-text-tertiary-disabled);
1839
+ .text-\[color\:var\(--deframe-widget-color-state-info\)\] {
1840
+ color: var(--deframe-widget-color-state-info);
1697
1841
  }
1698
- .text-\[var\(--color-text-highlight\,\#7C3AED\)\] {
1699
- color: var(--color-text-highlight,#7C3AED);
1842
+ .text-\[color\:var\(--deframe-widget-color-state-success\)\] {
1843
+ color: var(--deframe-widget-color-state-success);
1700
1844
  }
1701
- .text-\[var\(--color-text-primary\,\#fff\)\] {
1702
- color: var(--color-text-primary,#fff);
1845
+ .text-\[color\:var\(--deframe-widget-color-state-warning\)\] {
1846
+ color: var(--deframe-widget-color-state-warning);
1703
1847
  }
1704
- .text-\[var\(--color-text-secondary\,\#999\)\] {
1705
- color: var(--color-text-secondary,#999);
1848
+ .text-\[color\:var\(--deframe-widget-color-text-primary\)\] {
1849
+ color: var(--deframe-widget-color-text-primary);
1706
1850
  }
1707
- .text-\[var\(--color-text-tertiary\,\#888\)\] {
1708
- color: var(--color-text-tertiary,#888);
1851
+ .text-\[color\:var\(--deframe-widget-color-text-primary-dark\)\] {
1852
+ color: var(--deframe-widget-color-text-primary-dark);
1709
1853
  }
1710
- .text-\[var\(--deframe-widget-color-content-inverse\)\] {
1711
- color: var(--deframe-widget-color-content-inverse);
1854
+ .text-\[color\:var\(--deframe-widget-color-text-primary-disabled\)\] {
1855
+ color: var(--deframe-widget-color-text-primary-disabled);
1712
1856
  }
1713
- .text-\[var\(--deframe-widget-color-content-primary\)\] {
1714
- color: var(--deframe-widget-color-content-primary);
1857
+ .text-\[color\:var\(--deframe-widget-color-text-secondary\)\] {
1858
+ color: var(--deframe-widget-color-text-secondary);
1715
1859
  }
1716
- .text-\[var\(--deframe-widget-color-content-secondary\)\] {
1717
- color: var(--deframe-widget-color-content-secondary);
1860
+ .text-\[color\:var\(--deframe-widget-color-text-secondary-disabled\)\] {
1861
+ color: var(--deframe-widget-color-text-secondary-disabled);
1718
1862
  }
1719
- .text-\[var\(--deframe-widget-color-link\)\] {
1720
- color: var(--deframe-widget-color-link);
1863
+ .text-\[color\:var\(--deframe-widget-color-text-tertiary\)\] {
1864
+ color: var(--deframe-widget-color-text-tertiary);
1721
1865
  }
1722
- .text-\[var\(--deframe-widget-color-link-disabled\)\] {
1723
- color: var(--deframe-widget-color-link-disabled);
1866
+ .text-\[color\:var\(--deframe-widget-color-text-tertiary-disabled\)\] {
1867
+ color: var(--deframe-widget-color-text-tertiary-disabled);
1868
+ }
1869
+ .text-\[font-size\:var\(--deframe-widget-font-size-sm\)\] {
1870
+ color: var(--deframe-widget-font-size-sm);
1871
+ }
1872
+ .text-\[var\(--deframe-widget-color-brand-primary-disabled\)\] {
1873
+ color: var(--deframe-widget-color-brand-primary-disabled);
1724
1874
  }
1725
1875
  .text-\[var\(--deframe-widget-color-state-error\)\] {
1726
1876
  color: var(--deframe-widget-color-state-error);
@@ -1743,9 +1893,6 @@
1743
1893
  .text-\[var\(--deframe-widget-color-text-secondary\)\] {
1744
1894
  color: var(--deframe-widget-color-text-secondary);
1745
1895
  }
1746
- .text-bg-default {
1747
- color: var(--color-bg-default);
1748
- }
1749
1896
  .text-blue-100 {
1750
1897
  color: var(--color-blue-100);
1751
1898
  }
@@ -1755,21 +1902,9 @@
1755
1902
  .text-blue-500 {
1756
1903
  color: var(--color-blue-500);
1757
1904
  }
1758
- .text-brand-primary {
1759
- color: var(--color-brand-primary);
1760
- }
1761
1905
  .text-gray-200 {
1762
1906
  color: var(--color-gray-200);
1763
1907
  }
1764
- .text-gray-300 {
1765
- color: var(--color-gray-300);
1766
- }
1767
- .text-gray-400 {
1768
- color: var(--color-gray-400);
1769
- }
1770
- .text-gray-500 {
1771
- color: var(--color-gray-500);
1772
- }
1773
1908
  .text-gray-600 {
1774
1909
  color: var(--color-gray-600);
1775
1910
  }
@@ -1794,33 +1929,6 @@
1794
1929
  .text-red-500 {
1795
1930
  color: var(--color-red-500);
1796
1931
  }
1797
- .text-state-error {
1798
- color: var(--color-state-error);
1799
- }
1800
- .text-state-success {
1801
- color: var(--color-state-success);
1802
- }
1803
- .text-state-warning {
1804
- color: var(--color-state-warning);
1805
- }
1806
- .text-text-disabled {
1807
- color: var(--color-text-disabled);
1808
- }
1809
- .text-text-inverse {
1810
- color: var(--color-text-inverse);
1811
- }
1812
- .text-text-primary {
1813
- color: var(--color-text-primary);
1814
- }
1815
- .text-text-secondary {
1816
- color: var(--color-text-secondary);
1817
- }
1818
- .text-text-tertiary {
1819
- color: var(--color-text-tertiary);
1820
- }
1821
- .text-white {
1822
- color: var(--color-white);
1823
- }
1824
1932
  .text-yellow-800 {
1825
1933
  color: var(--color-yellow-800);
1826
1934
  }
@@ -1864,20 +1972,33 @@
1864
1972
  .opacity-95 {
1865
1973
  opacity: 95%;
1866
1974
  }
1867
- .shadow-2xl {
1868
- --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
1975
+ .shadow-\[0_0_0_2px_var\(--deframe-widget-color-bg-secondary\)\] {
1976
+ --tw-shadow: 0 0 0 2px var(--tw-shadow-color, var(--deframe-widget-color-bg-secondary));
1977
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1978
+ }
1979
+ .shadow-\[0_2px_8px_color-mix\(in_srgb\,var\(--deframe-widget-color-text-primary\)_18\%\,transparent\)\] {
1980
+ --tw-shadow: 0 2px 8px var(--tw-shadow-color, var(--deframe-widget-color-text-primary));
1981
+ @supports (color: color-mix(in lab, red, red)) {
1982
+ --tw-shadow: 0 2px 8px var(--tw-shadow-color, color-mix(in srgb,var(--deframe-widget-color-text-primary) 18%,transparent));
1983
+ }
1869
1984
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1870
1985
  }
1871
- .shadow-lg {
1872
- --tw-shadow: 0 8px 16px 0 var(--tw-shadow-color, rgba(0,0,0,0.10));
1986
+ .shadow-\[0_10px_30px_color-mix\(in_srgb\,var\(--deframe-widget-color-text-primary\)_22\%\,transparent\)\] {
1987
+ --tw-shadow: 0 10px 30px var(--tw-shadow-color, var(--deframe-widget-color-text-primary));
1988
+ @supports (color: color-mix(in lab, red, red)) {
1989
+ --tw-shadow: 0 10px 30px var(--tw-shadow-color, color-mix(in srgb,var(--deframe-widget-color-text-primary) 22%,transparent));
1990
+ }
1873
1991
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1874
1992
  }
1875
- .shadow-md {
1876
- --tw-shadow: 0 4px 6px 0 var(--tw-shadow-color, rgba(0,0,0,0.10));
1993
+ .shadow-\[0_20px_50px_color-mix\(in_srgb\,var\(--deframe-widget-color-text-primary\)_28\%\,transparent\)\] {
1994
+ --tw-shadow: 0 20px 50px var(--tw-shadow-color, var(--deframe-widget-color-text-primary));
1995
+ @supports (color: color-mix(in lab, red, red)) {
1996
+ --tw-shadow: 0 20px 50px var(--tw-shadow-color, color-mix(in srgb,var(--deframe-widget-color-text-primary) 28%,transparent));
1997
+ }
1877
1998
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1878
1999
  }
1879
2000
  .shadow-sm {
1880
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0,0,0,0.10));
2001
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1881
2002
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1882
2003
  }
1883
2004
  .ring {
@@ -1895,14 +2016,14 @@
1895
2016
  .outline-offset-\[-1px\] {
1896
2017
  outline-offset: -1px;
1897
2018
  }
1898
- .outline-state-error {
1899
- outline-color: var(--color-state-error);
2019
+ .outline-\[color\:var\(--deframe-widget-color-state-error\)\] {
2020
+ outline-color: var(--deframe-widget-color-state-error);
1900
2021
  }
1901
- .outline-state-success {
1902
- outline-color: var(--color-state-success);
2022
+ .outline-\[color\:var\(--deframe-widget-color-state-success\)\] {
2023
+ outline-color: var(--deframe-widget-color-state-success);
1903
2024
  }
1904
- .outline-state-warning {
1905
- outline-color: var(--color-state-warning);
2025
+ .outline-\[color\:var\(--deframe-widget-color-state-warning\)\] {
2026
+ outline-color: var(--deframe-widget-color-state-warning);
1906
2027
  }
1907
2028
  .blur-\[160px\] {
1908
2029
  --tw-blur: blur(160px);
@@ -1911,6 +2032,11 @@
1911
2032
  .filter {
1912
2033
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
1913
2034
  }
2035
+ .backdrop-blur-\[4px\] {
2036
+ --tw-backdrop-blur: blur(4px);
2037
+ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
2038
+ backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
2039
+ }
1914
2040
  .backdrop-blur-sm {
1915
2041
  --tw-backdrop-blur: blur(var(--blur-sm));
1916
2042
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -1921,6 +2047,41 @@
1921
2047
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1922
2048
  transition-duration: var(--tw-duration, var(--default-transition-duration));
1923
2049
  }
2050
+ .transition-\[background\,border-color\,box-shadow\,opacity\] {
2051
+ transition-property: background,border-color,box-shadow,opacity;
2052
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2053
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2054
+ }
2055
+ .transition-\[background\,border-color\] {
2056
+ transition-property: background,border-color;
2057
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2058
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2059
+ }
2060
+ .transition-\[background\,color\,border-color\] {
2061
+ transition-property: background,color,border-color;
2062
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2063
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2064
+ }
2065
+ .transition-\[background\,color\] {
2066
+ transition-property: background,color;
2067
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2068
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2069
+ }
2070
+ .transition-\[background\,transform\] {
2071
+ transition-property: background,transform;
2072
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2073
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2074
+ }
2075
+ .transition-\[background\] {
2076
+ transition-property: background;
2077
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2078
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2079
+ }
2080
+ .transition-\[border-color\,background\] {
2081
+ transition-property: border-color,background;
2082
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2083
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2084
+ }
1924
2085
  .transition-all {
1925
2086
  transition-property: all;
1926
2087
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1936,16 +2097,15 @@
1936
2097
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1937
2098
  transition-duration: var(--tw-duration, var(--default-transition-duration));
1938
2099
  }
1939
- .transition-shadow {
1940
- transition-property: box-shadow;
1941
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1942
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1943
- }
1944
2100
  .transition-transform {
1945
2101
  transition-property: transform, translate, scale, rotate;
1946
2102
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1947
2103
  transition-duration: var(--tw-duration, var(--default-transition-duration));
1948
2104
  }
2105
+ .duration-150 {
2106
+ --tw-duration: 150ms;
2107
+ transition-duration: 150ms;
2108
+ }
1949
2109
  .duration-200 {
1950
2110
  --tw-duration: 200ms;
1951
2111
  transition-duration: 200ms;
@@ -1962,55 +2122,57 @@
1962
2122
  --tw-outline-style: none;
1963
2123
  outline-style: none;
1964
2124
  }
2125
+ .\[scrollbar-width\:none\] {
2126
+ scrollbar-width: none;
2127
+ }
1965
2128
  .group-open\:rotate-180 {
1966
2129
  &:is(:where(.group):is([open], :popover-open, :open) *) {
1967
2130
  rotate: 180deg;
1968
2131
  }
1969
2132
  }
1970
- .placeholder\:text-text-disabled {
1971
- &::placeholder {
1972
- color: var(--color-text-disabled);
1973
- }
1974
- }
1975
- .hover\:border-\[var\(--color-border-strong\,\#555\)\] {
1976
- &:hover {
2133
+ .group-hover\:translate-x-0 {
2134
+ &:is(:where(.group):hover *) {
1977
2135
  @media (hover: hover) {
1978
- border-color: var(--color-border-strong,#555);
2136
+ --tw-translate-x: calc(var(--spacing) * 0);
2137
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1979
2138
  }
1980
2139
  }
1981
2140
  }
1982
- .hover\:border-\[var\(--deframe-widget-color-border-secondary\)\] {
1983
- &:hover {
2141
+ .group-hover\:opacity-100 {
2142
+ &:is(:where(.group):hover *) {
1984
2143
  @media (hover: hover) {
1985
- border-color: var(--deframe-widget-color-border-secondary);
2144
+ opacity: 100%;
1986
2145
  }
1987
2146
  }
1988
2147
  }
1989
- .hover\:border-blue-500 {
1990
- &:hover {
1991
- @media (hover: hover) {
1992
- border-color: var(--color-blue-500);
1993
- }
2148
+ .placeholder\:text-\[color\:var\(--deframe-widget-color-text-primary-disabled\)\] {
2149
+ &::placeholder {
2150
+ color: var(--deframe-widget-color-text-primary-disabled);
2151
+ }
2152
+ }
2153
+ .placeholder\:text-\[color\:var\(--deframe-widget-color-text-tertiary\)\] {
2154
+ &::placeholder {
2155
+ color: var(--deframe-widget-color-text-tertiary);
1994
2156
  }
1995
2157
  }
1996
- .hover\:border-border-default {
2158
+ .hover\:border-\[color\:var\(--deframe-widget-color-border-primary\)\] {
1997
2159
  &:hover {
1998
2160
  @media (hover: hover) {
1999
- border-color: var(--color-border-default);
2161
+ border-color: var(--deframe-widget-color-border-primary);
2000
2162
  }
2001
2163
  }
2002
2164
  }
2003
- .hover\:border-border-strong {
2165
+ .hover\:border-\[color\:var\(--deframe-widget-color-border-secondary\)\] {
2004
2166
  &:hover {
2005
2167
  @media (hover: hover) {
2006
- border-color: var(--color-border-strong);
2168
+ border-color: var(--deframe-widget-color-border-secondary);
2007
2169
  }
2008
2170
  }
2009
2171
  }
2010
- .hover\:border-gray-600 {
2172
+ .hover\:border-blue-500 {
2011
2173
  &:hover {
2012
2174
  @media (hover: hover) {
2013
- border-color: var(--color-gray-600);
2175
+ border-color: var(--color-blue-500);
2014
2176
  }
2015
2177
  }
2016
2178
  }
@@ -2028,76 +2190,95 @@
2028
2190
  }
2029
2191
  }
2030
2192
  }
2031
- .hover\:bg-\[var\(--deframe-widget-color-bg-tertiary\)\] {
2193
+ .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-secondary\)_72\%\,transparent\)\] {
2032
2194
  &:hover {
2033
2195
  @media (hover: hover) {
2034
- background-color: var(--deframe-widget-color-bg-tertiary);
2196
+ background-color: var(--deframe-widget-color-bg-secondary);
2197
+ @supports (color: color-mix(in lab, red, red)) {
2198
+ background-color: color-mix(in srgb,var(--deframe-widget-color-bg-secondary) 72%,transparent);
2199
+ }
2035
2200
  }
2036
2201
  }
2037
2202
  }
2038
- .hover\:bg-bg-raised {
2203
+ .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-tertiary\)_84\%\,transparent\)\] {
2039
2204
  &:hover {
2040
2205
  @media (hover: hover) {
2041
- background-color: var(--color-bg-raised);
2206
+ background-color: var(--deframe-widget-color-bg-tertiary);
2207
+ @supports (color: color-mix(in lab, red, red)) {
2208
+ background-color: color-mix(in srgb,var(--deframe-widget-color-bg-tertiary) 84%,transparent);
2209
+ }
2042
2210
  }
2043
2211
  }
2044
2212
  }
2045
- .hover\:bg-blue-700 {
2213
+ .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-tertiary\)_92\%\,transparent\)\] {
2046
2214
  &:hover {
2047
2215
  @media (hover: hover) {
2048
- background-color: var(--color-blue-700);
2216
+ background-color: var(--deframe-widget-color-bg-tertiary);
2217
+ @supports (color: color-mix(in lab, red, red)) {
2218
+ background-color: color-mix(in srgb,var(--deframe-widget-color-bg-tertiary) 92%,transparent);
2219
+ }
2049
2220
  }
2050
2221
  }
2051
2222
  }
2052
- .hover\:bg-gray-800 {
2223
+ .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-brand-primary\)_12\%\,transparent\)\] {
2053
2224
  &:hover {
2054
2225
  @media (hover: hover) {
2055
- background-color: var(--color-gray-800);
2226
+ background-color: var(--deframe-widget-color-brand-primary);
2227
+ @supports (color: color-mix(in lab, red, red)) {
2228
+ background-color: color-mix(in srgb,var(--deframe-widget-color-brand-primary) 12%,transparent);
2229
+ }
2056
2230
  }
2057
2231
  }
2058
2232
  }
2059
- .hover\:bg-purple-700 {
2233
+ .hover\:bg-\[rgba\(255\,255\,255\,0\.06\)\] {
2060
2234
  &:hover {
2061
2235
  @media (hover: hover) {
2062
- background-color: var(--color-purple-700);
2236
+ background-color: rgba(255,255,255,0.06);
2063
2237
  }
2064
2238
  }
2065
2239
  }
2066
- .hover\:bg-white\/10 {
2240
+ .hover\:bg-\[var\(--deframe-widget-color-bg-primary-dark\)\]\/10 {
2067
2241
  &:hover {
2068
2242
  @media (hover: hover) {
2069
- background-color: color-mix(in srgb, #fff 10%, transparent);
2243
+ background-color: var(--deframe-widget-color-bg-primary-dark);
2070
2244
  @supports (color: color-mix(in lab, red, red)) {
2071
- background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
2245
+ background-color: color-mix(in oklab, var(--deframe-widget-color-bg-primary-dark) 10%, transparent);
2072
2246
  }
2073
2247
  }
2074
2248
  }
2075
2249
  }
2076
- .hover\:text-brand-primary {
2250
+ .hover\:bg-\[var\(--deframe-widget-color-bg-secondary\)\] {
2251
+ &:hover {
2252
+ @media (hover: hover) {
2253
+ background-color: var(--deframe-widget-color-bg-secondary);
2254
+ }
2255
+ }
2256
+ }
2257
+ .hover\:bg-blue-700 {
2077
2258
  &:hover {
2078
2259
  @media (hover: hover) {
2079
- color: var(--color-brand-primary);
2260
+ background-color: var(--color-blue-700);
2080
2261
  }
2081
2262
  }
2082
2263
  }
2083
- .hover\:text-text-primary {
2264
+ .hover\:bg-purple-700 {
2084
2265
  &:hover {
2085
2266
  @media (hover: hover) {
2086
- color: var(--color-text-primary);
2267
+ background-color: var(--color-purple-700);
2087
2268
  }
2088
2269
  }
2089
2270
  }
2090
- .hover\:text-text-secondary {
2271
+ .hover\:text-\[color\:var\(--deframe-widget-color-brand-primary\)\] {
2091
2272
  &:hover {
2092
2273
  @media (hover: hover) {
2093
- color: var(--color-text-secondary);
2274
+ color: var(--deframe-widget-color-brand-primary);
2094
2275
  }
2095
2276
  }
2096
2277
  }
2097
- .hover\:text-white {
2278
+ .hover\:text-\[color\:var\(--deframe-widget-color-text-primary\)\] {
2098
2279
  &:hover {
2099
2280
  @media (hover: hover) {
2100
- color: var(--color-white);
2281
+ color: var(--deframe-widget-color-text-primary);
2101
2282
  }
2102
2283
  }
2103
2284
  }
@@ -2122,22 +2303,20 @@
2122
2303
  }
2123
2304
  }
2124
2305
  }
2125
- .hover\:shadow-md {
2306
+ .hover\:shadow-\[0_2px_8px_color-mix\(in_srgb\,var\(--deframe-widget-color-text-primary\)_18\%\,transparent\)\] {
2126
2307
  &:hover {
2127
2308
  @media (hover: hover) {
2128
- --tw-shadow: 0 4px 6px 0 var(--tw-shadow-color, rgba(0,0,0,0.10));
2309
+ --tw-shadow: 0 2px 8px var(--tw-shadow-color, var(--deframe-widget-color-text-primary));
2310
+ @supports (color: color-mix(in lab, red, red)) {
2311
+ --tw-shadow: 0 2px 8px var(--tw-shadow-color, color-mix(in srgb,var(--deframe-widget-color-text-primary) 18%,transparent));
2312
+ }
2129
2313
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2130
2314
  }
2131
2315
  }
2132
2316
  }
2133
- .focus\:border-\[var\(--color-brand-primary\,\#7C3AED\)\] {
2134
- &:focus {
2135
- border-color: var(--color-brand-primary,#7C3AED);
2136
- }
2137
- }
2138
- .focus\:opacity-85 {
2317
+ .focus\:border-\[color\:var\(--deframe-widget-color-brand-primary\)\] {
2139
2318
  &:focus {
2140
- opacity: 85%;
2319
+ border-color: var(--deframe-widget-color-brand-primary);
2141
2320
  }
2142
2321
  }
2143
2322
  .focus\:ring-2 {
@@ -2146,17 +2325,9 @@
2146
2325
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2147
2326
  }
2148
2327
  }
2149
- .focus\:ring-\[var\(--color-brand-primary\,\#7C3AED\)\]\/50 {
2328
+ .focus\:ring-\[color\:var\(--deframe-widget-color-brand-primary\)\] {
2150
2329
  &:focus {
2151
- --tw-ring-color: var(--color-brand-primary,#7C3AED);
2152
- @supports (color: color-mix(in lab, red, red)) {
2153
- --tw-ring-color: color-mix(in oklab, var(--color-brand-primary,#7C3AED) 50%, transparent);
2154
- }
2155
- }
2156
- }
2157
- .focus\:ring-brand-primary {
2158
- &:focus {
2159
- --tw-ring-color: var(--color-brand-primary);
2330
+ --tw-ring-color: var(--deframe-widget-color-brand-primary);
2160
2331
  }
2161
2332
  }
2162
2333
  .focus\:outline-none {
@@ -2171,17 +2342,22 @@
2171
2342
  outline-style: none;
2172
2343
  }
2173
2344
  }
2174
- .active\:bg-white\/20 {
2345
+ .active\:scale-\[0\.99\] {
2175
2346
  &:active {
2176
- background-color: color-mix(in srgb, #fff 20%, transparent);
2177
- @supports (color: color-mix(in lab, red, red)) {
2178
- background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
2179
- }
2347
+ scale: 0.99;
2180
2348
  }
2181
2349
  }
2182
- .active\:opacity-85 {
2350
+ .active\:scale-\[0\.995\] {
2183
2351
  &:active {
2184
- opacity: 85%;
2352
+ scale: 0.995;
2353
+ }
2354
+ }
2355
+ .active\:bg-\[var\(--deframe-widget-color-bg-primary-dark\)\]\/20 {
2356
+ &:active {
2357
+ background-color: var(--deframe-widget-color-bg-primary-dark);
2358
+ @supports (color: color-mix(in lab, red, red)) {
2359
+ background-color: color-mix(in oklab, var(--deframe-widget-color-bg-primary-dark) 20%, transparent);
2360
+ }
2185
2361
  }
2186
2362
  }
2187
2363
  .disabled\:pointer-events-none {
@@ -2194,236 +2370,37 @@
2194
2370
  opacity: 50%;
2195
2371
  }
2196
2372
  }
2197
- .md\:text-base {
2373
+ .md\:\[font-size\:var\(--deframe-widget-font-size-md\)\] {
2198
2374
  @media (width >= 48rem) {
2199
- font-size: var(--text-base);
2200
- line-height: var(--tw-leading, var(--text-base--line-height));
2201
- }
2202
- }
2203
- .lg\:\!bg-bg-raised {
2204
- @media (width >= 64rem) {
2205
- background-color: var(--color-bg-raised) !important;
2206
- }
2207
- }
2208
- .lg\:bg-bg-subtle {
2209
- @media (width >= 64rem) {
2210
- background-color: var(--color-bg-subtle);
2211
- }
2212
- }
2213
- .dark\:border-border-default-dark {
2214
- @media (prefers-color-scheme: dark) {
2215
- border-color: var(--color-border-default-dark);
2216
- }
2217
- }
2218
- .dark\:border-border-subtle-dark {
2219
- @media (prefers-color-scheme: dark) {
2220
- border-color: var(--color-border-subtle-dark);
2221
- }
2222
- }
2223
- .dark\:bg-bg-default-dark {
2224
- @media (prefers-color-scheme: dark) {
2225
- background-color: var(--color-bg-default-dark);
2226
- }
2227
- }
2228
- .dark\:bg-bg-muted-dark {
2229
- @media (prefers-color-scheme: dark) {
2230
- background-color: var(--color-bg-muted-dark);
2231
- }
2232
- }
2233
- .dark\:bg-bg-raised-dark {
2234
- @media (prefers-color-scheme: dark) {
2235
- background-color: var(--color-bg-raised-dark);
2236
- }
2237
- }
2238
- .dark\:bg-bg-subtle-dark {
2239
- @media (prefers-color-scheme: dark) {
2240
- background-color: var(--color-bg-subtle-dark);
2241
- }
2242
- }
2243
- .dark\:bg-border-default-dark {
2244
- @media (prefers-color-scheme: dark) {
2245
- background-color: var(--color-border-default-dark);
2246
- }
2247
- }
2248
- .dark\:via-gray-600\/30 {
2249
- @media (prefers-color-scheme: dark) {
2250
- --tw-gradient-via: color-mix(in srgb, oklch(44.6% 0.03 256.802) 30%, transparent);
2251
- @supports (color: color-mix(in lab, red, red)) {
2252
- --tw-gradient-via: color-mix(in oklab, var(--color-gray-600) 30%, transparent);
2253
- }
2254
- --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
2255
- --tw-gradient-stops: var(--tw-gradient-via-stops);
2256
- }
2257
- }
2258
- .dark\:text-bg-default-dark {
2259
- @media (prefers-color-scheme: dark) {
2260
- color: var(--color-bg-default-dark);
2261
- }
2262
- }
2263
- .dark\:text-brand-primary-dark {
2264
- @media (prefers-color-scheme: dark) {
2265
- color: var(--color-brand-primary-dark);
2266
- }
2267
- }
2268
- .dark\:text-state-error {
2269
- @media (prefers-color-scheme: dark) {
2270
- color: var(--color-state-error);
2271
- }
2272
- }
2273
- .dark\:text-text-disabled-dark {
2274
- @media (prefers-color-scheme: dark) {
2275
- color: var(--color-text-disabled-dark);
2276
- }
2277
- }
2278
- .dark\:text-text-primary-dark {
2279
- @media (prefers-color-scheme: dark) {
2280
- color: var(--color-text-primary-dark);
2281
- }
2282
- }
2283
- .dark\:text-text-secondary-dark {
2284
- @media (prefers-color-scheme: dark) {
2285
- color: var(--color-text-secondary-dark);
2286
- }
2287
- }
2288
- .dark\:text-text-tertiary-dark {
2289
- @media (prefers-color-scheme: dark) {
2290
- color: var(--color-text-tertiary-dark);
2291
- }
2292
- }
2293
- .dark\:placeholder\:text-text-disabled-dark {
2294
- @media (prefers-color-scheme: dark) {
2295
- &::placeholder {
2296
- color: var(--color-text-disabled-dark);
2297
- }
2298
- }
2299
- }
2300
- .dark\:hover\:border-border-default-dark {
2301
- @media (prefers-color-scheme: dark) {
2302
- &:hover {
2303
- @media (hover: hover) {
2304
- border-color: var(--color-border-default-dark);
2305
- }
2306
- }
2307
- }
2308
- }
2309
- .dark\:hover\:border-border-strong-dark {
2310
- @media (prefers-color-scheme: dark) {
2311
- &:hover {
2312
- @media (hover: hover) {
2313
- border-color: var(--color-border-strong-dark);
2314
- }
2315
- }
2316
- }
2317
- }
2318
- .dark\:hover\:bg-bg-raised-dark {
2319
- @media (prefers-color-scheme: dark) {
2320
- &:hover {
2321
- @media (hover: hover) {
2322
- background-color: var(--color-bg-raised-dark);
2323
- }
2324
- }
2325
- }
2326
- }
2327
- .dark\:hover\:text-text-primary-dark {
2328
- @media (prefers-color-scheme: dark) {
2329
- &:hover {
2330
- @media (hover: hover) {
2331
- color: var(--color-text-primary-dark);
2332
- }
2333
- }
2334
- }
2335
- }
2336
- .dark\:hover\:text-text-secondary-dark {
2337
- @media (prefers-color-scheme: dark) {
2338
- &:hover {
2339
- @media (hover: hover) {
2340
- color: var(--color-text-secondary-dark);
2341
- }
2342
- }
2343
- }
2344
- }
2345
- .dark\:lg\:\!bg-bg-raised-dark {
2346
- @media (prefers-color-scheme: dark) {
2347
- @media (width >= 64rem) {
2348
- background-color: var(--color-bg-raised-dark) !important;
2349
- }
2375
+ font-size: var(--deframe-widget-font-size-md);
2350
2376
  }
2351
2377
  }
2352
- .lg\:dark\:\!bg-bg-raised-dark {
2378
+ .lg\:\!bg-\[var\(--deframe-widget-color-bg-secondary\)\] {
2353
2379
  @media (width >= 64rem) {
2354
- @media (prefers-color-scheme: dark) {
2355
- background-color: var(--color-bg-raised-dark) !important;
2356
- }
2380
+ background-color: var(--deframe-widget-color-bg-secondary) !important;
2357
2381
  }
2358
2382
  }
2359
- .lg\:dark\:bg-bg-subtle-dark {
2383
+ .lg\:bg-\[var\(--deframe-widget-color-bg-secondary\)\] {
2360
2384
  @media (width >= 64rem) {
2361
- @media (prefers-color-scheme: dark) {
2362
- background-color: var(--color-bg-subtle-dark);
2363
- }
2385
+ background-color: var(--deframe-widget-color-bg-secondary);
2364
2386
  }
2365
2387
  }
2366
2388
  }
2367
- @keyframes slide-up {
2368
- 0% {
2369
- transform: translateY(100%);
2370
- }
2371
- 100% {
2372
- transform: translateY(0);
2373
- }
2374
- }
2375
- @keyframes slide-down {
2376
- 0% {
2377
- transform: translateY(0);
2378
- }
2379
- 100% {
2380
- transform: translateY(100%);
2381
- }
2382
- }
2383
- @keyframes fade-in {
2384
- 0% {
2385
- opacity: 0;
2386
- }
2387
- 100% {
2388
- opacity: 1;
2389
- }
2390
- }
2391
- @keyframes fade-out {
2392
- 0% {
2393
- opacity: 1;
2394
- }
2395
- 100% {
2396
- opacity: 0;
2397
- }
2398
- }
2399
- body {
2400
- background: var(--background);
2401
- color: var(--foreground);
2402
- font-family: Arial, Helvetica, sans-serif;
2403
- }
2404
2389
  :root,
2405
2390
  .deframe-widget {
2406
- --deframe-widget-font-family-primary: 'Satoshi', sans-serif;
2407
- --deframe-widget-font-family-secondary: 'Inter', sans-serif;
2408
- --deframe-widget-font-family-tertiary: 'Roboto Mono', monospace;
2409
- --deframe-widget-font-size-xs: 0.6875rem;
2410
- --deframe-widget-font-size-sm: clamp(0.6875rem, 1.8vw, 0.8125rem);
2411
- --deframe-widget-font-size-md: clamp(0.8125rem, 2vw, 0.9375rem);
2412
- --deframe-widget-font-size-lg: clamp(0.9375rem, 2.5vw, 1.125rem);
2413
- --deframe-widget-font-size-xl: clamp(1.0625rem, 2.8vw, 1.25rem);
2414
- --deframe-widget-font-size-xxl: clamp(1.25rem, 3.2vw, 1.5rem);
2415
- --deframe-widget-font-heading-h-large: clamp(4rem, 5vw, 5rem);
2416
- --deframe-widget-font-heading-h1: clamp(3rem, 4.5vw, 4rem);
2417
- --deframe-widget-font-heading-h2: clamp(2.5rem, 4vw, 3rem);
2418
- --deframe-widget-font-heading-h3: clamp(2rem, 3.5vw, 2.5rem);
2419
- --deframe-widget-font-heading-h4: clamp(1.5rem, 3vw, 2rem);
2420
- --deframe-widget-font-heading-h5: clamp(1.25rem, 2.5vw, 1.5rem);
2421
- --deframe-widget-font-leading-xs: clamp(0.75em, 2vw, 0.875em);
2422
- --deframe-widget-font-leading-sm: clamp(0.875em, 2.2vw, 1em);
2423
- --deframe-widget-font-leading-md: clamp(1.0625em, 2.5vw, 1.25em);
2424
- --deframe-widget-font-leading-lg: clamp(1.25em, 3vw, 1.5em);
2425
- --deframe-widget-font-leading-xl: clamp(1.5em, 3.5vw, 1.75em);
2426
- --deframe-widget-font-leading-xxl: clamp(1.75em, 4vw, 2em);
2391
+ --deframe-widget-font-family: 'Satoshi', Inter, sans-serif;
2392
+ --deframe-widget-font-size-xs: 11px;
2393
+ --deframe-widget-font-size-sm: 13px;
2394
+ --deframe-widget-font-size-md: 15px;
2395
+ --deframe-widget-font-size-lg: 18px;
2396
+ --deframe-widget-font-size-xl: 20px;
2397
+ --deframe-widget-font-size-xxl: 24px;
2398
+ --deframe-widget-font-leading-xs: 14px;
2399
+ --deframe-widget-font-leading-sm: 16px;
2400
+ --deframe-widget-font-leading-md: 20px;
2401
+ --deframe-widget-font-leading-lg: 24px;
2402
+ --deframe-widget-font-leading-xl: 28px;
2403
+ --deframe-widget-font-leading-xxl: 32px;
2427
2404
  --deframe-widget-font-weight-thin: 100;
2428
2405
  --deframe-widget-font-weight-light: 300;
2429
2406
  --deframe-widget-font-weight-regular: 400;
@@ -2431,79 +2408,76 @@ body {
2431
2408
  --deframe-widget-font-weight-semibold: 600;
2432
2409
  --deframe-widget-font-weight-bold: 700;
2433
2410
  --deframe-widget-font-weight-extrabold: 800;
2434
- --deframe-widget-color-text-primary: #323232;
2411
+ --deframe-widget-color-text-primary: #252050;
2435
2412
  --deframe-widget-color-text-primary-dark: #ffffff;
2436
2413
  --deframe-widget-color-text-primary-disabled: #c6c8cc;
2437
- --deframe-widget-color-text-secondary: #c6c8cc;
2438
- --deframe-widget-color-text-secondary-dark: #c6c8cc;
2414
+ --deframe-widget-color-text-secondary: #5c5f66;
2415
+ --deframe-widget-color-text-secondary-dark: #e3e4e8;
2439
2416
  --deframe-widget-color-text-secondary-disabled: #898d95;
2440
2417
  --deframe-widget-color-text-tertiary: #898d95;
2441
- --deframe-widget-color-text-tertiary-dark: #898d95;
2418
+ --deframe-widget-color-text-tertiary-dark: #c6c8cc;
2442
2419
  --deframe-widget-color-text-tertiary-disabled: #5c5f66;
2443
- --deframe-widget-color-link: #405eff;
2444
- --deframe-widget-color-link-dark: #405eff;
2445
- --deframe-widget-color-link-disabled: #6f6e6e;
2446
- --deframe-widget-color-placeholder-primary: #c6c8cc;
2447
- --deframe-widget-color-placeholder-primary-dark: #c6c8cc;
2420
+ --deframe-widget-color-placeholder-primary: #898d95;
2421
+ --deframe-widget-color-placeholder-primary-dark: #e3e4e8;
2448
2422
  --deframe-widget-color-placeholder-primary-disabled: #898d95;
2449
- --deframe-widget-color-placeholder-secondary: #898d95;
2450
- --deframe-widget-color-placeholder-secondary-dark: #898d95;
2423
+ --deframe-widget-color-placeholder-secondary: #c6c8cc;
2424
+ --deframe-widget-color-placeholder-secondary-dark: #99a0ae;
2451
2425
  --deframe-widget-color-placeholder-secondary-disabled: #5c5f66;
2452
2426
  --deframe-widget-color-placeholder-tertiary: #5c5f66;
2453
- --deframe-widget-color-placeholder-tertiary-dark: #5c5f66;
2427
+ --deframe-widget-color-placeholder-tertiary-dark: #525866;
2454
2428
  --deframe-widget-color-placeholder-tertiary-disabled: #3a3a3a;
2455
- --deframe-widget-color-brand-primary: #50d890;
2456
- --deframe-widget-color-brand-primary-dark: #50d890;
2457
- --deframe-widget-color-brand-primary-disabled: #6f6e6e;
2458
- --deframe-widget-color-brand-secondary: #ffd166;
2459
- --deframe-widget-color-brand-secondary-dark: #ffd166;
2460
- --deframe-widget-color-brand-secondary-disabled: #6f6e6e;
2461
- --deframe-widget-color-brand-tertiary: #50d890;
2462
- --deframe-widget-color-brand-tertiary-dark: #50d890;
2463
- --deframe-widget-color-brand-tertiary-disabled: #6f6e6e;
2464
- --deframe-widget-color-bg-primary: #251a15;
2465
- --deframe-widget-color-bg-primary-dark: #251a15;
2466
- --deframe-widget-color-bg-primary-disabled: #373534;
2467
- --deframe-widget-color-bg-secondary: #31231d;
2468
- --deframe-widget-color-bg-secondary-dark: #31231d;
2469
- --deframe-widget-color-bg-secondary-disabled: #1d1410;
2470
- --deframe-widget-color-bg-tertiary: #4f352a;
2471
- --deframe-widget-color-bg-tertiary-dark: #4f352a;
2472
- --deframe-widget-color-bg-tertiary-disabled: #2c1a14;
2473
- --deframe-widget-color-border-primary: #923108;
2474
- --deframe-widget-color-border-primary-dark: #4f352a;
2475
- --deframe-widget-color-border-primary-disabled: #000000;
2476
- --deframe-widget-color-border-secondary: #31231d;
2477
- --deframe-widget-color-border-secondary-dark: #31231d;
2478
- --deframe-widget-color-border-secondary-disabled: #cdcac9;
2479
- --deframe-widget-color-border-tertiary: #251a15;
2480
- --deframe-widget-color-border-tertiary-dark: #251a15;
2481
- --deframe-widget-color-border-tertiary-disabled: #1d1410;
2429
+ --deframe-widget-color-brand-primary: #405eff;
2430
+ --deframe-widget-color-brand-primary-dark: #405eff;
2431
+ --deframe-widget-color-brand-primary-disabled: #c6c8cc;
2432
+ --deframe-widget-color-brand-secondary: #a9abf7;
2433
+ --deframe-widget-color-brand-secondary-dark: #a9abf7;
2434
+ --deframe-widget-color-brand-secondary-disabled: #d7deea;
2435
+ --deframe-widget-color-brand-tertiary: #405eff;
2436
+ --deframe-widget-color-brand-tertiary-dark: #a9abf7;
2437
+ --deframe-widget-color-brand-tertiary-disabled: #d7deea;
2438
+ --deframe-widget-color-bg-primary: #ffffff;
2439
+ --deframe-widget-color-bg-primary-dark: #0e0e0e;
2440
+ --deframe-widget-color-bg-primary-disabled: #eaecf0;
2441
+ --deframe-widget-color-bg-secondary: #f8f9fa;
2442
+ --deframe-widget-color-bg-secondary-dark: #1a1a1a;
2443
+ --deframe-widget-color-bg-secondary-disabled: #eaecf0;
2444
+ --deframe-widget-color-bg-tertiary: #eaecf0;
2445
+ --deframe-widget-color-bg-tertiary-dark: rgba(64, 94, 255, 0.15);
2446
+ --deframe-widget-color-bg-tertiary-disabled: rgba(64, 94, 255, 0.08);
2447
+ --deframe-widget-color-border-primary: rgba(64, 94, 255, 0.25);
2448
+ --deframe-widget-color-border-primary-dark: rgba(64, 94, 255, 0.3);
2449
+ --deframe-widget-color-border-primary-disabled: rgba(64, 94, 255, 0.12);
2450
+ --deframe-widget-color-border-secondary: #e3e4e8;
2451
+ --deframe-widget-color-border-secondary-dark: #2c2c2c;
2452
+ --deframe-widget-color-border-secondary-disabled: #eaecf0;
2453
+ --deframe-widget-color-border-tertiary: rgba(64, 94, 255, 0.08);
2454
+ --deframe-widget-color-border-tertiary-dark: rgba(255, 255, 255, 0.05);
2455
+ --deframe-widget-color-border-tertiary-disabled: rgba(64, 94, 255, 0.04);
2482
2456
  --deframe-widget-color-state-info: #58b4ff;
2483
- --deframe-widget-color-state-warning: #ffb845;
2457
+ --deframe-widget-color-state-warning: #f6a700;
2484
2458
  --deframe-widget-color-state-error: #ff4d4f;
2485
- --deframe-widget-color-state-success: #50d890;
2459
+ --deframe-widget-color-state-success: #2ba176;
2486
2460
  --deframe-widget-size-padding-x-none: 0;
2487
- --deframe-widget-size-padding-x-xs: 0.25em;
2488
- --deframe-widget-size-padding-x-sm: 0.5em;
2489
- --deframe-widget-size-padding-x-md: clamp(0.625em, 2vw, 1em);
2490
- --deframe-widget-size-padding-x-lg: clamp(1em, 2.5vw, 1.5em);
2491
- --deframe-widget-size-padding-x-xl: clamp(1.25em, 3vw, 2em);
2492
- --deframe-widget-size-padding-x-xxl: clamp(2em, 4vw, 3em);
2461
+ --deframe-widget-size-padding-x-xs: 4px;
2462
+ --deframe-widget-size-padding-x-sm: 8px;
2463
+ --deframe-widget-size-padding-x-md: 16px;
2464
+ --deframe-widget-size-padding-x-lg: 24px;
2465
+ --deframe-widget-size-padding-x-xl: 32px;
2466
+ --deframe-widget-size-padding-x-xxl: 48px;
2493
2467
  --deframe-widget-size-padding-y-none: 0;
2494
- --deframe-widget-size-padding-y-xs: 0.25em;
2495
- --deframe-widget-size-padding-y-sm: 0.5em;
2496
- --deframe-widget-size-padding-y-md: clamp(0.5em, 1.5vh, 1em);
2497
- --deframe-widget-size-padding-y-lg: clamp(0.875em, 2vh, 1.5em);
2498
- --deframe-widget-size-padding-y-xl: clamp(1em, 2.5vh, 2em);
2499
- --deframe-widget-size-padding-y-xxl: clamp(1.75em, 3.5vh, 3em);
2468
+ --deframe-widget-size-padding-y-xs: 4px;
2469
+ --deframe-widget-size-padding-y-sm: 8px;
2470
+ --deframe-widget-size-padding-y-md: 16px;
2471
+ --deframe-widget-size-padding-y-lg: 24px;
2472
+ --deframe-widget-size-padding-y-xl: 32px;
2473
+ --deframe-widget-size-padding-y-xxl: 48px;
2500
2474
  --deframe-widget-size-gap-none: 0;
2501
- --deframe-widget-size-gap-xs: 0.25em;
2502
- --deframe-widget-size-gap-sm: clamp(0.375em, 1vw, 0.5em);
2503
- --deframe-widget-size-gap-md: clamp(0.625em, 1.5vw, 1em);
2504
- --deframe-widget-size-gap-lg: clamp(1em, 2vw, 1.5em);
2505
- --deframe-widget-size-gap-xl: clamp(1.25em, 2.5vw, 2em);
2506
- --deframe-widget-size-gap-xxl: clamp(2em, 3.5vw, 3em);
2475
+ --deframe-widget-size-gap-xs: 4px;
2476
+ --deframe-widget-size-gap-sm: 8px;
2477
+ --deframe-widget-size-gap-md: 16px;
2478
+ --deframe-widget-size-gap-lg: 24px;
2479
+ --deframe-widget-size-gap-xl: 32px;
2480
+ --deframe-widget-size-gap-xxl: 48px;
2507
2481
  --deframe-widget-size-border-none: 0;
2508
2482
  --deframe-widget-size-border-xs: 1px;
2509
2483
  --deframe-widget-size-border-sm: 2px;
@@ -2512,29 +2486,157 @@ body {
2512
2486
  --deframe-widget-size-border-xl: 16px;
2513
2487
  --deframe-widget-size-border-xxl: 32px;
2514
2488
  --deframe-widget-size-radius-none: 0;
2515
- --deframe-widget-size-radius-xs: 0.25rem;
2516
- --deframe-widget-size-radius-sm: 0.375rem;
2517
- --deframe-widget-size-radius-md: clamp(0.5rem, 1.8vw, 0.875rem);
2518
- --deframe-widget-size-radius-lg: clamp(0.875rem, 2.5vw, 1.5rem);
2519
- --deframe-widget-size-radius-xl: clamp(1.25rem, 3vw, 2rem);
2520
- --deframe-widget-size-radius-xxl: clamp(1.75rem, 4vw, 3rem);
2489
+ --deframe-widget-size-radius-xs: 4px;
2490
+ --deframe-widget-size-radius-sm: 8px;
2491
+ --deframe-widget-size-radius-md: 12px;
2492
+ --deframe-widget-size-radius-lg: 20px;
2493
+ --deframe-widget-size-radius-xl: 24px;
2494
+ --deframe-widget-size-radius-xxl: 32px;
2521
2495
  --deframe-widget-size-radius-full: 9999px;
2522
2496
  }
2523
- .deframe-widget:is(.dark, .cryptocontrol) {
2524
- --color-brand-primary: var(--deframe-brand-primary, var(--color-brand-primary-dark));
2525
- --color-bg-default: var(--deframe-bg-default, var(--color-bg-default-dark));
2526
- --color-bg-subtle: var(--deframe-bg-subtle, var(--color-bg-subtle-dark));
2527
- --color-bg-muted: var(--deframe-bg-muted, var(--color-bg-muted-dark));
2528
- --color-text-primary: var(--deframe-text-primary, var(--color-text-primary-dark));
2529
- --color-text-secondary: var(--deframe-text-secondary, var(--color-text-secondary-dark));
2530
- --color-text-disabled: var(--deframe-text-disabled, var(--color-text-disabled-dark));
2531
- --color-text-inverse: var(--deframe-text-inverse, var(--color-text-inverse-dark));
2532
- --color-border-default: var(--color-border-default-dark);
2533
- --color-border-subtle: var(--color-border-subtle-dark);
2534
- --color-border-strong: var(--color-border-strong-dark);
2535
- }
2497
+ :root:is(.dark, .cryptocontrol, .cryptocontrol-v2),
2498
+ .deframe-widget:is(.dark, .cryptocontrol, .cryptocontrol-v2) {
2499
+ --deframe-widget-color-text-primary: var(--deframe-widget-color-text-primary-dark);
2500
+ --deframe-widget-color-text-primary-disabled: #898d95;
2501
+ --deframe-widget-color-text-secondary: var(--deframe-widget-color-text-secondary-dark);
2502
+ --deframe-widget-color-text-secondary-disabled: #898d95;
2503
+ --deframe-widget-color-text-tertiary: var(--deframe-widget-color-text-tertiary-dark);
2504
+ --deframe-widget-color-text-tertiary-disabled: #525866;
2505
+ --deframe-widget-color-placeholder-primary: var(--deframe-widget-color-placeholder-primary-dark);
2506
+ --deframe-widget-color-placeholder-primary-disabled: #898d95;
2507
+ --deframe-widget-color-placeholder-secondary: var(--deframe-widget-color-placeholder-secondary-dark);
2508
+ --deframe-widget-color-placeholder-secondary-disabled: #525866;
2509
+ --deframe-widget-color-placeholder-tertiary: var(--deframe-widget-color-placeholder-tertiary-dark);
2510
+ --deframe-widget-color-placeholder-tertiary-disabled: #3a3a3a;
2511
+ --deframe-widget-color-brand-primary: var(--deframe-widget-color-brand-primary-dark);
2512
+ --deframe-widget-color-brand-primary-disabled: #525866;
2513
+ --deframe-widget-color-brand-secondary: var(--deframe-widget-color-brand-secondary-dark);
2514
+ --deframe-widget-color-brand-secondary-disabled: #525866;
2515
+ --deframe-widget-color-brand-tertiary: var(--deframe-widget-color-brand-tertiary-dark);
2516
+ --deframe-widget-color-brand-tertiary-disabled: #525866;
2517
+ --deframe-widget-color-bg-primary: var(--deframe-widget-color-bg-primary-dark);
2518
+ --deframe-widget-color-bg-primary-disabled: #232323;
2519
+ --deframe-widget-color-bg-secondary: var(--deframe-widget-color-bg-secondary-dark);
2520
+ --deframe-widget-color-bg-secondary-disabled: #141414;
2521
+ --deframe-widget-color-bg-tertiary: var(--deframe-widget-color-bg-tertiary-dark);
2522
+ --deframe-widget-color-bg-tertiary-disabled: rgba(64, 94, 255, 0.08);
2523
+ --deframe-widget-color-border-primary: var(--deframe-widget-color-border-primary-dark);
2524
+ --deframe-widget-color-border-primary-disabled: rgba(255, 255, 255, 0.08);
2525
+ --deframe-widget-color-border-secondary: var(--deframe-widget-color-border-secondary-dark);
2526
+ --deframe-widget-color-border-secondary-disabled: rgba(255, 255, 255, 0.06);
2527
+ --deframe-widget-color-border-tertiary: var(--deframe-widget-color-border-tertiary-dark);
2528
+ --deframe-widget-color-border-tertiary-disabled: rgba(255, 255, 255, 0.03);
2529
+ }
2530
+ :root.cryptocontrol,
2536
2531
  .deframe-widget.cryptocontrol {
2537
- --color-brand-primary: var(--deframe-brand-primary, var(--color-brand-primary-cryptocontrol));
2532
+ --deframe-widget-color-brand-primary: #1fc16b;
2533
+ --deframe-widget-color-brand-primary-dark: #1fc16b;
2534
+ --deframe-widget-color-brand-tertiary: #1fc16b;
2535
+ --deframe-widget-color-brand-tertiary-dark: #1fc16b;
2536
+ --deframe-widget-color-bg-tertiary: rgba(31, 193, 107, 0.18);
2537
+ --deframe-widget-color-bg-tertiary-dark: rgba(31, 193, 107, 0.18);
2538
+ --deframe-widget-color-bg-tertiary-disabled: rgba(31, 193, 107, 0.1);
2539
+ --deframe-widget-color-border-primary: rgba(31, 193, 107, 0.4);
2540
+ --deframe-widget-color-border-primary-dark: rgba(31, 193, 107, 0.4);
2541
+ --deframe-widget-color-border-primary-disabled: rgba(31, 193, 107, 0.18);
2542
+ --deframe-widget-color-state-success: #1fc16b;
2543
+ }
2544
+ :root.cryptocontrol-v2,
2545
+ .deframe-widget.cryptocontrol-v2 {
2546
+ --deframe-widget-color-text-primary: #ffffff;
2547
+ --deframe-widget-color-text-primary-dark: #ffffff;
2548
+ --deframe-widget-color-text-primary-disabled: #525866;
2549
+ --deframe-widget-color-text-secondary: #99a0ae;
2550
+ --deframe-widget-color-text-secondary-dark: #99a0ae;
2551
+ --deframe-widget-color-text-secondary-disabled: #525866;
2552
+ --deframe-widget-color-text-tertiary: #525866;
2553
+ --deframe-widget-color-text-tertiary-dark: #525866;
2554
+ --deframe-widget-color-text-tertiary-disabled: #525866;
2555
+ --deframe-widget-color-placeholder-primary: #99a0ae;
2556
+ --deframe-widget-color-placeholder-primary-dark: #99a0ae;
2557
+ --deframe-widget-color-placeholder-primary-disabled: #525866;
2558
+ --deframe-widget-color-placeholder-secondary: #525866;
2559
+ --deframe-widget-color-placeholder-secondary-dark: #525866;
2560
+ --deframe-widget-color-placeholder-secondary-disabled: #525866;
2561
+ --deframe-widget-color-placeholder-tertiary: #525866;
2562
+ --deframe-widget-color-placeholder-tertiary-dark: #525866;
2563
+ --deframe-widget-color-placeholder-tertiary-disabled: #525866;
2564
+ --deframe-widget-color-brand-primary: #1fc16b;
2565
+ --deframe-widget-color-brand-primary-dark: #1fc16b;
2566
+ --deframe-widget-color-brand-primary-disabled: #525866;
2567
+ --deframe-widget-color-brand-secondary: #a9abf7;
2568
+ --deframe-widget-color-brand-secondary-dark: #a9abf7;
2569
+ --deframe-widget-color-brand-secondary-disabled: #525866;
2570
+ --deframe-widget-color-brand-tertiary: #1fc16b;
2571
+ --deframe-widget-color-brand-tertiary-dark: #1fc16b;
2572
+ --deframe-widget-color-brand-tertiary-disabled: #525866;
2573
+ --deframe-widget-color-bg-primary: #11141b;
2574
+ --deframe-widget-color-bg-primary-dark: #11141b;
2575
+ --deframe-widget-color-bg-primary-disabled: #181b25;
2576
+ --deframe-widget-color-bg-secondary: #181b25;
2577
+ --deframe-widget-color-bg-secondary-dark: #181b25;
2578
+ --deframe-widget-color-bg-secondary-disabled: #222530;
2579
+ --deframe-widget-color-bg-tertiary: #222530;
2580
+ --deframe-widget-color-bg-tertiary-dark: #222530;
2581
+ --deframe-widget-color-bg-tertiary-disabled: #181b25;
2582
+ --deframe-widget-color-border-primary: rgba(255, 255, 255, 0.12);
2583
+ --deframe-widget-color-border-primary-dark: rgba(255, 255, 255, 0.12);
2584
+ --deframe-widget-color-border-primary-disabled: rgba(255, 255, 255, 0.05);
2585
+ --deframe-widget-color-border-secondary: rgba(255, 255, 255, 0.07);
2586
+ --deframe-widget-color-border-secondary-dark: rgba(255, 255, 255, 0.07);
2587
+ --deframe-widget-color-border-secondary-disabled: rgba(255, 255, 255, 0.05);
2588
+ --deframe-widget-color-border-tertiary: rgba(255, 255, 255, 0.05);
2589
+ --deframe-widget-color-border-tertiary-dark: rgba(255, 255, 255, 0.05);
2590
+ --deframe-widget-color-border-tertiary-disabled: rgba(255, 255, 255, 0.03);
2591
+ --deframe-widget-color-state-success: #1fc16b;
2592
+ }
2593
+ .deframe-widget {
2594
+ background: var(--deframe-widget-color-bg-primary);
2595
+ color: var(--deframe-widget-color-text-primary);
2596
+ font-family: var(--deframe-widget-font-family);
2597
+ }
2598
+ .deframe-widget button,
2599
+ .deframe-widget input,
2600
+ .deframe-widget textarea,
2601
+ .deframe-widget select {
2602
+ font-family: inherit;
2603
+ }
2604
+ body {
2605
+ background: var(--deframe-widget-color-bg-primary);
2606
+ color: var(--deframe-widget-color-text-primary);
2607
+ font-family: var(--deframe-widget-font-family);
2608
+ }
2609
+ @keyframes deframe-widget-slide-up {
2610
+ 0% {
2611
+ transform: translateY(100%);
2612
+ }
2613
+ 100% {
2614
+ transform: translateY(0);
2615
+ }
2616
+ }
2617
+ @keyframes deframe-widget-slide-down {
2618
+ 0% {
2619
+ transform: translateY(0);
2620
+ }
2621
+ 100% {
2622
+ transform: translateY(100%);
2623
+ }
2624
+ }
2625
+ @keyframes deframe-widget-fade-in {
2626
+ 0% {
2627
+ opacity: 0;
2628
+ }
2629
+ 100% {
2630
+ opacity: 1;
2631
+ }
2632
+ }
2633
+ @keyframes deframe-widget-fade-out {
2634
+ 0% {
2635
+ opacity: 1;
2636
+ }
2637
+ 100% {
2638
+ opacity: 0;
2639
+ }
2538
2640
  }
2539
2641
  @property --tw-translate-x {
2540
2642
  syntax: "*";
@@ -2807,6 +2909,11 @@ body {
2807
2909
  syntax: "*";
2808
2910
  inherits: false;
2809
2911
  }
2912
+ @keyframes spin {
2913
+ to {
2914
+ transform: rotate(360deg);
2915
+ }
2916
+ }
2810
2917
  @keyframes bounce {
2811
2918
  0%, 100% {
2812
2919
  transform: translateY(-25%);