@deframe-sdk/components 0.1.14 → 0.1.15

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 +9 -5
  2. package/dist/index.d.ts +9 -5
  3. package/dist/index.js +72 -34
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +72 -34
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +58 -114
  8. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -360,9 +360,6 @@
360
360
  .mt-0\.5 {
361
361
  margin-top: calc(var(--spacing) * 0.5);
362
362
  }
363
- .mt-4 {
364
- margin-top: calc(var(--spacing) * 4);
365
- }
366
363
  .mt-\[-4px\] {
367
364
  margin-top: -4px;
368
365
  }
@@ -405,9 +402,6 @@
405
402
  .\[margin-bottom\:var\(--deframe-widget-size-gap-xs\)\] {
406
403
  margin-bottom: var(--deframe-widget-size-gap-xs);
407
404
  }
408
- .mb-4 {
409
- margin-bottom: calc(var(--spacing) * 4);
410
- }
411
405
  .mb-\[6px\] {
412
406
  margin-bottom: 6px;
413
407
  }
@@ -2089,9 +2083,6 @@
2089
2083
  .text-\[color\:var\(--deframe-widget-color-brand-secondary\)\] {
2090
2084
  color: var(--deframe-widget-color-brand-secondary);
2091
2085
  }
2092
- .text-\[color\:var\(--deframe-widget-color-brand-tertiary\)\] {
2093
- color: var(--deframe-widget-color-brand-tertiary);
2094
- }
2095
2086
  .text-\[color\:var\(--deframe-widget-color-placeholder-primary\)\] {
2096
2087
  color: var(--deframe-widget-color-placeholder-primary);
2097
2088
  }
@@ -2107,6 +2098,18 @@
2107
2098
  .text-\[color\:var\(--deframe-widget-color-state-warning\)\] {
2108
2099
  color: var(--deframe-widget-color-state-warning);
2109
2100
  }
2101
+ .text-\[color\:var\(--deframe-widget-color-text-highlight\)\] {
2102
+ color: var(--deframe-widget-color-text-highlight);
2103
+ }
2104
+ .text-\[color\:var\(--deframe-widget-color-text-highlight-disabled\)\] {
2105
+ color: var(--deframe-widget-color-text-highlight-disabled);
2106
+ }
2107
+ .text-\[color\:var\(--deframe-widget-color-text-inverse\)\] {
2108
+ color: var(--deframe-widget-color-text-inverse);
2109
+ }
2110
+ .text-\[color\:var\(--deframe-widget-color-text-inverse-disabled\)\] {
2111
+ color: var(--deframe-widget-color-text-inverse-disabled);
2112
+ }
2110
2113
  .text-\[color\:var\(--deframe-widget-color-text-primary\)\] {
2111
2114
  color: var(--deframe-widget-color-text-primary);
2112
2115
  }
@@ -2131,9 +2134,6 @@
2131
2134
  .text-\[font-size\:var\(--deframe-widget-font-size-sm\)\] {
2132
2135
  color: var(--deframe-widget-font-size-sm);
2133
2136
  }
2134
- .text-\[var\(--deframe-widget-color-brand-primary-disabled\)\] {
2135
- color: var(--deframe-widget-color-brand-primary-disabled);
2136
- }
2137
2137
  .text-\[var\(--deframe-widget-color-state-error\)\] {
2138
2138
  color: var(--deframe-widget-color-state-error);
2139
2139
  }
@@ -2149,9 +2149,6 @@
2149
2149
  .text-\[var\(--deframe-widget-color-text-primary\)\] {
2150
2150
  color: var(--deframe-widget-color-text-primary);
2151
2151
  }
2152
- .text-\[var\(--deframe-widget-color-text-primary-disabled\)\] {
2153
- color: var(--deframe-widget-color-text-primary-disabled);
2154
- }
2155
2152
  .text-\[var\(--deframe-widget-color-text-secondary\)\] {
2156
2153
  color: var(--deframe-widget-color-text-secondary);
2157
2154
  }
@@ -2738,8 +2735,7 @@
2738
2735
  }
2739
2736
  }
2740
2737
  }
2741
- :root,
2742
- .deframe-widget {
2738
+ :root {
2743
2739
  --deframe-widget-font-family: 'Satoshi', Inter, sans-serif;
2744
2740
  --deframe-widget-font-size-xs: 11px;
2745
2741
  --deframe-widget-font-size-sm: 13px;
@@ -2769,6 +2765,12 @@
2769
2765
  --deframe-widget-color-text-tertiary: #898d95;
2770
2766
  --deframe-widget-color-text-tertiary-dark: #c6c8cc;
2771
2767
  --deframe-widget-color-text-tertiary-disabled: #5c5f66;
2768
+ --deframe-widget-color-text-inverse: #252050;
2769
+ --deframe-widget-color-text-inverse-dark: #FFFFFF;
2770
+ --deframe-widget-color-text-inverse-disabled: #FFFFFF;
2771
+ --deframe-widget-color-text-highlight: #2BA176;
2772
+ --deframe-widget-color-text-highlight-dark: #2BA176;
2773
+ --deframe-widget-color-text-highlight-disabled: #2BA176;
2772
2774
  --deframe-widget-color-placeholder-primary: #898d95;
2773
2775
  --deframe-widget-color-placeholder-primary-dark: #e3e4e8;
2774
2776
  --deframe-widget-color-placeholder-primary-disabled: #898d95;
@@ -2787,6 +2789,9 @@
2787
2789
  --deframe-widget-color-brand-tertiary: #405eff;
2788
2790
  --deframe-widget-color-brand-tertiary-dark: #a9abf7;
2789
2791
  --deframe-widget-color-brand-tertiary-disabled: #d7deea;
2792
+ --deframe-widget-color-brand-tint: #EEF0FF;
2793
+ --deframe-widget-color-brand-tint-dark: #EEF0FF;
2794
+ --deframe-widget-color-brand-tint-disabled: #525866;
2790
2795
  --deframe-widget-color-bg-primary: #ffffff;
2791
2796
  --deframe-widget-color-bg-primary-dark: #0e0e0e;
2792
2797
  --deframe-widget-color-bg-primary-disabled: #eaecf0;
@@ -2794,17 +2799,23 @@
2794
2799
  --deframe-widget-color-bg-secondary-dark: #1a1a1a;
2795
2800
  --deframe-widget-color-bg-secondary-disabled: #eaecf0;
2796
2801
  --deframe-widget-color-bg-tertiary: #eaecf0;
2797
- --deframe-widget-color-bg-tertiary-dark: rgba(64, 94, 255, 0.15);
2798
- --deframe-widget-color-bg-tertiary-disabled: rgba(64, 94, 255, 0.08);
2799
- --deframe-widget-color-border-primary: rgba(64, 94, 255, 0.25);
2800
- --deframe-widget-color-border-primary-dark: rgba(64, 94, 255, 0.3);
2801
- --deframe-widget-color-border-primary-disabled: rgba(64, 94, 255, 0.12);
2802
+ --deframe-widget-color-bg-tertiary-dark: #405EFF26;
2803
+ --deframe-widget-color-bg-tertiary-disabled: #405EFF14;
2804
+ --deframe-widget-color-bg-raised: #FFFFFF;
2805
+ --deframe-widget-color-bg-raised-dark: #FFFFFF;
2806
+ --deframe-widget-color-bg-raised-disabled: #FFFFFF;
2807
+ --deframe-widget-color-bg-inverse: #252050;
2808
+ --deframe-widget-color-bg-inverse-dark: #252050;
2809
+ --deframe-widget-color-bg-inverse-disabled: #252050;
2810
+ --deframe-widget-color-border-primary: #405EFF40;
2811
+ --deframe-widget-color-border-primary-dark: #405EFF4D;
2812
+ --deframe-widget-color-border-primary-disabled: #405EFF1F;
2802
2813
  --deframe-widget-color-border-secondary: #e3e4e8;
2803
2814
  --deframe-widget-color-border-secondary-dark: #2c2c2c;
2804
2815
  --deframe-widget-color-border-secondary-disabled: #eaecf0;
2805
- --deframe-widget-color-border-tertiary: rgba(64, 94, 255, 0.08);
2806
- --deframe-widget-color-border-tertiary-dark: rgba(255, 255, 255, 0.05);
2807
- --deframe-widget-color-border-tertiary-disabled: rgba(64, 94, 255, 0.04);
2816
+ --deframe-widget-color-border-tertiary: #405EFF14;
2817
+ --deframe-widget-color-border-tertiary-dark: #FFFFFF0D;
2818
+ --deframe-widget-color-border-tertiary-disabled: #405EFF0A;
2808
2819
  --deframe-widget-color-state-info: #58b4ff;
2809
2820
  --deframe-widget-color-state-warning: #f6a700;
2810
2821
  --deframe-widget-color-state-error: #ff4d4f;
@@ -2846,101 +2857,39 @@
2846
2857
  --deframe-widget-size-radius-xxl: 32px;
2847
2858
  --deframe-widget-size-radius-full: 9999px;
2848
2859
  }
2849
- :root:is(.dark, .cryptocontrol, .cryptocontrol-v2),
2850
- .deframe-widget:is(.dark, .cryptocontrol, .cryptocontrol-v2) {
2851
- --deframe-widget-color-text-primary: var(--deframe-widget-color-text-primary-dark);
2860
+ :root.dark {
2861
+ --deframe-widget-color-text-primary: #ffffff;
2862
+ --deframe-widget-color-text-primary-dark: #ffffff;
2852
2863
  --deframe-widget-color-text-primary-disabled: #898d95;
2853
- --deframe-widget-color-text-secondary: var(--deframe-widget-color-text-secondary-dark);
2864
+ --deframe-widget-color-text-secondary: #5c5f66;
2854
2865
  --deframe-widget-color-text-secondary-disabled: #898d95;
2855
- --deframe-widget-color-text-tertiary: var(--deframe-widget-color-text-tertiary-dark);
2866
+ --deframe-widget-color-text-tertiary: #898d95;
2856
2867
  --deframe-widget-color-text-tertiary-disabled: #525866;
2857
- --deframe-widget-color-placeholder-primary: var(--deframe-widget-color-placeholder-primary-dark);
2868
+ --deframe-widget-color-placeholder-primary: #898d95;
2858
2869
  --deframe-widget-color-placeholder-primary-disabled: #898d95;
2859
- --deframe-widget-color-placeholder-secondary: var(--deframe-widget-color-placeholder-secondary-dark);
2870
+ --deframe-widget-color-placeholder-secondary: #c6c8cc;
2860
2871
  --deframe-widget-color-placeholder-secondary-disabled: #525866;
2861
- --deframe-widget-color-placeholder-tertiary: var(--deframe-widget-color-placeholder-tertiary-dark);
2872
+ --deframe-widget-color-placeholder-tertiary: #5c5f66;
2862
2873
  --deframe-widget-color-placeholder-tertiary-disabled: #3a3a3a;
2863
- --deframe-widget-color-brand-primary: var(--deframe-widget-color-brand-primary-dark);
2874
+ --deframe-widget-color-brand-primary: #405eff;
2864
2875
  --deframe-widget-color-brand-primary-disabled: #525866;
2865
- --deframe-widget-color-brand-secondary: var(--deframe-widget-color-brand-secondary-dark);
2876
+ --deframe-widget-color-brand-secondary: #a9abf7;
2866
2877
  --deframe-widget-color-brand-secondary-disabled: #525866;
2867
- --deframe-widget-color-brand-tertiary: var(--deframe-widget-color-brand-tertiary-dark);
2878
+ --deframe-widget-color-brand-tertiary: #405eff;
2868
2879
  --deframe-widget-color-brand-tertiary-disabled: #525866;
2869
- --deframe-widget-color-bg-primary: var(--deframe-widget-color-bg-primary-dark);
2880
+ --deframe-widget-color-bg-primary: #ffffff;
2870
2881
  --deframe-widget-color-bg-primary-disabled: #232323;
2871
- --deframe-widget-color-bg-secondary: var(--deframe-widget-color-bg-secondary-dark);
2882
+ --deframe-widget-color-bg-secondary: #f8f9fa;
2872
2883
  --deframe-widget-color-bg-secondary-disabled: #141414;
2873
- --deframe-widget-color-bg-tertiary: var(--deframe-widget-color-bg-tertiary-dark);
2874
- --deframe-widget-color-bg-tertiary-disabled: rgba(64, 94, 255, 0.08);
2875
- --deframe-widget-color-border-primary: var(--deframe-widget-color-border-primary-dark);
2876
- --deframe-widget-color-border-primary-disabled: rgba(255, 255, 255, 0.08);
2877
- --deframe-widget-color-border-secondary: var(--deframe-widget-color-border-secondary-dark);
2878
- --deframe-widget-color-border-secondary-disabled: rgba(255, 255, 255, 0.06);
2879
- --deframe-widget-color-border-tertiary: var(--deframe-widget-color-border-tertiary-dark);
2880
- --deframe-widget-color-border-tertiary-disabled: rgba(255, 255, 255, 0.03);
2881
- }
2882
- :root.cryptocontrol,
2883
- .deframe-widget.cryptocontrol {
2884
- --deframe-widget-color-brand-primary: #1fc16b;
2885
- --deframe-widget-color-brand-primary-dark: #1fc16b;
2886
- --deframe-widget-color-brand-tertiary: #1fc16b;
2887
- --deframe-widget-color-brand-tertiary-dark: #1fc16b;
2888
- --deframe-widget-color-bg-tertiary: rgba(31, 193, 107, 0.18);
2889
- --deframe-widget-color-bg-tertiary-dark: rgba(31, 193, 107, 0.18);
2890
- --deframe-widget-color-bg-tertiary-disabled: rgba(31, 193, 107, 0.1);
2891
- --deframe-widget-color-border-primary: rgba(31, 193, 107, 0.4);
2892
- --deframe-widget-color-border-primary-dark: rgba(31, 193, 107, 0.4);
2893
- --deframe-widget-color-border-primary-disabled: rgba(31, 193, 107, 0.18);
2894
- --deframe-widget-color-state-success: #1fc16b;
2895
- }
2896
- :root.cryptocontrol-v2,
2897
- .deframe-widget.cryptocontrol-v2 {
2898
- --deframe-widget-color-text-primary: #ffffff;
2899
- --deframe-widget-color-text-primary-dark: #ffffff;
2900
- --deframe-widget-color-text-primary-disabled: #525866;
2901
- --deframe-widget-color-text-secondary: #99a0ae;
2902
- --deframe-widget-color-text-secondary-dark: #99a0ae;
2903
- --deframe-widget-color-text-secondary-disabled: #525866;
2904
- --deframe-widget-color-text-tertiary: #525866;
2905
- --deframe-widget-color-text-tertiary-dark: #525866;
2906
- --deframe-widget-color-text-tertiary-disabled: #525866;
2907
- --deframe-widget-color-placeholder-primary: #99a0ae;
2908
- --deframe-widget-color-placeholder-primary-dark: #99a0ae;
2909
- --deframe-widget-color-placeholder-primary-disabled: #525866;
2910
- --deframe-widget-color-placeholder-secondary: #525866;
2911
- --deframe-widget-color-placeholder-secondary-dark: #525866;
2912
- --deframe-widget-color-placeholder-secondary-disabled: #525866;
2913
- --deframe-widget-color-placeholder-tertiary: #525866;
2914
- --deframe-widget-color-placeholder-tertiary-dark: #525866;
2915
- --deframe-widget-color-placeholder-tertiary-disabled: #525866;
2916
- --deframe-widget-color-brand-primary: #1fc16b;
2917
- --deframe-widget-color-brand-primary-dark: #1fc16b;
2918
- --deframe-widget-color-brand-primary-disabled: #525866;
2919
- --deframe-widget-color-brand-secondary: #a9abf7;
2920
- --deframe-widget-color-brand-secondary-dark: #a9abf7;
2921
- --deframe-widget-color-brand-secondary-disabled: #525866;
2922
- --deframe-widget-color-brand-tertiary: #1fc16b;
2923
- --deframe-widget-color-brand-tertiary-dark: #1fc16b;
2924
- --deframe-widget-color-brand-tertiary-disabled: #525866;
2925
- --deframe-widget-color-bg-primary: #11141b;
2926
- --deframe-widget-color-bg-primary-dark: #11141b;
2927
- --deframe-widget-color-bg-primary-disabled: #181b25;
2928
- --deframe-widget-color-bg-secondary: #181b25;
2929
- --deframe-widget-color-bg-secondary-dark: #181b25;
2930
- --deframe-widget-color-bg-secondary-disabled: #222530;
2931
- --deframe-widget-color-bg-tertiary: #222530;
2932
- --deframe-widget-color-bg-tertiary-dark: #222530;
2933
- --deframe-widget-color-bg-tertiary-disabled: #181b25;
2934
- --deframe-widget-color-border-primary: rgba(255, 255, 255, 0.12);
2935
- --deframe-widget-color-border-primary-dark: rgba(255, 255, 255, 0.12);
2936
- --deframe-widget-color-border-primary-disabled: rgba(255, 255, 255, 0.05);
2937
- --deframe-widget-color-border-secondary: rgba(255, 255, 255, 0.07);
2938
- --deframe-widget-color-border-secondary-dark: rgba(255, 255, 255, 0.07);
2939
- --deframe-widget-color-border-secondary-disabled: rgba(255, 255, 255, 0.05);
2940
- --deframe-widget-color-border-tertiary: rgba(255, 255, 255, 0.05);
2941
- --deframe-widget-color-border-tertiary-dark: rgba(255, 255, 255, 0.05);
2942
- --deframe-widget-color-border-tertiary-disabled: rgba(255, 255, 255, 0.03);
2943
- --deframe-widget-color-state-success: #1fc16b;
2884
+ --deframe-widget-color-bg-tertiary: #eaecf0;
2885
+ --deframe-widget-color-bg-tertiary-disabled: #405EFF14;
2886
+ --deframe-widget-color-bg-raised: #ffffff;
2887
+ --deframe-widget-color-border-primary: #405EFF40;
2888
+ --deframe-widget-color-border-primary-disabled: #FFFFFF14;
2889
+ --deframe-widget-color-border-secondary: #e3e4e8;
2890
+ --deframe-widget-color-border-secondary-disabled: #FFFFFF0F;
2891
+ --deframe-widget-color-border-tertiary: #405EFF14;
2892
+ --deframe-widget-color-border-tertiary-disabled: #FFFFFF08;
2944
2893
  }
2945
2894
  .deframe-widget {
2946
2895
  background: var(--deframe-widget-color-bg-primary);
@@ -2953,11 +2902,6 @@
2953
2902
  .deframe-widget select {
2954
2903
  font-family: inherit;
2955
2904
  }
2956
- body {
2957
- background: var(--deframe-widget-color-bg-primary);
2958
- color: var(--deframe-widget-color-text-primary);
2959
- font-family: var(--deframe-widget-font-family);
2960
- }
2961
2905
  @keyframes deframe-widget-slide-up {
2962
2906
  0% {
2963
2907
  transform: translateY(100%);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deframe-sdk/components",
3
- "version": "0.1.14",
3
+ "version": "0.1.15",
4
4
  "packageManager": "pnpm@9.0.0",
5
5
  "description": "Deframe SDK React component library",
6
6
  "engines": {