@tangle-network/sandbox-ui 0.123.2 → 0.124.0

package/dist/styles.css

@@ -732,6 +732,14 @@
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
   }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
+  .size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
   .size-9 {
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
@@ -740,6 +748,10 @@
     width: calc(var(--spacing) * 10);
     height: calc(var(--spacing) * 10);
   }
+  .size-full {
+    width: 100%;
+    height: 100%;
+  }
   .\!h-2 {
     height: calc(var(--spacing) * 2) !important;
   }
@@ -989,6 +1001,9 @@
   .min-h-0 {
     min-height: 0px;
   }
+  .min-h-6 {
+    min-height: calc(var(--spacing) * 6);
+  }
   .min-h-8 {
     min-height: calc(var(--spacing) * 8);
   }
@@ -1367,6 +1382,9 @@
   .max-w-\[140px\] {
     max-width: 140px;
   }
+  .max-w-\[220px\] {
+    max-width: 220px;
+  }
   .max-w-\[320px\] {
     max-width: 320px;
   }
@@ -1932,6 +1950,9 @@
     border-top-width: calc(1px * var(--tw-divide-y-reverse));
     border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   }
+  :where(.divide-\[var\(--border-subtle\)\] > :not(:last-child)) {
+    border-color: var(--border-subtle);
+  }
   :where(.divide-\[var\(--md3-outline-variant\)\] > :not(:last-child)) {
     border-color: var(--md3-outline-variant);
   }
@@ -1991,6 +2012,9 @@
   .rounded-\[4px\] {
     border-radius: 4px;
   }
+  .rounded-\[5px\] {
+    border-radius: 5px;
+  }
   .rounded-\[20px\] {
     border-radius: 20px;
   }
@@ -2144,6 +2168,9 @@
   .border-\[var\(--border-accent\,transparent\)\] {
     border-color: var(--border-accent,transparent);
   }
+  .border-\[var\(--border-default\)\] {
+    border-color: var(--border-default);
+  }
   .border-\[var\(--border-subtle\)\] {
     border-color: var(--border-subtle);
   }
@@ -2204,15 +2231,60 @@
   .border-\[var\(--surface-success-border\)\] {
     border-color: var(--surface-success-border);
   }
-  .border-\[var\(--surface-teal-border\)\] {
-    border-color: var(--surface-teal-border);
-  }
-  .border-\[var\(--surface-violet-border\)\] {
-    border-color: var(--surface-violet-border);
-  }
   .border-\[var\(--surface-warning-border\)\] {
     border-color: var(--surface-warning-border);
   }
+  .border-\[var\(--text-dim\)\] {
+    border-color: var(--text-dim);
+  }
+  .border-\[var\(--tone-blue-border\)\] {
+    border-color: var(--tone-blue-border);
+  }
+  .border-\[var\(--tone-blue-border-selected\)\] {
+    border-color: var(--tone-blue-border-selected);
+  }
+  .border-\[var\(--tone-brown-border\)\] {
+    border-color: var(--tone-brown-border);
+  }
+  .border-\[var\(--tone-brown-border-selected\)\] {
+    border-color: var(--tone-brown-border-selected);
+  }
+  .border-\[var\(--tone-cyan-border\)\] {
+    border-color: var(--tone-cyan-border);
+  }
+  .border-\[var\(--tone-cyan-border-selected\)\] {
+    border-color: var(--tone-cyan-border-selected);
+  }
+  .border-\[var\(--tone-lime-border\)\] {
+    border-color: var(--tone-lime-border);
+  }
+  .border-\[var\(--tone-lime-border-selected\)\] {
+    border-color: var(--tone-lime-border-selected);
+  }
+  .border-\[var\(--tone-orange-border\)\] {
+    border-color: var(--tone-orange-border);
+  }
+  .border-\[var\(--tone-orange-border-selected\)\] {
+    border-color: var(--tone-orange-border-selected);
+  }
+  .border-\[var\(--tone-pink-border\)\] {
+    border-color: var(--tone-pink-border);
+  }
+  .border-\[var\(--tone-pink-border-selected\)\] {
+    border-color: var(--tone-pink-border-selected);
+  }
+  .border-\[var\(--tone-teal-border\)\] {
+    border-color: var(--tone-teal-border);
+  }
+  .border-\[var\(--tone-teal-border-selected\)\] {
+    border-color: var(--tone-teal-border-selected);
+  }
+  .border-\[var\(--tone-violet-border\)\] {
+    border-color: var(--tone-violet-border);
+  }
+  .border-\[var\(--tone-violet-border-selected\)\] {
+    border-color: var(--tone-violet-border-selected);
+  }
   .border-background {
     border-color: hsl(var(--background));
   }
@@ -2360,6 +2432,12 @@
       background-color: color-mix(in oklch,var(--color-warning,orange) 18%,transparent);
     }
   }
+  .bg-\[color-mix\(in_srgb\,var\(--surface-neutral-bg\)\,var\(--text-primary\)_12\%\)\] {
+    background-color: var(--surface-neutral-bg);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--surface-neutral-bg),var(--text-primary) 12%);
+    }
+  }
   .bg-\[color\:color-mix\(in_srgb\,var\(--bg-card\)_94\%\,transparent\)\] {
     background-color: var(--bg-card);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2375,6 +2453,9 @@
   .bg-\[var\(--accent-surface-strong\)\] {
     background-color: var(--accent-surface-strong);
   }
+  .bg-\[var\(--bg-card\)\] {
+    background-color: var(--bg-card);
+  }
   .bg-\[var\(--bg-input\)\] {
     background-color: var(--bg-input);
   }
@@ -2483,9 +2564,6 @@
   .bg-\[var\(--surface-success-text\)\] {
     background-color: var(--surface-success-text);
   }
-  .bg-\[var\(--surface-teal-bg\)\] {
-    background-color: var(--surface-teal-bg);
-  }
   .bg-\[var\(--surface-violet-bg\)\] {
     background-color: var(--surface-violet-bg);
   }
@@ -2495,6 +2573,54 @@
   .bg-\[var\(--surface-warning-text\)\] {
     background-color: var(--surface-warning-text);
   }
+  .bg-\[var\(--tone-blue-bg\)\] {
+    background-color: var(--tone-blue-bg);
+  }
+  .bg-\[var\(--tone-blue-bg-selected\)\] {
+    background-color: var(--tone-blue-bg-selected);
+  }
+  .bg-\[var\(--tone-brown-bg\)\] {
+    background-color: var(--tone-brown-bg);
+  }
+  .bg-\[var\(--tone-brown-bg-selected\)\] {
+    background-color: var(--tone-brown-bg-selected);
+  }
+  .bg-\[var\(--tone-cyan-bg\)\] {
+    background-color: var(--tone-cyan-bg);
+  }
+  .bg-\[var\(--tone-cyan-bg-selected\)\] {
+    background-color: var(--tone-cyan-bg-selected);
+  }
+  .bg-\[var\(--tone-lime-bg\)\] {
+    background-color: var(--tone-lime-bg);
+  }
+  .bg-\[var\(--tone-lime-bg-selected\)\] {
+    background-color: var(--tone-lime-bg-selected);
+  }
+  .bg-\[var\(--tone-orange-bg\)\] {
+    background-color: var(--tone-orange-bg);
+  }
+  .bg-\[var\(--tone-orange-bg-selected\)\] {
+    background-color: var(--tone-orange-bg-selected);
+  }
+  .bg-\[var\(--tone-pink-bg\)\] {
+    background-color: var(--tone-pink-bg);
+  }
+  .bg-\[var\(--tone-pink-bg-selected\)\] {
+    background-color: var(--tone-pink-bg-selected);
+  }
+  .bg-\[var\(--tone-teal-bg\)\] {
+    background-color: var(--tone-teal-bg);
+  }
+  .bg-\[var\(--tone-teal-bg-selected\)\] {
+    background-color: var(--tone-teal-bg-selected);
+  }
+  .bg-\[var\(--tone-violet-bg\)\] {
+    background-color: var(--tone-violet-bg);
+  }
+  .bg-\[var\(--tone-violet-bg-selected\)\] {
+    background-color: var(--tone-violet-bg-selected);
+  }
   .bg-accent {
     background-color: hsl(var(--accent));
   }
@@ -3037,6 +3163,9 @@
   .pt-12 {
     padding-top: calc(var(--spacing) * 12);
   }
+  .pr-0\.5 {
+    padding-right: calc(var(--spacing) * 0.5);
+  }
   .pr-1 {
     padding-right: var(--spacing);
   }
@@ -3523,6 +3652,54 @@
   .text-\[var\(--text-secondary\)\] {
     color: var(--text-secondary);
   }
+  .text-\[var\(--tone-blue-icon\)\] {
+    color: var(--tone-blue-icon);
+  }
+  .text-\[var\(--tone-blue-text\)\] {
+    color: var(--tone-blue-text);
+  }
+  .text-\[var\(--tone-brown-icon\)\] {
+    color: var(--tone-brown-icon);
+  }
+  .text-\[var\(--tone-brown-text\)\] {
+    color: var(--tone-brown-text);
+  }
+  .text-\[var\(--tone-cyan-icon\)\] {
+    color: var(--tone-cyan-icon);
+  }
+  .text-\[var\(--tone-cyan-text\)\] {
+    color: var(--tone-cyan-text);
+  }
+  .text-\[var\(--tone-lime-icon\)\] {
+    color: var(--tone-lime-icon);
+  }
+  .text-\[var\(--tone-lime-text\)\] {
+    color: var(--tone-lime-text);
+  }
+  .text-\[var\(--tone-orange-icon\)\] {
+    color: var(--tone-orange-icon);
+  }
+  .text-\[var\(--tone-orange-text\)\] {
+    color: var(--tone-orange-text);
+  }
+  .text-\[var\(--tone-pink-icon\)\] {
+    color: var(--tone-pink-icon);
+  }
+  .text-\[var\(--tone-pink-text\)\] {
+    color: var(--tone-pink-text);
+  }
+  .text-\[var\(--tone-teal-icon\)\] {
+    color: var(--tone-teal-icon);
+  }
+  .text-\[var\(--tone-teal-text\)\] {
+    color: var(--tone-teal-text);
+  }
+  .text-\[var\(--tone-violet-icon\)\] {
+    color: var(--tone-violet-icon);
+  }
+  .text-\[var\(--tone-violet-text\)\] {
+    color: var(--tone-violet-text);
+  }
   .text-\[var\(--x\)\] {
     color: var(--x);
   }
@@ -3897,6 +4074,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[background-color\,border-color\,color\] {
+    transition-property: background-color,border-color,color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[background-color\,box-shadow\] {
     transition-property: background-color,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3922,6 +4104,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[opacity\,background-color\] {
+    transition-property: opacity,background-color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[opacity\,box-shadow\] {
     transition-property: opacity,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -4103,6 +4290,26 @@
   .placeholder\:text-muted-foreground::placeholder {
     color: hsl(var(--muted-foreground));
   }
+  .before\:absolute::before {
+    content: var(--tw-content);
+    position: absolute;
+  }
+  .before\:-inset-1\.5::before {
+    content: var(--tw-content);
+    inset: calc(var(--spacing) * -1.5);
+  }
+  .before\:inset-x-0::before {
+    content: var(--tw-content);
+    inset-inline: 0px;
+  }
+  .before\:-inset-y-1::before {
+    content: var(--tw-content);
+    inset-block: calc(var(--spacing) * -1);
+  }
+  .before\:content-\[\'\'\]::before {
+    --tw-content: '';
+    content: var(--tw-content);
+  }
   .after\:absolute::after {
     content: var(--tw-content);
     position: absolute;
@@ -4242,6 +4449,22 @@
     .hover\:\!bg-primary:hover {
       background-color: hsl(var(--primary)) !important;
     }
+    .hover\:bg-\[color-mix\(in_srgb\,currentColor_14\%\,transparent\)\]:hover {
+      background-color: currentColor;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-\[color-mix\(in_srgb\,currentColor_14\%\,transparent\)\]:hover {
+        background-color: color-mix(in srgb,currentColor 14%,transparent);
+      }
+    }
+    .hover\:bg-\[color-mix\(in_srgb\,var\(--surface-neutral-bg\)\,var\(--text-primary\)_6\%\)\]:hover {
+      background-color: var(--surface-neutral-bg);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-\[color-mix\(in_srgb\,var\(--surface-neutral-bg\)\,var\(--text-primary\)_6\%\)\]:hover {
+        background-color: color-mix(in srgb,var(--surface-neutral-bg),var(--text-primary) 6%);
+      }
+    }
     .hover\:bg-\[var\(--accent-surface-soft\)\]:hover {
       background-color: var(--accent-surface-soft);
     }
@@ -4274,6 +4497,30 @@
     .hover\:bg-\[var\(--surface-success-border\)\]:hover {
       background-color: var(--surface-success-border);
     }
+    .hover\:bg-\[var\(--tone-blue-bg-hover\)\]:hover {
+      background-color: var(--tone-blue-bg-hover);
+    }
+    .hover\:bg-\[var\(--tone-brown-bg-hover\)\]:hover {
+      background-color: var(--tone-brown-bg-hover);
+    }
+    .hover\:bg-\[var\(--tone-cyan-bg-hover\)\]:hover {
+      background-color: var(--tone-cyan-bg-hover);
+    }
+    .hover\:bg-\[var\(--tone-lime-bg-hover\)\]:hover {
+      background-color: var(--tone-lime-bg-hover);
+    }
+    .hover\:bg-\[var\(--tone-orange-bg-hover\)\]:hover {
+      background-color: var(--tone-orange-bg-hover);
+    }
+    .hover\:bg-\[var\(--tone-pink-bg-hover\)\]:hover {
+      background-color: var(--tone-pink-bg-hover);
+    }
+    .hover\:bg-\[var\(--tone-teal-bg-hover\)\]:hover {
+      background-color: var(--tone-teal-bg-hover);
+    }
+    .hover\:bg-\[var\(--tone-violet-bg-hover\)\]:hover {
+      background-color: var(--tone-violet-bg-hover);
+    }
     .hover\:bg-accent:hover {
       background-color: hsl(var(--accent));
     }
@@ -4890,9 +5137,15 @@
     }
   }
   @media (width < 40rem) {
+    .max-sm\:order-last {
+      order: 9999;
+    }
     .max-sm\:col-span-2 {
       grid-column: span 2 / span 2;
     }
+    .max-sm\:basis-full {
+      flex-basis: 100%;
+    }
     .max-sm\:border-b {
       border-bottom-style: var(--tw-border-style);
       border-bottom-width: 1px;
@@ -4905,6 +5158,9 @@
       border-left-style: var(--tw-border-style) !important;
       border-left-width: 0px !important;
     }
+    .max-sm\:pl-4 {
+      padding-left: calc(var(--spacing) * 4);
+    }
   }
   @media (width >= 40rem) {
     .sm\:col-span-1 {
@@ -4961,6 +5217,9 @@
     .sm\:flex-row {
       flex-direction: row;
     }
+    .sm\:flex-nowrap {
+      flex-wrap: nowrap;
+    }
     .sm\:flex-wrap {
       flex-wrap: wrap;
     }
@@ -5104,6 +5363,9 @@
     .lg\:flex-1 {
       flex: 1;
     }
+    .lg\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
     .lg\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
@@ -5201,6 +5463,12 @@
       }
     }
   }
+  @media (pointer: coarse) {
+    .pointer-coarse\:before\:-inset-y-2\.5::before {
+      content: var(--tw-content);
+      inset-block: calc(var(--spacing) * -2.5);
+    }
+  }
   .\[\&_\[role\=menuitem\]\]\:min-h-10 [role=menuitem] {
     min-height: calc(var(--spacing) * 10);
   }
@@ -5252,10 +5520,22 @@
   .\[\&_svg\]\:pointer-events-none svg {
     pointer-events: none;
   }
+  .\[\&_svg\]\:size-3 svg {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
+  .\[\&_svg\]\:size-3\.5 svg {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
   .\[\&_svg\]\:size-4 svg {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .\[\&_svg\]\:size-5 svg {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
   .\[\&_svg\]\:h-3\.5 svg {
     height: calc(var(--spacing) * 3.5);
   }
@@ -5598,15 +5878,71 @@
   --surface-info-bg: #2d4e67;
   --surface-info-border: #3d7292;
   --surface-info-text: #67cdff;
-  --surface-teal-bg: #042f2e;
-  --surface-teal-border: #134e4a;
-  --surface-teal-text: #2dd4bf;
-  --surface-violet-bg: #403d66;
-  --surface-violet-border: #5f58b8;
-  --surface-violet-text: #c9c4ff;
-  --surface-orange-bg: #431407;
-  --surface-orange-border: #7c2d12;
-  --surface-orange-text: #fb923c;
+  --tone-violet-bg: #4e3a60;
+  --tone-violet-bg-hover: #583d71;
+  --tone-violet-bg-selected: #624080;
+  --tone-violet-border: #8457aa;
+  --tone-violet-border-selected: #d19dff;
+  --tone-violet-text: #ecd9fa;
+  --tone-violet-icon: #d19dff;
+  --tone-orange-bg: #583c2b;
+  --tone-orange-bg-hover: #664029;
+  --tone-orange-bg-selected: #724327;
+  --tone-orange-border: #a35829;
+  --tone-orange-border-selected: #ff801f;
+  --tone-orange-text: #ffe0c2;
+  --tone-orange-icon: #ff801f;
+  --tone-teal-bg: #2a4744;
+  --tone-teal-bg-hover: #28504b;
+  --tone-teal-bg-selected: #265751;
+  --tone-teal-border: #207e73;
+  --tone-teal-border-selected: #0eb39e;
+  --tone-teal-text: #adf0dd;
+  --tone-teal-icon: #0eb39e;
+  --tone-blue-bg: #25455e;
+  --tone-blue-bg-hover: #224c6c;
+  --tone-blue-bg-selected: #1f537b;
+  --tone-blue-border: #2870bd;
+  --tone-blue-border-selected: #70b8ff;
+  --tone-blue-text: #c2e6ff;
+  --tone-blue-icon: #70b8ff;
+  --tone-pink-bg: #5e344f;
+  --tone-pink-bg-hover: #6d3659;
+  --tone-pink-bg-selected: #7b3762;
+  --tone-pink-border: #a84885;
+  --tone-pink-border-selected: #ff8dcc;
+  --tone-pink-text: #fdd1ea;
+  --tone-pink-icon: #ff8dcc;
+  --tone-brown-bg: #494038;
+  --tone-brown-bg-hover: #54473c;
+  --tone-brown-bg-selected: #5c4c3e;
+  --tone-brown-border: #7c5f46;
+  --tone-brown-border-selected: #dbb594;
+  --tone-brown-text: #f2e1ca;
+  --tone-brown-icon: #dbb594;
+  --tone-cyan-bg: #27464d;
+  --tone-cyan-bg-hover: #234f59;
+  --tone-cyan-bg-selected: #205662;
+  --tone-cyan-border: #11809c;
+  --tone-cyan-border-selected: #23afd0;
+  --tone-cyan-text: #b6ecf7;
+  --tone-cyan-icon: #23afd0;
+  --tone-lime-bg: #404536;
+  --tone-lime-bg-hover: #444b37;
+  --tone-lime-bg-selected: #495239;
+  --tone-lime-border: #577538;
+  --tone-lime-border-selected: #bdee63;
+  --tone-lime-text: #e3f7ba;
+  --tone-lime-icon: #bdee63;
+  --surface-violet-bg: #4e3a60;
+  --surface-violet-border: #8457aa;
+  --surface-violet-text: #d19dff;
+  --surface-orange-bg: #583c2b;
+  --surface-orange-border: #a35829;
+  --surface-orange-text: #ffa057;
+  --surface-teal-bg: #2a4744;
+  --surface-teal-border: #207e73;
+  --surface-teal-text: #0bd8b6;
   --run-mix-succeeded: #76edb9;
   --run-mix-waiting: #e9b642;
   --run-mix-failed: #e1918e;
@@ -5862,15 +6198,71 @@
   --surface-info-bg: #f0f9ff;
   --surface-info-border: #bae6fd;
   --surface-info-text: #0369a1;
-  --surface-teal-bg: #f0fdfa;
-  --surface-teal-border: #99f6e4;
-  --surface-teal-text: #0f766e;
-  --surface-violet-bg: #F0EEFF;
-  --surface-violet-border: #C5C0F0;
-  --surface-violet-text: #3E349E;
-  --surface-orange-bg: #fff7ed;
-  --surface-orange-border: #fed7aa;
-  --surface-orange-text: #c2410c;
+  --tone-violet-bg: #f7edfe;
+  --tone-violet-bg-hover: #f2e2fc;
+  --tone-violet-bg-selected: #ead5f9;
+  --tone-violet-border: #e0c4f4;
+  --tone-violet-border-selected: #8e4ec6;
+  --tone-violet-text: #402060;
+  --tone-violet-icon: #8e4ec6;
+  --tone-orange-bg: #ffefd6;
+  --tone-orange-bg-hover: #ffdfb5;
+  --tone-orange-bg-selected: #ffd19a;
+  --tone-orange-border: #ffc182;
+  --tone-orange-border-selected: #cc4e00;
+  --tone-orange-text: #582d1d;
+  --tone-orange-icon: #cc4e00;
+  --tone-teal-bg: #e0f8f3;
+  --tone-teal-bg-hover: #ccf3ea;
+  --tone-teal-bg-selected: #b8eae0;
+  --tone-teal-border: #a1ded2;
+  --tone-teal-border-selected: #008573;
+  --tone-teal-text: #0d3d38;
+  --tone-teal-icon: #008573;
+  --tone-blue-bg: #e6f4fe;
+  --tone-blue-bg-hover: #d5efff;
+  --tone-blue-bg-selected: #c2e5ff;
+  --tone-blue-border: #acd8fc;
+  --tone-blue-border-selected: #0d74ce;
+  --tone-blue-text: #113264;
+  --tone-blue-icon: #0d74ce;
+  --tone-pink-bg: #fee9f5;
+  --tone-pink-bg-hover: #fbdcef;
+  --tone-pink-bg-selected: #f6cee7;
+  --tone-pink-border: #efbfdd;
+  --tone-pink-border-selected: #cf3897;
+  --tone-pink-text: #651249;
+  --tone-pink-icon: #cf3897;
+  --tone-brown-bg: #f6eee7;
+  --tone-brown-bg-hover: #f0e4d9;
+  --tone-brown-bg-selected: #ebdaca;
+  --tone-brown-border: #e4cdb7;
+  --tone-brown-border-selected: #815e46;
+  --tone-brown-text: #3e332e;
+  --tone-brown-icon: #815e46;
+  --tone-cyan-bg: #def7f9;
+  --tone-cyan-bg-hover: #caf1f6;
+  --tone-cyan-bg-selected: #b5e9f0;
+  --tone-cyan-border: #9ddde7;
+  --tone-cyan-border-selected: #107d98;
+  --tone-cyan-text: #0d3c48;
+  --tone-cyan-icon: #107d98;
+  --tone-lime-bg: #eef6d6;
+  --tone-lime-bg-hover: #e2f0bd;
+  --tone-lime-bg-selected: #d3e7a6;
+  --tone-lime-border: #c2da91;
+  --tone-lime-border-selected: #5c7c2f;
+  --tone-lime-text: #37401c;
+  --tone-lime-icon: #5c7c2f;
+  --surface-violet-bg: #f7edfe;
+  --surface-violet-border: #e0c4f4;
+  --surface-violet-text: #8145b5;
+  --surface-orange-bg: #ffefd6;
+  --surface-orange-border: #ffc182;
+  --surface-orange-text: #bc4904;
+  --surface-teal-bg: #e0f8f3;
+  --surface-teal-border: #a1ded2;
+  --surface-teal-text: #017d6d;
   --run-mix-succeeded: #3c9b78;
   --run-mix-waiting: #c16227;
   --run-mix-failed: #cd342f;