#1542 Theme adjustments

src/diagrams/flowchart/styles.js

@@ -1,11 +1,11 @@
 const getStyles = options =>
   `.label {
     font-family: ${options.fontFamily};
-    color: #333;
+    color: ${options.textColor};
   }
 
   .label text {
-    fill: #333;
+    fill: ${options.textColor};
   }
 
   .node rect,

src/diagrams/state/styles.js

@@ -7,7 +7,7 @@ const getStyles = options =>
   font-family: var(--mermaid-font-family);
 }
 g.stateGroup text {
-  fill: ${options.nodeBorder};
+  fill: ${options.textColor};
   stroke: none;
   font-size: 10px;
 
@@ -34,7 +34,7 @@ g.stateGroup line {
 }
 
 .stateGroup .composit {
-  fill: white;
+  fill: ${options.background};
   border-bottom: 1px
 }
 
@@ -93,6 +93,11 @@ g.stateGroup line {
   stroke: ${options.nodeBorder};
   stroke-width: 1px;
 }
+
+.cluster-label, .nodeLabel {
+  color: ${options.textColor};
+}
+
 .statediagram-cluster rect.outer {
   rx: 5px;
   ry: 5px;
@@ -106,7 +111,7 @@ g.stateGroup line {
   ry: 5px;
 }
 .statediagram-cluster.statediagram-cluster .inner {
-  fill: white;
+  fill: ${options.background};
 }
 .statediagram-cluster.statediagram-cluster-alt .inner {
   fill: #e0e0e0;
@@ -137,6 +142,17 @@ g.stateGroup line {
   rx: 0;
   ry: 0;
 }
+.statediagram-note rect {
+  fill: ${options.noteBkgColor};
+  stroke: ${options.noteBorderColor};
+  stroke-width: 1px;
+  rx: 0;
+  ry: 0;
+}
+
+.statediagram-note .nodeLabel {
+  color: ${options.noteTextColor};
+}
 
 #dependencyStart, #dependencyEnd {
   fill: ${options.nodeBorder};

src/themes/theme-dark.js

@@ -2,6 +2,7 @@ import { lighten, rgba } from 'khroma';
 
 class Theme {
   constructor() {
+    this.background = '#333';
     this.mainBkg = '#1f2020';
     this.secondBkg = 'calculated';
     this.mainContrastColor = 'lightgrey';
@@ -12,6 +13,8 @@ class Theme {
     this.arrowheadColor = 'calculated';
     this.fontFamily = '"trebuchet ms", verdana, arial';
     this.fontSize = '16px';
+    this.labelBackground = '#181818';
+    this.textColor = '#ccc';
     /* Flowchart variables */
 
     this.nodeBkg = 'calculated';
@@ -20,7 +23,7 @@ class Theme {
     this.clusterBorder = 'calculated';
     this.defaultLinkColor = 'calculated';
     this.titleColor = '#F9FFFE';
-    this.edgeLabelBackground = '#e8e8e8';
+    this.edgeLabelBackground = 'calculated';
 
     /* Sequence Diagram variables */
 
@@ -43,16 +46,16 @@ class Theme {
 
     /* Gantt chart variables */
 
-    this.sectionBkgColor = rgba(255, 255, 255, 0.3);
+    this.sectionBkgColor = rgba(255, 255, 255, 30);
     this.altSectionBkgColor = 'white';
     this.sectionBkgColor2 = '#EAE8B9';
-    this.taskBorderColor = rgba(255, 255, 255, 0.5);
+    this.taskBorderColor = rgba(255, 255, 255, 50);
     this.taskBkgColor = 'calculated';
     this.taskTextColor = 'calculated';
     this.taskTextLightColor = 'calculated';
     this.taskTextOutsideColor = 'calculated';
     this.taskTextClickableColor = '#003163';
-    this.activeTaskBorderColor = rgba(255, 255, 255, 0.5);
+    this.activeTaskBorderColor = rgba(255, 255, 255, 50);
     this.activeTaskBkgColor = '#81B1DB';
     this.gridColor = 'calculated';
     this.doneTaskBkgColor = 'calculated';
@@ -63,7 +66,7 @@ class Theme {
     this.todayLineColor = '#DB5757';
 
     /* state colors */
-    this.labelColor = 'black';
+    this.labelColor = 'calculated';
 
     this.errorBkgColor = '#a44141';
     this.errorTextColor = '#ddd';
@@ -79,6 +82,7 @@ class Theme {
     this.clusterBkg = this.secondBkg;
     this.clusterBorder = this.border2;
     this.defaultLinkColor = this.lineColor;
+    this.edgeLabelBackground = lighten(this.labelBackground, 25);
 
     /* Sequence Diagram variables */
 
@@ -108,9 +112,14 @@ class Theme {
     this.taskTextDarkColor = this.darkTextColor;
 
     /* state colors */
+    this.labelColor = this.textColor;
   }
   calculate(overrides) {
-    if (typeof overrides !== 'object') return;
+    if (typeof overrides !== 'object') {
+      // Calculate colors form base colors
+      this.updateColors();
+      return;
+    }
 
     const keys = Object.keys(overrides);
 

src/themes/theme-default.js

@@ -3,6 +3,7 @@ import { rgba } from 'khroma';
 class Theme {
   constructor() {
     /* Base variables */
+    this.background = 'white';
     this.mainBkg = '#ECECFF';
     this.secondBkg = '#ffffde';
     this.lineColor = '#333333';
@@ -121,7 +122,11 @@ class Theme {
     /* state colors */
   }
   calculate(overrides) {
-    if (typeof overrides !== 'object') return;
+    if (typeof overrides !== 'object') {
+      // Calculate colors form base colors
+      this.updateColors();
+      return;
+    }
 
     const keys = Object.keys(overrides);
 

src/themes/theme-forest.js

@@ -3,6 +3,7 @@ import { rgba } from 'khroma';
 class Theme {
   constructor() {
     /* Base vales */
+    this.background = 'white';
     this.mainBkg = '#cde498';
     this.secondBkg = '#cdffb2';
     this.lineColor = 'green';
@@ -98,7 +99,11 @@ class Theme {
     /* state colors */
   }
   calculate(overrides) {
-    if (typeof overrides !== 'object') return;
+    if (typeof overrides !== 'object') {
+      // Calculate colors form base colors
+      this.updateColors();
+      return;
+    }
 
     const keys = Object.keys(overrides);
 

src/themes/theme-neutral.js

@@ -1,7 +1,13 @@
-import { darken, lighten } from 'khroma';
+import Color from 'color';
+import { lighten } from 'khroma';
+window.lighten = lighten;
+
+// const Color = require ( 'khroma/dist/color' ).default
+// Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => "#EAF2FB"
 
 class Theme {
   constructor() {
+    this.background = 'white';
     this.mainBkg = '#eee';
     this.contrast = '#26a';
     this.secondBkg = 'calculated';
@@ -97,32 +103,59 @@ class Theme {
     this.labelBoxBorderColor = this.actorBorder;
     this.labelTextColor = this.text;
     this.loopTextColor = this.text;
-    this.noteBorderColor = darken(this.note, 60);
+    this.noteBorderColor = Color(this.note)
+      .darken(0.6)
+      .hsl()
+      .string();
     this.noteBkgColor = this.note;
     this.noteTextColor = this.actorTextColor;
 
     /* Gantt chart variables */
 
-    this.sectionBkgColor = lighten(this.contrast, 30);
-    this.sectionBkgColor2 = lighten(this.contrast, 30);
-    this.taskBorderColor = darken(this.contrast, 10);
+    this.sectionBkgColor = Color(this.contrast)
+      .lighten(0.3)
+      .hsl()
+      .string();
+
+    this.sectionBkgColor2 = Color(this.contrast)
+      .lighten(0.3)
+      .hsl()
+      .string();
+
+    this.taskBorderColor = Color(this.contrast)
+      .darken(0.1)
+      .hsl()
+      .string();
+
     this.taskBkgColor = this.contrast;
     this.taskTextColor = this.taskTextLightColor;
     this.taskTextDarkColor = this.text;
     this.taskTextOutsideColor = this.taskTextDarkColor;
     this.activeTaskBorderColor = this.taskBorderColor;
     this.activeTaskBkgColor = this.mainBkg;
-    this.gridColor = lighten(this.border1, 30);
+    this.gridColor = Color(this.border1)
+      .lighten(0.3)
+      .hsl()
+      .string();
+
     this.doneTaskBkgColor = this.done;
     this.doneTaskBorderColor = this.lineColor;
     this.critBkgColor = this.critical;
-    this.critBorderColor = darken(this.critBkgColor, 10);
+    this.critBorderColor = Color(this.critBkgColor)
+      .darken(0.1)
+      .hsl()
+      .string();
+
     this.todayLineColor = this.critBkgColor;
 
     /* state colors */
   }
   calculate(overrides) {
-    if (typeof overrides !== 'object') return;
+    if (typeof overrides !== 'object') {
+      // Calculate colors form base colors
+      this.updateColors();
+      return;
+    }
 
     const keys = Object.keys(overrides);
 
@@ -143,5 +176,6 @@ class Theme {
 export const getThemeVariables = userOverrides => {
   const theme = new Theme();
   theme.calculate(userOverrides);
+  console.info('Theme', userOverrides, theme);
   return theme;
 };