@uipath/apollo-react 4.1.0 → 4.1.1

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

@@ -69,36 +69,36 @@ const StageContainer = styled_default().div`
   position: relative;
   min-width: 288px;
   width: ${({ width })=>width ? `${width}px` : 'auto'};
-  background: var(--uix-canvas-background);
-  border: ${STAGE_BORDER_WIDTH}px solid var(--uix-canvas-border-de-emp);
+  background: var(--canvas-background);
+  border: ${STAGE_BORDER_WIDTH}px solid var(--canvas-border-de-emp);
   border-radius: ${apollo_core_namespaceObject.Spacing.SpacingBase};
   display: flex;
   flex-direction: column;
   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)`
@@ -110,8 +110,8 @@ const StageHeader = styled_default().div`
   display: flex;
   justify-content: space-between;
   padding: ${apollo_core_namespaceObject.Spacing.SpacingS} ${apollo_core_namespaceObject.Spacing.SpacingBase};
-  border-bottom: solid 1px var(--uix-canvas-border-de-emp);
-  background: ${(props)=>props.isException ? 'var(--color-background-secondary)' : 'var(--uix-canvas-background)'};
+  border-bottom: solid 1px var(--canvas-border-de-emp);
+  background: ${(props)=>props.isException ? 'var(--color-background-secondary)' : 'var(--canvas-background)'};
   border-radius: ${apollo_core_namespaceObject.Spacing.SpacingBase} ${apollo_core_namespaceObject.Spacing.SpacingBase} 0 0;
   overflow: hidden;
 `;
@@ -121,7 +121,7 @@ const StageTitleContainer = styled_default().div`
   height: 100%;
   width: 100%;
   box-sizing: border-box;
-  border: ${(props)=>props.isEditing ? '1px solid var(--uix-canvas-border-de-emp)' : 'none'};
+  border: ${(props)=>props.isEditing ? '1px solid var(--canvas-border-de-emp)' : 'none'};
 `;
 const StageTitleInput = styled_default().input`
   font-family: inherit;
@@ -142,7 +142,7 @@ const StageTitleInput = styled_default().input`
 
   &:hover {
     cursor: ${(props)=>props.isStageTitleEditable ? 'text' : 'pointer'};
-    background: ${(props)=>props.isEditing || props.isStageTitleEditable ? 'var(--uix-canvas-background-secondary)' : 'transparent'};
+    background: ${(props)=>props.isEditing || props.isStageTitleEditable ? 'var(--canvas-background-secondary)' : 'transparent'};
   }
 `;
 const StageContent = styled_default().div`
@@ -174,9 +174,9 @@ const StageParallelLabel = styled_default().div`
   padding: 0px ${apollo_core_namespaceObject.Padding.PadM};
   display: flex;
   justify-content: center;
-  background: var(--uix-canvas-background);
+  background: var(--canvas-background);
   transform: translateY(-50%) rotate(-90deg);
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   text-transform: capitalize;
   letter-spacing: 0.3px;
   white-space: nowrap;
@@ -185,7 +185,7 @@ const StageParallelBracket = styled_default().div`
   margin-left: ${apollo_core_namespaceObject.Padding.PadM};
   width: ${apollo_core_namespaceObject.Spacing.SpacingXs};
   flex: 1;
-  border: 1.5px solid var(--uix-canvas-border-de-emp);
+  border: 1.5px solid var(--canvas-border-de-emp);
   border-right: none;
 `;
 const StageTaskWrapper = styled_default().div`
@@ -199,10 +199,10 @@ const StageTask = styled_default().div`
   align-items: center;
   gap: ${apollo_core_namespaceObject.Spacing.SpacingXs};
   padding: ${apollo_core_namespaceObject.Padding.PadS} ${apollo_core_namespaceObject.Padding.PadM};
-  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: ${apollo_core_namespaceObject.Spacing.SpacingXs};
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   transition: all 0.2s ease;
   min-height: 36px;
   width: ${({ isParallel, isDragEnabled })=>isDragEnabled ? '100%' : isParallel ? 'var(--stage-task-width-parallel, 216px)' : 'var(--stage-task-width, 246px)'};
@@ -213,28 +213,28 @@ const StageTask = styled_default().div`
   }
 
   ${({ status })=>'InProgress' === status && (0, react_namespaceObject.css)`
-      border-color: var(--uix-canvas-info-icon);
+      border-color: var(--canvas-info-icon);
     `}
 
   ${({ status })=>'Completed' === status && (0, react_namespaceObject.css)`
-      border-color: var(--uix-canvas-success-icon);
+      border-color: var(--canvas-success-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);
     `}
 
   ${({ 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 {
-            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);
           }
         `}
 `;
@@ -255,15 +255,15 @@ const StageTaskRetryDuration = styled_default().div`
   display: flex;
   align-items: center;
   ${({ status })=>'info' === status && (0, react_namespaceObject.css)`
-      color: var(--uix-canvas-info-text);
+      color: var(--canvas-info-text);
     `}
 
   ${({ status })=>'warning' === status && (0, react_namespaceObject.css)`
-      color: var(--uix-canvas-warning-text);
+      color: var(--canvas-warning-text);
     `}
 
   ${({ status })=>'error' === status && (0, react_namespaceObject.css)`
-      color: var(--uix-canvas-error-text);
+      color: var(--canvas-error-text);
     `}
 `;
 const StageTaskDragPlaceholderWrapper = styled_default().div`
@@ -283,9 +283,9 @@ const StageChip = styled_default().button`
   gap: ${apollo_core_namespaceObject.Padding.PadS};
   padding: ${apollo_core_namespaceObject.Padding.PadXs} ${apollo_core_namespaceObject.Spacing.SpacingXs};
   border-radius: 10px;
-  border: 1px solid var(--uix-canvas-border-de-emp);
+  border: 1px solid var(--canvas-border-de-emp);
   background: transparent;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   cursor: pointer;
 
   &:hover {
@@ -293,7 +293,7 @@ const StageChip = styled_default().button`
   }
 
   &:focus-visible {
-    outline: 2px solid var(--uix-canvas-primary);
+    outline: 2px solid var(--canvas-primary);
     outline-offset: 2px;
   }
 `;
@@ -313,7 +313,7 @@ const StageTaskDragPlaceholder = styled_default().div`
   gap: ${apollo_core_namespaceObject.Spacing.SpacingXs};
   padding: ${apollo_core_namespaceObject.Padding.PadL} ${apollo_core_namespaceObject.Padding.PadXxl};
   background: transparent;
-  border: 2px dashed var(--uix-canvas-selection-indicator);
+  border: 2px dashed var(--canvas-selection-indicator);
   border-radius: 6px;
 
   height: 100%;

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

@@ -9,36 +9,36 @@ const StageContainer = styled.div`
   position: relative;
   min-width: 288px;
   width: ${({ width })=>width ? `${width}px` : 'auto'};
-  background: var(--uix-canvas-background);
-  border: ${STAGE_BORDER_WIDTH}px solid var(--uix-canvas-border-de-emp);
+  background: var(--canvas-background);
+  border: ${STAGE_BORDER_WIDTH}px solid var(--canvas-border-de-emp);
   border-radius: ${Spacing.SpacingBase};
   display: flex;
   flex-direction: column;
   cursor: pointer;
 
   ${({ selected })=>selected ? 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);
         ` : css`
           &:hover {
-            outline: 4px solid var(--uix-canvas-secondary-pressed);
+            outline: 4px solid var(--canvas-secondary-pressed);
           }
         `}
 
   ${({ status })=>'Completed' === status && css`
-      border-color: var(--uix-canvas-success-icon);
+      border-color: var(--canvas-success-icon);
     `}
 
   ${({ status })=>'InProgress' === status && css`
-      border-color: var(--uix-canvas-info-icon);
+      border-color: var(--canvas-info-icon);
     `}
 
   ${({ status })=>'Paused' === status && css`
-      border-color: var(--uix-canvas-warning-icon);
+      border-color: var(--canvas-warning-icon);
     `}
 
   ${({ status })=>'Failed' === status && css`
-      border-color: var(--uix-canvas-error-icon);
+      border-color: var(--canvas-error-icon);
     `}
 
   ${({ status })=>'NotExecuted' === status && css`
@@ -50,8 +50,8 @@ const StageHeader = styled.div`
   display: flex;
   justify-content: space-between;
   padding: ${Spacing.SpacingS} ${Spacing.SpacingBase};
-  border-bottom: solid 1px var(--uix-canvas-border-de-emp);
-  background: ${(props)=>props.isException ? 'var(--color-background-secondary)' : 'var(--uix-canvas-background)'};
+  border-bottom: solid 1px var(--canvas-border-de-emp);
+  background: ${(props)=>props.isException ? 'var(--color-background-secondary)' : 'var(--canvas-background)'};
   border-radius: ${Spacing.SpacingBase} ${Spacing.SpacingBase} 0 0;
   overflow: hidden;
 `;
@@ -61,7 +61,7 @@ const StageTitleContainer = styled.div`
   height: 100%;
   width: 100%;
   box-sizing: border-box;
-  border: ${(props)=>props.isEditing ? '1px solid var(--uix-canvas-border-de-emp)' : 'none'};
+  border: ${(props)=>props.isEditing ? '1px solid var(--canvas-border-de-emp)' : 'none'};
 `;
 const StageTitleInput = styled.input`
   font-family: inherit;
@@ -82,7 +82,7 @@ const StageTitleInput = styled.input`
 
   &:hover {
     cursor: ${(props)=>props.isStageTitleEditable ? 'text' : 'pointer'};
-    background: ${(props)=>props.isEditing || props.isStageTitleEditable ? 'var(--uix-canvas-background-secondary)' : 'transparent'};
+    background: ${(props)=>props.isEditing || props.isStageTitleEditable ? 'var(--canvas-background-secondary)' : 'transparent'};
   }
 `;
 const StageContent = styled.div`
@@ -114,9 +114,9 @@ const StageParallelLabel = styled.div`
   padding: 0px ${Padding.PadM};
   display: flex;
   justify-content: center;
-  background: var(--uix-canvas-background);
+  background: var(--canvas-background);
   transform: translateY(-50%) rotate(-90deg);
-  color: var(--uix-canvas-foreground-de-emp);
+  color: var(--canvas-foreground-de-emp);
   text-transform: capitalize;
   letter-spacing: 0.3px;
   white-space: nowrap;
@@ -125,7 +125,7 @@ const StageParallelBracket = styled.div`
   margin-left: ${Padding.PadM};
   width: ${Spacing.SpacingXs};
   flex: 1;
-  border: 1.5px solid var(--uix-canvas-border-de-emp);
+  border: 1.5px solid var(--canvas-border-de-emp);
   border-right: none;
 `;
 const StageTaskWrapper = styled.div`
@@ -139,10 +139,10 @@ const StageTask = styled.div`
   align-items: center;
   gap: ${Spacing.SpacingXs};
   padding: ${Padding.PadS} ${Padding.PadM};
-  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: ${Spacing.SpacingXs};
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   transition: all 0.2s ease;
   min-height: 36px;
   width: ${({ isParallel, isDragEnabled })=>isDragEnabled ? '100%' : isParallel ? 'var(--stage-task-width-parallel, 216px)' : 'var(--stage-task-width, 246px)'};
@@ -153,28 +153,28 @@ const StageTask = styled.div`
   }
 
   ${({ status })=>'InProgress' === status && css`
-      border-color: var(--uix-canvas-info-icon);
+      border-color: var(--canvas-info-icon);
     `}
 
   ${({ status })=>'Completed' === status && css`
-      border-color: var(--uix-canvas-success-icon);
+      border-color: var(--canvas-success-icon);
     `}
 
   ${({ status })=>'Paused' === status && css`
-      border-color: var(--uix-canvas-warning-icon);
+      border-color: var(--canvas-warning-icon);
     `}
 
   ${({ status })=>'Failed' === status && css`
-      border-color: var(--uix-canvas-error-icon);
+      border-color: var(--canvas-error-icon);
     `}
 
   ${({ selected })=>selected ? 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);
         ` : css`
           &:hover {
-            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);
           }
         `}
 `;
@@ -195,15 +195,15 @@ const StageTaskRetryDuration = styled.div`
   display: flex;
   align-items: center;
   ${({ status })=>'info' === status && css`
-      color: var(--uix-canvas-info-text);
+      color: var(--canvas-info-text);
     `}
 
   ${({ status })=>'warning' === status && css`
-      color: var(--uix-canvas-warning-text);
+      color: var(--canvas-warning-text);
     `}
 
   ${({ status })=>'error' === status && css`
-      color: var(--uix-canvas-error-text);
+      color: var(--canvas-error-text);
     `}
 `;
 const StageTaskDragPlaceholderWrapper = styled.div`
@@ -223,9 +223,9 @@ const StageChip = styled.button`
   gap: ${Padding.PadS};
   padding: ${Padding.PadXs} ${Spacing.SpacingXs};
   border-radius: 10px;
-  border: 1px solid var(--uix-canvas-border-de-emp);
+  border: 1px solid var(--canvas-border-de-emp);
   background: transparent;
-  color: var(--uix-canvas-foreground);
+  color: var(--canvas-foreground);
   cursor: pointer;
 
   &:hover {
@@ -233,7 +233,7 @@ const StageChip = styled.button`
   }
 
   &:focus-visible {
-    outline: 2px solid var(--uix-canvas-primary);
+    outline: 2px solid var(--canvas-primary);
     outline-offset: 2px;
   }
 `;
@@ -253,7 +253,7 @@ const StageTaskDragPlaceholder = styled.div`
   gap: ${Spacing.SpacingXs};
   padding: ${Padding.PadL} ${Padding.PadXxl};
   background: transparent;
-  border: 2px dashed var(--uix-canvas-selection-indicator);
+  border: 2px dashed var(--canvas-selection-indicator);
   border-radius: 6px;
 
   height: 100%;

package/dist/canvas/components/StageNode/TaskContent.cjs

@@ -123,7 +123,7 @@ const TaskPlayButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
             onKeyDown: (e)=>e.stopPropagation(),
             className: "task-menu-icon-button",
             style: {
-                color: 'var(--uix-canvas-icon-default)',
+                color: 'var(--canvas-icon-default)',
                 minWidth: 'unset',
                 width: buttonSize,
                 height: buttonSize,

package/dist/canvas/components/StageNode/TaskContent.js

@@ -85,7 +85,7 @@ const TaskPlayButton = /*#__PURE__*/ memo(({ taskId, onTaskPlay, small })=>{
             onKeyDown: (e)=>e.stopPropagation(),
             className: "task-menu-icon-button",
             style: {
-                color: 'var(--uix-canvas-icon-default)',
+                color: 'var(--canvas-icon-default)',
                 minWidth: 'unset',
                 width: buttonSize,
                 height: buttonSize,

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

@@ -61,7 +61,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;
 
@@ -74,7 +74,7 @@ const stickyNoteContentStyles = `
   }
 
   &::-webkit-scrollbar-thumb {
-    background: var(--uix-canvas-border);
+    background: var(--canvas-border);
     border-radius: 4px;
   }
 `;
@@ -129,7 +129,7 @@ const StickyNoteTextArea = styled_default().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};
   }
 
@@ -203,7 +203,7 @@ const StickyNoteMarkdown = styled_default().div`
   }
 
   a {
-    color: var(--uix-canvas-primary);
+    color: var(--canvas-primary);
     text-decoration: underline;
     cursor: pointer;
     pointer-events: auto;
@@ -262,7 +262,7 @@ const StickyNoteMarkdown = styled_default().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_default().div`
@@ -291,8 +291,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;
   }
 
@@ -304,8 +304,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;
   }
 `;
@@ -323,8 +323,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;
   }
 
@@ -336,8 +336,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;
   }
 `;
@@ -347,8 +347,8 @@ const ColorPickerPanel = styled_default()(external_motion_react_namespaceObject.
   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),
@@ -370,7 +370,7 @@ const ColorOption = styled_default().button`
   }
 
   &:focus {
-    outline: 2px solid var(--uix-canvas-primary);
+    outline: 2px solid var(--canvas-primary);
     outline-offset: 1px;
   }
 `;
@@ -393,17 +393,17 @@ const FormattingButton = styled_default().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_default().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;
 `;
 exports.BottomCornerIndicators = __webpack_exports__.BottomCornerIndicators;

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StickyNoteNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,8BAA8B,MAAM,CAAC;AA4BlD,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,eAAO,MAAM,sBAAsB,2CAUlC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAI7B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;iBACjB,MAAM;qBACF,MAAM;eACZ,OAAO;eACP,OAAO;yGAuBnB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;eAAgC,OAAO;2HAsBrE,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGA8H9B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;eAA2B,OAAO;aAAW,MAAM;yGAW3E,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;eAA2B,OAAO;yGA+BjE,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;eAA2B,OAAO;yGA+BpE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;UAa5B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;WAA0B,MAAM;gBAAc,OAAO;qHAkB5E,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;iBAA6B,MAAM;yGAQzE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;cAA6B,OAAO;qHAsBhE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAK5B,CAAC"}
+{"version":3,"file":"StickyNoteNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,8BAA8B,MAAM,CAAC;AA4BlD,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,eAAO,MAAM,sBAAsB,2CAUlC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAI7B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;iBACjB,MAAM;qBACF,MAAM;eACZ,OAAO;eACP,OAAO;yGAuBnB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;eAAgC,OAAO;2HAsBrE,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGA8H9B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;eAA2B,OAAO;aAAW,MAAM;yGAW3E,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;eAA2B,OAAO;yGA+BjE,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;eAA2B,OAAO;yGA+BpE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;UAa5B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;WAA0B,MAAM;gBAAc,OAAO;qHAkB5E,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;iBAA6B,MAAM;yGAQzE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;cAA6B,OAAO;qHAoBhE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAK5B,CAAC"}

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) {