blend groups

d2exporter/export.go

@@ -100,6 +100,7 @@ func toShape(obj *d2graph.Object, theme *d2themes.Theme) d2target.Shape {
 	shape.FontSize = text.FontSize
 
 	if obj.IsSequenceDiagramGroup() {
+		shape.StrokeWidth = 0
 		shape.Blend = true
 	}
 

d2graph/d2graph.go

@@ -331,18 +331,12 @@ func (l ContainerLevel) LabelSize() int {
 
 func (obj *Object) GetFill(theme *d2themes.Theme) string {
 	level := int(obj.Level())
-	if obj.Parent.IsSequenceDiagram() {
-		return theme.Colors.B5
-	} else if obj.IsSequenceDiagramNote() {
+	if obj.IsSequenceDiagramNote() {
 		return theme.Colors.Neutrals.N7
 	} else if obj.IsSequenceDiagramGroup() {
-		sd := obj.OuterSequenceDiagram()
-		// Alternate
-		if (level-int(sd.Level()))%2 == 0 {
-			return theme.Colors.Neutrals.N7
-		} else {
-			return theme.Colors.Neutrals.N6
-		}
+		return theme.Colors.Neutrals.N5
+	} else if obj.Parent.IsSequenceDiagram() {
+		return theme.Colors.B5
 	}
 
 	shape := obj.Attributes.Shape.Value

d2graph/seqdiagram.go

@@ -41,7 +41,7 @@ func (obj *Object) IsSequenceDiagramNote() bool {
 	if obj.OuterSequenceDiagram() == nil {
 		return false
 	}
-	return !obj.hasEdgeRef() && !obj.ContainsAnyEdge(obj.Graph.Edges) && len(obj.ChildrenArray) == 0
+	return !obj.hasEdgeRef() && !obj.ContainsAnyEdge(obj.Graph.Edges) && len(obj.ChildrenArray) == 0 && !obj.ContainsAnyObject(obj.Graph.Objects)
 }
 
 func (obj *Object) hasEdgeRef() bool {

d2renderers/d2svg/style.css

@@ -8,4 +8,5 @@
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }

d2themes/d2themes.go

@@ -44,7 +44,7 @@ var CoolNeutral = Neutral{
 	N2: "#676C7E",
 	N3: "#9499AB",
 	N4: "#CFD2DD",
-	N5: "#F0F3F9",
+	N5: "#DEE1EB",
 	N6: "#EEF1F8",
 	N7: "#FFFFFF",
 }

e2etests/stable_test.go

@@ -1383,6 +1383,47 @@ group b: {
 choo: {
   _.d."this note"
 }
+`,
+		},
+		{
+			name: "sequence_diagram_nested_groups",
+			script: `shape: sequence_diagram
+
+this is a message group: {
+    _.a -> _.b
+    and this is a nested message group: {
+        _._.a -> _._.b
+        what about more nesting: {
+            _._._.a -> _._._.b
+						crazy town: {
+								_._._._.a."a note"
+								_._._._.a -> _._._._.b
+							whoa: {
+									_._._._._.a -> _._._._._.b
+							}
+            }
+        }
+    }
+}
+
+alt: {
+    case 1: {
+        _._.b -> _._.c
+    }
+    case 2: {
+        _._.b -> _._.c
+    }
+    case 3: {
+        _._.b -> _._.c
+    }
+    case 4: {
+        _._.b -> _._.c
+    }
+}
+
+b.note: "a note here to remember that padding must consider notes too"
+a.note: "just\na\nlong\nnote\nhere"
+c: "just an actor"
 `,
 		},
 		{

e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="486" height="552" viewBox="-100 -100 486 552"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="446" height="552" viewBox="-88 -88 446 552"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/sanity/basic/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="313" height="552" viewBox="-100 -100 313 552"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/sanity/basic/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="313" height="552" viewBox="-88 -88 313 552"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="414" height="752" viewBox="-100 -100 414 752"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="464" height="862" viewBox="-88 -88 464 862"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="313" height="552" viewBox="-100 -100 313 552"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/sanity/connection_label/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="313" height="673" viewBox="-88 -88 313 673"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/sanity/empty/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="202" height="202" viewBox="9223372036854775707 9223372036854775707 202 20
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/sanity/empty/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="202" height="202" viewBox="9223372036854775707 9223372036854775707 202 20
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/all_shapes/dagre/board.exp.json

@@ -134,7 +134,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": false,
       "3d": false,
@@ -254,7 +254,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": false,
       "3d": false,
@@ -614,7 +614,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": false,
       "3d": false,

e2etests/testdata/stable/all_shapes/elk/board.exp.json

@@ -134,7 +134,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": false,
       "3d": false,
@@ -254,7 +254,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": false,
       "3d": false,
@@ -614,7 +614,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": false,
       "3d": false,

e2etests/testdata/stable/all_shapes_multiple/dagre/board.exp.json

@@ -134,7 +134,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": false,
       "3d": false,
@@ -254,7 +254,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": false,
       "3d": false,
@@ -614,7 +614,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": false,
       "3d": false,

e2etests/testdata/stable/all_shapes_multiple/elk/board.exp.json

@@ -134,7 +134,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": false,
       "3d": false,
@@ -254,7 +254,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": false,
       "3d": false,
@@ -614,7 +614,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": false,
       "3d": false,

e2etests/testdata/stable/all_shapes_shadow/dagre/board.exp.json

@@ -134,7 +134,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": true,
       "3d": false,
@@ -254,7 +254,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": true,
       "3d": false,
@@ -614,7 +614,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": true,
       "3d": false,

e2etests/testdata/stable/all_shapes_shadow/elk/board.exp.json

@@ -134,7 +134,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": true,
       "3d": false,
@@ -254,7 +254,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": true,
       "3d": false,
@@ -614,7 +614,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": true,
       "3d": false,

e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="480" height="778" viewBox="-100 -100 480 778"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="433" height="788" viewBox="-88 -88 433 788"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/arrowhead_labels/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="401" height="552" viewBox="-144 -100 401 552"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/arrowhead_labels/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="401" height="673" viewBox="14 -88 401 673"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/binary_tree/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="1518" height="1004" viewBox="-100 -100 1518 1004"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/binary_tree/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="1238" height="1004" viewBox="-88 -88 1238 1004"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/chaos1/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="634" height="652" viewBox="-100 -100 634 652"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/chaos1/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="630" height="869" viewBox="-88 -88 630 869"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="1317" height="1854" viewBox="-100 -100 1317 1854"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/chaos2/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="1092" height="1907" viewBox="-88 -88 1092 1907"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="724" height="626" viewBox="-100 -100 724 626"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/child_parent_edges/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="774" height="801" viewBox="-88 -88 774 801"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/circular_dependency/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="313" height="778" viewBox="-100 -100 313 778"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/circular_dependency/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="313" height="778" viewBox="-88 -88 313 778"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/class/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="539" height="568" viewBox="-100 -100 539 568"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/class/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="539" height="568" viewBox="-88 -88 539 568"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="955" height="818" viewBox="-100 -100 955 818"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="955" height="818" viewBox="-88 -88 955 818"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="494" height="1178" viewBox="-100 -100 494 1178"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/connected_container/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="614" height="1403" viewBox="-88 -88 614 1403"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/container_edges/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="786" height="1530" viewBox="-100 -100 786 1530"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/container_edges/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="754" height="1308" viewBox="-88 -88 754 1308"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/dense/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="1590" height="1682" viewBox="-100 -100 1590 1682"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/dense/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="997" height="1968" viewBox="-88 -88 997 1968"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/different_subgraphs/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="2542" height="1104" viewBox="-100 -100 2542 1104"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/different_subgraphs/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="1668" height="1376" viewBox="-88 -88 1668 1376"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/direction/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="1021" height="1656" viewBox="-100 -100 1021 1656"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/direction/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="614" height="2698" viewBox="-88 -88 614 2698"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/font_colors/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="345" height="552" viewBox="-100 -100 345 552"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/font_colors/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="345" height="673" viewBox="-88 -88 345 673"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="2360" height="632" viewBox="-100 -100 2360 632"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="1965" height="793" viewBox="-88 -88 1965 793"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="3251" height="5500" viewBox="-100 -100 3251 5500"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/giant_markdown_test/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="3251" height="5500" viewBox="-88 -88 3251 5500"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/hr/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="938" height="786" viewBox="-100 -100 938 786"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/hr/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="938" height="786" viewBox="-88 -88 938 786"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/icon-label/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="340" height="357" viewBox="-100 -131 340 357"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/icon-label/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="340" height="357" viewBox="-88 -119 340 357"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/images/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="328" height="587" viewBox="-100 -131 328 587"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/images/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="328" height="587" viewBox="-88 -119 328 587"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/investigate/dagre/board.exp.json

@@ -454,7 +454,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": false,
       "3d": false,
@@ -545,7 +545,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": false,
       "3d": false,

e2etests/testdata/stable/investigate/elk/board.exp.json

@@ -454,7 +454,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": false,
       "3d": false,
@@ -545,7 +545,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F0F3F9",
+      "fill": "#DEE1EB",
       "stroke": "#0D32B2",
       "shadow": false,
       "3d": false,

e2etests/testdata/stable/large_arch/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="3244" height="1780" viewBox="-100 -100 3244 1780"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/large_arch/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="1958" height="2718" viewBox="-88 -88 1958 2718"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/latex/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="913" height="929" viewBox="-100 -100 913 929"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/latex/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="833" height="1050" viewBox="-88 -88 833 1050"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/li1/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="579" height="752" viewBox="-100 -100 579 752"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/li1/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="579" height="752" viewBox="-88 -88 579 752"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/li2/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="445" height="728" viewBox="-100 -100 445 728"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/li2/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="445" height="728" viewBox="-88 -88 445 728"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/li3/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="547" height="1164" viewBox="-100 -100 547 1164"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/li3/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="547" height="1164" viewBox="-88 -88 547 1164"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/li4/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="1120" height="1028" viewBox="-100 -100 1120 1028"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/li4/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="1120" height="1028" viewBox="-88 -88 1120 1028"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/lone_h1/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="466" height="702" viewBox="-100 -100 466 702"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="466" height="702" viewBox="-88 -88 466 702"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/markdown/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="731" height="838" viewBox="-100 -100 731 838"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/markdown/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="731" height="838" viewBox="-88 -88 731 838"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/md_2space_newline/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="759" height="348" viewBox="-100 -100 759 348"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/md_2space_newline/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="809" height="398" viewBox="-88 -88 809 398"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/md_backslash_newline/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="759" height="348" viewBox="-100 -100 759 348"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/md_backslash_newline/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="809" height="398" viewBox="-88 -88 809 398"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/md_code_block_fenced/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="396" height="763" viewBox="-100 -100 396 763"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/md_code_block_fenced/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="396" height="763" viewBox="-88 -88 396 763"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/md_code_block_indented/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="412" height="803" viewBox="-100 -100 412 803"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/md_code_block_indented/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="412" height="803" viewBox="-88 -88 412 803"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/md_code_inline/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="313" height="676" viewBox="-100 -100 313 676"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/md_code_inline/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="313" height="676" viewBox="-88 -88 313 676"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/multiline_text/dagre/sketch.exp.svg

@@ -14,6 +14,7 @@ width="402" height="358" viewBox="-100 -100 402 358"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>

e2etests/testdata/stable/multiline_text/elk/sketch.exp.svg

@@ -14,6 +14,7 @@ width="402" height="358" viewBox="-88 -88 402 358"><style type="text/css">
 }
 .blend {
   mix-blend-mode: multiply;
+  opacity: 0.5;
 }
 
 ]]>