Fixed so padding of Node labels is working for neo and other theme

cypress/platform/per.html

@@ -91,12 +91,7 @@ stateDiagram-v2
 
     <pre id="diagram" class="mermaid">
       stateDiagram
-        [*] --> Still
-        Still --> [*]
-        Still --> Moving
-        Moving --> Still
-        Moving --> Crash
-        Crash --> [*]
+       StateID
 
 
 
@@ -126,6 +121,7 @@ stateDiagram-v2
         theme: 'neo',
         handdrawnSeed: 12,
         look: 'neo',
+        //layout: 'elk',
         'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
         // layout: 'dagre',
         // layout: 'elk',

cypress/platform/state-refactor-neo.html

@@ -96,6 +96,7 @@
       <th>Dagre with neo</th>
       <th>ELK</th>
       <th>ELK with rough</th>
+      <th>ELK with neo</th>
     </tr>
     <tr>
       <th class="vertical-header">
@@ -140,6 +141,14 @@ stateDiagram-v2
       <td>
         <pre id="diagram4" class="mermaid">
 %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+stateDiagram-v2
+    stateId
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram4" class="mermaid">
+%%{init: {"look": "neo", "layout": "elk"} }%%
 stateDiagram-v2
     stateId
 
@@ -192,6 +201,13 @@ stateDiagram-v2
       <td>
         <pre id="diagram4" class="mermaid">
 %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+stateDiagram-v2
+    state "This is a state description" as s5
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram4" class="mermaid">
+%%{init: {"look": "neo", "layout": "elk"} }%%
 stateDiagram-v2
     state "This is a state description" as s5
       </pre>
@@ -246,6 +262,14 @@ stateDiagram-v2
       <td>
         <pre id="diagram4" class="mermaid">
 %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+stateDiagram-v2
+    s24 : This is a state description
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram4" class="mermaid">
+%%{init: {"look": "neo", "layout": "elk"} }%%
 stateDiagram-v2
     s24 : This is a state description
 
@@ -315,6 +339,15 @@ stateDiagram-v2
     s71 --> s72
 
 
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram4" class="mermaid">
+%%{init: {"look": "neo", "layout": "elk"} }%%
+stateDiagram-v2
+    s73 --> s74
+
+
       </pre>
       </td>
     </tr>

packages/mermaid/src/diagrams/state/styles.js

@@ -116,6 +116,13 @@ g.stateGroup line {
   stroke: ${options.stateBorder || options.nodeBorder};
   stroke-width: 1px;
 }
+
+.node-rect-neo {
+  fill: ${options.stateBkg || options.mainBkg};
+  stroke: none;
+  stroke-width: 1px;
+}
+
 .node polygon {
   fill: ${options.mainBkg};
   stroke: ${options.stateBorder || options.nodeBorder};;

packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts

@@ -9,8 +9,8 @@ export const roundedRect = async (parent: SVGAElement, node: Node) => {
     rx: node.look === 'neo' ? 3 : 5,
     ry: node.look === 'neo' ? 3 : 5,
 
-    labelPaddingX: node.padding * 2,
-    labelPaddingY: node.padding * 1,
+    labelPaddingX: node.look === 'neo' ? node.padding * 2 : node.padding,
+    labelPaddingY: node.look === 'neo' ? node.padding : node.padding,
     classes: '',
   } as RectOptions;