diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go index 434b97bc2..3fb83496c 100644 --- a/d2renderers/d2svg/d2svg.go +++ b/d2renderers/d2svg/d2svg.go @@ -1732,23 +1732,31 @@ func drawShape(writer, appendixWriter io.Writer, diagramHash string, targetShape render = strings.ReplaceAll(render, "
", "
") 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 if inlineTheme != nil { - styles = append(styles, fmt.Sprintf(`color:%s`, d2themes.ResolveThemeColor(*inlineTheme, targetShape.Color))) + } else { + 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, ";") @@ -1948,6 +1956,7 @@ func EmbedFonts(buf *bytes.Buffer, diagramHash, source string, fontFamily *d2fon `class="text"`, `class="text `, `class="md"`, + `class="md `, }, fmt.Sprintf(` .%s .text { @@ -1967,7 +1976,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; diff --git a/d2renderers/d2svg/github-markdown.css b/d2renderers/d2svg/github-markdown.css index c271b67d7..53a7e2102 100644 --- 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; diff --git a/e2etests/testdata/txtar/c4-theme/dagre/board.exp.json b/e2etests/testdata/txtar/c4-theme/dagre/board.exp.json index 4b80ded31..b8a4d8dd5 100644 --- a/e2etests/testdata/txtar/c4-theme/dagre/board.exp.json +++ b/e2etests/testdata/txtar/c4-theme/dagre/board.exp.json @@ -3,7 +3,7 @@ "config": { "sketch": false, "themeID": 303, - "darkThemeID": null, + "darkThemeID": 200, "pad": null, "center": null, "layoutEngine": null diff --git a/e2etests/testdata/txtar/c4-theme/dagre/sketch.exp.svg b/e2etests/testdata/txtar/c4-theme/dagre/sketch.exp.svg index fb2279b45..e3cab1bd5 100644 --- a/e2etests/testdata/txtar/c4-theme/dagre/sketch.exp.svg +++ b/e2etests/testdata/txtar/c4-theme/dagre/sketch.exp.svg @@ -1,20 +1,20 @@ -

Personal Banking Customer

+

Personal Banking Customer

[person]

A customer of the bank, with personal bank accounts.

-

Internet Banking System

+

Internet Banking System

[Software System]

-

E-mail System

+

E-mail System

[Software System]

The internal Microsoft Exchange e-mail system.

-

Mainframe Banking System

+

Mainframe Banking System

[Software System]

Stores all of the core banking information about customers, accounts, transactions, etc.

-

Web Application

+

Web Application

[Container: Java and Spring MVC]

Delivers the static content and the Internet banking single page application.

-

Single-Page Application

+

Single-Page Application

[Container: JavaScript and Angular]

Provides all of the Internet banking functionality to customers via their web browser.

-

Mobile App

+

Mobile App

[Container: Xamarin]

Provides a limited subset of the Internet banking functionality to customers via their mobile device.

-

API Application

+

API Application

[Container: Java and Spring MVC]

Provides Internet banking functionality via a JSON/HTTPS API.

-

Database

+

Database

[Container: Oracle Database Schema]

Stores user registration information, hashed authentication credentials, access logs, etc.

-
 Visits bigbank.com/ib using[HTTPS]Delivers to the customer's web browserViews account balances, and makes payments usingViews account balances, and makes payments usingMakes API calls to[JSON/HTTPS]Makes API calls to[JSON/HTTPS]Makes API calls to[XML/HTTPS]Sends e-mails toSends e-mail using Reads from and writes to[SQL/TCP] +
 Visits bigbank.com/ib using[HTTPS]Delivers to the customer's web browserViews account balances, and makes payments usingViews account balances, and makes payments usingMakes API calls to[JSON/HTTPS]Makes API calls to[JSON/HTTPS]Makes API calls to[XML/HTTPS]Sends e-mails toSends e-mail using Reads from and writes to[SQL/TCP] diff --git a/e2etests/testdata/txtar/c4-theme/elk/board.exp.json b/e2etests/testdata/txtar/c4-theme/elk/board.exp.json index 4d6d3ccd8..a7c6cbe2f 100644 --- a/e2etests/testdata/txtar/c4-theme/elk/board.exp.json +++ b/e2etests/testdata/txtar/c4-theme/elk/board.exp.json @@ -3,7 +3,7 @@ "config": { "sketch": false, "themeID": 303, - "darkThemeID": null, + "darkThemeID": 200, "pad": null, "center": null, "layoutEngine": null diff --git a/e2etests/testdata/txtar/c4-theme/elk/sketch.exp.svg b/e2etests/testdata/txtar/c4-theme/elk/sketch.exp.svg index 46f088711..d6f366fc8 100644 --- a/e2etests/testdata/txtar/c4-theme/elk/sketch.exp.svg +++ b/e2etests/testdata/txtar/c4-theme/elk/sketch.exp.svg @@ -1,20 +1,20 @@ -

Personal Banking Customer

+

Personal Banking Customer

[person]

A customer of the bank, with personal bank accounts.

-

Internet Banking System

+

Internet Banking System

[Software System]

-

E-mail System

+

E-mail System

[Software System]

The internal Microsoft Exchange e-mail system.

-

Mainframe Banking System

+

Mainframe Banking System

[Software System]

Stores all of the core banking information about customers, accounts, transactions, etc.

-

Web Application

+

Web Application

[Container: Java and Spring MVC]

Delivers the static content and the Internet banking single page application.

-

Single-Page Application

+

Single-Page Application

[Container: JavaScript and Angular]

Provides all of the Internet banking functionality to customers via their web browser.

-

Mobile App

+

Mobile App

[Container: Xamarin]

Provides a limited subset of the Internet banking functionality to customers via their mobile device.

-

API Application

+

API Application

[Container: Java and Spring MVC]

Provides Internet banking functionality via a JSON/HTTPS API.

-

Database

+

Database

[Container: Oracle Database Schema]

Stores user registration information, hashed authentication credentials, access logs, etc.

-
 Visits bigbank.com/ib using[HTTPS]Delivers to the customer's web browserViews account balances, and makes payments usingViews account balances, and makes payments usingMakes API calls to[JSON/HTTPS]Makes API calls to[JSON/HTTPS]Makes API calls to[XML/HTTPS]Sends e-mails toSends e-mail using Reads from and writes to[SQL/TCP] +
 Visits bigbank.com/ib using[HTTPS]Delivers to the customer's web browserViews account balances, and makes payments usingViews account balances, and makes payments usingMakes API calls to[JSON/HTTPS]Makes API calls to[JSON/HTTPS]Makes API calls to[XML/HTTPS]Sends e-mails toSends e-mail using Reads from and writes to[SQL/TCP] diff --git a/e2etests/txtar.txt b/e2etests/txtar.txt index ac940b683..a9b843e26 100644 --- a/e2etests/txtar.txt +++ b/e2etests/txtar.txt @@ -1161,3 +1161,103 @@ customer4: |md | { shape: c4-person } + +-- c4-theme -- +vars: { + d2-config: { + theme-id: 303 + dark-theme-id: 200 + } +} + +customer: |md + ## Personal Banking Customer + [person] + + A customer of the bank, with personal bank accounts. +| { + shape: c4-person +} + +internet_banking_system: |md + ## Internet Banking System + [Software System] +| { + shape: rectangle + label.near: bottom-left +} + +internet_banking_system.web_app: |md + ## Web Application + [Container: Java and Spring MVC] + + Delivers the static content and the Internet banking single page application. +| { + shape: rectangle +} + +internet_banking_system.spa: |md + ## Single-Page Application + [Container: JavaScript and Angular] + + Provides all of the Internet banking functionality to customers via their web browser. +| { + shape: rectangle +} + +internet_banking_system.mobile_app: |md + ## Mobile App + [Container: Xamarin] + + Provides a limited subset of the Internet banking functionality to customers via their mobile device. +| { + shape: rectangle +} + +internet_banking_system.api_app: |md + ## API Application + [Container: Java and Spring MVC] + + Provides Internet banking functionality via a JSON/HTTPS API. +| { + shape: rectangle +} + +internet_banking_system.database: |md + ## Database + [Container: Oracle Database Schema] + + Stores user registration information, hashed authentication credentials, access logs, etc. +| { + shape: rectangle +} + +email_system: |md + ## E-mail System + [Software System] + + The internal Microsoft Exchange e-mail system. +| { + shape: rectangle +} + +mainframe: |md + ## Mainframe Banking System + [Software System] + + Stores all of the core banking information about customers, accounts, transactions, etc. +| { + shape: rectangle +} + +# Connections +customer -> internet_banking_system.web_app: "Visits bigbank.com/ib using\n[HTTPS]" +internet_banking_system.web_app -> internet_banking_system.spa: "Delivers to the customer's web browser" +customer -> internet_banking_system.spa: "Views account balances, and makes payments using" +customer -> internet_banking_system.mobile_app: "Views account balances, and makes payments using" +internet_banking_system.spa -> internet_banking_system.api_app: "Makes API calls to\n[JSON/HTTPS]" +internet_banking_system.mobile_app -> internet_banking_system.api_app: "Makes API calls to\n[JSON/HTTPS]" +internet_banking_system.api_app -> mainframe: "Makes API calls to\n[XML/HTTPS]" +customer -> email_system: "Sends e-mails to" +internet_banking_system.api_app -> email_system: "Sends e-mail using" +internet_banking_system.database <-> internet_banking_system.api_app: "Reads from and writes to\n[SQL/TCP]"