Update SVG diagrams for dark docs background

freekmurze · claude · freekmurze · commit 1a4bcbfe9e2b · 2026-02-16T16:07:37.000+01:00
Remove font-family declarations so text inherits from the page.
Adjust colors to work on the dark bg-gray-900 docs theme.

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/docs/images/flexible-cache-timeline.svg b/docs/images/flexible-cache-timeline.svg
@@ -1,17 +1,17 @@
 <svg viewBox="0 0 560 132" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect x="0" y="8" width="300" height="42" rx="6" fill="#f3f4f6" stroke="#e5e7eb" stroke-width="1" />
-    <rect x="300" y="8" width="150" height="42" rx="6" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" stroke-dasharray="4 3" />
-    <rect x="450" y="8" width="110" height="42" rx="6" fill="#fff" stroke="#e5e7eb" stroke-width="1" />
-    <text x="150" y="29" text-anchor="middle" dominant-baseline="central" fill="#1a1a1a" font-size="13" font-weight="500" font-family="Inter, sans-serif">Fresh (lifetime)</text>
-    <text x="375" y="29" text-anchor="middle" dominant-baseline="central" fill="#6b7280" font-size="13" font-weight="500" font-family="Inter, sans-serif">Grace</text>
-    <text x="505" y="29" text-anchor="middle" dominant-baseline="central" fill="#9ca3af" font-size="13" font-family="Inter, sans-serif">Expired</text>
-    <text x="0" y="72" fill="#9ca3af" font-size="11" font-family="JetBrains Mono, monospace">0</text>
-    <text x="300" y="72" text-anchor="middle" fill="#9ca3af" font-size="11" font-family="JetBrains Mono, monospace">lifetime</text>
-    <text x="450" y="72" text-anchor="middle" fill="#9ca3af" font-size="11" font-family="JetBrains Mono, monospace">lifetime + grace</text>
-    <text x="150" y="96" text-anchor="middle" fill="#6b7280" font-size="11" font-family="Inter, sans-serif">Served from server cache</text>
-    <text x="150" y="113" text-anchor="middle" fill="#6b7280" font-size="11" font-family="Inter, sans-serif">Controller doesn't run</text>
-    <text x="375" y="96" text-anchor="middle" fill="#6b7280" font-size="11" font-family="Inter, sans-serif">Stale sent to browser</text>
-    <text x="375" y="113" text-anchor="middle" fill="#1a1a1a" font-size="11" font-weight="600" font-family="Inter, sans-serif">Controller runs via defer</text>
-    <text x="505" y="96" text-anchor="middle" fill="#9ca3af" font-size="11" font-family="Inter, sans-serif">No cache</text>
-    <text x="505" y="113" text-anchor="middle" fill="#9ca3af" font-size="11" font-family="Inter, sans-serif">Browser waits</text>
+    <rect x="0" y="8" width="300" height="42" rx="6" fill="#1f2937" stroke="#374151" stroke-width="1" />
+    <rect x="300" y="8" width="150" height="42" rx="6" fill="#1f2937" stroke="#6b7280" stroke-width="1" stroke-dasharray="4 3" />
+    <rect x="450" y="8" width="110" height="42" rx="6" fill="none" stroke="#374151" stroke-width="1" />
+    <text x="150" y="29" text-anchor="middle" dominant-baseline="central" fill="#f3f4f6" font-size="13" font-weight="500">Fresh (lifetime)</text>
+    <text x="375" y="29" text-anchor="middle" dominant-baseline="central" fill="#9ca3af" font-size="13" font-weight="500">Grace</text>
+    <text x="505" y="29" text-anchor="middle" dominant-baseline="central" fill="#6b7280" font-size="13">Expired</text>
+    <text x="0" y="72" fill="#6b7280" font-size="11">0</text>
+    <text x="300" y="72" text-anchor="middle" fill="#6b7280" font-size="11">lifetime</text>
+    <text x="450" y="72" text-anchor="middle" fill="#6b7280" font-size="11">lifetime + grace</text>
+    <text x="150" y="96" text-anchor="middle" fill="#9ca3af" font-size="11">Served from server cache</text>
+    <text x="150" y="113" text-anchor="middle" fill="#9ca3af" font-size="11">Controller doesn't run</text>
+    <text x="375" y="96" text-anchor="middle" fill="#9ca3af" font-size="11">Stale sent to browser</text>
+    <text x="375" y="113" text-anchor="middle" fill="#f3f4f6" font-size="11" font-weight="600">Controller runs via defer</text>
+    <text x="505" y="96" text-anchor="middle" fill="#6b7280" font-size="11">No cache</text>
+    <text x="505" y="113" text-anchor="middle" fill="#6b7280" font-size="11">Browser waits</text>
 </svg>
diff --git a/docs/images/grace-period.svg b/docs/images/grace-period.svg
@@ -1,32 +1,32 @@
 <svg viewBox="0 0 560 310" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect x="20" y="0" width="100" height="24" rx="12" fill="#f3f4f6" stroke="#e5e7eb" stroke-width="1" />
-    <text x="70" y="12" text-anchor="middle" dominant-baseline="central" fill="#1a1a1a" font-size="10" font-weight="600" letter-spacing="0.03em" font-family="Inter, sans-serif">BROWSER</text>
-    <rect x="210" y="0" width="140" height="24" rx="12" fill="#f3f4f6" stroke="#e5e7eb" stroke-width="1" />
-    <text x="280" y="12" text-anchor="middle" dominant-baseline="central" fill="#1a1a1a" font-size="10" font-weight="600" letter-spacing="0.03em" font-family="Inter, sans-serif">SERVER CACHE</text>
-    <rect x="440" y="0" width="80" height="24" rx="12" fill="#f3f4f6" stroke="#e5e7eb" stroke-width="1" />
-    <text x="480" y="12" text-anchor="middle" dominant-baseline="central" fill="#1a1a1a" font-size="10" font-weight="600" letter-spacing="0.03em" font-family="Inter, sans-serif">SERVER</text>
-    <line x1="70" y1="28" x2="70" y2="300" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="4 3" />
-    <line x1="280" y1="28" x2="280" y2="300" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="4 3" />
-    <line x1="480" y1="28" x2="480" y2="300" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="4 3" />
-    <line x1="74" y1="60" x2="272" y2="60" stroke="#d1d5db" stroke-width="1.5" />
-    <polygon points="268,56 268,64 276,60" fill="#d1d5db" />
-    <text x="175" y="52" text-anchor="middle" fill="#6b7280" font-size="11" font-family="Inter, sans-serif">request</text>
-    <line x1="276" y1="100" x2="78" y2="100" stroke="#1a1a1a" stroke-width="1.5" />
-    <polygon points="82,96 82,104 74,100" fill="#1a1a1a" />
-    <text x="175" y="92" text-anchor="middle" fill="#1a1a1a" font-size="11" font-weight="600" font-family="Inter, sans-serif">stale response — instant!</text>
-    <line x1="284" y1="100" x2="472" y2="100" stroke="#d1d5db" stroke-width="1.5" stroke-dasharray="4 3" />
-    <polygon points="468,96 468,104 476,100" fill="#d1d5db" />
-    <text x="383" y="92" text-anchor="middle" fill="#9ca3af" font-size="11" font-style="italic" font-family="Inter, sans-serif">defer: regenerate</text>
-    <rect x="474" y="106" width="12" height="36" rx="2" fill="#f3f4f6" stroke="#e5e7eb" stroke-width="1" />
-    <line x1="476" y1="152" x2="288" y2="152" stroke="#d1d5db" stroke-width="1.5" />
-    <polygon points="292,148 292,156 284,152" fill="#d1d5db" />
-    <text x="383" y="144" text-anchor="middle" fill="#6b7280" font-size="11" font-family="Inter, sans-serif">fresh result cached</text>
-    <line x1="20" y1="192" x2="540" y2="192" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="2 4" />
-    <text x="280" y="208" text-anchor="middle" fill="#9ca3af" font-size="10" font-style="italic" font-family="Inter, sans-serif">later — next visitor</text>
-    <line x1="74" y1="238" x2="272" y2="238" stroke="#d1d5db" stroke-width="1.5" />
-    <polygon points="268,234 268,242 276,238" fill="#d1d5db" />
-    <text x="175" y="230" text-anchor="middle" fill="#6b7280" font-size="11" font-family="Inter, sans-serif">request</text>
-    <line x1="276" y1="275" x2="78" y2="275" stroke="#1a1a1a" stroke-width="1.5" />
-    <polygon points="82,271 82,279 74,275" fill="#1a1a1a" />
-    <text x="175" y="267" text-anchor="middle" fill="#1a1a1a" font-size="11" font-weight="600" font-family="Inter, sans-serif">fresh response — instant!</text>
+    <rect x="20" y="0" width="100" height="24" rx="12" fill="#1f2937" stroke="#374151" stroke-width="1" />
+    <text x="70" y="12" text-anchor="middle" dominant-baseline="central" fill="#f3f4f6" font-size="10" font-weight="600" letter-spacing="0.03em">BROWSER</text>
+    <rect x="210" y="0" width="140" height="24" rx="12" fill="#1f2937" stroke="#374151" stroke-width="1" />
+    <text x="280" y="12" text-anchor="middle" dominant-baseline="central" fill="#f3f4f6" font-size="10" font-weight="600" letter-spacing="0.03em">SERVER CACHE</text>
+    <rect x="440" y="0" width="80" height="24" rx="12" fill="#1f2937" stroke="#374151" stroke-width="1" />
+    <text x="480" y="12" text-anchor="middle" dominant-baseline="central" fill="#f3f4f6" font-size="10" font-weight="600" letter-spacing="0.03em">SERVER</text>
+    <line x1="70" y1="28" x2="70" y2="300" stroke="#374151" stroke-width="1" stroke-dasharray="4 3" />
+    <line x1="280" y1="28" x2="280" y2="300" stroke="#374151" stroke-width="1" stroke-dasharray="4 3" />
+    <line x1="480" y1="28" x2="480" y2="300" stroke="#374151" stroke-width="1" stroke-dasharray="4 3" />
+    <line x1="74" y1="60" x2="272" y2="60" stroke="#6b7280" stroke-width="1.5" />
+    <polygon points="268,56 268,64 276,60" fill="#6b7280" />
+    <text x="175" y="52" text-anchor="middle" fill="#9ca3af" font-size="11">request</text>
+    <line x1="276" y1="100" x2="78" y2="100" stroke="#f3f4f6" stroke-width="1.5" />
+    <polygon points="82,96 82,104 74,100" fill="#f3f4f6" />
+    <text x="175" y="92" text-anchor="middle" fill="#f3f4f6" font-size="11" font-weight="600">stale response — instant!</text>
+    <line x1="284" y1="100" x2="472" y2="100" stroke="#6b7280" stroke-width="1.5" stroke-dasharray="4 3" />
+    <polygon points="468,96 468,104 476,100" fill="#6b7280" />
+    <text x="383" y="92" text-anchor="middle" fill="#6b7280" font-size="11" font-style="italic">defer: regenerate</text>
+    <rect x="474" y="106" width="12" height="36" rx="2" fill="#1f2937" stroke="#374151" stroke-width="1" />
+    <line x1="476" y1="152" x2="288" y2="152" stroke="#6b7280" stroke-width="1.5" />
+    <polygon points="292,148 292,156 284,152" fill="#6b7280" />
+    <text x="383" y="144" text-anchor="middle" fill="#9ca3af" font-size="11">fresh result cached</text>
+    <line x1="20" y1="192" x2="540" y2="192" stroke="#374151" stroke-width="1" stroke-dasharray="2 4" />
+    <text x="280" y="208" text-anchor="middle" fill="#6b7280" font-size="10" font-style="italic">later — next visitor</text>
+    <line x1="74" y1="238" x2="272" y2="238" stroke="#6b7280" stroke-width="1.5" />
+    <polygon points="268,234 268,242 276,238" fill="#6b7280" />
+    <text x="175" y="230" text-anchor="middle" fill="#9ca3af" font-size="11">request</text>
+    <line x1="276" y1="275" x2="78" y2="275" stroke="#f3f4f6" stroke-width="1.5" />
+    <polygon points="82,271 82,279 74,275" fill="#f3f4f6" />
+    <text x="175" y="267" text-anchor="middle" fill="#f3f4f6" font-size="11" font-weight="600">fresh response — instant!</text>
 </svg>
diff --git a/docs/images/regular-cache-expiry.svg b/docs/images/regular-cache-expiry.svg
@@ -1,25 +1,25 @@
 <svg viewBox="0 0 560 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect x="20" y="0" width="100" height="24" rx="12" fill="#f3f4f6" stroke="#e5e7eb" stroke-width="1" />
-    <text x="70" y="12" text-anchor="middle" dominant-baseline="central" fill="#1a1a1a" font-size="10" font-weight="600" letter-spacing="0.03em" font-family="Inter, sans-serif">BROWSER</text>
-    <rect x="210" y="0" width="140" height="24" rx="12" fill="#f3f4f6" stroke="#e5e7eb" stroke-width="1" />
-    <text x="280" y="12" text-anchor="middle" dominant-baseline="central" fill="#1a1a1a" font-size="10" font-weight="600" letter-spacing="0.03em" font-family="Inter, sans-serif">SERVER CACHE</text>
-    <rect x="440" y="0" width="80" height="24" rx="12" fill="#f3f4f6" stroke="#e5e7eb" stroke-width="1" />
-    <text x="480" y="12" text-anchor="middle" dominant-baseline="central" fill="#1a1a1a" font-size="10" font-weight="600" letter-spacing="0.03em" font-family="Inter, sans-serif">SERVER</text>
-    <line x1="70" y1="28" x2="70" y2="196" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="4 3" />
-    <line x1="280" y1="28" x2="280" y2="196" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="4 3" />
-    <line x1="480" y1="28" x2="480" y2="196" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="4 3" />
-    <line x1="74" y1="56" x2="272" y2="56" stroke="#d1d5db" stroke-width="1.5" />
-    <polygon points="268,52 268,60 276,56" fill="#d1d5db" />
-    <text x="175" y="48" text-anchor="middle" fill="#6b7280" font-size="11" font-family="Inter, sans-serif">request</text>
-    <line x1="284" y1="92" x2="472" y2="92" stroke="#d1d5db" stroke-width="1.5" stroke-dasharray="4 3" />
-    <polygon points="468,88 468,96 476,92" fill="#d1d5db" />
-    <text x="383" y="84" text-anchor="middle" fill="#9ca3af" font-size="11" font-family="Inter, sans-serif">cache expired, generate fresh response</text>
-    <rect x="474" y="98" width="12" height="36" rx="2" fill="#f3f4f6" stroke="#e5e7eb" stroke-width="1" />
-    <text x="175" y="120" text-anchor="middle" fill="#9ca3af" font-size="11" font-style="italic" font-family="Inter, sans-serif">browser waits...</text>
-    <line x1="476" y1="144" x2="288" y2="144" stroke="#d1d5db" stroke-width="1.5" />
-    <polygon points="292,140 292,148 284,144" fill="#d1d5db" />
-    <text x="383" y="136" text-anchor="middle" fill="#6b7280" font-size="11" font-family="Inter, sans-serif">fresh response</text>
-    <line x1="276" y1="180" x2="78" y2="180" stroke="#1a1a1a" stroke-width="1.5" />
-    <polygon points="82,176 82,184 74,180" fill="#1a1a1a" />
-    <text x="175" y="172" text-anchor="middle" fill="#1a1a1a" font-size="11" font-weight="600" font-family="Inter, sans-serif">fresh response</text>
+    <rect x="20" y="0" width="100" height="24" rx="12" fill="#1f2937" stroke="#374151" stroke-width="1" />
+    <text x="70" y="12" text-anchor="middle" dominant-baseline="central" fill="#f3f4f6" font-size="10" font-weight="600" letter-spacing="0.03em">BROWSER</text>
+    <rect x="210" y="0" width="140" height="24" rx="12" fill="#1f2937" stroke="#374151" stroke-width="1" />
+    <text x="280" y="12" text-anchor="middle" dominant-baseline="central" fill="#f3f4f6" font-size="10" font-weight="600" letter-spacing="0.03em">SERVER CACHE</text>
+    <rect x="440" y="0" width="80" height="24" rx="12" fill="#1f2937" stroke="#374151" stroke-width="1" />
+    <text x="480" y="12" text-anchor="middle" dominant-baseline="central" fill="#f3f4f6" font-size="10" font-weight="600" letter-spacing="0.03em">SERVER</text>
+    <line x1="70" y1="28" x2="70" y2="196" stroke="#374151" stroke-width="1" stroke-dasharray="4 3" />
+    <line x1="280" y1="28" x2="280" y2="196" stroke="#374151" stroke-width="1" stroke-dasharray="4 3" />
+    <line x1="480" y1="28" x2="480" y2="196" stroke="#374151" stroke-width="1" stroke-dasharray="4 3" />
+    <line x1="74" y1="56" x2="272" y2="56" stroke="#6b7280" stroke-width="1.5" />
+    <polygon points="268,52 268,60 276,56" fill="#6b7280" />
+    <text x="175" y="48" text-anchor="middle" fill="#9ca3af" font-size="11">request</text>
+    <line x1="284" y1="92" x2="472" y2="92" stroke="#6b7280" stroke-width="1.5" stroke-dasharray="4 3" />
+    <polygon points="468,88 468,96 476,92" fill="#6b7280" />
+    <text x="383" y="84" text-anchor="middle" fill="#6b7280" font-size="11">cache expired, generate fresh response</text>
+    <rect x="474" y="98" width="12" height="36" rx="2" fill="#1f2937" stroke="#374151" stroke-width="1" />
+    <text x="175" y="120" text-anchor="middle" fill="#6b7280" font-size="11" font-style="italic">browser waits...</text>
+    <line x1="476" y1="144" x2="288" y2="144" stroke="#6b7280" stroke-width="1.5" />
+    <polygon points="292,140 292,148 284,144" fill="#6b7280" />
+    <text x="383" y="136" text-anchor="middle" fill="#9ca3af" font-size="11">fresh response</text>
+    <line x1="276" y1="180" x2="78" y2="180" stroke="#f3f4f6" stroke-width="1.5" />
+    <polygon points="82,176 82,184 74,180" fill="#f3f4f6" />
+    <text x="175" y="172" text-anchor="middle" fill="#f3f4f6" font-size="11" font-weight="600">fresh response</text>
 </svg>
diff --git a/docs/images/regular-vs-flexible.svg b/docs/images/regular-vs-flexible.svg
@@ -1,21 +1,21 @@
 <svg viewBox="0 0 560 220" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <text x="0" y="16" fill="#1a1a1a" font-size="14" font-weight="600" font-family="Inter, sans-serif">Regular cache</text>
-    <rect x="0" y="28" width="340" height="34" rx="6" fill="#f3f4f6" stroke="#e5e7eb" stroke-width="1" />
-    <rect x="340" y="28" width="220" height="34" rx="6" fill="#fff" stroke="#e5e7eb" stroke-width="1" />
-    <text x="170" y="45" text-anchor="middle" dominant-baseline="central" fill="#1a1a1a" font-size="12" font-family="Inter, sans-serif">Cached on server</text>
-    <text x="450" y="45" text-anchor="middle" dominant-baseline="central" fill="#9ca3af" font-size="12" font-family="Inter, sans-serif">Expired</text>
-    <line x1="420" y1="76" x2="420" y2="64" stroke="#9ca3af" stroke-width="2" />
-    <polygon points="416,65 424,65 420,61" fill="#9ca3af" />
-    <text x="420" y="89" text-anchor="middle" fill="#6b7280" font-size="11" font-weight="600" font-family="Inter, sans-serif">browser waits</text>
-    <text x="0" y="124" fill="#1a1a1a" font-size="14" font-weight="600" font-family="Inter, sans-serif">Flexible cache</text>
-    <rect x="0" y="136" width="300" height="34" rx="6" fill="#f3f4f6" stroke="#e5e7eb" stroke-width="1" />
-    <rect x="300" y="136" width="150" height="34" rx="6" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" stroke-dasharray="4 3" />
-    <rect x="450" y="136" width="110" height="34" rx="6" fill="#fff" stroke="#e5e7eb" stroke-width="1" />
-    <text x="150" y="153" text-anchor="middle" dominant-baseline="central" fill="#1a1a1a" font-size="12" font-family="Inter, sans-serif">Cached on server</text>
-    <text x="375" y="153" text-anchor="middle" dominant-baseline="central" fill="#6b7280" font-size="12" font-family="Inter, sans-serif">Grace</text>
-    <text x="505" y="153" text-anchor="middle" dominant-baseline="central" fill="#9ca3af" font-size="12" font-family="Inter, sans-serif">Expired</text>
-    <line x1="375" y1="184" x2="375" y2="172" stroke="#1a1a1a" stroke-width="2" />
-    <polygon points="371,173 379,173 375,169" fill="#1a1a1a" />
-    <text x="375" y="197" text-anchor="middle" fill="#1a1a1a" font-size="11" font-weight="600" font-family="Inter, sans-serif">still instant!</text>
-    <text x="375" y="209" text-anchor="middle" fill="#9ca3af" font-size="10" font-family="Inter, sans-serif">server regenerates via defer</text>
+    <text x="0" y="16" fill="#f3f4f6" font-size="14" font-weight="600">Regular cache</text>
+    <rect x="0" y="28" width="340" height="34" rx="6" fill="#1f2937" stroke="#374151" stroke-width="1" />
+    <rect x="340" y="28" width="220" height="34" rx="6" fill="none" stroke="#374151" stroke-width="1" />
+    <text x="170" y="45" text-anchor="middle" dominant-baseline="central" fill="#f3f4f6" font-size="12">Cached on server</text>
+    <text x="450" y="45" text-anchor="middle" dominant-baseline="central" fill="#6b7280" font-size="12">Expired</text>
+    <line x1="420" y1="76" x2="420" y2="64" stroke="#6b7280" stroke-width="2" />
+    <polygon points="416,65 424,65 420,61" fill="#6b7280" />
+    <text x="420" y="89" text-anchor="middle" fill="#9ca3af" font-size="11" font-weight="600">browser waits</text>
+    <text x="0" y="124" fill="#f3f4f6" font-size="14" font-weight="600">Flexible cache</text>
+    <rect x="0" y="136" width="300" height="34" rx="6" fill="#1f2937" stroke="#374151" stroke-width="1" />
+    <rect x="300" y="136" width="150" height="34" rx="6" fill="#1f2937" stroke="#6b7280" stroke-width="1" stroke-dasharray="4 3" />
+    <rect x="450" y="136" width="110" height="34" rx="6" fill="none" stroke="#374151" stroke-width="1" />
+    <text x="150" y="153" text-anchor="middle" dominant-baseline="central" fill="#f3f4f6" font-size="12">Cached on server</text>
+    <text x="375" y="153" text-anchor="middle" dominant-baseline="central" fill="#9ca3af" font-size="12">Grace</text>
+    <text x="505" y="153" text-anchor="middle" dominant-baseline="central" fill="#6b7280" font-size="12">Expired</text>
+    <line x1="375" y1="184" x2="375" y2="172" stroke="#f3f4f6" stroke-width="2" />
+    <polygon points="371,173 379,173 375,169" fill="#f3f4f6" />
+    <text x="375" y="197" text-anchor="middle" fill="#f3f4f6" font-size="11" font-weight="600">still instant!</text>
+    <text x="375" y="209" text-anchor="middle" fill="#6b7280" font-size="10">server regenerates via defer</text>
 </svg>
