@uipath/apollo-react 4.0.0 → 4.1.1

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.types.d.ts

@@ -3,7 +3,7 @@ export declare const STICKY_NOTE_COLORS: {
     readonly green: "#6EB84A";
     readonly yellow: "#FFB40E";
     readonly pink: "#ED145B";
-    readonly white: "var(--uix-canvas-border)";
+    readonly white: "var(--canvas-border)";
 };
 export type StickyNoteColor = keyof typeof STICKY_NOTE_COLORS;
 export interface StickyNoteData extends Record<string, unknown> {

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.types.js

@@ -3,7 +3,7 @@ const STICKY_NOTE_COLORS = {
     green: '#6EB84A',
     yellow: '#FFB40E',
     pink: '#ED145B',
-    white: 'var(--uix-canvas-border)'
+    white: 'var(--canvas-border)'
 };
 const STICKY_NOTE_BG_ALPHA = 0.08;
 function withAlpha(hex, alpha = STICKY_NOTE_BG_ALPHA) {

package/dist/canvas/components/TaskIcon/TaskIcon.styles.cjs

@@ -67,7 +67,7 @@ const TaskIconContainer = styled_default().div`
   width: ${({ $size })=>$size}px;
   height: ${({ $size })=>$size}px;
   border-radius: ${({ $borderRadius })=>$borderRadius}px;
-  color: var(--uix-canvas-foreground-emp);
+  color: var(--canvas-foreground-emp);
   background: ${({ $taskType })=>TASK_ICON_GRADIENTS[$taskType]};
 `;
 exports.CategoryColor = __webpack_exports__.CategoryColor;

package/dist/canvas/components/TaskIcon/TaskIcon.styles.js

@@ -27,7 +27,7 @@ const TaskIconContainer = styled.div`
   width: ${({ $size })=>$size}px;
   height: ${({ $size })=>$size}px;
   border-radius: ${({ $borderRadius })=>$borderRadius}px;
-  color: var(--uix-canvas-foreground-emp);
+  color: var(--canvas-foreground-emp);
   background: ${({ $taskType })=>TASK_ICON_GRADIENTS[$taskType]};
 `;
 export { TaskIcon_styles_CategoryColor as CategoryColor, TASK_ICON_GRADIENTS, TaskIconContainer };

package/dist/canvas/components/Toolbar/EdgeToolbar/EdgeToolbar.styles.cjs

@@ -52,8 +52,8 @@ const StyledEdgeToolbarContent = styled_default().div`
   align-items: center;
   gap: 4px;
   padding: 2px;
-  background: var(--uix-canvas-background);
-  border: 1px solid var(--uix-canvas-border-grid);
+  background: var(--canvas-background);
+  border: 1px solid var(--canvas-border-grid);
   border-radius: 8px;
   box-shadow:
     0 2px 8px rgba(0, 0, 0, 0.08),

package/dist/canvas/components/Toolbar/EdgeToolbar/EdgeToolbar.styles.js

@@ -13,8 +13,8 @@ const StyledEdgeToolbarContent = styled.div`
   align-items: center;
   gap: 4px;
   padding: 2px;
-  background: var(--uix-canvas-background);
-  border: 1px solid var(--uix-canvas-border-grid);
+  background: var(--canvas-background);
+  border: 1px solid var(--canvas-border-grid);
   border-radius: 8px;
   box-shadow:
     0 2px 8px rgba(0, 0, 0, 0.08),

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.styles.cjs

@@ -50,8 +50,8 @@ const StyledToolbarContainer = styled_default()(react_namespaceObject.motion.div
   align-items: center;
   gap: 4px;
   padding: 2px;
-  background: var(--uix-canvas-background);
-  border: 1px solid var(--uix-canvas-border-grid);
+  background: var(--canvas-background);
+  border: 1px solid var(--canvas-border-grid);
   border-radius: 8px;
   box-shadow:
     0 2px 8px rgba(0, 0, 0, 0.08),
@@ -167,7 +167,7 @@ const StyledToolbarContainer = styled_default()(react_namespaceObject.motion.div
 const StyledToolbarSeparator = styled_default().div`
   width: ${({ $orientation })=>'vertical' === $orientation ? '1px' : 'calc(100%)'};
   height: ${({ $orientation })=>'horizontal' === $orientation ? '1px' : '20px'};
-  background: var(--uix-canvas-border-grid);
+  background: var(--canvas-border-grid);
   align-self: center;
 `;
 const StyledDropdownMenu = styled_default()(react_namespaceObject.motion.div)`
@@ -175,8 +175,8 @@ const StyledDropdownMenu = styled_default()(react_namespaceObject.motion.div)`
   top: -2px;
   left: calc(100% + 4px);
   min-width: 180px;
-  background: var(--uix-canvas-background);
-  border: 1px solid var(--uix-canvas-border-subtle);
+  background: var(--canvas-background);
+  border: 1px solid var(--canvas-border-subtle);
   border-radius: 6px;
   box-shadow:
     0 4px 12px rgba(0, 0, 0, 0.08),
@@ -198,22 +198,22 @@ const StyledDropdownItem = styled_default().button`
   opacity: ${({ $disabled })=>$disabled ? 0.4 : 1};
   transition: background 0.15s ease;
   font-size: 14px;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   text-align: left;
   pointer-events: ${({ $disabled })=>$disabled ? 'none' : 'auto'};
 
   &:hover:not(:disabled) {
-    background: var(--uix-canvas-background-secondary);
+    background: var(--canvas-background-secondary);
   }
 
   svg {
     flex-shrink: 0;
-    color: var(--uix-canvas-foreground);
+    color: var(--canvas-foreground);
   }
 
   span {
     flex: 1;
-    color: var(--uix-canvas-foreground);
+    color: var(--canvas-foreground);
   }
 `;
 const StyledOverflowContainer = styled_default().div`

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.styles.js

@@ -8,8 +8,8 @@ const StyledToolbarContainer = styled(motion.div, {
   align-items: center;
   gap: 4px;
   padding: 2px;
-  background: var(--uix-canvas-background);
-  border: 1px solid var(--uix-canvas-border-grid);
+  background: var(--canvas-background);
+  border: 1px solid var(--canvas-border-grid);
   border-radius: 8px;
   box-shadow:
     0 2px 8px rgba(0, 0, 0, 0.08),
@@ -125,7 +125,7 @@ const StyledToolbarContainer = styled(motion.div, {
 const StyledToolbarSeparator = styled.div`
   width: ${({ $orientation })=>'vertical' === $orientation ? '1px' : 'calc(100%)'};
   height: ${({ $orientation })=>'horizontal' === $orientation ? '1px' : '20px'};
-  background: var(--uix-canvas-border-grid);
+  background: var(--canvas-border-grid);
   align-self: center;
 `;
 const StyledDropdownMenu = styled(motion.div)`
@@ -133,8 +133,8 @@ const StyledDropdownMenu = styled(motion.div)`
   top: -2px;
   left: calc(100% + 4px);
   min-width: 180px;
-  background: var(--uix-canvas-background);
-  border: 1px solid var(--uix-canvas-border-subtle);
+  background: var(--canvas-background);
+  border: 1px solid var(--canvas-border-subtle);
   border-radius: 6px;
   box-shadow:
     0 4px 12px rgba(0, 0, 0, 0.08),
@@ -156,22 +156,22 @@ const StyledDropdownItem = styled.button`
   opacity: ${({ $disabled })=>$disabled ? 0.4 : 1};
   transition: background 0.15s ease;
   font-size: 14px;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   text-align: left;
   pointer-events: ${({ $disabled })=>$disabled ? 'none' : 'auto'};
 
   &:hover:not(:disabled) {
-    background: var(--uix-canvas-background-secondary);
+    background: var(--canvas-background-secondary);
   }
 
   svg {
     flex-shrink: 0;
-    color: var(--uix-canvas-foreground);
+    color: var(--canvas-foreground);
   }
 
   span {
     flex: 1;
-    color: var(--uix-canvas-foreground);
+    color: var(--canvas-foreground);
   }
 `;
 const StyledOverflowContainer = styled.div`

package/dist/canvas/components/Toolbar/shared/ToolbarButton.styles.cjs

@@ -47,7 +47,7 @@ const StyledToolbarButton = styled_default()(react_namespaceObject.motion.button
   width: 24px;
   height: 24px;
   padding: 0;
-  background: ${({ $isToggled, $hoverColor })=>$isToggled && ($hoverColor || 'var(--uix-canvas-background-secondary)') || 'transparent'};
+  background: ${({ $isToggled, $hoverColor })=>$isToggled && ($hoverColor || 'var(--canvas-background-secondary)') || 'transparent'};
   border: none;
   border-radius: 8px;
   cursor: ${({ $disabled })=>$disabled ? 'not-allowed' : 'pointer'};
@@ -58,7 +58,7 @@ const StyledToolbarButton = styled_default()(react_namespaceObject.motion.button
   pointer-events: ${({ $disabled })=>$disabled ? 'none' : 'auto'};
 
   &:hover:not(:disabled) {
-    background: ${({ $hoverColor })=>$hoverColor || 'var(--uix-canvas-background-secondary)'};
+    background: ${({ $hoverColor })=>$hoverColor || 'var(--canvas-background-secondary)'};
   }
 
   &:active:not(:disabled) {
@@ -66,7 +66,7 @@ const StyledToolbarButton = styled_default()(react_namespaceObject.motion.button
   }
 
   svg {
-    color: ${({ $color })=>$color || 'var(--uix-canvas-foreground)'};
+    color: ${({ $color })=>$color || 'var(--canvas-foreground)'};
   }
 `;
 exports.StyledToolbarButton = __webpack_exports__.StyledToolbarButton;

package/dist/canvas/components/Toolbar/shared/ToolbarButton.styles.js

@@ -9,7 +9,7 @@ const StyledToolbarButton = styled(motion.button, {
   width: 24px;
   height: 24px;
   padding: 0;
-  background: ${({ $isToggled, $hoverColor })=>$isToggled && ($hoverColor || 'var(--uix-canvas-background-secondary)') || 'transparent'};
+  background: ${({ $isToggled, $hoverColor })=>$isToggled && ($hoverColor || 'var(--canvas-background-secondary)') || 'transparent'};
   border: none;
   border-radius: 8px;
   cursor: ${({ $disabled })=>$disabled ? 'not-allowed' : 'pointer'};
@@ -20,7 +20,7 @@ const StyledToolbarButton = styled(motion.button, {
   pointer-events: ${({ $disabled })=>$disabled ? 'none' : 'auto'};
 
   &:hover:not(:disabled) {
-    background: ${({ $hoverColor })=>$hoverColor || 'var(--uix-canvas-background-secondary)'};
+    background: ${({ $hoverColor })=>$hoverColor || 'var(--canvas-background-secondary)'};
   }
 
   &:active:not(:disabled) {
@@ -28,7 +28,7 @@ const StyledToolbarButton = styled(motion.button, {
   }
 
   svg {
-    color: ${({ $color })=>$color || 'var(--uix-canvas-foreground)'};
+    color: ${({ $color })=>$color || 'var(--canvas-foreground)'};
   }
 `;
 export { StyledToolbarButton };

package/dist/canvas/components/Toolbox/ListView.cjs

@@ -117,7 +117,7 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(IconContainerMemoized, {
                 bgColor: bgColor,
-                color: "var(--uix-canvas-foreground-emp)",
+                color: "var(--canvas-foreground-emp)",
                 "data-testid": "list-item-icon",
                 children: [
                     item.icon?.url && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
@@ -162,7 +162,7 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
             !!item.children && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
                 icon: "chevron-right",
                 size: 20,
-                color: "var(--uix-canvas-foreground-de-emp)"
+                color: "var(--canvas-foreground-de-emp)"
             })
         ]
     });
@@ -213,7 +213,7 @@ const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
                 icon: emptyStateIcon,
                 size: 48,
-                color: "var(--uix-canvas-foreground-de-emp)"
+                color: "var(--canvas-foreground-de-emp)"
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                 className: "text-xs text-foreground-muted",

package/dist/canvas/components/Toolbox/ListView.js

@@ -88,7 +88,7 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
         children: [
             /*#__PURE__*/ jsxs(IconContainerMemoized, {
                 bgColor: bgColor,
-                color: "var(--uix-canvas-foreground-emp)",
+                color: "var(--canvas-foreground-emp)",
                 "data-testid": "list-item-icon",
                 children: [
                     item.icon?.url && /*#__PURE__*/ jsx("img", {
@@ -133,7 +133,7 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
             !!item.children && /*#__PURE__*/ jsx(CanvasIcon, {
                 icon: "chevron-right",
                 size: 20,
-                color: "var(--uix-canvas-foreground-de-emp)"
+                color: "var(--canvas-foreground-de-emp)"
             })
         ]
     });
@@ -184,7 +184,7 @@ const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -
             /*#__PURE__*/ jsx(CanvasIcon, {
                 icon: emptyStateIcon,
                 size: 48,
-                color: "var(--uix-canvas-foreground-de-emp)"
+                color: "var(--canvas-foreground-de-emp)"
             }),
             /*#__PURE__*/ jsx("span", {
                 className: "text-xs text-foreground-muted",

package/dist/canvas/components/Toolbox/ListView.styles.cjs

@@ -45,7 +45,7 @@ const external_react_window_namespaceObject = require("react-window");
 const SectionHeader = styled_default().div`
   display: flex;
   align-items: center;
-  border-top: 1px solid var(--uix-canvas-border-de-emp);
+  border-top: 1px solid var(--canvas-border-de-emp);
 
   &:first-of-type {
     border-top: none;
@@ -70,11 +70,11 @@ const ListItemButton = styled_default()(react_namespaceObject.motion.button)`
 
   &:hover,
   &.active {
-    background: var(--uix-canvas-background-hover);
+    background: var(--canvas-background-hover);
   }
 
   &.active {
-    outline: 1px solid var(--uix-canvas-primary);
+    outline: 1px solid var(--canvas-primary);
     outline-offset: -1px;
   }
 `;
@@ -84,9 +84,9 @@ const IconContainer = styled_default().div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${(props)=>props.bgColor || 'var(--uix-canvas-background)'};
+  background: ${(props)=>props.bgColor || 'var(--canvas-background)'};
   border-radius: 8px;
-  color: var(--uix-canvas-foreground-emp);
+  color: var(--canvas-foreground-emp);
   opacity: 0.9;
   flex-shrink: 0;
   // Icons should show below the inset outline
@@ -102,12 +102,12 @@ const StyledList = styled_default()(external_react_window_namespaceObject.List)`
   }
 
   &::-webkit-scrollbar-thumb {
-    background: var(--uix-canvas-border-de-emp);
+    background: var(--canvas-border-de-emp);
     border-radius: 3px;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background: var(--uix-canvas-border);
+    background: var(--canvas-border);
   }
 
   .list-view-item-name {

package/dist/canvas/components/Toolbox/ListView.styles.js

@@ -4,7 +4,7 @@ import { List } from "react-window";
 const SectionHeader = styled.div`
   display: flex;
   align-items: center;
-  border-top: 1px solid var(--uix-canvas-border-de-emp);
+  border-top: 1px solid var(--canvas-border-de-emp);
 
   &:first-of-type {
     border-top: none;
@@ -29,11 +29,11 @@ const ListItemButton = styled(motion.button)`
 
   &:hover,
   &.active {
-    background: var(--uix-canvas-background-hover);
+    background: var(--canvas-background-hover);
   }
 
   &.active {
-    outline: 1px solid var(--uix-canvas-primary);
+    outline: 1px solid var(--canvas-primary);
     outline-offset: -1px;
   }
 `;
@@ -43,9 +43,9 @@ const IconContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${(props)=>props.bgColor || 'var(--uix-canvas-background)'};
+  background: ${(props)=>props.bgColor || 'var(--canvas-background)'};
   border-radius: 8px;
-  color: var(--uix-canvas-foreground-emp);
+  color: var(--canvas-foreground-emp);
   opacity: 0.9;
   flex-shrink: 0;
   // Icons should show below the inset outline
@@ -61,12 +61,12 @@ const StyledList = styled(List)`
   }
 
   &::-webkit-scrollbar-thumb {
-    background: var(--uix-canvas-border-de-emp);
+    background: var(--canvas-border-de-emp);
     border-radius: 3px;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background: var(--uix-canvas-border);
+    background: var(--canvas-border);
   }
 
   .list-view-item-name {

package/dist/canvas/components/Toolbox/SearchBox.styles.cjs

@@ -43,8 +43,8 @@ const StyledSearchForm = styled_default().form`
   .searchbox-container {
     display: flex;
     align-items: center;
-    background: var(--uix-canvas-background);
-    border: 1px solid var(--uix-canvas-border-de-emp);
+    background: var(--canvas-background);
+    border: 1px solid var(--canvas-border-de-emp);
     border-radius: 8px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
     padding: 0 12px;
@@ -56,7 +56,7 @@ const StyledSearchForm = styled_default().form`
   }
 
   .searchbox-container:focus-within {
-    border: 2px solid var(--uix-canvas-primary);
+    border: 2px solid var(--canvas-primary);
   }
 
   .searchbox-container.has-value .searchbox-clear {
@@ -67,7 +67,7 @@ const StyledSearchForm = styled_default().form`
     display: flex;
     align-items: center;
     margin-right: 8px;
-    color: var(--uix-canvas-foreground);
+    color: var(--canvas-foreground);
   }
 
   .searchbox-input {
@@ -76,7 +76,7 @@ const StyledSearchForm = styled_default().form`
     outline: none;
     font-size: 14px;
     background: transparent;
-    color: var(--uix-canvas-foreground);
+    color: var(--canvas-foreground);
     padding: 6px 0;
   }
 
@@ -86,14 +86,14 @@ const StyledSearchForm = styled_default().form`
       Noto Sans,
       sans-serif;
     line-height: 20px;
-    color: var(--uix-canvas-foreground-de-emp);
+    color: var(--canvas-foreground-de-emp);
   }
 
   .searchbox-clear {
     display: flex;
     align-items: center;
     margin-left: 8px;
-    color: var(--uix-canvas-foreground-de-emp);
+    color: var(--canvas-foreground-de-emp);
     cursor: pointer;
     transition: color 0.2s;
     visibility: hidden;
@@ -102,7 +102,7 @@ const StyledSearchForm = styled_default().form`
   }
 
   .searchbox-clear:hover {
-    color: var(--uix-canvas-primary);
+    color: var(--canvas-primary);
   }
 `;
 exports.StyledSearchForm = __webpack_exports__.StyledSearchForm;

package/dist/canvas/components/Toolbox/SearchBox.styles.js

@@ -5,8 +5,8 @@ const StyledSearchForm = styled.form`
   .searchbox-container {
     display: flex;
     align-items: center;
-    background: var(--uix-canvas-background);
-    border: 1px solid var(--uix-canvas-border-de-emp);
+    background: var(--canvas-background);
+    border: 1px solid var(--canvas-border-de-emp);
     border-radius: 8px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
     padding: 0 12px;
@@ -18,7 +18,7 @@ const StyledSearchForm = styled.form`
   }
 
   .searchbox-container:focus-within {
-    border: 2px solid var(--uix-canvas-primary);
+    border: 2px solid var(--canvas-primary);
   }
 
   .searchbox-container.has-value .searchbox-clear {
@@ -29,7 +29,7 @@ const StyledSearchForm = styled.form`
     display: flex;
     align-items: center;
     margin-right: 8px;
-    color: var(--uix-canvas-foreground);
+    color: var(--canvas-foreground);
   }
 
   .searchbox-input {
@@ -38,7 +38,7 @@ const StyledSearchForm = styled.form`
     outline: none;
     font-size: 14px;
     background: transparent;
-    color: var(--uix-canvas-foreground);
+    color: var(--canvas-foreground);
     padding: 6px 0;
   }
 
@@ -48,14 +48,14 @@ const StyledSearchForm = styled.form`
       Noto Sans,
       sans-serif;
     line-height: 20px;
-    color: var(--uix-canvas-foreground-de-emp);
+    color: var(--canvas-foreground-de-emp);
   }
 
   .searchbox-clear {
     display: flex;
     align-items: center;
     margin-left: 8px;
-    color: var(--uix-canvas-foreground-de-emp);
+    color: var(--canvas-foreground-de-emp);
     cursor: pointer;
     transition: color 0.2s;
     visibility: hidden;
@@ -64,7 +64,7 @@ const StyledSearchForm = styled.form`
   }
 
   .searchbox-clear:hover {
-    color: var(--uix-canvas-primary);
+    color: var(--canvas-primary);
   }
 `;
 export { StyledSearchForm };

package/dist/canvas/components/Toolbox/Toolbox.styles.cjs

@@ -57,12 +57,12 @@ const ScrollableList = styled_default().div`
   }
 
   &::-webkit-scrollbar-thumb {
-    background: var(--uix-canvas-border-de-emp);
+    background: var(--canvas-border-de-emp);
     border-radius: 3px;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background: var(--uix-canvas-border);
+    background: var(--canvas-border);
   }
 `;
 const AnimatedContainer = styled_default().div`

package/dist/canvas/components/Toolbox/Toolbox.styles.js

@@ -17,12 +17,12 @@ const ScrollableList = styled.div`
   }
 
   &::-webkit-scrollbar-thumb {
-    background: var(--uix-canvas-border-de-emp);
+    background: var(--canvas-border-de-emp);
     border-radius: 3px;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background: var(--uix-canvas-border);
+    background: var(--canvas-border);
   }
 `;
 const AnimatedContainer = styled.div`

package/dist/canvas/components/TriggerNode/TriggerNode.styles.cjs

@@ -43,8 +43,8 @@ const TriggerContainer = styled_default().div`
   position: relative;
   width: 100%;
   height: 100%;
-  background: var(--uix-canvas-background);
-  border: 1.5px solid var(--uix-canvas-border-de-emp);
+  background: var(--canvas-background);
+  border: 1.5px solid var(--canvas-border-de-emp);
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -52,28 +52,28 @@ const TriggerContainer = styled_default().div`
   cursor: pointer;
 
   ${({ selected })=>selected ? (0, react_namespaceObject.css)`
-          border-color: var(--uix-canvas-primary);
-          outline: 4px solid var(--uix-canvas-secondary-pressed);
+          border-color: var(--canvas-primary);
+          outline: 4px solid var(--canvas-secondary-pressed);
         ` : (0, react_namespaceObject.css)`
           &:hover {
-            outline: 4px solid var(--uix-canvas-secondary-pressed);
+            outline: 4px solid var(--canvas-secondary-pressed);
           }
         `}
 
   ${({ status })=>'Completed' === status && (0, react_namespaceObject.css)`
-      border-color: var(--uix-canvas-success-icon);
+      border-color: var(--canvas-success-icon);
     `}
 
   ${({ status })=>'InProgress' === status && (0, react_namespaceObject.css)`
-      border-color: var(--uix-canvas-info-icon);
+      border-color: var(--canvas-info-icon);
     `}
 
   ${({ status })=>'Paused' === status && (0, react_namespaceObject.css)`
-      border-color: var(--uix-canvas-warning-icon);
+      border-color: var(--canvas-warning-icon);
     `}
 
   ${({ status })=>'Failed' === status && (0, react_namespaceObject.css)`
-      border-color: var(--uix-canvas-error-icon);
+      border-color: var(--canvas-error-icon);
     `}
 
   ${({ status })=>'NotExecuted' === status && (0, react_namespaceObject.css)`
@@ -84,8 +84,8 @@ const TriggerIconWrapper = styled_default().div`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--uix-canvas-foreground);
-  background: var(--uix-canvas-background-secondary);
+  color: var(--canvas-foreground);
+  background: var(--canvas-background-secondary);
   border-radius: 50%;
 
   width: ${({ nodeHeight })=>{
@@ -98,19 +98,19 @@ const TriggerIconWrapper = styled_default().div`
 }};
 
   ${({ status })=>'Completed' === status && (0, react_namespaceObject.css)`
-      color: var(--uix-canvas-success-icon);
+      color: var(--canvas-success-icon);
     `}
 
   ${({ status })=>'InProgress' === status && (0, react_namespaceObject.css)`
-      color: var(--uix-canvas-info-icon);
+      color: var(--canvas-info-icon);
     `}
 
   ${({ status })=>'Paused' === status && (0, react_namespaceObject.css)`
-      color: var(--uix-canvas-warning-icon);
+      color: var(--canvas-warning-icon);
     `}
 
   ${({ status })=>'Failed' === status && (0, react_namespaceObject.css)`
-      color: var(--uix-canvas-error-icon);
+      color: var(--canvas-error-icon);
     `}
 
   svg {