From db2295db2417015006613e2d2f0a0828ebc6d342 Mon Sep 17 00:00:00 2001
From: omkarht <omkar@mermaidchart.com>
Date: Mon, 27 Jan 2025 20:10:50 +0530
Subject: [PATCH] fixed issues of padding and border radius and border styling

---
 .../rendering-elements/shapes/roundedRect.ts               | 7 +++++--
 packages/mermaid/src/themes/theme-default.js               | 2 +-
 packages/mermaid/src/themes/theme-redux.js                 | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
index 6c09b049f..b05e4aa07 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
@@ -1,11 +1,14 @@
 import type { Node, RectOptions } from '../../types.js';
 import type { D3Selection } from '../../../types.js';
 import { drawRect } from './drawRect.js';
+import { getConfig } from '../../../config.js';
 
 export async function roundedRect<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
   node: Node
 ) {
+  const { themeVariables } = getConfig();
+  const { radius } = themeVariables;
   const nodePadding = node.padding ?? 0;
   let labelPaddingX = 0;
   let labelPaddingY = 0;
@@ -16,10 +19,10 @@ export async function roundedRect<T extends SVGGraphicsElement>(
     case 'neo':
       labelPaddingX = 16;
       labelPaddingY = 12;
-      rx = ry = 12;
+      rx = ry = radius;
       break;
     default:
-      labelPaddingX = nodePadding * 2;
+      labelPaddingX = nodePadding;
       labelPaddingY = nodePadding;
       rx = ry = 5;
   }
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index 1fc428a54..6e2cb62ff 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -29,7 +29,7 @@ class Theme {
     this.mainBkg = '#ECECFF';
     this.secondBkg = '#ffffde';
     this.lineColor = '#333333';
-    this.border1 = '#9370DB';
+    this.border1 = '#B8B8FF';
     this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
     this.border2 = '#aaaa33';
     this.arrowheadColor = '#333333';
diff --git a/packages/mermaid/src/themes/theme-redux.js b/packages/mermaid/src/themes/theme-redux.js
index fad52f5eb..28ef165a1 100644
--- a/packages/mermaid/src/themes/theme-redux.js
+++ b/packages/mermaid/src/themes/theme-redux.js
@@ -21,7 +21,7 @@ class Theme {
     this.noteTextColor = '#28253D';
 
     this.THEME_COLOR_LIMIT = 12;
-    this.radius = 3;
+    this.radius = 12;
     this.strokeWidth = 2;
 
     this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);