@deframe-sdk/components 0.1.17 → 0.1.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -313,6 +313,9 @@
313
313
  .z-\[1\] {
314
314
  z-index: 1;
315
315
  }
316
+ .z-\[9999\] {
317
+ z-index: 9999;
318
+ }
316
319
  .container {
317
320
  width: 100%;
318
321
  @media (width >= 40rem) {
@@ -331,6 +334,9 @@
331
334
  max-width: 96rem;
332
335
  }
333
336
  }
337
+ .m-0 {
338
+ margin: calc(var(--spacing) * 0);
339
+ }
334
340
  .m-\[var\(--deframe-widget-size-gap-none\)\] {
335
341
  margin: var(--deframe-widget-size-gap-none);
336
342
  }
@@ -343,9 +349,15 @@
343
349
  .-my-5 {
344
350
  margin-block: calc(var(--spacing) * -5);
345
351
  }
352
+ .-my-\[16px\] {
353
+ margin-block: calc(16px * -1);
354
+ }
346
355
  .-my-\[var\(--deframe-widget-size-gap-sm\)\] {
347
356
  margin-block: calc(var(--deframe-widget-size-gap-sm) * -1);
348
357
  }
358
+ .my-\[var\(--deframe-widget-size-gap-sm\)\] {
359
+ margin-block: var(--deframe-widget-size-gap-sm);
360
+ }
349
361
  .my-\[var\(--deframe-widget-size-gap-xs\)\] {
350
362
  margin-block: var(--deframe-widget-size-gap-xs);
351
363
  }
@@ -499,9 +511,6 @@
499
511
  .h-24 {
500
512
  height: calc(var(--spacing) * 24);
501
513
  }
502
- .h-32 {
503
- height: calc(var(--spacing) * 32);
504
- }
505
514
  .h-40 {
506
515
  height: calc(var(--spacing) * 40);
507
516
  }
@@ -526,6 +535,12 @@
526
535
  .h-\[12px\] {
527
536
  height: 12px;
528
537
  }
538
+ .h-\[13px\] {
539
+ height: 13px;
540
+ }
541
+ .h-\[14px\] {
542
+ height: 14px;
543
+ }
529
544
  .h-\[15px\] {
530
545
  height: 15px;
531
546
  }
@@ -538,6 +553,9 @@
538
553
  .h-\[20px\] {
539
554
  height: 20px;
540
555
  }
556
+ .h-\[38px\] {
557
+ height: 38px;
558
+ }
541
559
  .h-\[50vh\] {
542
560
  height: 50vh;
543
561
  }
@@ -565,9 +583,6 @@
565
583
  .h-\[300px\] {
566
584
  height: 300px;
567
585
  }
568
- .h-\[420px\] {
569
- height: 420px;
570
- }
571
586
  .h-\[440px\] {
572
587
  height: 440px;
573
588
  }
@@ -577,6 +592,9 @@
577
592
  .h-\[844px\] {
578
593
  height: 844px;
579
594
  }
595
+ .h-\[min\(620px\,calc\(100vh-64px\)\)\] {
596
+ height: min(620px, calc(100vh - 64px));
597
+ }
580
598
  .h-\[var\(--deframe-widget-font-leading-lg\)\] {
581
599
  height: var(--deframe-widget-font-leading-lg);
582
600
  }
@@ -718,6 +736,21 @@
718
736
  .w-\[18px\] {
719
737
  width: 18px;
720
738
  }
739
+ .w-\[36px\] {
740
+ width: 36px;
741
+ }
742
+ .w-\[38px\] {
743
+ width: 38px;
744
+ }
745
+ .w-\[40\%\] {
746
+ width: 40%;
747
+ }
748
+ .w-\[50px\] {
749
+ width: 50px;
750
+ }
751
+ .w-\[60\%\] {
752
+ width: 60%;
753
+ }
721
754
  .w-\[83px\] {
722
755
  width: 83px;
723
756
  }
@@ -754,6 +787,12 @@
754
787
  .w-\[440px\] {
755
788
  width: 440px;
756
789
  }
790
+ .w-\[480px\] {
791
+ width: 480px;
792
+ }
793
+ .w-\[532px\] {
794
+ width: 532px;
795
+ }
757
796
  .w-\[clamp\(18rem\,40vw\,30rem\)\] {
758
797
  width: clamp(18rem, 40vw, 30rem);
759
798
  }
@@ -793,6 +832,9 @@
793
832
  .max-w-\[620px\] {
794
833
  max-width: 620px;
795
834
  }
835
+ .max-w-\[calc\(100\%-32px\)\] {
836
+ max-width: calc(100% - 32px);
837
+ }
796
838
  .max-w-full {
797
839
  max-width: 100%;
798
840
  }
@@ -1152,10 +1194,6 @@
1152
1194
  border-style: var(--tw-border-style);
1153
1195
  border-width: 1px;
1154
1196
  }
1155
- .border-0 {
1156
- border-style: var(--tw-border-style);
1157
- border-width: 0px;
1158
- }
1159
1197
  .border-\[length\:var\(--deframe-widget-size-border-sm\)\] {
1160
1198
  border-style: var(--tw-border-style);
1161
1199
  border-width: var(--deframe-widget-size-border-sm);
@@ -1314,6 +1352,12 @@
1314
1352
  .bg-\[\#2A2A2A\] {
1315
1353
  background-color: #2A2A2A;
1316
1354
  }
1355
+ .bg-\[\#12151C\] {
1356
+ background-color: #12151C;
1357
+ }
1358
+ .bg-\[\#12151c\] {
1359
+ background-color: #12151c;
1360
+ }
1317
1361
  .bg-\[\#ff7a45\] {
1318
1362
  background-color: #ff7a45;
1319
1363
  }
@@ -1884,6 +1928,9 @@
1884
1928
  .\[font-size\:var\(--deframe-widget-font-size-xxl\)\] {
1885
1929
  font-size: var(--deframe-widget-font-size-xxl);
1886
1930
  }
1931
+ .text-\[7px\] {
1932
+ font-size: 7px;
1933
+ }
1887
1934
  .text-\[10px\] {
1888
1935
  font-size: 10px;
1889
1936
  }
@@ -2258,6 +2305,13 @@
2258
2305
  }
2259
2306
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2260
2307
  }
2308
+ .shadow-\[0_0_0_10px_color-mix\(in_srgb\,var\(--deframe-widget-color-state-warning\)_12\%\,transparent\)\,0_0_32px_color-mix\(in_srgb\,var\(--deframe-widget-color-state-warning\)_22\%\,transparent\)\] {
2309
+ --tw-shadow: 0 0 0 10px var(--tw-shadow-color, var(--deframe-widget-color-state-warning)), 0 0 32px var(--tw-shadow-color, var(--deframe-widget-color-state-warning));
2310
+ @supports (color: color-mix(in lab, red, red)) {
2311
+ --tw-shadow: 0 0 0 10px var(--tw-shadow-color, color-mix(in srgb,var(--deframe-widget-color-state-warning) 12%,transparent)), 0 0 32px var(--tw-shadow-color, color-mix(in srgb,var(--deframe-widget-color-state-warning) 22%,transparent));
2312
+ }
2313
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2314
+ }
2261
2315
  .shadow-\[0_2px_8px_color-mix\(in_srgb\,var\(--deframe-widget-color-text-primary\)_18\%\,transparent\)\] {
2262
2316
  --tw-shadow: 0 2px 8px var(--tw-shadow-color, var(--deframe-widget-color-text-primary));
2263
2317
  @supports (color: color-mix(in lab, red, red)) {
@@ -2279,6 +2333,18 @@
2279
2333
  }
2280
2334
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2281
2335
  }
2336
+ .shadow-\[0px_2px_8px_0px_\#0000003D\] {
2337
+ --tw-shadow: 0px 2px 8px 0px var(--tw-shadow-color, #0000003D);
2338
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2339
+ }
2340
+ .shadow-\[0px_4px_16px_0px_\#00000066\,0px_24px_80px_0px_\#00000099\] {
2341
+ --tw-shadow: 0px 4px 16px 0px var(--tw-shadow-color, #00000066), 0px 24px 80px 0px var(--tw-shadow-color, #00000099);
2342
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2343
+ }
2344
+ .shadow-\[0px_4px_24px_0px_\#0000003D\] {
2345
+ --tw-shadow: 0px 4px 24px 0px var(--tw-shadow-color, #0000003D);
2346
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2347
+ }
2282
2348
  .shadow-md {
2283
2349
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2284
2350
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2511,6 +2577,16 @@
2511
2577
  }
2512
2578
  }
2513
2579
  }
2580
+ .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-tertiary\)_72\%\,transparent\)\] {
2581
+ &:hover {
2582
+ @media (hover: hover) {
2583
+ background-color: var(--deframe-widget-color-bg-tertiary);
2584
+ @supports (color: color-mix(in lab, red, red)) {
2585
+ background-color: color-mix(in srgb,var(--deframe-widget-color-bg-tertiary) 72%,transparent);
2586
+ }
2587
+ }
2588
+ }
2589
+ }
2514
2590
  .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-tertiary\)_84\%\,transparent\)\] {
2515
2591
  &:hover {
2516
2592
  @media (hover: hover) {
@@ -2600,6 +2676,13 @@
2600
2676
  }
2601
2677
  }
2602
2678
  }
2679
+ .hover\:text-\[color\:var\(--deframe-widget-color-text-secondary\)\] {
2680
+ &:hover {
2681
+ @media (hover: hover) {
2682
+ color: var(--deframe-widget-color-text-secondary);
2683
+ }
2684
+ }
2685
+ }
2603
2686
  .hover\:no-underline {
2604
2687
  &:hover {
2605
2688
  @media (hover: hover) {
@@ -2754,6 +2837,284 @@
2754
2837
  }
2755
2838
  }
2756
2839
  }
2840
+ .deframe-widget.widget-theme--rounded, .deframe-widget.rounded {
2841
+ --deframe-widget-font-family: "Space Grotesk", "Avenir Next", sans-serif;
2842
+ --deframe-widget-font-size-md: 14px;
2843
+ --deframe-widget-font-size-lg: 17px;
2844
+ --deframe-widget-font-size-xl: 20px;
2845
+ --deframe-widget-font-size-xxl: 24px;
2846
+ --deframe-widget-size-gap-sm: 0.625rem;
2847
+ --deframe-widget-size-gap-md: 0.875rem;
2848
+ --deframe-widget-size-gap-lg: 1.125rem;
2849
+ --deframe-widget-size-gap-xl: 1.5rem;
2850
+ --deframe-widget-size-radius-xs: 0.75rem;
2851
+ --deframe-widget-size-radius-sm: 1rem;
2852
+ --deframe-widget-size-radius-md: 1.5rem;
2853
+ --deframe-widget-size-radius-lg: 2rem;
2854
+ --deframe-widget-size-radius-xl: 2.75rem;
2855
+ --deframe-widget-color-bg-primary: #fff6f0;
2856
+ --deframe-widget-color-bg-primary-dark: #26140e;
2857
+ --deframe-widget-color-bg-primary-disabled: #f0d2c1;
2858
+ --deframe-widget-color-bg-secondary: #fffdf9;
2859
+ --deframe-widget-color-bg-secondary-dark: #3d2419;
2860
+ --deframe-widget-color-bg-secondary-disabled: #f3ded2;
2861
+ --deframe-widget-color-bg-tertiary: #ffe6d6;
2862
+ --deframe-widget-color-bg-tertiary-dark: #6b4332;
2863
+ --deframe-widget-color-bg-tertiary-disabled: #ebc7b4;
2864
+ --deframe-widget-color-text-primary: #2d1810;
2865
+ --deframe-widget-color-text-primary-dark: #fffaf4;
2866
+ --deframe-widget-color-text-primary-disabled: #c59e8a;
2867
+ --deframe-widget-color-text-secondary: #734d3d;
2868
+ --deframe-widget-color-text-secondary-dark: #d8b5a6;
2869
+ --deframe-widget-color-text-secondary-disabled: #c59e8a;
2870
+ --deframe-widget-color-text-tertiary: #9d7564;
2871
+ --deframe-widget-color-text-tertiary-dark: #bb9886;
2872
+ --deframe-widget-color-text-tertiary-disabled: #d7b6a5;
2873
+ --deframe-widget-color-placeholder-primary: #bb9886;
2874
+ --deframe-widget-color-placeholder-primary-dark: #d7b6a5;
2875
+ --deframe-widget-color-placeholder-primary-disabled: #c59e8a;
2876
+ --deframe-widget-color-placeholder-secondary: #c59e8a;
2877
+ --deframe-widget-color-placeholder-secondary-dark: #e2c3b5;
2878
+ --deframe-widget-color-placeholder-secondary-disabled: #d7b6a5;
2879
+ --deframe-widget-color-placeholder-tertiary: #d7b6a5;
2880
+ --deframe-widget-color-placeholder-tertiary-dark: #e6cabd;
2881
+ --deframe-widget-color-placeholder-tertiary-disabled: #edd6cb;
2882
+ --deframe-widget-color-border-primary: rgba(78, 36, 15, 0.28);
2883
+ --deframe-widget-color-border-primary-dark: rgba(255, 250, 244, 0.22);
2884
+ --deframe-widget-color-border-primary-disabled: rgba(78, 36, 15, 0.16);
2885
+ --deframe-widget-color-border-secondary: rgba(78, 36, 15, 0.16);
2886
+ --deframe-widget-color-border-secondary-dark: rgba(255, 250, 244, 0.18);
2887
+ --deframe-widget-color-border-secondary-disabled: rgba(78, 36, 15, 0.1);
2888
+ --deframe-widget-color-border-tertiary: rgba(78, 36, 15, 0.08);
2889
+ --deframe-widget-color-border-tertiary-dark: rgba(255, 250, 244, 0.12);
2890
+ --deframe-widget-color-border-tertiary-disabled: rgba(78, 36, 15, 0.05);
2891
+ --deframe-widget-color-brand-primary: #ff6d3f;
2892
+ --deframe-widget-color-brand-primary-dark: #ff8a65;
2893
+ --deframe-widget-color-brand-primary-disabled: rgba(255, 109, 63, 0.22);
2894
+ --deframe-widget-color-brand-secondary: #ffb089;
2895
+ --deframe-widget-color-brand-secondary-dark: #ffd4bf;
2896
+ --deframe-widget-color-brand-secondary-disabled: #e0b39e;
2897
+ --deframe-widget-color-brand-tertiary: #ff8a65;
2898
+ --deframe-widget-color-brand-tertiary-dark: #ffc3a8;
2899
+ --deframe-widget-color-brand-tertiary-disabled: #d9a48d;
2900
+ --deframe-widget-color-state-success: #3dbb78;
2901
+ --deframe-widget-color-state-warning: #ffb845;
2902
+ --deframe-widget-color-state-error: #ff6d3f;
2903
+ --deframe-widget-color-state-info: #58b4ff;
2904
+ }
2905
+ .deframe-widget.widget-theme--squared, .deframe-widget.squared {
2906
+ --deframe-widget-font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
2907
+ --deframe-widget-size-gap-sm: 0.375rem;
2908
+ --deframe-widget-size-gap-md: 0.5rem;
2909
+ --deframe-widget-size-gap-lg: 0.75rem;
2910
+ --deframe-widget-size-gap-xl: 1rem;
2911
+ --deframe-widget-size-radius-xs: 0;
2912
+ --deframe-widget-size-radius-sm: 0;
2913
+ --deframe-widget-size-radius-md: 0;
2914
+ --deframe-widget-size-radius-lg: 0;
2915
+ --deframe-widget-size-radius-xl: 0;
2916
+ --deframe-widget-color-bg-primary: #f5f7fb;
2917
+ --deframe-widget-color-bg-primary-dark: #111827;
2918
+ --deframe-widget-color-bg-primary-disabled: #dfe6f1;
2919
+ --deframe-widget-color-bg-secondary: #ffffff;
2920
+ --deframe-widget-color-bg-secondary-dark: #1f2937;
2921
+ --deframe-widget-color-bg-secondary-disabled: #edf2f8;
2922
+ --deframe-widget-color-bg-tertiary: #e6ebf4;
2923
+ --deframe-widget-color-bg-tertiary-dark: #374151;
2924
+ --deframe-widget-color-bg-tertiary-disabled: #d7deea;
2925
+ --deframe-widget-color-text-primary: #111827;
2926
+ --deframe-widget-color-text-primary-dark: #ffffff;
2927
+ --deframe-widget-color-text-primary-disabled: #9ca3af;
2928
+ --deframe-widget-color-text-secondary: #4b5563;
2929
+ --deframe-widget-color-text-secondary-dark: #d1d5db;
2930
+ --deframe-widget-color-text-secondary-disabled: #9ca3af;
2931
+ --deframe-widget-color-text-tertiary: #6b7280;
2932
+ --deframe-widget-color-text-tertiary-dark: #9ca3af;
2933
+ --deframe-widget-color-text-tertiary-disabled: #c4c9d4;
2934
+ --deframe-widget-color-placeholder-primary: #6b7280;
2935
+ --deframe-widget-color-placeholder-primary-dark: #9ca3af;
2936
+ --deframe-widget-color-placeholder-primary-disabled: #c4c9d4;
2937
+ --deframe-widget-color-placeholder-secondary: #9ca3af;
2938
+ --deframe-widget-color-placeholder-secondary-dark: #c4c9d4;
2939
+ --deframe-widget-color-placeholder-secondary-disabled: #d7deea;
2940
+ --deframe-widget-color-placeholder-tertiary: #c4c9d4;
2941
+ --deframe-widget-color-placeholder-tertiary-dark: #d7deea;
2942
+ --deframe-widget-color-placeholder-tertiary-disabled: #edf2f8;
2943
+ --deframe-widget-color-border-primary: rgba(17, 24, 39, 0.32);
2944
+ --deframe-widget-color-border-primary-dark: rgba(255, 255, 255, 0.22);
2945
+ --deframe-widget-color-border-primary-disabled: rgba(17, 24, 39, 0.18);
2946
+ --deframe-widget-color-border-secondary: rgba(17, 24, 39, 0.18);
2947
+ --deframe-widget-color-border-secondary-dark: rgba(255, 255, 255, 0.16);
2948
+ --deframe-widget-color-border-secondary-disabled: rgba(17, 24, 39, 0.12);
2949
+ --deframe-widget-color-border-tertiary: rgba(17, 24, 39, 0.08);
2950
+ --deframe-widget-color-border-tertiary-dark: rgba(255, 255, 255, 0.1);
2951
+ --deframe-widget-color-border-tertiary-disabled: rgba(17, 24, 39, 0.06);
2952
+ --deframe-widget-color-brand-primary: #0891b2;
2953
+ --deframe-widget-color-brand-primary-dark: #22d3ee;
2954
+ --deframe-widget-color-brand-primary-disabled: rgba(8, 145, 178, 0.2);
2955
+ --deframe-widget-color-brand-secondary: #67e8f9;
2956
+ --deframe-widget-color-brand-secondary-dark: #a5f3fc;
2957
+ --deframe-widget-color-brand-secondary-disabled: #7dd3fc;
2958
+ --deframe-widget-color-brand-tertiary: #164e63;
2959
+ --deframe-widget-color-brand-tertiary-dark: #a5f3fc;
2960
+ --deframe-widget-color-brand-tertiary-disabled: #67e8f9;
2961
+ --deframe-widget-color-state-success: #14b8a6;
2962
+ --deframe-widget-color-state-warning: #f59e0b;
2963
+ --deframe-widget-color-state-error: #ef4444;
2964
+ --deframe-widget-color-state-info: #38bdf8;
2965
+ }
2966
+ .deframe-widget.widget-theme--weird, .deframe-widget.weird {
2967
+ --deframe-widget-font-family: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
2968
+ --deframe-widget-font-size-xs: 0.75rem;
2969
+ --deframe-widget-font-size-sm: 0.875rem;
2970
+ --deframe-widget-font-size-md: 0.9375rem;
2971
+ --deframe-widget-font-size-lg: 1rem;
2972
+ --deframe-widget-font-size-xl: 1.0625rem;
2973
+ --deframe-widget-font-size-xxl: 1.25rem;
2974
+ --deframe-widget-size-gap-xs: 0.25rem;
2975
+ --deframe-widget-size-gap-sm: 0.875rem;
2976
+ --deframe-widget-size-gap-md: 0.625rem;
2977
+ --deframe-widget-size-gap-lg: 1.375rem;
2978
+ --deframe-widget-size-gap-xl: 1.875rem;
2979
+ --deframe-widget-size-radius-xs: 0.125rem;
2980
+ --deframe-widget-size-radius-sm: 1.25rem;
2981
+ --deframe-widget-size-radius-md: 0.375rem;
2982
+ --deframe-widget-size-radius-lg: 2.5rem;
2983
+ --deframe-widget-size-radius-xl: 3rem;
2984
+ --deframe-widget-color-bg-primary: #0d0019;
2985
+ --deframe-widget-color-bg-primary-dark: #0d0019;
2986
+ --deframe-widget-color-bg-primary-disabled: #2a1b38;
2987
+ --deframe-widget-color-bg-secondary: #21013d;
2988
+ --deframe-widget-color-bg-secondary-dark: #21013d;
2989
+ --deframe-widget-color-bg-secondary-disabled: #3c2750;
2990
+ --deframe-widget-color-bg-tertiary: #3a0e64;
2991
+ --deframe-widget-color-bg-tertiary-dark: #3a0e64;
2992
+ --deframe-widget-color-bg-tertiary-disabled: #5a3b78;
2993
+ --deframe-widget-color-text-primary: #f7ff5c;
2994
+ --deframe-widget-color-text-primary-dark: #f7ff5c;
2995
+ --deframe-widget-color-text-primary-disabled: rgba(247, 255, 92, 0.4);
2996
+ --deframe-widget-color-text-secondary: #7fffd4;
2997
+ --deframe-widget-color-text-secondary-dark: #7fffd4;
2998
+ --deframe-widget-color-text-secondary-disabled: rgba(127, 255, 212, 0.4);
2999
+ --deframe-widget-color-text-tertiary: #ff9cf7;
3000
+ --deframe-widget-color-text-tertiary-dark: #ff9cf7;
3001
+ --deframe-widget-color-text-tertiary-disabled: rgba(255, 156, 247, 0.4);
3002
+ --deframe-widget-color-placeholder-primary: #b0ffef;
3003
+ --deframe-widget-color-placeholder-primary-dark: #b0ffef;
3004
+ --deframe-widget-color-placeholder-primary-disabled: #7d6ca6;
3005
+ --deframe-widget-color-placeholder-secondary: #ffb7fa;
3006
+ --deframe-widget-color-placeholder-secondary-dark: #ffb7fa;
3007
+ --deframe-widget-color-placeholder-secondary-disabled: #7d6ca6;
3008
+ --deframe-widget-color-placeholder-tertiary: #7d6ca6;
3009
+ --deframe-widget-color-placeholder-tertiary-dark: #7d6ca6;
3010
+ --deframe-widget-color-placeholder-tertiary-disabled: #5f4f7f;
3011
+ --deframe-widget-color-border-primary: rgba(255, 136, 77, 0.46);
3012
+ --deframe-widget-color-border-primary-dark: rgba(19, 2, 33, 0.2);
3013
+ --deframe-widget-color-border-primary-disabled: rgba(255, 136, 77, 0.2);
3014
+ --deframe-widget-color-border-secondary: rgba(127, 255, 212, 0.28);
3015
+ --deframe-widget-color-border-secondary-dark: rgba(247, 255, 92, 0.22);
3016
+ --deframe-widget-color-border-secondary-disabled: rgba(127, 255, 212, 0.14);
3017
+ --deframe-widget-color-border-tertiary: rgba(247, 255, 92, 0.16);
3018
+ --deframe-widget-color-border-tertiary-dark: rgba(247, 255, 92, 0.12);
3019
+ --deframe-widget-color-border-tertiary-disabled: rgba(247, 255, 92, 0.08);
3020
+ --deframe-widget-color-brand-primary: #ff4fc4;
3021
+ --deframe-widget-color-brand-primary-dark: #ff4fc4;
3022
+ --deframe-widget-color-brand-primary-disabled: rgba(255, 79, 196, 0.2);
3023
+ --deframe-widget-color-brand-secondary: #7fffd4;
3024
+ --deframe-widget-color-brand-secondary-dark: #7fffd4;
3025
+ --deframe-widget-color-brand-secondary-disabled: rgba(127, 255, 212, 0.2);
3026
+ --deframe-widget-color-brand-tertiary: #f7ff5c;
3027
+ --deframe-widget-color-brand-tertiary-dark: #f7ff5c;
3028
+ --deframe-widget-color-brand-tertiary-disabled: rgba(247, 255, 92, 0.2);
3029
+ --deframe-widget-color-state-success: #00ffa3;
3030
+ --deframe-widget-color-state-warning: #ffb800;
3031
+ --deframe-widget-color-state-error: #ff5b7f;
3032
+ --deframe-widget-color-state-info: #7ab8ff;
3033
+ }
3034
+ .deframe-widget.widget-theme--cryptocontrol, .deframe-widget.cryptocontrol {
3035
+ --deframe-widget-font-family: Satoshi, Inter, sans-serif;
3036
+ --deframe-widget-font-size-md: 14px;
3037
+ --deframe-widget-font-size-lg: 17px;
3038
+ --deframe-widget-font-size-xl: 20px;
3039
+ --deframe-widget-font-size-xxl: 24px;
3040
+ --deframe-widget-size-gap-sm: 0.625rem;
3041
+ --deframe-widget-size-gap-md: 0.875rem;
3042
+ --deframe-widget-size-gap-lg: 1.125rem;
3043
+ --deframe-widget-size-gap-xl: 1.5rem;
3044
+ --deframe-widget-size-radius-xs: 4px;
3045
+ --deframe-widget-size-radius-sm: 8px;
3046
+ --deframe-widget-size-radius-md: 12px;
3047
+ --deframe-widget-size-radius-lg: 20px;
3048
+ --deframe-widget-size-radius-xl: 24px;
3049
+ --deframe-widget-color-text: #ffffff;
3050
+ --deframe-widget-color-text-dark: #ffffff;
3051
+ --deframe-widget-color-text-disabled: #c6c8cc;
3052
+ --deframe-widget-color-text-primary: #ffffff;
3053
+ --deframe-widget-color-text-primary-dark: #ffffff;
3054
+ --deframe-widget-color-text-primary-disabled: #525866;
3055
+ --deframe-widget-color-text-secondary: #99a0ae;
3056
+ --deframe-widget-color-text-secondary-dark: #99a0ae;
3057
+ --deframe-widget-color-text-secondary-disabled: #525866;
3058
+ --deframe-widget-color-text-tertiary: #525866;
3059
+ --deframe-widget-color-text-tertiary-dark: #525866;
3060
+ --deframe-widget-color-text-tertiary-disabled: #525866;
3061
+ --deframe-widget-color-text-inverse: #252050;
3062
+ --deframe-widget-color-text-inverse-dark: #252050;
3063
+ --deframe-widget-color-text-inverse-disabled: #FFFFFF;
3064
+ --deframe-widget-color-text-highlight: #2BA176;
3065
+ --deframe-widget-color-text-highlight-dark: #2BA176;
3066
+ --deframe-widget-color-text-highlight-disabled: #2BA176;
3067
+ --deframe-widget-color-placeholder-primary: #99a0ae;
3068
+ --deframe-widget-color-placeholder-primary-dark: #99a0ae;
3069
+ --deframe-widget-color-placeholder-primary-disabled: #525866;
3070
+ --deframe-widget-color-placeholder-secondary: #525866;
3071
+ --deframe-widget-color-placeholder-secondary-dark: #525866;
3072
+ --deframe-widget-color-placeholder-secondary-disabled: #525866;
3073
+ --deframe-widget-color-placeholder-tertiary: #525866;
3074
+ --deframe-widget-color-placeholder-tertiary-dark: #525866;
3075
+ --deframe-widget-color-placeholder-tertiary-disabled: #525866;
3076
+ --deframe-widget-color-brand-primary: #1fc16b;
3077
+ --deframe-widget-color-brand-primary-dark: #1fc16b;
3078
+ --deframe-widget-color-brand-primary-disabled: rgba(31, 193, 107, 0.10);
3079
+ --deframe-widget-color-brand-secondary: #a9abf7;
3080
+ --deframe-widget-color-brand-secondary-dark: #a9abf7;
3081
+ --deframe-widget-color-brand-secondary-disabled: #525866;
3082
+ --deframe-widget-color-brand-tertiary: #1fc16b;
3083
+ --deframe-widget-color-brand-tertiary-dark: #1fc16b;
3084
+ --deframe-widget-color-brand-tertiary-disabled: #525866;
3085
+ --deframe-widget-color-brand-tint: #EEF0FF;
3086
+ --deframe-widget-color-brand-tint-dark: #EEF0FF;
3087
+ --deframe-widget-color-brand-tint-disabled: #525866;
3088
+ --deframe-widget-color-bg-primary: #11141b;
3089
+ --deframe-widget-color-bg-primary-dark: #11141b;
3090
+ --deframe-widget-color-bg-primary-disabled: #181b25;
3091
+ --deframe-widget-color-bg-secondary: #181b25;
3092
+ --deframe-widget-color-bg-secondary-dark: #181b25;
3093
+ --deframe-widget-color-bg-secondary-disabled: #222530;
3094
+ --deframe-widget-color-bg-tertiary: #222530;
3095
+ --deframe-widget-color-bg-tertiary-dark: #222530;
3096
+ --deframe-widget-color-bg-tertiary-disabled: #181b25;
3097
+ --deframe-widget-color-bg-raised: #FFFFFF;
3098
+ --deframe-widget-color-bg-raised-dark: #FFFFFF;
3099
+ --deframe-widget-color-bg-raised-disabled: #FFFFFF;
3100
+ --deframe-widget-color-bg-inverse: #252050;
3101
+ --deframe-widget-color-bg-inverse-dark: #252050;
3102
+ --deframe-widget-color-bg-inverse-disabled: #252050;
3103
+ --deframe-widget-color-border-primary: #1FC16B66;
3104
+ --deframe-widget-color-border-primary-dark: #1FC16B66;
3105
+ --deframe-widget-color-border-primary-disabled: #1FC16B2E;
3106
+ --deframe-widget-color-border-secondary: #FFFFFF12;
3107
+ --deframe-widget-color-border-secondary-dark: #FFFFFF12;
3108
+ --deframe-widget-color-border-secondary-disabled: #FFFFFF0D;
3109
+ --deframe-widget-color-border-tertiary: #FFFFFF0D;
3110
+ --deframe-widget-color-border-tertiary-dark: #FFFFFF0D;
3111
+ --deframe-widget-color-border-tertiary-disabled: #FFFFFF08;
3112
+ --deframe-widget-color-state-success: #1fc16b;
3113
+ --deframe-widget-color-state-warning: #f6a700;
3114
+ --deframe-widget-color-state-error: #ff4d4f;
3115
+ --deframe-widget-color-state-info: #58b4ff;
3116
+ overscroll-behavior: none;
3117
+ }
2757
3118
  :root {
2758
3119
  --deframe-widget-font-family: 'Satoshi', Inter, sans-serif;
2759
3120
  --deframe-widget-font-size-xs: 11px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deframe-sdk/components",
3
- "version": "0.1.17",
3
+ "version": "0.1.18",
4
4
  "packageManager": "pnpm@9.0.0",
5
5
  "description": "Deframe SDK React component library",
6
6
  "engines": {