From 8ee321fd7ba612c2bff2a8afed659ab1908b4ae4 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Mon, 3 Oct 2022 14:51:13 +0200
Subject: [PATCH] #3561 Adding cScale0-11 etc and usage of the colors from the
 mindmap diagram

---
 cypress/platform/knsv2.html                   | 21 +++++-
 .../src/exampleDiagramRenderer.js             | 42 ++++++++---
 .../src/mermaidUtils.ts                       |  1 -
 .../mermaid-example-diagram/src/styles.js     | 28 +++++++-
 packages/mermaid-mindmap/src/styles.js        | 14 ++--
 packages/mermaid-mindmap/src/svgDraw.js       | 10 ++-
 packages/mermaid/src/themes/theme-base.js     | 46 +++++++++++++
 packages/mermaid/src/themes/theme-dark.js     | 63 +++++++++++++----
 packages/mermaid/src/themes/theme-default.js  | 36 +++++++++-
 packages/mermaid/src/themes/theme-forest.js   | 34 +++++++++
 packages/mermaid/src/themes/theme-neutral.js  | 69 ++++++++++++-------
 11 files changed, 300 insertions(+), 64 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 9ee0ffcbe..143e12087 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -29,6 +29,12 @@
       }
       .mermaid svg {
         /* font-size: 18px !important; */
+        background-color: #eee;
+        background-image: radial-gradient(#fff 1%, transparent 11%),
+          radial-gradient(#fff 1%, transparent 11%);
+        background-size: 20px 20px;
+        background-position: 0 0, 10px 10px;
+        background-repeat: repeat;
       }
       .malware {
         position: fixed;
@@ -56,6 +62,16 @@ example-diagram
     <pre id="diagram" class="mermaid">
 mindmap
   root
+    A
+    B
+    C
+    D
+    E
+    A2
+    B2
+    C2
+    D2
+    E2
     child1((Circle))
         grandchild 1
         grandchild 2
@@ -71,17 +87,18 @@ mindmap
         </pre>
     <!-- <div id="cy"></div> -->
     <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
-    <!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
+    <script src="./mermaid-example-diagram-detector.js"></script>
     <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
+        theme: 'forest',
         startOnLoad: true,
         logLevel: 0,
         basePath: './packages/',
-        // themeVariables: {relationLabelColor: 'red'}
+        // themeVariables: { darkMode: true },
       });
       function callback() {
         alert('It worked');
diff --git a/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js b/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
index 1bb7a9de9..4eaf49d5c 100644
--- a/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
+++ b/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
@@ -1,6 +1,6 @@
 /** Created by knut on 14-12-11. */
 import { select } from 'd3';
-import { log, getConfig } from './mermaidUtils';
+import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
@@ -10,10 +10,11 @@ import { log, getConfig } from './mermaidUtils';
  * @param {any} version
  * @param diagObj
  */
-export const draw = (text, id, version, diagObj) => {
+export const draw = (text, id, version) => {
   try {
-    log.debug('Rendering info diagram\n' + text);
-
+    const conf = getConfig();
+    log.debug('Rendering example diagram\n' + text, 'Conf: ');
+    const THEME_COLOR_LIMIT = getConfig().themeVariables.THEME_COLOR_LIMIT;
     const securityLevel = getConfig().securityLevel;
     // Handle root and Document for when rendering in sanbox mode
     let sandboxElement;
@@ -25,14 +26,34 @@ export const draw = (text, id, version, diagObj) => {
         ? select(sandboxElement.nodes()[0].contentDocument.body)
         : select('body');
 
-    // Parse the graph definition
-    // parser.parse(text);
-    // log.debug('Parsed info diagram');
-    // Fetch the default direction, use TD if none was found
     const svg = root.select('#' + id);
 
     const g = svg.append('g');
 
+    let i;
+    for (i = 0; i < THEME_COLOR_LIMIT; i++) {
+      const section = g.append('g').attr('class', 'section-' + i);
+      section
+        .append('rect')
+        .attr('x', (i % 5) * 110)
+        .attr('y', Math.floor(i / 5) * 90 + 60)
+        .attr('width', 100)
+        .attr('height', 60);
+      section
+        .append('rect')
+        .attr('x', (i % 5) * 110)
+        .attr('y', Math.floor(i / 5) * 90 + 120)
+        .attr('class', 'inverted')
+        .attr('width', 100)
+        .attr('height', 20);
+      section
+        .append('text', 'section-' + i)
+        .text('Section ' + i)
+        .attr('x', (i % 5) * 110 + 15)
+        .attr('y', Math.floor(i / 5) * 90 + 95)
+        .attr('class', 'section-text-' + i);
+    }
+
     g.append('text') // text label for the x axis
       .attr('x', 100)
       .attr('y', 40)
@@ -41,9 +62,8 @@ export const draw = (text, id, version, diagObj) => {
       .style('text-anchor', 'middle')
       .text('v ' + version);
 
-    svg.attr('height', 100);
-    svg.attr('width', 400);
-    // svg.attr('viewBox', '0 0 300 150');
+    // Setup the view box and size of the svg element
+    setupGraphViewbox(undefined, svg, conf.mindmap.padding, conf.mindmap.useMaxWidth);
   } catch (e) {
     log.error('Error while rendering info diagram');
     log.error(e.message);
diff --git a/packages/mermaid-example-diagram/src/mermaidUtils.ts b/packages/mermaid-example-diagram/src/mermaidUtils.ts
index 7d8a459e6..03de59ef9 100644
--- a/packages/mermaid-example-diagram/src/mermaidUtils.ts
+++ b/packages/mermaid-example-diagram/src/mermaidUtils.ts
@@ -19,7 +19,6 @@ export const log: Record<keyof typeof LEVELS, typeof console.log> = {
   error: warning,
   fatal: warning,
 };
-
 export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
 export let getConfig: () => object;
 export let sanitizeText: (str: string) => string;
diff --git a/packages/mermaid-example-diagram/src/styles.js b/packages/mermaid-example-diagram/src/styles.js
index 0b0729813..9ebb77ee5 100644
--- a/packages/mermaid-example-diagram/src/styles.js
+++ b/packages/mermaid-example-diagram/src/styles.js
@@ -1,3 +1,29 @@
-const getStyles = () => ``;
+import { darken, lighten, isDark } from 'khroma';
 
+const genSections = (options) => {
+  let sections = '';
+
+  for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
+    sections += `
+    .section-${i} rect  {
+      fill: ${options['cScale' + i]};
+      stroke: ${options['cScalePeer' + i]};
+      stroke-width: 4;
+    }
+    .section-${i} rect.inverted  {
+      fill: ${options['cScaleInv' + i]};
+    }
+    .section-${i} text {
+     fill: ${options['cScaleLabel' + i]};
+    }
+
+    `;
+  }
+  return sections;
+};
+
+const getStyles = (options) =>
+  `
+  ${genSections(options)}
+`;
 export default getStyles;
diff --git a/packages/mermaid-mindmap/src/styles.js b/packages/mermaid-mindmap/src/styles.js
index f6afaa612..95674e8f8 100644
--- a/packages/mermaid-mindmap/src/styles.js
+++ b/packages/mermaid-mindmap/src/styles.js
@@ -3,8 +3,8 @@ import { darken, lighten, isDark } from 'khroma';
 const genSections = (options) => {
   let sections = '';
 
-  for (let i = 0; i < 8; i++) {
-    options['lineColor' + i] = options['lineColor' + i] || options['gitInv' + i];
+  for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
+    options['lineColor' + i] = options['lineColor' + i] || options['cScaleInv' + i];
     if (isDark(options['lineColor' + i])) {
       options['lineColor' + i] = lighten(options['lineColor' + i], 20);
     } else {
@@ -12,25 +12,25 @@ const genSections = (options) => {
     }
   }
 
-  for (let i = 0; i < 8; i++) {
+  for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
     const sw = '' + (17 - 3 * i);
     sections += `
     .section-${i - 1} rect, .section-${i - 1} path, .section-${i - 1} circle, .section-${
       i - 1
     } path  {
-      fill: ${options['git' + i]};
+      fill: ${options['cScale' + i]};
     }
     .section-${i - 1} text {
-     fill: ${options['gitBranchLabel' + i]};
+     fill: ${options['cScaleLabel' + i]};
     //  fill: ${options['gitInv' + i]};
     }
     .node-icon-${i - 1} {
       font-size: 40px;
-      color: ${options['gitBranchLabel' + i]};
+      color: ${options['cScaleLabel' + i]};
       // color: ${options['gitInv' + i]};
     }
     .section-edge-${i - 1}{
-      stroke: ${options['git' + i]};
+      stroke: ${options['cScale' + i]};
     }
     .edge-depth-${i - 1}{
       stroke-width: ${sw};
diff --git a/packages/mermaid-mindmap/src/svgDraw.js b/packages/mermaid-mindmap/src/svgDraw.js
index 93a9ed4a7..1246b1cb9 100644
--- a/packages/mermaid-mindmap/src/svgDraw.js
+++ b/packages/mermaid-mindmap/src/svgDraw.js
@@ -1,5 +1,6 @@
 import { select } from 'd3';
 import * as db from './mindmapDb';
+const MAX_SECTIONS = 12;
 
 /**
  * @param {string} text The text to be wrapped
@@ -159,17 +160,19 @@ const roundedRectBkg = function (elem, node) {
  * @param {object} elem The D3 dom element in which the node is to be added
  * @param {object} node The node to be added
  * @param section
+ * @param fullSection
  * @param {object} conf The configuration object
  * @returns {number} The height nodes dom element
  */
-export const drawNode = function (elem, node, section, conf) {
+export const drawNode = function (elem, node, fullSection, conf) {
+  const section = (fullSection % MAX_SECTIONS) - 1;
   const nodeElem = elem.append('g');
   node.section = section;
   nodeElem.attr(
     'class',
     (node.class ? node.class + ' ' : '') +
       'mindmap-node ' +
-      (section === -1 ? 'section-root' : 'section-' + section)
+      (section < 0 ? 'section-root' : 'section-' + section)
   );
   const bkgElem = nodeElem.append('g');
 
@@ -260,7 +263,8 @@ export const drawNode = function (elem, node, section, conf) {
   return node.height;
 };
 
-export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, section) {
+export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, fullSection) {
+  const section = (fullSection % MAX_SECTIONS) - 1;
   const sx = parent.x + parent.width / 2;
   const sy = parent.y + parent.height / 2;
   const ex = mindmap.x + mindmap.width / 2;
diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
index 86338c13c..0172df81b 100644
--- a/packages/mermaid/src/themes/theme-base.js
+++ b/packages/mermaid/src/themes/theme-base.js
@@ -20,6 +20,8 @@ class Theme {
     this.noteBkgColor = '#fff5ad';
     this.noteTextColor = '#333';
 
+    this.THEME_COLOR_LIMIT = 12;
+
     // dark
 
     this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
@@ -123,6 +125,50 @@ class Theme {
     this.transitionColor = this.transitionColor || this.lineColor;
     this.specialStateColor = this.lineColor;
 
+    /* Color Scale */
+    /* Each color-set will have a background, a forgroupnd and a border color */
+    this.cScale0 = this.cScale0 || this.primaryColor;
+    this.cScale1 = this.cScale1 || this.secondaryColor;
+    this.cScale2 = this.cScale2 || this.tertiaryColor;
+    this.cScale3 = this.cScale3 || adjust(this.primaryColor, { h: 30 });
+    this.cScale4 = this.cScale4 || adjust(this.primaryColor, { h: 60 });
+    this.cScale5 = this.cScale5 || adjust(this.primaryColor, { h: 90 });
+    this.cScale6 = this.cScale6 || adjust(this.primaryColor, { h: 120 });
+    this.cScale7 = this.cScale7 || adjust(this.primaryColor, { h: 150 });
+    this.cScale8 = this.cScale8 || adjust(this.primaryColor, { h: 210, l: 150 });
+    this.cScale9 = this.cScale9 || adjust(this.primaryColor, { h: 270 });
+    this.cScale10 = this.cScale10 || adjust(this.primaryColor, { h: 300 });
+    this.cScale11 = this.cScale11 || adjust(this.primaryColor, { h: 330 });
+    if (this.darkMode) {
+      for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+        this['cScale' + i] = darken(this['cScale' + i], 75);
+      }
+    } else {
+      for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+        this['cScale' + i] = darken(this['cScale' + i], 25);
+      }
+    }
+
+    // Setup the inverted color for the set
+    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+      this['cScaleInv' + i] = this['cScaleInv' + i] || invert(this['cScale' + i]);
+    }
+    // Setup the peer color for the set, useful for borders
+    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+      if (this.darkMode) {
+        this['cScalePeer' + i] = this['cScalePeer' + i] || lighten(this['cScale' + i], 10);
+      } else {
+        this['cScalePeer' + i] = this['cScalePeer' + i] || darken(this['cScale' + i], 10);
+      }
+    }
+
+    // Setup teh label color for the set
+    this.scaleLabelColor = this.scaleLabelColor || this.labelTextColor;
+
+    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+      this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;
+    }
+
     /* class */
     this.classText = this.classText || this.textColor;
 
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index d0ea1269e..707c342ef 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -29,6 +29,7 @@ class Theme {
     this.fontSize = '16px';
     this.labelBackground = '#181818';
     this.textColor = '#ccc';
+    this.THEME_COLOR_LIMIT = 12;
 
     /* Flowchart variables */
     this.nodeBkg = 'calculated';
@@ -157,19 +158,55 @@ class Theme {
     this.fillType6 = adjust(this.primaryColor, { h: 128 });
     this.fillType7 = adjust(this.secondaryColor, { h: 128 });
 
-    /* pie */
-    this.pie1 = this.pie1 || '#0b0000';
-    this.pie2 = this.pie2 || '#4d1037';
-    this.pie3 = this.pie3 || '#3f5258';
-    this.pie4 = this.pie4 || '#4f2f1b';
-    this.pie5 = this.pie5 || '#6e0a0a';
-    this.pie6 = this.pie6 || '#3b0048';
-    this.pie7 = this.pie7 || '#995a01';
-    this.pie8 = this.pie8 || '#154706';
-    this.pie9 = this.pie9 || '#161722';
-    this.pie10 = this.pie10 || '#00296f';
-    this.pie11 = this.pie11 || '#01629c';
-    this.pie12 = this.pie12 || '#010029';
+    /* cScale */
+    this.cScale1 = this.cScale1 || '#0b0000';
+    this.cScale2 = this.cScale2 || '#4d1037';
+    this.cScale3 = this.cScale3 || '#3f5258';
+    this.cScale4 = this.cScale4 || '#4f2f1b';
+    this.cScale5 = this.cScale5 || '#6e0a0a';
+    this.cScale6 = this.cScale6 || '#3b0048';
+    this.cScale7 = this.cScale7 || '#995a01';
+    this.cScale8 = this.cScale8 || '#154706';
+    this.cScale9 = this.cScale9 || '#161722';
+    this.cScale10 = this.cScale10 || '#00296f';
+    this.cScale11 = this.cScale11 || '#01629c';
+    this.cScale12 = this.cScale12 || '#010029';
+
+    /* Color Scale */
+    /* Each color-set will have a background, a forgroupnd and a border color */
+    this.cScale0 = this.cScale0 || this.primaryColor;
+    this.cScale1 = this.cScale1 || this.secondaryColor;
+    this.cScale2 = this.cScale2 || this.tertiaryColor;
+    this.cScale3 = this.cScale3 || adjust(this.primaryColor, { h: 30 });
+    this.cScale4 = this.cScale4 || adjust(this.primaryColor, { h: 60 });
+    this.cScale5 = this.cScale5 || adjust(this.primaryColor, { h: 90 });
+    this.cScale6 = this.cScale6 || adjust(this.primaryColor, { h: 120 });
+    this.cScale7 = this.cScale7 || adjust(this.primaryColor, { h: 150 });
+    this.cScale8 = this.cScale8 || adjust(this.primaryColor, { h: 210 });
+    this.cScale9 = this.cScale9 || adjust(this.primaryColor, { h: 270 });
+    this.cScale10 = this.cScale10 || adjust(this.primaryColor, { h: 300 });
+    this.cScale11 = this.cScale11 || adjust(this.primaryColor, { h: 330 });
+
+    // Setup the inverted color for the set
+    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+      this['cScaleInv' + i] = this['cScaleInv' + i] || invert(this['cScale' + i]);
+    }
+    // Setup the peer color for the set, useful for borders
+    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+      this['cScalePeer' + i] = this['cScalePeer' + i] || lighten(this['cScale' + i], 10);
+    }
+
+    // Setup teh label color for the set
+    this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
+
+    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+      this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;
+    }
+
+    /* Pie diagram */
+    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+      this['pie' + i] = this['cScale' + i];
+    }
     this.pieTitleTextSize = this.pieTitleTextSize || '25px';
     this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
     this.pieSectionTextSize = this.pieSectionTextSize || '17px';
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index a8abbfc57..54f0ad8a2 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -36,6 +36,7 @@ class Theme {
     this.fontSize = '16px';
     this.labelBackground = '#e8e8e8';
     this.textColor = '#333';
+    this.THEME_COLOR_LIMIT = 12;
 
     /* Flowchart variables */
 
@@ -119,8 +120,41 @@ class Theme {
     this.updateColors();
   }
   updateColors() {
-    /* Flowchart variables */
+    /* Color Scale */
+    /* Each color-set will have a background, a forgroupnd and a border color */
+    this.cScale0 = this.cScale0 || this.primaryColor;
+    this.cScale1 = this.cScale1 || this.secondaryColor;
+    this.cScale2 = this.cScale2 || this.tertiaryColor;
+    this.cScale3 = this.cScale3 || adjust(this.primaryColor, { h: 30 });
+    this.cScale4 = this.cScale4 || adjust(this.primaryColor, { h: 60 });
+    this.cScale5 = this.cScale5 || adjust(this.primaryColor, { h: 90 });
+    this.cScale6 = this.cScale6 || adjust(this.primaryColor, { h: 120 });
+    this.cScale7 = this.cScale7 || adjust(this.primaryColor, { h: 150 });
+    this.cScale8 = this.cScale8 || adjust(this.primaryColor, { h: 210 });
+    this.cScale9 = this.cScale9 || adjust(this.primaryColor, { h: 270 });
+    this.cScale10 = this.cScale10 || adjust(this.primaryColor, { h: 300 });
+    this.cScale11 = this.cScale11 || adjust(this.primaryColor, { h: 330 });
+    this['cScalePeer' + 1] = this['cScalePeer' + 1] || darken(this.secondaryColor, 45);
+    this['cScalePeer' + 2] = this['cScalePeer' + 2] || darken(this.tertiaryColor, 40);
+    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+      // Setup the peer color for the set, useful for borders
+      this['cScale' + i] = darken(this['cScale' + i], 10);
+      this['cScalePeer' + i] = this['cScalePeer' + i] || darken(this['cScale' + i], 25);
+    }
 
+    // Setup the inverted color for the set
+    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+      this['cScaleInv' + i] = this['cScaleInv' + i] || adjust(this['cScale' + i], { h: 180 });
+    }
+
+    // Setup teh label color for the set
+    this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
+
+    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+      this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;
+    }
+
+    /* Flowchart variables */
     this.nodeBkg = this.mainBkg;
     this.nodeBorder = this.border1; // border 1
     this.clusterBkg = this.secondBkg;
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index d02d46e5a..ee086ad10 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -30,6 +30,7 @@ class Theme {
     this.tertiaryTextColor = invert(this.primaryColor);
     this.lineColor = invert(this.background);
     this.textColor = invert(this.background);
+    this.THEME_COLOR_LIMIT = 12;
 
     /* Flowchart variables */
     this.nodeBkg = 'calculated';
@@ -93,6 +94,39 @@ class Theme {
     this.errorTextColor = '#552222';
   }
   updateColors() {
+    /* Each color-set will have a background, a forgroupnd and a border color */
+    this.cScale0 = this.cScale0 || this.primaryColor;
+    this.cScale1 = this.cScale1 || this.secondaryColor;
+    this.cScale2 = this.cScale2 || this.tertiaryColor;
+    this.cScale3 = this.cScale3 || adjust(this.primaryColor, { h: 30 });
+    this.cScale4 = this.cScale4 || adjust(this.primaryColor, { h: 60 });
+    this.cScale5 = this.cScale5 || adjust(this.primaryColor, { h: 90 });
+    this.cScale6 = this.cScale6 || adjust(this.primaryColor, { h: 120 });
+    this.cScale7 = this.cScale7 || adjust(this.primaryColor, { h: 150 });
+    this.cScale8 = this.cScale8 || adjust(this.primaryColor, { h: 210 });
+    this.cScale9 = this.cScale9 || adjust(this.primaryColor, { h: 270 });
+    this.cScale10 = this.cScale10 || adjust(this.primaryColor, { h: 300 });
+    this.cScale11 = this.cScale11 || adjust(this.primaryColor, { h: 330 });
+    this['cScalePeer' + 1] = this['cScalePeer' + 1] || darken(this.secondaryColor, 45);
+    this['cScalePeer' + 2] = this['cScalePeer' + 2] || darken(this.tertiaryColor, 40);
+    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+      // Setup the peer color for the set, useful for borders
+      this['cScale' + i] = darken(this['cScale' + i], 10);
+      this['cScalePeer' + i] = this['cScalePeer' + i] || darken(this['cScale' + i], 25);
+    }
+
+    // Setup the inverted color for the set
+    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+      this['cScaleInv' + i] = this['cScaleInv' + i] || adjust(this['cScale' + i], { h: 180 });
+    }
+
+    // Setup teh label color for the set
+    this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
+
+    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+      this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;
+    }
+
     /* Flowchart variables */
 
     this.nodeBkg = this.mainBkg;
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index c4bbf8241..7747a00dd 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -41,6 +41,7 @@ class Theme {
     this.arrowheadColor = '#333333';
     this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
     this.fontSize = '16px';
+    this.THEME_COLOR_LIMIT = 12;
 
     /* Flowchart variables */
 
@@ -108,6 +109,44 @@ class Theme {
     this.secondBkg = lighten(this.contrast, 55);
     this.border2 = this.contrast;
 
+    /* Color Scale */
+    /* Each color-set will have a background, a forgroupnd and a border color */
+
+    this.cScale0 = this.cScale0 || '#555';
+    this.cScale1 = this.cScale1 || '#F4F4F4';
+    this.cScale2 = this.cScale2 || '#555';
+    this.cScale3 = this.cScale3 || '#BBB';
+    this.cScale4 = this.cScale4 || '#777';
+    this.cScale5 = this.cScale5 || '#999';
+    this.cScale6 = this.cScale6 || '#DDD';
+    this.cScale7 = this.cScale7 || '#FFF';
+    this.cScale8 = this.cScale8 || '#DDD';
+    this.cScale9 = this.cScale9 || '#BBB';
+    this.cScale10 = this.cScale10 || '#999';
+    this.cScale11 = this.cScale11 || '#777';
+
+    // Setup the inverted color for the set
+    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+      this['cScaleInv' + i] = this['cScaleInv' + i] || invert(this['cScale' + i]);
+    }
+    // Setup the peer color for the set, useful for borders
+    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+      if (this.darkMode) {
+        this['cScalePeer' + i] = this['cScalePeer' + i] || lighten(this['cScale' + i], 10);
+      } else {
+        this['cScalePeer' + i] = this['cScalePeer' + i] || darken(this['cScale' + i], 10);
+      }
+    }
+
+    // Setup the label color for the set
+    this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
+
+    this['cScaleLabel0'] = this['cScaleLabel0'] || this.cScale1;
+    this['cScaleLabel2'] = this['cScaleLabel2'] || this.cScale1;
+    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+      this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;
+    }
+
     /* Flowchart variables */
 
     this.nodeBkg = this.mainBkg;
@@ -185,18 +224,11 @@ class Theme {
     this.fillType7 = adjust(this.secondaryColor, { h: 128 });
 
     // /* pie */
-    this.pie1 = this.pie1 || '#F4F4F4';
-    this.pie2 = this.pie2 || '#555';
-    this.pie3 = this.pie3 || '#BBB';
-    this.pie4 = this.pie4 || '#777';
-    this.pie5 = this.pie5 || '#999';
-    this.pie6 = this.pie6 || '#DDD';
-    this.pie7 = this.pie7 || '#FFF';
-    this.pie8 = this.pie8 || '#DDD';
-    this.pie9 = this.pie9 || '#BBB';
-    this.pie10 = this.pie10 || '#999';
-    this.pie11 = this.pie11 || '#777';
-    this.pie12 = this.pie12 || '#555';
+    /* Pie diagram */
+    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+      this['pie' + i] = this['cScale' + i];
+    }
+    this.pie12 = this.pie0;
     this.pieTitleTextSize = this.pieTitleTextSize || '25px';
     this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
     this.pieSectionTextSize = this.pieSectionTextSize || '17px';
@@ -207,19 +239,6 @@ class Theme {
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
     this.pieOpacity = this.pieOpacity || '0.7';
 
-    // this.pie1 = this.pie1 || '#212529';
-    // this.pie2 = this.pie2 || '#343A40';
-    // this.pie3 = this.pie3 || '#495057';
-    // this.pie4 = this.pie4 || '#6C757D';
-    // this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -10 });
-    // this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -10 });
-    // this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 });
-    // this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });
-    // this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });
-    // this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -20 });
-    // this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -20 });
-    // this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -10 });
-
     /* requirement-diagram */
     this.requirementBackground = this.requirementBackground || this.primaryColor;
     this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;