@uipath/apollo-react 5.0.2 → 5.1.1

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

@@ -128,6 +128,8 @@ body.light, .apollo-design.light, :where(.light:not(.react-flow)) {
   --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;
@@ -262,6 +264,8 @@ body.light-hc, .apollo-design.light-hc, :where(.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;
@@ -396,6 +400,8 @@ body.dark, .apollo-design.dark, :where(.dark:not(.react-flow)) {
   --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;
@@ -530,6 +536,8 @@ body.dark-hc, .apollo-design.dark-hc, :where(.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;
@@ -666,6 +674,8 @@ body.future-dark, .future-dark {
   --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;
@@ -800,6 +810,8 @@ body.future-light, .future-light {
   --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;

package/dist/core/tokens/css/variables.css

@@ -1,4 +1,4 @@
-:root {
+:root, :host {
   --color-orange-100: #fee3dc;
   --color-orange-200: #fda891;
   --color-orange-300: #ff8f70;
@@ -1015,6 +1015,18 @@
   --color-gradient-human-end-dark-hc: #2b5372;
   --color-gradient-human-end-future-dark: #2b5372;
   --color-gradient-human-end-future-light: #d8eeff;
+  --color-canvas-background-light: #f4f5f7;
+  --color-canvas-background-light-hc: #f4f5f7;
+  --color-canvas-background-dark: #10151a;
+  --color-canvas-background-dark-hc: #10151a;
+  --color-canvas-background-future-dark: #09090b;
+  --color-canvas-background-future-light: #fafafa;
+  --color-dot-grid-light: #dce5eb;
+  --color-dot-grid-light-hc: #dce5eb;
+  --color-dot-grid-dark: #2f3133;
+  --color-dot-grid-dark-hc: #2f3133;
+  --color-dot-grid-future-dark: #27272a;
+  --color-dot-grid-future-light: #e4e4e7;
   --color-background-overlay-light: #f4f5f7;
   --color-background-overlay-light-hc: #f4f5f7;
   --color-background-overlay-dark: #374652;

package/dist/core/tokens/jss/palette.cjs

@@ -151,6 +151,12 @@ var __webpack_modules__ = {
             ColorCalloutBackgroundFutureLight: ()=>ColorCalloutBackgroundFutureLight,
             ColorCalloutBackgroundLight: ()=>ColorCalloutBackgroundLight,
             ColorCalloutBackgroundLightHc: ()=>ColorCalloutBackgroundLightHc,
+            ColorCanvasBackgroundDark: ()=>ColorCanvasBackgroundDark,
+            ColorCanvasBackgroundDarkHc: ()=>ColorCanvasBackgroundDarkHc,
+            ColorCanvasBackgroundFutureDark: ()=>ColorCanvasBackgroundFutureDark,
+            ColorCanvasBackgroundFutureLight: ()=>ColorCanvasBackgroundFutureLight,
+            ColorCanvasBackgroundLight: ()=>ColorCanvasBackgroundLight,
+            ColorCanvasBackgroundLightHc: ()=>ColorCanvasBackgroundLightHc,
             ColorCarouselBackgroundDark: ()=>ColorCarouselBackgroundDark,
             ColorCarouselBackgroundDarkHc: ()=>ColorCarouselBackgroundDarkHc,
             ColorCarouselBackgroundFutureDark: ()=>ColorCarouselBackgroundFutureDark,
@@ -265,6 +271,12 @@ var __webpack_modules__ = {
             ColorDataGridPressedFutureLight: ()=>ColorDataGridPressedFutureLight,
             ColorDataGridPressedLight: ()=>ColorDataGridPressedLight,
             ColorDataGridPressedLightHc: ()=>ColorDataGridPressedLightHc,
+            ColorDotGridDark: ()=>ColorDotGridDark,
+            ColorDotGridDarkHc: ()=>ColorDotGridDarkHc,
+            ColorDotGridFutureDark: ()=>ColorDotGridFutureDark,
+            ColorDotGridFutureLight: ()=>ColorDotGridFutureLight,
+            ColorDotGridLight: ()=>ColorDotGridLight,
+            ColorDotGridLightHc: ()=>ColorDotGridLightHc,
             ColorError250: ()=>ColorError250,
             ColorError500: ()=>ColorError500,
             ColorError750: ()=>ColorError750,
@@ -1653,6 +1665,18 @@ var __webpack_modules__ = {
         const ColorGradientHumanEndDarkHc = "#2b5372";
         const ColorGradientHumanEndFutureDark = "#2b5372";
         const ColorGradientHumanEndFutureLight = "#d8eeff";
+        const ColorCanvasBackgroundLight = "#f4f5f7";
+        const ColorCanvasBackgroundLightHc = "#f4f5f7";
+        const ColorCanvasBackgroundDark = "#10151a";
+        const ColorCanvasBackgroundDarkHc = "#10151a";
+        const ColorCanvasBackgroundFutureDark = "#09090b";
+        const ColorCanvasBackgroundFutureLight = "#fafafa";
+        const ColorDotGridLight = "#dce5eb";
+        const ColorDotGridLightHc = "#dce5eb";
+        const ColorDotGridDark = "#2f3133";
+        const ColorDotGridDarkHc = "#2f3133";
+        const ColorDotGridFutureDark = "#27272a";
+        const ColorDotGridFutureLight = "#e4e4e7";
         const ColorBackgroundOverlayLight = "#f4f5f7";
         const ColorBackgroundOverlayLightHc = "#f4f5f7";
         const ColorBackgroundOverlayDark = "#374652";
@@ -1874,6 +1898,8 @@ var __webpack_exports__ = {};
             colorGradientInvokedEnd: _Colors__rspack_import_0.ColorGradientInvokedEndLight,
             colorGradientHumanStart: _Colors__rspack_import_0.ColorGradientHumanStartLight,
             colorGradientHumanEnd: _Colors__rspack_import_0.ColorGradientHumanEndLight,
+            colorCanvasBackground: _Colors__rspack_import_0.ColorCanvasBackgroundLight,
+            colorDotGrid: _Colors__rspack_import_0.ColorDotGridLight,
             colorBackgroundOverlay: _Colors__rspack_import_0.ColorBackgroundOverlayLight,
             colorForegroundSecondary: _Colors__rspack_import_0.ColorForegroundSecondaryLight,
             colorForegroundHover: _Colors__rspack_import_0.ColorForegroundHoverLight,
@@ -2153,6 +2179,8 @@ var __webpack_exports__ = {};
             colorGradientInvokedEnd: _Colors__rspack_import_0.ColorGradientInvokedEndLightHc,
             colorGradientHumanStart: _Colors__rspack_import_0.ColorGradientHumanStartLightHc,
             colorGradientHumanEnd: _Colors__rspack_import_0.ColorGradientHumanEndLightHc,
+            colorCanvasBackground: _Colors__rspack_import_0.ColorCanvasBackgroundLightHc,
+            colorDotGrid: _Colors__rspack_import_0.ColorDotGridLightHc,
             colorBackgroundOverlay: _Colors__rspack_import_0.ColorBackgroundOverlayLightHc,
             colorForegroundSecondary: _Colors__rspack_import_0.ColorForegroundSecondaryLightHc,
             colorForegroundHover: _Colors__rspack_import_0.ColorForegroundHoverLightHc,
@@ -2432,6 +2460,8 @@ var __webpack_exports__ = {};
             colorGradientInvokedEnd: _Colors__rspack_import_0.ColorGradientInvokedEndDark,
             colorGradientHumanStart: _Colors__rspack_import_0.ColorGradientHumanStartDark,
             colorGradientHumanEnd: _Colors__rspack_import_0.ColorGradientHumanEndDark,
+            colorCanvasBackground: _Colors__rspack_import_0.ColorCanvasBackgroundDark,
+            colorDotGrid: _Colors__rspack_import_0.ColorDotGridDark,
             colorBackgroundOverlay: _Colors__rspack_import_0.ColorBackgroundOverlayDark,
             colorForegroundSecondary: _Colors__rspack_import_0.ColorForegroundSecondaryDark,
             colorForegroundHover: _Colors__rspack_import_0.ColorForegroundHoverDark,
@@ -2711,6 +2741,8 @@ var __webpack_exports__ = {};
             colorGradientInvokedEnd: _Colors__rspack_import_0.ColorGradientInvokedEndDarkHc,
             colorGradientHumanStart: _Colors__rspack_import_0.ColorGradientHumanStartDarkHc,
             colorGradientHumanEnd: _Colors__rspack_import_0.ColorGradientHumanEndDarkHc,
+            colorCanvasBackground: _Colors__rspack_import_0.ColorCanvasBackgroundDarkHc,
+            colorDotGrid: _Colors__rspack_import_0.ColorDotGridDarkHc,
             colorBackgroundOverlay: _Colors__rspack_import_0.ColorBackgroundOverlayDarkHc,
             colorForegroundSecondary: _Colors__rspack_import_0.ColorForegroundSecondaryDarkHc,
             colorForegroundHover: _Colors__rspack_import_0.ColorForegroundHoverDarkHc,
@@ -2990,6 +3022,8 @@ var __webpack_exports__ = {};
             colorGradientInvokedEnd: _Colors__rspack_import_0.ColorGradientInvokedEndFutureDark,
             colorGradientHumanStart: _Colors__rspack_import_0.ColorGradientHumanStartFutureDark,
             colorGradientHumanEnd: _Colors__rspack_import_0.ColorGradientHumanEndFutureDark,
+            colorCanvasBackground: _Colors__rspack_import_0.ColorCanvasBackgroundFutureDark,
+            colorDotGrid: _Colors__rspack_import_0.ColorDotGridFutureDark,
             colorBackgroundOverlay: _Colors__rspack_import_0.ColorBackgroundOverlayFutureDark,
             colorForegroundSecondary: _Colors__rspack_import_0.ColorForegroundSecondaryFutureDark,
             colorForegroundHover: _Colors__rspack_import_0.ColorForegroundHoverFutureDark,
@@ -3269,6 +3303,8 @@ var __webpack_exports__ = {};
             colorGradientInvokedEnd: _Colors__rspack_import_0.ColorGradientInvokedEndFutureLight,
             colorGradientHumanStart: _Colors__rspack_import_0.ColorGradientHumanStartFutureLight,
             colorGradientHumanEnd: _Colors__rspack_import_0.ColorGradientHumanEndFutureLight,
+            colorCanvasBackground: _Colors__rspack_import_0.ColorCanvasBackgroundFutureLight,
+            colorDotGrid: _Colors__rspack_import_0.ColorDotGridFutureLight,
             colorBackgroundOverlay: _Colors__rspack_import_0.ColorBackgroundOverlayFutureLight,
             colorForegroundSecondary: _Colors__rspack_import_0.ColorForegroundSecondaryFutureLight,
             colorForegroundHover: _Colors__rspack_import_0.ColorForegroundHoverFutureLight,

package/dist/core/tokens/jss/palette.d.ts

@@ -120,6 +120,8 @@ export type Palette = {
         colorGradientInvokedEnd: string;
         colorGradientHumanStart: string;
         colorGradientHumanEnd: string;
+        colorCanvasBackground: string;
+        colorDotGrid: string;
         colorBackgroundOverlay: string;
         colorForegroundSecondary: string;
         colorForegroundHover: string;

package/dist/core/tokens/less/_variables.less

@@ -1014,6 +1014,18 @@
 @color-gradient-human-end-dark-hc: #2b5372;
 @color-gradient-human-end-future-dark: #2b5372;
 @color-gradient-human-end-future-light: #d8eeff;
+@color-canvas-background-light: #f4f5f7;
+@color-canvas-background-light-hc: #f4f5f7;
+@color-canvas-background-dark: #10151a;
+@color-canvas-background-dark-hc: #10151a;
+@color-canvas-background-future-dark: #09090b;
+@color-canvas-background-future-light: #fafafa;
+@color-dot-grid-light: #dce5eb;
+@color-dot-grid-light-hc: #dce5eb;
+@color-dot-grid-dark: #2f3133;
+@color-dot-grid-dark-hc: #2f3133;
+@color-dot-grid-future-dark: #27272a;
+@color-dot-grid-future-light: #e4e4e7;
 @color-background-overlay-light: #f4f5f7;
 @color-background-overlay-light-hc: #f4f5f7;
 @color-background-overlay-dark: #374652;