@deframe-sdk/components 0.1.33 → 0.1.34

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
  }
@@ -1674,6 +1743,12 @@
1674
1743
  .bg-\[color\:color-mix\(\.\.\.\)\] {
1675
1744
  background-color: color-mix(...);
1676
1745
  }
1746
+ .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-primary\)_80\%\,transparent\)\] {
1747
+ background-color: var(--deframe-widget-color-bg-primary);
1748
+ @supports (color: color-mix(in lab, red, red)) {
1749
+ background-color: color-mix(in srgb,var(--deframe-widget-color-bg-primary) 80%,transparent);
1750
+ }
1751
+ }
1677
1752
  .bg-\[color\:color-mix\(in_srgb\,var\(--deframe-widget-color-bg-primary\)_88\%\,transparent\)\] {
1678
1753
  background-color: var(--deframe-widget-color-bg-primary);
1679
1754
  @supports (color: color-mix(in lab, red, red)) {
@@ -1833,6 +1908,12 @@
1833
1908
  background-color: color-mix(in oklab, var(--deframe-widget-color-bg-primary) 50%, transparent);
1834
1909
  }
1835
1910
  }
1911
+ .bg-\[var\(--deframe-widget-color-bg-primary\)\]\/90 {
1912
+ background-color: var(--deframe-widget-color-bg-primary);
1913
+ @supports (color: color-mix(in lab, red, red)) {
1914
+ background-color: color-mix(in oklab, var(--deframe-widget-color-bg-primary) 90%, transparent);
1915
+ }
1916
+ }
1836
1917
  .bg-\[var\(--deframe-widget-color-bg-primary-dark\)\] {
1837
1918
  background-color: var(--deframe-widget-color-bg-primary-dark);
1838
1919
  }
@@ -1872,6 +1953,12 @@
1872
1953
  .bg-\[var\(--deframe-widget-color-brand-primary\)\] {
1873
1954
  background-color: var(--deframe-widget-color-brand-primary);
1874
1955
  }
1956
+ .bg-\[var\(--deframe-widget-color-brand-primary\)\]\/20 {
1957
+ background-color: var(--deframe-widget-color-brand-primary);
1958
+ @supports (color: color-mix(in lab, red, red)) {
1959
+ background-color: color-mix(in oklab, var(--deframe-widget-color-brand-primary) 20%, transparent);
1960
+ }
1961
+ }
1875
1962
  .bg-\[var\(--deframe-widget-color-brand-primary-disabled\)\] {
1876
1963
  background-color: var(--deframe-widget-color-brand-primary-disabled);
1877
1964
  }
@@ -1959,9 +2046,15 @@
1959
2046
  .bg-blue-900 {
1960
2047
  background-color: var(--color-blue-900);
1961
2048
  }
2049
+ .bg-gray-50\/100 {
2050
+ background-color: var(--color-gray-50);
2051
+ }
1962
2052
  .bg-gray-100 {
1963
2053
  background-color: var(--color-gray-100);
1964
2054
  }
2055
+ .bg-gray-200 {
2056
+ background-color: var(--color-gray-200);
2057
+ }
1965
2058
  .bg-gray-900 {
1966
2059
  background-color: var(--color-gray-900);
1967
2060
  }
@@ -1974,6 +2067,9 @@
1974
2067
  background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
1975
2068
  }
1976
2069
  }
2070
+ .bg-green-600 {
2071
+ background-color: var(--color-green-600);
2072
+ }
1977
2073
  .bg-purple-500 {
1978
2074
  background-color: var(--color-purple-500);
1979
2075
  }
@@ -1983,6 +2079,9 @@
1983
2079
  .bg-red-500 {
1984
2080
  background-color: var(--color-red-500);
1985
2081
  }
2082
+ .bg-teal-600 {
2083
+ background-color: var(--color-teal-600);
2084
+ }
1986
2085
  .bg-transparent {
1987
2086
  background-color: transparent;
1988
2087
  }
@@ -2143,6 +2242,9 @@
2143
2242
  .px-\[6px\] {
2144
2243
  padding-inline: 6px;
2145
2244
  }
2245
+ .px-\[8px\] {
2246
+ padding-inline: 8px;
2247
+ }
2146
2248
  .px-\[10px\] {
2147
2249
  padding-inline: 10px;
2148
2250
  }
@@ -2203,6 +2305,9 @@
2203
2305
  .py-\[3px\] {
2204
2306
  padding-block: 3px;
2205
2307
  }
2308
+ .py-\[4px\] {
2309
+ padding-block: 4px;
2310
+ }
2206
2311
  .py-\[5px\] {
2207
2312
  padding-block: 5px;
2208
2313
  }
@@ -2299,6 +2404,9 @@
2299
2404
  .pb-2 {
2300
2405
  padding-bottom: calc(var(--spacing) * 2);
2301
2406
  }
2407
+ .pb-3 {
2408
+ padding-bottom: calc(var(--spacing) * 3);
2409
+ }
2302
2410
  .pb-4 {
2303
2411
  padding-bottom: calc(var(--spacing) * 4);
2304
2412
  }
@@ -2369,6 +2477,10 @@
2369
2477
  font-size: var(--text-2xl);
2370
2478
  line-height: var(--tw-leading, var(--text-2xl--line-height));
2371
2479
  }
2480
+ .text-lg {
2481
+ font-size: var(--text-lg);
2482
+ line-height: var(--tw-leading, var(--text-lg--line-height));
2483
+ }
2372
2484
  .text-sm {
2373
2485
  font-size: var(--text-sm);
2374
2486
  line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -2447,6 +2559,9 @@
2447
2559
  .text-\[20px\] {
2448
2560
  font-size: 20px;
2449
2561
  }
2562
+ .text-\[21px\] {
2563
+ font-size: 21px;
2564
+ }
2450
2565
  .text-\[22px\] {
2451
2566
  font-size: 22px;
2452
2567
  }
@@ -2485,6 +2600,10 @@
2485
2600
  --tw-leading: calc(var(--spacing) * 5);
2486
2601
  line-height: calc(var(--spacing) * 5);
2487
2602
  }
2603
+ .leading-\[0\] {
2604
+ --tw-leading: 0;
2605
+ line-height: 0;
2606
+ }
2488
2607
  .leading-\[1\.1\] {
2489
2608
  --tw-leading: 1.1;
2490
2609
  line-height: 1.1;
@@ -2690,6 +2809,9 @@
2690
2809
  .text-\[\#0A0A0A\] {
2691
2810
  color: #0A0A0A;
2692
2811
  }
2812
+ .text-\[\#1FC16B\] {
2813
+ color: #1FC16B;
2814
+ }
2693
2815
  .text-\[\#5A5A5A\] {
2694
2816
  color: #5A5A5A;
2695
2817
  }
@@ -2798,9 +2920,21 @@
2798
2920
  .text-gray-200 {
2799
2921
  color: var(--color-gray-200);
2800
2922
  }
2923
+ .text-gray-400 {
2924
+ color: var(--color-gray-400);
2925
+ }
2926
+ .text-gray-500\/600 {
2927
+ color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 600%, transparent);
2928
+ @supports (color: color-mix(in lab, red, red)) {
2929
+ color: color-mix(in oklab, var(--color-gray-500) 600%, transparent);
2930
+ }
2931
+ }
2801
2932
  .text-gray-600 {
2802
2933
  color: var(--color-gray-600);
2803
2934
  }
2935
+ .text-gray-700 {
2936
+ color: var(--color-gray-700);
2937
+ }
2804
2938
  .text-gray-800 {
2805
2939
  color: var(--color-gray-800);
2806
2940
  }
@@ -2825,6 +2959,9 @@
2825
2959
  .text-white {
2826
2960
  color: var(--color-white);
2827
2961
  }
2962
+ .text-yellow-400 {
2963
+ color: var(--color-yellow-400);
2964
+ }
2828
2965
  .text-yellow-800 {
2829
2966
  color: var(--color-yellow-800);
2830
2967
  }
@@ -2865,6 +3002,9 @@
2865
3002
  .opacity-0 {
2866
3003
  opacity: 0%;
2867
3004
  }
3005
+ .opacity-20 {
3006
+ opacity: 20%;
3007
+ }
2868
3008
  .opacity-25 {
2869
3009
  opacity: 25%;
2870
3010
  }
@@ -3000,6 +3140,10 @@
3000
3140
  --tw-blur: blur(160px);
3001
3141
  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
3142
  }
3143
+ .blur-sm {
3144
+ --tw-blur: blur(var(--blur-sm));
3145
+ 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,);
3146
+ }
3003
3147
  .filter {
3004
3148
  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
3149
  }
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.34",
4
4
  "packageManager": "pnpm@9.0.0",
5
5
  "description": "Deframe SDK React component library",
6
6
  "engines": {