@mastra/playground-ui 23.0.2 → 24.0.0-alpha.1

package/dist/index.css

@@ -809,6 +809,10 @@
     margin-block: var(--spacing-1_5);
   }
 
+  .my-8 {
+    margin-block: var(--spacing-8);
+  }
+
   .-mt-0\.5 {
     margin-top: calc(var(--spacing-0_5) * -1);
   }
@@ -833,6 +837,10 @@
     margin-top: var(--spacing-2);
   }
 
+  .mt-3 {
+    margin-top: var(--spacing-3);
+  }
+
   .mt-4 {
     margin-top: var(--spacing-4);
   }
@@ -841,6 +849,10 @@
     margin-top: var(--spacing-5);
   }
 
+  .mt-6 {
+    margin-top: var(--spacing-6);
+  }
+
   .mt-8 {
     margin-top: var(--spacing-8);
   }
@@ -1064,6 +1076,10 @@
     height: .6rem;
   }
 
+  .h-\[1\.8rem\] {
+    height: 1.8rem;
+  }
+
   .h-\[1\.75rem\] {
     height: 1.75rem;
   }
@@ -1225,10 +1241,18 @@
     max-height: 100%;
   }
 
+  .min-h-0 {
+    min-height: var(--spacing-0);
+  }
+
   .min-h-5 {
     min-height: var(--spacing-5);
   }
 
+  .min-h-8 {
+    min-height: var(--spacing-8);
+  }
+
   .min-h-9 {
     min-height: var(--spacing-9);
   }
@@ -1385,6 +1409,10 @@
     width: .75rem;
   }
 
+  .w-\[0\.5rem\] {
+    width: .5rem;
+  }
+
   .w-\[0\.6rem\] {
     width: .6rem;
   }
@@ -1658,6 +1686,10 @@
     min-width: var(--spacing-60);
   }
 
+  .min-w-72 {
+    min-width: var(--spacing-72);
+  }
+
   .min-w-80 {
     min-width: var(--spacing-80);
   }
@@ -1848,6 +1880,14 @@
     grid-template-columns: 0 repeat(9, 1fr);
   }
 
+  .grid-cols-\[1\.5rem_1fr_auto\] {
+    grid-template-columns: 1.5rem 1fr auto;
+  }
+
+  .grid-cols-\[1fr\] {
+    grid-template-columns: 1fr;
+  }
+
   .grid-cols-\[1fr_1fr\] {
     grid-template-columns: 1fr 1fr;
   }
@@ -1880,22 +1920,62 @@
     grid-template-columns: auto 1fr auto;
   }
 
+  .grid-cols-\[minmax\(0\,1fr\)_auto_auto\] {
+    grid-template-columns: minmax(0, 1fr) auto auto;
+  }
+
   .grid-cols-subgrid {
     grid-template-columns: subgrid;
   }
 
+  .grid-rows-\[1fr\] {
+    grid-template-rows: 1fr;
+  }
+
+  .grid-rows-\[1fr_1fr\] {
+    grid-template-rows: 1fr 1fr;
+  }
+
+  .grid-rows-\[1fr_1fr_1fr\] {
+    grid-template-rows: 1fr 1fr 1fr;
+  }
+
+  .grid-rows-\[2fr_3fr\] {
+    grid-template-rows: 2fr 3fr;
+  }
+
+  .grid-rows-\[2fr_3fr_3fr\] {
+    grid-template-rows: 2fr 3fr 3fr;
+  }
+
   .grid-rows-\[4rem_1fr\] {
     grid-template-rows: 4rem 1fr;
   }
 
+  .grid-rows-\[auto\] {
+    grid-template-rows: auto;
+  }
+
   .grid-rows-\[auto_1fr\] {
     grid-template-rows: auto 1fr;
   }
 
+  .grid-rows-\[auto_1fr_1fr\] {
+    grid-template-rows: auto 1fr 1fr;
+  }
+
   .grid-rows-\[auto_1fr_auto\] {
     grid-template-rows: auto 1fr auto;
   }
 
+  .grid-rows-\[auto_3fr\] {
+    grid-template-rows: auto 3fr;
+  }
+
+  .grid-rows-\[auto_3fr_3fr\] {
+    grid-template-rows: auto 3fr 3fr;
+  }
+
   .grid-rows-\[auto_auto\] {
     grid-template-rows: auto auto;
   }
@@ -2024,6 +2104,10 @@
     gap: .75em;
   }
 
+  .gap-\[0\.1rem\] {
+    gap: .1rem;
+  }
+
   .gap-\[0\.4em\] {
     gap: .4em;
   }
@@ -2062,6 +2146,12 @@
     margin-block-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  :where(.space-y-2\.5 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(var(--spacing-2_5) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--spacing-2_5) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
   :where(.space-y-3 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(var(--spacing-3) * var(--tw-space-y-reverse));
@@ -2114,6 +2204,11 @@
     row-gap: var(--spacing-1_5);
   }
 
+  .gap-y-px {
+    row-gap: 1px;
+    row-gap: var(--spacing-px);
+  }
+
   .self-center {
     align-self: center;
   }
@@ -2140,6 +2235,10 @@
     overflow: hidden;
   }
 
+  .overflow-visible {
+    overflow: visible;
+  }
+
   .overflow-x-auto {
     overflow-x: auto;
   }
@@ -2689,6 +2788,10 @@
     }
   }
 
+  .bg-neutral1 {
+    background-color: var(--color-neutral1);
+  }
+
   .bg-neutral2 {
     background-color: var(--color-neutral2);
   }
@@ -2835,10 +2938,16 @@
     }
   }
 
-  .bg-surface3 {
+  .bg-surface3, .bg-surface3\/50 {
     background-color: var(--color-surface3);
   }
 
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-surface3\/50 {
+      background-color: color-mix(in oklab, var(--color-surface3) 50%, transparent);
+    }
+  }
+
   .bg-surface4 {
     background-color: var(--color-surface4);
   }
@@ -2931,6 +3040,10 @@
     padding: var(--spacing-1);
   }
 
+  .p-1\.5 {
+    padding: var(--spacing-1_5);
+  }
+
   .p-1\.5\! {
     padding: var(--spacing-1_5) !important;
   }
@@ -3112,6 +3225,10 @@
     padding-top: 5px;
   }
 
+  .pr-0\.5 {
+    padding-right: var(--spacing-0_5);
+  }
+
   .pr-1 {
     padding-right: var(--spacing-1);
   }
@@ -3192,6 +3309,10 @@
     padding-left: var(--spacing-1);
   }
 
+  .pl-1\.5 {
+    padding-left: var(--spacing-1_5);
+  }
+
   .pl-2 {
     padding-left: var(--spacing-2);
   }
@@ -3448,7 +3569,7 @@
     text-wrap: wrap;
   }
 
-  .break-words {
+  .break-words, .wrap-break-word, .wrap-break-word {
     overflow-wrap: break-word;
   }
 
@@ -3645,6 +3766,10 @@
     opacity: .1;
   }
 
+  .opacity-30 {
+    opacity: .3;
+  }
+
   .opacity-40 {
     opacity: .4;
   }
@@ -3661,6 +3786,14 @@
     opacity: .7;
   }
 
+  .opacity-80 {
+    opacity: .8;
+  }
+
+  .opacity-100 {
+    opacity: 1;
+  }
+
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3677,37 +3810,37 @@
   }
 
   .shadow-card {
-    --tw-shadow: 0 2px 8px var(--tw-shadow-color, #0006);
+    --tw-shadow: 0 2px 8px var(--tw-shadow-color, oklch(0% 0 0 / .4));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
   .shadow-dialog {
-    --tw-shadow: 0 16px 48px var(--tw-shadow-color, #0009);
+    --tw-shadow: 0 16px 48px var(--tw-shadow-color, oklch(0% 0 0 / .6));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
   .shadow-elevated {
-    --tw-shadow: 0 8px 24px var(--tw-shadow-color, #00000080);
+    --tw-shadow: 0 8px 24px var(--tw-shadow-color, oklch(0% 0 0 / .5));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
   .shadow-glow-accent1 {
-    --tw-shadow: 0 0 20px var(--tw-shadow-color, #22c55e40);
+    --tw-shadow: 0 0 20px var(--tw-shadow-color, oklch(72.3% .219 149.579 / .25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
   .shadow-glow-accent2 {
-    --tw-shadow: 0 0 20px var(--tw-shadow-color, #ef444440);
+    --tw-shadow: 0 0 20px var(--tw-shadow-color, oklch(63.7% .237 25.331 / .25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
   .shadow-lg {
-    --tw-shadow: 0 10px 15px var(--tw-shadow-color, #0006);
+    --tw-shadow: 0 10px 15px var(--tw-shadow-color, oklch(0% 0 0 / .4));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
   .shadow-md {
-    --tw-shadow: 0 4px 6px var(--tw-shadow-color, #0000004d);
+    --tw-shadow: 0 4px 6px var(--tw-shadow-color, oklch(0% 0 0 / .3));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
@@ -3717,7 +3850,7 @@
   }
 
   .shadow-sm {
-    --tw-shadow: 0 1px 2px var(--tw-shadow-color, #0000004d);
+    --tw-shadow: 0 1px 2px var(--tw-shadow-color, oklch(0% 0 0 / .3));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
@@ -3950,7 +4083,7 @@
     inset-block: var(--spacing-1);
   }
 
-  .before\:top-1\/2:before {
+  .before\:top-1\/2:before, .before\:top-\[50\%\]:before {
     content: var(--tw-content);
     top: 50%;
   }
@@ -3970,11 +4103,21 @@
     height: var(--spacing-5);
   }
 
+  .before\:h-\[0px\]:before {
+    content: var(--tw-content);
+    height: 0;
+  }
+
   .before\:w-0\.5:before {
     content: var(--tw-content);
     width: var(--spacing-0_5);
   }
 
+  .before\:w-full:before {
+    content: var(--tw-content);
+    width: 100%;
+  }
+
   .before\:-translate-x-full:before {
     content: var(--tw-content);
     --tw-translate-x: -100%;
@@ -4003,6 +4146,23 @@
     border-bottom-right-radius: 3.40282e38px;
   }
 
+  .before\:border-b-\[1px\]:before {
+    content: var(--tw-content);
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+
+  .before\:border-dashed:before {
+    content: var(--tw-content);
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
+
+  .before\:border-neutral3:before {
+    content: var(--tw-content);
+    border-color: var(--color-neutral3);
+  }
+
   .before\:bg-black:before {
     content: var(--tw-content);
     background-color: var(--color-black);
@@ -4063,11 +4223,21 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .before\:content-\[\"\"\]:before {
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+
   .after\:absolute:after {
     content: var(--tw-content);
     position: absolute;
   }
 
+  .after\:top-0:after {
+    content: var(--tw-content);
+    top: var(--spacing-0);
+  }
+
   .after\:top-1\/2:after {
     content: var(--tw-content);
     top: 50%;
@@ -4078,11 +4248,31 @@
     right: var(--spacing-1);
   }
 
+  .after\:bottom-0:after {
+    content: var(--tw-content);
+    bottom: var(--spacing-0);
+  }
+
+  .after\:bottom-\[50\%\]:after {
+    content: var(--tw-content);
+    bottom: 50%;
+  }
+
+  .after\:left-\[-1px\]:after {
+    content: var(--tw-content);
+    left: -1px;
+  }
+
   .after\:h-3\/5:after {
     content: var(--tw-content);
     height: 60%;
   }
 
+  .after\:w-\[0px\]:after {
+    content: var(--tw-content);
+    width: 0;
+  }
+
   .after\:w-px:after {
     content: var(--tw-content);
     content: var(--tw-content);
@@ -4096,11 +4286,33 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .after\:border-l-\[1px\]:after {
+    content: var(--tw-content);
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
+
+  .after\:border-dashed:after {
+    content: var(--tw-content);
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
+
+  .after\:border-neutral3:after {
+    content: var(--tw-content);
+    border-color: var(--color-neutral3);
+  }
+
   .after\:bg-surface5:after {
     content: var(--tw-content);
     background-color: var(--color-surface5);
   }
 
+  .after\:content-\[\"\"\]:after {
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+
   .first\:border-t-transparent:first-child {
     border-top-color: #0000;
   }
@@ -4151,7 +4363,7 @@
   }
 
   .focus-within\:shadow-focus-ring:focus-within {
-    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, #22c55e1f);
+    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, oklch(72.3% .219 149.579 / .12));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
@@ -4317,6 +4529,10 @@
       color: var(--color-white);
     }
 
+    .hover\:text-yellow-500:hover {
+      color: var(--color-yellow-500);
+    }
+
     .hover\:opacity-80:hover {
       opacity: .8;
     }
@@ -4326,22 +4542,22 @@
     }
 
     .hover\:shadow-glow-accent1:hover {
-      --tw-shadow: 0 0 20px var(--tw-shadow-color, #22c55e40);
+      --tw-shadow: 0 0 20px var(--tw-shadow-color, oklch(72.3% .219 149.579 / .25));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .hover\:shadow-lg:hover {
-      --tw-shadow: 0 10px 15px var(--tw-shadow-color, #0006);
+      --tw-shadow: 0 10px 15px var(--tw-shadow-color, oklch(0% 0 0 / .4));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .hover\:shadow-md:hover {
-      --tw-shadow: 0 4px 6px var(--tw-shadow-color, #0000004d);
+      --tw-shadow: 0 4px 6px var(--tw-shadow-color, oklch(0% 0 0 / .3));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .hover\:shadow-sm:hover {
-      --tw-shadow: 0 1px 2px var(--tw-shadow-color, #0000004d);
+      --tw-shadow: 0 1px 2px var(--tw-shadow-color, oklch(0% 0 0 / .3));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
@@ -4386,12 +4602,12 @@
   }
 
   .focus\:shadow-focus-ring:focus {
-    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, #22c55e1f);
+    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, oklch(72.3% .219 149.579 / .12));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
   .focus\:shadow-glow-accent2:focus {
-    --tw-shadow: 0 0 20px var(--tw-shadow-color, #ef444440);
+    --tw-shadow: 0 0 20px var(--tw-shadow-color, oklch(63.7% .237 25.331 / .25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
@@ -4471,7 +4687,7 @@
   }
 
   .focus-visible\:shadow-focus-ring:focus-visible {
-    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, #22c55e1f);
+    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, oklch(72.3% .219 149.579 / .12));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
@@ -4569,7 +4785,7 @@
     }
 
     .disabled\:hover\:shadow-sm:disabled:hover {
-      --tw-shadow: 0 1px 2px var(--tw-shadow-color, #0000004d);
+      --tw-shadow: 0 1px 2px var(--tw-shadow-color, oklch(0% 0 0 / .3));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
@@ -4757,12 +4973,12 @@
   }
 
   .data-\[state\=checked\]\:shadow-glow-accent1[data-state="checked"] {
-    --tw-shadow: 0 0 20px var(--tw-shadow-color, #22c55e40);
+    --tw-shadow: 0 0 20px var(--tw-shadow-color, oklch(72.3% .219 149.579 / .25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
   .data-\[state\=checked\]\:shadow-lg[data-state="checked"] {
-    --tw-shadow: 0 10px 15px var(--tw-shadow-color, #0006);
+    --tw-shadow: 0 10px 15px var(--tw-shadow-color, oklch(0% 0 0 / .4));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
@@ -5220,6 +5436,10 @@
     height: 1.3em;
   }
 
+  .\[\&_svg\]\:h-\[1\.25em\] svg {
+    height: 1.25em;
+  }
+
   .\[\&_svg\]\:h-\[1em\] svg {
     height: 1em;
   }
@@ -5236,6 +5456,10 @@
     width: 1.3em;
   }
 
+  .\[\&_svg\]\:w-\[1\.25em\] svg {
+    width: 1.25em;
+  }
+
   .\[\&_svg\]\:w-\[1em\] svg {
     width: 1em;
   }
@@ -5428,6 +5652,18 @@
     border-bottom-right-radius: var(--radius-md);
   }
 
+  .\[\&\:hover\]\:opacity-60:hover {
+    opacity: .6;
+  }
+
+  .\[\&\:hover\>div\]\:bg-surface5:hover > div {
+    background-color: var(--color-surface5);
+  }
+
+  .\[\&\:hover\>svg\]\:opacity-60:hover > svg {
+    opacity: .6;
+  }
+
   .\[\&\:hover\>svg\]\:opacity-100:hover > svg {
     opacity: 1;
   }
@@ -5731,10 +5967,18 @@
     align-items: center;
   }
 
+  .\[\&\>button\]\:justify-between > button {
+    justify-content: space-between;
+  }
+
   .\[\&\>button\]\:gap-2 > button {
     gap: var(--spacing-2);
   }
 
+  .\[\&\>button\]\:overflow-hidden > button {
+    overflow: hidden;
+  }
+
   .\[\&\>button\]\:rounded-md > button {
     border-radius: var(--radius-md);
   }
@@ -5848,6 +6092,10 @@
     margin-right: var(--spacing-2);
   }
 
+  .\[\&\>svg\]\:ml-auto > svg {
+    margin-left: auto;
+  }
+
   .\[\&\>svg\]\:size-3\.5 > svg {
     width: var(--spacing-3_5);
     height: var(--spacing-3_5);
@@ -5873,6 +6121,10 @@
     height: var(--spacing-7);
   }
 
+  .\[\&\>svg\]\:h-\[0\.85rem\] > svg {
+    height: .85rem;
+  }
+
   .\[\&\>svg\]\:h-\[1\.1em\] > svg {
     height: 1.1em;
   }
@@ -5933,6 +6185,10 @@
     width: var(--spacing-7);
   }
 
+  .\[\&\>svg\]\:w-\[0\.85rem\] > svg {
+    width: .85rem;
+  }
+
   .\[\&\>svg\]\:w-\[1\.1em\] > svg {
     width: 1.1em;
   }
@@ -6010,6 +6266,10 @@
     color: var(--color-white);
   }
 
+  .\[\&\>svg\]\:opacity-0 > svg {
+    opacity: 0;
+  }
+
   .\[\&\>svg\]\:opacity-20 > svg {
     opacity: .2;
   }
@@ -6026,10 +6286,20 @@
     opacity: .75;
   }
 
+  .\[\&\>svg\]\:opacity-80 > svg {
+    opacity: .8;
+  }
+
   .\[\&\>svg\]\:opacity-100 > svg {
     opacity: 1;
   }
 
+  .\[\&\>svg\]\:transition-all > svg {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .\[\&\>svg\]\:transition-transform > svg {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -7374,37 +7644,37 @@
   --font-inter: "Inter", sans-serif;
   --tasa-explorer: "TasaExplorer", sans-serif;
   --geist-mono: "GeistMonoVF", monospace;
-  --surface1: #09090b;
-  --surface2: #111113;
-  --surface3: #18181b;
-  --surface4: #212124;
-  --surface5: #27272ae6;
-  --surface6: #3b3b40;
-  --accent1: #22c55e;
-  --accent2: #ef4444;
-  --accent3: #3b82f6;
-  --accent5: #60a5fa;
-  --accent6: #f59e0b;
-  --accent1Dark: #0d2818;
-  --accent2Dark: #2a1515;
-  --accent3Dark: #152036;
-  --accent5Dark: #15202a;
-  --accent6Dark: #261d0d;
-  --accent1Darker: #0a1a10;
-  --accent2Darker: #1a1010;
-  --accent3Darker: #0f1520;
-  --accent5Darker: #0f151a;
-  --accent6Darker: #1a140a;
-  --neutral1: #52525b;
-  --neutral2: #71717a;
-  --neutral3: #a1a1aa;
-  --neutral4: #d4d4d8;
-  --neutral5: #e4e4e7;
-  --neutral6: #fafafa;
-  --error: #ef4444;
-  --overlay: #000000bf;
-  --border1: #ffffff14;
-  --border2: #ffffff1f;
+  --surface1: oklch(14.1% 0 0);
+  --surface2: oklch(17.9% 0 0);
+  --surface3: oklch(21% 0 0);
+  --surface4: oklch(25.1% 0 0);
+  --surface5: oklch(27.5% 0 0 / .9);
+  --surface6: oklch(34.5% 0 0);
+  --accent1: oklch(72.3% .219 149.579);
+  --accent2: oklch(63.7% .237 25.331);
+  --accent3: oklch(62.3% .214 259.815);
+  --accent5: oklch(70.7% .165 254.624);
+  --accent6: oklch(76.9% .188 70.08);
+  --accent1Dark: oklch(24.2% .051 151);
+  --accent2Dark: oklch(21.6% .044 22);
+  --accent3Dark: oklch(23.4% .052 261);
+  --accent5Dark: oklch(22.7% .03 244);
+  --accent6Dark: oklch(22.9% .031 71);
+  --accent1Darker: oklch(18.1% .033 147);
+  --accent2Darker: oklch(16% .023 19);
+  --accent3Darker: oklch(17.4% .031 263);
+  --accent5Darker: oklch(17% .015 240);
+  --accent6Darker: oklch(17.5% .019 72);
+  --neutral1: oklch(37.2% 0 0);
+  --neutral2: oklch(55.3% 0 0);
+  --neutral3: oklch(70.5% 0 0);
+  --neutral4: oklch(87.1% 0 0);
+  --neutral5: oklch(92% 0 0);
+  --neutral6: oklch(98.5% 0 0);
+  --error: oklch(63.7% .237 25.331);
+  --overlay: oklch(0% 0 0 / .75);
+  --border1: oklch(100% 0 0 / .08);
+  --border2: oklch(100% 0 0 / .12);
   --text1: var(--neutral6);
   --warning1: var(--accent6);
   --positive1: var(--accent1);
@@ -7412,37 +7682,37 @@
 }
 
 html.light {
-  --surface1: #fff;
-  --surface2: #f8fafc;
-  --surface3: #f1f5f9;
-  --surface4: #e2e8f0;
-  --surface5: #e2e8f0e6;
-  --surface6: #cbd5e1;
-  --accent1: #16a34a;
-  --accent2: #dc2626;
-  --accent3: #2563eb;
-  --accent5: #3b82f6;
-  --accent6: #d97706;
-  --accent1Dark: #dcfce7;
-  --accent2Dark: #fee2e2;
-  --accent3Dark: #dbeafe;
-  --accent5Dark: #dbeafe;
-  --accent6Dark: #fef3c7;
-  --accent1Darker: #bbf7d0;
-  --accent2Darker: #fecaca;
-  --accent3Darker: #bfdbfe;
-  --accent5Darker: #bfdbfe;
-  --accent6Darker: #fde68a;
-  --neutral1: #64748b;
-  --neutral2: #475569;
-  --neutral3: #334155;
-  --neutral4: #1e293b;
-  --neutral5: #0f172a;
-  --neutral6: #020617;
-  --error: #dc2626;
-  --overlay: #0f172a73;
-  --border1: #0f172a1f;
-  --border2: #0f172a33;
+  --surface1: oklch(100% 0 0);
+  --surface2: oklch(98.4% 0 0);
+  --surface3: oklch(96.8% 0 0);
+  --surface4: oklch(92.9% 0 0);
+  --surface5: oklch(92.9% 0 0 / .9);
+  --surface6: oklch(86.9% 0 0);
+  --accent1: oklch(62.7% .194 149.214);
+  --accent2: oklch(57.7% .245 27.325);
+  --accent3: oklch(54.6% .245 262.881);
+  --accent5: oklch(62.3% .214 259.815);
+  --accent6: oklch(66.6% .179 58.318);
+  --accent1Dark: oklch(96.2% .044 156.743);
+  --accent2Dark: oklch(93.6% .032 17.717);
+  --accent3Dark: oklch(93.2% .032 255.585);
+  --accent5Dark: oklch(93.2% .032 255.585);
+  --accent6Dark: oklch(96.2% .059 95.617);
+  --accent1Darker: oklch(92.5% .084 155.995);
+  --accent2Darker: oklch(88.5% .062 18.334);
+  --accent3Darker: oklch(88.2% .059 254.128);
+  --accent5Darker: oklch(88.2% .059 254.128);
+  --accent6Darker: oklch(92.4% .12 95.746);
+  --neutral1: oklch(55.4% 0 0);
+  --neutral2: oklch(44.6% 0 0);
+  --neutral3: oklch(37.2% 0 0);
+  --neutral4: oklch(27.9% 0 0);
+  --neutral5: oklch(20.8% 0 0);
+  --neutral6: oklch(13% 0 0);
+  --error: oklch(57.7% .245 27.325);
+  --overlay: oklch(20.8% 0 0 / .45);
+  --border1: oklch(20.8% 0 0 / .12);
+  --border2: oklch(20.8% 0 0 / .2);
   --text1: var(--neutral6);
   --warning1: var(--accent6);
   --positive1: var(--accent1);