From 4720ede442e5ebee0dbd6ba7082f74fe765a5426 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Sun, 9 May 2021 10:56:39 +0200
Subject: [PATCH] #2045 name change of state diagram specific theme variable

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

diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index 7429c1f85..2e9434353 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; */
         }
@@ -28,7 +28,7 @@
     <div class="flex">
 
 <div class="mermaid" style="width: 100%; height: 20%;">
-    %%{int:{
+    %%{init:{
 "themeVariables": {
     "transitionColor":"red",
     "labelColor":"yellow",
@@ -37,7 +37,7 @@
     "compositeBackground":"pink",
     "altBackground":"purple",
     "clusterTitleBackground":"blue",
-    "compositeBorder":"red",
+    "stateBorder":"red",
     "noteBorderColor":"#522",
     "noteBkgColor":"#522",
     "noteTextColor":"white"
@@ -52,7 +52,7 @@ stateDiagram-v2
       AnotherState --> YetANotherState:a label
     }
     --
-    SSTAte
+    MyState
   }
   note left of CompositeState
     Important information! You can write
diff --git a/src/diagrams/state/styles.js b/src/diagrams/state/styles.js
index 764af6efc..6745bfda5 100644
--- a/src/diagrams/state/styles.js
+++ b/src/diagrams/state/styles.js
@@ -111,7 +111,7 @@ g.stateGroup line {
 }
 
 .statediagram-cluster rect {
-  fill: ${options.clusterTitleBackground};
+  fill: ${options.compositeTitleBackground};
   stroke: ${options.stateBorder || options.nodeBorder};
   stroke-width: 1px;
 }
diff --git a/src/themes/theme-base.js b/src/themes/theme-base.js
index 5bb6316da..0ae4fbedd 100644
--- a/src/themes/theme-base.js
+++ b/src/themes/theme-base.js
@@ -119,7 +119,7 @@ class Theme {
     this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
     this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
     this.altBackground = this.altBackground || this.tertiaryColor;
-    this.clusterTitleBackground = this.clusterTitleBackground || this.mainBkg;
+    this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
     this.compositeBorder = this.compositeBorder || this.nodeBorder;
 
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
diff --git a/src/themes/theme-dark.js b/src/themes/theme-dark.js
index 2150022a2..b31544418 100644
--- a/src/themes/theme-dark.js
+++ b/src/themes/theme-dark.js
@@ -134,7 +134,7 @@ class Theme {
     this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
     this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
     this.altBackground = this.altBackground || '#555';
-    this.clusterTitleBackground = this.clusterTitleBackground || this.mainBkg;
+    this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
     this.compositeBorder = this.compositeBorder || this.nodeBorder;
 
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
diff --git a/src/themes/theme-default.js b/src/themes/theme-default.js
index 48fcf8eb7..3041aaff5 100644
--- a/src/themes/theme-default.js
+++ b/src/themes/theme-default.js
@@ -147,7 +147,7 @@ class Theme {
     this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
     this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
     this.altBackground = this.altBackground || '#f0f0f0';
-    this.clusterTitleBackground = this.clusterTitleBackground || this.mainBkg;
+    this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
     this.compositeBorder = this.compositeBorder || this.nodeBorder;
 
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
diff --git a/src/themes/theme-forest.js b/src/themes/theme-forest.js
index 267e004e9..10d05dc18 100644
--- a/src/themes/theme-forest.js
+++ b/src/themes/theme-forest.js
@@ -117,7 +117,7 @@ class Theme {
     this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
     this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
     this.altBackground = this.altBackground || '#f0f0f0';
-    this.clusterTitleBackground = this.clusterTitleBackground || this.mainBkg;
+    this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
     this.compositeBorder = this.compositeBorder || this.nodeBorder;
 
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
diff --git a/src/themes/theme-neutral.js b/src/themes/theme-neutral.js
index ddd89abe5..fb5923d7d 100644
--- a/src/themes/theme-neutral.js
+++ b/src/themes/theme-neutral.js
@@ -154,7 +154,7 @@ class Theme {
     this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
     this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
     this.altBackground = this.altBackground || '#f4f4f4';
-    this.clusterTitleBackground = this.clusterTitleBackground || this.mainBkg;
+    this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
     this.stateBorder = this.stateBorder || '#000';
 
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;