@deframe-sdk/components 0.1.25 → 0.1.27

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 +24 -2
  2. package/dist/index.d.ts +24 -2
  3. package/dist/index.js +1698 -113
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1688 -114
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +238 -21
  8. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -43,6 +43,8 @@
43
43
  --text-xs--line-height: calc(1 / 0.75);
44
44
  --text-sm: 0.875rem;
45
45
  --text-sm--line-height: calc(1.25 / 0.875);
46
+ --text-xl: 1.25rem;
47
+ --text-xl--line-height: calc(1.75 / 1.25);
46
48
  --text-2xl: 1.5rem;
47
49
  --text-2xl--line-height: calc(2 / 1.5);
48
50
  --font-weight-normal: 400;
@@ -371,6 +373,9 @@
371
373
  .-mt-\[var\(--deframe-widget-size-gap-sm\)\] {
372
374
  margin-top: calc(var(--deframe-widget-size-gap-sm) * -1);
373
375
  }
376
+ .-mt-\[var\(--deframe-widget-size-gap-xs\)\] {
377
+ margin-top: calc(var(--deframe-widget-size-gap-xs) * -1);
378
+ }
374
379
  .mt-0\.5 {
375
380
  margin-top: calc(var(--spacing) * 0.5);
376
381
  }
@@ -599,6 +604,9 @@
599
604
  .h-\[38px\] {
600
605
  height: 38px;
601
606
  }
607
+ .h-\[42px\] {
608
+ height: 42px;
609
+ }
602
610
  .h-\[50vh\] {
603
611
  height: 50vh;
604
612
  }
@@ -608,6 +616,9 @@
608
616
  .h-\[56px\] {
609
617
  height: 56px;
610
618
  }
619
+ .h-\[64px\] {
620
+ height: 64px;
621
+ }
611
622
  .h-\[72px\] {
612
623
  height: 72px;
613
624
  }
@@ -617,6 +628,9 @@
617
628
  .h-\[84px\] {
618
629
  height: 84px;
619
630
  }
631
+ .h-\[88vh\] {
632
+ height: 88vh;
633
+ }
620
634
  .h-\[90\%\] {
621
635
  height: 90%;
622
636
  }
@@ -644,15 +658,12 @@
644
658
  .h-\[min\(620px\,calc\(100vh-64px\)\)\] {
645
659
  height: min(620px, calc(100vh - 64px));
646
660
  }
661
+ .h-\[min\(700px\,calc\(100vh-64px\)\)\] {
662
+ height: min(700px, calc(100vh - 64px));
663
+ }
647
664
  .h-\[var\(--deframe-widget-font-leading-lg\)\] {
648
665
  height: var(--deframe-widget-font-leading-lg);
649
666
  }
650
- .h-\[var\(--deframe-widget-font-leading-md\)\] {
651
- height: var(--deframe-widget-font-leading-md);
652
- }
653
- .h-\[var\(--deframe-widget-font-leading-sm\)\] {
654
- height: var(--deframe-widget-font-leading-sm);
655
- }
656
667
  .h-auto {
657
668
  height: auto;
658
669
  }
@@ -674,9 +685,6 @@
674
685
  .max-h-\[280px\] {
675
686
  max-height: 280px;
676
687
  }
677
- .max-h-\[min\(620px\,calc\(100vh-64px\)\)\] {
678
- max-height: min(620px, calc(100vh - 64px));
679
- }
680
688
  .\!min-h-\[72px\] {
681
689
  min-height: 72px !important;
682
690
  }
@@ -806,12 +814,18 @@
806
814
  .w-\[60\%\] {
807
815
  width: 60%;
808
816
  }
817
+ .w-\[64px\] {
818
+ width: 64px;
819
+ }
809
820
  .w-\[83px\] {
810
821
  width: 83px;
811
822
  }
812
823
  .w-\[84px\] {
813
824
  width: 84px;
814
825
  }
826
+ .w-\[120px\] {
827
+ width: 120px;
828
+ }
815
829
  .w-\[200px\] {
816
830
  width: 200px;
817
831
  }
@@ -946,6 +960,10 @@
946
960
  --tw-translate-x: calc(var(--spacing) * 1);
947
961
  translate: var(--tw-translate-x) var(--tw-translate-y);
948
962
  }
963
+ .-translate-y-1 {
964
+ --tw-translate-y: calc(var(--spacing) * -1);
965
+ translate: var(--tw-translate-x) var(--tw-translate-y);
966
+ }
949
967
  .-translate-y-1\/2 {
950
968
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
951
969
  translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1213,6 +1231,9 @@
1213
1231
  .rounded {
1214
1232
  border-radius: 0.25rem;
1215
1233
  }
1234
+ .rounded-\[10px\] {
1235
+ border-radius: 10px;
1236
+ }
1216
1237
  .rounded-\[18px\] {
1217
1238
  border-radius: 18px;
1218
1239
  }
@@ -1368,6 +1389,9 @@
1368
1389
  border-color: color-mix(in srgb,var(--deframe-widget-color-state-warning) 32%,transparent);
1369
1390
  }
1370
1391
  }
1392
+ .border-\[color\:var\(--deframe-widget-color-bg-secondary\)\] {
1393
+ border-color: var(--deframe-widget-color-bg-secondary);
1394
+ }
1371
1395
  .border-\[color\:var\(--deframe-widget-color-border-primary\)\] {
1372
1396
  border-color: var(--deframe-widget-color-border-primary);
1373
1397
  }
@@ -1479,6 +1503,9 @@
1479
1503
  background-color: color-mix(in srgb,var(--deframe-widget-color-bg-primary) 88%,transparent);
1480
1504
  }
1481
1505
  }
1506
+ .bg-\[color\:color-mix\(\.\.\.\)\] {
1507
+ background-color: color-mix(...);
1508
+ }
1482
1509
  .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-primary\)_88\%\,transparent\)\] {
1483
1510
  background-color: var(--deframe-widget-color-bg-primary);
1484
1511
  @supports (color: color-mix(in lab, red, red)) {
@@ -1707,6 +1734,15 @@
1707
1734
  .bg-\[var\(--deframe-widget-color-text-secondary\)\] {
1708
1735
  background-color: var(--deframe-widget-color-text-secondary);
1709
1736
  }
1737
+ .bg-\[var\(--token\)\] {
1738
+ background-color: var(--token);
1739
+ }
1740
+ .bg-black\/50 {
1741
+ background-color: color-mix(in srgb, #000 50%, transparent);
1742
+ @supports (color: color-mix(in lab, red, red)) {
1743
+ background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
1744
+ }
1745
+ }
1710
1746
  .bg-blue-50 {
1711
1747
  background-color: var(--color-blue-50);
1712
1748
  }
@@ -1858,6 +1894,9 @@
1858
1894
  .p-\[var\(--deframe-widget-size-padding-x-md\)\] {
1859
1895
  padding: var(--deframe-widget-size-padding-x-md);
1860
1896
  }
1897
+ .p-\[var\(--deframe-widget-size-padding-y-sm\)\] {
1898
+ padding: var(--deframe-widget-size-padding-y-sm);
1899
+ }
1861
1900
  .p-px {
1862
1901
  padding: 1px;
1863
1902
  }
@@ -2086,6 +2125,9 @@
2086
2125
  .font-\[inherit\] {
2087
2126
  font-family: inherit;
2088
2127
  }
2128
+ .font-mono {
2129
+ font-family: var(--font-mono);
2130
+ }
2089
2131
  .text-2xl {
2090
2132
  font-size: var(--text-2xl);
2091
2133
  line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -2094,6 +2136,10 @@
2094
2136
  font-size: var(--text-sm);
2095
2137
  line-height: var(--tw-leading, var(--text-sm--line-height));
2096
2138
  }
2139
+ .text-xl {
2140
+ font-size: var(--text-xl);
2141
+ line-height: var(--tw-leading, var(--text-xl--line-height));
2142
+ }
2097
2143
  .text-xs {
2098
2144
  font-size: var(--text-xs);
2099
2145
  line-height: var(--tw-leading, var(--text-xs--line-height));
@@ -2128,6 +2174,9 @@
2128
2174
  .\[font-size\:var\(--deframe-widget-font-size-xxl\)\] {
2129
2175
  font-size: var(--deframe-widget-font-size-xxl);
2130
2176
  }
2177
+ .\[font-size\:var\(--token\)\] {
2178
+ font-size: var(--token);
2179
+ }
2131
2180
  .text-\[7px\] {
2132
2181
  font-size: 7px;
2133
2182
  }
@@ -2217,6 +2266,10 @@
2217
2266
  --tw-leading: 1.25;
2218
2267
  line-height: 1.25;
2219
2268
  }
2269
+ .leading-\[1\] {
2270
+ --tw-leading: 1;
2271
+ line-height: 1;
2272
+ }
2220
2273
  .leading-\[14px\] {
2221
2274
  --tw-leading: 14px;
2222
2275
  line-height: 14px;
@@ -2271,6 +2324,9 @@
2271
2324
  .\[line-height\:1\.45\] {
2272
2325
  line-height: 1.45;
2273
2326
  }
2327
+ .\[line-height\:1\] {
2328
+ line-height: 1;
2329
+ }
2274
2330
  .\[line-height\:var\(--deframe-widget-font-leading-lg\)\] {
2275
2331
  line-height: var(--deframe-widget-font-leading-lg);
2276
2332
  }
@@ -2443,6 +2499,12 @@
2443
2499
  .text-\[var\(--deframe-widget-color-text-primary\)\] {
2444
2500
  color: var(--deframe-widget-color-text-primary);
2445
2501
  }
2502
+ .text-\[var\(--deframe-widget-color-text-primary-dark\)\] {
2503
+ color: var(--deframe-widget-color-text-primary-dark);
2504
+ }
2505
+ .text-\[var\(--deframe-widget-color-text-primary-disabled\)\] {
2506
+ color: var(--deframe-widget-color-text-primary-disabled);
2507
+ }
2446
2508
  .text-\[var\(--deframe-widget-color-text-secondary\)\] {
2447
2509
  color: var(--deframe-widget-color-text-secondary);
2448
2510
  }
@@ -2497,6 +2559,12 @@
2497
2559
  .underline {
2498
2560
  text-decoration-line: underline;
2499
2561
  }
2562
+ .decoration-\[color-mix\(in_srgb\,var\(--deframe-widget-color-brand-primary\)_40\%\,transparent\)\] {
2563
+ text-decoration-color: var(--deframe-widget-color-brand-primary);
2564
+ @supports (color: color-mix(in lab, red, red)) {
2565
+ text-decoration-color: color-mix(in srgb,var(--deframe-widget-color-brand-primary) 40%,transparent);
2566
+ }
2567
+ }
2500
2568
  .underline-offset-2 {
2501
2569
  text-underline-offset: 2px;
2502
2570
  }
@@ -2540,6 +2608,10 @@
2540
2608
  .opacity-95 {
2541
2609
  opacity: 95%;
2542
2610
  }
2611
+ .shadow-\[0_-4px_32px_rgba\(0\,0\,0\,0\.4\)\] {
2612
+ --tw-shadow: 0 -4px 32px var(--tw-shadow-color, rgba(0,0,0,0.4));
2613
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2614
+ }
2543
2615
  .shadow-\[0_0_0_2px_var\(--deframe-widget-color-bg-secondary\)\] {
2544
2616
  --tw-shadow: 0 0 0 2px var(--tw-shadow-color, var(--deframe-widget-color-bg-secondary));
2545
2617
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2602,6 +2674,10 @@
2602
2674
  --tw-shadow: 0px 4px 24px 0px var(--tw-shadow-color, #0000003D);
2603
2675
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2604
2676
  }
2677
+ .shadow-lg {
2678
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2679
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2680
+ }
2605
2681
  .shadow-md {
2606
2682
  --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));
2607
2683
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2634,6 +2710,10 @@
2634
2710
  .outline-\[color\:var\(--deframe-widget-color-state-warning\)\] {
2635
2711
  outline-color: var(--deframe-widget-color-state-warning);
2636
2712
  }
2713
+ .blur {
2714
+ --tw-blur: blur(8px);
2715
+ 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,);
2716
+ }
2637
2717
  .blur-\[160px\] {
2638
2718
  --tw-blur: blur(160px);
2639
2719
  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,);
@@ -2656,6 +2736,10 @@
2656
2736
  -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,);
2657
2737
  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,);
2658
2738
  }
2739
+ .backdrop-filter {
2740
+ -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,);
2741
+ 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,);
2742
+ }
2659
2743
  .transition {
2660
2744
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
2661
2745
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2666,6 +2750,11 @@
2666
2750
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2667
2751
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2668
2752
  }
2753
+ .transition-\[background\,border-color\,transform\] {
2754
+ transition-property: background,border-color,transform;
2755
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2756
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2757
+ }
2669
2758
  .transition-\[background\,border-color\] {
2670
2759
  transition-property: background,border-color;
2671
2760
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2676,6 +2765,11 @@
2676
2765
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2677
2766
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2678
2767
  }
2768
+ .transition-\[background\,color\,opacity\] {
2769
+ transition-property: background,color,opacity;
2770
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2771
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2772
+ }
2679
2773
  .transition-\[background\,color\] {
2680
2774
  transition-property: background,color;
2681
2775
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2696,6 +2790,16 @@
2696
2790
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2697
2791
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2698
2792
  }
2793
+ .transition-\[opacity\,transform\] {
2794
+ transition-property: opacity,transform;
2795
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2796
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2797
+ }
2798
+ .transition-\[text-decoration-color\] {
2799
+ transition-property: text-decoration-color;
2800
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2801
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2802
+ }
2699
2803
  .transition-all {
2700
2804
  transition-property: all;
2701
2805
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2729,6 +2833,10 @@
2729
2833
  --tw-duration: 200ms;
2730
2834
  transition-duration: 200ms;
2731
2835
  }
2836
+ .duration-250 {
2837
+ --tw-duration: 250ms;
2838
+ transition-duration: 250ms;
2839
+ }
2732
2840
  .duration-300 {
2733
2841
  --tw-duration: 300ms;
2734
2842
  transition-duration: 300ms;
@@ -2834,6 +2942,16 @@
2834
2942
  }
2835
2943
  }
2836
2944
  }
2945
+ .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-secondary\)_72\%\,var\(--deframe-widget-color-bg-tertiary\)\)\] {
2946
+ &:hover {
2947
+ @media (hover: hover) {
2948
+ background-color: var(--deframe-widget-color-bg-secondary);
2949
+ @supports (color: color-mix(in lab, red, red)) {
2950
+ background-color: color-mix(in srgb,var(--deframe-widget-color-bg-secondary) 72%,var(--deframe-widget-color-bg-tertiary));
2951
+ }
2952
+ }
2953
+ }
2954
+ }
2837
2955
  .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-tertiary\)_60\%\,transparent\)\] {
2838
2956
  &:hover {
2839
2957
  @media (hover: hover) {
@@ -2854,12 +2972,12 @@
2854
2972
  }
2855
2973
  }
2856
2974
  }
2857
- .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-tertiary\)_84\%\,transparent\)\] {
2975
+ .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-tertiary\)_80\%\,var\(--deframe-widget-color-border-secondary\)\)\] {
2858
2976
  &:hover {
2859
2977
  @media (hover: hover) {
2860
2978
  background-color: var(--deframe-widget-color-bg-tertiary);
2861
2979
  @supports (color: color-mix(in lab, red, red)) {
2862
- background-color: color-mix(in srgb,var(--deframe-widget-color-bg-tertiary) 84%,transparent);
2980
+ background-color: color-mix(in srgb,var(--deframe-widget-color-bg-tertiary) 80%,var(--deframe-widget-color-border-secondary));
2863
2981
  }
2864
2982
  }
2865
2983
  }
@@ -2915,6 +3033,13 @@
2915
3033
  }
2916
3034
  }
2917
3035
  }
3036
+ .hover\:bg-\[var\(--deframe-widget-color-bg-tertiary\)\] {
3037
+ &:hover {
3038
+ @media (hover: hover) {
3039
+ background-color: var(--deframe-widget-color-bg-tertiary);
3040
+ }
3041
+ }
3042
+ }
2918
3043
  .hover\:bg-blue-700 {
2919
3044
  &:hover {
2920
3045
  @media (hover: hover) {
@@ -2964,6 +3089,13 @@
2964
3089
  }
2965
3090
  }
2966
3091
  }
3092
+ .hover\:decoration-\[color\:var\(--deframe-widget-color-brand-primary\)\] {
3093
+ &:hover {
3094
+ @media (hover: hover) {
3095
+ text-decoration-color: var(--deframe-widget-color-brand-primary);
3096
+ }
3097
+ }
3098
+ }
2967
3099
  .hover\:opacity-70 {
2968
3100
  &:hover {
2969
3101
  @media (hover: hover) {
@@ -2978,6 +3110,13 @@
2978
3110
  }
2979
3111
  }
2980
3112
  }
3113
+ .hover\:opacity-100 {
3114
+ &:hover {
3115
+ @media (hover: hover) {
3116
+ opacity: 100%;
3117
+ }
3118
+ }
3119
+ }
2981
3120
  .hover\:shadow-\[0_2px_8px_color-mix\(in_srgb\,var\(--deframe-widget-color-text-primary\)_18\%\,transparent\)\] {
2982
3121
  &:hover {
2983
3122
  @media (hover: hover) {
@@ -2997,17 +3136,36 @@
2997
3136
  }
2998
3137
  }
2999
3138
  }
3139
+ .hover\:brightness-110 {
3140
+ &:hover {
3141
+ @media (hover: hover) {
3142
+ --tw-brightness: brightness(110%);
3143
+ 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,);
3144
+ }
3145
+ }
3146
+ }
3000
3147
  .focus\:border-\[color\:var\(--deframe-widget-color-brand-primary\)\] {
3001
3148
  &:focus {
3002
3149
  border-color: var(--deframe-widget-color-brand-primary);
3003
3150
  }
3004
3151
  }
3152
+ .focus\:ring-0 {
3153
+ &:focus {
3154
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3155
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3156
+ }
3157
+ }
3005
3158
  .focus\:ring-2 {
3006
3159
  &:focus {
3007
3160
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3008
3161
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3009
3162
  }
3010
3163
  }
3164
+ .focus\:ring-\[color\:\.\.\.\] {
3165
+ &:focus {
3166
+ --tw-ring-color: ...;
3167
+ }
3168
+ }
3011
3169
  .focus\:ring-\[color\:var\(--deframe-widget-color-brand-primary\)\] {
3012
3170
  &:focus {
3013
3171
  --tw-ring-color: var(--deframe-widget-color-brand-primary);
@@ -3168,6 +3326,60 @@
3168
3326
  grid-template-columns: repeat(3, minmax(0, 1fr));
3169
3327
  }
3170
3328
  }
3329
+ .dark\:border-\[color\:var\(--deframe-widget-color-bg-secondary-dark\)\] {
3330
+ @media (prefers-color-scheme: dark) {
3331
+ border-color: var(--deframe-widget-color-bg-secondary-dark);
3332
+ }
3333
+ }
3334
+ .dark\:border-\[color\:var\(--deframe-widget-color-border-secondary-dark\)\] {
3335
+ @media (prefers-color-scheme: dark) {
3336
+ border-color: var(--deframe-widget-color-border-secondary-dark);
3337
+ }
3338
+ }
3339
+ .dark\:bg-\[var\(--deframe-widget-color-bg-primary-dark\)\] {
3340
+ @media (prefers-color-scheme: dark) {
3341
+ background-color: var(--deframe-widget-color-bg-primary-dark);
3342
+ }
3343
+ }
3344
+ .dark\:bg-\[var\(--deframe-widget-color-bg-secondary-dark\)\] {
3345
+ @media (prefers-color-scheme: dark) {
3346
+ background-color: var(--deframe-widget-color-bg-secondary-dark);
3347
+ }
3348
+ }
3349
+ .dark\:bg-\[var\(--deframe-widget-color-bg-tertiary-dark\)\] {
3350
+ @media (prefers-color-scheme: dark) {
3351
+ background-color: var(--deframe-widget-color-bg-tertiary-dark);
3352
+ }
3353
+ }
3354
+ .dark\:text-\[color\:var\(--deframe-widget-color-state-error\)\] {
3355
+ @media (prefers-color-scheme: dark) {
3356
+ color: var(--deframe-widget-color-state-error);
3357
+ }
3358
+ }
3359
+ .dark\:text-\[color\:var\(--deframe-widget-color-text-primary-dark\)\] {
3360
+ @media (prefers-color-scheme: dark) {
3361
+ color: var(--deframe-widget-color-text-primary-dark);
3362
+ }
3363
+ }
3364
+ .dark\:text-\[color\:var\(--deframe-widget-color-text-secondary-dark\)\] {
3365
+ @media (prefers-color-scheme: dark) {
3366
+ color: var(--deframe-widget-color-text-secondary-dark);
3367
+ }
3368
+ }
3369
+ .dark\:text-\[color\:var\(--deframe-widget-color-text-tertiary-dark\)\] {
3370
+ @media (prefers-color-scheme: dark) {
3371
+ color: var(--deframe-widget-color-text-tertiary-dark);
3372
+ }
3373
+ }
3374
+ .dark\:hover\:text-\[color\:var\(--deframe-widget-color-text-secondary-dark\)\] {
3375
+ @media (prefers-color-scheme: dark) {
3376
+ &:hover {
3377
+ @media (hover: hover) {
3378
+ color: var(--deframe-widget-color-text-secondary-dark);
3379
+ }
3380
+ }
3381
+ }
3382
+ }
3171
3383
  .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none {
3172
3384
  &::-webkit-inner-spin-button {
3173
3385
  appearance: none;
@@ -3495,7 +3707,7 @@
3495
3707
  --deframe-widget-font-weight-extrabold: 800;
3496
3708
  --deframe-widget-color-text-primary: #252050;
3497
3709
  --deframe-widget-color-text-primary-dark: #ffffff;
3498
- --deframe-widget-color-text-primary-disabled: #c6c8cc;
3710
+ --deframe-widget-color-text-primary-disabled: #898d95;
3499
3711
  --deframe-widget-color-text-secondary: #5c5f66;
3500
3712
  --deframe-widget-color-text-secondary-dark: #e3e4e8;
3501
3713
  --deframe-widget-color-text-secondary-disabled: #898d95;
@@ -3597,10 +3809,12 @@
3597
3809
  :root.dark {
3598
3810
  --deframe-widget-color-text-primary: #ffffff;
3599
3811
  --deframe-widget-color-text-primary-dark: #ffffff;
3600
- --deframe-widget-color-text-primary-disabled: #898d95;
3601
- --deframe-widget-color-text-secondary: #5c5f66;
3602
- --deframe-widget-color-text-secondary-disabled: #898d95;
3603
- --deframe-widget-color-text-tertiary: #898d95;
3812
+ --deframe-widget-color-text-primary-disabled: #99a0ae;
3813
+ --deframe-widget-color-text-secondary: #99a0ae;
3814
+ --deframe-widget-color-text-secondary-dark: #99a0ae;
3815
+ --deframe-widget-color-text-secondary-disabled: #525866;
3816
+ --deframe-widget-color-text-tertiary: #525866;
3817
+ --deframe-widget-color-text-tertiary-dark: #525866;
3604
3818
  --deframe-widget-color-text-tertiary-disabled: #525866;
3605
3819
  --deframe-widget-color-placeholder-primary: #898d95;
3606
3820
  --deframe-widget-color-placeholder-primary-disabled: #898d95;
@@ -3608,12 +3822,15 @@
3608
3822
  --deframe-widget-color-placeholder-secondary-disabled: #525866;
3609
3823
  --deframe-widget-color-placeholder-tertiary: #5c5f66;
3610
3824
  --deframe-widget-color-placeholder-tertiary-disabled: #3a3a3a;
3611
- --deframe-widget-color-brand-primary: #405eff;
3612
- --deframe-widget-color-brand-primary-disabled: #525866;
3825
+ --deframe-widget-color-brand-primary: #1fc16b;
3826
+ --deframe-widget-color-brand-primary-dark: #1fc16b;
3827
+ --deframe-widget-color-brand-primary-disabled: rgba(31, 193, 107, 0.10);
3613
3828
  --deframe-widget-color-brand-secondary: #a9abf7;
3614
- --deframe-widget-color-brand-secondary-disabled: #525866;
3615
- --deframe-widget-color-brand-tertiary: #405eff;
3616
- --deframe-widget-color-brand-tertiary-disabled: #525866;
3829
+ --deframe-widget-color-brand-secondary-dark: #a9abf7;
3830
+ --deframe-widget-color-brand-secondary-disabled: rgba(169, 171, 247, 0.10);
3831
+ --deframe-widget-color-brand-tertiary: #1fc16b;
3832
+ --deframe-widget-color-brand-tertiary-dark: #1fc16b;
3833
+ --deframe-widget-color-brand-tertiary-disabled: rgba(31, 193, 107, 0.08);
3617
3834
  --deframe-widget-color-bg-primary: #ffffff;
3618
3835
  --deframe-widget-color-bg-primary-disabled: #232323;
3619
3836
  --deframe-widget-color-bg-secondary: #f8f9fa;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deframe-sdk/components",
3
- "version": "0.1.25",
3
+ "version": "0.1.27",
4
4
  "packageManager": "pnpm@9.0.0",
5
5
  "description": "Deframe SDK React component library",
6
6
  "engines": {
@@ -32,7 +32,7 @@
32
32
  "start": "next start",
33
33
  "lint": "eslint",
34
34
  "test": "echo \"No tests!\"",
35
- "storybook": "storybook dev -p 6006",
35
+ "storybook": "storybook dev",
36
36
  "build-storybook": "storybook build",
37
37
  "prepare": "husky",
38
38
  "prepublishOnly": "npm run build:lib"