#945 Setting up stylesheet, classes and colors

src/diagrams/state/shapes.js

@@ -41,6 +41,7 @@ export const drawSimpleState = (g, stateDef) => {
     .attr('x', 2 * getConfig().state.padding)
     .attr('y', getConfig().state.textHeight + 2 * getConfig().state.padding)
     .attr('font-size', getConfig().state.fontSize)
+    .attr('class', 'state-title')
     .text(stateDef.id);
 
   const classBox = state.node().getBBox();
@@ -90,7 +91,6 @@ export const drawDescrState = (g, stateDef) => {
         getConfig().state.dividerMargin +
         getConfig().state.textHeight
     )
-    .attr('fill', 'white')
     .attr('class', 'state-description');
 
   let isFirst = true;
@@ -163,7 +163,7 @@ export const addIdAndBox = (g, stateDef) => {
   g.insert('rect', ':first-child')
     .attr('x', graphBox.x)
     .attr('y', lineY)
-    .attr('style', 'fill: white; border-bottom: 1px')
+    .attr('class', 'composit')
     .attr('width', graphBox.width + getConfig().state.padding)
     .attr(
       'height',
@@ -293,7 +293,7 @@ const _drawLongText = (_text, x, y, g) => {
  */
 
 export const drawNote = (text, g) => {
-  g.attr('class', 'note');
+  g.attr('class', 'state-note');
   const note = g
     .append('rect')
     .attr('x', 0)
@@ -327,7 +327,7 @@ export const drawState = function(elem, stateDef, graph, doc) {
   const g = elem
     .append('g')
     .attr('id', id)
-    .attr('class', 'classGroup');
+    .attr('class', 'stateGroup');
 
   if (stateDef.type === 'start') drawStartState(g);
   if (stateDef.type === 'end') drawEndState(g);
@@ -382,7 +382,7 @@ export const drawEdge = function(elem, path, relation) {
     .append('path')
     .attr('d', lineFunction(lineData))
     .attr('id', 'edge' + edgeCount)
-    .attr('class', 'relation');
+    .attr('class', 'transition');
   let url = '';
   if (getConfig().state.arrowMarkerAbsolute) {
     url =
@@ -401,7 +401,7 @@ export const drawEdge = function(elem, path, relation) {
   );
 
   if (typeof relation.title !== 'undefined') {
-    const g = elem.append('g').attr('class', 'classLabel');
+    const g = elem.append('g').attr('class', 'stateLabel');
     const label = g
       .append('text')
       .attr('class', 'label')

src/diagrams/state/stateRenderer.js

@@ -166,7 +166,7 @@ const renderDoc = (doc, diagram, parentId) => {
       let sub = diagram
         .append('g')
         .attr('id', stateDef.id)
-        .attr('class', 'classGroup');
+        .attr('class', 'stateGroup');
       node = renderDoc(stateDef.doc, sub, stateDef.id);
 
       if (first) {

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