Начал переводить на consta UI

src/nodes.tsx

@@ -10,14 +10,29 @@ export const NodesWithChildrenContext = createContext<Set<string>>(new Set());
 /** Current editor mode — resize handles and connection points only show in 'edit'. */
 export const ModeContext = createContext<'edit' | 'view'>('edit');
 
+// Gradients from palette.css's "ОСНОВНАЯ ПАЛИТРА" section — the one the
+// palette itself labels as meant for diagrams/flowcharts/semantic highlights.
+// This is what nodes actually render with until a user picks a custom color.
+export const DEFAULT_NODE_BACKGROUND: Record<NodeKind, string> = {
+  task: 'var(--gradient-blue)',
+  startEvent: 'var(--gradient-green)',
+  intermediateEvent: 'var(--gradient-orange)',
+  endEvent: 'var(--gradient-red)',
+  exclusiveGateway: 'var(--gradient-purple)',
+  parallelGateway: 'var(--gradient-cyan)',
+  inclusiveGateway: 'var(--gradient-olive)',
+};
+
+// The color picker only understands flat hex, so it needs a solid fallback
+// distinct from the gradient rendered on canvas — the gradient's start color.
 export const DEFAULT_NODE_COLOR: Record<NodeKind, string> = {
-  task: '#eef2ff',
-  startEvent: '#f0fdf4',
-  intermediateEvent: '#fefce8',
-  endEvent: '#fef2f2',
-  exclusiveGateway: '#fff7ed',
-  parallelGateway: '#faf5ff',
-  inclusiveGateway: '#f0fdfa',
+  task: '#0790CB',
+  startEvent: '#2CB587',
+  intermediateEvent: '#FF8E58',
+  endEvent: '#E13042',
+  exclusiveGateway: '#A12C7E',
+  parallelGateway: '#1BD3F7',
+  inclusiveGateway: '#BBBD39',
 };
 
 const HANDLE_POSITIONS: { id: string; position: Position }[] = [
@@ -76,7 +91,7 @@ function ShapeResizer({
 
 function TaskNode({ id, data, selected }: NodeProps<ShapeNode>) {
   return (
-    <div className="diagram-node diagram-node--task" style={{ background: data.color ?? DEFAULT_NODE_COLOR.task }}>
+    <div className="diagram-node diagram-node--task" style={{ background: data.color ?? DEFAULT_NODE_BACKGROUND.task }}>
       <ShapeResizer selected={selected} minWidth={70} minHeight={32} keepAspectRatio={false} />
       <ShapeHandles />
       <SubProcessBadge id={id} />
@@ -96,7 +111,7 @@ function EventNode({ id, data, type, selected }: NodeProps<ShapeNode>) {
   return (
     <div
       className={`diagram-node diagram-node--circle ${EVENT_BORDER_CLASS[kind]}`}
-      style={{ background: data.color ?? DEFAULT_NODE_COLOR[kind] }}
+      style={{ background: data.color ?? DEFAULT_NODE_BACKGROUND[kind] }}
     >
       <ShapeResizer selected={selected} minWidth={24} minHeight={24} />
       <ShapeHandles />
@@ -130,7 +145,7 @@ function GatewayNode({ id, data, type, selected }: NodeProps<ShapeNode>) {
         of it, since clip-path would otherwise cut off anything of theirs
         that renders outside the diamond outline.
       */}
-      <div className="diagram-node--diamond-bg" style={{ background: data.color ?? DEFAULT_NODE_COLOR[kind] }} />
+      <div className="diagram-node--diamond-bg" style={{ background: data.color ?? DEFAULT_NODE_BACKGROUND[kind] }} />
       <ShapeHandles />
       <SubProcessBadge id={id} />
       <span className="diagram-node__icon">{GATEWAY_ICON[kind]}</span>