Merge branch 'master' into 120/pdf-export

ci/release/changelogs/next.md

@@ -1,5 +1,6 @@
 #### Features 🚀
 
+- Dark theme support! See [https://d2lang.com/tour/themes](https://d2lang.com/tour/themes).[#613](https://github.com/terrastruct/d2/pull/613)
 - Many non-Latin languages (e.g. Chinese, Japanese, Korean) are usable now that multi-byte characters are measured correctly. [#817](https://github.com/terrastruct/d2/pull/817)
 - Dimensions can be set on containers (layout engine dependent). [#845](https://github.com/terrastruct/d2/pull/845)
 
@@ -14,7 +15,9 @@
 #### Bugfixes ⛑️
 
 - Fixes edge case where layouts with dagre show a connection from the bottom side of shapes being slightly disconnected from the shape. [#820](https://github.com/terrastruct/d2/pull/820)
+- Bounding boxes weren't accounting for icons placed on the boundaries. [#879](https://github.com/terrastruct/d2/pull/879)
 - Fixes rare compiler bug when using underscores in edges to create objects across containers. [#824](https://github.com/terrastruct/d2/pull/824)
 - Fixes rare possibility of rendered connections being hidden or cut off. [#828](https://github.com/terrastruct/d2/pull/828)
 - Creating nested children within `sql_table` and `class` shapes are now prevented (caused confusion when accidentally done). [#834](https://github.com/terrastruct/d2/pull/834)
 - Fixes graph deserialization bug. [#837](https://github.com/terrastruct/d2/pull/837)
+- `steps` with non-map fields could cause panics. [#783](https://github.com/terrastruct/d2/pull/783)

ci/release/template/man/d2.1

@@ -66,6 +66,9 @@ Port listening address when used with
 .It Fl t , -theme Ar 0
 Set the diagram theme ID
 .Ns .
+.It Fl -dark-theme Ar -1
+the diagram dark theme ID. When left unset only the theme will be applied
+.Ns .
 .It Fl s , -sketch Ar false
 Renders the diagram to look like it was sketched by hand
 .Ns .

ci/sub

@@ -1 +1 @@
-Subproject commit 512bad5a958c5e33ba9b3e89dfac1bfd6002f98c
+Subproject commit cb8a9993d7e1d91815650c5baade7658622189b9

d2chaos/d2chaos_test.go

@@ -128,7 +128,7 @@ func test(t *testing.T, textPath, text string) {
 			t.Fatal(err)
 		}
 
-		_, err = d2exporter.Export(ctx, g, 0, nil)
+		_, err = d2exporter.Export(ctx, g, nil)
 		if err != nil {
 			t.Fatal(err)
 		}

d2compiler/compile.go

@@ -288,20 +288,28 @@ func (c *compiler) compileReserved(attrs *d2graph.Attributes, f *d2ir.Field) {
 		attrs.Height.Value = scalar.ScalarString()
 		attrs.Height.MapKey = f.LastPrimaryKey()
 	case "top":
-		_, err := strconv.Atoi(scalar.ScalarString())
+		v, err := strconv.Atoi(scalar.ScalarString())
 		if err != nil {
 			c.errorf(scalar, "non-integer top %#v: %s", scalar.ScalarString(), err)
 			return
 		}
+		if v < 0 {
+			c.errorf(scalar, "top must be a non-negative integer: %#v", scalar.ScalarString())
+			return
+		}
 		attrs.Top = &d2graph.Scalar{}
 		attrs.Top.Value = scalar.ScalarString()
 		attrs.Top.MapKey = f.LastPrimaryKey()
 	case "left":
-		_, err := strconv.Atoi(scalar.ScalarString())
+		v, err := strconv.Atoi(scalar.ScalarString())
 		if err != nil {
 			c.errorf(scalar, "non-integer left %#v: %s", scalar.ScalarString(), err)
 			return
 		}
+		if v < 0 {
+			c.errorf(scalar, "left must be a non-negative integer: %#v", scalar.ScalarString())
+			return
+		}
 		attrs.Left = &d2graph.Scalar{}
 		attrs.Left.Value = scalar.ScalarString()
 		attrs.Left.MapKey = f.LastPrimaryKey()
@@ -419,7 +427,7 @@ func (c *compiler) compileEdge(obj *d2graph.Object, e *d2ir.Edge) {
 	edge.Attributes.Label.MapKey = e.LastPrimaryKey()
 	for _, er := range e.References {
 		scopeObjIDA := d2ir.IDA(er.Context.ScopeMap)
-		scopeObj, _ := edge.Src.Graph.Root.HasChildIDVal(d2graphIDA(scopeObjIDA))
+		scopeObj, _ := edge.Src.Graph.Root.HasChildIDVal(scopeObjIDA)
 		edge.References = append(edge.References, d2graph.EdgeReference{
 			Edge:            er.Context.Edge,
 			MapKey:          er.Context.Key,

d2compiler/compile_test.go

@@ -124,6 +124,15 @@ x: {
 				tassert.Equal(t, "200", g.Objects[0].Attributes.Top.Value)
 			},
 		},
+		{
+			name: "positions_negative",
+			text: `hey: {
+	top: 200
+	left: -200
+}
+`,
+			expErr: `d2/testdata/d2compiler/TestCompile/positions_negative.d2:3:8: left must be a non-negative integer: "-200"`,
+		},
 		{
 			name: "equal_dimensions_on_circle",
 
@@ -1765,6 +1774,33 @@ dst.id <-> src.dst_id
 				assert.String(t, "sequence_diagram", g.Objects[0].Attributes.Shape.Value)
 			},
 		},
+		{
+			name: "sequence-timestamp",
+
+			text: `shape: sequence_diagram
+a
+b
+
+"04:20,11:20": {
+  "loop through each table": {
+    a."start_time = datetime.datetime.now"
+    a -> b
+  }
+}
+`,
+			assertions: func(t *testing.T, g *d2graph.Graph) {
+				tassert.Equal(t, 1, len(g.Edges))
+				tassert.Equal(t, 5, len(g.Objects))
+				tassert.Equal(t, "a", g.Objects[0].ID)
+				tassert.Equal(t, "b", g.Objects[1].ID)
+				tassert.Equal(t, `"04:20,11:20"`, g.Objects[2].ID)
+				tassert.Equal(t, `loop through each table`, g.Objects[3].ID)
+				tassert.Equal(t, 1, len(g.Objects[0].ChildrenArray))
+				tassert.Equal(t, 0, len(g.Objects[1].ChildrenArray))
+				tassert.Equal(t, 1, len(g.Objects[2].ChildrenArray))
+				tassert.True(t, g.Edges[0].ContainedBy(g.Objects[3]))
+			},
+		},
 		{
 			name: "root_sequence",
 

d2exporter/export.go

@@ -9,13 +9,10 @@ import (
 	"oss.terrastruct.com/d2/d2graph"
 	"oss.terrastruct.com/d2/d2renderers/d2fonts"
 	"oss.terrastruct.com/d2/d2target"
-	"oss.terrastruct.com/d2/d2themes"
+	"oss.terrastruct.com/d2/lib/color"
-	"oss.terrastruct.com/d2/d2themes/d2themescatalog"
 )
 
-func Export(ctx context.Context, g *d2graph.Graph, themeID int64, fontFamily *d2fonts.FontFamily) (*d2target.Diagram, error) {
+func Export(ctx context.Context, g *d2graph.Graph, fontFamily *d2fonts.FontFamily) (*d2target.Diagram, error) {
-	theme := d2themescatalog.Find(themeID)
-
 	diagram := d2target.NewDiagram()
 	diagram.Name = g.Name
 	if fontFamily == nil {
@@ -25,27 +22,27 @@ func Export(ctx context.Context, g *d2graph.Graph, themeID int64, fontFamily *d2
 
 	diagram.Shapes = make([]d2target.Shape, len(g.Objects))
 	for i := range g.Objects {
-		diagram.Shapes[i] = toShape(g.Objects[i], &theme)
+		diagram.Shapes[i] = toShape(g.Objects[i])
 	}
 
 	diagram.Connections = make([]d2target.Connection, len(g.Edges))
 	for i := range g.Edges {
-		diagram.Connections[i] = toConnection(g.Edges[i], &theme)
+		diagram.Connections[i] = toConnection(g.Edges[i])
 	}
 
 	return diagram, nil
 }
 
-func applyTheme(shape *d2target.Shape, obj *d2graph.Object, theme *d2themes.Theme) {
+func applyTheme(shape *d2target.Shape, obj *d2graph.Object) {
-	shape.Stroke = obj.GetStroke(theme, shape.StrokeDash)
+	shape.Stroke = obj.GetStroke(shape.StrokeDash)
-	shape.Fill = obj.GetFill(theme)
+	shape.Fill = obj.GetFill()
 	if obj.Attributes.Shape.Value == d2target.ShapeText {
-		shape.Color = theme.Colors.Neutrals.N1
+		shape.Color = color.N1
 	}
 	if obj.Attributes.Shape.Value == d2target.ShapeSQLTable || obj.Attributes.Shape.Value == d2target.ShapeClass {
-		shape.PrimaryAccentColor = theme.Colors.B2
+		shape.PrimaryAccentColor = color.B2
-		shape.SecondaryAccentColor = theme.Colors.AA2
+		shape.SecondaryAccentColor = color.AA2
-		shape.NeutralAccentColor = theme.Colors.Neutrals.N2
+		shape.NeutralAccentColor = color.N2
 	}
 }
 
@@ -100,7 +97,7 @@ func applyStyles(shape *d2target.Shape, obj *d2graph.Object) {
 	}
 }
 
-func toShape(obj *d2graph.Object, theme *d2themes.Theme) d2target.Shape {
+func toShape(obj *d2graph.Object) d2target.Shape {
 	shape := d2target.BaseShape()
 	shape.SetType(obj.Attributes.Shape.Value)
 	shape.ID = obj.AbsID()
@@ -125,8 +122,8 @@ func toShape(obj *d2graph.Object, theme *d2themes.Theme) d2target.Shape {
 	}
 
 	applyStyles(shape, obj)
-	applyTheme(shape, obj, theme)
+	applyTheme(shape, obj)
-	shape.Color = text.GetColor(theme, shape.Italic)
+	shape.Color = text.GetColor(shape.Italic)
 	applyStyles(shape, obj)
 
 	switch obj.Attributes.Shape.Value {
@@ -166,7 +163,7 @@ func toShape(obj *d2graph.Object, theme *d2themes.Theme) d2target.Shape {
 	return *shape
 }
 
-func toConnection(edge *d2graph.Edge, theme *d2themes.Theme) d2target.Connection {
+func toConnection(edge *d2graph.Edge) d2target.Connection {
 	connection := d2target.BaseConnection()
 	connection.ID = edge.AbsID()
 	connection.ZIndex = edge.ZIndex
@@ -214,7 +211,7 @@ func toConnection(edge *d2graph.Edge, theme *d2themes.Theme) d2target.Connection
 	if edge.Attributes.Style.StrokeDash != nil {
 		connection.StrokeDash, _ = strconv.ParseFloat(edge.Attributes.Style.StrokeDash.Value, 64)
 	}
-	connection.Stroke = edge.GetStroke(theme, connection.StrokeDash)
+	connection.Stroke = edge.GetStroke(connection.StrokeDash)
 	if edge.Attributes.Style.Stroke != nil {
 		connection.Stroke = edge.Attributes.Style.Stroke.Value
 	}
@@ -245,7 +242,7 @@ func toConnection(edge *d2graph.Edge, theme *d2themes.Theme) d2target.Connection
 		connection.Italic, _ = strconv.ParseBool(edge.Attributes.Style.Italic.Value)
 	}
 
-	connection.Color = text.GetColor(theme, connection.Italic)
+	connection.Color = text.GetColor(connection.Italic)
 	if edge.Attributes.Style.FontColor != nil {
 		connection.Color = edge.Attributes.Style.FontColor.Value
 	}

d2exporter/export_test.go

@@ -18,16 +18,14 @@ import (
 	"oss.terrastruct.com/d2/d2layouts/d2dagrelayout"
 	"oss.terrastruct.com/d2/d2layouts/d2sequence"
 	"oss.terrastruct.com/d2/d2target"
-	"oss.terrastruct.com/d2/d2themes/d2themescatalog"
 	"oss.terrastruct.com/d2/lib/geo"
 	"oss.terrastruct.com/d2/lib/log"
 	"oss.terrastruct.com/d2/lib/textmeasure"
 )
 
 type testCase struct {
-	name    string
+	name string
-	dsl     string
+	dsl  string
-	themeID int64
 
 	assertions func(t *testing.T, d *d2target.Diagram)
 }
@@ -132,8 +130,7 @@ func testConnection(t *testing.T) {
 		{
 			// This is a regression test where a connection with stroke-dash of 0 on terrastruct flagship theme would have a diff color
 			// than a connection without stroke dash
-			themeID: d2themescatalog.FlagshipTerrastruct.ID,
+			name: "theme_stroke-dash",
-			name:    "theme_stroke-dash",
 			dsl: `x -> y: { style.stroke-dash: 0 }
 x -> y
 `,
@@ -168,16 +165,14 @@ func testLabel(t *testing.T) {
 func testTheme(t *testing.T) {
 	tcs := []testCase{
 		{
-			name:    "shape_without_bold",
+			name: "shape_without_bold",
-			themeID: d2themescatalog.FlagshipTerrastruct.ID,
 			dsl: `x: {
 	style.bold: false
 }
 `,
 		},
 		{
-			name:    "shape_with_italic",
+			name: "shape_with_italic",
-			themeID: d2themescatalog.FlagshipTerrastruct.ID,
 			dsl: `x: {
 	style.italic: true
 }
@@ -187,7 +182,6 @@ func testTheme(t *testing.T) {
 			name: "connection_without_italic",
 			dsl: `x -> y: asdf { style.italic: false }
 `,
-			themeID: d2themescatalog.FlagshipTerrastruct.ID,
 		},
 		{
 			name: "connection_with_italic",
@@ -195,7 +189,6 @@ func testTheme(t *testing.T) {
   style.italic: true
 }
 `,
-			themeID: d2themescatalog.FlagshipTerrastruct.ID,
 		},
 		{
 			name: "connection_with_bold",
@@ -203,7 +196,6 @@ func testTheme(t *testing.T) {
   style.bold: true
 }
 `,
-			themeID: d2themescatalog.FlagshipTerrastruct.ID,
 		},
 	}
 
@@ -244,7 +236,7 @@ func run(t *testing.T, tc testCase) {
 		t.Fatal(err)
 	}
 
-	got, err := d2exporter.Export(ctx, g, tc.themeID, nil)
+	got, err := d2exporter.Export(ctx, g, nil)
 	if err != nil {
 		t.Fatal(err)
 	}

d2graph/d2graph.go

@@ -17,7 +17,7 @@ import (
 	"oss.terrastruct.com/d2/d2renderers/d2fonts"
 	"oss.terrastruct.com/d2/d2renderers/d2latex"
 	"oss.terrastruct.com/d2/d2target"
-	"oss.terrastruct.com/d2/d2themes"
+	"oss.terrastruct.com/d2/lib/color"
 	"oss.terrastruct.com/d2/lib/geo"
 	"oss.terrastruct.com/d2/lib/shape"
 	"oss.terrastruct.com/d2/lib/textmeasure"
@@ -336,14 +336,14 @@ func (l ContainerLevel) LabelSize() int {
 	return d2fonts.FONT_SIZE_M
 }
 
-func (obj *Object) GetFill(theme *d2themes.Theme) string {
+func (obj *Object) GetFill() string {
 	level := int(obj.Level())
 	if obj.IsSequenceDiagramNote() {
-		return theme.Colors.Neutrals.N7
+		return color.N7
 	} else if obj.IsSequenceDiagramGroup() {
-		return theme.Colors.Neutrals.N5
+		return color.N5
 	} else if obj.Parent.IsSequenceDiagram() {
-		return theme.Colors.B5
+		return color.B5
 	}
 
 	// fill for spans
@@ -351,19 +351,19 @@ func (obj *Object) GetFill(theme *d2themes.Theme) string {
 	if sd != nil {
 		level -= int(sd.Level())
 		if level == 1 {
-			return theme.Colors.B3
+			return color.B3
 		} else if level == 2 {
-			return theme.Colors.B4
+			return color.B4
 		} else if level == 3 {
-			return theme.Colors.B5
+			return color.B5
 		} else if level == 4 {
-			return theme.Colors.Neutrals.N6
+			return color.N6
 		}
-		return theme.Colors.Neutrals.N7
+		return color.N7
 	}
 
 	if obj.IsSequenceDiagram() {
-		return theme.Colors.Neutrals.N7
+		return color.N7
 	}
 
 	shape := obj.Attributes.Shape.Value
@@ -371,65 +371,65 @@ func (obj *Object) GetFill(theme *d2themes.Theme) string {
 	if shape == "" || strings.EqualFold(shape, d2target.ShapeSquare) || strings.EqualFold(shape, d2target.ShapeCircle) || strings.EqualFold(shape, d2target.ShapeOval) || strings.EqualFold(shape, d2target.ShapeRectangle) {
 		if level == 1 {
 			if !obj.IsContainer() {
-				return theme.Colors.B6
+				return color.B6
 			}
-			return theme.Colors.B4
+			return color.B4
 		} else if level == 2 {
-			return theme.Colors.B5
+			return color.B5
 		} else if level == 3 {
-			return theme.Colors.B6
+			return color.B6
 		}
-		return theme.Colors.Neutrals.N7
+		return color.N7
 	}
 
 	if strings.EqualFold(shape, d2target.ShapeCylinder) || strings.EqualFold(shape, d2target.ShapeStoredData) || strings.EqualFold(shape, d2target.ShapePackage) {
 		if level == 1 {
-			return theme.Colors.AA4
+			return color.AA4
 		}
-		return theme.Colors.AA5
+		return color.AA5
 	}
 
 	if strings.EqualFold(shape, d2target.ShapeStep) || strings.EqualFold(shape, d2target.ShapePage) || strings.EqualFold(shape, d2target.ShapeDocument) {
 		if level == 1 {
-			return theme.Colors.AB4
+			return color.AB4
 		}
-		return theme.Colors.AB5
+		return color.AB5
 	}
 
 	if strings.EqualFold(shape, d2target.ShapePerson) {
-		return theme.Colors.B3
+		return color.B3
 	}
 	if strings.EqualFold(shape, d2target.ShapeDiamond) {
-		return theme.Colors.Neutrals.N4
+		return color.N4
 	}
 	if strings.EqualFold(shape, d2target.ShapeCloud) || strings.EqualFold(shape, d2target.ShapeCallout) {
-		return theme.Colors.Neutrals.N7
+		return color.N7
 	}
 	if strings.EqualFold(shape, d2target.ShapeQueue) || strings.EqualFold(shape, d2target.ShapeParallelogram) || strings.EqualFold(shape, d2target.ShapeHexagon) {
-		return theme.Colors.Neutrals.N5
+		return color.N5
 	}
 
 	if strings.EqualFold(shape, d2target.ShapeSQLTable) || strings.EqualFold(shape, d2target.ShapeClass) {
-		return theme.Colors.Neutrals.N1
+		return color.N1
 	}
 
-	return theme.Colors.Neutrals.N7
+	return color.N7
 }
 
-func (obj *Object) GetStroke(theme *d2themes.Theme, dashGapSize interface{}) string {
+func (obj *Object) GetStroke(dashGapSize interface{}) string {
 	shape := obj.Attributes.Shape.Value
 	if strings.EqualFold(shape, d2target.ShapeCode) ||
 		strings.EqualFold(shape, d2target.ShapeText) {
-		return theme.Colors.Neutrals.N1
+		return color.N1
 	}
 	if strings.EqualFold(shape, d2target.ShapeClass) ||
 		strings.EqualFold(shape, d2target.ShapeSQLTable) {
-		return theme.Colors.Neutrals.N7
+		return color.N7
 	}
 	if dashGapSize != 0.0 {
-		return theme.Colors.B2
+		return color.B2
 	}
-	return theme.Colors.B1
+	return color.B1
 }
 
 func (obj *Object) Level() ContainerLevel {
@@ -965,11 +965,11 @@ type EdgeReference struct {
 	ScopeObj        *Object    `json:"-"`
 }
 
-func (e *Edge) GetStroke(theme *d2themes.Theme, dashGapSize interface{}) string {
+func (e *Edge) GetStroke(dashGapSize interface{}) string {
 	if dashGapSize != 0.0 {
-		return theme.Colors.B2
+		return color.B2
 	}
-	return theme.Colors.B1
+	return color.B1
 }
 
 func (e *Edge) ArrowString() string {
@@ -1586,3 +1586,13 @@ func (g *Graph) SortEdgesByAST() {
 	})
 	g.Edges = edges
 }
+
+func (obj *Object) IsDescendantOf(ancestor *Object) bool {
+	if obj == ancestor {
+		return true
+	}
+	if obj.Parent == nil {
+		return false
+	}
+	return obj.Parent.IsDescendantOf(ancestor)
+}

d2ir/compile.go

@@ -38,7 +38,8 @@ func (c *compiler) compileScenarios(m *Map) {
 	}
 
 	for _, sf := range scenarios.Fields {
-		if sf.Map() == nil {
+		if sf.Map() == nil || sf.Primary() != nil {
+			c.errorf(sf.References[0].Context.Key, "invalid scenario")
 			continue
 		}
 		base := m.CopyBase(sf)
@@ -59,8 +60,9 @@ func (c *compiler) compileSteps(m *Map) {
 		return
 	}
 	for i, sf := range steps.Fields {
-		if sf.Map() == nil {
+		if sf.Map() == nil || sf.Primary() != nil {
-			continue
+			c.errorf(sf.References[0].Context.Key, "invalid step")
+			break
 		}
 		var base *Map
 		if i == 0 {

d2ir/compile_test.go

@@ -420,6 +420,22 @@ steps: {
 				assertQuery(t, m, 0, 0, nil, "steps.nuclear.quiche")
 			},
 		},
+		{
+			name: "steps_panic",
+			run: func(t testing.TB) {
+				_, err := compile(t, `steps: {
+  shape: sql_table
+  id: int {constraint: primary_key}
+}
+scenarios: {
+  shape: sql_table
+  hey: int {constraint: primary_key}
+}`)
+				assert.ErrorString(t, err, `TestCompile/steps/steps_panic.d2:6:3: invalid scenario
+TestCompile/steps/steps_panic.d2:7:3: invalid scenario
+TestCompile/steps/steps_panic.d2:2:3: invalid step`)
+			},
+		},
 		{
 			name: "recursive",
 			run: func(t testing.TB) {

d2layouts/d2elklayout/NOTICE.txt

@@ -1,4 +1,5 @@
 elk.js comes from https://github.com/kieler/elkjs
+Currently on v0.8.2
 
 Attribution:
 

d2lib/d2.go

@@ -29,7 +29,6 @@ type CompileOptions struct {
 	// - pre-measured (web setting)
 	// TODO maybe some will want to configure code font too, but that's much lower priority
 	FontFamily *d2fonts.FontFamily
-	ThemeID    int64
 }
 
 func Compile(ctx context.Context, input string, opts *CompileOptions) (*d2target.Diagram, *d2graph.Graph, error) {
@@ -76,7 +75,7 @@ func compile(ctx context.Context, g *d2graph.Graph, opts *CompileOptions) (*d2ta
 		}
 	}
 
-	d, err := d2exporter.Export(ctx, g, opts.ThemeID, opts.FontFamily)
+	d, err := d2exporter.Export(ctx, g, opts.FontFamily)
 	if err != nil {
 		return nil, err
 	}

d2oracle/edit.go

@@ -895,6 +895,7 @@ func deleteObject(g *d2graph.Graph, key *d2ast.KeyPath, obj *d2graph.Object) (*d
 			})
 			if obj.Attributes.Shape.Value == d2target.ShapeSQLTable || obj.Attributes.Shape.Value == d2target.ShapeClass {
 				ref.MapKey.Value.Map = nil
+				ref.MapKey.Primary = ref.MapKey.Value.ScalarBox()
 			} else if len(withoutSpecial) == 0 {
 				hoistRefChildren(g, key, ref)
 				deleteFromMap(ref.Scope, ref.MapKey)
@@ -1538,7 +1539,7 @@ func updateNear(prevG, g *d2graph.Graph, from, to *string) error {
 			if len(n.MapKey.Key.Path) == 0 {
 				continue
 			}
-			if n.MapKey.Key.Path[0].Unbox().ScalarString() == "near" {
+			if n.MapKey.Key.Path[len(n.MapKey.Key.Path)-1].Unbox().ScalarString() == "near" {
 				k := n.MapKey.Value.ScalarBox().Unbox().ScalarString()
 				if strings.EqualFold(k, *from) && to == nil {
 					deleteFromMap(obj.Map, n.MapKey)

d2oracle/edit_test.go

@@ -3824,6 +3824,37 @@ y
 
 			exp: `x
 y
+`,
+		},
+		{
+			name: "delete_container_of_near",
+
+			text: `direction: down
+first input -> start game -> game loop
+
+game loop: {
+  direction: down
+  input -> increase bird top velocity
+
+  move bird -> move pipes -> render
+
+  render -> no collision -> wait 16 milliseconds -> move bird
+  render -> collision detected -> game over
+  no collision.near: game loop.collision detected
+}
+`,
+			key: `game loop`,
+
+			exp: `direction: down
+first input -> start game
+
+input -> increase bird top velocity
+
+move bird -> move pipes -> render
+
+render -> no collision -> wait 16 milliseconds -> move bird
+render -> collision detected -> game over
+no collision.near: collision detected
 `,
 		},
 		{
@@ -4768,6 +4799,40 @@ A -> B
 			key: `x.left`,
 
 			exp: `x
+`,
+		},
+		{
+			name: "chaos_1",
+
+			text: `cm: {shape: cylinder}
+cm <-> cm: {source-arrowhead.shape: cf-one-required}
+mt: z
+cdpdxz
+
+bymdyk: hdzuj {shape: class}
+
+bymdyk <-> bymdyk
+cm
+
+cm <-> bymdyk: {
+  source-arrowhead.shape: cf-many-required
+  target-arrowhead.shape: arrow
+}
+bymdyk <-> cdpdxz
+
+bymdyk -> cm: nk {
+  target-arrowhead.shape: diamond
+  target-arrowhead.label: 1
+}
+`,
+			key: `bymdyk`,
+
+			exp: `cm: {shape: cylinder}
+cm <-> cm: {source-arrowhead.shape: cf-one-required}
+mt: z
+cdpdxz
+
+cm
 `,
 		},
 	}

d2plugin/plugin_elk.go

@@ -89,6 +89,7 @@ func (p elkPlugin) Info(ctx context.Context) (*PluginInfo, error) {
 		Type: "bundled",
 		Features: []PluginFeature{
 			CONTAINER_DIMENSIONS,
+			DESCENDANT_EDGES,
 		},
 		ShortHelp: "Eclipse Layout Kernel (ELK) with the Layered algorithm.",
 		LongHelp: fmt.Sprintf(`ELK is a layout engine offered by Eclipse.

d2plugin/plugin_features.go

@@ -18,6 +18,9 @@ const CONTAINER_DIMENSIONS PluginFeature = "container_dimensions"
 // When this is true, objects can specify their `top` and `left` keywords
 const TOP_LEFT PluginFeature = "top_left"
 
+// When this is true, containers can have connections to descendants
+const DESCENDANT_EDGES PluginFeature = "descendant_edges"
+
 func FeatureSupportCheck(info *PluginInfo, g *d2graph.Graph) error {
 	// Older version of plugin. Skip checking.
 	if info.Features == nil {
@@ -50,5 +53,22 @@ func FeatureSupportCheck(info *PluginInfo, g *d2graph.Graph) error {
 			}
 		}
 	}
+	if _, ok := featureMap[DESCENDANT_EDGES]; !ok {
+		for _, e := range g.Edges {
+			// descendant edges are ok in sequence diagrams
+			if e.Src.OuterSequenceDiagram() != nil || e.Dst.OuterSequenceDiagram() != nil {
+				continue
+			}
+			if !e.Src.IsContainer() && !e.Dst.IsContainer() {
+				continue
+			}
+			if e.Src == e.Dst {
+				return fmt.Errorf(`Connection "%s" is a self loop on a container, but layout engine "%s" does not support this.`, e.AbsID(), info.Name)
+			}
+			if e.Src.IsDescendantOf(e.Dst) || e.Dst.IsDescendantOf(e.Src) {
+				return fmt.Errorf(`Connection "%s" goes from a container to a descendant, but layout engine "%s" does not support this.`, e.AbsID(), info.Name)
+			}
+		}
+	}
 	return nil
 }

d2renderers/d2sketch/sketch.go

@@ -1,6 +1,7 @@
 package d2sketch
 
 import (
+	"bytes"
 	"encoding/json"
 	"fmt"
 	"regexp"
@@ -11,21 +12,23 @@ import (
 	"github.com/dop251/goja"
 
 	"oss.terrastruct.com/d2/d2target"
+	"oss.terrastruct.com/d2/d2themes"
+	"oss.terrastruct.com/d2/lib/color"
 	"oss.terrastruct.com/d2/lib/geo"
 	"oss.terrastruct.com/d2/lib/label"
 	"oss.terrastruct.com/d2/lib/svg"
 	"oss.terrastruct.com/util-go/go2"
 )
 
-//go:embed fillpattern.svg
-var fillPattern string
-
 //go:embed rough.js
 var roughJS string
 
 //go:embed setup.js
 var setupJS string
 
+//go:embed streaks.txt
+var streaks string
+
 type Runner goja.Runtime
 
 var baseRoughProps = `fillWeight: 2.0,
@@ -36,6 +39,11 @@ seed: 1,`
 
 var floatRE = regexp.MustCompile(`(\d+)\.(\d+)`)
 
+const (
+	BG_COLOR = color.N7
+	FG_COLOR = color.N1
+)
+
 func (r *Runner) run(js string) (goja.Value, error) {
 	vm := (*goja.Runtime)(r)
 	return vm.RunString(js)
@@ -53,78 +61,107 @@ func InitSketchVM() (*Runner, error) {
 	return &r, nil
 }
 
-// DefineFillPattern adds a reusable pattern that is overlayed on shapes with
+// DefineFillPatterns adds reusable patterns that are overlayed on shapes with
 // fill. This gives it a subtle streaky effect that subtly looks hand-drawn but
 // not distractingly so.
-func DefineFillPattern() string {
+func DefineFillPatterns(buf *bytes.Buffer) {
-	return fmt.Sprintf(`<defs>
+	source := buf.String()
-  <pattern id="streaks"
+	fmt.Fprint(buf, "<defs>")
-           x="0" y="0" width="100" height="100"
+
-           patternUnits="userSpaceOnUse" >
+	defineFillPattern(buf, source, "bright", "rgba(0, 0, 0, 0.1)")
-      %s
+	defineFillPattern(buf, source, "normal", "rgba(0, 0, 0, 0.16)")
-  </pattern>
+	defineFillPattern(buf, source, "dark", "rgba(0, 0, 0, 0.32)")
-</defs>`, fillPattern)
+	defineFillPattern(buf, source, "darker", "rgba(255, 255, 255, 0.24)")
+
+	fmt.Fprint(buf, "</defs>")
+}
+
+func defineFillPattern(buf *bytes.Buffer, source string, luminanceCategory, fill string) {
+	trigger := fmt.Sprintf(`url(#streaks-%s)`, luminanceCategory)
+	if strings.Contains(source, trigger) {
+		fmt.Fprintf(buf, streaks, luminanceCategory, fill)
+	}
 }
 
 func Rect(r *Runner, shape d2target.Shape) (string, error) {
 	js := fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %d, {
-		fill: "%s",
+		fill: "#000",
-		stroke: "%s",
+		stroke: "#000",
 		strokeWidth: %d,
 		%s
-	});`, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
+	});`, shape.Width, shape.Height, shape.StrokeWidth, baseRoughProps)
 	paths, err := computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
 	output := ""
+	pathEl := d2themes.NewThemableElement("path")
+	pathEl.SetTranslate(float64(shape.Pos.X), float64(shape.Pos.Y))
+	pathEl.Fill, pathEl.Stroke = d2themes.ShapeTheme(shape)
+	pathEl.ClassName = "shape"
+	pathEl.Style = shape.CSSStyle()
 	for _, p := range paths {
-		output += fmt.Sprintf(
+		pathEl.D = p
-			`<path class="shape" transform="translate(%d %d)" d="%s" style="%s" />`,
+		output += pathEl.Render()
-			shape.Pos.X, shape.Pos.Y, p, shape.CSSStyle(),
-		)
 	}
-	output += fmt.Sprintf(
+
-		`<rect class="sketch-overlay" transform="translate(%d %d)" width="%d" height="%d" />`,
+	sketchOEl := d2themes.NewThemableElement("rect")
-		shape.Pos.X, shape.Pos.Y, shape.Width, shape.Height,
+	sketchOEl.SetTranslate(float64(shape.Pos.X), float64(shape.Pos.Y))
-	)
+	sketchOEl.Width = float64(shape.Width)
+	sketchOEl.Height = float64(shape.Height)
+	renderedSO, err := d2themes.NewThemableSketchOverlay(sketchOEl, pathEl.Fill).Render()
+	if err != nil {
+		return "", err
+	}
+	output += renderedSO
+
 	return output, nil
 }
 
 func DoubleRect(r *Runner, shape d2target.Shape) (string, error) {
 	jsBigRect := fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %d, {
-		fill: "%s",
+		fill: "#000",
-		stroke: "%s",
+		stroke: "#000",
 		strokeWidth: %d,
 		%s
-	});`, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
+	});`, shape.Width, shape.Height, shape.StrokeWidth, baseRoughProps)
 	pathsBigRect, err := computeRoughPathData(r, jsBigRect)
 	if err != nil {
 		return "", err
 	}
 	jsSmallRect := fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %d, {
-		fill: "%s",
+		fill: "#000",
-		stroke: "%s",
+		stroke: "#000",
 		strokeWidth: %d,
 		%s
-	});`, shape.Width-d2target.INNER_BORDER_OFFSET*2, shape.Height-d2target.INNER_BORDER_OFFSET*2, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
+	});`, shape.Width-d2target.INNER_BORDER_OFFSET*2, shape.Height-d2target.INNER_BORDER_OFFSET*2, shape.StrokeWidth, baseRoughProps)
 	pathsSmallRect, err := computeRoughPathData(r, jsSmallRect)
 	if err != nil {
 		return "", err
 	}
+
 	output := ""
+
+	pathEl := d2themes.NewThemableElement("path")
+	pathEl.SetTranslate(float64(shape.Pos.X), float64(shape.Pos.Y))
+	pathEl.Fill, pathEl.Stroke = d2themes.ShapeTheme(shape)
+	pathEl.ClassName = "shape"
+	pathEl.Style = shape.CSSStyle()
 	for _, p := range pathsBigRect {
-		output += fmt.Sprintf(
+		pathEl.D = p
-			`<path class="shape" transform="translate(%d %d)" d="%s" style="%s" />`,
+		output += pathEl.Render()
-			shape.Pos.X, shape.Pos.Y, p, shape.CSSStyle(),
-		)
 	}
+
+	pathEl = d2themes.NewThemableElement("path")
+	pathEl.SetTranslate(float64(shape.Pos.X+d2target.INNER_BORDER_OFFSET), float64(shape.Pos.Y+d2target.INNER_BORDER_OFFSET))
+	pathEl.Fill, pathEl.Stroke = d2themes.ShapeTheme(shape)
+	pathEl.ClassName = "shape"
+	pathEl.Style = shape.CSSStyle()
 	for _, p := range pathsSmallRect {
-		output += fmt.Sprintf(
+		pathEl.D = p
-			`<path class="shape" transform="translate(%d %d)" d="%s" style="%s" />`,
+		output += pathEl.Render()
-			shape.Pos.X+d2target.INNER_BORDER_OFFSET, shape.Pos.Y+d2target.INNER_BORDER_OFFSET, p, shape.CSSStyle(),
-		)
 	}
+
 	output += fmt.Sprintf(
 		`<rect class="sketch-overlay" transform="translate(%d %d)" width="%d" height="%d" />`,
 		shape.Pos.X, shape.Pos.Y, shape.Width, shape.Height,
@@ -134,42 +171,55 @@ func DoubleRect(r *Runner, shape d2target.Shape) (string, error) {
 
 func Oval(r *Runner, shape d2target.Shape) (string, error) {
 	js := fmt.Sprintf(`node = rc.ellipse(%d, %d, %d, %d, {
-		fill: "%s",
+		fill: "#000",
-		stroke: "%s",
+		stroke: "#000",
 		strokeWidth: %d,
 		%s
-	});`, shape.Width/2, shape.Height/2, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
+	});`, shape.Width/2, shape.Height/2, shape.Width, shape.Height, shape.StrokeWidth, baseRoughProps)
 	paths, err := computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
 	output := ""
+	pathEl := d2themes.NewThemableElement("path")
+	pathEl.SetTranslate(float64(shape.Pos.X), float64(shape.Pos.Y))
+	pathEl.Fill, pathEl.Stroke = d2themes.ShapeTheme(shape)
+	pathEl.ClassName = "shape"
+	pathEl.Style = shape.CSSStyle()
 	for _, p := range paths {
-		output += fmt.Sprintf(
+		pathEl.D = p
-			`<path class="shape" transform="translate(%d %d)" d="%s" style="%s" />`,
+		output += pathEl.Render()
-			shape.Pos.X, shape.Pos.Y, p, shape.CSSStyle(),
-		)
 	}
-	output += fmt.Sprintf(
+
-		`<ellipse class="sketch-overlay" transform="translate(%d %d)" rx="%d" ry="%d" />`,
+	soElement := d2themes.NewThemableElement("ellipse")
-		shape.Pos.X+shape.Width/2, shape.Pos.Y+shape.Height/2, shape.Width/2, shape.Height/2,
+	soElement.SetTranslate(float64(shape.Pos.X+shape.Width/2), float64(shape.Pos.Y+shape.Height/2))
-	)
+	soElement.Rx = float64(shape.Width / 2)
+	soElement.Ry = float64(shape.Height / 2)
+	renderedSO, err := d2themes.NewThemableSketchOverlay(
+		soElement,
+		pathEl.Fill,
+	).Render()
+	if err != nil {
+		return "", err
+	}
+	output += renderedSO
+
 	return output, nil
 }
 
 func DoubleOval(r *Runner, shape d2target.Shape) (string, error) {
 	jsBigCircle := fmt.Sprintf(`node = rc.ellipse(%d, %d, %d, %d, {
-		fill: "%s",
+		fill: "#000",
-		stroke: "%s",
+		stroke: "#000",
 		strokeWidth: %d,
 		%s
-	});`, shape.Width/2, shape.Height/2, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
+	});`, shape.Width/2, shape.Height/2, shape.Width, shape.Height, shape.StrokeWidth, baseRoughProps)
 	jsSmallCircle := fmt.Sprintf(`node = rc.ellipse(%d, %d, %d, %d, {
-		fill: "%s",
+		fill: "#000",
-		stroke: "%s",
+		stroke: "#000",
 		strokeWidth: %d,
 		%s
-	});`, shape.Width/2, shape.Height/2, shape.Width-d2target.INNER_BORDER_OFFSET*2, shape.Height-d2target.INNER_BORDER_OFFSET*2, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
+	});`, shape.Width/2, shape.Height/2, shape.Width-d2target.INNER_BORDER_OFFSET*2, shape.Height-d2target.INNER_BORDER_OFFSET*2, shape.StrokeWidth, baseRoughProps)
 	pathsBigCircle, err := computeRoughPathData(r, jsBigCircle)
 	if err != nil {
 		return "", err
@@ -178,19 +228,29 @@ func DoubleOval(r *Runner, shape d2target.Shape) (string, error) {
 	if err != nil {
 		return "", err
 	}
+
 	output := ""
+
+	pathEl := d2themes.NewThemableElement("path")
+	pathEl.SetTranslate(float64(shape.Pos.X), float64(shape.Pos.Y))
+	pathEl.Fill, pathEl.Stroke = d2themes.ShapeTheme(shape)
+	pathEl.ClassName = "shape"
+	pathEl.Style = shape.CSSStyle()
 	for _, p := range pathsBigCircle {
-		output += fmt.Sprintf(
+		pathEl.D = p
-			`<path class="shape" transform="translate(%d %d)" d="%s" style="%s" />`,
+		output += pathEl.Render()
-			shape.Pos.X, shape.Pos.Y, p, shape.CSSStyle(),
-		)
 	}
+
+	pathEl = d2themes.NewThemableElement("path")
+	pathEl.SetTranslate(float64(shape.Pos.X), float64(shape.Pos.Y))
+	pathEl.Fill, pathEl.Stroke = d2themes.ShapeTheme(shape)
+	pathEl.ClassName = "shape"
+	pathEl.Style = shape.CSSStyle()
 	for _, p := range pathsSmallCircle {
-		output += fmt.Sprintf(
+		pathEl.D = p
-			`<path class="shape" transform="translate(%d %d)" d="%s" style="%s" />`,
+		output += pathEl.Render()
-			shape.Pos.X, shape.Pos.Y, p, shape.CSSStyle(),
-		)
 	}
+
 	output += fmt.Sprintf(
 		`<ellipse class="sketch-overlay" transform="translate(%d %d)" rx="%d" ry="%d" />`,
 		shape.Pos.X+shape.Width/2, shape.Pos.Y+shape.Height/2, shape.Width/2, shape.Height/2,
@@ -203,26 +263,35 @@ func Paths(r *Runner, shape d2target.Shape, paths []string) (string, error) {
 	output := ""
 	for _, path := range paths {
 		js := fmt.Sprintf(`node = rc.path("%s", {
-		fill: "%s",
+		fill: "#000",
-		stroke: "%s",
+		stroke: "#000",
 		strokeWidth: %d,
 		%s
-	});`, path, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
+	});`, path, shape.StrokeWidth, baseRoughProps)
 		sketchPaths, err := computeRoughPathData(r, js)
 		if err != nil {
 			return "", err
 		}
+		pathEl := d2themes.NewThemableElement("path")
+		pathEl.Fill, pathEl.Stroke = d2themes.ShapeTheme(shape)
+		pathEl.ClassName = "shape"
+		pathEl.Style = shape.CSSStyle()
 		for _, p := range sketchPaths {
-			output += fmt.Sprintf(
+			pathEl.D = p
-				`<path class="shape" d="%s" style="%s" />`,
+			output += pathEl.Render()
-				p, shape.CSSStyle(),
-			)
 		}
+
+		soElement := d2themes.NewThemableElement("path")
 		for _, p := range sketchPaths {
-			output += fmt.Sprintf(
+			soElement.D = p
-				`<path class="sketch-overlay" d="%s" />`,
+			renderedSO, err := d2themes.NewThemableSketchOverlay(
-				p,
+				soElement,
-			)
+				pathEl.Fill,
+			).Render()
+			if err != nil {
+				return "", err
+			}
+			output += renderedSO
 		}
 	}
 	return output, nil
@@ -240,11 +309,16 @@ func Connection(r *Runner, connection d2target.Connection, path, attrs string) (
 	if connection.Animated {
 		animatedClass = " animated-connection"
 	}
+
+	pathEl := d2themes.NewThemableElement("path")
+	pathEl.Fill = color.None
+	pathEl.Stroke = connection.Stroke
+	pathEl.ClassName = fmt.Sprintf("connection%s", animatedClass)
+	pathEl.Style = connection.CSSStyle()
+	pathEl.Attributes = attrs
 	for _, p := range paths {
-		output += fmt.Sprintf(
+		pathEl.D = p
-			`<path class="connection%s" fill="none" d="%s" style="%s" %s/>`,
+		output += pathEl.Render()
-			animatedClass, p, connection.CSSStyle(), attrs,
-		)
 	}
 	return output, nil
 }
@@ -253,20 +327,23 @@ func Connection(r *Runner, connection d2target.Connection, path, attrs string) (
 func Table(r *Runner, shape d2target.Shape) (string, error) {
 	output := ""
 	js := fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %d, {
-		fill: "%s",
+		fill: "#000",
-		stroke: "%s",
+		stroke: "#000",
 		strokeWidth: %d,
 		%s
-	});`, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
+	});`, shape.Width, shape.Height, shape.StrokeWidth, baseRoughProps)
 	paths, err := computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
+	pathEl := d2themes.NewThemableElement("path")
+	pathEl.SetTranslate(float64(shape.Pos.X), float64(shape.Pos.Y))
+	pathEl.Fill, pathEl.Stroke = d2themes.ShapeTheme(shape)
+	pathEl.ClassName = "shape"
+	pathEl.Style = shape.CSSStyle()
 	for _, p := range paths {
-		output += fmt.Sprintf(
+		pathEl.D = p
-			`<path class="shape" transform="translate(%d %d)" d="%s" style="%s" />`,
+		output += pathEl.Render()
-			shape.Pos.X, shape.Pos.Y, p, shape.CSSStyle(),
-		)
 	}
 
 	box := geo.NewBox(
@@ -278,18 +355,20 @@ func Table(r *Runner, shape d2target.Shape) (string, error) {
 	headerBox := geo.NewBox(box.TopLeft, box.Width, rowHeight)
 
 	js = fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %f, {
-		fill: "%s",
+		fill: "#000",
 		%s
-	});`, shape.Width, rowHeight, shape.Fill, baseRoughProps)
+	});`, shape.Width, rowHeight, baseRoughProps)
 	paths, err = computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
+	pathEl = d2themes.NewThemableElement("path")
+	pathEl.SetTranslate(float64(shape.Pos.X), float64(shape.Pos.Y))
+	pathEl.Fill = shape.Fill
+	pathEl.ClassName = "class_header"
 	for _, p := range paths {
-		output += fmt.Sprintf(
+		pathEl.D = p
-			`<path class="class_header" transform="translate(%d %d)" d="%s" style="fill:%s" />`,
+		output += pathEl.Render()
-			shape.Pos.X, shape.Pos.Y, p, shape.Fill,
-		)
 	}
 
 	if shape.Label != "" {
@@ -300,17 +379,16 @@ func Table(r *Runner, shape d2target.Shape) (string, error) {
 			float64(shape.LabelHeight),
 		)
 
-		output += fmt.Sprintf(`<text class="%s" x="%f" y="%f" style="%s">%s</text>`,
+		textEl := d2themes.NewThemableElement("text")
-			"text",
+		textEl.X = tl.X
-			tl.X,
+		textEl.Y = tl.Y + float64(shape.LabelHeight)*3/4
-			tl.Y+float64(shape.LabelHeight)*3/4,
+		textEl.Fill = shape.Stroke
-			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s",
+		textEl.ClassName = "text"
-				"start",
+		textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx",
-				4+shape.FontSize,
+			"start", 4+shape.FontSize,
-				shape.Stroke,
-			),
-			svg.EscapeText(shape.Label),
 		)
+		textEl.Content = svg.EscapeText(shape.Label)
+		output += textEl.Render()
 	}
 
 	var longestNameWidth int
@@ -334,26 +412,26 @@ func Table(r *Runner, shape d2target.Shape) (string, error) {
 			float64(shape.FontSize),
 		)
 
-		output += strings.Join([]string{
+		textEl := d2themes.NewThemableElement("text")
-			fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
+		textEl.X = nameTL.X
-				nameTL.X,
+		textEl.Y = nameTL.Y + float64(shape.FontSize)*3/4
-				nameTL.Y+float64(shape.FontSize)*3/4,
+		textEl.Fill = shape.PrimaryAccentColor
-				fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", float64(shape.FontSize), shape.PrimaryAccentColor),
+		textEl.ClassName = "text"
-				svg.EscapeText(f.Name.Label),
+		textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx", "start", float64(shape.FontSize))
-			),
+		textEl.Content = svg.EscapeText(f.Name.Label)
-			fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
+		output += textEl.Render()
-				nameTL.X+float64(longestNameWidth)+2*d2target.NamePadding,
+
-				nameTL.Y+float64(shape.FontSize)*3/4,
+		textEl.X = nameTL.X + float64(longestNameWidth) + 2*d2target.NamePadding
-				fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", float64(shape.FontSize), shape.NeutralAccentColor),
+		textEl.Fill = shape.NeutralAccentColor
-				svg.EscapeText(f.Type.Label),
+		textEl.Content = svg.EscapeText(f.Type.Label)
-			),
+		output += textEl.Render()
-			fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
+
-				constraintTR.X,
+		textEl.X = constraintTR.X
-				constraintTR.Y+float64(shape.FontSize)*3/4,
+		textEl.Y = constraintTR.Y + float64(shape.FontSize)*3/4
-				fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s;letter-spacing:2px;", "end", float64(shape.FontSize), shape.SecondaryAccentColor),
+		textEl.Fill = shape.SecondaryAccentColor
-				f.ConstraintAbbr(),
+		textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx;letter-spacing:2px", "end", float64(shape.FontSize))
-			),
+		textEl.Content = f.ConstraintAbbr()
-		}, "\n")
+		output += textEl.Render()
 
 		rowBox.TopLeft.Y += rowHeight
 
@@ -364,37 +442,47 @@ func Table(r *Runner, shape d2target.Shape) (string, error) {
 		if err != nil {
 			return "", err
 		}
+		pathEl := d2themes.NewThemableElement("path")
+		pathEl.Fill = shape.Fill
 		for _, p := range paths {
-			output += fmt.Sprintf(
+			pathEl.D = p
-				`<path d="%s" style="fill:%s" />`,
+			output += pathEl.Render()
-				p, shape.Fill,
-			)
 		}
 	}
-	output += fmt.Sprintf(
+
-		`<rect class="sketch-overlay" transform="translate(%d %d)" width="%d" height="%d" />`,
+	sketchOEl := d2themes.NewThemableElement("rect")
-		shape.Pos.X, shape.Pos.Y, shape.Width, shape.Height,
+	sketchOEl.SetTranslate(float64(shape.Pos.X), float64(shape.Pos.Y))
-	)
+	sketchOEl.Width = float64(shape.Width)
+	sketchOEl.Height = float64(shape.Height)
+	renderedSO, err := d2themes.NewThemableSketchOverlay(sketchOEl, pathEl.Fill).Render()
+	if err != nil {
+		return "", err
+	}
+	output += renderedSO
+
 	return output, nil
 }
 
 func Class(r *Runner, shape d2target.Shape) (string, error) {
 	output := ""
 	js := fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %d, {
-		fill: "%s",
+		fill: "#000",
-		stroke: "%s",
+		stroke: "#000",
 		strokeWidth: %d,
 		%s
-	});`, shape.Width, shape.Height, shape.Fill, shape.Stroke, shape.StrokeWidth, baseRoughProps)
+	});`, shape.Width, shape.Height, shape.StrokeWidth, baseRoughProps)
 	paths, err := computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
+	pathEl := d2themes.NewThemableElement("path")
+	pathEl.SetTranslate(float64(shape.Pos.X), float64(shape.Pos.Y))
+	pathEl.Fill, pathEl.Stroke = d2themes.ShapeTheme(shape)
+	pathEl.ClassName = "shape"
+	pathEl.Style = shape.CSSStyle()
 	for _, p := range paths {
-		output += fmt.Sprintf(
+		pathEl.D = p
-			`<path class="shape" transform="translate(%d %d)" d="%s" style="%s" />`,
+		output += pathEl.Render()
-			shape.Pos.X, shape.Pos.Y, p, shape.CSSStyle(),
-		)
 	}
 
 	box := geo.NewBox(
@@ -407,24 +495,31 @@ func Class(r *Runner, shape d2target.Shape) (string, error) {
 	headerBox := geo.NewBox(box.TopLeft, box.Width, 2*rowHeight)
 
 	js = fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %f, {
-		fill: "%s",
+		fill: "#000",
 		%s
-	});`, shape.Width, headerBox.Height, shape.Fill, baseRoughProps)
+	});`, shape.Width, headerBox.Height, baseRoughProps)
 	paths, err = computeRoughPathData(r, js)
 	if err != nil {
 		return "", err
 	}
+	pathEl = d2themes.NewThemableElement("path")
+	pathEl.SetTranslate(float64(shape.Pos.X), float64(shape.Pos.Y))
+	pathEl.Fill = shape.Fill
+	pathEl.ClassName = "class_header"
 	for _, p := range paths {
-		output += fmt.Sprintf(
+		pathEl.D = p
-			`<path class="class_header" transform="translate(%d %d)" d="%s" style="fill:%s" />`,
+		output += pathEl.Render()
-			shape.Pos.X, shape.Pos.Y, p, shape.Fill,
-		)
 	}
 
-	output += fmt.Sprintf(
+	sketchOEl := d2themes.NewThemableElement("rect")
-		`<rect class="sketch-overlay" transform="translate(%d %d)" width="%d" height="%f" />`,
+	sketchOEl.SetTranslate(float64(shape.Pos.X), float64(shape.Pos.Y))
-		shape.Pos.X, shape.Pos.Y, shape.Width, headerBox.Height,
+	sketchOEl.Width = float64(shape.Width)
-	)
+	sketchOEl.Height = headerBox.Height
+	renderedSO, err := d2themes.NewThemableSketchOverlay(sketchOEl, pathEl.Fill).Render()
+	if err != nil {
+		return "", err
+	}
+	output += renderedSO
 
 	if shape.Label != "" {
 		tl := label.InsideMiddleCenter.GetPointOnBox(
@@ -434,17 +529,17 @@ func Class(r *Runner, shape d2target.Shape) (string, error) {
 			float64(shape.LabelHeight),
 		)
 
-		output += fmt.Sprintf(`<text class="%s" x="%f" y="%f" style="%s">%s</text>`,
+		textEl := d2themes.NewThemableElement("text")
-			"text-mono",
+		textEl.X = tl.X + float64(shape.LabelWidth)/2
-			tl.X+float64(shape.LabelWidth)/2,
+		textEl.Y = tl.Y + float64(shape.LabelHeight)*3/4
-			tl.Y+float64(shape.LabelHeight)*3/4,
+		textEl.Fill = shape.Stroke
-			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s",
+		textEl.ClassName = "text-mono"
-				"middle",
+		textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx",
-				4+shape.FontSize,
+			"middle",
-				shape.Stroke,
+			4+shape.FontSize,
-			),
-			svg.EscapeText(shape.Label),
 		)
+		textEl.Content = svg.EscapeText(shape.Label)
+		output += textEl.Render()
 	}
 
 	rowBox := geo.NewBox(box.TopLeft.Copy(), box.Width, rowHeight)
@@ -461,11 +556,12 @@ func Class(r *Runner, shape d2target.Shape) (string, error) {
 	if err != nil {
 		return "", err
 	}
+	pathEl = d2themes.NewThemableElement("path")
+	pathEl.Fill = shape.Fill
+	pathEl.ClassName = "class_header"
 	for _, p := range paths {
-		output += fmt.Sprintf(
+		pathEl.D = p
-			`<path class="class_header" d="%s" style="fill:%s" />`,
+		output += pathEl.Render()
-			p, shape.Fill,
-		)
 	}
 
 	for _, m := range shape.Methods {
@@ -491,28 +587,27 @@ func classRow(shape d2target.Shape, box *geo.Box, prefix, nameText, typeText str
 		fontSize,
 	)
 
-	output += strings.Join([]string{
+	textEl := d2themes.NewThemableElement("text")
-		fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
+	textEl.X = prefixTL.X
-			prefixTL.X,
+	textEl.Y = prefixTL.Y + fontSize*3/4
-			prefixTL.Y+fontSize*3/4,
+	textEl.Fill = shape.PrimaryAccentColor
-			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.PrimaryAccentColor),
+	textEl.ClassName = "text-mono"
-			prefix,
+	textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx", "start", fontSize)
-		),
+	textEl.Content = prefix
+	output += textEl.Render()
 
-		fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
+	textEl.X = prefixTL.X + d2target.PrefixWidth
-			prefixTL.X+d2target.PrefixWidth,
+	textEl.Fill = shape.Fill
-			prefixTL.Y+fontSize*3/4,
+	textEl.Content = svg.EscapeText(nameText)
-			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.Fill),
+	output += textEl.Render()
-			svg.EscapeText(nameText),
+
-		),
+	textEl.X = typeTR.X
+	textEl.Y = typeTR.Y + fontSize*3/4
+	textEl.Fill = shape.SecondaryAccentColor
+	textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx", "end", fontSize)
+	textEl.Content = svg.EscapeText(typeText)
+	output += textEl.Render()
 
-		fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
-			typeTR.X,
-			typeTR.Y+fontSize*3/4,
-			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s;", "end", fontSize, shape.SecondaryAccentColor),
-			svg.EscapeText(typeText),
-		),
-	}, "\n")
 	return output
 }
 
@@ -551,12 +646,6 @@ type roughPath struct {
 
 func (rp roughPath) StyleCSS() string {
 	style := ""
-	if rp.Style.Fill != "" {
-		style += fmt.Sprintf("fill:%s;", rp.Style.Fill)
-	}
-	if rp.Style.Stroke != "" {
-		style += fmt.Sprintf("stroke:%s;", rp.Style.Stroke)
-	}
 	if rp.Style.StrokeWidth != "" {
 		style += fmt.Sprintf("stroke-width:%s;", rp.Style.StrokeWidth)
 	}
@@ -617,10 +706,11 @@ func ArrowheadJS(r *Runner, arrowhead d2target.Arrowhead, stroke string, strokeW
 		)
 	case d2target.DiamondArrowhead:
 		arrowJS = fmt.Sprintf(
-			`node = rc.polygon(%s, { strokeWidth: %d, stroke: "%s", fill: "white", fillStyle: "solid", seed: 1 })`,
+			`node = rc.polygon(%s, { strokeWidth: %d, stroke: "%s", fill: "%s", fillStyle: "solid", seed: 1 })`,
 			`[[-20, 0], [-10, 5], [0, 0], [-10, -5], [-20, 0]]`,
 			strokeWidth,
 			stroke,
+			BG_COLOR,
 		)
 	case d2target.FilledDiamondArrowhead:
 		arrowJS = fmt.Sprintf(
@@ -648,9 +738,10 @@ func ArrowheadJS(r *Runner, arrowhead d2target.Arrowhead, stroke string, strokeW
 			stroke,
 		)
 		extraJS = fmt.Sprintf(
-			`node = rc.circle(-20, 0, 8, { strokeWidth: %d, stroke: "%s", fill: "white", fillStyle: "solid", fillWeight: 1, seed: 4 })`,
+			`node = rc.circle(-20, 0, 8, { strokeWidth: %d, stroke: "%s", fill: "%s", fillStyle: "solid", fillWeight: 1, seed: 4 })`,
 			strokeWidth,
 			stroke,
+			BG_COLOR,
 		)
 	case d2target.CfOneRequired:
 		arrowJS = fmt.Sprintf(
@@ -669,9 +760,10 @@ func ArrowheadJS(r *Runner, arrowhead d2target.Arrowhead, stroke string, strokeW
 			stroke,
 		)
 		extraJS = fmt.Sprintf(
-			`node = rc.circle(-20, 0, 8, { strokeWidth: %d, stroke: "%s", fill: "white", fillStyle: "solid", fillWeight: 1, seed: 5 })`,
+			`node = rc.circle(-20, 0, 8, { strokeWidth: %d, stroke: "%s", fill: "%s", fillStyle: "solid", fillWeight: 1, seed: 5 })`,
 			strokeWidth,
 			stroke,
+			BG_COLOR,
 		)
 	}
 	return
@@ -706,13 +798,15 @@ func Arrowheads(r *Runner, connection d2target.Connection, srcAdj, dstAdj *geo.P
 			roughPaths = append(roughPaths, extraPaths...)
 		}
 
+		pathEl := d2themes.NewThemableElement("path")
+		pathEl.ClassName = "connection"
+		pathEl.Attributes = transform
 		for _, rp := range roughPaths {
-			pathStr := fmt.Sprintf(`<path class="connection" d="%s" style="%s" %s/>`,
+			pathEl.D = rp.Attrs.D
-				rp.Attrs.D,
+			pathEl.Fill = rp.Style.Fill
-				rp.StyleCSS(),
+			pathEl.Stroke = rp.Style.Stroke
-				transform,
+			pathEl.Style = rp.StyleCSS()
-			)
+			arrowPaths = append(arrowPaths, pathEl.Render())
-			arrowPaths = append(arrowPaths, pathStr)
 		}
 	}
 
@@ -743,13 +837,15 @@ func Arrowheads(r *Runner, connection d2target.Connection, srcAdj, dstAdj *geo.P
 			roughPaths = append(roughPaths, extraPaths...)
 		}
 
+		pathEl := d2themes.NewThemableElement("path")
+		pathEl.ClassName = "connection"
+		pathEl.Attributes = transform
 		for _, rp := range roughPaths {
-			pathStr := fmt.Sprintf(`<path class="connection" d="%s" style="%s" %s/>`,
+			pathEl.D = rp.Attrs.D
-				rp.Attrs.D,
+			pathEl.Fill = rp.Style.Fill
-				rp.StyleCSS(),
+			pathEl.Stroke = rp.Style.Stroke
-				transform,
+			pathEl.Style = rp.StyleCSS()
-			)
+			arrowPaths = append(arrowPaths, pathEl.Render())
-			arrowPaths = append(arrowPaths, pathStr)
 		}
 	}
 

d2renderers/d2sketch/sketch_test.go

@@ -470,6 +470,485 @@ users: {
 	last_login: datetime
 	style.opacity: 0.4
 }
+`,
+		},
+		{
+			name: "overlay",
+			script: `bright: {
+	style.stroke: "#000"
+	style.font-color: "#000"
+	style.fill: "#fff"
+}
+normal: {
+	style.stroke: "#000"
+	style.font-color: "#000"
+	style.fill: "#ccc"
+}
+dark: {
+	style.stroke: "#000"
+	style.font-color: "#fff"
+	style.fill: "#555"
+}
+darker: {
+	style.stroke: "#000"
+	style.font-color: "#fff"
+	style.fill: "#000"
+}
+`,
+		},
+		{
+			name:    "basic dark",
+			themeID: 200,
+			script: `a -> b
+`,
+		},
+		{
+			name:    "child to child dark",
+			themeID: 200,
+			script: `winter.snow -> summer.sun
+		`,
+		},
+		{
+			name:    "animated dark",
+			themeID: 200,
+			script: `winter.snow -> summer.sun -> trees -> winter.snow: { style.animated: true }
+		`,
+		},
+		{
+			name:    "connection label dark",
+			themeID: 200,
+			script: `a -> b: hello
+		`,
+		},
+		{
+			name:    "crows feet dark",
+			themeID: 200,
+			script: `a1 <-> b1: {
+	style.stroke-width: 1
+	source-arrowhead: {
+		shape: cf-many
+	}
+	target-arrowhead: {
+		shape: cf-many
+	}
+}
+a2 <-> b2: {
+	style.stroke-width: 3
+	source-arrowhead: {
+		shape: cf-many
+	}
+	target-arrowhead: {
+		shape: cf-many
+	}
+}
+a3 <-> b3: {
+	style.stroke-width: 6
+	source-arrowhead: {
+		shape: cf-many
+	}
+	target-arrowhead: {
+		shape: cf-many
+	}
+}
+
+c1 <-> d1: {
+	style.stroke-width: 1
+	source-arrowhead: {
+		shape: cf-many-required
+	}
+	target-arrowhead: {
+		shape: cf-many-required
+	}
+}
+c2 <-> d2: {
+	style.stroke-width: 3
+	source-arrowhead: {
+		shape: cf-many-required
+	}
+	target-arrowhead: {
+		shape: cf-many-required
+	}
+}
+c3 <-> d3: {
+	style.stroke-width: 6
+	source-arrowhead: {
+		shape: cf-many-required
+	}
+	target-arrowhead: {
+		shape: cf-many-required
+	}
+}
+
+e1 <-> f1: {
+	style.stroke-width: 1
+	source-arrowhead: {
+		shape: cf-one
+	}
+	target-arrowhead: {
+		shape: cf-one
+	}
+}
+e2 <-> f2: {
+	style.stroke-width: 3
+	source-arrowhead: {
+		shape: cf-one
+	}
+	target-arrowhead: {
+		shape: cf-one
+	}
+}
+e3 <-> f3: {
+	style.stroke-width: 6
+	source-arrowhead: {
+		shape: cf-one
+	}
+	target-arrowhead: {
+		shape: cf-one
+	}
+}
+
+g1 <-> h1: {
+	style.stroke-width: 1
+	source-arrowhead: {
+		shape: cf-one-required
+	}
+	target-arrowhead: {
+		shape: cf-one-required
+	}
+}
+g2 <-> h2: {
+	style.stroke-width: 3
+	source-arrowhead: {
+		shape: cf-one-required
+	}
+	target-arrowhead: {
+		shape: cf-one-required
+	}
+}
+g3 <-> h3: {
+	style.stroke-width: 6
+	source-arrowhead: {
+		shape: cf-one-required
+	}
+	target-arrowhead: {
+		shape: cf-one-required
+	}
+}
+
+c <-> d <-> f: {
+	style.stroke-width: 1
+	style.stroke: "orange"
+	source-arrowhead: {
+		shape: cf-many-required
+	}
+	target-arrowhead: {
+		shape: cf-one
+	}
+}
+		`,
+		},
+		{
+			name:    "twitter dark",
+			themeID: 200,
+			script: `timeline mixer: "" {
+  explanation: |md
+    ## **Timeline mixer**
+    - Inject ads, who-to-follow, onboarding
+    - Conversation module
+    - Cursoring,pagination
+    - Tweat deduplication
+    - Served data logging
+  |
+}
+People discovery: "People discovery \nservice"
+admixer: Ad mixer {
+  style.fill: "#c1a2f3"
+}
+
+onboarding service: "Onboarding \nservice"
+timeline mixer -> People discovery
+timeline mixer -> onboarding service
+timeline mixer -> admixer
+container0: "" {
+  graphql
+  comment
+  tlsapi
+}
+container0.graphql: GraphQL\nFederated Strato Column {
+  shape: image
+  icon: https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/GraphQL_Logo.svg/1200px-GraphQL_Logo.svg.png
+}
+container0.comment: |md
+  ## Tweet/user content hydration, visibility filtering
+|
+container0.tlsapi: TLS-API (being deprecated)
+container0.graphql -> timeline mixer
+timeline mixer <- container0.tlsapi
+twitter fe: "Twitter Frontend " {
+  icon: https://icons.terrastruct.com/social/013-twitter-1.svg
+  shape: image
+}
+twitter fe -> container0.graphql: iPhone web
+twitter fe -> container0.tlsapi: HTTP Android
+web: Web {
+  icon: https://icons.terrastruct.com/azure/Web%20Service%20Color/App%20Service%20Domains.svg
+  shape: image
+}
+
+Iphone: {
+  icon: 'https://ss7.vzw.com/is/image/VerizonWireless/apple-iphone-12-64gb-purple-53017-mjn13ll-a?$device-lg$'
+  shape: image
+}
+Android: {
+  icon: https://cdn4.iconfinder.com/data/icons/smart-phones-technologies/512/android-phone.png
+  shape: image
+}
+
+web -> twitter fe
+timeline scorer: "Timeline\nScorer" {
+  style.fill "#ffdef1"
+}
+home ranker: Home Ranker
+
+timeline service: Timeline Service
+timeline mixer -> timeline scorer: Thrift RPC
+timeline mixer -> home ranker: {
+  style.stroke-dash: 4
+  style.stroke: "#000E3D"
+}
+timeline mixer -> timeline service
+home mixer: Home mixer {
+  # style.fill "#c1a2f3"
+}
+container0.graphql -> home mixer: {
+  style.stroke-dash: 4
+  style.stroke: "#000E3D"
+}
+home mixer -> timeline scorer
+home mixer -> home ranker: {
+  style.stroke-dash: 4
+  style.stroke: "#000E3D"
+}
+home mixer -> timeline service
+manhattan 2: Manhattan
+gizmoduck: Gizmoduck
+socialgraph: Social graph
+tweetypie: Tweety Pie
+home mixer -> manhattan 2
+home mixer -> gizmoduck
+home mixer -> socialgraph
+home mixer -> tweetypie
+Iphone -> twitter fe
+Android -> twitter fe
+prediction service2: Prediction Service {
+  shape: image
+  icon: https://cdn-icons-png.flaticon.com/512/6461/6461819.png
+}
+home scorer: Home Scorer {
+  style.fill "#ffdef1"
+}
+manhattan: Manhattan
+memcache: Memcache {
+  icon: https://d1q6f0aelx0por.cloudfront.net/product-logos/de041504-0ddb-43f6-b89e-fe04403cca8d-memcached.png
+}
+
+fetch: Fetch {
+  style.multiple: true
+  shape: step
+}
+feature: Feature {
+  style.multiple: true
+  shape: step
+}
+scoring: Scoring {
+  style.multiple: true
+  shape: step
+}
+fetch -> feature
+feature -> scoring
+
+prediction service: Prediction Service {
+  shape: image
+  icon: https://cdn-icons-png.flaticon.com/512/6461/6461819.png
+}
+scoring -> prediction service
+fetch -> container2.crmixer
+
+home scorer -> manhattan: ""
+
+home scorer -> memcache: ""
+home scorer -> prediction service2
+home ranker -> home scorer
+home ranker -> container2.crmixer: Candidate Fetch
+container2: "" {
+  style.stroke: "#000E3D"
+  style.fill: "#ffffff"
+  crmixer: CrMixer {
+    style.fill: "#F7F8FE"
+  }
+  earlybird: EarlyBird
+  utag: Utag
+  space: Space
+  communities: Communities
+}
+etc: ...etc
+
+home scorer -> etc: Feature Hydration
+
+feature -> manhattan
+feature -> memcache
+feature -> etc: Candidate sources
+		`,
+		},
+		{
+			name:    "all_shapes dark",
+			themeID: 200,
+			script: `
+rectangle: {shape: "rectangle"}
+square: {shape: "square"}
+page: {shape: "page"}
+parallelogram: {shape: "parallelogram"}
+document: {shape: "document"}
+cylinder: {shape: "cylinder"}
+queue: {shape: "queue"}
+package: {shape: "package"}
+step: {shape: "step"}
+callout: {shape: "callout"}
+stored_data: {shape: "stored_data"}
+person: {shape: "person"}
+diamond: {shape: "diamond"}
+oval: {shape: "oval"}
+circle: {shape: "circle"}
+hexagon: {shape: "hexagon"}
+cloud: {shape: "cloud"}
+
+rectangle -> square -> page
+parallelogram -> document -> cylinder
+queue -> package -> step
+callout -> stored_data -> person
+diamond -> oval -> circle
+hexagon -> cloud
+`,
+		},
+		{
+			name:    "sql_tables dark",
+			themeID: 200,
+			script: `users: {
+	shape: sql_table
+	id: int
+	name: string
+	email: string
+	password: string
+	last_login: datetime
+}
+
+products: {
+	shape: sql_table
+	id: int
+	price: decimal
+	sku: string
+	name: string
+}
+
+orders: {
+	shape: sql_table
+	id: int
+	user_id: int
+	product_id: int
+}
+
+shipments: {
+	shape: sql_table
+	id: int
+	order_id: int
+	tracking_number: string {constraint: primary_key}
+	status: string
+}
+
+users.id <-> orders.user_id
+products.id <-> orders.product_id
+shipments.order_id <-> orders.id`,
+		},
+		{
+			name:    "class dark",
+			themeID: 200,
+			script: `manager: BatchManager {
+  shape: class
+  -num: int
+  -timeout: int
+  -pid
+
+  +getStatus(): Enum
+  +getJobs(): "Job[]"
+  +setTimeout(seconds int)
+}
+`,
+		},
+		{
+			name:    "arrowheads dark",
+			themeID: 200,
+			script: `
+a: ""
+b: ""
+a.1 -- b.1: none
+a.2 <-> b.2: arrow {
+	source-arrowhead.shape: arrow
+	target-arrowhead.shape: arrow
+}
+a.3 <-> b.3: triangle {
+	source-arrowhead.shape: triangle
+	target-arrowhead.shape: triangle
+}
+a.4 <-> b.4: diamond {
+	source-arrowhead.shape: diamond
+	target-arrowhead.shape: diamond
+}
+a.5 <-> b.5: diamond filled {
+	source-arrowhead: {
+		shape: diamond
+		style.filled: true
+	}
+	target-arrowhead: {
+		shape: diamond
+		style.filled: true
+	}
+}
+a.6 <-> b.6: cf-many {
+	source-arrowhead.shape: cf-many
+	target-arrowhead.shape: cf-many
+}
+a.7 <-> b.7: cf-many-required {
+	source-arrowhead.shape: cf-many-required
+	target-arrowhead.shape: cf-many-required
+}
+a.8 <-> b.8: cf-one {
+	source-arrowhead.shape: cf-one
+	target-arrowhead.shape: cf-one
+}
+a.9 <-> b.9: cf-one-required {
+	source-arrowhead.shape: cf-one-required
+	target-arrowhead.shape: cf-one-required
+}
+`,
+		},
+		{
+			name:    "opacity dark",
+			themeID: 200,
+			script: `x.style.opacity: 0.4
+y: |md
+  linux: because a PC is a terrible thing to waste
+| {
+	style.opacity: 0.4
+}
+x -> a: {
+  label: You don't have to know how the computer works,\njust how to work the computer.
+  style.opacity: 0.4
+}
+users: {
+	shape: sql_table
+	last_login: datetime
+	style.opacity: 0.4
+}
 `,
 		},
 	}
@@ -477,9 +956,10 @@ users: {
 }
 
 type testCase struct {
-	name   string
+	name    string
-	script string
+	themeID int64
-	skip   bool
+	script  string
+	skip    bool
 }
 
 func runa(t *testing.T, tcs []testCase) {
@@ -508,7 +988,6 @@ func run(t *testing.T, tc testCase) {
 
 	diagram, _, err := d2lib.Compile(ctx, tc.script, &d2lib.CompileOptions{
 		Ruler:      ruler,
-		ThemeID:    0,
 		Layout:     d2dagrelayout.DefaultLayout,
 		FontFamily: go2.Pointer(d2fonts.HandDrawn),
 	})
@@ -520,8 +999,9 @@ func run(t *testing.T, tc testCase) {
 	pathGotSVG := filepath.Join(dataPath, "sketch.got.svg")
 
 	svgBytes, err := d2svg.Render(diagram, &d2svg.RenderOpts{
-		Pad:    d2svg.DEFAULT_PADDING,
+		Pad:     d2svg.DEFAULT_PADDING,
-		Sketch: true,
+		Sketch:  true,
+		ThemeID: tc.themeID,
 	})
 	assert.Success(t, err)
 	err = os.MkdirAll(dataPath, 0755)

d2renderers/d2sketch/testdata/connection_label/board.exp.json

@@ -1,136 +0,0 @@
-{
-  "name": "",
-  "fontFamily": "HandDrawn",
-  "shapes": [
-    {
-      "id": "a",
-      "type": "",
-      "pos": {
-        "x": 1,
-        "y": 0
-      },
-      "width": 114,
-      "height": 126,
-      "opacity": 1,
-      "strokeDash": 0,
-      "strokeWidth": 2,
-      "borderRadius": 0,
-      "fill": "#F7F8FE",
-      "stroke": "#0D32B2",
-      "shadow": false,
-      "3d": false,
-      "multiple": false,
-      "tooltip": "",
-      "link": "",
-      "icon": null,
-      "iconPosition": "",
-      "blend": false,
-      "fields": null,
-      "methods": null,
-      "columns": null,
-      "label": "a",
-      "fontSize": 16,
-      "fontFamily": "DEFAULT",
-      "language": "",
-      "color": "#0A0F25",
-      "italic": false,
-      "bold": true,
-      "underline": false,
-      "labelWidth": 14,
-      "labelHeight": 26,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "zIndex": 0,
-      "level": 1
-    },
-    {
-      "id": "b",
-      "type": "",
-      "pos": {
-        "x": 0,
-        "y": 226
-      },
-      "width": 115,
-      "height": 126,
-      "opacity": 1,
-      "strokeDash": 0,
-      "strokeWidth": 2,
-      "borderRadius": 0,
-      "fill": "#F7F8FE",
-      "stroke": "#0D32B2",
-      "shadow": false,
-      "3d": false,
-      "multiple": false,
-      "tooltip": "",
-      "link": "",
-      "icon": null,
-      "iconPosition": "",
-      "blend": false,
-      "fields": null,
-      "methods": null,
-      "columns": null,
-      "label": "b",
-      "fontSize": 16,
-      "fontFamily": "DEFAULT",
-      "language": "",
-      "color": "#0A0F25",
-      "italic": false,
-      "bold": true,
-      "underline": false,
-      "labelWidth": 15,
-      "labelHeight": 26,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "zIndex": 0,
-      "level": 1
-    }
-  ],
-  "connections": [
-    {
-      "id": "(a -> b)[0]",
-      "src": "a",
-      "srcArrow": "none",
-      "srcLabel": "",
-      "dst": "b",
-      "dstArrow": "triangle",
-      "dstLabel": "",
-      "opacity": 1,
-      "strokeDash": 0,
-      "strokeWidth": 2,
-      "stroke": "#0D32B2",
-      "label": "hello",
-      "fontSize": 16,
-      "fontFamily": "DEFAULT",
-      "language": "",
-      "color": "#676C7E",
-      "italic": true,
-      "bold": false,
-      "underline": false,
-      "labelWidth": 31,
-      "labelHeight": 23,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "labelPercentage": 0,
-      "route": [
-        {
-          "x": 57.5,
-          "y": 126
-        },
-        {
-          "x": 57.5,
-          "y": 166
-        },
-        {
-          "x": 57.5,
-          "y": 186
-        },
-        {
-          "x": 57.5,
-          "y": 226
-        }
-      ],
-      "isCurve": true,
-      "animated": false,
-      "tooltip": "",
-      "icon": null,
-      "zIndex": 0
-    }
-  ]
-}

d2renderers/d2svg/appendix/appendix.go

@@ -14,6 +14,8 @@ import (
 	"oss.terrastruct.com/d2/d2renderers/d2fonts"
 	"oss.terrastruct.com/d2/d2renderers/d2svg"
 	"oss.terrastruct.com/d2/d2target"
+	"oss.terrastruct.com/d2/d2themes"
+	"oss.terrastruct.com/d2/lib/color"
 	"oss.terrastruct.com/d2/lib/textmeasure"
 	"oss.terrastruct.com/util-go/go2"
 )
@@ -48,8 +50,8 @@ const (
 )
 
 var viewboxRegex = regexp.MustCompile(`viewBox=\"([0-9\- ]+)\"`)
-var widthRegex = regexp.MustCompile(`width=\"([0-9]+)\"`)
+var widthRegex = regexp.MustCompile(`width=\"([.0-9]+)\"`)
-var heightRegex = regexp.MustCompile(`height=\"([0-9]+)\"`)
+var heightRegex = regexp.MustCompile(`height=\"([.0-9]+)\"`)
 
 func Append(diagram *d2target.Diagram, ruler *textmeasure.Ruler, in []byte) []byte {
 	svg := string(in)
@@ -68,9 +70,13 @@ func Append(diagram *d2target.Diagram, ruler *textmeasure.Ruler, in []byte) []by
 	viewboxHeight, _ := strconv.Atoi(viewboxSlice[3])
 
 	tl, br := diagram.BoundingBox()
-	seperator := fmt.Sprintf(`<line x1="%d" y1="%d" x2="%d" y2="%d" stroke="#0A0F25" />`,
+	separatorEl := d2themes.NewThemableElement("line")
-		tl.X-PAD_SIDES, br.Y+PAD_TOP, go2.IntMax(w, br.X)+PAD_SIDES, br.Y+PAD_TOP)
+	separatorEl.X1 = float64(tl.X - PAD_SIDES)
-	appendix = seperator + appendix
+	separatorEl.Y1 = float64(br.Y + PAD_TOP)
+	separatorEl.X2 = float64(go2.IntMax(w, br.X) + PAD_SIDES)
+	separatorEl.Y2 = float64(br.Y + PAD_TOP)
+	separatorEl.Stroke = color.B2 // same as --color-border-muted in markdown
+	appendix = separatorEl.Render() + appendix
 
 	w -= viewboxPadLeft
 	w += PAD_SIDES * 2
@@ -82,14 +88,16 @@ func Append(diagram *d2target.Diagram, ruler *textmeasure.Ruler, in []byte) []by
 
 	newViewbox := fmt.Sprintf(`viewBox="%s %s %s %s"`, viewboxSlice[0], viewboxSlice[1], strconv.Itoa(viewboxWidth), strconv.Itoa(viewboxHeight))
 
-	widthMatch := widthRegex.FindStringSubmatch(svg)
+	widthMatches := widthRegex.FindAllStringSubmatch(svg, 2)
-	heightMatch := heightRegex.FindStringSubmatch(svg)
+	heightMatches := heightRegex.FindAllStringSubmatch(svg, 2)
 	newWidth := fmt.Sprintf(`width="%s"`, strconv.Itoa(viewboxWidth))
 	newHeight := fmt.Sprintf(`height="%s"`, strconv.Itoa(viewboxHeight))
 
 	svg = strings.Replace(svg, viewboxMatch[0], newViewbox, 1)
-	svg = strings.Replace(svg, widthMatch[0], newWidth, 1)
+	for i := 0; i < 2; i++ {
-	svg = strings.Replace(svg, heightMatch[0], newHeight, 1)
+		svg = strings.Replace(svg, widthMatches[i][0], newWidth, 1)
+		svg = strings.Replace(svg, heightMatches[i][0], newHeight, 1)
+	}
 
 	if !strings.Contains(svg, `font-family: "font-regular"`) {
 		appendix += fmt.Sprintf(`<style type="text/css"><![CDATA[
@@ -158,7 +166,7 @@ func generateAppendix(diagram *d2target.Diagram, ruler *textmeasure.Ruler, svg s
 	}
 	totalHeight += SPACER
 
-	return fmt.Sprintf(`<g x="%d" y="%d" width="%d" height="100%%">%s</g>
+	return fmt.Sprintf(`<g class="appendix" x="%d" y="%d" width="%d" height="100%%">%s</g>
 `, tl.X, br.Y, (br.X - tl.X), strings.Join(lines, "\n")), maxWidth, totalHeight
 }
 

d2renderers/d2svg/appendix/appendix_test.go

@@ -82,6 +82,14 @@ payment processor behind the scenes: {
 			script: `x: { link: https://d2lang.com }
 			y: { link: https://terrastruct.com; tooltip: Gee, I feel kind of LIGHT in the head now,\nknowing I can't make my satellite dish PAYMENTS! }
 x -> y
+`,
+		},
+		{
+			name:    "links dark",
+			themeID: 200,
+			script: `x: { link: https://d2lang.com }
+			y: { link: https://fosny.eu; tooltip: Gee, I feel kind of LIGHT in the head now,\nknowing I can't make my satellite dish PAYMENTS! }
+x -> y
 `,
 		},
 	}
@@ -89,9 +97,10 @@ x -> y
 }
 
 type testCase struct {
-	name   string
+	name    string
-	script string
+	themeID int64
-	skip   bool
+	script  string
+	skip    bool
 }
 
 func runa(t *testing.T, tcs []testCase) {
@@ -119,9 +128,8 @@ func run(t *testing.T, tc testCase) {
 	}
 
 	diagram, _, err := d2lib.Compile(ctx, tc.script, &d2lib.CompileOptions{
-		Ruler:   ruler,
+		Ruler:  ruler,
-		ThemeID: 0,
+		Layout: d2dagrelayout.DefaultLayout,
-		Layout:  d2dagrelayout.DefaultLayout,
 	})
 	if !tassert.Nil(t, err) {
 		return
@@ -131,7 +139,8 @@ func run(t *testing.T, tc testCase) {
 	pathGotSVG := filepath.Join(dataPath, "sketch.got.svg")
 
 	svgBytes, err := d2svg.Render(diagram, &d2svg.RenderOpts{
-		Pad: d2svg.DEFAULT_PADDING,
+		Pad:     d2svg.DEFAULT_PADDING,
+		ThemeID: tc.themeID,
 	})
 	assert.Success(t, err)
 	svgBytes = appendix.Append(diagram, ruler, svgBytes)

d2renderers/d2svg/class.go

@@ -3,17 +3,21 @@ package d2svg
 import (
 	"fmt"
 	"io"
-	"strings"
 
 	"oss.terrastruct.com/d2/d2target"
+	"oss.terrastruct.com/d2/d2themes"
 	"oss.terrastruct.com/d2/lib/geo"
 	"oss.terrastruct.com/d2/lib/label"
 	"oss.terrastruct.com/d2/lib/svg"
 )
 
 func classHeader(shape d2target.Shape, box *geo.Box, text string, textWidth, textHeight, fontSize float64) string {
-	str := fmt.Sprintf(`<rect class="class_header" x="%f" y="%f" width="%f" height="%f" fill="%s" />`,
+	rectEl := d2themes.NewThemableElement("rect")
-		box.TopLeft.X, box.TopLeft.Y, box.Width, box.Height, shape.Fill)
+	rectEl.X, rectEl.Y = box.TopLeft.X, box.TopLeft.Y
+	rectEl.Width, rectEl.Height = box.Width, box.Height
+	rectEl.Fill = shape.Fill
+	rectEl.ClassName = "class_header"
+	str := rectEl.Render()
 
 	if text != "" {
 		tl := label.InsideMiddleCenter.GetPointOnBox(
@@ -23,17 +27,16 @@ func classHeader(shape d2target.Shape, box *geo.Box, text string, textWidth, tex
 			textHeight,
 		)
 
-		str += fmt.Sprintf(`<text class="%s" x="%f" y="%f" style="%s">%s</text>`,
+		textEl := d2themes.NewThemableElement("text")
-			"text-mono",
+		textEl.X = tl.X + textWidth/2
-			tl.X+textWidth/2,
+		textEl.Y = tl.Y + textHeight*3/4
-			tl.Y+textHeight*3/4,
+		textEl.Fill = shape.Stroke
-			fmt.Sprintf(`text-anchor:%s;font-size:%vpx;fill:%s`,
+		textEl.ClassName = "text-mono"
-				"middle",
+		textEl.Style = fmt.Sprintf(`text-anchor:%s;font-size:%vpx;`,
-				4+fontSize,
+			"middle", 4+fontSize,
-				shape.Stroke,
-			),
-			svg.EscapeText(text),
 		)
+		textEl.Content = svg.EscapeText(text)
+		str += textEl.Render()
 	}
 	return str
 }
@@ -54,33 +57,39 @@ func classRow(shape d2target.Shape, box *geo.Box, prefix, nameText, typeText str
 		fontSize,
 	)
 
-	return strings.Join([]string{
+	textEl := d2themes.NewThemableElement("text")
-		fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
+	textEl.X = prefixTL.X
-			prefixTL.X,
+	textEl.Y = prefixTL.Y + fontSize*3/4
-			prefixTL.Y+fontSize*3/4,
+	textEl.Fill = shape.PrimaryAccentColor
-			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.PrimaryAccentColor),
+	textEl.ClassName = "text-mono"
-			prefix,
+	textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx", "start", fontSize)
-		),
+	textEl.Content = prefix
+	out := textEl.Render()
 
-		fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
+	textEl.X = prefixTL.X + d2target.PrefixWidth
-			prefixTL.X+d2target.PrefixWidth,
+	textEl.Fill = shape.Fill
-			prefixTL.Y+fontSize*3/4,
+	textEl.Content = svg.EscapeText(nameText)
-			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.Fill),
+	out += textEl.Render()
-			svg.EscapeText(nameText),
-		),
 
-		fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
+	textEl.X = typeTR.X
-			typeTR.X,
+	textEl.Y = typeTR.Y + fontSize*3/4
-			typeTR.Y+fontSize*3/4,
+	textEl.Fill = shape.SecondaryAccentColor
-			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "end", fontSize, shape.SecondaryAccentColor),
+	textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx", "end", fontSize)
-			svg.EscapeText(typeText),
+	textEl.Content = svg.EscapeText(typeText)
-		),
+	out += textEl.Render()
-	}, "\n")
+
+	return out
 }
 
 func drawClass(writer io.Writer, targetShape d2target.Shape) {
-	fmt.Fprintf(writer, `<rect class="shape" x="%d" y="%d" width="%d" height="%d" style="%s"/>`,
+	el := d2themes.NewThemableElement("rect")
-		targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, targetShape.CSSStyle())
+	el.X = float64(targetShape.Pos.X)
+	el.Y = float64(targetShape.Pos.Y)
+	el.Width = float64(targetShape.Width)
+	el.Height = float64(targetShape.Height)
+	el.Fill, el.Stroke = d2themes.ShapeTheme(targetShape)
+	el.Style = targetShape.CSSStyle()
+	fmt.Fprint(writer, el.Render())
 
 	box := geo.NewBox(
 		geo.NewPoint(float64(targetShape.Pos.X), float64(targetShape.Pos.Y)),
@@ -103,10 +112,12 @@ func drawClass(writer io.Writer, targetShape d2target.Shape) {
 		rowBox.TopLeft.Y += rowHeight
 	}
 
-	fmt.Fprintf(writer, `<line x1="%f" y1="%f" x2="%f" y2="%f" style="%s" />`,
+	lineEl := d2themes.NewThemableElement("line")
-		rowBox.TopLeft.X, rowBox.TopLeft.Y,
+	lineEl.X1, lineEl.Y1 = rowBox.TopLeft.X, rowBox.TopLeft.Y
-		rowBox.TopLeft.X+rowBox.Width, rowBox.TopLeft.Y,
+	lineEl.X2, lineEl.Y2 = rowBox.TopLeft.X+rowBox.Width, rowBox.TopLeft.Y
-		fmt.Sprintf("stroke-width:1;stroke:%v", targetShape.Fill))
+	lineEl.Stroke = targetShape.Fill
+	lineEl.Style = "stroke-width:1"
+	fmt.Fprint(writer, lineEl.Render())
 
 	for _, m := range targetShape.Methods {
 		fmt.Fprint(writer,

d2renderers/d2svg/dark_theme/dark_theme_test.go

@@ -0,0 +1,441 @@
+package dark_theme_test
+
+import (
+	"context"
+	"encoding/xml"
+	"io/ioutil"
+	"os"
+	"path/filepath"
+	"strings"
+	"testing"
+
+	"cdr.dev/slog"
+
+	tassert "github.com/stretchr/testify/assert"
+
+	"oss.terrastruct.com/util-go/assert"
+	"oss.terrastruct.com/util-go/diff"
+	"oss.terrastruct.com/util-go/go2"
+
+	"oss.terrastruct.com/d2/d2layouts/d2dagrelayout"
+	"oss.terrastruct.com/d2/d2lib"
+	"oss.terrastruct.com/d2/d2renderers/d2fonts"
+	"oss.terrastruct.com/d2/d2renderers/d2svg"
+	"oss.terrastruct.com/d2/lib/log"
+	"oss.terrastruct.com/d2/lib/textmeasure"
+)
+
+func TestDarkTheme(t *testing.T) {
+	t.Parallel()
+
+	tcs := []testCase{
+		{
+			name: "basic",
+			script: `a -> b
+`,
+		},
+		{
+			name: "child to child",
+			script: `winter.snow -> summer.sun
+		`,
+		},
+		{
+			name: "animated",
+			script: `winter.snow -> summer.sun -> trees -> winter.snow: { style.animated: true }
+		`,
+		},
+		{
+			name: "connection label",
+			script: `a -> b: hello
+		`,
+		},
+		{
+			name: "twitter",
+			script: `timeline mixer: "" {
+  explanation: |md
+    ## **Timeline mixer**
+    - Inject ads, who-to-follow, onboarding
+    - Conversation module
+    - Cursoring,pagination
+    - Tweat deduplication
+    - Served data logging
+  |
+}
+People discovery: "People discovery \nservice"
+admixer: Ad mixer {
+  style.fill: "#cba6f7"
+  style.font-color: "#000000"
+}
+
+onboarding service: "Onboarding \nservice"
+timeline mixer -> People discovery
+timeline mixer -> onboarding service
+timeline mixer -> admixer
+container0: "" {
+  graphql
+  comment
+  tlsapi
+}
+container0.graphql: GraphQL\nFederated Strato Column {
+  shape: image
+  icon: https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/GraphQL_Logo.svg/1200px-GraphQL_Logo.svg.png
+}
+container0.comment: |md
+  ## Tweet/user content hydration, visibility filtering
+|
+container0.tlsapi: TLS-API (being deprecated)
+container0.graphql -> timeline mixer
+timeline mixer <- container0.tlsapi
+twitter fe: "Twitter Frontend " {
+  icon: https://icons.terrastruct.com/social/013-twitter-1.svg
+  shape: image
+}
+twitter fe -> container0.graphql: iPhone web
+twitter fe -> container0.tlsapi: HTTP Android
+web: Web {
+  icon: https://icons.terrastruct.com/azure/Web%20Service%20Color/App%20Service%20Domains.svg
+  shape: image
+}
+
+Iphone: {
+  icon: 'https://ss7.vzw.com/is/image/VerizonWireless/apple-iphone-12-64gb-purple-53017-mjn13ll-a?$device-lg$'
+  shape: image
+}
+Android: {
+  icon: https://cdn4.iconfinder.com/data/icons/smart-phones-technologies/512/android-phone.png
+  shape: image
+}
+
+web -> twitter fe
+timeline scorer: "Timeline\nScorer" {
+  style.fill: "#fab387"
+  style.font-color: "#000000"
+}
+home ranker: Home Ranker
+
+timeline service: Timeline Service
+timeline mixer -> timeline scorer: Thrift RPC
+timeline mixer -> home ranker: {
+  style.stroke-dash: 4
+  style.stroke: "#000E3D"
+}
+timeline mixer -> timeline service
+home mixer: Home mixer {
+  # style.fill: "#c1a2f3"
+}
+container0.graphql -> home mixer: {
+  style.stroke-dash: 4
+  style.stroke: "#000E3D"
+}
+home mixer -> timeline scorer
+home mixer -> home ranker: {
+  style.stroke-dash: 4
+  style.stroke: "#000E3D"
+}
+home mixer -> timeline service
+manhattan 2: Manhattan
+gizmoduck: Gizmoduck
+socialgraph: Social graph
+tweetypie: Tweety Pie
+home mixer -> manhattan 2
+home mixer -> gizmoduck
+home mixer -> socialgraph
+home mixer -> tweetypie
+Iphone -> twitter fe
+Android -> twitter fe
+prediction service2: Prediction Service {
+  shape: image
+  icon: https://cdn-icons-png.flaticon.com/512/6461/6461819.png
+}
+home scorer: Home Scorer {
+  style.fill: "#eba0ac"
+  style.font-color: "#000000"
+}
+manhattan: Manhattan
+memcache: Memcache {
+  icon: https://d1q6f0aelx0por.cloudfront.net/product-logos/de041504-0ddb-43f6-b89e-fe04403cca8d-memcached.png
+}
+
+fetch: Fetch {
+  style.multiple: true
+  shape: step
+}
+feature: Feature {
+  style.multiple: true
+  shape: step
+}
+scoring: Scoring {
+  style.multiple: true
+  shape: step
+}
+fetch -> feature
+feature -> scoring
+
+prediction service: Prediction Service {
+  shape: image
+  icon: https://cdn-icons-png.flaticon.com/512/6461/6461819.png
+}
+scoring -> prediction service
+fetch -> container2.crmixer
+
+home scorer -> manhattan: ""
+
+home scorer -> memcache: ""
+home scorer -> prediction service2
+home ranker -> home scorer
+home ranker -> container2.crmixer: Candidate Fetch
+container2: "" {
+  style.stroke: "#b4befe"
+  style.fill: "#000000"
+  crmixer: CrMixer {
+    style.fill: "#11111b"
+	style.font-color: "#cdd6f4"
+  }
+  earlybird: EarlyBird
+  utag: Utag
+  space: Space
+  communities: Communities
+}
+etc: ...etc
+
+home scorer -> etc: Feature Hydration
+
+feature -> manhattan
+feature -> memcache
+feature -> etc: Candidate sources
+		`,
+		},
+		{
+			name: "all_shapes",
+			script: `
+rectangle: {shape: "rectangle"}
+square: {shape: "square"}
+page: {shape: "page"}
+parallelogram: {shape: "parallelogram"}
+document: {shape: "document"}
+cylinder: {shape: "cylinder"}
+queue: {shape: "queue"}
+package: {shape: "package"}
+step: {shape: "step"}
+callout: {shape: "callout"}
+stored_data: {shape: "stored_data"}
+person: {shape: "person"}
+diamond: {shape: "diamond"}
+oval: {shape: "oval"}
+circle: {shape: "circle"}
+hexagon: {shape: "hexagon"}
+cloud: {shape: "cloud"}
+
+rectangle -> square -> page
+parallelogram -> document -> cylinder
+queue -> package -> step
+callout -> stored_data -> person
+diamond -> oval -> circle
+hexagon -> cloud
+`,
+		},
+		{
+			name: "sql_tables",
+			script: `users: {
+	shape: sql_table
+	id: int
+	name: string
+	email: string
+	password: string
+	last_login: datetime
+}
+
+products: {
+	shape: sql_table
+	id: int
+	price: decimal
+	sku: string
+	name: string
+}
+
+orders: {
+	shape: sql_table
+	id: int
+	user_id: int
+	product_id: int
+}
+
+shipments: {
+	shape: sql_table
+	id: int
+	order_id: int
+	tracking_number: string {constraint: primary_key}
+	status: string
+}
+
+users.id <-> orders.user_id
+products.id <-> orders.product_id
+shipments.order_id <-> orders.id`,
+		},
+		{
+			name: "class",
+			script: `manager: BatchManager {
+  shape: class
+  -num: int
+  -timeout: int
+  -pid
+
+  +getStatus(): Enum
+  +getJobs(): "Job[]"
+  +setTimeout(seconds int)
+}
+`,
+		},
+		{
+			name: "arrowheads",
+			script: `
+a: ""
+b: ""
+a.1 -- b.1: none
+a.2 <-> b.2: arrow {
+	source-arrowhead.shape: arrow
+	target-arrowhead.shape: arrow
+}
+a.3 <-> b.3: triangle {
+	source-arrowhead.shape: triangle
+	target-arrowhead.shape: triangle
+}
+a.4 <-> b.4: diamond {
+	source-arrowhead.shape: diamond
+	target-arrowhead.shape: diamond
+}
+a.5 <-> b.5: diamond filled {
+	source-arrowhead: {
+		shape: diamond
+		style.filled: true
+	}
+	target-arrowhead: {
+		shape: diamond
+		style.filled: true
+	}
+}
+a.6 <-> b.6: cf-many {
+	source-arrowhead.shape: cf-many
+	target-arrowhead.shape: cf-many
+}
+a.7 <-> b.7: cf-many-required {
+	source-arrowhead.shape: cf-many-required
+	target-arrowhead.shape: cf-many-required
+}
+a.8 <-> b.8: cf-one {
+	source-arrowhead.shape: cf-one
+	target-arrowhead.shape: cf-one
+}
+a.9 <-> b.9: cf-one-required {
+	source-arrowhead.shape: cf-one-required
+	target-arrowhead.shape: cf-one-required
+}
+`,
+		},
+		{
+			name: "opacity",
+			script: `x.style.opacity: 0.4
+y: |md
+  linux: because a PC is a terrible thing to waste
+| {
+	style.opacity: 0.4
+}
+x -> a: {
+  label: You don't have to know how the computer works,\njust how to work the computer.
+  style.opacity: 0.4
+}
+users: {
+	shape: sql_table
+	last_login: datetime
+	style.opacity: 0.4
+}
+`,
+		},
+		{
+			name: "overlay",
+			script: `bright: {
+	style.stroke: "#000"
+	style.font-color: "#000"
+	style.fill: "#fff"
+}
+normal: {
+	style.stroke: "#000"
+	style.font-color: "#000"
+	style.fill: "#ccc"
+}
+dark: {
+	style.stroke: "#000"
+	style.font-color: "#fff"
+	style.fill: "#555"
+}
+darker: {
+	style.stroke: "#000"
+	style.font-color: "#fff"
+	style.fill: "#000"
+}
+`,
+		},
+	}
+	runa(t, tcs)
+}
+
+type testCase struct {
+	name   string
+	script string
+	skip   bool
+}
+
+func runa(t *testing.T, tcs []testCase) {
+	for _, tc := range tcs {
+		tc := tc
+		t.Run(tc.name, func(t *testing.T) {
+			if tc.skip {
+				t.Skip()
+			}
+			t.Parallel()
+
+			run(t, tc)
+		})
+	}
+}
+
+func run(t *testing.T, tc testCase) {
+	ctx := context.Background()
+	ctx = log.WithTB(ctx, t, nil)
+	ctx = log.Leveled(ctx, slog.LevelDebug)
+
+	ruler, err := textmeasure.NewRuler()
+	if !tassert.Nil(t, err) {
+		return
+	}
+
+	diagram, _, err := d2lib.Compile(ctx, tc.script, &d2lib.CompileOptions{
+		Ruler:      ruler,
+		Layout:     d2dagrelayout.DefaultLayout,
+		FontFamily: go2.Pointer(d2fonts.HandDrawn),
+	})
+	if !tassert.Nil(t, err) {
+		return
+	}
+
+	dataPath := filepath.Join("testdata", strings.TrimPrefix(t.Name(), "TestDarkTheme/"))
+	pathGotSVG := filepath.Join(dataPath, "dark_theme.got.svg")
+
+	svgBytes, err := d2svg.Render(diagram, &d2svg.RenderOpts{
+		Pad:     d2svg.DEFAULT_PADDING,
+		ThemeID: 200,
+	})
+	assert.Success(t, err)
+	err = os.MkdirAll(dataPath, 0755)
+	assert.Success(t, err)
+	err = ioutil.WriteFile(pathGotSVG, svgBytes, 0600)
+	assert.Success(t, err)
+	defer os.Remove(pathGotSVG)
+
+	var xmlParsed interface{}
+	err = xml.Unmarshal(svgBytes, &xmlParsed)
+	assert.Success(t, err)
+
+	err = diff.Testdata(filepath.Join(dataPath, "dark_theme"), ".svg", svgBytes)
+	assert.Success(t, err)
+}

d2renderers/d2svg/github-markdown.css

@@ -20,29 +20,14 @@
   tab-size: 4;
 }
 
-/* based on https://github.com/sindresorhus/github-markdown-css */
+/* variables are provided in d2renderers/d2svg/d2svg.go */
-.md {
-  color-scheme: light;
-  --color-fg-default: #24292f;
-  --color-fg-muted: #57606a;
-  --color-fg-subtle: #6e7781;
-  --color-canvas-default: #ffffff;
-  --color-canvas-subtle: #f6f8fa;
-  --color-border-default: #d0d7de;
-  --color-border-muted: hsla(210, 18%, 87%, 1);
-  --color-neutral-muted: rgba(175, 184, 193, 0.2);
-  --color-accent-fg: #0969da;
-  --color-accent-emphasis: #0969da;
-  --color-attention-subtle: #fff8c5;
-  --color-danger-fg: #cf222e;
-}
 
 .md {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   margin: 0;
   color: var(--color-fg-default);
-  background-color: var(--color-canvas-default);
+  background-color: transparent; /* we don't want to define the background color */
   font-family: "font-regular";
   font-size: 16px;
   line-height: 1.5;

d2renderers/d2svg/sketchstyle.css

@@ -1,4 +0,0 @@
-.sketch-overlay {
-  fill: url(#streaks);
-  mix-blend-mode: overlay;
-}

d2renderers/d2svg/table.go

@@ -3,9 +3,9 @@ package d2svg
 import (
 	"fmt"
 	"io"
-	"strings"
 
 	"oss.terrastruct.com/d2/d2target"
+	"oss.terrastruct.com/d2/d2themes"
 	"oss.terrastruct.com/d2/lib/geo"
 	"oss.terrastruct.com/d2/lib/label"
 	"oss.terrastruct.com/d2/lib/svg"
@@ -13,8 +13,12 @@ import (
 )
 
 func tableHeader(shape d2target.Shape, box *geo.Box, text string, textWidth, textHeight, fontSize float64) string {
-	str := fmt.Sprintf(`<rect class="class_header" x="%f" y="%f" width="%f" height="%f" fill="%s" />`,
+	rectEl := d2themes.NewThemableElement("rect")
-		box.TopLeft.X, box.TopLeft.Y, box.Width, box.Height, shape.Fill)
+	rectEl.X, rectEl.Y = box.TopLeft.X, box.TopLeft.Y
+	rectEl.Width, rectEl.Height = box.Width, box.Height
+	rectEl.Fill = shape.Fill
+	rectEl.ClassName = "class_header"
+	str := rectEl.Render()
 
 	if text != "" {
 		tl := label.InsideMiddleLeft.GetPointOnBox(
@@ -24,17 +28,16 @@ func tableHeader(shape d2target.Shape, box *geo.Box, text string, textWidth, tex
 			textHeight,
 		)
 
-		str += fmt.Sprintf(`<text class="%s" x="%f" y="%f" style="%s">%s</text>`,
+		textEl := d2themes.NewThemableElement("text")
-			"text",
+		textEl.X = tl.X
-			tl.X,
+		textEl.Y = tl.Y + textHeight*3/4
-			tl.Y+textHeight*3/4,
+		textEl.Fill = shape.Stroke
-			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s",
+		textEl.ClassName = "text"
-				"start",
+		textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx",
-				4+fontSize,
+			"start", 4+fontSize,
-				shape.Stroke,
-			),
-			svg.EscapeText(text),
 		)
+		textEl.Content = svg.EscapeText(text)
+		str += textEl.Render()
 	}
 	return str
 }
@@ -55,33 +58,40 @@ func tableRow(shape d2target.Shape, box *geo.Box, nameText, typeText, constraint
 		fontSize,
 	)
 
-	return strings.Join([]string{
+	textEl := d2themes.NewThemableElement("text")
-		fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
+	textEl.X = nameTL.X
-			nameTL.X,
+	textEl.Y = nameTL.Y + fontSize*3/4
-			nameTL.Y+fontSize*3/4,
+	textEl.Fill = shape.PrimaryAccentColor
-			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.PrimaryAccentColor),
+	textEl.ClassName = "text"
-			svg.EscapeText(nameText),
+	textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx", "start", fontSize)
-		),
+	textEl.Content = svg.EscapeText(nameText)
+	out := textEl.Render()
 
-		fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
+	textEl.X = nameTL.X + longestNameWidth + 2*d2target.NamePadding
-			nameTL.X+longestNameWidth+2*d2target.NamePadding,
+	textEl.Fill = shape.NeutralAccentColor
-			nameTL.Y+fontSize*3/4,
+	textEl.Content = svg.EscapeText(typeText)
-			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.NeutralAccentColor),
+	out += textEl.Render()
-			svg.EscapeText(typeText),
-		),
 
-		fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
+	textEl.X = constraintTR.X
-			constraintTR.X,
+	textEl.Y = constraintTR.Y + fontSize*3/4
-			constraintTR.Y+fontSize*3/4,
+	textEl.Fill = shape.SecondaryAccentColor
-			fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s;letter-spacing:2px;", "end", fontSize, shape.SecondaryAccentColor),
+	textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx;letter-spacing:2px", "end", fontSize)
-			constraintText,
+	textEl.Content = constraintText
-		),
+	out += textEl.Render()
-	}, "\n")
+
+	return out
 }
 
 func drawTable(writer io.Writer, targetShape d2target.Shape) {
-	fmt.Fprintf(writer, `<rect class="shape" x="%d" y="%d" width="%d" height="%d" style="%s"/>`,
+	rectEl := d2themes.NewThemableElement("rect")
-		targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, targetShape.CSSStyle())
+	rectEl.X = float64(targetShape.Pos.X)
+	rectEl.Y = float64(targetShape.Pos.Y)
+	rectEl.Width = float64(targetShape.Width)
+	rectEl.Height = float64(targetShape.Height)
+	rectEl.Fill, rectEl.Stroke = d2themes.ShapeTheme(targetShape)
+	rectEl.ClassName = "shape"
+	rectEl.Style = targetShape.CSSStyle()
+	fmt.Fprint(writer, rectEl.Render())
 
 	box := geo.NewBox(
 		geo.NewPoint(float64(targetShape.Pos.X), float64(targetShape.Pos.Y)),
@@ -108,10 +118,12 @@ func drawTable(writer io.Writer, targetShape d2target.Shape) {
 			tableRow(targetShape, rowBox, f.Name.Label, f.Type.Label, f.ConstraintAbbr(), float64(targetShape.FontSize), float64(longestNameWidth)),
 		)
 		rowBox.TopLeft.Y += rowHeight
-		fmt.Fprintf(writer, `<line x1="%f" y1="%f" x2="%f" y2="%f" style="stroke-width:2;stroke:%s" />`,
+
-			rowBox.TopLeft.X, rowBox.TopLeft.Y,
+		lineEl := d2themes.NewThemableElement("line")
-			rowBox.TopLeft.X+rowBox.Width, rowBox.TopLeft.Y,
+		lineEl.X1, lineEl.Y1 = rowBox.TopLeft.X, rowBox.TopLeft.Y
-			targetShape.Fill,
+		lineEl.X2, lineEl.Y2 = rowBox.TopLeft.X+rowBox.Width, rowBox.TopLeft.Y
-		)
+		lineEl.Stroke = targetShape.Fill
+		lineEl.Style = "stroke-width:2"
+		fmt.Fprint(writer, lineEl.Render())
 	}
 }

d2target/d2target.go

@@ -11,7 +11,7 @@ import (
 	"oss.terrastruct.com/util-go/go2"
 
 	"oss.terrastruct.com/d2/d2renderers/d2fonts"
-	"oss.terrastruct.com/d2/d2themes"
+	"oss.terrastruct.com/d2/lib/color"
 	"oss.terrastruct.com/d2/lib/geo"
 	"oss.terrastruct.com/d2/lib/label"
 	"oss.terrastruct.com/d2/lib/shape"
@@ -87,6 +87,16 @@ func (diagram Diagram) BoundingBox() (topLeft, bottomRight Point) {
 			x2 = go2.Max(x2, targetShape.Pos.X+MULTIPLE_OFFSET+targetShape.Width+targetShape.StrokeWidth)
 		}
 
+		if targetShape.Icon != nil && label.Position(targetShape.IconPosition).IsOutside() {
+			contentBox := geo.NewBox(geo.NewPoint(0, 0), float64(targetShape.Width), float64(targetShape.Height))
+			s := shape.NewShape(targetShape.Type, contentBox)
+			size := GetIconSize(s.GetInnerBox(), targetShape.IconPosition)
+			y1 = go2.Min(y1, targetShape.Pos.Y-label.PADDING-size)
+			x1 = go2.Min(x1, targetShape.Pos.X-label.PADDING-size)
+			y2 = go2.Max(y2, targetShape.Pos.Y+label.PADDING+size)
+			x2 = go2.Max(x2, targetShape.Pos.X+label.PADDING+size)
+		}
+
 		if targetShape.Label != "" {
 			labelPosition := label.Position(targetShape.LabelPosition)
 			if !labelPosition.IsOutside() {
@@ -184,16 +194,6 @@ type Shape struct {
 func (s Shape) CSSStyle() string {
 	out := ""
 
-	if s.Type == ShapeSQLTable || s.Type == ShapeClass {
-		// Fill is used for header fill in these types
-		// This fill property is just background of rows
-		out += fmt.Sprintf(`fill:%s;`, s.Stroke)
-		// Stroke (border) of these shapes should match the header fill
-		out += fmt.Sprintf(`stroke:%s;`, s.Fill)
-	} else {
-		out += fmt.Sprintf(`fill:%s;`, s.Fill)
-		out += fmt.Sprintf(`stroke:%s;`, s.Stroke)
-	}
 	out += fmt.Sprintf(`stroke-width:%d;`, s.StrokeWidth)
 	if s.StrokeDash != 0 {
 		dashSize, gapSize := svg.GetStrokeDashAttributes(float64(s.StrokeWidth), s.StrokeDash)
@@ -299,7 +299,6 @@ func BaseConnection() *Connection {
 func (c Connection) CSSStyle() string {
 	out := ""
 
-	out += fmt.Sprintf(`stroke:%s;`, c.Stroke)
 	out += fmt.Sprintf(`stroke-width:%d;`, c.StrokeWidth)
 	strokeDash := c.StrokeDash
 	if strokeDash == 0 && c.Animated {
@@ -495,11 +494,11 @@ func NewTextDimensions(w, h int) *TextDimensions {
 	return &TextDimensions{Width: w, Height: h}
 }
 
-func (text MText) GetColor(theme *d2themes.Theme, isItalic bool) string {
+func (text MText) GetColor(isItalic bool) string {
 	if isItalic {
-		return theme.Colors.Neutrals.N2
+		return color.N2
 	}
-	return theme.Colors.Neutrals.N1
+	return color.N1
 }
 
 var DSL_SHAPE_TO_SHAPE_TYPE = map[string]string{

d2themes/common.go

@@ -0,0 +1,19 @@
+package d2themes
+
+import (
+	"oss.terrastruct.com/d2/d2target"
+)
+
+func ShapeTheme(shape d2target.Shape) (fill, stroke string) {
+	if shape.Type == d2target.ShapeSQLTable || shape.Type == d2target.ShapeClass {
+		// Fill is used for header fill in these types
+		// This fill property is just background of rows
+		fill = shape.Stroke
+		// Stroke (border) of these shapes should match the header fill
+		stroke = shape.Fill
+	} else {
+		fill = shape.Fill
+		stroke = shape.Stroke
+	}
+	return fill, stroke
+}

d2themes/d2themes.go

@@ -58,3 +58,13 @@ var WarmNeutral = Neutral{
 	N6: "#ECEBEB",
 	N7: "#FFFFFF",
 }
+
+var DarkNeutral = Neutral{
+	N1: "#CDD6F4",
+	N2: "#BAC2DE",
+	N3: "#A6ADC8",
+	N4: "#585B70",
+	N5: "#45475A",
+	N6: "#313244",
+	N7: "#1E1E2E",
+}

d2themes/d2themescatalog/catalog.go

@@ -7,7 +7,7 @@ import (
 	"oss.terrastruct.com/d2/d2themes"
 )
 
-var Catalog = []d2themes.Theme{
+var LightCatalog = []d2themes.Theme{
 	NeutralDefault,
 	NeutralGrey,
 	FlagshipTerrastruct,
@@ -24,8 +24,18 @@ var Catalog = []d2themes.Theme{
 	ButteredToast,
 }
 
+var DarkCatalog = []d2themes.Theme{
+	DarkMauve,
+}
+
 func Find(id int64) d2themes.Theme {
-	for _, theme := range Catalog {
+	for _, theme := range LightCatalog {
+		if theme.ID == id {
+			return theme
+		}
+	}
+
+	for _, theme := range DarkCatalog {
 		if theme.ID == id {
 			return theme
 		}
@@ -36,8 +46,16 @@ func Find(id int64) d2themes.Theme {
 
 func CLIString() string {
 	var s strings.Builder
-	for _, t := range Catalog {
+
+	s.WriteString("Light:\n")
+	for _, t := range LightCatalog {
 		s.WriteString(fmt.Sprintf("- %s: %d\n", t.Name, t.ID))
 	}
+
+	s.WriteString("Dark:\n")
+	for _, t := range DarkCatalog {
+		s.WriteString(fmt.Sprintf("- %s: %d\n", t.Name, t.ID))
+	}
+
 	return s.String()
 }

d2themes/d2themescatalog/dark_mauve.go

@@ -0,0 +1,25 @@
+package d2themescatalog
+
+import "oss.terrastruct.com/d2/d2themes"
+
+var DarkMauve = d2themes.Theme{
+	ID:   200,
+	Name: "Dark Mauve",
+	Colors: d2themes.ColorPalette{
+		Neutrals: d2themes.DarkNeutral,
+
+		B1: "#CBA6f7",
+		B2: "#CBA6f7",
+		B3: "#6C7086",
+		B4: "#585B70",
+		B5: "#45475A",
+		B6: "#313244",
+
+		AA2: "#f38BA8",
+		AA4: "#45475A",
+		AA5: "#313244",
+
+		AB4: "#45475A",
+		AB5: "#313244",
+	},
+}

d2themes/element.go

@@ -0,0 +1,197 @@
+package d2themes
+
+import (
+	"fmt"
+	"math"
+
+	"oss.terrastruct.com/d2/lib/color"
+)
+
+// ThemableElement is a helper class for creating new XML elements.
+// This should be preferred over formatting and must be used
+// whenever Fill, Stroke, BackgroundColor or Color contains a color from a theme.
+// i.e. N[1-7] | B[1-6] | AA[245] | AB[45]
+type ThemableElement struct {
+	tag string
+
+	X      float64
+	X1     float64
+	X2     float64
+	Y      float64
+	Y1     float64
+	Y2     float64
+	Width  float64
+	Height float64
+	R      float64
+	Rx     float64
+	Ry     float64
+	Cx     float64
+	Cy     float64
+
+	D         string
+	Mask      string
+	Points    string
+	Transform string
+	Href      string
+	Xmlns     string
+
+	Fill            string
+	Stroke          string
+	BackgroundColor string
+	Color           string
+
+	ClassName  string
+	Style      string
+	Attributes string
+
+	Content string
+}
+
+func NewThemableElement(tag string) *ThemableElement {
+	xmlns := ""
+	if tag == "div" {
+		xmlns = "http://www.w3.org/1999/xhtml"
+	}
+
+	return &ThemableElement{
+		tag,
+		math.MaxFloat64,
+		math.MaxFloat64,
+		math.MaxFloat64,
+		math.MaxFloat64,
+		math.MaxFloat64,
+		math.MaxFloat64,
+		math.MaxFloat64,
+		math.MaxFloat64,
+		math.MaxFloat64,
+		math.MaxFloat64,
+		math.MaxFloat64,
+		math.MaxFloat64,
+		math.MaxFloat64,
+		"",
+		"",
+		"",
+		"",
+		"",
+		xmlns,
+		color.Empty,
+		color.Empty,
+		color.Empty,
+		color.Empty,
+		"",
+		"",
+		"",
+		"",
+	}
+}
+
+func (el *ThemableElement) SetTranslate(x, y float64) {
+	el.Transform = fmt.Sprintf("translate(%f %f)", x, y)
+}
+
+func (el *ThemableElement) SetMaskUrl(url string) {
+	el.Mask = fmt.Sprintf("url(#%s)", url)
+}
+
+func (el *ThemableElement) Render() string {
+	out := "<" + el.tag
+
+	if el.X != math.MaxFloat64 {
+		out += fmt.Sprintf(` x="%f"`, el.X)
+	}
+	if el.X1 != math.MaxFloat64 {
+		out += fmt.Sprintf(` x1="%f"`, el.X1)
+	}
+	if el.X2 != math.MaxFloat64 {
+		out += fmt.Sprintf(` x2="%f"`, el.X2)
+	}
+	if el.Y != math.MaxFloat64 {
+		out += fmt.Sprintf(` y="%f"`, el.Y)
+	}
+	if el.Y1 != math.MaxFloat64 {
+		out += fmt.Sprintf(` y1="%f"`, el.Y1)
+	}
+	if el.Y2 != math.MaxFloat64 {
+		out += fmt.Sprintf(` y2="%f"`, el.Y2)
+	}
+	if el.Width != math.MaxFloat64 {
+		out += fmt.Sprintf(` width="%f"`, el.Width)
+	}
+	if el.Height != math.MaxFloat64 {
+		out += fmt.Sprintf(` height="%f"`, el.Height)
+	}
+	if el.R != math.MaxFloat64 {
+		out += fmt.Sprintf(` r="%f"`, el.R)
+	}
+	if el.Rx != math.MaxFloat64 {
+		out += fmt.Sprintf(` rx="%f"`, el.Rx)
+	}
+	if el.Ry != math.MaxFloat64 {
+		out += fmt.Sprintf(` ry="%f"`, el.Ry)
+	}
+	if el.Cx != math.MaxFloat64 {
+		out += fmt.Sprintf(` cx="%f"`, el.Cx)
+	}
+	if el.Cy != math.MaxFloat64 {
+		out += fmt.Sprintf(` cy="%f"`, el.Cy)
+	}
+
+	if len(el.D) > 0 {
+		out += fmt.Sprintf(` d="%s"`, el.D)
+	}
+	if len(el.Mask) > 0 {
+		out += fmt.Sprintf(` mask="%s"`, el.Mask)
+	}
+	if len(el.Points) > 0 {
+		out += fmt.Sprintf(` points="%s"`, el.Points)
+	}
+	if len(el.Transform) > 0 {
+		out += fmt.Sprintf(` transform="%s"`, el.Transform)
+	}
+	if len(el.Href) > 0 {
+		out += fmt.Sprintf(` href="%s"`, el.Href)
+	}
+	if len(el.Xmlns) > 0 {
+		out += fmt.Sprintf(` xmlns="%s"`, el.Xmlns)
+	}
+
+	class := el.ClassName
+	style := el.Style
+
+	// Add class {property}-{theme color} if the color is from a theme, set the property otherwise
+	if color.IsThemeColor(el.Stroke) {
+		class += fmt.Sprintf(" stroke-%s", el.Stroke)
+	} else if len(el.Stroke) > 0 {
+		out += fmt.Sprintf(` stroke="%s"`, el.Stroke)
+	}
+	if color.IsThemeColor(el.Fill) {
+		class += fmt.Sprintf(" fill-%s", el.Fill)
+	} else if len(el.Fill) > 0 {
+		out += fmt.Sprintf(` fill="%s"`, el.Fill)
+	}
+	if color.IsThemeColor(el.BackgroundColor) {
+		class += fmt.Sprintf(" background-color-%s", el.BackgroundColor)
+	} else if len(el.BackgroundColor) > 0 {
+		out += fmt.Sprintf(` background-color="%s"`, el.BackgroundColor)
+	}
+	if color.IsThemeColor(el.Color) {
+		class += fmt.Sprintf(" color-%s", el.Color)
+	} else if len(el.Color) > 0 {
+		out += fmt.Sprintf(` color="%s"`, el.Color)
+	}
+
+	if len(class) > 0 {
+		out += fmt.Sprintf(` class="%s"`, class)
+	}
+	if len(style) > 0 {
+		out += fmt.Sprintf(` style="%s"`, style)
+	}
+	if len(el.Attributes) > 0 {
+		out += fmt.Sprintf(` %s`, el.Attributes)
+	}
+
+	if len(el.Content) > 0 {
+		return fmt.Sprintf("%s>%s</%s>", out, el.Content, el.tag)
+	}
+	return out + " />"
+}

d2themes/sketch_overlay.go

@@ -0,0 +1,34 @@
+package d2themes
+
+import (
+	"fmt"
+
+	"oss.terrastruct.com/d2/lib/color"
+)
+
+type ThemableSketchOverlay struct {
+	el   *ThemableElement
+	fill string
+}
+
+func NewThemableSketchOverlay(el *ThemableElement, fill string) *ThemableSketchOverlay {
+	return &ThemableSketchOverlay{
+		el,
+		fill,
+	}
+}
+
+// WARNING: Do not reuse the element afterwards as this function changes the Class propery
+func (o *ThemableSketchOverlay) Render() (string, error) {
+	if color.IsThemeColor(o.fill) {
+		o.el.ClassName += fmt.Sprintf(" sketch-overlay-%s", o.fill) // e.g. sketch-overlay-B3
+	} else {
+		lc, err := color.LuminanceCategory(o.fill)
+		if err != nil {
+			return "", err
+		}
+		o.el.ClassName += fmt.Sprintf(" sketch-overlay-%s", lc) // e.g. sketch-overlay-dark
+	}
+
+	return o.el.Render(), nil
+}

docs/examples/lib/1-d2lib/d2lib.go

@@ -20,12 +20,12 @@ func main() {
 		return d2dagrelayout.Layout(ctx, g, nil)
 	}
 	diagram, _, _ := d2lib.Compile(context.Background(), "x -> y", &d2lib.CompileOptions{
-		Layout:  defaultLayout,
+		Layout: defaultLayout,
-		Ruler:   ruler,
+		Ruler:  ruler,
-		ThemeID: d2themescatalog.GrapeSoda.ID,
 	})
 	out, _ := d2svg.Render(diagram, &d2svg.RenderOpts{
-		Pad: d2svg.DEFAULT_PADDING,
+		Pad:     d2svg.DEFAULT_PADDING,
+		ThemeID: d2themescatalog.GrapeSoda.ID,
 	})
 	_ = ioutil.WriteFile(filepath.Join("out.svg"), out, 0600)
 }

docs/examples/lib/2-d2oracle/d2oracle.go

@@ -8,7 +8,6 @@ import (
 	"oss.terrastruct.com/d2/d2layouts/d2dagrelayout"
 	"oss.terrastruct.com/d2/d2lib"
 	"oss.terrastruct.com/d2/d2oracle"
-	"oss.terrastruct.com/d2/d2themes/d2themescatalog"
 	"oss.terrastruct.com/d2/lib/textmeasure"
 )
 
@@ -17,9 +16,8 @@ func main() {
 	// From one.go
 	ruler, _ := textmeasure.NewRuler()
 	_, graph, _ := d2lib.Compile(context.Background(), "x -> y", &d2lib.CompileOptions{
-		Layout:  d2dagrelayout.DefaultLayout,
+		Layout: d2dagrelayout.DefaultLayout,
-		Ruler:   ruler,
+		Ruler:  ruler,
-		ThemeID: d2themescatalog.GrapeSoda.ID,
 	})
 
 	// Create a shape with the ID, "meow"

docs/examples/lib/3-lowlevel/lowlevel.go

@@ -20,9 +20,10 @@ func main() {
 	ruler, _ := textmeasure.NewRuler()
 	_ = graph.SetDimensions(nil, ruler, nil)
 	_ = d2dagrelayout.Layout(context.Background(), graph, nil)
-	diagram, _ := d2exporter.Export(context.Background(), graph, d2themescatalog.NeutralDefault.ID, nil)
+	diagram, _ := d2exporter.Export(context.Background(), graph, nil)
 	out, _ := d2svg.Render(diagram, &d2svg.RenderOpts{
-		Pad: d2svg.DEFAULT_PADDING,
+		Pad:     d2svg.DEFAULT_PADDING,
+		ThemeID: d2themescatalog.NeutralDefault.ID,
 	})
 	_ = ioutil.WriteFile(filepath.Join("out.svg"), out, 0600)
 }

e2etests/e2e_test.go

@@ -24,6 +24,7 @@ import (
 	"oss.terrastruct.com/d2/d2layouts/d2near"
 	"oss.terrastruct.com/d2/d2layouts/d2sequence"
 	"oss.terrastruct.com/d2/d2lib"
+	"oss.terrastruct.com/d2/d2plugin"
 	"oss.terrastruct.com/d2/d2renderers/d2svg"
 	"oss.terrastruct.com/d2/d2target"
 	"oss.terrastruct.com/d2/lib/log"
@@ -73,12 +74,14 @@ a -> c
 }
 
 type testCase struct {
-	name       string
+	name              string
-	script     string
+	script            string
-	mtexts     []*d2target.MText
+	mtexts            []*d2target.MText
-	assertions func(t *testing.T, diagram *d2target.Diagram)
+	assertions        func(t *testing.T, diagram *d2target.Diagram)
-	skip       bool
+	skip              bool
-	expErr     string
+	dagreFeatureError string
+	elkFeatureError   string
+	expErr            string
 }
 
 func runa(t *testing.T, tcs []testCase) {
@@ -136,19 +139,22 @@ func run(t *testing.T, tc testCase) {
 
 	for _, layoutName := range layoutsTested {
 		var layout func(context.Context, *d2graph.Graph) error
+		var plugin d2plugin.Plugin
 		if layoutName == "dagre" {
 			layout = d2dagrelayout.DefaultLayout
+			plugin = &d2plugin.DagrePlugin
 		} else if layoutName == "elk" {
 			// If measured texts exists, we are specifically exercising text measurements, no need to run on both layouts
 			if tc.mtexts != nil {
 				continue
 			}
 			layout = d2elklayout.DefaultLayout
+			plugin = &d2plugin.ELKPlugin
 		}
-		diagram, _, err := d2lib.Compile(ctx, tc.script, &d2lib.CompileOptions{
+
+		diagram, g, err := d2lib.Compile(ctx, tc.script, &d2lib.CompileOptions{
 			Ruler:         ruler,
 			MeasuredTexts: tc.mtexts,
-			ThemeID:       0,
 			Layout:        layout,
 		})
 
@@ -160,6 +166,26 @@ func run(t *testing.T, tc testCase) {
 			assert.Success(t, err)
 		}
 
+		pluginInfo, err := plugin.Info(ctx)
+		assert.Success(t, err)
+
+		err = d2plugin.FeatureSupportCheck(pluginInfo, g)
+		switch layoutName {
+		case "dagre":
+			if tc.dagreFeatureError != "" {
+				assert.Error(t, err)
+				assert.ErrorString(t, err, tc.dagreFeatureError)
+				return
+			}
+		case "elk":
+			if tc.elkFeatureError != "" {
+				assert.Error(t, err)
+				assert.ErrorString(t, err, tc.elkFeatureError)
+				return
+			}
+		}
+		assert.Success(t, err)
+
 		if tc.assertions != nil {
 			t.Run("assertions", func(t *testing.T) {
 				tc.assertions(t, diagram)
@@ -170,7 +196,8 @@ func run(t *testing.T, tc testCase) {
 		pathGotSVG := filepath.Join(dataPath, "sketch.got.svg")
 
 		svgBytes, err := d2svg.Render(diagram, &d2svg.RenderOpts{
-			Pad: d2svg.DEFAULT_PADDING,
+			Pad:     0,
+			ThemeID: 0,
 		})
 		assert.Success(t, err)
 		err = os.MkdirAll(dataPath, 0755)

e2etests/regression_test.go

@@ -515,6 +515,20 @@ s: {
 
 s.n -> y.r: {style.stroke-width: 8; style.stroke: red}
 y.r -> a.g.i: 1\n2\n3\n4
+`,
+		},
+		{
+			name: "sequence-note-escape-group",
+			script: `shape: sequence_diagram
+a
+b
+
+"04:20,11:20": {
+  "loop through each table": {
+    a."start_time = datetime.datetime.now"
+    a -> b
+  }
+}
 `,
 		},
 	}

e2etests/stable_test.go

@@ -448,6 +448,7 @@ eee.shape: document
 eee <- aaa.ccc
 (eee <- aaa.ccc)[0]: '222'
 `,
+			dagreFeatureError: `Connection "(aaa.ccc -- aaa)[0]" goes from a container to a descendant, but layout engine "dagre" does not support this.`,
 		},
 		{
 			name: "chaos2",
@@ -1792,6 +1793,7 @@ c: {
   a
 }
 `,
+			dagreFeatureError: `Object "a" has attribute "width" and/or "height" set, but layout engine "dagre" does not support dimensions set on containers.`,
 		},
 		{
 			name: "crow_foot_arrowhead",

e2etests/testdata/measured/empty-class/dagre/board.exp.json

@@ -15,8 +15,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#0A0F25",
+      "fill": "N1",
-      "stroke": "#FFFFFF",
+      "stroke": "N7",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -33,7 +33,7 @@
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -41,9 +41,9 @@
       "labelHeight": 0,
       "zIndex": 0,
       "level": 1,
-      "primaryAccentColor": "#0D32B2",
+      "primaryAccentColor": "B2",
-      "secondaryAccentColor": "#4A6FF3",
+      "secondaryAccentColor": "AA2",
-      "neutralAccentColor": "#676C7E"
+      "neutralAccentColor": "N2"
     }
   ],
   "connections": []

e2etests/testdata/measured/empty-class/dagre/sketch.exp.svg

@@ -1,11 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="48" viewBox="-2 -2 116 48"><rect x="-2.000000" y="-2.000000" width="116.000000" height="48.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
-<svg
-id="d2-svg"
-style="background: white;"
-xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="316" height="248" viewBox="-102 -102 316 248"><style type="text/css">
-<![CDATA[
-.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -17,9 +10,7 @@ width="316" height="248" viewBox="-102 -102 316 248"><style type="text/css">
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-]]>
-</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {
     return;
   }
@@ -39,7 +30,7 @@ width="316" height="248" viewBox="-102 -102 316 248"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="a"><g class="shape" ><rect class="shape" x="0" y="0" width="112" height="44" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="112.000000" height="44.000000" fill="#0A0F25" /><line x1="0.000000" y1="44.000000" x2="112.000000" y2="44.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><mask id="2019199647" maskUnits="userSpaceOnUse" x="-102" y="-102" width="316" height="248">
+]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="112.000000" height="44.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="112.000000" height="44.000000" class="class_header fill-N1" /><line x1="0.000000" x2="112.000000" y1="44.000000" y2="44.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><mask id="148127623" maskUnits="userSpaceOnUse" x="-2" y="-2" width="116" height="48">
-<rect x="-102" y="-102" width="316" height="248" fill="white"></rect>
+<rect x="-2" y="-2" width="116" height="48" fill="white"></rect>
 
-</mask><style type="text/css"><![CDATA[]]></style></svg>
+</mask></svg>

e2etests/testdata/measured/empty-shape/dagre/board.exp.json

@@ -15,8 +15,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -33,7 +33,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,

e2etests/testdata/measured/empty-shape/dagre/sketch.exp.svg

@@ -1,11 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="104" height="104" viewBox="-2 -2 104 104"><rect x="-2.000000" y="-2.000000" width="104.000000" height="104.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
-<svg
-id="d2-svg"
-style="background: white;"
-xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="304" height="304" viewBox="-102 -102 304 304"><style type="text/css">
-<![CDATA[
-.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -17,9 +10,7 @@ width="304" height="304" viewBox="-102 -102 304 304"><style type="text/css">
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-]]>
-</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {
     return;
   }
@@ -39,7 +30,7 @@ width="304" height="304" viewBox="-102 -102 304 304"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="a"><g class="shape" ><rect x="0" y="0" width="100" height="100" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g></g><mask id="4175712569" maskUnits="userSpaceOnUse" x="-102" y="-102" width="304" height="304">
+]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g></g><mask id="198791073" maskUnits="userSpaceOnUse" x="-2" y="-2" width="104" height="104">
-<rect x="-102" y="-102" width="304" height="304" fill="white"></rect>
+<rect x="-2" y="-2" width="104" height="104" fill="white"></rect>
 
-</mask><style type="text/css"><![CDATA[]]></style></svg>
+</mask></svg>

e2etests/testdata/measured/empty-sql_table/dagre/board.exp.json

@@ -15,8 +15,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#0A0F25",
+      "fill": "N1",
-      "stroke": "#FFFFFF",
+      "stroke": "N7",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -33,7 +33,7 @@
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -41,9 +41,9 @@
       "labelHeight": 0,
       "zIndex": 0,
       "level": 1,
-      "primaryAccentColor": "#0D32B2",
+      "primaryAccentColor": "B2",
-      "secondaryAccentColor": "#4A6FF3",
+      "secondaryAccentColor": "AA2",
-      "neutralAccentColor": "#676C7E"
+      "neutralAccentColor": "N2"
     }
   ],
   "connections": []

e2etests/testdata/measured/empty-sql_table/dagre/sketch.exp.svg

@@ -1,11 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?><svg id="d2-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="54" height="16" viewBox="-2 -2 54 16"><rect x="-2.000000" y="-2.000000" width="54.000000" height="16.000000" class=" fill-N7" /><style type="text/css"><![CDATA[]]></style><style type="text/css"><![CDATA[.shape {
-<svg
-id="d2-svg"
-style="background: white;"
-xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-width="254" height="216" viewBox="-102 -102 254 216"><style type="text/css">
-<![CDATA[
-.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -17,9 +10,7 @@ width="254" height="216" viewBox="-102 -102 254 216"><style type="text/css">
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
-
+.fill-N1{fill:#0A0F25;}.fill-N2{fill:#676C7E;}.fill-N3{fill:#9499AB;}.fill-N4{fill:#CFD2DD;}.fill-N5{fill:#DEE1EB;}.fill-N6{fill:#EEF1F8;}.fill-N7{fill:#FFFFFF;}.fill-B1{fill:#0D32B2;}.fill-B2{fill:#0D32B2;}.fill-B3{fill:#E3E9FD;}.fill-B4{fill:#E3E9FD;}.fill-B5{fill:#EDF0FD;}.fill-B6{fill:#F7F8FE;}.fill-AA2{fill:#4A6FF3;}.fill-AA4{fill:#EDF0FD;}.fill-AA5{fill:#F7F8FE;}.fill-AB4{fill:#EDF0FD;}.fill-AB5{fill:#F7F8FE;}.stroke-N1{stroke:#0A0F25;}.stroke-N2{stroke:#676C7E;}.stroke-N3{stroke:#9499AB;}.stroke-N4{stroke:#CFD2DD;}.stroke-N5{stroke:#DEE1EB;}.stroke-N6{stroke:#EEF1F8;}.stroke-N7{stroke:#FFFFFF;}.stroke-B1{stroke:#0D32B2;}.stroke-B2{stroke:#0D32B2;}.stroke-B3{stroke:#E3E9FD;}.stroke-B4{stroke:#E3E9FD;}.stroke-B5{stroke:#EDF0FD;}.stroke-B6{stroke:#F7F8FE;}.stroke-AA2{stroke:#4A6FF3;}.stroke-AA4{stroke:#EDF0FD;}.stroke-AA5{stroke:#F7F8FE;}.stroke-AB4{stroke:#EDF0FD;}.stroke-AB5{stroke:#F7F8FE;}.background-color-N1{background-color:#0A0F25;}.background-color-N2{background-color:#676C7E;}.background-color-N3{background-color:#9499AB;}.background-color-N4{background-color:#CFD2DD;}.background-color-N5{background-color:#DEE1EB;}.background-color-N6{background-color:#EEF1F8;}.background-color-N7{background-color:#FFFFFF;}.background-color-B1{background-color:#0D32B2;}.background-color-B2{background-color:#0D32B2;}.background-color-B3{background-color:#E3E9FD;}.background-color-B4{background-color:#E3E9FD;}.background-color-B5{background-color:#EDF0FD;}.background-color-B6{background-color:#F7F8FE;}.background-color-AA2{background-color:#4A6FF3;}.background-color-AA4{background-color:#EDF0FD;}.background-color-AA5{background-color:#F7F8FE;}.background-color-AB4{background-color:#EDF0FD;}.background-color-AB5{background-color:#F7F8FE;}.color-N1{color:#0A0F25;}.color-N2{color:#676C7E;}.color-N3{color:#9499AB;}.color-N4{color:#CFD2DD;}.color-N5{color:#DEE1EB;}.color-N6{color:#EEF1F8;}.color-N7{color:#FFFFFF;}.color-B1{color:#0D32B2;}.color-B2{color:#0D32B2;}.color-B3{color:#E3E9FD;}.color-B4{color:#E3E9FD;}.color-B5{color:#EDF0FD;}.color-B6{color:#F7F8FE;}.color-AA2{color:#4A6FF3;}.color-AA4{color:#EDF0FD;}.color-AA5{color:#F7F8FE;}.color-AB4{color:#EDF0FD;}.color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}]]></style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
-]]>
-</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {
     return;
   }
@@ -39,7 +30,7 @@ width="254" height="216" viewBox="-102 -102 254 216"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="a"><g class="shape" ><rect class="shape" x="0" y="0" width="50" height="12" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="50.000000" height="12.000000" fill="#0A0F25" /></g></g><mask id="1023975809" maskUnits="userSpaceOnUse" x="-102" y="-102" width="254" height="216">
+]]></script><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="50.000000" height="12.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="50.000000" height="12.000000" class="class_header fill-N1" /></g></g><mask id="2388684491" maskUnits="userSpaceOnUse" x="-2" y="-2" width="54" height="16">
-<rect x="-102" y="-102" width="254" height="216" fill="white"></rect>
+<rect x="-2" y="-2" width="54" height="16" fill="white"></rect>
 
-</mask><style type="text/css"><![CDATA[]]></style></svg>
+</mask></svg>

e2etests/testdata/regression/ampersand-escape/dagre/board.exp.json

@@ -15,8 +15,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -33,7 +33,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -56,8 +56,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -74,7 +74,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -97,8 +97,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -115,7 +115,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,

e2etests/testdata/regression/ampersand-escape/elk/board.exp.json

@@ -15,8 +15,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -33,7 +33,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -56,8 +56,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -74,7 +74,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -97,8 +97,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -115,7 +115,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,

e2etests/testdata/regression/code_leading_trailing_newlines/dagre/board.exp.json

@@ -15,8 +15,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -33,7 +33,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "python",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -55,8 +55,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -73,7 +73,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "python",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -95,8 +95,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -113,7 +113,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "python",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,

e2etests/testdata/regression/code_leading_trailing_newlines/elk/board.exp.json

@@ -15,8 +15,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -33,7 +33,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "python",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -55,8 +55,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -73,7 +73,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "python",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -95,8 +95,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -113,7 +113,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "python",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,

e2etests/testdata/regression/dagre-disconnect/dagre/board.exp.json

@@ -15,8 +15,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -33,7 +33,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -56,8 +56,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -74,7 +74,7 @@
       "fontSize": 24,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -97,8 +97,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -115,7 +115,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -138,8 +138,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -156,7 +156,7 @@
       "fontSize": 24,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -179,8 +179,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -197,7 +197,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -220,8 +220,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -238,7 +238,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -261,8 +261,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -279,7 +279,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -302,7 +302,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
       "stroke": "red",
       "shadow": false,
       "3d": false,
@@ -320,7 +320,7 @@
       "fontSize": 24,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -343,8 +343,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -361,7 +361,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -384,8 +384,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -402,7 +402,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -425,8 +425,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -443,7 +443,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -466,8 +466,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -484,7 +484,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -507,8 +507,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -525,7 +525,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -548,8 +548,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -566,7 +566,7 @@
       "fontSize": 24,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -589,8 +589,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -607,7 +607,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -630,8 +630,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -648,7 +648,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -671,8 +671,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -689,7 +689,7 @@
       "fontSize": 24,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -712,8 +712,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -730,7 +730,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -753,8 +753,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -771,7 +771,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -794,8 +794,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -812,7 +812,7 @@
       "fontSize": 24,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -835,8 +835,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -853,7 +853,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -876,8 +876,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -894,7 +894,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -917,8 +917,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -935,7 +935,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -958,8 +958,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -976,7 +976,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -999,8 +999,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -1017,7 +1017,7 @@
       "fontSize": 24,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -1040,8 +1040,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -1058,7 +1058,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -1081,12 +1081,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -1165,12 +1165,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -1249,12 +1249,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -1333,12 +1333,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -1417,12 +1417,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -1501,12 +1501,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -1590,7 +1590,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -1657,12 +1657,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "1\n2\n3\n4",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,

e2etests/testdata/regression/dagre-disconnect/elk/board.exp.json

@@ -15,8 +15,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -33,7 +33,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -56,8 +56,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -74,7 +74,7 @@
       "fontSize": 24,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -97,8 +97,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -115,7 +115,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -138,8 +138,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -156,7 +156,7 @@
       "fontSize": 24,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -179,8 +179,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -197,7 +197,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -220,8 +220,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -238,7 +238,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -261,8 +261,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -279,7 +279,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -302,7 +302,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
       "stroke": "red",
       "shadow": false,
       "3d": false,
@@ -320,7 +320,7 @@
       "fontSize": 24,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -343,8 +343,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -361,7 +361,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -384,8 +384,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -402,7 +402,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -425,8 +425,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -443,7 +443,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -466,8 +466,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -484,7 +484,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -507,8 +507,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -525,7 +525,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -548,8 +548,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -566,7 +566,7 @@
       "fontSize": 24,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -589,8 +589,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -607,7 +607,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -630,8 +630,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -648,7 +648,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -671,8 +671,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -689,7 +689,7 @@
       "fontSize": 24,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -712,8 +712,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -730,7 +730,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -753,8 +753,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -771,7 +771,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -794,8 +794,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -812,7 +812,7 @@
       "fontSize": 24,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -835,8 +835,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -853,7 +853,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -876,8 +876,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -894,7 +894,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -917,8 +917,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -935,7 +935,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -958,8 +958,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -976,7 +976,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -999,8 +999,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -1017,7 +1017,7 @@
       "fontSize": 24,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -1040,8 +1040,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -1058,7 +1058,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -1081,12 +1081,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -1120,12 +1120,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -1175,12 +1175,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -1222,12 +1222,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -1269,12 +1269,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -1308,12 +1308,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -1352,7 +1352,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -1386,12 +1386,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "1\n2\n3\n4",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,

e2etests/testdata/regression/dagre_broken_arrowhead/dagre/board.exp.json

@@ -15,8 +15,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -33,7 +33,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -56,8 +56,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -74,7 +74,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -97,7 +97,7 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
       "stroke": "white",
       "shadow": false,
       "3d": false,
@@ -115,7 +115,7 @@
       "fontSize": 24,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -138,8 +138,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -156,7 +156,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -179,8 +179,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -197,7 +197,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -220,8 +220,8 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
@@ -238,7 +238,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -309,12 +309,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -357,12 +357,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,