@deframe-sdk/components 0.1.24 → 0.1.26

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 +22 -2
  2. package/dist/index.d.ts +22 -2
  3. package/dist/index.js +1768 -219
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1672 -130
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +232 -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
  }
@@ -608,6 +613,9 @@
608
613
  .h-\[56px\] {
609
614
  height: 56px;
610
615
  }
616
+ .h-\[64px\] {
617
+ height: 64px;
618
+ }
611
619
  .h-\[72px\] {
612
620
  height: 72px;
613
621
  }
@@ -617,6 +625,9 @@
617
625
  .h-\[84px\] {
618
626
  height: 84px;
619
627
  }
628
+ .h-\[88vh\] {
629
+ height: 88vh;
630
+ }
620
631
  .h-\[90\%\] {
621
632
  height: 90%;
622
633
  }
@@ -644,15 +655,12 @@
644
655
  .h-\[min\(620px\,calc\(100vh-64px\)\)\] {
645
656
  height: min(620px, calc(100vh - 64px));
646
657
  }
658
+ .h-\[min\(700px\,calc\(100vh-64px\)\)\] {
659
+ height: min(700px, calc(100vh - 64px));
660
+ }
647
661
  .h-\[var\(--deframe-widget-font-leading-lg\)\] {
648
662
  height: var(--deframe-widget-font-leading-lg);
649
663
  }
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
664
  .h-auto {
657
665
  height: auto;
658
666
  }
@@ -674,9 +682,6 @@
674
682
  .max-h-\[280px\] {
675
683
  max-height: 280px;
676
684
  }
677
- .max-h-\[min\(620px\,calc\(100vh-64px\)\)\] {
678
- max-height: min(620px, calc(100vh - 64px));
679
- }
680
685
  .\!min-h-\[72px\] {
681
686
  min-height: 72px !important;
682
687
  }
@@ -806,6 +811,9 @@
806
811
  .w-\[60\%\] {
807
812
  width: 60%;
808
813
  }
814
+ .w-\[64px\] {
815
+ width: 64px;
816
+ }
809
817
  .w-\[83px\] {
810
818
  width: 83px;
811
819
  }
@@ -946,6 +954,10 @@
946
954
  --tw-translate-x: calc(var(--spacing) * 1);
947
955
  translate: var(--tw-translate-x) var(--tw-translate-y);
948
956
  }
957
+ .-translate-y-1 {
958
+ --tw-translate-y: calc(var(--spacing) * -1);
959
+ translate: var(--tw-translate-x) var(--tw-translate-y);
960
+ }
949
961
  .-translate-y-1\/2 {
950
962
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
951
963
  translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1213,6 +1225,9 @@
1213
1225
  .rounded {
1214
1226
  border-radius: 0.25rem;
1215
1227
  }
1228
+ .rounded-\[10px\] {
1229
+ border-radius: 10px;
1230
+ }
1216
1231
  .rounded-\[18px\] {
1217
1232
  border-radius: 18px;
1218
1233
  }
@@ -1368,6 +1383,9 @@
1368
1383
  border-color: color-mix(in srgb,var(--deframe-widget-color-state-warning) 32%,transparent);
1369
1384
  }
1370
1385
  }
1386
+ .border-\[color\:var\(--deframe-widget-color-bg-secondary\)\] {
1387
+ border-color: var(--deframe-widget-color-bg-secondary);
1388
+ }
1371
1389
  .border-\[color\:var\(--deframe-widget-color-border-primary\)\] {
1372
1390
  border-color: var(--deframe-widget-color-border-primary);
1373
1391
  }
@@ -1479,6 +1497,9 @@
1479
1497
  background-color: color-mix(in srgb,var(--deframe-widget-color-bg-primary) 88%,transparent);
1480
1498
  }
1481
1499
  }
1500
+ .bg-\[color\:color-mix\(\.\.\.\)\] {
1501
+ background-color: color-mix(...);
1502
+ }
1482
1503
  .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-primary\)_88\%\,transparent\)\] {
1483
1504
  background-color: var(--deframe-widget-color-bg-primary);
1484
1505
  @supports (color: color-mix(in lab, red, red)) {
@@ -1707,6 +1728,15 @@
1707
1728
  .bg-\[var\(--deframe-widget-color-text-secondary\)\] {
1708
1729
  background-color: var(--deframe-widget-color-text-secondary);
1709
1730
  }
1731
+ .bg-\[var\(--token\)\] {
1732
+ background-color: var(--token);
1733
+ }
1734
+ .bg-black\/50 {
1735
+ background-color: color-mix(in srgb, #000 50%, transparent);
1736
+ @supports (color: color-mix(in lab, red, red)) {
1737
+ background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
1738
+ }
1739
+ }
1710
1740
  .bg-blue-50 {
1711
1741
  background-color: var(--color-blue-50);
1712
1742
  }
@@ -1858,6 +1888,9 @@
1858
1888
  .p-\[var\(--deframe-widget-size-padding-x-md\)\] {
1859
1889
  padding: var(--deframe-widget-size-padding-x-md);
1860
1890
  }
1891
+ .p-\[var\(--deframe-widget-size-padding-y-sm\)\] {
1892
+ padding: var(--deframe-widget-size-padding-y-sm);
1893
+ }
1861
1894
  .p-px {
1862
1895
  padding: 1px;
1863
1896
  }
@@ -2086,6 +2119,9 @@
2086
2119
  .font-\[inherit\] {
2087
2120
  font-family: inherit;
2088
2121
  }
2122
+ .font-mono {
2123
+ font-family: var(--font-mono);
2124
+ }
2089
2125
  .text-2xl {
2090
2126
  font-size: var(--text-2xl);
2091
2127
  line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -2094,6 +2130,10 @@
2094
2130
  font-size: var(--text-sm);
2095
2131
  line-height: var(--tw-leading, var(--text-sm--line-height));
2096
2132
  }
2133
+ .text-xl {
2134
+ font-size: var(--text-xl);
2135
+ line-height: var(--tw-leading, var(--text-xl--line-height));
2136
+ }
2097
2137
  .text-xs {
2098
2138
  font-size: var(--text-xs);
2099
2139
  line-height: var(--tw-leading, var(--text-xs--line-height));
@@ -2128,6 +2168,9 @@
2128
2168
  .\[font-size\:var\(--deframe-widget-font-size-xxl\)\] {
2129
2169
  font-size: var(--deframe-widget-font-size-xxl);
2130
2170
  }
2171
+ .\[font-size\:var\(--token\)\] {
2172
+ font-size: var(--token);
2173
+ }
2131
2174
  .text-\[7px\] {
2132
2175
  font-size: 7px;
2133
2176
  }
@@ -2217,6 +2260,10 @@
2217
2260
  --tw-leading: 1.25;
2218
2261
  line-height: 1.25;
2219
2262
  }
2263
+ .leading-\[1\] {
2264
+ --tw-leading: 1;
2265
+ line-height: 1;
2266
+ }
2220
2267
  .leading-\[14px\] {
2221
2268
  --tw-leading: 14px;
2222
2269
  line-height: 14px;
@@ -2271,6 +2318,9 @@
2271
2318
  .\[line-height\:1\.45\] {
2272
2319
  line-height: 1.45;
2273
2320
  }
2321
+ .\[line-height\:1\] {
2322
+ line-height: 1;
2323
+ }
2274
2324
  .\[line-height\:var\(--deframe-widget-font-leading-lg\)\] {
2275
2325
  line-height: var(--deframe-widget-font-leading-lg);
2276
2326
  }
@@ -2443,6 +2493,12 @@
2443
2493
  .text-\[var\(--deframe-widget-color-text-primary\)\] {
2444
2494
  color: var(--deframe-widget-color-text-primary);
2445
2495
  }
2496
+ .text-\[var\(--deframe-widget-color-text-primary-dark\)\] {
2497
+ color: var(--deframe-widget-color-text-primary-dark);
2498
+ }
2499
+ .text-\[var\(--deframe-widget-color-text-primary-disabled\)\] {
2500
+ color: var(--deframe-widget-color-text-primary-disabled);
2501
+ }
2446
2502
  .text-\[var\(--deframe-widget-color-text-secondary\)\] {
2447
2503
  color: var(--deframe-widget-color-text-secondary);
2448
2504
  }
@@ -2497,6 +2553,12 @@
2497
2553
  .underline {
2498
2554
  text-decoration-line: underline;
2499
2555
  }
2556
+ .decoration-\[color-mix\(in_srgb\,var\(--deframe-widget-color-brand-primary\)_40\%\,transparent\)\] {
2557
+ text-decoration-color: var(--deframe-widget-color-brand-primary);
2558
+ @supports (color: color-mix(in lab, red, red)) {
2559
+ text-decoration-color: color-mix(in srgb,var(--deframe-widget-color-brand-primary) 40%,transparent);
2560
+ }
2561
+ }
2500
2562
  .underline-offset-2 {
2501
2563
  text-underline-offset: 2px;
2502
2564
  }
@@ -2540,6 +2602,10 @@
2540
2602
  .opacity-95 {
2541
2603
  opacity: 95%;
2542
2604
  }
2605
+ .shadow-\[0_-4px_32px_rgba\(0\,0\,0\,0\.4\)\] {
2606
+ --tw-shadow: 0 -4px 32px var(--tw-shadow-color, rgba(0,0,0,0.4));
2607
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2608
+ }
2543
2609
  .shadow-\[0_0_0_2px_var\(--deframe-widget-color-bg-secondary\)\] {
2544
2610
  --tw-shadow: 0 0 0 2px var(--tw-shadow-color, var(--deframe-widget-color-bg-secondary));
2545
2611
  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 +2668,10 @@
2602
2668
  --tw-shadow: 0px 4px 24px 0px var(--tw-shadow-color, #0000003D);
2603
2669
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2604
2670
  }
2671
+ .shadow-lg {
2672
+ --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));
2673
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2674
+ }
2605
2675
  .shadow-md {
2606
2676
  --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
2677
  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 +2704,10 @@
2634
2704
  .outline-\[color\:var\(--deframe-widget-color-state-warning\)\] {
2635
2705
  outline-color: var(--deframe-widget-color-state-warning);
2636
2706
  }
2707
+ .blur {
2708
+ --tw-blur: blur(8px);
2709
+ 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,);
2710
+ }
2637
2711
  .blur-\[160px\] {
2638
2712
  --tw-blur: blur(160px);
2639
2713
  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 +2730,10 @@
2656
2730
  -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
2731
  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
2732
  }
2733
+ .backdrop-filter {
2734
+ -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,);
2735
+ 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,);
2736
+ }
2659
2737
  .transition {
2660
2738
  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
2739
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2666,6 +2744,11 @@
2666
2744
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2667
2745
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2668
2746
  }
2747
+ .transition-\[background\,border-color\,transform\] {
2748
+ transition-property: background,border-color,transform;
2749
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2750
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2751
+ }
2669
2752
  .transition-\[background\,border-color\] {
2670
2753
  transition-property: background,border-color;
2671
2754
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2676,6 +2759,11 @@
2676
2759
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2677
2760
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2678
2761
  }
2762
+ .transition-\[background\,color\,opacity\] {
2763
+ transition-property: background,color,opacity;
2764
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2765
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2766
+ }
2679
2767
  .transition-\[background\,color\] {
2680
2768
  transition-property: background,color;
2681
2769
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2696,6 +2784,16 @@
2696
2784
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2697
2785
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2698
2786
  }
2787
+ .transition-\[opacity\,transform\] {
2788
+ transition-property: opacity,transform;
2789
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2790
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2791
+ }
2792
+ .transition-\[text-decoration-color\] {
2793
+ transition-property: text-decoration-color;
2794
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2795
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2796
+ }
2699
2797
  .transition-all {
2700
2798
  transition-property: all;
2701
2799
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2729,6 +2827,10 @@
2729
2827
  --tw-duration: 200ms;
2730
2828
  transition-duration: 200ms;
2731
2829
  }
2830
+ .duration-250 {
2831
+ --tw-duration: 250ms;
2832
+ transition-duration: 250ms;
2833
+ }
2732
2834
  .duration-300 {
2733
2835
  --tw-duration: 300ms;
2734
2836
  transition-duration: 300ms;
@@ -2834,6 +2936,16 @@
2834
2936
  }
2835
2937
  }
2836
2938
  }
2939
+ .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-secondary\)_72\%\,var\(--deframe-widget-color-bg-tertiary\)\)\] {
2940
+ &:hover {
2941
+ @media (hover: hover) {
2942
+ background-color: var(--deframe-widget-color-bg-secondary);
2943
+ @supports (color: color-mix(in lab, red, red)) {
2944
+ background-color: color-mix(in srgb,var(--deframe-widget-color-bg-secondary) 72%,var(--deframe-widget-color-bg-tertiary));
2945
+ }
2946
+ }
2947
+ }
2948
+ }
2837
2949
  .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-tertiary\)_60\%\,transparent\)\] {
2838
2950
  &:hover {
2839
2951
  @media (hover: hover) {
@@ -2854,12 +2966,12 @@
2854
2966
  }
2855
2967
  }
2856
2968
  }
2857
- .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-tertiary\)_84\%\,transparent\)\] {
2969
+ .hover\:bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-tertiary\)_80\%\,var\(--deframe-widget-color-border-secondary\)\)\] {
2858
2970
  &:hover {
2859
2971
  @media (hover: hover) {
2860
2972
  background-color: var(--deframe-widget-color-bg-tertiary);
2861
2973
  @supports (color: color-mix(in lab, red, red)) {
2862
- background-color: color-mix(in srgb,var(--deframe-widget-color-bg-tertiary) 84%,transparent);
2974
+ background-color: color-mix(in srgb,var(--deframe-widget-color-bg-tertiary) 80%,var(--deframe-widget-color-border-secondary));
2863
2975
  }
2864
2976
  }
2865
2977
  }
@@ -2915,6 +3027,13 @@
2915
3027
  }
2916
3028
  }
2917
3029
  }
3030
+ .hover\:bg-\[var\(--deframe-widget-color-bg-tertiary\)\] {
3031
+ &:hover {
3032
+ @media (hover: hover) {
3033
+ background-color: var(--deframe-widget-color-bg-tertiary);
3034
+ }
3035
+ }
3036
+ }
2918
3037
  .hover\:bg-blue-700 {
2919
3038
  &:hover {
2920
3039
  @media (hover: hover) {
@@ -2964,6 +3083,13 @@
2964
3083
  }
2965
3084
  }
2966
3085
  }
3086
+ .hover\:decoration-\[color\:var\(--deframe-widget-color-brand-primary\)\] {
3087
+ &:hover {
3088
+ @media (hover: hover) {
3089
+ text-decoration-color: var(--deframe-widget-color-brand-primary);
3090
+ }
3091
+ }
3092
+ }
2967
3093
  .hover\:opacity-70 {
2968
3094
  &:hover {
2969
3095
  @media (hover: hover) {
@@ -2978,6 +3104,13 @@
2978
3104
  }
2979
3105
  }
2980
3106
  }
3107
+ .hover\:opacity-100 {
3108
+ &:hover {
3109
+ @media (hover: hover) {
3110
+ opacity: 100%;
3111
+ }
3112
+ }
3113
+ }
2981
3114
  .hover\:shadow-\[0_2px_8px_color-mix\(in_srgb\,var\(--deframe-widget-color-text-primary\)_18\%\,transparent\)\] {
2982
3115
  &:hover {
2983
3116
  @media (hover: hover) {
@@ -2997,17 +3130,36 @@
2997
3130
  }
2998
3131
  }
2999
3132
  }
3133
+ .hover\:brightness-110 {
3134
+ &:hover {
3135
+ @media (hover: hover) {
3136
+ --tw-brightness: brightness(110%);
3137
+ 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,);
3138
+ }
3139
+ }
3140
+ }
3000
3141
  .focus\:border-\[color\:var\(--deframe-widget-color-brand-primary\)\] {
3001
3142
  &:focus {
3002
3143
  border-color: var(--deframe-widget-color-brand-primary);
3003
3144
  }
3004
3145
  }
3146
+ .focus\:ring-0 {
3147
+ &:focus {
3148
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3149
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3150
+ }
3151
+ }
3005
3152
  .focus\:ring-2 {
3006
3153
  &:focus {
3007
3154
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3008
3155
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3009
3156
  }
3010
3157
  }
3158
+ .focus\:ring-\[color\:\.\.\.\] {
3159
+ &:focus {
3160
+ --tw-ring-color: ...;
3161
+ }
3162
+ }
3011
3163
  .focus\:ring-\[color\:var\(--deframe-widget-color-brand-primary\)\] {
3012
3164
  &:focus {
3013
3165
  --tw-ring-color: var(--deframe-widget-color-brand-primary);
@@ -3168,6 +3320,60 @@
3168
3320
  grid-template-columns: repeat(3, minmax(0, 1fr));
3169
3321
  }
3170
3322
  }
3323
+ .dark\:border-\[color\:var\(--deframe-widget-color-bg-secondary-dark\)\] {
3324
+ @media (prefers-color-scheme: dark) {
3325
+ border-color: var(--deframe-widget-color-bg-secondary-dark);
3326
+ }
3327
+ }
3328
+ .dark\:border-\[color\:var\(--deframe-widget-color-border-secondary-dark\)\] {
3329
+ @media (prefers-color-scheme: dark) {
3330
+ border-color: var(--deframe-widget-color-border-secondary-dark);
3331
+ }
3332
+ }
3333
+ .dark\:bg-\[var\(--deframe-widget-color-bg-primary-dark\)\] {
3334
+ @media (prefers-color-scheme: dark) {
3335
+ background-color: var(--deframe-widget-color-bg-primary-dark);
3336
+ }
3337
+ }
3338
+ .dark\:bg-\[var\(--deframe-widget-color-bg-secondary-dark\)\] {
3339
+ @media (prefers-color-scheme: dark) {
3340
+ background-color: var(--deframe-widget-color-bg-secondary-dark);
3341
+ }
3342
+ }
3343
+ .dark\:bg-\[var\(--deframe-widget-color-bg-tertiary-dark\)\] {
3344
+ @media (prefers-color-scheme: dark) {
3345
+ background-color: var(--deframe-widget-color-bg-tertiary-dark);
3346
+ }
3347
+ }
3348
+ .dark\:text-\[color\:var\(--deframe-widget-color-state-error\)\] {
3349
+ @media (prefers-color-scheme: dark) {
3350
+ color: var(--deframe-widget-color-state-error);
3351
+ }
3352
+ }
3353
+ .dark\:text-\[color\:var\(--deframe-widget-color-text-primary-dark\)\] {
3354
+ @media (prefers-color-scheme: dark) {
3355
+ color: var(--deframe-widget-color-text-primary-dark);
3356
+ }
3357
+ }
3358
+ .dark\:text-\[color\:var\(--deframe-widget-color-text-secondary-dark\)\] {
3359
+ @media (prefers-color-scheme: dark) {
3360
+ color: var(--deframe-widget-color-text-secondary-dark);
3361
+ }
3362
+ }
3363
+ .dark\:text-\[color\:var\(--deframe-widget-color-text-tertiary-dark\)\] {
3364
+ @media (prefers-color-scheme: dark) {
3365
+ color: var(--deframe-widget-color-text-tertiary-dark);
3366
+ }
3367
+ }
3368
+ .dark\:hover\:text-\[color\:var\(--deframe-widget-color-text-secondary-dark\)\] {
3369
+ @media (prefers-color-scheme: dark) {
3370
+ &:hover {
3371
+ @media (hover: hover) {
3372
+ color: var(--deframe-widget-color-text-secondary-dark);
3373
+ }
3374
+ }
3375
+ }
3376
+ }
3171
3377
  .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none {
3172
3378
  &::-webkit-inner-spin-button {
3173
3379
  appearance: none;
@@ -3495,7 +3701,7 @@
3495
3701
  --deframe-widget-font-weight-extrabold: 800;
3496
3702
  --deframe-widget-color-text-primary: #252050;
3497
3703
  --deframe-widget-color-text-primary-dark: #ffffff;
3498
- --deframe-widget-color-text-primary-disabled: #c6c8cc;
3704
+ --deframe-widget-color-text-primary-disabled: #898d95;
3499
3705
  --deframe-widget-color-text-secondary: #5c5f66;
3500
3706
  --deframe-widget-color-text-secondary-dark: #e3e4e8;
3501
3707
  --deframe-widget-color-text-secondary-disabled: #898d95;
@@ -3597,10 +3803,12 @@
3597
3803
  :root.dark {
3598
3804
  --deframe-widget-color-text-primary: #ffffff;
3599
3805
  --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;
3806
+ --deframe-widget-color-text-primary-disabled: #99a0ae;
3807
+ --deframe-widget-color-text-secondary: #99a0ae;
3808
+ --deframe-widget-color-text-secondary-dark: #99a0ae;
3809
+ --deframe-widget-color-text-secondary-disabled: #525866;
3810
+ --deframe-widget-color-text-tertiary: #525866;
3811
+ --deframe-widget-color-text-tertiary-dark: #525866;
3604
3812
  --deframe-widget-color-text-tertiary-disabled: #525866;
3605
3813
  --deframe-widget-color-placeholder-primary: #898d95;
3606
3814
  --deframe-widget-color-placeholder-primary-disabled: #898d95;
@@ -3608,12 +3816,15 @@
3608
3816
  --deframe-widget-color-placeholder-secondary-disabled: #525866;
3609
3817
  --deframe-widget-color-placeholder-tertiary: #5c5f66;
3610
3818
  --deframe-widget-color-placeholder-tertiary-disabled: #3a3a3a;
3611
- --deframe-widget-color-brand-primary: #405eff;
3612
- --deframe-widget-color-brand-primary-disabled: #525866;
3819
+ --deframe-widget-color-brand-primary: #1fc16b;
3820
+ --deframe-widget-color-brand-primary-dark: #1fc16b;
3821
+ --deframe-widget-color-brand-primary-disabled: rgba(31, 193, 107, 0.10);
3613
3822
  --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;
3823
+ --deframe-widget-color-brand-secondary-dark: #a9abf7;
3824
+ --deframe-widget-color-brand-secondary-disabled: rgba(169, 171, 247, 0.10);
3825
+ --deframe-widget-color-brand-tertiary: #1fc16b;
3826
+ --deframe-widget-color-brand-tertiary-dark: #1fc16b;
3827
+ --deframe-widget-color-brand-tertiary-disabled: rgba(31, 193, 107, 0.08);
3617
3828
  --deframe-widget-color-bg-primary: #ffffff;
3618
3829
  --deframe-widget-color-bg-primary-disabled: #232323;
3619
3830
  --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.24",
3
+ "version": "0.1.26",
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"