From b1818eaee2ba31bee000de4bc0af3b9d02b1553f Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Fri, 10 Feb 2023 10:58:14 +0530
Subject: [PATCH 1/7] Push

---
 sites/svelte.dev/package-lock.json            | 102 ++++++++----------
 sites/svelte.dev/package.json                 |   2 +-
 sites/svelte.dev/src/routes/+layout.svelte    |   9 --
 .../src/routes/_components/Section.svelte     |   2 +-
 .../_components/Supporters/index.svelte       |   8 +-
 .../_components/WhosUsingSvelte/index.svelte  |   9 +-
 sites/svelte.dev/src/routes/blog/+page.svelte |  23 ++--
 .../src/routes/blog/[slug]/+page.svelte       |  32 +++---
 .../src/routes/examples/[slug]/+page.svelte   |   9 +-
 .../examples/[slug]/_TableOfContents.svelte   |  13 +--
 .../src/routes/tutorial/[slug]/+page.svelte   |  18 ++--
 11 files changed, 106 insertions(+), 121 deletions(-)

diff --git a/sites/svelte.dev/package-lock.json b/sites/svelte.dev/package-lock.json
index 904b8c3fe463..a97a8360f7c1 100644
--- a/sites/svelte.dev/package-lock.json
+++ b/sites/svelte.dev/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@supabase/supabase-js": "^2.7.1",
-        "@sveltejs/repl": "0.0.3",
+        "@sveltejs/repl": "^0.1.0",
         "cookie": "^0.5.0",
         "devalue": "^4.2.3",
         "do-not-zip": "^1.0.0",
@@ -1113,6 +1113,11 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@rollup/browser": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@rollup/browser/-/browser-3.14.0.tgz",
+      "integrity": "sha512-D/3w26Hwu4LIR2yv7x1olI7gC6pHzzQAK2MqvA4YUCDJwP50PnAyefYyHH1OgBicV840pyARtm+TFdm5sIzZrQ=="
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
@@ -1256,32 +1261,23 @@
       }
     },
     "node_modules/@sveltejs/repl": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.0.3.tgz",
-      "integrity": "sha512-IcJa1SjS6ZopT4hpCA3iGmcQ6fn44M7GPLiSDeWQwVvRc7npyCoNB6G9POwsWxFdsBV1gzCHTmEnmOOpFsRnmQ==",
-      "dependencies": {
-        "@sveltejs/site-kit": "2.1.4",
-        "acorn": "^8.7.0",
-        "codemirror": "^5.65.1",
-        "estree-walker": "^3.0.1",
-        "rollup": "^2.67.0",
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.1.0.tgz",
+      "integrity": "sha512-P8/PKjAipBeqfht3z7UhibbE0xijXpHKev7aV3er4/IA/Wgvosn4C2J0bDG0M/jd7zvXRUhH9nLPqv3d6CRnwA==",
+      "dependencies": {
+        "@rollup/browser": "^3.10.0",
+        "@sveltejs/site-kit": "3.2.2",
+        "acorn": "^8.8.2",
+        "codemirror": "5.65.1",
+        "estree-walker": "^3.0.3",
         "svelte-json-tree": "^1.0.0",
         "yootils": "^0.3.1"
       }
     },
-    "node_modules/@sveltejs/repl/node_modules/@sveltejs/site-kit": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-2.1.4.tgz",
-      "integrity": "sha512-PxpbiCWYXJ320abc6ucp3AXhh6YCggf6ea+EVA6W+wCBe45UFoChfoeQYeD6sQxPZN25XntoS4clZeYnt9H93Q==",
-      "dependencies": {
-        "golden-fleece": "^1.0.9"
-      }
-    },
     "node_modules/@sveltejs/site-kit": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-3.2.2.tgz",
-      "integrity": "sha512-HBLtfNdLr5Ykl8i8CvJcYjib7zMIJupg4T/omplp3ccpgpiUh26tk71vRG1+a6yMkfbfy0ShoPb9uwNril5cnw==",
-      "dev": true
+      "integrity": "sha512-HBLtfNdLr5Ykl8i8CvJcYjib7zMIJupg4T/omplp3ccpgpiUh26tk71vRG1+a6yMkfbfy0ShoPb9uwNril5cnw=="
     },
     "node_modules/@sveltejs/vite-plugin-svelte": {
       "version": "2.0.2",
@@ -1616,9 +1612,9 @@
       "dev": true
     },
     "node_modules/codemirror": {
-      "version": "5.65.11",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.11.tgz",
-      "integrity": "sha512-Gp62g2eKSCHYt10axmGhKq3WoJSvVpvhXmowNq7pZdRVowwtvBR/hi2LSP5srtctKkRT33T6/n8Kv1UGp7JW4A=="
+      "version": "5.65.1",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.1.tgz",
+      "integrity": "sha512-s6aac+DD+4O2u1aBmdxhB7yz2XU7tG3snOyQ05Kxifahz7hoxnfxIRHxiCSEv3TUC38dIVH8G+lZH9UWSfGQxA=="
     },
     "node_modules/color": {
       "version": "4.2.3",
@@ -2109,6 +2105,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -2194,11 +2191,6 @@
       "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
       "dev": true
     },
-    "node_modules/golden-fleece": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/golden-fleece/-/golden-fleece-1.0.9.tgz",
-      "integrity": "sha512-YSwLaGMOgSBx9roJlNLL12c+FRiw7VECphinc6mGucphc/ZxTHgdEz6gmJqH6NOzYEd/yr64hwjom5pZ+tJVpg=="
-    },
     "node_modules/graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -3151,6 +3143,9 @@
       "version": "2.79.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
       "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -4706,6 +4701,11 @@
       "dev": true,
       "optional": true
     },
+    "@rollup/browser": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@rollup/browser/-/browser-3.14.0.tgz",
+      "integrity": "sha512-D/3w26Hwu4LIR2yv7x1olI7gC6pHzzQAK2MqvA4YUCDJwP50PnAyefYyHH1OgBicV840pyARtm+TFdm5sIzZrQ=="
+    },
     "@rollup/pluginutils": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
@@ -4820,34 +4820,23 @@
       }
     },
     "@sveltejs/repl": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.0.3.tgz",
-      "integrity": "sha512-IcJa1SjS6ZopT4hpCA3iGmcQ6fn44M7GPLiSDeWQwVvRc7npyCoNB6G9POwsWxFdsBV1gzCHTmEnmOOpFsRnmQ==",
-      "requires": {
-        "@sveltejs/site-kit": "2.1.4",
-        "acorn": "^8.7.0",
-        "codemirror": "^5.65.1",
-        "estree-walker": "^3.0.1",
-        "rollup": "^2.67.0",
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.1.0.tgz",
+      "integrity": "sha512-P8/PKjAipBeqfht3z7UhibbE0xijXpHKev7aV3er4/IA/Wgvosn4C2J0bDG0M/jd7zvXRUhH9nLPqv3d6CRnwA==",
+      "requires": {
+        "@rollup/browser": "^3.10.0",
+        "@sveltejs/site-kit": "3.2.2",
+        "acorn": "^8.8.2",
+        "codemirror": "5.65.1",
+        "estree-walker": "^3.0.3",
         "svelte-json-tree": "^1.0.0",
         "yootils": "^0.3.1"
-      },
-      "dependencies": {
-        "@sveltejs/site-kit": {
-          "version": "2.1.4",
-          "resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-2.1.4.tgz",
-          "integrity": "sha512-PxpbiCWYXJ320abc6ucp3AXhh6YCggf6ea+EVA6W+wCBe45UFoChfoeQYeD6sQxPZN25XntoS4clZeYnt9H93Q==",
-          "requires": {
-            "golden-fleece": "^1.0.9"
-          }
-        }
       }
     },
     "@sveltejs/site-kit": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-3.2.2.tgz",
-      "integrity": "sha512-HBLtfNdLr5Ykl8i8CvJcYjib7zMIJupg4T/omplp3ccpgpiUh26tk71vRG1+a6yMkfbfy0ShoPb9uwNril5cnw==",
-      "dev": true
+      "integrity": "sha512-HBLtfNdLr5Ykl8i8CvJcYjib7zMIJupg4T/omplp3ccpgpiUh26tk71vRG1+a6yMkfbfy0ShoPb9uwNril5cnw=="
     },
     "@sveltejs/vite-plugin-svelte": {
       "version": "2.0.2",
@@ -5104,9 +5093,9 @@
       "dev": true
     },
     "codemirror": {
-      "version": "5.65.11",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.11.tgz",
-      "integrity": "sha512-Gp62g2eKSCHYt10axmGhKq3WoJSvVpvhXmowNq7pZdRVowwtvBR/hi2LSP5srtctKkRT33T6/n8Kv1UGp7JW4A=="
+      "version": "5.65.1",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.1.tgz",
+      "integrity": "sha512-s6aac+DD+4O2u1aBmdxhB7yz2XU7tG3snOyQ05Kxifahz7hoxnfxIRHxiCSEv3TUC38dIVH8G+lZH9UWSfGQxA=="
     },
     "color": {
       "version": "4.2.3",
@@ -5495,6 +5484,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "optional": true
     },
     "function-bind": {
@@ -5564,11 +5554,6 @@
       "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
       "dev": true
     },
-    "golden-fleece": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/golden-fleece/-/golden-fleece-1.0.9.tgz",
-      "integrity": "sha512-YSwLaGMOgSBx9roJlNLL12c+FRiw7VECphinc6mGucphc/ZxTHgdEz6gmJqH6NOzYEd/yr64hwjom5pZ+tJVpg=="
-    },
     "graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -6257,6 +6242,9 @@
       "version": "2.79.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
       "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "fsevents": "~2.3.2"
       }
diff --git a/sites/svelte.dev/package.json b/sites/svelte.dev/package.json
index 3ae104d38c1f..b7f7f67e6d27 100644
--- a/sites/svelte.dev/package.json
+++ b/sites/svelte.dev/package.json
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@supabase/supabase-js": "^2.7.1",
-    "@sveltejs/repl": "0.0.3",
+    "@sveltejs/repl": "^0.1.0",
     "cookie": "^0.5.0",
     "devalue": "^4.2.3",
     "do-not-zip": "^1.0.0",
diff --git a/sites/svelte.dev/src/routes/+layout.svelte b/sites/svelte.dev/src/routes/+layout.svelte
index 6d5c9da35915..0bcfd6a5f02a 100644
--- a/sites/svelte.dev/src/routes/+layout.svelte
+++ b/sites/svelte.dev/src/routes/+layout.svelte
@@ -84,15 +84,6 @@
 		}
 	}
 
-	/** Ukraine banner */
-	:root {
-		--ukr-footer-height: 48px;
-	}
-
-	main {
-		padding-bottom: var(--ukr-footer-height);
-	}
-
 	:global(.examples-container, .repl-outer, .tutorial-outer) {
 		height: calc(100vh - var(--nav-h) - var(--ukr-footer-height)) !important;
 	}
diff --git a/sites/svelte.dev/src/routes/_components/Section.svelte b/sites/svelte.dev/src/routes/_components/Section.svelte
index 95ffe9cb57f5..71f64891d8ed 100644
--- a/sites/svelte.dev/src/routes/_components/Section.svelte
+++ b/sites/svelte.dev/src/routes/_components/Section.svelte
@@ -5,7 +5,7 @@
 <style>
 	section {
 		padding: 10rem 0;
-		background: var(--background, white);
+		background: var(--background, var(--sk-back-2));
 	}
 
 	.inner {
diff --git a/sites/svelte.dev/src/routes/_components/Supporters/index.svelte b/sites/svelte.dev/src/routes/_components/Supporters/index.svelte
index 0993ce034427..a523e8819cfa 100644
--- a/sites/svelte.dev/src/routes/_components/Supporters/index.svelte
+++ b/sites/svelte.dev/src/routes/_components/Supporters/index.svelte
@@ -4,9 +4,7 @@
 	import donors from './donors.js';
 </script>
 
-<Section
-	--background="radial-gradient(circle at top right, rgb(230, 233, 236), rgb(244, 245, 247))"
->
+<Section>
 	<p class="intro">
 		Svelte is free and open source software, made possible by the work of hundreds of supporters.
 	</p>
@@ -50,7 +48,7 @@
 
 <style>
 	h3 {
-		color: var(--text);
+		color: var(--sk-text-2);
 	}
 
 	.intro {
@@ -112,7 +110,7 @@
 		}
 
 		.intro {
-			font-size: var(--h3);
+			font-size: var(--sk-text-m);
 		}
 
 		h3 {
diff --git a/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte b/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte
index 3d05bcd4b924..1a182121b063 100644
--- a/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte
+++ b/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte
@@ -35,7 +35,7 @@
 		align-items: center;
 		justify-content: center;
 		padding: 0;
-		color: var(--text);
+		color: var(--sk-text-2);
 		filter: grayscale(1) contrast(4) opacity(0.4) invert(var(--invert, 0));
 		grid-column: span 2;
 	}
@@ -73,4 +73,11 @@
 			--row-size: 5;
 		}
 	}
+
+	@media (prefers-color-scheme: dark) {
+		a {
+			--invert: 1;
+			filter: grayscale(1) contrast(4) opacity(0.7) invert(var(--invert, 0));
+		}
+	}
 </style>
diff --git a/sites/svelte.dev/src/routes/blog/+page.svelte b/sites/svelte.dev/src/routes/blog/+page.svelte
index 34aa0de56ec6..119cbd2e938e 100644
--- a/sites/svelte.dev/src/routes/blog/+page.svelte
+++ b/sites/svelte.dev/src/routes/blog/+page.svelte
@@ -35,8 +35,8 @@
 	.posts {
 		grid-template-columns: 1fr 1fr;
 		grid-gap: 1em;
-		min-height: calc(100vh - var(--nav-h));
-		padding: var(--top-offset) var(--side-nav) 6rem var(--side-nav);
+		min-height: calc(100vh - var(--sk-nav-height));
+		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
 		max-width: var(--main-width);
 		margin: 0 auto;
 	}
@@ -44,9 +44,9 @@
 	h2 {
 		display: inline-block;
 		margin: 3.2rem 0 0.4rem 0;
-		color: var(--text);
+		color: var(--sk-text-2);
 		max-width: 18em;
-		font-size: var(--h3);
+		font-size: var(--sk-text-m);
 		font-weight: 400;
 	}
 
@@ -59,14 +59,13 @@
 	.post:first-child h2 {
 		font-size: 4rem;
 		font-weight: 400;
-		color: var(--second);
+		color: var(--sk-text-2);
 	}
 
-	.post:first-child::before,
-	.post:nth-child(2)::before {
+	.post:where(:first-child, :nth-child(2))::before {
 		content: 'Latest post • ' attr(data-pubdate);
-		color: var(--flash);
-		font-size: var(--h6);
+		color: var(--sk-theme-3);
+		font-size: var(--sk-text-xs);
 		font-weight: 400;
 		letter-spacing: 0.05em;
 		text-transform: uppercase;
@@ -77,9 +76,9 @@
 	}
 
 	.post p {
-		font-size: var(--h5);
+		font-size: var(--sk-text-s);
 		max-width: 30em;
-		color: var(--second);
+		color: var(--sk-text-3);
 	}
 
 	.post > a {
@@ -88,6 +87,6 @@
 
 	.posts a:hover,
 	.posts a:hover > h2 {
-		color: var(--flash);
+		color: var(--sk-theme-3);
 	}
 </style>
diff --git a/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte b/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte
index af0b091a8cd2..51bba4054dd2 100644
--- a/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -35,7 +35,7 @@
 
 <style>
 	.post {
-		padding: var(--top-offset) var(--side-nav) 6rem var(--side-nav);
+		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
 		max-width: var(--main-width);
 		margin: 0 auto;
 	}
@@ -46,21 +46,21 @@
 	}
 
 	.standfirst {
-		font-size: var(--h4);
-		color: var(--second);
+		font-size: var(--sk-text-s);
+		color: var(--sk-text-3);
 		margin: 0 0 1em 0;
 	}
 
 	.byline {
 		margin: 0 0 6rem 0;
 		padding: 1.6rem 0 0 0;
-		border-top: var(--border-w) solid #6767785b;
-		font-size: var(--h6);
+		border-top: var(--sk-thick-border-width) solid #6767785b;
+		font-size: var(--sk-text-xs);
 		text-transform: uppercase;
 	}
 
 	.post h1 {
-		color: var(--second);
+		color: var(--sk-text-2);
 		max-width: 20em;
 		margin: 0 0 0.8rem 0;
 	}
@@ -68,8 +68,8 @@
 	.post :global(h2) {
 		margin: 2em 0 0.5em 0;
 		/* color: var(--second); */
-		color: var(--text);
-		font-size: var(--h3);
+		color: var(--sk-text-2);
+		font-size: var(--sk-text-m);
 		font-weight: 300;
 	}
 
@@ -82,7 +82,7 @@
 	}
 
 	.post :global(figcaption) {
-		color: var(--second);
+		color: var(--sk-theme-2);
 		text-align: left;
 	}
 
@@ -94,14 +94,14 @@
 		max-width: none;
 		border-left: 4px solid #eee;
 		background: #f9f9f9;
-		border-radius: 0 var(--border-r) var(--border-r) 0;
+		border-radius: 0 var(--sk-border-radius) var(--sk-border-radius) 0;
 	}
 
 	.post :global(code) {
 		padding: 0.3rem 0.8rem 0.3rem;
 		margin: 0 0.2rem;
 		top: -0.1rem;
-		background: var(--back-api);
+		background: var(--sk-back-4);
 	}
 
 	.post :global(pre) :global(code) {
@@ -115,7 +115,7 @@
 		float: right;
 		margin: 0 0 1em 1em;
 		width: 16rem;
-		color: var(--second);
+		color: var(--sk-theme-2);
 		z-index: 2;
 	}
 
@@ -127,12 +127,12 @@
 		width: 100%;
 		height: 420px;
 		margin: 2em 0;
-		border-radius: var(--border-r);
-		border: 0.8rem solid var(--second);
+		border-radius: var(--sk-border-radius);
+		border: 0.8rem solid var(--sk-theme-2);
 	}
 
 	.post :global(.anchor) {
-		top: calc((var(--h3) - 24px) / 2);
+		top: calc((var(--sk-text-m) - 24px) / 2);
 	}
 
 	.post :global(a) {
@@ -154,7 +154,7 @@
 
 	@media (min-width: 910px) {
 		.post :global(.max) {
-			width: calc(100vw - 2 * var(--side-nav));
+			width: calc(100vw - 2 * var(--sk-page-padding-side));
 			margin: 0 calc(var(--main-width) / 2 - 50vw);
 			text-align: center;
 		}
diff --git a/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte b/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte
index 04f001ac6397..42cf0f40d187 100644
--- a/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte
@@ -7,7 +7,7 @@
 	import {
 		mapbox_setup, // see site/content/examples/15-context/00-context-api
 		rollupUrl,
-		svelteUrl
+		svelteUrl,
 	} from '../../../config';
 	import TableOfContents from './_TableOfContents.svelte';
 
@@ -23,7 +23,7 @@
 	const clone = (file) => ({
 		name: file.name.replace(/.\w+$/, ''),
 		type: file.type,
-		source: file.content
+		source: file.content,
 	});
 
 	$: mobile = width < 768; // note: same as per media query below
@@ -43,7 +43,7 @@
 <h1 class="visually-hidden">Examples</h1>
 <div class="examples-container" bind:clientWidth={width}>
 	<div class="viewport offset-{offset}">
-		<TableOfContents {sections} active_section={data.example.slug} isLoading={$navigating} />
+		<TableOfContents {sections} active_section={data.example.slug} isLoading={!!$navigating} />
 		<div class="repl-container" class:loading={$navigating}>
 			<Repl
 				bind:this={repl}
@@ -64,7 +64,7 @@
 <style>
 	.examples-container {
 		position: relative;
-		height: calc(100vh - var(--nav-h));
+		height: calc(100vh - var(--sk-nav-height));
 		overflow: hidden;
 		padding: 0 0 42px 0;
 		box-sizing: border-box;
@@ -113,6 +113,7 @@
 			width: 100%;
 			height: 100%;
 			display: grid;
+			/* TODO */
 			grid-template-columns: var(--sidebar-mid-w) auto;
 			grid-auto-rows: 100%;
 			transition: none;
diff --git a/sites/svelte.dev/src/routes/examples/[slug]/_TableOfContents.svelte b/sites/svelte.dev/src/routes/examples/[slug]/_TableOfContents.svelte
index efac516053f0..d8760bb2e0bd 100644
--- a/sites/svelte.dev/src/routes/examples/[slug]/_TableOfContents.svelte
+++ b/sites/svelte.dev/src/routes/examples/[slug]/_TableOfContents.svelte
@@ -46,10 +46,11 @@
 	.examples-toc {
 		overflow-y: auto;
 		height: 100%;
-		border-right: 1px solid var(--second);
-		background-color: var(--second);
+		border-right: 1px solid var(--sk-back-4);
+		background-color: var(--sk-back-4);
 		color: white;
 		padding: 3rem 3rem 0 3rem;
+		margin: 0;
 	}
 
 	.examples-toc li {
@@ -61,7 +62,7 @@
 	.section-title {
 		display: block;
 		padding: 0 0 0.8rem 0;
-		font: 400 var(--h6) var(--font);
+		font: 400 var(--sk-text-xs) var(--sk-font);
 		text-transform: uppercase;
 		letter-spacing: 0.12em;
 		font-weight: 700;
@@ -88,7 +89,7 @@
 		display: flex;
 		flex: 1 1 auto;
 		position: relative;
-		color: var(--sidebar-text);
+		color: var(--sk-text-2);
 		border-bottom: none;
 		font-size: 1.6rem;
 		align-items: center;
@@ -97,7 +98,7 @@
 	}
 
 	a:hover {
-		color: white;
+		color: var(--sk-text-1);
 	}
 
 	.repl-link {
@@ -108,7 +109,7 @@
 	}
 
 	.thumbnail {
-		background-color: white;
+		background-color: var(--sk-back-1);
 		object-fit: contain;
 		width: 5rem;
 		height: 5rem;
diff --git a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
index 10f470dd5106..9810dc3a91a3 100644
--- a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
@@ -157,7 +157,7 @@
 <style>
 	.tutorial-outer {
 		position: relative;
-		height: calc(100vh - var(--nav-h));
+		height: calc(100vh - var(--sk-nav-height));
 		overflow: hidden;
 		padding: 0 0 42px 0;
 		box-sizing: border-box;
@@ -203,9 +203,9 @@
 		display: flex;
 		flex-direction: column;
 		height: 100%;
-		border-right: 1px solid var(--second);
-		background-color: var(--second);
-		color: var(--sidebar-text);
+		border-right: 1px solid var(--sk-back-4);
+		background-color: var(--sk-back-4);
+		color: var(--sk-text-2);
 	}
 
 	.chapter-markup {
@@ -217,7 +217,7 @@
 
 	.chapter-markup :global(h2) {
 		margin: 4rem 0 1.6rem 0;
-		font-size: var(--h3);
+		font-size: var(--sk-text-m);
 		line-height: 1;
 		font-weight: 400;
 		color: white;
@@ -230,7 +230,7 @@
 	.chapter-markup :global(a) {
 		transition: color 0.2s;
 		text-decoration: underline;
-		color: var(--sidebar-text);
+		color: var(--sk-text-2);
 	}
 
 	.chapter-markup :global(a:hover) {
@@ -243,11 +243,11 @@
 
 	.chapter-markup :global(blockquote) {
 		background-color: rgba(0, 0, 0, 0.17);
-		color: var(--sidebar-text);
+		color: var(--sk-text-2);
 	}
 
 	.chapter-markup::-webkit-scrollbar {
-		background-color: var(--second);
+		background-color: var(--sk-theme-2);
 		width: 8px;
 	}
 
@@ -259,7 +259,7 @@
 	.chapter-markup :global(p) > :global(code),
 	.chapter-markup :global(ul) :global(code) {
 		color: var(--sidebar-text);
-		background: rgba(0, 0, 0, 0.12);
+		background: var(--sk-code-bg);
 		padding: 0.2em 0.4em 0.3em;
 		white-space: nowrap;
 		position: relative;

From 250bfd02bbb643e518077fd9ce67557d91ce80ec Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Fri, 10 Feb 2023 12:03:40 +0530
Subject: [PATCH 2/7] Update svelte REPL

---
 sites/svelte.dev/package-lock.json            | 30 +++++++++----------
 sites/svelte.dev/package.json                 |  2 +-
 .../routes/(authed)/repl/[id]/+page.svelte    |  2 +-
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/sites/svelte.dev/package-lock.json b/sites/svelte.dev/package-lock.json
index a97a8360f7c1..494894c3ec3b 100644
--- a/sites/svelte.dev/package-lock.json
+++ b/sites/svelte.dev/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@supabase/supabase-js": "^2.7.1",
-        "@sveltejs/repl": "^0.1.0",
+        "@sveltejs/repl": "^0.1.2",
         "cookie": "^0.5.0",
         "devalue": "^4.2.3",
         "do-not-zip": "^1.0.0",
@@ -1114,9 +1114,9 @@
       }
     },
     "node_modules/@rollup/browser": {
-      "version": "3.14.0",
-      "resolved": "https://registry.npmjs.org/@rollup/browser/-/browser-3.14.0.tgz",
-      "integrity": "sha512-D/3w26Hwu4LIR2yv7x1olI7gC6pHzzQAK2MqvA4YUCDJwP50PnAyefYyHH1OgBicV840pyARtm+TFdm5sIzZrQ=="
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/@rollup/browser/-/browser-3.15.0.tgz",
+      "integrity": "sha512-uvteGT8QpNSxwrjFNXd/M1NGdHTqQn6KAK7+dxvelrZb+d3oFej4Fzo1CTkaSysF45J03TSLWMjM6nRzJfFdhA=="
     },
     "node_modules/@rollup/pluginutils": {
       "version": "5.0.2",
@@ -1261,11 +1261,11 @@
       }
     },
     "node_modules/@sveltejs/repl": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.1.0.tgz",
-      "integrity": "sha512-P8/PKjAipBeqfht3z7UhibbE0xijXpHKev7aV3er4/IA/Wgvosn4C2J0bDG0M/jd7zvXRUhH9nLPqv3d6CRnwA==",
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.1.2.tgz",
+      "integrity": "sha512-NsrBDQ82Ko8NGxGUA6ko/7acMM2WyJNA40/IP+cLp8ykcas5mwrqeiaPP4GmKM0olr3GHPwwxzVdEHcjx03a/Q==",
       "dependencies": {
-        "@rollup/browser": "^3.10.0",
+        "@rollup/browser": "^3.15.0",
         "@sveltejs/site-kit": "3.2.2",
         "acorn": "^8.8.2",
         "codemirror": "5.65.1",
@@ -4702,9 +4702,9 @@
       "optional": true
     },
     "@rollup/browser": {
-      "version": "3.14.0",
-      "resolved": "https://registry.npmjs.org/@rollup/browser/-/browser-3.14.0.tgz",
-      "integrity": "sha512-D/3w26Hwu4LIR2yv7x1olI7gC6pHzzQAK2MqvA4YUCDJwP50PnAyefYyHH1OgBicV840pyARtm+TFdm5sIzZrQ=="
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/@rollup/browser/-/browser-3.15.0.tgz",
+      "integrity": "sha512-uvteGT8QpNSxwrjFNXd/M1NGdHTqQn6KAK7+dxvelrZb+d3oFej4Fzo1CTkaSysF45J03TSLWMjM6nRzJfFdhA=="
     },
     "@rollup/pluginutils": {
       "version": "5.0.2",
@@ -4820,11 +4820,11 @@
       }
     },
     "@sveltejs/repl": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.1.0.tgz",
-      "integrity": "sha512-P8/PKjAipBeqfht3z7UhibbE0xijXpHKev7aV3er4/IA/Wgvosn4C2J0bDG0M/jd7zvXRUhH9nLPqv3d6CRnwA==",
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.1.2.tgz",
+      "integrity": "sha512-NsrBDQ82Ko8NGxGUA6ko/7acMM2WyJNA40/IP+cLp8ykcas5mwrqeiaPP4GmKM0olr3GHPwwxzVdEHcjx03a/Q==",
       "requires": {
-        "@rollup/browser": "^3.10.0",
+        "@rollup/browser": "^3.15.0",
         "@sveltejs/site-kit": "3.2.2",
         "acorn": "^8.8.2",
         "codemirror": "5.65.1",
diff --git a/sites/svelte.dev/package.json b/sites/svelte.dev/package.json
index b7f7f67e6d27..6466376467ae 100644
--- a/sites/svelte.dev/package.json
+++ b/sites/svelte.dev/package.json
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@supabase/supabase-js": "^2.7.1",
-    "@sveltejs/repl": "^0.1.0",
+    "@sveltejs/repl": "^0.1.2",
     "cookie": "^0.5.0",
     "devalue": "^4.2.3",
     "do-not-zip": "^1.0.0",
diff --git a/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte b/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte
index d288b41629a5..a75118ce9b94 100644
--- a/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte
+++ b/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte
@@ -41,7 +41,7 @@
 
 	afterNavigate(() => {
 		repl.set({
-			components: data.gist.components
+			components: data.gist.components,
 		});
 	});
 

From 152cc22806bacaa3697282f60198010e3f85ea4a Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Sat, 11 Feb 2023 03:09:34 +0530
Subject: [PATCH 3/7] Light mode fixes

---
 .../(authed)/repl/[id]/AppControls.svelte     | 10 ++++-----
 sites/svelte.dev/src/routes/+layout.svelte    |  9 ++++++++
 .../src/routes/_components/Demo.svelte        | 10 +++++----
 .../examples/[slug]/_TableOfContents.svelte   |  2 +-
 .../src/routes/tutorial/[slug]/+page.svelte   | 21 +++++++++++++------
 .../tutorial/[slug]/_TableOfContents.svelte   |  6 +++---
 6 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte b/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte
index ab497bbf0113..1a380f1f1267 100644
--- a/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte
+++ b/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte
@@ -243,8 +243,8 @@ export default app;`,
 		align-items: center;
 		justify-content: space-between;
 		padding: 0.6rem var(--side-nav);
-		background-color: var(--second);
-		color: white;
+		background-color: var(--sk-back-4);
+		color: var(--sk-text-1);
 		white-space: nowrap;
 		flex: 0;
 	}
@@ -256,9 +256,9 @@ export default app;`,
 		padding: 0.2em;
 		opacity: 0.7;
 		transition: opacity 0.3s;
-		font-family: var(--font);
+		font-family: var(--sk-font);
 		font-size: 1.6rem;
-		color: white;
+		color: var(--sk-text-1);
 		/* width: 1.6em;
 		height: 1.6em; */
 		line-height: 1;
@@ -280,7 +280,7 @@ export default app;`,
 		background: transparent;
 		border: none;
 		color: currentColor;
-		font-family: var(--font);
+		font-family: var(--sk-font);
 		font-size: 1.6rem;
 		opacity: 0.7;
 		outline: none;
diff --git a/sites/svelte.dev/src/routes/+layout.svelte b/sites/svelte.dev/src/routes/+layout.svelte
index 0bcfd6a5f02a..f5978a8b752d 100644
--- a/sites/svelte.dev/src/routes/+layout.svelte
+++ b/sites/svelte.dev/src/routes/+layout.svelte
@@ -52,6 +52,10 @@
 </main>
 
 <style>
+	:global(:root) {
+		color-scheme: light dark;
+	}
+
 	@media (max-width: 830px) {
 		:global(aside) {
 			z-index: 9999 !important;
@@ -84,6 +88,11 @@
 		}
 	}
 
+	:global(html, body) {
+		height: 100%;
+		width: 100%;
+	}
+
 	:global(.examples-container, .repl-outer, .tutorial-outer) {
 		height: calc(100vh - var(--nav-h) - var(--ukr-footer-height)) !important;
 	}
diff --git a/sites/svelte.dev/src/routes/_components/Demo.svelte b/sites/svelte.dev/src/routes/_components/Demo.svelte
index a113119660af..3dad67e71a84 100644
--- a/sites/svelte.dev/src/routes/_components/Demo.svelte
+++ b/sites/svelte.dev/src/routes/_components/Demo.svelte
@@ -17,12 +17,14 @@
 		{
 			id: 'reactive-assignments',
 			title: 'Reactivity',
-			description: 'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.',
+			description:
+				'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.',
 		},
 		{
 			id: 'svg-transitions',
 			title: 'Transitions',
-			description: 'Build beautiful UIs with a powerful, performant transition engine built right into the framework.',
+			description:
+				'Build beautiful UIs with a powerful, performant transition engine built right into the framework.',
 		},
 	];
 
@@ -102,8 +104,8 @@
 	}
 
 	button.selected {
-		background-color: white;
-		color: var(--sk-back-1);
+		background-color: var(--sk-back-1);
+		color: var(--sk-text-2);
 	}
 
 	.small-show {
diff --git a/sites/svelte.dev/src/routes/examples/[slug]/_TableOfContents.svelte b/sites/svelte.dev/src/routes/examples/[slug]/_TableOfContents.svelte
index d8760bb2e0bd..dc7d38874022 100644
--- a/sites/svelte.dev/src/routes/examples/[slug]/_TableOfContents.svelte
+++ b/sites/svelte.dev/src/routes/examples/[slug]/_TableOfContents.svelte
@@ -48,7 +48,7 @@
 		height: 100%;
 		border-right: 1px solid var(--sk-back-4);
 		background-color: var(--sk-back-4);
-		color: white;
+		color: var(--sk-text-2);
 		padding: 3rem 3rem 0 3rem;
 		margin: 0;
 	}
diff --git a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
index 9810dc3a91a3..2d0acbd5bf71 100644
--- a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
@@ -220,7 +220,7 @@
 		font-size: var(--sk-text-m);
 		line-height: 1;
 		font-weight: 400;
-		color: white;
+		color: var(--sk-text-2);
 	}
 
 	.chapter-markup :global(h2:first-child) {
@@ -234,7 +234,7 @@
 	}
 
 	.chapter-markup :global(a:hover) {
-		color: white;
+		color: var(--sk-text-1);
 	}
 
 	.chapter-markup :global(ul) {
@@ -258,7 +258,7 @@
 
 	.chapter-markup :global(p) > :global(code),
 	.chapter-markup :global(ul) :global(code) {
-		color: var(--sidebar-text);
+		color: var(--sk-code-base);
 		background: var(--sk-code-bg);
 		padding: 0.2em 0.4em 0.3em;
 		white-space: nowrap;
@@ -266,6 +266,15 @@
 		top: -0.1em;
 	}
 
+	.chapter-markup :global(:where(pre.language-markup)) {
+		background-color: var(--sk-code-bg);
+		color: var(--sk-code-base);
+		border-radius: 0.5rem;
+		padding: 1rem;
+		margin: 0 0 1rem;
+		font-size: 14px;
+	}
+
 	.controls {
 		border-top: 1px solid rgba(255, 255, 255, 0.15);
 		padding: 1em 0 0 0;
@@ -274,9 +283,9 @@
 	}
 
 	.show {
-		background: var(--prime);
+		background: var(--sk-theme-1);
 		padding: 0.3em 0.7em;
-		border-radius: var(--border-r);
+		border-radius: var(--sk-border-radius);
 		top: 0.1em;
 		position: relative;
 		font-size: var(--h5);
@@ -303,7 +312,7 @@
 	.improve-chapter a {
 		font-size: 14px;
 		text-decoration: none;
-		opacity: 0.3;
+		opacity: 0.6;
 		padding: 0 0.1em 0 1.2em;
 		background: no-repeat 0 50% url(/icons/edit.svg);
 		background-size: 1em 1em;
diff --git a/sites/svelte.dev/src/routes/tutorial/[slug]/_TableOfContents.svelte b/sites/svelte.dev/src/routes/tutorial/[slug]/_TableOfContents.svelte
index ab374dfc0738..4ae74865f10b 100644
--- a/sites/svelte.dev/src/routes/tutorial/[slug]/_TableOfContents.svelte
+++ b/sites/svelte.dev/src/routes/tutorial/[slug]/_TableOfContents.svelte
@@ -67,8 +67,8 @@
 		position: relative;
 		padding: 1em 0.5em;
 		font-weight: 300;
-		font-size: var(--h6);
-		color: white;
+		font-size: var(--sk-text-xs);
+		color: var(--sk-text-2);
 	}
 
 	a {
@@ -76,7 +76,7 @@
 		padding: 0.7em 0;
 		text-align: center;
 		opacity: 0.75;
-		color: white;
+		color: var(--sk-text-2);
 	}
 
 	a:hover {

From 5b26afe9be25d9236fb55809d81257b54cc6c819 Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Sun, 12 Feb 2023 13:53:03 +0530
Subject: [PATCH 4/7] Fox height issues

---
 sites/svelte.dev/src/config.js                           | 1 -
 sites/svelte.dev/src/routes/+layout.svelte               | 4 ++--
 sites/svelte.dev/src/routes/examples/[slug]/+page.svelte | 4 ++--
 sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte | 2 --
 4 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/sites/svelte.dev/src/config.js b/sites/svelte.dev/src/config.js
index f53f80abebaf..62527fc5bede 100644
--- a/sites/svelte.dev/src/config.js
+++ b/sites/svelte.dev/src/config.js
@@ -1,7 +1,6 @@
 // REPL props
 
 export const svelteUrl = `https://unpkg.com/svelte@3`;
-export const rollupUrl = `https://unpkg.com/rollup@1/dist/rollup.browser.js`;
 export const mapbox_setup = `window.MAPBOX_ACCESS_TOKEN = '${
 	import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
 }';`;
diff --git a/sites/svelte.dev/src/routes/+layout.svelte b/sites/svelte.dev/src/routes/+layout.svelte
index f5978a8b752d..879b1dcb5928 100644
--- a/sites/svelte.dev/src/routes/+layout.svelte
+++ b/sites/svelte.dev/src/routes/+layout.svelte
@@ -93,9 +93,9 @@
 		width: 100%;
 	}
 
-	:global(.examples-container, .repl-outer, .tutorial-outer) {
+	/* :global(.examples-container, .repl-outer, .tutorial-outer) {
 		height: calc(100vh - var(--nav-h) - var(--ukr-footer-height)) !important;
-	}
+	} */
 
 	:global(.toggle) {
 		bottom: var(--ukr-footer-height) !important;
diff --git a/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte b/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte
index 42cf0f40d187..6a12d3d0a361 100644
--- a/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/examples/[slug]/+page.svelte
@@ -6,7 +6,6 @@
 	import ScreenToggle from '$lib/components/ScreenToggle.svelte';
 	import {
 		mapbox_setup, // see site/content/examples/15-context/00-context-api
-		rollupUrl,
 		svelteUrl,
 	} from '../../../config';
 	import TableOfContents from './_TableOfContents.svelte';
@@ -14,8 +13,10 @@
 	/** @type {import('./$types').PageData} */
 	export let data;
 
+	/** @type {number} */
 	let width;
 	let offset = 1;
+	/** @type {import('@sveltejs/repl').default} */
 	let repl;
 
 	const { sections } = getContext('examples');
@@ -48,7 +49,6 @@
 			<Repl
 				bind:this={repl}
 				{svelteUrl}
-				{rollupUrl}
 				orientation={replOrientation}
 				fixed={mobile}
 				relaxed
diff --git a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
index 2d0acbd5bf71..283b2909423a 100644
--- a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
@@ -9,7 +9,6 @@
 
 	import {
 		mapbox_setup, // needed for context API tutorial
-		rollupUrl,
 		svelteUrl,
 	} from '../../../config.js';
 
@@ -138,7 +137,6 @@
 				<Repl
 					bind:this={repl}
 					{svelteUrl}
-					{rollupUrl}
 					orientation={mobile ? 'columns' : 'rows'}
 					fixed={mobile}
 					on:change={handle_change}

From e38321990dd0bb7974ee41cb6229c2f1158b64a6 Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Sun, 12 Feb 2023 14:16:39 +0530
Subject: [PATCH 5/7] Moar dark mode fixes

---
 .../src/routes/tutorial/[slug]/+page.svelte   | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
index 283b2909423a..8dc3feb76993 100644
--- a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
@@ -286,7 +286,7 @@
 		border-radius: var(--sk-border-radius);
 		top: 0.1em;
 		position: relative;
-		font-size: var(--h5);
+		font-size: var(--sk-text-s);
 		font-weight: 300;
 		color: rgba(255, 255, 255, 0.7);
 	}
@@ -308,14 +308,32 @@
 	}
 
 	.improve-chapter a {
+		color: var(--sk-text-2);
 		font-size: 14px;
 		text-decoration: none;
 		opacity: 0.6;
 		padding: 0 0.1em 0 1.2em;
+	}
+
+	.improve-chapter a::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+
+		height: 100%;
+		width: 1em;
+
 		background: no-repeat 0 50% url(/icons/edit.svg);
 		background-size: 1em 1em;
 	}
 
+	@media (prefers-color-scheme: light) {
+		.improve-chapter a::before {
+			filter: invert(1);
+		}
+	}
+
 	.improve-chapter a:hover {
 		opacity: 1;
 	}

From bfc3944b3efe3d8ffe77cfa5999cdfea5dba11c5 Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Sun, 12 Feb 2023 14:28:21 +0530
Subject: [PATCH 6/7] More changes

---
 sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
index 8dc3feb76993..becd7f797197 100644
--- a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
@@ -250,7 +250,7 @@
 	}
 
 	.chapter-markup::-webkit-scrollbar-thumb {
-		background-color: rgba(255, 255, 255, 0.7);
+		background-color: var(--sk-scrollbar);
 		border-radius: 1em;
 	}
 

From 5f819626d6cb314c53acfc8171134d3eaae458cc Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Sun, 12 Feb 2023 14:32:13 +0530
Subject: [PATCH 7/7] Fix zen mode height issue

---
 sites/svelte.dev/src/routes/+layout.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/sites/svelte.dev/src/routes/+layout.svelte b/sites/svelte.dev/src/routes/+layout.svelte
index 879b1dcb5928..c9f47cbd4057 100644
--- a/sites/svelte.dev/src/routes/+layout.svelte
+++ b/sites/svelte.dev/src/routes/+layout.svelte
@@ -101,9 +101,9 @@
 		bottom: var(--ukr-footer-height) !important;
 	}
 
-	:global(.zen-mode) {
+	/* :global(.zen-mode) {
 		height: calc(100vh - var(--ukr-footer-height)) !important;
-	}
+	} */
 
 	@media (max-width: 830px) {
 		:global(aside) {