Приводил к стилу consta UI

src/nodes.tsx

@@ -35,6 +35,16 @@ export const DEFAULT_NODE_COLOR: Record<NodeKind, string> = {
   inclusiveGateway: '#BBBD39',
 };
 
+export const DEFAULT_TASK_BORDER_RADIUS = 6;
+
+// Text on the colored shape body (task label, gateway icon) needs a light
+// default; the caption below events/gateways sits on the plain canvas
+// background instead and needs a dark one. Both are overridable via the
+// same `data.textColor`/`data.fontSize`.
+export const DEFAULT_NODE_TEXT_COLOR = '#FFFFFF';
+export const DEFAULT_CAPTION_TEXT_COLOR = '#525A64';
+export const DEFAULT_NODE_FONT_SIZE = 12;
+
 const HANDLE_POSITIONS: { id: string; position: Position }[] = [
   { id: 'top', position: Position.Top },
   { id: 'right', position: Position.Right },
@@ -91,32 +101,42 @@ function ShapeResizer({
 
 function TaskNode({ id, data, selected }: NodeProps<ShapeNode>) {
   return (
-    <div className="diagram-node diagram-node--task" style={{ background: data.color ?? DEFAULT_NODE_BACKGROUND.task }}>
+    <div
+      className="diagram-node diagram-node--task"
+      style={{
+        background: data.color ?? DEFAULT_NODE_BACKGROUND.task,
+        borderRadius: data.borderRadius ?? DEFAULT_TASK_BORDER_RADIUS,
+      }}
+    >
       <ShapeResizer selected={selected} minWidth={70} minHeight={32} keepAspectRatio={false} />
       <ShapeHandles />
       <SubProcessBadge id={id} />
-      <span className="diagram-node__label">{data.label}</span>
+      <span
+        className="diagram-node__label"
+        style={{ color: data.textColor ?? DEFAULT_NODE_TEXT_COLOR, fontSize: data.fontSize ?? DEFAULT_NODE_FONT_SIZE }}
+      >
+        {data.label}
+      </span>
     </div>
   );
 }
 
-const EVENT_BORDER_CLASS: Record<'startEvent' | 'intermediateEvent' | 'endEvent', string> = {
-  startEvent: 'diagram-node--startEvent',
-  intermediateEvent: 'diagram-node--intermediateEvent',
-  endEvent: 'diagram-node--endEvent',
-};
-
 function EventNode({ id, data, type, selected }: NodeProps<ShapeNode>) {
   const kind = (type as 'startEvent' | 'intermediateEvent' | 'endEvent') ?? 'startEvent';
   return (
     <div
-      className={`diagram-node diagram-node--circle ${EVENT_BORDER_CLASS[kind]}`}
+      className="diagram-node diagram-node--circle"
       style={{ background: data.color ?? DEFAULT_NODE_BACKGROUND[kind] }}
     >
       <ShapeResizer selected={selected} minWidth={24} minHeight={24} />
       <ShapeHandles />
       <SubProcessBadge id={id} />
-      <span className="diagram-node__caption">{data.label}</span>
+      <span
+        className="diagram-node__caption"
+        style={{ color: data.textColor ?? DEFAULT_CAPTION_TEXT_COLOR, fontSize: data.fontSize ?? DEFAULT_NODE_FONT_SIZE }}
+      >
+        {data.label}
+      </span>
     </div>
   );
 }
@@ -149,7 +169,12 @@ function GatewayNode({ id, data, type, selected }: NodeProps<ShapeNode>) {
       <ShapeHandles />
       <SubProcessBadge id={id} />
       <span className="diagram-node__icon">{GATEWAY_ICON[kind]}</span>
-      <span className="diagram-node__caption">{data.label}</span>
+      <span
+        className="diagram-node__caption"
+        style={{ color: data.textColor ?? DEFAULT_CAPTION_TEXT_COLOR, fontSize: data.fontSize ?? DEFAULT_NODE_FONT_SIZE }}
+      >
+        {data.label}
+      </span>
     </div>
   );
 }