From 96c8e544ec30273de9ff3395db4cca781cc36623 Mon Sep 17 00:00:00 2001
From: Per Brolin <per@mermaidchart.com>
Date: Wed, 19 Jun 2024 11:52:28 +0200
Subject: [PATCH] MC-1765: Added specific end-state class

---
 docs/neo-style-to-do                          |  3 ++-
 packages/mermaid/src/diagrams/state/styles.js | 11 +++++++++--
 packages/mermaid/src/styles.ts                |  6 +-----
 packages/mermaid/src/themes/theme-neo.js      |  8 ++++----
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/docs/neo-style-to-do b/docs/neo-style-to-do
index c192ffc4d..b7390d408 100644
--- a/docs/neo-style-to-do
+++ b/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
diff --git a/packages/mermaid/src/diagrams/state/styles.js b/packages/mermaid/src/diagrams/state/styles.js
index a9b6cc088..fa21bbaae 100644
--- a/packages/mermaid/src/diagrams/state/styles.js
+++ b/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 {
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index 34a5d5b13..18e7fa1e5 100644
--- a/packages/mermaid/src/styles.ts
+++ b/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;
   }
 
diff --git a/packages/mermaid/src/themes/theme-neo.js b/packages/mermaid/src/themes/theme-neo.js
index 0ea15c5bc..85f3e6253 100644
--- a/packages/mermaid/src/themes/theme-neo.js
+++ b/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';
   }