@uipath/apollo-core 5.10.0 → 5.11.1

package/dist/tokens/scss/_variables.scss

@@ -1016,6 +1016,18 @@ $color-gradient-human-end-dark: #2b5372 !default;
 $color-gradient-human-end-dark-hc: #2b5372 !default;
 $color-gradient-human-end-future-dark: #2b5372 !default;
 $color-gradient-human-end-future-light: #d8eeff !default;
+$color-canvas-background-light: #f4f5f7 !default;
+$color-canvas-background-light-hc: #f4f5f7 !default;
+$color-canvas-background-dark: #10151a !default;
+$color-canvas-background-dark-hc: #10151a !default;
+$color-canvas-background-future-dark: #09090b !default;
+$color-canvas-background-future-light: #fafafa !default;
+$color-dot-grid-light: #dce5eb !default;
+$color-dot-grid-light-hc: #dce5eb !default;
+$color-dot-grid-dark: #2f3133 !default;
+$color-dot-grid-dark-hc: #2f3133 !default;
+$color-dot-grid-future-dark: #27272a !default;
+$color-dot-grid-future-light: #e4e4e7 !default;
 $color-background-overlay-light: #f4f5f7 !default;
 $color-background-overlay-light-hc: #f4f5f7 !default;
 $color-background-overlay-dark: #374652 !default;
@@ -2632,6 +2644,22 @@ $tokens: (
       'future-dark': $color-gradient-human-end-future-dark,
       'future-light': $color-gradient-human-end-future-light
     ),
+    'canvasBackground': (
+      'light': $color-canvas-background-light,
+      'light-hc': $color-canvas-background-light-hc,
+      'dark': $color-canvas-background-dark,
+      'dark-hc': $color-canvas-background-dark-hc,
+      'future-dark': $color-canvas-background-future-dark,
+      'future-light': $color-canvas-background-future-light
+    ),
+    'dotGrid': (
+      'light': $color-dot-grid-light,
+      'light-hc': $color-dot-grid-light-hc,
+      'dark': $color-dot-grid-dark,
+      'dark-hc': $color-dot-grid-dark-hc,
+      'future-dark': $color-dot-grid-future-dark,
+      'future-light': $color-dot-grid-future-light
+    ),
     'backgroundOverlay': (
       'light': $color-background-overlay-light,
       'light-hc': $color-background-overlay-light-hc,

package/dist/tokens/scss/base-host.scss

@@ -118,6 +118,8 @@
   --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-canvas-background: #{$color-canvas-background-light};
+  --color-dot-grid: #{$color-dot-grid-light};
   --color-background-overlay: #{$color-background-overlay-light};
   --color-foreground-secondary: #{$color-foreground-secondary-light};
   --color-foreground-hover: #{$color-foreground-hover-light};
@@ -251,6 +253,8 @@
   --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-canvas-background: #{$color-canvas-background-light-hc};
+  --color-dot-grid: #{$color-dot-grid-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};
@@ -384,6 +388,8 @@
   --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-canvas-background: #{$color-canvas-background-dark};
+  --color-dot-grid: #{$color-dot-grid-dark};
   --color-background-overlay: #{$color-background-overlay-dark};
   --color-foreground-secondary: #{$color-foreground-secondary-dark};
   --color-foreground-hover: #{$color-foreground-hover-dark};
@@ -517,6 +523,8 @@
   --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-canvas-background: #{$color-canvas-background-dark-hc};
+  --color-dot-grid: #{$color-dot-grid-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};
@@ -650,6 +658,8 @@
   --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-canvas-background: #{$color-canvas-background-future-dark};
+  --color-dot-grid: #{$color-dot-grid-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};
@@ -783,6 +793,8 @@
   --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-canvas-background: #{$color-canvas-background-future-light};
+  --color-dot-grid: #{$color-dot-grid-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};

package/dist/tokens/scss/helpers.scss

@@ -0,0 +1,26 @@
+@use './variables';
+
+@function ui-color($name, $hue, $contrast: false) {
+  $colors: map-get(variables.$tokens, 'color');
+  $palette: map-get($colors, $name);
+  @return map-get($palette, $hue + if($contrast, '-contrast', ''));
+}
+
+@function ui-color-contrast($name, $hue) {
+  @return ui-color($name, $hue, true);
+}
+
+@function ui-icon-size($size) {
+  $icon-sizes: map-get(variables.$tokens, 'icon');
+  @return map-get($icon-sizes, $size);
+}
+
+@function ui-padding($size) {
+  $paddings: map-get(variables.$tokens, 'pad');
+  @return map-get($paddings, $size);
+}
+
+@function ui-spacing($size) {
+  $spacings: map-get(variables.$tokens, 'spacing');
+  @return map-get($spacings, $size);
+}

package/dist/tokens/scss/mixins.scss

@@ -0,0 +1,5 @@
+@mixin text-ellipsis {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}

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

@@ -120,6 +120,8 @@ body.light, .apollo-design.light, :where(.light:not(.react-flow)) {
   --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-canvas-background: #{$color-canvas-background-light};
+  --color-dot-grid: #{$color-dot-grid-light};
   --color-background-overlay: #{$color-background-overlay-light};
   --color-foreground-secondary: #{$color-foreground-secondary-light};
   --color-foreground-hover: #{$color-foreground-hover-light};
@@ -254,6 +256,8 @@ body.light-hc, .apollo-design.light-hc, :where(.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-canvas-background: #{$color-canvas-background-light-hc};
+  --color-dot-grid: #{$color-dot-grid-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};
@@ -388,6 +392,8 @@ body.dark, .apollo-design.dark, :where(.dark:not(.react-flow)) {
   --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-canvas-background: #{$color-canvas-background-dark};
+  --color-dot-grid: #{$color-dot-grid-dark};
   --color-background-overlay: #{$color-background-overlay-dark};
   --color-foreground-secondary: #{$color-foreground-secondary-dark};
   --color-foreground-hover: #{$color-foreground-hover-dark};
@@ -522,6 +528,8 @@ body.dark-hc, .apollo-design.dark-hc, :where(.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-canvas-background: #{$color-canvas-background-dark-hc};
+  --color-dot-grid: #{$color-dot-grid-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};
@@ -658,6 +666,8 @@ body.future-dark, .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-canvas-background: #{$color-canvas-background-future-dark};
+  --color-dot-grid: #{$color-dot-grid-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};
@@ -792,6 +802,8 @@ body.future-light, .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-canvas-background: #{$color-canvas-background-future-light};
+  --color-dot-grid: #{$color-dot-grid-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};

package/dist/tokens/scss/theme.scss

@@ -120,6 +120,8 @@ $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-canvas-background: $color-canvas-background-light,
+    color-dot-grid: $color-dot-grid-light,
     color-background-overlay: $color-background-overlay-light,
     color-foreground-secondary: $color-foreground-secondary-light,
     color-foreground-hover: $color-foreground-hover-light,
@@ -254,6 +256,8 @@ $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-canvas-background: $color-canvas-background-light-hc,
+    color-dot-grid: $color-dot-grid-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,
@@ -388,6 +392,8 @@ $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-canvas-background: $color-canvas-background-dark,
+    color-dot-grid: $color-dot-grid-dark,
     color-background-overlay: $color-background-overlay-dark,
     color-foreground-secondary: $color-foreground-secondary-dark,
     color-foreground-hover: $color-foreground-hover-dark,
@@ -522,6 +528,8 @@ $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-canvas-background: $color-canvas-background-dark-hc,
+    color-dot-grid: $color-dot-grid-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,
@@ -656,6 +664,8 @@ $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-canvas-background: $color-canvas-background-future-dark,
+    color-dot-grid: $color-dot-grid-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,
@@ -790,6 +800,8 @@ $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-canvas-background: $color-canvas-background-future-light,
+    color-dot-grid: $color-dot-grid-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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-core",
-  "version": "5.10.0",
+  "version": "5.11.1",
   "description": "Apollo Design System - Core design tokens, icons, and fonts",
   "repository": {
     "type": "git",