luciano/d2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

customize theme colors in vars-config

Browse source
This commit is contained in:
Alexander Wang 2023-12-13 12:17:22 -08:00
parent 6aaf795ea1
commit 27ea8314e9
No known key found for this signature in database
GPG key ID: D89FA31966BDBECE
15 changed files with 3886 additions and 194 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ci/release/changelogs/next.md
View file

@ -1,5 +1,6 @@
#### Features 🚀
- Themes can be customized via `d2-config` vars. [#1777](https://github.com/terrastruct/d2/pull/1777)
- Icons can be added for special objects (sql_table, class, code, markdown, latex). [#1774](https://github.com/terrastruct/d2/pull/1774)
#### Improvements 🧹

79
d2compiler/compile.go
View file

@ -1375,5 +1375,84 @@ func compileConfig(ir *d2ir.Map) *d2target.Config {
config.LayoutEngine = go2.Pointer(f.Primary().Value.ScalarString())
}
f = configMap.GetField("theme-overrides")
if f != nil {
config.ThemeOverrides = compileThemeOverrides(f.Map())
}
f = configMap.GetField("dark-theme-overrides")
if f != nil {
config.DarkThemeOverrides = compileThemeOverrides(f.Map())
}
return config
}
func compileThemeOverrides(m *d2ir.Map) *d2target.ThemeOverrides {
if m == nil {
return nil
}
themeOverrides := d2target.ThemeOverrides{}
if m.GetField("N1") != nil {
themeOverrides.N1 = go2.Pointer(m.GetField("N1").Primary().Value.ScalarString())
}
if m.GetField("B1") != nil {
themeOverrides.B1 = go2.Pointer(m.GetField("B1").Primary().Value.ScalarString())
}
if m.GetField("B2") != nil {
themeOverrides.B2 = go2.Pointer(m.GetField("B2").Primary().Value.ScalarString())
}
if m.GetField("B3") != nil {
themeOverrides.B3 = go2.Pointer(m.GetField("B3").Primary().Value.ScalarString())
}
if m.GetField("B4") != nil {
themeOverrides.B4 = go2.Pointer(m.GetField("B4").Primary().Value.ScalarString())
}
if m.GetField("B5") != nil {
themeOverrides.B5 = go2.Pointer(m.GetField("B5").Primary().Value.ScalarString())
}
if m.GetField("B6") != nil {
themeOverrides.B6 = go2.Pointer(m.GetField("B6").Primary().Value.ScalarString())
}
if m.GetField("AA2") != nil {
themeOverrides.AA2 = go2.Pointer(m.GetField("AA2").Primary().Value.ScalarString())
}
if m.GetField("AA4") != nil {
themeOverrides.AA4 = go2.Pointer(m.GetField("AA4").Primary().Value.ScalarString())
}
if m.GetField("AA5") != nil {
themeOverrides.AA5 = go2.Pointer(m.GetField("AA5").Primary().Value.ScalarString())
}
if m.GetField("AB4") != nil {
themeOverrides.AB4 = go2.Pointer(m.GetField("AB4").Primary().Value.ScalarString())
}
if m.GetField("AB5") != nil {
themeOverrides.AB5 = go2.Pointer(m.GetField("AB5").Primary().Value.ScalarString())
}
if m.GetField("N1") != nil {
themeOverrides.N1 = go2.Pointer(m.GetField("N1").Primary().Value.ScalarString())
}
if m.GetField("N2") != nil {
themeOverrides.N2 = go2.Pointer(m.GetField("N2").Primary().Value.ScalarString())
}
if m.GetField("N3") != nil {
themeOverrides.N3 = go2.Pointer(m.GetField("N3").Primary().Value.ScalarString())
}
if m.GetField("N4") != nil {
themeOverrides.N4 = go2.Pointer(m.GetField("N4").Primary().Value.ScalarString())
}
if m.GetField("N5") != nil {
themeOverrides.N5 = go2.Pointer(m.GetField("N5").Primary().Value.ScalarString())
}
if m.GetField("N6") != nil {
themeOverrides.N6 = go2.Pointer(m.GetField("N6").Primary().Value.ScalarString())
}
if m.GetField("N7") != nil {
themeOverrides.N7 = go2.Pointer(m.GetField("N7").Primary().Value.ScalarString())
}
if themeOverrides != (d2target.ThemeOverrides{}) {
return &themeOverrides
}
return nil
}

4
d2ir/compile.go
View file

@ -169,7 +169,7 @@ func (c *compiler) validateConfigs(configs *Field) {
for _, f := range configs.Map().Fields {
var val string
if f.Primary() == nil {
if f.Name != "theme-colors" {
if f.Name != "theme-overrides" && f.Name != "dark-theme-overrides" {
c.errorf(f.LastRef().AST(), `"%s" needs a value`, f.Name)
continue
}
@ -184,7 +184,7 @@ func (c *compiler) validateConfigs(configs *Field) {
c.errorf(f.LastRef().AST(), `expected a boolean for "%s", got "%s"`, f.Name, val)
continue
}
case "theme-colors":
case "theme-overrides", "dark-theme-overrides":
if f.Map() == nil {
c.errorf(f.LastRef().AST(), `"%s" needs a map`, f.Name)
continue

2
d2lib/d2.go
View file

@ -188,6 +188,8 @@ func applyConfigs(config *d2target.Config, compileOpts *CompileOptions, renderOp
if renderOpts.Center == nil {
renderOpts.Center = config.Center
}
renderOpts.ThemeOverrides = config.ThemeOverrides
renderOpts.DarkThemeOverrides = config.DarkThemeOverrides
}
func applyDefaults(compileOpts *CompileOptions, renderOpts *d2svg.RenderOpts) {

2
d2renderers/d2animate/d2animate.go
View file

@ -76,7 +76,7 @@ func Wrap(rootDiagram *d2target.Diagram, svgs [][]byte, renderOpts d2svg.RenderO
d2svg.EmbedFonts(buf, diagramHash, svgsStr, rootDiagram.FontFamily, rootDiagram.GetNestedCorpus())
themeStylesheet, err := d2svg.ThemeCSS(diagramHash, renderOpts.ThemeID, renderOpts.DarkThemeID)
themeStylesheet, err := d2svg.ThemeCSS(diagramHash, renderOpts.ThemeID, renderOpts.DarkThemeID, renderOpts.ThemeOverrides, renderOpts.DarkThemeOverrides)
if err != nil {
return nil, err
}

25
d2renderers/d2svg/d2svg.go
View file

@ -69,12 +69,14 @@ var grain string
var paper string
type RenderOpts struct {
Pad *int64
Sketch *bool
Center *bool
ThemeID *int64
DarkThemeID *int64
Font string
Pad *int64
Sketch *bool
Center *bool
ThemeID *int64
DarkThemeID *int64
ThemeOverrides *d2target.ThemeOverrides
DarkThemeOverrides *d2target.ThemeOverrides
Font string
// the svg will be scaled by this factor, if unset the svg will fit to screen
Scale *float64
@ -1854,7 +1856,7 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
upperBuf := &bytes.Buffer{}
if opts.MasterID == "" {
EmbedFonts(upperBuf, diagramHash, buf.String(), diagram.FontFamily, diagram.GetCorpus()) // EmbedFonts *must* run before `d2sketch.DefineFillPatterns`, but after all elements are appended to `buf`
themeStylesheet, err := ThemeCSS(diagramHash, &themeID, darkThemeID)
themeStylesheet, err := ThemeCSS(diagramHash, &themeID, darkThemeID, opts.ThemeOverrides, opts.DarkThemeOverrides)
if err != nil {
return nil, err
}
@ -2016,17 +2018,17 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
}
// TODO include only colors that are being used to reduce size
func ThemeCSS(diagramHash string, themeID *int64, darkThemeID *int64) (stylesheet string, err error) {
func ThemeCSS(diagramHash string, themeID *int64, darkThemeID *int64, overrides, darkOverrides *d2target.ThemeOverrides) (stylesheet string, err error) {
if themeID == nil {
themeID = &d2themescatalog.NeutralDefault.ID
}
out, err := singleThemeRulesets(diagramHash, *themeID)
out, err := singleThemeRulesets(diagramHash, *themeID, overrides)
if err != nil {
return "", err
}
if darkThemeID != nil {
darkOut, err := singleThemeRulesets(diagramHash, *darkThemeID)
darkOut, err := singleThemeRulesets(diagramHash, *darkThemeID, darkOverrides)
if err != nil {
return "", err
}
@ -2036,9 +2038,10 @@ func ThemeCSS(diagramHash string, themeID *int64, darkThemeID *int64) (styleshee
return out, nil
}
func singleThemeRulesets(diagramHash string, themeID int64) (rulesets string, err error) {
func singleThemeRulesets(diagramHash string, themeID int64, overrides *d2target.ThemeOverrides) (rulesets string, err error) {
out := ""
theme := d2themescatalog.Find(themeID)
theme.ApplyOverrides(overrides)
// Global theme colors
for _, property := range []string{"fill", "stroke", "background-color", "color"} {

35
d2target/d2target.go
View file

@ -39,18 +39,35 @@ const (
var BorderOffset = geo.NewVector(5, 5)
type Config struct {
Sketch *bool `json:"sketch"`
ThemeID *int64 `json:"themeID"`
DarkThemeID *int64 `json:"darkThemeID"`
Pad *int64 `json:"pad"`
Center *bool `json:"center"`
LayoutEngine *string `json:"layoutEngine"`
ThemeOverrides *ThemeOverrides `json:"themeOverrides"`
Sketch *bool `json:"sketch"`
ThemeID *int64 `json:"themeID"`
DarkThemeID *int64 `json:"darkThemeID"`
Pad *int64 `json:"pad"`
Center *bool `json:"center"`
LayoutEngine *string `json:"layoutEngine"`
ThemeOverrides *ThemeOverrides `json:"themeOverrides,omitempty"`
DarkThemeOverrides *ThemeOverrides `json:"darkThemeOverrides,omitempty"`
}
type ThemeOverrides struct {
N1 *string `json:"n1"`
// TODO
N1 *string `json:"n1"`
N2 *string `json:"n2"`
N3 *string `json:"n3"`
N4 *string `json:"n4"`
N5 *string `json:"n5"`
N6 *string `json:"n6"`
N7 *string `json:"n7"`
B1 *string `json:"b1"`
B2 *string `json:"b2"`
B3 *string `json:"b3"`
B4 *string `json:"b4"`
B5 *string `json:"b5"`
B6 *string `json:"b6"`
AA2 *string `json:"aa2"`
AA4 *string `json:"aa4"`
AA5 *string `json:"aa5"`
AB4 *string `json:"ab4"`
AB5 *string `json:"ab5"`
}
type Diagram struct {

69
d2themes/d2themes.go
View file

@ -2,7 +2,10 @@
// Color codes: darkest (N1) -> lightest (N7)
package d2themes
import "oss.terrastruct.com/d2/lib/color"
import (
"oss.terrastruct.com/d2/d2target"
"oss.terrastruct.com/d2/lib/color"
)
type Theme struct {
ID int64 `json:"id"`
@ -26,6 +29,70 @@ func (t *Theme) IsDark() bool {
return t.ID >= 200 && t.ID < 300
}
func (t *Theme) ApplyOverrides(overrides *d2target.ThemeOverrides) {
if overrides == nil {
return
}
if overrides.B1 != nil {
t.Colors.B1 = *overrides.B1
}
if overrides.B2 != nil {
t.Colors.B2 = *overrides.B2
}
if overrides.B3 != nil {
t.Colors.B3 = *overrides.B3
}
if overrides.B4 != nil {
t.Colors.B4 = *overrides.B4
}
if overrides.B5 != nil {
t.Colors.B5 = *overrides.B5
}
if overrides.B5 != nil {
t.Colors.B5 = *overrides.B5
}
if overrides.B6 != nil {
t.Colors.B6 = *overrides.B6
}
if overrides.AA2 != nil {
t.Colors.AA2 = *overrides.AA2
}
if overrides.AA4 != nil {
t.Colors.AA4 = *overrides.AA4
}
if overrides.AA5 != nil {
t.Colors.AA5 = *overrides.AA5
}
if overrides.AB4 != nil {
t.Colors.AB4 = *overrides.AB4
}
if overrides.AB5 != nil {
t.Colors.AB5 = *overrides.AB5
}
if overrides.N1 != nil {
t.Colors.Neutrals.N1 = *overrides.N1
}
if overrides.N2 != nil {
t.Colors.Neutrals.N2 = *overrides.N2
}
if overrides.N3 != nil {
t.Colors.Neutrals.N3 = *overrides.N3
}
if overrides.N4 != nil {
t.Colors.Neutrals.N4 = *overrides.N4
}
if overrides.N5 != nil {
t.Colors.Neutrals.N5 = *overrides.N5
}
if overrides.N6 != nil {
t.Colors.Neutrals.N6 = *overrides.N6
}
if overrides.N7 != nil {
t.Colors.Neutrals.N7 = *overrides.N7
}
}
type Neutral struct {
N1 string `json:"n1"`
N2 string `json:"n2"`

180
e2etests-cli/testdata/TestCLI_E2E/vars-animation.exp.svg vendored
View file

@ -1,16 +1,16 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.2-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 606 665"><svg id="d2-svg" width="606" height="665" viewBox="-246 -166 606 665"><style type="text/css"><![CDATA[
.d2-2843943542 .text-mono {
font-family: "d2-2843943542-font-mono";
.d2-2597568289 .text-mono {
font-family: "d2-2597568289-font-mono";
}
@font-face {
font-family: d2-2843943542-font-mono;
font-family: d2-2597568289-font-mono;
src: url("data:application/font-woff;base64,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");
}
.d2-2843943542 .text-mono-bold {
font-family: "d2-2843943542-font-mono-bold";
.d2-2597568289 .text-mono-bold {
font-family: "d2-2597568289-font-mono-bold";
}
@font-face {
font-family: d2-2843943542-font-mono-bold;
font-family: d2-2597568289-font-mono-bold;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
@ -25,92 +25,92 @@
opacity: 0.5;
}
.d2-2843943542 .fill-N1{fill:#000410;}
.d2-2843943542 .fill-N2{fill:#0000B8;}
.d2-2843943542 .fill-N3{fill:#9499AB;}
.d2-2843943542 .fill-N4{fill:#CFD2DD;}
.d2-2843943542 .fill-N5{fill:#C3DEF3;}
.d2-2843943542 .fill-N6{fill:#EEF1F8;}
.d2-2843943542 .fill-N7{fill:#FFFFFF;}
.d2-2843943542 .fill-B1{fill:#000410;}
.d2-2843943542 .fill-B2{fill:#0000E4;}
.d2-2843943542 .fill-B3{fill:#5AA4DC;}
.d2-2843943542 .fill-B4{fill:#E7E9EE;}
.d2-2843943542 .fill-B5{fill:#F5F6F9;}
.d2-2843943542 .fill-B6{fill:#FFFFFF;}
.d2-2843943542 .fill-AA2{fill:#008566;}
.d2-2843943542 .fill-AA4{fill:#45BBA5;}
.d2-2843943542 .fill-AA5{fill:#7ACCBD;}
.d2-2843943542 .fill-AB4{fill:#F1C759;}
.d2-2843943542 .fill-AB5{fill:#F9E088;}
.d2-2843943542 .stroke-N1{stroke:#000410;}
.d2-2843943542 .stroke-N2{stroke:#0000B8;}
.d2-2843943542 .stroke-N3{stroke:#9499AB;}
.d2-2843943542 .stroke-N4{stroke:#CFD2DD;}
.d2-2843943542 .stroke-N5{stroke:#C3DEF3;}
.d2-2843943542 .stroke-N6{stroke:#EEF1F8;}
.d2-2843943542 .stroke-N7{stroke:#FFFFFF;}
.d2-2843943542 .stroke-B1{stroke:#000410;}
.d2-2843943542 .stroke-B2{stroke:#0000E4;}
.d2-2843943542 .stroke-B3{stroke:#5AA4DC;}
.d2-2843943542 .stroke-B4{stroke:#E7E9EE;}
.d2-2843943542 .stroke-B5{stroke:#F5F6F9;}
.d2-2843943542 .stroke-B6{stroke:#FFFFFF;}
.d2-2843943542 .stroke-AA2{stroke:#008566;}
.d2-2843943542 .stroke-AA4{stroke:#45BBA5;}
.d2-2843943542 .stroke-AA5{stroke:#7ACCBD;}
.d2-2843943542 .stroke-AB4{stroke:#F1C759;}
.d2-2843943542 .stroke-AB5{stroke:#F9E088;}
.d2-2843943542 .background-color-N1{background-color:#000410;}
.d2-2843943542 .background-color-N2{background-color:#0000B8;}
.d2-2843943542 .background-color-N3{background-color:#9499AB;}
.d2-2843943542 .background-color-N4{background-color:#CFD2DD;}
.d2-2843943542 .background-color-N5{background-color:#C3DEF3;}
.d2-2843943542 .background-color-N6{background-color:#EEF1F8;}
.d2-2843943542 .background-color-N7{background-color:#FFFFFF;}
.d2-2843943542 .background-color-B1{background-color:#000410;}
.d2-2843943542 .background-color-B2{background-color:#0000E4;}
.d2-2843943542 .background-color-B3{background-color:#5AA4DC;}
.d2-2843943542 .background-color-B4{background-color:#E7E9EE;}
.d2-2843943542 .background-color-B5{background-color:#F5F6F9;}
.d2-2843943542 .background-color-B6{background-color:#FFFFFF;}
.d2-2843943542 .background-color-AA2{background-color:#008566;}
.d2-2843943542 .background-color-AA4{background-color:#45BBA5;}
.d2-2843943542 .background-color-AA5{background-color:#7ACCBD;}
.d2-2843943542 .background-color-AB4{background-color:#F1C759;}
.d2-2843943542 .background-color-AB5{background-color:#F9E088;}
.d2-2843943542 .color-N1{color:#000410;}
.d2-2843943542 .color-N2{color:#0000B8;}
.d2-2843943542 .color-N3{color:#9499AB;}
.d2-2843943542 .color-N4{color:#CFD2DD;}
.d2-2843943542 .color-N5{color:#C3DEF3;}
.d2-2843943542 .color-N6{color:#EEF1F8;}
.d2-2843943542 .color-N7{color:#FFFFFF;}
.d2-2843943542 .color-B1{color:#000410;}
.d2-2843943542 .color-B2{color:#0000E4;}
.d2-2843943542 .color-B3{color:#5AA4DC;}
.d2-2843943542 .color-B4{color:#E7E9EE;}
.d2-2843943542 .color-B5{color:#F5F6F9;}
.d2-2843943542 .color-B6{color:#FFFFFF;}
.d2-2843943542 .color-AA2{color:#008566;}
.d2-2843943542 .color-AA4{color:#45BBA5;}
.d2-2843943542 .color-AA5{color:#7ACCBD;}
.d2-2843943542 .color-AB4{color:#F1C759;}
.d2-2843943542 .color-AB5{color:#F9E088;}.appendix text.text{fill:#000410}.md{--color-fg-default:#000410;--color-fg-muted:#0000B8;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#000410;--color-border-muted:#0000E4;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0000E4;--color-accent-emphasis:#0000E4;--color-attention-subtle:#0000B8;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA5{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AB4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AB5{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><style type="text/css">.md em,
.d2-2597568289 .fill-N1{fill:#000410;}
.d2-2597568289 .fill-N2{fill:#0000B8;}
.d2-2597568289 .fill-N3{fill:#9499AB;}
.d2-2597568289 .fill-N4{fill:#CFD2DD;}
.d2-2597568289 .fill-N5{fill:#C3DEF3;}
.d2-2597568289 .fill-N6{fill:#EEF1F8;}
.d2-2597568289 .fill-N7{fill:#FFFFFF;}
.d2-2597568289 .fill-B1{fill:#000410;}
.d2-2597568289 .fill-B2{fill:#0000E4;}
.d2-2597568289 .fill-B3{fill:#5AA4DC;}
.d2-2597568289 .fill-B4{fill:#E7E9EE;}
.d2-2597568289 .fill-B5{fill:#F5F6F9;}
.d2-2597568289 .fill-B6{fill:#FFFFFF;}
.d2-2597568289 .fill-AA2{fill:#008566;}
.d2-2597568289 .fill-AA4{fill:#45BBA5;}
.d2-2597568289 .fill-AA5{fill:#7ACCBD;}
.d2-2597568289 .fill-AB4{fill:#F1C759;}
.d2-2597568289 .fill-AB5{fill:#F9E088;}
.d2-2597568289 .stroke-N1{stroke:#000410;}
.d2-2597568289 .stroke-N2{stroke:#0000B8;}
.d2-2597568289 .stroke-N3{stroke:#9499AB;}
.d2-2597568289 .stroke-N4{stroke:#CFD2DD;}
.d2-2597568289 .stroke-N5{stroke:#C3DEF3;}
.d2-2597568289 .stroke-N6{stroke:#EEF1F8;}
.d2-2597568289 .stroke-N7{stroke:#FFFFFF;}
.d2-2597568289 .stroke-B1{stroke:#000410;}
.d2-2597568289 .stroke-B2{stroke:#0000E4;}
.d2-2597568289 .stroke-B3{stroke:#5AA4DC;}
.d2-2597568289 .stroke-B4{stroke:#E7E9EE;}
.d2-2597568289 .stroke-B5{stroke:#F5F6F9;}
.d2-2597568289 .stroke-B6{stroke:#FFFFFF;}
.d2-2597568289 .stroke-AA2{stroke:#008566;}
.d2-2597568289 .stroke-AA4{stroke:#45BBA5;}
.d2-2597568289 .stroke-AA5{stroke:#7ACCBD;}
.d2-2597568289 .stroke-AB4{stroke:#F1C759;}
.d2-2597568289 .stroke-AB5{stroke:#F9E088;}
.d2-2597568289 .background-color-N1{background-color:#000410;}
.d2-2597568289 .background-color-N2{background-color:#0000B8;}
.d2-2597568289 .background-color-N3{background-color:#9499AB;}
.d2-2597568289 .background-color-N4{background-color:#CFD2DD;}
.d2-2597568289 .background-color-N5{background-color:#C3DEF3;}
.d2-2597568289 .background-color-N6{background-color:#EEF1F8;}
.d2-2597568289 .background-color-N7{background-color:#FFFFFF;}
.d2-2597568289 .background-color-B1{background-color:#000410;}
.d2-2597568289 .background-color-B2{background-color:#0000E4;}
.d2-2597568289 .background-color-B3{background-color:#5AA4DC;}
.d2-2597568289 .background-color-B4{background-color:#E7E9EE;}
.d2-2597568289 .background-color-B5{background-color:#F5F6F9;}
.d2-2597568289 .background-color-B6{background-color:#FFFFFF;}
.d2-2597568289 .background-color-AA2{background-color:#008566;}
.d2-2597568289 .background-color-AA4{background-color:#45BBA5;}
.d2-2597568289 .background-color-AA5{background-color:#7ACCBD;}
.d2-2597568289 .background-color-AB4{background-color:#F1C759;}
.d2-2597568289 .background-color-AB5{background-color:#F9E088;}
.d2-2597568289 .color-N1{color:#000410;}
.d2-2597568289 .color-N2{color:#0000B8;}
.d2-2597568289 .color-N3{color:#9499AB;}
.d2-2597568289 .color-N4{color:#CFD2DD;}
.d2-2597568289 .color-N5{color:#C3DEF3;}
.d2-2597568289 .color-N6{color:#EEF1F8;}
.d2-2597568289 .color-N7{color:#FFFFFF;}
.d2-2597568289 .color-B1{color:#000410;}
.d2-2597568289 .color-B2{color:#0000E4;}
.d2-2597568289 .color-B3{color:#5AA4DC;}
.d2-2597568289 .color-B4{color:#E7E9EE;}
.d2-2597568289 .color-B5{color:#F5F6F9;}
.d2-2597568289 .color-B6{color:#FFFFFF;}
.d2-2597568289 .color-AA2{color:#008566;}
.d2-2597568289 .color-AA4{color:#45BBA5;}
.d2-2597568289 .color-AA5{color:#7ACCBD;}
.d2-2597568289 .color-AB4{color:#F1C759;}
.d2-2597568289 .color-AB5{color:#F9E088;}.appendix text.text{fill:#000410}.md{--color-fg-default:#000410;--color-fg-muted:#0000B8;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#000410;--color-border-muted:#0000E4;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0000E4;--color-accent-emphasis:#0000E4;--color-attention-subtle:#0000B8;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA5{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AB4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AB5{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><style type="text/css">.md em,
.md dfn {
font-family: "d2-2843943542-font-italic";
font-family: "d2-2597568289-font-italic";
}
.md b,
.md strong {
font-family: "d2-2843943542-font-bold";
font-family: "d2-2597568289-font-bold";
}
.md code,
.md kbd,
.md pre,
.md samp {
font-family: "d2-2843943542-font-mono";
font-family: "d2-2597568289-font-mono";
font-size: 1em;
}
@ -126,7 +126,7 @@
margin: 0;
color: var(--color-fg-default);
background-color: transparent; /* we don't want to define the background color */
font-family: "d2-2843943542-font-regular";
font-family: "d2-2597568289-font-regular";
font-size: 16px;
line-height: 1.5;
word-wrap: break-word;
@ -832,7 +832,7 @@
.md .contains-task-list:dir(rtl) .task-list-item-checkbox {
margin: 0 -1.6em 0.25em 0.2em;
}
</style><style type="text/css"><![CDATA[@keyframes d2Transition-d2-2843943542-0 {
</style><style type="text/css"><![CDATA[@keyframes d2Transition-d2-2597568289-0 {
0%, 0.000000% {
opacity: 0;
}
@ -842,7 +842,7 @@
25.000000%, 100% {
opacity: 0;
}
}@keyframes d2Transition-d2-2843943542-1 {
}@keyframes d2Transition-d2-2597568289-1 {
0%, 24.982143% {
opacity: 0;
}
@ -852,7 +852,7 @@
50.000000%, 100% {
opacity: 0;
}
}@keyframes d2Transition-d2-2843943542-2 {
}@keyframes d2Transition-d2-2597568289-2 {
0%, 49.982143% {
opacity: 0;
}
@ -862,26 +862,26 @@
75.000000%, 100% {
opacity: 0;
}
}@keyframes d2Transition-d2-2843943542-3 {
}@keyframes d2Transition-d2-2597568289-3 {
0%, 74.982143% {
opacity: 0;
}
75.000000%, 100.000000% {
opacity: 1;
}
}]]></style><g style="animation: d2Transition-d2-2843943542-0 5600ms infinite" class="d2-2843943542" width="492" height="247" viewBox="-246 -166 492 247"><rect x="-246.000000" y="-166.000000" width="492.000000" height="247.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="&#34;Chicken&#39;s plan&#34;"><g class="shape" ></g><text x="0.000000" y="-30.000000" class="text-mono fill-N1" style="text-anchor:middle;font-size:35px">CHICKEN&#39;S PLAN</text></g><mask id="d2-2843943542" maskUnits="userSpaceOnUse" x="-246" y="-166" width="492" height="247">
}]]></style><g style="animation: d2Transition-d2-2597568289-0 5600ms infinite" class="d2-2597568289" width="492" height="247" viewBox="-246 -166 492 247"><rect x="-246.000000" y="-166.000000" width="492.000000" height="247.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="&#34;Chicken&#39;s plan&#34;"><g class="shape" ></g><text x="0.000000" y="-30.000000" class="text-mono fill-N1" style="text-anchor:middle;font-size:35px">CHICKEN&#39;S PLAN</text></g><mask id="d2-2597568289" maskUnits="userSpaceOnUse" x="-246" y="-166" width="492" height="247">
<rect x="-246" y="-166" width="492" height="247" fill="white"></rect>
<rect x="-145.000000" y="-65.000000" width="290" height="45" fill="rgba(0,0,0,0.75)"></rect>
</mask></g><g style="animation: d2Transition-d2-2843943542-1 5600ms infinite" class="d2-2843943542" width="492" height="333" viewBox="-160 -166 492 333"><rect x="-160.000000" y="-166.000000" width="492.000000" height="333.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="&#34;Chicken&#39;s plan&#34;"><g class="shape" ></g><text x="86.000000" y="-30.000000" class="text-mono fill-N1" style="text-anchor:middle;font-size:35px">CHICKEN&#39;S PLAN</text></g><g id="Approach road"><g class="shape" ><rect x="0.000000" y="0.000000" width="171.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="85.500000" y="38.500000" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">APPROACH ROAD</text></g><mask id="d2-837698653" maskUnits="userSpaceOnUse" x="-160" y="-166" width="492" height="333">
</mask></g><g style="animation: d2Transition-d2-2597568289-1 5600ms infinite" class="d2-2597568289" width="492" height="333" viewBox="-160 -166 492 333"><rect x="-160.000000" y="-166.000000" width="492.000000" height="333.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="&#34;Chicken&#39;s plan&#34;"><g class="shape" ></g><text x="86.000000" y="-30.000000" class="text-mono fill-N1" style="text-anchor:middle;font-size:35px">CHICKEN&#39;S PLAN</text></g><g id="Approach road"><g class="shape" ><rect x="0.000000" y="0.000000" width="171.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="85.500000" y="38.500000" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">APPROACH ROAD</text></g><mask id="d2-837698653" maskUnits="userSpaceOnUse" x="-160" y="-166" width="492" height="333">
<rect x="-160" y="-166" width="492" height="333" fill="white"></rect>
<rect x="-59.000000" y="-65.000000" width="290" height="45" fill="rgba(0,0,0,0.75)"></rect>
<rect x="22.500000" y="22.500000" width="126" height="21" fill="rgba(0,0,0,0.75)"></rect>
</mask></g><g style="animation: d2Transition-d2-2843943542-2 5600ms infinite" class="d2-2843943542" width="492" height="499" viewBox="-160 -166 492 499"><rect x="-160.000000" y="-166.000000" width="492.000000" height="499.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="&#34;Chicken&#39;s plan&#34;"><g class="shape" ></g><text x="86.000000" y="-30.000000" class="text-mono fill-N1" style="text-anchor:middle;font-size:35px">CHICKEN&#39;S PLAN</text></g><g id="Approach road"><g class="shape" ><rect x="0.000000" y="0.000000" width="171.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="85.500000" y="38.500000" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">APPROACH ROAD</text></g><g id="Cross road"><g class="shape" ><rect x="15.000000" y="166.000000" width="142.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="86.000000" y="204.500000" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">CROSS ROAD</text></g><g id="(Approach road -&gt; Cross road)[0]"><marker id="mk-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" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 85.500000 68.000000 C 85.500000 106.000000 85.500000 126.000000 85.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4187960027)" /></g><mask id="d2-4187960027" maskUnits="userSpaceOnUse" x="-160" y="-166" width="492" height="499">
</mask></g><g style="animation: d2Transition-d2-2597568289-2 5600ms infinite" class="d2-2597568289" width="492" height="499" viewBox="-160 -166 492 499"><rect x="-160.000000" y="-166.000000" width="492.000000" height="499.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="&#34;Chicken&#39;s plan&#34;"><g class="shape" ></g><text x="86.000000" y="-30.000000" class="text-mono fill-N1" style="text-anchor:middle;font-size:35px">CHICKEN&#39;S PLAN</text></g><g id="Approach road"><g class="shape" ><rect x="0.000000" y="0.000000" width="171.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="85.500000" y="38.500000" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">APPROACH ROAD</text></g><g id="Cross road"><g class="shape" ><rect x="15.000000" y="166.000000" width="142.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="86.000000" y="204.500000" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">CROSS ROAD</text></g><g id="(Approach road -&gt; Cross road)[0]"><marker id="mk-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" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 85.500000 68.000000 C 85.500000 106.000000 85.500000 126.000000 85.500000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4187960027)" /></g><mask id="d2-4187960027" maskUnits="userSpaceOnUse" x="-160" y="-166" width="492" height="499">
<rect x="-160" y="-166" width="492" height="499" fill="white"></rect>
<rect x="-59.000000" y="-65.000000" width="290" height="45" fill="rgba(0,0,0,0.75)"></rect>
<rect x="22.500000" y="22.500000" width="126" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="37.500000" y="188.500000" width="97" height="21" fill="rgba(0,0,0,0.75)"></rect>
</mask></g><g style="animation: d2Transition-d2-2843943542-3 5600ms infinite" class="d2-2843943542" width="492" height="665" viewBox="-132 -166 492 665"><rect x="-132.000000" y="-166.000000" width="492.000000" height="665.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="&#34;Chicken&#39;s plan&#34;"><g class="shape" ></g><text x="114.000000" y="-30.000000" class="text-mono fill-N1" style="text-anchor:middle;font-size:35px">CHICKEN&#39;S PLAN</text></g><g id="Approach road"><g class="shape" ><rect x="29.000000" y="0.000000" width="171.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="114.500000" y="38.500000" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">APPROACH ROAD</text></g><g id="Cross road"><g class="shape" ><rect x="43.000000" y="166.000000" width="142.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="114.000000" y="204.500000" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">CROSS ROAD</text></g><g id="Make you wonder why"><g class="shape" ><rect x="0.000000" y="332.000000" width="228.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="114.000000" y="370.500000" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">MAKE YOU WONDER WHY</text></g><g id="(Approach road -&gt; Cross road)[0]"><marker id="mk-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" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 114.000000 68.000000 C 114.000000 106.000000 114.000000 126.000000 114.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-552645845)" /></g><g id="(Cross road -&gt; Make you wonder why)[0]"><path d="M 114.000000 234.000000 C 114.000000 272.000000 114.000000 292.000000 114.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-552645845)" /></g><mask id="d2-552645845" maskUnits="userSpaceOnUse" x="-132" y="-166" width="492" height="665">
</mask></g><g style="animation: d2Transition-d2-2597568289-3 5600ms infinite" class="d2-2597568289" width="492" height="665" viewBox="-132 -166 492 665"><rect x="-132.000000" y="-166.000000" width="492.000000" height="665.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="&#34;Chicken&#39;s plan&#34;"><g class="shape" ></g><text x="114.000000" y="-30.000000" class="text-mono fill-N1" style="text-anchor:middle;font-size:35px">CHICKEN&#39;S PLAN</text></g><g id="Approach road"><g class="shape" ><rect x="29.000000" y="0.000000" width="171.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="114.500000" y="38.500000" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">APPROACH ROAD</text></g><g id="Cross road"><g class="shape" ><rect x="43.000000" y="166.000000" width="142.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="114.000000" y="204.500000" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">CROSS ROAD</text></g><g id="Make you wonder why"><g class="shape" ><rect x="0.000000" y="332.000000" width="228.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="114.000000" y="370.500000" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">MAKE YOU WONDER WHY</text></g><g id="(Approach road -&gt; Cross road)[0]"><marker id="mk-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" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 114.000000 68.000000 C 114.000000 106.000000 114.000000 126.000000 114.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-552645845)" /></g><g id="(Cross road -&gt; Make you wonder why)[0]"><path d="M 114.000000 234.000000 C 114.000000 272.000000 114.000000 292.000000 114.000000 328.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-552645845)" /></g><mask id="d2-552645845" maskUnits="userSpaceOnUse" x="-132" y="-166" width="492" height="665">
<rect x="-132" y="-166" width="492" height="665" fill="white"></rect>
<rect x="-31.000000" y="-65.000000" width="290" height="45" fill="rgba(0,0,0,0.75)"></rect>
<rect x="51.500000" y="22.500000" width="126" height="21" fill="rgba(0,0,0,0.75)"></rect>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

160
e2etests-cli/testdata/TestCLI_E2E/vars-config.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 77 KiB

117
e2etests/testdata/txtar.txt vendored
View file

@ -47,3 +47,120 @@ without.tableEx -> with.tableEx
without.classEx -> with.classEx
without.codeEx -> with.codeEx
without.mdEx -> with.mdEx
-- theme-overrides --
direction: right
vars: {
d2-config: {
theme-overrides: {
B1: "#2E7D32"
B2: "#66BB6A"
B3: "#A5D6A7"
B4: "#C5E1A5"
B5: "#E6EE9C"
B6: "#FFF59D"
AA2: "#0D47A1"
AA4: "#42A5F5"
AA5: "#90CAF9"
AB4: "#F44336"
AB5: "#FFCDD2"
N1: "#2E2E2E"
N2: "#2E2E2E"
N3: "#595959"
N4: "#858585"
N5: "#B1B1B1"
N6: "#DCDCDC"
N7: "#DCDCDC"
}
dark-theme-overrides: {
B1: "#2E7D32"
B2: "#66BB6A"
B3: "#A5D6A7"
B4: "#C5E1A5"
B5: "#E6EE9C"
B6: "#FFF59D"
AA2: "#0D47A1"
AA4: "#42A5F5"
AA5: "#90CAF9"
AB4: "#F44336"
AB5: "#FFCDD2"
N1: "#2E2E2E"
N2: "#2E2E2E"
N3: "#595959"
N4: "#858585"
N5: "#B1B1B1"
N6: "#DCDCDC"
N7: "#DCDCDC"
}
}
}
logs: {
shape: page
style.multiple: true
}
user: User {shape: person}
network: Network {
tower: Cell Tower {
satellites: {
shape: stored_data
style.multiple: true
}
satellites -> transmitter
satellites -> transmitter
satellites -> transmitter
transmitter
}
processor: Data Processor {
storage: Storage {
shape: cylinder
style.multiple: true
}
}
portal: Online Portal {
UI
}
tower.transmitter -> processor: phone logs
}
server: API Server
user -> network.tower: Make call
network.processor -> server
network.processor -> server
network.processor -> server
server -> logs
server -> logs
server -> logs: persist
server -> network.portal.UI: display
user -> network.portal.UI: access {
style.stroke-dash: 3
}
costumes: {
shape: sql_table
id: int {constraint: primary_key}
silliness: int
monster: int
last_updated: timestamp
}
monsters: {
shape: sql_table
id: int {constraint: primary_key}
movie: string
weight: int
last_updated: timestamp
}
costumes.monster -> monsters.id

1690
e2etests/testdata/txtar/theme-overrides/dagre/board.exp.json generated vendored Normal file
View file

File diff suppressed because it is too large Load diff

124
e2etests/testdata/txtar/theme-overrides/dagre/sketch.exp.svg vendored Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 38 KiB

1468
e2etests/testdata/txtar/theme-overrides/elk/board.exp.json generated vendored Normal file
View file

File diff suppressed because it is too large Load diff

124
e2etests/testdata/txtar/theme-overrides/elk/sketch.exp.svg vendored Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 37 KiB