Merge pull request #32 from Mermaid-Chart/shape-theme-styling-issue-fix

fixed issues of  border radius and styling, label padding

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

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

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