@tuwaio/sdk 0.7.1 → 0.8.0

package/dist/styles/nova-core.css

@@ -17,18 +17,17 @@
     'Liberation Mono',
     monospace
   );
-    --novacore-color-black: #000;
     --novacore-color-white: #fff;
     --novacore-spacing: 0.25rem;
+    --novacore-text-xs: 0.75rem;
+    --novacore-text-xs--line-height: calc(1 / 0.75);
     --novacore-text-sm: 0.875rem;
     --novacore-text-sm--line-height: calc(1.25 / 0.875);
     --novacore-text-lg: 1.125rem;
     --novacore-text-lg--line-height: calc(1.75 / 1.125);
-    --novacore-font-weight-semibold: 600;
     --novacore-font-weight-bold: 700;
     --novacore-tracking-tight: -0.025em;
     --novacore-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-    --novacore-blur-sm: 8px;
     --novacore-default-transition-duration: 150ms;
     --novacore-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   }
@@ -126,9 +125,6 @@
   .novacore\:h-12 {
     height: calc(var(--novacore-spacing) * 12);
   }
-  .novacore\:h-20 {
-    height: calc(var(--novacore-spacing) * 20);
-  }
   .novacore\:h-full {
     height: 100%;
   }
@@ -138,8 +134,8 @@
   .novacore\:min-h-\[36px\] {
     min-height: 36px;
   }
-  .novacore\:w-1\/3 {
-    width: calc(1 / 3 * 100%);
+  .novacore\:w-1\/4 {
+    width: calc(1 / 4 * 100%);
   }
   .novacore\:w-4 {
     width: calc(var(--novacore-spacing) * 4);
@@ -195,6 +191,9 @@
   .novacore\:gap-1 {
     gap: var(--novacore-spacing);
   }
+  .novacore\:gap-1\.5 {
+    gap: calc(var(--novacore-spacing) * 1.5);
+  }
   .novacore\:overflow-hidden {
     overflow: hidden;
   }
@@ -210,8 +209,8 @@
   .novacore\:rounded-\[var\(--tuwa-rounded-corners\)\] {
     border-radius: var(--tuwa-rounded-corners);
   }
-  .novacore\:rounded-full {
-    border-radius: calc(infinity * 1px);
+  .novacore\:rounded-\[var\(--tuwa-rounded-full\)\] {
+    border-radius: var(--tuwa-rounded-full);
   }
   .novacore\:rounded-t-\[var\(--tuwa-rounded-corners\)\] {
     border-top-left-radius: var(--tuwa-rounded-corners);
@@ -228,11 +227,14 @@
   .novacore\:border-\[var\(--tuwa-border-primary\)\] {
     border-color: var(--tuwa-border-primary);
   }
-  .novacore\:border-white\/10 {
-    border-color: var(--novacore-color-white);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--novacore-color-white) 10%, transparent);
-    }
+  .novacore\:border-\[var\(--tuwa-border-strong\)\] {
+    border-color: var(--tuwa-border-strong);
+  }
+  .novacore\:border-\[var\(--tuwa-button-primary-bg\)\] {
+    border-color: var(--tuwa-button-primary-bg);
+  }
+  .novacore\:bg-\[rgb\(16_16_20\/0\.5\)\] {
+    background-color: rgb(16 16 20/0.5);
   }
   .novacore\:bg-\[var\(--tuwa-bg-muted\)\] {
     background-color: var(--tuwa-bg-muted);
@@ -240,8 +242,8 @@
   .novacore\:bg-\[var\(--tuwa-bg-primary\)\] {
     background-color: var(--tuwa-bg-primary);
   }
-  .novacore\:bg-\[var\(--tuwa-button-gradient-from\)\] {
-    background-color: var(--tuwa-button-gradient-from);
+  .novacore\:bg-\[var\(--tuwa-button-primary-bg\)\] {
+    background-color: var(--tuwa-button-primary-bg);
   }
   .novacore\:bg-\[var\(--tuwa-standart-button-bg\)\] {
     background-color: var(--tuwa-standart-button-bg);
@@ -249,12 +251,6 @@
   .novacore\:bg-\[var\(--tuwa-testnet-icons\)\] {
     background-color: var(--tuwa-testnet-icons);
   }
-  .novacore\:bg-black\/55 {
-    background-color: var(--novacore-color-black);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--novacore-color-black) 55%, transparent);
-    }
-  }
   .novacore\:p-0 {
     padding: 0px;
   }
@@ -264,9 +260,15 @@
   .novacore\:p-4 {
     padding: calc(var(--novacore-spacing) * 4);
   }
+  .novacore\:px-1\.5 {
+    padding-inline: calc(var(--novacore-spacing) * 1.5);
+  }
   .novacore\:px-3 {
     padding-inline: calc(var(--novacore-spacing) * 3);
   }
+  .novacore\:py-0\.5 {
+    padding-block: calc(var(--novacore-spacing) * 0.5);
+  }
   .novacore\:py-2 {
     padding-block: calc(var(--novacore-spacing) * 2);
   }
@@ -281,6 +283,24 @@
     font-size: var(--novacore-text-sm);
     line-height: var(--tw-leading, var(--novacore-text-sm--line-height));
   }
+  .novacore\:text-xs {
+    font-size: var(--novacore-text-xs);
+    line-height: var(--tw-leading, var(--novacore-text-xs--line-height));
+  }
+  .novacore\:text-\[10px\] {
+    font-size: 10px;
+  }
+  .novacore\:text-\[11px\] {
+    font-size: 11px;
+  }
+  .novacore\:leading-3 {
+    --tw-leading: calc(var(--novacore-spacing) * 3);
+    line-height: calc(var(--novacore-spacing) * 3);
+  }
+  .novacore\:leading-4 {
+    --tw-leading: calc(var(--novacore-spacing) * 4);
+    line-height: calc(var(--novacore-spacing) * 4);
+  }
   .novacore\:leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -289,9 +309,9 @@
     --tw-font-weight: var(--novacore-font-weight-bold);
     font-weight: var(--novacore-font-weight-bold);
   }
-  .novacore\:font-semibold {
-    --tw-font-weight: var(--novacore-font-weight-semibold);
-    font-weight: var(--novacore-font-weight-semibold);
+  .novacore\:tracking-\[0\.12em\] {
+    --tw-tracking: 0.12em;
+    letter-spacing: 0.12em;
   }
   .novacore\:tracking-tight {
     --tw-tracking: var(--novacore-tracking-tight);
@@ -318,21 +338,12 @@
   .novacore\:text-white {
     color: var(--novacore-color-white);
   }
+  .novacore\:uppercase {
+    text-transform: uppercase;
+  }
   .novacore\:opacity-0 {
     opacity: 0%;
   }
-  .novacore\:shadow-lg {
-    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .novacore\:backdrop-blur-sm {
-    --tw-backdrop-blur: blur(var(--novacore-blur-sm));
-    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-  }
-  .novacore\:backdrop-saturate-150 {
-    --tw-backdrop-saturate: saturate(150%);
-    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-  }
   .novacore\:transition-colors {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--novacore-default-transition-timing-function));
@@ -354,11 +365,14 @@
     backface-visibility: hidden;
   }
   @media (hover: hover) {
+    .novacore\:hover\:border-\[var\(--tuwa-button-primary-bg-hover\)\]:hover {
+      border-color: var(--tuwa-button-primary-bg-hover);
+    }
     .novacore\:hover\:bg-\[var\(--tuwa-bg-muted\)\]:hover {
       background-color: var(--tuwa-bg-muted);
     }
-    .novacore\:hover\:bg-\[var\(--tuwa-button-gradient-from-hover\)\]:hover {
-      background-color: var(--tuwa-button-gradient-from-hover);
+    .novacore\:hover\:bg-\[var\(--tuwa-button-primary-bg-hover\)\]:hover {
+      background-color: var(--tuwa-button-primary-bg-hover);
     }
     .novacore\:hover\:bg-\[var\(--tuwa-standart-button-hover\)\]:hover {
       background-color: var(--tuwa-standart-button-hover);
@@ -366,10 +380,6 @@
     .novacore\:hover\:text-\[var\(--tuwa-text-primary\)\]:hover {
       color: var(--tuwa-text-primary);
     }
-    .novacore\:hover\:shadow-xl:hover {
-      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
   }
   .novacore\:disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
@@ -567,6 +577,34 @@
   .tuwa-quasar-loader--compact .tuwa-ql-dash--near {
     stroke-width: 4;
   }
+  .tuwa-quasar-loader--pixel svg {
+    shape-rendering: crispEdges;
+  }
+  .tuwa-qlp-orbit {
+    fill: currentColor;
+    opacity: 0.2;
+    animation: tuwa-qlp-light var(--tuwa-loader-speed) step-end infinite;
+    animation-delay: calc(var(--tuwa-loader-speed) * (var(--i) / var(--n) - 1));
+  }
+  .tuwa-qlp-beam {
+    fill: currentColor;
+    opacity: 0.2;
+    animation: tuwa-qlp-light var(--tuwa-loader-speed) step-end infinite;
+    animation-delay: calc(var(--tuwa-loader-speed) * (0.2 + 0.6 * var(--j) / var(--len) - 1));
+  }
+  .tuwa-qlp-node {
+    fill: var(--tuwa-loader-accent, var(--tuwa-text-accent));
+    opacity: 0.25;
+    animation: tuwa-ql-node var(--tuwa-loader-speed) step-end infinite;
+  }
+  .tuwa-qlp-glow {
+    fill: var(--tuwa-loader-accent, var(--tuwa-text-accent));
+    opacity: 0.12;
+    animation: tuwa-qlp-glow var(--tuwa-loader-speed) step-end infinite;
+  }
+  .tuwa-qlp-core {
+    fill: var(--tuwa-loader-accent, var(--tuwa-text-accent));
+  }
   @media (prefers-reduced-motion: reduce) {
     .tuwa-quasar-loader * {
       animation: none !important;
@@ -580,6 +618,10 @@
     .tuwa-ql-beam {
       opacity: 0;
     }
+    .tuwa-qlp-park {
+      fill: var(--tuwa-loader-accent, var(--tuwa-text-accent));
+      opacity: 1;
+    }
   }
 }
 @keyframes tuwa-ql-orbit {
@@ -624,6 +666,31 @@
     opacity: 0.3;
   }
 }
+@keyframes tuwa-qlp-light {
+  0% {
+    fill: var(--tuwa-loader-accent, var(--tuwa-text-accent));
+    opacity: 1;
+  }
+  6% {
+    fill: var(--tuwa-loader-accent, var(--tuwa-text-accent));
+    opacity: 0.55;
+  }
+  12%, 100% {
+    fill: currentColor;
+    opacity: 0.2;
+  }
+}
+@keyframes tuwa-qlp-glow {
+  0%, 100% {
+    opacity: 0.12;
+  }
+  25%, 75% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
 @layer components {
   .tuwa-status-glint {
     animation: tuwa-status-glint 1.6s ease-in-out infinite;
@@ -633,7 +700,7 @@
       transform: translateX(-100%);
     }
     to {
-      transform: translateX(300%);
+      transform: translateX(400%);
     }
   }
   @media (prefers-reduced-motion: reduce) {
@@ -661,15 +728,80 @@
   a:hover .tuwa-trash-lid, a:focus-visible .tuwa-trash-lid, button:not(:disabled):hover .tuwa-trash-lid, button:not(:disabled):focus-visible .tuwa-trash-lid {
     transform: rotate(14deg) translateY(-1px);
   }
-  a:active .tuwa-trash-lid, button:active .tuwa-trash-lid {
+  a:active .tuwa-trash-lid, button:not(:disabled):active .tuwa-trash-lid {
+    transform: none;
+    transition-duration: 90ms;
+  }
+  .tuwa-link-arrow-px, .tuwa-exit-arrow-px, .tuwa-trash-lid-px {
+    transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
+  }
+  a:hover .tuwa-link-arrow-px, a:focus-visible .tuwa-link-arrow-px, button:not(:disabled):hover .tuwa-link-arrow-px, button:not(:disabled):focus-visible .tuwa-link-arrow-px {
+    transform: translate(2px, -2px);
+  }
+  a:hover .tuwa-exit-arrow-px, a:focus-visible .tuwa-exit-arrow-px, button:not(:disabled):hover .tuwa-exit-arrow-px, button:not(:disabled):focus-visible .tuwa-exit-arrow-px {
+    transform: translateX(-2px);
+  }
+  a:hover .tuwa-trash-lid-px, a:focus-visible .tuwa-trash-lid-px, button:not(:disabled):hover .tuwa-trash-lid-px, button:not(:disabled):focus-visible .tuwa-trash-lid-px {
+    transform: translate(1px, -2px);
+  }
+  a:active .tuwa-trash-lid-px, button:not(:disabled):active .tuwa-trash-lid-px {
     transform: none;
     transition-duration: 90ms;
   }
+  .tuwa-link-icon, .tuwa-exit-icon, .tuwa-trash-icon {
+    transition: color 200ms ease;
+  }
+  .tuwa-copy-px-sheets {
+    transition: opacity 120ms steps(2, end);
+  }
+  [data-copied] .tuwa-copy-px-sheets {
+    opacity: 0;
+  }
+  .tuwa-copy-px-check {
+    opacity: 0;
+  }
+  [data-copied] .tuwa-copy-px-check {
+    opacity: 1;
+  }
   @media (prefers-reduced-motion: reduce) {
-    .tuwa-link-arrow, .tuwa-exit-arrow, .tuwa-trash-lid {
+    .tuwa-link-arrow, .tuwa-exit-arrow, .tuwa-trash-lid, .tuwa-link-arrow-px, .tuwa-exit-arrow-px, .tuwa-trash-lid-px {
       transition: none;
       transform: none !important;
     }
+    .tuwa-copy-px-sheets {
+      transition: none;
+    }
+  }
+}
+a:not(.tuwa-solid):hover .tuwa-link-icon, a:not(.tuwa-solid):focus-visible .tuwa-link-icon, button:not(.tuwa-solid):not(:disabled):hover .tuwa-link-icon, button:not(.tuwa-solid):not(:disabled):focus-visible .tuwa-link-icon {
+  color: var(--tuwa-text-accent);
+}
+a:not(.tuwa-solid):hover .tuwa-exit-icon, a:not(.tuwa-solid):focus-visible .tuwa-exit-icon, button:not(.tuwa-solid):not(:disabled):hover .tuwa-exit-icon, button:not(.tuwa-solid):not(:disabled):focus-visible .tuwa-exit-icon, a:not(.tuwa-solid):hover .tuwa-trash-icon, a:not(.tuwa-solid):focus-visible .tuwa-trash-icon, button:not(.tuwa-solid):not(:disabled):hover .tuwa-trash-icon, button:not(.tuwa-solid):not(:disabled):focus-visible .tuwa-trash-icon {
+  color: var(--tuwa-error-icon);
+}
+@layer components {
+  @keyframes nova-icon-fly {
+    from {
+      opacity: 0;
+      transform: translate(var(--nova-px-x, 0px), var(--nova-px-y, 0px));
+    }
+  }
+  [data-motion='assemble'] [data-px] {
+    animation: nova-icon-fly 520ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
+    animation-delay: calc(var(--nova-px-start, 0ms) + var(--nova-px-delay, 0ms));
+  }
+  @keyframes nova-icon-breathe {
+    50% {
+      opacity: 0.35;
+    }
+  }
+  svg[data-motion='breathe'] [data-breathe] {
+    animation: nova-icon-breathe 1.6s ease-in-out both;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [data-motion] [data-px], svg[data-motion] [data-breathe] {
+      animation: none;
+    }
   }
 }
 @layer base {
@@ -683,7 +815,7 @@
     [class*='novacon:font-mono'],
     [class*='novatx:font-mono'],
     [class*='novapay:font-mono']
-  ) {
+  ):not([class*=':tracking-']) {
     letter-spacing: -0.025em !important;
   }
   :is(
@@ -700,9 +832,14 @@
       [class*='novacon:font-mono'],
       [class*='novatx:font-mono'],
       [class*='novapay:font-mono']
-    ),
+    ):not([class*=':tracking-']),
   :lang(uk)
-    :is(h1, h2, h3, h4, h5, h6):is([class*='novacore:'], [class*='novacon:'], [class*='novatx:'], [class*='novapay:']) {
+    :is(h1, h2, h3, h4, h5, h6):is(
+      [class*='novacore:'],
+      [class*='novacon:'],
+      [class*='novatx:'],
+      [class*='novapay:']
+    ):not([class*=':tracking-']) {
     letter-spacing: normal !important;
   }
 }
@@ -716,29 +853,32 @@
   --tuwa-pending-bg: oklch(97.3% 0.071 103.193);
   --tuwa-pending-text: oklch(47.6% 0.114 61.907);
   --tuwa-pending-icon: oklch(68.1% 0.162 75.834);
-  --tuwa-info-bg: oklch(96.7% 0.003 264.542);
-  --tuwa-info-text: oklch(44.6% 0.03 256.802);
-  --tuwa-info-icon: oklch(55.1% 0.027 264.364);
-  --tuwa-text-primary: oklch(21% 0.034 264.665);
-  --tuwa-text-secondary: oklch(55.1% 0.027 264.364);
-  --tuwa-text-tertiary: oklch(70.7% 0.022 261.325);
-  --tuwa-text-accent: oklch(54.6% 0.245 262.881);
-  --tuwa-text-on-accent: #fff;
-  --tuwa-bg-primary: #fff;
-  --tuwa-bg-secondary: oklch(98.5% 0.002 247.839);
-  --tuwa-bg-muted: oklch(96.7% 0.003 264.542);
-  --tuwa-border-primary: oklch(92.8% 0.006 264.531);
-  --tuwa-border-secondary: oklch(96.7% 0.003 264.542);
+  --tuwa-info-bg: #e9e8e4;
+  --tuwa-info-text: #55545a;
+  --tuwa-info-icon: #8e8e90;
+  --tuwa-text-primary: #101014;
+  --tuwa-text-secondary: #636366;
+  --tuwa-text-tertiary: #8e8e90;
+  --tuwa-text-accent: #0052ff;
+  --tuwa-text-on-accent: #ffffff;
+  --tuwa-bg-primary: #faf9f7;
+  --tuwa-bg-secondary: #f2f1ee;
+  --tuwa-bg-muted: #e9e8e4;
+  --tuwa-border-primary: #d6d5d1;
+  --tuwa-border-secondary: #e4e3df;
+  --tuwa-border-strong: #a9a8a6;
   --tuwa-button-primary-bg: var(--tuwa-button-gradient-from);
   --tuwa-button-primary-bg-hover: var(--tuwa-button-gradient-from-hover);
-  --tuwa-button-gradient-from: oklch(54.6% 0.245 262.881);
-  --tuwa-button-gradient-to: oklch(58.8% 0.158 241.966);
-  --tuwa-button-gradient-from-hover: oklch(48.8% 0.243 264.376);
-  --tuwa-button-gradient-to-hover: oklch(50% 0.134 242.749);
-  --tuwa-standart-button-bg: oklch(96.7% 0.003 264.542);
-  --tuwa-standart-button-hover: oklch(92.8% 0.006 264.531);
+  --tuwa-button-gradient-from: #0052ff;
+  --tuwa-button-gradient-to: #5b8cff;
+  --tuwa-button-gradient-from-hover: #0047de;
+  --tuwa-button-gradient-to-hover: #0052ff;
+  --tuwa-standart-button-bg: transparent;
+  --tuwa-standart-button-hover: #e9e8e4;
   --tuwa-testnet-icons: #6b655e;
-  --tuwa-rounded-corners: 4px;
+  --tuwa-scanline: rgb(16 16 20 / 0.015);
+  --tuwa-rounded-corners: 0px;
+  --tuwa-rounded-full: 0px;
   --tuwa-ring-width: 2px;
   --tuwa-font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   --tuwa-font-mono: 'Geist Mono', 'JetBrains Mono', 'Cascadia Code', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
@@ -780,26 +920,31 @@ html[lang^='uk'],
   --tuwa-pending-bg: oklch(42.1% 0.095 57.708);
   --tuwa-pending-text: oklch(90.5% 0.182 98.111);
   --tuwa-pending-icon: oklch(85.2% 0.199 91.936);
-  --tuwa-info-bg: oklch(37.3% 0.034 259.733);
-  --tuwa-info-text: oklch(87.2% 0.01 258.338);
-  --tuwa-info-icon: oklch(70.7% 0.022 261.325);
-  --tuwa-text-primary: oklch(98.5% 0.002 247.839);
-  --tuwa-text-secondary: oklch(70.7% 0.022 261.325);
-  --tuwa-text-tertiary: oklch(55.1% 0.027 264.364);
-  --tuwa-text-accent: oklch(70.7% 0.165 254.624);
-  --tuwa-text-on-accent: #fff;
-  --tuwa-bg-primary: oklch(21% 0.034 264.665);
-  --tuwa-bg-secondary: oklch(27.8% 0.033 256.848);
-  --tuwa-bg-muted: oklch(37.3% 0.034 259.733);
-  --tuwa-border-primary: oklch(37.3% 0.034 259.733);
-  --tuwa-border-secondary: oklch(27.8% 0.033 256.848);
-  --tuwa-button-gradient-from: oklch(54.6% 0.245 262.881);
-  --tuwa-button-gradient-to: oklch(82.8% 0.111 230.318);
-  --tuwa-button-gradient-from-hover: oklch(48.8% 0.243 264.376);
-  --tuwa-button-gradient-to-hover: oklch(74.6% 0.16 232.661);
-  --tuwa-standart-button-bg: oklch(37.3% 0.034 259.733);
-  --tuwa-standart-button-hover: oklch(27.8% 0.033 256.848);
+  --tuwa-info-bg: #222327;
+  --tuwa-info-text: #b9b8b5;
+  --tuwa-info-icon: #77767a;
+  --tuwa-text-primary: #f2f1ee;
+  --tuwa-text-secondary: #9d9c9a;
+  --tuwa-text-tertiary: #77767a;
+  --tuwa-text-accent: #60a5fa;
+  --tuwa-text-on-accent: #ffffff;
+  --tuwa-bg-primary: #101014;
+  --tuwa-bg-secondary: #17181b;
+  --tuwa-bg-muted: #222327;
+  --tuwa-border-primary: #2b2c30;
+  --tuwa-border-secondary: #1d1e22;
+  --tuwa-border-strong: #55565a;
+  --tuwa-button-gradient-from: #0052ff;
+  --tuwa-button-gradient-to: #60a5fa;
+  --tuwa-button-gradient-from-hover: #0047de;
+  --tuwa-button-gradient-to-hover: #93c5fd;
+  --tuwa-standart-button-bg: transparent;
+  --tuwa-standart-button-hover: #222327;
   --tuwa-testnet-icons: #6b655e;
+  --tuwa-scanline: rgb(242 241 238 / 0.012);
+}
+.tuwa-scanlines {
+  background-image: repeating-linear-gradient(to bottom, var(--tuwa-scanline) 0 1px, transparent 1px 4px);
 }
 .Toastify[id^='nova-'] {
   pointer-events: auto;
@@ -814,12 +959,12 @@ html[lang^='uk'],
   }
   .NovaCustomScroll::-webkit-scrollbar {
     width: 4px;
-    border-radius: 4px;
+    border-radius: var(--tuwa-rounded-corners);
     background-color: var(--tuwa-border-primary);
   }
   .NovaCustomScroll::-webkit-scrollbar-thumb {
     background-color: var(--tuwa-text-secondary);
-    border-radius: 4px;
+    border-radius: var(--tuwa-rounded-corners);
   }
   .NovaCustomScroll::-webkit-scrollbar-thumb:hover {
     background-color: var(--tuwa-text-primary);
@@ -832,12 +977,12 @@ html[lang^='uk'],
   }
   .NovaCustomScrollNoPadding::-webkit-scrollbar {
     width: 4px;
-    border-radius: 4px;
+    border-radius: var(--tuwa-rounded-corners);
     background-color: var(--tuwa-border-primary);
   }
   .NovaCustomScrollNoPadding::-webkit-scrollbar-thumb {
     background-color: var(--tuwa-text-secondary);
-    border-radius: 4px;
+    border-radius: var(--tuwa-rounded-corners);
   }
   .NovaCustomScrollNoPadding::-webkit-scrollbar-thumb:hover {
     background-color: var(--tuwa-text-primary);
@@ -866,107 +1011,6 @@ html[lang^='uk'],
   syntax: "*";
   inherits: false;
 }
-@property --tw-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-inset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-ring-inset {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-offset-width {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0px;
-}
-@property --tw-ring-offset-color {
-  syntax: "*";
-  inherits: false;
-  initial-value: #fff;
-}
-@property --tw-ring-offset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-backdrop-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-sepia {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
@@ -1003,29 +1047,6 @@ html[lang^='uk'],
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-shadow-alpha: 100%;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-inset-shadow-alpha: 100%;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-backdrop-blur: initial;
-      --tw-backdrop-brightness: initial;
-      --tw-backdrop-contrast: initial;
-      --tw-backdrop-grayscale: initial;
-      --tw-backdrop-hue-rotate: initial;
-      --tw-backdrop-invert: initial;
-      --tw-backdrop-opacity: initial;
-      --tw-backdrop-saturate: initial;
-      --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-translate-x: 0;
       --tw-translate-y: 0;