docs: Use our own box model illustration

This one has a dark mode too.

5 files changed, 199 insertions, 1 deletions

diff --git a/docs/reference/gtk/coordinates.md b/docs/reference/gtk/coordinates.md
index 4ca85d5890..96f5f50aeb 100644
--- a/docs/reference/gtk/coordinates.md
+++ b/docs/reference/gtk/coordinates.md
@@ -16,7 +16,10 @@ ignored. The section will explain the details for the few cases when it is impor
 
 When it comes to rendering, GTK follows the CSS box model as far as practical.
 
-![](https://www.w3.org/TR/css-box-3/images/box.png)
+<picture>
+  <source srcset="box-model-dark.png" media="(prefers-color-scheme: dark)">
+  <img alt="Box Model" src="box-model-light.png">
+</picture>
 
 The CSS stylesheet that is in use determines the sizes (and appearance) of the
 margin, border and padding areas for each widget. The size of the content area
diff --git a/docs/reference/gtk/gtk4.toml.in b/docs/reference/gtk/gtk4.toml.in
index 477c618f76..3404a419a1 100644
--- a/docs/reference/gtk/gtk4.toml.in
+++ b/docs/reference/gtk/gtk4.toml.in
@@ -242,5 +242,7 @@ content_images = [
   "images/rich-list.png",
   "images/data-table.png",
   "images/navigation-sidebar.png",
+  "images/box-model-light.png",
+  "images/box-model-dark.png",
 ]
 urlmap_file = "urlmap.js"
diff --git a/docs/reference/gtk/images/box-model-dark.png b/docs/reference/gtk/images/box-model-dark.png
new file mode 100644
index 0000000000..eaf0c79beb
--- /dev/null
+++ b/docs/reference/gtk/images/box-model-dark.png
diff --git a/docs/reference/gtk/images/box-model-light.png b/docs/reference/gtk/images/box-model-light.png
new file mode 100644
index 0000000000..dd54a1526d
--- /dev/null
+++ b/docs/reference/gtk/images/box-model-light.png
diff --git a/docs/reference/gtk/images/box-model.svg b/docs/reference/gtk/images/box-model.svg
new file mode 100644
index 0000000000..dddc0c7b6e
--- /dev/null
+++ b/docs/reference/gtk/images/box-model.svg
@@ -0,0 +1,193 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="box-model.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.84096521"
+     inkscape:cx="265.76605"
+     inkscape:cy="312.14133"
+     inkscape:window-width="1920"
+     inkscape:window-height="1123"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="Arrow2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow2-4"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="Arrow2"
+       markerWidth="7.6999998"
+       markerHeight="5.5999999"
+       viewBox="0 0 7.7 5.6"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="arrow2L-7" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:10.58333333;stroke-dasharray:none"
+       id="rect234-0"
+       width="112.51476"
+       height="70.089249"
+       x="38.634876"
+       y="49.512993" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.487868;stroke-dasharray:none"
+       id="rect234"
+       width="146.21118"
+       height="103.37679"
+       x="21.283342"
+       y="33.173706" />
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:0.54387;stroke-dasharray:none"
+       id="rect234-3"
+       width="79.543648"
+       height="37.520485"
+       x="55.724121"
+       y="65.367287" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.5834px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none"
+       x="76.878265"
+       y="100.819"
+       id="text3935"><tspan
+         sodipodi:role="line"
+         id="tspan3933"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.5834px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.264583"
+         x="76.878265"
+         y="100.819">content</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.5834px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none"
+       x="77.072464"
+       y="111.58885"
+       id="text4767"><tspan
+         sodipodi:role="line"
+         id="tspan4765"
+         style="fill:#000000;fill-opacity:1;stroke-width:0.264583"
+         x="77.072464"
+         y="111.58885">padding</tspan><tspan
+         sodipodi:role="line"
+         style="fill:#000000;fill-opacity:1;stroke-width:0.264583"
+         x="77.072464"
+         y="124.8181"
+         id="tspan4769" /></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.5834px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none"
+       x="77.337868"
+       y="133.01045"
+       id="text4767-1"><tspan
+         sodipodi:role="line"
+         id="tspan8053"
+         x="77.337868"
+         y="133.01045">margin</tspan><tspan
+         sodipodi:role="line"
+         id="tspan8055"
+         x="77.337868"
+         y="146.2397"></tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.5834px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1"
+       x="77.311295"
+       y="123.22021"
+       id="text7028"><tspan
+         sodipodi:role="line"
+         id="tspan7026"
+         style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1"
+         x="77.311295"
+         y="123.22021">border</tspan></text>
+    <path
+       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow2)"
+       d="M 58.115912,67.846321 71.79645,67.813301"
+       id="path9563" />
+    <path
+       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow2-4)"
+       d="m 58.054931,67.806272 -0.03031,13.680545"
+       id="path9563-6"
+       inkscape:transform-center-x="0.99122989"
+       inkscape:transform-center-y="-10.282891" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.52785px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1"
+       x="74.660751"
+       y="69.01046"
+       id="text10129"><tspan
+         sodipodi:role="line"
+         id="tspan10127"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.52785px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;stroke-width:0.264583"
+         x="74.660751"
+         y="69.01046">X</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.52785px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1"
+       x="56.974892"
+       y="86.498825"
+       id="text10133"><tspan
+         sodipodi:role="line"
+         id="tspan10131"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.52785px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;stroke-width:0.264583"
+         x="56.974892"
+         y="86.498825">Y</tspan></text>
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1"
+       id="path10187"
+       cx="58.076889"
+       cy="67.895195"
+       r="0.2" />
+  </g>
+</svg>