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

---
 cypress/platform/knsv.html  | 10 ++++++----
 src/themes/theme-base.js    |  2 +-
 src/themes/theme-dark.js    |  2 +-
 src/themes/theme-default.js |  2 +-
 src/themes/theme-neutral.js |  2 +-
 5 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index de02d0f10..d63d0e67f 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,14 +66,16 @@ stateDiagram-v2
 
 </div>
 <div class="mermaid" style="width: 100%; height: 20%;">
-    %%{init:{"theme":"neutral", "themeVariables": {
-            "specialStateColor":"red", "innerEndBackground":"lightgreen"
+    %%{init:{"theme":"forest", "themeVariables": {
+
     }}}%%
+    %%  "specialStateColor":"red", "innerEndBackground":"lightgreen"
     stateDiagram-v2
     state fork [[fork]]
     state join [[join]]
      [*] --> fork
-     fork --> join
+     fork --> Test
+     Test --> join
      join --> [*]
   </div>
   <script src="./mermaid.js"></script>
diff --git a/src/themes/theme-base.js b/src/themes/theme-base.js
index 2eb8b3952..58d2ac228 100644
--- a/src/themes/theme-base.js
+++ b/src/themes/theme-base.js
@@ -121,7 +121,7 @@ class Theme {
     this.altBackground = this.altBackground || this.tertiaryColor;
     this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
     this.compositeBorder = this.compositeBorder || this.nodeBorder;
-    this.innerEndBackground = this.primaryBorderColor;
+    this.innerEndBackground = this.nodeBorder;
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
     this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
     this.transitionColor = this.transitionColor || this.lineColor;
diff --git a/src/themes/theme-dark.js b/src/themes/theme-dark.js
index 14877c477..2768b5e22 100644
--- a/src/themes/theme-dark.js
+++ b/src/themes/theme-dark.js
@@ -137,7 +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.specialStateColor = '#f4f4f4'; // 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 2aa890d49..20b6bd589 100644
--- a/src/themes/theme-default.js
+++ b/src/themes/theme-default.js
@@ -149,7 +149,7 @@ class Theme {
     this.altBackground = this.altBackground || '#f0f0f0';
     this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
     this.compositeBorder = this.compositeBorder || this.nodeBorder;
-    this.innerEndBackground = this.primaryBorderColor;
+    this.innerEndBackground = this.nodeBorder;
     this.specialStateColor = this.lineColor;
 
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
diff --git a/src/themes/theme-neutral.js b/src/themes/theme-neutral.js
index f2b670a8a..a752ede11 100644
--- a/src/themes/theme-neutral.js
+++ b/src/themes/theme-neutral.js
@@ -157,7 +157,7 @@ class Theme {
     this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
     this.stateBorder = this.stateBorder || '#000';
     this.innerEndBackground = this.primaryBorderColor;
-    this.specialStateColor = this.lineColor;
+    this.specialStateColor = '#222';
 
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
     this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;