#945 Setting up stylesheet, classes and colors

src/themes/dark/index.scss

@@ -56,4 +56,7 @@ $critBkgColor: #E83737;
 $taskTextDarkColor: $darkTextColor;
 $todayLineColor: #DB5757;
 
+/* state colors */
+$labelColor: black;
+
 @import '../mermaid';

src/themes/default/index.scss

@@ -54,4 +54,7 @@ $critBorderColor: #ff8888;
 $critBkgColor: red;
 $todayLineColor: red;
 
+/* state colors */
+$labelColor: black;
+
 @import '../mermaid';

src/themes/forest/index.scss

@@ -55,4 +55,7 @@ $critBorderColor: #ff8888;
 $critBkgColor: red;
 $todayLineColor: red;
 
+/* state colors */
+$labelColor: black;
+
 @import '../mermaid';

src/themes/mermaid.scss

@@ -4,3 +4,9 @@
 @import 'class';
 @import 'git';
 @import 'pie';
+@import 'state';
+
+.composit {
+  fill: white;
+  border-bottom: 1px
+}

src/themes/neutral/index.scss

@@ -59,4 +59,7 @@ $critBkgColor: $critical;
 $critBorderColor: darken($critBkgColor, 10%);
 $todayLineColor: $critBkgColor;
 
+/* state colors */
+$labelColor: black;
+
 @import '../mermaid';

src/themes/state.scss

@@ -0,0 +1,56 @@
+g.stateGroup text {
+  fill: $nodeBorder;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 10px;
+
+}
+g.stateGroup .state-title {
+  font-weight: bolder;
+  fill: $labelColor;
+}
+
+g.stateGroup rect {
+  fill: $nodeBkg;
+  stroke: $nodeBorder;
+}
+
+g.stateGroup line {
+  stroke: $nodeBorder;
+  stroke-width: 1;
+}
+
+.transition {
+  stroke: $nodeBorder;
+  stroke-width: 1;
+  fill: none;
+}
+
+.stateGroup .composit {
+  fill: white;
+  border-bottom: 1px
+}
+
+.state-note {
+  stroke: $noteBorderColor;
+  fill: $noteBkgColor;
+
+  text {
+    fill: black;
+    stroke: none;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-size: 10px;
+  }
+}
+
+.stateLabel .box {
+  stroke: none;
+  stroke-width: 0;
+  fill: $nodeBkg;
+  opacity: 0.5;
+}
+
+.stateLabel .label {
+  fill: $labelColor;
+  font-size: 10px;
+}