@uipath/apollo-react 4.42.0 → 4.43.0

package/dist/core/tokens/scss/theme-variables.scss

@@ -1,6 +1,6 @@
 @import "./variables";
 
-body.light, .apollo-design.light {
+body.light, .apollo-design.light, :where(.light:not(.react-flow)) {
   --color-background: #{$color-background-light};
   --color-background-secondary: #{$color-background-secondary-light};
   --color-background-inverse: #{$color-background-inverse-light};
@@ -120,12 +120,21 @@ body.light, .apollo-design.light {
   --color-gradient-invoked-end: #{$color-gradient-invoked-end-light};
   --color-gradient-human-start: #{$color-gradient-human-start-light};
   --color-gradient-human-end: #{$color-gradient-human-end-light};
+  --color-background-overlay: #{$color-background-overlay-light};
+  --color-foreground-secondary: #{$color-foreground-secondary-light};
+  --color-foreground-hover: #{$color-foreground-hover-light};
+  --color-foreground-on-accent: #{$color-foreground-on-accent-light};
+  --color-primary-subtle: #{$color-primary-subtle-light};
+  --color-border-muted: #{$color-border-muted-light};
+  --color-border-deep: #{$color-border-deep-light};
+  --color-border-inverse: #{$color-border-inverse-light};
+  --color-border-hover: #{$color-border-hover-light};
 
   --border: #{$border-light};
   color-scheme: light;
 }
 
-body.light-hc, .apollo-design.light-hc {
+body.light-hc, .apollo-design.light-hc, :where(.light-hc) {
   --color-background: #{$color-background-light-hc};
   --color-background-secondary: #{$color-background-secondary-light-hc};
   --color-background-inverse: #{$color-background-inverse-light-hc};
@@ -245,12 +254,21 @@ body.light-hc, .apollo-design.light-hc {
   --color-gradient-invoked-end: #{$color-gradient-invoked-end-light-hc};
   --color-gradient-human-start: #{$color-gradient-human-start-light-hc};
   --color-gradient-human-end: #{$color-gradient-human-end-light-hc};
+  --color-background-overlay: #{$color-background-overlay-light-hc};
+  --color-foreground-secondary: #{$color-foreground-secondary-light-hc};
+  --color-foreground-hover: #{$color-foreground-hover-light-hc};
+  --color-foreground-on-accent: #{$color-foreground-on-accent-light-hc};
+  --color-primary-subtle: #{$color-primary-subtle-light-hc};
+  --color-border-muted: #{$color-border-muted-light-hc};
+  --color-border-deep: #{$color-border-deep-light-hc};
+  --color-border-inverse: #{$color-border-inverse-light-hc};
+  --color-border-hover: #{$color-border-hover-light-hc};
 
   --border: #{$border-light-hc};
   color-scheme: light;
 }
 
-body.dark, .apollo-design.dark {
+body.dark, .apollo-design.dark, :where(.dark:not(.react-flow)) {
   --color-background: #{$color-background-dark};
   --color-background-secondary: #{$color-background-secondary-dark};
   --color-background-inverse: #{$color-background-inverse-dark};
@@ -370,12 +388,21 @@ body.dark, .apollo-design.dark {
   --color-gradient-invoked-end: #{$color-gradient-invoked-end-dark};
   --color-gradient-human-start: #{$color-gradient-human-start-dark};
   --color-gradient-human-end: #{$color-gradient-human-end-dark};
+  --color-background-overlay: #{$color-background-overlay-dark};
+  --color-foreground-secondary: #{$color-foreground-secondary-dark};
+  --color-foreground-hover: #{$color-foreground-hover-dark};
+  --color-foreground-on-accent: #{$color-foreground-on-accent-dark};
+  --color-primary-subtle: #{$color-primary-subtle-dark};
+  --color-border-muted: #{$color-border-muted-dark};
+  --color-border-deep: #{$color-border-deep-dark};
+  --color-border-inverse: #{$color-border-inverse-dark};
+  --color-border-hover: #{$color-border-hover-dark};
 
   --border: #{$border-dark};
   color-scheme: dark;
 }
 
-body.dark-hc, .apollo-design.dark-hc {
+body.dark-hc, .apollo-design.dark-hc, :where(.dark-hc) {
   --color-background: #{$color-background-dark-hc};
   --color-background-secondary: #{$color-background-secondary-dark-hc};
   --color-background-inverse: #{$color-background-inverse-dark-hc};
@@ -495,7 +522,286 @@ body.dark-hc, .apollo-design.dark-hc {
   --color-gradient-invoked-end: #{$color-gradient-invoked-end-dark-hc};
   --color-gradient-human-start: #{$color-gradient-human-start-dark-hc};
   --color-gradient-human-end: #{$color-gradient-human-end-dark-hc};
+  --color-background-overlay: #{$color-background-overlay-dark-hc};
+  --color-foreground-secondary: #{$color-foreground-secondary-dark-hc};
+  --color-foreground-hover: #{$color-foreground-hover-dark-hc};
+  --color-foreground-on-accent: #{$color-foreground-on-accent-dark-hc};
+  --color-primary-subtle: #{$color-primary-subtle-dark-hc};
+  --color-border-muted: #{$color-border-muted-dark-hc};
+  --color-border-deep: #{$color-border-deep-dark-hc};
+  --color-border-inverse: #{$color-border-inverse-dark-hc};
+  --color-border-hover: #{$color-border-hover-dark-hc};
 
   --border: #{$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: #{$color-background-future-dark};
+  --color-background-secondary: #{$color-background-secondary-future-dark};
+  --color-background-inverse: #{$color-background-inverse-future-dark};
+  --color-background-gray: #{$color-background-gray-future-dark};
+  --color-background-disabled: #{$color-background-disabled-future-dark};
+  --color-background-highlight: #{$color-background-highlight-future-dark};
+  --color-background-raised: #{$color-background-raised-future-dark};
+  --color-background-edit: #{$color-background-edit-future-dark};
+  --color-background-gray-emp: #{$color-background-gray-emp-future-dark};
+  --color-background-hover: #{$color-background-hover-future-dark};
+  --color-background-pressed: #{$color-background-pressed-future-dark};
+  --color-background-selected: #{$color-background-selected-future-dark};
+  --color-selection-indicator: #{$color-selection-indicator-future-dark};
+  --color-notification-badge: #{$color-notification-badge-future-dark};
+  --color-notification-indicator: #{$color-notification-indicator-future-dark};
+  --color-hover: #{$color-hover-future-dark};
+  --color-curtain: #{$color-curtain-future-dark};
+  --color-border: #{$color-border-future-dark};
+  --color-border-disabled: #{$color-border-disabled-future-dark};
+  --color-border-grid: #{$color-border-grid-future-dark};
+  --color-border-de-emp: #{$color-border-de-emp-future-dark};
+  --color-selection: #{$color-selection-future-dark};
+  --color-logo: #{$color-logo-future-dark};
+  --color-foreground: #{$color-foreground-future-dark};
+  --color-foreground-light: #{$color-foreground-light-future-dark};
+  --color-foreground-emp: #{$color-foreground-emp-future-dark};
+  --color-foreground-de-emp: #{$color-foreground-de-emp-future-dark};
+  --color-foreground-disable: #{$color-foreground-disable-future-dark};
+  --color-foreground-inverse: #{$color-foreground-inverse-future-dark};
+  --color-foreground-highlight: #{$color-foreground-highlight-future-dark};
+  --color-foreground-highlight-selected: #{$color-foreground-highlight-selected-future-dark};
+  --color-foreground-highlight-selected-hover: #{$color-foreground-highlight-selected-hover-future-dark};
+  --color-foreground-link: #{$color-foreground-link-future-dark};
+  --color-foreground-link-pressed: #{$color-foreground-link-pressed-future-dark};
+  --color-foreground-inv-de-emp: #{$color-foreground-inv-de-emp-future-dark};
+  --color-primary: #{$color-primary-future-dark};
+  --color-primary-lighter: #{$color-primary-lighter-future-dark};
+  --color-primary-darker: #{$color-primary-darker-future-dark};
+  --color-primary-hover: #{$color-primary-hover-future-dark};
+  --color-primary-focused: #{$color-primary-focused-future-dark};
+  --color-primary-pressed: #{$color-primary-pressed-future-dark};
+  --color-secondary-focused: #{$color-secondary-focused-future-dark};
+  --color-secondary-pressed: #{$color-secondary-pressed-future-dark};
+  --color-chip-default-background: #{$color-chip-default-background-future-dark};
+  --color-chip-error-background: #{$color-chip-error-background-future-dark};
+  --color-chip-warning-background: #{$color-chip-warning-background-future-dark};
+  --color-chip-info-background: #{$color-chip-info-background-future-dark};
+  --color-chip-success-background: #{$color-chip-success-background-future-dark};
+  --color-error-icon: #{$color-error-icon-future-dark};
+  --color-error-icon-inverse: #{$color-error-icon-inverse-future-dark};
+  --color-error-text: #{$color-error-text-future-dark};
+  --color-error-background: #{$color-error-background-future-dark};
+  --color-error-foreground-inverse: #{$color-error-foreground-inverse-future-dark};
+  --color-info-foreground: #{$color-info-foreground-future-dark};
+  --color-info-icon: #{$color-info-icon-future-dark};
+  --color-info-icon-inverse: #{$color-info-icon-inverse-future-dark};
+  --color-info-text: #{$color-info-text-future-dark};
+  --color-info-foreground-inverse: #{$color-info-foreground-inverse-future-dark};
+  --color-info-background: #{$color-info-background-future-dark};
+  --color-success-icon: #{$color-success-icon-future-dark};
+  --color-success-icon-inverse: #{$color-success-icon-inverse-future-dark};
+  --color-success-text: #{$color-success-text-future-dark};
+  --color-success-background: #{$color-success-background-future-dark};
+  --color-success-foreground-inverse: #{$color-success-foreground-inverse-future-dark};
+  --color-warning-icon: #{$color-warning-icon-future-dark};
+  --color-warning-icon-inverse: #{$color-warning-icon-inverse-future-dark};
+  --color-warning-text: #{$color-warning-text-future-dark};
+  --color-warning-background: #{$color-warning-background-future-dark};
+  --color-warning-foreground-inverse: #{$color-warning-foreground-inverse-future-dark};
+  --color-icon-default: #{$color-icon-default-future-dark};
+  --color-icon-inverted-default: #{$color-icon-inverted-default-future-dark};
+  --color-toggle-off-hover: #{$color-toggle-off-hover-future-dark};
+  --color-toggle-off-focus: #{$color-toggle-off-focus-future-dark};
+  --color-toggle-off-pressed: #{$color-toggle-off-pressed-future-dark};
+  --color-toggle-on-hover: #{$color-toggle-on-hover-future-dark};
+  --color-toggle-on-focus: #{$color-toggle-on-focus-future-dark};
+  --color-toggle-on-pressed: #{$color-toggle-on-pressed-future-dark};
+  --color-callout-background: #{$color-callout-background-future-dark};
+  --color-warn: #{$color-warn-future-dark};
+  --color-warn-darker: #{$color-warn-darker-future-dark};
+  --color-warn-hover: #{$color-warn-hover-future-dark};
+  --color-warn-focus: #{$color-warn-focus-future-dark};
+  --color-warn-pressed: #{$color-warn-pressed-future-dark};
+  --color-carousel-background: #{$color-carousel-background-future-dark};
+  --color-icon-button-hover: #{$color-icon-button-hover-future-dark};
+  --color-icon-button-focus: #{$color-icon-button-focus-future-dark};
+  --color-icon-button-pressed: #{$color-icon-button-pressed-future-dark};
+  --color-code-function: #{$color-code-function-future-dark};
+  --color-code-operator: #{$color-code-operator-future-dark};
+  --color-code-numeric: #{$color-code-numeric-future-dark};
+  --color-code-text: #{$color-code-text-future-dark};
+  --color-toggle-thumb-off: #{$color-toggle-thumb-off-future-dark};
+  --color-toggle-track-off: #{$color-toggle-track-off-future-dark};
+  --color-toggle-thumb-on: #{$color-toggle-thumb-on-future-dark};
+  --color-toggle-track-on: #{$color-toggle-track-on-future-dark};
+  --color-toggle-thumb-off-disabled: #{$color-toggle-thumb-off-disabled-future-dark};
+  --color-toggle-track-off-disabled: #{$color-toggle-track-off-disabled-future-dark};
+  --color-toggle-thumb-on-disabled: #{$color-toggle-thumb-on-disabled-future-dark};
+  --color-toggle-track-on-disabled: #{$color-toggle-track-on-disabled-future-dark};
+  --color-skeleton: #{$color-skeleton-future-dark};
+  --color-skeleton-glow: #{$color-skeleton-glow-future-dark};
+  --color-data-grid-hover: #{$color-data-grid-hover-future-dark};
+  --color-data-grid-pressed: #{$color-data-grid-pressed-future-dark};
+  --color-focus-indicator: #{$color-focus-indicator-future-dark};
+  --color-focus-indicator-inverse: #{$color-focus-indicator-inverse-future-dark};
+  --color-chart-purple: #{$color-chart-purple-future-dark};
+  --color-chart-pink: #{$color-chart-pink-future-dark};
+  --color-chart-blue-secondary: #{$color-chart-blue-secondary-future-dark};
+  --color-chart-light-blue: #{$color-chart-light-blue-future-dark};
+  --color-chart-green: #{$color-chart-green-future-dark};
+  --color-chart-yellow: #{$color-chart-yellow-future-dark};
+  --color-gradient-general-start: #{$color-gradient-general-start-future-dark};
+  --color-gradient-general-end: #{$color-gradient-general-end-future-dark};
+  --color-gradient-agent-start: #{$color-gradient-agent-start-future-dark};
+  --color-gradient-agent-end: #{$color-gradient-agent-end-future-dark};
+  --color-gradient-invoked-start: #{$color-gradient-invoked-start-future-dark};
+  --color-gradient-invoked-end: #{$color-gradient-invoked-end-future-dark};
+  --color-gradient-human-start: #{$color-gradient-human-start-future-dark};
+  --color-gradient-human-end: #{$color-gradient-human-end-future-dark};
+  --color-background-overlay: #{$color-background-overlay-future-dark};
+  --color-foreground-secondary: #{$color-foreground-secondary-future-dark};
+  --color-foreground-hover: #{$color-foreground-hover-future-dark};
+  --color-foreground-on-accent: #{$color-foreground-on-accent-future-dark};
+  --color-primary-subtle: #{$color-primary-subtle-future-dark};
+  --color-border-muted: #{$color-border-muted-future-dark};
+  --color-border-deep: #{$color-border-deep-future-dark};
+  --color-border-inverse: #{$color-border-inverse-future-dark};
+  --color-border-hover: #{$color-border-hover-future-dark};
+
+  --border: #{$border-future-dark};
+  color-scheme: dark;
+}
+
+body.future-light, .future-light {
+  --color-background: #{$color-background-future-light};
+  --color-background-secondary: #{$color-background-secondary-future-light};
+  --color-background-inverse: #{$color-background-inverse-future-light};
+  --color-background-gray: #{$color-background-gray-future-light};
+  --color-background-disabled: #{$color-background-disabled-future-light};
+  --color-background-highlight: #{$color-background-highlight-future-light};
+  --color-background-raised: #{$color-background-raised-future-light};
+  --color-background-edit: #{$color-background-edit-future-light};
+  --color-background-gray-emp: #{$color-background-gray-emp-future-light};
+  --color-background-hover: #{$color-background-hover-future-light};
+  --color-background-pressed: #{$color-background-pressed-future-light};
+  --color-background-selected: #{$color-background-selected-future-light};
+  --color-selection-indicator: #{$color-selection-indicator-future-light};
+  --color-notification-badge: #{$color-notification-badge-future-light};
+  --color-notification-indicator: #{$color-notification-indicator-future-light};
+  --color-hover: #{$color-hover-future-light};
+  --color-curtain: #{$color-curtain-future-light};
+  --color-border: #{$color-border-future-light};
+  --color-border-disabled: #{$color-border-disabled-future-light};
+  --color-border-grid: #{$color-border-grid-future-light};
+  --color-border-de-emp: #{$color-border-de-emp-future-light};
+  --color-selection: #{$color-selection-future-light};
+  --color-logo: #{$color-logo-future-light};
+  --color-foreground: #{$color-foreground-future-light};
+  --color-foreground-light: #{$color-foreground-light-future-light};
+  --color-foreground-emp: #{$color-foreground-emp-future-light};
+  --color-foreground-de-emp: #{$color-foreground-de-emp-future-light};
+  --color-foreground-disable: #{$color-foreground-disable-future-light};
+  --color-foreground-inverse: #{$color-foreground-inverse-future-light};
+  --color-foreground-highlight: #{$color-foreground-highlight-future-light};
+  --color-foreground-highlight-selected: #{$color-foreground-highlight-selected-future-light};
+  --color-foreground-highlight-selected-hover: #{$color-foreground-highlight-selected-hover-future-light};
+  --color-foreground-link: #{$color-foreground-link-future-light};
+  --color-foreground-link-pressed: #{$color-foreground-link-pressed-future-light};
+  --color-foreground-inv-de-emp: #{$color-foreground-inv-de-emp-future-light};
+  --color-primary: #{$color-primary-future-light};
+  --color-primary-lighter: #{$color-primary-lighter-future-light};
+  --color-primary-darker: #{$color-primary-darker-future-light};
+  --color-primary-hover: #{$color-primary-hover-future-light};
+  --color-primary-focused: #{$color-primary-focused-future-light};
+  --color-primary-pressed: #{$color-primary-pressed-future-light};
+  --color-secondary-focused: #{$color-secondary-focused-future-light};
+  --color-secondary-pressed: #{$color-secondary-pressed-future-light};
+  --color-chip-default-background: #{$color-chip-default-background-future-light};
+  --color-chip-error-background: #{$color-chip-error-background-future-light};
+  --color-chip-warning-background: #{$color-chip-warning-background-future-light};
+  --color-chip-info-background: #{$color-chip-info-background-future-light};
+  --color-chip-success-background: #{$color-chip-success-background-future-light};
+  --color-error-icon: #{$color-error-icon-future-light};
+  --color-error-icon-inverse: #{$color-error-icon-inverse-future-light};
+  --color-error-text: #{$color-error-text-future-light};
+  --color-error-background: #{$color-error-background-future-light};
+  --color-error-foreground-inverse: #{$color-error-foreground-inverse-future-light};
+  --color-info-foreground: #{$color-info-foreground-future-light};
+  --color-info-icon: #{$color-info-icon-future-light};
+  --color-info-icon-inverse: #{$color-info-icon-inverse-future-light};
+  --color-info-text: #{$color-info-text-future-light};
+  --color-info-foreground-inverse: #{$color-info-foreground-inverse-future-light};
+  --color-info-background: #{$color-info-background-future-light};
+  --color-success-icon: #{$color-success-icon-future-light};
+  --color-success-icon-inverse: #{$color-success-icon-inverse-future-light};
+  --color-success-text: #{$color-success-text-future-light};
+  --color-success-background: #{$color-success-background-future-light};
+  --color-success-foreground-inverse: #{$color-success-foreground-inverse-future-light};
+  --color-warning-icon: #{$color-warning-icon-future-light};
+  --color-warning-icon-inverse: #{$color-warning-icon-inverse-future-light};
+  --color-warning-text: #{$color-warning-text-future-light};
+  --color-warning-background: #{$color-warning-background-future-light};
+  --color-warning-foreground-inverse: #{$color-warning-foreground-inverse-future-light};
+  --color-icon-default: #{$color-icon-default-future-light};
+  --color-icon-inverted-default: #{$color-icon-inverted-default-future-light};
+  --color-toggle-off-hover: #{$color-toggle-off-hover-future-light};
+  --color-toggle-off-focus: #{$color-toggle-off-focus-future-light};
+  --color-toggle-off-pressed: #{$color-toggle-off-pressed-future-light};
+  --color-toggle-on-hover: #{$color-toggle-on-hover-future-light};
+  --color-toggle-on-focus: #{$color-toggle-on-focus-future-light};
+  --color-toggle-on-pressed: #{$color-toggle-on-pressed-future-light};
+  --color-callout-background: #{$color-callout-background-future-light};
+  --color-warn: #{$color-warn-future-light};
+  --color-warn-darker: #{$color-warn-darker-future-light};
+  --color-warn-hover: #{$color-warn-hover-future-light};
+  --color-warn-focus: #{$color-warn-focus-future-light};
+  --color-warn-pressed: #{$color-warn-pressed-future-light};
+  --color-carousel-background: #{$color-carousel-background-future-light};
+  --color-icon-button-hover: #{$color-icon-button-hover-future-light};
+  --color-icon-button-focus: #{$color-icon-button-focus-future-light};
+  --color-icon-button-pressed: #{$color-icon-button-pressed-future-light};
+  --color-code-function: #{$color-code-function-future-light};
+  --color-code-operator: #{$color-code-operator-future-light};
+  --color-code-numeric: #{$color-code-numeric-future-light};
+  --color-code-text: #{$color-code-text-future-light};
+  --color-toggle-thumb-off: #{$color-toggle-thumb-off-future-light};
+  --color-toggle-track-off: #{$color-toggle-track-off-future-light};
+  --color-toggle-thumb-on: #{$color-toggle-thumb-on-future-light};
+  --color-toggle-track-on: #{$color-toggle-track-on-future-light};
+  --color-toggle-thumb-off-disabled: #{$color-toggle-thumb-off-disabled-future-light};
+  --color-toggle-track-off-disabled: #{$color-toggle-track-off-disabled-future-light};
+  --color-toggle-thumb-on-disabled: #{$color-toggle-thumb-on-disabled-future-light};
+  --color-toggle-track-on-disabled: #{$color-toggle-track-on-disabled-future-light};
+  --color-skeleton: #{$color-skeleton-future-light};
+  --color-skeleton-glow: #{$color-skeleton-glow-future-light};
+  --color-data-grid-hover: #{$color-data-grid-hover-future-light};
+  --color-data-grid-pressed: #{$color-data-grid-pressed-future-light};
+  --color-focus-indicator: #{$color-focus-indicator-future-light};
+  --color-focus-indicator-inverse: #{$color-focus-indicator-inverse-future-light};
+  --color-chart-purple: #{$color-chart-purple-future-light};
+  --color-chart-pink: #{$color-chart-pink-future-light};
+  --color-chart-blue-secondary: #{$color-chart-blue-secondary-future-light};
+  --color-chart-light-blue: #{$color-chart-light-blue-future-light};
+  --color-chart-green: #{$color-chart-green-future-light};
+  --color-chart-yellow: #{$color-chart-yellow-future-light};
+  --color-gradient-general-start: #{$color-gradient-general-start-future-light};
+  --color-gradient-general-end: #{$color-gradient-general-end-future-light};
+  --color-gradient-agent-start: #{$color-gradient-agent-start-future-light};
+  --color-gradient-agent-end: #{$color-gradient-agent-end-future-light};
+  --color-gradient-invoked-start: #{$color-gradient-invoked-start-future-light};
+  --color-gradient-invoked-end: #{$color-gradient-invoked-end-future-light};
+  --color-gradient-human-start: #{$color-gradient-human-start-future-light};
+  --color-gradient-human-end: #{$color-gradient-human-end-future-light};
+  --color-background-overlay: #{$color-background-overlay-future-light};
+  --color-foreground-secondary: #{$color-foreground-secondary-future-light};
+  --color-foreground-hover: #{$color-foreground-hover-future-light};
+  --color-foreground-on-accent: #{$color-foreground-on-accent-future-light};
+  --color-primary-subtle: #{$color-primary-subtle-future-light};
+  --color-border-muted: #{$color-border-muted-future-light};
+  --color-border-deep: #{$color-border-deep-future-light};
+  --color-border-inverse: #{$color-border-inverse-future-light};
+  --color-border-hover: #{$color-border-hover-future-light};
+
+  --border: #{$border-future-light};
+  color-scheme: light;
+}