Merge branch 'alanaV11' into pebr/neo-style

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

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

@@ -63,7 +63,30 @@ export const render = async (data4Layout: any, svg: any, element: any, positions
 
     gradient
       .append('svg:stop')
-      .attr('offset', '100%')
+      .attr('offset', '10%')
+      .attr('stop-color', gradientStop)
+      .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', '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', '80%')
       .attr('stop-color', gradientStop)
       .attr('stop-opacity', 1);
   }

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,33 +74,24 @@ const getStyles = (
     stroke: ${options.nodeBorder};
   }
 
-  [data-look="neo"].node rect, [data-look="neo"].node polygon {
+  [data-look="neo"].node rect, [data-look="neo"].cluster rect, [data-look="neo"].node polygon {
-    //stroke: none;
     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.nodeBorder);
     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 circle{
     stroke: $(options.nodeBorder);
     stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
-    filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
+
-    //fill: #000000;
+    filter: ${options.dropShadow} );
-    // rx: 3;
-    // ry: 3;
   }
 
   [data-look="neo"].node circle .state-start{
-   
     fill: #000000;
 
   }

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

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

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() {

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') {

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

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

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