From cef7b0e506375643797d601c543a6dc53b0a9fd6 Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Wed, 9 Oct 2024 15:14:47 -0600 Subject: [PATCH] use inline theme --- d2renderers/d2svg/appendix/appendix.go | 2 +- d2renderers/d2svg/d2svg.go | 4 ++-- d2themes/element.go | 15 +++++++++++++++ .../testdata/sanity/basic/dagre/sketch.exp.svg | 4 ++-- e2etests/testdata/sanity/basic/elk/sketch.exp.svg | 4 ++-- 5 files changed, 22 insertions(+), 7 deletions(-) diff --git a/d2renderers/d2svg/appendix/appendix.go b/d2renderers/d2svg/appendix/appendix.go index 8ebf19252..990739bc3 100644 --- a/d2renderers/d2svg/appendix/appendix.go +++ b/d2renderers/d2svg/appendix/appendix.go @@ -81,7 +81,7 @@ func Append(diagram *d2target.Diagram, ruler *textmeasure.Ruler, in []byte) []by viewboxHeight, _ := strconv.Atoi(viewboxSlice[3]) tl, br := diagram.BoundingBox() - separatorEl := d2themes.NewThemableElement("line") + separatorEl := d2themes.NewThemableElement("line", nil) separatorEl.X1 = float64(tl.X - PAD_SIDES) separatorEl.Y1 = float64(br.Y + PAD_TOP) separatorEl.X2 = float64(go2.IntMax(w, br.X) + PAD_SIDES) diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go index e3158621e..a0e2c14ad 100644 --- a/d2renderers/d2svg/d2svg.go +++ b/d2renderers/d2svg/d2svg.go @@ -1882,9 +1882,9 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) { var labelMasks []string markers := map[string]struct{}{} - // We only want to inline when no dark theme is specified, otherwise the inline style will override the CSS var inlineTheme *d2themes.Theme - if darkThemeID != nil { + // We only want to inline when no dark theme is specified, otherwise the inline style will override the CSS + if darkThemeID == nil { inlineTheme = go2.Pointer(d2themescatalog.Find(themeID)) inlineTheme.ApplyOverrides(opts.ThemeOverrides) } diff --git a/d2themes/element.go b/d2themes/element.go index 1802deba2..823723188 100644 --- a/d2themes/element.go +++ b/d2themes/element.go @@ -49,6 +49,8 @@ type ThemableElement struct { ClipPath string FillPattern string + + inlineTheme *Theme } func NewThemableElement(tag string, inlineTheme *Theme) *ThemableElement { @@ -89,6 +91,7 @@ func NewThemableElement(tag string, inlineTheme *Theme) *ThemableElement { "", "", "", + inlineTheme, } } @@ -177,6 +180,9 @@ func (el *ThemableElement) Render() string { // Add class {property}-{theme color} if the color is from a theme, set the property otherwise if color.IsThemeColor(el.Stroke) { class += fmt.Sprintf(" stroke-%s", el.Stroke) + if el.inlineTheme != nil { + out += fmt.Sprintf(` stroke="%s"`, ResolveThemeColor(*el.inlineTheme, el.Stroke)) + } } else if len(el.Stroke) > 0 { if color.IsGradient(el.Stroke) { el.Stroke = fmt.Sprintf("url('#%s')", color.UniqueGradientID(el.Stroke)) @@ -185,6 +191,9 @@ func (el *ThemableElement) Render() string { } if color.IsThemeColor(el.Fill) { class += fmt.Sprintf(" fill-%s", el.Fill) + if el.inlineTheme != nil { + out += fmt.Sprintf(` fill="%s"`, ResolveThemeColor(*el.inlineTheme, el.Fill)) + } } else if len(el.Fill) > 0 { if color.IsGradient(el.Fill) { el.Fill = fmt.Sprintf("url('#%s')", color.UniqueGradientID(el.Fill)) @@ -193,11 +202,17 @@ func (el *ThemableElement) Render() string { } if color.IsThemeColor(el.BackgroundColor) { class += fmt.Sprintf(" background-color-%s", el.BackgroundColor) + if el.inlineTheme != nil { + out += fmt.Sprintf(` background-color="%s"`, ResolveThemeColor(*el.inlineTheme, el.BackgroundColor)) + } } else if len(el.BackgroundColor) > 0 { out += fmt.Sprintf(` background-color="%s"`, el.BackgroundColor) } if color.IsThemeColor(el.Color) { class += fmt.Sprintf(" color-%s", el.Color) + if el.inlineTheme != nil { + out += fmt.Sprintf(` color="%s"`, ResolveThemeColor(*el.inlineTheme, el.Color)) + } } else if len(el.Color) > 0 { out += fmt.Sprintf(` color="%s"`, el.Color) } diff --git a/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg b/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg index b1b056c3f..3af46be3c 100644 --- a/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg +++ b/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg @@ -1,4 +1,4 @@ -ab + .d2-3922440645 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]>ab diff --git a/e2etests/testdata/sanity/basic/elk/sketch.exp.svg b/e2etests/testdata/sanity/basic/elk/sketch.exp.svg index cb15c89a6..3aa9b7c28 100644 --- a/e2etests/testdata/sanity/basic/elk/sketch.exp.svg +++ b/e2etests/testdata/sanity/basic/elk/sketch.exp.svg @@ -1,4 +1,4 @@ -ab + .d2-2281223062 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]>ab