@deframe-sdk/components 0.1.4 → 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 +186 -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
|
}
|
|
@@ -657,6 +651,9 @@
|
|
|
657
651
|
.gap-12 {
|
|
658
652
|
gap: calc(var(--spacing) * 12);
|
|
659
653
|
}
|
|
654
|
+
.gap-\[var\(--deframe-widget-size-gap-sm\)\] {
|
|
655
|
+
gap: var(--deframe-widget-size-gap-sm);
|
|
656
|
+
}
|
|
660
657
|
.gap-md {
|
|
661
658
|
gap: var(--spacing-md);
|
|
662
659
|
}
|
|
@@ -757,8 +754,11 @@
|
|
|
757
754
|
.rounded-\[var\(--deframe-widget-radius-lg\)\] {
|
|
758
755
|
border-radius: var(--deframe-widget-radius-lg);
|
|
759
756
|
}
|
|
757
|
+
.rounded-\[var\(--deframe-widget-size-radius-xs\)\] {
|
|
758
|
+
border-radius: var(--deframe-widget-size-radius-xs);
|
|
759
|
+
}
|
|
760
760
|
.rounded-full {
|
|
761
|
-
border-radius:
|
|
761
|
+
border-radius: var(--radius-full);
|
|
762
762
|
}
|
|
763
763
|
.rounded-lg {
|
|
764
764
|
border-radius: var(--radius-lg);
|
|
@@ -774,8 +774,8 @@
|
|
|
774
774
|
border-top-right-radius: 32px;
|
|
775
775
|
}
|
|
776
776
|
.rounded-t-full {
|
|
777
|
-
border-top-left-radius:
|
|
778
|
-
border-top-right-radius:
|
|
777
|
+
border-top-left-radius: var(--radius-full);
|
|
778
|
+
border-top-right-radius: var(--radius-full);
|
|
779
779
|
}
|
|
780
780
|
.rounded-b-3xl {
|
|
781
781
|
border-bottom-right-radius: var(--radius-3xl);
|
|
@@ -789,6 +789,10 @@
|
|
|
789
789
|
border-style: var(--tw-border-style);
|
|
790
790
|
border-width: 2px;
|
|
791
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
|
+
}
|
|
792
796
|
.border-t {
|
|
793
797
|
border-top-style: var(--tw-border-style);
|
|
794
798
|
border-top-width: 1px;
|
|
@@ -801,12 +805,28 @@
|
|
|
801
805
|
--tw-border-style: none;
|
|
802
806
|
border-style: none;
|
|
803
807
|
}
|
|
808
|
+
.border-solid {
|
|
809
|
+
--tw-border-style: solid;
|
|
810
|
+
border-style: solid;
|
|
811
|
+
}
|
|
804
812
|
.border-\[\#2A2A2A\] {
|
|
805
813
|
border-color: #2A2A2A;
|
|
806
814
|
}
|
|
807
815
|
.border-\[\#3A3A3A\] {
|
|
808
816
|
border-color: #3A3A3A;
|
|
809
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
|
+
}
|
|
810
830
|
.border-\[var\(--color-border-default\,\#333\)\] {
|
|
811
831
|
border-color: var(--color-border-default,#333);
|
|
812
832
|
}
|
|
@@ -873,6 +893,9 @@
|
|
|
873
893
|
.bg-\[var\(--deframe-widget-color-brand-primary\)\] {
|
|
874
894
|
background-color: var(--deframe-widget-color-brand-primary);
|
|
875
895
|
}
|
|
896
|
+
.bg-\[var\(--deframe-widget-color-brand-primary-disabled\)\] {
|
|
897
|
+
background-color: var(--deframe-widget-color-brand-primary-disabled);
|
|
898
|
+
}
|
|
876
899
|
.bg-\[var\(--deframe-widget-color-surface-default\)\] {
|
|
877
900
|
background-color: var(--deframe-widget-color-surface-default);
|
|
878
901
|
}
|
|
@@ -1068,6 +1091,9 @@
|
|
|
1068
1091
|
.px-\[var\(--deframe-widget-button-padding-x\)\] {
|
|
1069
1092
|
padding-inline: var(--deframe-widget-button-padding-x);
|
|
1070
1093
|
}
|
|
1094
|
+
.px-\[var\(--deframe-widget-size-padding-x-xl\)\] {
|
|
1095
|
+
padding-inline: var(--deframe-widget-size-padding-x-xl);
|
|
1096
|
+
}
|
|
1071
1097
|
.py-1 {
|
|
1072
1098
|
padding-block: calc(var(--spacing) * 1);
|
|
1073
1099
|
}
|
|
@@ -1092,6 +1118,9 @@
|
|
|
1092
1118
|
.py-12 {
|
|
1093
1119
|
padding-block: calc(var(--spacing) * 12);
|
|
1094
1120
|
}
|
|
1121
|
+
.py-\[var\(--deframe-widget-size-padding-y-md\)\] {
|
|
1122
|
+
padding-block: var(--deframe-widget-size-padding-y-md);
|
|
1123
|
+
}
|
|
1095
1124
|
.pt-2 {
|
|
1096
1125
|
padding-top: calc(var(--spacing) * 2);
|
|
1097
1126
|
}
|
|
@@ -1179,6 +1208,9 @@
|
|
|
1179
1208
|
.\[font-size\:var\(--deframe-widget-font-size-h4\)\] {
|
|
1180
1209
|
font-size: var(--deframe-widget-font-size-h4);
|
|
1181
1210
|
}
|
|
1211
|
+
.\[font-size\:var\(--deframe-widget-font-size-md\)\] {
|
|
1212
|
+
font-size: var(--deframe-widget-font-size-md);
|
|
1213
|
+
}
|
|
1182
1214
|
.\[font-size\:var\(--deframe-widget-font-size-text-medium\)\] {
|
|
1183
1215
|
font-size: var(--deframe-widget-font-size-text-medium);
|
|
1184
1216
|
}
|
|
@@ -1233,6 +1265,13 @@
|
|
|
1233
1265
|
--tw-leading: 140%;
|
|
1234
1266
|
line-height: 140%;
|
|
1235
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
|
+
}
|
|
1236
1275
|
.font-bold {
|
|
1237
1276
|
--tw-font-weight: var(--font-weight-bold);
|
|
1238
1277
|
font-weight: var(--font-weight-bold);
|
|
@@ -1275,6 +1314,18 @@
|
|
|
1275
1314
|
.text-\[\#252050\] {
|
|
1276
1315
|
color: #252050;
|
|
1277
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
|
+
}
|
|
1278
1329
|
.text-\[var\(--color-text-highlight\,\#7C3AED\)\] {
|
|
1279
1330
|
color: var(--color-text-highlight,#7C3AED);
|
|
1280
1331
|
}
|
|
@@ -1296,6 +1347,12 @@
|
|
|
1296
1347
|
.text-\[var\(--deframe-widget-color-content-secondary\)\] {
|
|
1297
1348
|
color: var(--deframe-widget-color-content-secondary);
|
|
1298
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
|
+
}
|
|
1299
1356
|
.text-blue-100 {
|
|
1300
1357
|
color: var(--color-blue-100);
|
|
1301
1358
|
}
|
|
@@ -1394,9 +1451,6 @@
|
|
|
1394
1451
|
.opacity-60 {
|
|
1395
1452
|
opacity: 60%;
|
|
1396
1453
|
}
|
|
1397
|
-
.opacity-state-disabled-content {
|
|
1398
|
-
opacity: var(--opacity-state-disabled-content);
|
|
1399
|
-
}
|
|
1400
1454
|
.shadow {
|
|
1401
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));
|
|
1402
1456
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
@@ -1417,19 +1471,6 @@
|
|
|
1417
1471
|
outline-style: var(--tw-outline-style);
|
|
1418
1472
|
outline-width: 1px;
|
|
1419
1473
|
}
|
|
1420
|
-
.outline-1 {
|
|
1421
|
-
outline-style: var(--tw-outline-style);
|
|
1422
|
-
outline-width: 1px;
|
|
1423
|
-
}
|
|
1424
|
-
.outline-offset-\[-1px\] {
|
|
1425
|
-
outline-offset: -1px;
|
|
1426
|
-
}
|
|
1427
|
-
.outline-border-default {
|
|
1428
|
-
outline-color: var(--color-border-default);
|
|
1429
|
-
}
|
|
1430
|
-
.outline-border-subtle {
|
|
1431
|
-
outline-color: var(--color-border-subtle);
|
|
1432
|
-
}
|
|
1433
1474
|
.blur-\[160px\] {
|
|
1434
1475
|
--tw-blur: blur(160px);
|
|
1435
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,);
|
|
@@ -1556,20 +1597,6 @@
|
|
|
1556
1597
|
}
|
|
1557
1598
|
}
|
|
1558
1599
|
}
|
|
1559
|
-
.hover\:bg-brand-secondary-20 {
|
|
1560
|
-
&:hover {
|
|
1561
|
-
@media (hover: hover) {
|
|
1562
|
-
background-color: var(--color-brand-secondary-20);
|
|
1563
|
-
}
|
|
1564
|
-
}
|
|
1565
|
-
}
|
|
1566
|
-
.hover\:bg-brand-tint {
|
|
1567
|
-
&:hover {
|
|
1568
|
-
@media (hover: hover) {
|
|
1569
|
-
background-color: var(--color-brand-tint);
|
|
1570
|
-
}
|
|
1571
|
-
}
|
|
1572
|
-
}
|
|
1573
1600
|
.hover\:bg-gray-800 {
|
|
1574
1601
|
&:hover {
|
|
1575
1602
|
@media (hover: hover) {
|
|
@@ -1637,28 +1664,11 @@
|
|
|
1637
1664
|
}
|
|
1638
1665
|
}
|
|
1639
1666
|
}
|
|
1640
|
-
.hover\:outline-brand-primary {
|
|
1641
|
-
&:hover {
|
|
1642
|
-
@media (hover: hover) {
|
|
1643
|
-
outline-color: var(--color-brand-primary);
|
|
1644
|
-
}
|
|
1645
|
-
}
|
|
1646
|
-
}
|
|
1647
1667
|
.focus\:border-\[var\(--color-brand-primary\,\#7C3AED\)\] {
|
|
1648
1668
|
&:focus {
|
|
1649
1669
|
border-color: var(--color-brand-primary,#7C3AED);
|
|
1650
1670
|
}
|
|
1651
1671
|
}
|
|
1652
|
-
.focus\:bg-brand-secondary-20 {
|
|
1653
|
-
&:focus {
|
|
1654
|
-
background-color: var(--color-brand-secondary-20);
|
|
1655
|
-
}
|
|
1656
|
-
}
|
|
1657
|
-
.focus\:bg-brand-tint-75 {
|
|
1658
|
-
&:focus {
|
|
1659
|
-
background-color: var(--color-brand-tint-75);
|
|
1660
|
-
}
|
|
1661
|
-
}
|
|
1662
1672
|
.focus\:opacity-85 {
|
|
1663
1673
|
&:focus {
|
|
1664
1674
|
opacity: 85%;
|
|
@@ -1688,11 +1698,6 @@
|
|
|
1688
1698
|
--tw-ring-color: var(--color-brand-primary);
|
|
1689
1699
|
}
|
|
1690
1700
|
}
|
|
1691
|
-
.focus\:outline-brand-primary {
|
|
1692
|
-
&:focus {
|
|
1693
|
-
outline-color: var(--color-brand-primary);
|
|
1694
|
-
}
|
|
1695
|
-
}
|
|
1696
1701
|
.focus\:outline-none {
|
|
1697
1702
|
&:focus {
|
|
1698
1703
|
--tw-outline-style: none;
|
|
@@ -1710,16 +1715,6 @@
|
|
|
1710
1715
|
scale: 0.98;
|
|
1711
1716
|
}
|
|
1712
1717
|
}
|
|
1713
|
-
.active\:bg-brand-tint-60 {
|
|
1714
|
-
&:active {
|
|
1715
|
-
background-color: var(--color-brand-tint-60);
|
|
1716
|
-
}
|
|
1717
|
-
}
|
|
1718
|
-
.active\:bg-transparent {
|
|
1719
|
-
&:active {
|
|
1720
|
-
background-color: transparent;
|
|
1721
|
-
}
|
|
1722
|
-
}
|
|
1723
1718
|
.active\:bg-white\/20 {
|
|
1724
1719
|
&:active {
|
|
1725
1720
|
background-color: color-mix(in srgb, #fff 20%, transparent);
|
|
@@ -1733,11 +1728,6 @@
|
|
|
1733
1728
|
opacity: 85%;
|
|
1734
1729
|
}
|
|
1735
1730
|
}
|
|
1736
|
-
.active\:outline-border-default {
|
|
1737
|
-
&:active {
|
|
1738
|
-
outline-color: var(--color-border-default);
|
|
1739
|
-
}
|
|
1740
|
-
}
|
|
1741
1731
|
.disabled\:pointer-events-none {
|
|
1742
1732
|
&:disabled {
|
|
1743
1733
|
pointer-events: none;
|
|
@@ -1823,6 +1813,11 @@
|
|
|
1823
1813
|
color: var(--color-brand-primary-dark);
|
|
1824
1814
|
}
|
|
1825
1815
|
}
|
|
1816
|
+
.dark\:text-brand-secondary-dark {
|
|
1817
|
+
@media (prefers-color-scheme: dark) {
|
|
1818
|
+
color: var(--color-brand-secondary-dark);
|
|
1819
|
+
}
|
|
1820
|
+
}
|
|
1826
1821
|
.dark\:text-text-disabled-dark {
|
|
1827
1822
|
@media (prefers-color-scheme: dark) {
|
|
1828
1823
|
color: var(--color-text-disabled-dark);
|
|
@@ -1843,16 +1838,6 @@
|
|
|
1843
1838
|
color: var(--color-text-tertiary-dark);
|
|
1844
1839
|
}
|
|
1845
1840
|
}
|
|
1846
|
-
.dark\:outline-border-default-dark {
|
|
1847
|
-
@media (prefers-color-scheme: dark) {
|
|
1848
|
-
outline-color: var(--color-border-default-dark);
|
|
1849
|
-
}
|
|
1850
|
-
}
|
|
1851
|
-
.dark\:outline-border-subtle-dark {
|
|
1852
|
-
@media (prefers-color-scheme: dark) {
|
|
1853
|
-
outline-color: var(--color-border-subtle-dark);
|
|
1854
|
-
}
|
|
1855
|
-
}
|
|
1856
1841
|
.dark\:hover\:border-border-default-dark {
|
|
1857
1842
|
@media (prefers-color-scheme: dark) {
|
|
1858
1843
|
&:hover {
|
|
@@ -1871,15 +1856,6 @@
|
|
|
1871
1856
|
}
|
|
1872
1857
|
}
|
|
1873
1858
|
}
|
|
1874
|
-
.dark\:hover\:bg-brand-tint-dark {
|
|
1875
|
-
@media (prefers-color-scheme: dark) {
|
|
1876
|
-
&:hover {
|
|
1877
|
-
@media (hover: hover) {
|
|
1878
|
-
background-color: var(--color-brand-tint-dark);
|
|
1879
|
-
}
|
|
1880
|
-
}
|
|
1881
|
-
}
|
|
1882
|
-
}
|
|
1883
1859
|
.dark\:hover\:text-text-primary-dark {
|
|
1884
1860
|
@media (prefers-color-scheme: dark) {
|
|
1885
1861
|
&:hover {
|
|
@@ -1889,20 +1865,6 @@
|
|
|
1889
1865
|
}
|
|
1890
1866
|
}
|
|
1891
1867
|
}
|
|
1892
|
-
.dark\:focus\:bg-brand-tint-75-dark {
|
|
1893
|
-
@media (prefers-color-scheme: dark) {
|
|
1894
|
-
&:focus {
|
|
1895
|
-
background-color: var(--color-brand-tint-75-dark);
|
|
1896
|
-
}
|
|
1897
|
-
}
|
|
1898
|
-
}
|
|
1899
|
-
.dark\:active\:bg-brand-tint-60-dark {
|
|
1900
|
-
@media (prefers-color-scheme: dark) {
|
|
1901
|
-
&:active {
|
|
1902
|
-
background-color: var(--color-brand-tint-60-dark);
|
|
1903
|
-
}
|
|
1904
|
-
}
|
|
1905
|
-
}
|
|
1906
1868
|
}
|
|
1907
1869
|
@keyframes slide-up {
|
|
1908
1870
|
0% {
|
|
@@ -1941,6 +1903,114 @@ body {
|
|
|
1941
1903
|
color: var(--foreground);
|
|
1942
1904
|
font-family: Arial, Helvetica, sans-serif;
|
|
1943
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
|
+
}
|
|
1944
2014
|
.deframe-widget:is(.dark, .cryptocontrol) {
|
|
1945
2015
|
--color-brand-primary: var(--deframe-brand-primary, var(--color-brand-primary-dark));
|
|
1946
2016
|
--color-bg-default: var(--deframe-bg-default, var(--color-bg-default-dark));
|