@uipath/apollo-react 4.1.0 → 4.1.2

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

@@ -9,7 +9,7 @@ const stickyNoteContentStyles = `
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   font-size: 14px;
   line-height: 1.5;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
 
   overflow-y: auto;
 
@@ -22,7 +22,7 @@ const stickyNoteContentStyles = `
   }
 
   &::-webkit-scrollbar-thumb {
-    background: var(--uix-canvas-border);
+    background: var(--canvas-border);
     border-radius: 4px;
   }
 `;
@@ -77,7 +77,7 @@ const StickyNoteTextArea = styled.textarea`
   pointer-events: ${(props)=>props.isEditing ? 'auto' : 'none'};
 
   &::placeholder {
-    color: var(--uix-canvas-foreground-de-emp);
+    color: var(--canvas-foreground-de-emp);
     opacity: ${(props)=>props.isEditing ? 1 : 0.6};
   }
 
@@ -151,7 +151,7 @@ const StickyNoteMarkdown = styled.div`
   }
 
   a {
-    color: var(--uix-canvas-primary);
+    color: var(--canvas-primary);
     text-decoration: underline;
     cursor: pointer;
     pointer-events: auto;
@@ -210,7 +210,7 @@ const StickyNoteMarkdown = styled.div`
     border-left: 3px solid rgba(0, 0, 0, 0.2);
     padding-left: 12px;
     margin: 8px 0;
-    color: var(--uix-canvas-foreground-de-emp);
+    color: var(--canvas-foreground-de-emp);
   }
 `;
 const ResizeHandle = styled.div`
@@ -239,8 +239,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;
   }
 
@@ -252,8 +252,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;
   }
 `;
@@ -271,8 +271,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;
   }
 
@@ -284,8 +284,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;
   }
 `;
@@ -295,8 +295,8 @@ const ColorPickerPanel = styled(motion.div)`
   align-items: center;
   gap: 4px;
   padding: 4px;
-  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),
@@ -318,7 +318,7 @@ const ColorOption = styled.button`
   }
 
   &:focus {
-    outline: 2px solid var(--uix-canvas-primary);
+    outline: 2px solid var(--canvas-primary);
     outline-offset: 1px;
   }
 `;
@@ -341,17 +341,17 @@ const FormattingButton = styled.button`
   border-radius: 4px;
   cursor: pointer;
   padding: 0;
-  color: var(--uix-canvas-foreground);
-  background: ${(props)=>props.isActive ? 'color-mix(in srgb, var(--uix-canvas-primary) 30%, transparent)' : 'transparent'};
+  color: var(--canvas-foreground);
+  background: ${(props)=>props.isActive ? 'color-mix(in srgb, var(--canvas-primary) 30%, transparent)' : 'transparent'};
 
   &:hover {
-    background: ${(props)=>props.isActive ? 'color-mix(in srgb, var(--uix-canvas-primary) 40%, transparent)' : 'color-mix(in srgb, var(--uix-canvas-foreground) 10%, transparent)'};
+    background: ${(props)=>props.isActive ? 'color-mix(in srgb, var(--canvas-primary) 40%, transparent)' : 'color-mix(in srgb, var(--canvas-foreground) 10%, transparent)'};
   }
 `;
 const ToolbarSeparator = styled.div`
   width: 1px;
   height: 16px;
-  background: color-mix(in srgb, var(--uix-canvas-foreground) 15%, transparent);
+  background: color-mix(in srgb, var(--canvas-foreground) 15%, transparent);
   margin: 0 4px;
 `;
 export { BottomCornerIndicators, ColorOption, ColorPickerPanel, FormattingButton, FormattingToolbarContainer, RESIZE_CONTROL_Z_INDEX, ResizeHandle, STICKY_NOTE_BELOW_EDGE_Z_INDEX, StickyNoteContainer, StickyNoteMarkdown, StickyNoteTextArea, StickyNoteWrapper, ToolbarSeparator, TopCornerIndicators, stickyNoteGlobalStyles };

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

@@ -32,7 +32,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/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/EdgeToolbar/useEdgeToolbarState.cjs

@@ -85,7 +85,7 @@ function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target
             actions: [
                 {
                     id: 'add-node',
-                    icon: 'add',
+                    icon: 'plus',
                     label: 'Add node',
                     disabled: false,
                     onAction: (_edgeId, position)=>{

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

@@ -57,7 +57,7 @@ function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target
             actions: [
                 {
                     id: 'add-node',
-                    icon: 'add',
+                    icon: 'plus',
                     label: 'Add node',
                     disabled: false,
                     onAction: (_edgeId, position)=>{

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 };