From 86d75373ca09e402ee41f4fb2a6b3a9ebb487288 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Tue, 18 Jun 2024 14:15:53 +0200
Subject: [PATCH 1/3] MC-1730 Neo look for subgraphs

---
 .../src/rendering-util/rendering-elements/clusters.js       | 6 +++++-
 packages/mermaid/src/styles.ts                              | 5 ++---
 packages/mermaid/src/themes/theme-neo-dark.js               | 2 +-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
index c1e624e69..19d3d91e4 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -17,7 +17,11 @@ const rect = (parent, node) => {
   const { clusterBkg, clusterBorder } = themeVariables;
 
   // Add outer g element
-  const shapeSvg = parent.insert('g').attr('class', 'cluster').attr('id', node.id);
+  const shapeSvg = parent
+    .insert('g')
+    .attr('class', 'cluster')
+    .attr('id', node.id)
+    .attr('data-look', node.look);
 
   const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);
 
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index ae849540d..39b1d9963 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -14,6 +14,7 @@ const getStyles = (
     errorBkgColor: string;
     errorTextColor: string;
     lineColor: string;
+    useGradient: boolean;
   } & FlowChartStyleOptions
 ) => {
   let diagramStyles = '';
@@ -73,8 +74,7 @@ const getStyles = (
     stroke: ${options.nodeBorder};
   }
 
-  [data-look="neo"].node rect, [data-look="neo"].node polygon {
-    //stroke: none;
+  [data-look="neo"].node rect, [data-look="neo"].cluster rect, [data-look="neo"].node polygon {
     stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
     filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
     rx: 3;
@@ -82,7 +82,6 @@ const getStyles = (
   }
 
   [data-look="neo"].node rect,  [data-look="neo"].node circle, [data-look="neo"].node polygon {
-    //stroke: $(options.nodeBorder);
     stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
     filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
     rx: 3;
diff --git a/packages/mermaid/src/themes/theme-neo-dark.js b/packages/mermaid/src/themes/theme-neo-dark.js
index b1166b13c..326b19a43 100644
--- a/packages/mermaid/src/themes/theme-neo-dark.js
+++ b/packages/mermaid/src/themes/theme-neo-dark.js
@@ -23,7 +23,7 @@ class Theme {
     this.secondaryTextColor = invert(this.secondaryColor);
     this.tertiaryTextColor = invert(this.tertiaryColor);
 
-    this.mainBkg = '#1f2020';
+    this.mainBkg = '#2a2020';
     this.secondBkg = 'calculated';
     this.mainContrastColor = 'lightgrey';
     this.darkTextColor = lighten(invert('#323D47'), 10);

From 7297b9bc42bbfd4d44f5ac037d34dd04b75acd52 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Tue, 18 Jun 2024 14:42:00 +0200
Subject: [PATCH 2/3] MC-1730 Updated gradient settings

---
 packages/mermaid/src/diagrams/state/styles.js |  2 +-
 packages/mermaid/src/rendering-util/render.ts | 27 +++++++++++++++++--
 packages/mermaid/src/styles.ts                |  6 ++---
 packages/mermaid/src/themes/theme-base.js     |  1 +
 packages/mermaid/src/themes/theme-dark.js     |  1 +
 packages/mermaid/src/themes/theme-default.js  |  1 +
 packages/mermaid/src/themes/theme-forest.js   |  3 +--
 packages/mermaid/src/themes/theme-neo-dark.js |  1 +
 packages/mermaid/src/themes/theme-neo.js      |  2 ++
 packages/mermaid/src/themes/theme-neutral.js  |  1 +
 10 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/packages/mermaid/src/diagrams/state/styles.js b/packages/mermaid/src/diagrams/state/styles.js
index 06c2b2c51..371b56b02 100644
--- a/packages/mermaid/src/diagrams/state/styles.js
+++ b/packages/mermaid/src/diagrams/state/styles.js
@@ -174,7 +174,7 @@ g.stateGroup line {
 
 
 .state-shadow-neo {
-  filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
+  filter: ${options.dropShadow} );
 }
 
 
diff --git a/packages/mermaid/src/rendering-util/render.ts b/packages/mermaid/src/rendering-util/render.ts
index b3e22fe08..0d003bd21 100644
--- a/packages/mermaid/src/rendering-util/render.ts
+++ b/packages/mermaid/src/rendering-util/render.ts
@@ -52,7 +52,7 @@ export const render = async (data4Layout: any, svg: any, element: any, positions
 
     gradient
       .attr('id', 'gradient')
-      .attr('gradientUnits', 'userSpaceOnUse')
+      .attr('gradientUnits', 'objectBoundingBox')
       .attr('spreadMethod', 'pad');
 
     gradient
@@ -63,9 +63,32 @@ export const render = async (data4Layout: any, svg: any, element: any, positions
 
     gradient
       .append('svg:stop')
-      .attr('offset', '100%')
+      .attr('offset', '75%')
       .attr('stop-color', gradientStop)
       .attr('stop-opacity', 1);
+
+    // gradient
+    //   .append('svg:stop')
+    //   .attr('offset', '20%')
+    //   .attr('stop-color', gradientStart)
+    //   .attr('stop-opacity', 1);
+
+    // gradient
+    //   .append('svg:stop')
+    //   .attr('offset', '30%')
+    //   .attr('stop-color', gradientStop)
+    //   .attr('stop-opacity', 1);
+    // gradient
+    //   .append('svg:stop')
+    //   .attr('offset', '40%')
+    //   .attr('stop-color', gradientStart)
+    //   .attr('stop-opacity', 1);
+
+    // gradient
+    //   .append('svg:stop')
+    //   .attr('offset', '50%')
+    //   .attr('stop-color', gradientStop)
+    //   .attr('stop-opacity', 1);
   }
   return layoutRenderer.render(data4Layout, svg, element, layoutDefinition.algorithm, positions);
 };
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index 39b1d9963..769c730b0 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -76,14 +76,14 @@ const getStyles = (
 
   [data-look="neo"].node rect, [data-look="neo"].cluster rect, [data-look="neo"].node polygon {
     stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
-    filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
+    filter: ${options.dropShadow} );
     rx: 3;
     ry: 3;
   }
 
   [data-look="neo"].node rect,  [data-look="neo"].node circle, [data-look="neo"].node polygon {
     stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
-    filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
+    filter: ${options.dropShadow} );
     rx: 3;
     ry: 3;
   }
@@ -91,7 +91,7 @@ const getStyles = (
   [data-look="neo"].node circle{
     stroke: $(options.nodeBorder);
     stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
-    filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
+    filter: ${options.dropShadow} );
     fill: #000000;
     rx: 3;
     ry: 3;
diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
index ce7bdc6b1..437aba467 100644
--- a/packages/mermaid/src/themes/theme-base.js
+++ b/packages/mermaid/src/themes/theme-base.js
@@ -26,6 +26,7 @@ class Theme {
     this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
     this.fontSize = '16px';
     this.useGradient = true;
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1)';
   }
   updateColors() {
     // The || is to make sure that if the variable has been defined by a user override that value is to be used
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index 8defaf034..59779b3c8 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -93,6 +93,7 @@ class Theme {
     this.useGradient = true;
     this.gradientStart = this.primaryBorderColor;
     this.gradientStop = this.secondaryBorderColor;
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1)';
   }
   updateColors() {
     this.secondBkg = lighten(this.mainBkg, 16);
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index ad8303856..53f5ee62c 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -120,6 +120,7 @@ class Theme {
     this.useGradient = true;
     this.gradientStart = this.primaryBorderColor;
     this.gradientStop = this.secondaryBorderColor;
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1)';
     this.updateColors();
   }
   updateColors() {
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index 7a548a864..52bcc97af 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -96,6 +96,7 @@ class Theme {
     this.useGradient = true;
     this.gradientStart = this.primaryBorderColor;
     this.gradientStop = this.secondaryBorderColor;
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,0.5)';
   }
   updateColors() {
     /* Sequence Diagram variables */
@@ -342,8 +343,6 @@ class Theme {
     this.attributeBackgroundColorEven =
       this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
     /* -------------------------------------------------- */
-
-    this.useGradient = true;
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {
diff --git a/packages/mermaid/src/themes/theme-neo-dark.js b/packages/mermaid/src/themes/theme-neo-dark.js
index 326b19a43..c93d636dc 100644
--- a/packages/mermaid/src/themes/theme-neo-dark.js
+++ b/packages/mermaid/src/themes/theme-neo-dark.js
@@ -52,6 +52,7 @@ class Theme {
     this.useGradient = true;
     this.gradientStart = '#eb0042';
     this.gradientStop = '#0042eb';
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,0.5)';
   }
   updateColors() {
     // The || is to make sure that if the variable has been defined by a user override that value is to be used
diff --git a/packages/mermaid/src/themes/theme-neo.js b/packages/mermaid/src/themes/theme-neo.js
index 6c7f51620..a83260f68 100644
--- a/packages/mermaid/src/themes/theme-neo.js
+++ b/packages/mermaid/src/themes/theme-neo.js
@@ -33,6 +33,8 @@ class Theme {
     this.useGradient = true;
     this.gradientStart = '#eb0042';
     this.gradientStop = '#0042eb';
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1)';
+    this.tertiaryColor = '#ffffff';
   }
   updateColors() {
     // The || is to make sure that if the variable has been defined by a user override that value is to be used
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index cdc5c6944..b9f78e35f 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -107,6 +107,7 @@ class Theme {
     this.useGradient = true;
     this.gradientStart = this.primaryBorderColor;
     this.gradientStop = this.secondaryBorderColor;
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1)';
   }
   updateColors() {
     this.secondBkg = lighten(this.contrast, 55);

From 9b310df58a75cb47f28596ce90836edd0dc1ac4d Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Tue, 18 Jun 2024 15:00:51 +0200
Subject: [PATCH 3/3] MC-1730 Updated gradient settings

---
 packages/mermaid/src/rendering-util/render.ts | 44 +++++++++----------
 packages/mermaid/src/themes/theme-dark.js     |  2 +-
 packages/mermaid/src/themes/theme-default.js  |  2 +-
 packages/mermaid/src/themes/theme-forest.js   |  2 +-
 packages/mermaid/src/themes/theme-neo-dark.js |  2 +-
 packages/mermaid/src/themes/theme-neo.js      |  2 +-
 packages/mermaid/src/themes/theme-neutral.js  |  2 +-
 7 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/render.ts b/packages/mermaid/src/rendering-util/render.ts
index 0d003bd21..03a12ed12 100644
--- a/packages/mermaid/src/rendering-util/render.ts
+++ b/packages/mermaid/src/rendering-util/render.ts
@@ -52,7 +52,7 @@ export const render = async (data4Layout: any, svg: any, element: any, positions
 
     gradient
       .attr('id', 'gradient')
-      .attr('gradientUnits', 'objectBoundingBox')
+      .attr('gradientUnits', 'userSpaceOnUse')
       .attr('spreadMethod', 'pad');
 
     gradient
@@ -63,32 +63,32 @@ export const render = async (data4Layout: any, svg: any, element: any, positions
 
     gradient
       .append('svg:stop')
-      .attr('offset', '75%')
+      .attr('offset', '10%')
       .attr('stop-color', gradientStop)
       .attr('stop-opacity', 1);
 
-    // gradient
-    //   .append('svg:stop')
-    //   .attr('offset', '20%')
-    //   .attr('stop-color', gradientStart)
-    //   .attr('stop-opacity', 1);
+    gradient
+      .append('svg:stop')
+      .attr('offset', '30%')
+      .attr('stop-color', gradientStart)
+      .attr('stop-opacity', 1);
 
-    // gradient
-    //   .append('svg:stop')
-    //   .attr('offset', '30%')
-    //   .attr('stop-color', gradientStop)
-    //   .attr('stop-opacity', 1);
-    // gradient
-    //   .append('svg:stop')
-    //   .attr('offset', '40%')
-    //   .attr('stop-color', gradientStart)
-    //   .attr('stop-opacity', 1);
+    gradient
+      .append('svg:stop')
+      .attr('offset', '35%')
+      .attr('stop-color', gradientStop)
+      .attr('stop-opacity', 1);
+    gradient
+      .append('svg:stop')
+      .attr('offset', '60%')
+      .attr('stop-color', gradientStart)
+      .attr('stop-opacity', 1);
 
-    // gradient
-    //   .append('svg:stop')
-    //   .attr('offset', '50%')
-    //   .attr('stop-color', gradientStop)
-    //   .attr('stop-opacity', 1);
+    gradient
+      .append('svg:stop')
+      .attr('offset', '80%')
+      .attr('stop-color', gradientStop)
+      .attr('stop-opacity', 1);
   }
   return layoutRenderer.render(data4Layout, svg, element, layoutDefinition.algorithm, positions);
 };
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index 59779b3c8..48d09c6e0 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -93,7 +93,7 @@ class Theme {
     this.useGradient = true;
     this.gradientStart = this.primaryBorderColor;
     this.gradientStop = this.secondaryBorderColor;
-    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1)';
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))';
   }
   updateColors() {
     this.secondBkg = lighten(this.mainBkg, 16);
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index 53f5ee62c..2be7091c5 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -120,7 +120,7 @@ class Theme {
     this.useGradient = true;
     this.gradientStart = this.primaryBorderColor;
     this.gradientStop = this.secondaryBorderColor;
-    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1)';
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))';
     this.updateColors();
   }
   updateColors() {
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index 52bcc97af..77a79e5db 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -96,7 +96,7 @@ class Theme {
     this.useGradient = true;
     this.gradientStart = this.primaryBorderColor;
     this.gradientStop = this.secondaryBorderColor;
-    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,0.5)';
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,0.5))';
   }
   updateColors() {
     /* Sequence Diagram variables */
diff --git a/packages/mermaid/src/themes/theme-neo-dark.js b/packages/mermaid/src/themes/theme-neo-dark.js
index c93d636dc..53a659a30 100644
--- a/packages/mermaid/src/themes/theme-neo-dark.js
+++ b/packages/mermaid/src/themes/theme-neo-dark.js
@@ -52,7 +52,7 @@ class Theme {
     this.useGradient = true;
     this.gradientStart = '#eb0042';
     this.gradientStop = '#0042eb';
-    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,0.5)';
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,0.5))';
   }
   updateColors() {
     // The || is to make sure that if the variable has been defined by a user override that value is to be used
diff --git a/packages/mermaid/src/themes/theme-neo.js b/packages/mermaid/src/themes/theme-neo.js
index a83260f68..0ea15c5bc 100644
--- a/packages/mermaid/src/themes/theme-neo.js
+++ b/packages/mermaid/src/themes/theme-neo.js
@@ -33,7 +33,7 @@ class Theme {
     this.useGradient = true;
     this.gradientStart = '#eb0042';
     this.gradientStop = '#0042eb';
-    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1)';
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))';
     this.tertiaryColor = '#ffffff';
   }
   updateColors() {
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index b9f78e35f..f9e0c032f 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -107,7 +107,7 @@ class Theme {
     this.useGradient = true;
     this.gradientStart = this.primaryBorderColor;
     this.gradientStop = this.secondaryBorderColor;
-    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1)';
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))';
   }
   updateColors() {
     this.secondBkg = lighten(this.contrast, 55);