Merge branch 'master' into issue-2409

2025-03-22 10:08:47 +05:30 · 2025-03-22 10:08:47 +05:30 · 559216d76d
commit 559216d76d
parent 4f114c7f32 6a4db734d5
168 changed files with 19585 additions and 3723 deletions
--- a/.github/workflows/daily.yml
+++ b/.github/workflows/daily.yml
@ -25,3 +25,34 @@ jobs:
        with:
          name: d2chaos
          path: ./d2chaos/out
+  npm-nightly:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0  # Needed for git history and version tags
+
+      - name: Check for changes
+        id: check_changes
+        run: |
+          if [ $(git rev-list --count --since="24 hours ago" HEAD) -gt 0 ]; then
+            echo "has_changes=true" >> $GITHUB_OUTPUT
+            echo "Found changes in the last 24 hours, proceeding to publish d2js nightly"
+          else
+            echo "has_changes=false" >> $GITHUB_OUTPUT
+            echo "No changes in the last 24 hours, skipping d2js nightly publish"
+          fi
+
+      - uses: actions/setup-go@v4
+        if: steps.check_changes.outputs.has_changes == 'true'
+        with:
+          go-version-file: ./go.mod
+          cache: true
+
+      - name: Publish nightly version to NPM
+        if: steps.check_changes.outputs.has_changes == 'true'
+        run: COLOR=1 NPM_VERSION=nightly ./make.sh js
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets._GITHUB_TOKEN }}
+          DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
--- a/README.md
+++ b/README.md
@ -9,6 +9,8 @@
 [![ci](https://github.com/terrastruct/d2/actions/workflows/ci.yml/badge.svg)](https://github.com/terrastruct/d2/actions/workflows/ci.yml)
 [![daily](https://github.com/terrastruct/d2/actions/workflows/daily.yml/badge.svg)](https://github.com/terrastruct/d2/actions/workflows/daily.yml)
 [![release](https://img.shields.io/github/v/release/terrastruct/d2)](https://github.com/terrastruct/d2/releases)
+[![changelog](https://img.shields.io/badge/changelog-read-blue)](./CHANGELOG.md)
+[![npm version](https://img.shields.io/npm/v/@terrastruct/d2)](https://www.npmjs.com/package/@terrastruct/d2)
 [![discord](https://img.shields.io/discord/1039184639652265985?label=discord)](https://discord.gg/NF6X8K4eDq)
 [![twitter](https://img.shields.io/twitter/follow/terrastruct?style=social)](https://twitter.com/terrastruct)
 [![license](https://img.shields.io/github/license/terrastruct/d2?color=9cf)](./LICENSE.txt)
@ -267,6 +269,7 @@ let us know and we'll be happy to include it here!
 - **VitePress Plugin**: [https://github.com/BadgerHobbs/vitepress-plugin-d2](https://github.com/BadgerHobbs/vitepress-plugin-d2)
 - **Zed extension**: [https://github.com/gabeidx/zed-d2](https://github.com/gabeidx/zed-d2)
 - **Hexo blog extension**: [https://github.com/leverimmy/hexo-d2](https://github.com/leverimmy/hexo-d2)
+- **Rehype Plugin**: [https://github.com/stereobooster/beoe/tree/main/packages/rehype-d2](https://github.com/stereobooster/beoe/tree/main/packages/rehype-d2)

 ### Misc

--- a/ci/release/changelogs/next.md
+++ b/ci/release/changelogs/next.md
@ -7,30 +7,28 @@
  - markdown, latex, and code can be used as object labels [#2204](https://github.com/terrastruct/d2/pull/2204)
  - `shape: c4-person` to render a person shape like what the C4 model prescribes [#2397](https://github.com/terrastruct/d2/pull/2397)
 - Icons: border-radius should work on icon [#2409](https://github.com/terrastruct/d2/issues/2409)
+- Diagram legends are implemented [#2416](https://github.com/terrastruct/d2/pull/2416)

 #### Improvements 🧹

- d2js:
-  - Support `d2-config`. Support additional options: [#2343](https://github.com/terrastruct/d2/pull/2343)
-    - `themeID`
-    - `darkThemeID`
-    - `center`
-    - `pad`
-    - `scale`
-    - `forceAppendix`
-    - `target`
-    - `animateInterval`
-    - `salt`
-    - `noXMLTag`
-  - Support relative imports. Improve elk error handling: [#2382](https://github.com/terrastruct/d2/pull/2382)
-  - Support fonts (`fontRegular`, `fontItalic`, `fontBold`, `fontSemiBold`): [#2384](https://github.com/terrastruct/d2/pull/2384)
+- d2cli:
+    - Support `validate` command. [#2415](https://github.com/terrastruct/d2/pull/2415)
+    - Watch mode ignores backup files (e.g. files created by certain editors like Helix). [#2131](https://github.com/terrastruct/d2/issues/2131)
+- d2compiler:
+    - `link`s can be set to root path, e.g. `/xyz`. [#2357](https://github.com/terrastruct/d2/issues/2357)

 #### Bugfixes ⛑️

 - Compiler:
  - fixes panic when `sql_shape` shape value had mixed casing [#2349](https://github.com/terrastruct/d2/pull/2349)
+  - fixes panic when importing from a file with spread substitutions in `vars` [#2427](https://github.com/terrastruct/d2/pull/2427)
  - fixes support for `center` in `d2-config` [#2360](https://github.com/terrastruct/d2/pull/2360)
  - fixes panic when comment lines appear in arrays [#2378](https://github.com/terrastruct/d2/pull/2378)
  - fixes inconsistencies when objects were double quoted [#2390](https://github.com/terrastruct/d2/pull/2390)
+  - fixes globs not applying to spread substitutions [#2426](https://github.com/terrastruct/d2/issues/2426)
 - CLI: fetch and render remote images of mimetype octet-stream correctly [#2370](https://github.com/terrastruct/d2/pull/2370)
 - d2js: handle unicode characters [#2393](https://github.com/terrastruct/d2/pull/2393)
+
+---
+
+For the latest d2.js changes, see separate [changelog](https://github.com/terrastruct/d2/blob/master/d2js/js/CHANGELOG.md).
--- a/ci/release/changelogs/template.md
+++ b/ci/release/changelogs/template.md
@ -3,3 +3,7 @@
 #### Improvements 🧹

 #### Bugfixes ⛑️
+
+---
+
+For the latest d2.js changes, see separate [changelog](https://github.com/terrastruct/d2/blob/master/d2js/js/CHANGELOG.md).
--- a/ci/release/release-js.sh
+++ b/ci/release/release-js.sh
@ -0,0 +1,39 @@
+#!/bin/sh
+set -eu
+cd -- "$(dirname "$0")/../.."
+. "./ci/sub/lib.sh"
+
+VERSION=""
+
+help() {
+  cat <<EOF
+usage: $0 --version=<version>
+
+Publishes the d2.js to NPM.
+
+Flags:
+  --version     Version to publish (e.g., "0.1.2" or "nightly"). Note this is the js version, not related to the d2 version. A non-nightly version will publish to latest.
+EOF
+}
+
+for arg in "$@"; do
+  case "$arg" in
+    --help|-h)
+      help
+      exit 0
+      ;;
+    --version=*)
+      VERSION="${arg#*=}"
+      ;;
+  esac
+done
+
+if [ -z "$VERSION" ]; then
+  flag_errusage "--version is required"
+fi
+
+FGCOLOR=6 header "Publishing JavaScript package to NPM (version: $VERSION)"
+
+sh_c "NPM_VERSION=$VERSION ./make.sh js"
+
+FGCOLOR=2 header 'NPM publish completed'
--- a/ci/release/release.sh
+++ b/ci/release/release.sh
@ -1,5 +1,26 @@
 #!/bin/sh
 set -eu
 cd -- "$(dirname "$0")/../.."
+. "./ci/sub/lib.sh"
+
+
+NPM_VERSION=""
+
+for arg in "$@"; do
+  case "$arg" in
+    --npm-version=*)
+      NPM_VERSION="${arg#*=}"
+      ;;
+  esac
+done
+
+if [ -z "$NPM_VERSION" ]; then
+  flag_errusage "--npm-version is required"
+fi

 ./ci/sub/release/release.sh "$@"
+
+if [ -n "$NPM_VERSION" ]; then
+  ./ci/release/release-js.sh --version="$NPM_VERSION"
+fi
+
--- a/ci/release/template/man/d2.1
+++ b/ci/release/template/man/d2.1
@ -17,6 +17,8 @@
 .Ar fmt Ar file.d2 ...
 .Nm d2
 .Ar play Ar file.d2
+.Nm d2
+.Ar validate Ar file.d2
 .Sh DESCRIPTION
 .Nm
 compiles and renders
@ -162,6 +164,8 @@ Lists available themes
 Format all passed files
 .It Ar play Ar file.d2
 Opens the file in playground, an online web viewer (https://play.d2lang.com)
+.It Ar validate Ar file.d2
+Validates file.d2
 .El
 .Sh ENVIRONMENT VARIABLES
 Many flags can also be set with environment variables.
--- a/d2cli/help.go
+++ b/d2cli/help.go
@ -23,6 +23,7 @@ Usage:
  %[1]s layout [name]
  %[1]s fmt file.d2 ...
  %[1]s play [--theme=0] [--sketch] file.d2
+  %[1]s validate file.d2

 %[1]s compiles and renders file.d2 to file.svg | file.png
 It defaults to file.svg if an output path is not provided.
@ -40,6 +41,7 @@ Subcommands:
  %[1]s themes - Lists available themes
  %[1]s fmt file.d2 ... - Format passed files
 	%[1]s play file.d2 - Opens the file in playground, an online web viewer (https://play.d2lang.com)
+  %[1]s validate file.d2  - Validates file.d2

 See more docs and the source code at https://oss.terrastruct.com/d2.
 Hosted icons at https://icons.terrastruct.com.
--- a/d2cli/main.go
+++ b/d2cli/main.go
@ -173,6 +173,8 @@ func Run(ctx context.Context, ms *xmain.State) (err error) {
 			return fmtCmd(ctx, ms, *checkFlag)
 		case "play":
 			return playCmd(ctx, ms)
+		case "validate":
+			return validateCmd(ctx, ms)
 		case "version":
 			if len(ms.Opts.Flags.Args()) > 1 {
 				return xmain.UsageErrorf("version subcommand accepts no arguments")
--- a/d2cli/validate.go
+++ b/d2cli/validate.go
@ -0,0 +1,41 @@
+package d2cli
+
+import (
+	"context"
+	"fmt"
+
+	"oss.terrastruct.com/d2/d2lib"
+	"oss.terrastruct.com/util-go/xdefer"
+	"oss.terrastruct.com/util-go/xmain"
+)
+
+func validateCmd(ctx context.Context, ms *xmain.State) (err error) {
+	defer xdefer.Errorf(&err, "")
+
+	ms.Opts = xmain.NewOpts(ms.Env, ms.Opts.Flags.Args()[1:])
+	if len(ms.Opts.Args) == 0 {
+		return xmain.UsageErrorf("input argument required")
+	}
+
+	inputPath := ms.Opts.Args[0]
+	if inputPath != "-" {
+		inputPath = ms.AbsPath(inputPath)
+	}
+
+	input, err := ms.ReadPath(inputPath)
+	if err != nil {
+		return err
+	}
+
+	_, err = d2lib.Parse(ctx, string(input), nil)
+	if err != nil {
+		return err
+	}
+
+	if inputPath == "-" {
+		inputPath = "Input"
+	}
+
+	fmt.Printf("Success! [%s] is valid D2.\n", inputPath)
+	return nil
+}
--- a/d2cli/watch.go
+++ b/d2cli/watch.go
@ -264,6 +264,12 @@ func (w *watcher) watchLoop(ctx context.Context) error {
 				return errors.New("fsnotify watcher closed")
 			}
 			w.ms.Log.Debug.Printf("received file system event %v", ev)
+
+			if isTemp, reason := isBackupFile(ev.Name); isTemp {
+				w.ms.Log.Debug.Printf("skipping event for %q: detected as %s", w.ms.HumanPath(ev.Name), reason)
+				continue
+			}
+
 			mt, err := w.ensureAddWatch(ctx, ev.Name)
 			if err != nil {
 				return err
@ -349,6 +355,11 @@ func (w *watcher) ensureAddWatch(ctx context.Context, path string) (time.Time, e
 }

 func (w *watcher) addWatch(ctx context.Context, path string) (time.Time, error) {
+	if isTemp, reason := isBackupFile(path); isTemp {
+		w.ms.Log.Debug.Printf("skipping watch for %q: detected as %s", w.ms.HumanPath(path), reason)
+		return time.Time{}, nil
+	}
+
 	err := w.fw.Add(path)
 	if err != nil {
 		return time.Time{}, err
@ -671,3 +682,41 @@ func (tfs *trackedFS) Open(name string) (fs.File, error) {
 	}
 	return f, err
 }
+
+func isBackupFile(path string) (bool, string) {
+	ext := filepath.Ext(path)
+	baseName := filepath.Base(path)
+
+	// This list is based off of https://github.com/gohugoio/hugo/blob/master/commands/hugobuilder.go#L795
+	switch {
+	case strings.HasSuffix(ext, "~"):
+		return true, "generic backup file (~)"
+	case ext == ".swp":
+		return true, "vim swap file"
+	case ext == ".swx":
+		return true, "vim swap file"
+	case ext == ".tmp":
+		return true, "generic temp file"
+	case ext == ".DS_Store":
+		return true, "OSX thumbnail"
+	case ext == ".bck":
+		return true, "Helix backup"
+	case baseName == "4913":
+		return true, "vim temp file"
+	case strings.HasPrefix(ext, ".goutputstream"):
+		return true, "GNOME temp file"
+	case strings.HasSuffix(ext, "jb_old___"):
+		return true, "IntelliJ old backup"
+	case strings.HasSuffix(ext, "jb_tmp___"):
+		return true, "IntelliJ temp file"
+	case strings.HasSuffix(ext, "jb_bak___"):
+		return true, "IntelliJ backup"
+	case strings.HasPrefix(ext, ".sb-"):
+		return true, "Byword temp file"
+	case strings.HasPrefix(baseName, ".#"):
+		return true, "Emacs lock file"
+	case strings.HasPrefix(baseName, "#"):
+		return true, "Emacs temp file"
+	}
+	return false, ""
+}
--- a/d2compiler/compile.go
+++ b/d2compiler/compile.go
@ -1330,7 +1330,7 @@ func (c *compiler) validateBoardLinks(g *d2graph.Graph) {
 		}

 		u, err := url.Parse(html.UnescapeString(obj.Link.Value))
-		isRemote := err == nil && u.Scheme != ""
+		isRemote := err == nil && (u.Scheme != "" || strings.HasPrefix(u.Path, "/"))
 		if isRemote {
 			continue
 		}
--- a/d2compiler/compile_test.go
+++ b/d2compiler/compile_test.go
@ -1658,6 +1658,22 @@ x -> y: {
 				}
 			},
 		},
+		{
+			name: "url_relative_link",
+
+			text: `x: {
+  link: /google
+}
+`,
+			assertions: func(t *testing.T, g *d2graph.Graph) {
+				if len(g.Objects) != 1 {
+					t.Fatal(g.Objects)
+				}
+				if g.Objects[0].Link.Value != "/google" {
+					t.Fatal(g.Objects[0].Link.Value)
+				}
+			},
+		},
 		{
 			name: "non_url_link",

@ -3125,6 +3141,62 @@ x*: {
 				tassert.Equal(t, "x2.ok", g.Objects[3].AbsID())
 			},
 		},
+		{
+			name: "glob-spread-vars/1",
+			text: `vars: {
+  b: {
+    1
+  }
+}
+
+a: {
+  ...${b}
+  *.style.fill: red
+}
+`,
+			assertions: func(t *testing.T, g *d2graph.Graph) {
+				assert.Equal(t, "1", g.Objects[1].Label.Value)
+				assert.Equal(t, "red", g.Objects[1].Style.Fill.Value)
+			},
+		},
+		{
+			name: "glob-spread-vars/2",
+			text: `vars: {
+  b: {
+    1
+		2
+  }
+}
+
+a: {
+  ...${b}
+  ** -> _.ok
+}
+
+ok
+`,
+			assertions: func(t *testing.T, g *d2graph.Graph) {
+				assert.Equal(t, 2, len(g.Edges))
+			},
+		},
+		{
+			name: "import-var-chain",
+
+			text: `...@dev
+`,
+			files: map[string]string{
+				"dev.d2": `
+vars: {
+  a: {
+    b
+  }
+  c: {
+    ...${a}
+  }
+}
+`,
+			},
+		},
 		{
 			name: "var_in_markdown",
 			text: `vars: {
@ -5617,6 +5689,98 @@ d -> d: "suspend"
 				assert.Equal(t, 1, len(g.Edges))
 			},
 		},
+		{
+			name: "unsuspend-edge-label",
+			run: func(t *testing.T) {
+				g, _ := assertCompile(t, `
+a -> b: hello
+c
+**: suspend
+(** -> **)[*]: suspend
+
+(* -> *)[*]: unsuspend
+`, ``)
+				assert.Equal(t, 2, len(g.Objects))
+				assert.Equal(t, 1, len(g.Edges))
+				assert.Equal(t, "hello", g.Edges[0].Label.Value)
+			},
+		},
+		{
+			name: "unsuspend-edge-filter",
+			run: func(t *testing.T) {
+				g, _ := assertCompile(t, `
+a -> b
+**: suspend
+(** -> **)[*]: suspend
+(* -> *)[*]: unsuspend {
+  &dst: a
+}
+`, ``)
+				assert.Equal(t, 0, len(g.Objects))
+				assert.Equal(t, 0, len(g.Edges))
+			},
+		},
+		{
+			name: "unsuspend-edge-child",
+			run: func(t *testing.T) {
+				g, _ := assertCompile(t, `
+a: {
+  b -> c
+}
+
+**: suspend
+(** -> **)[*]: suspend
+(** -> **)[*]: unsuspend {
+  &dst: a.c
+}
+`, ``)
+				assert.Equal(t, 3, len(g.Objects))
+				assert.Equal(t, 1, len(g.Edges))
+			},
+		},
+		{
+			name: "unsuspend-cross-container-edge-label",
+			run: func(t *testing.T) {
+				g, _ := assertCompile(t, `
+a: {
+  b
+}
+c: {
+  d
+}
+a.b -> c.d: likes
+**: suspend
+(** -> **)[*]: suspend
+(** -> **)[*]: unsuspend {
+  &label: likes
+}
+`, ``)
+				assert.Equal(t, 4, len(g.Objects))
+				assert.Equal(t, 1, len(g.Edges))
+			},
+		},
+		{
+			name: "unsuspend-shape-label",
+			run: func(t *testing.T) {
+				g, _ := assertCompile(t, `
+a: hello
+*: suspend
+*: unsuspend
+`, ``)
+				assert.Equal(t, 1, len(g.Objects))
+				assert.Equal(t, "hello", g.Objects[0].Label.Value)
+			},
+		},
+		{
+			name: "suspend-shape",
+			run: func(t *testing.T) {
+				g, _ := assertCompile(t, `
+a: hello
+*: suspend
+`, ``)
+				assert.Equal(t, 0, len(g.Objects))
+			},
+		},
 		{
 			name: "edge-glob-ampersand-filter/1",
 			run: func(t *testing.T) {
--- a/d2ir/compile.go
+++ b/d2ir/compile.go
@ -280,6 +280,19 @@ func (c *compiler) resolveSubstitutions(varsStack []*Map, node Node) (removedFie
 								break
 							}
 						}
+
+						if removedField && len(m.globs) > 0 && !c.lazyGlobBeingApplied {
+							origGlobStack := c.globContextStack
+							c.globContextStack = append(c.globContextStack, m.globs)
+							for _, gctx := range m.globs {
+								old := c.lazyGlobBeingApplied
+								c.lazyGlobBeingApplied = true
+								c.compileKey(gctx.refctx)
+								c.lazyGlobBeingApplied = old
+							}
+							c.globContextStack = origGlobStack
+						}
+
 					}
 				}
 				if resolvedField.Primary() == nil {
@ -869,6 +882,22 @@ func (c *compiler) ampersandFilter(refctx *RefContext) bool {
 			for _, part := range edge.ID.SrcPath {
 				srcParts = append(srcParts, part.ScalarString())
 			}
+
+			container := ParentField(edge)
+			if container != nil && container.Name.ScalarString() != "root" {
+				containerPath := []string{}
+				curr := container
+				for curr != nil && curr.Name.ScalarString() != "root" {
+					containerPath = append([]string{curr.Name.ScalarString()}, containerPath...)
+					curr = ParentField(curr)
+				}
+
+				srcStart := srcParts[0]
+				if !strings.EqualFold(srcStart, containerPath[0]) {
+					srcParts = append(containerPath, srcParts...)
+				}
+			}
+
 			srcPath := strings.Join(srcParts, ".")

 			return srcPath == filterValue
@ -889,6 +918,23 @@ func (c *compiler) ampersandFilter(refctx *RefContext) bool {
 			for _, part := range edge.ID.DstPath {
 				dstParts = append(dstParts, part.ScalarString())
 			}
+
+			// Find the container that holds this edge
+			// Build the absolute path by prepending the container's path
+			container := ParentField(edge)
+			if container != nil && container.Name.ScalarString() != "root" {
+				containerPath := []string{}
+				curr := container
+				for curr != nil && curr.Name.ScalarString() != "root" {
+					containerPath = append([]string{curr.Name.ScalarString()}, containerPath...)
+					curr = ParentField(curr)
+				}
+
+				dstStart := dstParts[0]
+				if !strings.EqualFold(dstStart, containerPath[0]) {
+					dstParts = append(containerPath, dstParts...)
+				}
+			}
 			dstPath := strings.Join(dstParts, ".")

 			return dstPath == filterValue
@ -1101,6 +1147,10 @@ func (c *compiler) extendLinks(m *Map, importF *Field, importDir string) {
 	nodeBoardKind := NodeBoardKind(m)
 	importIDA := IDA(importF)
 	for _, f := range m.Fields {
+		// A substitute or such
+		if f.Name == nil {
+			continue
+		}
 		if f.Name.ScalarString() == "link" && f.Name.IsUnquoted() {
 			if nodeBoardKind != "" {
 				c.errorf(f.LastRef().AST(), "a board itself cannot be linked; only objects within a board can be linked")
@ -1109,7 +1159,7 @@ func (c *compiler) extendLinks(m *Map, importF *Field, importDir string) {
 			val := f.Primary().Value.ScalarString()

 			u, err := url.Parse(html.UnescapeString(val))
-			isRemote := err == nil && u.Scheme != ""
+			isRemote := err == nil && (u.Scheme != "" || strings.HasPrefix(u.Path, "/"))
 			if isRemote {
 				continue
 			}
@ -1147,7 +1197,7 @@ func (c *compiler) extendLinks(m *Map, importF *Field, importDir string) {
 				continue
 			}
 			u, err := url.Parse(html.UnescapeString(val))
-			isRemoteImg := err == nil && u.Scheme != ""
+			isRemoteImg := err == nil && (u.Scheme != "" || strings.HasPrefix(u.Path, "/"))
 			if isRemoteImg {
 				continue
 			}
@ -1273,12 +1323,94 @@ func (c *compiler) _compileEdges(refctx *RefContext) {
 					continue
 				}

+				if refctx.Key.Value.Map != nil && refctx.Key.Value.Map.HasFilter() {
+					if e.Map_ == nil {
+						e.Map_ = &Map{
+							parent: e,
+						}
+					}
+					c.mapRefContextStack = append(c.mapRefContextStack, refctx)
+					ok := c.ampersandFilterMap(e.Map_, refctx.Key.Value.Map, refctx.ScopeAST)
+					c.mapRefContextStack = c.mapRefContextStack[:len(c.mapRefContextStack)-1]
+					if !ok {
+						continue
+					}
+				}
+
 				if refctx.Key.Primary.Suspension != nil || refctx.Key.Value.Suspension != nil {
 					if !c.lazyGlobBeingApplied {
+						// Check if edge passes filter before applying suspension
+						if refctx.Key.Value.Map != nil && refctx.Key.Value.Map.HasFilter() {
+							if e.Map_ == nil {
+								e.Map_ = &Map{
+									parent: e,
+								}
+							}
+							c.mapRefContextStack = append(c.mapRefContextStack, refctx)
+							ok := c.ampersandFilterMap(e.Map_, refctx.Key.Value.Map, refctx.ScopeAST)
+							c.mapRefContextStack = c.mapRefContextStack[:len(c.mapRefContextStack)-1]
+							if !ok {
+								continue
+							}
+						}
+
+						var suspensionValue bool
 						if refctx.Key.Primary.Suspension != nil {
-							e.suspended = refctx.Key.Primary.Suspension.Value
+							suspensionValue = refctx.Key.Primary.Suspension.Value
 						} else {
-							e.suspended = refctx.Key.Value.Suspension.Value
+							suspensionValue = refctx.Key.Value.Suspension.Value
+						}
+						e.suspended = suspensionValue
+
+						// If we're unsuspending an edge, we should also unsuspend its src and dst objects
+						// And their ancestors
+						if !suspensionValue {
+							srcPath, dstPath := e.ID.SrcPath, e.ID.DstPath
+
+							// Make paths absolute if they're relative
+							container := ParentField(e)
+							if container != nil && container.Name.ScalarString() != "root" {
+								containerPath := []d2ast.String{}
+								curr := container
+								for curr != nil && curr.Name.ScalarString() != "root" {
+									containerPath = append([]d2ast.String{curr.Name}, containerPath...)
+									curr = ParentField(curr)
+								}
+
+								if len(srcPath) > 0 && !strings.EqualFold(srcPath[0].ScalarString(), containerPath[0].ScalarString()) {
+									absSrcPath := append([]d2ast.String{}, containerPath...)
+									srcPath = append(absSrcPath, srcPath...)
+								}
+
+								if len(dstPath) > 0 && !strings.EqualFold(dstPath[0].ScalarString(), containerPath[0].ScalarString()) {
+									absDstPath := append([]d2ast.String{}, containerPath...)
+									dstPath = append(absDstPath, dstPath...)
+								}
+							}
+
+							rootMap := RootMap(refctx.ScopeMap)
+							srcObj := rootMap.GetField(srcPath...)
+							dstObj := rootMap.GetField(dstPath...)
+
+							// Unsuspend source node and all its ancestors
+							if srcObj != nil {
+								srcObj.suspended = false
+								parent := ParentField(srcObj)
+								for parent != nil && parent.Name.ScalarString() != "root" {
+									parent.suspended = false
+									parent = ParentField(parent)
+								}
+							}
+
+							// Unsuspend destination node and all its ancestors
+							if dstObj != nil {
+								dstObj.suspended = false
+								parent := ParentField(dstObj)
+								for parent != nil && parent.Name.ScalarString() != "root" {
+									parent.suspended = false
+									parent = ParentField(parent)
+								}
+							}
 						}
 					}
 				}
@ -1309,7 +1441,7 @@ func (c *compiler) _compileEdges(refctx *RefContext) {
 				}
 				c.compileField(e.Map_, refctx.Key.EdgeKey, refctx)
 			} else {
-				if refctx.Key.Primary.Unbox() != nil {
+				if refctx.Key.Primary.Unbox() != nil && refctx.Key.Primary.Suspension == nil {
 					if c.ignoreLazyGlob(e) {
 						return
 					}
@ -1330,7 +1462,7 @@ func (c *compiler) _compileEdges(refctx *RefContext) {
 					c.mapRefContextStack = append(c.mapRefContextStack, refctx)
 					c.compileMap(e.Map_, refctx.Key.Value.Map, refctx.ScopeAST)
 					c.mapRefContextStack = c.mapRefContextStack[:len(c.mapRefContextStack)-1]
-				} else if refctx.Key.Value.ScalarBox().Unbox() != nil {
+				} else if refctx.Key.Value.ScalarBox().Unbox() != nil && refctx.Key.Value.Suspension == nil {
 					if c.ignoreLazyGlob(e) {
 						return
 					}
--- a/d2ir/d2ir.go
+++ b/d2ir/d2ir.go
@ -650,7 +650,41 @@ func (rc *RefContext) EdgeIndex() int {
 func (rc *RefContext) Equal(rc2 *RefContext) bool {
 	// We intentionally ignore edges here because the same glob can produce multiple RefContexts that should be treated  the same with only the edge as the difference.
 	// Same with ScopeMap.
-	return rc.Key.Equals(rc2.Key) && rc.Scope == rc2.Scope && rc.ScopeAST == rc2.ScopeAST
+	if !(rc.Key.Equals(rc2.Key) && rc.Scope == rc2.Scope && rc.ScopeAST == rc2.ScopeAST) {
+		return false
+	}
+
+	// Check if suspension values match for suspension operations
+	// We don't want these two to equal
+	// 1. *: suspend
+	// 2. *: unsuspend
+	hasSuspension1 := (rc.Key.Primary.Suspension != nil || rc.Key.Value.Suspension != nil)
+	hasSuspension2 := (rc2.Key.Primary.Suspension != nil || rc2.Key.Value.Suspension != nil)
+
+	if hasSuspension1 || hasSuspension2 {
+		var val1, val2 bool
+		if rc.Key.Primary.Suspension != nil {
+			val1 = rc.Key.Primary.Suspension.Value
+		} else if rc.Key.Value.Suspension != nil {
+			val1 = rc.Key.Value.Suspension.Value
+		}
+
+		if rc2.Key.Primary.Suspension != nil {
+			val2 = rc2.Key.Primary.Suspension.Value
+		} else if rc2.Key.Value.Suspension != nil {
+			val2 = rc2.Key.Value.Suspension.Value
+		}
+
+		if hasSuspension1 && hasSuspension2 && val1 != val2 {
+			return false
+		}
+
+		if hasSuspension1 != hasSuspension2 {
+			return false
+		}
+	}
+
+	return true
 }

 func (m *Map) FieldCountRecursive() int {
--- a/d2js/js/CHANGELOG.md
+++ b/d2js/js/CHANGELOG.md
@ -3,6 +3,29 @@
 All notable changes to only the d2.js package will be documented in this file. **Does not
 include changes to the main d2 project.**

-## [0.1.0] - 2025-01-12
+## Next
+
+- Fix TypeScript signatures
+
+## [0.1.22]
+### March 20, 2025
+
+- Support `d2-config`. Support additional options. [#2343](https://github.com/terrastruct/d2/pull/2343)
+  - `themeID`
+  - `darkThemeID`
+  - `center`
+  - `pad`
+  - `scale`
+  - `forceAppendix`
+  - `target`
+  - `animateInterval`
+  - `salt`
+  - `noXMLTag`
+- Support relative imports. Improve elk error handling [#2382](https://github.com/terrastruct/d2/pull/2382)
+- Support fonts (`fontRegular`, `fontItalic`, `fontBold`, `fontSemiBold`) [#2384](https://github.com/terrastruct/d2/pull/2384)
+- Add TypeScript signatures
+
+## [0.1.21]
+### January 12, 2025

 First public release
--- a/d2js/js/README.md
+++ b/d2js/js/README.md
@ -29,6 +29,18 @@ pnpm add @terrastruct/d2
 bun add @terrastruct/d2
 ```

+### Nightly
+
+Use the `@nightly` tag to get the version that is built by daily CI on the master branch.
+
+For example,
+
+```bash
+yarn add @terrastruct/d2@nightly
+```
+
+A demo using the nightly build is hosted [here](https://alixander-d2js.web.val.run/).
+
 ## Usage

 D2.js uses webworkers to call a WASM file.
@ -162,6 +174,16 @@ You can browse the examples by running the dev server:

 Visit `http://localhost:3000` to see the example page.

+### Publishing
+
+TODO stable release publishing.
+
+Nightly builds are automated by CI by running:
+
+```bash
+PUBLISH=1 ./make.sh build
+```
+
 ## Contributing

 Contributions are welcome!
--- a/d2js/js/ci/build.sh
+++ b/d2js/js/ci/build.sh
@ -17,3 +17,59 @@ fi

 cd d2js/js
 sh_c bun build.js
+
+if [ -n "${NPM_VERSION:-}" ]; then
+  cp package.json package.json.bak
+  trap 'rm -f .npmrc; mv package.json.bak package.json' EXIT
+
+  if [ "$NPM_VERSION" = "nightly" ]; then
+    echo "Publishing nightly version to npm..."
+
+    DATE_TAG=$(date +'%Y%m%d')
+    COMMIT_SHORT=$(git rev-parse --short HEAD)
+    CURRENT_VERSION=$(node -p "require('./package.json').version")
+    PUBLISH_VERSION="${CURRENT_VERSION}-nightly.${DATE_TAG}.${COMMIT_SHORT}"
+    NPM_TAG="nightly"
+
+    echo "Updating package version to ${PUBLISH_VERSION}"
+  else
+    echo "Publishing official version ${NPM_VERSION} to npm..."
+    PUBLISH_VERSION="$NPM_VERSION"
+    NPM_TAG="latest"
+
+    echo "Setting package version to ${PUBLISH_VERSION}"
+  fi
+
+  # Update package.json with the new version
+  npm version "${PUBLISH_VERSION}" --no-git-tag-version
+
+  echo "Publishing to npm with tag '${NPM_TAG}'..."
+  if [ -n "${NPM_TOKEN-}" ]; then
+    # Create .npmrc file with auth token
+    echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > .npmrc
+
+    if npm publish --tag "$NPM_TAG"; then
+      echo "Successfully published @terrastruct/d2@${PUBLISH_VERSION} to npm with tag '${NPM_TAG}'"
+
+      # For official releases, bump the patch version
+      if [ "$NPM_VERSION" != "nightly" ]; then
+        # Restore original package.json first
+        mv package.json.bak package.json
+
+        echo "Bumping version to ${NPM_VERSION}"
+        npm version "${NPM_VERSION}" --no-git-tag-version
+        git add package.json
+        git commit -m "Bump version to ${NPM_VERSION} [skip ci]"
+
+        # Cancel the trap since we manually restored and don't want it to execute on exit
+        trap - EXIT
+      fi
+    else
+      echoerr "Failed to publish package to npm"
+      exit 1
+    fi
+  else
+    echoerr "NPM_TOKEN environment variable is required for publishing to npm"
+    exit 1
+  fi
+fi
--- a/d2js/js/index.d.ts
+++ b/d2js/js/index.d.ts
@ -0,0 +1,343 @@
+export class D2 {
+  compile(input: string, options?: Omit<CompileRequest, "fs">): Promise<CompileResponse>;
+  compile(input: CompileRequest): Promise<CompileResponse>;
+
+  render(diagram: Diagram, options?: RenderOptions): Promise<string>;
+}
+
+export interface RenderOptions {
+  /** Enable sketch mode [default: false] */
+  sketch?: boolean;
+  /** Theme ID to use [default: 0] */
+  themeID?: number;
+  /** Theme ID to use when client is in dark mode */
+  darkThemeID?: number;
+  /** Center the SVG in the containing viewbox [default: false] */
+  center?: boolean;
+  /** Pixels padded around the rendered diagram [default: 100] */
+  pad?: number;
+  /** Scale the output. E.g., 0.5 to halve the default size. The default will render SVG's that will fit to screen. Setting to 1 turns off SVG fitting to screen. */
+  scale?: number;
+  /** Adds an appendix for tooltips and links [default: false] */
+  forceAppendix?: boolean;
+  /** Target board/s to render. If target ends with '', it will be rendered with all of its scenarios, steps, and layers. Otherwise, only the target board will be rendered. E.g. target: 'layers.x.*' to render layer 'x' with all of its children. Pass '' to render all scenarios, steps, and layers. By default, only the root board is rendered. Multi-board outputs are currently only supported for animated SVGs and so animateInterval must be set to a value greater than 0 when targeting multiple boards. */
+  target?: string;
+  /** If given, multiple boards are packaged as 1 SVG which transitions through each board at the interval (in milliseconds). */
+  animateInterval?: number;
+  /** Add a salt value to ensure the output uses unique IDs. This is useful when generating multiple identical diagrams to be included in the same HTML doc, so that duplicate IDs do not cause invalid HTML. The salt value is a string that will be appended to IDs in the output. */
+  salt?: string;
+  /** Omit XML tag (<?xml ...?>) from output SVG files. Useful when generating SVGs for direct HTML embedding. */
+  noXMLTag?: boolean;
+}
+
+export interface CompileOptions extends RenderOptions {
+  /** Layout engine to use [default: 'dagre'] */
+  layout?: "dagre" | "elk";
+  /** A byte array containing .ttf file to use for the regular font. If none provided, Source Sans Pro Regular is used. */
+  fontRegular?: Uint8Array;
+  /** A byte array containing .ttf file to use for the italic font. If none provided, Source Sans Pro Italic is used. */
+  fontItalic?: Uint8Array;
+  /** A byte array containing .ttf file to use for the bold font. If none provided, Source Sans Pro Bold is used. */
+  fontBold?: Uint8Array;
+  /** A byte array containing .ttf file to use for the semibold font. If none provided, Source Sans Pro Semibold is used. */
+  fontSemibold?: Uint8Array;
+}
+
+export interface CompileRequest {
+  /** A mapping of D2 file paths to their content*/
+  fs: Record<string, string>;
+  /** The path of the entry D2 file [default: index]*/
+  inputPath?: string;
+  /** The CompileOptions to pass to the compiler*/
+  options: CompileOptions;
+}
+
+export interface CompileResponse {
+  /**  Compiled D2 diagram*/
+  diagram: Diagram /* d2target.Diagram */;
+  /** RenderOptions: Render options merged with configuration set in diagram*/
+  renderOptions: RenderOptions;
+  fs: Record<string, string>;
+  graph: Graph;
+  inputPath: string;
+}
+
+export interface Diagram {
+  config?: RenderOptions;
+  name: string;
+  /**
+   * See docs on the same field in d2graph to understand what it means.
+   */
+  isFolderOnly: boolean;
+  description?: string;
+  fontFamily?: any /* d2fonts.FontFamily */;
+  shapes: Shape[];
+  connections: Connection[];
+  root: Shape;
+  legend?: Legend;
+  layers?: (Diagram | undefined)[];
+  scenarios?: (Diagram | undefined)[];
+  steps?: (Diagram | undefined)[];
+}
+
+export interface Legend {
+  shapes?: Shape[];
+  connections?: Connection[];
+}
+
+export type Shape = (Class | SQLTable | Text) & ShapeBase;
+
+export interface ShapeBase {
+  id: string;
+  type: string;
+  classes?: string[];
+  pos: Point;
+  width: number /* int */;
+  height: number /* int */;
+  opacity: number /* float64 */;
+  strokeDash: number /* float64 */;
+  strokeWidth: number /* int */;
+  borderRadius: number /* int */;
+  fill: string;
+  fillPattern?: string;
+  stroke: string;
+  animated: boolean;
+  shadow: boolean;
+  "3d": boolean;
+  multiple: boolean;
+  "double-border": boolean;
+  tooltip: string;
+  link: string;
+  prettyLink?: string;
+  icon?: string /* url.URL */;
+  iconPosition: string;
+  /**
+   * Whether the shape should allow shapes behind it to bleed through
+   * Currently just used for sequence diagram groups
+   */
+  blend: boolean;
+  contentAspectRatio?: number /* float64 */;
+  labelPosition?: string;
+  zIndex: number /* int */;
+  level: number /* int */;
+  /**
+   * These are used for special shapes, sql_table and class
+   */
+  primaryAccentColor?: string;
+  secondaryAccentColor?: string;
+  neutralAccentColor?: string;
+}
+
+export interface Point {
+  x: number /* int */;
+  y: number /* int */;
+}
+
+export interface Class {
+  fields: ClassField[];
+  methods: ClassMethod[];
+}
+
+export interface ClassField {
+  name: string;
+  type: string;
+  visibility: string;
+}
+
+export interface ClassMethod {
+  name: string;
+  return: string;
+  visibility: string;
+}
+
+export interface SQLTable {
+  columns: SQLColumn[];
+}
+
+export interface SQLColumn {
+  name: Text;
+  type: Text;
+  constraint: string[];
+  reference: string;
+}
+
+export interface Text {
+  label: string;
+  fontSize: number /* int */;
+  fontFamily: string;
+  language: string;
+  color: string;
+  italic: boolean;
+  bold: boolean;
+  underline: boolean;
+  labelWidth: number /* int */;
+  labelHeight: number /* int */;
+  labelFill?: string;
+}
+
+export interface Connection extends Text {
+  id: string;
+  classes?: string[];
+  src: string;
+  srcArrow: Arrowhead;
+  srcLabel?: Text;
+  dst: string;
+  dstArrow: Arrowhead;
+  dstLabel?: Text;
+  opacity: number /* float64 */;
+  strokeDash: number /* float64 */;
+  strokeWidth: number /* int */;
+  stroke: string;
+  fill?: string;
+  borderRadius?: number /* float64 */;
+  labelPosition: string;
+  labelPercentage: number /* float64 */;
+  link: string;
+  prettyLink?: string;
+  route: (any /* geo.Point */ | undefined)[];
+  isCurve?: boolean;
+  animated: boolean;
+  tooltip: string;
+  icon?: string /* url.URL */;
+  iconPosition?: string;
+  zIndex: number /* int */;
+}
+
+export type Arrowhead =
+  | "none"
+  | "arrow"
+  | "unfilled-triangle"
+  | "triangle"
+  | "diamond"
+  | "filled-diamond"
+  | "circle"
+  | "filled-circle"
+  | "box"
+  | "filled-box"
+  | "line"
+  | "cf-one"
+  | "cf-many"
+  | "cf-one-required"
+  | "cf-many-required";
+
+export interface Graph {
+  name: string;
+  /**
+   * IsFolderOnly indicates a board or scenario itself makes no modifications from its
+   * base. Folder only boards do not have a render and are used purely for organizing
+   * the board tree.
+   */
+  isFolderOnly: boolean;
+  ast?: any /* d2ast.Map */;
+  root?: Object;
+  legend?: Legend;
+  edges: (Edge | undefined)[];
+  objects: (Object | undefined)[];
+  layers?: (Graph | undefined)[];
+  scenarios?: (Graph | undefined)[];
+  steps?: (Graph | undefined)[];
+  theme?: any /* d2themes.Theme */;
+  /**
+   * Object.Level uses the location of a nested graph
+   */
+  rootLevel?: number /* int */;
+  /**
+   * Currently this holds data embedded from source code configuration variables
+   * Plugins only have access to exported graph, so this data structure allows
+   * carrying arbitrary metadata that any plugin might handle
+   */
+  data?: { [key: string]: any };
+}
+
+export interface Edge {
+  index: number /* int */;
+  srcTableColumnIndex?: number /* int */;
+  dstTableColumnIndex?: number /* int */;
+  labelPosition?: string;
+  labelPercentage?: number /* float64 */;
+  isCurve: boolean;
+  route?: (any /* geo.Point */ | undefined)[];
+  src_arrow: boolean;
+  srcArrowhead?: Attributes;
+  /**
+   * TODO alixander (Mon Sep 12 2022): deprecate SrcArrow and DstArrow and just use SrcArrowhead and DstArrowhead
+   */
+  dst_arrow: boolean;
+  dstArrowhead?: Attributes;
+  references?: EdgeReference[];
+  attributes?: Attributes;
+  zIndex: number /* int */;
+}
+
+export interface Attributes {
+  label: Scalar;
+  labelDimensions: TextDimensions;
+  style: Style;
+  icon?: string /* url.URL */;
+  tooltip?: Scalar;
+  link?: Scalar;
+  width?: Scalar;
+  height?: Scalar;
+  top?: Scalar;
+  left?: Scalar;
+  /**
+   * TODO consider separate Attributes struct for shape-specific and edge-specific
+   * Shapes only
+   */
+  near_key?: any /* d2ast.KeyPath */;
+  language?: string;
+  /**
+   * TODO: default to ShapeRectangle instead of empty string
+   */
+  shape: Scalar;
+  direction: Scalar;
+  constraint: string[];
+  gridRows?: Scalar;
+  gridColumns?: Scalar;
+  gridGap?: Scalar;
+  verticalGap?: Scalar;
+  horizontalGap?: Scalar;
+  labelPosition?: Scalar;
+  iconPosition?: Scalar;
+  /**
+   * These names are attached to the rendered elements in SVG
+   * so that users can target them however they like outside of D2
+   */
+  classes?: string[];
+}
+
+export interface EdgeReference {
+  map_key_edge_index: number /* int */;
+}
+
+export interface Scalar {
+  value: string;
+}
+
+export interface Style {
+  opacity?: Scalar;
+  stroke?: Scalar;
+  fill?: Scalar;
+  fillPattern?: Scalar;
+  strokeWidth?: Scalar;
+  strokeDash?: Scalar;
+  borderRadius?: Scalar;
+  shadow?: Scalar;
+  "3d"?: Scalar;
+  multiple?: Scalar;
+  font?: Scalar;
+  fontSize?: Scalar;
+  fontColor?: Scalar;
+  animated?: Scalar;
+  bold?: Scalar;
+  italic?: Scalar;
+  underline?: Scalar;
+  filled?: Scalar;
+  doubleBorder?: Scalar;
+  textTransform?: Scalar;
+}
+
+export interface TextDimensions {
+  width: number /* int */;
+  height: number /* int */;
+}
--- a/d2js/js/package.json
+++ b/d2js/js/package.json
@ -2,7 +2,7 @@
  "name": "@terrastruct/d2",
  "author": "Terrastruct, Inc.",
  "description": "D2.js is a wrapper around the WASM build of D2, the modern text-to-diagram language.",
-  "version": "0.1.21",
+  "version": "0.1.23",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/terrastruct/d2.git",
@ -23,23 +23,29 @@
      "browser": "./dist/browser/index.js",
      "import": {
        "browser": "./dist/browser/index.js",
-        "default": "./dist/node-esm/index.js"
+        "default": "./dist/node-esm/index.js",
+        "types": "./index.d.ts"
+      },
+      "require": {
+        "default": "./dist/node-cjs/index.js",
+        "types": "./index.d.ts"
      },
-      "require": "./dist/node-cjs/index.js",
      "default": "./dist/node-esm/index.js"
    },
    "./worker": "./dist/browser/worker.js"
  },
  "files": [
-    "dist"
+    "dist",
+    "index.d.ts"
  ],
+  "types": "./index.d.ts",
  "scripts": {
    "build": "./make.sh build",
    "test": "bun test test/unit",
    "test:integration": "bun test test/integration",
    "test:all": "bun run test && bun run test:integration",
    "dev": "bun --watch dev-server.js",
-    "prepublishOnly": "./make.sh all"
+    "prepublishOnly": "NPM_VERSION= ./make.sh all"
  },
  "keywords": [
    "d2",
--- a/d2renderers/d2sketch/testdata/opacity/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/opacity/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/opacity_dark/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/opacity_dark/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/root-fill/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/root-fill/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/twitter/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/twitter/sketch.exp.svg
--- a/d2renderers/d2sketch/testdata/twitter_dark/sketch.exp.svg
+++ b/d2renderers/d2sketch/testdata/twitter_dark/sketch.exp.svg
--- a/d2renderers/d2svg/d2svg.go
+++ b/d2renderers/d2svg/d2svg.go
@ -44,6 +44,13 @@ const (
 	DEFAULT_PADDING = 100

 	appendixIconRadius = 16
+
+	// Legend constants
+	LEGEND_PADDING        = 20
+	LEGEND_ITEM_SPACING   = 15
+	LEGEND_ICON_SIZE      = 24
+	LEGEND_FONT_SIZE      = 14
+	LEGEND_CORNER_PADDING = 10
 )

 var multipleOffset = geo.NewVector(d2target.MULTIPLE_OFFSET, -d2target.MULTIPLE_OFFSET)
@ -101,6 +108,262 @@ func dimensions(diagram *d2target.Diagram, pad int) (left, top, width, height in
 	return left, top, width, height
 }

+func renderLegend(buf *bytes.Buffer, diagram *d2target.Diagram, diagramHash string, theme *d2themes.Theme) error {
+	if diagram.Legend == nil || (len(diagram.Legend.Shapes) == 0 && len(diagram.Legend.Connections) == 0) {
+		return nil
+	}
+
+	_, br := diagram.BoundingBox()
+
+	ruler, err := textmeasure.NewRuler()
+	if err != nil {
+		return err
+	}
+
+	totalHeight := LEGEND_PADDING + LEGEND_FONT_SIZE + LEGEND_ITEM_SPACING
+	maxLabelWidth := 0
+
+	itemCount := 0
+
+	for _, s := range diagram.Legend.Shapes {
+		if s.Label == "" {
+			continue
+		}
+
+		mtext := &d2target.MText{
+			Text:     s.Label,
+			FontSize: LEGEND_FONT_SIZE,
+		}
+
+		dims := d2graph.GetTextDimensions(nil, ruler, mtext, nil)
+		maxLabelWidth = go2.IntMax(maxLabelWidth, dims.Width)
+		totalHeight += go2.IntMax(dims.Height, LEGEND_ICON_SIZE) + LEGEND_ITEM_SPACING
+		itemCount++
+	}
+
+	for _, c := range diagram.Legend.Connections {
+		if c.Label == "" {
+			continue
+		}
+
+		mtext := &d2target.MText{
+			Text:     c.Label,
+			FontSize: LEGEND_FONT_SIZE,
+		}
+
+		dims := d2graph.GetTextDimensions(nil, ruler, mtext, nil)
+		maxLabelWidth = go2.IntMax(maxLabelWidth, dims.Width)
+		totalHeight += go2.IntMax(dims.Height, LEGEND_ICON_SIZE) + LEGEND_ITEM_SPACING
+		itemCount++
+	}
+
+	if itemCount > 0 {
+		totalHeight -= LEGEND_ITEM_SPACING / 2
+	}
+
+	if itemCount > 0 && len(diagram.Legend.Connections) > 0 {
+		totalHeight += LEGEND_PADDING * 1.5
+	} else {
+		totalHeight += LEGEND_PADDING * 1.2
+	}
+
+	legendWidth := LEGEND_PADDING*2 + LEGEND_ICON_SIZE + LEGEND_PADDING + maxLabelWidth
+	legendX := br.X + LEGEND_CORNER_PADDING
+	tl, _ := diagram.BoundingBox()
+	legendY := br.Y - totalHeight
+	if legendY < tl.Y {
+		legendY = tl.Y
+	}
+
+	shadowEl := d2themes.NewThemableElement("rect", theme)
+	shadowEl.Fill = "#F7F7FA"
+	shadowEl.Stroke = "#DEE1EB"
+	shadowEl.Style = "stroke-width: 1px; filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.1))"
+	shadowEl.X = float64(legendX)
+	shadowEl.Y = float64(legendY)
+	shadowEl.Width = float64(legendWidth)
+	shadowEl.Height = float64(totalHeight)
+	shadowEl.Rx = 4
+	fmt.Fprint(buf, shadowEl.Render())
+
+	legendEl := d2themes.NewThemableElement("rect", theme)
+	legendEl.Fill = "#ffffff"
+	legendEl.Stroke = "#DEE1EB"
+	legendEl.Style = "stroke-width: 1px"
+	legendEl.X = float64(legendX)
+	legendEl.Y = float64(legendY)
+	legendEl.Width = float64(legendWidth)
+	legendEl.Height = float64(totalHeight)
+	legendEl.Rx = 4
+	fmt.Fprint(buf, legendEl.Render())
+
+	fmt.Fprintf(buf, `<text class="text-bold" x="%d" y="%d" style="font-size: %dpx;">Legend</text>`,
+		legendX+LEGEND_PADDING, legendY+LEGEND_PADDING+LEGEND_FONT_SIZE, LEGEND_FONT_SIZE+2)
+
+	currentY := legendY + LEGEND_PADDING*2 + LEGEND_FONT_SIZE
+
+	shapeCount := 0
+	for _, s := range diagram.Legend.Shapes {
+		if s.Label == "" {
+			continue
+		}
+
+		iconX := legendX + LEGEND_PADDING
+		iconY := currentY
+
+		shapeIcon, err := renderLegendShapeIcon(s, iconX, iconY, diagramHash, theme)
+		if err != nil {
+			return err
+		}
+		fmt.Fprint(buf, shapeIcon)
+
+		mtext := &d2target.MText{
+			Text:     s.Label,
+			FontSize: LEGEND_FONT_SIZE,
+		}
+
+		dims := d2graph.GetTextDimensions(nil, ruler, mtext, nil)
+
+		rowHeight := go2.IntMax(dims.Height, LEGEND_ICON_SIZE)
+		textY := currentY + rowHeight/2 + int(float64(dims.Height)*0.3)
+
+		fmt.Fprintf(buf, `<text class="text" x="%d" y="%d" style="font-size: %dpx;">%s</text>`,
+			iconX+LEGEND_ICON_SIZE+LEGEND_PADDING, textY, LEGEND_FONT_SIZE,
+			html.EscapeString(s.Label))
+
+		currentY += rowHeight + LEGEND_ITEM_SPACING
+		shapeCount++
+	}
+
+	if shapeCount > 0 && len(diagram.Legend.Connections) > 0 {
+		currentY += LEGEND_ITEM_SPACING / 2
+
+		separatorEl := d2themes.NewThemableElement("line", theme)
+		separatorEl.X1 = float64(legendX + LEGEND_PADDING)
+		separatorEl.Y1 = float64(currentY)
+		separatorEl.X2 = float64(legendX + legendWidth - LEGEND_PADDING)
+		separatorEl.Y2 = float64(currentY)
+		separatorEl.Stroke = "#DEE1EB"
+		separatorEl.StrokeDashArray = "2,2"
+		fmt.Fprint(buf, separatorEl.Render())
+
+		currentY += LEGEND_ITEM_SPACING
+	}
+
+	for _, c := range diagram.Legend.Connections {
+		if c.Label == "" {
+			continue
+		}
+
+		iconX := legendX + LEGEND_PADDING
+		iconY := currentY + LEGEND_ICON_SIZE/2
+
+		connIcon, err := renderLegendConnectionIcon(c, iconX, iconY, theme)
+		if err != nil {
+			return err
+		}
+		fmt.Fprint(buf, connIcon)
+
+		mtext := &d2target.MText{
+			Text:     c.Label,
+			FontSize: LEGEND_FONT_SIZE,
+		}
+
+		dims := d2graph.GetTextDimensions(nil, ruler, mtext, nil)
+
+		rowHeight := go2.IntMax(dims.Height, LEGEND_ICON_SIZE)
+		textY := currentY + rowHeight/2 + int(float64(dims.Height)*0.2)
+
+		fmt.Fprintf(buf, `<text class="text" x="%d" y="%d" style="font-size: %dpx;">%s</text>`,
+			iconX+LEGEND_ICON_SIZE+LEGEND_PADDING, textY, LEGEND_FONT_SIZE,
+			html.EscapeString(c.Label))
+
+		currentY += rowHeight + LEGEND_ITEM_SPACING
+	}
+
+	if shapeCount > 0 && len(diagram.Legend.Connections) > 0 {
+		currentY += LEGEND_PADDING / 2
+	} else {
+		currentY += LEGEND_PADDING / 4
+	}
+
+	return nil
+}
+
+func renderLegendShapeIcon(s d2target.Shape, x, y int, diagramHash string, theme *d2themes.Theme) (string, error) {
+	iconShape := s
+	const sizeFactor = 5
+	iconShape.Pos.X = 0
+	iconShape.Pos.Y = 0
+	iconShape.Width = LEGEND_ICON_SIZE * sizeFactor
+	iconShape.Height = LEGEND_ICON_SIZE * sizeFactor
+	iconShape.Label = ""
+	buf := &bytes.Buffer{}
+	appendixBuf := &bytes.Buffer{}
+	finalBuf := &bytes.Buffer{}
+	fmt.Fprintf(finalBuf, `<g transform="translate(%d, %d) scale(%f)">`,
+		x, y, 1.0/sizeFactor)
+	_, err := drawShape(buf, appendixBuf, diagramHash, iconShape, nil, theme)
+	if err != nil {
+		return "", err
+	}
+
+	fmt.Fprint(finalBuf, buf.String())
+
+	fmt.Fprint(finalBuf, `</g>`)
+
+	return finalBuf.String(), nil
+}
+
+func renderLegendConnectionIcon(c d2target.Connection, x, y int, theme *d2themes.Theme) (string, error) {
+	finalBuf := &bytes.Buffer{}
+
+	buf := &bytes.Buffer{}
+
+	const sizeFactor = 2
+
+	legendConn := *d2target.BaseConnection()
+
+	legendConn.ID = c.ID
+	legendConn.SrcArrow = c.SrcArrow
+	legendConn.DstArrow = c.DstArrow
+	legendConn.StrokeDash = c.StrokeDash
+	legendConn.StrokeWidth = c.StrokeWidth
+	legendConn.Stroke = c.Stroke
+	legendConn.Fill = c.Fill
+	legendConn.BorderRadius = c.BorderRadius
+	legendConn.Opacity = c.Opacity
+	legendConn.Animated = c.Animated
+
+	startX := 0.0
+	midY := 0.0
+	width := float64(LEGEND_ICON_SIZE * sizeFactor)
+
+	legendConn.Route = []*geo.Point{
+		{X: startX, Y: midY},
+		{X: startX + width, Y: midY},
+	}
+
+	legendHash := fmt.Sprintf("legend-%s", hash(fmt.Sprintf("%s-%d-%d", c.ID, x, y)))
+
+	markers := make(map[string]struct{})
+	idToShape := make(map[string]d2target.Shape)
+
+	fmt.Fprintf(finalBuf, `<g transform="translate(%d, %d) scale(%f)">`,
+		x, y, 1.0/sizeFactor)
+
+	_, err := drawConnection(buf, legendHash, legendConn, markers, idToShape, nil, theme)
+	if err != nil {
+		return "", err
+	}
+
+	fmt.Fprint(finalBuf, buf.String())
+
+	fmt.Fprint(finalBuf, `</g>`)
+
+	return finalBuf.String(), nil
+}
+
 func arrowheadMarkerID(diagramHash string, isTarget bool, connection d2target.Connection) string {
 	var arrowhead d2target.Arrowhead
 	if isTarget {
@ -1496,24 +1759,33 @@ func drawShape(writer, appendixWriter io.Writer, diagramHash string, targetShape
 			render = strings.ReplaceAll(render, "<hr>", "<hr />")

 			mdEl := d2themes.NewThemableElement("div", inlineTheme)
-			mdEl.ClassName = "md"
 			mdEl.Content = render

 			// We have to set with styles since within foreignObject, we're in html
 			// land and not SVG attributes
 			var styles []string
+			var classes []string = []string{"md"}
 			if targetShape.FontSize != textmeasure.MarkdownFontSize {
 				styles = append(styles, fmt.Sprintf("font-size:%vpx", targetShape.FontSize))
 			}
+
 			if targetShape.Fill != "" && targetShape.Fill != "transparent" {
-				styles = append(styles, fmt.Sprintf(`background-color:%s`, targetShape.Fill))
+				if color.IsThemeColor(targetShape.Fill) {
+					classes = append(classes, fmt.Sprintf("fill-%s", targetShape.Fill))
+				} else {
+					styles = append(styles, fmt.Sprintf(`background-color:%s`, targetShape.Fill))
+				}
 			}
+
 			if !color.IsThemeColor(targetShape.Color) {
 				styles = append(styles, fmt.Sprintf(`color:%s`, targetShape.Color))
 			} else {
-				styles = append(styles, fmt.Sprintf(`color:%s`, d2themes.ResolveThemeColor(*inlineTheme, targetShape.Color)))
+				classes = append(classes, fmt.Sprintf("color-%s", targetShape.Color))
 			}

+			mdEl.ClassName = strings.Join(classes, " ")
+			// When using dark theme, inlineTheme is nil and we rely on CSS variables
+
 			mdEl.Style = strings.Join(styles, ";")

 			fmt.Fprint(writer, mdEl.Render())
@ -1711,6 +1983,7 @@ func EmbedFonts(buf *bytes.Buffer, diagramHash, source string, fontFamily *d2fon
 			`class="text"`,
 			`class="text `,
 			`class="md"`,
+			`class="md `,
 		},
 		fmt.Sprintf(`
 .%s .text {
@ -1730,7 +2003,10 @@ func EmbedFonts(buf *bytes.Buffer, diagramHash, source string, fontFamily *d2fon
 	appendOnTrigger(
 		buf,
 		source,
-		[]string{`class="md"`},
+		[]string{
+			`class="md"`,
+			`class="md `,
+		},
 		fmt.Sprintf(`
@font-face {
 	font-family: %s-font-semibold;
@ -2112,8 +2388,85 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 	// add all appendix items afterwards so they are always on top
 	fmt.Fprint(buf, appendixItemBuf)

+	if diagram.Legend != nil && (len(diagram.Legend.Shapes) > 0 || len(diagram.Legend.Connections) > 0) {
+		legendBuf := &bytes.Buffer{}
+		err := renderLegend(legendBuf, diagram, diagramHash, inlineTheme)
+		if err != nil {
+			return nil, err
+		}
+		fmt.Fprint(buf, legendBuf)
+	}
+
 	// Note: we always want this since we reference it on connections even if there end up being no masked labels
 	left, top, w, h := dimensions(diagram, pad)
+
+	if diagram.Legend != nil && (len(diagram.Legend.Shapes) > 0 || len(diagram.Legend.Connections) > 0) {
+		tl, br := diagram.BoundingBox()
+		totalHeight := LEGEND_PADDING + LEGEND_FONT_SIZE + LEGEND_ITEM_SPACING
+		maxLabelWidth := 0
+		itemCount := 0
+		ruler, _ := textmeasure.NewRuler()
+		if ruler != nil {
+			for _, s := range diagram.Legend.Shapes {
+				if s.Label == "" {
+					continue
+				}
+				mtext := &d2target.MText{
+					Text:     s.Label,
+					FontSize: LEGEND_FONT_SIZE,
+				}
+				dims := d2graph.GetTextDimensions(nil, ruler, mtext, nil)
+				maxLabelWidth = go2.IntMax(maxLabelWidth, dims.Width)
+				totalHeight += go2.IntMax(dims.Height, LEGEND_ICON_SIZE) + LEGEND_ITEM_SPACING
+				itemCount++
+			}
+
+			for _, c := range diagram.Legend.Connections {
+				if c.Label == "" {
+					continue
+				}
+				mtext := &d2target.MText{
+					Text:     c.Label,
+					FontSize: LEGEND_FONT_SIZE,
+				}
+				dims := d2graph.GetTextDimensions(nil, ruler, mtext, nil)
+				maxLabelWidth = go2.IntMax(maxLabelWidth, dims.Width)
+				totalHeight += go2.IntMax(dims.Height, LEGEND_ICON_SIZE) + LEGEND_ITEM_SPACING
+				itemCount++
+			}
+
+			if itemCount > 0 {
+				totalHeight -= LEGEND_ITEM_SPACING / 2
+			}
+
+			totalHeight += LEGEND_PADDING
+
+			if totalHeight > 0 && maxLabelWidth > 0 {
+				legendWidth := LEGEND_PADDING*2 + LEGEND_ICON_SIZE + LEGEND_PADDING + maxLabelWidth
+
+				legendY := br.Y - totalHeight
+				if legendY < tl.Y {
+					legendY = tl.Y
+				}
+
+				legendRight := br.X + LEGEND_CORNER_PADDING + legendWidth
+				if left+w < legendRight {
+					w = legendRight - left + pad/2
+				}
+
+				if legendY < top {
+					diffY := top - legendY
+					top -= diffY
+					h += diffY
+				}
+
+				legendBottom := legendY + totalHeight
+				if top+h < legendBottom {
+					h = legendBottom - top + pad/2
+				}
+			}
+		}
+	}
 	fmt.Fprint(buf, strings.Join([]string{
 		fmt.Sprintf(`<mask id="%s" maskUnits="userSpaceOnUse" x="%d" y="%d" width="%d" height="%d">`,
 			isolatedDiagramHash, left, top, w, h,
--- a/d2renderers/d2svg/d2svg.go-e
+++ b/d2renderers/d2svg/d2svg.go-e
--- a/d2renderers/d2svg/dark_theme/testdata/code/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/code/dark_theme.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-41228547-font-regular";
  font-size: 16px;
@ -847,7 +846,7 @@
 </text><text class="text-mono" x="0" y="2.300000em">&#160;&#160;<tspan fill="#0086b3">panic</tspan>(<tspan fill="#dd1144">&quot;TODO&quot;</tspan>)
 </text><text class="text-mono" x="0" y="3.600000em">}</text></g></g><g transform="translate(135.000000 0.000000)" class="dark-code"><rect width="160.000000" height="78.000000" stroke="#CDD6F4" class="shape stroke-N1" style="fill:#1e1e2e;stroke-width:2;" /><g transform="translate(8.000000 8.000000)"><text class="text-mono" x="0" y="1.000000em"><tspan fill="#f38ba8">func</tspan><tspan fill="#cdd6f4">&#160;</tspan><tspan fill="#89b4fa">main</tspan><tspan fill="#cdd6f4">(</tspan><tspan fill="#cdd6f4">)</tspan><tspan fill="#cdd6f4">&#160;</tspan><tspan fill="#cdd6f4">{</tspan><tspan fill="#cdd6f4">
 </tspan></text><text class="text-mono" x="0" y="2.300000em"><tspan fill="#cdd6f4"></tspan><tspan fill="#cdd6f4">&#160;&#160;</tspan><tspan fill="#89dceb">panic</tspan><tspan fill="#cdd6f4">(</tspan><tspan fill="#a6e3a1">&quot;TODO&quot;</tspan><tspan fill="#cdd6f4">)</tspan><tspan fill="#cdd6f4">
-</tspan></text><text class="text-mono" x="0" y="3.600000em"><tspan fill="#cdd6f4"></tspan><tspan fill="#cdd6f4">}</tspan></text></g></g></g><g class="dGV4dA=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="355.000000" y="27.000000" width="428" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#CDD6F4"><p>Five is a sufficiently close approximation to infinity.</p>
+</tspan></text><text class="text-mono" x="0" y="3.600000em"><tspan fill="#cdd6f4"></tspan><tspan fill="#cdd6f4">}</tspan></text></g></g></g><g class="dGV4dA=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="355.000000" y="27.000000" width="428" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>Five is a sufficiently close approximation to infinity.</p>
 </div></foreignObject></g></g><g class="dW5rbm93bg=="><g class="shape" ></g><g transform="translate(0.000000 178.000000)" class="light-code"><rect width="429.000000" height="37.000000" stroke="#CDD6F4" class="shape stroke-N1" style="fill:#ffffff;stroke-width:2;" /><g transform="translate(8.000000 8.000000)"><text class="text-mono" x="0" y="1.000000em">Don't&#160;hit&#160;me!!&#160;&#160;I'm&#160;in&#160;the&#160;Twilight&#160;Zone!!!</text></g></g><g transform="translate(0.000000 178.000000)" class="dark-code"><rect width="429.000000" height="37.000000" stroke="#CDD6F4" class="shape stroke-N1" style="fill:#1e1e2e;stroke-width:2;" /><g transform="translate(8.000000 8.000000)"><text class="text-mono" x="0" y="1.000000em"><tspan fill="#cdd6f4">Don't&#160;hit&#160;me!!&#160;&#160;I'm&#160;in&#160;the&#160;Twilight&#160;Zone!!!</tspan></text></g></g></g><g class="KGNvZGUgLS0gdW5rbm93bilbMF0="><path d="M 214.500000 80.000000 C 214.500000 118.000000 214.500000 138.000000 214.500000 176.000000" stroke="#CBA6f7" fill="none" class="connection stroke-B1" style="stroke-width:2;" mask="url(#d2-41228547)" /></g><mask id="d2-41228547" maskUnits="userSpaceOnUse" x="-101" y="-101" width="985" height="417">
 <rect x="-101" y="-101" width="985" height="417" fill="white"></rect>
 <rect x="135.000000" y="0.000000" width="144" height="62" fill="rgba(0,0,0,0.75)"></rect>
--- a/d2renderers/d2svg/dark_theme/testdata/opacity/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/opacity/dark_theme.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-3335880637-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-3335880637 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="eA==" style='opacity:0.400000'><g class="shape" ><rect x="181.000000" y="3.000000" width="54.000000" height="66.000000" stroke="#CBA6f7" fill="#313244" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="208.000000" y="41.500000" fill="#CDD6F4" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g class="eQ==" style='opacity:0.400000'><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="295.000000" y="24.000000" width="382" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#CDD6F4"><p>linux: because a PC is a terrible thing to waste</p>
+</style><g class="eA==" style='opacity:0.400000'><g class="shape" ><rect x="181.000000" y="3.000000" width="54.000000" height="66.000000" stroke="#CBA6f7" fill="#313244" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="208.000000" y="41.500000" fill="#CDD6F4" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g class="eQ==" style='opacity:0.400000'><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="295.000000" y="24.000000" width="382" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>linux: because a PC is a terrible thing to waste</p>
 </div></foreignObject></g></g><g class="YQ=="><g class="shape" ><rect x="181.000000" y="209.000000" width="54.000000" height="66.000000" stroke="#CBA6f7" fill="#313244" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="208.000000" y="247.500000" fill="#CDD6F4" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="dXNlcnM=" style='opacity:0.400000'><g class="shape" ><rect x="737.000000" y="0.000000" width="240.000000" height="72.000000" stroke="#CDD6F4" fill="#1E1E2E" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="737.000000" y="0.000000" width="240.000000" height="36.000000" fill="#CDD6F4" class="class_header fill-N1" /><text x="747.000000" y="25.750000" fill="#1E1E2E" class="text fill-N7" style="text-anchor:start;font-size:24px">users</text><text x="747.000000" y="59.000000" fill="#CBA6f7" class="text fill-B2" style="text-anchor:start;font-size:20px">last_login</text><text x="869.000000" y="59.000000" fill="#BAC2DE" class="text fill-N2" style="text-anchor:start;font-size:20px">datetime</text><text x="967.000000" y="59.000000" fill="#f38BA8" class="text fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="737.000000" x2="977.000000" y1="72.000000" y2="72.000000" stroke="#CDD6F4" class=" stroke-N1" style="stroke-width:2" /></g></g><g class="KHggLSZndDsgYSlbMF0=" style='opacity:0.400000'><marker id="mk-d2-3335880637-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#CBA6f7" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 208.000000 70.500000 C 208.000000 126.099998 208.000000 154.300003 208.000000 205.500000" stroke="#CBA6f7" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3335880637-3488378134)" mask="url(#d2-3335880637)" /><text x="208.000000" y="137.000000" fill="#BAC2DE" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px"><tspan x="208.000000" dy="0.000000">You don&#39;t have to know how the computer works,</tspan><tspan x="208.000000" dy="18.500000">just how to work the computer.</tspan></text></g><mask id="d2-3335880637" maskUnits="userSpaceOnUse" x="-100" y="-101" width="1178" height="477">
 <rect x="-100" y="-101" width="1178" height="477" fill="white"></rect>
 <rect x="203.500000" y="25.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>
--- a/d2renderers/d2svg/dark_theme/testdata/twitter/dark_theme.exp.svg
+++ b/d2renderers/d2svg/dark_theme/testdata/twitter/dark_theme.exp.svg
--- a/d2renderers/d2svg/github-markdown.css
+++ b/d2renderers/d2svg/github-markdown.css
@ -26,7 +26,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "font-regular";
  font-size: 16px;
--- a/d2target/d2target.go
+++ b/d2target/d2target.go
@ -456,6 +456,16 @@ func (diagram Diagram) GetCorpus() string {
 		}
 	}

+	if diagram.Legend != nil {
+		corpus += "Legend"
+		for _, s := range diagram.Legend.Shapes {
+			corpus += s.Label
+		}
+		for _, c := range diagram.Legend.Connections {
+			corpus += c.Label
+		}
+	}
+
 	return corpus
 }

--- a/e2etests-cli/main_test.go
+++ b/e2etests-cli/main_test.go
@ -1346,6 +1346,22 @@ c
 				assert.Success(t, err)
 			},
 		},
+		{
+			name: "validate-against-correct-d2",
+			run: func(t *testing.T, ctx context.Context, dir string, env *xos.Env) {
+				writeFile(t, dir, "correct.d2", `x -> y`)
+				err := runTestMainPersist(t, ctx, dir, env, "validate", "correct.d2")
+				assert.Success(t, err)
+			},
+		},
+		{
+			name: "validate-against-incorrect-d2",
+			run: func(t *testing.T, ctx context.Context, dir string, env *xos.Env) {
+				writeFile(t, dir, "incorrect.d2", `x > y`)
+				err := runTestMainPersist(t, ctx, dir, env, "validate", "incorrect.d2")
+				assert.Error(t, err)
+			},
+		},
 	}

 	ctx := context.Background()
--- a/e2etests-cli/testdata/TestCLI_E2E/animation.exp.svg
+++ b/e2etests-cli/testdata/TestCLI_E2E/animation.exp.svg
@ -124,7 +124,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-2144186222-font-regular";
  font-size: 16px;
--- a/e2etests-cli/testdata/TestCLI_E2E/vars-animation.exp.svg
+++ b/e2etests-cli/testdata/TestCLI_E2E/vars-animation.exp.svg
@ -124,7 +124,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-629739489-font-regular";
  font-size: 16px;
--- a/e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-3049291188-font-regular";
  font-size: 16px;
@ -836,10 +835,10 @@
 .d2-3049291188 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="cXVldWU="><g class="shape" ><path d="M 24 148 H 922 C 946 148 946 223 946 231 C 946 239 946 314 922 314 H 24 C 0 314 0 239 0 231 C 0 223 0 148 24 148 Z" stroke="#0D32B2" fill="#DEE1EB" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 922 148 C 898 148 898 223 898 231 C 898 239 898 314 922 314" stroke="#0D32B2" fill="#DEE1EB" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g></g><g class="bTBfZGVzYw=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="20.000000" y="12.000000" width="106" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>Oldest message</p>
-</div></foreignObject></g></g><g class="bTJfZGVzYw=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="302.000000" y="12.000000" width="41" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>Offset</p>
-</div></foreignObject></g></g><g class="bTVfZGVzYw=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="654.000000" y="12.000000" width="90" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>Last message</p>
-</div></foreignObject></g></g><g class="bTZfZGVzYw=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="804.000000" y="0.000000" width="140" height="48"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>Next message will be<br />
+</style><g class="cXVldWU="><g class="shape" ><path d="M 24 148 H 922 C 946 148 946 223 946 231 C 946 239 946 314 922 314 H 24 C 0 314 0 239 0 231 C 0 223 0 148 24 148 Z" stroke="#0D32B2" fill="#DEE1EB" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 922 148 C 898 148 898 223 898 231 C 898 239 898 314 922 314" stroke="#0D32B2" fill="#DEE1EB" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g></g><g class="bTBfZGVzYw=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="20.000000" y="12.000000" width="106" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>Oldest message</p>
+</div></foreignObject></g></g><g class="bTJfZGVzYw=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="302.000000" y="12.000000" width="41" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>Offset</p>
+</div></foreignObject></g></g><g class="bTVfZGVzYw=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="654.000000" y="12.000000" width="90" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>Last message</p>
+</div></foreignObject></g></g><g class="bTZfZGVzYw=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="804.000000" y="0.000000" width="140" height="48"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>Next message will be<br />
 inserted here</p>
 </div></foreignObject></g></g><g class="cXVldWUuTTA="><g class="shape" ><rect x="40.000000" y="198.000000" width="65.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="72.500000" y="236.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M0</text></g><g class="cXVldWUuTTE="><g class="shape" ><rect x="165.000000" y="198.000000" width="65.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="197.500000" y="236.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M1</text></g><g class="cXVldWUuTTI="><g class="shape" ><rect x="290.000000" y="198.000000" width="65.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="322.500000" y="236.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M2</text></g><g class="cXVldWUuTTM="><g class="shape" ><rect x="415.000000" y="198.000000" width="65.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="447.500000" y="236.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M3</text></g><g class="cXVldWUuTTQ="><g class="shape" ><rect x="540.000000" y="198.000000" width="66.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="573.000000" y="236.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M4</text></g><g class="cXVldWUuTTU="><g class="shape" ><rect x="666.000000" y="198.000000" width="65.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="698.500000" y="236.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M5</text></g><g class="cXVldWUuTTY="><g class="shape" ><rect x="841.000000" y="198.000000" width="65.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="873.500000" y="236.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M6</text></g><g class="KG0wX2Rlc2MgLSZndDsgcXVldWUuTTApWzBd"><marker id="mk-d2-3049291188-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 72.500000 38.000000 C 72.500000 85.599998 72.500000 158.000000 72.500000 194.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3049291188-3488378134)" mask="url(#d2-3049291188)" /></g><g class="KG0yX2Rlc2MgLSZndDsgcXVldWUuTTIpWzBd"><path d="M 322.500000 38.000000 C 322.500000 85.599998 322.500000 158.000000 322.500000 194.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3049291188-3488378134)" mask="url(#d2-3049291188)" /></g><g class="KG01X2Rlc2MgLSZndDsgcXVldWUuTTUpWzBd"><path d="M 698.500000 38.000000 C 698.500000 85.599998 698.500000 158.000000 698.500000 194.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3049291188-3488378134)" mask="url(#d2-3049291188)" /></g><g class="KG02X2Rlc2MgLSZndDsgcXVldWUuTTYpWzBd"><path d="M 873.500000 50.000000 C 873.500000 88.000000 873.500000 158.000000 873.500000 194.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3049291188-3488378134)" mask="url(#d2-3049291188)" /></g><mask id="d2-3049291188" maskUnits="userSpaceOnUse" x="-1" y="-1" width="948" height="316">
 <rect x="-1" y="-1" width="948" height="316" fill="white"></rect>
--- a/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-3542568952-font-regular";
  font-size: 16px;
@ -836,10 +835,10 @@
 .d2-3542568952 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="cXVldWU="><g class="shape" ><path d="M 36 145 H 664 C 688 145 688 220 688 228 C 688 236 688 311 664 311 H 36 C 12 311 12 236 12 228 C 12 220 12 145 36 145 Z" stroke="#0D32B2" fill="#DEE1EB" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 664 145 C 640 145 640 220 640 228 C 640 236 640 311 664 311" stroke="#0D32B2" fill="#DEE1EB" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g></g><g class="bTBfZGVzYw=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="41.000000" y="36.000000" width="106" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>Oldest message</p>
-</div></foreignObject></g></g><g class="bTJfZGVzYw=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="244.000000" y="36.000000" width="41" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>Offset</p>
-</div></foreignObject></g></g><g class="bTVfZGVzYw=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="456.000000" y="36.000000" width="90" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>Last message</p>
-</div></foreignObject></g></g><g class="bTZfZGVzYw=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="566.000000" y="12.000000" width="140" height="48"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>Next message will be<br />
+</style><g class="cXVldWU="><g class="shape" ><path d="M 36 145 H 664 C 688 145 688 220 688 228 C 688 236 688 311 664 311 H 36 C 12 311 12 236 12 228 C 12 220 12 145 36 145 Z" stroke="#0D32B2" fill="#DEE1EB" class=" stroke-B1 fill-N5" style="stroke-width:2;" /><path d="M 664 145 C 640 145 640 220 640 228 C 640 236 640 311 664 311" stroke="#0D32B2" fill="#DEE1EB" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g></g><g class="bTBfZGVzYw=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="41.000000" y="36.000000" width="106" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>Oldest message</p>
+</div></foreignObject></g></g><g class="bTJfZGVzYw=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="244.000000" y="36.000000" width="41" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>Offset</p>
+</div></foreignObject></g></g><g class="bTVfZGVzYw=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="456.000000" y="36.000000" width="90" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>Last message</p>
+</div></foreignObject></g></g><g class="bTZfZGVzYw=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="566.000000" y="12.000000" width="140" height="48"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>Next message will be<br />
 inserted here</p>
 </div></foreignObject></g></g><g class="cXVldWUuTTA="><g class="shape" ><rect x="62.000000" y="195.000000" width="65.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="94.500000" y="233.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M0</text></g><g class="cXVldWUuTTE="><g class="shape" ><rect x="147.000000" y="195.000000" width="65.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="179.500000" y="233.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M1</text></g><g class="cXVldWUuTTI="><g class="shape" ><rect x="232.000000" y="195.000000" width="65.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="264.500000" y="233.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M2</text></g><g class="cXVldWUuTTM="><g class="shape" ><rect x="317.000000" y="195.000000" width="65.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="349.500000" y="233.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M3</text></g><g class="cXVldWUuTTQ="><g class="shape" ><rect x="402.000000" y="195.000000" width="66.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="435.000000" y="233.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M4</text></g><g class="cXVldWUuTTU="><g class="shape" ><rect x="488.000000" y="195.000000" width="65.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="520.500000" y="233.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M5</text></g><g class="cXVldWUuTTY="><g class="shape" ><rect x="573.000000" y="195.000000" width="65.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="605.500000" y="233.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">M6</text></g><g class="KG0wX2Rlc2MgLSZndDsgcXVldWUuTTApWzBd"><marker id="mk-d2-3542568952-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 94.500000 62.000000 L 94.500000 191.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3542568952-3488378134)" mask="url(#d2-3542568952)" /></g><g class="KG0yX2Rlc2MgLSZndDsgcXVldWUuTTIpWzBd"><path d="M 264.500000 62.000000 L 264.500000 191.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3542568952-3488378134)" mask="url(#d2-3542568952)" /></g><g class="KG01X2Rlc2MgLSZndDsgcXVldWUuTTUpWzBd"><path d="M 520.500000 62.000000 L 520.500000 191.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3542568952-3488378134)" mask="url(#d2-3542568952)" /></g><g class="KG02X2Rlc2MgLSZndDsgcXVldWUuTTYpWzBd"><path d="M 605.500000 62.000000 L 605.500000 191.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3542568952-3488378134)" mask="url(#d2-3542568952)" /></g><mask id="d2-3542568952" maskUnits="userSpaceOnUse" x="11" y="11" width="696" height="301">
 <rect x="11" y="11" width="696" height="301" fill="white"></rect>
--- a/e2etests/testdata/regression/md_font_weight/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/md_font_weight/dagre/sketch.exp.svg
@ -121,7 +121,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-147443974-font-regular";
  font-size: 16px;
@ -829,7 +828,7 @@
 .d2-147443974 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="ZXhwbGFuYXRpb24="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="0.000000" width="228" height="159"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h1>I can do headers</h1>
+</style><g class="ZXhwbGFuYXRpb24="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="0.000000" width="228" height="159"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h1>I can do headers</h1>
 <ul>
 <li>lists</li>
 <li>lists</li>
--- a/e2etests/testdata/regression/md_font_weight/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/md_font_weight/elk/sketch.exp.svg
@ -121,7 +121,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-2881380206-font-regular";
  font-size: 16px;
@ -829,7 +828,7 @@
 .d2-2881380206 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="ZXhwbGFuYXRpb24="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="12.000000" width="228" height="159"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h1>I can do headers</h1>
+</style><g class="ZXhwbGFuYXRpb24="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="12.000000" width="228" height="159"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h1>I can do headers</h1>
 <ul>
 <li>lists</li>
 <li>lists</li>
--- a/e2etests/testdata/regression/md_h1_li_li/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/md_h1_li_li/dagre/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-1836715912-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-1836715912 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="95" height="115"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h1>hey</h1>
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="95" height="115"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h1>hey</h1>
 <ul>
 <li>they
 <ol>
--- a/e2etests/testdata/regression/md_h1_li_li/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/md_h1_li_li/elk/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-3788794681-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-3788794681 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="95" height="115"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h1>hey</h1>
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="95" height="115"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h1>hey</h1>
 <ul>
 <li>they
 <ol>
--- a/e2etests/testdata/regression/opacity-on-label/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/opacity-on-label/dagre/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-1987627880-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-1987627880 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="eA==" style='opacity:0.400000'><g class="shape" ><rect x="135.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="161.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g class="eQ==" style='opacity:0.400000'><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="248.000000" y="21.000000" width="304" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>linux: because a PC is a terrible thing to waste</p>
+</style><g class="eA==" style='opacity:0.400000'><g class="shape" ><rect x="135.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="161.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g class="eQ==" style='opacity:0.400000'><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="248.000000" y="21.000000" width="304" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>linux: because a PC is a terrible thing to waste</p>
 </div></foreignObject></g></g><g class="YQ=="><g class="shape" ><rect x="135.000000" y="203.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="161.500000" y="241.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="KHggLSZndDsgYSlbMF0=" style='opacity:0.400000'><marker id="mk-d2-1987627880-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 161.000000 67.500000 C 161.000000 120.699997 161.000000 148.300003 161.000000 199.500000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-1987627880-3488378134)" mask="url(#d2-1987627880)" /><text x="161.000000" y="132.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px"><tspan x="161.000000" dy="0.000000">You don&#39;t have to know how the computer works,</tspan><tspan x="161.000000" dy="18.500000">just how to work the computer.</tspan></text></g><mask id="d2-1987627880" maskUnits="userSpaceOnUse" x="0" y="-1" width="553" height="271">
 <rect x="0" y="-1" width="553" height="271" fill="white"></rect>
 <rect x="157.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
--- a/e2etests/testdata/regression/opacity-on-label/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/opacity-on-label/elk/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-856327487-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-856327487 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="eA==" style='opacity:0.400000'><g class="shape" ><rect x="146.000000" y="12.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="172.500000" y="50.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g class="eQ==" style='opacity:0.400000'><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="219.000000" y="33.000000" width="304" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>linux: because a PC is a terrible thing to waste</p>
+</style><g class="eA==" style='opacity:0.400000'><g class="shape" ><rect x="146.000000" y="12.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="172.500000" y="50.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g class="eQ==" style='opacity:0.400000'><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="219.000000" y="33.000000" width="304" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>linux: because a PC is a terrible thing to waste</p>
 </div></foreignObject></g></g><g class="YQ=="><g class="shape" ><rect x="146.000000" y="255.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="172.500000" y="293.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="KHggLSZndDsgYSlbMF0=" style='opacity:0.400000'><marker id="mk-d2-856327487-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 173.000000 80.000000 L 173.000000 251.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-856327487-3488378134)" mask="url(#d2-856327487)" /><text x="173.000000" y="164.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px"><tspan x="173.000000" dy="0.000000">You don&#39;t have to know how the computer works,</tspan><tspan x="173.000000" dy="18.500000">just how to work the computer.</tspan></text></g><mask id="d2-856327487" maskUnits="userSpaceOnUse" x="12" y="11" width="512" height="311">
 <rect x="12" y="11" width="512" height="311" fill="white"></rect>
 <rect x="168.500000" y="34.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
--- a/e2etests/testdata/regression/unconnected/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/unconnected/dagre/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-4271326716-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-4271326716 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="dGl0bGU="><g class="shape" ></g><text x="757.500000" y="-16.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:40px">Workflow-I (Warehousing, Installation)</text></g><g class="T0VNIEZhY3Rvcnk="><g class="shape" ><rect x="50.000000" y="414.000000" width="135.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="117.500000" y="452.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OEM Factory</text></g><g class="T0VNIFdhcmVob3VzZQ=="><g class="shape" ><rect x="358.000000" y="424.000000" width="159.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="437.500000" y="462.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OEM Warehouse</text></g><g class="RGlzdHJpYnV0b3IgV2FyZWhvdXNl"><g class="shape" ><rect x="335.000000" y="550.000000" width="204.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="437.000000" y="588.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Distributor Warehouse</text></g><g class="R29zIFdhcmVob3VzZQ=="><g class="shape" ><rect x="659.000000" y="270.000000" width="832.000000" height="334.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1075.000000" y="257.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">Gos Warehouse</text></g><g class="Q3VzdG9tZXIgU2l0ZQ=="><g class="shape" ><rect x="25.000000" y="56.000000" width="186.000000" height="252.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="118.000000" y="43.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">Customer Site</text></g><g class="R29zIFdhcmVob3VzZS5NYXN0ZXI="><g class="shape" ><rect x="689.000000" y="388.000000" width="94.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="736.000000" y="426.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Master</text></g><g class="R29zIFdhcmVob3VzZS5SZWdpb25hbC0x"><g class="shape" ><rect x="883.000000" y="461.000000" width="120.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="943.000000" y="499.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Regional-1</text></g><g class="R29zIFdhcmVob3VzZS5SZWdpb25hbC0y"><g class="shape" ><rect x="1103.000000" y="340.000000" width="120.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1163.000000" y="378.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Regional-2</text></g><g class="R29zIFdhcmVob3VzZS5SZWdpb25hbC1O"><g class="shape" ><rect x="1331.000000" y="329.000000" width="122.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1392.000000" y="367.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Regional-N</text></g><g class="R29zIFdhcmVob3VzZS5leHBsYWluYXRpb24="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="1323.000000" y="455.000000" width="138" height="108"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><ul>
+</style><g class="dGl0bGU="><g class="shape" ></g><text x="757.500000" y="-16.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:40px">Workflow-I (Warehousing, Installation)</text></g><g class="T0VNIEZhY3Rvcnk="><g class="shape" ><rect x="50.000000" y="414.000000" width="135.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="117.500000" y="452.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OEM Factory</text></g><g class="T0VNIFdhcmVob3VzZQ=="><g class="shape" ><rect x="358.000000" y="424.000000" width="159.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="437.500000" y="462.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OEM Warehouse</text></g><g class="RGlzdHJpYnV0b3IgV2FyZWhvdXNl"><g class="shape" ><rect x="335.000000" y="550.000000" width="204.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="437.000000" y="588.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Distributor Warehouse</text></g><g class="R29zIFdhcmVob3VzZQ=="><g class="shape" ><rect x="659.000000" y="270.000000" width="832.000000" height="334.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1075.000000" y="257.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">Gos Warehouse</text></g><g class="Q3VzdG9tZXIgU2l0ZQ=="><g class="shape" ><rect x="25.000000" y="56.000000" width="186.000000" height="252.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="118.000000" y="43.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">Customer Site</text></g><g class="R29zIFdhcmVob3VzZS5NYXN0ZXI="><g class="shape" ><rect x="689.000000" y="388.000000" width="94.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="736.000000" y="426.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Master</text></g><g class="R29zIFdhcmVob3VzZS5SZWdpb25hbC0x"><g class="shape" ><rect x="883.000000" y="461.000000" width="120.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="943.000000" y="499.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Regional-1</text></g><g class="R29zIFdhcmVob3VzZS5SZWdpb25hbC0y"><g class="shape" ><rect x="1103.000000" y="340.000000" width="120.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1163.000000" y="378.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Regional-2</text></g><g class="R29zIFdhcmVob3VzZS5SZWdpb25hbC1O"><g class="shape" ><rect x="1331.000000" y="329.000000" width="122.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1392.000000" y="367.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Regional-N</text></g><g class="R29zIFdhcmVob3VzZS5leHBsYWluYXRpb24="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="1323.000000" y="455.000000" width="138" height="108"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><ul>
 <li>Asset Tagging</li>
 <li>Inventory</li>
 <li>Staging</li>
--- a/e2etests/testdata/regression/unconnected/elk/sketch.exp.svg
+++ b/e2etests/testdata/regression/unconnected/elk/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-1235788687-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-1235788687 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="dGl0bGU="><g class="shape" ></g><text x="801.500000" y="-19.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:40px">Workflow-I (Warehousing, Installation)</text></g><g class="T0VNIEZhY3Rvcnk="><g class="shape" ><rect x="103.000000" y="115.000000" width="135.000000" height="120.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="170.500000" y="180.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OEM Factory</text></g><g class="T0VNIFdhcmVob3VzZQ=="><g class="shape" ><rect x="390.000000" y="74.000000" width="159.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="469.500000" y="112.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OEM Warehouse</text></g><g class="RGlzdHJpYnV0b3IgV2FyZWhvdXNl"><g class="shape" ><rect x="368.000000" y="170.000000" width="204.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="470.000000" y="208.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Distributor Warehouse</text></g><g class="R29zIFdhcmVob3VzZQ=="><g class="shape" ><rect x="652.000000" y="12.000000" width="940.000000" height="384.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1122.000000" y="45.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">Gos Warehouse</text></g><g class="Q3VzdG9tZXIgU2l0ZQ=="><g class="shape" ><rect x="12.000000" y="255.000000" width="226.000000" height="252.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="125.000000" y="288.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">Customer Site</text></g><g class="R29zIFdhcmVob3VzZS5NYXN0ZXI="><g class="shape" ><rect x="746.000000" y="97.000000" width="94.000000" height="120.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="793.000000" y="162.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Master</text></g><g class="R29zIFdhcmVob3VzZS5SZWdpb25hbC0x"><g class="shape" ><rect x="970.000000" y="61.000000" width="120.000000" height="80.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1030.000000" y="106.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Regional-1</text></g><g class="R29zIFdhcmVob3VzZS5SZWdpb25hbC0y"><g class="shape" ><rect x="1170.000000" y="129.000000" width="120.000000" height="80.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1230.000000" y="174.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Regional-2</text></g><g class="R29zIFdhcmVob3VzZS5SZWdpb25hbC1O"><g class="shape" ><rect x="1420.000000" y="124.000000" width="122.000000" height="80.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1481.000000" y="169.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Regional-N</text></g><g class="R29zIFdhcmVob3VzZS5leHBsYWluYXRpb24="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="702.000000" y="237.000000" width="138" height="108"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><ul>
+</style><g class="dGl0bGU="><g class="shape" ></g><text x="801.500000" y="-19.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:40px">Workflow-I (Warehousing, Installation)</text></g><g class="T0VNIEZhY3Rvcnk="><g class="shape" ><rect x="103.000000" y="115.000000" width="135.000000" height="120.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="170.500000" y="180.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OEM Factory</text></g><g class="T0VNIFdhcmVob3VzZQ=="><g class="shape" ><rect x="390.000000" y="74.000000" width="159.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="469.500000" y="112.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OEM Warehouse</text></g><g class="RGlzdHJpYnV0b3IgV2FyZWhvdXNl"><g class="shape" ><rect x="368.000000" y="170.000000" width="204.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="470.000000" y="208.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Distributor Warehouse</text></g><g class="R29zIFdhcmVob3VzZQ=="><g class="shape" ><rect x="652.000000" y="12.000000" width="940.000000" height="384.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="1122.000000" y="45.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">Gos Warehouse</text></g><g class="Q3VzdG9tZXIgU2l0ZQ=="><g class="shape" ><rect x="12.000000" y="255.000000" width="226.000000" height="252.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="125.000000" y="288.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">Customer Site</text></g><g class="R29zIFdhcmVob3VzZS5NYXN0ZXI="><g class="shape" ><rect x="746.000000" y="97.000000" width="94.000000" height="120.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="793.000000" y="162.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Master</text></g><g class="R29zIFdhcmVob3VzZS5SZWdpb25hbC0x"><g class="shape" ><rect x="970.000000" y="61.000000" width="120.000000" height="80.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1030.000000" y="106.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Regional-1</text></g><g class="R29zIFdhcmVob3VzZS5SZWdpb25hbC0y"><g class="shape" ><rect x="1170.000000" y="129.000000" width="120.000000" height="80.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1230.000000" y="174.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Regional-2</text></g><g class="R29zIFdhcmVob3VzZS5SZWdpb25hbC1O"><g class="shape" ><rect x="1420.000000" y="124.000000" width="122.000000" height="80.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="1481.000000" y="169.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Regional-N</text></g><g class="R29zIFdhcmVob3VzZS5leHBsYWluYXRpb24="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="702.000000" y="237.000000" width="138" height="108"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><ul>
 <li>Asset Tagging</li>
 <li>Inventory</li>
 <li>Staging</li>
--- a/e2etests/testdata/stable/br/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/br/dagre/sketch.exp.svg
@ -121,7 +121,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-3415583374-font-regular";
  font-size: 16px;
@ -829,7 +828,7 @@
 .d2-3415583374 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="Y29weQ=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="0.000000" width="147" height="383"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h1>Headline 1</h1>
+</style><g class="Y29weQ=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="0.000000" width="147" height="383"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h1>Headline 1</h1>
 <h2>Headline 2</h2>
 <p>Lorem ipsum dolor
 <br /></p>
--- a/e2etests/testdata/stable/br/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/br/elk/sketch.exp.svg
@ -121,7 +121,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-2354018982-font-regular";
  font-size: 16px;
@ -829,7 +828,7 @@
 .d2-2354018982 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="Y29weQ=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="12.000000" width="147" height="383"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h1>Headline 1</h1>
+</style><g class="Y29weQ=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="12.000000" width="147" height="383"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h1>Headline 1</h1>
 <h2>Headline 2</h2>
 <p>Lorem ipsum dolor
 <br /></p>
--- a/e2etests/testdata/stable/constant_near_stress/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/constant_near_stress/dagre/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-1761626757-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-1761626757 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="eA=="><g class="shape" ><rect x="1.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g class="eQ=="><g class="shape" ><rect x="0.000000" y="166.000000" width="54.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.000000" y="204.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g class="VGhlIHRvcCBvZiB0aGUgbW91bnRhaW4="><g class="shape" ></g><text x="27.000000" y="-25.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">The top of the mountain</text></g><g class="Sm9l"><g class="shape" ><path d="M -451 149 H -495 V 148 C -495 137 -490 127 -483 122 C -487 118 -489 111 -489 104 C -489 93 -482 83 -473 83 C -464 83 -457 93 -457 104 C -457 111 -459 117 -464 121 C -456 126 -452 136 -452 147 V 148 H -451 Z" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="-473.000000" y="170.000000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Joe</text></g><g class="RG9uYWxk"><g class="shape" ><path d="M 570 149 H 505 V 148 C 505 137 512 127 523 122 C 517 118 513 111 513 104 C 513 93 524 83 537 83 C 550 83 561 93 561 104 C 561 111 557 117 551 121 C 562 126 569 136 569 147 V 148 H 570 Z" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="537.500000" y="170.000000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Donald</text></g><g class="Ym90dG9t"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="-431.000000" y="252.000000" width="917" height="131"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h1>Cats, no less liquid than their shadows, offer no angles to the wind.</h1>
+</style><g class="eA=="><g class="shape" ><rect x="1.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g class="eQ=="><g class="shape" ><rect x="0.000000" y="166.000000" width="54.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.000000" y="204.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g class="VGhlIHRvcCBvZiB0aGUgbW91bnRhaW4="><g class="shape" ></g><text x="27.000000" y="-25.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">The top of the mountain</text></g><g class="Sm9l"><g class="shape" ><path d="M -451 149 H -495 V 148 C -495 137 -490 127 -483 122 C -487 118 -489 111 -489 104 C -489 93 -482 83 -473 83 C -464 83 -457 93 -457 104 C -457 111 -459 117 -464 121 C -456 126 -452 136 -452 147 V 148 H -451 Z" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="-473.000000" y="170.000000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Joe</text></g><g class="RG9uYWxk"><g class="shape" ><path d="M 570 149 H 505 V 148 C 505 137 512 127 523 122 C 517 118 513 111 513 104 C 513 93 524 83 537 83 C 550 83 561 93 561 104 C 561 111 557 117 551 121 C 562 126 569 136 569 147 V 148 H 570 Z" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="537.500000" y="170.000000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Donald</text></g><g class="Ym90dG9t"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="-431.000000" y="252.000000" width="917" height="131"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h1>Cats, no less liquid than their shadows, offer no angles to the wind.</h1>
 <p>If we can't fix it, it ain't broke.</p>
 <p>Dieters live life in the fasting lane.</p>
 </div></foreignObject></g></g><g class="aSBhbSB0b3AgbGVmdA=="><g class="shape" ></g><text x="-491.000000" y="-25.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">i am top left</text></g><g class="aSBhbSB0b3AgcmlnaHQ="><g class="shape" ></g><text x="550.000000" y="-25.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">i am top right</text></g><g class="aSBhbSBib3R0b20gbGVmdA=="><g class="shape" ></g><text x="-504.500000" y="268.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">i am bottom left</text></g><g class="aSBhbSBib3R0b20gcmlnaHQ="><g class="shape" ></g><text x="563.500000" y="268.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">i am bottom right</text></g><g class="KHggLSZndDsgeSlbMF0="><marker id="mk-d2-1761626757-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 27.000000 68.000000 C 27.000000 106.000000 27.000000 126.000000 27.000000 162.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-1761626757-3488378134)" mask="url(#d2-1761626757)" /></g><mask id="d2-1761626757" maskUnits="userSpaceOnUse" x="-559" y="-42" width="1182" height="426">
--- a/e2etests/testdata/stable/constant_near_stress/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/constant_near_stress/elk/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-1390049335-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-1390049335 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="eA=="><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g class="eQ=="><g class="shape" ><rect x="12.000000" y="148.000000" width="54.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="39.000000" y="186.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g class="VGhlIHRvcCBvZiB0aGUgbW91bnRhaW4="><g class="shape" ></g><text x="39.000000" y="-13.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">The top of the mountain</text></g><g class="Sm9l"><g class="shape" ><path d="M -439 146 H -483 V 145 C -483 134 -478 124 -471 119 C -475 115 -477 108 -477 101 C -477 90 -470 80 -461 80 C -452 80 -445 90 -445 101 C -445 108 -447 114 -452 118 C -444 123 -440 133 -440 144 V 145 H -439 Z" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="-461.000000" y="167.000000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Joe</text></g><g class="RG9uYWxk"><g class="shape" ><path d="M 582 146 H 517 V 145 C 517 134 524 124 535 119 C 529 115 525 108 525 101 C 525 90 536 80 549 80 C 562 80 573 90 573 101 C 573 108 569 114 563 118 C 574 123 581 133 581 144 V 145 H 582 Z" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="549.500000" y="167.000000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Donald</text></g><g class="Ym90dG9t"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="-419.000000" y="234.000000" width="917" height="131"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h1>Cats, no less liquid than their shadows, offer no angles to the wind.</h1>
+</style><g class="eA=="><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g class="eQ=="><g class="shape" ><rect x="12.000000" y="148.000000" width="54.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="39.000000" y="186.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g class="VGhlIHRvcCBvZiB0aGUgbW91bnRhaW4="><g class="shape" ></g><text x="39.000000" y="-13.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">The top of the mountain</text></g><g class="Sm9l"><g class="shape" ><path d="M -439 146 H -483 V 145 C -483 134 -478 124 -471 119 C -475 115 -477 108 -477 101 C -477 90 -470 80 -461 80 C -452 80 -445 90 -445 101 C -445 108 -447 114 -452 118 C -444 123 -440 133 -440 144 V 145 H -439 Z" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="-461.000000" y="167.000000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Joe</text></g><g class="RG9uYWxk"><g class="shape" ><path d="M 582 146 H 517 V 145 C 517 134 524 124 535 119 C 529 115 525 108 525 101 C 525 90 536 80 549 80 C 562 80 573 90 573 101 C 573 108 569 114 563 118 C 574 123 581 133 581 144 V 145 H 582 Z" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="549.500000" y="167.000000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Donald</text></g><g class="Ym90dG9t"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="-419.000000" y="234.000000" width="917" height="131"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h1>Cats, no less liquid than their shadows, offer no angles to the wind.</h1>
 <p>If we can't fix it, it ain't broke.</p>
 <p>Dieters live life in the fasting lane.</p>
 </div></foreignObject></g></g><g class="aSBhbSB0b3AgbGVmdA=="><g class="shape" ></g><text x="-479.000000" y="-13.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">i am top left</text></g><g class="aSBhbSB0b3AgcmlnaHQ="><g class="shape" ></g><text x="562.000000" y="-13.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">i am top right</text></g><g class="aSBhbSBib3R0b20gbGVmdA=="><g class="shape" ></g><text x="-492.500000" y="250.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">i am bottom left</text></g><g class="aSBhbSBib3R0b20gcmlnaHQ="><g class="shape" ></g><text x="575.500000" y="250.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">i am bottom right</text></g><g class="KHggLSZndDsgeSlbMF0="><marker id="mk-d2-1390049335-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 39.000000 80.000000 L 39.000000 144.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-1390049335-3488378134)" mask="url(#d2-1390049335)" /></g><mask id="d2-1390049335" maskUnits="userSpaceOnUse" x="-547" y="-30" width="1182" height="396">
--- a/e2etests/testdata/stable/constant_near_title/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/constant_near_title/dagre/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-2364978249-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-2364978249 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="dGl0bGU="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="37.000000" y="-71.000000" width="257" height="51"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h1>A winning strategy</h1>
+</style><g class="dGl0bGU="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="37.000000" y="-71.000000" width="257" height="51"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h1>A winning strategy</h1>
 </div></foreignObject></g></g><g class="cG9sbCB0aGUgcGVvcGxl"><g class="shape" ><rect x="82.000000" y="0.000000" width="150.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="157.000000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">poll the people</text></g><g class="cmVzdWx0cw=="><g class="shape" ><rect x="191.000000" y="166.000000" width="93.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="237.500000" y="204.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">results</text></g><g class="dW5mYXZvcmFibGU="><g class="shape" ><rect x="0.000000" y="332.000000" width="131.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="65.500000" y="370.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">unfavorable</text></g><g class="ZmF2b3JhYmxl"><g class="shape" ><rect x="191.000000" y="332.000000" width="113.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="247.500000" y="370.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">favorable</text></g><g class="d2lsbCBvZiB0aGUgcGVvcGxl"><g class="shape" ><rect x="164.000000" y="498.000000" width="167.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="247.500000" y="536.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">will of the people</text></g><g class="KHBvbGwgdGhlIHBlb3BsZSAtJmd0OyByZXN1bHRzKVswXQ=="><marker id="mk-d2-2364978249-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 189.899857 67.428426 C 227.699997 106.000000 237.500000 126.000000 237.500000 162.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-2364978249-3488378134)" mask="url(#d2-2364978249)" /></g><g class="KHJlc3VsdHMgLSZndDsgdW5mYXZvcmFibGUpWzBd"><path d="M 200.020120 233.345346 C 157.500000 272.000000 136.699997 292.000000 100.299714 329.143149" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-2364978249-3488378134)" mask="url(#d2-2364978249)" /></g><g class="KHVuZmF2b3JhYmxlIC0mZ3Q7IHBvbGwgdGhlIHBlb3BsZSlbMF0="><path d="M 61.261710 330.014246 C 56.700001 292.000000 55.500000 265.399994 55.500000 240.500000 C 55.500000 215.600006 67.699997 106.000000 113.406432 68.535712" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-2364978249-3488378134)" mask="url(#d2-2364978249)" /></g><g class="KHJlc3VsdHMgLSZndDsgZmF2b3JhYmxlKVswXQ=="><path d="M 241.738291 233.985754 C 246.300003 272.000000 247.500000 292.000000 247.500000 328.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-2364978249-3488378134)" mask="url(#d2-2364978249)" /></g><g class="KGZhdm9yYWJsZSAtJmd0OyB3aWxsIG9mIHRoZSBwZW9wbGUpWzBd"><path d="M 247.500000 400.000000 C 247.500000 438.000000 247.500000 458.000000 247.500000 494.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-2364978249-3488378134)" mask="url(#d2-2364978249)" /></g><mask id="d2-2364978249" maskUnits="userSpaceOnUse" x="-1" y="-72" width="333" height="637">
 <rect x="-1" y="-72" width="333" height="637" fill="white"></rect>
 <rect x="37.000000" y="-71.000000" width="257" height="51" fill="rgba(0,0,0,0.75)"></rect>
--- a/e2etests/testdata/stable/constant_near_title/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/constant_near_title/elk/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-4212596512-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-4212596512 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="dGl0bGU="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="29.000000" y="-59.000000" width="257" height="51"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h1>A winning strategy</h1>
+</style><g class="dGl0bGU="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="29.000000" y="-59.000000" width="257" height="51"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h1>A winning strategy</h1>
 </div></foreignObject></g></g><g class="cG9sbCB0aGUgcGVvcGxl"><g class="shape" ><rect x="110.000000" y="12.000000" width="150.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="185.000000" y="50.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">poll the people</text></g><g class="cmVzdWx0cw=="><g class="shape" ><rect x="64.000000" y="158.000000" width="93.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="110.500000" y="196.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">results</text></g><g class="dW5mYXZvcmFibGU="><g class="shape" ><rect x="172.000000" y="304.000000" width="131.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="237.500000" y="342.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">unfavorable</text></g><g class="ZmF2b3JhYmxl"><g class="shape" ><rect x="39.000000" y="304.000000" width="113.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="95.500000" y="342.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">favorable</text></g><g class="d2lsbCBvZiB0aGUgcGVvcGxl"><g class="shape" ><rect x="12.000000" y="440.000000" width="167.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="95.500000" y="478.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">will of the people</text></g><g class="KHBvbGwgdGhlIHBlb3BsZSAtJmd0OyByZXN1bHRzKVswXQ=="><marker id="mk-d2-4212596512-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 160.166000 80.000000 L 160.166000 108.000000 S 160.166000 118.000000 150.166000 118.000000 L 121.000000 118.000000 S 111.000000 118.000000 111.000000 128.000000 L 111.000000 154.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-4212596512-3488378134)" mask="url(#d2-4212596512)" /></g><g class="KHJlc3VsdHMgLSZndDsgdW5mYXZvcmFibGUpWzBd"><path d="M 126.500000 226.000000 L 126.500000 254.000000 S 126.500000 264.000000 136.500000 264.000000 L 205.666000 264.000000 S 215.666000 264.000000 215.666000 274.000000 L 215.666000 300.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-4212596512-3488378134)" mask="url(#d2-4212596512)" /></g><g class="KHVuZmF2b3JhYmxlIC0mZ3Q7IHBvbGwgdGhlIHBlb3BsZSlbMF0="><path d="M 259.333008 302.000000 L 259.333008 128.000000 S 259.333008 118.000000 249.333008 118.000000 L 220.166000 118.000000 S 210.166000 118.000000 210.166000 108.000000 L 210.166000 82.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-4212596512-3488378134)" mask="url(#d2-4212596512)" /></g><g class="KHJlc3VsdHMgLSZndDsgZmF2b3JhYmxlKVswXQ=="><path d="M 95.500000 226.000000 L 95.500000 300.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-4212596512-3488378134)" mask="url(#d2-4212596512)" /></g><g class="KGZhdm9yYWJsZSAtJmd0OyB3aWxsIG9mIHRoZSBwZW9wbGUpWzBd"><path d="M 95.500000 372.000000 L 95.500000 436.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-4212596512-3488378134)" mask="url(#d2-4212596512)" /></g><mask id="d2-4212596512" maskUnits="userSpaceOnUse" x="11" y="-60" width="293" height="567">
 <rect x="11" y="-60" width="293" height="567" fill="white"></rect>
 <rect x="29.000000" y="-59.000000" width="257" height="51" fill="rgba(0,0,0,0.75)"></rect>
--- a/e2etests/testdata/stable/font_colors/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/font_colors/dagre/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-2362348913-font-regular";
  font-size: 16px;
--- a/e2etests/testdata/stable/font_colors/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/font_colors/elk/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-664798849-font-regular";
  font-size: 16px;
--- a/e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg
@ -142,7 +142,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-851985161-font-regular";
  font-size: 16px;
@ -850,7 +849,7 @@
 .d2-851985161 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="3051" height="4853"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h1>Markdown: Syntax</h1>
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="3051" height="4853"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h1>Markdown: Syntax</h1>
 <ul>
 <li><a href="#overview">Overview</a>
 <ul>
--- a/e2etests/testdata/stable/giant_markdown_test/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/giant_markdown_test/elk/sketch.exp.svg
@ -142,7 +142,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-4122552445-font-regular";
  font-size: 16px;
@ -850,7 +849,7 @@
 .d2-4122552445 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="3051" height="4853"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h1>Markdown: Syntax</h1>
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="3051" height="4853"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h1>Markdown: Syntax</h1>
 <ul>
 <li><a href="#overview">Overview</a>
 <ul>
--- a/e2etests/testdata/stable/hr/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/hr/dagre/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-142627214-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-142627214 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="738" height="135"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p><strong>Note:</strong> This document is itself written using Markdown; you
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="738" height="135"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p><strong>Note:</strong> This document is itself written using Markdown; you
 can <a href="/projects/markdown/syntax.text">see the source for it by adding '.text' to the URL</a>.</p>
 <hr />
 <h2>Overview</h2>
--- a/e2etests/testdata/stable/hr/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/hr/elk/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-3115974332-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-3115974332 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="738" height="135"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p><strong>Note:</strong> This document is itself written using Markdown; you
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="738" height="135"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p><strong>Note:</strong> This document is itself written using Markdown; you
 can <a href="/projects/markdown/syntax.text">see the source for it by adding '.text' to the URL</a>.</p>
 <hr />
 <h2>Overview</h2>
--- a/e2etests/testdata/stable/li1/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/li1/dagre/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-3521704376-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-3521704376 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="379" height="100"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><ul>
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="379" height="100"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><ul>
 <li><a href="#overview">Overview</a>
 <ul>
 <li><a href="#philosophy">Philosophy</a></li>
--- a/e2etests/testdata/stable/li1/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/li1/elk/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-2351031357-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-2351031357 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="379" height="100"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><ul>
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="379" height="100"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><ul>
 <li><a href="#overview">Overview</a>
 <ul>
 <li><a href="#philosophy">Philosophy</a></li>
--- a/e2etests/testdata/stable/li2/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/li2/dagre/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-3835243374-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-3835243374 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="245" height="76"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><ul>
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="245" height="76"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><ul>
 <li><a href="#overview">Overview</a> ok <em>this is all measured</em>
 <ul>
 <li><a href="#philosophy">Philosophy</a></li>
--- a/e2etests/testdata/stable/li2/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/li2/elk/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-2498775702-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-2498775702 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="245" height="76"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><ul>
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="245" height="76"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><ul>
 <li><a href="#overview">Overview</a> ok <em>this is all measured</em>
 <ul>
 <li><a href="#philosophy">Philosophy</a></li>
--- a/e2etests/testdata/stable/li3/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/li3/dagre/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-1850453634-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-1850453634 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="347" height="512"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><ul>
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="347" height="512"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><ul>
 <li><a href="#overview">Overview</a>
 <ul>
 <li><a href="#philosophy">Philosophy</a></li>
--- a/e2etests/testdata/stable/li3/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/li3/elk/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-3625619566-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-3625619566 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="347" height="512"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><ul>
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="347" height="512"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><ul>
 <li><a href="#overview">Overview</a>
 <ul>
 <li><a href="#philosophy">Philosophy</a></li>
--- a/e2etests/testdata/stable/li4/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/li4/dagre/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-95635950-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-95635950 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="920" height="376"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>List items may consist of multiple paragraphs. Each subsequent
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="920" height="376"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>List items may consist of multiple paragraphs. Each subsequent
 paragraph in a list item must be indented by either 4 spaces
 or one tab:</p>
 <ol>
--- a/e2etests/testdata/stable/li4/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/li4/elk/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-1253393308-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-1253393308 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="920" height="376"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>List items may consist of multiple paragraphs. Each subsequent
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="920" height="376"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>List items may consist of multiple paragraphs. Each subsequent
 paragraph in a list item must be indented by either 4 spaces
 or one tab:</p>
 <ol>
--- a/e2etests/testdata/stable/lone_h1/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/lone_h1/dagre/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-1741298119-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-1741298119 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="257" height="51"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h1>Markdown: Syntax</h1>
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="257" height="51"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h1>Markdown: Syntax</h1>
 </div></foreignObject></g></g><g class="YQ=="><g class="shape" ><rect x="102.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="128.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="Yg=="><g class="shape" ><rect x="102.000000" y="317.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="128.500000" y="355.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g class="KGEgLSZndDsgbWQpWzBd"><marker id="mk-d2-1741298119-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 128.500000 68.000000 C 128.500000 106.000000 128.500000 126.000000 128.500000 162.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-1741298119-3488378134)" mask="url(#d2-1741298119)" /></g><g class="KG1kIC0mZ3Q7IGIpWzBd"><path d="M 128.500000 219.000000 C 128.500000 257.000000 128.500000 277.000000 128.500000 313.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-1741298119-3488378134)" mask="url(#d2-1741298119)" /></g><mask id="d2-1741298119" maskUnits="userSpaceOnUse" x="-1" y="-1" width="259" height="385">
 <rect x="-1" y="-1" width="259" height="385" fill="white"></rect>
 <rect x="0.000000" y="166.000000" width="257" height="51" fill="rgba(0,0,0,0.75)"></rect>
--- a/e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-1073489527-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-1073489527 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="257" height="51"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h1>Markdown: Syntax</h1>
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="257" height="51"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h1>Markdown: Syntax</h1>
 </div></foreignObject></g></g><g class="YQ=="><g class="shape" ><rect x="114.000000" y="12.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.500000" y="50.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="Yg=="><g class="shape" ><rect x="114.000000" y="269.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.500000" y="307.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g class="KGEgLSZndDsgbWQpWzBd"><marker id="mk-d2-1073489527-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 140.500000 80.000000 L 140.500000 144.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-1073489527-3488378134)" mask="url(#d2-1073489527)" /></g><g class="KG1kIC0mZ3Q7IGIpWzBd"><path d="M 140.500000 201.000000 L 140.500000 265.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-1073489527-3488378134)" mask="url(#d2-1073489527)" /></g><mask id="d2-1073489527" maskUnits="userSpaceOnUse" x="11" y="11" width="259" height="325">
 <rect x="11" y="11" width="259" height="325" fill="white"></rect>
 <rect x="12.000000" y="148.000000" width="257" height="51" fill="rgba(0,0,0,0.75)"></rect>
--- a/e2etests/testdata/stable/markdown/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/markdown/dagre/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-1466084009-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-1466084009 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="aGV5"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="531" height="227"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h1>Every frustum longs to be a cone</h1>
+</style><g class="aGV5"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="531" height="227"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h1>Every frustum longs to be a cone</h1>
 <ul>
 <li>A continuing flow of paper is sufficient to continue the flow of paper</li>
 <li>Please remain calm, it's no use both of us being hysterical at the same time</li>
--- a/e2etests/testdata/stable/markdown/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/markdown/elk/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-2237312999-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-2237312999 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="aGV5"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="531" height="227"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h1>Every frustum longs to be a cone</h1>
+</style><g class="aGV5"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="531" height="227"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h1>Every frustum longs to be a cone</h1>
 <ul>
 <li>A continuing flow of paper is sufficient to continue the flow of paper</li>
 <li>Please remain calm, it's no use both of us being hysterical at the same time</li>
--- a/e2etests/testdata/stable/markdown_stroke_fill/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/markdown_stroke_fill/dagre/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-1160608805-font-regular";
  font-size: 16px;
--- a/e2etests/testdata/stable/markdown_stroke_fill/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/markdown_stroke_fill/elk/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-939069974-font-regular";
  font-size: 16px;
--- a/e2etests/testdata/stable/md_2space_newline/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_2space_newline/dagre/sketch.exp.svg
@ -121,7 +121,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-2553377867-font-regular";
  font-size: 16px;
@ -829,7 +828,7 @@
 .d2-2553377867 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWFya2Rvd24="><g class="shape" ><rect x="10.000000" y="20.000000" width="519.000000" height="108.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="269.500000" y="7.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">markdown</text></g><g class="bWFya2Rvd24ubWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="40.000000" y="50.000000" width="459" height="48"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br />
+</style><g class="bWFya2Rvd24="><g class="shape" ><rect x="10.000000" y="20.000000" width="519.000000" height="108.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="269.500000" y="7.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">markdown</text></g><g class="bWFya2Rvd24ubWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="40.000000" y="50.000000" width="459" height="48"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br />
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 </div></foreignObject></g></g><mask id="d2-2553377867" maskUnits="userSpaceOnUse" x="9" y="-21" width="521" height="150">
 <rect x="9" y="-21" width="521" height="150" fill="white"></rect>
--- a/e2etests/testdata/stable/md_2space_newline/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_2space_newline/elk/sketch.exp.svg
@ -121,7 +121,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-3503638182-font-regular";
  font-size: 16px;
@ -829,7 +828,7 @@
 .d2-3503638182 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWFya2Rvd24="><g class="shape" ><rect x="12.000000" y="12.000000" width="559.000000" height="148.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="291.500000" y="45.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">markdown</text></g><g class="bWFya2Rvd24ubWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="62.000000" y="62.000000" width="459" height="48"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br />
+</style><g class="bWFya2Rvd24="><g class="shape" ><rect x="12.000000" y="12.000000" width="559.000000" height="148.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="291.500000" y="45.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">markdown</text></g><g class="bWFya2Rvd24ubWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="62.000000" y="62.000000" width="459" height="48"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br />
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 </div></foreignObject></g></g><mask id="d2-3503638182" maskUnits="userSpaceOnUse" x="11" y="11" width="561" height="150">
 <rect x="11" y="11" width="561" height="150" fill="white"></rect>
--- a/e2etests/testdata/stable/md_backslash_newline/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_backslash_newline/dagre/sketch.exp.svg
@ -121,7 +121,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-3081693699-font-regular";
  font-size: 16px;
@ -829,7 +828,7 @@
 .d2-3081693699 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWFya2Rvd24="><g class="shape" ><rect x="10.000000" y="20.000000" width="519.000000" height="108.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="269.500000" y="7.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">markdown</text></g><g class="bWFya2Rvd24ubWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="40.000000" y="50.000000" width="459" height="48"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br />
+</style><g class="bWFya2Rvd24="><g class="shape" ><rect x="10.000000" y="20.000000" width="519.000000" height="108.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="269.500000" y="7.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">markdown</text></g><g class="bWFya2Rvd24ubWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="40.000000" y="50.000000" width="459" height="48"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br />
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 </div></foreignObject></g></g><mask id="d2-3081693699" maskUnits="userSpaceOnUse" x="9" y="-21" width="521" height="150">
 <rect x="9" y="-21" width="521" height="150" fill="white"></rect>
--- a/e2etests/testdata/stable/md_backslash_newline/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_backslash_newline/elk/sketch.exp.svg
@ -121,7 +121,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-4149945950-font-regular";
  font-size: 16px;
@ -829,7 +828,7 @@
 .d2-4149945950 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWFya2Rvd24="><g class="shape" ><rect x="12.000000" y="12.000000" width="559.000000" height="148.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="291.500000" y="45.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">markdown</text></g><g class="bWFya2Rvd24ubWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="62.000000" y="62.000000" width="459" height="48"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br />
+</style><g class="bWFya2Rvd24="><g class="shape" ><rect x="12.000000" y="12.000000" width="559.000000" height="148.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="291.500000" y="45.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">markdown</text></g><g class="bWFya2Rvd24ubWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="62.000000" y="62.000000" width="459" height="48"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br />
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 </div></foreignObject></g></g><mask id="d2-4149945950" maskUnits="userSpaceOnUse" x="11" y="11" width="561" height="150">
 <rect x="11" y="11" width="561" height="150" fill="white"></rect>
--- a/e2etests/testdata/stable/md_code_block_fenced/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_block_fenced/dagre/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-1518250751-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-1518250751 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="196" height="111"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><pre><code>{
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="196" height="111"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><pre><code>{
 	fenced: &quot;block&quot;,
 	of: &quot;json&quot;,
 }
--- a/e2etests/testdata/stable/md_code_block_fenced/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_block_fenced/elk/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-3638167430-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-3638167430 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="196" height="111"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><pre><code>{
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="196" height="111"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><pre><code>{
 	fenced: &quot;block&quot;,
 	of: &quot;json&quot;,
 }
--- a/e2etests/testdata/stable/md_code_block_indented/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_block_indented/dagre/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-1952230391-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-1952230391 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="212" height="151"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>a line of text and an</p>
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="212" height="151"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>a line of text and an</p>
 <pre><code>{
 	indented: &quot;block&quot;,
 	of: &quot;json&quot;,
--- a/e2etests/testdata/stable/md_code_block_indented/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_block_indented/elk/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-538047421-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-538047421 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="212" height="151"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>a line of text and an</p>
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="212" height="151"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>a line of text and an</p>
 <pre><code>{
 	indented: &quot;block&quot;,
 	of: &quot;json&quot;,
--- a/e2etests/testdata/stable/md_code_inline/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_inline/dagre/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-1339768961-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-1339768961 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="4.000000" y="166.000000" width="46" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p><code>code</code></p>
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="4.000000" y="166.000000" width="46" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p><code>code</code></p>
 </div></foreignObject></g></g><g class="YQ=="><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="Yg=="><g class="shape" ><rect x="0.000000" y="290.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="328.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g class="KGEgLSZndDsgbWQpWzBd"><marker id="mk-d2-1339768961-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 26.500000 68.000000 C 26.500000 106.000000 26.500000 126.000000 26.500000 162.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-1339768961-3488378134)" mask="url(#d2-1339768961)" /></g><g class="KG1kIC0mZ3Q7IGIpWzBd"><path d="M 26.500000 192.000000 C 26.500000 230.000000 26.500000 250.000000 26.500000 286.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-1339768961-3488378134)" mask="url(#d2-1339768961)" /></g><mask id="d2-1339768961" maskUnits="userSpaceOnUse" x="-1" y="-1" width="55" height="358">
 <rect x="-1" y="-1" width="55" height="358" fill="white"></rect>
 <rect x="4.000000" y="166.000000" width="46" height="24" fill="rgba(0,0,0,0.75)"></rect>
--- a/e2etests/testdata/stable/md_code_inline/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_inline/elk/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-3881944313-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-3881944313 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="15.000000" y="148.000000" width="46" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p><code>code</code></p>
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="15.000000" y="148.000000" width="46" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p><code>code</code></p>
 </div></foreignObject></g></g><g class="YQ=="><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="50.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g class="Yg=="><g class="shape" ><rect x="12.000000" y="242.000000" width="53.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="280.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g class="KGEgLSZndDsgbWQpWzBd"><marker id="mk-d2-3881944313-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 38.500000 80.000000 L 38.500000 144.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3881944313-3488378134)" mask="url(#d2-3881944313)" /></g><g class="KG1kIC0mZ3Q7IGIpWzBd"><path d="M 38.500000 174.000000 L 38.500000 238.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3881944313-3488378134)" mask="url(#d2-3881944313)" /></g><mask id="d2-3881944313" maskUnits="userSpaceOnUse" x="11" y="11" width="55" height="298">
 <rect x="11" y="11" width="55" height="298" fill="white"></rect>
 <rect x="15.000000" y="148.000000" width="46" height="24" fill="rgba(0,0,0,0.75)"></rect>
--- a/e2etests/testdata/stable/md_fontsize_10/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_fontsize_10/dagre/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-2196724626-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-2196724626 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="aGV5"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="332" height="161"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="font-size:10px;color:#0A0F25"><h1>Every frustum longs to be a cone</h1>
+</style><g class="aGV5"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="332" height="161"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1" style="font-size:10px"><h1>Every frustum longs to be a cone</h1>
 <ul>
 <li>A continuing flow of paper is sufficient to continue the flow of paper</li>
 <li>Please remain calm, it's no use both of us being hysterical at the same time</li>
--- a/e2etests/testdata/stable/md_fontsize_10/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_fontsize_10/elk/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-632982403-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-632982403 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="aGV5"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="332" height="161"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="font-size:10px;color:#0A0F25"><h1>Every frustum longs to be a cone</h1>
+</style><g class="aGV5"><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="332" height="161"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1" style="font-size:10px"><h1>Every frustum longs to be a cone</h1>
 <ul>
 <li>A continuing flow of paper is sufficient to continue the flow of paper</li>
 <li>Please remain calm, it's no use both of us being hysterical at the same time</li>
--- a/e2etests/testdata/stable/md_mixed/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_mixed/dagre/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-2743272479-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-2743272479 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="ZXhhbXBsZQ=="><g class="shape" ><rect x="10.000000" y="20.000000" width="159.000000" height="84.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="89.500000" y="7.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">example</text></g><g class="ZXhhbXBsZS5leHBsYW5hdGlvbg=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="40.000000" y="50.000000" width="99" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p><em>one</em> <strong>two</strong> three!</p>
+</style><g class="ZXhhbXBsZQ=="><g class="shape" ><rect x="10.000000" y="20.000000" width="159.000000" height="84.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="89.500000" y="7.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">example</text></g><g class="ZXhhbXBsZS5leHBsYW5hdGlvbg=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="40.000000" y="50.000000" width="99" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p><em>one</em> <strong>two</strong> three!</p>
 </div></foreignObject></g></g><mask id="d2-2743272479" maskUnits="userSpaceOnUse" x="9" y="-21" width="161" height="126">
 <rect x="9" y="-21" width="161" height="126" fill="white"></rect>
 <rect x="40.000000" y="-21.000000" width="99" height="36" fill="rgba(0,0,0,0.75)"></rect>
--- a/e2etests/testdata/stable/md_mixed/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_mixed/elk/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-3779428285-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-3779428285 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="ZXhhbXBsZQ=="><g class="shape" ><rect x="12.000000" y="12.000000" width="199.000000" height="124.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="111.500000" y="45.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">example</text></g><g class="ZXhhbXBsZS5leHBsYW5hdGlvbg=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="62.000000" y="62.000000" width="99" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p><em>one</em> <strong>two</strong> three!</p>
+</style><g class="ZXhhbXBsZQ=="><g class="shape" ><rect x="12.000000" y="12.000000" width="199.000000" height="124.000000" stroke="#0D32B2" fill="#E3E9FD" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="111.500000" y="45.000000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:28px">example</text></g><g class="ZXhhbXBsZS5leHBsYW5hdGlvbg=="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="62.000000" y="62.000000" width="99" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p><em>one</em> <strong>two</strong> three!</p>
 </div></foreignObject></g></g><mask id="d2-3779428285" maskUnits="userSpaceOnUse" x="11" y="11" width="201" height="126">
 <rect x="11" y="11" width="201" height="126" fill="white"></rect>
 <rect x="62.000000" y="17.000000" width="99" height="36" fill="rgba(0,0,0,0.75)"></rect>
--- a/e2etests/testdata/stable/near_keys_for_container/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/near_keys_for_container/dagre/sketch.exp.svg
@ -121,7 +121,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-968008625-font-regular";
  font-size: 16px;
@ -829,7 +828,7 @@
 .d2-968008625 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="dGl0bGU="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="-313.000000" y="-71.000000" width="626" height="51"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h1>Service-Cluster Provisioning (&quot;Outside view&quot;)</h1>
+</style><g class="dGl0bGU="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="-313.000000" y="-71.000000" width="626" height="51"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h1>Service-Cluster Provisioning (&quot;Outside view&quot;)</h1>
 </div></foreignObject></g></g><mask id="d2-968008625" maskUnits="userSpaceOnUse" x="-314" y="-72" width="628" height="53">
 <rect x="-314" y="-72" width="628" height="53" fill="white"></rect>
 <rect x="-313.000000" y="-71.000000" width="626" height="51" fill="rgba(0,0,0,0.75)"></rect>
--- a/e2etests/testdata/stable/near_keys_for_container/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/near_keys_for_container/elk/sketch.exp.svg
@ -121,7 +121,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-968008625-font-regular";
  font-size: 16px;
@ -829,7 +828,7 @@
 .d2-968008625 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="dGl0bGU="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="-313.000000" y="-71.000000" width="626" height="51"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h1>Service-Cluster Provisioning (&quot;Outside view&quot;)</h1>
+</style><g class="dGl0bGU="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="-313.000000" y="-71.000000" width="626" height="51"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h1>Service-Cluster Provisioning (&quot;Outside view&quot;)</h1>
 </div></foreignObject></g></g><mask id="d2-968008625" maskUnits="userSpaceOnUse" x="-314" y="-72" width="628" height="53">
 <rect x="-314" y="-72" width="628" height="53" fill="white"></rect>
 <rect x="-313.000000" y="-71.000000" width="626" height="51" fill="rgba(0,0,0,0.75)"></rect>
--- a/e2etests/testdata/stable/p/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/p/dagre/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-3128274021-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-3128274021 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="1857" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>A paragraph is simply one or more consecutive lines of text, separated
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="1857" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>A paragraph is simply one or more consecutive lines of text, separated
 by one or more blank lines. (A blank line is any line that looks like a
 blank line -- a line containing nothing but spaces or tabs is considered
 blank.) Normal paragraphs should not be indented with spaces or tabs.</p>
--- a/e2etests/testdata/stable/p/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/p/elk/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-979712518-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-979712518 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="1857" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>A paragraph is simply one or more consecutive lines of text, separated
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="1857" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>A paragraph is simply one or more consecutive lines of text, separated
 by one or more blank lines. (A blank line is any line that looks like a
 blank line -- a line containing nothing but spaces or tabs is considered
 blank.) Normal paragraphs should not be indented with spaces or tabs.</p>
--- a/e2etests/testdata/stable/pre/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/pre/dagre/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-3660705295-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-3660705295 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="602" height="170"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>Here is an example of AppleScript:</p>
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="0.000000" y="166.000000" width="602" height="170"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>Here is an example of AppleScript:</p>
 <pre><code>tell application &quot;Foo&quot;
    beep
 end tell
--- a/e2etests/testdata/stable/pre/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/pre/elk/sketch.exp.svg
@ -135,7 +135,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-818404908-font-regular";
  font-size: 16px;
@ -843,7 +842,7 @@
 .d2-818404908 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="602" height="170"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><p>Here is an example of AppleScript:</p>
+</style><g class="bWQ="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="12.000000" y="148.000000" width="602" height="170"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><p>Here is an example of AppleScript:</p>
 <pre><code>tell application &quot;Foo&quot;
    beep
 end tell
--- a/e2etests/testdata/stable/teleport_grid/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/teleport_grid/dagre/sketch.exp.svg
--- a/e2etests/testdata/stable/teleport_grid/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/teleport_grid/elk/sketch.exp.svg
--- a/e2etests/testdata/themes/dark_terrastruct_flagship/dagre/sketch.exp.svg
+++ b/e2etests/testdata/themes/dark_terrastruct_flagship/dagre/sketch.exp.svg
--- a/e2etests/testdata/themes/dark_terrastruct_flagship/elk/sketch.exp.svg
+++ b/e2etests/testdata/themes/dark_terrastruct_flagship/elk/sketch.exp.svg
--- a/e2etests/testdata/themes/terminal/dagre/sketch.exp.svg
+++ b/e2etests/testdata/themes/terminal/dagre/sketch.exp.svg
--- a/e2etests/testdata/themes/terminal/elk/sketch.exp.svg
+++ b/e2etests/testdata/themes/terminal/elk/sketch.exp.svg
--- a/e2etests/testdata/todo/dagre_container_md_label_panic/dagre/sketch.exp.svg
+++ b/e2etests/testdata/todo/dagre_container_md_label_panic/dagre/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-3098341505-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-3098341505 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="T0VNIEZhY3Rvcnk="><g class="shape" ><rect x="77.000000" y="0.000000" width="135.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="144.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OEM Factory</text></g><g class="Y29tcGFueSBXYXJlaG91c2U="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="87.000000" y="423.000000" width="180" height="150"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h3>company Warehouse</h3>
+</style><g class="T0VNIEZhY3Rvcnk="><g class="shape" ><rect x="77.000000" y="0.000000" width="135.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="144.500000" y="38.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OEM Factory</text></g><g class="Y29tcGFueSBXYXJlaG91c2U="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="87.000000" y="423.000000" width="180" height="150"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h3>company Warehouse</h3>
 <ul>
 <li>Asset Tagging</li>
 <li>Inventory</li>
--- a/e2etests/testdata/todo/dagre_container_md_label_panic/elk/sketch.exp.svg
+++ b/e2etests/testdata/todo/dagre_container_md_label_panic/elk/sketch.exp.svg
@ -128,7 +128,6 @@
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: var(--color-fg-default);
  background-color: transparent; /* we don't want to define the background color */
  font-family: "d2-1471202586-font-regular";
  font-size: 16px;
@ -836,7 +835,7 @@
 .d2-1471202586 .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
 }
-</style><g class="T0VNIEZhY3Rvcnk="><g class="shape" ><rect x="115.000000" y="12.000000" width="135.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="182.500000" y="50.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OEM Factory</text></g><g class="Y29tcGFueSBXYXJlaG91c2U="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="93.000000" y="375.000000" width="180" height="150"><div xmlns="http://www.w3.org/1999/xhtml" class="md" style="color:#0A0F25"><h3>company Warehouse</h3>
+</style><g class="T0VNIEZhY3Rvcnk="><g class="shape" ><rect x="115.000000" y="12.000000" width="135.000000" height="66.000000" stroke="#0D32B2" fill="#F7F8FE" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="182.500000" y="50.500000" fill="#0A0F25" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">OEM Factory</text></g><g class="Y29tcGFueSBXYXJlaG91c2U="><g class="shape" ></g><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="93.000000" y="375.000000" width="180" height="150"><div xmlns="http://www.w3.org/1999/xhtml" class="md color-N1"><h3>company Warehouse</h3>
 <ul>
 <li>Asset Tagging</li>
 <li>Inventory</li>
--- a/e2etests/testdata/todo/shape_set_width_height/dagre/sketch.exp.svg
+++ b/e2etests/testdata/todo/shape_set_width_height/dagre/sketch.exp.svg
--- a/Show more
+++ b/Show more