@deframe-sdk/components 0.1.3 → 0.1.5
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/index.d.mts +8 -17
- package/dist/index.d.ts +8 -17
- package/dist/index.js +112 -40
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +112 -40
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +237 -116
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -67,8 +67,8 @@
|
|
|
67
67
|
--font-weight-bold: 700;
|
|
68
68
|
--font-weight-extrabold: 800;
|
|
69
69
|
--radius-md: 8px;
|
|
70
|
-
--radius-lg: 16px;
|
|
71
|
-
--radius-xl: 24px;
|
|
70
|
+
--radius-lg: clamp(12px, 2vw, 16px);
|
|
71
|
+
--radius-xl: clamp(16px, 2.5vw, 24px);
|
|
72
72
|
--radius-2xl: 1rem;
|
|
73
73
|
--radius-3xl: 1.5rem;
|
|
74
74
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
@@ -80,13 +80,14 @@
|
|
|
80
80
|
--color-brand-primary: var(--deframe-brand-primary, #405EFF);
|
|
81
81
|
--color-brand-primary-dark: #405EFF;
|
|
82
82
|
--color-brand-secondary: var(--deframe-brand-secondary, #A9ABF7);
|
|
83
|
+
--color-brand-secondary-dark: #A9ABF7;
|
|
83
84
|
--color-brand-primary-cryptocontrol: #1FC16B;
|
|
84
85
|
--color-bg-default: var(--deframe-bg-default, #FFFFFF);
|
|
85
86
|
--color-bg-default-dark: #121212;
|
|
86
87
|
--color-bg-subtle: var(--deframe-bg-subtle, #F8F9FA);
|
|
87
88
|
--color-bg-subtle-dark: #1E1E1E;
|
|
88
89
|
--color-bg-muted: var(--deframe-bg-muted, #E3E4E8);
|
|
89
|
-
--color-bg-muted-dark: #
|
|
90
|
+
--color-bg-muted-dark: #2C2C2C50;
|
|
90
91
|
--color-bg-raised: #FFFFFF;
|
|
91
92
|
--color-text-primary: var(--deframe-text-primary, #252050);
|
|
92
93
|
--color-text-primary-dark: #FFFFFF;
|
|
@@ -105,16 +106,9 @@
|
|
|
105
106
|
--color-border-subtle-dark: #1E1E1E;
|
|
106
107
|
--color-border-strong: #C6C8CC;
|
|
107
108
|
--color-border-strong-dark: #3A3A3A;
|
|
108
|
-
--
|
|
109
|
-
--
|
|
110
|
-
--
|
|
111
|
-
--color-brand-tint-75: #EEF0FFBF;
|
|
112
|
-
--color-brand-tint-75-dark: #1E1E3FBF;
|
|
113
|
-
--color-brand-tint-60: #EEF0FF99;
|
|
114
|
-
--color-brand-tint-60-dark: #1E1E3F99;
|
|
115
|
-
--spacing-md: 16px;
|
|
116
|
-
--spacing-lg: 32px;
|
|
117
|
-
--opacity-state-disabled-content: 0.38;
|
|
109
|
+
--spacing-md: clamp(12px, 2vw, 16px);
|
|
110
|
+
--spacing-lg: clamp(20px, 3vw, 32px);
|
|
111
|
+
--radius-full: 9999px;
|
|
118
112
|
--animate-fade-in: fade-in 0.3s ease-out;
|
|
119
113
|
}
|
|
120
114
|
}
|
|
@@ -468,6 +462,9 @@
|
|
|
468
462
|
.h-\[844px\] {
|
|
469
463
|
height: 844px;
|
|
470
464
|
}
|
|
465
|
+
.h-\[var\(--deframe-widget-button-height\)\] {
|
|
466
|
+
height: var(--deframe-widget-button-height);
|
|
467
|
+
}
|
|
471
468
|
.h-auto {
|
|
472
469
|
height: auto;
|
|
473
470
|
}
|
|
@@ -654,6 +651,9 @@
|
|
|
654
651
|
.gap-12 {
|
|
655
652
|
gap: calc(var(--spacing) * 12);
|
|
656
653
|
}
|
|
654
|
+
.gap-\[var\(--deframe-widget-size-gap-sm\)\] {
|
|
655
|
+
gap: var(--deframe-widget-size-gap-sm);
|
|
656
|
+
}
|
|
657
657
|
.gap-md {
|
|
658
658
|
gap: var(--spacing-md);
|
|
659
659
|
}
|
|
@@ -739,14 +739,26 @@
|
|
|
739
739
|
.rounded-2xl {
|
|
740
740
|
border-radius: var(--radius-2xl);
|
|
741
741
|
}
|
|
742
|
+
.rounded-\[18px\] {
|
|
743
|
+
border-radius: 18px;
|
|
744
|
+
}
|
|
742
745
|
.rounded-\[56px\] {
|
|
743
746
|
border-radius: 56px;
|
|
744
747
|
}
|
|
745
748
|
.rounded-\[60px\] {
|
|
746
749
|
border-radius: 60px;
|
|
747
750
|
}
|
|
751
|
+
.rounded-\[var\(--deframe-widget-button-radius\)\] {
|
|
752
|
+
border-radius: var(--deframe-widget-button-radius);
|
|
753
|
+
}
|
|
754
|
+
.rounded-\[var\(--deframe-widget-radius-lg\)\] {
|
|
755
|
+
border-radius: var(--deframe-widget-radius-lg);
|
|
756
|
+
}
|
|
757
|
+
.rounded-\[var\(--deframe-widget-size-radius-xs\)\] {
|
|
758
|
+
border-radius: var(--deframe-widget-size-radius-xs);
|
|
759
|
+
}
|
|
748
760
|
.rounded-full {
|
|
749
|
-
border-radius:
|
|
761
|
+
border-radius: var(--radius-full);
|
|
750
762
|
}
|
|
751
763
|
.rounded-lg {
|
|
752
764
|
border-radius: var(--radius-lg);
|
|
@@ -762,8 +774,8 @@
|
|
|
762
774
|
border-top-right-radius: 32px;
|
|
763
775
|
}
|
|
764
776
|
.rounded-t-full {
|
|
765
|
-
border-top-left-radius:
|
|
766
|
-
border-top-right-radius:
|
|
777
|
+
border-top-left-radius: var(--radius-full);
|
|
778
|
+
border-top-right-radius: var(--radius-full);
|
|
767
779
|
}
|
|
768
780
|
.rounded-b-3xl {
|
|
769
781
|
border-bottom-right-radius: var(--radius-3xl);
|
|
@@ -777,6 +789,10 @@
|
|
|
777
789
|
border-style: var(--tw-border-style);
|
|
778
790
|
border-width: 2px;
|
|
779
791
|
}
|
|
792
|
+
.border-\[length\:var\(--deframe-widget-size-border-xs\)\] {
|
|
793
|
+
border-style: var(--tw-border-style);
|
|
794
|
+
border-width: var(--deframe-widget-size-border-xs);
|
|
795
|
+
}
|
|
780
796
|
.border-t {
|
|
781
797
|
border-top-style: var(--tw-border-style);
|
|
782
798
|
border-top-width: 1px;
|
|
@@ -789,12 +805,28 @@
|
|
|
789
805
|
--tw-border-style: none;
|
|
790
806
|
border-style: none;
|
|
791
807
|
}
|
|
808
|
+
.border-solid {
|
|
809
|
+
--tw-border-style: solid;
|
|
810
|
+
border-style: solid;
|
|
811
|
+
}
|
|
792
812
|
.border-\[\#2A2A2A\] {
|
|
793
813
|
border-color: #2A2A2A;
|
|
794
814
|
}
|
|
795
815
|
.border-\[\#3A3A3A\] {
|
|
796
816
|
border-color: #3A3A3A;
|
|
797
817
|
}
|
|
818
|
+
.border-\[color\:var\(--deframe-widget-color-border-primary\)\] {
|
|
819
|
+
border-color: var(--deframe-widget-color-border-primary);
|
|
820
|
+
}
|
|
821
|
+
.border-\[color\:var\(--deframe-widget-color-border-primary-disabled\)\] {
|
|
822
|
+
border-color: var(--deframe-widget-color-border-primary-disabled);
|
|
823
|
+
}
|
|
824
|
+
.border-\[color\:var\(--deframe-widget-color-border-secondary\)\] {
|
|
825
|
+
border-color: var(--deframe-widget-color-border-secondary);
|
|
826
|
+
}
|
|
827
|
+
.border-\[color\:var\(--deframe-widget-color-border-secondary-disabled\)\] {
|
|
828
|
+
border-color: var(--deframe-widget-color-border-secondary-disabled);
|
|
829
|
+
}
|
|
798
830
|
.border-\[var\(--color-border-default\,\#333\)\] {
|
|
799
831
|
border-color: var(--color-border-default,#333);
|
|
800
832
|
}
|
|
@@ -846,6 +878,9 @@
|
|
|
846
878
|
.bg-\[\#121212\] {
|
|
847
879
|
background-color: #121212;
|
|
848
880
|
}
|
|
881
|
+
.bg-\[\#ff7a45\] {
|
|
882
|
+
background-color: #ff7a45;
|
|
883
|
+
}
|
|
849
884
|
.bg-\[var\(--color-bg-muted\,\#2a2a2a\)\] {
|
|
850
885
|
background-color: var(--color-bg-muted,#2a2a2a);
|
|
851
886
|
}
|
|
@@ -855,6 +890,18 @@
|
|
|
855
890
|
.bg-\[var\(--color-bg-subtle\,\#1a1a1a\)\] {
|
|
856
891
|
background-color: var(--color-bg-subtle,#1a1a1a);
|
|
857
892
|
}
|
|
893
|
+
.bg-\[var\(--deframe-widget-color-brand-primary\)\] {
|
|
894
|
+
background-color: var(--deframe-widget-color-brand-primary);
|
|
895
|
+
}
|
|
896
|
+
.bg-\[var\(--deframe-widget-color-brand-primary-disabled\)\] {
|
|
897
|
+
background-color: var(--deframe-widget-color-brand-primary-disabled);
|
|
898
|
+
}
|
|
899
|
+
.bg-\[var\(--deframe-widget-color-surface-default\)\] {
|
|
900
|
+
background-color: var(--deframe-widget-color-surface-default);
|
|
901
|
+
}
|
|
902
|
+
.bg-\[var\(--deframe-widget-color-surface-muted\)\] {
|
|
903
|
+
background-color: var(--deframe-widget-color-surface-muted);
|
|
904
|
+
}
|
|
858
905
|
.bg-\[var\(--sheet-bg\,\#0A0A0A\)\] {
|
|
859
906
|
background-color: var(--sheet-bg,#0A0A0A);
|
|
860
907
|
}
|
|
@@ -1020,6 +1067,9 @@
|
|
|
1020
1067
|
.p-8 {
|
|
1021
1068
|
padding: calc(var(--spacing) * 8);
|
|
1022
1069
|
}
|
|
1070
|
+
.p-\[var\(--deframe-widget-space-md\)\] {
|
|
1071
|
+
padding: var(--deframe-widget-space-md);
|
|
1072
|
+
}
|
|
1023
1073
|
.px-0 {
|
|
1024
1074
|
padding-inline: calc(var(--spacing) * 0);
|
|
1025
1075
|
}
|
|
@@ -1035,6 +1085,15 @@
|
|
|
1035
1085
|
.px-6 {
|
|
1036
1086
|
padding-inline: calc(var(--spacing) * 6);
|
|
1037
1087
|
}
|
|
1088
|
+
.px-\[28px\] {
|
|
1089
|
+
padding-inline: 28px;
|
|
1090
|
+
}
|
|
1091
|
+
.px-\[var\(--deframe-widget-button-padding-x\)\] {
|
|
1092
|
+
padding-inline: var(--deframe-widget-button-padding-x);
|
|
1093
|
+
}
|
|
1094
|
+
.px-\[var\(--deframe-widget-size-padding-x-xl\)\] {
|
|
1095
|
+
padding-inline: var(--deframe-widget-size-padding-x-xl);
|
|
1096
|
+
}
|
|
1038
1097
|
.py-1 {
|
|
1039
1098
|
padding-block: calc(var(--spacing) * 1);
|
|
1040
1099
|
}
|
|
@@ -1059,6 +1118,9 @@
|
|
|
1059
1118
|
.py-12 {
|
|
1060
1119
|
padding-block: calc(var(--spacing) * 12);
|
|
1061
1120
|
}
|
|
1121
|
+
.py-\[var\(--deframe-widget-size-padding-y-md\)\] {
|
|
1122
|
+
padding-block: var(--deframe-widget-size-padding-y-md);
|
|
1123
|
+
}
|
|
1062
1124
|
.pt-2 {
|
|
1063
1125
|
padding-top: calc(var(--spacing) * 2);
|
|
1064
1126
|
}
|
|
@@ -1143,6 +1205,15 @@
|
|
|
1143
1205
|
font-size: var(--text-xs);
|
|
1144
1206
|
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
1145
1207
|
}
|
|
1208
|
+
.\[font-size\:var\(--deframe-widget-font-size-h4\)\] {
|
|
1209
|
+
font-size: var(--deframe-widget-font-size-h4);
|
|
1210
|
+
}
|
|
1211
|
+
.\[font-size\:var\(--deframe-widget-font-size-md\)\] {
|
|
1212
|
+
font-size: var(--deframe-widget-font-size-md);
|
|
1213
|
+
}
|
|
1214
|
+
.\[font-size\:var\(--deframe-widget-font-size-text-medium\)\] {
|
|
1215
|
+
font-size: var(--deframe-widget-font-size-text-medium);
|
|
1216
|
+
}
|
|
1146
1217
|
.text-\[12px\] {
|
|
1147
1218
|
font-size: 12px;
|
|
1148
1219
|
}
|
|
@@ -1194,6 +1265,13 @@
|
|
|
1194
1265
|
--tw-leading: 140%;
|
|
1195
1266
|
line-height: 140%;
|
|
1196
1267
|
}
|
|
1268
|
+
.\[line-height\:var\(--deframe-widget-font-leading-md\)\] {
|
|
1269
|
+
line-height: var(--deframe-widget-font-leading-md);
|
|
1270
|
+
}
|
|
1271
|
+
.font-\[var\(--deframe-widget-font-family\)\] {
|
|
1272
|
+
--tw-font-weight: var(--deframe-widget-font-family);
|
|
1273
|
+
font-weight: var(--deframe-widget-font-family);
|
|
1274
|
+
}
|
|
1197
1275
|
.font-bold {
|
|
1198
1276
|
--tw-font-weight: var(--font-weight-bold);
|
|
1199
1277
|
font-weight: var(--font-weight-bold);
|
|
@@ -1214,6 +1292,9 @@
|
|
|
1214
1292
|
--tw-font-weight: var(--font-weight-semibold);
|
|
1215
1293
|
font-weight: var(--font-weight-semibold);
|
|
1216
1294
|
}
|
|
1295
|
+
.\[font-weight\:var\(--deframe-widget-font-weight-semibold\)\] {
|
|
1296
|
+
font-weight: var(--deframe-widget-font-weight-semibold);
|
|
1297
|
+
}
|
|
1217
1298
|
.tracking-\[0\] {
|
|
1218
1299
|
--tw-tracking: 0;
|
|
1219
1300
|
letter-spacing: 0;
|
|
@@ -1233,6 +1314,18 @@
|
|
|
1233
1314
|
.text-\[\#252050\] {
|
|
1234
1315
|
color: #252050;
|
|
1235
1316
|
}
|
|
1317
|
+
.text-\[color\:var\(--deframe-widget-color-brand-secondary\)\] {
|
|
1318
|
+
color: var(--deframe-widget-color-brand-secondary);
|
|
1319
|
+
}
|
|
1320
|
+
.text-\[color\:var\(--deframe-widget-color-brand-tertiary\)\] {
|
|
1321
|
+
color: var(--deframe-widget-color-brand-tertiary);
|
|
1322
|
+
}
|
|
1323
|
+
.text-\[color\:var\(--deframe-widget-color-text-secondary-disabled\)\] {
|
|
1324
|
+
color: var(--deframe-widget-color-text-secondary-disabled);
|
|
1325
|
+
}
|
|
1326
|
+
.text-\[color\:var\(--deframe-widget-color-text-tertiary-disabled\)\] {
|
|
1327
|
+
color: var(--deframe-widget-color-text-tertiary-disabled);
|
|
1328
|
+
}
|
|
1236
1329
|
.text-\[var\(--color-text-highlight\,\#7C3AED\)\] {
|
|
1237
1330
|
color: var(--color-text-highlight,#7C3AED);
|
|
1238
1331
|
}
|
|
@@ -1245,6 +1338,21 @@
|
|
|
1245
1338
|
.text-\[var\(--color-text-tertiary\,\#888\)\] {
|
|
1246
1339
|
color: var(--color-text-tertiary,#888);
|
|
1247
1340
|
}
|
|
1341
|
+
.text-\[var\(--deframe-widget-color-content-inverse\)\] {
|
|
1342
|
+
color: var(--deframe-widget-color-content-inverse);
|
|
1343
|
+
}
|
|
1344
|
+
.text-\[var\(--deframe-widget-color-content-primary\)\] {
|
|
1345
|
+
color: var(--deframe-widget-color-content-primary);
|
|
1346
|
+
}
|
|
1347
|
+
.text-\[var\(--deframe-widget-color-content-secondary\)\] {
|
|
1348
|
+
color: var(--deframe-widget-color-content-secondary);
|
|
1349
|
+
}
|
|
1350
|
+
.text-\[var\(--deframe-widget-color-text-primary\)\] {
|
|
1351
|
+
color: var(--deframe-widget-color-text-primary);
|
|
1352
|
+
}
|
|
1353
|
+
.text-\[var\(--deframe-widget-color-text-primary-disabled\)\] {
|
|
1354
|
+
color: var(--deframe-widget-color-text-primary-disabled);
|
|
1355
|
+
}
|
|
1248
1356
|
.text-blue-100 {
|
|
1249
1357
|
color: var(--color-blue-100);
|
|
1250
1358
|
}
|
|
@@ -1343,9 +1451,6 @@
|
|
|
1343
1451
|
.opacity-60 {
|
|
1344
1452
|
opacity: 60%;
|
|
1345
1453
|
}
|
|
1346
|
-
.opacity-state-disabled-content {
|
|
1347
|
-
opacity: var(--opacity-state-disabled-content);
|
|
1348
|
-
}
|
|
1349
1454
|
.shadow {
|
|
1350
1455
|
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
1351
1456
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
@@ -1366,19 +1471,6 @@
|
|
|
1366
1471
|
outline-style: var(--tw-outline-style);
|
|
1367
1472
|
outline-width: 1px;
|
|
1368
1473
|
}
|
|
1369
|
-
.outline-1 {
|
|
1370
|
-
outline-style: var(--tw-outline-style);
|
|
1371
|
-
outline-width: 1px;
|
|
1372
|
-
}
|
|
1373
|
-
.outline-offset-\[-1px\] {
|
|
1374
|
-
outline-offset: -1px;
|
|
1375
|
-
}
|
|
1376
|
-
.outline-border-default {
|
|
1377
|
-
outline-color: var(--color-border-default);
|
|
1378
|
-
}
|
|
1379
|
-
.outline-border-subtle {
|
|
1380
|
-
outline-color: var(--color-border-subtle);
|
|
1381
|
-
}
|
|
1382
1474
|
.blur-\[160px\] {
|
|
1383
1475
|
--tw-blur: blur(160px);
|
|
1384
1476
|
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,);
|
|
@@ -1505,20 +1597,6 @@
|
|
|
1505
1597
|
}
|
|
1506
1598
|
}
|
|
1507
1599
|
}
|
|
1508
|
-
.hover\:bg-brand-secondary-20 {
|
|
1509
|
-
&:hover {
|
|
1510
|
-
@media (hover: hover) {
|
|
1511
|
-
background-color: var(--color-brand-secondary-20);
|
|
1512
|
-
}
|
|
1513
|
-
}
|
|
1514
|
-
}
|
|
1515
|
-
.hover\:bg-brand-tint {
|
|
1516
|
-
&:hover {
|
|
1517
|
-
@media (hover: hover) {
|
|
1518
|
-
background-color: var(--color-brand-tint);
|
|
1519
|
-
}
|
|
1520
|
-
}
|
|
1521
|
-
}
|
|
1522
1600
|
.hover\:bg-gray-800 {
|
|
1523
1601
|
&:hover {
|
|
1524
1602
|
@media (hover: hover) {
|
|
@@ -1586,28 +1664,11 @@
|
|
|
1586
1664
|
}
|
|
1587
1665
|
}
|
|
1588
1666
|
}
|
|
1589
|
-
.hover\:outline-brand-primary {
|
|
1590
|
-
&:hover {
|
|
1591
|
-
@media (hover: hover) {
|
|
1592
|
-
outline-color: var(--color-brand-primary);
|
|
1593
|
-
}
|
|
1594
|
-
}
|
|
1595
|
-
}
|
|
1596
1667
|
.focus\:border-\[var\(--color-brand-primary\,\#7C3AED\)\] {
|
|
1597
1668
|
&:focus {
|
|
1598
1669
|
border-color: var(--color-brand-primary,#7C3AED);
|
|
1599
1670
|
}
|
|
1600
1671
|
}
|
|
1601
|
-
.focus\:bg-brand-secondary-20 {
|
|
1602
|
-
&:focus {
|
|
1603
|
-
background-color: var(--color-brand-secondary-20);
|
|
1604
|
-
}
|
|
1605
|
-
}
|
|
1606
|
-
.focus\:bg-brand-tint-75 {
|
|
1607
|
-
&:focus {
|
|
1608
|
-
background-color: var(--color-brand-tint-75);
|
|
1609
|
-
}
|
|
1610
|
-
}
|
|
1611
1672
|
.focus\:opacity-85 {
|
|
1612
1673
|
&:focus {
|
|
1613
1674
|
opacity: 85%;
|
|
@@ -1637,11 +1698,6 @@
|
|
|
1637
1698
|
--tw-ring-color: var(--color-brand-primary);
|
|
1638
1699
|
}
|
|
1639
1700
|
}
|
|
1640
|
-
.focus\:outline-brand-primary {
|
|
1641
|
-
&:focus {
|
|
1642
|
-
outline-color: var(--color-brand-primary);
|
|
1643
|
-
}
|
|
1644
|
-
}
|
|
1645
1701
|
.focus\:outline-none {
|
|
1646
1702
|
&:focus {
|
|
1647
1703
|
--tw-outline-style: none;
|
|
@@ -1659,16 +1715,6 @@
|
|
|
1659
1715
|
scale: 0.98;
|
|
1660
1716
|
}
|
|
1661
1717
|
}
|
|
1662
|
-
.active\:bg-brand-tint-60 {
|
|
1663
|
-
&:active {
|
|
1664
|
-
background-color: var(--color-brand-tint-60);
|
|
1665
|
-
}
|
|
1666
|
-
}
|
|
1667
|
-
.active\:bg-transparent {
|
|
1668
|
-
&:active {
|
|
1669
|
-
background-color: transparent;
|
|
1670
|
-
}
|
|
1671
|
-
}
|
|
1672
1718
|
.active\:bg-white\/20 {
|
|
1673
1719
|
&:active {
|
|
1674
1720
|
background-color: color-mix(in srgb, #fff 20%, transparent);
|
|
@@ -1682,11 +1728,6 @@
|
|
|
1682
1728
|
opacity: 85%;
|
|
1683
1729
|
}
|
|
1684
1730
|
}
|
|
1685
|
-
.active\:outline-border-default {
|
|
1686
|
-
&:active {
|
|
1687
|
-
outline-color: var(--color-border-default);
|
|
1688
|
-
}
|
|
1689
|
-
}
|
|
1690
1731
|
.disabled\:pointer-events-none {
|
|
1691
1732
|
&:disabled {
|
|
1692
1733
|
pointer-events: none;
|
|
@@ -1772,6 +1813,11 @@
|
|
|
1772
1813
|
color: var(--color-brand-primary-dark);
|
|
1773
1814
|
}
|
|
1774
1815
|
}
|
|
1816
|
+
.dark\:text-brand-secondary-dark {
|
|
1817
|
+
@media (prefers-color-scheme: dark) {
|
|
1818
|
+
color: var(--color-brand-secondary-dark);
|
|
1819
|
+
}
|
|
1820
|
+
}
|
|
1775
1821
|
.dark\:text-text-disabled-dark {
|
|
1776
1822
|
@media (prefers-color-scheme: dark) {
|
|
1777
1823
|
color: var(--color-text-disabled-dark);
|
|
@@ -1792,16 +1838,6 @@
|
|
|
1792
1838
|
color: var(--color-text-tertiary-dark);
|
|
1793
1839
|
}
|
|
1794
1840
|
}
|
|
1795
|
-
.dark\:outline-border-default-dark {
|
|
1796
|
-
@media (prefers-color-scheme: dark) {
|
|
1797
|
-
outline-color: var(--color-border-default-dark);
|
|
1798
|
-
}
|
|
1799
|
-
}
|
|
1800
|
-
.dark\:outline-border-subtle-dark {
|
|
1801
|
-
@media (prefers-color-scheme: dark) {
|
|
1802
|
-
outline-color: var(--color-border-subtle-dark);
|
|
1803
|
-
}
|
|
1804
|
-
}
|
|
1805
1841
|
.dark\:hover\:border-border-default-dark {
|
|
1806
1842
|
@media (prefers-color-scheme: dark) {
|
|
1807
1843
|
&:hover {
|
|
@@ -1820,15 +1856,6 @@
|
|
|
1820
1856
|
}
|
|
1821
1857
|
}
|
|
1822
1858
|
}
|
|
1823
|
-
.dark\:hover\:bg-brand-tint-dark {
|
|
1824
|
-
@media (prefers-color-scheme: dark) {
|
|
1825
|
-
&:hover {
|
|
1826
|
-
@media (hover: hover) {
|
|
1827
|
-
background-color: var(--color-brand-tint-dark);
|
|
1828
|
-
}
|
|
1829
|
-
}
|
|
1830
|
-
}
|
|
1831
|
-
}
|
|
1832
1859
|
.dark\:hover\:text-text-primary-dark {
|
|
1833
1860
|
@media (prefers-color-scheme: dark) {
|
|
1834
1861
|
&:hover {
|
|
@@ -1838,20 +1865,6 @@
|
|
|
1838
1865
|
}
|
|
1839
1866
|
}
|
|
1840
1867
|
}
|
|
1841
|
-
.dark\:focus\:bg-brand-tint-75-dark {
|
|
1842
|
-
@media (prefers-color-scheme: dark) {
|
|
1843
|
-
&:focus {
|
|
1844
|
-
background-color: var(--color-brand-tint-75-dark);
|
|
1845
|
-
}
|
|
1846
|
-
}
|
|
1847
|
-
}
|
|
1848
|
-
.dark\:active\:bg-brand-tint-60-dark {
|
|
1849
|
-
@media (prefers-color-scheme: dark) {
|
|
1850
|
-
&:active {
|
|
1851
|
-
background-color: var(--color-brand-tint-60-dark);
|
|
1852
|
-
}
|
|
1853
|
-
}
|
|
1854
|
-
}
|
|
1855
1868
|
}
|
|
1856
1869
|
@keyframes slide-up {
|
|
1857
1870
|
0% {
|
|
@@ -1890,6 +1903,114 @@ body {
|
|
|
1890
1903
|
color: var(--foreground);
|
|
1891
1904
|
font-family: Arial, Helvetica, sans-serif;
|
|
1892
1905
|
}
|
|
1906
|
+
:root,
|
|
1907
|
+
.deframe-widget {
|
|
1908
|
+
--deframe-widget-font-family: 'Satoshi', sans-serif;
|
|
1909
|
+
--deframe-widget-font-size-xs: 0.6875rem;
|
|
1910
|
+
--deframe-widget-font-size-sm: clamp(0.6875rem, 1.8vw, 0.8125rem);
|
|
1911
|
+
--deframe-widget-font-size-md: clamp(0.8125rem, 2vw, 0.9375rem);
|
|
1912
|
+
--deframe-widget-font-size-lg: clamp(0.9375rem, 2.5vw, 1.125rem);
|
|
1913
|
+
--deframe-widget-font-size-xl: clamp(1.0625rem, 2.8vw, 1.25rem);
|
|
1914
|
+
--deframe-widget-font-size-xxl: clamp(1.25rem, 3.2vw, 1.5rem);
|
|
1915
|
+
--deframe-widget-font-leading-xs: clamp(0.75em, 2vw, 0.875em);
|
|
1916
|
+
--deframe-widget-font-leading-sm: clamp(0.875em, 2.2vw, 1em);
|
|
1917
|
+
--deframe-widget-font-leading-md: clamp(1.0625em, 2.5vw, 1.25em);
|
|
1918
|
+
--deframe-widget-font-leading-lg: clamp(1.25em, 3vw, 1.5em);
|
|
1919
|
+
--deframe-widget-font-leading-xl: clamp(1.5em, 3.5vw, 1.75em);
|
|
1920
|
+
--deframe-widget-font-leading-xxl: clamp(1.75em, 4vw, 2em);
|
|
1921
|
+
--deframe-widget-font-weight-thin: 100;
|
|
1922
|
+
--deframe-widget-font-weight-light: 300;
|
|
1923
|
+
--deframe-widget-font-weight-regular: 400;
|
|
1924
|
+
--deframe-widget-font-weight-medium: 500;
|
|
1925
|
+
--deframe-widget-font-weight-semibold: 600;
|
|
1926
|
+
--deframe-widget-font-weight-bold: 700;
|
|
1927
|
+
--deframe-widget-font-weight-extrabold: 800;
|
|
1928
|
+
--deframe-widget-color-text-primary: #323232;
|
|
1929
|
+
--deframe-widget-color-text-primary-dark: #ffffff;
|
|
1930
|
+
--deframe-widget-color-text-primary-disabled: #c6c8cc;
|
|
1931
|
+
--deframe-widget-color-text-secondary: #c6c8cc;
|
|
1932
|
+
--deframe-widget-color-text-secondary-dark: #c6c8cc;
|
|
1933
|
+
--deframe-widget-color-text-secondary-disabled: #898d95;
|
|
1934
|
+
--deframe-widget-color-text-tertiary: #898d95;
|
|
1935
|
+
--deframe-widget-color-text-tertiary-dark: #898d95;
|
|
1936
|
+
--deframe-widget-color-text-tertiary-disabled: #5c5f66;
|
|
1937
|
+
--deframe-widget-color-placeholder-primary: #c6c8cc;
|
|
1938
|
+
--deframe-widget-color-placeholder-primary-dark: #c6c8cc;
|
|
1939
|
+
--deframe-widget-color-placeholder-primary-disabled: #898d95;
|
|
1940
|
+
--deframe-widget-color-placeholder-secondary: #898d95;
|
|
1941
|
+
--deframe-widget-color-placeholder-secondary-dark: #898d95;
|
|
1942
|
+
--deframe-widget-color-placeholder-secondary-disabled: #5c5f66;
|
|
1943
|
+
--deframe-widget-color-placeholder-tertiary: #5c5f66;
|
|
1944
|
+
--deframe-widget-color-placeholder-tertiary-dark: #5c5f66;
|
|
1945
|
+
--deframe-widget-color-placeholder-tertiary-disabled: #3a3a3a;
|
|
1946
|
+
--deframe-widget-color-brand-primary: #50d890;
|
|
1947
|
+
--deframe-widget-color-brand-primary-dark: #50d890;
|
|
1948
|
+
--deframe-widget-color-brand-primary-disabled: #6f6e6e;
|
|
1949
|
+
--deframe-widget-color-brand-secondary: #ffd166;
|
|
1950
|
+
--deframe-widget-color-brand-secondary-dark: #ffd166;
|
|
1951
|
+
--deframe-widget-color-brand-secondary-disabled: #6f6e6e;
|
|
1952
|
+
--deframe-widget-color-brand-tertiary: #50d890;
|
|
1953
|
+
--deframe-widget-color-brand-tertiary-dark: #50d890;
|
|
1954
|
+
--deframe-widget-color-brand-tertiary-disabled: #6f6e6e;
|
|
1955
|
+
--deframe-widget-color-bg-primary: #251a15;
|
|
1956
|
+
--deframe-widget-color-bg-primary-dark: #251a15;
|
|
1957
|
+
--deframe-widget-color-bg-primary-disabled: #373534;
|
|
1958
|
+
--deframe-widget-color-bg-secondary: #31231d;
|
|
1959
|
+
--deframe-widget-color-bg-secondary-dark: #31231d;
|
|
1960
|
+
--deframe-widget-color-bg-secondary-disabled: #1d1410;
|
|
1961
|
+
--deframe-widget-color-bg-tertiary: #4f352a;
|
|
1962
|
+
--deframe-widget-color-bg-tertiary-dark: #4f352a;
|
|
1963
|
+
--deframe-widget-color-bg-tertiary-disabled: #2c1a14;
|
|
1964
|
+
--deframe-widget-color-border-primary: #923108;
|
|
1965
|
+
--deframe-widget-color-border-primary-dark: #4f352a;
|
|
1966
|
+
--deframe-widget-color-border-primary-disabled: #000000;
|
|
1967
|
+
--deframe-widget-color-border-secondary: #31231d;
|
|
1968
|
+
--deframe-widget-color-border-secondary-dark: #31231d;
|
|
1969
|
+
--deframe-widget-color-border-secondary-disabled: #cdcac9;
|
|
1970
|
+
--deframe-widget-color-border-tertiary: #251a15;
|
|
1971
|
+
--deframe-widget-color-border-tertiary-dark: #251a15;
|
|
1972
|
+
--deframe-widget-color-border-tertiary-disabled: #1d1410;
|
|
1973
|
+
--deframe-widget-color-state-info: #58b4ff;
|
|
1974
|
+
--deframe-widget-color-state-warning: #ffb845;
|
|
1975
|
+
--deframe-widget-color-state-error: #ff4d4f;
|
|
1976
|
+
--deframe-widget-color-state-success: #50d890;
|
|
1977
|
+
--deframe-widget-size-padding-x-none: 0;
|
|
1978
|
+
--deframe-widget-size-padding-x-xs: 0.25em;
|
|
1979
|
+
--deframe-widget-size-padding-x-sm: 0.5em;
|
|
1980
|
+
--deframe-widget-size-padding-x-md: clamp(0.625em, 2vw, 1em);
|
|
1981
|
+
--deframe-widget-size-padding-x-lg: clamp(1em, 2.5vw, 1.5em);
|
|
1982
|
+
--deframe-widget-size-padding-x-xl: clamp(1.25em, 3vw, 2em);
|
|
1983
|
+
--deframe-widget-size-padding-x-xxl: clamp(2em, 4vw, 3em);
|
|
1984
|
+
--deframe-widget-size-padding-y-none: 0;
|
|
1985
|
+
--deframe-widget-size-padding-y-xs: 0.25em;
|
|
1986
|
+
--deframe-widget-size-padding-y-sm: 0.5em;
|
|
1987
|
+
--deframe-widget-size-padding-y-md: clamp(0.5em, 1.5vh, 1em);
|
|
1988
|
+
--deframe-widget-size-padding-y-lg: clamp(0.875em, 2vh, 1.5em);
|
|
1989
|
+
--deframe-widget-size-padding-y-xl: clamp(1em, 2.5vh, 2em);
|
|
1990
|
+
--deframe-widget-size-padding-y-xxl: clamp(1.75em, 3.5vh, 3em);
|
|
1991
|
+
--deframe-widget-size-gap-none: 0;
|
|
1992
|
+
--deframe-widget-size-gap-xs: 0.25em;
|
|
1993
|
+
--deframe-widget-size-gap-sm: clamp(0.375em, 1vw, 0.5em);
|
|
1994
|
+
--deframe-widget-size-gap-md: clamp(0.625em, 1.5vw, 1em);
|
|
1995
|
+
--deframe-widget-size-gap-lg: clamp(1em, 2vw, 1.5em);
|
|
1996
|
+
--deframe-widget-size-gap-xl: clamp(1.25em, 2.5vw, 2em);
|
|
1997
|
+
--deframe-widget-size-gap-xxl: clamp(2em, 3.5vw, 3em);
|
|
1998
|
+
--deframe-widget-size-border-none: 0;
|
|
1999
|
+
--deframe-widget-size-border-xs: 1px;
|
|
2000
|
+
--deframe-widget-size-border-sm: 2px;
|
|
2001
|
+
--deframe-widget-size-border-md: 4px;
|
|
2002
|
+
--deframe-widget-size-border-lg: 8px;
|
|
2003
|
+
--deframe-widget-size-border-xl: 16px;
|
|
2004
|
+
--deframe-widget-size-border-xxl: 32px;
|
|
2005
|
+
--deframe-widget-size-radius-none: 0;
|
|
2006
|
+
--deframe-widget-size-radius-xs: 0.25rem;
|
|
2007
|
+
--deframe-widget-size-radius-sm: 0.375rem;
|
|
2008
|
+
--deframe-widget-size-radius-md: clamp(0.5rem, 1.8vw, 0.875rem);
|
|
2009
|
+
--deframe-widget-size-radius-lg: clamp(0.875rem, 2.5vw, 1.5rem);
|
|
2010
|
+
--deframe-widget-size-radius-xl: clamp(1.25rem, 3vw, 2rem);
|
|
2011
|
+
--deframe-widget-size-radius-xxl: clamp(1.75rem, 4vw, 3rem);
|
|
2012
|
+
--deframe-widget-size-radius-full: 9999px;
|
|
2013
|
+
}
|
|
1893
2014
|
.deframe-widget:is(.dark, .cryptocontrol) {
|
|
1894
2015
|
--color-brand-primary: var(--deframe-brand-primary, var(--color-brand-primary-dark));
|
|
1895
2016
|
--color-bg-default: var(--deframe-bg-default, var(--color-bg-default-dark));
|