#1542 Base theme for simple custom themeing

src/themes/theme-base.js

@@ -0,0 +1,127 @@
+import { darken, lighten, rgba, adjust } from 'khroma';
+
+class Theme {
+  constructor() {
+    /* Base variables */
+    this.primaryColor = '#fa255e';
+    this.secondaryColor = '#c39ea0';
+    this.tertiaryColor = '#f8e5e5';
+    this.background = 'white';
+    this.lineColor = '#333333';
+    this.border1 = '#9370DB';
+    this.arrowheadColor = '#333333';
+    this.fontFamily = '"trebuchet ms", verdana, arial';
+    this.fontSize = '16px';
+    this.labelBackground = '#e8e8e8';
+    this.textColor = '#333';
+    this.noteBkgColor = '#fff5ad';
+    this.noteBorderColor = '#aaaa33';
+    this.updateColors();
+  }
+  updateColors() {
+    this.secondBkg = this.tertiaryColor;
+
+    /* Flowchart variables */
+
+    this.nodeBkg = this.primaryColor;
+    this.mainBkg = this.primaryColor;
+    this.nodeBorder = darken(this.primaryColor, 23); // border 1
+    this.clusterBkg = this.tertiaryColor;
+    this.clusterBorder = darken(this.tertiaryColor, 10);
+    this.defaultLinkColor = this.lineColor;
+    this.titleColor = this.textColor;
+    this.edgeLabelBackground = this.labelBackground;
+
+    /* Sequence Diagram variables */
+
+    // this.actorBorder = lighten(this.border1, 0.5);
+    this.actorBorder = lighten(this.border1, 23);
+    this.actorBkg = this.mainBkg;
+    this.actorTextColor = 'black';
+    this.actorLineColor = 'grey';
+    this.labelBoxBkgColor = this.actorBkg;
+    this.signalColor = this.textColor;
+    this.signalTextColor = this.textColor;
+    this.labelBoxBorderColor = this.actorBorder;
+    this.labelTextColor = this.actorTextColor;
+    this.loopTextColor = this.actorTextColor;
+    this.noteBorderColor = this.border2;
+    this.noteTextColor = this.actorTextColor;
+    this.activationBorderColor = darken(this.secondaryColor, 10);
+    this.activationBkgColor = this.secondaryColor;
+    this.sequenceNumberColor = 'white';
+
+    /* Gantt chart variables */
+
+    this.taskTextColor = this.taskTextLightColor;
+    this.taskTextOutsideColor = this.taskTextDarkColor;
+    this.sectionBkgColor = rgba(102, 102, 255, 0.49);
+    this.altSectionBkgColor = 'white';
+    this.sectionBkgColor2 = '#fff400';
+    this.sectionBkgColor = rgba(102, 102, 255, 0.49);
+    this.altSectionBkgColor = 'white';
+    this.sectionBkgColor2 = '#fff400';
+    this.taskBorderColor = '#534fbc';
+    this.taskBkgColor = '#8a90dd';
+    this.taskTextLightColor = 'white';
+    this.taskTextColor = 'calculated';
+    this.taskTextDarkColor = 'black';
+    this.taskTextOutsideColor = 'calculated';
+    this.taskTextClickableColor = '#003163';
+    this.activeTaskBorderColor = '#534fbc';
+    this.activeTaskBkgColor = '#bfc7ff';
+    this.gridColor = 'lightgrey';
+    this.doneTaskBkgColor = 'lightgrey';
+    this.doneTaskBorderColor = 'grey';
+    this.critBorderColor = '#ff8888';
+    this.critBkgColor = 'red';
+    this.todayLineColor = 'red';
+
+    /* state colors */
+    this.labelColor = 'black';
+    this.errorBkgColor = '#552222';
+    this.errorTextColor = '#552222';
+
+    /* state colors */
+
+    /* class */
+    this.classText = this.textColor;
+
+    /* user-journey */
+    this.fillType0 = this.primaryColor;
+    this.fillType1 = this.secondaryColor;
+    this.fillType2 = adjust(this.primaryColor, { h: 64 });
+    this.fillType3 = adjust(this.secondaryColor, { h: 64 });
+    this.fillType4 = adjust(this.primaryColor, { h: -64 });
+    this.fillType5 = adjust(this.secondaryColor, { h: -64 });
+    this.fillType6 = adjust(this.primaryColor, { h: 128 });
+    this.fillType7 = adjust(this.secondaryColor, { h: 128 });
+  }
+  calculate(overrides) {
+    if (typeof overrides !== 'object') {
+      // Calculate colors form base colors
+      this.updateColors();
+      return;
+    }
+
+    const keys = Object.keys(overrides);
+
+    // Copy values from overrides, this is mainly for base colors
+    keys.forEach(k => {
+      this[k] = overrides[k];
+    });
+
+    // Calculate colors form base colors
+    this.updateColors();
+    // Copy values from overrides again in case of an override of derived value
+    keys.forEach(k => {
+      this[k] = overrides[k];
+    });
+  }
+}
+
+export const getThemeVariables = userOverrides => {
+  const theme = new Theme();
+  theme.calculate(userOverrides);
+  return theme;
+};

src/themes/theme-dark.js

@@ -114,6 +114,8 @@ class Theme {
 
     /* state colors */
     this.labelColor = this.textColor;
+    /* class */
+    this.classText = this.nodeBorder;
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

src/themes/theme-default.js

@@ -121,6 +121,8 @@ class Theme {
     this.taskTextOutsideColor = this.taskTextDarkColor;
 
     /* state colors */
+    /* class */
+    this.classText = this.nodeBorder;
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

src/themes/theme-forest.js

@@ -96,6 +96,8 @@ class Theme {
     this.activeTaskBkgColor = this.mainBkg;
 
     /* state colors */
+    /* class */
+    this.classText = this.nodeBorder;
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

src/themes/theme-neutral.js

@@ -1,6 +1,4 @@
-import Color from 'color';
-import { lighten } from 'khroma';
-window.lighten = lighten;
+import { darken, lighten } from 'khroma';
 
 // const Color = require ( 'khroma/dist/color' ).default
 // Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => "#EAF2FB"
@@ -103,29 +101,16 @@ class Theme {
     this.labelBoxBorderColor = this.actorBorder;
     this.labelTextColor = this.text;
     this.loopTextColor = this.text;
-    this.noteBorderColor = Color(this.note)
-      .darken(0.6)
-      .hsl()
-      .string();
+    this.noteBorderColor = darken(this.note, 60);
     this.noteBkgColor = this.note;
     this.noteTextColor = this.actorTextColor;
 
     /* Gantt chart variables */
 
-    this.sectionBkgColor = Color(this.contrast)
-      .lighten(0.3)
-      .hsl()
-      .string();
+    this.sectionBkgColor = lighten(this.contrast, 30);
+    this.sectionBkgColor2 = lighten(this.contrast, 30);
 
-    this.sectionBkgColor2 = Color(this.contrast)
-      .lighten(0.3)
-      .hsl()
-      .string();
-
-    this.taskBorderColor = Color(this.contrast)
-      .darken(0.1)
-      .hsl()
-      .string();
+    this.taskBorderColor = darken(this.contrast, 10);
 
     this.taskBkgColor = this.contrast;
     this.taskTextColor = this.taskTextLightColor;
@@ -133,22 +118,18 @@ class Theme {
     this.taskTextOutsideColor = this.taskTextDarkColor;
     this.activeTaskBorderColor = this.taskBorderColor;
     this.activeTaskBkgColor = this.mainBkg;
-    this.gridColor = Color(this.border1)
-      .lighten(0.3)
-      .hsl()
-      .string();
+    this.gridColor = lighten(this.border1, 30);
 
     this.doneTaskBkgColor = this.done;
     this.doneTaskBorderColor = this.lineColor;
     this.critBkgColor = this.critical;
-    this.critBorderColor = Color(this.critBkgColor)
-      .darken(0.1)
-      .hsl()
-      .string();
+    this.critBorderColor = darken(this.critBkgColor, 10);
 
     this.todayLineColor = this.critBkgColor;
 
     /* state colors */
+    /* class */
+    this.classText = this.nodeBorder;
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {