@tangle-network/sandbox-ui 0.139.1 → 0.140.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/globals.css CHANGED
@@ -355,6 +355,9 @@
355
355
  .top-4 {
356
356
  top: calc(var(--spacing) * 4);
357
357
  }
358
+ .top-11 {
359
+ top: calc(var(--spacing) * 11);
360
+ }
358
361
  .top-\[50\%\] {
359
362
  top: 50%;
360
363
  }
@@ -406,6 +409,9 @@
406
409
  .bottom-\[-0\.75rem\] {
407
410
  bottom: -0.75rem;
408
411
  }
412
+ .-left-1 {
413
+ left: calc(var(--spacing) * -1);
414
+ }
409
415
  .-left-1\.5 {
410
416
  left: calc(var(--spacing) * -1.5);
411
417
  }
@@ -472,6 +478,9 @@
472
478
  .z-\[100\] {
473
479
  z-index: 100;
474
480
  }
481
+ .order-last {
482
+ order: 9999;
483
+ }
475
484
  .col-span-2 {
476
485
  grid-column: span 2 / span 2;
477
486
  }
@@ -619,6 +628,9 @@
619
628
  .mt-px {
620
629
  margin-top: 1px;
621
630
  }
631
+ .-mr-px {
632
+ margin-right: -1px;
633
+ }
622
634
  .mr-1 {
623
635
  margin-right: var(--spacing);
624
636
  }
@@ -670,6 +682,9 @@
670
682
  .-ml-1 {
671
683
  margin-left: calc(var(--spacing) * -1);
672
684
  }
685
+ .-ml-2 {
686
+ margin-left: calc(var(--spacing) * -2);
687
+ }
673
688
  .ml-0\.5 {
674
689
  margin-left: calc(var(--spacing) * 0.5);
675
690
  }
@@ -767,6 +782,10 @@
767
782
  width: calc(var(--spacing) * 2) !important;
768
783
  height: calc(var(--spacing) * 2) !important;
769
784
  }
785
+ .size-1\.5 {
786
+ width: calc(var(--spacing) * 1.5);
787
+ height: calc(var(--spacing) * 1.5);
788
+ }
770
789
  .size-2 {
771
790
  width: calc(var(--spacing) * 2);
772
791
  height: calc(var(--spacing) * 2);
@@ -1027,6 +1046,9 @@
1027
1046
  .h-\[720px\] {
1028
1047
  height: 720px;
1029
1048
  }
1049
+ .h-\[calc\(100\%-0\.375rem\)\] {
1050
+ height: calc(100% - 0.375rem);
1051
+ }
1030
1052
  .h-\[var\(--avatar-size\)\] {
1031
1053
  height: var(--avatar-size);
1032
1054
  }
@@ -1114,6 +1136,9 @@
1114
1136
  .max-h-full {
1115
1137
  max-height: 100%;
1116
1138
  }
1139
+ .max-h-none {
1140
+ max-height: none;
1141
+ }
1117
1142
  .min-h-0 {
1118
1143
  min-height: 0px;
1119
1144
  }
@@ -1486,9 +1511,6 @@
1486
1511
  .max-w-40 {
1487
1512
  max-width: calc(var(--spacing) * 40);
1488
1513
  }
1489
- .max-w-48 {
1490
- max-width: calc(var(--spacing) * 48);
1491
- }
1492
1514
  .max-w-72 {
1493
1515
  max-width: calc(var(--spacing) * 72);
1494
1516
  }
@@ -1519,9 +1541,6 @@
1519
1541
  .max-w-\[85vw\] {
1520
1542
  max-width: 85vw;
1521
1543
  }
1522
- .max-w-\[120px\] {
1523
- max-width: 120px;
1524
- }
1525
1544
  .max-w-\[140px\] {
1526
1545
  max-width: 140px;
1527
1546
  }
@@ -1873,6 +1892,9 @@
1873
1892
  .scroll-mt-\[calc\(var\(--shell-header-height\)_\+_1rem\)\] {
1874
1893
  scroll-margin-top: calc(var(--shell-header-height) + 1rem);
1875
1894
  }
1895
+ .\[scrollbar-width\:none\] {
1896
+ scrollbar-width: none;
1897
+ }
1876
1898
  .scrollbar-none {
1877
1899
  scrollbar-width: none;
1878
1900
  }
@@ -1936,6 +1958,9 @@
1936
1958
  .place-content-center {
1937
1959
  place-content: center;
1938
1960
  }
1961
+ .place-items-center {
1962
+ place-items: center;
1963
+ }
1939
1964
  .items-baseline {
1940
1965
  align-items: baseline;
1941
1966
  }
@@ -2133,9 +2158,6 @@
2133
2158
  .self-start {
2134
2159
  align-self: flex-start;
2135
2160
  }
2136
- .self-stretch {
2137
- align-self: stretch;
2138
- }
2139
2161
  .justify-self-start {
2140
2162
  justify-self: flex-start;
2141
2163
  }
@@ -2239,6 +2261,10 @@
2239
2261
  border-top-left-radius: var(--radius-sm);
2240
2262
  border-top-right-radius: var(--radius-sm);
2241
2263
  }
2264
+ .rounded-t-lg {
2265
+ border-top-left-radius: var(--radius-lg);
2266
+ border-top-right-radius: var(--radius-lg);
2267
+ }
2242
2268
  .rounded-t-md {
2243
2269
  border-top-left-radius: var(--radius-md);
2244
2270
  border-top-right-radius: var(--radius-md);
@@ -2608,9 +2634,6 @@
2608
2634
  .border-t-transparent {
2609
2635
  border-top-color: transparent;
2610
2636
  }
2611
- .border-b-primary {
2612
- border-bottom-color: hsl(var(--primary));
2613
- }
2614
2637
  .\!bg-muted-foreground\/70 {
2615
2638
  background-color: hsl(var(--muted-foreground)) !important;
2616
2639
  @supports (color: color-mix(in lab, red, red)) {
@@ -2716,6 +2739,9 @@
2716
2739
  .bg-\[var\(--field-surface\,var\(--well\)\)\] {
2717
2740
  background-color: var(--field-surface,var(--well));
2718
2741
  }
2742
+ .bg-\[var\(--ix-sel-bg\)\] {
2743
+ background-color: var(--ix-sel-bg);
2744
+ }
2719
2745
  .bg-\[var\(--md3-outline-variant\)\] {
2720
2746
  background-color: var(--md3-outline-variant);
2721
2747
  }
@@ -3288,9 +3314,15 @@
3288
3314
  .px-9 {
3289
3315
  padding-inline: calc(var(--spacing) * 9);
3290
3316
  }
3317
+ .px-\[calc\(var\(--files-inset\)_-_0\.25rem\)\] {
3318
+ padding-inline: calc(var(--files-inset) - 0.25rem);
3319
+ }
3291
3320
  .px-\[var\(--chat-message-px\)\] {
3292
3321
  padding-inline: var(--chat-message-px);
3293
3322
  }
3323
+ .px-\[var\(--files-inset\)\] {
3324
+ padding-inline: var(--files-inset);
3325
+ }
3294
3326
  .px-\[var\(--tool-card-px\)\] {
3295
3327
  padding-inline: var(--tool-card-px);
3296
3328
  }
@@ -3417,6 +3449,9 @@
3417
3449
  .pr-10 {
3418
3450
  padding-right: calc(var(--spacing) * 10);
3419
3451
  }
3452
+ .pr-\[var\(--files-inset\)\] {
3453
+ padding-right: var(--files-inset);
3454
+ }
3420
3455
  .pb-0 {
3421
3456
  padding-bottom: 0px;
3422
3457
  }
@@ -3471,6 +3506,9 @@
3471
3506
  .pl-\[2\.375rem\] {
3472
3507
  padding-left: 2.375rem;
3473
3508
  }
3509
+ .pl-\[var\(--files-inset\)\] {
3510
+ padding-left: var(--files-inset);
3511
+ }
3474
3512
  .text-center {
3475
3513
  text-align: center;
3476
3514
  }
@@ -3585,6 +3623,9 @@
3585
3623
  .text-\[length\:var\(--font-size-3xl\,1\.875rem\)\] {
3586
3624
  font-size: var(--font-size-3xl,1.875rem);
3587
3625
  }
3626
+ .text-\[length\:var\(--font-size-base\,1rem\)\] {
3627
+ font-size: var(--font-size-base,1rem);
3628
+ }
3588
3629
  .text-\[length\:var\(--font-size-display\,3rem\)\] {
3589
3630
  font-size: var(--font-size-display,3rem);
3590
3631
  }
@@ -3597,18 +3638,15 @@
3597
3638
  .text-\[length\:var\(--font-size-label\,0\.875rem\)\] {
3598
3639
  font-size: var(--font-size-label,0.875rem);
3599
3640
  }
3600
- .text-\[length\:var\(--font-size-lg\,1rem\)\] {
3601
- font-size: var(--font-size-lg,1rem);
3602
- }
3603
- .text-\[length\:var\(--font-size-sm\,0\.75rem\)\] {
3604
- font-size: var(--font-size-sm,0.75rem);
3605
- }
3606
3641
  .text-\[length\:var\(--font-size-xl\,1\.25rem\)\] {
3607
3642
  font-size: var(--font-size-xl,1.25rem);
3608
3643
  }
3609
3644
  .text-\[length\:var\(--font-size-xs\)\] {
3610
3645
  font-size: var(--font-size-xs);
3611
3646
  }
3647
+ .text-\[length\:var\(--font-size-xs\,0\.75rem\)\] {
3648
+ font-size: var(--font-size-xs,0.75rem);
3649
+ }
3612
3650
  .text-\[length\:var\(--transcript-font-size\)\] {
3613
3651
  font-size: var(--transcript-font-size);
3614
3652
  }
@@ -3780,12 +3818,18 @@
3780
3818
  .break-all {
3781
3819
  word-break: break-all;
3782
3820
  }
3821
+ .text-ellipsis {
3822
+ text-overflow: ellipsis;
3823
+ }
3783
3824
  .whitespace-normal {
3784
3825
  white-space: normal;
3785
3826
  }
3786
3827
  .whitespace-nowrap {
3787
3828
  white-space: nowrap;
3788
3829
  }
3830
+ .whitespace-pre {
3831
+ white-space: pre;
3832
+ }
3789
3833
  .whitespace-pre-wrap {
3790
3834
  white-space: pre-wrap;
3791
3835
  }
@@ -4194,6 +4238,10 @@
4194
4238
  --tw-shadow: 0 8px 30px var(--tw-shadow-color, rgba(0,0,0,0.45));
4195
4239
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4196
4240
  }
4241
+ .shadow-\[inset_0_-1px_0_hsl\(var\(--border\)\)\] {
4242
+ --tw-shadow: inset 0 -1px 0 var(--tw-shadow-color, hsl(var(--border)));
4243
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4244
+ }
4197
4245
  .shadow-\[var\(--edge-highlight\)\,var\(--shadow-card\)\] {
4198
4246
  --tw-shadow: var(--edge-highlight), var(--shadow-card);
4199
4247
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -4457,6 +4505,9 @@
4457
4505
  .\[--field-surface\:hsl\(var\(--card\)\)\] {
4458
4506
  --field-surface: hsl(var(--card));
4459
4507
  }
4508
+ .\[--files-inset\:0\.75rem\] {
4509
+ --files-inset: 0.75rem;
4510
+ }
4460
4511
  .\[-webkit-mask-image\:linear-gradient\(to_right\,transparent\,black_16px\,black_calc\(100\%-16px\)\,transparent\)\] {
4461
4512
  -webkit-mask-image: linear-gradient(to right,transparent,black 16px,black calc(100% - 16px),transparent);
4462
4513
  }
@@ -4493,9 +4544,6 @@
4493
4544
  --tw-translate-x: calc(var(--spacing) * 0.5);
4494
4545
  translate: var(--tw-translate-x) var(--tw-translate-y);
4495
4546
  }
4496
- .group-hover\:bg-primary:is(:where(.group):hover *) {
4497
- background-color: hsl(var(--primary));
4498
- }
4499
4547
  .group-hover\:bg-primary\/20:is(:where(.group):hover *) {
4500
4548
  background-color: hsl(var(--primary));
4501
4549
  }
@@ -4504,6 +4552,9 @@
4504
4552
  background-color: color-mix(in oklab, hsl(var(--primary)) 20%, transparent);
4505
4553
  }
4506
4554
  }
4555
+ .group-hover\:bg-ring:is(:where(.group):hover *) {
4556
+ background-color: hsl(var(--ring));
4557
+ }
4507
4558
  .group-hover\:text-foreground:is(:where(.group):hover *) {
4508
4559
  color: hsl(var(--foreground));
4509
4560
  }
@@ -4531,15 +4582,15 @@
4531
4582
  opacity: 100%;
4532
4583
  }
4533
4584
  }
4534
- .group-focus-visible\:bg-primary:is(:where(.group):focus-visible *) {
4535
- background-color: hsl(var(--primary));
4536
- }
4537
4585
  .group-focus-visible\:bg-primary\/30:is(:where(.group):focus-visible *) {
4538
4586
  background-color: hsl(var(--primary));
4539
4587
  @supports (color: color-mix(in lab, red, red)) {
4540
4588
  background-color: color-mix(in oklab, hsl(var(--primary)) 30%, transparent);
4541
4589
  }
4542
4590
  }
4591
+ .group-focus-visible\:bg-ring:is(:where(.group):focus-visible *) {
4592
+ background-color: hsl(var(--ring));
4593
+ }
4543
4594
  .group-focus-visible\/agent\:outline-2:is(:where(.group\/agent):focus-visible *) {
4544
4595
  outline-style: var(--tw-outline-style);
4545
4596
  outline-width: 2px;
@@ -4695,9 +4746,6 @@
4695
4746
  .hover\:border-\[var\(--border-accent\)\]:hover {
4696
4747
  border-color: var(--border-accent);
4697
4748
  }
4698
- .hover\:border-\[var\(--border-default\,hsl\(var\(--border\)\)\)\]:hover {
4699
- border-color: var(--border-default,hsl(var(--border)));
4700
- }
4701
4749
  .hover\:border-\[var\(--border-strong\)\]:hover {
4702
4750
  border-color: var(--border-strong);
4703
4751
  }
@@ -5236,9 +5284,6 @@
5236
5284
  .focus-visible\:text-foreground:focus-visible {
5237
5285
  color: hsl(var(--foreground));
5238
5286
  }
5239
- .focus-visible\:underline:focus-visible {
5240
- text-decoration-line: underline;
5241
- }
5242
5287
  .focus-visible\:opacity-100:focus-visible {
5243
5288
  opacity: 100%;
5244
5289
  }
@@ -6145,6 +6190,15 @@
6145
6190
  }
6146
6191
  }
6147
6192
  @media (pointer: coarse) {
6193
+ .pointer-coarse\:top-14 {
6194
+ top: calc(var(--spacing) * 14);
6195
+ }
6196
+ .pointer-coarse\:h-14 {
6197
+ height: calc(var(--spacing) * 14);
6198
+ }
6199
+ .pointer-coarse\:h-auto {
6200
+ height: auto;
6201
+ }
6148
6202
  .pointer-coarse\:min-h-11 {
6149
6203
  min-height: calc(var(--spacing) * 11);
6150
6204
  }
@@ -6294,6 +6348,9 @@
6294
6348
  border-style: var(--tw-border-style);
6295
6349
  border-width: 0px;
6296
6350
  }
6351
+ .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
6352
+ display: none;
6353
+ }
6297
6354
  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
6298
6355
  padding-right: 0px;
6299
6356
  }
@@ -6387,6 +6444,9 @@
6387
6444
  --tw-content: '';
6388
6445
  content: var(--tw-content);
6389
6446
  }
6447
+ .\[\&\>button\]\:py-1 > button {
6448
+ padding-block: var(--spacing);
6449
+ }
6390
6450
  @media (width < 40rem) {
6391
6451
  .max-sm\:\[\&\>div\:not\(\:nth-child\(2n\+1\)\)\]\:border-l > div:not(:nth-child(2n+1)) {
6392
6452
  border-left-style: var(--tw-border-style);
@@ -6513,64 +6573,151 @@
6513
6573
  }
6514
6574
  :root, [data-sandbox-ui], [data-sandbox-theme="vault"], [data-sandbox-theme="dawn"], [data-theme="dark"], [data-theme="light"], [data-theme="aubergine"], [data-theme="aubergine-light"], [data-theme="arena"], [data-theme="arena-light"], [data-theme="super"], [data-theme="super-light"], [data-theme="tangle-dark"], [data-theme="tangle-light"], [data-theme="hospitality"], [data-theme="agents"], [data-theme="agents-light"], [data-theme="website"], .light, .dark {
6515
6575
  color-scheme: dark;
6516
- --md3-surface: #0a0a14;
6576
+ --hsl-background: 240 33% 6%;
6577
+ --hsl-input: 244 29% 9%;
6578
+ --hsl-card: 244 23% 12%;
6579
+ --hsl-secondary: 249 24% 17.5%;
6580
+ --hsl-popover: 247 21% 23%;
6581
+ --hsl-muted: var(--hsl-secondary);
6582
+ --hsl-accent: var(--hsl-secondary);
6517
6583
  --md3-surface-dim: #040408;
6584
+ --md3-surface-container-lowest: var(--md3-surface-dim);
6518
6585
  --md3-surface-bright: #232238;
6519
- --md3-surface-container-lowest: #040408;
6520
- --md3-surface-container-low: #12111f;
6521
- --md3-surface-container: #191826;
6522
- --md3-surface-container-high: #221f33;
6523
- --md3-surface-container-highest: #2c2942;
6524
- --md3-surface-variant: #221f33;
6525
- --md3-on-surface: #e6e6e6;
6526
- --md3-on-surface-variant: #b5b5b5;
6527
- --md3-primary: #A5B4FC;
6528
- --md3-primary-dim: #7C6CF6;
6529
- --md3-primary-container: #4C3FC5;
6530
- --md3-on-primary: #ffffff;
6531
- --md3-on-primary-container: #E0E7FF;
6532
- --md3-primary-fixed: #A5AAFC;
6533
- --md3-primary-fixed-dim: #818CF8;
6534
- --md3-secondary: #C7D2FE;
6535
- --md3-secondary-dim: #A5B4FC;
6536
- --md3-secondary-container: #312E81;
6537
- --md3-on-secondary: #E8E5FF;
6538
- --md3-on-secondary-container: #E8E5FF;
6539
- --md3-tertiary: #10B981;
6540
- --md3-tertiary-container: var(--surface-success-bg);
6541
- --md3-outline: #8e8e8e;
6542
- --md3-outline-variant: #2a293d;
6543
- --md3-error: #ff5277;
6544
- --md3-error-dim: #eb2855;
6545
- --md3-error-container: #82042b;
6546
- --md3-on-error: #ffffff;
6547
- --md3-on-error-container: #ffbdf2;
6586
+ --md3-surface: hsl(var(--hsl-background));
6587
+ --md3-surface-container-low: hsl(var(--hsl-input));
6588
+ --md3-surface-container: hsl(var(--hsl-card));
6589
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
6590
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
6591
+ --md3-surface-variant: var(--md3-surface-container-high);
6592
+ --depth-1: var(--md3-surface);
6593
+ --depth-2: var(--md3-surface-container);
6594
+ --depth-3: var(--md3-surface-container-high);
6595
+ --depth-4: var(--md3-surface-container-highest);
6596
+ --bg-root: var(--md3-surface);
6597
+ --bg-dark: var(--depth-1);
6598
+ --bg-card: var(--depth-2);
6599
+ --bg-elevated: var(--depth-4);
6600
+ --bg-section: var(--depth-1);
6601
+ --bg-input: hsl(var(--hsl-input));
6602
+ --sidebar-background: var(--hsl-input);
6603
+ --sidebar-accent: var(--hsl-secondary);
6548
6604
  --md3-inverse-surface: #fdfdfd;
6549
- --md3-inverse-primary: #4C3FC5;
6550
6605
  --md3-inverse-on-surface: #000000;
6551
- --md3-surface-tint: #A5B4FC;
6552
- --hsl-background: 240 33% 6%;
6553
6606
  --hsl-foreground: 0 0% 90.1961%;
6554
- --hsl-card: 244 23% 12%;
6555
- --hsl-card-foreground: 0 0% 90.1961%;
6556
- --hsl-popover: 247 23% 21%;
6557
- --hsl-popover-foreground: 0 0% 90.1961%;
6607
+ --hsl-muted-foreground: 240 5% 68%;
6608
+ --text-primary: hsl(var(--hsl-foreground));
6609
+ --text-secondary: #c7c7c7;
6610
+ --text-muted: #b5b5b5;
6611
+ --text-dim: #a5a5a5;
6612
+ --hsl-card-foreground: var(--hsl-foreground);
6613
+ --hsl-popover-foreground: var(--hsl-foreground);
6614
+ --hsl-secondary-foreground: var(--hsl-foreground);
6615
+ --hsl-accent-foreground: var(--hsl-foreground);
6616
+ --sidebar-foreground: var(--hsl-foreground);
6617
+ --sidebar-accent-foreground: var(--hsl-foreground);
6618
+ --md3-on-surface: var(--text-primary);
6619
+ --md3-on-surface-variant: var(--text-muted);
6620
+ --md3-outline: #8e8e8e;
6621
+ --hsl-border: 244 16% 25%;
6622
+ --md3-outline-variant: hsl(var(--hsl-border));
6623
+ --sidebar-border: var(--hsl-border);
6624
+ --border-subtle: hsl(var(--hsl-border));
6625
+ --border-default: hsl(var(--hsl-border));
6626
+ --border-hover: rgba(255, 255, 255, 0.28);
6558
6627
  --hsl-primary: 246 54% 51%;
6559
6628
  --hsl-primary-foreground: 0 0% 100%;
6560
- --hsl-secondary: 249 24% 16%;
6561
- --hsl-secondary-foreground: 0 0% 90.1961%;
6562
- --hsl-muted: 249 24% 16%;
6563
- --hsl-muted-foreground: 240 5% 68%;
6564
- --hsl-accent: 249 24% 16%;
6565
- --hsl-accent-foreground: 0 0% 90.1961%;
6566
- --hsl-destructive: 0 90% 77%;
6567
- --hsl-destructive-foreground: 0 60% 10%;
6568
- --hsl-border: 243 20% 20%;
6569
- --hsl-input: 244 29% 9%;
6570
6629
  --hsl-ring: 233 100% 87%;
6571
- --hsl-success: 160 84% 39%;
6572
- --hsl-warning: 40 94% 56%;
6573
- --hsl-info: 200 88% 56%;
6630
+ --brand-primary: #7C6CF6;
6631
+ --brand-cool: #818CF8;
6632
+ --accent-text: #A5B4FC;
6633
+ --brand-purple: #C7D2FE;
6634
+ --brand-strong: #2E2A5E;
6635
+ --brand-strong-text: #ffffff;
6636
+ --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
6637
+ --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
6638
+ --brand-glow: var(--accent-text);
6639
+ --brand-vibrant: var(--brand-primary);
6640
+ --btn-primary-bg: hsl(var(--hsl-primary));
6641
+ --btn-primary-hover: #5a50d6;
6642
+ --btn-primary-text: #ffffff;
6643
+ --btn-cta-bg: var(--btn-primary-bg);
6644
+ --btn-cta-text: var(--btn-primary-text);
6645
+ --sidebar-primary: var(--hsl-primary);
6646
+ --sidebar-primary-foreground: var(--hsl-primary-foreground);
6647
+ --sidebar-ring: var(--hsl-ring);
6648
+ --md3-primary: var(--accent-text);
6649
+ --md3-primary-dim: var(--brand-primary);
6650
+ --md3-primary-container: var(--btn-primary-bg);
6651
+ --md3-on-primary: #ffffff;
6652
+ --md3-on-primary-container: var(--brand-purple);
6653
+ --md3-primary-fixed: var(--accent-text);
6654
+ --md3-primary-fixed-dim: var(--brand-cool);
6655
+ --md3-secondary: var(--brand-purple);
6656
+ --md3-secondary-dim: var(--accent-text);
6657
+ --md3-secondary-container: var(--brand-strong);
6658
+ --md3-on-secondary: var(--brand-purple);
6659
+ --md3-on-secondary-container: var(--brand-purple);
6660
+ --md3-inverse-primary: var(--btn-primary-bg);
6661
+ --md3-surface-tint: var(--accent-text);
6662
+ --accent-surface-soft: var(--accent-text);
6663
+ @supports (color: color-mix(in lab, red, red)) {
6664
+ --accent-surface-soft: color-mix(in srgb, var(--accent-text) 7%, transparent);
6665
+ }
6666
+ --accent-surface-strong: var(--btn-primary-bg);
6667
+ @supports (color: color-mix(in lab, red, red)) {
6668
+ --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
6669
+ }
6670
+ --bg-hover: var(--accent-surface-soft);
6671
+ --bg-selection: var(--brand-primary);
6672
+ @supports (color: color-mix(in lab, red, red)) {
6673
+ --bg-selection: color-mix(in srgb, var(--brand-primary) 28%, transparent);
6674
+ }
6675
+ --border-accent: var(--brand-cool);
6676
+ @supports (color: color-mix(in lab, red, red)) {
6677
+ --border-accent: color-mix(in srgb, var(--brand-cool) 35%, transparent);
6678
+ }
6679
+ --border-accent-hover: var(--brand-cool);
6680
+ @supports (color: color-mix(in lab, red, red)) {
6681
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 50%, transparent);
6682
+ }
6683
+ --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--accent-text));
6684
+ --tangle-gradient-text: linear-gradient(135deg, var(--brand-purple), var(--accent-text));
6685
+ --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--brand-primary));
6686
+ --hsl-success: 154.7 60.2% 60.6%;
6687
+ --hsl-warning: 41.5 88.2% 63.3%;
6688
+ --hsl-destructive: 2.8 100% 83.1%;
6689
+ --hsl-destructive-foreground: 0 60% 10%;
6690
+ --hsl-info: 199.7 100% 70.2%;
6691
+ --surface-success-text: hsl(var(--hsl-success));
6692
+ --surface-success-bg: #2f5146;
6693
+ --surface-success-border: #3c7760;
6694
+ --surface-warning-text: hsl(var(--hsl-warning));
6695
+ --surface-warning-bg: #4b4232;
6696
+ --surface-warning-border: #7a6236;
6697
+ --surface-danger-text: hsl(var(--hsl-destructive));
6698
+ --surface-danger-bg: #5a3b40;
6699
+ --surface-danger-border: #7d4d53;
6700
+ --surface-info-text: hsl(var(--hsl-info));
6701
+ --surface-info-bg: #2d4e67;
6702
+ --surface-info-border: #3d7292;
6703
+ --status-running: var(--surface-success-text);
6704
+ --status-creating: var(--accent-text);
6705
+ --status-stopped: var(--surface-warning-text);
6706
+ --status-warm: var(--surface-orange-text);
6707
+ --status-cold: var(--surface-info-text);
6708
+ --status-error: var(--surface-danger-text);
6709
+ --status-deleted: var(--text-dim);
6710
+ --brand-emerald: var(--surface-success-text);
6711
+ --md3-tertiary: var(--surface-success-text);
6712
+ --md3-tertiary-container: var(--surface-success-bg);
6713
+ --md3-error: var(--surface-danger-text);
6714
+ --md3-error-dim: var(--md3-error);
6715
+ @supports (color: color-mix(in lab, red, red)) {
6716
+ --md3-error-dim: color-mix(in srgb, var(--md3-error) 85%, black);
6717
+ }
6718
+ --md3-error-container: var(--surface-danger-bg);
6719
+ --md3-on-error: hsl(var(--hsl-destructive-foreground));
6720
+ --md3-on-error-container: var(--surface-danger-text);
6574
6721
  --background: var(--hsl-background);
6575
6722
  --foreground: var(--hsl-foreground);
6576
6723
  --card: var(--hsl-card);
@@ -6594,37 +6741,6 @@
6594
6741
  --warning: var(--hsl-warning);
6595
6742
  --error: var(--hsl-destructive);
6596
6743
  --info: var(--hsl-info);
6597
- --sidebar-background: 244 29% 9%;
6598
- --sidebar-foreground: 0 0% 90.1961%;
6599
- --sidebar-primary: 246 54% 51%;
6600
- --sidebar-primary-foreground: 0 0% 100%;
6601
- --sidebar-accent: 0 0% 20.7843%;
6602
- --sidebar-accent-foreground: 0 0% 90.1961%;
6603
- --sidebar-border: 0 0% 29.8039%;
6604
- --sidebar-ring: 233 100% 87%;
6605
- --depth-1: #0a0a14;
6606
- --depth-2: #191826;
6607
- --depth-3: #221f33;
6608
- --depth-4: #2c2942;
6609
- --status-running: #10B981;
6610
- --status-creating: #A5B4FC;
6611
- --status-stopped: #FFB800;
6612
- --status-warm: #FF8A4C;
6613
- --status-cold: #4AABFF;
6614
- --status-error: #FF4D6D;
6615
- --status-deleted: #6B7094;
6616
- --surface-success-bg: #2f5146;
6617
- --surface-success-border: #3c7760;
6618
- --surface-success-text: #5ed7a4;
6619
- --surface-warning-bg: #4b4232;
6620
- --surface-warning-border: #7a6236;
6621
- --surface-warning-text: #f4c14f;
6622
- --surface-danger-bg: #5a3b40;
6623
- --surface-danger-border: #7d4d53;
6624
- --surface-danger-text: #ffada9;
6625
- --surface-info-bg: #2d4e67;
6626
- --surface-info-border: #3d7292;
6627
- --surface-info-text: #67cdff;
6628
6744
  --tone-violet-bg: #392751;
6629
6745
  --tone-violet-bg-hover: #432b60;
6630
6746
  --tone-violet-bg-selected: #4c306c;
@@ -6701,56 +6817,28 @@
6701
6817
  --glass-bg: var(--depth-2);
6702
6818
  --glass-bg-strong: var(--depth-3);
6703
6819
  --glass-border: var(--border-subtle);
6704
- --glass-border-hover: var(--border-default);
6820
+ --glass-border-hover: var(--border-hover);
6705
6821
  --glass-blur: 0px;
6706
6822
  --mesh-teal: transparent;
6707
6823
  --mesh-violet: transparent;
6708
6824
  --mesh-blue: transparent;
6709
- --tangle-gradient: linear-gradient(135deg, #4C3FC5, #A5B4FC);
6710
- --tangle-gradient-text: linear-gradient(135deg, #C7D2FE, #A5B4FC);
6711
- --accent-gradient-strong: linear-gradient(135deg, #4C3FC5, #7C6CF6);
6712
- --accent-surface-soft: rgba(165, 180, 252, 0.07);
6713
- --accent-surface-strong: rgba(76, 63, 197, 0.30);
6714
- --accent-text: #A5B4FC;
6715
- --bg-root: #0a0a14;
6716
- --bg-dark: var(--depth-1);
6717
- --bg-card: var(--depth-2);
6718
- --bg-elevated: var(--depth-4);
6719
- --bg-section: var(--depth-1);
6720
- --bg-input: hsl(var(--hsl-input));
6721
- --bg-hover: rgba(165, 180, 252, 0.07);
6722
- --bg-selection: rgba(124, 108, 246, 0.28);
6723
- --text-primary: #e6e6e6;
6724
- --text-secondary: #c7c7c7;
6725
- --text-muted: #b5b5b5;
6726
- --text-dim: #a5a5a5;
6727
- --brand-primary: #7C6CF6;
6728
- --brand-strong: #2E2A5E;
6729
- --brand-strong-text: #ffffff;
6730
- --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
6731
- --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
6732
- --brand-cool: #818CF8;
6733
- --brand-glow: #A5AAFC;
6734
- --brand-purple: #C7D2FE;
6735
- --brand-vibrant: #6366F1;
6736
- --brand-emerald: #10B981;
6737
- --border-subtle: rgba(255, 255, 255, 0.10);
6738
- --border-default: rgba(255, 255, 255, 0.16);
6739
- --border-hover: rgba(255, 255, 255, 0.28);
6740
- --border-accent: rgba(129, 140, 248, 0.35);
6741
- --border-accent-hover: rgba(129, 140, 248, 0.50);
6742
- --btn-primary-bg: #4C3FC5;
6743
- --btn-primary-hover: #5A50D6;
6744
- --btn-primary-text: #ffffff;
6745
- --btn-cta-bg: #4C3FC5;
6746
- --btn-cta-text: #FFFFFF;
6747
- --code-keyword: #A5AAFC;
6748
- --code-string: #34D399;
6749
- --code-function: #6D9FFF;
6750
- --code-number: #FFB347;
6751
- --code-success: #10B981;
6752
- --code-comment: #606294;
6753
- --code-error: #FF4D6D;
6825
+ --code-header-bg: hsl(var(--hsl-background));
6826
+ --syntax-foreground: var(--text-primary);
6827
+ --syntax-variable: var(--text-secondary);
6828
+ --syntax-comment: var(--text-dim);
6829
+ --syntax-keyword: var(--tone-violet-icon);
6830
+ --syntax-meta: var(--accent-text);
6831
+ --syntax-function: var(--surface-info-text);
6832
+ --syntax-string: var(--surface-success-text);
6833
+ --syntax-number: var(--surface-warning-text);
6834
+ --syntax-error: var(--surface-danger-text);
6835
+ --code-keyword: var(--syntax-keyword);
6836
+ --code-string: var(--syntax-string);
6837
+ --code-function: var(--syntax-function);
6838
+ --code-number: var(--syntax-number);
6839
+ --code-success: var(--surface-success-text);
6840
+ --code-comment: var(--syntax-comment);
6841
+ --code-error: var(--syntax-error);
6754
6842
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
6755
6843
  --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
6756
6844
  --shadow-glow: none;
@@ -6791,10 +6879,10 @@
6791
6879
  --shell-inset-gutter: 0.5rem;
6792
6880
  --transcript-font-size: 1rem;
6793
6881
  --transcript-line-height: var(--line-height-base);
6794
- --font-size-xs: 0.6875rem;
6795
- --font-size-sm: 0.75rem;
6796
- --font-size-base: 0.9375rem;
6797
- --font-size-lg: 1rem;
6882
+ --font-size-xs: 0.75rem;
6883
+ --font-size-sm: 0.875rem;
6884
+ --font-size-base: 1rem;
6885
+ --font-size-lg: 1.125rem;
6798
6886
  --font-size-xl: 1.25rem;
6799
6887
  --font-size-2xl: 1.5rem;
6800
6888
  --font-size-3xl: 1.875rem;
@@ -6842,16 +6930,6 @@
6842
6930
  --tool-card-px: 0.75rem;
6843
6931
  --tool-card-py: 0.5rem;
6844
6932
  --tool-icon-size: 1.75rem;
6845
- --code-header-bg: hsl(var(--hsl-background));
6846
- --syntax-comment: #9ea2cc;
6847
- --syntax-keyword: #A78FFF;
6848
- --syntax-string: #10b981;
6849
- --syntax-function: #6D9FFF;
6850
- --syntax-number: #FFB347;
6851
- --syntax-meta: #8263FF;
6852
- --syntax-error: #FF4D6D;
6853
- --syntax-variable: #C4C0D8;
6854
- --syntax-foreground: #E8E6F6;
6855
6933
  --duration-instant: 90ms;
6856
6934
  --duration-fast: 150ms;
6857
6935
  --duration-base: 240ms;
@@ -6884,104 +6962,80 @@
6884
6962
  }
6885
6963
  [data-sandbox-theme="vault"]:where(:not(.dark)), [data-sandbox-theme="dawn"]:where(:not(.dark)), [data-theme="hospitality"]:where(:not(.dark)), [data-theme="website"]:where(:not(.dark)), [data-theme="light"], [data-theme="aubergine-light"], [data-theme="arena-light"], [data-theme="super-light"], [data-theme="tangle-light"], [data-theme="agents-light"], .light {
6886
6964
  color-scheme: light;
6887
- --code-header-bg: hsl(var(--hsl-muted));
6888
- @supports (color: color-mix(in lab, red, red)) {
6889
- --code-header-bg: color-mix(in srgb, hsl(var(--hsl-muted)) 50%, transparent);
6890
- }
6891
- --syntax-foreground: #24243a;
6892
- --syntax-comment: #6b7280;
6893
- --syntax-keyword: #7c3aed;
6894
- --syntax-string: #047857;
6895
- --syntax-function: #2563eb;
6896
- --syntax-number: #b45309;
6897
- --syntax-meta: #6d28d9;
6898
- --syntax-variable: #334155;
6899
- --syntax-error: #dc2626;
6900
- --md3-surface: #eceef3;
6965
+ --hsl-background: 223 23% 94%;
6966
+ --hsl-input: 225 29% 97%;
6967
+ --hsl-card: 0 0% 100%;
6968
+ --hsl-secondary: 228 25% 94.5%;
6969
+ --hsl-popover: var(--hsl-card);
6901
6970
  --md3-surface-dim: #dcdee6;
6971
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
6902
6972
  --md3-surface-bright: #ffffff;
6903
- --md3-surface-container-lowest: #ffffff;
6904
- --md3-surface-container-low: #f6f7fa;
6905
- --md3-surface-container: #ffffff;
6906
- --md3-surface-container-high: #f1f2f7;
6907
- --md3-surface-container-highest: #ffffff;
6908
- --md3-surface-variant: #f1f2f7;
6909
- --md3-on-surface: #2d2d2d;
6910
- --md3-on-surface-variant: #4c4c4c;
6911
- --md3-primary: #3E349E;
6912
- --md3-primary-dim: #352B88;
6913
- --md3-primary-container: #352B88;
6914
- --md3-on-primary: #ffffff;
6915
- --md3-on-primary-container: #9B93F0;
6916
- --md3-primary-fixed: #E8E5FF;
6917
- --md3-primary-fixed-dim: #C5C0F0;
6918
- --md3-secondary: #524A78;
6919
- --md3-secondary-dim: #3E3660;
6920
- --md3-secondary-container: #E8E5FF;
6921
- --md3-on-secondary: #ffffff;
6922
- --md3-on-secondary-container: #524A78;
6923
- --md3-tertiary: #065F46;
6924
- --md3-tertiary-container: #D1FAE5;
6925
- --md3-outline: #787878;
6926
- --md3-outline-variant: #c7c6d6;
6927
- --md3-error: #ba1a1a;
6928
- --md3-error-dim: #93000a;
6929
- --md3-error-container: #ffdad6;
6930
- --md3-on-error: #ffffff;
6931
- --md3-on-error-container: #93000a;
6973
+ --sidebar-background: var(--hsl-card);
6932
6974
  --md3-inverse-surface: #2e2e3e;
6933
- --md3-inverse-primary: #A5AAFC;
6934
6975
  --md3-inverse-on-surface: #f0f1f4;
6935
- --md3-surface-tint: #6366F1;
6936
- --hsl-background: 223 23% 94%;
6937
6976
  --hsl-foreground: 0 0% 17.6471%;
6938
- --hsl-card: 0 0% 100%;
6939
- --hsl-card-foreground: 0 0% 17.6471%;
6940
- --hsl-popover: 0 0% 100%;
6941
- --hsl-popover-foreground: 0 0% 17.6471%;
6942
- --hsl-primary: 246 54% 51%;
6943
- --hsl-primary-foreground: 0 0% 100%;
6944
- --hsl-secondary: 230 27% 96%;
6945
- --hsl-secondary-foreground: 0 0% 17.6471%;
6946
- --hsl-muted: 230 27% 96%;
6947
6977
  --hsl-muted-foreground: 0 0% 29.8039%;
6948
- --hsl-accent: 230 27% 96%;
6949
- --hsl-accent-foreground: 0 0% 17.6471%;
6950
- --hsl-destructive: 0 72% 41%;
6951
- --hsl-destructive-foreground: 0 0% 100%;
6978
+ --text-secondary: #3f3f3f;
6979
+ --text-muted: #4c4c4c;
6980
+ --text-dim: #686868;
6981
+ --md3-outline: #787878;
6952
6982
  --hsl-border: 244 16% 81%;
6953
- --hsl-input: 225 29% 97%;
6954
- --hsl-ring: 246 54% 51%;
6955
- --hsl-success: 160 84% 30%;
6956
- --hsl-warning: 41 96% 50%;
6957
- --hsl-info: 212 80% 50%;
6958
- --depth-1: #eceef3;
6959
- --depth-2: #ffffff;
6960
- --depth-3: #f1f2f7;
6961
- --depth-4: #ffffff;
6962
- --status-running: #059669;
6963
- --status-creating: #3E349E;
6964
- --status-stopped: #B45309;
6965
- --status-warm: #C05621;
6966
- --status-cold: #1D6FA4;
6967
- --status-error: #ba1a1a;
6968
- --status-deleted: #6B6B82;
6969
- --glass-bg: var(--depth-2);
6970
- --glass-bg-strong: var(--depth-1);
6971
- --glass-border: var(--border-subtle);
6972
- --glass-border-hover: var(--border-default);
6983
+ --border-hover: rgba(0, 0, 0, 0.24);
6984
+ --hsl-ring: var(--hsl-primary);
6985
+ --brand-primary: #6366F1;
6986
+ --brand-purple: var(--brand-primary);
6987
+ --accent-text: #3c32e9;
6988
+ --md3-primary: var(--accent-text);
6989
+ --md3-primary-dim: var(--btn-primary-bg);
6990
+ --md3-on-primary-container: #ffffff;
6991
+ --md3-primary-fixed: #E8E5FF;
6992
+ --md3-primary-fixed-dim: var(--md3-primary-fixed);
6993
+ @supports (color: color-mix(in lab, red, red)) {
6994
+ --md3-primary-fixed-dim: color-mix(in srgb, var(--md3-primary-fixed) 85%, var(--accent-text));
6995
+ }
6996
+ --md3-secondary: var(--accent-text);
6997
+ --md3-secondary-dim: var(--btn-primary-bg);
6998
+ --md3-secondary-container: var(--md3-primary-fixed);
6999
+ --md3-on-secondary: #ffffff;
7000
+ --md3-on-secondary-container: var(--accent-text);
7001
+ --md3-inverse-primary: #A5B4FC;
7002
+ --md3-surface-tint: var(--brand-primary);
7003
+ --accent-surface-soft: var(--btn-primary-bg);
7004
+ @supports (color: color-mix(in lab, red, red)) {
7005
+ --accent-surface-soft: color-mix(in srgb, var(--btn-primary-bg) 5%, transparent);
7006
+ }
7007
+ --accent-surface-strong: var(--btn-primary-bg);
7008
+ @supports (color: color-mix(in lab, red, red)) {
7009
+ --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 13%, transparent);
7010
+ }
7011
+ --bg-selection: var(--btn-primary-bg);
7012
+ @supports (color: color-mix(in lab, red, red)) {
7013
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 16%, transparent);
7014
+ }
7015
+ --border-accent: var(--btn-primary-hover);
7016
+ @supports (color: color-mix(in lab, red, red)) {
7017
+ --border-accent: color-mix(in srgb, var(--btn-primary-hover) 18%, transparent);
7018
+ }
7019
+ --border-accent-hover: var(--btn-primary-hover);
7020
+ @supports (color: color-mix(in lab, red, red)) {
7021
+ --border-accent-hover: color-mix(in srgb, var(--btn-primary-hover) 35%, transparent);
7022
+ }
7023
+ --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
7024
+ --tangle-gradient-text: var(--tangle-gradient);
7025
+ --accent-gradient-strong: var(--tangle-gradient);
7026
+ --hsl-success: 162.9 93.5% 24.3%;
7027
+ --hsl-warning: 25.9 90% 35.3%;
7028
+ --hsl-destructive: 0 73.7% 41.8%;
7029
+ --hsl-destructive-foreground: 0 0% 100%;
7030
+ --hsl-info: 201.3 96.3% 32.2%;
6973
7031
  --surface-success-bg: #ecfdf5;
6974
7032
  --surface-success-border: #a7f3d0;
6975
- --surface-success-text: #047857;
6976
7033
  --surface-warning-bg: #fffbeb;
6977
7034
  --surface-warning-border: #fde68a;
6978
- --surface-warning-text: #ab4f09;
6979
7035
  --surface-danger-bg: #fff1f2;
6980
7036
  --surface-danger-border: #fecdd3;
6981
- --surface-danger-text: #b91c1c;
6982
7037
  --surface-info-bg: #f0f9ff;
6983
7038
  --surface-info-border: #bae6fd;
6984
- --surface-info-text: #0369a1;
6985
7039
  --tone-violet-bg: #f7edfe;
6986
7040
  --tone-violet-bg-hover: #f2e2fc;
6987
7041
  --tone-violet-bg-selected: #ead5f9;
@@ -7052,86 +7106,15 @@
7052
7106
  --run-mix-failed: #cd342f;
7053
7107
  --run-mix-in-flight: #00679e;
7054
7108
  --run-mix-cancelled: #515367;
7055
- --surface-neutral-bg: var(--depth-3);
7056
- --surface-neutral-border: var(--border-subtle);
7057
- --surface-neutral-text: var(--text-muted);
7058
- --sidebar-background: 0 0% 100%;
7059
- --sidebar-foreground: 0 0% 17.6471%;
7060
- --sidebar-primary: 246 54% 51%;
7061
- --sidebar-primary-foreground: 0 0% 100%;
7062
- --sidebar-accent: 0 0% 94.902%;
7063
- --sidebar-accent-foreground: 0 0% 17.6471%;
7064
- --sidebar-border: 0 0% 81.5686%;
7065
- --sidebar-ring: 246 54% 51%;
7066
- --mesh-teal: transparent;
7067
- --mesh-violet: transparent;
7068
- --mesh-blue: transparent;
7069
- --bg-root: #eceef3;
7070
- --bg-dark: var(--depth-1);
7071
- --bg-card: var(--depth-2);
7072
- --bg-elevated: var(--depth-4);
7073
- --bg-section: var(--depth-1);
7074
- --bg-input: hsl(var(--hsl-input));
7075
- --bg-hover: rgba(76, 63, 198, 0.06);
7076
- --bg-selection: rgba(76, 63, 198, 0.16);
7077
- --text-primary: #2d2d2d;
7078
- --text-secondary: #3f3f3f;
7079
- --text-muted: #4c4c4c;
7080
- --text-dim: #686868;
7081
- --brand-primary: #6366F1;
7082
- --brand-strong: #2E2A5E;
7083
- --brand-strong-text: #ffffff;
7084
- --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
7085
- --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
7086
- --brand-cool: #818CF8;
7087
- --brand-glow: #A5AAFC;
7088
- --brand-purple: #6366F1;
7089
- --brand-vibrant: #6366F1;
7090
- --brand-emerald: #059669;
7091
- --border-subtle: rgba(0, 0, 0, 0.10);
7092
- --border-default: rgba(0, 0, 0, 0.14);
7093
- --border-hover: rgba(0, 0, 0, 0.24);
7094
- --border-accent: rgba(91, 78, 212, 0.18);
7095
- --border-accent-hover: rgba(91, 78, 212, 0.35);
7096
- --btn-primary-bg: #4C3FC5;
7097
- --btn-primary-hover: #5A50D6;
7098
- --btn-primary-text: #ffffff;
7099
- --btn-cta-bg: #4C3FC5;
7100
- --btn-cta-text: #ffffff;
7101
- --code-keyword: #3E349E;
7102
- --code-string: #059669;
7103
- --code-function: #352B88;
7104
- --code-number: #B45309;
7105
- --code-success: #059669;
7106
- --code-comment: #6B6E8A;
7107
- --code-error: #ba1a1a;
7109
+ --glass-bg-strong: var(--depth-1);
7110
+ --code-header-bg: hsl(var(--hsl-muted));
7111
+ @supports (color: color-mix(in lab, red, red)) {
7112
+ --code-header-bg: color-mix(in srgb, hsl(var(--hsl-muted)) 50%, transparent);
7113
+ }
7108
7114
  --shadow-card: 0 1px 2px rgba(25, 28, 36, 0.06);
7109
7115
  --shadow-dropdown: 0 8px 30px rgba(25, 28, 36, 0.10);
7110
7116
  --shadow-glow: none;
7111
7117
  --shadow-accent: 0 1px 2px rgba(25, 28, 36, 0.06);
7112
- --tangle-gradient: linear-gradient(135deg, #4F46E5, #5B4ED4);
7113
- --tangle-gradient-text: linear-gradient(135deg, #4F46E5, #5B4ED4);
7114
- --accent-gradient-strong: linear-gradient(135deg, #4F46E5, #5B4ED4);
7115
- --accent-surface-soft: rgba(76, 63, 198, 0.05);
7116
- --accent-surface-strong: rgba(76, 63, 198, 0.13);
7117
- --accent-text: #3c32e9;
7118
- --font-sans: "Inter Variable", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
7119
- --font-display: "Inter Variable", "Inter", "Geist", sans-serif;
7120
- --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
7121
- --radius: 0.5rem;
7122
- --radius-sm: 6px;
7123
- --radius-md: 8px;
7124
- --radius-lg: 10px;
7125
- --radius-xl: 12px;
7126
- --radius-pill: 999px;
7127
- --radius-full: 999px;
7128
- --radius-composer: 26px;
7129
- --radius-tag: 4px;
7130
- --radius-chip: 8px;
7131
- --radius-field: 12px;
7132
- --radius-panel: 16px;
7133
- --radius-cover: 20px;
7134
- --radius-sheet: 24px;
7135
7118
  }
7136
7119
  :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
7137
7120
  --focus-border: hsl(var(--hsl-ring) / 0.8);
@@ -7148,15 +7131,15 @@
7148
7131
  @supports (color: color-mix(in lab, red, red)) {
7149
7132
  --border-strong: color-mix(in srgb, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 20%);
7150
7133
  }
7151
- --hsl-raised: var(--hsl-card);
7152
- --hsl-raised-2: var(--hsl-card);
7134
+ --hsl-raised: var(--hsl-secondary);
7135
+ --hsl-raised-2: var(--hsl-popover);
7153
7136
  --well-page: hsl(var(--hsl-background));
7154
7137
  @supports (color: color-mix(in lab, red, red)) {
7155
7138
  --well-page: color-mix(in oklab, hsl(var(--hsl-background)) 70%, black);
7156
7139
  }
7157
7140
  --well-card: var(--well-page);
7158
- --well-raised: var(--well-page);
7159
- --well-raised-2: var(--well-page);
7141
+ --well-raised: hsl(var(--hsl-card));
7142
+ --well-raised-2: var(--well-raised);
7160
7143
  --well: var(--well-page);
7161
7144
  --field-border: hsl(var(--hsl-border));
7162
7145
  @supports (color: color-mix(in lab, red, red)) {
@@ -7164,7 +7147,7 @@
7164
7147
  }
7165
7148
  --shadow-raised: var(--shadow-card);
7166
7149
  --shadow-well: 0 0 0 0 transparent;
7167
- --edge-highlight: 0 0 0 0 transparent;
7150
+ --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
7168
7151
  --ix-hover: 0 0 0 1px hsl(var(--hsl-ring) / 0.45), 0 0 0 4px hsl(var(--hsl-ring) / 0.16);
7169
7152
  --ix-hover-border: hsl(var(--hsl-ring) / 0.7);
7170
7153
  --ix-press: 0 0 0 1px hsl(var(--hsl-ring) / 0.95), 0 0 0 4px hsl(var(--hsl-ring) / 0.3);
@@ -7178,8 +7161,15 @@
7178
7161
  --ix-hover-bg: hsl(var(--hsl-ring) / 0.07);
7179
7162
  --well-page: hsl(var(--hsl-card));
7180
7163
  --well-card: hsl(var(--hsl-background));
7181
- --well-raised: hsl(var(--hsl-background));
7182
- --well-raised-2: hsl(var(--hsl-background));
7164
+ --well-raised-2: var(--well-card);
7165
+ --edge-highlight: 0 0 0 0 transparent;
7166
+ }
7167
+ [data-theme="aubergine"], [data-theme="aubergine-light"], [data-theme="arena"], [data-theme="arena-light"], [data-theme="super"], [data-theme="super-light"], [data-theme="tangle-light"], [data-theme="agents"], [data-theme="agents-light"], [data-theme="website"], [data-theme="intelligence"] {
7168
+ --hsl-raised: var(--hsl-card);
7169
+ --hsl-raised-2: var(--hsl-card);
7170
+ --well-raised: var(--well-card);
7171
+ --well-raised-2: var(--well-card);
7172
+ --edge-highlight: 0 0 0 0 transparent;
7183
7173
  }
7184
7174
  [data-slot="card"] :where(*) {
7185
7175
  --card: var(--hsl-raised);
@@ -7305,7 +7295,7 @@
7305
7295
  --text-hero: var(--font-size-hero);
7306
7296
  --text-page: var(--font-size-3xl);
7307
7297
  --text-section: var(--font-size-xl);
7308
- --text-eyebrow: var(--font-size-sm);
7298
+ --text-eyebrow: var(--font-size-xs);
7309
7299
  --text-control-sm: var(--control-text-sm);
7310
7300
  --text-control-md: var(--control-text-md);
7311
7301
  --text-control-lg: var(--control-text-lg);
@@ -7315,6 +7305,15 @@
7315
7305
  --spacing-control-md: var(--control-height);
7316
7306
  --spacing-control-lg: var(--control-height-lg);
7317
7307
  --spacing-shell-header: var(--shell-header-height);
7308
+ --color-brand: var(--brand-primary);
7309
+ --color-brand-dim: var(--btn-primary-bg);
7310
+ --color-brand-cool: var(--brand-cool);
7311
+ --color-brand-glow: var(--brand-glow);
7312
+ --color-brand-emerald: var(--brand-emerald);
7313
+ --color-status-running: var(--status-running);
7314
+ --color-status-creating: var(--status-creating);
7315
+ --color-status-stopped: var(--status-stopped);
7316
+ --color-status-error: var(--status-error);
7318
7317
  --color-scrim: var(--scrim);
7319
7318
  --color-scrim-strong: var(--scrim-strong);
7320
7319
  --color-on-media: var(--on-media);
@@ -7656,50 +7655,6 @@
7656
7655
  --md3-on-surface: var(--text-primary);
7657
7656
  --md3-on-surface-variant: var(--text-muted);
7658
7657
  }
7659
- [data-theme="tangle-dark"] {
7660
- --hsl-background: 240 33% 6%;
7661
- --hsl-foreground: 0 0% 90.1961%;
7662
- --hsl-card: 244 23% 12%;
7663
- --hsl-card-foreground: 0 0% 90.1961%;
7664
- --hsl-popover: 247 23% 21%;
7665
- --hsl-popover-foreground: 0 0% 90.1961%;
7666
- --hsl-primary: 246 54% 51%;
7667
- --hsl-primary-foreground: 0 0% 100%;
7668
- --hsl-secondary: 249 24% 16%;
7669
- --hsl-secondary-foreground: 0 0% 90.1961%;
7670
- --hsl-muted: 249 24% 16%;
7671
- --hsl-muted-foreground: 240 5% 68%;
7672
- --hsl-accent: 249 24% 16%;
7673
- --hsl-accent-foreground: 0 0% 90.1961%;
7674
- --hsl-destructive: 0 90% 77%;
7675
- --hsl-destructive-foreground: 0 60% 10%;
7676
- --hsl-border: 243 20% 20%;
7677
- --hsl-input: 244 29% 9%;
7678
- --hsl-ring: 233 100% 87%;
7679
- --depth-1: #0a0a14;
7680
- --depth-2: #191826;
7681
- --depth-3: #221f33;
7682
- --depth-4: #2c2942;
7683
- --bg-root: #0a0a14;
7684
- --bg-card: var(--depth-2);
7685
- --bg-input: hsl(var(--hsl-input));
7686
- --md3-surface-container-lowest: #040408;
7687
- --md3-surface-container-low: #12111f;
7688
- --md3-surface-container: #191826;
7689
- --md3-surface-container-high: #221f33;
7690
- --md3-surface-container-highest: #2c2942;
7691
- --md3-outline-variant: #2a293d;
7692
- --border-subtle: rgba(255, 255, 255, 0.10);
7693
- --border-default: rgba(255, 255, 255, 0.16);
7694
- --border-hover: rgba(255, 255, 255, 0.28);
7695
- --accent-text: #A5B4FC;
7696
- --brand-primary: #7C6CF6;
7697
- --brand-glow: #A5AAFC;
7698
- --text-primary: #e6e6e6;
7699
- --text-secondary: #c7c7c7;
7700
- --text-muted: #b5b5b5;
7701
- --text-dim: #a5a5a5;
7702
- }
7703
7658
  [data-theme="tangle-light"] {
7704
7659
  --hsl-background: 240 33% 98%;
7705
7660
  --hsl-foreground: 245 32% 14%;
@@ -7794,7 +7749,7 @@
7794
7749
  --hsl-border: 107 8.7% 79.8%;
7795
7750
  --hsl-input: 0 0% 100%;
7796
7751
  --hsl-ring: 148 28% 43%;
7797
- --hsl-destructive: 0 72% 41%;
7752
+ --hsl-destructive: 0 73.7% 41.8%;
7798
7753
  --hsl-raised: 110 18.7% 93.7%;
7799
7754
  --hsl-raised-2: 0 0% 100%;
7800
7755
  --sidebar-background: 108 21.7% 95.5%;