MC-1765: Added specific end-state class

docs/neo-style-to-do

@@ -11,5 +11,6 @@
 11. Gradient: Fix proper color from blue to red. Do last (render.ts)
 12. Rx,Ry of rects in neo is not applied correct on rects except composite states
 
-13. Stop state shall be filled and just outer circle shall have
+13. Stop state shall be filled and no drop-shadow on inner circle: Status: Fixed
 14. No curve on line under title in composite states: Status fixed
+15. When this.useGradient = false the color of the composite states are not correct

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

@@ -103,12 +103,19 @@ g.stateGroup line {
 .node circle.state-end {
   fill:  ${options.stateBkg || options.mainBkg};
   stroke: ${options.background};
-  stroke-width: 1.5
+  stroke-width: 1.5;
 }
+
+[data-look="neo"].node circle.state-end {
+  filter: none;
+  stroke:${options.background};
+  fill: ${options.lineColor};
+}
+
 .end-state-inner {
   fill: ${options.compositeBackground || options.background};
   stroke: ${options.background};
-  stroke-width: 1.5
+  stroke-width: 1.5;
 }
 
 .node rect {

packages/mermaid/src/styles.ts

@@ -81,27 +81,23 @@ const getStyles = (
   }
 
 
-  [data-look="neo"].node rect,  [data-look="neo"].node circle, [data-look="neo"].node polygon , [data-look="neo"].node path {
+  [data-look="neo"].node rect,  [data-look="neo"].node polygon , [data-look="neo"].node path {
     stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
     filter: ${options.dropShadow};
   }
 
   [data-look="neo"].node circle{
-    stroke: $(options.nodeBorder);
     stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
-
     filter: ${options.dropShadow};
   }
 
   [data-look="neo"].node circle .state-start{
     fill: #000000;
-
   }
 
   [data-look="neo"].statediagram-cluster rect {
     fill: ${options.compositeTitleBackground};
     stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
-    //stroke: none;
     stroke-width: 1px;
   }
 

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

@@ -28,11 +28,11 @@ class Theme {
     this.fontSize = '10px';
 
     // Neo-specific
-    this.nodeBorder = 'none';
-    this.stateBorder = 'none';
+    this.nodeBorder = '#000000';
+    this.stateBorder = '#000000';
     this.useGradient = true;
-    this.gradientStart = '#eb0042';
-    this.gradientStop = '#0042eb';
+    this.gradientStart = '#0042eb';
+    this.gradientStop = '#eb0042';
     this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))';
     this.tertiaryColor = '#ffffff';
   }