paper pattern

ci/release/changelogs/next.md

@@ -1,5 +1,7 @@
 #### Features 🚀
 
+- `paper` is available as a `fill-pattern` option [#1070](https://github.com/terrastruct/d2/pull/1070)
+
 #### Improvements 🧹
 
 #### Bugfixes ⛑️

d2compiler/compile_test.go

@@ -259,7 +259,7 @@ containers: {
   }
 }
 `,
-			expErr: `d2/testdata/d2compiler/TestCompile/invalid-fill-pattern.d2:3:19: expected "fill-pattern" to be one of: dots, lines, grain`,
+			expErr: `d2/testdata/d2compiler/TestCompile/invalid-fill-pattern.d2:3:19: expected "fill-pattern" to be one of: dots, lines, grain, paper`,
 		},
 		{
 			name: "shape_unquoted_hex",

d2graph/d2graph.go

@@ -1586,6 +1586,7 @@ var FillPatterns = []string{
 	"dots",
 	"lines",
 	"grain",
+	"paper",
 }
 
 // BoardKeywords contains the keywords that create new boards.

d2renderers/d2sketch/sketch_test.go

@@ -1107,6 +1107,58 @@ something
 				}
 			`,
 		},
+		{
+			name: "paper-real",
+			script: `style.fill-pattern: paper
+style.fill: "#947A6D"
+NETWORK: {
+  style: {
+	  stroke: black
+    fill-pattern: dots
+    double-border: true
+    fill: "#E7E9EE"
+    font: mono
+  }
+  CELL TOWER: {
+		style: {
+			stroke: black
+			fill-pattern: dots
+			fill: "#F5F6F9"
+			font: mono
+		}
+		satellites: SATELLITES {
+			shape: stored_data
+			style: {
+				font: mono
+				fill: white
+				stroke: black
+				multiple: true
+			}
+		}
+
+		transmitter: TRANSMITTER {
+			style: {
+				font: mono
+				fill: white
+				stroke: black
+			}
+		}
+
+		satellites -> transmitter: SEND {
+			style.stroke: black
+			style.font: mono
+		}
+		satellites -> transmitter: SEND {
+			style.stroke: black
+			style.font: mono
+		}
+		satellites -> transmitter: SEND {
+			style.stroke: black
+			style.font: mono
+		}
+  }
+}
+`},
 		{
 			name: "dots-real",
 			script: `

d2renderers/d2svg/d2svg.go

@@ -68,6 +68,9 @@ var lines string
 //go:embed grain.txt
 var grain string
 
+//go:embed paper.txt
+var paper string
+
 type RenderOpts struct {
 	Pad         int
 	Sketch      bool
@@ -1798,7 +1801,7 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 	bufStr := buf.String()
 	patternDefs := ""
 	for _, pattern := range d2graph.FillPatterns {
-		if strings.Contains(bufStr, fmt.Sprintf("%s-overlay", pattern)) || diagram.Root.FillPattern != "" {
+		if strings.Contains(bufStr, fmt.Sprintf("%s-overlay", pattern)) || diagram.Root.FillPattern == pattern {
 			if patternDefs == "" {
 				fmt.Fprint(upperBuf, `<style type="text/css"><![CDATA[`)
 			}
@@ -1809,6 +1812,8 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 				patternDefs += lines
 			case "grain":
 				patternDefs += grain
+			case "paper":
+				patternDefs += paper
 			}
 			fmt.Fprint(upperBuf, fmt.Sprintf(`
 .%s-overlay {

e2etests/patterns_test.go

@@ -92,6 +92,35 @@ circle: {shape: "circle"; style.fill-pattern: dots}
 hexagon: {shape: "hexagon"; style.fill-pattern: dots}
 cloud: {shape: "cloud"; style.fill-pattern: dots}
 
+rectangle -> square -> page
+parallelogram -> document -> cylinder
+queue -> package -> step
+callout -> stored_data -> person
+diamond -> oval -> circle
+hexagon -> cloud
+`,
+		},
+		{
+			name: "paper",
+			script: `
+rectangle: {shape: "rectangle"; style.fill: "#8F5A3C"; style.fill-pattern: paper}
+square: {shape: "square"; style.fill: "#D0104C"; style.fill-pattern: paper}
+page: {shape: "page"; style.fill-pattern: paper}
+parallelogram: {shape: "parallelogram"; style.fill-pattern: paper}
+document: {shape: "document"; style.fill-pattern: paper}
+cylinder: {shape: "cylinder"; style.fill-pattern: paper}
+queue: {shape: "queue"; style.fill-pattern: paper}
+package: {shape: "package"; style.fill-pattern: paper}
+step: {shape: "step"; style.fill-pattern: paper}
+callout: {shape: "callout"; style.fill-pattern: paper}
+stored_data: {shape: "stored_data"; style.fill-pattern: paper}
+person: {shape: "person"; style.fill-pattern: paper}
+diamond: {shape: "diamond"; style.fill-pattern: paper}
+oval: {shape: "oval"; style.fill-pattern: paper}
+circle: {shape: "circle"; style.fill-pattern: paper}
+hexagon: {shape: "hexagon"; style.fill-pattern: paper}
+cloud: {shape: "cloud"; style.fill-pattern: paper}
+
 rectangle -> square -> page
 parallelogram -> document -> cylinder
 queue -> package -> step