@uipath/apollo-wind 2.18.0 → 2.19.0

package/dist/tailwind.css

@@ -24,237 +24,103 @@
 @custom-variant future (:is(.future-dark, .future-light) &);
 
 /**
-  * Individual theme definitions with fallback HEX values
-  * Each theme uses semantic tokens from apollo-core with hardcoded fallbacks
-  */
-
-/*
+ * Theme definitions
+ *
+ * All six core themes (light, light-hc, dark, dark-hc, future-dark,
+ * future-light) share a single mapping: every Wind token resolves to an
+ * apollo-core semantic CSS variable (defined per theme in
+ * @uipath/apollo-core/tokens/css/theme-variables.css). Small per-family
+ * blocks below override the few mappings the families genuinely disagree on.
+ *
  * Exclude .react-flow from bare .light / .dark selectors.
  * ReactFlow adds a .light or .dark class to its wrapper (via the colorMode
  * prop, which defaults to "light"). Without :not(.react-flow), the wrapper
  * matches these selectors and redefines every semantic token, overriding
  * the body-level theme for all canvas descendants.
  */
-body.dark, .dark:not(.react-flow) {
-  /* ── Surfaces ─────────────────────────────────────────────────────────── */
-  --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 / Primary ─────────────────────────────────────────────────── */
-  --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 (text / icons) ────────────────────────────────────────── */
-  --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);
-
-  /* ── Borders ──────────────────────────────────────────────────────────── */
-  --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);
-
-  /* ── Status ──────────────────────────────────────────────────────────── */
-  --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 / Focus ────────────────────────────────────────────────────── */
-  --ring: var(--color-primary, #66adff);
-  --logo: var(--color-logo, #ffffff);
-
-  /* ── Bridge — defines shared token names using core values, so
-        components built with bg-surface, text-foreground-secondary, etc.
-        resolve correctly under core themes ────────────────────────────── */
-  --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);
 
-  /* ── shadcn aliases — maps to standard names for shadcn component compat ── */
-  --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 {
+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 {
   /* ── Surfaces ─────────────────────────────────────────────────────────── */
-  --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);
+  --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 / Primary ─────────────────────────────────────────────────── */
-  --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);
+  --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 (text / icons) ────────────────────────────────────────── */
-  --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);
+  --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);
 
   /* ── Borders ──────────────────────────────────────────────────────────── */
-  --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);
-
-  /* ── Status ──────────────────────────────────────────────────────────── */
-  --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);
+  --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 / Focus ────────────────────────────────────────────────────── */
-  --ring: var(--color-primary, #badaff);
-  --logo: var(--color-logo, #ffffff);
-
-  /* ── Bridge — defines shared token names using core values, so
-        components built with bg-surface, text-foreground-secondary, etc.
-        resolve correctly under core themes ────────────────────────────── */
-  --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);
-
-  /* ── shadcn aliases — maps to standard names for shadcn component compat ── */
-  --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.light, .light:not(.react-flow) {
-  /* ── Surfaces ─────────────────────────────────────────────────────────── */
-  --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 / Primary ─────────────────────────────────────────────────── */
-  --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 (text / icons) ────────────────────────────────────────── */
-  --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);
-
-  /* ── Borders ──────────────────────────────────────────────────────────── */
-  --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);
+  --ring: var(--color-primary);
 
   /* ── Status ──────────────────────────────────────────────────────────── */
-  --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);
+  --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);
 
-  /* ── Ring / Focus ────────────────────────────────────────────────────── */
-  --ring: var(--color-primary, #0067df);
-  --logo: var(--color-logo, #fa4616);
-
-  /* ── Bridge — defines shared token names using core values, so
-        components built with bg-surface, text-foreground-secondary, etc.
-        resolve correctly under core themes ────────────────────────────── */
-  --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);
+  /* ── Code window / syntax ────────────────────────────────────────────── */
+  --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 ───────────────────────────────────────────────────────────── */
+  --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);
 
   /* ── shadcn aliases — maps to standard names for shadcn component compat ── */
   --background: var(--surface);
@@ -274,175 +140,41 @@ body.light, .light:not(.react-flow) {
   --destructive-foreground: var(--foreground-on-accent);
   --border-de-emp: var(--border-subtle);
   --input: var(--border-subtle);
-
-  color-scheme: light;
 }
 
+/* ── Classic light family — mapping divergences + element-scoped color-scheme ── */
+body.light, .light:not(.react-flow),
 body.light-hc, .light-hc {
-  /* ── Surfaces ─────────────────────────────────────────────────────────── */
-  --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 / Primary ─────────────────────────────────────────────────── */
-  --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 (text / icons) ────────────────────────────────────────── */
-  --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);
-
-  /* ── Borders ──────────────────────────────────────────────────────────── */
-  --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);
-
-  /* ── Status ──────────────────────────────────────────────────────────── */
-  --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 / Focus ────────────────────────────────────────────────────── */
-  --ring: var(--color-primary, #00489d);
-  --logo: var(--color-logo, #fa4616);
-
-  /* ── Bridge — defines shared token names using core values, so
-        components built with bg-surface, text-foreground-secondary, etc.
-        resolve correctly under core themes ────────────────────────────── */
-  --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);
-
-  /* ── shadcn aliases — maps to standard names for shadcn component compat ── */
-  --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);
-
+  --surface-muted: var(--color-background-gray);
+  --warning: var(--color-warning-text);
   color-scheme: light;
 }
 
-/* ============================================================================
- * FUTURE — Dark theme (default for Future templates)
- * ============================================================================ */
-
-body.future-dark, .future-dark {
-  /* ── Surfaces ─────────────────────────────────────────────────────────── */
-  --surface: var(--color-zinc-950);
-  /* page / canvas */
-  --surface-raised: var(--color-zinc-900);
-  /* cards, overlays, panels */
-  --surface-overlay: var(--color-zinc-800);
-  /* panels, inputs, tabs */
-  --surface-hover: var(--color-zinc-700);
-  /* hover, selected nav */
-  --surface-muted: var(--color-zinc-500);
-  /* badges, indicators */
-  --surface-inverse: var(--color-zinc-50);
-  /* buttons on dark bg */
-  --surface-disabled: var(--color-zinc-900);
-  /* disabled inputs, buttons, containers */
-  --surface-selected: var(--color-zinc-700);
-  /* selected items, active rows */
+/* ── Classic dark family ─────────────────────────────────────────────────── */
+body.dark, .dark:not(.react-flow),
+body.dark-hc, .dark-hc {
+  --surface-hover: var(--color-background-gray);
+  color-scheme: dark;
+}
 
-  /* ── Brand ──────────────────────────────────────────────────────────── */
-  --brand: var(--color-cyan-500);
-  /* logo, submit, run */
-  --brand-subtle: var(--color-cyan-950);
-  /* status badge, active nav */
-  --brand-hover: var(--color-cyan-400);
-  /* hovered brand elements */
-  --brand-lighter: var(--color-cyan-300);
-  /* subtle tinted states, badges */
-  --brand-darker: var(--color-cyan-600);
-  /* pressed / deep accent states */
-  --logo: var(--color-white);
-  /* UiPath logo color */
+/* ── Future family — mapping divergences (color-scheme comes from core) ──── */
+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);
 
-  /* ── Foreground (text / icons) ────────────────────────────────────────── */
-  --foreground: var(--color-zinc-50);
-  /* primary headings */
-  --foreground-secondary: var(--color-zinc-100);
-  /* body, messages */
-  --foreground-hover: var(--color-zinc-300);
-  /* hover states */
-  --foreground-muted: var(--color-zinc-400);
-  /* nav, secondary UI */
-  --foreground-subtle: var(--color-zinc-500);
-  /* labels, muted */
-  --foreground-inverse: var(--color-zinc-950);
-  /* icons on light bg */
-  --foreground-on-accent: var(--color-zinc-950);
-  /* text on accent bg */
-  --foreground-accent: var(--color-cyan-500);
-  /* accent text */
-  --foreground-accent-muted: var(--color-cyan-400);
-  /* muted accent text */
-  --foreground-emp: var(--color-white);
-  /* emphasized text — highest priority headings */
-  --foreground-link: var(--color-cyan-400);
-  /* hyperlinks, inline navigational text */
+  /* shadcn structural differences */
+  --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);
+}
 
-  /* ── Borders ──────────────────────────────────────────────────────────── */
-  --ap-wind-border: var(--color-zinc-700);
-  /* primary borders */
-  --border-subtle: var(--color-zinc-800);
-  /* subtle dividers */
-  --border-muted: var(--color-zinc-900);
-  /* content borders */
-  --border-deep: var(--color-zinc-950);
-  /* nested containers */
-  --border-inverse: var(--color-zinc-200);
-  /* borders on inverse bg */
-  --border-hover: var(--color-zinc-600);
-  /* border hover state */
-  --border-disabled: var(--color-zinc-800);
-  /* disabled control borders */
-  --border-grid: var(--color-zinc-800);
-  /* table / data grid internal lines */
-
-  /* ── Ring ──────────────────────────────────────────────────────────────── */
-  --ring: var(--color-zinc-600);
-  /* selection ring */
-
-  /* ── Gradients (kept as hex — adjusted values that don't map 1:1 to palette steps) ── */
+/* ── Future gradients (theme-specific stops, no core counterpart yet) ────── */
+body.future-dark, .future-dark {
   --gradient-1: linear-gradient(127deg, #3f3f47 25.94%, #27272a 74.06%);
   /* zinc-700 → zinc-800 */
   --gradient-2: linear-gradient(128deg, #09090b 1.26%, #18181b 52.69%);
@@ -455,161 +187,9 @@ body.future-dark, .future-dark {
   /* zinc-950 → zinc-900 */
   --gradient-6: linear-gradient(106deg, #0092b8 28.08%, #053345 71.92%);
   /* cyan-600 → cyan-950 */
-
-  /* ── Code window / syntax ────────────────────────────────────────────── */
-  --code-rest: var(--color-zinc-400);
-  /* default text, identifiers, plain code */
-  --code-punctuation: var(--color-zinc-500);
-  /* brackets, commas, semicolons */
-  --code-key: var(--color-cyan-400);
-  /* keywords, properties, attributes */
-  --code-string: var(--color-emerald-400);
-  /* string values */
-  --code-number: var(--color-amber-400);
-  /* numeric literals */
-  --code-literal: var(--color-violet-400);
-  /* booleans, null, undefined */
-
-  /* ── Status ──────────────────────────────────────────────────────────── */
-  --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 ───────────────────────────────────────────────────────────── */
-  --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);
-
-  /* ── shadcn aliases — maps to standard names for shadcn component compat ── */
-  --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);
-  /* text on destructive bg */
-  --border-de-emp: var(--border-subtle);
-  --input: var(--ap-wind-border);
-
-  /* FIXME: apollo-core should add new themes support for all semantic tokens */
-  --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);
 }
 
-/* ============================================================================
- * FUTURE — Light theme
- * ============================================================================ */
-
 body.future-light, .future-light {
-  /* ── Surfaces ─────────────────────────────────────────────────────────── */
-  --surface: var(--color-zinc-50);
-  /* page / canvas */
-  --surface-raised: var(--color-zinc-100);
-  /* cards, overlays, panels */
-  --surface-overlay: var(--color-zinc-200);
-  /* panels, inputs, tabs */
-  --surface-hover: var(--color-zinc-300);
-  /* hover, selected nav */
-  --surface-muted: var(--color-zinc-400);
-  /* badges, indicators */
-  --surface-inverse: var(--color-zinc-950);
-  /* buttons on light bg */
-  --surface-disabled: var(--color-zinc-200);
-  /* disabled inputs, buttons, containers */
-  --surface-selected: var(--color-zinc-300);
-  /* selected items, active rows */
-
-  /* ── Brand ──────────────────────────────────────────────────────────── */
-  --brand: var(--color-cyan-500);
-  /* logo, submit, run */
-  --brand-subtle: var(--color-cyan-50);
-  /* status badge, active nav */
-  --brand-hover: var(--color-cyan-600);
-  /* hovered brand elements */
-  --brand-lighter: var(--color-cyan-100);
-  /* subtle tinted states, badges */
-  --brand-darker: var(--color-cyan-700);
-  /* pressed / deep accent states */
-  --logo: var(--color-black);
-  /* UiPath logo color */
-
-  /* ── Foreground (text / icons) ────────────────────────────────────────── */
-  --foreground: var(--color-zinc-950);
-  /* primary headings */
-  --foreground-secondary: var(--color-zinc-900);
-  /* body, messages */
-  --foreground-hover: var(--color-zinc-600);
-  /* hover states */
-  --foreground-muted: var(--color-zinc-500);
-  /* nav, secondary UI */
-  --foreground-subtle: var(--color-zinc-400);
-  /* labels, muted */
-  --foreground-inverse: var(--color-zinc-50);
-  /* icons on dark bg */
-  --foreground-on-accent: var(--color-zinc-950);
-  /* text on accent bg */
-  --foreground-accent: var(--color-cyan-500);
-  /* accent text */
-  --foreground-accent-muted: var(--color-cyan-600);
-  /* muted accent text */
-  --foreground-emp: var(--color-black);
-  /* emphasized text — highest priority headings */
-  --foreground-link: var(--color-cyan-600);
-  /* hyperlinks, inline navigational text */
-
-  /* ── Borders ──────────────────────────────────────────────────────────── */
-  --ap-wind-border: var(--color-zinc-300);
-  /* primary borders */
-  --border-subtle: var(--color-zinc-200);
-  /* subtle dividers */
-  --border-muted: var(--color-zinc-100);
-  /* content borders */
-  --border-deep: var(--color-zinc-50);
-  /* nested containers */
-  --border-inverse: var(--color-zinc-700);
-  /* borders on inverse bg */
-  --border-hover: var(--color-zinc-400);
-  /* border hover state */
-  --border-disabled: var(--color-zinc-200);
-  /* disabled control borders */
-  --border-grid: var(--color-zinc-200);
-  /* table / data grid internal lines */
-
-  /* ── Ring ──────────────────────────────────────────────────────────────── */
-  --ring: var(--color-zinc-400);
-  /* selection ring */
-
-  /* ── Gradients (kept as hex — adjusted values that don't map 1:1 to palette steps) ── */
   --gradient-1: linear-gradient(127deg, #e4e4e7 25.94%, #f4f4f5 74.06%);
   /* zinc-200 → zinc-100 */
   --gradient-2: linear-gradient(128deg, #fafafa 1.26%, #fafafa 52.69%);
@@ -622,78 +202,8 @@ body.future-light, .future-light {
   /* zinc-50 → zinc-50 */
   --gradient-6: linear-gradient(106deg, #22d3ee 28.08%, #cffafe 71.92%);
   /* cyan-400 → cyan-100 */
-
-  /* ── Code window / syntax ────────────────────────────────────────────── */
-  --code-rest: var(--color-zinc-600);
-  /* default text, identifiers, plain code */
-  --code-punctuation: var(--color-zinc-500);
-  /* brackets, commas, semicolons */
-  --code-key: var(--color-cyan-700);
-  /* keywords, properties, attributes */
-  --code-string: var(--color-emerald-700);
-  /* string values */
-  --code-number: var(--color-amber-700);
-  /* numeric literals */
-  --code-literal: var(--color-violet-600);
-  /* booleans, null, undefined */
-
-  /* ── Status ──────────────────────────────────────────────────────────── */
-  --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 ───────────────────────────────────────────────────────────── */
-  --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);
-
-  /* ── shadcn aliases ──────────────────────────────────────────────────── */
-  --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);
-  /* text on destructive bg */
-  --border-de-emp: var(--border-subtle);
-  --input: var(--ap-wind-border);
-
-  /* FIXME: apollo-core should add new themes support for all semantic tokens */
-  --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);
 }
 
-
 /* ============================================================================
  * DEMO — Wireframe theme (low-fidelity prototyping)
  *
@@ -1026,15 +536,13 @@ body.canvas, .canvas {
 }
 
 /**
- * FIXME: apollo-core should add new themes support for all semantic tokens.
- *
- * Element themes don't have body.dark / body.light selectors, so the semantic
- * --color-* tokens from theme-variables.css don't apply. Bridge the gap by
- * mapping them to Wind semantic tokens here.
+ * Demo themes (wireframe / vertex / canvas) have no apollo-core theme blocks,
+ * so the semantic --color-* tokens from theme-variables.css don't apply.
+ * Bridge the gap by mapping them to Wind semantic tokens here.
+ * (future-light / future-dark no longer need this — apollo-core defines all
+ * --color-* tokens for them, including bare element-scoped class selectors.)
  */
 
-.future-light,
-.future-dark,
 .wireframe,
 .vertex,
 .canvas {