@deframe-sdk/components 0.1.9 → 0.1.11

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 +868 -94
  2. package/dist/index.d.ts +868 -94
  3. package/dist/index.js +4112 -802
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +4071 -801
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +1069 -902
  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,92 +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
- --radius-full: 9999px;
119
- --animate-fade-in: fade-in 0.3s ease-out;
120
53
  }
121
54
  }
122
55
  @layer base {
@@ -298,12 +231,18 @@
298
231
  .top-1\/2 {
299
232
  top: calc(1/2 * 100%);
300
233
  }
234
+ .top-2 {
235
+ top: calc(var(--spacing) * 2);
236
+ }
301
237
  .top-4 {
302
238
  top: calc(var(--spacing) * 4);
303
239
  }
304
240
  .top-8 {
305
241
  top: calc(var(--spacing) * 8);
306
242
  }
243
+ .-right-0\.5 {
244
+ right: calc(var(--spacing) * -0.5);
245
+ }
307
246
  .-right-1 {
308
247
  right: calc(var(--spacing) * -1);
309
248
  }
@@ -313,15 +252,24 @@
313
252
  .right-2 {
314
253
  right: calc(var(--spacing) * 2);
315
254
  }
255
+ .right-3 {
256
+ right: calc(var(--spacing) * 3);
257
+ }
316
258
  .right-4 {
317
259
  right: calc(var(--spacing) * 4);
318
260
  }
261
+ .-bottom-0\.5 {
262
+ bottom: calc(var(--spacing) * -0.5);
263
+ }
319
264
  .-bottom-1 {
320
265
  bottom: calc(var(--spacing) * -1);
321
266
  }
322
267
  .bottom-0 {
323
268
  bottom: calc(var(--spacing) * 0);
324
269
  }
270
+ .bottom-2 {
271
+ bottom: calc(var(--spacing) * 2);
272
+ }
325
273
  .bottom-4 {
326
274
  bottom: calc(var(--spacing) * 4);
327
275
  }
@@ -346,6 +294,9 @@
346
294
  .z-50 {
347
295
  z-index: 50;
348
296
  }
297
+ .z-\[1\] {
298
+ z-index: 1;
299
+ }
349
300
  .container {
350
301
  width: 100%;
351
302
  @media (width >= 40rem) {
@@ -364,71 +315,104 @@
364
315
  max-width: 96rem;
365
316
  }
366
317
  }
367
- .mx-4 {
368
- 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);
369
323
  }
370
324
  .mx-auto {
371
325
  margin-inline: auto;
372
326
  }
373
- .my-1 {
374
- margin-block: calc(var(--spacing) * 1);
327
+ .-my-2 {
328
+ margin-block: calc(var(--spacing) * -2);
375
329
  }
376
- .mt-0 {
377
- 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);
378
332
  }
379
- .mt-1 {
380
- margin-top: calc(var(--spacing) * 1);
333
+ .my-\[var\(--deframe-widget-size-gap-xs\)\] {
334
+ margin-block: var(--deframe-widget-size-gap-xs);
381
335
  }
382
- .mt-3 {
383
- 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);
384
338
  }
385
339
  .mt-4 {
386
340
  margin-top: calc(var(--spacing) * 4);
387
341
  }
388
- .mt-6 {
389
- margin-top: calc(var(--spacing) * 6);
342
+ .mt-\[-4px\] {
343
+ margin-top: -4px;
344
+ }
345
+ .mt-\[2px\] {
346
+ margin-top: 2px;
390
347
  }
391
- .mt-8 {
392
- margin-top: calc(var(--spacing) * 8);
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);
368
+ }
369
+ .mt-\[var\(--deframe-widget-size-gap-xs\)\] {
370
+ margin-top: var(--deframe-widget-size-gap-xs);
393
371
  }
394
372
  .mt-auto {
395
373
  margin-top: auto;
396
374
  }
397
- .mt-sm {
398
- margin-top: var(--spacing-sm);
375
+ .mt-px {
376
+ margin-top: 1px;
399
377
  }
400
- .mr-2 {
401
- margin-right: calc(var(--spacing) * 2);
378
+ .mr-\[var\(--deframe-widget-size-gap-sm\)\] {
379
+ margin-right: var(--deframe-widget-size-gap-sm);
402
380
  }
403
381
  .\[margin-bottom\:var\(--deframe-widget-size-gap-xs\)\] {
404
382
  margin-bottom: var(--deframe-widget-size-gap-xs);
405
383
  }
406
- .mb-1 {
407
- margin-bottom: calc(var(--spacing) * 1);
384
+ .mb-4 {
385
+ margin-bottom: calc(var(--spacing) * 4);
386
+ }
387
+ .mb-\[6px\] {
388
+ margin-bottom: 6px;
408
389
  }
409
- .mb-2 {
410
- margin-bottom: calc(var(--spacing) * 2);
390
+ .mb-\[var\(--deframe-widget-size-gap-lg\)\] {
391
+ margin-bottom: var(--deframe-widget-size-gap-lg);
411
392
  }
412
- .mb-3 {
413
- margin-bottom: calc(var(--spacing) * 3);
393
+ .mb-\[var\(--deframe-widget-size-gap-md\)\] {
394
+ margin-bottom: var(--deframe-widget-size-gap-md);
414
395
  }
415
- .mb-4 {
416
- margin-bottom: calc(var(--spacing) * 4);
396
+ .mb-\[var\(--deframe-widget-size-gap-none\)\] {
397
+ margin-bottom: var(--deframe-widget-size-gap-none);
417
398
  }
418
- .mb-6 {
419
- margin-bottom: calc(var(--spacing) * 6);
399
+ .mb-\[var\(--deframe-widget-size-gap-sm\)\] {
400
+ margin-bottom: var(--deframe-widget-size-gap-sm);
420
401
  }
421
- .mb-8 {
422
- margin-bottom: calc(var(--spacing) * 8);
402
+ .mb-\[var\(--deframe-widget-size-gap-xl\)\] {
403
+ margin-bottom: var(--deframe-widget-size-gap-xl);
423
404
  }
424
- .mb-10 {
425
- margin-bottom: calc(var(--spacing) * 10);
405
+ .mb-\[var\(--deframe-widget-size-gap-xs\)\] {
406
+ margin-bottom: var(--deframe-widget-size-gap-xs);
407
+ }
408
+ .ml-\[var\(--deframe-widget-size-gap-lg\)\] {
409
+ margin-left: var(--deframe-widget-size-gap-lg);
426
410
  }
427
- .ml-1 {
428
- margin-left: calc(var(--spacing) * 1);
411
+ .ml-\[var\(--deframe-widget-size-gap-xs\)\] {
412
+ margin-left: var(--deframe-widget-size-gap-xs);
429
413
  }
430
- .ml-6 {
431
- margin-left: calc(var(--spacing) * 6);
414
+ .box-border {
415
+ box-sizing: border-box;
432
416
  }
433
417
  .block {
434
418
  display: block;
@@ -448,15 +432,18 @@
448
432
  .inline {
449
433
  display: inline;
450
434
  }
435
+ .inline-block {
436
+ display: inline-block;
437
+ }
451
438
  .inline-flex {
452
439
  display: inline-flex;
453
440
  }
454
- .list-item {
455
- display: list-item;
456
- }
457
441
  .h-0\.5 {
458
442
  height: calc(var(--spacing) * 0.5);
459
443
  }
444
+ .h-1 {
445
+ height: calc(var(--spacing) * 1);
446
+ }
460
447
  .h-2 {
461
448
  height: calc(var(--spacing) * 2);
462
449
  }
@@ -472,9 +459,15 @@
472
459
  .h-6 {
473
460
  height: calc(var(--spacing) * 6);
474
461
  }
462
+ .h-7 {
463
+ height: calc(var(--spacing) * 7);
464
+ }
475
465
  .h-8 {
476
466
  height: calc(var(--spacing) * 8);
477
467
  }
468
+ .h-9 {
469
+ height: calc(var(--spacing) * 9);
470
+ }
478
471
  .h-10 {
479
472
  height: calc(var(--spacing) * 10);
480
473
  }
@@ -490,9 +483,18 @@
490
483
  .h-80 {
491
484
  height: calc(var(--spacing) * 80);
492
485
  }
486
+ .h-\[3px\] {
487
+ height: 3px;
488
+ }
493
489
  .h-\[4px\] {
494
490
  height: 4px;
495
491
  }
492
+ .h-\[6px\] {
493
+ height: 6px;
494
+ }
495
+ .h-\[7px\] {
496
+ height: 7px;
497
+ }
496
498
  .h-\[12px\] {
497
499
  height: 12px;
498
500
  }
@@ -529,8 +531,14 @@
529
531
  .h-\[844px\] {
530
532
  height: 844px;
531
533
  }
532
- .h-\[var\(--deframe-widget-button-height\)\] {
533
- 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);
534
542
  }
535
543
  .h-auto {
536
544
  height: auto;
@@ -547,6 +555,12 @@
547
555
  .max-h-60 {
548
556
  max-height: calc(var(--spacing) * 60);
549
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
+ }
550
564
  .min-h-0 {
551
565
  min-height: calc(var(--spacing) * 0);
552
566
  }
@@ -556,6 +570,9 @@
556
570
  .min-h-\[16px\] {
557
571
  min-height: 16px;
558
572
  }
573
+ .min-h-\[600px\] {
574
+ min-height: 600px;
575
+ }
559
576
  .min-h-full {
560
577
  min-height: 100%;
561
578
  }
@@ -577,15 +594,24 @@
577
594
  .w-6 {
578
595
  width: calc(var(--spacing) * 6);
579
596
  }
597
+ .w-7 {
598
+ width: calc(var(--spacing) * 7);
599
+ }
580
600
  .w-8 {
581
601
  width: calc(var(--spacing) * 8);
582
602
  }
603
+ .w-9 {
604
+ width: calc(var(--spacing) * 9);
605
+ }
583
606
  .w-10 {
584
607
  width: calc(var(--spacing) * 10);
585
608
  }
586
609
  .w-12 {
587
610
  width: calc(var(--spacing) * 12);
588
611
  }
612
+ .w-14 {
613
+ width: calc(var(--spacing) * 14);
614
+ }
589
615
  .w-20 {
590
616
  width: calc(var(--spacing) * 20);
591
617
  }
@@ -613,12 +639,24 @@
613
639
  .w-96 {
614
640
  width: calc(var(--spacing) * 96);
615
641
  }
642
+ .w-\[3px\] {
643
+ width: 3px;
644
+ }
645
+ .w-\[6px\] {
646
+ width: 6px;
647
+ }
648
+ .w-\[7px\] {
649
+ width: 7px;
650
+ }
616
651
  .w-\[18px\] {
617
652
  width: 18px;
618
653
  }
619
654
  .w-\[83px\] {
620
655
  width: 83px;
621
656
  }
657
+ .w-\[210px\] {
658
+ width: 210px;
659
+ }
622
660
  .w-\[300px\] {
623
661
  width: 300px;
624
662
  }
@@ -631,9 +669,18 @@
631
669
  .w-\[420px\] {
632
670
  width: 420px;
633
671
  }
672
+ .w-\[440px\] {
673
+ width: 440px;
674
+ }
634
675
  .w-\[clamp\(18rem\,40vw\,30rem\)\] {
635
676
  width: clamp(18rem, 40vw, 30rem);
636
677
  }
678
+ .w-\[min\(680px\,calc\(100vw-32px\)\)\] {
679
+ width: min(680px, calc(100vw - 32px));
680
+ }
681
+ .w-auto {
682
+ width: auto;
683
+ }
637
684
  .w-full {
638
685
  width: 100%;
639
686
  }
@@ -649,9 +696,15 @@
649
696
  .max-w-3xl {
650
697
  max-width: var(--container-3xl);
651
698
  }
699
+ .max-w-\[200px\] {
700
+ max-width: 200px;
701
+ }
652
702
  .max-w-\[320px\] {
653
703
  max-width: 320px;
654
704
  }
705
+ .max-w-\[480px\] {
706
+ max-width: 480px;
707
+ }
655
708
  .max-w-\[620px\] {
656
709
  max-width: 620px;
657
710
  }
@@ -659,7 +712,7 @@
659
712
  max-width: 100%;
660
713
  }
661
714
  .max-w-lg {
662
- max-width: var(--spacing-lg);
715
+ max-width: var(--container-lg);
663
716
  }
664
717
  .min-w-0 {
665
718
  min-width: calc(var(--spacing) * 0);
@@ -667,6 +720,12 @@
667
720
  .min-w-\[120px\] {
668
721
  min-width: 120px;
669
722
  }
723
+ .min-w-\[160px\] {
724
+ min-width: 160px;
725
+ }
726
+ .min-w-\[180px\] {
727
+ min-width: 180px;
728
+ }
670
729
  .flex-1 {
671
730
  flex: 1;
672
731
  }
@@ -676,10 +735,17 @@
676
735
  .flex-shrink-0 {
677
736
  flex-shrink: 0;
678
737
  }
738
+ .shrink-0 {
739
+ flex-shrink: 0;
740
+ }
679
741
  .-translate-x-1\/2 {
680
742
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
681
743
  translate: var(--tw-translate-x) var(--tw-translate-y);
682
744
  }
745
+ .translate-x-1 {
746
+ --tw-translate-x: calc(var(--spacing) * 1);
747
+ translate: var(--tw-translate-x) var(--tw-translate-y);
748
+ }
683
749
  .-translate-y-1\/2 {
684
750
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
685
751
  translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -697,8 +763,11 @@
697
763
  .animate-bounce {
698
764
  animation: var(--animate-bounce);
699
765
  }
700
- .animate-fade-in {
701
- animation: var(--animate-fade-in);
766
+ .animate-spin {
767
+ animation: var(--animate-spin);
768
+ }
769
+ .cursor-default {
770
+ cursor: default;
702
771
  }
703
772
  .cursor-not-allowed {
704
773
  cursor: not-allowed;
@@ -706,6 +775,12 @@
706
775
  .cursor-pointer {
707
776
  cursor: pointer;
708
777
  }
778
+ .cursor-text {
779
+ cursor: text;
780
+ }
781
+ .resize {
782
+ resize: both;
783
+ }
709
784
  .list-none {
710
785
  list-style-type: none;
711
786
  }
@@ -715,6 +790,12 @@
715
790
  .grid-cols-3 {
716
791
  grid-template-columns: repeat(3, minmax(0, 1fr));
717
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
+ }
718
799
  .flex-col {
719
800
  flex-direction: column;
720
801
  }
@@ -724,6 +805,9 @@
724
805
  .flex-wrap {
725
806
  flex-wrap: wrap;
726
807
  }
808
+ .items-baseline {
809
+ align-items: baseline;
810
+ }
727
811
  .items-center {
728
812
  align-items: center;
729
813
  }
@@ -733,12 +817,18 @@
733
817
  .items-start {
734
818
  align-items: flex-start;
735
819
  }
820
+ .items-stretch {
821
+ align-items: stretch;
822
+ }
736
823
  .justify-between {
737
824
  justify-content: space-between;
738
825
  }
739
826
  .justify-center {
740
827
  justify-content: center;
741
828
  }
829
+ .justify-end {
830
+ justify-content: flex-end;
831
+ }
742
832
  .justify-start {
743
833
  justify-content: flex-start;
744
834
  }
@@ -751,47 +841,44 @@
751
841
  .\[gap\:var\(--deframe-widget-size-gap-xs\)\] {
752
842
  gap: var(--deframe-widget-size-gap-xs);
753
843
  }
754
- .gap-0 {
755
- gap: calc(var(--spacing) * 0);
756
- }
757
- .gap-0\.5 {
758
- gap: calc(var(--spacing) * 0.5);
844
+ .gap-\[2px\] {
845
+ gap: 2px;
759
846
  }
760
- .gap-1 {
761
- gap: calc(var(--spacing) * 1);
847
+ .gap-\[3px\] {
848
+ gap: 3px;
762
849
  }
763
- .gap-2 {
764
- gap: calc(var(--spacing) * 2);
850
+ .gap-\[4px\] {
851
+ gap: 4px;
765
852
  }
766
- .gap-2\.5 {
767
- gap: calc(var(--spacing) * 2.5);
853
+ .gap-\[5px\] {
854
+ gap: 5px;
768
855
  }
769
- .gap-3 {
770
- gap: calc(var(--spacing) * 3);
856
+ .gap-\[6px\] {
857
+ gap: 6px;
771
858
  }
772
- .gap-4 {
773
- gap: calc(var(--spacing) * 4);
859
+ .gap-\[10px\] {
860
+ gap: 10px;
774
861
  }
775
- .gap-6 {
776
- gap: calc(var(--spacing) * 6);
862
+ .gap-\[var\(--deframe-widget-size-gap-lg\)\] {
863
+ gap: var(--deframe-widget-size-gap-lg);
777
864
  }
778
- .gap-12 {
779
- gap: calc(var(--spacing) * 12);
865
+ .gap-\[var\(--deframe-widget-size-gap-md\)\] {
866
+ gap: var(--deframe-widget-size-gap-md);
780
867
  }
781
- .gap-\[2px\] {
782
- gap: 2px;
868
+ .gap-\[var\(--deframe-widget-size-gap-none\)\] {
869
+ gap: var(--deframe-widget-size-gap-none);
783
870
  }
784
871
  .gap-\[var\(--deframe-widget-size-gap-sm\)\] {
785
872
  gap: var(--deframe-widget-size-gap-sm);
786
873
  }
787
- .gap-lg {
788
- gap: var(--spacing-lg);
874
+ .gap-\[var\(--deframe-widget-size-gap-xl\)\] {
875
+ gap: var(--deframe-widget-size-gap-xl);
789
876
  }
790
- .gap-md {
791
- gap: var(--spacing-md);
877
+ .gap-\[var\(--deframe-widget-size-gap-xs\)\] {
878
+ gap: var(--deframe-widget-size-gap-xs);
792
879
  }
793
- .gap-sm {
794
- gap: var(--spacing-sm);
880
+ .gap-\[var\(--deframe-widget-size-gap-xxl\)\] {
881
+ gap: var(--deframe-widget-size-gap-xxl);
795
882
  }
796
883
  .space-y-1 {
797
884
  :where(& > :not(:last-child)) {
@@ -835,6 +922,9 @@
835
922
  margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
836
923
  }
837
924
  }
925
+ .gap-x-\[var\(--deframe-widget-size-gap-md\)\] {
926
+ column-gap: var(--deframe-widget-size-gap-md);
927
+ }
838
928
  .divide-y {
839
929
  :where(& > :not(:last-child)) {
840
930
  --tw-divide-y-reverse: 0;
@@ -844,9 +934,9 @@
844
934
  border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
845
935
  }
846
936
  }
847
- .divide-\[\#2A2A2A\] {
937
+ .divide-\[color\:var\(--deframe-widget-color-border-tertiary\)\] {
848
938
  :where(& > :not(:last-child)) {
849
- border-color: #2A2A2A;
939
+ border-color: var(--deframe-widget-color-border-tertiary);
850
940
  }
851
941
  }
852
942
  .self-start {
@@ -875,64 +965,66 @@
875
965
  .rounded {
876
966
  border-radius: 0.25rem;
877
967
  }
878
- .rounded-2xl {
879
- border-radius: var(--radius-2xl);
880
- }
881
968
  .rounded-\[18px\] {
882
969
  border-radius: 18px;
883
970
  }
884
- .rounded-\[24px\] {
885
- border-radius: 24px;
886
- }
887
971
  .rounded-\[56px\] {
888
972
  border-radius: 56px;
889
973
  }
890
974
  .rounded-\[60px\] {
891
975
  border-radius: 60px;
892
976
  }
893
- .rounded-\[var\(--deframe-widget-button-radius\)\] {
894
- border-radius: var(--deframe-widget-button-radius);
895
- }
896
- .rounded-\[var\(--deframe-widget-radius-lg\)\] {
897
- border-radius: var(--deframe-widget-radius-lg);
898
- }
899
977
  .rounded-\[var\(--deframe-widget-size-radius-full\)\] {
900
978
  border-radius: var(--deframe-widget-size-radius-full);
901
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
+ }
902
986
  .rounded-\[var\(--deframe-widget-size-radius-sm\)\] {
903
987
  border-radius: var(--deframe-widget-size-radius-sm);
904
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
+ }
905
995
  .rounded-\[var\(--deframe-widget-size-radius-xs\)\] {
906
996
  border-radius: var(--deframe-widget-size-radius-xs);
907
997
  }
908
- .rounded-full {
909
- border-radius: var(--radius-full);
910
- }
911
- .rounded-lg {
912
- border-radius: var(--radius-lg);
998
+ .rounded-\[var\(--hash-radius-item\)\] {
999
+ border-radius: var(--hash-radius-item);
913
1000
  }
914
- .rounded-md {
915
- border-radius: var(--radius-md);
1001
+ .rounded-full {
1002
+ border-radius: calc(infinity * 1px);
916
1003
  }
917
- .rounded-xl {
918
- 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);
919
1007
  }
920
- .rounded-t-\[32px\] {
921
- border-top-left-radius: 32px;
922
- 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);
923
1011
  }
924
- .rounded-t-full {
925
- border-top-left-radius: var(--radius-full);
926
- 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);
927
1015
  }
928
- .rounded-b-3xl {
929
- border-bottom-right-radius: var(--radius-3xl);
930
- 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);
931
1019
  }
932
1020
  .border {
933
1021
  border-style: var(--tw-border-style);
934
1022
  border-width: 1px;
935
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
+ }
936
1028
  .border-\[length\:var\(--deframe-widget-size-border-xs\)\] {
937
1029
  border-style: var(--tw-border-style);
938
1030
  border-width: var(--deframe-widget-size-border-xs);
@@ -941,10 +1033,18 @@
941
1033
  border-top-style: var(--tw-border-style);
942
1034
  border-top-width: 1px;
943
1035
  }
1036
+ .border-r {
1037
+ border-right-style: var(--tw-border-style);
1038
+ border-right-width: 1px;
1039
+ }
944
1040
  .border-b {
945
1041
  border-bottom-style: var(--tw-border-style);
946
1042
  border-bottom-width: 1px;
947
1043
  }
1044
+ .border-b-0 {
1045
+ border-bottom-style: var(--tw-border-style);
1046
+ border-bottom-width: 0px;
1047
+ }
948
1048
  .border-none {
949
1049
  --tw-border-style: none;
950
1050
  border-style: none;
@@ -959,20 +1059,62 @@
959
1059
  .border-\[\#3A3A3A\] {
960
1060
  border-color: #3A3A3A;
961
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
+ }
962
1092
  .border-\[color\:var\(--deframe-widget-color-border-primary\)\] {
963
1093
  border-color: var(--deframe-widget-color-border-primary);
964
1094
  }
1095
+ .border-\[color\:var\(--deframe-widget-color-border-primary-dark\)\] {
1096
+ border-color: var(--deframe-widget-color-border-primary-dark);
1097
+ }
965
1098
  .border-\[color\:var\(--deframe-widget-color-border-primary-disabled\)\] {
966
1099
  border-color: var(--deframe-widget-color-border-primary-disabled);
967
1100
  }
968
1101
  .border-\[color\:var\(--deframe-widget-color-border-secondary\)\] {
969
1102
  border-color: var(--deframe-widget-color-border-secondary);
970
1103
  }
1104
+ .border-\[color\:var\(--deframe-widget-color-border-secondary-dark\)\] {
1105
+ border-color: var(--deframe-widget-color-border-secondary-dark);
1106
+ }
971
1107
  .border-\[color\:var\(--deframe-widget-color-border-secondary-disabled\)\] {
972
1108
  border-color: var(--deframe-widget-color-border-secondary-disabled);
973
1109
  }
974
- .border-\[var\(--color-border-default\,\#333\)\] {
975
- 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);
976
1118
  }
977
1119
  .border-\[var\(--deframe-widget-color-border-primary\)\] {
978
1120
  border-color: var(--deframe-widget-color-border-primary);
@@ -992,32 +1134,17 @@
992
1134
  .border-\[var\(--deframe-widget-color-state-warning\)\] {
993
1135
  border-color: var(--deframe-widget-color-state-warning);
994
1136
  }
995
- .border-bg-default {
996
- border-color: var(--color-bg-default);
997
- }
998
1137
  .border-blue-300 {
999
1138
  border-color: var(--color-blue-300);
1000
1139
  }
1001
1140
  .border-blue-500 {
1002
1141
  border-color: var(--color-blue-500);
1003
1142
  }
1004
- .border-border-default {
1005
- border-color: var(--color-border-default);
1006
- }
1007
- .border-border-subtle {
1008
- border-color: var(--color-border-subtle);
1009
- }
1010
- .border-brand-primary {
1011
- border-color: var(--color-brand-primary);
1012
- }
1013
- .border-gray-600 {
1014
- border-color: var(--color-gray-600);
1015
- }
1016
1143
  .border-gray-700 {
1017
1144
  border-color: var(--color-gray-700);
1018
1145
  }
1019
- .border-gray-800 {
1020
- border-color: var(--color-gray-800);
1146
+ .border-transparent {
1147
+ border-color: transparent;
1021
1148
  }
1022
1149
  .bg-\[\#0A0A0A\] {
1023
1150
  background-color: #0A0A0A;
@@ -1034,36 +1161,138 @@
1034
1161
  .bg-\[\#2A2A2A\] {
1035
1162
  background-color: #2A2A2A;
1036
1163
  }
1037
- .bg-\[\#121212\] {
1038
- background-color: #121212;
1039
- }
1040
1164
  .bg-\[\#ff7a45\] {
1041
1165
  background-color: #ff7a45;
1042
1166
  }
1043
- .bg-\[rgba\(43\,161\,118\,0\.12\)\] {
1044
- 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
+ }
1045
1232
  }
1046
- .bg-\[var\(--color-bg-muted\,\#2a2a2a\)\] {
1047
- 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
+ }
1048
1238
  }
1049
- .bg-\[var\(--color-bg-raised\,\#1f1f1f\)\] {
1050
- 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
+ }
1051
1244
  }
1052
- .bg-\[var\(--color-bg-subtle\,\#1a1a1a\)\] {
1053
- 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
+ }
1054
1250
  }
1055
1251
  .bg-\[var\(--deframe-widget-color-bg-primary\)\] {
1056
1252
  background-color: var(--deframe-widget-color-bg-primary);
1057
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
+ }
1058
1266
  .bg-\[var\(--deframe-widget-color-bg-secondary\)\] {
1059
1267
  background-color: var(--deframe-widget-color-bg-secondary);
1060
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
+ }
1061
1287
  .bg-\[var\(--deframe-widget-color-brand-primary\)\] {
1062
1288
  background-color: var(--deframe-widget-color-brand-primary);
1063
1289
  }
1064
1290
  .bg-\[var\(--deframe-widget-color-brand-primary-disabled\)\] {
1065
1291
  background-color: var(--deframe-widget-color-brand-primary-disabled);
1066
1292
  }
1293
+ .bg-\[var\(--deframe-widget-color-brand-secondary\)\] {
1294
+ background-color: var(--deframe-widget-color-brand-secondary);
1295
+ }
1067
1296
  .bg-\[var\(--deframe-widget-color-state-error\)\] {
1068
1297
  background-color: var(--deframe-widget-color-state-error);
1069
1298
  }
@@ -1100,81 +1329,24 @@
1100
1329
  background-color: color-mix(in oklab, var(--deframe-widget-color-state-warning) 20%, transparent);
1101
1330
  }
1102
1331
  }
1103
- .bg-\[var\(--deframe-widget-color-surface-default\)\] {
1104
- background-color: var(--deframe-widget-color-surface-default);
1105
- }
1106
- .bg-\[var\(--deframe-widget-color-surface-muted\)\] {
1107
- background-color: var(--deframe-widget-color-surface-muted);
1108
- }
1109
- .bg-\[var\(--sheet-bg\,\#0A0A0A\)\] {
1110
- background-color: var(--sheet-bg,#0A0A0A);
1111
- }
1112
- .bg-amber-500\/20 {
1113
- background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
1114
- @supports (color: color-mix(in lab, red, red)) {
1115
- background-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
1116
- }
1117
- }
1118
- .bg-bg-default {
1119
- background-color: var(--color-bg-default);
1120
- }
1121
- .bg-bg-muted {
1122
- background-color: var(--color-bg-muted);
1123
- }
1124
- .bg-bg-raised {
1125
- background-color: var(--color-bg-raised);
1126
- }
1127
- .bg-bg-subtle {
1128
- background-color: var(--color-bg-subtle);
1129
- }
1130
- .bg-black {
1131
- background-color: var(--color-black);
1132
- }
1133
- .bg-black\/50 {
1134
- background-color: color-mix(in srgb, #000 50%, transparent);
1135
- @supports (color: color-mix(in lab, red, red)) {
1136
- background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
1137
- }
1138
- }
1139
1332
  .bg-blue-50 {
1140
1333
  background-color: var(--color-blue-50);
1141
1334
  }
1142
1335
  .bg-blue-500 {
1143
1336
  background-color: var(--color-blue-500);
1144
1337
  }
1145
- .bg-blue-600 {
1146
- background-color: var(--color-blue-600);
1147
- }
1148
1338
  .bg-blue-900 {
1149
1339
  background-color: var(--color-blue-900);
1150
1340
  }
1151
- .bg-border-default {
1152
- background-color: var(--color-border-default);
1153
- }
1154
- .bg-brand-primary {
1155
- background-color: var(--color-brand-primary);
1156
- }
1157
- .bg-brand-secondary {
1158
- background-color: var(--color-brand-secondary);
1159
- }
1160
1341
  .bg-gray-100 {
1161
1342
  background-color: var(--color-gray-100);
1162
1343
  }
1163
- .bg-gray-600 {
1164
- background-color: var(--color-gray-600);
1165
- }
1166
- .bg-gray-800 {
1167
- background-color: var(--color-gray-800);
1168
- }
1169
1344
  .bg-gray-900 {
1170
1345
  background-color: var(--color-gray-900);
1171
1346
  }
1172
1347
  .bg-green-100 {
1173
1348
  background-color: var(--color-green-100);
1174
1349
  }
1175
- .bg-green-400 {
1176
- background-color: var(--color-green-400);
1177
- }
1178
1350
  .bg-purple-500 {
1179
1351
  background-color: var(--color-purple-500);
1180
1352
  }
@@ -1184,27 +1356,9 @@
1184
1356
  .bg-red-500 {
1185
1357
  background-color: var(--color-red-500);
1186
1358
  }
1187
- .bg-red-500\/20 {
1188
- background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
1189
- @supports (color: color-mix(in lab, red, red)) {
1190
- background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
1191
- }
1192
- }
1193
- .bg-state-success {
1194
- background-color: var(--color-state-success);
1195
- }
1196
- .bg-teal-600\/20 {
1197
- background-color: color-mix(in srgb, oklch(60% 0.118 184.704) 20%, transparent);
1198
- @supports (color: color-mix(in lab, red, red)) {
1199
- background-color: color-mix(in oklab, var(--color-teal-600) 20%, transparent);
1200
- }
1201
- }
1202
1359
  .bg-transparent {
1203
1360
  background-color: transparent;
1204
1361
  }
1205
- .bg-white {
1206
- background-color: var(--color-white);
1207
- }
1208
1362
  .bg-yellow-100 {
1209
1363
  background-color: var(--color-yellow-100);
1210
1364
  }
@@ -1220,6 +1374,9 @@
1220
1374
  --tw-gradient-position: to top left in oklab;
1221
1375
  background-image: linear-gradient(var(--tw-gradient-stops));
1222
1376
  }
1377
+ .bg-none {
1378
+ background-image: none;
1379
+ }
1223
1380
  .from-\[\#0f3b2f\]\/10 {
1224
1381
  --tw-gradient-from: color-mix(in oklab, #0f3b2f 10%, transparent);
1225
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));
@@ -1253,14 +1410,6 @@
1253
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);
1254
1411
  --tw-gradient-stops: var(--tw-gradient-via-stops);
1255
1412
  }
1256
- .via-white\/20 {
1257
- --tw-gradient-via: color-mix(in srgb, #fff 20%, transparent);
1258
- @supports (color: color-mix(in lab, red, red)) {
1259
- --tw-gradient-via: color-mix(in oklab, var(--color-white) 20%, transparent);
1260
- }
1261
- --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);
1262
- --tw-gradient-stops: var(--tw-gradient-via-stops);
1263
- }
1264
1413
  .to-\[\#0f3b2f\]\/30 {
1265
1414
  --tw-gradient-to: color-mix(in oklab, #0f3b2f 30%, transparent);
1266
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));
@@ -1286,176 +1435,170 @@
1286
1435
  .\!p-\[24px\] {
1287
1436
  padding: 24px !important;
1288
1437
  }
1289
- .\!p-md {
1290
- padding: var(--spacing-md) !important;
1291
- }
1292
- .p-0 {
1293
- padding: calc(var(--spacing) * 0);
1294
- }
1295
- .p-2 {
1296
- padding: calc(var(--spacing) * 2);
1438
+ .p-\[3px\] {
1439
+ padding: 3px;
1297
1440
  }
1298
- .p-3 {
1299
- padding: calc(var(--spacing) * 3);
1300
- }
1301
- .p-4 {
1302
- padding: calc(var(--spacing) * 4);
1303
- }
1304
- .p-6 {
1305
- padding: calc(var(--spacing) * 6);
1306
- }
1307
- .p-8 {
1308
- padding: calc(var(--spacing) * 8);
1309
- }
1310
- .p-\[var\(--deframe-widget-space-md\)\] {
1311
- padding: var(--deframe-widget-space-md);
1312
- }
1313
- .p-md {
1314
- padding: var(--spacing-md);
1441
+ .p-\[var\(--deframe-widget-size-gap-lg\)\] {
1442
+ padding: var(--deframe-widget-size-gap-lg);
1315
1443
  }
1316
1444
  .p-px {
1317
1445
  padding: 1px;
1318
1446
  }
1319
- .px-0 {
1320
- padding-inline: calc(var(--spacing) * 0);
1321
- }
1322
- .px-2 {
1323
- padding-inline: calc(var(--spacing) * 2);
1447
+ .\!px-\[var\(--deframe-widget-size-padding-x-md\)\] {
1448
+ padding-inline: var(--deframe-widget-size-padding-x-md) !important;
1324
1449
  }
1325
- .px-3 {
1326
- padding-inline: calc(var(--spacing) * 3);
1450
+ .px-\[6px\] {
1451
+ padding-inline: 6px;
1327
1452
  }
1328
- .px-4 {
1329
- padding-inline: calc(var(--spacing) * 4);
1453
+ .px-\[7px\] {
1454
+ padding-inline: 7px;
1330
1455
  }
1331
- .px-6 {
1332
- padding-inline: calc(var(--spacing) * 6);
1456
+ .px-\[10px\] {
1457
+ padding-inline: 10px;
1333
1458
  }
1334
- .px-\[8px\] {
1335
- padding-inline: 8px;
1459
+ .px-\[14px\] {
1460
+ padding-inline: 14px;
1336
1461
  }
1337
1462
  .px-\[28px\] {
1338
1463
  padding-inline: 28px;
1339
1464
  }
1340
- .px-\[var\(--deframe-widget-button-padding-x\)\] {
1341
- 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);
1342
1467
  }
1343
1468
  .px-\[var\(--deframe-widget-size-padding-x-md\)\] {
1344
1469
  padding-inline: var(--deframe-widget-size-padding-x-md);
1345
1470
  }
1346
- .px-\[var\(--deframe-widget-size-padding-x-xl\)\] {
1347
- padding-inline: var(--deframe-widget-size-padding-x-xl);
1348
- }
1349
- .px-md {
1350
- padding-inline: var(--spacing-md);
1471
+ .px-\[var\(--deframe-widget-size-padding-x-none\)\] {
1472
+ padding-inline: var(--deframe-widget-size-padding-x-none);
1351
1473
  }
1352
- .px-sm {
1353
- padding-inline: var(--spacing-sm);
1474
+ .px-\[var\(--deframe-widget-size-padding-x-sm\)\] {
1475
+ padding-inline: var(--deframe-widget-size-padding-x-sm);
1354
1476
  }
1355
- .py-1 {
1356
- 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);
1357
1479
  }
1358
- .py-1\.5 {
1359
- 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);
1360
1482
  }
1361
- .py-2 {
1362
- padding-block: calc(var(--spacing) * 2);
1483
+ .py-\[2px\] {
1484
+ padding-block: 2px;
1363
1485
  }
1364
- .py-2\.5 {
1365
- padding-block: calc(var(--spacing) * 2.5);
1486
+ .py-\[3px\] {
1487
+ padding-block: 3px;
1366
1488
  }
1367
- .py-3 {
1368
- padding-block: calc(var(--spacing) * 3);
1489
+ .py-\[5px\] {
1490
+ padding-block: 5px;
1369
1491
  }
1370
- .py-4 {
1371
- padding-block: calc(var(--spacing) * 4);
1492
+ .py-\[6px\] {
1493
+ padding-block: 6px;
1372
1494
  }
1373
- .py-8 {
1374
- padding-block: calc(var(--spacing) * 8);
1495
+ .py-\[7px\] {
1496
+ padding-block: 7px;
1375
1497
  }
1376
- .py-12 {
1377
- padding-block: calc(var(--spacing) * 12);
1498
+ .py-\[9px\] {
1499
+ padding-block: 9px;
1378
1500
  }
1379
- .py-20 {
1380
- padding-block: calc(var(--spacing) * 20);
1501
+ .py-\[10px\] {
1502
+ padding-block: 10px;
1381
1503
  }
1382
- .py-\[2px\] {
1383
- padding-block: 2px;
1504
+ .py-\[11px\] {
1505
+ padding-block: 11px;
1384
1506
  }
1385
- .py-\[6px\] {
1386
- padding-block: 6px;
1507
+ .py-\[14px\] {
1508
+ padding-block: 14px;
1387
1509
  }
1388
- .py-\[10px\] {
1389
- padding-block: 10px;
1510
+ .py-\[var\(--deframe-widget-size-padding-y-lg\)\] {
1511
+ padding-block: var(--deframe-widget-size-padding-y-lg);
1390
1512
  }
1391
1513
  .py-\[var\(--deframe-widget-size-padding-y-md\)\] {
1392
1514
  padding-block: var(--deframe-widget-size-padding-y-md);
1393
1515
  }
1516
+ .py-\[var\(--deframe-widget-size-padding-y-none\)\] {
1517
+ padding-block: var(--deframe-widget-size-padding-y-none);
1518
+ }
1394
1519
  .py-\[var\(--deframe-widget-size-padding-y-sm\)\] {
1395
1520
  padding-block: var(--deframe-widget-size-padding-y-sm);
1396
1521
  }
1397
- .py-lg {
1398
- padding-block: var(--spacing-lg);
1522
+ .py-\[var\(--deframe-widget-size-padding-y-xl\)\] {
1523
+ padding-block: var(--deframe-widget-size-padding-y-xl);
1399
1524
  }
1400
- .py-md {
1401
- padding-block: var(--spacing-md);
1525
+ .py-\[var\(--deframe-widget-size-padding-y-xs\)\] {
1526
+ padding-block: var(--deframe-widget-size-padding-y-xs);
1402
1527
  }
1403
- .pt-2 {
1404
- padding-top: calc(var(--spacing) * 2);
1528
+ .py-\[var\(--deframe-widget-size-padding-y-xxl\)\] {
1529
+ padding-block: var(--deframe-widget-size-padding-y-xxl);
1405
1530
  }
1406
- .pt-6 {
1407
- padding-top: calc(var(--spacing) * 6);
1531
+ .pt-\[var\(--deframe-widget-size-padding-y-lg\)\] {
1532
+ padding-top: var(--deframe-widget-size-padding-y-lg);
1408
1533
  }
1409
- .pt-16 {
1410
- padding-top: calc(var(--spacing) * 16);
1534
+ .pt-\[var\(--deframe-widget-size-padding-y-md\)\] {
1535
+ padding-top: var(--deframe-widget-size-padding-y-md);
1411
1536
  }
1412
- .pt-lg {
1413
- padding-top: var(--spacing-lg);
1537
+ .pt-\[var\(--deframe-widget-size-padding-y-none\)\] {
1538
+ padding-top: var(--deframe-widget-size-padding-y-none);
1414
1539
  }
1415
- .pt-md {
1416
- padding-top: var(--spacing-md);
1540
+ .pt-\[var\(--deframe-widget-size-padding-y-sm\)\] {
1541
+ padding-top: var(--deframe-widget-size-padding-y-sm);
1417
1542
  }
1418
- .pt-sm {
1419
- padding-top: var(--spacing-sm);
1543
+ .pt-\[var\(--deframe-widget-size-padding-y-xs\)\] {
1544
+ padding-top: var(--deframe-widget-size-padding-y-xs);
1420
1545
  }
1421
- .pr-2 {
1422
- padding-right: calc(var(--spacing) * 2);
1546
+ .pt-\[var\(--deframe-widget-size-padding-y-xxl\)\] {
1547
+ padding-top: var(--deframe-widget-size-padding-y-xxl);
1423
1548
  }
1424
- .pr-6 {
1425
- padding-right: calc(var(--spacing) * 6);
1549
+ .pr-\[10px\] {
1550
+ padding-right: 10px;
1426
1551
  }
1427
- .pr-12 {
1428
- padding-right: calc(var(--spacing) * 12);
1552
+ .pr-\[14px\] {
1553
+ padding-right: 14px;
1429
1554
  }
1430
- .pr-md {
1431
- padding-right: var(--spacing-md);
1555
+ .pr-\[var\(--deframe-widget-size-padding-x-md\)\] {
1556
+ padding-right: var(--deframe-widget-size-padding-x-md);
1557
+ }
1558
+ .pr-\[var\(--deframe-widget-size-padding-x-sm\)\] {
1559
+ padding-right: var(--deframe-widget-size-padding-x-sm);
1560
+ }
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);
1432
1566
  }
1433
1567
  .pb-2 {
1434
1568
  padding-bottom: calc(var(--spacing) * 2);
1435
1569
  }
1436
- .pb-3 {
1437
- padding-bottom: calc(var(--spacing) * 3);
1570
+ .pb-\[10px\] {
1571
+ padding-bottom: 10px;
1572
+ }
1573
+ .pb-\[14px\] {
1574
+ padding-bottom: 14px;
1438
1575
  }
1439
- .pb-4 {
1440
- 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);
1441
1578
  }
1442
- .pb-24 {
1443
- 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);
1444
1581
  }
1445
- .pb-md {
1446
- padding-bottom: var(--spacing-md);
1582
+ .pb-\[var\(--deframe-widget-size-padding-y-xs\)\] {
1583
+ padding-bottom: var(--deframe-widget-size-padding-y-xs);
1447
1584
  }
1448
- .pb-sm {
1449
- padding-bottom: var(--spacing-sm);
1585
+ .pb-\[var\(--deframe-widget-size-padding-y-xxl\)\] {
1586
+ padding-bottom: var(--deframe-widget-size-padding-y-xxl);
1450
1587
  }
1451
- .pl-2 {
1452
- padding-left: calc(var(--spacing) * 2);
1588
+ .pl-\[7px\] {
1589
+ padding-left: 7px;
1453
1590
  }
1454
- .pl-4 {
1455
- padding-left: calc(var(--spacing) * 4);
1591
+ .pl-\[14px\] {
1592
+ padding-left: 14px;
1456
1593
  }
1457
- .pl-10 {
1458
- padding-left: calc(var(--spacing) * 10);
1594
+ .pl-\[var\(--deframe-widget-size-padding-x-md\)\] {
1595
+ padding-left: var(--deframe-widget-size-padding-x-md);
1596
+ }
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);
1459
1602
  }
1460
1603
  .text-center {
1461
1604
  text-align: center;
@@ -1466,77 +1609,33 @@
1466
1609
  .text-right {
1467
1610
  text-align: right;
1468
1611
  }
1469
- .\[font-family\:var\(--deframe-widget-font-family-primary\)\] {
1470
- font-family: var(--deframe-widget-font-family-primary);
1471
- }
1472
- .font-mono {
1473
- font-family: var(--font-mono);
1474
- }
1475
- .text-2xl {
1476
- font-size: var(--text-2xl);
1477
- line-height: var(--tw-leading, var(--text-2xl--line-height));
1612
+ .\[font-family\:inherit\] {
1613
+ font-family: inherit;
1478
1614
  }
1479
- .text-3xl {
1480
- font-size: var(--text-3xl);
1481
- line-height: var(--tw-leading, var(--text-3xl--line-height));
1615
+ .\[font-family\:var\(--deframe-widget-font-family\)\] {
1616
+ font-family: var(--deframe-widget-font-family);
1482
1617
  }
1483
- .text-5xl {
1484
- font-size: var(--text-5xl);
1485
- line-height: var(--tw-leading, var(--text-5xl--line-height));
1486
- }
1487
- .text-6xl {
1488
- font-size: var(--text-6xl);
1489
- line-height: var(--tw-leading, var(--text-6xl--line-height));
1490
- }
1491
- .text-base {
1492
- font-size: var(--text-base);
1493
- line-height: var(--tw-leading, var(--text-base--line-height));
1618
+ .font-\[inherit\] {
1619
+ font-family: inherit;
1494
1620
  }
1495
1621
  .text-lg {
1496
1622
  font-size: var(--text-lg);
1497
1623
  line-height: var(--tw-leading, var(--text-lg--line-height));
1498
1624
  }
1499
- .text-sm {
1500
- font-size: var(--text-sm);
1501
- line-height: var(--tw-leading, var(--text-sm--line-height));
1625
+ .\!text-\[14px\] {
1626
+ font-size: 14px !important;
1502
1627
  }
1503
- .text-xl {
1504
- font-size: var(--text-xl);
1505
- line-height: var(--tw-leading, var(--text-xl--line-height));
1628
+ .\!text-\[21px\] {
1629
+ font-size: 21px !important;
1506
1630
  }
1507
- .text-xs {
1508
- font-size: var(--text-xs);
1509
- line-height: var(--tw-leading, var(--text-xs--line-height));
1631
+ .\[font-size\:var\(--deframe-widget-font-size-lg\)\] {
1632
+ font-size: var(--deframe-widget-font-size-lg);
1510
1633
  }
1511
- .\[font-size\:var\(--deframe-widget-font-size-h-large\)\] {
1512
- font-size: var(--deframe-widget-font-size-h-large);
1634
+ .\[font-size\:var\(--deframe-widget-font-size-md\)\] {
1635
+ font-size: var(--deframe-widget-font-size-md);
1513
1636
  }
1514
- .\[font-size\:var\(--deframe-widget-font-size-h1\)\] {
1515
- font-size: var(--deframe-widget-font-size-h1);
1516
- }
1517
- .\[font-size\:var\(--deframe-widget-font-size-h2\)\] {
1518
- font-size: var(--deframe-widget-font-size-h2);
1519
- }
1520
- .\[font-size\:var\(--deframe-widget-font-size-h3\)\] {
1521
- font-size: var(--deframe-widget-font-size-h3);
1522
- }
1523
- .\[font-size\:var\(--deframe-widget-font-size-h4\)\] {
1524
- font-size: var(--deframe-widget-font-size-h4);
1525
- }
1526
- .\[font-size\:var\(--deframe-widget-font-size-h5\)\] {
1527
- font-size: var(--deframe-widget-font-size-h5);
1528
- }
1529
- .\[font-size\:var\(--deframe-widget-font-size-lg\)\] {
1530
- font-size: var(--deframe-widget-font-size-lg);
1531
- }
1532
- .\[font-size\:var\(--deframe-widget-font-size-md\)\] {
1533
- font-size: var(--deframe-widget-font-size-md);
1534
- }
1535
- .\[font-size\:var\(--deframe-widget-font-size-sm\)\] {
1536
- font-size: var(--deframe-widget-font-size-sm);
1537
- }
1538
- .\[font-size\:var\(--deframe-widget-font-size-text-medium\)\] {
1539
- font-size: var(--deframe-widget-font-size-text-medium);
1637
+ .\[font-size\:var\(--deframe-widget-font-size-sm\)\] {
1638
+ font-size: var(--deframe-widget-font-size-sm);
1540
1639
  }
1541
1640
  .\[font-size\:var\(--deframe-widget-font-size-xl\)\] {
1542
1641
  font-size: var(--deframe-widget-font-size-xl);
@@ -1565,22 +1664,82 @@
1565
1664
  .text-\[15px\] {
1566
1665
  font-size: 15px;
1567
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
+ }
1568
1691
  .leading-4 {
1569
1692
  --tw-leading: calc(var(--spacing) * 4);
1570
1693
  line-height: calc(var(--spacing) * 4);
1571
1694
  }
1572
- .leading-5 {
1573
- --tw-leading: calc(var(--spacing) * 5);
1574
- 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;
1575
1718
  }
1576
1719
  .leading-\[140\%\] {
1577
1720
  --tw-leading: 140%;
1578
1721
  line-height: 140%;
1579
1722
  }
1723
+ .leading-none {
1724
+ --tw-leading: 1;
1725
+ line-height: 1;
1726
+ }
1580
1727
  .leading-normal {
1581
1728
  --tw-leading: var(--leading-normal);
1582
1729
  line-height: var(--leading-normal);
1583
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
+ }
1584
1743
  .\[line-height\:var\(--deframe-widget-font-leading-lg\)\] {
1585
1744
  line-height: var(--deframe-widget-font-leading-lg);
1586
1745
  }
@@ -1590,29 +1749,18 @@
1590
1749
  .\[line-height\:var\(--deframe-widget-font-leading-sm\)\] {
1591
1750
  line-height: var(--deframe-widget-font-leading-sm);
1592
1751
  }
1593
- .font-\[var\(--deframe-widget-font-family-primary\)\] {
1594
- --tw-font-weight: var(--deframe-widget-font-family-primary);
1595
- font-weight: var(--deframe-widget-font-family-primary);
1752
+ .\[line-height\:var\(--deframe-widget-font-leading-xl\)\] {
1753
+ line-height: var(--deframe-widget-font-leading-xl);
1596
1754
  }
1597
- .font-bold {
1598
- --tw-font-weight: var(--font-weight-bold);
1599
- font-weight: var(--font-weight-bold);
1755
+ .\[line-height\:var\(--deframe-widget-font-leading-xs\)\] {
1756
+ line-height: var(--deframe-widget-font-leading-xs);
1600
1757
  }
1601
- .font-extrabold {
1602
- --tw-font-weight: var(--font-weight-extrabold);
1603
- font-weight: var(--font-weight-extrabold);
1758
+ .\[line-height\:var\(--deframe-widget-font-leading-xxl\)\] {
1759
+ line-height: var(--deframe-widget-font-leading-xxl);
1604
1760
  }
1605
- .font-medium {
1606
- --tw-font-weight: var(--font-weight-medium);
1607
- font-weight: var(--font-weight-medium);
1608
- }
1609
- .font-normal {
1610
- --tw-font-weight: var(--font-weight-normal);
1611
- font-weight: var(--font-weight-normal);
1612
- }
1613
- .font-semibold {
1614
- --tw-font-weight: var(--font-weight-semibold);
1615
- 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);
1616
1764
  }
1617
1765
  .\[font-weight\:var\(--deframe-widget-font-weight-bold\)\] {
1618
1766
  font-weight: var(--deframe-widget-font-weight-bold);
@@ -1629,10 +1777,22 @@
1629
1777
  .\[font-weight\:var\(--deframe-widget-font-weight-semibold\)\] {
1630
1778
  font-weight: var(--deframe-widget-font-weight-semibold);
1631
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
+ }
1632
1788
  .tracking-\[0\.07em\] {
1633
1789
  --tw-tracking: 0.07em;
1634
1790
  letter-spacing: 0.07em;
1635
1791
  }
1792
+ .tracking-\[0\.08em\] {
1793
+ --tw-tracking: 0.08em;
1794
+ letter-spacing: 0.08em;
1795
+ }
1636
1796
  .tracking-wide {
1637
1797
  --tw-tracking: var(--tracking-wide);
1638
1798
  letter-spacing: var(--tracking-wide);
@@ -1643,6 +1803,9 @@
1643
1803
  .whitespace-nowrap {
1644
1804
  white-space: nowrap;
1645
1805
  }
1806
+ .text-\(--deframe-widget-color-text-secondary\) {
1807
+ color: var(--deframe-widget-color-text-secondary);
1808
+ }
1646
1809
  .text-\[\#0A0A0A\] {
1647
1810
  color: #0A0A0A;
1648
1811
  }
@@ -1652,47 +1815,62 @@
1652
1815
  .text-\[\#252050\] {
1653
1816
  color: #252050;
1654
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
+ }
1655
1827
  .text-\[color\:var\(--deframe-widget-color-brand-secondary\)\] {
1656
1828
  color: var(--deframe-widget-color-brand-secondary);
1657
1829
  }
1658
1830
  .text-\[color\:var\(--deframe-widget-color-brand-tertiary\)\] {
1659
1831
  color: var(--deframe-widget-color-brand-tertiary);
1660
1832
  }
1661
- .text-\[color\:var\(--deframe-widget-color-text-primary\)\] {
1662
- color: var(--deframe-widget-color-text-primary);
1833
+ .text-\[color\:var\(--deframe-widget-color-placeholder-primary\)\] {
1834
+ color: var(--deframe-widget-color-placeholder-primary);
1663
1835
  }
1664
- .text-\[color\:var\(--deframe-widget-color-text-secondary-disabled\)\] {
1665
- 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);
1666
1838
  }
1667
- .text-\[color\:var\(--deframe-widget-color-text-tertiary-disabled\)\] {
1668
- 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);
1669
1841
  }
1670
- .text-\[var\(--color-text-highlight\,\#7C3AED\)\] {
1671
- color: var(--color-text-highlight,#7C3AED);
1842
+ .text-\[color\:var\(--deframe-widget-color-state-success\)\] {
1843
+ color: var(--deframe-widget-color-state-success);
1844
+ }
1845
+ .text-\[color\:var\(--deframe-widget-color-state-warning\)\] {
1846
+ color: var(--deframe-widget-color-state-warning);
1847
+ }
1848
+ .text-\[color\:var\(--deframe-widget-color-text-primary\)\] {
1849
+ color: var(--deframe-widget-color-text-primary);
1672
1850
  }
1673
- .text-\[var\(--color-text-primary\,\#fff\)\] {
1674
- color: var(--color-text-primary,#fff);
1851
+ .text-\[color\:var\(--deframe-widget-color-text-primary-dark\)\] {
1852
+ color: var(--deframe-widget-color-text-primary-dark);
1675
1853
  }
1676
- .text-\[var\(--color-text-secondary\,\#999\)\] {
1677
- color: var(--color-text-secondary,#999);
1854
+ .text-\[color\:var\(--deframe-widget-color-text-primary-disabled\)\] {
1855
+ color: var(--deframe-widget-color-text-primary-disabled);
1678
1856
  }
1679
- .text-\[var\(--color-text-tertiary\,\#888\)\] {
1680
- color: var(--color-text-tertiary,#888);
1857
+ .text-\[color\:var\(--deframe-widget-color-text-secondary\)\] {
1858
+ color: var(--deframe-widget-color-text-secondary);
1681
1859
  }
1682
- .text-\[var\(--deframe-widget-color-content-inverse\)\] {
1683
- color: var(--deframe-widget-color-content-inverse);
1860
+ .text-\[color\:var\(--deframe-widget-color-text-secondary-disabled\)\] {
1861
+ color: var(--deframe-widget-color-text-secondary-disabled);
1684
1862
  }
1685
- .text-\[var\(--deframe-widget-color-content-primary\)\] {
1686
- color: var(--deframe-widget-color-content-primary);
1863
+ .text-\[color\:var\(--deframe-widget-color-text-tertiary\)\] {
1864
+ color: var(--deframe-widget-color-text-tertiary);
1687
1865
  }
1688
- .text-\[var\(--deframe-widget-color-content-secondary\)\] {
1689
- color: var(--deframe-widget-color-content-secondary);
1866
+ .text-\[color\:var\(--deframe-widget-color-text-tertiary-disabled\)\] {
1867
+ color: var(--deframe-widget-color-text-tertiary-disabled);
1690
1868
  }
1691
- .text-\[var\(--deframe-widget-color-link\)\] {
1692
- color: var(--deframe-widget-color-link);
1869
+ .text-\[font-size\:var\(--deframe-widget-font-size-sm\)\] {
1870
+ color: var(--deframe-widget-font-size-sm);
1693
1871
  }
1694
- .text-\[var\(--deframe-widget-color-link-disabled\)\] {
1695
- color: var(--deframe-widget-color-link-disabled);
1872
+ .text-\[var\(--deframe-widget-color-brand-primary-disabled\)\] {
1873
+ color: var(--deframe-widget-color-brand-primary-disabled);
1696
1874
  }
1697
1875
  .text-\[var\(--deframe-widget-color-state-error\)\] {
1698
1876
  color: var(--deframe-widget-color-state-error);
@@ -1715,9 +1893,6 @@
1715
1893
  .text-\[var\(--deframe-widget-color-text-secondary\)\] {
1716
1894
  color: var(--deframe-widget-color-text-secondary);
1717
1895
  }
1718
- .text-bg-default {
1719
- color: var(--color-bg-default);
1720
- }
1721
1896
  .text-blue-100 {
1722
1897
  color: var(--color-blue-100);
1723
1898
  }
@@ -1727,21 +1902,9 @@
1727
1902
  .text-blue-500 {
1728
1903
  color: var(--color-blue-500);
1729
1904
  }
1730
- .text-brand-primary {
1731
- color: var(--color-brand-primary);
1732
- }
1733
1905
  .text-gray-200 {
1734
1906
  color: var(--color-gray-200);
1735
1907
  }
1736
- .text-gray-300 {
1737
- color: var(--color-gray-300);
1738
- }
1739
- .text-gray-400 {
1740
- color: var(--color-gray-400);
1741
- }
1742
- .text-gray-500 {
1743
- color: var(--color-gray-500);
1744
- }
1745
1908
  .text-gray-600 {
1746
1909
  color: var(--color-gray-600);
1747
1910
  }
@@ -1766,33 +1929,6 @@
1766
1929
  .text-red-500 {
1767
1930
  color: var(--color-red-500);
1768
1931
  }
1769
- .text-state-error {
1770
- color: var(--color-state-error);
1771
- }
1772
- .text-state-success {
1773
- color: var(--color-state-success);
1774
- }
1775
- .text-state-warning {
1776
- color: var(--color-state-warning);
1777
- }
1778
- .text-text-disabled {
1779
- color: var(--color-text-disabled);
1780
- }
1781
- .text-text-inverse {
1782
- color: var(--color-text-inverse);
1783
- }
1784
- .text-text-primary {
1785
- color: var(--color-text-primary);
1786
- }
1787
- .text-text-secondary {
1788
- color: var(--color-text-secondary);
1789
- }
1790
- .text-text-tertiary {
1791
- color: var(--color-text-tertiary);
1792
- }
1793
- .text-white {
1794
- color: var(--color-white);
1795
- }
1796
1932
  .text-yellow-800 {
1797
1933
  color: var(--color-yellow-800);
1798
1934
  }
@@ -1836,20 +1972,33 @@
1836
1972
  .opacity-95 {
1837
1973
  opacity: 95%;
1838
1974
  }
1839
- .shadow-2xl {
1840
- --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
+ }
1841
1984
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1842
1985
  }
1843
- .shadow-lg {
1844
- --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
+ }
1845
1991
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1846
1992
  }
1847
- .shadow-md {
1848
- --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
+ }
1849
1998
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1850
1999
  }
1851
2000
  .shadow-sm {
1852
- --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));
1853
2002
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1854
2003
  }
1855
2004
  .ring {
@@ -1867,14 +2016,14 @@
1867
2016
  .outline-offset-\[-1px\] {
1868
2017
  outline-offset: -1px;
1869
2018
  }
1870
- .outline-state-error {
1871
- outline-color: var(--color-state-error);
2019
+ .outline-\[color\:var\(--deframe-widget-color-state-error\)\] {
2020
+ outline-color: var(--deframe-widget-color-state-error);
1872
2021
  }
1873
- .outline-state-success {
1874
- outline-color: var(--color-state-success);
2022
+ .outline-\[color\:var\(--deframe-widget-color-state-success\)\] {
2023
+ outline-color: var(--deframe-widget-color-state-success);
1875
2024
  }
1876
- .outline-state-warning {
1877
- outline-color: var(--color-state-warning);
2025
+ .outline-\[color\:var\(--deframe-widget-color-state-warning\)\] {
2026
+ outline-color: var(--deframe-widget-color-state-warning);
1878
2027
  }
1879
2028
  .blur-\[160px\] {
1880
2029
  --tw-blur: blur(160px);
@@ -1883,6 +2032,11 @@
1883
2032
  .filter {
1884
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,);
1885
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
+ }
1886
2040
  .backdrop-blur-sm {
1887
2041
  --tw-backdrop-blur: blur(var(--blur-sm));
1888
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,);
@@ -1893,6 +2047,41 @@
1893
2047
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1894
2048
  transition-duration: var(--tw-duration, var(--default-transition-duration));
1895
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
+ }
1896
2085
  .transition-all {
1897
2086
  transition-property: all;
1898
2087
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1908,16 +2097,15 @@
1908
2097
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1909
2098
  transition-duration: var(--tw-duration, var(--default-transition-duration));
1910
2099
  }
1911
- .transition-shadow {
1912
- transition-property: box-shadow;
1913
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1914
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1915
- }
1916
2100
  .transition-transform {
1917
2101
  transition-property: transform, translate, scale, rotate;
1918
2102
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1919
2103
  transition-duration: var(--tw-duration, var(--default-transition-duration));
1920
2104
  }
2105
+ .duration-150 {
2106
+ --tw-duration: 150ms;
2107
+ transition-duration: 150ms;
2108
+ }
1921
2109
  .duration-200 {
1922
2110
  --tw-duration: 200ms;
1923
2111
  transition-duration: 200ms;
@@ -1934,24 +2122,47 @@
1934
2122
  --tw-outline-style: none;
1935
2123
  outline-style: none;
1936
2124
  }
2125
+ .\[scrollbar-width\:none\] {
2126
+ scrollbar-width: none;
2127
+ }
1937
2128
  .group-open\:rotate-180 {
1938
2129
  &:is(:where(.group):is([open], :popover-open, :open) *) {
1939
2130
  rotate: 180deg;
1940
2131
  }
1941
2132
  }
1942
- .placeholder\:text-text-disabled {
2133
+ .group-hover\:translate-x-0 {
2134
+ &:is(:where(.group):hover *) {
2135
+ @media (hover: hover) {
2136
+ --tw-translate-x: calc(var(--spacing) * 0);
2137
+ translate: var(--tw-translate-x) var(--tw-translate-y);
2138
+ }
2139
+ }
2140
+ }
2141
+ .group-hover\:opacity-100 {
2142
+ &:is(:where(.group):hover *) {
2143
+ @media (hover: hover) {
2144
+ opacity: 100%;
2145
+ }
2146
+ }
2147
+ }
2148
+ .placeholder\:text-\[color\:var\(--deframe-widget-color-text-primary-disabled\)\] {
1943
2149
  &::placeholder {
1944
- color: var(--color-text-disabled);
2150
+ color: var(--deframe-widget-color-text-primary-disabled);
1945
2151
  }
1946
2152
  }
1947
- .hover\:border-\[var\(--color-border-strong\,\#555\)\] {
2153
+ .placeholder\:text-\[color\:var\(--deframe-widget-color-text-tertiary\)\] {
2154
+ &::placeholder {
2155
+ color: var(--deframe-widget-color-text-tertiary);
2156
+ }
2157
+ }
2158
+ .hover\:border-\[color\:var\(--deframe-widget-color-border-primary\)\] {
1948
2159
  &:hover {
1949
2160
  @media (hover: hover) {
1950
- border-color: var(--color-border-strong,#555);
2161
+ border-color: var(--deframe-widget-color-border-primary);
1951
2162
  }
1952
2163
  }
1953
2164
  }
1954
- .hover\:border-\[var\(--deframe-widget-color-border-secondary\)\] {
2165
+ .hover\:border-\[color\:var\(--deframe-widget-color-border-secondary\)\] {
1955
2166
  &:hover {
1956
2167
  @media (hover: hover) {
1957
2168
  border-color: var(--deframe-widget-color-border-secondary);
@@ -1965,97 +2176,109 @@
1965
2176
  }
1966
2177
  }
1967
2178
  }
1968
- .hover\:border-border-default {
2179
+ .hover\:bg-\[\#252525\] {
1969
2180
  &:hover {
1970
2181
  @media (hover: hover) {
1971
- border-color: var(--color-border-default);
2182
+ background-color: #252525;
1972
2183
  }
1973
2184
  }
1974
2185
  }
1975
- .hover\:border-border-strong {
2186
+ .hover\:bg-\[\#333333\] {
1976
2187
  &:hover {
1977
2188
  @media (hover: hover) {
1978
- border-color: var(--color-border-strong);
2189
+ background-color: #333333;
1979
2190
  }
1980
2191
  }
1981
2192
  }
1982
- .hover\:border-gray-600 {
2193
+ .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-secondary\)_72\%\,transparent\)\] {
1983
2194
  &:hover {
1984
2195
  @media (hover: hover) {
1985
- border-color: var(--color-gray-600);
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
+ }
1986
2200
  }
1987
2201
  }
1988
2202
  }
1989
- .hover\:bg-\[\#252525\] {
2203
+ .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-tertiary\)_84\%\,transparent\)\] {
1990
2204
  &:hover {
1991
2205
  @media (hover: hover) {
1992
- background-color: #252525;
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
+ }
1993
2210
  }
1994
2211
  }
1995
2212
  }
1996
- .hover\:bg-\[\#333333\] {
2213
+ .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-tertiary\)_92\%\,transparent\)\] {
1997
2214
  &:hover {
1998
2215
  @media (hover: hover) {
1999
- background-color: #333333;
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
+ }
2000
2220
  }
2001
2221
  }
2002
2222
  }
2003
- .hover\:bg-\[var\(--deframe-widget-color-bg-tertiary\)\] {
2223
+ .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-brand-primary\)_12\%\,transparent\)\] {
2004
2224
  &:hover {
2005
2225
  @media (hover: hover) {
2006
- background-color: var(--deframe-widget-color-bg-tertiary);
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
+ }
2007
2230
  }
2008
2231
  }
2009
2232
  }
2010
- .hover\:bg-blue-700 {
2233
+ .hover\:bg-\[rgba\(255\,255\,255\,0\.06\)\] {
2011
2234
  &:hover {
2012
2235
  @media (hover: hover) {
2013
- background-color: var(--color-blue-700);
2236
+ background-color: rgba(255,255,255,0.06);
2014
2237
  }
2015
2238
  }
2016
2239
  }
2017
- .hover\:bg-gray-800 {
2240
+ .hover\:bg-\[var\(--deframe-widget-color-bg-primary-dark\)\]\/10 {
2018
2241
  &:hover {
2019
2242
  @media (hover: hover) {
2020
- background-color: var(--color-gray-800);
2243
+ background-color: var(--deframe-widget-color-bg-primary-dark);
2244
+ @supports (color: color-mix(in lab, red, red)) {
2245
+ background-color: color-mix(in oklab, var(--deframe-widget-color-bg-primary-dark) 10%, transparent);
2246
+ }
2021
2247
  }
2022
2248
  }
2023
2249
  }
2024
- .hover\:bg-purple-700 {
2250
+ .hover\:bg-\[var\(--deframe-widget-color-bg-secondary\)\] {
2025
2251
  &:hover {
2026
2252
  @media (hover: hover) {
2027
- background-color: var(--color-purple-700);
2253
+ background-color: var(--deframe-widget-color-bg-secondary);
2028
2254
  }
2029
2255
  }
2030
2256
  }
2031
- .hover\:bg-white\/10 {
2257
+ .hover\:bg-blue-700 {
2032
2258
  &:hover {
2033
2259
  @media (hover: hover) {
2034
- background-color: color-mix(in srgb, #fff 10%, transparent);
2035
- @supports (color: color-mix(in lab, red, red)) {
2036
- background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
2037
- }
2260
+ background-color: var(--color-blue-700);
2038
2261
  }
2039
2262
  }
2040
2263
  }
2041
- .hover\:text-brand-primary {
2264
+ .hover\:bg-purple-700 {
2042
2265
  &:hover {
2043
2266
  @media (hover: hover) {
2044
- color: var(--color-brand-primary);
2267
+ background-color: var(--color-purple-700);
2045
2268
  }
2046
2269
  }
2047
2270
  }
2048
- .hover\:text-text-primary {
2271
+ .hover\:text-\[color\:var\(--deframe-widget-color-brand-primary\)\] {
2049
2272
  &:hover {
2050
2273
  @media (hover: hover) {
2051
- color: var(--color-text-primary);
2274
+ color: var(--deframe-widget-color-brand-primary);
2052
2275
  }
2053
2276
  }
2054
2277
  }
2055
- .hover\:text-white {
2278
+ .hover\:text-\[color\:var\(--deframe-widget-color-text-primary\)\] {
2056
2279
  &:hover {
2057
2280
  @media (hover: hover) {
2058
- color: var(--color-white);
2281
+ color: var(--deframe-widget-color-text-primary);
2059
2282
  }
2060
2283
  }
2061
2284
  }
@@ -2080,22 +2303,20 @@
2080
2303
  }
2081
2304
  }
2082
2305
  }
2083
- .hover\:shadow-md {
2306
+ .hover\:shadow-\[0_2px_8px_color-mix\(in_srgb\,var\(--deframe-widget-color-text-primary\)_18\%\,transparent\)\] {
2084
2307
  &:hover {
2085
2308
  @media (hover: hover) {
2086
- --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
+ }
2087
2313
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2088
2314
  }
2089
2315
  }
2090
2316
  }
2091
- .focus\:border-\[var\(--color-brand-primary\,\#7C3AED\)\] {
2317
+ .focus\:border-\[color\:var\(--deframe-widget-color-brand-primary\)\] {
2092
2318
  &:focus {
2093
- border-color: var(--color-brand-primary,#7C3AED);
2094
- }
2095
- }
2096
- .focus\:opacity-85 {
2097
- &:focus {
2098
- opacity: 85%;
2319
+ border-color: var(--deframe-widget-color-brand-primary);
2099
2320
  }
2100
2321
  }
2101
2322
  .focus\:ring-2 {
@@ -2104,17 +2325,9 @@
2104
2325
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2105
2326
  }
2106
2327
  }
2107
- .focus\:ring-\[var\(--color-brand-primary\,\#7C3AED\)\]\/50 {
2328
+ .focus\:ring-\[color\:var\(--deframe-widget-color-brand-primary\)\] {
2108
2329
  &:focus {
2109
- --tw-ring-color: var(--color-brand-primary,#7C3AED);
2110
- @supports (color: color-mix(in lab, red, red)) {
2111
- --tw-ring-color: color-mix(in oklab, var(--color-brand-primary,#7C3AED) 50%, transparent);
2112
- }
2113
- }
2114
- }
2115
- .focus\:ring-brand-primary {
2116
- &:focus {
2117
- --tw-ring-color: var(--color-brand-primary);
2330
+ --tw-ring-color: var(--deframe-widget-color-brand-primary);
2118
2331
  }
2119
2332
  }
2120
2333
  .focus\:outline-none {
@@ -2129,17 +2342,22 @@
2129
2342
  outline-style: none;
2130
2343
  }
2131
2344
  }
2132
- .active\:bg-white\/20 {
2345
+ .active\:scale-\[0\.99\] {
2133
2346
  &:active {
2134
- background-color: color-mix(in srgb, #fff 20%, transparent);
2135
- @supports (color: color-mix(in lab, red, red)) {
2136
- background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
2137
- }
2347
+ scale: 0.99;
2348
+ }
2349
+ }
2350
+ .active\:scale-\[0\.995\] {
2351
+ &:active {
2352
+ scale: 0.995;
2138
2353
  }
2139
2354
  }
2140
- .active\:opacity-85 {
2355
+ .active\:bg-\[var\(--deframe-widget-color-bg-primary-dark\)\]\/20 {
2141
2356
  &:active {
2142
- opacity: 85%;
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
+ }
2143
2361
  }
2144
2362
  }
2145
2363
  .disabled\:pointer-events-none {
@@ -2152,218 +2370,37 @@
2152
2370
  opacity: 50%;
2153
2371
  }
2154
2372
  }
2155
- .md\:text-base {
2373
+ .md\:\[font-size\:var\(--deframe-widget-font-size-md\)\] {
2156
2374
  @media (width >= 48rem) {
2157
- font-size: var(--text-base);
2158
- line-height: var(--tw-leading, var(--text-base--line-height));
2375
+ font-size: var(--deframe-widget-font-size-md);
2159
2376
  }
2160
2377
  }
2161
- .lg\:\!bg-bg-raised {
2378
+ .lg\:\!bg-\[var\(--deframe-widget-color-bg-secondary\)\] {
2162
2379
  @media (width >= 64rem) {
2163
- background-color: var(--color-bg-raised) !important;
2380
+ background-color: var(--deframe-widget-color-bg-secondary) !important;
2164
2381
  }
2165
2382
  }
2166
- .lg\:bg-bg-subtle {
2383
+ .lg\:bg-\[var\(--deframe-widget-color-bg-secondary\)\] {
2167
2384
  @media (width >= 64rem) {
2168
- background-color: var(--color-bg-subtle);
2169
- }
2170
- }
2171
- .dark\:border-border-default-dark {
2172
- @media (prefers-color-scheme: dark) {
2173
- border-color: var(--color-border-default-dark);
2174
- }
2175
- }
2176
- .dark\:border-border-subtle-dark {
2177
- @media (prefers-color-scheme: dark) {
2178
- border-color: var(--color-border-subtle-dark);
2179
- }
2180
- }
2181
- .dark\:bg-bg-default-dark {
2182
- @media (prefers-color-scheme: dark) {
2183
- background-color: var(--color-bg-default-dark);
2184
- }
2185
- }
2186
- .dark\:bg-bg-muted-dark {
2187
- @media (prefers-color-scheme: dark) {
2188
- background-color: var(--color-bg-muted-dark);
2189
- }
2190
- }
2191
- .dark\:bg-bg-raised-dark {
2192
- @media (prefers-color-scheme: dark) {
2193
- background-color: var(--color-bg-raised-dark);
2194
- }
2195
- }
2196
- .dark\:bg-bg-subtle-dark {
2197
- @media (prefers-color-scheme: dark) {
2198
- background-color: var(--color-bg-subtle-dark);
2199
- }
2200
- }
2201
- .dark\:bg-border-default-dark {
2202
- @media (prefers-color-scheme: dark) {
2203
- background-color: var(--color-border-default-dark);
2204
- }
2205
- }
2206
- .dark\:via-gray-600\/30 {
2207
- @media (prefers-color-scheme: dark) {
2208
- --tw-gradient-via: color-mix(in srgb, oklch(44.6% 0.03 256.802) 30%, transparent);
2209
- @supports (color: color-mix(in lab, red, red)) {
2210
- --tw-gradient-via: color-mix(in oklab, var(--color-gray-600) 30%, transparent);
2211
- }
2212
- --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);
2213
- --tw-gradient-stops: var(--tw-gradient-via-stops);
2214
- }
2215
- }
2216
- .dark\:text-bg-default-dark {
2217
- @media (prefers-color-scheme: dark) {
2218
- color: var(--color-bg-default-dark);
2219
- }
2220
- }
2221
- .dark\:text-brand-primary-dark {
2222
- @media (prefers-color-scheme: dark) {
2223
- color: var(--color-brand-primary-dark);
2224
- }
2225
- }
2226
- .dark\:text-state-error {
2227
- @media (prefers-color-scheme: dark) {
2228
- color: var(--color-state-error);
2229
- }
2230
- }
2231
- .dark\:text-text-disabled-dark {
2232
- @media (prefers-color-scheme: dark) {
2233
- color: var(--color-text-disabled-dark);
2234
- }
2235
- }
2236
- .dark\:text-text-primary-dark {
2237
- @media (prefers-color-scheme: dark) {
2238
- color: var(--color-text-primary-dark);
2239
- }
2240
- }
2241
- .dark\:text-text-secondary-dark {
2242
- @media (prefers-color-scheme: dark) {
2243
- color: var(--color-text-secondary-dark);
2244
- }
2245
- }
2246
- .dark\:text-text-tertiary-dark {
2247
- @media (prefers-color-scheme: dark) {
2248
- color: var(--color-text-tertiary-dark);
2249
- }
2250
- }
2251
- .dark\:placeholder\:text-text-disabled-dark {
2252
- @media (prefers-color-scheme: dark) {
2253
- &::placeholder {
2254
- color: var(--color-text-disabled-dark);
2255
- }
2256
- }
2257
- }
2258
- .dark\:hover\:border-border-default-dark {
2259
- @media (prefers-color-scheme: dark) {
2260
- &:hover {
2261
- @media (hover: hover) {
2262
- border-color: var(--color-border-default-dark);
2263
- }
2264
- }
2385
+ background-color: var(--deframe-widget-color-bg-secondary);
2265
2386
  }
2266
2387
  }
2267
- .dark\:hover\:border-border-strong-dark {
2268
- @media (prefers-color-scheme: dark) {
2269
- &:hover {
2270
- @media (hover: hover) {
2271
- border-color: var(--color-border-strong-dark);
2272
- }
2273
- }
2274
- }
2275
- }
2276
- .dark\:hover\:text-text-primary-dark {
2277
- @media (prefers-color-scheme: dark) {
2278
- &:hover {
2279
- @media (hover: hover) {
2280
- color: var(--color-text-primary-dark);
2281
- }
2282
- }
2283
- }
2284
- }
2285
- .dark\:lg\:\!bg-bg-raised-dark {
2286
- @media (prefers-color-scheme: dark) {
2287
- @media (width >= 64rem) {
2288
- background-color: var(--color-bg-raised-dark) !important;
2289
- }
2290
- }
2291
- }
2292
- .lg\:dark\:\!bg-bg-raised-dark {
2293
- @media (width >= 64rem) {
2294
- @media (prefers-color-scheme: dark) {
2295
- background-color: var(--color-bg-raised-dark) !important;
2296
- }
2297
- }
2298
- }
2299
- .lg\:dark\:bg-bg-subtle-dark {
2300
- @media (width >= 64rem) {
2301
- @media (prefers-color-scheme: dark) {
2302
- background-color: var(--color-bg-subtle-dark);
2303
- }
2304
- }
2305
- }
2306
- }
2307
- @keyframes slide-up {
2308
- 0% {
2309
- transform: translateY(100%);
2310
- }
2311
- 100% {
2312
- transform: translateY(0);
2313
- }
2314
- }
2315
- @keyframes slide-down {
2316
- 0% {
2317
- transform: translateY(0);
2318
- }
2319
- 100% {
2320
- transform: translateY(100%);
2321
- }
2322
- }
2323
- @keyframes fade-in {
2324
- 0% {
2325
- opacity: 0;
2326
- }
2327
- 100% {
2328
- opacity: 1;
2329
- }
2330
- }
2331
- @keyframes fade-out {
2332
- 0% {
2333
- opacity: 1;
2334
- }
2335
- 100% {
2336
- opacity: 0;
2337
- }
2338
- }
2339
- body {
2340
- background: var(--background);
2341
- color: var(--foreground);
2342
- font-family: Arial, Helvetica, sans-serif;
2343
2388
  }
2344
2389
  :root,
2345
2390
  .deframe-widget {
2346
- --deframe-widget-font-family-primary: 'Satoshi', sans-serif;
2347
- --deframe-widget-font-family-secondary: 'Inter', sans-serif;
2348
- --deframe-widget-font-family-tertiary: 'Roboto Mono', monospace;
2349
- --deframe-widget-font-size-xs: 0.6875rem;
2350
- --deframe-widget-font-size-sm: clamp(0.6875rem, 1.8vw, 0.8125rem);
2351
- --deframe-widget-font-size-md: clamp(0.8125rem, 2vw, 0.9375rem);
2352
- --deframe-widget-font-size-lg: clamp(0.9375rem, 2.5vw, 1.125rem);
2353
- --deframe-widget-font-size-xl: clamp(1.0625rem, 2.8vw, 1.25rem);
2354
- --deframe-widget-font-size-xxl: clamp(1.25rem, 3.2vw, 1.5rem);
2355
- --deframe-widget-font-heading-h-large: clamp(4rem, 5vw, 5rem);
2356
- --deframe-widget-font-heading-h1: clamp(3rem, 4.5vw, 4rem);
2357
- --deframe-widget-font-heading-h2: clamp(2.5rem, 4vw, 3rem);
2358
- --deframe-widget-font-heading-h3: clamp(2rem, 3.5vw, 2.5rem);
2359
- --deframe-widget-font-heading-h4: clamp(1.5rem, 3vw, 2rem);
2360
- --deframe-widget-font-heading-h5: clamp(1.25rem, 2.5vw, 1.5rem);
2361
- --deframe-widget-font-leading-xs: clamp(0.75em, 2vw, 0.875em);
2362
- --deframe-widget-font-leading-sm: clamp(0.875em, 2.2vw, 1em);
2363
- --deframe-widget-font-leading-md: clamp(1.0625em, 2.5vw, 1.25em);
2364
- --deframe-widget-font-leading-lg: clamp(1.25em, 3vw, 1.5em);
2365
- --deframe-widget-font-leading-xl: clamp(1.5em, 3.5vw, 1.75em);
2366
- --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;
2367
2404
  --deframe-widget-font-weight-thin: 100;
2368
2405
  --deframe-widget-font-weight-light: 300;
2369
2406
  --deframe-widget-font-weight-regular: 400;
@@ -2371,79 +2408,76 @@ body {
2371
2408
  --deframe-widget-font-weight-semibold: 600;
2372
2409
  --deframe-widget-font-weight-bold: 700;
2373
2410
  --deframe-widget-font-weight-extrabold: 800;
2374
- --deframe-widget-color-text-primary: #323232;
2411
+ --deframe-widget-color-text-primary: #252050;
2375
2412
  --deframe-widget-color-text-primary-dark: #ffffff;
2376
2413
  --deframe-widget-color-text-primary-disabled: #c6c8cc;
2377
- --deframe-widget-color-text-secondary: #c6c8cc;
2378
- --deframe-widget-color-text-secondary-dark: #c6c8cc;
2414
+ --deframe-widget-color-text-secondary: #5c5f66;
2415
+ --deframe-widget-color-text-secondary-dark: #e3e4e8;
2379
2416
  --deframe-widget-color-text-secondary-disabled: #898d95;
2380
2417
  --deframe-widget-color-text-tertiary: #898d95;
2381
- --deframe-widget-color-text-tertiary-dark: #898d95;
2418
+ --deframe-widget-color-text-tertiary-dark: #c6c8cc;
2382
2419
  --deframe-widget-color-text-tertiary-disabled: #5c5f66;
2383
- --deframe-widget-color-link: #405eff;
2384
- --deframe-widget-color-link-dark: #405eff;
2385
- --deframe-widget-color-link-disabled: #6f6e6e;
2386
- --deframe-widget-color-placeholder-primary: #c6c8cc;
2387
- --deframe-widget-color-placeholder-primary-dark: #c6c8cc;
2420
+ --deframe-widget-color-placeholder-primary: #898d95;
2421
+ --deframe-widget-color-placeholder-primary-dark: #e3e4e8;
2388
2422
  --deframe-widget-color-placeholder-primary-disabled: #898d95;
2389
- --deframe-widget-color-placeholder-secondary: #898d95;
2390
- --deframe-widget-color-placeholder-secondary-dark: #898d95;
2423
+ --deframe-widget-color-placeholder-secondary: #c6c8cc;
2424
+ --deframe-widget-color-placeholder-secondary-dark: #99a0ae;
2391
2425
  --deframe-widget-color-placeholder-secondary-disabled: #5c5f66;
2392
2426
  --deframe-widget-color-placeholder-tertiary: #5c5f66;
2393
- --deframe-widget-color-placeholder-tertiary-dark: #5c5f66;
2427
+ --deframe-widget-color-placeholder-tertiary-dark: #525866;
2394
2428
  --deframe-widget-color-placeholder-tertiary-disabled: #3a3a3a;
2395
- --deframe-widget-color-brand-primary: #50d890;
2396
- --deframe-widget-color-brand-primary-dark: #50d890;
2397
- --deframe-widget-color-brand-primary-disabled: #6f6e6e;
2398
- --deframe-widget-color-brand-secondary: #ffd166;
2399
- --deframe-widget-color-brand-secondary-dark: #ffd166;
2400
- --deframe-widget-color-brand-secondary-disabled: #6f6e6e;
2401
- --deframe-widget-color-brand-tertiary: #50d890;
2402
- --deframe-widget-color-brand-tertiary-dark: #50d890;
2403
- --deframe-widget-color-brand-tertiary-disabled: #6f6e6e;
2404
- --deframe-widget-color-bg-primary: #251a15;
2405
- --deframe-widget-color-bg-primary-dark: #251a15;
2406
- --deframe-widget-color-bg-primary-disabled: #373534;
2407
- --deframe-widget-color-bg-secondary: #31231d;
2408
- --deframe-widget-color-bg-secondary-dark: #31231d;
2409
- --deframe-widget-color-bg-secondary-disabled: #1d1410;
2410
- --deframe-widget-color-bg-tertiary: #4f352a;
2411
- --deframe-widget-color-bg-tertiary-dark: #4f352a;
2412
- --deframe-widget-color-bg-tertiary-disabled: #2c1a14;
2413
- --deframe-widget-color-border-primary: #923108;
2414
- --deframe-widget-color-border-primary-dark: #4f352a;
2415
- --deframe-widget-color-border-primary-disabled: #000000;
2416
- --deframe-widget-color-border-secondary: #31231d;
2417
- --deframe-widget-color-border-secondary-dark: #31231d;
2418
- --deframe-widget-color-border-secondary-disabled: #cdcac9;
2419
- --deframe-widget-color-border-tertiary: #251a15;
2420
- --deframe-widget-color-border-tertiary-dark: #251a15;
2421
- --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);
2422
2456
  --deframe-widget-color-state-info: #58b4ff;
2423
- --deframe-widget-color-state-warning: #ffb845;
2457
+ --deframe-widget-color-state-warning: #f6a700;
2424
2458
  --deframe-widget-color-state-error: #ff4d4f;
2425
- --deframe-widget-color-state-success: #50d890;
2459
+ --deframe-widget-color-state-success: #2ba176;
2426
2460
  --deframe-widget-size-padding-x-none: 0;
2427
- --deframe-widget-size-padding-x-xs: 0.25em;
2428
- --deframe-widget-size-padding-x-sm: 0.5em;
2429
- --deframe-widget-size-padding-x-md: clamp(0.625em, 2vw, 1em);
2430
- --deframe-widget-size-padding-x-lg: clamp(1em, 2.5vw, 1.5em);
2431
- --deframe-widget-size-padding-x-xl: clamp(1.25em, 3vw, 2em);
2432
- --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;
2433
2467
  --deframe-widget-size-padding-y-none: 0;
2434
- --deframe-widget-size-padding-y-xs: 0.25em;
2435
- --deframe-widget-size-padding-y-sm: 0.5em;
2436
- --deframe-widget-size-padding-y-md: clamp(0.5em, 1.5vh, 1em);
2437
- --deframe-widget-size-padding-y-lg: clamp(0.875em, 2vh, 1.5em);
2438
- --deframe-widget-size-padding-y-xl: clamp(1em, 2.5vh, 2em);
2439
- --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;
2440
2474
  --deframe-widget-size-gap-none: 0;
2441
- --deframe-widget-size-gap-xs: 0.25em;
2442
- --deframe-widget-size-gap-sm: clamp(0.375em, 1vw, 0.5em);
2443
- --deframe-widget-size-gap-md: clamp(0.625em, 1.5vw, 1em);
2444
- --deframe-widget-size-gap-lg: clamp(1em, 2vw, 1.5em);
2445
- --deframe-widget-size-gap-xl: clamp(1.25em, 2.5vw, 2em);
2446
- --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;
2447
2481
  --deframe-widget-size-border-none: 0;
2448
2482
  --deframe-widget-size-border-xs: 1px;
2449
2483
  --deframe-widget-size-border-sm: 2px;
@@ -2452,29 +2486,157 @@ body {
2452
2486
  --deframe-widget-size-border-xl: 16px;
2453
2487
  --deframe-widget-size-border-xxl: 32px;
2454
2488
  --deframe-widget-size-radius-none: 0;
2455
- --deframe-widget-size-radius-xs: 0.25rem;
2456
- --deframe-widget-size-radius-sm: 0.375rem;
2457
- --deframe-widget-size-radius-md: clamp(0.5rem, 1.8vw, 0.875rem);
2458
- --deframe-widget-size-radius-lg: clamp(0.875rem, 2.5vw, 1.5rem);
2459
- --deframe-widget-size-radius-xl: clamp(1.25rem, 3vw, 2rem);
2460
- --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;
2461
2495
  --deframe-widget-size-radius-full: 9999px;
2462
2496
  }
2463
- .deframe-widget:is(.dark, .cryptocontrol) {
2464
- --color-brand-primary: var(--deframe-brand-primary, var(--color-brand-primary-dark));
2465
- --color-bg-default: var(--deframe-bg-default, var(--color-bg-default-dark));
2466
- --color-bg-subtle: var(--deframe-bg-subtle, var(--color-bg-subtle-dark));
2467
- --color-bg-muted: var(--deframe-bg-muted, var(--color-bg-muted-dark));
2468
- --color-text-primary: var(--deframe-text-primary, var(--color-text-primary-dark));
2469
- --color-text-secondary: var(--deframe-text-secondary, var(--color-text-secondary-dark));
2470
- --color-text-disabled: var(--deframe-text-disabled, var(--color-text-disabled-dark));
2471
- --color-text-inverse: var(--deframe-text-inverse, var(--color-text-inverse-dark));
2472
- --color-border-default: var(--color-border-default-dark);
2473
- --color-border-subtle: var(--color-border-subtle-dark);
2474
- --color-border-strong: var(--color-border-strong-dark);
2475
- }
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,
2476
2531
  .deframe-widget.cryptocontrol {
2477
- --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
+ }
2478
2640
  }
2479
2641
  @property --tw-translate-x {
2480
2642
  syntax: "*";
@@ -2747,6 +2909,11 @@ body {
2747
2909
  syntax: "*";
2748
2910
  inherits: false;
2749
2911
  }
2912
+ @keyframes spin {
2913
+ to {
2914
+ transform: rotate(360deg);
2915
+ }
2916
+ }
2750
2917
  @keyframes bounce {
2751
2918
  0%, 100% {
2752
2919
  transform: translateY(-25%);