merge resolved conflicts

ci/release/changelogs/next.md

@@ -1,8 +1,13 @@
 #### Features 🚀
 
+- `double-border` keyword implemented. [#565](https://github.com/terrastruct/d2/pull/565)
 - The [Dockerfile](./docs/INSTALL.md#docker) now supports rendering PNGs [#594](https://github.com/terrastruct/d2/issues/594)
   - There was a minor breaking change as part of this where the default working directory of the Dockerfile is now `/home/debian/src` instead of `/root/src` to allow UID remapping with [`fixuid`](https://github.com/boxboat/fixuid).
 
+- `d2 fmt` accepts multiple files to be formatted [#718](https://github.com/terrastruct/d2/issues/718)
+
 #### Improvements 🧹
 
 #### Bugfixes ⛑️
+
+- Fixes groups overlapping in sequence diagrams when they end in a self loop. [#728](https://github.com/terrastruct/d2/pull/728)

ci/release/template/man/d2.1

@@ -13,7 +13,7 @@
 .Nm d2
 .Ar layout Op Ar name
 .Nm d2
-.Ar fmt Ar file.d2
+.Ar fmt Ar file.d2 ...
 .Sh DESCRIPTION
 .Nm
 compiles and renders
@@ -83,10 +83,8 @@ Print version information and exit.
 Lists available layout engine options with short help.
 .It Ar layout Op Ar name
 Display long help for a particular layout engine, including its configuration options.
-.It Ar fmt Ar file.d2
+.It Ar fmt Ar file.d2 ...
-Format
+Format all passed files.
-.Ar file.d2
-.Ns .
 .El
 .Sh SEE ALSO
 .Xr d2plugin-tala 1

d2compiler/compile.go

@@ -235,6 +235,12 @@ func (c *compiler) compileAttributes(attrs *d2graph.Attributes, mk *d2ast.Key) {
 		attrs.Width = &d2graph.Scalar{MapKey: mk}
 	} else if reserved == "height" {
 		attrs.Height = &d2graph.Scalar{MapKey: mk}
+	} else if reserved == "double-border" {
+		if attrs.Shape.Value != "" && !strings.EqualFold(attrs.Shape.Value, d2target.ShapeSquare) && !strings.EqualFold(attrs.Shape.Value, d2target.ShapeRectangle) && !strings.EqualFold(attrs.Shape.Value, d2target.ShapeCircle) && !strings.EqualFold(attrs.Shape.Value, d2target.ShapeOval) {
+			c.errorf(mk.Range.Start, mk.Range.End, `key "double-border" can only be applied to squares, rectangles, circles, ovals`)
+			return
+		}
+		attrs.Style.DoubleBorder = &d2graph.Scalar{MapKey: mk}
 	}
 }
 

d2exporter/export.go

@@ -90,6 +90,9 @@ func applyStyles(shape *d2target.Shape, obj *d2graph.Object) {
 	if obj.Attributes.Style.Font != nil {
 		shape.FontFamily = obj.Attributes.Style.Font.Value
 	}
+	if obj.Attributes.Style.DoubleBorder != nil {
+		shape.DoubleBorder, _ = strconv.ParseBool(obj.Attributes.Style.DoubleBorder.Value)
+	}
 }
 
 func toShape(obj *d2graph.Object) d2target.Shape {

d2graph/d2graph.go

@@ -147,6 +147,7 @@ type Style struct {
 	Italic       *Scalar `json:"italic,omitempty"`
 	Underline    *Scalar `json:"underline,omitempty"`
 	Filled       *Scalar `json:"filled,omitempty"`
+	DoubleBorder *Scalar `json:"doubleBorder,omitempty"`
 }
 
 func (s *Style) Apply(key, value string) error {
@@ -300,6 +301,15 @@ func (s *Style) Apply(key, value string) error {
 			return errors.New(`expected "filled" to be true or false`)
 		}
 		s.Filled.Value = value
+	case "double-border":
+		if s.DoubleBorder == nil {
+			break
+		}
+		_, err := strconv.ParseBool(value)
+		if err != nil {
+			return errors.New(`expected "double-border" to be true or false`)
+		}
+		s.DoubleBorder.Value = value
 	default:
 		return fmt.Errorf("unknown style key: %s", key)
 	}
@@ -1289,6 +1299,7 @@ var StyleKeywords = map[string]struct{}{
 	// Only for shapes
 	"shadow":        {},
 	"multiple":      {},
+	"double-border": {},
 
 	// Only for squares
 	"3d": {},

d2graph/seqdiagram.go

@@ -97,3 +97,12 @@ func (e *Edge) ContainedBy(obj *Object) bool {
 	}
 	return false
 }
+
+func (e *Edge) GetGroup() *Object {
+	for _, ref := range e.References {
+		if ref.ScopeObj.IsSequenceDiagramGroup() {
+			return ref.ScopeObj
+		}
+	}
+	return nil
+}

d2layouts/d2sequence/sequence_diagram.go

@@ -445,6 +445,8 @@ func (sd *sequenceDiagram) placeSpans() {
 // routeMessages routes horizontal edges (messages) from Src to Dst lifeline (actor/span center)
 // in another step, routes are adjusted to spans borders when necessary
 func (sd *sequenceDiagram) routeMessages() error {
+	var prevIsLoop bool
+	var prevGroup *d2graph.Object
 	messageOffset := sd.maxActorHeight + sd.yStep
 	for _, message := range sd.messages {
 		message.ZIndex = MESSAGE_Z_INDEX
@@ -454,6 +456,14 @@ func (sd *sequenceDiagram) routeMessages() error {
 				noteOffset += note.Height + sd.yStep
 			}
 		}
+
+		// we need extra space if the previous message is a loop in a different group
+		group := message.GetGroup()
+		if prevIsLoop && prevGroup != group {
+			messageOffset += MIN_MESSAGE_DISTANCE
+		}
+		prevGroup = group
+
 		startY := messageOffset + noteOffset
 
 		var startX, endX float64
@@ -490,11 +500,13 @@ func (sd *sequenceDiagram) routeMessages() error {
 				geo.NewPoint(midX, endY),
 				geo.NewPoint(endX, endY),
 			}
+			prevIsLoop = true
 		} else {
 			message.Route = []*geo.Point{
 				geo.NewPoint(startX, startY),
 				geo.NewPoint(endX, startY),
 			}
+			prevIsLoop = false
 		}
 		messageOffset += sd.yStep
 

d2oracle/edit.go

@@ -284,6 +284,11 @@ func _set(g *d2graph.Graph, key string, tag, value *string) error {
 						attrs.Style.Multiple.MapKey.SetScalar(mk.Value.ScalarBox())
 						return nil
 					}
+				case "double-border":
+					if attrs.Style.DoubleBorder != nil {
+						attrs.Style.DoubleBorder.MapKey.SetScalar(mk.Value.ScalarBox())
+						return nil
+					}
 				case "font":
 					if attrs.Style.Font != nil {
 						attrs.Style.Font.MapKey.SetScalar(mk.Value.ScalarBox())

d2renderers/d2sketch/sketch.go

@@ -106,6 +106,57 @@ func Rect(r *Runner, shape d2target.Shape) (string, error) {
 	return output, nil
 }
 
+func DoubleRect(r *Runner, shape d2target.Shape) (string, error) {
+	jsBigRect := fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %d, {
+		fill: "#000",
+		stroke: "#000",
+		strokeWidth: %d,
+		%s
+	});`, 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: "#000",
+		stroke: "#000",
+		strokeWidth: %d,
+		%s
+	});`, 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 := svg_style.NewThemableElement("path")
+	pathEl.Transform = fmt.Sprintf("translate(%d %d)", shape.Pos.X, shape.Pos.Y)
+	pathEl.Fill, pathEl.Stroke = svg_style.ShapeTheme(shape)
+	pathEl.Class = "shape"
+	pathEl.Style = shape.CSSStyle()
+	for _, p := range pathsBigRect {
+		pathEl.D = p
+		output += pathEl.Render()
+	}
+
+	pathEl = svg_style.NewThemableElement("path")
+	pathEl.Transform = fmt.Sprintf("translate(%d %d)", shape.Pos.X+d2target.INNER_BORDER_OFFSET, shape.Pos.Y+d2target.INNER_BORDER_OFFSET)
+	pathEl.Fill, pathEl.Stroke = svg_style.ShapeTheme(shape)
+	pathEl.Class = "shape"
+	pathEl.Style = shape.CSSStyle()
+	for _, p := range pathsSmallRect {
+		pathEl.D = p
+		output += pathEl.Render()
+	}
+
+	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,
+	)
+	return output, nil
+}
+
 func Oval(r *Runner, shape d2target.Shape) (string, error) {
 	js := fmt.Sprintf(`node = rc.ellipse(%d, %d, %d, %d, {
 		fill: "#000",
@@ -144,6 +195,57 @@ func Oval(r *Runner, shape d2target.Shape) (string, error) {
 	return output, nil
 }
 
+func DoubleOval(r *Runner, shape d2target.Shape) (string, error) {
+	jsBigCircle := fmt.Sprintf(`node = rc.ellipse(%d, %d, %d, %d, {
+		fill: "#000",
+		stroke: "#000",
+		strokeWidth: %d,
+		%s
+	});`, shape.Width/2, shape.Height/2, shape.Width, shape.Height, shape.StrokeWidth, baseRoughProps)
+	jsSmallCircle := fmt.Sprintf(`node = rc.ellipse(%d, %d, %d, %d, {
+		fill: "#000",
+		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.StrokeWidth, baseRoughProps)
+	pathsBigCircle, err := computeRoughPathData(r, jsBigCircle)
+	if err != nil {
+		return "", err
+	}
+	pathsSmallCircle, err := computeRoughPathData(r, jsSmallCircle)
+	if err != nil {
+		return "", err
+	}
+
+	output := ""
+
+	pathEl := svg_style.NewThemableElement("path")
+	pathEl.Transform = fmt.Sprintf("translate(%d %d)", shape.Pos.X, shape.Pos.Y)
+	pathEl.Fill, pathEl.Stroke = svg_style.ShapeTheme(shape)
+	pathEl.Class = "shape"
+	pathEl.Style = shape.CSSStyle()
+	for _, p := range pathsBigCircle {
+		pathEl.D = p
+		output += pathEl.Render()
+	}
+
+	pathEl = svg_style.NewThemableElement("path")
+	pathEl.Transform = fmt.Sprintf("translate(%d %d)", shape.Pos.X, shape.Pos.Y)
+	pathEl.Fill, pathEl.Stroke = svg_style.ShapeTheme(shape)
+	pathEl.Class = "shape"
+	pathEl.Style = shape.CSSStyle()
+	for _, p := range pathsSmallCircle {
+		pathEl.D = p
+		output += pathEl.Render()
+	}
+
+	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,
+	)
+	return output, nil
+}
+
 // TODO need to personalize this per shape like we do in Terrastruct app
 func Paths(r *Runner, shape d2target.Shape, paths []string) (string, error) {
 	output := ""

d2renderers/d2svg/appendix/appendix_test.go

@@ -4,6 +4,7 @@ import (
 	"context"
 	"encoding/xml"
 	"io/ioutil"
+	"math"
 	"os"
 	"path/filepath"
 	"strings"
@@ -120,7 +121,6 @@ func run(t *testing.T, tc testCase) {
 
 	diagram, _, err := d2lib.Compile(ctx, tc.script, &d2lib.CompileOptions{
 		Ruler:  ruler,
-		ThemeID: 0,
 		Layout: d2dagrelayout.DefaultLayout,
 	})
 	if !tassert.Nil(t, err) {
@@ -132,6 +132,8 @@ func run(t *testing.T, tc testCase) {
 
 	svgBytes, err := d2svg.Render(diagram, &d2svg.RenderOpts{
 		Pad:         d2svg.DEFAULT_PADDING,
+		ThemeID:     0,
+		DarkThemeID: math.MaxInt64,
 	})
 	assert.Success(t, err)
 	svgBytes = appendix.Append(diagram, ruler, svgBytes)

d2renderers/d2svg/d2svg.go

@@ -44,6 +44,8 @@ const (
 	appendixIconRadius = 16
 )
 
+var multipleOffset = geo.NewVector(10, -10)
+
 //go:embed tooltip.svg
 var TooltipIcon string
 
@@ -620,11 +622,17 @@ func renderOval(tl *geo.Point, width, height float64, fill, stroke, style string
 	el.Ry = height / 2
 	el.Cx = tl.X + el.Rx
 	el.Cy = tl.Y + el.Ry
+	el.Fill, el.Stroke = fill, stroke
 	el.Class = "shape"
 	el.Style = style
 	return el.Render()
 }
 
+func renderDoubleOval(tl *geo.Point, width, height float64, fill, stroke, style string) string {
+	var innerTL *geo.Point = tl.AddVector(geo.NewVector(d2target.INNER_BORDER_OFFSET, d2target.INNER_BORDER_OFFSET))
+	return renderOval(tl, width, height, fill, stroke, style) + renderOval(innerTL, width-10, height-10, fill, stroke, style)
+}
+
 func defineShadowFilter(writer io.Writer) {
 	fmt.Fprint(writer, `<defs>
 	<filter id="shadow-filter" width="200%" height="200%" x="-50%" y="-50%">
@@ -808,6 +816,20 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 		fmt.Fprint(writer, closingTag)
 		return labelMask, nil
 	case d2target.ShapeOval:
+		if targetShape.DoubleBorder {
+			if targetShape.Multiple {
+				fmt.Fprint(writer, renderDoubleOval(multipleTL, width, height, fill, stroke, style))
+			}
+			if sketchRunner != nil {
+				out, err := d2sketch.DoubleOval(sketchRunner, targetShape)
+				if err != nil {
+					return "", err
+				}
+				fmt.Fprintf(writer, out)
+			} else {
+				fmt.Fprint(writer, renderDoubleOval(tl, width, height, fill, stroke, style))
+			}
+		} else {
 			if targetShape.Multiple {
 				fmt.Fprint(writer, renderOval(multipleTL, width, height, fill, stroke, style))
 			}
@@ -816,10 +838,11 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 				if err != nil {
 					return "", err
 				}
-			fmt.Fprint(writer, out)
+				fmt.Fprintf(writer, out)
 			} else {
 				fmt.Fprint(writer, renderOval(tl, width, height, fill, stroke, style))
 			}
+		}
 
 	case d2target.ShapeImage:
 		el := svg_style.NewThemableElement("image")
@@ -838,6 +861,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 		if targetShape.ThreeDee {
 			fmt.Fprint(writer, render3dRect(targetShape))
 		} else {
+			if !targetShape.DoubleBorder {
 				if targetShape.Multiple {
 					el := svg_style.NewThemableElement("rect")
 					el.X = float64(targetShape.Pos.X + 10)
@@ -866,6 +890,56 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 					el.Style = style
 					fmt.Fprint(writer, el.Render())
 				}
+			} else {
+				if targetShape.Multiple {
+					el := svg_style.NewThemableElement("rect")
+					el.X = float64(targetShape.Pos.X + 10)
+					el.Y = float64(targetShape.Pos.Y - 10)
+					el.Width = float64(targetShape.Width)
+					el.Height = float64(targetShape.Height)
+					el.Fill = fill
+					el.Stroke = stroke
+					el.Style = style
+					fmt.Fprint(writer, el.Render())
+
+					el = svg_style.NewThemableElement("rect")
+					el.X = float64(targetShape.Pos.X + 10 + d2target.INNER_BORDER_OFFSET)
+					el.Y = float64(targetShape.Pos.Y - 10 + d2target.INNER_BORDER_OFFSET)
+					el.Width = float64(targetShape.Width - 2*d2target.INNER_BORDER_OFFSET)
+					el.Height = float64(targetShape.Height - 2*d2target.INNER_BORDER_OFFSET)
+					el.Fill = fill
+					el.Stroke = stroke
+					el.Style = style
+					fmt.Fprint(writer, el.Render())
+				}
+				if sketchRunner != nil {
+					out, err := d2sketch.DoubleRect(sketchRunner, targetShape)
+					if err != nil {
+						return "", err
+					}
+					fmt.Fprint(writer, out)
+				} else {
+					el := svg_style.NewThemableElement("rect")
+					el.X = float64(targetShape.Pos.X)
+					el.Y = float64(targetShape.Pos.Y)
+					el.Width = float64(targetShape.Width)
+					el.Height = float64(targetShape.Height)
+					el.Fill = fill
+					el.Stroke = stroke
+					el.Style = style
+					fmt.Fprint(writer, el.Render())
+
+					el = svg_style.NewThemableElement("rect")
+					el.X = float64(targetShape.Pos.X + d2target.INNER_BORDER_OFFSET)
+					el.Y = float64(targetShape.Pos.Y + d2target.INNER_BORDER_OFFSET)
+					el.Width = float64(targetShape.Width - 2*d2target.INNER_BORDER_OFFSET)
+					el.Height = float64(targetShape.Height - 2*d2target.INNER_BORDER_OFFSET)
+					el.Fill = fill
+					el.Stroke = stroke
+					el.Style = style
+					fmt.Fprint(writer, el.Render())
+				}
+			}
 		}
 	case d2target.ShapeText, d2target.ShapeCode:
 	default:

d2target/d2target.go

@@ -24,8 +24,12 @@ const (
 
 	THREE_DEE_OFFSET = 15
 	MULTIPLE_OFFSET  = 10
+
+	INNER_BORDER_OFFSET = 5
 )
 
+var BorderOffset = geo.NewVector(5, 5)
+
 type Diagram struct {
 	Name        string              `json:"name"`
 	Description string              `json:"description,omitempty"`
@@ -146,6 +150,7 @@ type Shape struct {
 	Shadow       bool `json:"shadow"`
 	ThreeDee     bool `json:"3d"`
 	Multiple     bool `json:"multiple"`
+	DoubleBorder bool `json:"double-border"`
 
 	Tooltip      string   `json:"tooltip"`
 	Link         string   `json:"link"`

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

@@ -3,6 +3,7 @@ package main
 import (
 	"context"
 	"io/ioutil"
+	"math"
 	"path/filepath"
 
 	"oss.terrastruct.com/d2/d2graph"
@@ -22,10 +23,11 @@ func main() {
 	diagram, _, _ := d2lib.Compile(context.Background(), "x -> y", &d2lib.CompileOptions{
 		Layout: defaultLayout,
 		Ruler:  ruler,
-		ThemeID: d2themescatalog.GrapeSoda.ID,
 	})
 	out, _ := d2svg.Render(diagram, &d2svg.RenderOpts{
 		Pad:         d2svg.DEFAULT_PADDING,
+		ThemeID:     d2themescatalog.GrapeSoda.ID,
+		DarkThemeID: math.MaxInt64,
 	})
 	_ = ioutil.WriteFile(filepath.Join("out.svg"), out, 0600)
 }

e2etests/e2e_test.go

@@ -5,6 +5,7 @@ import (
 	"encoding/xml"
 	"fmt"
 	"io/ioutil"
+	"math"
 	"os"
 	"path/filepath"
 	"strings"
@@ -147,7 +148,6 @@ func run(t *testing.T, tc testCase) {
 		diagram, _, err := d2lib.Compile(ctx, tc.script, &d2lib.CompileOptions{
 			Ruler:         ruler,
 			MeasuredTexts: tc.mtexts,
-			ThemeID:       0,
 			Layout:        layout,
 		})
 		if !tassert.Nil(t, err) {
@@ -165,6 +165,8 @@ func run(t *testing.T, tc testCase) {
 
 		svgBytes, err := d2svg.Render(diagram, &d2svg.RenderOpts{
 			Pad:         d2svg.DEFAULT_PADDING,
+			ThemeID:     0,
+			DarkThemeID: math.MaxInt64,
 		})
 		assert.Success(t, err)
 		err = os.MkdirAll(dataPath, 0755)

e2etests/regression_test.go

@@ -394,6 +394,56 @@ x -> a: {
   label: You don't have to know how the computer works,\njust how to work the computer.
   style.opacity: 0.4
 }
+`,
+		},
+		{
+			name: "sequence_diagram_self_edge_group_overlap",
+			script: `
+shape: sequence_diagram
+a: A
+b: B
+c: C
+group 1: {
+	a -> a
+}
+group 2: {
+	a -> b
+}
+group 3: {
+	a -> a.a
+}
+group 4: {
+	a.a -> b
+}
+group 5: {
+	b -> b
+	b -> b
+}
+group 6: {
+	b -> a
+}
+group 7: {
+	a -> a
+}
+group 8: {
+	a -> a
+}
+a -> a
+group 9: {
+	a -> a
+}
+a -> a
+
+b -> c
+group 10: {
+	c -> c
+}
+b -> c
+group 11: {
+	c -> c
+}
+b -> c
+
 `,
 		},
 	}

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#0A0F25",
+      "fill": "N1",
-      "stroke": "#FFFFFF",
+      "stroke": "N7",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -40,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="316" height="216" viewBox="-102 -102 316 216"><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="216" viewBox="-102 -102 316 216"><style type="text/css">
-<![CDATA[
-.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -18,8 +11,23 @@ width="316" height="216" viewBox="-102 -102 316 216"><style type="text/css">
   opacity: 0.5;
 }
 
-]]>
+.sketch-overlay-bright {
-</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  fill: url(#streaks-bright);
+  mix-blend-mode: darken;
+}
+.sketch-overlay-normal {
+  fill: url(#streaks-normal);
+  mix-blend-mode: color-burn;
+}
+.sketch-overlay-dark {
+  fill: url(#streaks-dark);
+  mix-blend-mode: overlay;
+}
+.sketch-overlay-darker {
+  fill: url(#streaks-darker);
+  mix-blend-mode: lighten;
+}
+.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;}.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", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {
     return;
   }
@@ -39,7 +47,7 @@ width="316" height="216" viewBox="-102 -102 316 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="112" height="12" style="fill:#FFFFFF;stroke:#0A0F25;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="112.000000" height="12.000000" fill="#0A0F25" /><line x1="0.000000" y1="12.000000" x2="112.000000" y2="12.000000" style="stroke-width:1;stroke:#0A0F25" /></g></g><mask id="2115119125" maskUnits="userSpaceOnUse" x="-100" y="-100" width="316" height="216">
+]]></script><style type="text/css"><![CDATA[]]></style><rect x="-102.000000" y="-102.000000" width="316.000000" height="216.000000" class=" fill-N7" /><g id="a"><g class="shape" ><rect x="0.000000" y="0.000000" width="112.000000" height="12.000000" class=" stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="112.000000" height="12.000000" class="class_header fill-N1" /><line x1="0.000000" x2="112.000000" y1="12.000000" y2="12.000000" class=" stroke-N1" style="stroke-width:1" /></g></g><mask id="735671140" maskUnits="userSpaceOnUse" x="-100" y="-100" width="316" height="216">
 <rect x="-100" y="-100" width="316" height="216" fill="white"></rect>
 
-</mask><style type="text/css"><![CDATA[]]></style></svg>
+</mask></svg>

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,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="304" height="304" viewBox="-102 -102 304 304"><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;
 }
@@ -18,8 +11,23 @@ width="304" height="304" viewBox="-102 -102 304 304"><style type="text/css">
   opacity: 0.5;
 }
 
-]]>
+.sketch-overlay-bright {
-</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  fill: url(#streaks-bright);
+  mix-blend-mode: darken;
+}
+.sketch-overlay-normal {
+  fill: url(#streaks-normal);
+  mix-blend-mode: color-burn;
+}
+.sketch-overlay-dark {
+  fill: url(#streaks-dark);
+  mix-blend-mode: overlay;
+}
+.sketch-overlay-darker {
+  fill: url(#streaks-darker);
+  mix-blend-mode: lighten;
+}
+.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;}.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", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {
     return;
   }
@@ -39,7 +47,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="1236167803" maskUnits="userSpaceOnUse" x="-100" y="-100" width="304" height="304">
+]]></script><style type="text/css"><![CDATA[]]></style><rect x="-102.000000" y="-102.000000" width="304.000000" height="304.000000" class=" fill-N7" /><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="43897558" maskUnits="userSpaceOnUse" x="-100" y="-100" width="304" height="304">
 <rect x="-100" y="-100" width="304" height="304" fill="white"></rect>
 
-</mask><style type="text/css"><![CDATA[]]></style></svg>
+</mask></svg>

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#0A0F25",
+      "fill": "N1",
-      "stroke": "#FFFFFF",
+      "stroke": "N7",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -40,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="254" height="216" viewBox="-102 -102 254 216"><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;
 }
@@ -18,8 +11,23 @@ width="254" height="216" viewBox="-102 -102 254 216"><style type="text/css">
   opacity: 0.5;
 }
 
-]]>
+.sketch-overlay-bright {
-</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  fill: url(#streaks-bright);
+  mix-blend-mode: darken;
+}
+.sketch-overlay-normal {
+  fill: url(#streaks-normal);
+  mix-blend-mode: color-burn;
+}
+.sketch-overlay-dark {
+  fill: url(#streaks-dark);
+  mix-blend-mode: overlay;
+}
+.sketch-overlay-darker {
+  fill: url(#streaks-darker);
+  mix-blend-mode: lighten;
+}
+.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;}.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", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {
     return;
   }
@@ -39,7 +47,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="2389823220" maskUnits="userSpaceOnUse" x="-100" y="-100" width="254" height="216">
+]]></script><style type="text/css"><![CDATA[]]></style><rect x="-102.000000" y="-102.000000" width="254.000000" height="216.000000" class=" fill-N7" /><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="-100" y="-100" width="254" height="216">
 <rect x="-100" y="-100" width="254" height="216" fill="white"></rect>
 
-</mask><style type="text/css"><![CDATA[]]></style></svg>
+</mask></svg>

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "python",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -54,11 +55,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -71,7 +73,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "python",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -93,11 +95,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -110,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,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "python",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -54,11 +55,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -71,7 +73,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "python",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -93,11 +95,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -110,7 +113,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "python",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -55,11 +56,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
       "stroke": "white",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -72,7 +74,7 @@
       "fontSize": 24,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -95,11 +97,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -112,7 +115,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -135,11 +138,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -152,7 +156,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -175,11 +179,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -192,7 +197,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -215,11 +220,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -232,7 +238,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -303,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,
@@ -351,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,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -55,11 +56,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
       "stroke": "white",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -72,7 +74,7 @@
       "fontSize": 24,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -95,11 +97,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -112,7 +115,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -135,11 +138,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -152,7 +156,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -175,11 +179,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -192,7 +197,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -215,11 +220,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -232,7 +238,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -302,12 +308,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,
@@ -341,12 +347,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,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -55,11 +56,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -72,7 +74,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -95,11 +97,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -112,7 +115,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -135,11 +138,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -152,7 +156,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -175,11 +179,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -192,7 +197,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -215,11 +220,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -232,7 +238,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -255,12 +261,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Triggers",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -303,12 +309,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Builds zip & pushes it",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -351,12 +357,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Pulls zip to deploy",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -399,12 +405,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Changes the live lambdas",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -55,11 +56,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -72,7 +74,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -95,11 +97,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -112,7 +115,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -135,11 +138,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -152,7 +156,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -175,11 +179,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -192,7 +197,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -215,11 +220,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -232,7 +238,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -255,12 +261,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Triggers",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -294,12 +300,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Builds zip & pushes it",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -333,12 +339,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Pulls zip to deploy",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -372,12 +378,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Changes the live lambdas",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -55,11 +56,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -72,7 +74,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -95,11 +97,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -112,7 +115,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -135,11 +138,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -152,7 +156,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -175,11 +179,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -192,7 +197,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -215,11 +220,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -232,7 +238,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -255,11 +261,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -272,7 +279,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -295,12 +302,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,
@@ -343,12 +350,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,
@@ -391,12 +398,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,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -55,11 +56,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -72,7 +74,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -95,11 +97,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -112,7 +115,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -135,11 +138,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -152,7 +156,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -175,11 +179,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -192,7 +197,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -215,11 +220,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -232,7 +238,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -255,11 +261,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -272,7 +279,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -295,12 +302,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,
@@ -342,12 +349,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,
@@ -381,12 +388,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,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -55,11 +56,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -72,7 +74,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -95,11 +97,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -112,7 +115,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -135,11 +138,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -152,7 +156,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -175,11 +179,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -192,7 +197,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -215,11 +220,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -232,7 +238,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -255,11 +261,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -272,7 +279,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -295,11 +302,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -312,7 +320,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -335,11 +343,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -352,7 +361,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -375,11 +384,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -392,7 +402,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -415,11 +425,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -432,7 +443,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -455,11 +466,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -472,7 +484,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -495,11 +507,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -512,7 +525,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -535,11 +548,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -552,7 +566,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -575,12 +589,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Triggers",
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -623,12 +637,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Builds zip and pushes it",
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -671,12 +685,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Pulls zip to deploy",
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -719,12 +733,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Changes live lambdas",
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -767,12 +781,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Launches",
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -815,12 +829,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Builds zip\npushes them to S3.\n\nDeploys lambdas\nusing Terraform",
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -863,12 +877,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Triggered manually/push to master test test test test test test test",
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -911,12 +925,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "test",
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -55,11 +56,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -72,7 +74,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -95,11 +97,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -112,7 +115,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -135,11 +138,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -152,7 +156,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -175,11 +179,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -192,7 +197,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -215,11 +220,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -232,7 +238,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -255,11 +261,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -272,7 +279,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -295,11 +302,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -312,7 +320,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -335,11 +343,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -352,7 +361,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -375,11 +384,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -392,7 +402,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -415,11 +425,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -432,7 +443,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -455,11 +466,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -472,7 +484,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -495,11 +507,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -512,7 +525,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -535,11 +548,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -552,7 +566,7 @@
       "fontSize": 25,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -575,12 +589,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Triggers",
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -614,12 +628,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Builds zip and pushes it",
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -653,12 +667,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Pulls zip to deploy",
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -692,12 +706,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Changes live lambdas",
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -731,12 +745,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Launches",
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -770,12 +784,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Builds zip\npushes them to S3.\n\nDeploys lambdas\nusing Terraform",
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -809,12 +823,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "Triggered manually/push to master test test test test test test test",
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -848,12 +862,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "test",
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": {
@@ -29,6 +30,7 @@
         "Host": "icons.terrastruct.com",
         "Path": "/infra/019-network.svg",
         "RawPath": "",
+        "OmitHost": false,
         "ForceQuery": false,
         "RawQuery": "",
         "Fragment": "",
@@ -43,7 +45,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -65,11 +67,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": {
@@ -79,6 +82,7 @@
         "Host": "icons.terrastruct.com",
         "Path": "/infra/019-network.svg",
         "RawPath": "",
+        "OmitHost": false,
         "ForceQuery": false,
         "RawQuery": "",
         "Fragment": "",
@@ -93,7 +97,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,

e2etests/testdata/regression/elk_img_empty_label_panic/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="492" height="332" viewBox="-102 -102 492 332"><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="492" height="332" viewBox="-102 -102 492 332"><style type="text/css">
-<![CDATA[
-.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -18,8 +11,23 @@ width="492" height="332" viewBox="-102 -102 492 332"><style type="text/css">
   opacity: 0.5;
 }
 
-]]>
+.sketch-overlay-bright {
-</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  fill: url(#streaks-bright);
+  mix-blend-mode: darken;
+}
+.sketch-overlay-normal {
+  fill: url(#streaks-normal);
+  mix-blend-mode: color-burn;
+}
+.sketch-overlay-dark {
+  fill: url(#streaks-dark);
+  mix-blend-mode: overlay;
+}
+.sketch-overlay-darker {
+  fill: url(#streaks-darker);
+  mix-blend-mode: lighten;
+}
+.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;}.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", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {
     return;
   }
@@ -39,7 +47,7 @@ width="492" height="332" viewBox="-102 -102 492 332"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="0" y="0" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="188" y="14" width="100" height="100" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="213.000000" y="39.000000" width="50" height="50" /></g><mask id="1654899612" maskUnits="userSpaceOnUse" x="-100" y="-100" width="492" height="332">
+]]></script><style type="text/css"><![CDATA[]]></style><rect x="-102.000000" y="-102.000000" width="492.000000" height="332.000000" class=" fill-N7" /><g id="img"><g class="shape" ><image x="0.000000" y="0.000000" width="128.000000" height="128.000000" href="https://icons.terrastruct.com/infra/019-network.svg" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="188.000000" y="14.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="213.000000" y="39.000000" width="50" height="50" /></g><mask id="1304564387" maskUnits="userSpaceOnUse" x="-100" y="-100" width="492" height="332">
 <rect x="-100" y="-100" width="492" height="332" fill="white"></rect>
 
-</mask><style type="text/css"><![CDATA[]]></style></svg>
+</mask></svg>

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": {
@@ -29,6 +30,7 @@
         "Host": "icons.terrastruct.com",
         "Path": "/infra/019-network.svg",
         "RawPath": "",
+        "OmitHost": false,
         "ForceQuery": false,
         "RawQuery": "",
         "Fragment": "",
@@ -43,7 +45,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -65,11 +67,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": {
@@ -79,6 +82,7 @@
         "Host": "icons.terrastruct.com",
         "Path": "/infra/019-network.svg",
         "RawPath": "",
+        "OmitHost": false,
         "ForceQuery": false,
         "RawQuery": "",
         "Fragment": "",
@@ -93,7 +97,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,

e2etests/testdata/regression/elk_img_empty_label_panic/elk/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="452" height="332" viewBox="-90 -90 452 332"><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="452" height="332" viewBox="-90 -90 452 332"><style type="text/css">
-<![CDATA[
-.shape {
   shape-rendering: geometricPrecision;
   stroke-linejoin: round;
 }
@@ -18,8 +11,23 @@ width="452" height="332" viewBox="-90 -90 452 332"><style type="text/css">
   opacity: 0.5;
 }
 
-]]>
+.sketch-overlay-bright {
-</style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
+  fill: url(#streaks-bright);
+  mix-blend-mode: darken;
+}
+.sketch-overlay-normal {
+  fill: url(#streaks-normal);
+  mix-blend-mode: color-burn;
+}
+.sketch-overlay-dark {
+  fill: url(#streaks-dark);
+  mix-blend-mode: overlay;
+}
+.sketch-overlay-darker {
+  fill: url(#streaks-darker);
+  mix-blend-mode: lighten;
+}
+.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;}.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", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {
     return;
   }
@@ -39,7 +47,7 @@ width="452" height="332" viewBox="-90 -90 452 332"><style type="text/css">
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><g id="img"><g class="shape" ><image href="https://icons.terrastruct.com/infra/019-network.svg" x="12" y="12" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="160" y="26" width="100" height="100" style="fill:#F7F8FE;stroke:#0D32B2;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="185.000000" y="51.000000" width="50" height="50" /></g><mask id="124328945" maskUnits="userSpaceOnUse" x="-100" y="-100" width="452" height="332">
+]]></script><style type="text/css"><![CDATA[]]></style><rect x="-90.000000" y="-90.000000" width="452.000000" height="332.000000" class=" fill-N7" /><g id="img"><g class="shape" ><image x="12.000000" y="12.000000" width="128.000000" height="128.000000" href="https://icons.terrastruct.com/infra/019-network.svg" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g></g><g id="ico"><g class="shape" ><rect x="160.000000" y="26.000000" width="100.000000" height="100.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><image href="https://icons.terrastruct.com/infra/019-network.svg" x="185.000000" y="51.000000" width="50" height="50" /></g><mask id="4232933402" maskUnits="userSpaceOnUse" x="-100" y="-100" width="452" height="332">
 <rect x="-100" y="-100" width="452" height="332" fill="white"></rect>
 
-</mask><style type="text/css"><![CDATA[]]></style></svg>
+</mask></svg>

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -55,11 +56,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -72,7 +74,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -95,11 +97,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -112,7 +115,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -135,12 +138,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,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -55,11 +56,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -72,7 +74,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -95,11 +97,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -112,7 +115,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -135,12 +138,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,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#DEE1EB",
+      "fill": "N5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -54,11 +55,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -71,7 +73,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -94,11 +96,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -111,7 +114,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -134,11 +137,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -151,7 +155,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -174,11 +178,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -191,7 +196,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -214,11 +219,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -231,7 +237,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -254,11 +260,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -271,7 +278,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -294,11 +301,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -311,7 +319,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -335,10 +343,11 @@
       "strokeWidth": 2,
       "borderRadius": 0,
       "fill": "transparent",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -351,7 +360,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "markdown",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -374,10 +383,11 @@
       "strokeWidth": 2,
       "borderRadius": 0,
       "fill": "transparent",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -390,7 +400,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "markdown",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -413,10 +423,11 @@
       "strokeWidth": 2,
       "borderRadius": 0,
       "fill": "transparent",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -429,7 +440,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "markdown",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -452,10 +463,11 @@
       "strokeWidth": 2,
       "borderRadius": 0,
       "fill": "transparent",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -468,7 +480,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "markdown",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -490,12 +502,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,
@@ -538,12 +550,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,
@@ -586,12 +598,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,
@@ -634,12 +646,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,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#DEE1EB",
+      "fill": "N5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -54,11 +55,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -71,7 +73,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -94,11 +96,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -111,7 +114,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -134,11 +137,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -151,7 +155,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -174,11 +178,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -191,7 +196,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -214,11 +219,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -231,7 +237,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -254,11 +260,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -271,7 +278,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -294,11 +301,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -311,7 +319,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -335,10 +343,11 @@
       "strokeWidth": 2,
       "borderRadius": 0,
       "fill": "transparent",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -351,7 +360,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "markdown",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -374,10 +383,11 @@
       "strokeWidth": 2,
       "borderRadius": 0,
       "fill": "transparent",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -390,7 +400,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "markdown",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -413,10 +423,11 @@
       "strokeWidth": 2,
       "borderRadius": 0,
       "fill": "transparent",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -429,7 +440,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "markdown",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -452,10 +463,11 @@
       "strokeWidth": 2,
       "borderRadius": 0,
       "fill": "transparent",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -468,7 +480,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "markdown",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -490,12 +502,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,
@@ -529,12 +541,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,
@@ -568,12 +580,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,
@@ -607,12 +619,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,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 0,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -55,11 +56,12 @@
       "strokeDash": 0,
       "strokeWidth": 0,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -72,7 +74,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -95,12 +97,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,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 0,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -55,11 +56,12 @@
       "strokeDash": 0,
       "strokeWidth": 0,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -72,7 +74,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -95,12 +97,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,

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

@@ -16,10 +16,11 @@
       "strokeWidth": 2,
       "borderRadius": 0,
       "fill": "transparent",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "markdown",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -54,11 +55,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -71,7 +73,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -94,11 +96,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -111,7 +114,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -134,12 +137,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,
@@ -182,12 +185,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,

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

@@ -16,10 +16,11 @@
       "strokeWidth": 2,
       "borderRadius": 0,
       "fill": "transparent",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "markdown",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -54,11 +55,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -71,7 +73,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -94,11 +96,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -111,7 +114,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -134,12 +137,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,
@@ -173,12 +176,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,

e2etests/testdata/regression/no-lexer/dagre/board.exp.json

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "d2",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,

e2etests/testdata/regression/no-lexer/elk/board.exp.json

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "d2",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#0A0F25",
+      "fill": "N1",
-      "stroke": "#FFFFFF",
+      "stroke": "N7",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -40,9 +41,9 @@
       "labelHeight": 36,
       "zIndex": 0,
       "level": 1,
-      "primaryAccentColor": "#0D32B2",
+      "primaryAccentColor": "B2",
-      "secondaryAccentColor": "#4A6FF3",
+      "secondaryAccentColor": "AA2",
-      "neutralAccentColor": "#676C7E"
+      "neutralAccentColor": "N2"
     },
     {
       "id": "table",
@@ -57,11 +58,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#0A0F25",
+      "fill": "N1",
-      "stroke": "#FFFFFF",
+      "stroke": "N7",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -74,7 +76,7 @@
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -82,9 +84,9 @@
       "labelHeight": 36,
       "zIndex": 0,
       "level": 1,
-      "primaryAccentColor": "#0D32B2",
+      "primaryAccentColor": "B2",
-      "secondaryAccentColor": "#4A6FF3",
+      "secondaryAccentColor": "AA2",
-      "neutralAccentColor": "#676C7E"
+      "neutralAccentColor": "N2"
     },
     {
       "id": "table with short col",
@@ -99,11 +101,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#0A0F25",
+      "fill": "N1",
-      "stroke": "#FFFFFF",
+      "stroke": "N7",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -145,7 +148,7 @@
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -153,9 +156,9 @@
       "labelHeight": 36,
       "zIndex": 0,
       "level": 1,
-      "primaryAccentColor": "#0D32B2",
+      "primaryAccentColor": "B2",
-      "secondaryAccentColor": "#4A6FF3",
+      "secondaryAccentColor": "AA2",
-      "neutralAccentColor": "#676C7E"
+      "neutralAccentColor": "N2"
     }
   ],
   "connections": [
@@ -170,12 +173,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,
@@ -218,12 +221,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,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#0A0F25",
+      "fill": "N1",
-      "stroke": "#FFFFFF",
+      "stroke": "N7",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -40,9 +41,9 @@
       "labelHeight": 36,
       "zIndex": 0,
       "level": 1,
-      "primaryAccentColor": "#0D32B2",
+      "primaryAccentColor": "B2",
-      "secondaryAccentColor": "#4A6FF3",
+      "secondaryAccentColor": "AA2",
-      "neutralAccentColor": "#676C7E"
+      "neutralAccentColor": "N2"
     },
     {
       "id": "table",
@@ -57,11 +58,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#0A0F25",
+      "fill": "N1",
-      "stroke": "#FFFFFF",
+      "stroke": "N7",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -74,7 +76,7 @@
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -82,9 +84,9 @@
       "labelHeight": 36,
       "zIndex": 0,
       "level": 1,
-      "primaryAccentColor": "#0D32B2",
+      "primaryAccentColor": "B2",
-      "secondaryAccentColor": "#4A6FF3",
+      "secondaryAccentColor": "AA2",
-      "neutralAccentColor": "#676C7E"
+      "neutralAccentColor": "N2"
     },
     {
       "id": "table with short col",
@@ -99,11 +101,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#0A0F25",
+      "fill": "N1",
-      "stroke": "#FFFFFF",
+      "stroke": "N7",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -145,7 +148,7 @@
       "fontSize": 20,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -153,9 +156,9 @@
       "labelHeight": 36,
       "zIndex": 0,
       "level": 1,
-      "primaryAccentColor": "#0D32B2",
+      "primaryAccentColor": "B2",
-      "secondaryAccentColor": "#4A6FF3",
+      "secondaryAccentColor": "AA2",
-      "neutralAccentColor": "#676C7E"
+      "neutralAccentColor": "N2"
     }
   ],
   "connections": [
@@ -170,12 +173,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,
@@ -209,12 +212,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,

e2etests/testdata/regression/opacity-on-label/dagre/board.exp.json

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -56,10 +57,11 @@
       "strokeWidth": 2,
       "borderRadius": 0,
       "fill": "transparent",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -72,7 +74,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "markdown",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -94,11 +96,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -111,7 +114,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -134,12 +137,12 @@
       "opacity": 0.4,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "You don't have to know how the computer works,\njust how to work the computer.",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,

e2etests/testdata/regression/opacity-on-label/elk/board.exp.json

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -56,10 +57,11 @@
       "strokeWidth": 2,
       "borderRadius": 0,
       "fill": "transparent",
-      "stroke": "#0A0F25",
+      "stroke": "N1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -72,7 +74,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "markdown",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -94,11 +96,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -111,7 +114,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -134,12 +137,12 @@
       "opacity": 0.4,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "You don't have to know how the computer works,\njust how to work the computer.",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,

e2etests/testdata/regression/overlapping-edge-label/dagre/board.exp.json

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -55,11 +56,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -72,7 +74,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -95,11 +97,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -112,7 +115,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -135,11 +138,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -152,7 +156,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -175,11 +179,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -192,7 +197,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -215,11 +220,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -232,7 +238,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -255,11 +261,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -272,7 +279,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -295,11 +302,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -312,7 +320,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -335,11 +343,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -352,7 +361,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -375,11 +384,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -392,7 +402,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -415,12 +425,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "keycloak",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -463,12 +473,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "heptapod",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -511,12 +521,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "harbor",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -559,12 +569,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "vault",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,

e2etests/testdata/regression/overlapping-edge-label/elk/board.exp.json

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -55,11 +56,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -72,7 +74,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -95,11 +97,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -112,7 +115,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -135,11 +138,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -152,7 +156,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -175,11 +179,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -192,7 +197,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -215,11 +220,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -232,7 +238,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -255,11 +261,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -272,7 +279,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -295,11 +302,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#E3E9FD",
+      "fill": "B4",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -312,7 +320,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -335,11 +343,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -352,7 +361,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -375,11 +384,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -392,7 +402,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,
@@ -415,12 +425,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "keycloak",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -462,12 +472,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "heptapod",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -501,12 +511,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "harbor",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -548,12 +558,12 @@
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "label": "vault",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": {
@@ -29,6 +30,7 @@
         "Host": "icons.terrastruct.com",
         "Path": "/infra/019-network.svg",
         "RawPath": "",
+        "OmitHost": false,
         "ForceQuery": false,
         "RawQuery": "fuga=1&hoge",
         "Fragment": "",
@@ -43,7 +45,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#F7F8FE",
+      "fill": "B6",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": {
@@ -29,6 +30,7 @@
         "Host": "icons.terrastruct.com",
         "Path": "/infra/019-network.svg",
         "RawPath": "",
+        "OmitHost": false,
         "ForceQuery": false,
         "RawQuery": "fuga=1&hoge",
         "Fragment": "",
@@ -43,7 +45,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": true,
       "underline": false,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 0,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -55,11 +56,12 @@
       "strokeDash": 0,
       "strokeWidth": 0,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -72,7 +74,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -95,11 +97,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -112,7 +115,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -135,11 +138,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -152,7 +156,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -175,11 +179,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -192,7 +197,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -215,11 +220,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -232,7 +238,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -255,12 +261,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,
@@ -294,12 +300,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,
@@ -333,12 +339,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,
@@ -381,12 +387,12 @@
       "opacity": 1,
       "strokeDash": 6,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B2",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -420,12 +426,12 @@
       "opacity": 1,
       "strokeDash": 6,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B2",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -459,12 +465,12 @@
       "opacity": 1,
       "strokeDash": 6,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B2",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -498,12 +504,12 @@
       "opacity": 1,
       "strokeDash": 6,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B2",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 0,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -55,11 +56,12 @@
       "strokeDash": 0,
       "strokeWidth": 0,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -72,7 +74,7 @@
       "fontSize": 28,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -95,11 +97,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -112,7 +115,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -135,11 +138,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -152,7 +156,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -175,11 +179,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -192,7 +197,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -215,11 +220,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#EDF0FD",
+      "fill": "B5",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -232,7 +238,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -255,12 +261,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,
@@ -294,12 +300,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,
@@ -333,12 +339,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,
@@ -372,12 +378,12 @@
       "opacity": 1,
       "strokeDash": 6,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B2",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -411,12 +417,12 @@
       "opacity": 1,
       "strokeDash": 6,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B2",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -450,12 +456,12 @@
       "opacity": 1,
       "strokeDash": 6,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B2",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -489,12 +495,12 @@
       "opacity": 1,
       "strokeDash": 6,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B2",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,

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

@@ -15,11 +15,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -32,7 +33,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -55,11 +56,12 @@
       "strokeDash": 0,
       "strokeWidth": 2,
       "borderRadius": 0,
-      "fill": "#FFFFFF",
+      "fill": "N7",
-      "stroke": "#0D32B2",
+      "stroke": "B1",
       "shadow": false,
       "3d": false,
       "multiple": false,
+      "double-border": false,
       "tooltip": "",
       "link": "",
       "icon": null,
@@ -72,7 +74,7 @@
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#0A0F25",
+      "color": "N1",
       "italic": false,
       "bold": false,
       "underline": false,
@@ -95,12 +97,12 @@
       "opacity": 1,
       "strokeDash": 6,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B2",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,
@@ -134,12 +136,12 @@
       "opacity": 1,
       "strokeDash": 6,
       "strokeWidth": 2,
-      "stroke": "#0D32B2",
+      "stroke": "B2",
       "label": "",
       "fontSize": 16,
       "fontFamily": "DEFAULT",
       "language": "",
-      "color": "#676C7E",
+      "color": "N2",
       "italic": true,
       "bold": false,
       "underline": false,