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