@deframe-sdk/components 0.1.4 → 0.1.6

package/dist/styles.css

@@ -9,12 +9,14 @@
       "Courier New", monospace;
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-amber-500: oklch(76.9% 0.188 70.08);
     --color-yellow-100: oklch(97.3% 0.071 103.193);
     --color-yellow-800: oklch(47.6% 0.114 61.907);
     --color-green-100: oklch(96.2% 0.044 156.743);
     --color-green-400: oklch(79.2% 0.209 151.711);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-800: oklch(44.8% 0.119 151.328);
+    --color-teal-600: oklch(60% 0.118 184.704);
     --color-blue-50: oklch(97% 0.014 254.604);
     --color-blue-100: oklch(93.2% 0.032 255.585);
     --color-blue-200: oklch(88.2% 0.059 254.128);
@@ -66,9 +68,10 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
+    --tracking-wide: 0.025em;
     --radius-md: 8px;
-    --radius-lg: 16px;
-    --radius-xl: 24px;
+    --radius-lg: clamp(12px, 2vw, 16px);
+    --radius-xl: clamp(16px, 2.5vw, 24px);
     --radius-2xl: 1rem;
     --radius-3xl: 1.5rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
@@ -80,14 +83,16 @@
     --color-brand-primary: var(--deframe-brand-primary, #405EFF);
     --color-brand-primary-dark: #405EFF;
     --color-brand-secondary: var(--deframe-brand-secondary, #A9ABF7);
+    --color-brand-secondary-dark: #A9ABF7;
     --color-brand-primary-cryptocontrol: #1FC16B;
     --color-bg-default: var(--deframe-bg-default, #FFFFFF);
     --color-bg-default-dark: #121212;
     --color-bg-subtle: var(--deframe-bg-subtle, #F8F9FA);
     --color-bg-subtle-dark: #1E1E1E;
     --color-bg-muted: var(--deframe-bg-muted, #E3E4E8);
-    --color-bg-muted-dark: #2C2C2C;
+    --color-bg-muted-dark: #2C2C2C50;
     --color-bg-raised: #FFFFFF;
+    --color-bg-raised-dark: #252050;
     --color-text-primary: var(--deframe-text-primary, #252050);
     --color-text-primary-dark: #FFFFFF;
     --color-text-secondary: var(--deframe-text-secondary, #5C5F66);
@@ -105,16 +110,13 @@
     --color-border-subtle-dark: #1E1E1E;
     --color-border-strong: #C6C8CC;
     --color-border-strong-dark: #3A3A3A;
-    --color-brand-tint: #EEF0FF;
-    --color-brand-tint-dark: #1E1E3F;
-    --color-brand-secondary-20: #A9ABF733;
-    --color-brand-tint-75: #EEF0FFBF;
-    --color-brand-tint-75-dark: #1E1E3FBF;
-    --color-brand-tint-60: #EEF0FF99;
-    --color-brand-tint-60-dark: #1E1E3F99;
-    --spacing-md: 16px;
-    --spacing-lg: 32px;
-    --opacity-state-disabled-content: 0.38;
+    --color-state-success: var(--deframe-state-success, #2BA176);
+    --color-state-warning: var(--deframe-state-warning, #F6A700);
+    --color-state-error: var(--deframe-state-error, #FF4D4F);
+    --spacing-sm: clamp(6px, 1vw, 8px);
+    --spacing-md: clamp(12px, 2vw, 16px);
+    --spacing-lg: clamp(20px, 3vw, 32px);
+    --radius-full: 9999px;
     --animate-fade-in: fade-in 0.3s ease-out;
   }
 }
@@ -279,6 +281,9 @@
   .relative {
     position: relative;
   }
+  .sticky {
+    position: sticky;
+  }
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
@@ -366,6 +371,9 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -378,6 +386,9 @@
   .mt-auto {
     margin-top: auto;
   }
+  .mt-sm {
+    margin-top: var(--spacing-sm);
+  }
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -405,6 +416,9 @@
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
+  .ml-6 {
+    margin-left: calc(var(--spacing) * 6);
+  }
   .block {
     display: block;
   }
@@ -429,6 +443,9 @@
   .h-0\.5 {
     height: calc(var(--spacing) * 0.5);
   }
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
   .h-3 {
     height: calc(var(--spacing) * 3);
   }
@@ -453,18 +470,39 @@
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .h-20 {
+    height: calc(var(--spacing) * 20);
+  }
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
   .h-80 {
     height: calc(var(--spacing) * 80);
   }
+  .h-\[17px\] {
+    height: 17px;
+  }
+  .h-\[18px\] {
+    height: 18px;
+  }
   .h-\[50vh\] {
     height: 50vh;
   }
+  .h-\[56px\] {
+    height: 56px;
+  }
   .h-\[72px\] {
     height: 72px;
   }
+  .h-\[200px\] {
+    height: 200px;
+  }
+  .h-\[300px\] {
+    height: 300px;
+  }
+  .h-\[700px\] {
+    height: 700px;
+  }
   .h-\[844px\] {
     height: 844px;
   }
@@ -477,15 +515,30 @@
   .h-full {
     height: 100%;
   }
+  .h-px {
+    height: 1px;
+  }
+  .h-screen {
+    height: 100vh;
+  }
   .max-h-60 {
     max-height: calc(var(--spacing) * 60);
   }
+  .min-h-0 {
+    min-height: calc(var(--spacing) * 0);
+  }
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
+  .min-h-full {
+    min-height: 100%;
+  }
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -510,6 +563,9 @@
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
@@ -534,9 +590,21 @@
   .w-96 {
     width: calc(var(--spacing) * 96);
   }
+  .w-\[18px\] {
+    width: 18px;
+  }
+  .w-\[300px\] {
+    width: 300px;
+  }
   .w-\[390px\] {
     width: 390px;
   }
+  .w-\[400px\] {
+    width: 400px;
+  }
+  .w-\[420px\] {
+    width: 420px;
+  }
   .w-\[clamp\(18rem\,40vw\,30rem\)\] {
     width: clamp(18rem, 40vw, 30rem);
   }
@@ -552,6 +620,12 @@
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
+  .max-w-\[320px\] {
+    max-width: 320px;
+  }
+  .max-w-\[620px\] {
+    max-width: 620px;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -561,6 +635,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-\[120px\] {
+    min-width: 120px;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -597,6 +674,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .list-none {
+    list-style-type: none;
+  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -633,6 +713,9 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -642,6 +725,9 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -657,9 +743,21 @@
   .gap-12 {
     gap: calc(var(--spacing) * 12);
   }
+  .gap-\[2px\] {
+    gap: 2px;
+  }
+  .gap-\[var\(--deframe-widget-size-gap-sm\)\] {
+    gap: var(--deframe-widget-size-gap-sm);
+  }
+  .gap-lg {
+    gap: var(--spacing-lg);
+  }
   .gap-md {
     gap: var(--spacing-md);
   }
+  .gap-sm {
+    gap: var(--spacing-sm);
+  }
   .space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -745,6 +843,9 @@
   .rounded-\[18px\] {
     border-radius: 18px;
   }
+  .rounded-\[24px\] {
+    border-radius: 24px;
+  }
   .rounded-\[56px\] {
     border-radius: 56px;
   }
@@ -757,8 +858,11 @@
   .rounded-\[var\(--deframe-widget-radius-lg\)\] {
     border-radius: var(--deframe-widget-radius-lg);
   }
+  .rounded-\[var\(--deframe-widget-size-radius-xs\)\] {
+    border-radius: var(--deframe-widget-size-radius-xs);
+  }
   .rounded-full {
-    border-radius: calc(infinity * 1px);
+    border-radius: var(--radius-full);
   }
   .rounded-lg {
     border-radius: var(--radius-lg);
@@ -774,8 +878,8 @@
     border-top-right-radius: 32px;
   }
   .rounded-t-full {
-    border-top-left-radius: calc(infinity * 1px);
-    border-top-right-radius: calc(infinity * 1px);
+    border-top-left-radius: var(--radius-full);
+    border-top-right-radius: var(--radius-full);
   }
   .rounded-b-3xl {
     border-bottom-right-radius: var(--radius-3xl);
@@ -789,6 +893,10 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .border-\[length\:var\(--deframe-widget-size-border-xs\)\] {
+    border-style: var(--tw-border-style);
+    border-width: var(--deframe-widget-size-border-xs);
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -801,12 +909,28 @@
     --tw-border-style: none;
     border-style: none;
   }
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
   .border-\[\#2A2A2A\] {
     border-color: #2A2A2A;
   }
   .border-\[\#3A3A3A\] {
     border-color: #3A3A3A;
   }
+  .border-\[color\:var\(--deframe-widget-color-border-primary\)\] {
+    border-color: var(--deframe-widget-color-border-primary);
+  }
+  .border-\[color\:var\(--deframe-widget-color-border-primary-disabled\)\] {
+    border-color: var(--deframe-widget-color-border-primary-disabled);
+  }
+  .border-\[color\:var\(--deframe-widget-color-border-secondary\)\] {
+    border-color: var(--deframe-widget-color-border-secondary);
+  }
+  .border-\[color\:var\(--deframe-widget-color-border-secondary-disabled\)\] {
+    border-color: var(--deframe-widget-color-border-secondary-disabled);
+  }
   .border-\[var\(--color-border-default\,\#333\)\] {
     border-color: var(--color-border-default,#333);
   }
@@ -822,6 +946,9 @@
   .border-border-subtle {
     border-color: var(--color-border-subtle);
   }
+  .border-brand-primary {
+    border-color: var(--color-brand-primary);
+  }
   .border-gray-500 {
     border-color: var(--color-gray-500);
   }
@@ -861,6 +988,9 @@
   .bg-\[\#ff7a45\] {
     background-color: #ff7a45;
   }
+  .bg-\[rgba\(43\,161\,118\,0\.12\)\] {
+    background-color: rgba(43,161,118,0.12);
+  }
   .bg-\[var\(--color-bg-muted\,\#2a2a2a\)\] {
     background-color: var(--color-bg-muted,#2a2a2a);
   }
@@ -873,6 +1003,9 @@
   .bg-\[var\(--deframe-widget-color-brand-primary\)\] {
     background-color: var(--deframe-widget-color-brand-primary);
   }
+  .bg-\[var\(--deframe-widget-color-brand-primary-disabled\)\] {
+    background-color: var(--deframe-widget-color-brand-primary-disabled);
+  }
   .bg-\[var\(--deframe-widget-color-surface-default\)\] {
     background-color: var(--deframe-widget-color-surface-default);
   }
@@ -882,9 +1015,21 @@
   .bg-\[var\(--sheet-bg\,\#0A0A0A\)\] {
     background-color: var(--sheet-bg,#0A0A0A);
   }
+  .bg-amber-500\/20 {
+    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
+    }
+  }
+  .bg-bg-default {
+    background-color: var(--color-bg-default);
+  }
   .bg-bg-muted {
     background-color: var(--color-bg-muted);
   }
+  .bg-bg-raised {
+    background-color: var(--color-bg-raised);
+  }
   .bg-bg-subtle {
     background-color: var(--color-bg-subtle);
   }
@@ -915,6 +1060,9 @@
       background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
     }
   }
+  .bg-border-default {
+    background-color: var(--color-border-default);
+  }
   .bg-brand-primary {
     background-color: var(--color-brand-primary);
   }
@@ -945,6 +1093,21 @@
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
+  .bg-red-500\/20 {
+    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
+    }
+  }
+  .bg-state-success {
+    background-color: var(--color-state-success);
+  }
+  .bg-teal-600\/20 {
+    background-color: color-mix(in srgb, oklch(60% 0.118 184.704) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-teal-600) 20%, transparent);
+    }
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1026,6 +1189,15 @@
   .object-cover {
     object-fit: cover;
   }
+  .\!p-\[24px\] {
+    padding: 24px !important;
+  }
+  .\!p-md {
+    padding: var(--spacing-md) !important;
+  }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -1047,6 +1219,9 @@
   .p-\[var\(--deframe-widget-space-md\)\] {
     padding: var(--deframe-widget-space-md);
   }
+  .p-md {
+    padding: var(--spacing-md);
+  }
   .px-0 {
     padding-inline: calc(var(--spacing) * 0);
   }
@@ -1062,12 +1237,24 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .px-\[8px\] {
+    padding-inline: 8px;
+  }
   .px-\[28px\] {
     padding-inline: 28px;
   }
   .px-\[var\(--deframe-widget-button-padding-x\)\] {
     padding-inline: var(--deframe-widget-button-padding-x);
   }
+  .px-\[var\(--deframe-widget-size-padding-x-xl\)\] {
+    padding-inline: var(--deframe-widget-size-padding-x-xl);
+  }
+  .px-md {
+    padding-inline: var(--spacing-md);
+  }
+  .px-sm {
+    padding-inline: var(--spacing-sm);
+  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
@@ -1092,6 +1279,24 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .py-\[2px\] {
+    padding-block: 2px;
+  }
+  .py-\[6px\] {
+    padding-block: 6px;
+  }
+  .py-\[10px\] {
+    padding-block: 10px;
+  }
+  .py-\[var\(--deframe-widget-size-padding-y-md\)\] {
+    padding-block: var(--deframe-widget-size-padding-y-md);
+  }
+  .py-lg {
+    padding-block: var(--spacing-lg);
+  }
+  .py-md {
+    padding-block: var(--spacing-md);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -1104,12 +1309,18 @@
   .pt-16 {
     padding-top: calc(var(--spacing) * 16);
   }
+  .pt-sm {
+    padding-top: var(--spacing-sm);
+  }
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
   .pr-6 {
     padding-right: calc(var(--spacing) * 6);
   }
+  .pr-md {
+    padding-right: var(--spacing-md);
+  }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
@@ -1119,6 +1330,12 @@
   .pb-24 {
     padding-bottom: calc(var(--spacing) * 24);
   }
+  .pb-md {
+    padding-bottom: var(--spacing-md);
+  }
+  .pb-sm {
+    padding-bottom: var(--spacing-sm);
+  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
@@ -1179,12 +1396,24 @@
   .\[font-size\:var\(--deframe-widget-font-size-h4\)\] {
     font-size: var(--deframe-widget-font-size-h4);
   }
+  .\[font-size\:var\(--deframe-widget-font-size-md\)\] {
+    font-size: var(--deframe-widget-font-size-md);
+  }
   .\[font-size\:var\(--deframe-widget-font-size-text-medium\)\] {
     font-size: var(--deframe-widget-font-size-text-medium);
   }
+  .text-\[10px\] {
+    font-size: 10px;
+  }
+  .text-\[11px\] {
+    font-size: 11px;
+  }
   .text-\[12px\] {
     font-size: 12px;
   }
+  .text-\[13px\] {
+    font-size: 13px;
+  }
   .text-\[14px\] {
     font-size: 14px;
   }
@@ -1209,6 +1438,10 @@
   .text-\[56px\] {
     font-size: 56px;
   }
+  .leading-4 {
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+  }
   .leading-5 {
     --tw-leading: calc(var(--spacing) * 5);
     line-height: calc(var(--spacing) * 5);
@@ -1233,6 +1466,13 @@
     --tw-leading: 140%;
     line-height: 140%;
   }
+  .\[line-height\:var\(--deframe-widget-font-leading-md\)\] {
+    line-height: var(--deframe-widget-font-leading-md);
+  }
+  .font-\[var\(--deframe-widget-font-family\)\] {
+    --tw-font-weight: var(--deframe-widget-font-family);
+    font-weight: var(--deframe-widget-font-family);
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -1256,10 +1496,18 @@
   .\[font-weight\:var\(--deframe-widget-font-weight-semibold\)\] {
     font-weight: var(--deframe-widget-font-weight-semibold);
   }
+  .tracking-\[0\.07em\] {
+    --tw-tracking: 0.07em;
+    letter-spacing: 0.07em;
+  }
   .tracking-\[0\] {
     --tw-tracking: 0;
     letter-spacing: 0;
   }
+  .tracking-wide {
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
   .break-all {
     word-break: break-all;
   }
@@ -1275,6 +1523,18 @@
   .text-\[\#252050\] {
     color: #252050;
   }
+  .text-\[color\:var\(--deframe-widget-color-brand-secondary\)\] {
+    color: var(--deframe-widget-color-brand-secondary);
+  }
+  .text-\[color\:var\(--deframe-widget-color-brand-tertiary\)\] {
+    color: var(--deframe-widget-color-brand-tertiary);
+  }
+  .text-\[color\:var\(--deframe-widget-color-text-secondary-disabled\)\] {
+    color: var(--deframe-widget-color-text-secondary-disabled);
+  }
+  .text-\[color\:var\(--deframe-widget-color-text-tertiary-disabled\)\] {
+    color: var(--deframe-widget-color-text-tertiary-disabled);
+  }
   .text-\[var\(--color-text-highlight\,\#7C3AED\)\] {
     color: var(--color-text-highlight,#7C3AED);
   }
@@ -1296,6 +1556,12 @@
   .text-\[var\(--deframe-widget-color-content-secondary\)\] {
     color: var(--deframe-widget-color-content-secondary);
   }
+  .text-\[var\(--deframe-widget-color-text-primary\)\] {
+    color: var(--deframe-widget-color-text-primary);
+  }
+  .text-\[var\(--deframe-widget-color-text-primary-disabled\)\] {
+    color: var(--deframe-widget-color-text-primary-disabled);
+  }
   .text-blue-100 {
     color: var(--color-blue-100);
   }
@@ -1344,6 +1610,15 @@
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .text-state-error {
+    color: var(--color-state-error);
+  }
+  .text-state-success {
+    color: var(--color-state-success);
+  }
+  .text-state-warning {
+    color: var(--color-state-warning);
+  }
   .text-text-disabled {
     color: var(--color-text-disabled);
   }
@@ -1365,6 +1640,9 @@
   .text-yellow-800 {
     color: var(--color-yellow-800);
   }
+  .uppercase {
+    text-transform: uppercase;
+  }
   .italic {
     font-style: italic;
   }
@@ -1394,8 +1672,8 @@
   .opacity-60 {
     opacity: 60%;
   }
-  .opacity-state-disabled-content {
-    opacity: var(--opacity-state-disabled-content);
+  .opacity-95 {
+    opacity: 95%;
   }
   .shadow {
     --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));
@@ -1409,6 +1687,10 @@
     --tw-shadow: 0 8px 16px 0 var(--tw-shadow-color, rgba(0,0,0,0.10));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0,0,0,0.10));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1424,11 +1706,14 @@
   .outline-offset-\[-1px\] {
     outline-offset: -1px;
   }
-  .outline-border-default {
-    outline-color: var(--color-border-default);
+  .outline-state-error {
+    outline-color: var(--color-state-error);
+  }
+  .outline-state-success {
+    outline-color: var(--color-state-success);
   }
-  .outline-border-subtle {
-    outline-color: var(--color-border-subtle);
+  .outline-state-warning {
+    outline-color: var(--color-state-warning);
   }
   .blur-\[160px\] {
     --tw-blur: blur(160px);
@@ -1493,6 +1778,11 @@
       rotate: 180deg;
     }
   }
+  .placeholder\:text-text-disabled {
+    &::placeholder {
+      color: var(--color-text-disabled);
+    }
+  }
   .hover\:border-\[var\(--color-border-strong\,\#555\)\] {
     &:hover {
       @media (hover: hover) {
@@ -1556,20 +1846,6 @@
       }
     }
   }
-  .hover\:bg-brand-secondary-20 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-brand-secondary-20);
-      }
-    }
-  }
-  .hover\:bg-brand-tint {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-brand-tint);
-      }
-    }
-  }
   .hover\:bg-gray-800 {
     &:hover {
       @media (hover: hover) {
@@ -1594,6 +1870,13 @@
       }
     }
   }
+  .hover\:text-brand-primary {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-brand-primary);
+      }
+    }
+  }
   .hover\:text-gray-300 {
     &:hover {
       @media (hover: hover) {
@@ -1637,28 +1920,11 @@
       }
     }
   }
-  .hover\:outline-brand-primary {
-    &:hover {
-      @media (hover: hover) {
-        outline-color: var(--color-brand-primary);
-      }
-    }
-  }
   .focus\:border-\[var\(--color-brand-primary\,\#7C3AED\)\] {
     &:focus {
       border-color: var(--color-brand-primary,#7C3AED);
     }
   }
-  .focus\:bg-brand-secondary-20 {
-    &:focus {
-      background-color: var(--color-brand-secondary-20);
-    }
-  }
-  .focus\:bg-brand-tint-75 {
-    &:focus {
-      background-color: var(--color-brand-tint-75);
-    }
-  }
   .focus\:opacity-85 {
     &:focus {
       opacity: 85%;
@@ -1688,11 +1954,6 @@
       --tw-ring-color: var(--color-brand-primary);
     }
   }
-  .focus\:outline-brand-primary {
-    &:focus {
-      outline-color: var(--color-brand-primary);
-    }
-  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -1710,16 +1971,6 @@
       scale: 0.98;
     }
   }
-  .active\:bg-brand-tint-60 {
-    &:active {
-      background-color: var(--color-brand-tint-60);
-    }
-  }
-  .active\:bg-transparent {
-    &:active {
-      background-color: transparent;
-    }
-  }
   .active\:bg-white\/20 {
     &:active {
       background-color: color-mix(in srgb, #fff 20%, transparent);
@@ -1733,11 +1984,6 @@
       opacity: 85%;
     }
   }
-  .active\:outline-border-default {
-    &:active {
-      outline-color: var(--color-border-default);
-    }
-  }
   .disabled\:pointer-events-none {
     &:disabled {
       pointer-events: none;
@@ -1782,6 +2028,16 @@
       font-size: 17px;
     }
   }
+  .lg\:\!bg-bg-raised {
+    @media (width >= 64rem) {
+      background-color: var(--color-bg-raised) !important;
+    }
+  }
+  .lg\:bg-bg-subtle {
+    @media (width >= 64rem) {
+      background-color: var(--color-bg-subtle);
+    }
+  }
   .lg\:text-5xl {
     @media (width >= 64rem) {
       font-size: var(--text-5xl);
@@ -1798,16 +2054,31 @@
       border-color: var(--color-border-subtle-dark);
     }
   }
+  .dark\:bg-bg-default-dark {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-bg-default-dark);
+    }
+  }
   .dark\:bg-bg-muted-dark {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-bg-muted-dark);
     }
   }
+  .dark\:bg-bg-raised-dark {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-bg-raised-dark);
+    }
+  }
   .dark\:bg-bg-subtle-dark {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-bg-subtle-dark);
     }
   }
+  .dark\:bg-border-default-dark {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-border-default-dark);
+    }
+  }
   .dark\:via-gray-600\/30 {
     @media (prefers-color-scheme: dark) {
       --tw-gradient-via: color-mix(in srgb, oklch(44.6% 0.03 256.802) 30%, transparent);
@@ -1823,6 +2094,16 @@
       color: var(--color-brand-primary-dark);
     }
   }
+  .dark\:text-brand-secondary-dark {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-brand-secondary-dark);
+    }
+  }
+  .dark\:text-state-error {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-state-error);
+    }
+  }
   .dark\:text-text-disabled-dark {
     @media (prefers-color-scheme: dark) {
       color: var(--color-text-disabled-dark);
@@ -1843,14 +2124,11 @@
       color: var(--color-text-tertiary-dark);
     }
   }
-  .dark\:outline-border-default-dark {
+  .dark\:placeholder\:text-text-disabled-dark {
     @media (prefers-color-scheme: dark) {
-      outline-color: var(--color-border-default-dark);
-    }
-  }
-  .dark\:outline-border-subtle-dark {
-    @media (prefers-color-scheme: dark) {
-      outline-color: var(--color-border-subtle-dark);
+      &::placeholder {
+        color: var(--color-text-disabled-dark);
+      }
     }
   }
   .dark\:hover\:border-border-default-dark {
@@ -1871,15 +2149,6 @@
       }
     }
   }
-  .dark\:hover\:bg-brand-tint-dark {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--color-brand-tint-dark);
-        }
-      }
-    }
-  }
   .dark\:hover\:text-text-primary-dark {
     @media (prefers-color-scheme: dark) {
       &:hover {
@@ -1889,17 +2158,10 @@
       }
     }
   }
-  .dark\:focus\:bg-brand-tint-75-dark {
-    @media (prefers-color-scheme: dark) {
-      &:focus {
-        background-color: var(--color-brand-tint-75-dark);
-      }
-    }
-  }
-  .dark\:active\:bg-brand-tint-60-dark {
-    @media (prefers-color-scheme: dark) {
-      &:active {
-        background-color: var(--color-brand-tint-60-dark);
+  .lg\:dark\:bg-bg-subtle-dark {
+    @media (width >= 64rem) {
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-bg-subtle-dark);
       }
     }
   }
@@ -1941,6 +2203,114 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+:root,
+.deframe-widget {
+  --deframe-widget-font-family: 'Satoshi', sans-serif;
+  --deframe-widget-font-size-xs: 0.6875rem;
+  --deframe-widget-font-size-sm: clamp(0.6875rem, 1.8vw, 0.8125rem);
+  --deframe-widget-font-size-md: clamp(0.8125rem, 2vw, 0.9375rem);
+  --deframe-widget-font-size-lg: clamp(0.9375rem, 2.5vw, 1.125rem);
+  --deframe-widget-font-size-xl: clamp(1.0625rem, 2.8vw, 1.25rem);
+  --deframe-widget-font-size-xxl: clamp(1.25rem, 3.2vw, 1.5rem);
+  --deframe-widget-font-leading-xs: clamp(0.75em, 2vw, 0.875em);
+  --deframe-widget-font-leading-sm: clamp(0.875em, 2.2vw, 1em);
+  --deframe-widget-font-leading-md: clamp(1.0625em, 2.5vw, 1.25em);
+  --deframe-widget-font-leading-lg: clamp(1.25em, 3vw, 1.5em);
+  --deframe-widget-font-leading-xl: clamp(1.5em, 3.5vw, 1.75em);
+  --deframe-widget-font-leading-xxl: clamp(1.75em, 4vw, 2em);
+  --deframe-widget-font-weight-thin: 100;
+  --deframe-widget-font-weight-light: 300;
+  --deframe-widget-font-weight-regular: 400;
+  --deframe-widget-font-weight-medium: 500;
+  --deframe-widget-font-weight-semibold: 600;
+  --deframe-widget-font-weight-bold: 700;
+  --deframe-widget-font-weight-extrabold: 800;
+  --deframe-widget-color-text-primary: #323232;
+  --deframe-widget-color-text-primary-dark: #ffffff;
+  --deframe-widget-color-text-primary-disabled: #c6c8cc;
+  --deframe-widget-color-text-secondary: #c6c8cc;
+  --deframe-widget-color-text-secondary-dark: #c6c8cc;
+  --deframe-widget-color-text-secondary-disabled: #898d95;
+  --deframe-widget-color-text-tertiary: #898d95;
+  --deframe-widget-color-text-tertiary-dark: #898d95;
+  --deframe-widget-color-text-tertiary-disabled: #5c5f66;
+  --deframe-widget-color-placeholder-primary: #c6c8cc;
+  --deframe-widget-color-placeholder-primary-dark: #c6c8cc;
+  --deframe-widget-color-placeholder-primary-disabled: #898d95;
+  --deframe-widget-color-placeholder-secondary: #898d95;
+  --deframe-widget-color-placeholder-secondary-dark: #898d95;
+  --deframe-widget-color-placeholder-secondary-disabled: #5c5f66;
+  --deframe-widget-color-placeholder-tertiary: #5c5f66;
+  --deframe-widget-color-placeholder-tertiary-dark: #5c5f66;
+  --deframe-widget-color-placeholder-tertiary-disabled: #3a3a3a;
+  --deframe-widget-color-brand-primary: #50d890;
+  --deframe-widget-color-brand-primary-dark: #50d890;
+  --deframe-widget-color-brand-primary-disabled: #6f6e6e;
+  --deframe-widget-color-brand-secondary: #ffd166;
+  --deframe-widget-color-brand-secondary-dark: #ffd166;
+  --deframe-widget-color-brand-secondary-disabled: #6f6e6e;
+  --deframe-widget-color-brand-tertiary: #50d890;
+  --deframe-widget-color-brand-tertiary-dark: #50d890;
+  --deframe-widget-color-brand-tertiary-disabled: #6f6e6e;
+  --deframe-widget-color-bg-primary: #251a15;
+  --deframe-widget-color-bg-primary-dark: #251a15;
+  --deframe-widget-color-bg-primary-disabled: #373534;
+  --deframe-widget-color-bg-secondary: #31231d;
+  --deframe-widget-color-bg-secondary-dark: #31231d;
+  --deframe-widget-color-bg-secondary-disabled: #1d1410;
+  --deframe-widget-color-bg-tertiary: #4f352a;
+  --deframe-widget-color-bg-tertiary-dark: #4f352a;
+  --deframe-widget-color-bg-tertiary-disabled: #2c1a14;
+  --deframe-widget-color-border-primary: #923108;
+  --deframe-widget-color-border-primary-dark: #4f352a;
+  --deframe-widget-color-border-primary-disabled: #000000;
+  --deframe-widget-color-border-secondary: #31231d;
+  --deframe-widget-color-border-secondary-dark: #31231d;
+  --deframe-widget-color-border-secondary-disabled: #cdcac9;
+  --deframe-widget-color-border-tertiary: #251a15;
+  --deframe-widget-color-border-tertiary-dark: #251a15;
+  --deframe-widget-color-border-tertiary-disabled: #1d1410;
+  --deframe-widget-color-state-info: #58b4ff;
+  --deframe-widget-color-state-warning: #ffb845;
+  --deframe-widget-color-state-error: #ff4d4f;
+  --deframe-widget-color-state-success: #50d890;
+  --deframe-widget-size-padding-x-none: 0;
+  --deframe-widget-size-padding-x-xs: 0.25em;
+  --deframe-widget-size-padding-x-sm: 0.5em;
+  --deframe-widget-size-padding-x-md: clamp(0.625em, 2vw, 1em);
+  --deframe-widget-size-padding-x-lg: clamp(1em, 2.5vw, 1.5em);
+  --deframe-widget-size-padding-x-xl: clamp(1.25em, 3vw, 2em);
+  --deframe-widget-size-padding-x-xxl: clamp(2em, 4vw, 3em);
+  --deframe-widget-size-padding-y-none: 0;
+  --deframe-widget-size-padding-y-xs: 0.25em;
+  --deframe-widget-size-padding-y-sm: 0.5em;
+  --deframe-widget-size-padding-y-md: clamp(0.5em, 1.5vh, 1em);
+  --deframe-widget-size-padding-y-lg: clamp(0.875em, 2vh, 1.5em);
+  --deframe-widget-size-padding-y-xl: clamp(1em, 2.5vh, 2em);
+  --deframe-widget-size-padding-y-xxl: clamp(1.75em, 3.5vh, 3em);
+  --deframe-widget-size-gap-none: 0;
+  --deframe-widget-size-gap-xs: 0.25em;
+  --deframe-widget-size-gap-sm: clamp(0.375em, 1vw, 0.5em);
+  --deframe-widget-size-gap-md: clamp(0.625em, 1.5vw, 1em);
+  --deframe-widget-size-gap-lg: clamp(1em, 2vw, 1.5em);
+  --deframe-widget-size-gap-xl: clamp(1.25em, 2.5vw, 2em);
+  --deframe-widget-size-gap-xxl: clamp(2em, 3.5vw, 3em);
+  --deframe-widget-size-border-none: 0;
+  --deframe-widget-size-border-xs: 1px;
+  --deframe-widget-size-border-sm: 2px;
+  --deframe-widget-size-border-md: 4px;
+  --deframe-widget-size-border-lg: 8px;
+  --deframe-widget-size-border-xl: 16px;
+  --deframe-widget-size-border-xxl: 32px;
+  --deframe-widget-size-radius-none: 0;
+  --deframe-widget-size-radius-xs: 0.25rem;
+  --deframe-widget-size-radius-sm: 0.375rem;
+  --deframe-widget-size-radius-md: clamp(0.5rem, 1.8vw, 0.875rem);
+  --deframe-widget-size-radius-lg: clamp(0.875rem, 2.5vw, 1.5rem);
+  --deframe-widget-size-radius-xl: clamp(1.25rem, 3vw, 2rem);
+  --deframe-widget-size-radius-xxl: clamp(1.75rem, 4vw, 3rem);
+  --deframe-widget-size-radius-full: 9999px;
+}
 .deframe-widget:is(.dark, .cryptocontrol) {
   --color-brand-primary: var(--deframe-brand-primary, var(--color-brand-primary-dark));
   --color-bg-default: var(--deframe-bg-default, var(--color-bg-default-dark));