@tangle-network/sandbox-ui 0.77.0 → 0.80.0

package/dist/styles.css

@@ -3185,6 +3185,12 @@
   .text-\[var\(--status-error\,\#ff4d6d\)\] {
     color: var(--status-error,#ff4d6d);
   }
+  .text-\[var\(--status-error\,\#ff4d6d\)\]\/80 {
+    color: var(--status-error,#ff4d6d);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--status-error,#ff4d6d) 80%, transparent);
+    }
+  }
   .text-\[var\(--surface-danger-text\)\] {
     color: var(--surface-danger-text);
   }
@@ -5333,15 +5339,15 @@
 [data-sandbox-ui],
 [data-theme="dark"],
 .dark {
-  --md3-surface: #16161f;
-  --md3-surface-dim: #111119;
-  --md3-surface-bright: #2a2940;
-  --md3-surface-container-lowest: #101017;
-  --md3-surface-container-low: #16161f;
-  --md3-surface-container: #1c1b27;
-  --md3-surface-container-high: #232231;
-  --md3-surface-container-highest: #2c2b3d;
-  --md3-surface-variant: #2c2b3d;
+  --md3-surface: #0a0a14;
+  --md3-surface-dim: #060610;
+  --md3-surface-bright: #232238;
+  --md3-surface-container-lowest: #050509;
+  --md3-surface-container-low: #12111f;
+  --md3-surface-container: #191826;
+  --md3-surface-container-high: #221f33;
+  --md3-surface-container-highest: #2c2942;
+  --md3-surface-variant: #2c2942;
   --md3-on-surface: #fdfdfd;
   --md3-on-surface-variant: #aaa8b8;
   --md3-primary: #818CF8;
@@ -5358,7 +5364,7 @@
   --md3-on-secondary-container: #E8E5FF;
   --md3-tertiary: #10B981;
   --md3-outline: #4a4965;
-  --md3-outline-variant: #34324a;
+  --md3-outline-variant: #2a293d;
   --md3-error: #ff5277;
   --md3-error-dim: #eb2855;
   --md3-error-container: #82042b;
@@ -5368,24 +5374,24 @@
   --md3-inverse-primary: #4F46E5;
   --md3-inverse-on-surface: #000000;
   --md3-surface-tint: #818CF8;
-  --hsl-background: 240 7% 9%;
+  --hsl-background: 240 33% 6%;
   --hsl-foreground: 240 6% 93%;
-  --hsl-card: 240 5% 13%;
+  --hsl-card: 244 23% 12%;
   --hsl-card-foreground: 240 6% 93%;
-  --hsl-popover: 240 5% 17%;
+  --hsl-popover: 247 23% 21%;
   --hsl-popover-foreground: 240 6% 93%;
   --hsl-primary: 239 84% 62%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 240 5% 15%;
+  --hsl-secondary: 249 24% 16%;
   --hsl-secondary-foreground: 240 6% 93%;
-  --hsl-muted: 240 5% 15%;
-  --hsl-muted-foreground: 240 4% 64%;
-  --hsl-accent: 240 5% 15%;
+  --hsl-muted: 249 24% 16%;
+  --hsl-muted-foreground: 240 5% 68%;
+  --hsl-accent: 249 24% 16%;
   --hsl-accent-foreground: 240 6% 93%;
   --hsl-destructive: 348 74% 48%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 240 5% 16%;
-  --hsl-input: 240 5% 15%;
+  --hsl-border: 243 19.6% 20%;
+  --hsl-input: 244 29% 9%;
   --hsl-ring: 239 84% 67%;
   --hsl-success: 160 84% 39%;
   --hsl-warning: 40 94% 56%;
@@ -5413,18 +5419,18 @@
   --warning: var(--hsl-warning);
   --error: var(--hsl-destructive);
   --info: var(--hsl-info);
-  --sidebar-background: 240 6% 11%;
+  --sidebar-background: 244 29% 9%;
   --sidebar-foreground: 240 6% 93%;
   --sidebar-primary: 239 84% 67%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 5% 15%;
+  --sidebar-accent: 249 24% 16%;
   --sidebar-accent-foreground: 240 6% 93%;
-  --sidebar-border: 240 5% 16%;
+  --sidebar-border: 243 19.6% 20%;
   --sidebar-ring: 239 84% 67%;
-  --depth-1: #15151a;
-  --depth-2: #1f1f23;
-  --depth-3: #26262b;
-  --depth-4: #2e2e34;
+  --depth-1: #0a0a14;
+  --depth-2: #191826;
+  --depth-3: #221f33;
+  --depth-4: #2c2942;
   --status-running: #10B981;
   --status-creating: #9B93F0;
   --status-stopped: #FFB800;
@@ -5470,12 +5476,12 @@
   --accent-surface-soft: rgba(255, 255, 255, 0.04);
   --accent-surface-strong: rgba(129, 140, 248, 0.14);
   --accent-text: #b9bffb;
-  --bg-root: #15151a;
+  --bg-root: #0a0a14;
   --bg-dark: var(--depth-1);
   --bg-card: var(--depth-2);
   --bg-elevated: var(--depth-4);
   --bg-section: var(--depth-1);
-  --bg-input: var(--depth-3);
+  --bg-input: hsl(var(--hsl-input));
   --bg-hover: rgba(255, 255, 255, 0.04);
   --bg-selection: rgba(129, 140, 248, 0.14);
   --text-primary: #ececee;
@@ -5578,15 +5584,15 @@
 [data-sandbox-theme="vault"],
 [data-theme="light"],
 .light {
-  --md3-surface: #f8f9fb;
-  --md3-surface-dim: #d9dae0;
-  --md3-surface-bright: #f8f9fb;
+  --md3-surface: #eceef3;
+  --md3-surface-dim: #dcdee6;
+  --md3-surface-bright: #ffffff;
   --md3-surface-container-lowest: #ffffff;
-  --md3-surface-container-low: #f3f4f7;
-  --md3-surface-container: #edeef2;
-  --md3-surface-container-high: #e7e8ed;
-  --md3-surface-container-highest: #e1e2e8;
-  --md3-surface-variant: #e1e2e8;
+  --md3-surface-container-low: #f6f7fa;
+  --md3-surface-container: #ffffff;
+  --md3-surface-container-high: #f1f2f7;
+  --md3-surface-container-highest: #ffffff;
+  --md3-surface-variant: #f1f2f7;
   --md3-on-surface: #191c24;
   --md3-on-surface-variant: #464858;
   --md3-primary: #3E349E;
@@ -5614,32 +5620,32 @@
   --md3-inverse-primary: #A5AAFC;
   --md3-inverse-on-surface: #f0f1f4;
   --md3-surface-tint: #6366F1;
-  --hsl-background: 0 0% 100%;
+  --hsl-background: 223 23% 94%;
   --hsl-foreground: 0 0% 5%;
-  --hsl-card: 240 7% 97%;
+  --hsl-card: 0 0% 100%;
   --hsl-card-foreground: 0 0% 5%;
   --hsl-popover: 0 0% 100%;
   --hsl-popover-foreground: 0 0% 5%;
   --hsl-primary: 245 62% 57%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 240 6% 93%;
+  --hsl-secondary: 230 27% 96%;
   --hsl-secondary-foreground: 0 0% 10%;
-  --hsl-muted: 240 6% 93%;
+  --hsl-muted: 230 27% 96%;
   --hsl-muted-foreground: 240 5% 38%;
-  --hsl-accent: 240 6% 93%;
+  --hsl-accent: 230 27% 96%;
   --hsl-accent-foreground: 0 0% 10%;
   --hsl-destructive: 0 72% 41%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 240 6% 89%;
-  --hsl-input: 240 6% 89%;
+  --hsl-border: 244 16.3% 80.8%;
+  --hsl-input: 225 29% 97%;
   --hsl-ring: 245 62% 57%;
   --hsl-success: 160 84% 30%;
   --hsl-warning: 41 96% 50%;
   --hsl-info: 212 80% 50%;
-  --depth-1: #ffffff;
-  --depth-2: #f7f7f8;
-  --depth-3: #ececee;
-  --depth-4: #e3e3e6;
+  --depth-1: #eceef3;
+  --depth-2: #ffffff;
+  --depth-3: #f1f2f7;
+  --depth-4: #ffffff;
   --status-running: #059669;
   --status-creating: #3E349E;
   --status-stopped: #B45309;
@@ -5675,23 +5681,23 @@
   --surface-neutral-bg: var(--depth-3);
   --surface-neutral-border: var(--border-subtle);
   --surface-neutral-text: var(--text-muted);
-  --sidebar-background: 240 7% 97%;
+  --sidebar-background: 0 0% 100%;
   --sidebar-foreground: 0 0% 5%;
   --sidebar-primary: 245 62% 57%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 6% 93%;
+  --sidebar-accent: 230 27% 96%;
   --sidebar-accent-foreground: 0 0% 10%;
-  --sidebar-border: 240 6% 89%;
+  --sidebar-border: 244 16.3% 80.8%;
   --sidebar-ring: 245 62% 57%;
   --mesh-teal: transparent;
   --mesh-violet: transparent;
   --mesh-blue: transparent;
-  --bg-root: #ffffff;
-  --bg-dark: #f7f7f8;
-  --bg-card: #f7f7f8;
-  --bg-elevated: #ffffff;
-  --bg-section: #f7f7f8;
-  --bg-input: #ececee;
+  --bg-root: #eceef3;
+  --bg-dark: var(--depth-1);
+  --bg-card: var(--depth-2);
+  --bg-elevated: var(--depth-4);
+  --bg-section: var(--depth-1);
+  --bg-input: hsl(var(--hsl-input));
   --bg-hover: rgba(0, 0, 0, 0.04);
   --bg-selection: rgba(91, 78, 212, 0.10);
   --text-primary: #0d0d0d;
@@ -5747,6 +5753,305 @@
   --radius-full: 999px;
   --radius-composer: 26px;
 }
+[data-theme] {
+  --color-background: hsl(var(--hsl-background));
+  --color-foreground: hsl(var(--hsl-foreground));
+  --color-card: hsl(var(--hsl-card));
+  --color-card-foreground: hsl(var(--hsl-card-foreground));
+  --color-popover: hsl(var(--hsl-popover));
+  --color-popover-foreground: hsl(var(--hsl-popover-foreground));
+  --color-primary: hsl(var(--hsl-primary));
+  --color-primary-foreground: hsl(var(--hsl-primary-foreground));
+  --color-secondary: hsl(var(--hsl-secondary));
+  --color-secondary-foreground: hsl(var(--hsl-secondary-foreground));
+  --color-muted: hsl(var(--hsl-muted));
+  --color-muted-foreground: hsl(var(--hsl-muted-foreground));
+  --color-accent: hsl(var(--hsl-accent));
+  --color-accent-foreground: hsl(var(--hsl-accent-foreground));
+  --color-destructive: hsl(var(--hsl-destructive));
+  --color-destructive-foreground: hsl(var(--hsl-destructive-foreground));
+  --color-border: hsl(var(--hsl-border));
+  --color-input: hsl(var(--hsl-muted-foreground));
+  --color-ring: hsl(var(--hsl-ring));
+  --color-surface-container-lowest: var(--md3-surface-container-lowest);
+  --color-surface-container-low: var(--md3-surface-container-low);
+  --color-surface-container: var(--md3-surface-container);
+  --color-surface-container-high: var(--md3-surface-container-high);
+  --color-surface-container-highest: var(--md3-surface-container-highest);
+  --color-fg: var(--text-primary);
+  --color-fg-muted: var(--text-muted);
+  --color-fg-dim: var(--text-dim);
+}
+[data-theme="aubergine-light"],
+[data-theme="arena-light"],
+[data-theme="tangle-light"] {
+  --surface-success-bg: #ecfdf5;
+  --surface-success-border: #a7f3d0;
+  --surface-success-text: #047857;
+  --surface-warning-bg: #fffbeb;
+  --surface-warning-border: #fde68a;
+  --surface-warning-text: #b45309;
+  --surface-danger-bg: #fff1f2;
+  --surface-danger-border: #fecdd3;
+  --surface-danger-text: #b91c1c;
+  --surface-info-bg: #f0f9ff;
+  --surface-info-border: #bae6fd;
+  --surface-info-text: #0369a1;
+  --hsl-destructive: 0 72% 41%;
+  --hsl-destructive-foreground: 0 0% 100%;
+  --hsl-secondary-foreground: 0 0% 10%;
+  --surface-neutral-text: #4b5563;
+}
+[data-theme="light"],
+[data-theme="aubergine-light"],
+[data-theme="arena-light"],
+[data-theme="tangle-light"] {
+  --syntax-foreground: #24292f;
+  --syntax-comment: #57606a;
+  --syntax-keyword: #6d28d9;
+  --syntax-string: #047857;
+  --syntax-function: #1d4ed8;
+  --syntax-number: #92400e;
+  --syntax-meta: #7c3aed;
+  --syntax-variable: #24292f;
+  --syntax-error: #b91c1c;
+}
+[data-theme="aubergine"] {
+  --hsl-background: 258 44% 12%;
+  --hsl-foreground: 258 50% 97%;
+  --hsl-card: 258 40% 20%;
+  --hsl-card-foreground: 258 50% 97%;
+  --hsl-popover: 258 40% 24%;
+  --hsl-popover-foreground: 258 50% 97%;
+  --hsl-primary: 250 100% 76%;
+  --hsl-primary-foreground: 258 45% 10%;
+  --hsl-secondary: 258 38% 17%;
+  --hsl-muted: 258 38% 17%;
+  --hsl-muted-foreground: 258 26% 70%;
+  --hsl-accent: 258 40% 24%;
+  --hsl-border: 258 32% 30%;
+  --hsl-input: 258 38% 17%;
+  --hsl-ring: 250 100% 76%;
+  --depth-1: #1a1230;
+  --depth-2: #241a42;
+  --depth-3: #2f2253;
+  --depth-4: #3d2d68;
+  --bg-root: #1a1230;
+  --bg-card: var(--depth-3);
+  --bg-input: var(--depth-2);
+  --md3-surface-container-lowest: #150e28;
+  --md3-surface-container-low: #241a42;
+  --md3-surface-container: #2a1f4c;
+  --md3-surface-container-high: #2f2253;
+  --md3-surface-container-highest: #3d2d68;
+  --md3-outline-variant: #463571;
+  --border-subtle: rgba(183,157,255,0.12);
+  --border-default: rgba(183,157,255,0.22);
+  --border-hover: rgba(183,157,255,0.40);
+  --accent-text: #c4b0ff;
+  --brand-primary: #8f8bff;
+  --brand-glow: #c4b0ff;
+  --text-primary: #f4f1fd;
+  --text-secondary: #cec4e8;
+  --text-muted: #a99fc8;
+  --text-dim: #786d99;
+}
+[data-theme="aubergine-light"] {
+  --hsl-background: 258 60% 96%;
+  --hsl-foreground: 258 45% 11%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 258 45% 11%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 258 45% 11%;
+  --hsl-primary: 258 70% 50%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 258 45% 92%;
+  --hsl-muted: 258 45% 92%;
+  --hsl-muted-foreground: 258 18% 42%;
+  --hsl-accent: 258 45% 92%;
+  --hsl-border: 258 30% 88%;
+  --hsl-input: 258 30% 88%;
+  --hsl-ring: 258 70% 50%;
+  --depth-1: #f4f1fc;
+  --depth-2: #ece6f8;
+  --depth-3: #ffffff;
+  --depth-4: #ffffff;
+  --bg-root: #f4f1fc;
+  --bg-card: #ffffff;
+  --bg-input: #ece6f8;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #faf8fe;
+  --md3-surface-container: #f4f1fc;
+  --md3-surface-container-high: #ece6f8;
+  --md3-surface-container-highest: #e4dcf4;
+  --md3-outline-variant: #e0d8f0;
+  --border-subtle: rgba(60,32,110,0.10);
+  --border-default: rgba(60,32,110,0.16);
+  --border-hover: rgba(60,32,110,0.30);
+  --accent-text: #6d28d9;
+  --brand-primary: #6d28d9;
+  --brand-glow: #8b5cf6;
+  --text-primary: #160f22;
+  --text-secondary: #3f3460;
+  --text-muted: #6c6289;
+  --text-dim: #8a82a6;
+}
+[data-theme="arena"] {
+  --hsl-background: 160 16% 6%;
+  --hsl-foreground: 150 20% 96%;
+  --hsl-card: 158 14% 12%;
+  --hsl-card-foreground: 150 20% 96%;
+  --hsl-popover: 158 13% 16%;
+  --hsl-popover-foreground: 150 20% 96%;
+  --hsl-primary: 160 84% 39%;
+  --hsl-primary-foreground: 160 60% 8%;
+  --hsl-secondary: 158 12% 12%;
+  --hsl-muted: 158 12% 12%;
+  --hsl-muted-foreground: 152 12% 62%;
+  --hsl-accent: 158 14% 14%;
+  --hsl-border: 158 14% 18%;
+  --hsl-input: 158 12% 12%;
+  --hsl-ring: 160 84% 45%;
+  --depth-1: #0a0f0c;
+  --depth-2: #131b16;
+  --depth-3: #1b261f;
+  --depth-4: #233328;
+  --bg-root: #0a0f0c;
+  --bg-card: var(--depth-3);
+  --bg-input: var(--depth-2);
+  --md3-surface-container-lowest: #070b08;
+  --md3-surface-container-low: #131b16;
+  --md3-surface-container: #182019;
+  --md3-surface-container-high: #1b261f;
+  --md3-surface-container-highest: #233328;
+  --md3-outline-variant: #2a3a31;
+  --border-subtle: rgba(52,211,153,0.10);
+  --border-default: rgba(52,211,153,0.18);
+  --border-hover: rgba(52,211,153,0.32);
+  --accent-text: #34d399;
+  --brand-primary: #10b981;
+  --brand-glow: #34d399;
+  --text-primary: #ecfdf5;
+  --text-secondary: #c2e8d6;
+  --text-muted: #8fb6a3;
+  --text-dim: #5f8472;
+}
+[data-theme="arena-light"] {
+  --hsl-background: 150 30% 96%;
+  --hsl-foreground: 158 30% 10%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 158 30% 10%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 158 30% 10%;
+  --hsl-primary: 160 84% 27%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 150 25% 92%;
+  --hsl-muted: 150 25% 92%;
+  --hsl-muted-foreground: 158 14% 40%;
+  --hsl-accent: 150 25% 92%;
+  --hsl-border: 150 20% 86%;
+  --hsl-input: 150 20% 86%;
+  --hsl-ring: 160 84% 30%;
+  --depth-1: #f0f6f2;
+  --depth-2: #e6f0ea;
+  --depth-3: #ffffff;
+  --depth-4: #ffffff;
+  --bg-root: #f0f6f2;
+  --bg-card: #ffffff;
+  --bg-input: #e6f0ea;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #f6fbf8;
+  --md3-surface-container: #f0f6f2;
+  --md3-surface-container-high: #e6f0ea;
+  --md3-surface-container-highest: #dcebe2;
+  --md3-outline-variant: #d7e8de;
+  --border-subtle: rgba(6,95,70,0.10);
+  --border-default: rgba(6,95,70,0.16);
+  --border-hover: rgba(6,95,70,0.30);
+  --accent-text: #047857;
+  --brand-primary: #059669;
+  --brand-glow: #10b981;
+  --text-primary: #06231a;
+  --text-secondary: #285048;
+  --text-muted: #5f8472;
+  --text-dim: #82a699;
+}
+[data-theme="tangle-light"] {
+  --hsl-background: 240 33% 98%;
+  --hsl-foreground: 245 32% 14%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 245 32% 14%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 245 32% 14%;
+  --hsl-primary: 239 84% 60%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 240 30% 95%;
+  --hsl-muted: 240 28% 95%;
+  --hsl-muted-foreground: 240 8% 42%;
+  --hsl-accent: 240 30% 95%;
+  --hsl-border: 240 20% 90%;
+  --hsl-input: 240 20% 90%;
+  --hsl-ring: 239 84% 60%;
+  --depth-1: #f4f4f9;
+  --depth-2: #edecf4;
+  --depth-3: #ffffff;
+  --depth-4: #ffffff;
+  --bg-root: #f4f4f9;
+  --bg-card: #ffffff;
+  --bg-input: #edecf4;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #f8f8fc;
+  --md3-surface-container: #f4f4f9;
+  --md3-surface-container-high: #edecf4;
+  --md3-surface-container-highest: #e5e4ee;
+  --md3-outline-variant: #e2e1ec;
+  --border-subtle: rgba(20,20,40,0.08);
+  --border-default: rgba(20,20,40,0.14);
+  --border-hover: rgba(20,20,40,0.26);
+  --accent-text: #4f46e5;
+  --brand-primary: #6366f1;
+  --brand-glow: #818cf8;
+  --text-primary: #15131f;
+  --text-secondary: #3f3a52;
+  --text-muted: #6a6680;
+  --text-dim: #9490a6;
+}
+.dark[data-theme="intelligence"] {
+  --md3-surface: #0d0a10;
+  --md3-surface-dim: #0a080d;
+  --md3-surface-bright: #2e2936;
+  --md3-surface-container-lowest: #070509;
+  --md3-surface-container-low: #100d15;
+  --md3-surface-container: #14111a;
+  --md3-surface-container-high: #1b1821;
+  --md3-surface-container-highest: #24202b;
+  --md3-surface-variant: #24202b;
+  --md3-on-surface-variant: #aaa6bb;
+  --hsl-background: 262 24% 5%;
+  --hsl-card: 262 19% 11%;
+  --hsl-popover: 260 16% 13%;
+  --hsl-secondary: 262 15% 18%;
+  --hsl-muted: 262 17% 15%;
+  --hsl-muted-foreground: 255 12% 62%;
+  --hsl-accent: 262 15% 20%;
+  --hsl-border: 262 12% 28%;
+  --hsl-input: 260 14% 16%;
+  --sidebar-background: 264 26% 4%;
+  --sidebar-accent: 262 16% 16%;
+  --sidebar-border: 262 12% 13%;
+  --depth-1: #0e0b13;
+  --depth-2: #16131c;
+  --depth-3: #201c28;
+  --depth-4: #2a2533;
+  --bg-elevated: hsl(262 17% 15%);
+  --bg-section: hsl(262 22% 7%);
+  --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(129, 99, 241, 0.08), transparent),
+    radial-gradient(ellipse 50% 40% at 80% 10%, rgba(129, 140, 248, 0.06), transparent),
+    linear-gradient(180deg, var(--depth-1), #0d0a12 100%);
+  --border-subtle: rgba(120, 108, 158, 0.1);
+  --border-default: rgba(120, 108, 158, 0.18);
+  --border-hover: rgba(120, 108, 158, 0.28);
+}
 .sandbox-tree-surface {
   --trees-bg-override: var(--md3-surface-container-lowest);
   --trees-bg-muted-override: var(--md3-surface-container-low);