Merge pull request #1194 from berniexie/1150/dark-terrastruct-flagship-theme

themes: add dark terrastruct flagship theme

ci/release/changelogs/next.md

@@ -2,6 +2,7 @@
 
 - Export diagrams to `.pptx` (PowerPoint)[#1139](https://github.com/terrastruct/d2/pull/1139)
 - Customize gap size in grid diagrams with `grid-gap`, `vertical-gap`, or `horizontal-gap` [#1178](https://github.com/terrastruct/d2/issues/1178)
+- New dark theme "Dark Terrastruct Flagship" with the theme ID of `201` [#1150](https://github.com/terrastruct/d2/issues/1150)
 
 #### Improvements 🧹
 
@@ -12,3 +13,4 @@
 - Fixes grid layouts not applying on objects with a constant near [#1173](https://github.com/terrastruct/d2/issues/1173)
 - Fixes markdown header rendering in firefox and safari [#1177](https://github.com/terrastruct/d2/issues/1177)
 - Fixes a grid layout panic when there are fewer objects than rows [#1189](https://github.com/terrastruct/d2/issues/1189)
+- Fixes an issue where PNG exports that were too large were crashing [#1093](https://github.com/terrastruct/d2/issues/1093)

d2themes/d2themes.go

@@ -78,6 +78,16 @@ var WarmNeutral = Neutral{
 }
 
 var DarkNeutral = Neutral{
+	N1: "#F4F6FA",
+	N2: "#BBBEC9",
+	N3: "#868A96",
+	N4: "#676D7D",
+	N5: "#3A3D49",
+	N6: "#191C28",
+	N7: "#000410",
+}
+
+var DarkMauveNeutral = Neutral{
 	N1: "#CDD6F4",
 	N2: "#BAC2DE",
 	N3: "#A6ADC8",

d2themes/d2themescatalog/catalog.go

@@ -11,8 +11,8 @@ var LightCatalog = []d2themes.Theme{
 	NeutralDefault,
 	NeutralGrey,
 	FlagshipTerrastruct,
-	MixedBerryBlue,
 	CoolClassics,
+	MixedBerryBlue,
 	GrapeSoda,
 	Aubergine,
 	ColorblindClear,
@@ -29,6 +29,7 @@ var LightCatalog = []d2themes.Theme{
 
 var DarkCatalog = []d2themes.Theme{
 	DarkMauve,
+	DarkFlagshipTerrastruct,
 }
 
 func Find(id int64) d2themes.Theme {

d2themes/d2themescatalog/dark_flagship_terrastruct.go

@@ -0,0 +1,25 @@
+package d2themescatalog
+
+import "oss.terrastruct.com/d2/d2themes"
+
+var DarkFlagshipTerrastruct = d2themes.Theme{
+	ID:   201,
+	Name: "Dark Flagship Terrastruct",
+	Colors: d2themes.ColorPalette{
+		Neutrals: d2themes.DarkNeutral,
+
+		B1: "#F4F6FA",
+		B2: "#6B8AFB",
+		B3: "#3733E9",
+		B4: "#070B67",
+		B5: "#0B1197",
+		B6: "#3733E9",
+
+		AA2: "#8B5DEE",
+		AA4: "#4918B1",
+		AA5: "#7240DD",
+
+		AB4: "#00607C",
+		AB5: "#01799D",
+	},
+}

d2themes/d2themescatalog/dark_mauve.go

@@ -6,7 +6,7 @@ var DarkMauve = d2themes.Theme{
 	ID:   200,
 	Name: "Dark Mauve",
 	Colors: d2themes.ColorPalette{
-		Neutrals: d2themes.DarkNeutral,
+		Neutrals: d2themes.DarkMauveNeutral,
 
 		B1: "#CBA6f7",
 		B2: "#CBA6f7",

e2etests/themes_test.go

@@ -9,6 +9,113 @@ import (
 
 func testThemes(t *testing.T) {
 	tcs := []testCase{
+		{
+			name:    "dark terrastruct flagship",
+			themeID: d2themescatalog.DarkFlagshipTerrastruct.ID,
+			script: `
+network: {
+  cell tower: {
+		style.text-transform: capitalize
+		satellites: {
+			shape: stored_data
+      style.multiple: true
+		}
+
+		transmitter : {
+			style.text-transform: uppercase
+		}
+
+		satellites -> transmitter: SEnD {
+			style.text-transform: lowercase
+		}
+		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
+users: {
+	shape: sql_table
+	id: int
+	name: string
+	email: string
+	password: string
+	last_login: datetime
+}
+
+products: {
+	shape: class
+	id: int
+	price: decimal
+	sku: string
+	name: string
+}
+markdown: |md
+  # A tale
+  - of
+  - two cities
+|
+code: |go
+package main
+
+import (
+	"fmt"
+)
+
+type City struct {
+	Name       string
+	Population int
+}
+
+func tellTale(city1, city2 City) {
+	fmt.Printf("There were two cities, %s and %s.\n", city1.Name, city2.Name)
+	fmt.Printf("%s had a population of %d.\n", city1.Name, city1.Population)
+	fmt.Printf("%s had a population of %d.\n", city2.Name, city2.Population)
+	fmt.Println("Their tales were intertwined, and their people shared many adventures.")
+}
+
+func main() {
+	city1 := City{Name: "CityA", Population: 1000000}
+	city2 := City{Name: "CityB", Population: 1200000}
+
+	tellTale(city1, city2)
+}
+|
+
+markdown -> code -> ex
+ex: |tex
+	\\displaylines{x = a + b \\\\ y = b + c}
+	\\sum_{k=1}^{n} h_{k} \\int_{0}^{1} \\bigl(\\partial_{k} f(x_{k-1}+t h_{k} e_{k}) -\\partial_{k} f(a)\\bigr) \\,dt
+|
+`,
+		},
 		{
 			name:    "terminal",
 			themeID: d2themescatalog.Terminal.ID,