#2088 Add the possibility to theme forks and joins using theme variables

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]]

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
 }

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;

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;

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;

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;

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;