From a1cd398e4d358a37652618b105e7720161650aeb Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Thu, 6 May 2021 07:50:24 +0200
Subject: [PATCH]

---
 cypress/platform/knsv.html   | 31 +++++++++++++++++++++++++++----
 src/diagrams/state/styles.js | 30 +++++++++++++++++++-----------
 src/themes/theme-base.js     | 10 +++++++++-
 3 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index cbef7c3a0..5d880b33a 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -68,13 +68,36 @@ stateDiagram-v2
     Finished --> [*]
       </div>
 <div class="mermaid" style="width: 100%; height: 20%;">
-stateDiagram-v2
-state "Long state name" as NotShooting {
-  a-->b
+    %%{init:{
+"themeVariables": {
+    "transitionColor":"red",
+    "labelColor":"yellow",
+    "transitionLabelColor":"blue",
+    "stateBkg":"green",
+    "compositeBackground":"pink",
+    "altBackground":"purple",
+    "clusterTitleBackground":"blue",
+    "compositeBorder":"red"
+}}}%%
+stateDiagram
+    state CompositeState {
+        state AnotherCompositeState {
+        AnotherState --> YetANotherState:a label
+    }
 }
 
 </div>
       <div class="mermaid2" style="width: 100%; height: 20%;">
+    %%{init:{
+"themeVariables": {
+    "transitionColor":"red",
+    "labelColor":"yellow",
+    "transitionLabelColor":"blue",
+    "stateBkg":"green",
+    "compositeBackground":"pink",
+    "altBackground":"purple",
+    "clusterTitleBackground":"blue"
+}}}%%
 stateDiagram-v2
     [*] --> Off
     Off --> On
@@ -214,7 +237,7 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
           // console.error('Mermaid error: ', err);
         };
       mermaid.initialize({
-        theme: 'neutral',
+        theme: 'base',
         arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
diff --git a/src/diagrams/state/styles.js b/src/diagrams/state/styles.js
index b3427857d..47cbaf614 100644
--- a/src/diagrams/state/styles.js
+++ b/src/diagrams/state/styles.js
@@ -1,5 +1,10 @@
 const getStyles = options =>
-  `g.stateGroup text {
+  `
+defs #statediagram-barbEnd {
+    fill: ${options.transitionColor};
+    stroke: ${options.transitionColor};
+  }
+g.stateGroup text {
   fill: ${options.nodeBorder};
   stroke: none;
   font-size: 10px;
@@ -26,7 +31,7 @@ g.stateGroup line {
 }
 
 .transition {
-  stroke: ${options.lineColor};
+  stroke: ${options.transitionColor};
   stroke-width: 1;
   fill: none;
 }
@@ -64,10 +69,10 @@ g.stateGroup line {
   opacity: 0.5;
 }
 .edgeLabel .label text {
-  fill: ${options.tertiaryTextColor};
+  fill: ${options.transitionLabelColor || options.tertiaryTextColor};
 }
 .label div .edgeLabel {
-  color: ${options.tertiaryTextColor};
+  color: ${options.transitionLabelColor || options.tertiaryTextColor};
 }
 
 .stateLabel text {
@@ -86,13 +91,13 @@ g.stateGroup line {
   stroke-width: 1.5
 }
 .end-state-inner {
-  fill: ${options.background};
+  fill: ${options.compositeBackground || options.background};
   // stroke: ${options.background};
   stroke-width: 1.5
 }
 
 .node rect {
-  fill: ${options.mainBkg};
+  fill: ${options.stateBkg || options.mainBkg};
   stroke: ${options.nodeBorder};
   stroke-width: 1px;
 }
@@ -106,13 +111,13 @@ g.stateGroup line {
 }
 
 .statediagram-cluster rect {
-  fill: ${options.mainBkg};
-  stroke: ${options.nodeBorder};
+  fill: ${options.clusterTitleBackground};
+  stroke: ${options.compositeBorder || options.nodeBorder};
   stroke-width: 1px;
 }
 
 .cluster-label, .nodeLabel {
-  color: ${options.textColor};
+  color: ${options.labelColor};
 }
 
 .statediagram-cluster rect.outer {
@@ -128,10 +133,10 @@ g.stateGroup line {
   ry: 5px;
 }
 .statediagram-cluster.statediagram-cluster .inner {
-  fill: ${options.background};
+  fill: ${options.compositeBackground || options.background};
 }
 .statediagram-cluster.statediagram-cluster-alt .inner {
-  fill: #e0e0e0;
+  fill: ${options.altBackground ? options.altBackground : '#efefef'};
 }
 
 .statediagram-cluster .inner {
@@ -174,6 +179,9 @@ g.stateGroup line {
 .statediagram-note .nodeLabel {
   color: ${options.noteTextColor};
 }
+.statediagram .edgeLabel {
+  color: red; // ${options.noteTextColor};
+}
 
 #dependencyStart, #dependencyEnd {
   fill: ${options.lineColor};
diff --git a/src/themes/theme-base.js b/src/themes/theme-base.js
index 8061beb2e..3620cb232 100644
--- a/src/themes/theme-base.js
+++ b/src/themes/theme-base.js
@@ -108,10 +108,18 @@ class Theme {
     this.taskTextClickableColor = this.taskTextClickableColor || '#003163';
 
     /* state colors */
-    this.labelColor = this.labelColor || this.primaryTextColor;
+    this.transitionColor = this.transitionColor || this.lineColor;
+    this.transitionLabelColor = this.labelColor || this.textColor;
+    this.labelColor = this.labelColor || this.textColor || this.primaryTextColor;
+    this.stateBkg = this.stateBkg || this.mainBkg;
+    this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
     this.altBackground = this.altBackground || this.tertiaryColor;
+    this.clusterTitleBackground = this.clusterTitleBackground || this.mainBkg;
+    this.compositeBorder = this.compositeBorder || this.nodeBorder;
+
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
     this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
+    this.transitionColor = this.transitionColor || this.lineColor;
 
     /* class */
     this.classText = this.classText || this.textColor;