@deframe-sdk/components 0.1.33 → 0.1.35

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
@@ -10,11 +10,14 @@
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
12
  --color-yellow-100: oklch(97.3% 0.071 103.193);
13
+ --color-yellow-400: oklch(85.2% 0.199 91.936);
13
14
  --color-yellow-800: oklch(47.6% 0.114 61.907);
14
15
  --color-green-100: oklch(96.2% 0.044 156.743);
15
16
  --color-green-400: oklch(79.2% 0.209 151.711);
16
17
  --color-green-500: oklch(72.3% 0.219 149.579);
18
+ --color-green-600: oklch(62.7% 0.194 149.214);
17
19
  --color-green-800: oklch(44.8% 0.119 151.328);
20
+ --color-teal-600: oklch(60% 0.118 184.704);
18
21
  --color-blue-50: oklch(97% 0.014 254.604);
19
22
  --color-blue-100: oklch(93.2% 0.032 255.585);
20
23
  --color-blue-200: oklch(88.2% 0.059 254.128);
@@ -26,9 +29,11 @@
26
29
  --color-purple-600: oklch(55.8% 0.288 302.321);
27
30
  --color-purple-700: oklch(49.6% 0.265 301.924);
28
31
  --color-pink-500: oklch(65.6% 0.241 354.308);
32
+ --color-gray-50: oklch(98.5% 0.002 247.839);
29
33
  --color-gray-100: oklch(96.7% 0.003 264.542);
30
34
  --color-gray-200: oklch(92.8% 0.006 264.531);
31
35
  --color-gray-400: oklch(70.7% 0.022 261.325);
36
+ --color-gray-500: oklch(55.1% 0.027 264.364);
32
37
  --color-gray-600: oklch(44.6% 0.03 256.802);
33
38
  --color-gray-700: oklch(37.3% 0.034 259.733);
34
39
  --color-gray-800: oklch(27.8% 0.033 256.848);
@@ -36,6 +41,7 @@
36
41
  --color-black: #000;
37
42
  --color-white: #fff;
38
43
  --spacing: 0.25rem;
44
+ --container-xs: 20rem;
39
45
  --container-lg: 32rem;
40
46
  --container-2xl: 42rem;
41
47
  --container-3xl: 48rem;
@@ -43,6 +49,8 @@
43
49
  --text-xs--line-height: calc(1 / 0.75);
44
50
  --text-sm: 0.875rem;
45
51
  --text-sm--line-height: calc(1.25 / 0.875);
52
+ --text-lg: 1.125rem;
53
+ --text-lg--line-height: calc(1.75 / 1.125);
46
54
  --text-xl: 1.25rem;
47
55
  --text-xl--line-height: calc(1.75 / 1.25);
48
56
  --text-2xl: 1.5rem;
@@ -60,6 +68,7 @@
60
68
  --radius-sm: 0.25rem;
61
69
  --radius-lg: 0.5rem;
62
70
  --radius-xl: 0.75rem;
71
+ --radius-3xl: 1.5rem;
63
72
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
64
73
  --animate-spin: spin 1s linear infinite;
65
74
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -364,6 +373,9 @@
364
373
  .-my-\[var\(--deframe-widget-size-gap-sm\)\] {
365
374
  margin-block: calc(var(--deframe-widget-size-gap-sm) * -1);
366
375
  }
376
+ .my-2 {
377
+ margin-block: calc(var(--spacing) * 2);
378
+ }
367
379
  .my-4 {
368
380
  margin-block: calc(var(--spacing) * 4);
369
381
  }
@@ -454,6 +466,9 @@
454
466
  .\[margin-bottom\:var\(--deframe-widget-size-gap-xs\)\] {
455
467
  margin-bottom: var(--deframe-widget-size-gap-xs);
456
468
  }
469
+ .mb-1 {
470
+ margin-bottom: calc(var(--spacing) * 1);
471
+ }
457
472
  .mb-2 {
458
473
  margin-bottom: calc(var(--spacing) * 2);
459
474
  }
@@ -487,6 +502,9 @@
487
502
  .mb-\[var\(--deframe-widget-size-gap-xs\)\] {
488
503
  margin-bottom: var(--deframe-widget-size-gap-xs);
489
504
  }
505
+ .ml-2 {
506
+ margin-left: calc(var(--spacing) * 2);
507
+ }
490
508
  .ml-4 {
491
509
  margin-left: calc(var(--spacing) * 4);
492
510
  }
@@ -631,6 +649,9 @@
631
649
  .h-\[20px\] {
632
650
  height: 20px;
633
651
  }
652
+ .h-\[24px\] {
653
+ height: 24px;
654
+ }
634
655
  .h-\[32px\] {
635
656
  height: 32px;
636
657
  }
@@ -679,12 +700,18 @@
679
700
  .h-\[136px\] {
680
701
  height: 136px;
681
702
  }
703
+ .h-\[174px\] {
704
+ height: 174px;
705
+ }
682
706
  .h-\[200px\] {
683
707
  height: 200px;
684
708
  }
685
709
  .h-\[300px\] {
686
710
  height: 300px;
687
711
  }
712
+ .h-\[400px\] {
713
+ height: 400px;
714
+ }
688
715
  .h-\[440px\] {
689
716
  height: 440px;
690
717
  }
@@ -733,12 +760,18 @@
733
760
  .min-h-16 {
734
761
  min-height: calc(var(--spacing) * 16);
735
762
  }
763
+ .min-h-\[10px\] {
764
+ min-height: 10px;
765
+ }
736
766
  .min-h-\[16px\] {
737
767
  min-height: 16px;
738
768
  }
739
769
  .min-h-\[72px\] {
740
770
  min-height: 72px;
741
771
  }
772
+ .min-h-\[80vh\] {
773
+ min-height: 80vh;
774
+ }
742
775
  .min-h-\[86px\] {
743
776
  min-height: 86px;
744
777
  }
@@ -901,6 +934,9 @@
901
934
  .w-\[120px\] {
902
935
  width: 120px;
903
936
  }
937
+ .w-\[174px\] {
938
+ width: 174px;
939
+ }
904
940
  .w-\[200px\] {
905
941
  width: 200px;
906
942
  }
@@ -1018,6 +1054,9 @@
1018
1054
  .max-w-lg {
1019
1055
  max-width: var(--container-lg);
1020
1056
  }
1057
+ .max-w-xs {
1058
+ max-width: var(--container-xs);
1059
+ }
1021
1060
  .min-w-0 {
1022
1061
  min-width: calc(var(--spacing) * 0);
1023
1062
  }
@@ -1189,6 +1228,12 @@
1189
1228
  .\[gap\:var\(--deframe-widget-size-gap-xs\)\] {
1190
1229
  gap: var(--deframe-widget-size-gap-xs);
1191
1230
  }
1231
+ .gap-0 {
1232
+ gap: calc(var(--spacing) * 0);
1233
+ }
1234
+ .gap-0\.5 {
1235
+ gap: calc(var(--spacing) * 0.5);
1236
+ }
1192
1237
  .gap-1 {
1193
1238
  gap: calc(var(--spacing) * 1);
1194
1239
  }
@@ -1308,6 +1353,9 @@
1308
1353
  border-color: var(--deframe-widget-color-border-tertiary);
1309
1354
  }
1310
1355
  }
1356
+ .self-center {
1357
+ align-self: center;
1358
+ }
1311
1359
  .self-start {
1312
1360
  align-self: flex-start;
1313
1361
  }
@@ -1340,6 +1388,9 @@
1340
1388
  .rounded {
1341
1389
  border-radius: 0.25rem;
1342
1390
  }
1391
+ .rounded-3xl {
1392
+ border-radius: var(--radius-3xl);
1393
+ }
1343
1394
  .rounded-\[10px\] {
1344
1395
  border-radius: 10px;
1345
1396
  }
@@ -1629,6 +1680,12 @@
1629
1680
  .border-blue-500 {
1630
1681
  border-color: var(--color-blue-500);
1631
1682
  }
1683
+ .border-gray-200\/300 {
1684
+ border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 300%, transparent);
1685
+ @supports (color: color-mix(in lab, red, red)) {
1686
+ border-color: color-mix(in oklab, var(--color-gray-200) 300%, transparent);
1687
+ }
1688
+ }
1632
1689
  .border-gray-700 {
1633
1690
  border-color: var(--color-gray-700);
1634
1691
  }
@@ -1650,9 +1707,18 @@
1650
1707
  .bg-\[\#1FC16B\] {
1651
1708
  background-color: #1FC16B;
1652
1709
  }
1710
+ .bg-\[\#1FC16B\]\/10 {
1711
+ background-color: color-mix(in oklab, #1FC16B 10%, transparent);
1712
+ }
1713
+ .bg-\[\#1FC16B\]\/20 {
1714
+ background-color: color-mix(in oklab, #1FC16B 20%, transparent);
1715
+ }
1653
1716
  .bg-\[\#2A2A2A\] {
1654
1717
  background-color: #2A2A2A;
1655
1718
  }
1719
+ .bg-\[\#2ba176\] {
1720
+ background-color: #2ba176;
1721
+ }
1656
1722
  .bg-\[\#002608\] {
1657
1723
  background-color: #002608;
1658
1724
  }
@@ -1662,6 +1728,9 @@
1662
1728
  .bg-\[\#12151c\] {
1663
1729
  background-color: #12151c;
1664
1730
  }
1731
+ .bg-\[\#F6A700\] {
1732
+ background-color: #F6A700;
1733
+ }
1665
1734
  .bg-\[\#ff7a45\] {
1666
1735
  background-color: #ff7a45;
1667
1736
  }
@@ -1671,9 +1740,21 @@
1671
1740
  background-color: color-mix(in srgb,var(--deframe-widget-color-bg-primary) 88%,transparent);
1672
1741
  }
1673
1742
  }
1743
+ .bg-\[color-mix\(in_srgb\,var\(--deframe-widget-color-bg-secondary\)_88\%\,transparent\)\] {
1744
+ background-color: var(--deframe-widget-color-bg-secondary);
1745
+ @supports (color: color-mix(in lab, red, red)) {
1746
+ background-color: color-mix(in srgb,var(--deframe-widget-color-bg-secondary) 88%,transparent);
1747
+ }
1748
+ }
1674
1749
  .bg-\[color\:color-mix\(\.\.\.\)\] {
1675
1750
  background-color: color-mix(...);
1676
1751
  }
1752
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-primary\)_80\%\,transparent\)\] {
1753
+ background-color: var(--deframe-widget-color-bg-primary);
1754
+ @supports (color: color-mix(in lab, red, red)) {
1755
+ background-color: color-mix(in srgb,var(--deframe-widget-color-bg-primary) 80%,transparent);
1756
+ }
1757
+ }
1677
1758
  .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-primary\)_88\%\,transparent\)\] {
1678
1759
  background-color: var(--deframe-widget-color-bg-primary);
1679
1760
  @supports (color: color-mix(in lab, red, red)) {
@@ -1833,6 +1914,12 @@
1833
1914
  background-color: color-mix(in oklab, var(--deframe-widget-color-bg-primary) 50%, transparent);
1834
1915
  }
1835
1916
  }
1917
+ .bg-\[var\(--deframe-widget-color-bg-primary\)\]\/90 {
1918
+ background-color: var(--deframe-widget-color-bg-primary);
1919
+ @supports (color: color-mix(in lab, red, red)) {
1920
+ background-color: color-mix(in oklab, var(--deframe-widget-color-bg-primary) 90%, transparent);
1921
+ }
1922
+ }
1836
1923
  .bg-\[var\(--deframe-widget-color-bg-primary-dark\)\] {
1837
1924
  background-color: var(--deframe-widget-color-bg-primary-dark);
1838
1925
  }
@@ -1872,6 +1959,12 @@
1872
1959
  .bg-\[var\(--deframe-widget-color-brand-primary\)\] {
1873
1960
  background-color: var(--deframe-widget-color-brand-primary);
1874
1961
  }
1962
+ .bg-\[var\(--deframe-widget-color-brand-primary\)\]\/20 {
1963
+ background-color: var(--deframe-widget-color-brand-primary);
1964
+ @supports (color: color-mix(in lab, red, red)) {
1965
+ background-color: color-mix(in oklab, var(--deframe-widget-color-brand-primary) 20%, transparent);
1966
+ }
1967
+ }
1875
1968
  .bg-\[var\(--deframe-widget-color-brand-primary-disabled\)\] {
1876
1969
  background-color: var(--deframe-widget-color-brand-primary-disabled);
1877
1970
  }
@@ -1959,9 +2052,15 @@
1959
2052
  .bg-blue-900 {
1960
2053
  background-color: var(--color-blue-900);
1961
2054
  }
2055
+ .bg-gray-50\/100 {
2056
+ background-color: var(--color-gray-50);
2057
+ }
1962
2058
  .bg-gray-100 {
1963
2059
  background-color: var(--color-gray-100);
1964
2060
  }
2061
+ .bg-gray-200 {
2062
+ background-color: var(--color-gray-200);
2063
+ }
1965
2064
  .bg-gray-900 {
1966
2065
  background-color: var(--color-gray-900);
1967
2066
  }
@@ -1974,6 +2073,9 @@
1974
2073
  background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
1975
2074
  }
1976
2075
  }
2076
+ .bg-green-600 {
2077
+ background-color: var(--color-green-600);
2078
+ }
1977
2079
  .bg-purple-500 {
1978
2080
  background-color: var(--color-purple-500);
1979
2081
  }
@@ -1983,6 +2085,9 @@
1983
2085
  .bg-red-500 {
1984
2086
  background-color: var(--color-red-500);
1985
2087
  }
2088
+ .bg-teal-600 {
2089
+ background-color: var(--color-teal-600);
2090
+ }
1986
2091
  .bg-transparent {
1987
2092
  background-color: transparent;
1988
2093
  }
@@ -2143,6 +2248,9 @@
2143
2248
  .px-\[6px\] {
2144
2249
  padding-inline: 6px;
2145
2250
  }
2251
+ .px-\[8px\] {
2252
+ padding-inline: 8px;
2253
+ }
2146
2254
  .px-\[10px\] {
2147
2255
  padding-inline: 10px;
2148
2256
  }
@@ -2203,6 +2311,9 @@
2203
2311
  .py-\[3px\] {
2204
2312
  padding-block: 3px;
2205
2313
  }
2314
+ .py-\[4px\] {
2315
+ padding-block: 4px;
2316
+ }
2206
2317
  .py-\[5px\] {
2207
2318
  padding-block: 5px;
2208
2319
  }
@@ -2299,6 +2410,9 @@
2299
2410
  .pb-2 {
2300
2411
  padding-bottom: calc(var(--spacing) * 2);
2301
2412
  }
2413
+ .pb-3 {
2414
+ padding-bottom: calc(var(--spacing) * 3);
2415
+ }
2302
2416
  .pb-4 {
2303
2417
  padding-bottom: calc(var(--spacing) * 4);
2304
2418
  }
@@ -2369,6 +2483,10 @@
2369
2483
  font-size: var(--text-2xl);
2370
2484
  line-height: var(--tw-leading, var(--text-2xl--line-height));
2371
2485
  }
2486
+ .text-lg {
2487
+ font-size: var(--text-lg);
2488
+ line-height: var(--tw-leading, var(--text-lg--line-height));
2489
+ }
2372
2490
  .text-sm {
2373
2491
  font-size: var(--text-sm);
2374
2492
  line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -2447,12 +2565,30 @@
2447
2565
  .text-\[20px\] {
2448
2566
  font-size: 20px;
2449
2567
  }
2568
+ .text-\[21px\] {
2569
+ font-size: 21px;
2570
+ }
2450
2571
  .text-\[22px\] {
2451
2572
  font-size: 22px;
2452
2573
  }
2574
+ .text-\[24px\] {
2575
+ font-size: 24px;
2576
+ }
2577
+ .text-\[26px\] {
2578
+ font-size: 26px;
2579
+ }
2453
2580
  .text-\[28px\] {
2454
2581
  font-size: 28px;
2455
2582
  }
2583
+ .text-\[30px\] {
2584
+ font-size: 30px;
2585
+ }
2586
+ .text-\[32px\] {
2587
+ font-size: 32px;
2588
+ }
2589
+ .text-\[34px\] {
2590
+ font-size: 34px;
2591
+ }
2456
2592
  .text-\[36px\] {
2457
2593
  font-size: 36px;
2458
2594
  }
@@ -2485,6 +2621,10 @@
2485
2621
  --tw-leading: calc(var(--spacing) * 5);
2486
2622
  line-height: calc(var(--spacing) * 5);
2487
2623
  }
2624
+ .leading-\[0\] {
2625
+ --tw-leading: 0;
2626
+ line-height: 0;
2627
+ }
2488
2628
  .leading-\[1\.1\] {
2489
2629
  --tw-leading: 1.1;
2490
2630
  line-height: 1.1;
@@ -2681,6 +2821,9 @@
2681
2821
  .break-all {
2682
2822
  word-break: break-all;
2683
2823
  }
2824
+ .text-ellipsis {
2825
+ text-overflow: ellipsis;
2826
+ }
2684
2827
  .whitespace-nowrap {
2685
2828
  white-space: nowrap;
2686
2829
  }
@@ -2690,6 +2833,9 @@
2690
2833
  .text-\[\#0A0A0A\] {
2691
2834
  color: #0A0A0A;
2692
2835
  }
2836
+ .text-\[\#1FC16B\] {
2837
+ color: #1FC16B;
2838
+ }
2693
2839
  .text-\[\#5A5A5A\] {
2694
2840
  color: #5A5A5A;
2695
2841
  }
@@ -2798,9 +2944,21 @@
2798
2944
  .text-gray-200 {
2799
2945
  color: var(--color-gray-200);
2800
2946
  }
2947
+ .text-gray-400 {
2948
+ color: var(--color-gray-400);
2949
+ }
2950
+ .text-gray-500\/600 {
2951
+ color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 600%, transparent);
2952
+ @supports (color: color-mix(in lab, red, red)) {
2953
+ color: color-mix(in oklab, var(--color-gray-500) 600%, transparent);
2954
+ }
2955
+ }
2801
2956
  .text-gray-600 {
2802
2957
  color: var(--color-gray-600);
2803
2958
  }
2959
+ .text-gray-700 {
2960
+ color: var(--color-gray-700);
2961
+ }
2804
2962
  .text-gray-800 {
2805
2963
  color: var(--color-gray-800);
2806
2964
  }
@@ -2825,6 +2983,9 @@
2825
2983
  .text-white {
2826
2984
  color: var(--color-white);
2827
2985
  }
2986
+ .text-yellow-400 {
2987
+ color: var(--color-yellow-400);
2988
+ }
2828
2989
  .text-yellow-800 {
2829
2990
  color: var(--color-yellow-800);
2830
2991
  }
@@ -2865,6 +3026,9 @@
2865
3026
  .opacity-0 {
2866
3027
  opacity: 0%;
2867
3028
  }
3029
+ .opacity-20 {
3030
+ opacity: 20%;
3031
+ }
2868
3032
  .opacity-25 {
2869
3033
  opacity: 25%;
2870
3034
  }
@@ -3000,6 +3164,10 @@
3000
3164
  --tw-blur: blur(160px);
3001
3165
  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,);
3002
3166
  }
3167
+ .blur-sm {
3168
+ --tw-blur: blur(var(--blur-sm));
3169
+ 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,);
3170
+ }
3003
3171
  .filter {
3004
3172
  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,);
3005
3173
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deframe-sdk/components",
3
- "version": "0.1.33",
3
+ "version": "0.1.35",
4
4
  "packageManager": "pnpm@9.0.0",
5
5
  "description": "Deframe SDK React component library",
6
6
  "engines": {