From 529824e2b30eccd274e9c6dc020d83e5c2b82d50 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Sun, 23 May 2021 08:12:32 +0200
Subject: [PATCH] #2088 Add the possibility to theme forks and joins using
 theme variables

---
 cypress/platform/knsv.html   |  6 ++++--
 src/diagrams/state/styles.js | 10 +++++-----
 src/themes/theme-base.js     |  1 +
 src/themes/theme-dark.js     |  1 +
 src/themes/theme-default.js  |  1 +
 src/themes/theme-forest.js   |  1 +
 src/themes/theme-neutral.js  |  1 +
 7 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index cc996067f..de02d0f10 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -10,7 +10,7 @@
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        /* background:#333; */
+        background:#333;
         font-family: 'Arial';
         /* font-size: 18px !important; */
         }
@@ -66,7 +66,9 @@ stateDiagram-v2
 
 </div>
 <div class="mermaid" style="width: 100%; height: 20%;">
-    %%{init:{"theme":"neutral", "themeVariables": {"stateBkg ":"red", "innerEndBackground":"red"}}}%%
+    %%{init:{"theme":"neutral", "themeVariables": {
+            "specialStateColor":"red", "innerEndBackground":"lightgreen"
+    }}}%%
     stateDiagram-v2
     state fork [[fork]]
     state join [[join]]
diff --git a/src/diagrams/state/styles.js b/src/diagrams/state/styles.js
index 4f42025cd..ad2647037 100644
--- a/src/diagrams/state/styles.js
+++ b/src/diagrams/state/styles.js
@@ -82,17 +82,17 @@ g.stateGroup line {
 }
 
 .node circle.state-start {
-  fill: ${options.stateBorder || options.lineColor};
-  stroke: ${options.stateBorder || options.lineColor};
+  fill: ${options.specialStateColor};
+  stroke: ${options.specialStateColor};
 }
 
 .node .fork-join {
-  fill: ${options.stateBorder};
-  stroke: ${options.stateBorder};
+  fill: ${options.specialStateColor};
+  stroke: ${options.specialStateColor};
 }
 
 .node circle.state-end {
-  fill: ${options.innerEndBackground || options.primaryBorderColor};
+  fill: ${options.innerEndBackground};
   stroke: ${options.background};
   stroke-width: 1.5
 }
diff --git a/src/themes/theme-base.js b/src/themes/theme-base.js
index 0241b8f61..2eb8b3952 100644
--- a/src/themes/theme-base.js
+++ b/src/themes/theme-base.js
@@ -125,6 +125,7 @@ class Theme {
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
     this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
     this.transitionColor = this.transitionColor || this.lineColor;
+    this.specialStateColor = this.lineColor;
 
     /* class */
     this.classText = this.classText || this.textColor;
diff --git a/src/themes/theme-dark.js b/src/themes/theme-dark.js
index fcc9db92b..14877c477 100644
--- a/src/themes/theme-dark.js
+++ b/src/themes/theme-dark.js
@@ -137,6 +137,7 @@ class Theme {
     this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
     this.compositeBorder = this.compositeBorder || this.nodeBorder;
     this.innerEndBackground = this.primaryBorderColor;
+    this.specialStateColor = this.lineColor;
 
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
     this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
diff --git a/src/themes/theme-default.js b/src/themes/theme-default.js
index 05122eb6e..2aa890d49 100644
--- a/src/themes/theme-default.js
+++ b/src/themes/theme-default.js
@@ -150,6 +150,7 @@ class Theme {
     this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
     this.compositeBorder = this.compositeBorder || this.nodeBorder;
     this.innerEndBackground = this.primaryBorderColor;
+    this.specialStateColor = this.lineColor;
 
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
     this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
diff --git a/src/themes/theme-forest.js b/src/themes/theme-forest.js
index f1f9bf27c..eedffd234 100644
--- a/src/themes/theme-forest.js
+++ b/src/themes/theme-forest.js
@@ -120,6 +120,7 @@ class Theme {
     this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
     this.compositeBorder = this.compositeBorder || this.nodeBorder;
     this.innerEndBackground = this.primaryBorderColor;
+    this.specialStateColor = this.lineColor;
 
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
     this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
diff --git a/src/themes/theme-neutral.js b/src/themes/theme-neutral.js
index f528bac55..f2b670a8a 100644
--- a/src/themes/theme-neutral.js
+++ b/src/themes/theme-neutral.js
@@ -157,6 +157,7 @@ class Theme {
     this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
     this.stateBorder = this.stateBorder || '#000';
     this.innerEndBackground = this.primaryBorderColor;
+    this.specialStateColor = this.lineColor;
 
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
     this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;