npm - @uipath/apollo-wind - Versions diffs - 2.18.0 → 2.19.1 - Mend

@uipath/apollo-wind 2.18.0 → 2.19.1

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.

Files changed (14) hide show

package/dist/components/ui/combobox.cjs +1 -1
package/dist/components/ui/combobox.js +1 -1
package/dist/components/ui/index.cjs +22 -22
package/dist/components/ui/input.cjs +1 -1
package/dist/components/ui/input.js +1 -1
package/dist/components/ui/multi-select.cjs +2 -2
package/dist/components/ui/multi-select.js +2 -2
package/dist/components/ui/select.cjs +1 -1
package/dist/components/ui/select.js +1 -1
package/dist/components/ui/textarea.cjs +1 -1
package/dist/components/ui/textarea.js +1 -1
package/dist/styles.css +778 -404
package/dist/tailwind.css +109 -601
package/package.json +4 -4

package/dist/styles.css CHANGED Viewed

@@ -278,7 +278,13 @@
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
     --color-brand: var(--brand);
+    --color-foreground-secondary: var(--foreground-secondary);
+    --color-foreground-hover: var(--foreground-hover);
     --color-foreground-inverse: var(--foreground-inverse);
+    --color-foreground-on-accent: var(--foreground-on-accent);
+    --color-border-muted: var(--border-muted);
+    --color-border-deep: var(--border-deep);
+    --color-border-inverse: var(--border-inverse);
     --color-border-hover: var(--border-hover);
     --color-background: var(--background);
     --color-foreground: var(--foreground);
@@ -338,10 +344,12 @@
     --color-info-foreground: var(--color-info-foreground);
     --color-info-icon: var(--color-info-icon);
     --color-info-icon-inverse: var(--color-info-icon-inverse);
+    --color-info-text: var(--info);
     --color-info-foreground-inverse: var(--color-info-foreground-inverse);
     --color-info-background: var(--info-background);
     --color-success-icon: var(--color-success-icon);
     --color-success-icon-inverse: var(--color-success-icon-inverse);
+    --color-success-text: var(--success);
     --color-success-background: var(--success-background);
     --color-success-foreground-inverse: var(--color-success-foreground-inverse);
     --color-warning-icon: var(--color-warning-icon);
@@ -5936,6 +5944,11 @@
       border-color: transparent;
     }
   }
+  .future\:bg-surface-overlay {
+    :is(.future-dark, .future-light) & {
+      background-color: var(--surface-overlay);
+    }
+  }
   .future\:bg-surface-raised {
     :is(.future-dark, .future-light) & {
       background-color: var(--surface-raised);
@@ -6028,6 +6041,15 @@
       }
     }
   }
+  .future\:hover\:bg-surface-hover {
+    :is(.future-dark, .future-light) & {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--surface-hover);
+        }
+      }
+    }
+  }
   .future\:hover\:bg-surface-overlay {
     :is(.future-dark, .future-light) & {
       &:hover {
@@ -6709,6 +6731,7 @@
   --color-red-600: #b6242b;
   --color-red-700: #a6040a;
   --color-red-800: #6c0004;
+  --color-red-950: #460809;
   --color-red-100-contrast: #182027;
   --color-red-200-contrast: #182027;
   --color-red-300-contrast: #182027;
@@ -6922,478 +6945,847 @@
   --color-background-light-hc: #ffffff;
   --color-background-dark: #182027;
   --color-background-dark-hc: #182027;
+  --color-background-future-dark: #09090b;
+  --color-background-future-light: #fafafa;
   --color-background-secondary-light: #f4f5f7;
   --color-background-secondary-light-hc: #f4f5f7;
   --color-background-secondary-dark: #273139;
   --color-background-secondary-dark-hc: #273139;
+  --color-background-secondary-future-dark: #18181b;
+  --color-background-secondary-future-light: #f4f4f5;
   --color-background-inverse-light: #182027;
   --color-background-inverse-light-hc: #182027;
   --color-background-inverse-dark: #f8f9fa;
   --color-background-inverse-dark-hc: #f8f9fa;
+  --color-background-inverse-future-dark: #fafafa;
+  --color-background-inverse-future-light: #09090b;
   --color-background-gray-light: #cfd8dd;
   --color-background-gray-light-hc: #cfd8dd;
   --color-background-gray-dark: #526069;
   --color-background-gray-dark-hc: #374652;
+  --color-background-gray-future-dark: #52525c;
+  --color-background-gray-future-light: #d4d4d8;
   --color-background-disabled-light: #ecedee;
   --color-background-disabled-light-hc: #ecedee;
   --color-background-disabled-dark: #273139;
   --color-background-disabled-dark-hc: #273139;
+  --color-background-disabled-future-dark: #18181b;
+  --color-background-disabled-future-light: #e4e4e7;
   --color-background-highlight-light: #fee3dc;
   --color-background-highlight-light-hc: #fee3dc;
   --color-background-highlight-dark: #3c383c;
   --color-background-highlight-dark-hc: #3c383c;
+  --color-background-highlight-future-dark: #053345;
+  --color-background-highlight-future-light: #cefafe;
   --color-background-raised-light: #ffffff;
   --color-background-raised-light-hc: #ffffff;
   --color-background-raised-dark: #273139;
   --color-background-raised-dark-hc: #273139;
+  --color-background-raised-future-dark: #18181b;
+  --color-background-raised-future-light: #f4f4f5;
   --color-background-edit-light: #ffffff;
   --color-background-edit-light-hc: #ffffff;
   --color-background-edit-dark: #00000099;
   --color-background-edit-dark-hc: #00000099;
+  --color-background-edit-future-dark: #00000099;
+  --color-background-edit-future-light: #ffffff;
   --color-background-gray-emp-light: #a4b1b8;
   --color-background-gray-emp-light-hc: #a4b1b8;
   --color-background-gray-emp-dark: #8a97a0;
   --color-background-gray-emp-dark-hc: #a4b1b8;
+  --color-background-gray-emp-future-dark: #71717b;
+  --color-background-gray-emp-future-light: #9f9fa9;
   --color-background-hover-light: #52606914;
   --color-background-hover-light-hc: #52606914;
   --color-background-hover-dark: #cfd8dd14;
   --color-background-hover-dark-hc: #a4b1b814;
+  --color-background-hover-future-dark: #d4d4d814;
+  --color-background-hover-future-light: #52525c14;
   --color-background-pressed-light: #5260691f;
   --color-background-pressed-light-hc: #5260691f;
   --color-background-pressed-dark: #cfd8dd1f;
   --color-background-pressed-dark-hc: #cfd8dd1f;
+  --color-background-pressed-future-dark: #d4d4d81f;
+  --color-background-pressed-future-light: #52525c1f;
   --color-background-selected-light: #e9f1fa;
   --color-background-selected-light-hc: #e9f1fa;
   --color-background-selected-dark: #374652;
   --color-background-selected-dark-hc: #374652;
+  --color-background-selected-future-dark: #3f3f46;
+  --color-background-selected-future-light: #d4d4d8;
   --color-selection-indicator-light: #0067df;
   --color-selection-indicator-light-hc: #00489d;
   --color-selection-indicator-dark: #66adff;
   --color-selection-indicator-dark-hc: #dae8fa;
+  --color-selection-indicator-future-dark: #00b8db;
+  --color-selection-indicator-future-light: #00b8db;
   --color-notification-badge-light: #000000;
   --color-notification-badge-light-hc: #000000;
   --color-notification-badge-dark: #ffffff;
   --color-notification-badge-dark-hc: #ffffff;
+  --color-notification-badge-future-dark: #ffffff;
+  --color-notification-badge-future-light: #000000;
   --color-notification-indicator-light: #da3b11;
   --color-notification-indicator-light-hc: #832107;
   --color-notification-indicator-dark: #ff8f70;
   --color-notification-indicator-dark-hc: #ff8f70;
+  --color-notification-indicator-future-dark: #ff637e;
+  --color-notification-indicator-future-light: #ec003f;
   --color-hover-light: #e9f1fa;
   --color-hover-light-hc: #e9f1fa;
   --color-hover-dark: #374652;
   --color-hover-dark-hc: #273139;
+  --color-hover-future-dark: #3f3f46;
+  --color-hover-future-light: #d4d4d8;
   --color-curtain-light: #000000;
   --color-curtain-light-hc: #000000;
   --color-curtain-dark: #000000;
   --color-curtain-dark-hc: #000000;
+  --color-curtain-future-dark: #000000;
+  --color-curtain-future-light: #000000;
   --color-border-light: #a4b1b8;
   --color-border-light-hc: #6b7882;
   --color-border-dark: #8a97a0;
   --color-border-dark-hc: #bbc7cd;
+  --color-border-future-dark: #3f3f46;
+  --color-border-future-light: #d4d4d8;
   --color-border-disabled-light: #cfd8dd;
   --color-border-disabled-light-hc: #cfd8dd;
   --color-border-disabled-dark: #526069;
   --color-border-disabled-dark-hc: #8a97a0;
+  --color-border-disabled-future-dark: #27272a;
+  --color-border-disabled-future-light: #e4e4e7;
   --color-border-grid-light: #f4f5f7;
   --color-border-grid-light-hc: #f4f5f7;
   --color-border-grid-dark: #273139;
   --color-border-grid-dark-hc: #273139;
+  --color-border-grid-future-dark: #27272a;
+  --color-border-grid-future-light: #e4e4e7;
   --color-border-de-emp-light: #cfd8dd;
   --color-border-de-emp-light-hc: #a4b1b8;
   --color-border-de-emp-dark: #526069;
   --color-border-de-emp-dark-hc: #a4b1b8;
+  --color-border-de-emp-future-dark: #27272a;
+  --color-border-de-emp-future-light: #e4e4e7;
   --color-selection-light: #da3b11;
   --color-selection-light-hc: #832107;
   --color-selection-dark: #ff8f70;
   --color-selection-dark-hc: #fda891;
+  --color-selection-future-dark: #00d3f2;
+  --color-selection-future-light: #0092b8;
   --color-logo-light: #fa4616;
   --color-logo-light-hc: #fa4616;
   --color-logo-dark: #ffffff;
   --color-logo-dark-hc: #ffffff;
+  --color-logo-future-dark: #ffffff;
+  --color-logo-future-light: #000000;
   --color-foreground-light: #273139;
   --color-foreground-light-hc: #273139;
   --color-foreground-dark: #f4f5f7;
   --color-foreground-dark-hc: #f4f5f7;
+  --color-foreground-future-dark: #fafafa;
+  --color-foreground-future-light: #09090b;
   --color-foreground-light-light: #6b7882;
   --color-foreground-light-light-hc: #374652;
   --color-foreground-light-dark: #a4b1b8;
   --color-foreground-light-dark-hc: #bbc7cd;
+  --color-foreground-light-future-dark: #9f9fa9;
+  --color-foreground-light-future-light: #71717b;
   --color-foreground-emp-light: #182027;
   --color-foreground-emp-light-hc: #182027;
   --color-foreground-emp-dark: #f8f9fa;
   --color-foreground-emp-dark-hc: #f8f9fa;
+  --color-foreground-emp-future-dark: #ffffff;
+  --color-foreground-emp-future-light: #000000;
   --color-foreground-de-emp-light: #526069;
   --color-foreground-de-emp-light-hc: #374652;
   --color-foreground-de-emp-dark: #cfd8dd;
   --color-foreground-de-emp-dark-hc: #cfd8dd;
+  --color-foreground-de-emp-future-dark: #9f9fa9;
+  --color-foreground-de-emp-future-light: #71717b;
   --color-foreground-disable-light: #8a97a0;
   --color-foreground-disable-light-hc: #8a97a0;
   --color-foreground-disable-dark: #a4b1b8;
   --color-foreground-disable-dark-hc: #a4b1b8;
+  --color-foreground-disable-future-dark: #71717b;
+  --color-foreground-disable-future-light: #9f9fa9;
   --color-foreground-inverse-light: #f8f9fa;
   --color-foreground-inverse-light-hc: #f8f9fa;
   --color-foreground-inverse-dark: #182027;
   --color-foreground-inverse-dark-hc: #182027;
+  --color-foreground-inverse-future-dark: #09090b;
+  --color-foreground-inverse-future-light: #fafafa;
   --color-foreground-highlight-light: #da3b11;
   --color-foreground-highlight-light-hc: #832107;
   --color-foreground-highlight-dark: #ff8f70;
   --color-foreground-highlight-dark-hc: #ff8f70;
+  --color-foreground-highlight-future-dark: #00d3f2;
+  --color-foreground-highlight-future-light: #0092b8;
   --color-foreground-highlight-selected-light: #da3b111a;
   --color-foreground-highlight-selected-light-hc: #8321071a;
   --color-foreground-highlight-selected-dark: #ff8f701a;
   --color-foreground-highlight-selected-dark-hc: #ff8f701a;
+  --color-foreground-highlight-selected-future-dark: #00d3f21a;
+  --color-foreground-highlight-selected-future-light: #0092b81a;
   --color-foreground-highlight-selected-hover-light: #da3b1126;
   --color-foreground-highlight-selected-hover-light-hc: #83210726;
   --color-foreground-highlight-selected-hover-dark: #ff8f7026;
   --color-foreground-highlight-selected-hover-dark-hc: #ff8f7026;
+  --color-foreground-highlight-selected-hover-future-dark: #00d3f226;
+  --color-foreground-highlight-selected-hover-future-light: #0092b826;
   --color-foreground-link-light: #0067df;
   --color-foreground-link-light-hc: #00489d;
   --color-foreground-link-dark: #66adff;
   --color-foreground-link-dark-hc: #87bfff;
+  --color-foreground-link-future-dark: #00d3f2;
+  --color-foreground-link-future-light: #007595;
   --color-foreground-link-pressed-light: #00489d;
   --color-foreground-link-pressed-light-hc: #00336f;
   --color-foreground-link-pressed-dark: #badaff;
   --color-foreground-link-pressed-dark-hc: #badaff;
+  --color-foreground-link-pressed-future-dark: #53eafd;
+  --color-foreground-link-pressed-future-light: #005f78;
   --color-foreground-inv-de-emp-light: #cfd8dd;
   --color-foreground-inv-de-emp-light-hc: #cfd8dd;
   --color-foreground-inv-de-emp-dark: #526069;
   --color-foreground-inv-de-emp-dark-hc: #374652;
+  --color-foreground-inv-de-emp-future-dark: #52525c;
+  --color-foreground-inv-de-emp-future-light: #d4d4d8;
   --color-primary-light: #0067df;
   --color-primary-light-hc: #00489d;
   --color-primary-dark: #66adff;
   --color-primary-dark-hc: #badaff;
+  --color-primary-future-dark: #00b8db;
+  --color-primary-future-light: #00b8db;
   --color-primary-lighter-light: #badaff;
   --color-primary-lighter-light-hc: #badaff;
   --color-primary-lighter-dark: #00489d;
   --color-primary-lighter-dark-hc: #00336f;
+  --color-primary-lighter-future-dark: #53eafd;
+  --color-primary-lighter-future-light: #cefafe;
   --color-primary-darker-light: #00489d;
   --color-primary-darker-light-hc: #11508d;
   --color-primary-darker-dark: #badaff;
   --color-primary-darker-dark-hc: #badaff;
+  --color-primary-darker-future-dark: #0092b8;
+  --color-primary-darker-future-light: #007595;
   --color-primary-hover-light: #0056ba;
   --color-primary-hover-light-hc: #00336f;
   --color-primary-hover-dark: #87bfff;
   --color-primary-hover-dark-hc: #87bfff;
+  --color-primary-hover-future-dark: #00d3f2;
+  --color-primary-hover-future-light: #0092b8;
   --color-primary-focused-light: #0056ba;
   --color-primary-focused-light-hc: #00336f;
   --color-primary-focused-dark: #87bfff;
   --color-primary-focused-dark-hc: #87bfff;
+  --color-primary-focused-future-dark: #00d3f2;
+  --color-primary-focused-future-light: #0092b8;
   --color-primary-pressed-light: #0067df;
   --color-primary-pressed-light-hc: #00336f;
   --color-primary-pressed-dark: #66adff;
   --color-primary-pressed-dark-hc: #66adff;
+  --color-primary-pressed-future-dark: #00b8db;
+  --color-primary-pressed-future-light: #00b8db;
   --color-secondary-focused-light: #e9f1fa;
   --color-secondary-focused-light-hc: #e9f1fa;
   --color-secondary-focused-dark: #374652;
   --color-secondary-focused-dark-hc: #273139;
+  --color-secondary-focused-future-dark: #3f3f46;
+  --color-secondary-focused-future-light: #cefafe;
   --color-secondary-pressed-light: #b2d2f3;
   --color-secondary-pressed-light-hc: #b2d2f3;
   --color-secondary-pressed-dark: #11508d;
   --color-secondary-pressed-dark-hc: #11508d;
+  --color-secondary-pressed-future-dark: #104e64;
+  --color-secondary-pressed-future-light: #a2f4fd;
   --color-chip-default-background-light: #cfd8dd;
   --color-chip-default-background-light-hc: #cfd8dd;
   --color-chip-default-background-dark: #526069;
   --color-chip-default-background-dark-hc: #526069;
+  --color-chip-default-background-future-dark: #52525c;
+  --color-chip-default-background-future-light: #d4d4d8;
   --color-chip-error-background-light: #fff0f1;
   --color-chip-error-background-light-hc: #fff0f1;
   --color-chip-error-background-dark: #000000;
   --color-chip-error-background-dark-hc: #000000;
+  --color-chip-error-background-future-dark: #460809;
+  --color-chip-error-background-future-light: #fff0f1;
   --color-chip-warning-background-light: #fff3db;
   --color-chip-warning-background-light-hc: #fff3db;
   --color-chip-warning-background-dark: #000000;
   --color-chip-warning-background-dark-hc: #000000;
+  --color-chip-warning-background-future-dark: #461901;
+  --color-chip-warning-background-future-light: #fef3c6;
   --color-chip-info-background-light: #e9f1fa;
   --color-chip-info-background-light-hc: #e9f1fa;
   --color-chip-info-background-dark: #000000;
   --color-chip-info-background-dark-hc: #000000;
+  --color-chip-info-background-future-dark: #053345;
+  --color-chip-info-background-future-light: #cefafe;
   --color-chip-success-background-light: #eeffe5;
   --color-chip-success-background-light-hc: #eeffe5;
   --color-chip-success-background-dark: #000000;
   --color-chip-success-background-dark-hc: #000000;
+  --color-chip-success-background-future-dark: #002c22;
+  --color-chip-success-background-future-light: #d0fae5;
   --color-error-icon-light: #cc3d45;
   --color-error-icon-light-hc: #a6040a;
   --color-error-icon-dark: #ff8484;
   --color-error-icon-dark-hc: #ffadad;
+  --color-error-icon-future-dark: #ff8484;
+  --color-error-icon-future-light: #cc3d45;
   --color-error-icon-inverse-light: #ff8484;
   --color-error-icon-inverse-light-hc: #ff8484;
   --color-error-icon-inverse-dark: #cc3d45;
   --color-error-icon-inverse-dark-hc: #b6242b;
+  --color-error-icon-inverse-future-dark: #cc3d45;
+  --color-error-icon-inverse-future-light: #ff8484;
   --color-error-text-light: #a6040a;
   --color-error-text-light-hc: #a6040a;
   --color-error-text-dark: #ff8484;
   --color-error-text-dark-hc: #ffadad;
+  --color-error-text-future-dark: #ff8484;
+  --color-error-text-future-light: #a6040a;
   --color-error-background-light: #fff0f1;
   --color-error-background-light-hc: #fff0f1;
   --color-error-background-dark: #000000;
   --color-error-background-dark-hc: #000000;
+  --color-error-background-future-dark: #460809;
+  --color-error-background-future-light: #fff0f1;
   --color-error-foreground-inverse-light: #ff8484;
   --color-error-foreground-inverse-light-hc: #ff8484;
   --color-error-foreground-inverse-dark: #cc3d45;
   --color-error-foreground-inverse-dark-hc: #b6242b;
+  --color-error-foreground-inverse-future-dark: #cc3d45;
+  --color-error-foreground-inverse-future-light: #ff8484;
   --color-info-foreground-light: #1665b3;
   --color-info-foreground-light-hc: #11508d;
   --color-info-foreground-dark: #42a1ff;
   --color-info-foreground-dark-hc: #42a1ff;
+  --color-info-foreground-future-dark: #00d3f2;
+  --color-info-foreground-future-light: #007595;
   --color-info-icon-light: #1976d2;
   --color-info-icon-light-hc: #11508d;
   --color-info-icon-dark: #42a1ff;
   --color-info-icon-dark-hc: #8cc2f8;
+  --color-info-icon-future-dark: #00d3f2;
+  --color-info-icon-future-light: #0092b8;
   --color-info-icon-inverse-light: #42a1ff;
   --color-info-icon-inverse-light-hc: #42a1ff;
   --color-info-icon-inverse-dark: #1976d2;
   --color-info-icon-inverse-dark-hc: #0056ba;
+  --color-info-icon-inverse-future-dark: #0092b8;
+  --color-info-icon-inverse-future-light: #00d3f2;
   --color-info-text-light: #1665b3;
   --color-info-text-light-hc: #11508d;
   --color-info-text-dark: #42a1ff;
   --color-info-text-dark-hc: #42a1ff;
+  --color-info-text-future-dark: #00d3f2;
+  --color-info-text-future-light: #007595;
   --color-info-foreground-inverse-light: #42a1ff;
   --color-info-foreground-inverse-light-hc: #42a1ff;
   --color-info-foreground-inverse-dark: #1976d2;
   --color-info-foreground-inverse-dark-hc: #1976d2;
+  --color-info-foreground-inverse-future-dark: #0092b8;
+  --color-info-foreground-inverse-future-light: #00d3f2;
   --color-info-background-light: #e9f1fa;
   --color-info-background-light-hc: #e9f1fa;
   --color-info-background-dark: #000000;
   --color-info-background-dark-hc: #000000;
+  --color-info-background-future-dark: #053345;
+  --color-info-background-future-light: #cefafe;
   --color-success-icon-light: #038108;
   --color-success-icon-light-hc: #005603;
   --color-success-icon-dark: #74c94b;
   --color-success-icon-dark-hc: #74c94b;
+  --color-success-icon-future-dark: #00d492;
+  --color-success-icon-future-light: #007a55;
   --color-success-icon-inverse-light: #74c94b;
   --color-success-icon-inverse-light-hc: #74c94b;
   --color-success-icon-inverse-dark: #038108;
   --color-success-icon-inverse-dark-hc: #6eb84a;
+  --color-success-icon-inverse-future-dark: #007a55;
+  --color-success-icon-inverse-future-light: #00d492;
   --color-success-text-light: #038108;
   --color-success-text-light-hc: #005603;
   --color-success-text-dark: #74c94b;
   --color-success-text-dark-hc: #74c94b;
+  --color-success-text-future-dark: #00d492;
+  --color-success-text-future-light: #007a55;
   --color-success-background-light: #eeffe5;
   --color-success-background-light-hc: #eeffe5;
   --color-success-background-dark: #000000;
   --color-success-background-dark-hc: #000000;
+  --color-success-background-future-dark: #002c22;
+  --color-success-background-future-light: #d0fae5;
   --color-success-foreground-inverse-light: #74c94b;
   --color-success-foreground-inverse-light-hc: #74c94b;
   --color-success-foreground-inverse-dark: #6eb84a;
   --color-success-foreground-inverse-dark-hc: #6eb84a;
+  --color-success-foreground-inverse-future-dark: #007a55;
+  --color-success-foreground-inverse-future-light: #00d492;
   --color-warning-icon-light: #ffb40e;
   --color-warning-icon-light-hc: #805a07;
   --color-warning-icon-dark: #ffbb27;
   --color-warning-icon-dark-hc: #ffbb27;
+  --color-warning-icon-future-dark: #ffb900;
+  --color-warning-icon-future-light: #fe9a00;
   --color-warning-icon-inverse-light: #ffbb27;
   --color-warning-icon-inverse-light-hc: #ffbb27;
   --color-warning-icon-inverse-dark: #ffb40e;
   --color-warning-icon-inverse-dark-hc: #ffb40e;
+  --color-warning-icon-inverse-future-dark: #fe9a00;
+  --color-warning-icon-inverse-future-light: #ffb900;
   --color-warning-text-light: #9e6100;
   --color-warning-text-light-hc: #273139;
   --color-warning-text-dark: #ffe19e;
   --color-warning-text-dark-hc: #ffe19e;
+  --color-warning-text-future-dark: #ffb900;
+  --color-warning-text-future-light: #bb4d00;
   --color-warning-background-light: #fff3db;
   --color-warning-background-light-hc: #fff3db;
   --color-warning-background-dark: #000000;
   --color-warning-background-dark-hc: #000000;
+  --color-warning-background-future-dark: #461901;
+  --color-warning-background-future-light: #fef3c6;
   --color-warning-foreground-inverse-light: #ffbb27;
   --color-warning-foreground-inverse-light-hc: #ffbb27;
   --color-warning-foreground-inverse-dark: #ffb40e;
   --color-warning-foreground-inverse-dark-hc: #ffb40e;
+  --color-warning-foreground-inverse-future-dark: #fe9a00;
+  --color-warning-foreground-inverse-future-light: #ffb900;
   --color-icon-default-light: #526069;
   --color-icon-default-light-hc: #374652;
   --color-icon-default-dark: #cfd8dd;
   --color-icon-default-dark-hc: #cfd8dd;
+  --color-icon-default-future-dark: #9f9fa9;
+  --color-icon-default-future-light: #52525c;
   --color-icon-inverted-default-light: #cfd8dd;
   --color-icon-inverted-default-light-hc: #cfd8dd;
   --color-icon-inverted-default-dark: #526069;
   --color-icon-inverted-default-dark-hc: #374652;
+  --color-icon-inverted-default-future-dark: #52525c;
+  --color-icon-inverted-default-future-light: #d4d4d8;
   --color-toggle-off-hover-light: #52606914;
   --color-toggle-off-hover-light-hc: #52606914;
   --color-toggle-off-hover-dark: #cfd8dd14;
   --color-toggle-off-hover-dark-hc: #cfd8dd14;
+  --color-toggle-off-hover-future-dark: #d4d4d814;
+  --color-toggle-off-hover-future-light: #52525c14;
   --color-toggle-off-focus-light: #52606914;
   --color-toggle-off-focus-light-hc: #52606914;
   --color-toggle-off-focus-dark: #cfd8dd14;
   --color-toggle-off-focus-dark-hc: #cfd8dd14;
+  --color-toggle-off-focus-future-dark: #d4d4d814;
+  --color-toggle-off-focus-future-light: #52525c14;
   --color-toggle-off-pressed-light: #5260691f;
   --color-toggle-off-pressed-light-hc: #5260691f;
   --color-toggle-off-pressed-dark: #cfd8dd1f;
   --color-toggle-off-pressed-dark-hc: #cfd8dd1f;
+  --color-toggle-off-pressed-future-dark: #d4d4d81f;
+  --color-toggle-off-pressed-future-light: #52525c1f;
   --color-toggle-on-hover-light: #0067df14;
   --color-toggle-on-hover-light-hc: #0067df14;
   --color-toggle-on-hover-dark: #66adff14;
   --color-toggle-on-hover-dark-hc: #66adff14;
+  --color-toggle-on-hover-future-dark: #00b8db14;
+  --color-toggle-on-hover-future-light: #00b8db14;
   --color-toggle-on-focus-light: #0067df14;
   --color-toggle-on-focus-light-hc: #0067df14;
   --color-toggle-on-focus-dark: #66adff14;
   --color-toggle-on-focus-dark-hc: #66adff14;
+  --color-toggle-on-focus-future-dark: #00b8db14;
+  --color-toggle-on-focus-future-light: #00b8db14;
   --color-toggle-on-pressed-light: #0067df1f;
   --color-toggle-on-pressed-light-hc: #0067df1f;
   --color-toggle-on-pressed-dark: #66adff1f;
   --color-toggle-on-pressed-dark-hc: #66adff1f;
+  --color-toggle-on-pressed-future-dark: #00b8db1f;
+  --color-toggle-on-pressed-future-light: #00b8db1f;
   --color-callout-background-light: #00489d;
   --color-callout-background-light-hc: #00489d;
   --color-callout-background-dark: #00489d;
   --color-callout-background-dark-hc: #00489d;
+  --color-callout-background-future-dark: #007595;
+  --color-callout-background-future-light: #007595;
   --color-warn-light: #b6242b;
   --color-warn-light-hc: #b6242b;
   --color-warn-dark: #ff8484;
   --color-warn-dark-hc: #ffadad;
+  --color-warn-future-dark: #ff8484;
+  --color-warn-future-light: #b6242b;
   --color-warn-darker-light: #a6040a;
   --color-warn-darker-light-hc: #a6040a;
   --color-warn-darker-dark: #ffadad;
   --color-warn-darker-dark-hc: #ffadad;
+  --color-warn-darker-future-dark: #ffadad;
+  --color-warn-darker-future-light: #a6040a;
   --color-warn-hover-light: #b6242b0a;
   --color-warn-hover-light-hc: #b6242b0a;
   --color-warn-hover-dark: #ff84840a;
   --color-warn-hover-dark-hc: #ff84840a;
+  --color-warn-hover-future-dark: #ff84840a;
+  --color-warn-hover-future-light: #b6242b0a;
   --color-warn-focus-light: #b6242b1f;
   --color-warn-focus-light-hc: #b6242b1f;
   --color-warn-focus-dark: #ff84841f;
   --color-warn-focus-dark-hc: #ff84841f;
+  --color-warn-focus-future-dark: #ff84841f;
+  --color-warn-focus-future-light: #b6242b1f;
   --color-warn-pressed-light: #b6242b14;
   --color-warn-pressed-light-hc: #b6242b14;
   --color-warn-pressed-dark: #ff848414;
   --color-warn-pressed-dark-hc: #ff848414;
+  --color-warn-pressed-future-dark: #ff848414;
+  --color-warn-pressed-future-light: #b6242b14;
   --color-carousel-background-light: #f5f9fe;
   --color-carousel-background-light-hc: #f5f9fe;
   --color-carousel-background-dark: #1b2630;
   --color-carousel-background-dark-hc: #1b2630;
+  --color-carousel-background-future-dark: #053345;
+  --color-carousel-background-future-light: #ecfeff;
   --color-icon-button-hover-light: #52606914;
   --color-icon-button-hover-light-hc: #52606914;
   --color-icon-button-hover-dark: #cfd8dd14;
   --color-icon-button-hover-dark-hc: #cfd8dd14;
+  --color-icon-button-hover-future-dark: #d4d4d814;
+  --color-icon-button-hover-future-light: #52525c14;
   --color-icon-button-focus-light: #52606914;
   --color-icon-button-focus-light-hc: #52606914;
   --color-icon-button-focus-dark: #cfd8dd14;
   --color-icon-button-focus-dark-hc: #cfd8dd14;
+  --color-icon-button-focus-future-dark: #d4d4d814;
+  --color-icon-button-focus-future-light: #52525c14;
   --color-icon-button-pressed-light: #5260691f;
   --color-icon-button-pressed-light-hc: #5260691f;
   --color-icon-button-pressed-dark: #cfd8dd1f;
   --color-icon-button-pressed-dark-hc: #cfd8dd1f;
+  --color-icon-button-pressed-future-dark: #d4d4d81f;
+  --color-icon-button-pressed-future-light: #52525c1f;
   --color-code-function-light: #b748b6;
   --color-code-function-light-hc: #8c338b;
   --color-code-function-dark: #dc80db;
   --color-code-function-dark-hc: #dc80db;
+  --color-code-function-future-dark: #a684ff;
+  --color-code-function-future-light: #7f22fe;
   --color-code-operator-light: #0067df;
   --color-code-operator-light-hc: #00489d;
   --color-code-operator-dark: #66adff;
   --color-code-operator-dark-hc: #66adff;
+  --color-code-operator-future-dark: #00d3f2;
+  --color-code-operator-future-light: #007595;
   --color-code-numeric-light: #1e7f5a;
   --color-code-numeric-light-hc: #176245;
   --color-code-numeric-dark: #6ecdb6;
   --color-code-numeric-dark-hc: #6ecdb6;
+  --color-code-numeric-future-dark: #ffb900;
+  --color-code-numeric-future-light: #bb4d00;
   --color-code-text-light: #d91153;
   --color-code-text-light-hc: #a60e3f;
   --color-code-text-dark: #f25a8c;
   --color-code-text-dark-hc: #fd7da7;
+  --color-code-text-future-dark: #00d492;
+  --color-code-text-future-light: #007a55;
   --color-toggle-thumb-off-light: #526069;
   --color-toggle-thumb-off-light-hc: #374652;
   --color-toggle-thumb-off-dark: #cfd8dd;
   --color-toggle-thumb-off-dark-hc: #cfd8dd;
+  --color-toggle-thumb-off-future-dark: #d4d4d8;
+  --color-toggle-thumb-off-future-light: #52525c;
   --color-toggle-track-off-light: #cfd8dd;
   --color-toggle-track-off-light-hc: #cfd8dd;
   --color-toggle-track-off-dark: #526069;
   --color-toggle-track-off-dark-hc: #526069;
+  --color-toggle-track-off-future-dark: #52525c;
+  --color-toggle-track-off-future-light: #d4d4d8;
   --color-toggle-thumb-on-light: #0067df;
   --color-toggle-thumb-on-light-hc: #00489d;
   --color-toggle-thumb-on-dark: #66adff;
   --color-toggle-thumb-on-dark-hc: #66adff;
+  --color-toggle-thumb-on-future-dark: #00b8db;
+  --color-toggle-thumb-on-future-light: #00b8db;
   --color-toggle-track-on-light: #badaff;
   --color-toggle-track-on-light-hc: #badaff;
   --color-toggle-track-on-dark: #00489d;
   --color-toggle-track-on-dark-hc: #00489d;
+  --color-toggle-track-on-future-dark: #005f78;
+  --color-toggle-track-on-future-light: #a2f4fd;
   --color-toggle-thumb-off-disabled-light: #cfd8dd;
   --color-toggle-thumb-off-disabled-light-hc: #cfd8dd;
   --color-toggle-thumb-off-disabled-dark: #526069;
   --color-toggle-thumb-off-disabled-dark-hc: #526069;
+  --color-toggle-thumb-off-disabled-future-dark: #52525c;
+  --color-toggle-thumb-off-disabled-future-light: #d4d4d8;
   --color-toggle-track-off-disabled-light: #ecedee;
   --color-toggle-track-off-disabled-light-hc: #ecedee;
   --color-toggle-track-off-disabled-dark: #374652;
   --color-toggle-track-off-disabled-dark-hc: #374652;
+  --color-toggle-track-off-disabled-future-dark: #3f3f46;
+  --color-toggle-track-off-disabled-future-light: #e4e4e7;
   --color-toggle-thumb-on-disabled-light: #0067df47;
   --color-toggle-thumb-on-disabled-light-hc: #0067df47;
   --color-toggle-thumb-on-disabled-dark: #66adff47;
   --color-toggle-thumb-on-disabled-dark-hc: #66adff47;
+  --color-toggle-thumb-on-disabled-future-dark: #00b8db47;
+  --color-toggle-thumb-on-disabled-future-light: #00b8db47;
   --color-toggle-track-on-disabled-light: #badaff61;
   --color-toggle-track-on-disabled-light-hc: #badaff61;
   --color-toggle-track-on-disabled-dark: #00489d61;
   --color-toggle-track-on-disabled-dark-hc: #00489d61;
+  --color-toggle-track-on-disabled-future-dark: #005f7861;
+  --color-toggle-track-on-disabled-future-light: #a2f4fd61;
   --color-skeleton-light: #ecedee;
   --color-skeleton-light-hc: #ecedee;
   --color-skeleton-dark: #273139;
   --color-skeleton-dark-hc: #273139;
+  --color-skeleton-future-dark: #27272a;
+  --color-skeleton-future-light: #e4e4e7;
   --color-skeleton-glow-light: #fbfbfc;
   --color-skeleton-glow-light-hc: #fbfbfc;
   --color-skeleton-glow-dark: #525a61;
   --color-skeleton-glow-dark-hc: #525a61;
+  --color-skeleton-glow-future-dark: #52525c;
+  --color-skeleton-glow-future-light: #fafafa;
   --color-data-grid-hover-light: #f1f2f3;
   --color-data-grid-hover-light-hc: #f1f2f3;
   --color-data-grid-hover-dark: #272f36;
   --color-data-grid-hover-dark-hc: #272f36;
+  --color-data-grid-hover-future-dark: #27272a;
+  --color-data-grid-hover-future-light: #f4f4f5;
   --color-data-grid-pressed-light: #eaeced;
   --color-data-grid-pressed-light-hc: #eaeced;
   --color-data-grid-pressed-dark: #2e363d;
   --color-data-grid-pressed-dark-hc: #2e363d;
+  --color-data-grid-pressed-future-dark: #3f3f46;
+  --color-data-grid-pressed-future-light: #e4e4e7;
   --color-focus-indicator-light: #0067df;
   --color-focus-indicator-light-hc: #00489d;
   --color-focus-indicator-dark: #66adff;
   --color-focus-indicator-dark-hc: #b2d2f3;
+  --color-focus-indicator-future-dark: #9f9fa9;
+  --color-focus-indicator-future-light: #52525c;
   --color-focus-indicator-inverse-light: #66adff;
   --color-focus-indicator-inverse-light-hc: #badaff;
   --color-focus-indicator-inverse-dark: #0067df;
   --color-focus-indicator-inverse-dark-hc: #0067df;
+  --color-focus-indicator-inverse-future-dark: #52525c;
+  --color-focus-indicator-inverse-future-light: #9f9fa9;
   --color-chart-purple-light: #933692;
   --color-chart-purple-light-hc: #8c338b;
   --color-chart-purple-dark: #b748b6;
   --color-chart-purple-dark-hc: #dc80db;
+  --color-chart-purple-future-dark: #a684ff;
+  --color-chart-purple-future-light: #7f22fe;
   --color-chart-pink-light: #ed145b;
   --color-chart-pink-light-hc: #d91153;
   --color-chart-pink-dark: #f25a8c;
   --color-chart-pink-dark-hc: #fd7da7;
+  --color-chart-pink-future-dark: #ff637e;
+  --color-chart-pink-future-light: #ec003f;
   --color-chart-blue-secondary-light: #42a1ff;
   --color-chart-blue-secondary-light-hc: #1976d2;
   --color-chart-blue-secondary-dark: #42a1ff;
   --color-chart-blue-secondary-dark-hc: #8cc2f8;
+  --color-chart-blue-secondary-future-dark: #00d3f2;
+  --color-chart-blue-secondary-future-light: #0092b8;
   --color-chart-light-blue-light: #38c6f4;
   --color-chart-light-blue-light-hc: #278aab;
   --color-chart-light-blue-dark: #44cffc;
   --color-chart-light-blue-dark-hc: #44cffc;
+  --color-chart-light-blue-future-dark: #00bcff;
+  --color-chart-light-blue-future-light: #0084d1;
   --color-chart-green-light: #6eb84a;
   --color-chart-green-light-hc: #038108;
   --color-chart-green-dark: #74c94b;
   --color-chart-green-dark-hc: #74c94b;
+  --color-chart-green-future-dark: #00d492;
+  --color-chart-green-future-light: #009966;
   --color-chart-yellow-light: #ffb40e;
   --color-chart-yellow-light-hc: #9e6100;
   --color-chart-yellow-dark: #ffbb27;
   --color-chart-yellow-dark-hc: #ffbb27;
+  --color-chart-yellow-future-dark: #ffb900;
+  --color-chart-yellow-future-light: #e17100;
   --color-gradient-general-start-light: #fafafb;
   --color-gradient-general-start-light-hc: #fafafb;
   --color-gradient-general-start-dark: #526069;
   --color-gradient-general-start-dark-hc: #526069;
+  --color-gradient-general-start-future-dark: #526069;
+  --color-gradient-general-start-future-light: #fafafb;
   --color-gradient-general-end-light: #ecedef;
   --color-gradient-general-end-light-hc: #ecedef;
   --color-gradient-general-end-dark: #323c42;
   --color-gradient-general-end-dark-hc: #323c42;
+  --color-gradient-general-end-future-dark: #323c42;
+  --color-gradient-general-end-future-light: #ecedef;
   --color-gradient-agent-start-light: #ffe0ff;
   --color-gradient-agent-start-light-hc: #ffe0ff;
   --color-gradient-agent-start-dark: #a280bc;
   --color-gradient-agent-start-dark-hc: #a280bc;
+  --color-gradient-agent-start-future-dark: #a280bc;
+  --color-gradient-agent-start-future-light: #ffe0ff;
   --color-gradient-agent-end-light: #cfd9ff;
   --color-gradient-agent-end-light-hc: #cfd9ff;
   --color-gradient-agent-end-dark: #577bae;
   --color-gradient-agent-end-dark-hc: #577bae;
+  --color-gradient-agent-end-future-dark: #577bae;
+  --color-gradient-agent-end-future-light: #cfd9ff;
   --color-gradient-invoked-start-light: #ddfbf1;
   --color-gradient-invoked-start-light-hc: #ddfbf1;
   --color-gradient-invoked-start-dark: #51868e;
   --color-gradient-invoked-start-dark-hc: #51868e;
+  --color-gradient-invoked-start-future-dark: #51868e;
+  --color-gradient-invoked-start-future-light: #ddfbf1;
   --color-gradient-invoked-end-light: #daf3ff;
   --color-gradient-invoked-end-light-hc: #daf3ff;
   --color-gradient-invoked-end-dark: #35667d;
   --color-gradient-invoked-end-dark-hc: #35667d;
+  --color-gradient-invoked-end-future-dark: #35667d;
+  --color-gradient-invoked-end-future-light: #daf3ff;
   --color-gradient-human-start-light: #f6faff;
   --color-gradient-human-start-light-hc: #f6faff;
   --color-gradient-human-start-dark: #6885ab;
   --color-gradient-human-start-dark-hc: #6885ab;
+  --color-gradient-human-start-future-dark: #6885ab;
+  --color-gradient-human-start-future-light: #f6faff;
   --color-gradient-human-end-light: #d8eeff;
   --color-gradient-human-end-light-hc: #d8eeff;
   --color-gradient-human-end-dark: #2b5372;
   --color-gradient-human-end-dark-hc: #2b5372;
+  --color-gradient-human-end-future-dark: #2b5372;
+  --color-gradient-human-end-future-light: #d8eeff;
+  --color-background-overlay-light: #f4f5f7;
+  --color-background-overlay-light-hc: #f4f5f7;
+  --color-background-overlay-dark: #374652;
+  --color-background-overlay-dark-hc: #374652;
+  --color-background-overlay-future-dark: #27272a;
+  --color-background-overlay-future-light: #e4e4e7;
+  --color-foreground-secondary-light: #182027;
+  --color-foreground-secondary-light-hc: #182027;
+  --color-foreground-secondary-dark: #f8f9fa;
+  --color-foreground-secondary-dark-hc: #f8f9fa;
+  --color-foreground-secondary-future-dark: #f4f4f5;
+  --color-foreground-secondary-future-light: #18181b;
+  --color-foreground-hover-light: #526069;
+  --color-foreground-hover-light-hc: #374652;
+  --color-foreground-hover-dark: #cfd8dd;
+  --color-foreground-hover-dark-hc: #cfd8dd;
+  --color-foreground-hover-future-dark: #d4d4d8;
+  --color-foreground-hover-future-light: #52525c;
+  --color-foreground-on-accent-light: #f8f9fa;
+  --color-foreground-on-accent-light-hc: #f8f9fa;
+  --color-foreground-on-accent-dark: #182027;
+  --color-foreground-on-accent-dark-hc: #182027;
+  --color-foreground-on-accent-future-dark: #09090b;
+  --color-foreground-on-accent-future-light: #09090b;
+  --color-primary-subtle-light: #badaff;
+  --color-primary-subtle-light-hc: #badaff;
+  --color-primary-subtle-dark: #00489d;
+  --color-primary-subtle-dark-hc: #00336f;
+  --color-primary-subtle-future-dark: #053345;
+  --color-primary-subtle-future-light: #ecfeff;
+  --color-border-muted-light: #f4f5f7;
+  --color-border-muted-light-hc: #f4f5f7;
+  --color-border-muted-dark: #273139;
+  --color-border-muted-dark-hc: #273139;
+  --color-border-muted-future-dark: #18181b;
+  --color-border-muted-future-light: #f4f4f5;
+  --color-border-deep-light: #f4f5f7;
+  --color-border-deep-light-hc: #f4f5f7;
+  --color-border-deep-dark: #273139;
+  --color-border-deep-dark-hc: #273139;
+  --color-border-deep-future-dark: #09090b;
+  --color-border-deep-future-light: #fafafa;
+  --color-border-inverse-light: #a4b1b8;
+  --color-border-inverse-light-hc: #6b7882;
+  --color-border-inverse-dark: #8a97a0;
+  --color-border-inverse-dark-hc: #bbc7cd;
+  --color-border-inverse-future-dark: #e4e4e7;
+  --color-border-inverse-future-light: #3f3f46;
+  --color-border-hover-light: #a4b1b8;
+  --color-border-hover-light-hc: #6b7882;
+  --color-border-hover-dark: #8a97a0;
+  --color-border-hover-dark-hc: #bbc7cd;
+  --color-border-hover-future-dark: #52525c;
+  --color-border-hover-future-light: #9f9fa9;
+  --color-zinc-50: #fafafa;
+  --color-zinc-100: #f4f4f5;
+  --color-zinc-200: #e4e4e7;
+  --color-zinc-300: #d4d4d8;
+  --color-zinc-400: #9f9fa9;
+  --color-zinc-500: #71717b;
+  --color-zinc-600: #52525c;
+  --color-zinc-700: #3f3f46;
+  --color-zinc-800: #27272a;
+  --color-zinc-900: #18181b;
+  --color-zinc-950: #09090b;
+  --color-cyan-50: #ecfeff;
+  --color-cyan-100: #cefafe;
+  --color-cyan-200: #a2f4fd;
+  --color-cyan-300: #53eafd;
+  --color-cyan-400: #00d3f2;
+  --color-cyan-500: #00b8db;
+  --color-cyan-600: #0092b8;
+  --color-cyan-700: #007595;
+  --color-cyan-800: #005f78;
+  --color-cyan-900: #104e64;
+  --color-cyan-950: #053345;
+  --color-emerald-50: #ecfdf5;
+  --color-emerald-100: #d0fae5;
+  --color-emerald-200: #a4f4cf;
+  --color-emerald-300: #5ee9b5;
+  --color-emerald-400: #00d492;
+  --color-emerald-500: #00bc7d;
+  --color-emerald-600: #009966;
+  --color-emerald-700: #007a55;
+  --color-emerald-800: #006045;
+  --color-emerald-900: #004f3b;
+  --color-emerald-950: #002c22;
+  --color-amber-50: #fffbeb;
+  --color-amber-100: #fef3c6;
+  --color-amber-200: #fee685;
+  --color-amber-300: #ffd230;
+  --color-amber-400: #ffb900;
+  --color-amber-500: #fe9a00;
+  --color-amber-600: #e17100;
+  --color-amber-700: #bb4d00;
+  --color-amber-800: #973c00;
+  --color-amber-900: #7b3306;
+  --color-amber-950: #461901;
+  --color-violet-50: #f5f3ff;
+  --color-violet-100: #ede9fe;
+  --color-violet-200: #ddd6ff;
+  --color-violet-300: #c4b4ff;
+  --color-violet-400: #a684ff;
+  --color-violet-500: #8e51ff;
+  --color-violet-600: #7f22fe;
+  --color-violet-700: #7008e7;
+  --color-violet-800: #5d0ec0;
+  --color-violet-900: #4d179a;
+  --color-violet-950: #2f0d68;
+  --color-rose-50: #fff1f2;
+  --color-rose-100: #ffe4e6;
+  --color-rose-200: #ffccd3;
+  --color-rose-300: #ffa1ad;
+  --color-rose-400: #ff637e;
+  --color-rose-500: #ff2056;
+  --color-rose-600: #ec003f;
+  --color-rose-700: #c70036;
+  --color-rose-800: #a50036;
+  --color-rose-900: #8b0836;
+  --color-rose-950: #4d0218;
+  --color-sky-50: #f0f9ff;
+  --color-sky-100: #dff2fe;
+  --color-sky-200: #b8e6fe;
+  --color-sky-300: #74d4ff;
+  --color-sky-400: #00bcff;
+  --color-sky-500: #00a6f4;
+  --color-sky-600: #0084d1;
+  --color-sky-700: #0069a8;
+  --color-sky-800: #00598a;
+  --color-sky-900: #024a70;
+  --color-sky-950: #052f4a;
   --shadow-highlight-light: inset 4px 0px 0px #0067df;
   --shadow-highlight-light-hc: inset 4px 0px 0px #00489d;
   --shadow-highlight-dark-hc: inset 4px 0px 0px #dae8fa;
@@ -7579,6 +7971,8 @@
   --border-light-hc: 1px solid #6b7882;
   --border-dark: 1px solid #8a97a0;
   --border-dark-hc: 1px solid #bbc7cd;
+  --border-future-dark: 1px solid #3f3f46;
+  --border-future-light: 1px solid #d4d4d8;
   --border-thick-s: 1px;
   --border-thick-m: 2px;
   --border-thick-l: 4px;
@@ -7587,7 +7981,7 @@
   --border-radius-m: 4px;
   --border-radius-l: 8px;
 }
-body.light, .apollo-design.light {
+body.light, .apollo-design.light, :where(.light:not(.react-flow)) {
   --color-background: #ffffff;
   --color-background-secondary: #f4f5f7;
   --color-background-inverse: #182027;
@@ -7707,10 +8101,19 @@ body.light, .apollo-design.light {
   --color-gradient-invoked-end: #daf3ff;
   --color-gradient-human-start: #f6faff;
   --color-gradient-human-end: #d8eeff;
+  --color-background-overlay: #f4f5f7;
+  --color-foreground-secondary: #182027;
+  --color-foreground-hover: #526069;
+  --color-foreground-on-accent: #f8f9fa;
+  --color-primary-subtle: #badaff;
+  --color-border-muted: #f4f5f7;
+  --color-border-deep: #f4f5f7;
+  --color-border-inverse: #a4b1b8;
+  --color-border-hover: #a4b1b8;
   --border: var(--border-light);
   color-scheme: light;
 }
-body.light-hc, .apollo-design.light-hc {
+body.light-hc, .apollo-design.light-hc, :where(.light-hc) {
   --color-background: #ffffff;
   --color-background-secondary: #f4f5f7;
   --color-background-inverse: #182027;
@@ -7830,10 +8233,19 @@ body.light-hc, .apollo-design.light-hc {
   --color-gradient-invoked-end: #daf3ff;
   --color-gradient-human-start: #f6faff;
   --color-gradient-human-end: #d8eeff;
+  --color-background-overlay: #f4f5f7;
+  --color-foreground-secondary: #182027;
+  --color-foreground-hover: #374652;
+  --color-foreground-on-accent: #f8f9fa;
+  --color-primary-subtle: #badaff;
+  --color-border-muted: #f4f5f7;
+  --color-border-deep: #f4f5f7;
+  --color-border-inverse: #6b7882;
+  --color-border-hover: #6b7882;
   --border: var(--border-light-hc);
   color-scheme: light;
 }
-body.dark, .apollo-design.dark {
+body.dark, .apollo-design.dark, :where(.dark:not(.react-flow)) {
   --color-background: #182027;
   --color-background-secondary: #273139;
   --color-background-inverse: #f8f9fa;
@@ -7953,10 +8365,19 @@ body.dark, .apollo-design.dark {
   --color-gradient-invoked-end: #35667d;
   --color-gradient-human-start: #6885ab;
   --color-gradient-human-end: #2b5372;
+  --color-background-overlay: #374652;
+  --color-foreground-secondary: #f8f9fa;
+  --color-foreground-hover: #cfd8dd;
+  --color-foreground-on-accent: #182027;
+  --color-primary-subtle: #00489d;
+  --color-border-muted: #273139;
+  --color-border-deep: #273139;
+  --color-border-inverse: #8a97a0;
+  --color-border-hover: #8a97a0;
   --border: var(--border-dark);
   color-scheme: dark;
 }
-body.dark-hc, .apollo-design.dark-hc {
+body.dark-hc, .apollo-design.dark-hc, :where(.dark-hc) {
   --color-background: #182027;
   --color-background-secondary: #273139;
   --color-background-inverse: #f8f9fa;
@@ -8076,9 +8497,282 @@ body.dark-hc, .apollo-design.dark-hc {
   --color-gradient-invoked-end: #35667d;
   --color-gradient-human-start: #6885ab;
   --color-gradient-human-end: #2b5372;
+  --color-background-overlay: #374652;
+  --color-foreground-secondary: #f8f9fa;
+  --color-foreground-hover: #cfd8dd;
+  --color-foreground-on-accent: #182027;
+  --color-primary-subtle: #00336f;
+  --color-border-muted: #273139;
+  --color-border-deep: #273139;
+  --color-border-inverse: #bbc7cd;
+  --color-border-hover: #bbc7cd;
   --border: var(--border-dark-hc);
   color-scheme: dark;
 }
+body.future-dark, .future-dark {
+  --color-background: #09090b;
+  --color-background-secondary: #18181b;
+  --color-background-inverse: #fafafa;
+  --color-background-gray: #52525c;
+  --color-background-disabled: #18181b;
+  --color-background-highlight: #053345;
+  --color-background-raised: #18181b;
+  --color-background-edit: #00000099;
+  --color-background-gray-emp: #71717b;
+  --color-background-hover: #d4d4d814;
+  --color-background-pressed: #d4d4d81f;
+  --color-background-selected: #3f3f46;
+  --color-selection-indicator: #00b8db;
+  --color-notification-badge: #ffffff;
+  --color-notification-indicator: #ff637e;
+  --color-hover: #3f3f46;
+  --color-curtain: #000000;
+  --color-border: #3f3f46;
+  --color-border-disabled: #27272a;
+  --color-border-grid: #27272a;
+  --color-border-de-emp: #27272a;
+  --color-selection: #00d3f2;
+  --color-logo: #ffffff;
+  --color-foreground: #fafafa;
+  --color-foreground-light: #9f9fa9;
+  --color-foreground-emp: #ffffff;
+  --color-foreground-de-emp: #9f9fa9;
+  --color-foreground-disable: #71717b;
+  --color-foreground-inverse: #09090b;
+  --color-foreground-highlight: #00d3f2;
+  --color-foreground-highlight-selected: #00d3f21a;
+  --color-foreground-highlight-selected-hover: #00d3f226;
+  --color-foreground-link: #00d3f2;
+  --color-foreground-link-pressed: #53eafd;
+  --color-foreground-inv-de-emp: #52525c;
+  --color-primary: #00b8db;
+  --color-primary-lighter: #53eafd;
+  --color-primary-darker: #0092b8;
+  --color-primary-hover: #00d3f2;
+  --color-primary-focused: #00d3f2;
+  --color-primary-pressed: #00b8db;
+  --color-secondary-focused: #3f3f46;
+  --color-secondary-pressed: #104e64;
+  --color-chip-default-background: #52525c;
+  --color-chip-error-background: #460809;
+  --color-chip-warning-background: #461901;
+  --color-chip-info-background: #053345;
+  --color-chip-success-background: #002c22;
+  --color-error-icon: #ff8484;
+  --color-error-icon-inverse: #cc3d45;
+  --color-error-text: #ff8484;
+  --color-error-background: #460809;
+  --color-error-foreground-inverse: #cc3d45;
+  --color-info-foreground: #00d3f2;
+  --color-info-icon: #00d3f2;
+  --color-info-icon-inverse: #0092b8;
+  --color-info-text: #00d3f2;
+  --color-info-foreground-inverse: #0092b8;
+  --color-info-background: #053345;
+  --color-success-icon: #00d492;
+  --color-success-icon-inverse: #007a55;
+  --color-success-text: #00d492;
+  --color-success-background: #002c22;
+  --color-success-foreground-inverse: #007a55;
+  --color-warning-icon: #ffb900;
+  --color-warning-icon-inverse: #fe9a00;
+  --color-warning-text: #ffb900;
+  --color-warning-background: #461901;
+  --color-warning-foreground-inverse: #fe9a00;
+  --color-icon-default: #9f9fa9;
+  --color-icon-inverted-default: #52525c;
+  --color-toggle-off-hover: #d4d4d814;
+  --color-toggle-off-focus: #d4d4d814;
+  --color-toggle-off-pressed: #d4d4d81f;
+  --color-toggle-on-hover: #00b8db14;
+  --color-toggle-on-focus: #00b8db14;
+  --color-toggle-on-pressed: #00b8db1f;
+  --color-callout-background: #007595;
+  --color-warn: #ff8484;
+  --color-warn-darker: #ffadad;
+  --color-warn-hover: #ff84840a;
+  --color-warn-focus: #ff84841f;
+  --color-warn-pressed: #ff848414;
+  --color-carousel-background: #053345;
+  --color-icon-button-hover: #d4d4d814;
+  --color-icon-button-focus: #d4d4d814;
+  --color-icon-button-pressed: #d4d4d81f;
+  --color-code-function: #a684ff;
+  --color-code-operator: #00d3f2;
+  --color-code-numeric: #ffb900;
+  --color-code-text: #00d492;
+  --color-toggle-thumb-off: #d4d4d8;
+  --color-toggle-track-off: #52525c;
+  --color-toggle-thumb-on: #00b8db;
+  --color-toggle-track-on: #005f78;
+  --color-toggle-thumb-off-disabled: #52525c;
+  --color-toggle-track-off-disabled: #3f3f46;
+  --color-toggle-thumb-on-disabled: #00b8db47;
+  --color-toggle-track-on-disabled: #005f7861;
+  --color-skeleton: #27272a;
+  --color-skeleton-glow: #52525c;
+  --color-data-grid-hover: #27272a;
+  --color-data-grid-pressed: #3f3f46;
+  --color-focus-indicator: #9f9fa9;
+  --color-focus-indicator-inverse: #52525c;
+  --color-chart-purple: #a684ff;
+  --color-chart-pink: #ff637e;
+  --color-chart-blue-secondary: #00d3f2;
+  --color-chart-light-blue: #00bcff;
+  --color-chart-green: #00d492;
+  --color-chart-yellow: #ffb900;
+  --color-gradient-general-start: #526069;
+  --color-gradient-general-end: #323c42;
+  --color-gradient-agent-start: #a280bc;
+  --color-gradient-agent-end: #577bae;
+  --color-gradient-invoked-start: #51868e;
+  --color-gradient-invoked-end: #35667d;
+  --color-gradient-human-start: #6885ab;
+  --color-gradient-human-end: #2b5372;
+  --color-background-overlay: #27272a;
+  --color-foreground-secondary: #f4f4f5;
+  --color-foreground-hover: #d4d4d8;
+  --color-foreground-on-accent: #09090b;
+  --color-primary-subtle: #053345;
+  --color-border-muted: #18181b;
+  --color-border-deep: #09090b;
+  --color-border-inverse: #e4e4e7;
+  --color-border-hover: #52525c;
+  --border: var(--border-future-dark);
+  color-scheme: dark;
+}
+body.future-light, .future-light {
+  --color-background: #fafafa;
+  --color-background-secondary: #f4f4f5;
+  --color-background-inverse: #09090b;
+  --color-background-gray: #d4d4d8;
+  --color-background-disabled: #e4e4e7;
+  --color-background-highlight: #cefafe;
+  --color-background-raised: #f4f4f5;
+  --color-background-edit: #ffffff;
+  --color-background-gray-emp: #9f9fa9;
+  --color-background-hover: #52525c14;
+  --color-background-pressed: #52525c1f;
+  --color-background-selected: #d4d4d8;
+  --color-selection-indicator: #00b8db;
+  --color-notification-badge: #000000;
+  --color-notification-indicator: #ec003f;
+  --color-hover: #d4d4d8;
+  --color-curtain: #000000;
+  --color-border: #d4d4d8;
+  --color-border-disabled: #e4e4e7;
+  --color-border-grid: #e4e4e7;
+  --color-border-de-emp: #e4e4e7;
+  --color-selection: #0092b8;
+  --color-logo: #000000;
+  --color-foreground: #09090b;
+  --color-foreground-light: #71717b;
+  --color-foreground-emp: #000000;
+  --color-foreground-de-emp: #71717b;
+  --color-foreground-disable: #9f9fa9;
+  --color-foreground-inverse: #fafafa;
+  --color-foreground-highlight: #0092b8;
+  --color-foreground-highlight-selected: #0092b81a;
+  --color-foreground-highlight-selected-hover: #0092b826;
+  --color-foreground-link: #007595;
+  --color-foreground-link-pressed: #005f78;
+  --color-foreground-inv-de-emp: #d4d4d8;
+  --color-primary: #00b8db;
+  --color-primary-lighter: #cefafe;
+  --color-primary-darker: #007595;
+  --color-primary-hover: #0092b8;
+  --color-primary-focused: #0092b8;
+  --color-primary-pressed: #00b8db;
+  --color-secondary-focused: #cefafe;
+  --color-secondary-pressed: #a2f4fd;
+  --color-chip-default-background: #d4d4d8;
+  --color-chip-error-background: #fff0f1;
+  --color-chip-warning-background: #fef3c6;
+  --color-chip-info-background: #cefafe;
+  --color-chip-success-background: #d0fae5;
+  --color-error-icon: #cc3d45;
+  --color-error-icon-inverse: #ff8484;
+  --color-error-text: #a6040a;
+  --color-error-background: #fff0f1;
+  --color-error-foreground-inverse: #ff8484;
+  --color-info-foreground: #007595;
+  --color-info-icon: #0092b8;
+  --color-info-icon-inverse: #00d3f2;
+  --color-info-text: #007595;
+  --color-info-foreground-inverse: #00d3f2;
+  --color-info-background: #cefafe;
+  --color-success-icon: #007a55;
+  --color-success-icon-inverse: #00d492;
+  --color-success-text: #007a55;
+  --color-success-background: #d0fae5;
+  --color-success-foreground-inverse: #00d492;
+  --color-warning-icon: #fe9a00;
+  --color-warning-icon-inverse: #ffb900;
+  --color-warning-text: #bb4d00;
+  --color-warning-background: #fef3c6;
+  --color-warning-foreground-inverse: #ffb900;
+  --color-icon-default: #52525c;
+  --color-icon-inverted-default: #d4d4d8;
+  --color-toggle-off-hover: #52525c14;
+  --color-toggle-off-focus: #52525c14;
+  --color-toggle-off-pressed: #52525c1f;
+  --color-toggle-on-hover: #00b8db14;
+  --color-toggle-on-focus: #00b8db14;
+  --color-toggle-on-pressed: #00b8db1f;
+  --color-callout-background: #007595;
+  --color-warn: #b6242b;
+  --color-warn-darker: #a6040a;
+  --color-warn-hover: #b6242b0a;
+  --color-warn-focus: #b6242b1f;
+  --color-warn-pressed: #b6242b14;
+  --color-carousel-background: #ecfeff;
+  --color-icon-button-hover: #52525c14;
+  --color-icon-button-focus: #52525c14;
+  --color-icon-button-pressed: #52525c1f;
+  --color-code-function: #7f22fe;
+  --color-code-operator: #007595;
+  --color-code-numeric: #bb4d00;
+  --color-code-text: #007a55;
+  --color-toggle-thumb-off: #52525c;
+  --color-toggle-track-off: #d4d4d8;
+  --color-toggle-thumb-on: #00b8db;
+  --color-toggle-track-on: #a2f4fd;
+  --color-toggle-thumb-off-disabled: #d4d4d8;
+  --color-toggle-track-off-disabled: #e4e4e7;
+  --color-toggle-thumb-on-disabled: #00b8db47;
+  --color-toggle-track-on-disabled: #a2f4fd61;
+  --color-skeleton: #e4e4e7;
+  --color-skeleton-glow: #fafafa;
+  --color-data-grid-hover: #f4f4f5;
+  --color-data-grid-pressed: #e4e4e7;
+  --color-focus-indicator: #52525c;
+  --color-focus-indicator-inverse: #9f9fa9;
+  --color-chart-purple: #7f22fe;
+  --color-chart-pink: #ec003f;
+  --color-chart-blue-secondary: #0092b8;
+  --color-chart-light-blue: #0084d1;
+  --color-chart-green: #009966;
+  --color-chart-yellow: #e17100;
+  --color-gradient-general-start: #fafafb;
+  --color-gradient-general-end: #ecedef;
+  --color-gradient-agent-start: #ffe0ff;
+  --color-gradient-agent-end: #cfd9ff;
+  --color-gradient-invoked-start: #ddfbf1;
+  --color-gradient-invoked-end: #daf3ff;
+  --color-gradient-human-start: #f6faff;
+  --color-gradient-human-end: #d8eeff;
+  --color-background-overlay: #e4e4e7;
+  --color-foreground-secondary: #18181b;
+  --color-foreground-hover: #52525c;
+  --color-foreground-on-accent: #09090b;
+  --color-primary-subtle: #ecfeff;
+  --color-border-muted: #f4f4f5;
+  --color-border-deep: #fafafa;
+  --color-border-inverse: #3f3f46;
+  --color-border-hover: #9f9fa9;
+  --border: var(--border-future-light);
+  color-scheme: light;
+}
 @keyframes apollo-glow {
   0% {
     box-shadow: 0 0 0 0 var(--_glow-shadow, currentColor);
@@ -8108,111 +8802,68 @@ body.dark-hc, .apollo-design.dark-hc {
 :root {
   --radius: 0.75rem;
 }
-body.dark, .dark:not(.react-flow) {
-  --surface: var(--color-background, #182027);
-  --surface-raised: var(--color-background-raised, #273139);
-  --surface-overlay: var(--color-background-selected, #374652);
-  --surface-hover: var(--color-background-gray, #526069);
-  --surface-muted: var(--color-background-gray-emp, #8a97a0);
-  --surface-inverse: var(--color-background-inverse, #f8f9fa);
-  --surface-disabled: var(--color-background-disabled, #273139);
-  --surface-selected: var(--color-background-selected, #374652);
-  --brand: var(--color-primary, #66adff);
-  --brand-hover: var(--color-primary-hover, #87bfff);
-  --brand-lighter: var(--color-primary-lighter, #00489d);
-  --brand-darker: var(--color-foreground-link-pressed, #badaff);
-  --foreground: var(--color-foreground, #f4f5f7);
-  --foreground-emp: var(--color-foreground-emp, #f8f9fa);
-  --foreground-muted: var(--color-foreground-de-emp, #cfd8dd);
-  --foreground-subtle: var(--color-foreground-disable, #a4b1b8);
-  --foreground-inverse: var(--color-foreground-inverse, #182027);
-  --foreground-link: var(--color-foreground-link, #66adff);
-  --foreground-on-accent: var(--color-foreground-inverse, #182027);
-  --ap-wind-border: var(--color-border, #8a97a0);
-  --border-subtle: var(--color-border-de-emp, #526069);
-  --border-disabled: var(--color-border-disabled, #526069);
-  --border-grid: var(--color-border-grid, #273139);
-  --error: var(--color-error-text, #ff8484);
-  --error-background: var(--color-error-background, #000000);
-  --success: var(--color-success-icon, #74c94b);
-  --success-background: var(--color-success-background, #000000);
-  --warning: var(--color-warning-icon, #ffbb27);
-  --warning-background: var(--color-warning-background, #000000);
-  --info: var(--color-info-foreground, #42a1ff);
-  --info-background: var(--color-info-background, #000000);
-  --ring: var(--color-primary, #66adff);
-  --logo: var(--color-logo, #ffffff);
-  --brand-subtle: var(--brand-lighter);
-  --foreground-secondary: var(--foreground-emp);
-  --foreground-hover: var(--foreground-muted);
-  --foreground-accent: var(--brand);
-  --foreground-accent-muted: var(--brand-hover);
-  --border-muted: var(--border-grid);
-  --border-deep: var(--border-grid);
-  --border-inverse: var(--ap-wind-border);
-  --border-hover: var(--ap-wind-border);
-  --background: var(--surface);
-  --card: var(--surface-raised);
-  --card-foreground: var(--foreground);
-  --popover: var(--surface-raised);
-  --popover-foreground: var(--foreground);
-  --primary: var(--brand);
-  --primary-foreground: var(--foreground-on-accent);
-  --secondary: var(--surface-overlay);
-  --secondary-foreground: var(--foreground-muted);
-  --muted: var(--surface-raised);
-  --muted-foreground: var(--foreground-muted);
-  --accent: var(--surface-selected);
-  --accent-foreground: var(--foreground-emp);
-  --destructive: var(--error);
-  --destructive-foreground: var(--foreground-on-accent);
-  --border-de-emp: var(--border-subtle);
-  --input: var(--border-subtle);
-  color-scheme: dark;
-}
-body.dark-hc, .dark-hc {
-  --surface: var(--color-background, #182027);
-  --surface-raised: var(--color-background-raised, #273139);
-  --surface-overlay: var(--color-background-selected, #374652);
-  --surface-hover: var(--color-background-gray, #374652);
-  --surface-muted: var(--color-background-gray-emp, #a4b1b8);
-  --surface-inverse: var(--color-background-inverse, #f8f9fa);
-  --surface-disabled: var(--color-background-disabled, #273139);
-  --surface-selected: var(--color-background-selected, #374652);
-  --brand: var(--color-primary, #badaff);
-  --brand-hover: var(--color-primary-hover, #87bfff);
-  --brand-lighter: var(--color-primary-lighter, #00336f);
-  --brand-darker: var(--color-foreground-link-pressed, #badaff);
-  --foreground: var(--color-foreground, #f4f5f7);
-  --foreground-emp: var(--color-foreground-emp, #f8f9fa);
-  --foreground-muted: var(--color-foreground-de-emp, #cfd8dd);
-  --foreground-subtle: var(--color-foreground-disable, #a4b1b8);
-  --foreground-inverse: var(--color-foreground-inverse, #182027);
-  --foreground-link: var(--color-foreground-link, #87bfff);
-  --foreground-on-accent: var(--color-foreground-inverse, #182027);
-  --ap-wind-border: var(--color-border, #bbc7cd);
-  --border-subtle: var(--color-border-de-emp, #a4b1b8);
-  --border-disabled: var(--color-border-disabled, #8a97a0);
-  --border-grid: var(--color-border-grid, #273139);
-  --error: var(--color-error-text, #ffadad);
-  --error-background: var(--color-error-background, #000000);
-  --success: var(--color-success-icon, #74c94b);
-  --success-background: var(--color-success-background, #000000);
-  --warning: var(--color-warning-icon, #ffbb27);
-  --warning-background: var(--color-warning-background, #000000);
-  --info: var(--color-info-foreground, #42a1ff);
-  --info-background: var(--color-info-background, #000000);
-  --ring: var(--color-primary, #badaff);
-  --logo: var(--color-logo, #ffffff);
-  --brand-subtle: var(--brand-lighter);
-  --foreground-secondary: var(--foreground-emp);
-  --foreground-hover: var(--foreground-muted);
-  --foreground-accent: var(--brand);
-  --foreground-accent-muted: var(--brand-hover);
-  --border-muted: var(--border-grid);
-  --border-deep: var(--border-grid);
-  --border-inverse: var(--ap-wind-border);
-  --border-hover: var(--ap-wind-border);
+body.light, .light:not(.react-flow), body.light-hc, .light-hc, body.dark, .dark:not(.react-flow), body.dark-hc, .dark-hc, body.future-dark, .future-dark, body.future-light, .future-light {
+  --surface: var(--color-background);
+  --surface-raised: var(--color-background-raised);
+  --surface-overlay: var(--color-background-overlay);
+  --surface-hover: var(--color-background-selected);
+  --surface-muted: var(--color-background-gray-emp);
+  --surface-inverse: var(--color-background-inverse);
+  --surface-disabled: var(--color-background-disabled);
+  --surface-selected: var(--color-background-selected);
+  --brand: var(--color-primary);
+  --brand-subtle: var(--color-primary-subtle);
+  --brand-hover: var(--color-primary-hover);
+  --brand-lighter: var(--color-primary-lighter);
+  --brand-darker: var(--color-foreground-link-pressed);
+  --logo: var(--color-logo);
+  --foreground: var(--color-foreground);
+  --foreground-emp: var(--color-foreground-emp);
+  --foreground-secondary: var(--color-foreground-secondary);
+  --foreground-hover: var(--color-foreground-hover);
+  --foreground-muted: var(--color-foreground-de-emp);
+  --foreground-subtle: var(--color-foreground-disable);
+  --foreground-inverse: var(--color-foreground-inverse);
+  --foreground-link: var(--color-foreground-link);
+  --foreground-on-accent: var(--color-foreground-on-accent);
+  --foreground-accent: var(--color-primary);
+  --foreground-accent-muted: var(--color-primary-hover);
+  --ap-wind-border: var(--color-border);
+  --border-subtle: var(--color-border-de-emp);
+  --border-muted: var(--color-border-muted);
+  --border-deep: var(--color-border-deep);
+  --border-inverse: var(--color-border-inverse);
+  --border-hover: var(--color-border-hover);
+  --border-disabled: var(--color-border-disabled);
+  --border-grid: var(--color-border-grid);
+  --ring: var(--color-primary);
+  --error: var(--color-error-text);
+  --error-background: var(--color-error-background);
+  --success: var(--color-success-icon);
+  --success-background: var(--color-success-background);
+  --warning: var(--color-warning-icon);
+  --warning-background: var(--color-warning-background);
+  --info: var(--color-info-foreground);
+  --info-background: var(--color-info-background);
+  --status-destructive: var(--color-chip-error-background);
+  --status-destructive-fg: var(--color-error-text);
+  --status-success: var(--color-chip-success-background);
+  --status-success-fg: var(--color-success-text);
+  --status-warning: var(--color-chip-warning-background);
+  --status-warning-fg: var(--color-warning-text);
+  --status-info: var(--color-chip-info-background);
+  --status-info-fg: var(--color-info-text);
+  --code-rest: var(--color-icon-default);
+  --code-punctuation: var(--color-foreground-disable);
+  --code-key: var(--color-code-operator);
+  --code-string: var(--color-code-text);
+  --code-number: var(--color-code-numeric);
+  --code-literal: var(--color-code-function);
+  --chart-1: var(--color-chart-blue-secondary);
+  --chart-2: var(--color-chart-purple);
+  --chart-3: var(--color-chart-green);
+  --chart-4: var(--color-chart-yellow);
+  --chart-5: var(--color-chart-pink);
   --background: var(--surface);
   --card: var(--surface-raised);
   --card-foreground: var(--foreground);
@@ -8230,319 +8881,42 @@ body.dark-hc, .dark-hc {
   --destructive-foreground: var(--foreground-on-accent);
   --border-de-emp: var(--border-subtle);
   --input: var(--border-subtle);
-  color-scheme: dark;
 }
-body.light, .light:not(.react-flow) {
-  --surface: var(--color-background, #ffffff);
-  --surface-raised: var(--color-background-raised, #ffffff);
-  --surface-overlay: var(--color-background-secondary, #f4f5f7);
-  --surface-hover: var(--color-background-selected, #e9f1fa);
-  --surface-muted: var(--color-background-gray, #cfd8dd);
-  --surface-inverse: var(--color-background-inverse, #182027);
-  --surface-disabled: var(--color-background-disabled, #ecedee);
-  --surface-selected: var(--color-background-selected, #e9f1fa);
-  --brand: var(--color-primary, #0067df);
-  --brand-hover: var(--color-primary-hover, #0056ba);
-  --brand-lighter: var(--color-primary-lighter, #badaff);
-  --brand-darker: var(--color-foreground-link-pressed, #00489d);
-  --foreground: var(--color-foreground, #273139);
-  --foreground-emp: var(--color-foreground-emp, #182027);
-  --foreground-muted: var(--color-foreground-de-emp, #526069);
-  --foreground-subtle: var(--color-foreground-disable, #8a97a0);
-  --foreground-inverse: var(--color-foreground-inverse, #f8f9fa);
-  --foreground-link: var(--color-foreground-link, #0067df);
-  --foreground-on-accent: var(--color-foreground-inverse, #f8f9fa);
-  --ap-wind-border: var(--color-border, #a4b1b8);
-  --border-subtle: var(--color-border-de-emp, #cfd8dd);
-  --border-disabled: var(--color-border-disabled, #cfd8dd);
-  --border-grid: var(--color-border-grid, #f4f5f7);
-  --error: var(--color-error-text, #a6040a);
-  --error-background: var(--color-error-background, #fff0f1);
-  --success: var(--color-success-icon, #038108);
-  --success-background: var(--color-success-background, #eeffe5);
-  --warning: var(--color-warning-text, #9e6100);
-  --warning-background: var(--color-warning-background, #fff3db);
-  --info: var(--color-info-foreground, #1665b3);
-  --info-background: var(--color-info-background, #e9f1fa);
-  --ring: var(--color-primary, #0067df);
-  --logo: var(--color-logo, #fa4616);
-  --brand-subtle: var(--brand-lighter);
-  --foreground-secondary: var(--foreground-emp);
-  --foreground-hover: var(--foreground-muted);
-  --foreground-accent: var(--brand);
-  --foreground-accent-muted: var(--brand-hover);
-  --border-muted: var(--border-grid);
-  --border-deep: var(--border-grid);
-  --border-inverse: var(--ap-wind-border);
-  --border-hover: var(--ap-wind-border);
-  --background: var(--surface);
-  --card: var(--surface-raised);
-  --card-foreground: var(--foreground);
-  --popover: var(--surface-raised);
-  --popover-foreground: var(--foreground);
-  --primary: var(--brand);
-  --primary-foreground: var(--foreground-on-accent);
-  --secondary: var(--surface-overlay);
-  --secondary-foreground: var(--foreground-muted);
-  --muted: var(--surface-raised);
-  --muted-foreground: var(--foreground-muted);
-  --accent: var(--surface-selected);
-  --accent-foreground: var(--foreground-emp);
-  --destructive: var(--error);
-  --destructive-foreground: var(--foreground-on-accent);
-  --border-de-emp: var(--border-subtle);
-  --input: var(--border-subtle);
+body.light, .light:not(.react-flow), body.light-hc, .light-hc {
+  --surface-muted: var(--color-background-gray);
+  --warning: var(--color-warning-text);
   color-scheme: light;
 }
-body.light-hc, .light-hc {
-  --surface: var(--color-background, #ffffff);
-  --surface-raised: var(--color-background-raised, #ffffff);
-  --surface-overlay: var(--color-background-secondary, #f4f5f7);
-  --surface-hover: var(--color-background-selected, #e9f1fa);
-  --surface-muted: var(--color-background-gray, #cfd8dd);
-  --surface-inverse: var(--color-background-inverse, #182027);
-  --surface-disabled: var(--color-background-disabled, #ecedee);
-  --surface-selected: var(--color-background-selected, #e9f1fa);
-  --brand: var(--color-primary, #00489d);
-  --brand-hover: var(--color-primary-hover, #00336f);
-  --brand-lighter: var(--color-primary-lighter, #badaff);
-  --brand-darker: var(--color-foreground-link-pressed, #00336f);
-  --foreground: var(--color-foreground, #273139);
-  --foreground-emp: var(--color-foreground-emp, #182027);
-  --foreground-muted: var(--color-foreground-de-emp, #374652);
-  --foreground-subtle: var(--color-foreground-disable, #8a97a0);
-  --foreground-inverse: var(--color-foreground-inverse, #f8f9fa);
-  --foreground-link: var(--color-foreground-link, #00489d);
-  --foreground-on-accent: var(--color-foreground-inverse, #f8f9fa);
-  --ap-wind-border: var(--color-border, #6b7882);
-  --border-subtle: var(--color-border-de-emp, #a4b1b8);
-  --border-disabled: var(--color-border-disabled, #cfd8dd);
-  --border-grid: var(--color-border-grid, #f4f5f7);
-  --error: var(--color-error-text, #a6040a);
-  --error-background: var(--color-error-background, #fff0f1);
-  --success: var(--color-success-icon, #005603);
-  --success-background: var(--color-success-background, #eeffe5);
-  --warning: var(--color-warning-text, #273139);
-  --warning-background: var(--color-warning-background, #fff3db);
-  --info: var(--color-info-foreground, #11508d);
-  --info-background: var(--color-info-background, #e9f1fa);
-  --ring: var(--color-primary, #00489d);
-  --logo: var(--color-logo, #fa4616);
-  --brand-subtle: var(--brand-lighter);
-  --foreground-secondary: var(--foreground-emp);
-  --foreground-hover: var(--foreground-muted);
-  --foreground-accent: var(--brand);
-  --foreground-accent-muted: var(--brand-hover);
-  --border-muted: var(--border-grid);
-  --border-deep: var(--border-grid);
-  --border-inverse: var(--ap-wind-border);
-  --border-hover: var(--ap-wind-border);
-  --background: var(--surface);
-  --card: var(--surface-raised);
-  --card-foreground: var(--foreground);
-  --popover: var(--surface-raised);
-  --popover-foreground: var(--foreground);
-  --primary: var(--brand);
-  --primary-foreground: var(--foreground-on-accent);
-  --secondary: var(--surface-overlay);
-  --secondary-foreground: var(--foreground-muted);
-  --muted: var(--surface-raised);
-  --muted-foreground: var(--foreground-muted);
-  --accent: var(--surface-selected);
-  --accent-foreground: var(--foreground-emp);
-  --destructive: var(--error);
-  --destructive-foreground: var(--foreground-on-accent);
-  --border-de-emp: var(--border-subtle);
-  --input: var(--border-subtle);
-  color-scheme: light;
+body.dark, .dark:not(.react-flow), body.dark-hc, .dark-hc {
+  --surface-hover: var(--color-background-gray);
+  color-scheme: dark;
+}
+body.future-dark, .future-dark, body.future-light, .future-light {
+  --brand-darker: var(--color-primary-darker);
+  --ring: var(--color-focus-indicator);
+  --warning: var(--color-warning-text);
+  --secondary-foreground: var(--foreground);
+  --muted: var(--surface-overlay);
+  --accent-foreground: var(--foreground);
+  --destructive: var(--color-red-500);
+  --destructive-foreground: var(--color-zinc-50);
+  --input: var(--ap-wind-border);
 }
 body.future-dark, .future-dark {
-  --surface: var(--color-zinc-950);
-  --surface-raised: var(--color-zinc-900);
-  --surface-overlay: var(--color-zinc-800);
-  --surface-hover: var(--color-zinc-700);
-  --surface-muted: var(--color-zinc-500);
-  --surface-inverse: var(--color-zinc-50);
-  --surface-disabled: var(--color-zinc-900);
-  --surface-selected: var(--color-zinc-700);
-  --brand: var(--color-cyan-500);
-  --brand-subtle: var(--color-cyan-950);
-  --brand-hover: var(--color-cyan-400);
-  --brand-lighter: var(--color-cyan-300);
-  --brand-darker: var(--color-cyan-600);
-  --logo: var(--color-white);
-  --foreground: var(--color-zinc-50);
-  --foreground-secondary: var(--color-zinc-100);
-  --foreground-hover: var(--color-zinc-300);
-  --foreground-muted: var(--color-zinc-400);
-  --foreground-subtle: var(--color-zinc-500);
-  --foreground-inverse: var(--color-zinc-950);
-  --foreground-on-accent: var(--color-zinc-950);
-  --foreground-accent: var(--color-cyan-500);
-  --foreground-accent-muted: var(--color-cyan-400);
-  --foreground-emp: var(--color-white);
-  --foreground-link: var(--color-cyan-400);
-  --ap-wind-border: var(--color-zinc-700);
-  --border-subtle: var(--color-zinc-800);
-  --border-muted: var(--color-zinc-900);
-  --border-deep: var(--color-zinc-950);
-  --border-inverse: var(--color-zinc-200);
-  --border-hover: var(--color-zinc-600);
-  --border-disabled: var(--color-zinc-800);
-  --border-grid: var(--color-zinc-800);
-  --ring: var(--color-zinc-600);
   --gradient-1: linear-gradient(127deg, #3f3f47 25.94%, #27272a 74.06%);
   --gradient-2: linear-gradient(128deg, #09090b 1.26%, #18181b 52.69%);
   --gradient-3: linear-gradient(128deg, #3f3f47 1.26%, #18181b 52.69%);
   --gradient-4: linear-gradient(180deg, #18181b 0%, #27272a 100%);
   --gradient-5: linear-gradient(180deg, #09090b 0%, #18181b 100%);
   --gradient-6: linear-gradient(106deg, #0092b8 28.08%, #053345 71.92%);
-  --code-rest: var(--color-zinc-400);
-  --code-punctuation: var(--color-zinc-500);
-  --code-key: var(--color-cyan-400);
-  --code-string: var(--color-emerald-400);
-  --code-number: var(--color-amber-400);
-  --code-literal: var(--color-violet-400);
-  --error: #ff8484;
-  --error-background: var(--status-destructive);
-  --success: #74c94b;
-  --success-background: var(--status-success);
-  --warning: #ffbb27;
-  --warning-background: var(--status-warning);
-  --info: #42a1ff;
-  --info-background: var(--status-info);
-  --status-destructive: var(--color-red-950);
-  --status-destructive-fg: var(--color-red-400);
-  --status-success: var(--color-emerald-950);
-  --status-success-fg: var(--color-emerald-400);
-  --status-warning: var(--color-amber-950);
-  --status-warning-fg: var(--color-amber-400);
-  --status-info: var(--color-cyan-950);
-  --status-info-fg: var(--color-cyan-400);
-  --chart-1: var(--color-cyan-400);
-  --chart-2: var(--color-violet-400);
-  --chart-3: var(--color-emerald-400);
-  --chart-4: var(--color-amber-400);
-  --chart-5: var(--color-rose-400);
-  --background: var(--surface);
-  --card: var(--surface-raised);
-  --card-foreground: var(--foreground);
-  --popover: var(--surface-raised);
-  --popover-foreground: var(--foreground);
-  --primary: var(--brand);
-  --primary-foreground: var(--foreground-on-accent);
-  --secondary: var(--surface-overlay);
-  --secondary-foreground: var(--foreground);
-  --muted: var(--surface-overlay);
-  --muted-foreground: var(--foreground-muted);
-  --accent: var(--surface-hover);
-  --accent-foreground: var(--foreground);
-  --destructive: var(--color-red-500);
-  --destructive-foreground: var(--color-zinc-50);
-  --border-de-emp: var(--border-subtle);
-  --input: var(--ap-wind-border);
-  --color-gradient-general-start: var(--color-gradient-general-start-dark);
-  --color-gradient-general-end: var(--color-gradient-general-end-dark);
-  --color-gradient-agent-start: var(--color-gradient-agent-start-dark);
-  --color-gradient-agent-end: var(--color-gradient-agent-end-dark);
-  --color-gradient-invoked-start: var(--color-gradient-invoked-start-dark);
-  --color-gradient-invoked-end: var(--color-gradient-invoked-end-dark);
-  --color-gradient-human-start: var(--color-gradient-human-start-dark);
-  --color-gradient-human-end: var(--color-gradient-human-end-dark);
 }
 body.future-light, .future-light {
-  --surface: var(--color-zinc-50);
-  --surface-raised: var(--color-zinc-100);
-  --surface-overlay: var(--color-zinc-200);
-  --surface-hover: var(--color-zinc-300);
-  --surface-muted: var(--color-zinc-400);
-  --surface-inverse: var(--color-zinc-950);
-  --surface-disabled: var(--color-zinc-200);
-  --surface-selected: var(--color-zinc-300);
-  --brand: var(--color-cyan-500);
-  --brand-subtle: var(--color-cyan-50);
-  --brand-hover: var(--color-cyan-600);
-  --brand-lighter: var(--color-cyan-100);
-  --brand-darker: var(--color-cyan-700);
-  --logo: var(--color-black);
-  --foreground: var(--color-zinc-950);
-  --foreground-secondary: var(--color-zinc-900);
-  --foreground-hover: var(--color-zinc-600);
-  --foreground-muted: var(--color-zinc-500);
-  --foreground-subtle: var(--color-zinc-400);
-  --foreground-inverse: var(--color-zinc-50);
-  --foreground-on-accent: var(--color-zinc-950);
-  --foreground-accent: var(--color-cyan-500);
-  --foreground-accent-muted: var(--color-cyan-600);
-  --foreground-emp: var(--color-black);
-  --foreground-link: var(--color-cyan-600);
-  --ap-wind-border: var(--color-zinc-300);
-  --border-subtle: var(--color-zinc-200);
-  --border-muted: var(--color-zinc-100);
-  --border-deep: var(--color-zinc-50);
-  --border-inverse: var(--color-zinc-700);
-  --border-hover: var(--color-zinc-400);
-  --border-disabled: var(--color-zinc-200);
-  --border-grid: var(--color-zinc-200);
-  --ring: var(--color-zinc-400);
   --gradient-1: linear-gradient(127deg, #e4e4e7 25.94%, #f4f4f5 74.06%);
   --gradient-2: linear-gradient(128deg, #fafafa 1.26%, #fafafa 52.69%);
   --gradient-3: linear-gradient(128deg, #e4e4e7 1.26%, #fafafa 52.69%);
   --gradient-4: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
   --gradient-5: linear-gradient(180deg, #fafafa 0%, #fafafa 100%);
   --gradient-6: linear-gradient(106deg, #22d3ee 28.08%, #cffafe 71.92%);
-  --code-rest: var(--color-zinc-600);
-  --code-punctuation: var(--color-zinc-500);
-  --code-key: var(--color-cyan-700);
-  --code-string: var(--color-emerald-700);
-  --code-number: var(--color-amber-700);
-  --code-literal: var(--color-violet-600);
-  --error: #a6040a;
-  --error-background: #fff0f1;
-  --success: #038108;
-  --success-background: #eeffe5;
-  --warning: #9e6100;
-  --warning-background: #fff3db;
-  --info: #1665b3;
-  --info-background: #e9f1fa;
-  --status-destructive: var(--color-red-100);
-  --status-destructive-fg: var(--color-red-700);
-  --status-success: var(--color-emerald-100);
-  --status-success-fg: var(--color-emerald-700);
-  --status-warning: var(--color-amber-100);
-  --status-warning-fg: var(--color-amber-700);
-  --status-info: var(--color-cyan-100);
-  --status-info-fg: var(--color-cyan-700);
-  --chart-1: var(--color-cyan-600);
-  --chart-2: var(--color-violet-600);
-  --chart-3: var(--color-emerald-600);
-  --chart-4: var(--color-amber-600);
-  --chart-5: var(--color-rose-600);
-  --background: var(--surface);
-  --card: var(--surface-raised);
-  --card-foreground: var(--foreground);
-  --popover: var(--surface-raised);
-  --popover-foreground: var(--foreground);
-  --primary: var(--brand);
-  --primary-foreground: var(--foreground-on-accent);
-  --secondary: var(--surface-overlay);
-  --secondary-foreground: var(--foreground);
-  --muted: var(--surface-overlay);
-  --muted-foreground: var(--foreground-muted);
-  --accent: var(--surface-hover);
-  --accent-foreground: var(--foreground);
-  --destructive: var(--color-red-500);
-  --destructive-foreground: var(--color-zinc-50);
-  --border-de-emp: var(--border-subtle);
-  --input: var(--ap-wind-border);
-  --color-gradient-general-start: var(--color-gradient-general-start-light);
-  --color-gradient-general-end: var(--color-gradient-general-end-light);
-  --color-gradient-agent-start: var(--color-gradient-agent-start-light);
-  --color-gradient-agent-end: var(--color-gradient-agent-end-light);
-  --color-gradient-invoked-start: var(--color-gradient-invoked-start-light);
-  --color-gradient-invoked-end: var(--color-gradient-invoked-end-light);
-  --color-gradient-human-start: var(--color-gradient-human-start-light);
-  --color-gradient-human-end: var(--color-gradient-human-end-light);
 }
 body.wireframe, .wireframe {
   --surface: #ffffff;
@@ -8743,7 +9117,7 @@ body.canvas, .canvas {
   --color-gradient-human-start: var(--color-gradient-human-start-dark);
   --color-gradient-human-end: var(--color-gradient-human-end-dark);
 }
-.future-light, .future-dark, .wireframe, .vertex, .canvas {
+.wireframe, .vertex, .canvas {
   --color-foreground: var(--foreground);
   --color-foreground-emp: var(--foreground-secondary);
   --color-foreground-de-emp: var(--foreground-muted);