Added attribute data-look to composite and nested states

cypress/platform/per.html

@@ -90,24 +90,23 @@ stateDiagram-v2
     >
 
     <pre id="diagram" class="mermaid">
-      stateDiagram
-       StateA
-
+      stateDiagram-v2
+      [*] --> First
+      state First {
+          [*] --> second
+          second --> [*]
+      }
 
 
     </pre>
 
     <pre id="diagram" class="mermaid2">
-      stateDiagram
-        direction LR
-        [*] --> A
-        A --> B
-        B --> C
-        state B {
-          direction LR
-          a --> b
-        }
-        B --> D
+      flowchart LR
+        A[Start] --Some text--> B(Continue)
+        B --> C{Evaluate}
+        C -- One --> D[Option 1]
+        C -- Two --> E[Option 2]
+        C -- Three --> F[fa:fa-car Option 3]
     </pre>
 
     <script type="module">
@@ -118,7 +117,7 @@ stateDiagram-v2
         console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'neo',
+        theme: 'forest',
         handdrawnSeed: 12,
         look: 'neo',
         //layout: 'elk',

cypress/platform/state-refactor-neo-themes.html

@@ -91,8 +91,9 @@
   <table>
     <tr>
       <th></th> <!-- Placeholder for the top left corner -->
-      <th>neo-default-light</th>
-      <th>neo-default-dark</th>
+      <th>default-light</th>
+      <th>neo-neo-light</th>
+      <th>neo-neo-dark</th>
       <th>neo-forest-light</th>
       <th>neo-base-light</th>
     </tr>
@@ -108,6 +109,13 @@
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
+%%{init: {"look": "classic", "theme": "default"} }%%
+stateDiagram-v2
+    stateId
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram1" class="mermaid">
 %%{init: {"look": "neo", "theme": "neo"} }%%
 stateDiagram-v2
     stateId
@@ -431,7 +439,6 @@ stateDiagram-v2
         <div class="content">
           <div class="pre-scrollable">
             <pre>
-%%{init: {"look": "neo", "theme": "neo"} }%%
       [*] --> First
     state First {
         [*] --> second
@@ -444,7 +451,7 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-
+%%{init: {"look": "neo", "theme": "neo"} }%%
     stateDiagram-v2
        [*] --> First
     state First {

docs/neo-style-to-do

@@ -1,5 +1,8 @@
 1. Paddings of node labels for neo and classic does not differ, which it should. Status: Fixed
-2. When layout is set to "elk" and look is "neo", the drop shadow is not present
-3. Drop-shadows are not present for flow-charts, even if look is "neo"
-4. When look is "neo" and theme is "forest", the border of nodes is visible, which should not be the case
-5. When look is "neo" and "theme" is "neo", the background color shall be white
+2. When layout is set to "elk" and look is "neo", the drop shadow is not present. Status: Fixed
+3. Drop-shadows are not present for flow-charts, even if look is "neo". Status: Fixed
+4. When look is "neo" and theme is "forest", the border of nodes is visible, which should not be the case: Status: Fixed
+5. When look is "neo" and "theme" is "neo", the background color shall be white. Status: Fixed
+6. Composite states contains borders in neo. Status: Fixed
+7. Nested states contains borders in neo. Status: Fixed
+8. The font-size of node labels seems a bit off:

packages/mermaid/src/rendering-util/rendering-elements/clusters.js

@@ -182,7 +182,8 @@ const roundedWithTitle = (parent, node) => {
     .attr('class', node.cssClasses)
     .attr('id', node.id)
     .attr('data-et', 'node')
-    .attr('data-id', node.id);
+    .attr('data-id', node.id)
+    .attr('data-look', node.look);
 
   // add the rect
   const outerRectG = shapeSvg.insert('g', ':first-child');
@@ -269,7 +270,8 @@ const roundedWithTitle = (parent, node) => {
       .attr('x', x)
       .attr('y', y)
       .attr('width', width)
-      .attr('height', node.height + padding);
+      .attr('height', node.height + padding)
+      .attr('data-look', node.look);
     innerRect
       .attr('class', 'inner')
       .attr('x', x)

packages/mermaid/src/styles.ts

@@ -77,6 +77,13 @@ const getStyles = (
     stroke: none;
     filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
   }
+
+  [data-look="neo"].statediagram-cluster rect {
+    fill: ${options.compositeTitleBackground};
+    stroke: none;
+    stroke-width: 1px;
+  }
+
   ${userStyles}
 `;
 };

packages/mermaid/src/themes/theme-neo.js

@@ -15,8 +15,7 @@ class Theme {
     this.background = '#ffffff';
 
     this.primaryColor = '#cccccc';
-    //this.mainBkg = '#ffffff';
-    this.mainBkg = '#ecedfe';
+    this.mainBkg = '#ffffff';
 
     this.noteBkgColor = '#fff5ad';
     this.noteTextColor = '#333';