#2045 name change of state diagram specific theme variable

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

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;
 }

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;

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;

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;

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;

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;