Merge pull request #198 from terrastruct/pre-0.6.3

0.6.3

ci/render.sh

@@ -9,6 +9,7 @@ _normal() {
 
 _bespoke() {
   sh_c d2 --theme=300 --dark-theme=200 -l elk -c --pad 0 ./static/bespoke-d2/terminal-theme.d2 ./static/img/generated/terminal-theme.svg2
+  sh_c d2 --theme=300 --dark-theme=200 -l elk -c --pad 0 ./static/bespoke-d2/theme-override.d2 ./static/img/generated/theme-override.svg2
   sh_c d2 --animate-interval=1400 -l elk -c --pad 0 ./static/bespoke-d2/animated.d2 ./static/img/generated/animated.svg2
   sh_c d2 --animate-interval=1400 -c --pad 0 ./static/bespoke-d2/chicken.d2 ./static/img/generated/chicken.svg2
   sh_c d2 --pad 50 ./static/bespoke-d2/tiktok.d2 ./static/img/generated/tiktok.pdf

docs/releases/0.6.3.md

@@ -0,0 +1,23 @@
+D2 0.6.3 allows you to make your own and customize existing D2 themes. Here's an example with some random color codes.
+
+<img width="321" alt="Screen Shot 2023-12-16 at 3 13 04 PM" src="https://github.com/terrastruct/d2/assets/3120367/106fbb18-4650-44ac-bb66-359ef99dca3b" />
+
+> See [docs](https://d2lang.com/tour/themes/#special-themes)
+
+> [Playground link](https://play.d2lang.com/?script=rJLNjqM6EIX3fopS7joo4S8KVxqJBHiNkYVrwIpjW7aTTNTi3UcGDEn3SL2ZBQt_Ltepc4o7NbaADwLA4m2r5C_eTUcA1-MVt-qOxnCGNmCA076AzX9xfaiSeBNY7Fmen055ubDEszKr8vKwsNSzc1bvy2xhmWd1XtfH88Jyz5qmyY7VhsywLEeVXZUeyv1mgWPLNC6zJlvh2PO4O5fNcX0_qTdpmiT5UjrJN825qmY7A_HfQCS6hzKXyXmLQoBTDzQhCUsdCsHdaza2pxoLsE4ZZD8ZdTRcuKfA6HoTjmuBBThzw1lsSttQaa_cOTTkU3fY_ni9LsCiZP-wZpxAScElglbGURH83HgBH7OlHn_TTskhPPDeQBvVorVqzcQpQzv8Ekj7FFwyNN-nMbdf445eZvYW3oWjRVH3SiII1VkyEHKzYVHzBBqNVZIAPDhzfQH7ZBfqfNd519Hrmq_0gtBSIb5UvaUV-Zho6-eZBEdz1hl1wS2jti8g8VJUc7Bo7t-1YtxqQZ-f6r2xyQW3jkynsBtNO_z_r6EOJPzF0XtuvuUqQP4EAAD__w%3D%3D&layout=elk&theme=1&)
+
+#### Features 🚀
+
+- Themes can be customized via `d2-config` vars. [#1777](https://github.com/terrastruct/d2/pull/1777)
+
+#### Improvements 🧹
+
+- Icons can be added for special objects (sql_table, class, code, markdown, latex). [#1774](https://github.com/terrastruct/d2/pull/1774)
+
+#### Bugfixes ⛑️
+
+- Fix importing files that override an existing value with an array. [#1762](https://github.com/terrastruct/d2/pull/1762)
+- Fixes missing unfilled triangle arrowheads when sketch flag is on. [#1763](https://github.com/terrastruct/d2/pull/1763)
+- Fixes a bug where the render target could be incorrect if the target path contains "index". [#1764](https://github.com/terrastruct/d2/pull/1764)
+- Fixes ELK layout with outside labels/icons. [#1776](https://github.com/terrastruct/d2/pull/1776)
+- Fixes a bug where an edge could become disconnected with dagre layout and direction right. [#1778](https://github.com/terrastruct/d2/pull/1778)

docs/releases/intro.md

@@ -2,9 +2,9 @@
 
 :::info Latest
 
-Version: [0.6.2](/releases/0.6.2) (released December 06, 2023)
+Version: [0.6.3](/releases/0.6.3) (released December 16, 2023)
 
-Downloads: [Assets](https://github.com/terrastruct/d2/releases/tag/v0.6.2)
+Downloads: [Assets](https://github.com/terrastruct/d2/releases/tag/v0.6.3)
 
 :::
 

docs/tour/themes.md

@@ -136,3 +136,49 @@ logs: {shape: page; style.multiple: true}
 
 network.data processor -> api server
 ```
+
+## Customizing themes
+
+You can override theme values to customize existing themes or replace them entirely with
+your own theme.
+
+This is controlled by two [configuration variables](/tour/vars#configuration-variables):
+
+- `theme-overrides`: replaces color codes for theme
+- `dark-theme-overrides`: replaces color codes for dark theme
+
+Adding this snippet to the above code results in the following diagram.
+
+```d2
+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"
+    }
+  }
+}
+```
+
+<div style={{width: "100%", margin: "0 auto"}} className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/theme-override.svg2')}}></div>
+
+### Color codes
+
+<img width={700} src={require('@site/static/img/color-code.png').default} alt="D2 color
+codes"/>
+
+:::info
+Not all color codes are currently used right now, but that may change in the future for
+new things that come to D2.
+:::

sidebars.js

@@ -168,6 +168,7 @@ const sidebars = {
       link: { type: "doc", id: "releases/intro" },
       items: [
         "releases/intro",
+        "releases/0.6.3",
         "releases/0.6.2",
         "releases/0.6.1",
         "releases/0.6.0",

static/bespoke-d2/theme-override.d2

@@ -0,0 +1,62 @@
+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"
+    }
+  }
+}
+network: {
+  cell tower: {
+    satellites: {
+      shape: stored_data
+      style.multiple: true
+    }
+
+    transmitter
+
+    satellites -> transmitter: send
+    satellites -> transmitter: send
+    satellites -> transmitter: send
+  }
+
+  online portal: {
+    ui: {shape: hexagon}
+  }
+
+  data processor: {
+    storage: {
+      shape: cylinder
+      style.multiple: true
+    }
+  }
+
+  cell tower.transmitter -> data processor.storage: phone logs
+}
+
+user: {
+  shape: person
+  width: 130
+}
+
+user -> network.cell tower: make call
+user -> network.online portal.ui: access {
+  style.stroke-dash: 3
+}
+
+api server -> network.online portal.ui: display
+api server -> logs: persist
+logs: {shape: page; style.multiple: true}
+
+network.data processor -> api server