@mastra/playground-ui 60.0.0 → 60.1.0-alpha.0

package/dist/style.css

@@ -697,10 +697,6 @@
     inset-block: var(--spacing);
   }
 
-  .inset-y-px {
-    inset-block: 1px;
-  }
-
   .inset-s-1\/2 {
     inset-inline-start: 50%;
   }
@@ -845,10 +841,6 @@
     left: 100%;
   }
 
-  .left-px {
-    left: 1px;
-  }
-
   .isolate {
     isolation: isolate;
   }
@@ -1879,6 +1871,10 @@
     field-sizing: content;
   }
 
+  .aspect-square {
+    aspect-ratio: 1;
+  }
+
   .size-1 {
     width: var(--spacing);
     height: var(--spacing);
@@ -4748,6 +4744,18 @@
     }
   }
 
+  .bg-badge-amber-indicator {
+    background-color: var(--badge-amber-indicator);
+  }
+
+  .bg-badge-amber-strong {
+    background-color: var(--badge-amber-strong);
+  }
+
+  .bg-badge-amber-subtle {
+    background-color: var(--badge-amber-subtle);
+  }
+
   .bg-badge-blue-indicator {
     background-color: var(--badge-blue-indicator);
   }
@@ -4832,18 +4840,6 @@
     background-color: var(--badge-red-subtle);
   }
 
-  .bg-badge-yellow-indicator {
-    background-color: var(--badge-yellow-indicator);
-  }
-
-  .bg-badge-yellow-strong {
-    background-color: var(--badge-yellow-strong);
-  }
-
-  .bg-badge-yellow-subtle {
-    background-color: var(--badge-yellow-subtle);
-  }
-
   .bg-border {
     background-color: var(--border);
   }
@@ -5557,6 +5553,10 @@
     mask-repeat: no-repeat;
   }
 
+  .fill-badge-amber-strong {
+    fill: var(--badge-amber-strong);
+  }
+
   .fill-badge-blue-strong {
     fill: var(--badge-blue-strong);
   }
@@ -5577,14 +5577,14 @@
     fill: var(--badge-purple-strong);
   }
 
-  .fill-badge-yellow-strong {
-    fill: var(--badge-yellow-strong);
-  }
-
   .fill-card {
     fill: var(--card);
   }
 
+  .fill-destructive-foreground {
+    fill: var(--destructive-foreground);
+  }
+
   .fill-muted-foreground {
     fill: var(--muted-foreground);
   }
@@ -5609,6 +5609,10 @@
     stroke: var(--surface-rim);
   }
 
+  .stroke-badge-amber-edge {
+    stroke: var(--badge-amber-edge);
+  }
+
   .stroke-badge-blue-edge {
     stroke: var(--badge-blue-edge);
   }
@@ -5629,10 +5633,6 @@
     stroke: var(--badge-purple-edge);
   }
 
-  .stroke-badge-yellow-edge {
-    stroke: var(--badge-yellow-edge);
-  }
-
   .stroke-border-strong {
     stroke: var(--border-strong);
   }
@@ -6351,6 +6351,10 @@
     color: var(--background);
   }
 
+  .text-badge-amber-foreground {
+    color: var(--badge-amber-foreground);
+  }
+
   .text-badge-blue-foreground {
     color: var(--badge-blue-foreground);
   }
@@ -6391,10 +6395,6 @@
     color: var(--badge-red-indicator);
   }
 
-  .text-badge-yellow-foreground {
-    color: var(--badge-yellow-foreground);
-  }
-
   .text-black {
     color: var(--color-black);
   }
@@ -6419,12 +6419,16 @@
     color: var(--destructive-edge);
   }
 
-  .text-destructive-indicator {
-    color: var(--destructive-indicator);
+  .text-destructive-foreground {
+    color: var(--destructive-foreground);
+  }
+
+  .text-destructive-foreground\! {
+    color: var(--destructive-foreground) !important;
   }
 
-  .text-destructive-indicator\! {
-    color: var(--destructive-indicator) !important;
+  .text-destructive-indicator {
+    color: var(--destructive-indicator);
   }
 
   .text-destructive-subtle-foreground {
@@ -6577,6 +6581,10 @@
     color: #0000;
   }
 
+  .text-warning-foreground {
+    color: var(--warning-foreground);
+  }
+
   .text-warning-indicator {
     color: var(--warning-indicator);
   }
@@ -6730,6 +6738,10 @@
     }
   }
 
+  .ring-border {
+    --tw-ring-color: var(--border);
+  }
+
   .ring-border-focus {
     --tw-ring-color: var(--border-focus);
   }
@@ -7426,6 +7438,10 @@
     animation-play-state: paused;
   }
 
+  .ring-inset {
+    --tw-ring-inset: inset;
+  }
+
   .running {
     animation-play-state: running;
   }
@@ -7497,7 +7513,7 @@
     background-color: var(--fill-subtle);
   }
 
-  .group-focus-within\/message\:opacity-100:is(:where(.group\/message):focus-within *) {
+  .group-focus-within\/message\:opacity-100:is(:where(.group\/message):focus-within *), .group-focus-within\/tool\:opacity-100:is(:where(.group\/tool):focus-within *) {
     opacity: 1;
   }
 
@@ -7553,6 +7569,10 @@
     .group-hover\/task-list\:text-foreground:is(:where(.group\/task-list):hover *) {
       color: var(--foreground);
     }
+
+    .group-hover\/tool\:opacity-100:is(:where(.group\/tool):hover *) {
+      opacity: 1;
+    }
   }
 
   .group-focus\:opacity-100:is(:where(.group):focus *) {
@@ -8426,6 +8446,10 @@
     padding-left: calc(var(--spacing) * 3);
   }
 
+  .last\:mb-0:last-child {
+    margin-bottom: 0;
+  }
+
   .last\:border-b-0:last-child {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 0;
@@ -8545,12 +8569,12 @@
       border-color: var(--destructive-indicator);
     }
 
-    .hover\:bg-badge-blue-strong:hover {
-      background-color: var(--badge-blue-strong);
+    .hover\:bg-badge-amber-strong:hover {
+      background-color: var(--badge-amber-strong);
     }
 
-    .hover\:bg-badge-yellow-strong:hover {
-      background-color: var(--badge-yellow-strong);
+    .hover\:bg-badge-blue-strong:hover {
+      background-color: var(--badge-blue-strong);
     }
 
     .hover\:bg-card:hover {
@@ -8629,8 +8653,8 @@
       color: var(--color-black);
     }
 
-    .hover\:text-destructive-indicator:hover {
-      color: var(--destructive-indicator);
+    .hover\:text-destructive-foreground:hover {
+      color: var(--destructive-foreground);
     }
 
     .hover\:text-foreground:hover {
@@ -8718,8 +8742,8 @@
       background-color: #0000;
     }
 
-    .not-disabled\:hover\:text-destructive-indicator:not(:disabled):hover {
-      color: var(--destructive-indicator);
+    .not-disabled\:hover\:text-destructive-foreground:not(:disabled):hover {
+      color: var(--destructive-foreground);
     }
 
     .not-disabled\:hover\:text-foreground:not(:disabled):hover {
@@ -8892,13 +8916,6 @@
     --surface-rim: var(--field-rim-focus);
   }
 
-  .active\:scale-90:active {
-    --tw-scale-x: 90%;
-    --tw-scale-y: 90%;
-    --tw-scale-z: 90%;
-    scale: var(--tw-scale-x) var(--tw-scale-y);
-  }
-
   .active\:scale-95:active {
     --tw-scale-x: 95%;
     --tw-scale-y: 95%;
@@ -9015,8 +9032,8 @@
     }
   }
 
-  .disabled\:text-fill-destructive-foreground:disabled {
-    color: var(--fill-destructive-foreground);
+  .disabled\:text-fill-destructive-disabled-foreground:disabled {
+    color: var(--fill-destructive-disabled-foreground);
   }
 
   .disabled\:text-muted-foreground:disabled {
@@ -9237,8 +9254,8 @@
     }
   }
 
-  .aria-disabled\:text-fill-destructive-foreground[aria-disabled="true"] {
-    color: var(--fill-destructive-foreground);
+  .aria-disabled\:text-fill-destructive-disabled-foreground[aria-disabled="true"] {
+    color: var(--fill-destructive-disabled-foreground);
   }
 
   .aria-disabled\:text-muted-foreground[aria-disabled="true"] {
@@ -9331,8 +9348,8 @@
     background-color: var(--surface-panel);
   }
 
-  .data-highlighted\:text-destructive-indicator[data-highlighted] {
-    color: var(--destructive-indicator);
+  .data-highlighted\:text-destructive-foreground[data-highlighted] {
+    color: var(--destructive-foreground);
   }
 
   .data-highlighted\:text-foreground[data-highlighted], .data-selected\:text-foreground[data-selected], .data-\[active\]\:text-foreground[data-active] {
@@ -9650,8 +9667,8 @@
     opacity: 0;
   }
 
-  .data-\[highlighted\]\:text-destructive-indicator[data-highlighted] {
-    color: var(--destructive-indicator);
+  .data-\[highlighted\]\:text-destructive-foreground[data-highlighted] {
+    color: var(--destructive-foreground);
   }
 
   .data-\[hovering\]\:opacity-100[data-hovering] {
@@ -10027,6 +10044,21 @@
       content: var(--tw-content);
       animation: var(--animate-spin);
     }
+
+    .motion-safe\:data-\[ready\]\:transition-\[transform\,width\][data-ready] {
+      transition-property: transform, width;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+
+    .motion-safe\:data-\[ready\]\:duration-normal[data-ready] {
+      transition-duration: var(--duration-normal);
+    }
+
+    .motion-safe\:data-\[ready\]\:ease-out-custom[data-ready] {
+      --tw-ease: var(--ease-out-custom);
+      transition-timing-function: var(--ease-out-custom);
+    }
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -11098,11 +11130,6 @@
     height: 1.3em;
   }
 
-  .\[\&_svg\]\:size-icon-xs svg {
-    width: var(--spacing-icon-xs);
-    height: var(--spacing-icon-xs);
-  }
-
   .\[\&_svg\]\:shrink-0 svg {
     flex-shrink: 0;
   }
@@ -11111,8 +11138,8 @@
     stroke-width: 1.75px;
   }
 
-  .\[\&_svg\]\:text-destructive-indicator\! svg {
-    color: var(--destructive-indicator) !important;
+  .\[\&_svg\]\:text-destructive-foreground\! svg {
+    color: var(--destructive-foreground) !important;
   }
 
   .\[\&_svg\]\:text-muted-foreground svg {
@@ -11745,8 +11772,8 @@
     stroke-width: 2px;
   }
 
-  .\[\&\>svg\]\:text-destructive-indicator > svg {
-    color: var(--destructive-indicator);
+  .\[\&\>svg\]\:text-destructive-foreground > svg {
+    color: var(--destructive-foreground);
   }
 
   .\[\&\>svg\]\:text-muted-foreground > svg {
@@ -11972,28 +11999,28 @@
   --gray-alpha-8: #fff9;
   --gray-alpha-9: #ffffffbf;
   --gray-alpha-10: #ffffffe6;
-  --red-50: oklch(97% .012 25);
-  --red-100: oklch(94% .03 25);
-  --red-200: oklch(88% .063 25);
-  --red-300: oklch(80% .114 25);
-  --red-400: oklch(70% .18 25);
-  --red-500: oklch(62% .22 25);
-  --red-600: oklch(55% .22 25);
-  --red-700: oklch(47% .19 25);
-  --red-800: oklch(39% .14 25);
-  --red-900: oklch(31% .1 25);
-  --red-950: oklch(23% .06 25);
-  --red-soft-50: oklch(97% .01 25);
-  --red-soft-100: oklch(93% .022 25);
-  --red-soft-200: oklch(86% .045 25);
-  --red-soft-300: oklch(76% .1 25);
-  --red-soft-400: oklch(68% .1 25);
-  --red-soft-500: oklch(60% .1 25);
-  --red-soft-600: oklch(52% .1 25);
-  --red-soft-700: oklch(45% .092 25);
-  --red-soft-800: oklch(38% .083 25);
-  --red-soft-900: oklch(31% .075 25);
-  --red-soft-950: oklch(23% .045 25);
+  --red-50: oklch(97% .013 24);
+  --red-100: oklch(94% .029 24);
+  --red-200: oklch(88% .062 24);
+  --red-300: oklch(80% .112 24);
+  --red-400: oklch(76% .14 24);
+  --red-500: oklch(63% .22 24);
+  --red-600: oklch(56% .22 24);
+  --red-700: oklch(48% .19 24);
+  --red-800: oklch(40% .15 24);
+  --red-900: oklch(32% .11 24);
+  --red-950: oklch(24% .07 24);
+  --red-soft-50: oklch(97% .01 24);
+  --red-soft-100: oklch(93% .022 24);
+  --red-soft-200: oklch(86% .045 24);
+  --red-soft-300: oklch(76% .1 24);
+  --red-soft-400: oklch(68% .1 24);
+  --red-soft-500: oklch(60% .1 24);
+  --red-soft-600: oklch(52% .1 24);
+  --red-soft-700: oklch(45% .092 24);
+  --red-soft-800: oklch(38% .083 24);
+  --red-soft-900: oklch(31% .075 24);
+  --red-soft-950: oklch(23% .045 24);
   --orange-50: oklch(97% .014 50);
   --orange-100: oklch(94% .03 50);
   --orange-200: oklch(88% .07 50);
@@ -12016,28 +12043,28 @@
   --orange-soft-800: oklch(38% .076 50);
   --orange-soft-900: oklch(31% .064 50);
   --orange-soft-950: oklch(23% .038 50);
-  --yellow-50: oklch(97% .018 90);
-  --yellow-100: oklch(94% .04 90);
-  --yellow-200: oklch(88% .08 90);
-  --yellow-300: oklch(82% .16 95);
-  --yellow-400: oklch(70% .143 90);
-  --yellow-500: oklch(62% .126 90);
-  --yellow-600: oklch(55% .112 90);
-  --yellow-700: oklch(47% .096 90);
-  --yellow-800: oklch(39% .079 90);
-  --yellow-900: oklch(31% .06 90);
-  --yellow-950: oklch(23% .035 90);
-  --yellow-soft-50: oklch(97% .01 90);
-  --yellow-soft-100: oklch(93% .022 90);
-  --yellow-soft-200: oklch(86% .045 90);
-  --yellow-soft-300: oklch(76% .1 90);
-  --yellow-soft-400: oklch(68% .1 90);
-  --yellow-soft-500: oklch(60% .1 90);
-  --yellow-soft-600: oklch(52% .1 90);
-  --yellow-soft-700: oklch(45% .082 90);
-  --yellow-soft-800: oklch(38% .063 90);
-  --yellow-soft-900: oklch(31% .045 90);
-  --yellow-soft-950: oklch(23% .026 90);
+  --amber-50: oklch(97.5% .03 95);
+  --amber-100: oklch(95% .065 92);
+  --amber-200: oklch(91% .105 88);
+  --amber-300: oklch(86% .146 84);
+  --amber-400: oklch(80% .163 78);
+  --amber-500: oklch(74% .155 72);
+  --amber-600: oklch(66% .146 64);
+  --amber-700: oklch(58% .136 58);
+  --amber-800: oklch(50% .12 54);
+  --amber-900: oklch(41% .095 50);
+  --amber-950: oklch(30% .07 48);
+  --amber-soft-50: oklch(97% .01 95);
+  --amber-soft-100: oklch(93% .022 92);
+  --amber-soft-200: oklch(86% .045 88);
+  --amber-soft-300: oklch(76% .1 84);
+  --amber-soft-400: oklch(68% .1 78);
+  --amber-soft-500: oklch(60% .1 72);
+  --amber-soft-600: oklch(52% .1 64);
+  --amber-soft-700: oklch(45% .082 58);
+  --amber-soft-800: oklch(38% .063 54);
+  --amber-soft-900: oklch(31% .045 50);
+  --amber-soft-950: oklch(23% .026 48);
   --green-50: oklch(97% .015 150);
   --green-100: oklch(94% .035 150);
   --green-200: oklch(88% .07 150);
@@ -12177,15 +12204,17 @@ html.light {
 }
 
 :root {
-  --destructive-subtle: var(--red-soft-950);
+  --destructive-subtle: var(--red-950);
   --destructive-subtle-active: var(--red-900);
-  --destructive-edge: var(--red-700);
-  --destructive-indicator: var(--red-400);
+  --destructive-edge: var(--red-soft-700);
+  --destructive-indicator: var(--red-500);
   --destructive-subtle-foreground: var(--red-50);
-  --warning-subtle: var(--yellow-soft-950);
-  --warning-edge: var(--yellow-700);
-  --warning-indicator: var(--yellow-400);
-  --warning-subtle-foreground: var(--yellow-50);
+  --destructive-foreground: var(--red-400);
+  --warning-subtle: var(--amber-soft-950);
+  --warning-edge: var(--amber-800);
+  --warning-indicator: var(--amber-400);
+  --warning-subtle-foreground: var(--amber-50);
+  --warning-foreground: var(--amber-300);
   --success-subtle: var(--green-soft-950);
   --success-edge: var(--green-700);
   --success-indicator: var(--green-400);
@@ -12195,67 +12224,211 @@ html.light {
   --info-indicator: var(--blue-400);
   --info-subtle-foreground: var(--blue-50);
   --badge-neutral-foreground: var(--foreground);
-  --badge-green-strong: var(--green-soft-900);
-  --badge-green-subtle: var(--green-soft-950);
+  --badge-green-strong: var(--green-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :root {
+    --badge-green-strong: color-mix(in oklab, var(--green-600) 32%, transparent);
+  }
+}
+
+:root {
+  --badge-green-subtle: var(--green-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :root {
+    --badge-green-subtle: color-mix(in oklab, var(--green-600) 13%, transparent);
+  }
+}
+
+:root {
   --badge-green-edge: var(--green-700);
   --badge-green-indicator: var(--green-soft-300);
   --badge-green-foreground: var(--green-200);
-  --badge-red-strong: var(--red-soft-900);
-  --badge-red-subtle: var(--red-soft-950);
+  --badge-red-strong: var(--red-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :root {
+    --badge-red-strong: color-mix(in oklab, var(--red-600) 32%, transparent);
+  }
+}
+
+:root {
+  --badge-red-subtle: var(--red-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :root {
+    --badge-red-subtle: color-mix(in oklab, var(--red-600) 13%, transparent);
+  }
+}
+
+:root {
   --badge-red-edge: var(--red-700);
   --badge-red-indicator: var(--red-soft-300);
   --badge-red-foreground: var(--red-200);
-  --badge-yellow-strong: var(--yellow-soft-900);
-  --badge-yellow-subtle: var(--yellow-soft-950);
-  --badge-yellow-edge: var(--yellow-700);
-  --badge-yellow-indicator: var(--yellow-soft-300);
-  --badge-yellow-foreground: var(--yellow-200);
-  --badge-blue-strong: var(--blue-soft-900);
-  --badge-blue-subtle: var(--blue-soft-950);
+  --badge-amber-strong: var(--amber-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :root {
+    --badge-amber-strong: color-mix(in oklab, var(--amber-600) 32%, transparent);
+  }
+}
+
+:root {
+  --badge-amber-subtle: var(--amber-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :root {
+    --badge-amber-subtle: color-mix(in oklab, var(--amber-600) 13%, transparent);
+  }
+}
+
+:root {
+  --badge-amber-edge: var(--amber-700);
+  --badge-amber-indicator: var(--amber-soft-300);
+  --badge-amber-foreground: var(--amber-200);
+  --badge-blue-strong: var(--blue-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :root {
+    --badge-blue-strong: color-mix(in oklab, var(--blue-600) 32%, transparent);
+  }
+}
+
+:root {
+  --badge-blue-subtle: var(--blue-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :root {
+    --badge-blue-subtle: color-mix(in oklab, var(--blue-600) 13%, transparent);
+  }
+}
+
+:root {
   --badge-blue-edge: var(--blue-700);
   --badge-blue-indicator: var(--blue-soft-300);
   --badge-blue-foreground: var(--blue-200);
-  --badge-purple-strong: var(--purple-soft-900);
-  --badge-purple-subtle: var(--purple-soft-950);
+  --badge-purple-strong: var(--purple-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :root {
+    --badge-purple-strong: color-mix(in oklab, var(--purple-600) 32%, transparent);
+  }
+}
+
+:root {
+  --badge-purple-subtle: var(--purple-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :root {
+    --badge-purple-subtle: color-mix(in oklab, var(--purple-600) 13%, transparent);
+  }
+}
+
+:root {
   --badge-purple-edge: var(--purple-700);
   --badge-purple-indicator: var(--purple-soft-300);
   --badge-purple-foreground: var(--purple-200);
-  --badge-orange-strong: var(--orange-soft-900);
-  --badge-orange-subtle: var(--orange-soft-950);
+  --badge-orange-strong: var(--orange-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :root {
+    --badge-orange-strong: color-mix(in oklab, var(--orange-600) 32%, transparent);
+  }
+}
+
+:root {
+  --badge-orange-subtle: var(--orange-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :root {
+    --badge-orange-subtle: color-mix(in oklab, var(--orange-600) 13%, transparent);
+  }
+}
+
+:root {
   --badge-orange-edge: var(--orange-700);
   --badge-orange-indicator: var(--orange-soft-300);
   --badge-orange-foreground: var(--orange-200);
-  --badge-cyan-strong: var(--cyan-soft-900);
-  --badge-cyan-subtle: var(--cyan-soft-950);
+  --badge-cyan-strong: var(--cyan-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :root {
+    --badge-cyan-strong: color-mix(in oklab, var(--cyan-600) 32%, transparent);
+  }
+}
+
+:root {
+  --badge-cyan-subtle: var(--cyan-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :root {
+    --badge-cyan-subtle: color-mix(in oklab, var(--cyan-600) 13%, transparent);
+  }
+}
+
+:root {
   --badge-cyan-edge: var(--cyan-700);
   --badge-cyan-indicator: var(--cyan-soft-300);
   --badge-cyan-foreground: var(--cyan-200);
-  --badge-pink-strong: var(--pink-soft-900);
-  --badge-pink-subtle: var(--pink-soft-950);
+  --badge-pink-strong: var(--pink-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :root {
+    --badge-pink-strong: color-mix(in oklab, var(--pink-600) 32%, transparent);
+  }
+}
+
+:root {
+  --badge-pink-subtle: var(--pink-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :root {
+    --badge-pink-subtle: color-mix(in oklab, var(--pink-600) 13%, transparent);
+  }
+}
+
+:root {
   --badge-pink-edge: var(--pink-700);
   --badge-pink-indicator: var(--pink-soft-300);
   --badge-pink-foreground: var(--pink-200);
-  --product-studio: var(--badge-cyan-strong);
+  --product-studio: var(--cyan-soft-900);
   --product-studio-foreground: var(--badge-cyan-foreground);
-  --product-studio-subtle: var(--badge-cyan-subtle);
-  --product-server: var(--badge-blue-strong);
+  --product-studio-subtle: var(--cyan-soft-950);
+  --product-server: var(--blue-soft-900);
   --product-server-foreground: var(--badge-blue-foreground);
-  --product-server-subtle: var(--badge-blue-subtle);
-  --product-observability: var(--badge-green-strong);
+  --product-server-subtle: var(--blue-soft-950);
+  --product-observability: var(--green-soft-900);
   --product-observability-foreground: var(--badge-green-foreground);
-  --product-observability-subtle: var(--badge-green-subtle);
-  --product-factory: var(--badge-orange-strong);
+  --product-observability-subtle: var(--green-soft-950);
+  --product-factory: var(--orange-soft-900);
   --product-factory-foreground: var(--badge-orange-foreground);
-  --product-factory-subtle: var(--badge-orange-subtle);
-  --product-workers: var(--badge-yellow-strong);
-  --product-workers-foreground: var(--badge-yellow-foreground);
-  --product-workers-subtle: var(--badge-yellow-subtle);
-  --product-persistent-server: var(--badge-purple-strong);
+  --product-factory-subtle: var(--orange-soft-950);
+  --product-workers: var(--amber-soft-900);
+  --product-workers-foreground: var(--badge-amber-foreground);
+  --product-workers-subtle: var(--amber-soft-950);
+  --product-persistent-server: var(--purple-soft-900);
   --product-persistent-server-foreground: var(--badge-purple-foreground);
-  --product-persistent-server-subtle: var(--badge-purple-subtle);
+  --product-persistent-server-subtle: var(--purple-soft-950);
   --brand-green-indicator: var(--color-brand-green);
   --destructive-bright: var(--red-300);
-  --warning-bright: var(--yellow-300);
+  --warning-bright: var(--amber-300);
   --success-bright: var(--green-300);
   --info-bright: var(--blue-300);
   --session-initializing: var(--orange-400);
@@ -12265,12 +12438,14 @@ html.light {
   --destructive-subtle: var(--red-100);
   --destructive-subtle-active: var(--red-200);
   --destructive-edge: var(--red-300);
-  --destructive-indicator: var(--red-600);
+  --destructive-indicator: var(--red-500);
   --destructive-subtle-foreground: var(--red-950);
-  --warning-subtle: var(--yellow-100);
-  --warning-edge: var(--yellow-200);
-  --warning-indicator: var(--yellow-700);
-  --warning-subtle-foreground: var(--yellow-800);
+  --destructive-foreground: var(--red-600);
+  --warning-subtle: var(--amber-100);
+  --warning-edge: var(--amber-200);
+  --warning-indicator: var(--amber-400);
+  --warning-foreground: var(--amber-700);
+  --warning-subtle-foreground: var(--amber-800);
   --success-subtle: var(--green-100);
   --success-edge: var(--green-300);
   --success-indicator: var(--green-700);
@@ -12280,55 +12455,211 @@ html.light {
   --info-indicator: var(--blue-600);
   --info-subtle-foreground: var(--blue-950);
   --badge-neutral-foreground: var(--muted-foreground);
-  --badge-green-strong: var(--green-100);
-  --badge-green-subtle: var(--green-50);
+  --badge-green-strong: var(--green-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  html.light {
+    --badge-green-strong: color-mix(in oklab, var(--green-400) 20%, transparent);
+  }
+}
+
+html.light {
+  --badge-green-subtle: var(--green-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  html.light {
+    --badge-green-subtle: color-mix(in oklab, var(--green-400) 10%, transparent);
+  }
+}
+
+html.light {
   --badge-green-edge: var(--green-300);
   --badge-green-indicator: var(--green-soft-600);
   --badge-green-foreground: var(--green-800);
-  --badge-red-strong: var(--red-100);
-  --badge-red-subtle: var(--red-50);
+  --badge-red-strong: var(--red-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  html.light {
+    --badge-red-strong: color-mix(in oklab, var(--red-400) 20%, transparent);
+  }
+}
+
+html.light {
+  --badge-red-subtle: var(--red-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  html.light {
+    --badge-red-subtle: color-mix(in oklab, var(--red-400) 10%, transparent);
+  }
+}
+
+html.light {
   --badge-red-edge: var(--red-300);
   --badge-red-indicator: var(--red-soft-600);
   --badge-red-foreground: var(--red-800);
-  --badge-yellow-strong: var(--yellow-100);
-  --badge-yellow-subtle: var(--yellow-50);
-  --badge-yellow-edge: var(--yellow-300);
-  --badge-yellow-indicator: var(--yellow-soft-600);
-  --badge-yellow-foreground: var(--yellow-800);
-  --badge-blue-strong: var(--blue-100);
-  --badge-blue-subtle: var(--blue-50);
+  --badge-amber-strong: var(--amber-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  html.light {
+    --badge-amber-strong: color-mix(in oklab, var(--amber-400) 20%, transparent);
+  }
+}
+
+html.light {
+  --badge-amber-subtle: var(--amber-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  html.light {
+    --badge-amber-subtle: color-mix(in oklab, var(--amber-400) 10%, transparent);
+  }
+}
+
+html.light {
+  --badge-amber-edge: var(--amber-300);
+  --badge-amber-indicator: var(--amber-soft-600);
+  --badge-amber-foreground: var(--amber-800);
+  --badge-blue-strong: var(--blue-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  html.light {
+    --badge-blue-strong: color-mix(in oklab, var(--blue-400) 20%, transparent);
+  }
+}
+
+html.light {
+  --badge-blue-subtle: var(--blue-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  html.light {
+    --badge-blue-subtle: color-mix(in oklab, var(--blue-400) 10%, transparent);
+  }
+}
+
+html.light {
   --badge-blue-edge: var(--blue-300);
   --badge-blue-indicator: var(--blue-soft-600);
   --badge-blue-foreground: var(--blue-800);
-  --badge-purple-strong: var(--purple-100);
-  --badge-purple-subtle: var(--purple-50);
+  --badge-purple-strong: var(--purple-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  html.light {
+    --badge-purple-strong: color-mix(in oklab, var(--purple-400) 20%, transparent);
+  }
+}
+
+html.light {
+  --badge-purple-subtle: var(--purple-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  html.light {
+    --badge-purple-subtle: color-mix(in oklab, var(--purple-400) 10%, transparent);
+  }
+}
+
+html.light {
   --badge-purple-edge: var(--purple-300);
   --badge-purple-indicator: var(--purple-soft-600);
   --badge-purple-foreground: var(--purple-800);
-  --badge-orange-strong: var(--orange-100);
-  --badge-orange-subtle: var(--orange-50);
+  --badge-orange-strong: var(--orange-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  html.light {
+    --badge-orange-strong: color-mix(in oklab, var(--orange-400) 20%, transparent);
+  }
+}
+
+html.light {
+  --badge-orange-subtle: var(--orange-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  html.light {
+    --badge-orange-subtle: color-mix(in oklab, var(--orange-400) 10%, transparent);
+  }
+}
+
+html.light {
   --badge-orange-edge: var(--orange-300);
   --badge-orange-indicator: var(--orange-soft-600);
   --badge-orange-foreground: var(--orange-800);
-  --badge-cyan-strong: var(--cyan-100);
-  --badge-cyan-subtle: var(--cyan-50);
+  --badge-cyan-strong: var(--cyan-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  html.light {
+    --badge-cyan-strong: color-mix(in oklab, var(--cyan-400) 20%, transparent);
+  }
+}
+
+html.light {
+  --badge-cyan-subtle: var(--cyan-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  html.light {
+    --badge-cyan-subtle: color-mix(in oklab, var(--cyan-400) 10%, transparent);
+  }
+}
+
+html.light {
   --badge-cyan-edge: var(--cyan-300);
   --badge-cyan-indicator: var(--cyan-soft-600);
   --badge-cyan-foreground: var(--cyan-800);
-  --badge-pink-strong: var(--pink-100);
-  --badge-pink-subtle: var(--pink-50);
+  --badge-pink-strong: var(--pink-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  html.light {
+    --badge-pink-strong: color-mix(in oklab, var(--pink-400) 20%, transparent);
+  }
+}
+
+html.light {
+  --badge-pink-subtle: var(--pink-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  html.light {
+    --badge-pink-subtle: color-mix(in oklab, var(--pink-400) 10%, transparent);
+  }
+}
+
+html.light {
   --badge-pink-edge: var(--pink-300);
   --badge-pink-indicator: var(--pink-soft-600);
   --badge-pink-foreground: var(--pink-800);
   --product-studio-foreground: var(--cyan-950);
+  --product-studio: var(--cyan-100);
+  --product-studio-subtle: var(--cyan-50);
   --product-server-foreground: var(--blue-950);
+  --product-server: var(--blue-100);
+  --product-server-subtle: var(--blue-50);
   --product-observability-foreground: var(--green-950);
+  --product-observability: var(--green-100);
+  --product-observability-subtle: var(--green-50);
   --product-factory-foreground: var(--orange-950);
-  --product-workers-foreground: var(--yellow-950);
+  --product-factory: var(--orange-100);
+  --product-factory-subtle: var(--orange-50);
+  --product-workers-foreground: var(--amber-950);
+  --product-workers: var(--amber-100);
+  --product-workers-subtle: var(--amber-50);
   --product-persistent-server-foreground: var(--purple-950);
+  --product-persistent-server: var(--purple-100);
+  --product-persistent-server-subtle: var(--purple-50);
   --brand-green-indicator: var(--green-700);
   --destructive-bright: var(--red-500);
-  --warning-bright: var(--yellow-400);
+  --warning-bright: var(--amber-400);
   --success-bright: var(--green-500);
   --info-bright: var(--blue-500);
   --session-initializing: var(--orange-500);
@@ -12337,7 +12668,7 @@ html.light {
 :root {
   --chart-blue: var(--blue-300);
   --chart-blue-deep: var(--blue-600);
-  --chart-yellow: var(--yellow-300);
+  --chart-amber: var(--amber-300);
   --chart-green: var(--green-400);
   --chart-purple: var(--purple-400);
   --chart-orange: var(--orange-400);
@@ -12365,7 +12696,7 @@ html.light {
 html.light {
   --chart-blue: var(--blue-500);
   --chart-blue-deep: var(--blue-800);
-  --chart-yellow: var(--yellow-500);
+  --chart-amber: var(--amber-500);
   --chart-green: var(--green-500);
   --chart-purple: var(--purple-600);
   --chart-orange: var(--orange-600);
@@ -12429,8 +12760,9 @@ html.light {
   --fill-destructive: var(--red-600);
   --fill-destructive-hover: var(--red-700);
   --fill-destructive-active: var(--red-800);
-  --fill-destructive-disabled: var(--red-900);
+  --fill-destructive-disabled: var(--red-soft-900);
   --fill-destructive-foreground: var(--red-50);
+  --fill-destructive-disabled-foreground: var(--red-soft-300);
   --border: oklch(var(--fill-tint) 0 0 / 9%);
   --border-strong: oklch(var(--fill-tint) 0 0 / 19%);
   --border-hover: oklch(var(--fill-tint) 0 0 / 25%);
@@ -12453,6 +12785,7 @@ html.light {
 html.light {
   --fill-tint: 20.5%;
   --fill-destructive-disabled: var(--red-300);
+  --fill-destructive-disabled-foreground: var(--red-50);
   --border-focus: oklch(var(--fill-tint) 0 0 / 50%);
   --surface-panel: oklch(94.42% 0 0);
   --scrim: oklch(20.8% 0 0 / .45);
@@ -12501,7 +12834,7 @@ html.light {
 .cm-editor {
   --syntax-string: var(--green-300);
   --syntax-keyword: var(--red-400);
-  --syntax-literal: var(--yellow-300);
+  --syntax-literal: var(--amber-300);
   --syntax-name: var(--cyan-300);
   --syntax-link: var(--blue-400);
 }
@@ -12509,7 +12842,7 @@ html.light {
 html.light .cm-editor {
   --syntax-string: var(--green-700);
   --syntax-keyword: var(--red-600);
-  --syntax-literal: var(--yellow-800);
+  --syntax-literal: var(--amber-800);
   --syntax-name: var(--cyan-800);
   --syntax-link: var(--blue-600);
 }