MC-1730 Neo look for subgraphs

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);
 

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;

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);