From 544d17db95be7d1f9b0c4a2a1095c83228e8c83a Mon Sep 17 00:00:00 2001
From: Per Brolin <per@mermaidchart.com>
Date: Tue, 4 Jun 2024 15:11:13 +0200
Subject: [PATCH] WIP:Updated edge-arrow and correct styling pars from figma

---
 cypress/platform/per.html                                 | 8 ++++----
 packages/mermaid/src/diagrams/state/styles.js             | 8 +++++---
 .../src/rendering-util/rendering-elements/markers.js      | 2 +-
 packages/mermaid/src/styles.ts                            | 2 +-
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/cypress/platform/per.html b/cypress/platform/per.html
index 2cd81c070..74487e762 100644
--- a/cypress/platform/per.html
+++ b/cypress/platform/per.html
@@ -123,11 +123,11 @@ stateDiagram-v2
         flowchart: { titleTopMargin: 10 },
         // fontFamily: 'Caveat',
         // fontFamily: 'Kalam',
-        fontFamily: 'courier',
+        fontFamily: 'arial',
         sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
+          actorFontFamily: 'arial',
+          noteFontFamily: 'arial',
+          messageFontFamily: 'arial',
         },
         fontSize: 12,
         logLevel: 0,
diff --git a/packages/mermaid/src/diagrams/state/styles.js b/packages/mermaid/src/diagrams/state/styles.js
index 7aa280afa..595f6b7d4 100644
--- a/packages/mermaid/src/diagrams/state/styles.js
+++ b/packages/mermaid/src/diagrams/state/styles.js
@@ -127,8 +127,9 @@ g.stateGroup line {
 }
 
 .statediagram-cluster rect.outer {
-  rx: 5px;
-  ry: 5px;
+  rx: 2px;
+  ry: 2px;
+  filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
 }
 .statediagram-state .divider {
   stroke: ${options.stateBorder || options.nodeBorder};
@@ -143,6 +144,7 @@ g.stateGroup line {
 }
 .statediagram-cluster.statediagram-cluster-alt .inner {
   fill: ${options.altBackground ? options.altBackground : '#efefef'};
+
 }
 
 .statediagram-cluster .inner {
@@ -156,7 +158,7 @@ g.stateGroup line {
 }
 
 .state-shadow {
-  filter: drop-shadow( 0px 1px 1px rgba(0,0,0,.7) );
+  filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
 }
 
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/markers.js b/packages/mermaid/src/rendering-util/rendering-elements/markers.js
index da733e325..893f1157b 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/markers.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/markers.js
@@ -289,7 +289,7 @@ const barb = (elem, type, id) => {
     .attr('markerUnits', 'strokeWidth')
     .attr('orient', 'auto')
     .append('path')
-    .attr('d', 'M 19,7 L13,13 L15,7 L13,1 Z');
+    .attr('d', 'M 19,7 L11,14 L13,7 L11,0 Z');
 };
 
 // TODO rename the class diagram markers to something shape descriptive and semantic free
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index b72fc0a55..d106971ad 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -70,7 +70,7 @@ const getStyles = (
 
   ${diagramStyles}
   .node .neo-node {
-    stroke: red;
+    stroke: ${options.nodeBorder};
   }
   ${userStyles}
 `;