@uipath/apollo-react 4.0.0 → 4.1.1

package/dist/canvas/components/CodedAgent/CodedAgentFlow.js

@@ -29,7 +29,7 @@ const CodedAgentEdge = /*#__PURE__*/ memo(({ id, sourceX, sourceY, targetX, targ
         targetY,
         targetPosition
     });
-    const strokeColor = animated ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-foreground-de-emp)';
+    const strokeColor = animated ? 'var(--canvas-primary)' : 'var(--canvas-foreground-de-emp)';
     return /*#__PURE__*/ jsx(BaseEdge, {
         id: id,
         path: edgePath,
@@ -43,7 +43,7 @@ const CodedAgentEdge = /*#__PURE__*/ memo(({ id, sourceX, sourceY, targetX, targ
     });
 });
 const CenteredDiv = styled.div`
-  background-color: var(--uix-canvas-background-secondary);
+  background-color: var(--canvas-background-secondary);
   width: 100%;
   height: 100%;
   display: flex;
@@ -104,12 +104,12 @@ const createCodedAgentNodeWrapper = (translations = DefaultCodedAgentNodeTransla
             if (nodeData.hasError) return /*#__PURE__*/ jsx(CanvasIcon, {
                 icon: "circle-alert",
                 size: 16,
-                color: "var(--uix-canvas-error-icon)"
+                color: "var(--canvas-error-icon)"
             });
             if (nodeData.hasSuccess && !nodeData.hasError) return /*#__PURE__*/ jsx(CanvasIcon, {
                 icon: "circle-check",
                 size: 16,
-                color: "var(--uix-canvas-success-icon)"
+                color: "var(--canvas-success-icon)"
             });
             if (nodeData.hasRunning && !nodeData.hasError && !nodeData.hasSuccess) return /*#__PURE__*/ jsx(Spinner, {
                 size: "sm"
@@ -202,12 +202,12 @@ const CodedResourceNodeElement = /*#__PURE__*/ memo(({ data, selected, id, ...no
         if (nodeData.hasError) return /*#__PURE__*/ jsx(CanvasIcon, {
             icon: "circle-alert",
             size: 16,
-            color: "var(--uix-canvas-error-icon)"
+            color: "var(--canvas-error-icon)"
         });
         if (nodeData.hasSuccess && !nodeData.hasError) return /*#__PURE__*/ jsx(CanvasIcon, {
             icon: "circle-check",
             size: 16,
-            color: "var(--uix-canvas-success-icon)"
+            color: "var(--canvas-success-icon)"
         });
         if (nodeData.hasRunning && !nodeData.hasError && !nodeData.hasSuccess) return /*#__PURE__*/ jsx(Spinner, {
             size: "sm"

package/dist/canvas/components/Edges/EdgeUtils.cjs

@@ -30,20 +30,20 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const execution_cjs_namespaceObject = require("../../types/execution.cjs");
 const edgeTargetStatusToEdgeColor = {
-    Cancelled: 'var(--color-error-icon)',
-    Completed: 'var(--color-success-icon)',
-    CRITICAL: 'var(--color-error-icon)',
-    ERROR: 'var(--color-error-icon)',
-    Failed: 'var(--color-error-icon)',
-    INFO: 'var(--color-info-icon)',
-    InProgress: 'var(--color-info-icon)',
-    NotExecuted: 'var(--color-canvas-element-border-color-default)',
-    Paused: 'var(--color-warning-icon)',
-    Terminated: 'var(--color-error-icon)',
-    Warning: 'var(--color-warning-icon)',
-    UserCancelled: 'var(--color-info-icon)',
-    WARNING: 'var(--color-warning-icon)',
-    None: 'var(--color-canvas-element-border-color-default)'
+    Cancelled: 'var(--canvas-error-icon)',
+    Completed: 'var(--canvas-success-icon)',
+    CRITICAL: 'var(--canvas-error-icon)',
+    ERROR: 'var(--canvas-error-icon)',
+    Failed: 'var(--canvas-error-icon)',
+    INFO: 'var(--canvas-info-icon)',
+    InProgress: 'var(--canvas-info-icon)',
+    NotExecuted: 'var(--canvas-border)',
+    Paused: 'var(--canvas-warning-icon)',
+    Terminated: 'var(--canvas-error-icon)',
+    Warning: 'var(--canvas-warning-icon)',
+    UserCancelled: 'var(--canvas-info-icon)',
+    WARNING: 'var(--canvas-warning-icon)',
+    None: 'var(--canvas-border)'
 };
 const getStatusAnimation = (status, edgePath)=>{
     const shouldAnimate = status === execution_cjs_namespaceObject.ElementStatusValues.InProgress;

package/dist/canvas/components/Edges/EdgeUtils.js

@@ -1,20 +1,20 @@
 import { jsx } from "react/jsx-runtime";
 import { ElementStatusValues } from "../../types/execution.js";
 const edgeTargetStatusToEdgeColor = {
-    Cancelled: 'var(--color-error-icon)',
-    Completed: 'var(--color-success-icon)',
-    CRITICAL: 'var(--color-error-icon)',
-    ERROR: 'var(--color-error-icon)',
-    Failed: 'var(--color-error-icon)',
-    INFO: 'var(--color-info-icon)',
-    InProgress: 'var(--color-info-icon)',
-    NotExecuted: 'var(--color-canvas-element-border-color-default)',
-    Paused: 'var(--color-warning-icon)',
-    Terminated: 'var(--color-error-icon)',
-    Warning: 'var(--color-warning-icon)',
-    UserCancelled: 'var(--color-info-icon)',
-    WARNING: 'var(--color-warning-icon)',
-    None: 'var(--color-canvas-element-border-color-default)'
+    Cancelled: 'var(--canvas-error-icon)',
+    Completed: 'var(--canvas-success-icon)',
+    CRITICAL: 'var(--canvas-error-icon)',
+    ERROR: 'var(--canvas-error-icon)',
+    Failed: 'var(--canvas-error-icon)',
+    INFO: 'var(--canvas-info-icon)',
+    InProgress: 'var(--canvas-info-icon)',
+    NotExecuted: 'var(--canvas-border)',
+    Paused: 'var(--canvas-warning-icon)',
+    Terminated: 'var(--canvas-error-icon)',
+    Warning: 'var(--canvas-warning-icon)',
+    UserCancelled: 'var(--canvas-info-icon)',
+    WARNING: 'var(--canvas-warning-icon)',
+    None: 'var(--canvas-border)'
 };
 const getStatusAnimation = (status, edgePath)=>{
     const shouldAnimate = status === ElementStatusValues.InProgress;

package/dist/canvas/components/Edges/SequenceEdge.cjs

@@ -114,13 +114,13 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
         target
     });
     const getEdgeColor = ()=>{
-        if (isDiffAdded) return 'var(--uix-canvas-success-icon)';
-        if (isDiffRemoved) return 'var(--uix-canvas-error-icon)';
-        if (isPreviewEdge) return 'var(--uix-canvas-primary)';
-        if (selected) return 'var(--uix-canvas-primary)';
-        if (isHovered) return 'var(--uix-canvas-primary-hover)';
-        if (status) return external_EdgeUtils_cjs_namespaceObject.edgeTargetStatusToEdgeColor[status] ?? 'var(--color-border)';
-        return 'var(--uix-canvas-border)';
+        if (isDiffAdded) return 'var(--canvas-success-icon)';
+        if (isDiffRemoved) return 'var(--canvas-error-icon)';
+        if (isPreviewEdge) return 'var(--canvas-primary)';
+        if (selected) return 'var(--canvas-primary)';
+        if (isHovered) return 'var(--canvas-primary-hover)';
+        if (status) return external_EdgeUtils_cjs_namespaceObject.edgeTargetStatusToEdgeColor[status] ?? 'var(--canvas-border)';
+        return 'var(--canvas-border)';
     };
     const edgeColor = getEdgeColor();
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
@@ -145,7 +145,7 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
                         className: "react-flow__edge-outline",
                         d: edgePath,
                         fill: "none",
-                        stroke: "var(--uix-canvas-primary)",
+                        stroke: "var(--canvas-primary)",
                         strokeWidth: 10,
                         opacity: 0.3,
                         style: {
@@ -197,13 +197,13 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
                                 transform: 'translate(-50%, -50%)',
                                 whiteSpace: 'nowrap',
                                 pointerEvents: 'none',
-                                color: 'var(--uix-canvas-foreground)',
-                                background: 'var(--uix-canvas-background)',
+                                color: 'var(--canvas-foreground)',
+                                background: 'var(--canvas-background)',
                                 padding: '4px 8px',
                                 borderRadius: '4px',
                                 fontSize: '12px',
                                 fontWeight: 500,
-                                border: `1px solid ${selected ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-border)'}`,
+                                border: `1px solid ${selected ? 'var(--canvas-primary)' : 'var(--canvas-border)'}`,
                                 boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)'
                             },
                             children: data.label

package/dist/canvas/components/Edges/SequenceEdge.js

@@ -86,13 +86,13 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
         target
     });
     const getEdgeColor = ()=>{
-        if (isDiffAdded) return 'var(--uix-canvas-success-icon)';
-        if (isDiffRemoved) return 'var(--uix-canvas-error-icon)';
-        if (isPreviewEdge) return 'var(--uix-canvas-primary)';
-        if (selected) return 'var(--uix-canvas-primary)';
-        if (isHovered) return 'var(--uix-canvas-primary-hover)';
-        if (status) return edgeTargetStatusToEdgeColor[status] ?? 'var(--color-border)';
-        return 'var(--uix-canvas-border)';
+        if (isDiffAdded) return 'var(--canvas-success-icon)';
+        if (isDiffRemoved) return 'var(--canvas-error-icon)';
+        if (isPreviewEdge) return 'var(--canvas-primary)';
+        if (selected) return 'var(--canvas-primary)';
+        if (isHovered) return 'var(--canvas-primary-hover)';
+        if (status) return edgeTargetStatusToEdgeColor[status] ?? 'var(--canvas-border)';
+        return 'var(--canvas-border)';
     };
     const edgeColor = getEdgeColor();
     return /*#__PURE__*/ jsxs(Fragment, {
@@ -117,7 +117,7 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
                         className: "react-flow__edge-outline",
                         d: edgePath,
                         fill: "none",
-                        stroke: "var(--uix-canvas-primary)",
+                        stroke: "var(--canvas-primary)",
                         strokeWidth: 10,
                         opacity: 0.3,
                         style: {
@@ -169,13 +169,13 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
                                 transform: 'translate(-50%, -50%)',
                                 whiteSpace: 'nowrap',
                                 pointerEvents: 'none',
-                                color: 'var(--uix-canvas-foreground)',
-                                background: 'var(--uix-canvas-background)',
+                                color: 'var(--canvas-foreground)',
+                                background: 'var(--canvas-background)',
                                 padding: '4px 8px',
                                 borderRadius: '4px',
                                 fontSize: '12px',
                                 fontWeight: 500,
-                                border: `1px solid ${selected ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-border)'}`,
+                                border: `1px solid ${selected ? 'var(--canvas-primary)' : 'var(--canvas-border)'}`,
                                 boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)'
                             },
                             children: data.label

package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.cjs

@@ -44,9 +44,9 @@ const external_CanvasPortal_cjs_namespaceObject = require("./CanvasPortal.cjs");
 const external_PanelChrome_cjs_namespaceObject = require("./PanelChrome.cjs");
 const external_useFloatingPosition_cjs_namespaceObject = require("./useFloatingPosition.cjs");
 const PanelContainer = styled_default().div`
-  color: var(--uix-canvas-foreground);
-  background-color: var(--uix-canvas-background);
-  border: 1px solid var(--uix-canvas-border-de-emp);
+  color: var(--canvas-foreground);
+  background-color: var(--canvas-background);
+  border: 1px solid var(--canvas-border-de-emp);
   border-radius: ${(props)=>props.isPinned ? '0' : '8px'};
   box-shadow: ${(props)=>props.isPinned ? 'none' : '0 4px 16px rgba(0, 0, 0, 0.12)'};
   font-size: 14px;
@@ -58,7 +58,7 @@ const PanelContainer = styled_default().div`
   display: flex;
   flex-direction: column;
   transition: opacity 0.2s ease-in-out;
-  border-left: ${(props)=>props.isPinned ? '1px solid var(--uix-canvas-border-de-emp)' : 'none'};
+  border-left: ${(props)=>props.isPinned ? '1px solid var(--canvas-border-de-emp)' : 'none'};
 `;
 function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, onMouseEnter, onMouseLeave }) {
     const { computedAnchor, floatingStyles, refs, mergedReferenceRef } = (0, external_useFloatingPosition_cjs_namespaceObject.useFloatingPosition)({

package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingCanvasPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,uBAAuB,CAAC;AAqB7E,MAAM,MAAM,wBAAwB,GAAG;IAErC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAOnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAM3B,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAW,EACX,QAAgB,EAChB,gBAAwB,EACxB,YAAoB,EACpB,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,EACT,YAAY,EACZ,YAAY,GACb,EAAE,wBAAwB,kDA4I1B"}
+{"version":3,"file":"FloatingCanvasPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,uBAAuB,CAAC;AAoB7E,MAAM,MAAM,wBAAwB,GAAG;IAErC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAOnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAM3B,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAW,EACX,QAAgB,EAChB,gBAAwB,EACxB,YAAoB,EACpB,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,EACT,YAAY,EACZ,YAAY,GACb,EAAE,wBAAwB,kDA4I1B"}

package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.js

@@ -6,9 +6,9 @@ import { CanvasPortal } from "./CanvasPortal.js";
 import { PanelChrome } from "./PanelChrome.js";
 import { useFloatingPosition } from "./useFloatingPosition.js";
 const PanelContainer = styled.div`
-  color: var(--uix-canvas-foreground);
-  background-color: var(--uix-canvas-background);
-  border: 1px solid var(--uix-canvas-border-de-emp);
+  color: var(--canvas-foreground);
+  background-color: var(--canvas-background);
+  border: 1px solid var(--canvas-border-de-emp);
   border-radius: ${(props)=>props.isPinned ? '0' : '8px'};
   box-shadow: ${(props)=>props.isPinned ? 'none' : '0 4px 16px rgba(0, 0, 0, 0.12)'};
   font-size: 14px;
@@ -20,7 +20,7 @@ const PanelContainer = styled.div`
   display: flex;
   flex-direction: column;
   transition: opacity 0.2s ease-in-out;
-  border-left: ${(props)=>props.isPinned ? '1px solid var(--uix-canvas-border-de-emp)' : 'none'};
+  border-left: ${(props)=>props.isPinned ? '1px solid var(--canvas-border-de-emp)' : 'none'};
 `;
 function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, onMouseEnter, onMouseLeave }) {
     const { computedAnchor, floatingStyles, refs, mergedReferenceRef } = useFloatingPosition({

package/dist/canvas/components/FloatingCanvasPanel/PanelChrome.cjs

@@ -43,9 +43,9 @@ const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
 const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
 const PanelHeader = styled_default().div`
-  border-bottom: 1px solid var(--uix-canvas-border-de-emp);
+  border-bottom: 1px solid var(--canvas-border-de-emp);
   padding: 8px 16px;
-  background-color: var(--uix-canvas-background);
+  background-color: var(--canvas-background);
   border-radius: 8px 8px 0 0;
   flex-shrink: 0;
 `;
@@ -59,16 +59,16 @@ const PanelContent = styled_default().div`
   }
 
   &::-webkit-scrollbar-track {
-    background: var(--uix-canvas-background-secondary);
+    background: var(--canvas-background-secondary);
     border-radius: 3px;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: var(--uix-canvas-border);
+    background: var(--canvas-border);
     border-radius: 3px;
 
     &:hover {
-      background: var(--uix-canvas-border-de-emp);
+      background: var(--canvas-border-de-emp);
     }
   }
 `;

package/dist/canvas/components/FloatingCanvasPanel/PanelChrome.js

@@ -5,9 +5,9 @@ import { Button } from "@uipath/apollo-wind";
 import { useEffect, useRef } from "react";
 import { CanvasIcon } from "../../utils/icon-registry.js";
 const PanelHeader = styled.div`
-  border-bottom: 1px solid var(--uix-canvas-border-de-emp);
+  border-bottom: 1px solid var(--canvas-border-de-emp);
   padding: 8px 16px;
-  background-color: var(--uix-canvas-background);
+  background-color: var(--canvas-background);
   border-radius: 8px 8px 0 0;
   flex-shrink: 0;
 `;
@@ -21,16 +21,16 @@ const PanelContent = styled.div`
   }
 
   &::-webkit-scrollbar-track {
-    background: var(--uix-canvas-background-secondary);
+    background: var(--canvas-background-secondary);
     border-radius: 3px;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: var(--uix-canvas-border);
+    background: var(--canvas-border);
     border-radius: 3px;
 
     &:hover {
-      background: var(--uix-canvas-border-de-emp);
+      background: var(--canvas-border-de-emp);
     }
   }
 `;

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

@@ -52,19 +52,19 @@ const GroupContainer = styled_default().div`
   position: relative;
   width: 100%;
   height: 100%;
-  background-color: ${({ backgroundColor })=>backgroundColor || 'var(--uix-canvas-background-raised)'} !important;
+  background-color: ${({ backgroundColor })=>backgroundColor || 'var(--canvas-background-raised)'} !important;
   border: 2px solid
-    ${({ borderColor, selected })=>selected ? 'var(--uix-canvas-primary)' : borderColor || 'var(--uix-canvas-border)'};
+    ${({ borderColor, selected })=>selected ? 'var(--canvas-primary)' : borderColor || 'var(--canvas-border)'};
   border-radius: 16px !important;
   transition: border-color 0.2s ease;
   overflow: visible;
-  box-shadow: ${({ selected })=>selected ? '0 0 0 1px var(--uix-canvas-primary)' : 'none'};
+  box-shadow: ${({ selected })=>selected ? '0 0 0 1px var(--canvas-primary)' : 'none'};
   padding: 0 !important;
 
   ${({ executionStatus })=>(0, execution_status_cjs_namespaceObject.getExecutionStatusBorder)(executionStatus)}
 
   &:hover {
-    ${({ selected, executionStatus })=>executionStatus ? '' : `border-color: ${selected ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-border-hover)'};`}
+    ${({ selected, executionStatus })=>executionStatus ? '' : `border-color: ${selected ? 'var(--canvas-primary)' : 'var(--canvas-border-hover)'};`}
   }
 `;
 const GroupHeader = styled_default().div`
@@ -75,8 +75,8 @@ const GroupHeader = 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),
@@ -97,13 +97,13 @@ const GroupIconWrapper = styled_default().div`
   cursor: default;
 
   svg {
-    color: var(--uix-canvas-foreground);
+    color: var(--canvas-foreground);
   }
 `;
 const GroupTitle = styled_default().div`
   font-size: 14px;
   font-weight: 500;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -132,7 +132,7 @@ const GroupHeaderButton = styled_default().button`
   pointer-events: ${({ $disabled })=>$disabled ? 'none' : 'auto'};
 
   &:hover:not(:disabled) {
-    background: var(--uix-canvas-background-secondary);
+    background: var(--canvas-background-secondary);
   }
 
   &:active:not(:disabled) {
@@ -140,14 +140,14 @@ const GroupHeaderButton = styled_default().button`
   }
 
   svg {
-    color: var(--uix-canvas-foreground);
+    color: var(--canvas-foreground);
   }
 `;
 const GroupHeaderSeparator = styled_default().div`
   width: 1px;
   height: 20px;
   margin: 0 4px;
-  background: var(--uix-canvas-border-grid);
+  background: var(--canvas-border-grid);
   align-self: center;
 `;
 const GroupContent = styled_default().div`
@@ -183,8 +183,8 @@ const TopCornerIndicators = styled_default().div`
     left: -5px;
     width: 6px;
     height: 6px;
-    background: var(--uix-canvas-background);
-    border: 1px solid var(--uix-canvas-primary);
+    background: var(--canvas-background);
+    border: 1px solid var(--canvas-primary);
     border-radius: 1px;
   }
 
@@ -196,8 +196,8 @@ const TopCornerIndicators = styled_default().div`
     right: -5px;
     width: 6px;
     height: 6px;
-    background: var(--uix-canvas-background);
-    border: 1px solid var(--uix-canvas-primary);
+    background: var(--canvas-background);
+    border: 1px solid var(--canvas-primary);
     border-radius: 1px;
   }
 `;
@@ -216,8 +216,8 @@ const BottomCornerIndicators = styled_default().div`
     left: -5px;
     width: 6px;
     height: 6px;
-    background: var(--uix-canvas-background);
-    border: 1px solid var(--uix-canvas-primary);
+    background: var(--canvas-background);
+    border: 1px solid var(--canvas-primary);
     border-radius: 1px;
   }
 
@@ -229,8 +229,8 @@ const BottomCornerIndicators = styled_default().div`
     right: -5px;
     width: 6px;
     height: 6px;
-    background: var(--uix-canvas-background);
-    border: 1px solid var(--uix-canvas-primary);
+    background: var(--canvas-background);
+    border: 1px solid var(--canvas-primary);
     border-radius: 1px;
   }
 `;

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

@@ -4,19 +4,19 @@ const GroupContainer = styled.div`
   position: relative;
   width: 100%;
   height: 100%;
-  background-color: ${({ backgroundColor })=>backgroundColor || 'var(--uix-canvas-background-raised)'} !important;
+  background-color: ${({ backgroundColor })=>backgroundColor || 'var(--canvas-background-raised)'} !important;
   border: 2px solid
-    ${({ borderColor, selected })=>selected ? 'var(--uix-canvas-primary)' : borderColor || 'var(--uix-canvas-border)'};
+    ${({ borderColor, selected })=>selected ? 'var(--canvas-primary)' : borderColor || 'var(--canvas-border)'};
   border-radius: 16px !important;
   transition: border-color 0.2s ease;
   overflow: visible;
-  box-shadow: ${({ selected })=>selected ? '0 0 0 1px var(--uix-canvas-primary)' : 'none'};
+  box-shadow: ${({ selected })=>selected ? '0 0 0 1px var(--canvas-primary)' : 'none'};
   padding: 0 !important;
 
   ${({ executionStatus })=>getExecutionStatusBorder(executionStatus)}
 
   &:hover {
-    ${({ selected, executionStatus })=>executionStatus ? '' : `border-color: ${selected ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-border-hover)'};`}
+    ${({ selected, executionStatus })=>executionStatus ? '' : `border-color: ${selected ? 'var(--canvas-primary)' : 'var(--canvas-border-hover)'};`}
   }
 `;
 const GroupHeader = styled.div`
@@ -27,8 +27,8 @@ const GroupHeader = 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),
@@ -49,13 +49,13 @@ const GroupIconWrapper = styled.div`
   cursor: default;
 
   svg {
-    color: var(--uix-canvas-foreground);
+    color: var(--canvas-foreground);
   }
 `;
 const GroupTitle = styled.div`
   font-size: 14px;
   font-weight: 500;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -84,7 +84,7 @@ const GroupHeaderButton = styled.button`
   pointer-events: ${({ $disabled })=>$disabled ? 'none' : 'auto'};
 
   &:hover:not(:disabled) {
-    background: var(--uix-canvas-background-secondary);
+    background: var(--canvas-background-secondary);
   }
 
   &:active:not(:disabled) {
@@ -92,14 +92,14 @@ const GroupHeaderButton = styled.button`
   }
 
   svg {
-    color: var(--uix-canvas-foreground);
+    color: var(--canvas-foreground);
   }
 `;
 const GroupHeaderSeparator = styled.div`
   width: 1px;
   height: 20px;
   margin: 0 4px;
-  background: var(--uix-canvas-border-grid);
+  background: var(--canvas-border-grid);
   align-self: center;
 `;
 const GroupContent = styled.div`
@@ -135,8 +135,8 @@ const TopCornerIndicators = styled.div`
     left: -5px;
     width: 6px;
     height: 6px;
-    background: var(--uix-canvas-background);
-    border: 1px solid var(--uix-canvas-primary);
+    background: var(--canvas-background);
+    border: 1px solid var(--canvas-primary);
     border-radius: 1px;
   }
 
@@ -148,8 +148,8 @@ const TopCornerIndicators = styled.div`
     right: -5px;
     width: 6px;
     height: 6px;
-    background: var(--uix-canvas-background);
-    border: 1px solid var(--uix-canvas-primary);
+    background: var(--canvas-background);
+    border: 1px solid var(--canvas-primary);
     border-radius: 1px;
   }
 `;
@@ -168,8 +168,8 @@ const BottomCornerIndicators = styled.div`
     left: -5px;
     width: 6px;
     height: 6px;
-    background: var(--uix-canvas-background);
-    border: 1px solid var(--uix-canvas-primary);
+    background: var(--canvas-background);
+    border: 1px solid var(--canvas-primary);
     border-radius: 1px;
   }
 
@@ -181,8 +181,8 @@ const BottomCornerIndicators = styled.div`
     right: -5px;
     width: 6px;
     height: 6px;
-    background: var(--uix-canvas-background);
-    border: 1px solid var(--uix-canvas-primary);
+    background: var(--canvas-background);
+    border: 1px solid var(--canvas-primary);
     border-radius: 1px;
   }
 `;

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.cjs

@@ -275,7 +275,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
             width: '100%',
             height: '100%',
             position: 'relative',
-            background: 'var(--uix-canvas-background-secondary)'
+            background: 'var(--canvas-background-secondary)'
         },
         children: [
             breadcrumbs.length > 1 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
@@ -284,7 +284,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
                     top: 16,
                     left: 16,
                     zIndex: 10,
-                    background: 'var(--uix-canvas-background)',
+                    background: 'var(--canvas-background)',
                     borderRadius: '8px',
                     padding: '8px 12px',
                     boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.js

@@ -247,7 +247,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
             width: '100%',
             height: '100%',
             position: 'relative',
-            background: 'var(--uix-canvas-background-secondary)'
+            background: 'var(--canvas-background-secondary)'
         },
         children: [
             breadcrumbs.length > 1 && /*#__PURE__*/ jsx("div", {
@@ -256,7 +256,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
                     top: 16,
                     left: 16,
                     zIndex: 10,
-                    background: 'var(--uix-canvas-background)',
+                    background: 'var(--canvas-background)',
                     borderRadius: '8px',
                     padding: '8px 12px',
                     boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.cjs

@@ -454,7 +454,7 @@ const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesCha
                         flexDirection: 'column',
                         gap: '8px',
                         padding: '8px',
-                        backgroundColor: 'var(--uix-canvas-background)',
+                        backgroundColor: 'var(--canvas-background)',
                         borderRadius: '8px',
                         boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                         minWidth: '180px'
@@ -551,8 +551,8 @@ const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesCha
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                     style: {
                         padding: '12px',
-                        color: 'var(--uix-canvas-foreground)',
-                        backgroundColor: 'var(--uix-canvas-background)',
+                        color: 'var(--canvas-foreground)',
+                        backgroundColor: 'var(--canvas-background)',
                         borderRadius: '8px',
                         boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                         fontSize: '12px'

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.js

@@ -426,7 +426,7 @@ const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesCha
                         flexDirection: 'column',
                         gap: '8px',
                         padding: '8px',
-                        backgroundColor: 'var(--uix-canvas-background)',
+                        backgroundColor: 'var(--canvas-background)',
                         borderRadius: '8px',
                         boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                         minWidth: '180px'
@@ -523,8 +523,8 @@ const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesCha
                 children: /*#__PURE__*/ jsxs("div", {
                     style: {
                         padding: '12px',
-                        color: 'var(--uix-canvas-foreground)',
-                        backgroundColor: 'var(--uix-canvas-background)',
+                        color: 'var(--canvas-foreground)',
+                        backgroundColor: 'var(--canvas-background)',
                         borderRadius: '8px',
                         boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                         fontSize: '12px'