@uipath/apollo-core 5.9.1 → 5.11.0

package/dist/tokens/css/theme-variables.css

@@ -1,6 +1,14 @@
 @import "./variables.css";
 
-body.light, .apollo-design.light {
+/*
+ * Classic themes additionally match bare element classes via :where() so a
+ * theme class on any element (not just body/.apollo-design) defines the
+ * tokens for that subtree. :where() keeps specificity at zero, so existing
+ * body.X-level overrides in consuming apps keep winning.
+ * :not(.react-flow) excludes ReactFlow wrappers, which add a .light/.dark
+ * class of their own (colorMode prop) and must not re-theme their subtree.
+ */
+body.light, .apollo-design.light, :where(.light:not(.react-flow)) {
   --color-background: #ffffff;
   --color-background-secondary: #f4f5f7;
   --color-background-inverse: #182027;
@@ -120,12 +128,23 @@ body.light, .apollo-design.light {
   --color-gradient-invoked-end: #daf3ff;
   --color-gradient-human-start: #f6faff;
   --color-gradient-human-end: #d8eeff;
+  --color-canvas-background: #f4f5f7;
+  --color-dot-grid: #dce5eb;
+  --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;
@@ -245,12 +264,23 @@ body.light-hc, .apollo-design.light-hc {
   --color-gradient-invoked-end: #daf3ff;
   --color-gradient-human-start: #f6faff;
   --color-gradient-human-end: #d8eeff;
+  --color-canvas-background: #f4f5f7;
+  --color-dot-grid: #dce5eb;
+  --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;
@@ -370,12 +400,23 @@ body.dark, .apollo-design.dark {
   --color-gradient-invoked-end: #35667d;
   --color-gradient-human-start: #6885ab;
   --color-gradient-human-end: #2b5372;
+  --color-canvas-background: #10151a;
+  --color-dot-grid: #2f3133;
+  --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;
@@ -495,7 +536,292 @@ body.dark-hc, .apollo-design.dark-hc {
   --color-gradient-invoked-end: #35667d;
   --color-gradient-human-start: #6885ab;
   --color-gradient-human-end: #2b5372;
+  --color-canvas-background: #10151a;
+  --color-dot-grid: #2f3133;
+  --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;
 }
+
+/* Future themes use bare class selectors (not gated on body/.apollo-design)
+   so they can be scoped to any element, matching how apollo-wind applies them. */
+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-canvas-background: #09090b;
+  --color-dot-grid: #27272a;
+  --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-canvas-background: #fafafa;
+  --color-dot-grid: #e4e4e7;
+  --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;
+}