Merge pull request #1558 from mermaid-js/less_theme_variables

More theming tweaks

src/config.js

@@ -6,7 +6,7 @@ import { logger } from './logger';
 
 const themes = {};
 
-for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
+for (const themeName of ['default', 'forest', 'dark', 'neutral', 'base']) {
   themes[themeName] = require(`./themes/theme-${themeName}.js`);
 }
 /**

src/diagrams/class/styles.js

@@ -1,9 +1,9 @@
 const getStyles = options =>
   `g.classGroup text {
   fill: ${options.nodeBorder};
+  fill: ${options.classText};
   stroke: none;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
+  font-family: ${options.fontFamily};
   font-size: 10px;
 
   .title {
@@ -38,7 +38,7 @@ g.classGroup line {
 }
 
 .relation {
-  stroke: ${options.nodeBorder};
+  stroke: ${options.lineColor};
   stroke-width: 1;
   fill: none;
 }
@@ -48,14 +48,14 @@ g.classGroup line {
 }
 
 #compositionStart, #compositionEnd, #dependencyStart, #dependencyEnd, #extensionStart, #extensionEnd {
-  fill: ${options.nodeBorder};
-  stroke: ${options.nodeBorder};
+  fill: ${options.lineColor};
+  stroke: ${options.lineColor};
   stroke-width: 1;
 }
 
 #aggregationStart, #aggregationEnd  {
     fill: ${options.nodeBkg};
-  stroke: ${options.nodeBorder};
+  stroke: ${options.lineColor};
   stroke-width: 1;
 }
 `;

src/diagrams/er/styles.js

@@ -1,5 +1,22 @@
-const getStyles = () =>
+const getStyles = options =>
   `
+  .entityBox {
+    fill: ${options.mainBkg};
+    stroke: ${options.nodeBorder};
+  }
+
+  .relationshipLabelBox {
+    fill: ${options.edgeLabelBackground};
+    fillopactity: 0;
+    background-color: ${options.edgeLabelBackground};
+      rect {
+        opacity: 0.5;
+      }
+  }
+
+    .relationshipLine {
+      stroke: ${options.lineColor};
+    }
 `;
 
 export default getStyles;

src/diagrams/state/styles.js

@@ -23,12 +23,12 @@ g.stateGroup rect {
 }
 
 g.stateGroup line {
-  stroke: ${options.nodeBorder};
+  stroke: ${options.lineColor};
   stroke-width: 1;
 }
 
 .transition {
-  stroke: ${options.nodeBorder};
+  stroke: ${options.lineColor};
   stroke-width: 1;
   fill: none;
 }
@@ -85,7 +85,7 @@ g.stateGroup line {
   stroke-width: 1px;
 }
 #statediagram-barbEnd {
-  fill: ${options.nodeBorder};
+  fill: ${options.lineColor};
 }
 
 .statediagram-cluster rect {
@@ -128,7 +128,7 @@ g.stateGroup line {
 }
 .statediagram-state rect.divider {
   stroke-dasharray: 10,10;
-  fill: #efefef;
+  fill: ${options.altBackground ? options.altBackground : '#efefef'};
 }
 
 .note-edge {
@@ -155,8 +155,8 @@ g.stateGroup line {
 }
 
 #dependencyStart, #dependencyEnd {
-  fill: ${options.nodeBorder};
-  stroke: ${options.nodeBorder};
+  fill: ${options.lineColor};
+  stroke: ${options.lineColor};
   stroke-width: 1;
 }
 `;

src/diagrams/user-journey/journeyRenderer.js

@@ -232,12 +232,14 @@ export const drawTasks = function(diagram, tasks, verticalPos) {
   let sectionNumber = 0;
   let fill = '#CCC';
   let colour = 'black';
+  let num = 0;
 
   // Draw the tasks
   for (let i = 0; i < tasks.length; i++) {
     let task = tasks[i];
     if (lastSection !== task.section) {
       fill = fills[sectionNumber % fills.length];
+      num = sectionNumber % fills.length;
       colour = textColours[sectionNumber % textColours.length];
 
       const section = {
@@ -245,6 +247,7 @@ export const drawTasks = function(diagram, tasks, verticalPos) {
         y: 50,
         text: task.section,
         fill,
+        num,
         colour
       };
 
@@ -269,6 +272,7 @@ export const drawTasks = function(diagram, tasks, verticalPos) {
     task.height = conf.diagramMarginY;
     task.colour = colour;
     task.fill = fill;
+    task.num = num;
     task.actors = taskActors;
 
     // Draw the box with the attached line

src/diagrams/user-journey/styles.js

@@ -19,6 +19,9 @@ const getStyles = options =>
   .label text {
     fill: #333;
   }
+  .label {
+    color: ${options.textColor}
+  }
 
   .face {
     fill: #FFF8DC;
@@ -88,6 +91,31 @@ const getStyles = options =>
     pointer-events: none;
     z-index: 100;
   }
+
+  .task-type-0, .section-type-0  {
+    ${options.fillType0 ? `fill: ${options.fillType0}` : ''};
+  }
+  .task-type-1, .section-type-1  {
+    ${options.fillType0 ? `fill: ${options.fillType1}` : ''};
+  }
+  .task-type-2, .section-type-2  {
+    ${options.fillType0 ? `fill: ${options.fillType2}` : ''};
+  }
+  .task-type-3, .section-type-3  {
+    ${options.fillType0 ? `fill: ${options.fillType3}` : ''};
+  }
+  .task-type-4, .section-type-4  {
+    ${options.fillType0 ? `fill: ${options.fillType4}` : ''};
+  }
+  .task-type-5, .section-type-5  {
+    ${options.fillType0 ? `fill: ${options.fillType5}` : ''};
+  }
+  .task-type-6, .section-type-6  {
+    ${options.fillType0 ? `fill: ${options.fillType6}` : ''};
+  }
+  .task-type-7, .section-type-7  {
+    ${options.fillType0 ? `fill: ${options.fillType7}` : ''};
+  }
 `;
 
 export default getStyles;

src/diagrams/user-journey/svgDraw.js

@@ -187,7 +187,7 @@ export const drawSection = function(elem, section, conf) {
   rect.fill = section.fill;
   rect.width = conf.width;
   rect.height = conf.height;
-  rect.class = 'journey-section';
+  rect.class = 'journey-section section-type-' + section.num;
   rect.rx = 3;
   rect.ry = 3;
   drawRect(g, rect);
@@ -199,7 +199,7 @@ export const drawSection = function(elem, section, conf) {
     rect.y,
     rect.width,
     rect.height,
-    { class: 'journey-section' },
+    { class: 'journey-section section-type-' + section.num },
     conf,
     section.colour
   );
@@ -240,7 +240,7 @@ export const drawTask = function(elem, task, conf) {
   rect.fill = task.fill;
   rect.width = conf.width;
   rect.height = conf.height;
-  rect.class = 'task';
+  rect.class = 'task task-type-' + task.num;
   rect.rx = 3;
   rect.ry = 3;
   drawRect(g, rect);
@@ -359,7 +359,7 @@ const _drawTextCandidateFunc = (function() {
     }
   }
 
-  function byFo(content, g, x, y, width, height, textAttrs, conf, colour) {
+  function byFo(content, g, x, y, width, height, textAttrs, conf) {
     const body = g.append('switch');
     const f = body
       .append('foreignObject')
@@ -377,10 +377,11 @@ const _drawTextCandidateFunc = (function() {
 
     text
       .append('div')
+      .attr('class', 'label')
       .style('display', 'table-cell')
       .style('text-align', 'center')
       .style('vertical-align', 'middle')
-      .style('color', colour)
+      // .style('color', colour)
       .text(content);
 
     byTspan(content, body, x, y, width, height, textAttrs, conf);

src/mermaidAPI.js

@@ -53,7 +53,7 @@ import configApi from './config';
 import getStyles from './styles';
 const themes = {};
 
-for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
+for (const themeName of ['default', 'forest', 'dark', 'neutral', 'base']) {
   themes[themeName] = require(`./themes/theme-${themeName}.js`);
 }
 

src/styles.js

@@ -1,5 +1,5 @@
 import classDiagram from './diagrams/class/styles';
-import er from './diagrams/flowchart/styles';
+import er from './diagrams/er/styles';
 import flowchart from './diagrams/flowchart/styles';
 import gantt from './diagrams/gantt/styles';
 import git from './diagrams/git/styles';
@@ -75,6 +75,8 @@ const getStyles = (type, userStyles, options) => {
   ${themes[type](options)}
 
   ${userStyles}
+
+  ${type} { fill: apa;}
 `;
 };
 

src/themes/state.scss

@@ -82,7 +82,7 @@ g.stateGroup line {
 }
 
 .statediagram-cluster rect {
-  fill: $nodeBkg;
+  // fill: $nodeBkg;
   stroke: $nodeBorder;
   stroke-width: 1px;
 }

src/themes/theme-base.js

@@ -0,0 +1,136 @@
+import { darken, lighten, adjust } from 'khroma';
+
+class Theme {
+  constructor() {
+    /* Base variables */
+    this.primaryColor = '#039fbe';
+    this.secondaryColor = '#b20238';
+    this.tertiaryColor = lighten('#e8d21d', 30);
+    this.relationColor = '#000';
+    this.primaryColor = '#fa255e';
+    this.secondaryColor = '#c39ea0';
+    this.tertiaryColor = '#f8e5e5';
+
+    this.primaryColor = '#ECECFF';
+    this.secondaryColor = '#ffffde';
+    this.tertiaryColor = '#ffffde';
+
+    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 = this.tertiaryColor;
+    this.altSectionBkgColor = 'white';
+    this.sectionBkgColor = this.secondaryColor;
+    this.sectionBkgColor2 = this.tertiaryColor;
+    this.altSectionBkgColor = 'white';
+    this.sectionBkgColor2 = this.primaryColor;
+    this.taskBorderColor = lighten(this.primaryColor, 23);
+    this.taskBkgColor = this.primaryColor;
+    this.taskTextLightColor = 'white';
+    this.taskTextColor = 'calculated';
+    this.taskTextDarkColor = 'black';
+    this.taskTextOutsideColor = 'calculated';
+    this.taskTextClickableColor = '#003163';
+    this.activeTaskBorderColor = this.primaryColor;
+    this.activeTaskBkgColor = lighten(this.primaryColor, 23);
+    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

@@ -1,8 +1,10 @@
-import { invert, lighten, darken, rgba } from 'khroma';
+import { invert, lighten, darken, rgba, adjust } from 'khroma';
 
 class Theme {
   constructor() {
     this.background = '#333';
+    this.primaryColor = '#1f2020';
+    this.secondaryColor = lighten(this.primaryColor, 16);
     this.mainBkg = '#1f2020';
     this.secondBkg = 'calculated';
     this.mainContrastColor = 'lightgrey';
@@ -114,6 +116,18 @@ class Theme {
 
     /* state colors */
     this.labelColor = this.textColor;
+    this.altBackground = lighten(this.background, 20);
+
+    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 });
+    /* class */
+    this.classText = this.nodeBorder;
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

src/themes/theme-default.js

@@ -1,8 +1,10 @@
-import { lighten, rgba } from 'khroma';
+import { lighten, rgba, adjust } from 'khroma';
 
 class Theme {
   constructor() {
     /* Base variables */
+    this.primaryColor = '#ECECFF';
+    this.secondaryColor = '#ffffde';
     this.background = 'white';
     this.mainBkg = '#ECECFF';
     this.secondBkg = '#ffffde';
@@ -121,6 +123,17 @@ class Theme {
     this.taskTextOutsideColor = this.taskTextDarkColor;
 
     /* state colors */
+    /* class */
+    this.classText = this.nodeBorder;
+    /* 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') {

src/themes/theme-forest.js

@@ -1,7 +1,9 @@
-import { darken } from 'khroma';
+import { darken, adjust } from 'khroma';
 class Theme {
   constructor() {
     /* Base vales */
+    this.primaryColor = '#cde498';
+    this.secondaryColor = '#cdffb2';
     this.background = 'white';
     this.mainBkg = '#cde498';
     this.secondBkg = '#cdffb2';
@@ -96,6 +98,17 @@ class Theme {
     this.activeTaskBkgColor = this.mainBkg;
 
     /* state colors */
+    /* class */
+    this.classText = this.nodeBorder;
+    /* 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') {

src/themes/theme-neutral.js

@@ -1,15 +1,15 @@
-import Color from 'color';
-import { lighten } from 'khroma';
-window.lighten = lighten;
+import { darken, lighten, adjust } from 'khroma';
 
 // const Color = require ( 'khroma/dist/color' ).default
 // Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => "#EAF2FB"
 
 class Theme {
   constructor() {
+    this.primaryColor = '#eee';
+    this.contrast = '#26a';
+    this.secondaryColor = lighten(this.contrast, 55);
     this.background = 'white';
     this.mainBkg = '#eee';
-    this.contrast = '#26a';
     this.secondBkg = 'calculated';
     this.lineColor = '#666';
     this.border1 = '#999';
@@ -103,29 +103,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 +120,27 @@ 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;
+    /* 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') {