Merge branch '5237-unified-layout-common-renderer' of github.com:mermaid-js/mermaid into alanaV11

packages/mermaid/src/rendering-util/render.ts

@@ -44,5 +44,28 @@ export const render = async (data4Layout: any, svg: any, element: any, positions
 
   const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm];
   const layoutRenderer = await layoutDefinition.loader();
+
+  const { useGradient, gradientStart, gradientStop } = data4Layout.config.themeVariables;
+
+  if (useGradient) {
+    const gradient = svg.append('linearGradient');
+
+    gradient
+      .attr('id', 'gradient')
+      .attr('gradientUnits', 'userSpaceOnUse')
+      .attr('spreadMethod', 'pad');
+
+    gradient
+      .append('svg:stop')
+      .attr('offset', '0%')
+      .attr('stop-color', gradientStart)
+      .attr('stop-opacity', 1);
+
+    gradient
+      .append('svg:stop')
+      .attr('offset', '100%')
+      .attr('stop-color', gradientStop)
+      .attr('stop-opacity', 1);
+  }
   return layoutRenderer.render(data4Layout, svg, element, layoutDefinition.algorithm, positions);
 };

packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts

@@ -47,24 +47,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
     rect.attr('class', 'basic label-container').attr('style', cssStyles);
   } else {
     rect = shapeSvg.insert('rect', ':first-child');
-    let gradient = shapeSvg.append('linearGradient');
 
-    gradient
-      .attr('id', 'gradient')
-      .attr('gradientUnits', 'userSpaceOnUse')
-      .attr('spreadMethod', 'pad');
-
-    gradient
-      .append('svg:stop')
-      .attr('offset', '0%')
-      .attr('stop-color', '#eb0042')
-      .attr('stop-opacity', 1);
-
-    gradient
-      .append('svg:stop')
-      .attr('offset', '100%')
-      .attr('stop-color', '#0042eb')
-      .attr('stop-opacity', 1);
     const rectClass = 'basic label-container';
 
     rect

packages/mermaid/src/themes/index.js

@@ -4,7 +4,7 @@ import { getThemeVariables as defaultThemeVariables } from './theme-default.js';
 import { getThemeVariables as forestThemeVariables } from './theme-forest.js';
 import { getThemeVariables as neutralThemeVariables } from './theme-neutral.js';
 import { getThemeVariables as neoThemeVariables } from './theme-neo.js';
-import { getThemeVariables as gradientThemeVariables } from './theme-gradient.js';
+import { getThemeVariables as neoDarkThemeVariables } from './theme-neo-dark.js';
 
 export default {
   base: {
@@ -25,7 +25,7 @@ export default {
   neo: {
     getThemeVariables: neoThemeVariables,
   },
-  gradient: {
-    getThemeVariables: gradientThemeVariables,
+  'neo-dark': {
+    getThemeVariables: neoDarkThemeVariables,
   },
 };

packages/mermaid/src/themes/theme-base.js

@@ -25,6 +25,7 @@ class Theme {
 
     this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
     this.fontSize = '16px';
+    this.useGradient = true;
   }
   updateColors() {
     // The || is to make sure that if the variable has been defined by a user override that value is to be used
@@ -336,6 +337,9 @@ class Theme {
     this.attributeBackgroundColorEven =
       this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
     /* -------------------------------------------------- */
+
+    this.gradientStart = this.primaryBorderColor;
+    this.gradientStop = this.secondaryBorderColor;
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

packages/mermaid/src/themes/theme-dark.js

@@ -90,6 +90,9 @@ class Theme {
 
     this.errorBkgColor = '#a44141';
     this.errorTextColor = '#ddd';
+    this.useGradient = true;
+    this.gradientStart = this.primaryBorderColor;
+    this.gradientStop = this.secondaryBorderColor;
   }
   updateColors() {
     this.secondBkg = lighten(this.mainBkg, 16);

packages/mermaid/src/themes/theme-default.js

@@ -117,6 +117,9 @@ class Theme {
     this.labelColor = 'black';
     this.errorBkgColor = '#552222';
     this.errorTextColor = '#552222';
+    this.useGradient = true;
+    this.gradientStart = this.primaryBorderColor;
+    this.gradientStop = this.secondaryBorderColor;
     this.updateColors();
   }
   updateColors() {

packages/mermaid/src/themes/theme-forest.js

@@ -92,6 +92,10 @@ class Theme {
 
     this.errorBkgColor = '#552222';
     this.errorTextColor = '#552222';
+
+    this.useGradient = true;
+    this.gradientStart = this.primaryBorderColor;
+    this.gradientStop = this.secondaryBorderColor;
   }
   updateColors() {
     /* Sequence Diagram variables */
@@ -338,6 +342,8 @@ class Theme {
     this.attributeBackgroundColorEven =
       this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
     /* -------------------------------------------------- */
+
+    this.useGradient = true;
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

packages/mermaid/src/themes/theme-neo-dark.js

@@ -1,4 +1,4 @@
-import { darken, lighten, adjust, invert, isDark, toRgba } from 'khroma';
+import { adjust, darken, invert, isDark, lighten, rgba } from 'khroma';
 import { mkBorder } from './theme-helpers.js';
 import {
   oldAttributeBackgroundColorEven,
@@ -12,24 +12,46 @@ class Theme {
      * - Background - used to know what the background color is of the diagram. This is used for
      *   deducing colors for instance line color. Default value is #f4f4f4.
      */
-    this.background = '#ffffff';
+    this.background = '#333';
+    this.primaryColor = '#1f2020';
+    this.secondaryColor = lighten(this.primaryColor, 16);
+    this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
+    this.primaryBorderColor = invert(this.background);
+    this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
+    this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
+    this.primaryTextColor = invert(this.primaryColor);
+    this.secondaryTextColor = invert(this.secondaryColor);
+    this.tertiaryTextColor = invert(this.tertiaryColor);
 
-    this.primaryColor = '#cccccc';
-    this.mainBkg = '#ffffff';
+    this.mainBkg = '#1f2020';
+    this.secondBkg = 'calculated';
+    this.mainContrastColor = 'lightgrey';
+    this.darkTextColor = lighten(invert('#323D47'), 10);
+    this.border1 = '#ccc';
+    this.border2 = rgba(255, 255, 255, 0.25);
+    this.arrowheadColor = 'calculated';
+    this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
+    this.fontSize = '16px';
+    this.labelBackground = '#181818';
+    this.textColor = '#ccc';
+    this.THEME_COLOR_LIMIT = 12;
+    this.radius = 3;
 
     this.noteBkgColor = '#fff5ad';
     this.noteTextColor = '#333';
 
     this.THEME_COLOR_LIMIT = 12;
-    this.radius = 3;
     // dark
-
     this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
     this.fontSize = '10px';
 
     // Neo-specific
-    this.nodeBorder = '#550000';
+    this.nodeBorder = 'none';
     this.stateBorder = 'none';
+
+    this.useGradient = true;
+    this.gradientStart = '#eb0042';
+    this.gradientStop = '#0042eb';
   }
   updateColors() {
     // The || is to make sure that if the variable has been defined by a user override that value is to be used

packages/mermaid/src/themes/theme-neo.js

@@ -31,6 +31,8 @@ class Theme {
     this.nodeBorder = 'none';
     this.stateBorder = 'none';
     this.useGradient = true;
+    this.gradientStart = '#eb0042';
+    this.gradientStop = '#0042eb';
   }
   updateColors() {
     // The || is to make sure that if the variable has been defined by a user override that value is to be used

packages/mermaid/src/themes/theme-neutral.js

@@ -104,6 +104,9 @@ class Theme {
 
     this.errorBkgColor = '#552222';
     this.errorTextColor = '#552222';
+    this.useGradient = true;
+    this.gradientStart = this.primaryBorderColor;
+    this.gradientStop = this.secondaryBorderColor;
   }
   updateColors() {
     this.secondBkg = lighten(this.contrast, 55);