@orderly.network/ui 2.10.1-alpha.0 → 2.10.2-alpha.0

package/dist/index.css

@@ -373,6 +373,8 @@ video {
   --oui-color-base-10: 14 13 18;
   --oui-color-base-foreground: 255 255 255;
   --oui-color-line: 255 255 255;
+  --oui-color-base-static: 255 255 255;
+  --oui-color-base-static-contrast: 0 0 0;
   --oui-color-trading-loss: 245 97 139;
   --oui-color-trading-loss-contrast: 255 255 255;
   --oui-color-trading-profit: 41 233 169;
@@ -1547,9 +1549,6 @@ body {
 .oui-h-\[20px\] {
   height: 20px;
 }
-.oui-h-\[220px\] {
-  height: 220px;
-}
 .oui-h-\[22px\] {
   height: 22px;
 }
@@ -1571,12 +1570,18 @@ body {
 .oui-h-\[252px\] {
   height: 252px;
 }
+.oui-h-\[256px\] {
+  height: 256px;
+}
 .oui-h-\[25px\] {
   height: 25px;
 }
 .oui-h-\[26px\] {
   height: 26px;
 }
+.oui-h-\[276px\] {
+  height: 276px;
+}
 .oui-h-\[28px\] {
   height: 28px;
 }
@@ -2054,9 +2059,6 @@ body {
 .oui-w-\[20px\] {
   width: 20px;
 }
-.oui-w-\[220px\] {
-  width: 220px;
-}
 .oui-w-\[225px\] {
   width: 225px;
 }
@@ -2066,6 +2068,9 @@ body {
 .oui-w-\[240px\] {
   width: 240px;
 }
+.oui-w-\[256px\] {
+  width: 256px;
+}
 .oui-w-\[260px\] {
   width: 260px;
 }
@@ -2223,6 +2228,9 @@ body {
 .oui-min-w-6 {
   min-width: 1.5rem;
 }
+.oui-min-w-\[100px\] {
+  min-width: 100px;
+}
 .oui-min-w-\[1018px\] {
   min-width: 1018px;
 }
@@ -3300,22 +3308,10 @@ body {
   --tw-border-opacity: 1 !important;
   border-color: rgb(var(--oui-color-primary-light) / var(--tw-border-opacity, 1)) !important;
 }
-.oui-border-\[\#38E2FE\] {
-  --tw-border-opacity: 1;
-  border-color: rgb(56 226 254 / var(--tw-border-opacity, 1));
-}
-.oui-border-\[\#B9D1FF\] {
-  --tw-border-opacity: 1;
-  border-color: rgb(185 209 255 / var(--tw-border-opacity, 1));
-}
 .oui-border-\[\#d9d9d9\] {
   --tw-border-opacity: 1;
   border-color: rgb(217 217 217 / var(--tw-border-opacity, 1));
 }
-.oui-border-\[\#faedff\] {
-  --tw-border-opacity: 1;
-  border-color: rgb(250 237 255 / var(--tw-border-opacity, 1));
-}
 .oui-border-\[rgb\(var\(--oui-gradient-brand-start\)\)\] {
   border-color: rgb(var(--oui-gradient-brand-start));
 }
@@ -3371,6 +3367,9 @@ body {
 .oui-border-base-contrast\/\[0\.12\] {
   border-color: rgb(var(--oui-color-base-foreground) / 0.12);
 }
+.oui-border-base-static-contrast-20 {
+  border-color: rgb(var(--oui-color-base-static-contrast) / 0.2);
+}
 .oui-border-danger {
   --tw-border-opacity: 1;
   border-color: rgb(var(--oui-color-danger) / var(--tw-border-opacity, 1));
@@ -3382,6 +3381,9 @@ body {
 .oui-border-line {
   border-color: rgb(var(--oui-color-line, 255 255 255) / 0.08);
 }
+.oui-border-line-10 {
+  border-color: rgb(var(--oui-color-line, 255 255 255) / 0.10);
+}
 .oui-border-line-12 {
   border-color: rgb(var(--oui-color-line, 255 255 255) / 0.12);
 }
@@ -3394,6 +3396,10 @@ body {
 .oui-border-line-6 {
   border-color: rgb(var(--oui-color-line, 255 255 255) / 0.06);
 }
+.oui-border-link-light {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--oui-color-link-light) / var(--tw-border-opacity, 1));
+}
 .oui-border-primary {
   --tw-border-opacity: 1;
   border-color: rgb(var(--oui-color-primary) / var(--tw-border-opacity, 1));
@@ -3429,15 +3435,6 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(var(--oui-color-warning-light) / var(--tw-border-opacity, 1));
 }
-.oui-border-white\/10 {
-  border-color: rgb(255 255 255 / 0.1);
-}
-.oui-border-white\/\[0\.12\] {
-  border-color: rgb(255 255 255 / 0.12);
-}
-.oui-border-white\/\[0\.36\] {
-  border-color: rgb(255 255 255 / 0.36);
-}
 .oui-border-b-line-4 {
   border-bottom-color: rgb(var(--oui-color-line, 255 255 255) / 0.04);
 }
@@ -3459,14 +3456,6 @@ body {
 .oui-border-t-transparent {
   border-top-color: transparent;
 }
-.\!oui-bg-\[\#131519\] {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(19 21 25 / var(--tw-bg-opacity, 1)) !important;
-}
-.\!oui-bg-\[\#181C23\] {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(24 28 35 / var(--tw-bg-opacity, 1)) !important;
-}
 .\!oui-bg-base-10\/60 {
   background-color: rgb(var(--oui-color-base-10) / 0.6) !important;
 }
@@ -3474,6 +3463,10 @@ body {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(var(--oui-color-base-8) / var(--tw-bg-opacity, 1)) !important;
 }
+.\!oui-bg-base-9 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(var(--oui-color-base-9) / var(--tw-bg-opacity, 1)) !important;
+}
 .\!oui-bg-primary-darken {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(var(--oui-color-primary-darken) / var(--tw-bg-opacity, 1)) !important;
@@ -3485,22 +3478,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(0 168 88 / var(--tw-bg-opacity, 1));
 }
-.oui-bg-\[\#00A9DE\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 169 222 / var(--tw-bg-opacity, 1));
-}
 .oui-bg-\[\#07080A\] {
   --tw-bg-opacity: 1;
   background-color: rgb(7 8 10 / var(--tw-bg-opacity, 1));
 }
-.oui-bg-\[\#131519\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(19 21 25 / var(--tw-bg-opacity, 1));
-}
-.oui-bg-\[\#282e3a\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(40 46 58 / var(--tw-bg-opacity, 1));
-}
 .oui-bg-\[\#283BEE\] {
   --tw-bg-opacity: 1;
   background-color: rgb(40 59 238 / var(--tw-bg-opacity, 1));
@@ -3513,10 +3494,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(51 95 252 / var(--tw-bg-opacity, 1));
 }
-.oui-bg-\[\#38E2FE\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(56 226 254 / var(--tw-bg-opacity, 1));
-}
 .oui-bg-\[\#3D79A9\] {
   --tw-bg-opacity: 1;
   background-color: rgb(61 121 169 / var(--tw-bg-opacity, 1));
@@ -3525,14 +3502,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(99 14 173 / var(--tw-bg-opacity, 1));
 }
-.oui-bg-\[\#D25f00\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(210 95 0 / var(--tw-bg-opacity, 1));
-}
-.oui-bg-\[\#d25f00\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(210 95 0 / var(--tw-bg-opacity, 1));
-}
 .oui-bg-\[\#d9d9d9\] {
   --tw-bg-opacity: 1;
   background-color: rgb(217 217 217 / var(--tw-bg-opacity, 1));
@@ -3545,17 +3514,17 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(211 211 211 / var(--tw-bg-opacity, 1));
 }
+.oui-bg-\[rgb\(var\(--oui-gradient-brand-start\)\)\] {
+  background-color: rgb(var(--oui-gradient-brand-start));
+}
 .oui-bg-\[rgba\(0\,0\,0\,0\.48\)\] {
   background-color: rgba(0, 0, 0, 0.48);
 }
-.oui-bg-\[rgba\(232\,136\,0\,0\.15\)\] {
-  background-color: rgba(232, 136, 0, 0.15);
-}
-.oui-bg-\[rgba\(255\,125\,0\,0\.1\)\] {
-  background-color: rgba(255, 125, 0, 0.1);
+.oui-bg-\[rgba\(var\(--oui-color-warning-darken\)\,0\.1\)\] {
+  background-color: rgba(var(--oui-color-warning-darken), 0.1);
 }
-.oui-bg-\[rgba\(255\,169\,64\,0\.70\)\] {
-  background-color: rgba(255, 169, 64, 0.70);
+.oui-bg-\[rgba\(var\(--oui-color-warning-darken\)\/0\.15\)\] {
+  background-color: rgba(var(--oui-color-warning-darken)/0.15);
 }
 .oui-bg-\[rgba\(var\(--oui-gradient-brand-start\)\)\] {
   background-color: rgba(var(--oui-gradient-brand-start));
@@ -3609,26 +3578,41 @@ body {
 .oui-bg-base-contrast-12 {
   background-color: rgb(var(--oui-color-base-foreground) / 0.12);
 }
+.oui-bg-base-contrast-16 {
+  background-color: rgb(var(--oui-color-base-foreground) / 0.16);
+}
 .oui-bg-base-contrast-20 {
   background-color: rgb(var(--oui-color-base-foreground) / 0.2);
 }
+.oui-bg-base-contrast-30 {
+  background-color: rgb(var(--oui-color-base-foreground) / 0.30);
+}
 .oui-bg-base-contrast-36 {
   background-color: rgb(var(--oui-color-base-foreground) / 0.36);
 }
 .oui-bg-base-contrast-4 {
   background-color: rgb(var(--oui-color-base-foreground) / 0.04);
 }
+.oui-bg-base-contrast-54 {
+  background-color: rgb(var(--oui-color-base-foreground) / 0.54);
+}
+.oui-bg-base-contrast-6 {
+  background-color: rgb(var(--oui-color-base-foreground) / 0.06);
+}
+.oui-bg-base-contrast-8 {
+  background-color: rgb(var(--oui-color-base-foreground) / 0.08);
+}
 .oui-bg-base-contrast-80 {
   background-color: rgb(var(--oui-color-base-foreground) / 0.80);
 }
-.oui-bg-black\/80 {
-  background-color: rgb(0 0 0 / 0.8);
+.oui-bg-base-static {
+  background-color: rgb(var(--oui-color-base-static) / 0.98);
 }
-.oui-bg-black\/\[0\.08\] {
-  background-color: rgb(0 0 0 / 0.08);
+.oui-bg-base-static-contrast\/10 {
+  background-color: rgb(var(--oui-color-base-static-contrast) / 0.1);
 }
-.oui-bg-black\/\[0\.15\] {
-  background-color: rgb(0 0 0 / 0.15);
+.oui-bg-black\/80 {
+  background-color: rgb(0 0 0 / 0.8);
 }
 .oui-bg-danger {
   --tw-bg-opacity: 1;
@@ -3689,6 +3673,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
 }
+.oui-bg-secondary {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--oui-color-secondary) / var(--tw-bg-opacity, 1));
+}
 .oui-bg-success {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--oui-color-success) / var(--tw-bg-opacity, 1));
@@ -3749,80 +3737,50 @@ body {
 .oui-bg-warning\/10 {
   background-color: rgb(var(--oui-color-warning) / 0.1);
 }
+.oui-bg-warning\/70 {
+  background-color: rgb(var(--oui-color-warning) / 0.7);
+}
 .oui-bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
-.oui-bg-white\/30 {
-  background-color: rgb(255 255 255 / 0.3);
-}
-.oui-bg-white\/80 {
-  background-color: rgb(255 255 255 / 0.8);
-}
-.oui-bg-white\/\[\.06\] {
-  background-color: rgb(255 255 255 / .06);
-}
-.oui-bg-white\/\[0\.04\] {
-  background-color: rgb(255 255 255 / 0.04);
-}
-.oui-bg-white\/\[0\.06\] {
-  background-color: rgb(255 255 255 / 0.06);
-}
-.oui-bg-white\/\[0\.08\] {
-  background-color: rgb(255 255 255 / 0.08);
-}
-.oui-bg-white\/\[0\.12\] {
-  background-color: rgb(255 255 255 / 0.12);
-}
-.oui-bg-white\/\[0\.16\] {
-  background-color: rgb(255 255 255 / 0.16);
-}
-.oui-bg-white\/\[0\.2\] {
-  background-color: rgb(255 255 255 / 0.2);
-}
-.oui-bg-white\/\[0\.54\] {
-  background-color: rgb(255 255 255 / 0.54);
-}
-.oui-bg-white\/\[0\.8\] {
-  background-color: rgb(255 255 255 / 0.8);
-}
-.oui-bg-\[linear-gradient\(15deg\,\#27FDFE_0\%\,transparent_30\%\)\] {
+.oui-bg-\[linear-gradient\(15deg\,rgb\(var\(--oui-color-link\)\)_-11\%\,transparent_30\%\,transparent_77\%\,rgb\(var\(--oui-color-success\)\)_100\%\)\] {
   background-image:
     linear-gradient(
       15deg,
-      #27FDFE 0%,
-      transparent 30%);
+      rgb(var(--oui-color-link)) -11%,
+      transparent 30%,
+      transparent 77%,
+      rgb(var(--oui-color-success)) 100%);
 }
-.oui-bg-\[linear-gradient\(15deg\,\#283BEE_-11\%\,transparent_30\%\,transparent_77\%\,\#A53411_100\%\)\] {
+.oui-bg-\[linear-gradient\(15deg\,rgb\(var\(--oui-color-primary\)\)_-11\%\,transparent_30\%\,transparent_77\%\,rgb\(var\(--oui-color-danger-darken\)\)_100\%\)\] {
   background-image:
     linear-gradient(
       15deg,
-      #283BEE -11%,
+      rgb(var(--oui-color-primary)) -11%,
       transparent 30%,
       transparent 77%,
-      #A53411 100%);
+      rgb(var(--oui-color-danger-darken)) 100%);
 }
-.oui-bg-\[linear-gradient\(15deg\,\#335FFC_0\%\,transparent_30\%\)\] {
+.oui-bg-\[linear-gradient\(15deg\,rgb\(var\(--oui-color-primary-darken\)\)_0\%\,transparent_30\%\)\] {
   background-image:
     linear-gradient(
       15deg,
-      #335FFC 0%,
+      rgb(var(--oui-color-primary-darken)) 0%,
       transparent 30%);
 }
-.oui-bg-\[linear-gradient\(15deg\,\#7400D0_-11\%\,transparent_30\%\,transparent_77\%\,\#009A7E_100\%\)\] {
+.oui-bg-\[linear-gradient\(15deg\,rgb\(var\(--oui-color-warning-darken\)\)_0\%\,transparent_30\%\)\] {
   background-image:
     linear-gradient(
       15deg,
-      #7400D0 -11%,
-      transparent 30%,
-      transparent 77%,
-      #009A7E 100%);
+      rgb(var(--oui-color-warning-darken)) 0%,
+      transparent 30%);
 }
-.oui-bg-\[linear-gradient\(15deg\,\#D25F00_0\%\,transparent_30\%\)\] {
+.oui-bg-\[linear-gradient\(15deg\,rgb\(var\(--oui-gradient-brand-start\)\)_0\%\,transparent_30\%\)\] {
   background-image:
     linear-gradient(
       15deg,
-      #D25F00 0%,
+      rgb(var(--oui-gradient-brand-start)) 0%,
       transparent 30%);
 }
 .oui-bg-\[linear-gradient\(270deg\,\#59B0FE_0\%\,\#26FEFE_100\%\)\] {
@@ -3867,12 +3825,12 @@ body {
       rgba(255, 255, 255, 0.0225) -2.05%,
       rgba(199, 199, 199, 0.45) 100%);
 }
-.oui-bg-\[linear-gradient\(270deg\,rgba\(89\,176\,254\,0\.10\)_0\%\,rgba\(38\,254\,254\,0\.10\)_100\%\)\] {
+.oui-bg-\[linear-gradient\(270deg\,rgba\(var\(--oui-gradient-brand-end\)\,0\.10\)_0\%\,rgba\(var\(--oui-gradient-brand-start\)\,0\.10\)_100\%\)\] {
   background-image:
     linear-gradient(
       270deg,
-      rgba(89, 176, 254, 0.10) 0%,
-      rgba(38, 254, 254, 0.10) 100%);
+      rgba(var(--oui-gradient-brand-end), 0.10) 0%,
+      rgba(var(--oui-gradient-brand-start), 0.10) 100%);
 }
 .oui-bg-\[linear-gradient\(90deg\,rgba\(var\(--oui-color-base-9\)_\/_0\)_0\%\,rgba\(var\(--oui-color-base-9\)_\/_1\)_100\%\)\] {
   background-image:
@@ -3893,49 +3851,44 @@ body {
 .oui-bg-gradient-to-tr {
   background-image: linear-gradient(to top right, var(--tw-gradient-stops));
 }
-.oui-from-\[\#26292E\] {
-  --tw-gradient-from: #26292E var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(38 41 46 / 0) var(--tw-gradient-to-position);
+.oui-from-\[\#FF7B00\] {
+  --tw-gradient-from: #FF7B00 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 123 0 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.oui-from-\[\#26fefe\] {
-  --tw-gradient-from: #26fefe var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(38 254 254 / 0) var(--tw-gradient-to-position);
+.oui-from-\[rgb\(var\(--oui-gradient-brand-end\)\)\] {
+  --tw-gradient-from: rgb(var(--oui-gradient-brand-end)) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(var(--oui-gradient-brand-end) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.oui-from-\[\#2d0061\] {
-  --tw-gradient-from: #2d0061 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(45 0 97 / 0) var(--tw-gradient-to-position);
+.oui-from-\[rgb\(var\(--oui-gradient-brand-start\)\)\] {
+  --tw-gradient-from: rgb(var(--oui-gradient-brand-start)) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(var(--oui-gradient-brand-start) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.oui-from-\[\#59b0fe\] {
-  --tw-gradient-from: #59b0fe var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(89 176 254 / 0) var(--tw-gradient-to-position);
+.oui-from-\[rgb\(var\(--oui-gradient-brand-start\)_\/_0\.12\)\] {
+  --tw-gradient-from: rgb(var(--oui-gradient-brand-start) / 0.12) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(var(--oui-gradient-brand-start) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.oui-from-\[\#791438\] {
-  --tw-gradient-from: #791438 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(121 20 56 / 0) var(--tw-gradient-to-position);
+.oui-from-\[rgb\(var\(--oui-gradient-danger-end\)\)\] {
+  --tw-gradient-from: rgb(var(--oui-gradient-danger-end)) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(var(--oui-gradient-danger-end) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.oui-from-\[\#792e00\] {
-  --tw-gradient-from: #792e00 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(121 46 0 / 0) var(--tw-gradient-to-position);
+.oui-from-\[rgb\(var\(--oui-gradient-neutral-start\)\)\] {
+  --tw-gradient-from: rgb(var(--oui-gradient-neutral-start)) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(var(--oui-gradient-neutral-start) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.oui-from-\[\#FF7B00\] {
-  --tw-gradient-from: #FF7B00 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(255 123 0 / 0) var(--tw-gradient-to-position);
+.oui-from-\[rgb\(var\(--oui-gradient-secondary-end\)\)\] {
+  --tw-gradient-from: rgb(var(--oui-gradient-secondary-end)) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(var(--oui-gradient-secondary-end) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.oui-from-\[rgb\(var\(--oui-gradient-brand-start\)\)\] {
-  --tw-gradient-from: rgb(var(--oui-gradient-brand-start)) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(var(--oui-gradient-brand-start) / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.oui-from-\[rgb\(var\(--oui-gradient-brand-start\)_\/_0\.12\)\] {
-  --tw-gradient-from: rgb(var(--oui-gradient-brand-start) / 0.12) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(var(--oui-gradient-brand-start) / 0) var(--tw-gradient-to-position);
+.oui-from-\[rgb\(var\(--oui-gradient-warning-end\)\)\] {
+  --tw-gradient-from: rgb(var(--oui-gradient-warning-end)) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(var(--oui-gradient-warning-end) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .oui-from-\[rgba\(var\(--oui-gradient-brand-end\)\/0\)\] {
@@ -3966,33 +3919,18 @@ body {
 .oui-from-\[-20\%\] {
   --tw-gradient-from-position: -20%;
 }
-.oui-via-\[\#ff7d00\] {
-  --tw-gradient-to: rgb(255 125 0 / 0) var(--tw-gradient-to-position);
+.oui-via-\[rgb\(var\(--oui-color-warning-darken\)\)\] {
+  --tw-gradient-to: rgb(var(--oui-color-warning-darken) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops:
     var(--tw-gradient-from),
-    #ff7d00 var(--tw-gradient-via-position),
+    rgb(var(--oui-color-warning-darken)) var(--tw-gradient-via-position),
     var(--tw-gradient-to);
 }
-.oui-to-\[\#1B1D22\] {
-  --tw-gradient-to: #1B1D22 var(--tw-gradient-to-position);
-}
-.oui-to-\[\#26fefe\] {
-  --tw-gradient-to: #26fefe var(--tw-gradient-to-position);
-}
 .oui-to-\[\#FFEA00\] {
   --tw-gradient-to: #FFEA00 var(--tw-gradient-to-position);
 }
-.oui-to-\[\#bd6bed\] {
-  --tw-gradient-to: #bd6bed var(--tw-gradient-to-position);
-}
-.oui-to-\[\#d92d6b\] {
-  --tw-gradient-to: #d92d6b var(--tw-gradient-to-position);
-}
-.oui-to-\[\#ff447c\] {
-  --tw-gradient-to: #ff447c var(--tw-gradient-to-position);
-}
-.oui-to-\[\#ffb65d\] {
-  --tw-gradient-to: #ffb65d var(--tw-gradient-to-position);
+.oui-to-\[rgb\(var\(--oui-color-danger-darken\)\)\] {
+  --tw-gradient-to: rgb(var(--oui-color-danger-darken)) var(--tw-gradient-to-position);
 }
 .oui-to-\[rgb\(var\(--oui-gradient-brand-end\)\)\] {
   --tw-gradient-to: rgb(var(--oui-gradient-brand-end)) var(--tw-gradient-to-position);
@@ -4000,6 +3938,21 @@ body {
 .oui-to-\[rgb\(var\(--oui-gradient-brand-end\)_\/_0\.12\)\] {
   --tw-gradient-to: rgb(var(--oui-gradient-brand-end) / 0.12) var(--tw-gradient-to-position);
 }
+.oui-to-\[rgb\(var\(--oui-gradient-brand-start\)\)\] {
+  --tw-gradient-to: rgb(var(--oui-gradient-brand-start)) var(--tw-gradient-to-position);
+}
+.oui-to-\[rgb\(var\(--oui-gradient-danger-start\)\)\] {
+  --tw-gradient-to: rgb(var(--oui-gradient-danger-start)) var(--tw-gradient-to-position);
+}
+.oui-to-\[rgb\(var\(--oui-gradient-neutral-end\)\)\] {
+  --tw-gradient-to: rgb(var(--oui-gradient-neutral-end)) var(--tw-gradient-to-position);
+}
+.oui-to-\[rgb\(var\(--oui-gradient-secondary-start\)\)\] {
+  --tw-gradient-to: rgb(var(--oui-gradient-secondary-start)) var(--tw-gradient-to-position);
+}
+.oui-to-\[rgb\(var\(--oui-gradient-warning-start\)\)\] {
+  --tw-gradient-to: rgb(var(--oui-gradient-warning-start)) var(--tw-gradient-to-position);
+}
 .oui-to-\[rgba\(var\(--oui-gradient-brand-end\)\)\] {
   --tw-gradient-to: rgba(var(--oui-gradient-brand-end)) var(--tw-gradient-to-position);
 }
@@ -4043,9 +3996,6 @@ body {
 .\!oui-fill-base-6 {
   fill: rgb(var(--oui-color-base-6) / 1) !important;
 }
-.oui-fill-\[rgba\(255\,255\,255\,0\.36\)\] {
-  fill: rgba(255, 255, 255, 0.36);
-}
 .oui-fill-base-4 {
   fill: rgb(var(--oui-color-base-4) / 1);
 }
@@ -4055,9 +4005,21 @@ body {
 .oui-fill-base-6 {
   fill: rgb(var(--oui-color-base-6) / 1);
 }
+.oui-fill-base-7 {
+  fill: rgb(var(--oui-color-base-7) / 1);
+}
 .oui-fill-base-8 {
   fill: rgb(var(--oui-color-base-8) / 1);
 }
+.oui-fill-base-contrast {
+  fill: rgb(var(--oui-color-base-foreground) / 0.98);
+}
+.oui-fill-base-contrast-12 {
+  fill: rgb(var(--oui-color-base-foreground) / 0.12);
+}
+.oui-fill-base-contrast-16 {
+  fill: rgb(var(--oui-color-base-foreground) / 0.16);
+}
 .oui-fill-base-contrast-20 {
   fill: rgb(var(--oui-color-base-foreground) / 0.2);
 }
@@ -4067,6 +4029,12 @@ body {
 .oui-fill-base-contrast-54 {
   fill: rgb(var(--oui-color-base-foreground) / 0.54);
 }
+.oui-fill-base-contrast-6 {
+  fill: rgb(var(--oui-color-base-foreground) / 0.06);
+}
+.oui-fill-base-contrast-80 {
+  fill: rgb(var(--oui-color-base-foreground) / 0.80);
+}
 .oui-fill-current {
   fill: currentColor;
 }
@@ -4076,6 +4044,9 @@ body {
 .oui-fill-danger-light {
   fill: rgb(var(--oui-color-danger-light) / 1);
 }
+.oui-fill-primary {
+  fill: rgb(var(--oui-color-primary) / 1);
+}
 .oui-fill-primary-contrast {
   fill: rgb(var(--oui-color-primary-contrast) / 1);
 }
@@ -4091,12 +4062,18 @@ body {
 .oui-fill-success {
   fill: rgb(var(--oui-color-success) / 1);
 }
+.oui-fill-success-darken {
+  fill: rgb(var(--oui-color-success-darken) / 1);
+}
 .oui-fill-success-light {
   fill: rgb(var(--oui-color-success-light) / 1);
 }
 .oui-fill-transparent {
   fill: transparent;
 }
+.oui-fill-warning {
+  fill: rgb(var(--oui-color-warning) / 1);
+}
 .oui-fill-warning-darken {
   fill: rgb(var(--oui-color-warning-darken) / 1);
 }
@@ -4106,15 +4083,6 @@ body {
 .oui-fill-white {
   fill: #fff;
 }
-.oui-fill-white\/\[\.36\] {
-  fill: rgb(255 255 255 / .36);
-}
-.oui-fill-white\/\[\.54\] {
-  fill: rgb(255 255 255 / .54);
-}
-.oui-fill-white\/\[\.98\] {
-  fill: rgb(255 255 255 / .98);
-}
 .oui-object-contain {
   -o-object-fit: contain;
   object-fit: contain;
@@ -4798,23 +4766,12 @@ body {
   --tw-text-opacity: 1;
   color: rgb(99 102 109 / var(--tw-text-opacity, 1));
 }
-.oui-text-\[\#D25f00\] {
-  --tw-text-opacity: 1;
-  color: rgb(210 95 0 / var(--tw-text-opacity, 1));
-}
-.oui-text-\[\#FF7D00\] {
-  --tw-text-opacity: 1;
-  color: rgb(255 125 0 / var(--tw-text-opacity, 1));
-}
 .oui-text-\[rgb\(var\(--oui-gradient-brand-start\)\)\] {
   color: rgb(var(--oui-gradient-brand-start));
 }
 .oui-text-\[rgba\(0\,0\,0\,\.88\)\] {
   color: rgba(0, 0, 0, .88);
 }
-.oui-text-\[rgba\(0\,0\,0\,0\.88\)\] {
-  color: rgba(0, 0, 0, 0.88);
-}
 .oui-text-\[rgba\(255\,154\,46\,1\)\] {
   color: rgba(255, 154, 46, 1);
 }
@@ -4822,6 +4779,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(var(--oui-color-base-1) / var(--tw-text-opacity, 1));
 }
+.oui-text-base-10 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--oui-color-base-10) / var(--tw-text-opacity, 1));
+}
 .oui-text-base-5 {
   --tw-text-opacity: 1;
   color: rgb(var(--oui-color-base-5) / var(--tw-text-opacity, 1));
@@ -4849,6 +4810,9 @@ body {
 .oui-text-base-contrast-54 {
   color: rgb(var(--oui-color-base-foreground) / 0.54);
 }
+.oui-text-base-contrast-8 {
+  color: rgb(var(--oui-color-base-foreground) / 0.08);
+}
 .oui-text-base-contrast-80 {
   color: rgb(var(--oui-color-base-foreground) / 0.80);
 }
@@ -4861,18 +4825,27 @@ body {
 .oui-text-base-contrast\/60 {
   color: rgb(var(--oui-color-base-foreground) / 0.6);
 }
-.oui-text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+.oui-text-base-static {
+  color: rgb(var(--oui-color-base-static) / 0.98);
+}
+.oui-text-base-static-54 {
+  color: rgb(var(--oui-color-base-static) / 0.54);
 }
-.oui-text-black\/\[\.88\] {
-  color: rgb(0 0 0 / .88);
+.oui-text-base-static-80 {
+  color: rgb(var(--oui-color-base-static) / 0.80);
 }
-.oui-text-black\/\[0\.2\] {
-  color: rgb(0 0 0 / 0.2);
+.oui-text-base-static-contrast {
+  color: rgb(var(--oui-color-base-static-contrast) / 0.98);
 }
-.oui-text-black\/\[0\.88\] {
-  color: rgb(0 0 0 / 0.88);
+.oui-text-base-static-contrast-20 {
+  color: rgb(var(--oui-color-base-static-contrast) / 0.2);
+}
+.oui-text-base-static-contrast-80 {
+  color: rgb(var(--oui-color-base-static-contrast) / 0.80);
+}
+.oui-text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
 }
 .oui-text-current {
   color: currentColor;
@@ -4930,6 +4903,9 @@ body {
   --tw-text-opacity: 1;
   color: rgb(var(--oui-color-secondary) / var(--tw-text-opacity, 1));
 }
+.oui-text-secondary\/80 {
+  color: rgb(var(--oui-color-secondary) / 0.8);
+}
 .oui-text-secondary\/\[0\.36\] {
   color: rgb(var(--oui-color-secondary) / 0.36);
 }
@@ -4983,13 +4959,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(var(--oui-color-warning-light) / var(--tw-text-opacity, 1));
 }
-.oui-text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
-}
-.oui-text-white\/\[\.36\] {
-  color: rgb(255 255 255 / .36);
-}
 .oui-underline {
   text-decoration-line: underline;
 }
@@ -5032,8 +5001,8 @@ body {
 .oui-placeholder-base-contrast-20::placeholder {
   color: rgb(var(--oui-color-base-foreground) / 0.2);
 }
-.oui-caret-\[rgba\(217\,217\,217\,1\)\] {
-  caret-color: rgba(217, 217, 217, 1);
+.oui-caret-\[rgb\(var\(--oui-color-tertiary\)\)\] {
+  caret-color: rgb(var(--oui-color-tertiary));
 }
 .oui-opacity-0 {
   opacity: 0;
@@ -5661,10 +5630,6 @@ body {
   content: var(--tw-content);
   background-color: transparent !important;
 }
-.after\:oui-bg-white\/50::after {
-  content: var(--tw-content);
-  background-color: rgb(255 255 255 / 0.5);
-}
 .after\:\!oui-shadow-transparent::after {
   content: var(--tw-content);
   --tw-shadow-color: transparent !important;
@@ -5694,6 +5659,9 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(var(--oui-color-primary-light) / var(--tw-border-opacity, 1));
 }
+.focus-within\:oui-border-transparent:focus-within {
+  border-color: transparent;
+}
 .focus-within\:oui-border-warning-light:focus-within {
   --tw-border-opacity: 1;
   border-color: rgb(var(--oui-color-warning-light) / var(--tw-border-opacity, 1));
@@ -5793,6 +5761,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--oui-color-base-8) / var(--tw-bg-opacity, 1));
 }
+.hover\:oui-bg-base-static-80:hover {
+  background-color: rgb(var(--oui-color-base-static) / 0.80);
+}
 .hover\:oui-bg-danger-darken\/80:hover {
   background-color: rgb(var(--oui-color-danger-darken) / 0.8);
 }
@@ -5845,9 +5816,6 @@ body {
 .hover\:oui-bg-warning-darken\/80:hover {
   background-color: rgb(var(--oui-color-warning-darken) / 0.8);
 }
-.hover\:oui-bg-white\/80:hover {
-  background-color: rgb(255 255 255 / 0.8);
-}
 .hover\:oui-fill-base-contrast:hover {
   fill: rgb(var(--oui-color-base-foreground) / 0.98);
 }
@@ -5860,12 +5828,6 @@ body {
 .hover\:oui-fill-primary-light:hover {
   fill: rgb(var(--oui-color-primary-light) / 1);
 }
-.hover\:oui-fill-white\/80:hover {
-  fill: rgb(255 255 255 / 0.8);
-}
-.hover\:oui-fill-white\/\[\.98\]:hover {
-  fill: rgb(255 255 255 / .98);
-}
 .hover\:oui-text-\[rgba\(255\,154\,46\,1\)\]:hover {
   color: rgba(255, 154, 46, 1);
 }
@@ -5882,6 +5844,13 @@ body {
   --tw-text-opacity: 1;
   color: rgb(var(--oui-color-primary-darken) / var(--tw-text-opacity, 1));
 }
+.hover\:oui-text-primary-darken\/80:hover {
+  color: rgb(var(--oui-color-primary-darken) / 0.8);
+}
+.hover\:oui-text-secondary:hover {
+  --tw-text-opacity: 1;
+  color: rgb(var(--oui-color-secondary) / var(--tw-text-opacity, 1));
+}
 .hover\:oui-text-secondary\/80:hover {
   color: rgb(var(--oui-color-secondary) / 0.8);
 }
@@ -5889,9 +5858,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(var(--oui-color-warning-darken) / var(--tw-text-opacity, 1));
 }
-.hover\:oui-text-white\/80:hover {
-  color: rgb(255 255 255 / 0.8);
-}
 .hover\:oui-opacity-100:hover {
   opacity: 1;
 }
@@ -6033,6 +5999,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--oui-color-base-6) / var(--tw-bg-opacity, 1));
 }
+.active\:oui-bg-base-static-54:active {
+  background-color: rgb(var(--oui-color-base-static) / 0.54);
+}
 .active\:oui-bg-danger-darken\/80:active {
   background-color: rgb(var(--oui-color-danger-darken) / 0.8);
 }
@@ -6051,9 +6020,6 @@ body {
 .active\:oui-bg-warning-darken\/70:active {
   background-color: rgb(var(--oui-color-warning-darken) / 0.7);
 }
-.active\:oui-bg-white\/50:active {
-  background-color: rgb(255 255 255 / 0.5);
-}
 .active\:\!oui-shadow-\[0px_0px_4px_0px\]:active {
   --tw-shadow: 0px 0px 4px 0px !important;
   --tw-shadow-colored: 0px 0px 4px 0px var(--tw-shadow-color) !important;
@@ -6086,20 +6052,20 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--oui-color-base-3) / var(--tw-bg-opacity, 1));
 }
+.disabled\:oui-bg-base-static-36:disabled {
+  background-color: rgb(var(--oui-color-base-static) / 0.36);
+}
 .disabled\:oui-bg-transparent:disabled {
   background-color: transparent;
 }
-.disabled\:oui-bg-white\/30:disabled {
-  background-color: rgb(255 255 255 / 0.3);
-}
 .disabled\:oui-text-base-contrast-20:disabled {
   color: rgb(var(--oui-color-base-foreground) / 0.2);
 }
 .disabled\:oui-text-base-contrast-36:disabled {
   color: rgb(var(--oui-color-base-foreground) / 0.36);
 }
-.disabled\:oui-text-black\/\[\.36\]:disabled {
-  color: rgb(0 0 0 / .36);
+.disabled\:oui-text-base-static-contrast-36:disabled {
+  color: rgb(var(--oui-color-base-static-contrast) / 0.36);
 }
 .disabled\:oui-opacity-30:disabled {
   opacity: 0.3;
@@ -6114,8 +6080,8 @@ body {
 .disabled\:hover\:oui-bg-transparent:hover:disabled {
   background-color: transparent;
 }
-.hover\:disabled\:oui-bg-white\/30:disabled:hover {
-  background-color: rgb(255 255 255 / 0.3);
+.hover\:disabled\:oui-bg-base-static-36:disabled:hover {
+  background-color: rgb(var(--oui-color-base-static) / 0.36);
 }
 .oui-group:first-child .group-first\:oui-rounded-t-xl {
   border-top-left-radius: var(--oui-rounded-xl, 0.75rem);
@@ -6467,10 +6433,9 @@ body {
   content: var(--tw-content);
   border-radius: var(--oui-rounded-full, 9999px);
 }
-.data-\[state\=active\]\:after\:oui-bg-white[data-state=active]::after {
+.data-\[state\=active\]\:after\:oui-bg-base-contrast[data-state=active]::after {
   content: var(--tw-content);
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  background-color: rgb(var(--oui-color-base-foreground) / 0.98);
 }
 .data-\[state\=active\]\:after\:oui-content-\[\'\'\][data-state=active]::after {
   --tw-content: "";
@@ -8079,12 +8044,19 @@ body {
 .\[\&_\.oui-table-pagination\]\:\!oui-justify-end .oui-table-pagination {
   justify-content: flex-end !important;
 }
+.\[\&_button\]\:oui-border-secondary\/80 button {
+  border-color: rgb(var(--oui-color-secondary) / 0.8);
+}
 .\[\&_img\]\:\!oui-h-\[18px\] img {
   height: 18px !important;
 }
 .\[\&_p\]\:oui-text-base-contrast-36 p {
   color: rgb(var(--oui-color-base-foreground) / 0.36);
 }
+.\[\&_svg\]\:oui-text-secondary svg {
+  --tw-text-opacity: 1;
+  color: rgb(var(--oui-color-secondary) / var(--tw-text-opacity, 1));
+}
 .\[\&_td\]\:\!oui-px-3 td {
   padding-left: 0.75rem !important;
   padding-right: 0.75rem !important;