@uipath/apollo-react 4.0.0 → 4.1.1

package/dist/canvas/components/AgentCanvas/nodes/AgentNode.styles.cjs

@@ -61,26 +61,26 @@ const AddInstructionsButton = styled_default().button`
   width: 100%;
   padding: 6px 12px;
   background: transparent;
-  border: 1px dashed var(--uix-canvas-border-de-emp);
+  border: 1px dashed var(--canvas-border-de-emp);
   border-radius: 8px;
   cursor: pointer;
   font-size: 11px;
   font-weight: 600;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   line-height: 16px;
   transition:
     border-color 0.15s ease,
     color 0.15s ease;
 
   &:hover {
-    border-color: var(--uix-canvas-selection-indicator);
-    color: var(--uix-canvas-selection-indicator);
+    border-color: var(--canvas-selection-indicator);
+    color: var(--canvas-selection-indicator);
   }
 `;
 const InstructionsLabel = styled_default().div`
   font-size: 11px;
   font-weight: 600;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   line-height: 16px;
 `;
 const InstructionsPreview = styled_default().div`
@@ -90,7 +90,7 @@ const InstructionsPreview = styled_default().div`
   width: 100%;
   font-size: 9px;
   line-height: 13px;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   cursor: pointer;
 `;
 const InstructionsLine = styled_default().div`
@@ -115,16 +115,16 @@ const SettingsPreviewHeader = styled_default().div`
   flex-direction: column;
   gap: 2px;
   padding-bottom: 12px;
-  border-bottom: 1px solid var(--uix-canvas-border-de-emp);
+  border-bottom: 1px solid var(--canvas-border-de-emp);
 `;
 const SettingsPreviewTitle = styled_default().div`
   font-size: 14px;
   font-weight: 600;
-  color: var(--uix-canvas-foreground-emp);
+  color: var(--canvas-foreground-emp);
 `;
 const SettingsPreviewSubtitle = styled_default().div`
   font-size: 12px;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
 `;
 const SettingsSection = styled_default().div`
   display: flex;
@@ -134,17 +134,17 @@ const SettingsSection = styled_default().div`
 const SettingsSectionLabel = styled_default().div`
   font-size: 12px;
   font-weight: 500;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
 `;
 const SettingsSectionValue = styled_default().div`
   font-size: 14px;
-  color: var(--uix-canvas-foreground-emp);
+  color: var(--canvas-foreground-emp);
 `;
 const SettingsPromptBox = styled_default().div`
   font-size: 13px;
-  color: ${({ isEmpty })=>isEmpty ? 'var(--uix-canvas-foreground-de-emp)' : 'var(--uix-canvas-foreground)'};
+  color: ${({ isEmpty })=>isEmpty ? 'var(--canvas-foreground-de-emp)' : 'var(--canvas-foreground)'};
   font-style: ${({ isEmpty })=>isEmpty ? 'italic' : 'normal'};
-  background: var(--uix-canvas-background-secondary);
+  background: var(--canvas-background-secondary);
   border-radius: 6px;
   padding: 8px 10px;
   max-height: 80px;
@@ -161,7 +161,7 @@ const SettingsPromptBox = styled_default().div`
   }
 
   &::-webkit-scrollbar-thumb {
-    background: var(--uix-canvas-border-de-emp);
+    background: var(--canvas-border-de-emp);
     border-radius: 2px;
   }
 `;
@@ -172,10 +172,10 @@ const SettingsRow = styled_default().div`
   font-size: 13px;
 `;
 const SettingsRowLabel = styled_default().span`
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
 `;
 const SettingsRowValue = styled_default().span`
-  color: var(--uix-canvas-foreground-emp);
+  color: var(--canvas-foreground-emp);
   font-weight: 500;
 `;
 const SubLabelContainer = styled_default().span`
@@ -188,12 +188,12 @@ const HealthScoreBadge = styled_default().span`
   align-items: center;
   gap: 4px;
   padding: 2px 6px;
-  background-color: var(--uix-canvas-background-secondary);
+  background-color: var(--canvas-background-secondary);
   border-radius: 16px;
   font-size: 10px;
   font-weight: 700;
   line-height: 16px;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   cursor: pointer;
 `;
 exports.AddInstructionsButton = __webpack_exports__.AddInstructionsButton;

package/dist/canvas/components/AgentCanvas/nodes/AgentNode.styles.js

@@ -7,26 +7,26 @@ const AddInstructionsButton = styled.button`
   width: 100%;
   padding: 6px 12px;
   background: transparent;
-  border: 1px dashed var(--uix-canvas-border-de-emp);
+  border: 1px dashed var(--canvas-border-de-emp);
   border-radius: 8px;
   cursor: pointer;
   font-size: 11px;
   font-weight: 600;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   line-height: 16px;
   transition:
     border-color 0.15s ease,
     color 0.15s ease;
 
   &:hover {
-    border-color: var(--uix-canvas-selection-indicator);
-    color: var(--uix-canvas-selection-indicator);
+    border-color: var(--canvas-selection-indicator);
+    color: var(--canvas-selection-indicator);
   }
 `;
 const InstructionsLabel = styled.div`
   font-size: 11px;
   font-weight: 600;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   line-height: 16px;
 `;
 const InstructionsPreview = styled.div`
@@ -36,7 +36,7 @@ const InstructionsPreview = styled.div`
   width: 100%;
   font-size: 9px;
   line-height: 13px;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   cursor: pointer;
 `;
 const InstructionsLine = styled.div`
@@ -61,16 +61,16 @@ const SettingsPreviewHeader = styled.div`
   flex-direction: column;
   gap: 2px;
   padding-bottom: 12px;
-  border-bottom: 1px solid var(--uix-canvas-border-de-emp);
+  border-bottom: 1px solid var(--canvas-border-de-emp);
 `;
 const SettingsPreviewTitle = styled.div`
   font-size: 14px;
   font-weight: 600;
-  color: var(--uix-canvas-foreground-emp);
+  color: var(--canvas-foreground-emp);
 `;
 const SettingsPreviewSubtitle = styled.div`
   font-size: 12px;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
 `;
 const SettingsSection = styled.div`
   display: flex;
@@ -80,17 +80,17 @@ const SettingsSection = styled.div`
 const SettingsSectionLabel = styled.div`
   font-size: 12px;
   font-weight: 500;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
 `;
 const SettingsSectionValue = styled.div`
   font-size: 14px;
-  color: var(--uix-canvas-foreground-emp);
+  color: var(--canvas-foreground-emp);
 `;
 const SettingsPromptBox = styled.div`
   font-size: 13px;
-  color: ${({ isEmpty })=>isEmpty ? 'var(--uix-canvas-foreground-de-emp)' : 'var(--uix-canvas-foreground)'};
+  color: ${({ isEmpty })=>isEmpty ? 'var(--canvas-foreground-de-emp)' : 'var(--canvas-foreground)'};
   font-style: ${({ isEmpty })=>isEmpty ? 'italic' : 'normal'};
-  background: var(--uix-canvas-background-secondary);
+  background: var(--canvas-background-secondary);
   border-radius: 6px;
   padding: 8px 10px;
   max-height: 80px;
@@ -107,7 +107,7 @@ const SettingsPromptBox = styled.div`
   }
 
   &::-webkit-scrollbar-thumb {
-    background: var(--uix-canvas-border-de-emp);
+    background: var(--canvas-border-de-emp);
     border-radius: 2px;
   }
 `;
@@ -118,10 +118,10 @@ const SettingsRow = styled.div`
   font-size: 13px;
 `;
 const SettingsRowLabel = styled.span`
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
 `;
 const SettingsRowValue = styled.span`
-  color: var(--uix-canvas-foreground-emp);
+  color: var(--canvas-foreground-emp);
   font-weight: 500;
 `;
 const SubLabelContainer = styled.span`
@@ -134,12 +134,12 @@ const HealthScoreBadge = styled.span`
   align-items: center;
   gap: 4px;
   padding: 2px 6px;
-  background-color: var(--uix-canvas-background-secondary);
+  background-color: var(--canvas-background-secondary);
   border-radius: 16px;
   font-size: 10px;
   font-weight: 700;
   line-height: 16px;
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   cursor: pointer;
 `;
 export { AddInstructionsButton, HealthScoreBadge, InstructionsLabel, InstructionsLine, InstructionsPreview, SettingsPreviewContainer, SettingsPreviewHeader, SettingsPreviewSubtitle, SettingsPreviewTitle, SettingsPromptBox, SettingsRow, SettingsRowLabel, SettingsRowValue, SettingsSection, SettingsSectionLabel, SettingsSectionValue, SubLabelContainer };

package/dist/canvas/components/AgentCanvas/nodes/ResourceNode.cjs

@@ -175,7 +175,7 @@ const ResourceNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ d
         }
         return icon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_layouts_index_cjs_namespaceObject.Row, {
             style: {
-                color: 'var(--uix-canvas-foreground-de-emp)'
+                color: 'var(--canvas-foreground-de-emp)'
             },
             children: icon
         }) : null;
@@ -324,7 +324,7 @@ const ResourceNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ d
                 type: 'target',
                 handleType: 'artifact',
                 showButton: false,
-                color: 'var(--uix-canvas-foreground-de-emp)'
+                color: 'var(--canvas-foreground-de-emp)'
             }
         ], []);
     const toolBottomHandles = (0, external_react_namespaceObject.useMemo)(()=>[
@@ -333,7 +333,7 @@ const ResourceNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ d
                 type: 'source',
                 handleType: 'artifact',
                 showButton: false,
-                color: 'var(--uix-canvas-foreground-de-emp)'
+                color: 'var(--canvas-foreground-de-emp)'
             }
         ], []);
     const contextHandles = (0, external_react_namespaceObject.useMemo)(()=>[
@@ -342,7 +342,7 @@ const ResourceNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ d
                 type: 'source',
                 handleType: 'artifact',
                 showButton: false,
-                color: 'var(--uix-canvas-foreground-de-emp)'
+                color: 'var(--canvas-foreground-de-emp)'
             }
         ], []);
     const escalationHandles = (0, external_react_namespaceObject.useMemo)(()=>[
@@ -351,7 +351,7 @@ const ResourceNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ d
                 type: 'target',
                 handleType: 'artifact',
                 showButton: false,
-                color: 'var(--uix-canvas-foreground-de-emp)'
+                color: 'var(--canvas-foreground-de-emp)'
             }
         ], []);
     const memoryHandles = (0, external_react_namespaceObject.useMemo)(()=>[
@@ -360,7 +360,7 @@ const ResourceNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ d
                 type: 'target',
                 handleType: 'artifact',
                 showButton: false,
-                color: 'var(--uix-canvas-foreground-de-emp)'
+                color: 'var(--canvas-foreground-de-emp)'
             }
         ], []);
     const breakpointAdornment = (0, external_react_namespaceObject.useMemo)(()=>{
@@ -384,7 +384,7 @@ const ResourceNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ d
         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
             icon: "shield-check",
             size: 18,
-            color: "var(--uix-canvas-icon-default)"
+            color: "var(--canvas-icon-default)"
         });
     }, [
         hasGuardrails
@@ -392,13 +392,13 @@ const ResourceNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ d
     const suggestionAdornment = (0, external_react_namespaceObject.useMemo)(()=>{
         if (!isSuggestion) return;
         let iconName = 'arrow-left-right';
-        let color = 'var(--uix-canvas-warning-icon)';
+        let color = 'var(--canvas-warning-icon)';
         if ('add' === suggestionType) {
             iconName = 'circle-plus';
-            color = 'var(--uix-canvas-success-icon)';
+            color = 'var(--canvas-success-icon)';
         } else if ('delete' === suggestionType) {
             iconName = 'circle-minus';
-            color = 'var(--uix-canvas-error-icon)';
+            color = 'var(--canvas-error-icon)';
         }
         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
             icon: iconName,
@@ -467,7 +467,7 @@ const ResourceNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ d
     };
     const baseNodeConfig = (0, external_react_namespaceObject.useMemo)(()=>({
             labelTooltip: displayTooltips ? data.description : void 0,
-            labelBackgroundColor: 'var(--uix-canvas-background-secondary)',
+            labelBackgroundColor: 'var(--canvas-background-secondary)',
             disabled: isDisabled,
             executionStatusOverride: executionStatus,
             suggestionType,
@@ -503,7 +503,7 @@ const ResourceNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ d
             data: {
                 ...data,
                 display: {
-                    iconBackground: 'var(--uix-canvas-background-secondary)',
+                    iconBackground: 'var(--canvas-background-secondary)',
                     label: data.name,
                     subLabel: data.originalName,
                     shape: 'circle'

package/dist/canvas/components/AgentCanvas/nodes/ResourceNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceNode.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/nodes/ResourceNode.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,0CAA0C,CAAC;AAGpF,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAE9B,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAC5B,MAAM,gBAAgB,CAAC;AAcxB,UAAU,iBAAkB,SAAQ,SAAS,CAAC,qBAAqB,CAAC;IAClE,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAC7E,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAC9E,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACpF,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACvF,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACnF,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACjF,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAClF,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACrF,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACvF,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAEhD,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,0RAoBpB,iBAAiB,6CAkcrB,CAAC"}
+{"version":3,"file":"ResourceNode.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/nodes/ResourceNode.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,0CAA0C,CAAC;AAGpF,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAE9B,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAC5B,MAAM,gBAAgB,CAAC;AAcxB,UAAU,iBAAkB,SAAQ,SAAS,CAAC,qBAAqB,CAAC;IAClE,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAC7E,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAC9E,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACpF,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACvF,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACnF,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACjF,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAClF,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACrF,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACvF,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAEhD,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,0RAoBpB,iBAAiB,6CAgcrB,CAAC"}

package/dist/canvas/components/AgentCanvas/nodes/ResourceNode.js

@@ -147,7 +147,7 @@ const ResourceNode = /*#__PURE__*/ memo(({ data, selected, id, mode, hasError =
         }
         return icon ? /*#__PURE__*/ jsx(Row, {
             style: {
-                color: 'var(--uix-canvas-foreground-de-emp)'
+                color: 'var(--canvas-foreground-de-emp)'
             },
             children: icon
         }) : null;
@@ -296,7 +296,7 @@ const ResourceNode = /*#__PURE__*/ memo(({ data, selected, id, mode, hasError =
                 type: 'target',
                 handleType: 'artifact',
                 showButton: false,
-                color: 'var(--uix-canvas-foreground-de-emp)'
+                color: 'var(--canvas-foreground-de-emp)'
             }
         ], []);
     const toolBottomHandles = useMemo(()=>[
@@ -305,7 +305,7 @@ const ResourceNode = /*#__PURE__*/ memo(({ data, selected, id, mode, hasError =
                 type: 'source',
                 handleType: 'artifact',
                 showButton: false,
-                color: 'var(--uix-canvas-foreground-de-emp)'
+                color: 'var(--canvas-foreground-de-emp)'
             }
         ], []);
     const contextHandles = useMemo(()=>[
@@ -314,7 +314,7 @@ const ResourceNode = /*#__PURE__*/ memo(({ data, selected, id, mode, hasError =
                 type: 'source',
                 handleType: 'artifact',
                 showButton: false,
-                color: 'var(--uix-canvas-foreground-de-emp)'
+                color: 'var(--canvas-foreground-de-emp)'
             }
         ], []);
     const escalationHandles = useMemo(()=>[
@@ -323,7 +323,7 @@ const ResourceNode = /*#__PURE__*/ memo(({ data, selected, id, mode, hasError =
                 type: 'target',
                 handleType: 'artifact',
                 showButton: false,
-                color: 'var(--uix-canvas-foreground-de-emp)'
+                color: 'var(--canvas-foreground-de-emp)'
             }
         ], []);
     const memoryHandles = useMemo(()=>[
@@ -332,7 +332,7 @@ const ResourceNode = /*#__PURE__*/ memo(({ data, selected, id, mode, hasError =
                 type: 'target',
                 handleType: 'artifact',
                 showButton: false,
-                color: 'var(--uix-canvas-foreground-de-emp)'
+                color: 'var(--canvas-foreground-de-emp)'
             }
         ], []);
     const breakpointAdornment = useMemo(()=>{
@@ -356,7 +356,7 @@ const ResourceNode = /*#__PURE__*/ memo(({ data, selected, id, mode, hasError =
         return /*#__PURE__*/ jsx(CanvasIcon, {
             icon: "shield-check",
             size: 18,
-            color: "var(--uix-canvas-icon-default)"
+            color: "var(--canvas-icon-default)"
         });
     }, [
         hasGuardrails
@@ -364,13 +364,13 @@ const ResourceNode = /*#__PURE__*/ memo(({ data, selected, id, mode, hasError =
     const suggestionAdornment = useMemo(()=>{
         if (!isSuggestion) return;
         let iconName = 'arrow-left-right';
-        let color = 'var(--uix-canvas-warning-icon)';
+        let color = 'var(--canvas-warning-icon)';
         if ('add' === suggestionType) {
             iconName = 'circle-plus';
-            color = 'var(--uix-canvas-success-icon)';
+            color = 'var(--canvas-success-icon)';
         } else if ('delete' === suggestionType) {
             iconName = 'circle-minus';
-            color = 'var(--uix-canvas-error-icon)';
+            color = 'var(--canvas-error-icon)';
         }
         return /*#__PURE__*/ jsx(CanvasIcon, {
             icon: iconName,
@@ -439,7 +439,7 @@ const ResourceNode = /*#__PURE__*/ memo(({ data, selected, id, mode, hasError =
     };
     const baseNodeConfig = useMemo(()=>({
             labelTooltip: displayTooltips ? data.description : void 0,
-            labelBackgroundColor: 'var(--uix-canvas-background-secondary)',
+            labelBackgroundColor: 'var(--canvas-background-secondary)',
             disabled: isDisabled,
             executionStatusOverride: executionStatus,
             suggestionType,
@@ -475,7 +475,7 @@ const ResourceNode = /*#__PURE__*/ memo(({ data, selected, id, mode, hasError =
             data: {
                 ...data,
                 display: {
-                    iconBackground: 'var(--uix-canvas-background-secondary)',
+                    iconBackground: 'var(--canvas-background-secondary)',
                     label: data.name,
                     subLabel: data.originalName,
                     shape: 'circle'

package/dist/canvas/components/BaseCanvas/BaseCanvas.constants.cjs

@@ -54,8 +54,8 @@ const BASE_CANVAS_DEFAULTS = {
     background: {
         gap: BASE_CANVAS_GRID_SPACING,
         size: 2,
-        color: 'color-mix(in srgb, var(--uix-canvas-border-de-emp), transparent 50%)',
-        bgColor: 'var(--uix-canvas-background-secondary)',
+        color: 'color-mix(in srgb, var(--canvas-border-de-emp), transparent 50%)',
+        bgColor: 'var(--canvas-background-secondary)',
         variant: react_cjs_namespaceObject.BackgroundVariant.Dots
     },
     transitions: {

package/dist/canvas/components/BaseCanvas/BaseCanvas.constants.d.ts

@@ -18,8 +18,8 @@ export declare const BASE_CANVAS_DEFAULTS: {
     readonly background: {
         readonly gap: 16;
         readonly size: 2;
-        readonly color: "color-mix(in srgb, var(--uix-canvas-border-de-emp), transparent 50%)";
-        readonly bgColor: "var(--uix-canvas-background-secondary)";
+        readonly color: "color-mix(in srgb, var(--canvas-border-de-emp), transparent 50%)";
+        readonly bgColor: "var(--canvas-background-secondary)";
         readonly variant: BackgroundVariant.Dots;
     };
     readonly transitions: {

package/dist/canvas/components/BaseCanvas/BaseCanvas.constants.js

@@ -19,8 +19,8 @@ const BASE_CANVAS_DEFAULTS = {
     background: {
         gap: BASE_CANVAS_GRID_SPACING,
         size: 2,
-        color: 'color-mix(in srgb, var(--uix-canvas-border-de-emp), transparent 50%)',
-        bgColor: 'var(--uix-canvas-background-secondary)',
+        color: 'color-mix(in srgb, var(--canvas-border-de-emp), transparent 50%)',
+        bgColor: 'var(--canvas-background-secondary)',
         variant: BackgroundVariant.Dots
     },
     transitions: {

package/dist/canvas/components/BaseCanvas/PanShortcutTeachingUI.cjs

@@ -55,7 +55,7 @@ const userSelectionStateSelector = (s)=>{
     };
 };
 const PanShortcutTeachingUIMessage = styled_default().div`
-  background-color: var(--uix-canvas-background-inverse);
+  background-color: var(--canvas-background-inverse);
   padding: 8px 8px;
   border-radius: 4px;
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
@@ -164,7 +164,7 @@ function PanShortcutTeachingUIInternal({ message = 'Hold the Space bar and drag
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                 style: {
                     display: 'inline-flex',
-                    color: 'var(--uix-canvas-foreground-inverse)',
+                    color: 'var(--canvas-foreground-inverse)',
                     fontSize: '14px',
                     textAlign: 'center'
                 },

package/dist/canvas/components/BaseCanvas/PanShortcutTeachingUI.js

@@ -16,7 +16,7 @@ const userSelectionStateSelector = (s)=>{
     };
 };
 const PanShortcutTeachingUIMessage = styled.div`
-  background-color: var(--uix-canvas-background-inverse);
+  background-color: var(--canvas-background-inverse);
   padding: 8px 8px;
   border-radius: 4px;
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
@@ -125,7 +125,7 @@ function PanShortcutTeachingUIInternal({ message = 'Hold the Space bar and drag
             children: /*#__PURE__*/ jsx("span", {
                 style: {
                     display: 'inline-flex',
-                    color: 'var(--uix-canvas-foreground-inverse)',
+                    color: 'var(--canvas-foreground-inverse)',
                     fontSize: '14px',
                     textAlign: 'center'
                 },

package/dist/canvas/components/BaseNode/BaseNode.cjs

@@ -338,14 +338,14 @@ const BaseNodeComponent = (props)=>{
             interactionState: interactionState,
             children: [
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.BaseIconWrapper, {
-                    backgroundColor: "var(--uix-canvas-error-background)",
+                    backgroundColor: "var(--canvas-error-background)",
                     shape: "square",
                     height: height,
                     width: width ?? height,
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
                         icon: "circle-alert",
                         size: 32,
-                        color: "var(--uix-canvas-error-icon)"
+                        color: "var(--canvas-error-icon)"
                     })
                 }),
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseNode_styles_cjs_namespaceObject.BaseTextContainer, {

package/dist/canvas/components/BaseNode/BaseNode.js

@@ -310,14 +310,14 @@ const BaseNodeComponent = (props)=>{
             interactionState: interactionState,
             children: [
                 /*#__PURE__*/ jsx(BaseIconWrapper, {
-                    backgroundColor: "var(--uix-canvas-error-background)",
+                    backgroundColor: "var(--canvas-error-background)",
                     shape: "square",
                     height: height,
                     width: width ?? height,
                     children: /*#__PURE__*/ jsx(CanvasIcon, {
                         icon: "circle-alert",
                         size: 32,
-                        color: "var(--uix-canvas-error-icon)"
+                        color: "var(--canvas-error-icon)"
                     })
                 }),
                 /*#__PURE__*/ jsxs(BaseTextContainer, {